サンプルページ解説１

１． ホームページの土台を作る　　　　　　 本解説の仕上がり予定ページ
　 　 まず、<html>、<head>、<meta>、 <body>などの、「ページを宣言するタグ」を記述します。

HTMLソース ブラウザ画面表示
<html>
<head>
　<meta http-equiv="content-type"
　　content="text/html; charset=Shift_JIS">
　　　<title>サンプルページ</title> 　　　　･･･①
</head>
<body>
　演習用サンプルページ 　　　　　 　　　　　･･･②
</body>
</html>
①サンプルページ - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
演習用サンプルページ　･･･②
　
　
　
　

　 ・タイトルバーに表示される文字①は、<title>タグで記述します。
　 ・画面に表示される文字②は、<body>～<body>タグの中に記述します。

２． ページの見出し文字と背景を変える　　　　　　
　 <body>の属性で、背景に画像を嵌め込み、画面の文字の大きさと色を、<font>で変えます。

HTMLソース ブラウザ画面表示
<html><head>
　 <meta http-equiv="content-type"
　　 content="text/html; charset=Shift_JIS">
　　　<title>サンプルページ</title>
</head>
<body background="st01_bg.gif">　　　　･･･③
　 <center>　　　　　　　　　　　　　　　　･･･④
　 <font size="7" color="#993300"><b>　･･･⑤
　　演習用サンプルページ 　　　　　
　 </b></font></center>　　　　　　　　･･･⑥
</body>
</html>
サンプルページ - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
⑤演習用サンプルページ
　

　
　

　 ・背景画像 background="st01_bg.gif"を「st01_bg.gif」という画像にしてみました。③
　 ・<center>タグで、見出し文字の中央揃えをします。④
　 ・<font>タグの属性を、size="7" color="#993300"として、見出し文字を最大サイズで茶色にし、<b>で太字にしました。⑤
　 ・各タグは、入れ子を崩さないように、順序に注意して閉じます。⑥

３． 見出しの下に表を挿入する　　　　　　
　見出し文字の下に、変則の４行２列の表を入れ、あとで文章や画像を貼り付けの準備をします。

HTMLソース ブラウザ画面表示
<html><head>
　 <meta http-equiv="content-type"
　　 content="text/html; charset=Shift_JIS">
　　　<title>サンプルページ</title></head>
<body background="st01_bg.gif">
　<center><font size="7" color="#993300"><b>
　演習用サンプルページ</b></font></center>
　<br><br>　　　　　　　　　　　　　　　　　　　　　 　　　　･･･⑦
　<table border="1" bgcolor="#00cc00" cellpadding="0"
　　cellspacing="2">　　　　　　　　　　　　 　　　　　　　　･･･⑧
　　<tr>
　　　<td width="447" background="st01_bg.gif">　</td>･･･⑨
　　　<td width="253" rowspan="4">　</td>　　　　　　　･･･⑩
　　</tr>　　　　　　　　　　　　　　　　　　　　　　　　　　･･･⑪
　　<tr><td>　</td></tr>　　　　　　　　　　　　　　　　 　･･･⑫
　　<tr><td>　</td></tr>　　　　　　　　　　　　　　　　 　･･･⑬
　　<tr><td>　</td></tr>　　　　　　　　　　　　　　　　 　･･･⑭
　</table>
　<br><br>　　　　　　　　　　　　　　　　　　　　　 　　　　･･･⑮
　<table border="1" width="720">　　　　　　　　　　　　　･･･⑯
　　<tr align="center">
　　　<td>　</td><td>　</td><td>　</td><td>　</td>
　　</tr>　　　　　　　　　 　　　　　　　 　　　　　　　　　　･･･⑰
　　<tr><td colspan="4">　</td></tr>　　　　　　　　　　･･･⑱
　　<tr align="center">
　　　<td>　</td><td>　</td><td>　</td><td>　</td>
　　</tr>　　　　　　　　　 　　　　　　　　 　　　　　　　　　･･･⑲
　</table>
　<hr size="5" color="#663300" width="720"> 　　　　　　　　･･･⑳
</center></body></html>
サンプルページ - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
演習用サンプルページ⑦
⑧
⑨ ⑩
⑫
⑬
⑭
⑮⑯
⑰ 　 　 　
　⑱
⑲ 　 　 　
⑳

　 ・改行<br>を入れて⑦、その下に表を入れました。後で枠を作ることを考えて、背景色を緑、bgcolor="#00cc00"にセットしました。⑧
　 ・表は、１行を<tr>～</tr>で、その各列を<td>～</td>で列数分作ります。⑨⑩⑪⑰⑱⑲
　 ・１行１列目および２行１列目のセルの背景を背景画像 background="st01_bg.gif"で埋めて、枠を作りました。⑨⑫
　 ・１行２列目のセルは、rowspan="4"で縦に４セル連結したセルとました。⑩　１列目には４行のセルを並べました。⑨⑫⑬⑭
　 ・改行<br>を入れて、その下に次の３行４列の表を用意しました。⑮⑯
　 ・２行目に空白行を入れるため、４列を繋ぐタグ colspan="4"を持つセルを作りました。⑱
　 ・さらに表の下に、size="5" color="#663300" width="720"の水平線を入れました。⑳

　　 本解説の仕上がり予定ページ
くらげのTop　　HP作りのTop　　　　　　　 戻る　　 次へ