サンプルページ
|
サンプルページStep 8
アジサイの花は綺麗ですね。 |
|
|
サンプルページのソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー2<br>
</font>
<table width="534" border="2" height="112"
cellpadding="5" cellspacing="4">
<tr>
<td width="200" height="245"><font size="4">アジサイの花は綺麗ですね。</font></td>
<td width="348" height="245"><img src="hana01.jpg"
width="348" height="245"></td>
</tr>
</table>
</div>
</body>
</html> |
サンプルページ2
|
|
サンプルページ2のソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー2<br>
</font>
<table border="0" cellpadding="0"
cellspacing="0">
<tr>
<td bgcolor="#66FFFF" width="50" height="50">
<div align="center">1</div>
</td>
<td width="50" height="50"> </td>
<td rowspan="5"><img src="hana01.jpg"
width="348" height="245"></td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#3300FF" width="50" height="50">
<div align="center">2</div>
</td>
</tr>
<tr>
<td bgcolor="#FF99CC" width="50" height="50">
<div align="center">3</div>
</td>
<td width="50" height="50"> </td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#FFCCFF" width="50" height="50">
<div align="center">4</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99" width="50" height="50">
<div align="center">5</div>
</td>
<td width="50" height="50"> </td>
</tr>
</table>
</div>
</body>
</html> |
テーブルを使ったレイアウトのポイント
|
<table
border="0" cellpadding="0" cellspacing="0">
全て"0"に、することによってテーブルの存在を表示画面から消すことができます。 |
サンプルページ3(リンクの追加)
|
|
サンプルページ3のソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep 8ー3<br>
</font>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#66FFFF" width="50" height="50">
<div align="center"><a href="#">1</a></div>
</td>
<td width="50" height="50"> </td>
<td rowspan="5"><a href="#"><img
src="hana01.jpg" width="348" height="245"
border="0"></a></td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#3300FF" width="50" height="50">
<div align="center"><a href="#">2</a></div>
</td>
</tr>
<tr>
<td bgcolor="#FF99CC" width="50" height="50">
<div align="center"><a href="#">3</a></div>
</td>
<td width="50" height="50"> </td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td bgcolor="#FFCCFF" width="50" height="50">
<div align="center"><a href="#">4</a></div>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99" width="50" height="50">
<div align="center"><a href="#">5</a></div>
</td>
<td width="50" height="50"> </td>
</tr>
</table>
</div>
</body>
</html> |
ソースの説明
|
<a
href="#">1</a> |
「"#"」にはジャンプ先URLを記述します。
|
|