HTML の構造

はじめに

日本語を覚えるときには、既にしゃべっている人の真似をして 発達して行くのと同様HTML言語も、「上級者の真似をする」という のが上達の早道である。しかし、 何もわからないまま上級者のソースファイルを見たのでは、 ちんぷんかんぷんで嫌になってしまうかもしれない。 まずは基礎をしっかり覚えよう。

とりあえず作ってみよう

次のサンプルを、Emacsで作ってみよう。

  1. Emacsにフォーカスを合わせる。
  2. C-x C-fでファイルを開く。
  3. ~/public_html/sample.html というファイル名を指定する。
  4. 編集する。

sample.html

編集が終ったら保存しよう。

  1. 保存する。C-x C-s

それでは、今作成したHTMLファイルを実際にブラウザで見てみよう。

ブラウザのURLの位置の写真

http://roy/~i2004×××/sample.html

ここに自分のWEBページのURLを入力し、今作成したファイルを開いてみよう。 ユーザ名の所は、それぞれ違うので自分のユーザ名を確かめて下さい。

説明

HTMLソース

それでは、作成したhtmlファイルがどう構成されているのか見て行こう。 左端の数字は説明しやすいよう、行番号を添えたものである。.

  1. <html>
  2. <head>
  3. <title>
  4. 初めてのHTML
  5. </title>
  6. </head>

  8. <body>

  10. <h1> ようこそ </h1>

  12. <p> 今日はようこそ UNIX講 習会へおいで下さいました。HTML言語を修得し、 世界に 向けて情報を発信してみましょう。 </p>
  13. <p> と堅苦しい事は言わず に、趣味に仕事に活用して下さい。 </p>
  14. </body>
  15. </html>

ソース解説

  1. <html>〜</html>までがhtml要素となり、こ の中にhead要素とbody要素が入る。
  2. <head> HTML文書のヘッダ情報、タイトルや キーワードなどを中に含む 要素である。いまのところ文書のタイトルを 含ませるための要素と考えて 良い。
  3. <title> そのページのタイトルを指定する要素で ある。全てのHTML文書には、head要素の中に、1つのtitle要素を含まな ければいけない。そのタイトル名は、文脈を踏まえたタイトルにしなけ ればいけない。文書のタイトルは、ブラウザのタイトルバー に表示され る。




  8. <body> 文章の本体を書くための要素である。


  11. h1要素は見出しのための要素として用いられる。文書とい うものは、本来論理的構造をとるものであり、章・節で述べられる話題 を短く記すためのものである。見出しのレベルは<h1>〜 <h6>要素まである。

  13. p要素は 段落を定めるための要素である。文書を書くに当 たり、段落を用いた方がわかりやすい。</p>

→ 目次

(C)2004 OKOMA Lab. koeki-u.ac.jp