- スタートメニューから「すべてのプログラム」→「アクセサリ」→「メモ帳」の順に選択します。
※Macintoshをご利用の場合は、Dock内にある「テキストエディット」のアイコンをクリックします。
- 「メモ帳」が起動したら以下のとおり記述してください。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
これがHTMLの基本です。HTMLファイルであれば、この記述は必ず必要になります。ご覧のとおり、HTMLでは<**>〜</**>といったように同じ単語（タグ）が対になっています。それでは各部分について紹介します。
※HTMLタグは半角英数字で記述します。また、英字の大文字と小文字は区別されません。ここではすべて小文字で記述していますが、<HTML>〜<HTML>のように大文字で記述しても問題はありません。
<html>〜</html>
このファイルはHTMLです、ということを意味します。
<head>〜</head>
タイトルなど、ファイルの情報を記述する部分です。
<title>〜</title>
〜の部分にページのタイトルを記述します。ここに記述したタイトルは、ブラウザ左上のタイトルバーに表示されます。また、「お気に入り」や「ブックマーク」に登録したときのページタイトルになります。
<body>〜</body>
実際にブラウザに表示される部分です。ここに文章や画像などすべてを記述します。
CHECK！
お使いのブラウザによっては、このHTMLの基本の記述だけでホームページを作成すると、開いたときに文字化けしていることがあります。この場合は、<title>〜</title>のすぐ後ろに、
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
という記述を追加することで、文字化けを回避することができます。
- まずは、手順2で記述した基本のHTMLタグの<title>と</title>の間に、このページのタイトルを以下のように記述しましょう。
<html>
<head>
<title>愛犬コテツの成長日記</title>
</head>
<body>
</body>
</html>
これでブラウザのタイトルバーに「愛犬コテツの成長日記」と表示されるようになります。
- ここで一度、メニューバーの「ファイル」から「名前を付けて保存」を選択し、ファイルを保存します。このとき保存先に前準備で任意の場所に作成した「homepage」フォルダを指定します。ファイル名は「はじめてのホームページ講座(1)」で考えたファイル名「index.html」を入力し、[保存]をクリックします。
- 保存ができたら、ファイルを右クリックして「プログラムから開く」から「Notepad」を選択します。
※Macintoshをご利用の場合は、ファイルをドラッグしてDock内にあるテキストエディットのアイコンの上でドロップします。
- 「メモ帳」が起動したら、つぎに<body>〜<body>の〜部分にタイトル、文章、目次を記述します。
以降、左の[見てみよう！]ボタンをクリックすると、手順ごとの記述によりブラウザでどのように表示されるのか見ることができます。
<html>
<head>
<title>愛犬コテツの成長日記</title>
</head>
<body>
愛犬コテツの成長日記
わたしの愛犬コテツの成長をつづったページです。
コテツの誕生日
1年目
2年目
コテツのすきなものきらいなもの
コテツのおともだち
</body>
</html>
この時点で一度、メニューバーの「ファイル」から「上書き保存」を選択して保存します。「メモ帳」は開いたまま「index.html」のファイルのアイコンをダブルクリックします。するとブラウザでファイルが開きます。以降、この方法でブラウザでの表示をチェックすることができます。[見てみよう！]ボタンで表示される見本ページと、表示される内容が同じかどうか確認してみてください。
※ブラウザで表示されていますが、ファイルをサーバへアップしていないので、他のパソコンからは見ることはできません。
