ホームページを作る -- HTML入門


目次


  1. HTMLとは
  2. HTMLの例
  3. HTMLの構造
  4. 見出しをつける
  5. 改行する
  6. 中央寄せ
  7. 段下げ
  8. リスト
    • 番号付きリスト（箇条書き）
    • 番号なしリスト（箇条書き）
    • 説明型リスト（箇条書き）
    • リスト（箇条書き）の入れ子
  9. 整形テキスト
  10. 水平線を引く
  11. 画像の張り付ける
  12. リンクをはる
  13. 文字のサイズと色
  14. 背景の色、壁紙
  15. 表を作る
  16. コメント

  17. HTMLタグのまとめ

  18. ホームページ作成に関連するリンク集

HTMLとは

HTML(Hyper Text Markup Language)は、ホームページ（ハイパーテキスト）を作成するための道具です。 Languageという言葉が示すように、言語の一種です。 このHTMLは、構造化した文書を表すための言語であるSGML(Standard Generalized Markup Language)を基礎として考えられています。

HTML の文書 (HTMLソース)は、tex(テフ)やSGMLと同じような構造をもっています。 文書には、ヘッダやタイトル、見出し、段落、リスト、図などの要素別にわけることができ、それらを記述する記号があります。 HTMLではこれらの要素を表す記号をタグと呼んでいます。 タグは、次のような形式をしています。

＜タグ名＞影響させたいテキスト＜／タグ名＞

上記のようにタグには開始タグと終了タグがあります。終了タグは通常タグ名の前に／（スラッシュ）を置きます。 これら２種類のタグで影響させたいテキストをはさみ指示します。

ただし、すべてのタグに開始と終了があるわけではありません。 いくつかのタグは＜タグ名＞だけというのもあります。

HTMLの例

次にHTMLの例を示します。 下の文書の赤い字で表示されているのが、HTMLの命令語です。 

＜HTML＞
＜HEAD＞
＜TITLE＞ Egi Tsuruko Home Page ＜/TITLE＞
＜/HEAD＞

＜BODY＞

＜H1＞ はじめまして……、 江木鶴子です。＜/H1＞
＜HR＞

＜IMG SRC="turuko.gif" ALIGN="left"＞ 

＜DL＞
＜DT＞生まれた所＜DD＞山口県宇部市
＜DT＞生まれた日＜DD＞8月16日(土) 
＜DT＞主たる仕事＜DD＞情報計数学科でプログラミング、データベース関係の講義・演習を担当しています
＜DT＞研究テーマ＜DD＞初心者のプログラム生成課程のモデル化とプログラミング教育への支援に関する研究、＜br＞
日本古典文学の＜A HREF="kanatehome/index.html"＞テキストデータベース＜/A＞
に関する研究、など
＜DT＞趣味・興味＜DD＞
＜A HREF="haik1.html"＞ハイキング＜/A＞（一カ月間行かないと体調が悪くなる）、
＜A HREF="pict96.html"＞絵画＜/A＞（見るのも描くのも両方）、
野球は広島、サッカーも広島。
＜/DL＞ 

＜BR CLEAR=all＞
＜HR＞

＜ADDRESS＞Mail:egi@cs.ube-c.ac.jp＜P＞
＜ADDRESS＞ Bunkyou 5-40, Ube, Yamaguchi, Japan＜BR＞
＜ADDRESS＞ Dep.Computer Science, Ube College＜BR＞
＜ADDRESS＞ Tel:(0836)35-6246,(0836)33-3111(2620)＜BR＞
＜ADDRESS＞ Fax:(0836)35-7440＜BR＞

＜/BODY＞
＜/HTML＞

このページは、WWW上で見ること次のようになっております。

ここをクリックしてください。

HTMLの構造

１つのホームページは、普通複数ページで構成されています。 それらのどのページも同じような一定の構造（形式）で書かれています。

１つのページは、下の図のように、＜HTML＞で始まり、＜/HTML＞で終ります。 その中は大きく分けて、ヘッダ情報と本文から構成されています。 ヘッダ情報は、＜HEAD＞で始まり＜/HEAD＞で終り、本文は＜BODY＞で始まり＜/BODY＞で終ります。

HTMLソース文書の構造

ヘッダ情報部は、書類のタイトルや特徴などを記述するところで、この部分はブラウザに表示されません。
ここで必ず記述されるのが、タイトルです。タイトルは＜TITLE＞タグで始まり＜/TITLE＞タグで終ります。このタイトルは特に必要ではありませんが、ここに記述された文書名がブックマークなど、あとでページを利用する場合に使用されます。したがって、できるだけ内容を具体的に表すようにしておいた方が良いと思います。

