HTMLはHyper Text Markup Languageの略で、ホームページの制作に必要な言語の一つです。HTMLでは主にタグという概念を使ってWeb文書を作成します。本資料では、ホームページ制作に必要なタグを一か所にまとめて整理します。
種類が多く、一つずつ詳しく扱うのは難しいため、本資料では大まかな流れとして、HTMLにはどのようなタグがあり、どのように構成されるのかを押さえておくとよいでしょう。
HTMLの概念
HTMLの構造
HTMLタグを使ううえで知っておきたいのは、一般的なプログラミング言語が大文字と小文字に敏感に反応するのに対し、タグは大文字と小文字を区別しないため、比較的使いやすいという点です。
また、間違えても致命的なエラーが発生しないため、難易度はかなり低い言語といえます。
すべてのタグは<記号で始まり、>記号で終わります。また、空白を複数入れても、反映されるのは一つ分だけです。基本的なタグの形は、<タグ名 属性="属性値"> ～ </タグ名>となります。
本資料では、この考え方に合わせて、htmlタグの形式の中に各タグの説明を記載します。
文書関連のタグ
文書関連のタグ
▣ 文書の余白の指定(topmargin, leftmargin) - <body topmargin="0" leftmargin="0"> 余白のないページを作成する</body>
▣ 背景色の設定(bgcolor) - <body bgcolor="色"> 指定した色を背景色に設定します。 </body>
▣ 背景画像の設定(background) - <body background="ファイル名.jpg"> 画像ファイルとWeb文書は同じパスに置く必要があります。そうでなければ、パスも指定する必要があります。 </body>
▣ 改行(br, p) -
<body>
一般的にワープロ文書では、<br>
Enterキーを押すと次の行に移りますが、<br>
HTML文書ではbrというタグを使って<br>
改行できます。一方、pタグでは、<p>
通常の改行よりもさらに一行空けて改行できます。
</body>
文字関連のタグ
文字関連のタグ
▣ 太字の表示(b) - <b> 文字の前にbタグを入れると、文字を太字で表示できます。 </b>
▣ フォントサイズの調整(font size) - <font size="1~7"> 文字サイズを1から7まで指定して、大きさを調整できます。 </font>
<font size="12pt"> 文字サイズはpoint単位でも指定できます。ポイント単位のほうが、より幅広く細かい指定が可能です。></font>
▣ 書体の変更(font - face) - <font size="2" face="Gulim"> 書体の部分には、Gungsuh、Batang、Gulim、Dotumなど、さまざまなフォントを指定できます。</font>
▣ 文字色の変更(color) - <font size="3" color="blue"> fontタグ内にcolor属性を追加すると、好みの色に変更できます。ただし、色名は英語で入力する必要があります。 </font>
▣ 空白の追加(  ; ) - 文字の間に空白を追加したいときは、   ; を入れると、スペースを入力したときと同じように空白を追加できます。一方、htmlではスペースキーによる入力は1回分しか反映されません。（なお、pと;は間を空けずに記述する必要があります。本資料では、タグをそのまま入れると表示されないため、意図的に間を空けて記述しています。）
画像関連のタグ
画像関連のタグ
▣ 画像の挿入(src) - <img src="画像ファイル名.jpg"> Web文書と画像が同じパスにある場合はファイル名だけを入力し、パスが異なる場合はパスも追加で入力する必要があります。
▣ 画像の枠線の表示(border) - <img src="画像ファイル名.jpg" border="5"> 画像挿入タグの後ろにborderを記述すると、画像の枠線の太さを指定できます。
▣ 画像の配置(align) - <img src="画像ファイル名.jpg" align="left"> Align属性にleft（左）、right（右）、middle（中央）、baseline（ベースライン）、top（上端）、bottom（下端）、texttop（文字の上端）、absmiddle（文字の中央）、absbottom（文字の下端）を入力して、画像の位置を揃えることができます。
▣ 画像の余白の調整(hspace, vspace) - <img src="画像ファイル名.jpg" hspace="10" vspace="10"> 画像ファイル名の後ろに記述するhspace（水平方向）、vpace（垂直方向）の入力値によって、余白を調整できます。
▣ マウスオーバー時の文字表示(alt) - <img src="画像ファイル名.jpg" alt="文字"> 画像にマウスを重ねたときに文字を表示したい場合は、alt属性の中に表示したい文字を入れます。
ハイパーリンク関連のタグ
ハイパーリンク関連のタグ
▣ ハイパーリンクの追加(a href) - <a href="リンク先アドレス"> このようにa hrefタグの属性にリンク先のアドレスを入れると、マウスでクリックした際にそのアドレスへ移動するハイパーリンクを作成できます。</a>
▣ 画像へのハイパーリンクの追加 - <a href="リンク先アドレス"><img src="雑学書庫.jpg"> ハイパーリンクタグの後ろに画像タグを入れると、画像をクリックした際にそのアドレスへ移動するボタンを作成できます。</a>
▣ 画像にマウスを重ねたときの説明文(title) - <a href="リンク先アドレス" title="説明文"><img src="雑学書庫.jpg"> ハイパーリンクタグの属性欄にtitle属性を記述して、ボタンの説明を入れることができます。</a>
▣ 新しいウィンドウで開く(target-_blank) - <a href="リンク先アドレス" target="_blank"><img src="雑学書庫.jpg"> target属性に_blankを入れると、新しいウィンドウでページを開くボタンを作成できます。</a>
▣ ハイパーリンクの色の設定(link, vlink, alink) - <body link="blue" vlink="red" alink="green"> bodyタグ内にlink（ハイパーリンクの色）、vlink（開いたことのあるリンクの色）、alink（開いているリンクの色）を入れることで、リンクの色を指定できます。</body>
▣ ページ内の特定の位置への移動(#, name) - このタグは、ワンページのスクロール形式のホームページを作るときに便利に使えるタグです。
<a href="#a"> A地点へ移動</a>
<a name="a"> A </a>
テーブル関連のタグ
HTMLテーブルタグの例
▣ <table> - テーブルを開始する基本的なタグです。
▣ <thead> - テーブルのヘッダー部分をグループ化するタグで、必要に応じて使用します。
▣ <tbody> - テーブルの本文部分をグループ化するタグで、主に<thead>や<tfoot>を使用する際に一緒に使います。
▣ <tfoot> - テーブルのフッター部分をグループ化するタグで、必要に応じて使用します。
▣ <tr> - テーブルの行を定義するタグです。
▣ <th> - テーブルのヘッダーセルを定義するタグで、このセルの内容はデフォルトで太字で表示されます。
▣ <td> - テーブルのデータセルを定義するタグです。
▣ <caption> - テーブルのタイトルや説明を付けるタグで、<table>タグの直後に配置する必要があります。
例として作成したコードを適用すると、おおよそ次のような表が表示されます。
雑学書庫のサンプルテーブル
| 名前 | 年齢 |
| 曹操 | 66 |
| 劉備 | 63 |
以上、ホームページ制作に使われるHTMLタグを整理しました。文書、文字、画像、ハイパーリンク、テーブルに関するタグをしっかり覚えておけば、基本的なホームページを表現するうえで大きな問題はないでしょう。
もちろん、IT分野においてHTMLは基礎中の基礎ですが、コーディングやWeb関連の仕事を初めて行う人は、まずHTMLを習得しておくことで基礎を固められるでしょう。
