サンプルページ解説1


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

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

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

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

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

 
 

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

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

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>                          ・・・F
 <table border="1" bgcolor="#00cc00" cellpadding="0"
  cellspacing="2">
                     ・・・G
  <tr>
   <td width="447" background="st01_bg.gif"> </td>・・・H
   <td width="253" rowspan="4"> </td>       ・・・I
  </tr>                          ・・・J
  <tr><td> </td></tr>                  ・・・K
  <tr><td> </td></tr>                  ・・・L
  <tr><td> </td></tr>                  ・・・M
 </table>
 <br><br>                          ・・・N
 <table border="1" width="720">             ・・・O
  <tr align="center">
   <td> </td><td> </td><td> </td><td> </td>
  </tr>
                            ・・・P
  <tr><td colspan="4"> </td></tr>          ・・・Q
  <tr align="center">
   <td> </td><td> </td><td> </td><td> </td>
  </tr>
                            ・・・R
 </table>
 <hr size="5" color="#663300" width="720">         ・・・S
</center></body></html>

サンプルページ - Microsoft・・・・
File Edit  View fAvorite Tool Help 
演習用サンプルページF
G
H I
K
L
M
NO
P      
 Q
R      
S



  ・改行<br>を入れてF、その下に表を入れました。後で枠を作ることを考えて、背景色を緑、bgcolor="#00cc00"にセットしました。G
  ・表は、1行を<tr>〜</tr>で、その各列を<td>〜</td>で列数分作ります。HIJPQR
  ・1行1列目および2行1列目のセルの背景を背景画像 background="st01_bg.gif"で埋めて、枠を作りました。HK
  ・1行2列目のセルは、rowspan="4"で縦に4セル連結したセルとました。I 1列目には4行のセルを並べました。HKLM
  ・改行<br>を入れて、その下に次の3行4列の表を用意しました。NO
  ・2行目に空白行を入れるため、4列を繋ぐタグ colspan="4"を持つセルを作りました。Q
  ・さらに表の下に、size="5" color="#663300" width="720"の水平線を入れました。S

   本解説の仕上がり予定ページ

くらげのTop  HP作りのTop        戻る   次へ