画面表示される部分
ここからは、画面表示される部分の使用タグの説明No2です。
- 16.<body style="background-color:#d2b48c"> ⇒ 背景色の指定
- 17.<div align="center"> ⇒ 中央揃え 50.</div> ⇒ 17の終了タグ
- 18.<h1>Welcome to Homepage</h1> ⇒ 見出し
- 19.<p>〜</p> ⇒ 前後に1行文のスペースが空き改行
- <span style="font-size:x-large">〜</span> ⇒ 文字の大きさ設定
- 20.<br> ⇒ 強制改行
21.〜27. ⇒ 1つのテーブルを表します。原形は下の形です。<td>〜</td>が1つのセルを表し、<tr>〜</tr>が行（横一列）を表します。
<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
試してみましょう
先ほど作成した、index.htmlでテーブルを作成してみましょう。ソースを表示してお試しコードNo2をコピーしてみてください。
ソースの表示方法 ⇒ index.htmlアイコンダブルクリック、表示 ⇒ ソース
<body>〜</body>〜部分にお試しコードNo2を貼り付けます。貼り付け後、上書き保存 ⇒ ブラウザの更新ボタンクリック。
◇ 詳細手順
- お試しコードNo2をコピー ⇒ マーク状態でマウス右クリック ⇒ コピー
- アイコンをダブルクリック ⇒ 表示（メニューバー左上） ⇒ ソース
- <body>〜</body>〜部分で左クリック ⇒ マウス右クリック ⇒ 貼り付け
- ファイル（メニューバー左上） ⇒ 上書き保存
- ブラウザ更新ボタンクリック（ブラウザ左上の方にある緑ボタン）
<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
後の28.〜49.は、21.〜27.の形を変更しただけです。
思ったより簡単そうではないでしょうか。楽しくなってきたところで、ホームページを完成していきましょう。
HTMLコードNo1をコピーする場合の注意点
お試しコードのindex.htmlを、先に任意のフォルダに移動するか削除してからコピーしてください。使用タグの説明のHTMLには番号が付いています。
コピーはこちら >> HTMLコードNo1
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html lang="ja">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
05.<meta http-equiv="Content-Style-Type" content="text/css">
06.<title>〜</title>
07.<style type="text/css">
08.<!--
09.a:link { color: #0000cd }
10.a:visited { color: #800080 }
11.a:hover { color: #fffacd; background-color: #d2b48c }
12.a:active { color: #ffffff }
13.-->
14.</style>
15.</head>
16.<body style="background-color:#d2b48c">
17.<div align="center">
18.<h1>Welcome to Homepage</h1>
19.<p>ソースの表示方法はブラウザ左上 <span style="font-size:x-large">表示 ⇒ ソース</span></p>
20.<br>
21.<table border="1" cellspacing="1" cellpadding="5" width="550">
22.<tr style="background:#deb887" align="center">
23.<td>無料ホームページhp作成</td>
24.<td>★★★★★</td></tr>
25.<tr><td style="background:#f5deb3" height="150" colspan="2">
26.内容変更は全てソースから変更します。<br>
解説は http://www.syousai.com/txt/foundations.html を参考にして下さい。</td></tr>
27.</table>
28.<br>
29.<table border="1" cellspacing="1" cellpadding="5" width="550">
30.<tr><td>セル１</td><td>セル２</td></tr>
31.<tr><td>セル３</td><td>セル４</td></tr>
32.</table>
33.<br>
34.<table border="0" cellspacing="3" cellpadding="5" width="550">
35.<tr style="background:#deb887" align="center">
36.<td rowspan="2">
37.無料ホームページhp作成</td>
38.<td>★★★★★</td>
39.<td>★★★★</td>
40.<td>★★★</td></tr>
41.<tr style="background:#f5deb3" align="center">
42.<td>☆☆☆</td>
43.<td>☆☆</td>
44.<td>☆</td></tr>
45.<tr>
46.<td style="background:#f5deb3" height="150" colspan="4">
47.無料ホームページhp作成<br>
48.http://www.syousai.com/web.html 【
Home】</td></tr>
49.</table>
50.</div>
51.</body>
52.</html>