Lesson3: ホームページの基本


 さあ、それでは道具がそろったところで、これから本格的なホームページ製作に入りましょう。
 ホームページは、基本こんなかたちをしています。




 これがTeraPadで書いたホームページの骨組みです。
 それではこれを「l-00.html」とかなにか適当なファイル名で適当なところに保存します。
 ひとつだけ、ファイル名は半角英数字でお願いします。




 こんなふうに、常用しているブラウザのアイコンで表示されると思います。
 これをそのままダブルクリックするとブラウザが開いてこんなふうになります。



※スクリーンショットはFireFoxになっていますが気にしないでください。

 味気ないけど、ちゃんと文章が表示されますね。
 今TeraPadで書いたものが、ブラウザできちんと読み込まれ、表示されました。
 さて、これはそれぞれどういう意味なのでしょうか?


どうしてこういうふうに表示されるのか


 先ほどのように表示するためには約束事があります。


 前提として
 ・ファイル名の拡張子を「.html」もしくは「.htm」にする
 ・ファイル名は半角英数字
 があります。

 拡張子についてはLesson1でも述べましたが、対応する拡張子のファイルでないと、ブラウザは読み込んでくれません。
 さっき取得した住所(サーバー、ホームページスペースなど)の、.htmlファイルは部屋番号みたいなものです。
 ファイル名は大体どのファイルでも基本同じだと思うのですが、ホームページスペース上にアップロードするものは大体半角英数字じゃないといけません。

 そして、半角不等号で囲ってあるもの(<と>)は、タグといいます。
 今目に見えている文章などは普通に入力しますが、文字の色、画像など、ホームページを構成するあらゆる設定やものごとは大体タグでかかれます。
 そして、タグは半角不等号で囲ってあるわけです。

 さらにHTMLについて詳しく知りたい方は、もはや雑学的な域になるのでSTEP UPの項においてあります。そちらをご覧ください。


それぞれの意味


 それではひとつひとつの構造を紐解いていきましょう。




 まずは一番上と一番下に表示されているhtmlタグです。
 これを一番最初と終わりに入れることで、「ここからHTML言語がはじまります」という宣言をすることができます。
 これで囲っている間は、そのページがHTML文書であることをを表しているということです。




 つぎにこのheadですが、ここにはサイトの情報やデザインを装飾するCSS(スタイルシート)を記述するところになります。
 つまり、普段はページ上に見えないものをここに書きます。
 ここに書くものは難しいのであまりこのサイトでは取り扱っていません。




 このtitleはそのままホームページのタイトルを書きます。
 ブラウザの上のあたりを見てください。




 これこれ、この部分。
 この<title></title>で囲った部分が、ここに表示されます。
 大体サイトのタイトルとかページごとのタイトルをここに書きます。検索エンジン(Googleなど)に表示される題名やブックマークを登録したときに登録されるデフォルトネームもここに書かれているものになります。
 ちなみに、このtitleタグはheadタグの中に入れないと効力を発揮してくれません。




 最後にこちら。bodyタグです。このタグの間に入っているものが、ホームページとして皆さんの目に入ります。
 文章、画像、動画などなど、コンテンツはこの中に入ります。何をどこに表示するか、それを書くのもここです。
 だから一番頻繁に編集する箇所かもしれません。
 ちなみに、このbodyタグの中で普通に日本語の文章を打つと、そのまま表示されます。テキストエディタでいくら改行してようが、改行はされません。
 改行するためにはまた必要なタグがあったりしますが、それはのちほど。


まとめ


 HTMLの基本構造はこんな感じです。
 半角不等号で囲まれたタグ。それが集まり、HTMLとなるのです。
 それでは次回からは、そのタグを使い、本格的にホームページを作ってみましょう。


→ Lesson4へ