見出しを付ける

見出しを表示するには、次のタグを使います。

＜Hn＞見出し＜/Hn＞

ここで、nが小さいほど、文字が大きく表示されます。

文字の大きさ
Hn表示例
＜H1＞１の見出し＜/H1＞

１の見出し

＜H2＞２の見出し＜/H2＞

２の見出し

＜H3＞３の見出し＜/H3＞

３の見出し

＜H4＞４の見出し＜/H4＞

４の見出し

＜H5＞５の見出し＜/H5＞
５の見出し
＜H6＞６の見出し＜/H6＞
６の見出し
改行する

HTML文書に書かれた文字は、そのままですと、ウィンドウの大きさで改行をしますが、それ以外では改行しません。 改行をさせたい時には、次のタグを用いてそれを明示する必要があります。

＜P＞…文章…＜/P＞

＜P＞から＜/P＞までは、ひとつの段落を意味します。したがって＜P＞があると適切な空白行をあけて改行が行なわれます。 それに対して、改行のみの場合は、次のようなタグを使います。

…文章…＜BR＞

この場合は、改行のみで空白行はあきません。

また、＜P＞を複数記述しても改行が重ねて行なわれることはありません。 （少なくともNetscapeブラウザでは空白行が複数あくことはありません） 改行を重ねて行ないたい場合は、整形タグ＜PRE＞などを用いて行なうと可能です。

段落と改行の例

中央寄せ

表示する内容を中央寄せにするには、次のタグを用いて行ないます。 ここで中央というのは、表示されたウインドウの中央という意味です。

＜CENTER＞ 表示内容 ＜/CENTER＞

表示する内容が文章であっても、図や画像であっても構いません。

中央寄せ

段下げ(引用)

文章などを引用するために段下げするためには、次のタグを用います。

＜BLOCKQUOTE＞ 表示内容 ＜/BLOCKQUOTE＞

段下げ

リスト（箇条書き）

リスト（箇条書き）

整形テキスト

特定の文書を、固定幅フォントやスペース、改行タグをそのまま表示したい場合には、次のようにそれらの文書を＜PRE＞タグで囲むことによって表現します。

<PRE>
表示したい内容
</PRE>

このフォントで囲まれた中にある、スペースや＜P＞タグは、書かれた数ほどスペースがあき、改行がなされます。但し、HTMLでは、＜、＞、＆などの記号が特殊記号として意味をもっています。これらの記号は＜PRE＞タグ内でも解釈されますので、次のような特殊文字を使わなくてはいけません。

＜PRE＞内の特殊記号
記号特殊文字意味
＜ ＆lt；小なり
＞ ＆gt；大なり
＆ ＆amp；アンパーサンド

整形テキスト

水平線を引く

ページに水平線を引く場合には、＜HR＞タグを用います。 これは、画面上にウインドウ幅ほどの水平線が引かれます。

これは例を示すこともないでしょう。このページにもたくさんの水平線が引かれていますから。

図形や画像の張り付け

指定した場所に図形や画像を張り付ける場合には、次のような＜IMG＞タグを使用しておこないます。ここでの画像とは、静止画像を指します。 

＜IMG SRC="画像ファイル名" ALIGN="値"＞

＜IMG＞タグには、＜/IMG＞はありません。

画像ファイルとして、GIFあるいはJPEG形式のファイルが指定できます。 Windows標準のBMP形式の画像は、Microsoft社のWWWブラウザ（Internet Explorer）では使えますが、一般には使えません。

値によって、その画像をどの位置に置くかを指定します。

値の指定
値意味
topテキストを画像の上端に合わせる
center テキストを画像の真中に合わせる
bottom テキストを画像の下に合わせる
left 画像を左寄せにして、テキストをその右側に配置する
right 画像を右寄せにして、テキストをその左側に配置する

上表の最初の３種類は、画像をテキスト１行の中に配置します。
また、ALIGNの指定は省略できます。省略した場合は、ALIGN="bottom" を指定したことと同じになります。

画像の張り付け

リンクを張る

ひとつのページから別のページを直接めくることができる、いわゆるハイパーリンクがWWWの最大の特徴です。ハイパーリンクを行なうタグは、＜A＞タグ（anchor:鎖タグあるいはアンカータグと呼ぶ）で、次のように記述します。 

＜A HREF="リンク先"＞リンク先を示すテキストや画像＜/A＞

リンク先の指定には、次の３通りがあります。