画面表示されない部分
ここでは、ホームページ作成に必要なHTMLコードNo1の使用タグの説明をしています。先ほどと同じHTMLコードNo1に番号を記載（1番下）しました。
はじめに、画面表示されない部分の説明をします。
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
02.<html lang="ja">
04.<meta http-equiv="Content-Type" content="text/html;
05.<meta http-equiv="Content-Style-Type" content="text/css">
- 01. ⇒ HTMLバージョンの宣言
- 02. ⇒ 日本語で作成した宣言
- 04. ⇒ 文字コードの宣言
- 05. ⇒ スタイルシートの宣言
ここまでが、ホームページの文字化け、エラーを防ぐ宣言になります。
02. 03. 06. 15. 16. 51. 52.がホームページの基本タグ。これだけでブラウザ表示できます。タグとは、< > で囲んだ要素を呼びます。
02.<html>
03.<head>
06.<title></title>
15.</head>
16.<body>
51.</body>
52.</html>
実際にホームページを作成してみましょう
実際にホームページを使用タグで作成してみましょう。下のお試しコードをメモ帳にコピーして、アイコンの名前を「 index.html 」に変更してみてください。
◇ メモ帳詳細手順
- デスクトップでマウス右クリック ⇒ 新規作成 ⇒ テキストドキュメント
- HTMLコードNo1コピー ⇒ マーク状態でマウス右クック ⇒ コピー
- アイコンをダブルクリック ⇒ 画面上でマウス右クリック ⇒ 貼り付け
- ファイル（メニューバー左上） ⇒ 上書き保存 ⇒ 閉じる（画面右上×）
- アイコン上で右クリック ⇒ 名前変更 ⇒ 「 index.html 」に変更
※ 表示されない方は拡張子を確認してください。関連ページ - 基本操作
◇ お試しコード
<html>
<head>
<title>ホームページ</title>
</head>
<body>
ホームページ作成
</body>
</html>
うまく表示されましたか？表示されなくても大丈夫です。後でしっかり説明します。今はHTMLコードの解説を続けます。
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>
- 07. ⇒ スタイルシートの指定 14. ⇒ 07.の終了
- 08. 13. ⇒ スタイルシートに対応していないブラウザ対策
- 09.～12. ⇒ リンクの設定
ここまで、03.<head>～15.</head>が表示されない部分です。
次のページは、使用タグの説明No2、16.<body>～ 51.</body>ブラウザで表示される部分です。
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>
解説は https://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.https://www.syousai.com/web.html 【
Home】</td></tr>
49.</table>
50.</div>
51.</body>
52.</html>