ホームページを作成してみよう
やっと実際にホームページを作成するところまできました。
今まで退屈な説明に付き合っていただいて、ホントにありがとうございます。
このページでは、簡単な HTML 文書をテキストエディタを使って作成してみたいと思います。
今回実際に作成するページはこんな感じになります。
見出しと画像とテキスト、それにリンクが入っただけのシンプルなページですがこれも立派な HTML 文書です。
さぁ、実際に作ってみましょう。
※リンクは動作しないようにしてあります。
※上の花の画像の上で右クリック→「名前をつけて画像を保存」から hana.jpg というファイル名を付けて
マイドキュメントの中に作成したフォルダの中に保存しておいてください。あとで使います。
HTML 文書の基礎を作る
まずはテキストエディタを開いて下の文章を書いてみてください。
※タグは半角で入力してください。全角で入ると認識してくれなくなっちゃいます。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
< >で囲まれたのがタグと呼ばれるものです。上にの文章内のタグが HTML 文書の基礎となります。
ホームページを作る時に、上のタグは必ず使うので覚えておきましょう。
それぞれのタグ意味は↓
- <html></html>
- 今から記述される内容が HTML であるという宣言です。一番上に<html>一番下に</html>があるので
その間にある記述はすべて HTML ということになります。 - <head></head>
- HTML 文書の情報を記載する部分です。今回の場合であれば<title></title>がページの情報として記載されています。今回は簡単な HTML 文書なので入っているタグも少ないですが、通常は複数行にわたって
いろいろな情報が記載されます。 - <title></title>
- ページのタイトルを入力する部分です。通常はここに入力された内容が、インターネットエクスプローラなどのブラウザでホームページを見た時、一番上にのタイトルバーに表示されます。
<title>ホームページ作成してみない？</title>と入れればこんな感じ
- <body></body>
- 実際のページの内容が入る部分です。この中に記述された内容がページを見た時に
ブラウザに表示されます。なので、ホームページで文章を書いたり画像を入れたりするタグはこの中に入れていくことになります。
※ページを保存しておきましょう※
保存する場所は先ほど作成したマイドキュメントのフォルダの中にしてください。そのフォルダの中に
index.html と sub1.html いうファイル名で 2つ保存しておきましょう。
まだ何も書かれていない真っ白なページですが、
こまめに保存する癖をつけるのもホームページ作成には重要なことです。一時間かけて作ったページが保存していなかったがために、パァになることもあるんで。。。
ホームページの内容を記載する
さて、先ほどまでの作業でホームページの骨組みは出来上がりました。
まずは保存されたファイルをダブルクリックして開いてみてください。インターネットエクスプローラで真っ白なページが開かれれば大丈夫です。文字が表示されている場合はタグの記述に誤りがある可能性があるので、テキストエディタで開いて修正しておきましょう。
次は実際にページの中に文字や画像などの内容を記載していく作業をしていきましょう。
index.html をテキストエディタで開いて、赤字と青字の部分を追記してあげてください。
赤字はタグや実際にページには表示されない部分です。
青字が実際に文字としてページに表示される部分になります。
<html>
<head>
<title>お花のホームページ</title>
</head>
<body>
<h1>お花のホームページへようこそ</h1>
<img src="hana.jpg">
<p>花の画像です。とても<font color="red">キレイ</font>ですね。
<br>
<a href="sub1.html">次へ</a>
</p>
</body>
</html>
それぞれのタグの意味↓
- <h1></h1>
- ページ内にある文章の見出しです。見出しは h1〜h6 まであり、数字が小さいほど見出しのレベルは上になって文字のサイズも大きくなります。今回は h1 なので大見出しって感じですね。
- <img>
- ページの中に画像を読み込んで表示させるタグです。 src の部分を属性といいます。属性は、タグの細かな設定を指定するときに使う記述です。今回の場合であれば、読み込んでくる画像が何というファイル名かを指定しています。
- <p></p>
- 段落の意味を持つタグです。上の HTML では <p>〜</p> 間にある「花の画像です〜次へ」までが一つの段落という扱いになっています。
- <font></font>
- 文字の大きさや色などを指定するタグです。上の文章では color 属性を使って「キレイ」という文字を赤色に指定しています。<font></font>で挟まれた部分が影響を受けます。
- <br>
- 改行させるタグです。
- <a></a>
- HTML の特徴とも言えるリンクを指定するタグです。<a> だけで使うことはほとんど無く、href 属性でリンク先のページを指定してセットで使うのが一般的な使い方です。リンク先はページだけでなく画像やその他のファイルを指定することもできます。上の文章では sub1.html に対してリンクするように設定しています。
ここまでできたら保存しておきましょう。保存したファイルを開くとサンプルのようなページが出来上がっているはずです。次のページではできあがったホームページ（2ページでも立派なホームページです）をサーバーにアップロードしてみましょう。sub1.html が真っ白なままなので上記を参考に簡単なページを作っても良いです。
その方がリンクさせるのも楽しいですし。
