HTMLは Hyper Text Markup Languageの略です。 文字通りハイパーテキストを記述するための言語です。
WWW上の文書（Internet Explorerや Netscape Navigatorなどのブラウザで閲覧できる文書）は、 基本的にこの HTMLで書かれています。 この文書「HTMLについて」自身も HTMLで書かれています。
なお、このページでは HTMLという規格のごく一部のみを紹介しています。 もっと詳しく知りたい人は以下のリンクや、いろいろな書籍を参照して下さい。
HTML文書はメモ帳のようなエディタでも作成することができます。 その場合、フォント（字の形）や字の大きさ・色などを変えるときには、 タグというものを使います。 HTMLのタグは「<...>」という形をしています。 例えば、「太い」のように文字を太字にするには、 「<b>太い</b>」のように書きます。 <b>が太字の開始を、 </b>が太字の終了を表わします。 すると、ブラウザで見たときには「太い」の部分が太字で表示されます。 一般に HTMLのタグは <...>と </...>の対という形で使われることが多く、 前者が何かの開始、後者が何かの終了を表わします。 （なお、タグに使うアルファベットは大文字・小文字は区別しないので、 先ほどの例は <B>太い</B> でも構いません。 ただし、今後（XHTML1.1）の規格では小文字を使うことに統一されそうです。）
Wordのようなインターフェースで、タグを直接見ることなく、 整形された形をその場で確認しながら HTML文書を作成することができるソフト（Netscape Composerなど）もありますが、 メモ帳のようなエディタで作成する方法は、 慣れれば意外に早いですし、なんと言ってもメモ帳は最初から Windowsに無料でついてきます。 また、タグを知っていれば、他人の書いた HTML文書を見て、 そのテクニックを真似することもできます。 （Internet Explorerの場合、 メニューの「表示」―「ソース」で、 Netscape Navigatorの場合、 メニューの「表示」―「ページのソース」で、 Webページの HTML文書を見ることができます。）
ここでは、エディタを用いて HTML文書を作成することを学びます。
HTMLはもともとは、体裁を整えるためではなく、 文書の構造を明確にするために、設計されました。 そのため、ワープロのように自由に体裁を整えられない場合があります。 HTML文書を作成するときは、この点を忘れないようにしてください。
HTML文書は、次のような構造をしています。
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> <title>ここにタイトルを入力</title> </head> <body> ここに本文を入力 </body> </html> |
このような内容のファイルをメモ帳で作成し、 たとえば test.html という名前をつけて、保存します。
まず、最初に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN"> という部分がありますが、これは以下の HTML文書が HTML4.01という規格に基づいていることを示しています。
残りの全体が <html>〜</html> というタグで囲まれています。 これは HTML文書のお約束です。 <head>〜</head>の間は、ヘッダ と呼ばれ、本文としては表示しない、いろいろな情報を書きます。 特にタイトルはこのヘッダ部分に、 <title>〜</title>に囲んで書きます。 このタイトルがブラウザのタイトルバーに表示されます。
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> の部分はあまり大きな意味はありませんが、 最後の charset=iso-2022-jpの部分は、文字コードとして JISコードを使用していることを示しています。日本語の文字化けを防ぐのには、 このような指定は有効です。
| charset | 文字コード | 備考 |
|---|---|---|
| iso-2022-jp | JISコード | |
| shift_jis | シフト JISコード | パソコンで新規にファイルを作ると普通これになる。x-sjisは誤り。 |
| euc-jp | EUC JISコード | UNIX系のコンピュータではこれが多い。 |
Windowsパソコンで日本語の入った文書を新規に作成すると普通シフト JISコードになるので、その場合、 <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> と書くことになります。
参考リンク
そして、<body>〜</body>の間が本体です。 ここにある文字が、実際に表示されます。 そして、以下に紹介するタグで文書の構造を明確にしたり、 見かけを変えたりできます。 また、タグに囲まれていない文字は普通に表示されます。
<hn>〜</hn> （n = 1〜6）は 見出しを指定します。n は 1〜6までの数字で、 1に近いほど大きな単位の見出しになり、字が大きくなります。
| 入力 | 表示 |
|---|---|
| <h1> nが 1の時 </h1> | nが 1の時 |
| <h2> nが 2の時 </h2> | nが 2の時 |
| <h3> nが 3の時 </h3> | nが 3の時 |
| <h4> nが 4の時 </h4> | nが 4の時 |
| <h5> nが 5の時 </h5> | nが 5の時 |
| <h6> nが 6の時 </h6> | nが 6の時 |
改行・段落・区切り線
HTML文書の中の改行は、ブラウザに表示するときは無視されます。 （正確に言うと、空白と同様に扱われます。） 強制的に改行をいれたい場合は <br>というタグを使います。 <br>には対応する終了タグはありません。 （XHTML 1.1では このように終了タグのないタグは最後に /を入れて <br/>と書くことになっています。 いまのところまだブラウザが対応していません。）
| 入力 | 表示 |
| 1<br>2<br>3<br> | 1 2 3 |
あいだに空行を入れて段落を作成したい場合は、 <p>〜</p>というタグで段落の文章を囲みます。 ただし、終了タグの </p>は省略可能です。 （XHTML 1.1では省略不可。）
また、水平線を入れて文章を仕切りたい時は <hr>というタグを使います。 <hr>も対応する終了タグはありません。 （XHTML 1.1では<hr/>。）
字の形を変えるタグには、次のようなものがあります。
| タグ | 意味 | 入力例 | 表示例 | 参考 |
|---|---|---|---|---|
| <b>〜</b> | 太字 | <b>太い</b> | 太い | |
| <i>〜</i> | 斜字 | <i>斜め</i> | 斜め | |
| <u>〜</u> | 下線 | <u>下線</u> | 下線 | 将来廃止予定 |
| <tt>〜</tt> | 等幅文字 | <tt>WWWiii</tt> | WWWiii | ttを使わなければ WWWiii |
| <s>〜</s> | 打消 | <s>打消</s> | 将来廃止予定 |
字の大きさを変えるには、 <font size="n" >〜</font> というタグを使います。n は 1〜7で、7が最大です。
| 入力 | 表示 | 備考 |
|---|---|---|
| <font size="1">n=1</font> | n=1 | |
| <font size="2">n=2</font> | n=2 | |
| <font size="3">n=3</font> | n=3 | 標準のサイズ |
| <font size="4">n=4</font> | n=4 | |
| <font size="5">n=5</font> | n=5 | |
| <font size="6">n=6</font> | n=6 | |
| <font size="7">n=7</font> | n=7 |
字の色を変えるには、 <font color="色名 ">〜</font> というタグを使います。色名 には次のようなものが使えます。
| 色名 | 日本語 | 見本 | 備考 | 色名 | 日本語 | 見本 | 備考 |
|---|---|---|---|---|---|---|---|
| black | 黒 | #000000 | green | 緑 | #008000 | ||
| silver | 銀 | #C0C0C0 | lime | ライム | #00FF00 | ||
| gray | 灰 | #808080 | olive | オリーブ | #808000 | ||
| white | 白 | #FFFFFF | yellow | 黄 | #FFFF00 | ||
| maroon | えび茶 | #800000 | navy | 濃紺 | #000080 | ||
| red | 赤 | #FF0000 | blue | 青 | #0000FF | ||
| purple | 紫 | #800080 | teal | コガモ | #008080 | ||
| fuchsia | フクシア | #FF00FF | aqua | 水色 | #00FFFF |
他の色名が使える場合もありますが、 全てのブラウザで表示できることが保証されているのはこれだけです。
（参考） さらに、赤(R)緑(G)青(B)の光の 3原色の強さを 00〜FFまでの 16進数（256段階）で指定する方法もあります。 <font color="#RRGGFF ">〜</font>という形で、 RR, GG, BBがそれぞれ赤, 緑, 青成分の強さです。
fontタグは将来廃止予定で CSS（Cascading Style Sheet）という仕組みに取って代わられそうです。
スタイルシートを使ってフォントの色や大きさを指定するためには、 styleというオプションを使います。スタイルシートでは、 ヘッダで一括してスタイルを指定することもできます （これが本来の使い方）が、 ここでは各タグにスタイルを適用する方法を紹介します。
字の形を変えるスタイルには、次のようなものがあります。
| スタイル | 意味 |
|---|---|
| font-weight:bold | 太字 |
| font-style:italic | 斜字 |
| text-decoration:underline | 下線 |
| text-decoration:line-through | 打消 |
styleオプションは、<p>〜</p>や <div>〜</div>などのいろいろなタグに追加することができます。 スタイルの適用のみを目的とするならば、<span>〜</span> というタグを使います。いくつかのスタイルを ;で区切って、 同時に書くこともできます。
| 入力例 | 表示例 |
|---|---|
| <span style="font-weight:bold">太い</span> | 太い |
| <span style="font-style:italic">斜め</span> | 斜め |
| <span style="text-decoration:underline">下線</span> | 下線 |
| <span style="text-decoration:line-through">打消</span> | 打消 |
| <span style="font-weight:bold;font-style:italic; text-decoration:underline">あああ</span> |
あああ |
字の大きさを変えるには、 "font-size:★" というスタイルを使います。 ★には次のようなものがあります。
| ★ | 表示 |
|---|---|
| xx-small | xx-small |
| x-small | x-small |
| small | small |
| medium | medium |
| large | large |
| x-large | x-large |
| xx-large | xx-large |
字の色を変えるには、"color:色名"というスタイル、 背景色を変えるには "background:色名"というスタイルを使います。
| 入力例 | 表示例 |
|---|---|
| <span style="color:red">赤</span> | 赤 |
| <span style="background:blue">青</span> | 青 |
| <span style="color:red;background:blue">青</span> | 青 |
「<」や「>」は HTML文書中で特別な意味を持っていますから、 「<」や「>」自体を表示するには特別な形が必要です。 また、HTML中では空白はいくつ連続していても、 1つの空白と同様に扱われますから、 複数の空白を挿入するときにも特別な方法が要ります。
| 入力 | 表示 | 備考 |
|---|---|---|
| < | < | less than |
| > | > | greater than |
| | （空白） | 空白を複数個挿入したいときに用いる |
| & | & | ampersand |
箇条書きは <ul>〜</ul>で箇条書きする部分を囲みます。 そして各項目を <li>〜</li>で囲みます。 （終了タグの </li>は省略できますが、 XHTML 1.1では省略不可になります。） 連番付の箇条書きは、<ul>〜</ul>の代わりに、 <ol>〜</ol>を使います。
| 入力 | 表示 |
|---|---|
|
<ul> <li> 項目その 1</li> <li> 項目その 2</li> <li> 項目その 3</li> </ul> |
|
|
<ol> <li> 項目その 1</li> <li> 項目その 2</li> <li> 項目その 3</li> </ol> |
|
段落の中央揃え・右揃えはそれぞれ、 <div align="center"> 〜 </div>と <div align="right"> 〜 </div>です。
<div align="center">これは真ん中</div>
<div align="right">これは右</div>
と入力すると、
<div>〜</div>の代わりに <p>〜</p>に alignオプションをつけても ほとんど同じです。ただし <p>の場合は、 段落の前後が 1行あきます。
ブラウザで表示されている HTML文書のある部分をクリックすると、 他の文書が表示されるようにできます。この機能が リンクです。 リンクを作成するタグは、
<a href="場所 ">〜</a>
です。 場所 の部分に、この部分をクリックしたときに表示する文書の場所を指定します。 この「場所」は、HTML文書をブラウザで表示したときに、 Internet Explorerの場合 「アドレス」、Netscape Navigatorの場合 「場所」のところに表示されている文字列のことです。
例えば、
<a href="http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/index.html">プログラミング Iのホームページ</a>
としておくと、
のようにリンクができます。
この場所のことを正式には URI（Uniform Resource Indicator） といいます。（URL（Uniform Resource Locator） ということもありますが、厳密には URIの方が URLより広い概念です。）
URIには絶対URIと 相対URIがあります。
絶対URIとは "http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/index.html" のように場所を省略することなく、すべて記述したものです。
最初の httpは場所にアクセスするためのプロトコルを表します。 http以外にも ftpなどのプロトコルがありますが、もっとも良く使うのは httpです。
:と//の後の guppy.eng.kagawa-u.ac.jpはコンピュータ名です。 （インターネットに直接つながっているコンピュータには、 必ずユニークな名前がついています。）
残りの/2001/Programming1/index.htmlがパスです。 つまりコンピュータの記憶装置の中の階層構造のどこにあるかを表しています。
Windowsで用いるパスと異なり、区切りの文字は \（バックスラッシュ）ではなく、 /（スラッシュ）です。 また、Windowsではパス中のアルファベットの大文字と小文字は区別しませんが、 URIでは一般的には大文字と小文字は区別します。
相対URIは絶対 URIの最初のいくつかの部分を省略したものです。 現在の URIに対する相対的な位置を表します。 特に単にファイル名を書けば、同じ場所（ディレクトリ）にあるファイルを表します。 例えば、http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/HTML.html という URIで表されているファイルから、index.html という相対 URIで参照されるファイルの絶対 URLは http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/index.htmlです。
下の例は現在の URIが http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/HTML.html の場合です。
| 相対 URI | 絶対 URI |
|---|---|
| index.html | http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/index.html |
| Examples/template.html | http://guppy.eng.kagawa-u.ac.jp/2001/Programming1/Examples/template.html |
| ../ProgLang/index.html | http://guppy.eng.kagawa-u.ac.jp/2001/ProgLang/index.html |
<!-- と -->の間はコメントになります。 つまり、ブラウザはこの部分をまったく無視します。 コメントは改行した時に入ってしまう空白をキャンセルするのにも使えます。
| 入力 | 表示 |
|---|---|
AB CDE |
AB CDE |
AB<!-- -->CDE |
ABCDE |
通常 HTML文書中では空白はいくつ続けても空白 1つと同じ扱いになり、 改行は空白と同じ扱いになります。空白や改行を入力のまま表示するには、 <pre>〜</pre>というタグを使います。
| 入力 | 表示 |
|---|---|
12345 12345 12345 |
12345 12345 12345 |
<pre> 12345 12345 12345 </pre> |
12345 12345 12345 |
テーブル（表）を作るためには、まず全体を <table>〜</table>というタグで囲みます。 （枠線つきのテーブルの場合は、borderというオプションをつけて、 <table border>〜</table>のようにします。） 次に行を <tr>〜</tr>というタグで囲みます。 最後に各項目を <td>〜</td>で囲みます。 ただし、 見出しに当たる項目の場合は、<th>〜</th>で囲みます。
| 入力 | 表示 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<table border> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> |
| ||||||||||||||||||||
<table border> <tr><th>A</th><th>B</th><th>A+B</th><th>A・B</th></tr> <tr><td>F</td><td>F</td><td>F</td><td>F</td></tr> <tr><td>F</td><td>T</td><td>T</td><td>F</td></tr> <tr><td>T</td><td>F</td><td>T</td><td>F</td></tr> <tr><td>T</td><td>T</td><td>T</td><td>T</td></tr> </table> |
|
複数行や複数列にわたるセルを作成することもできますが、 エディタでいちいちテーブルのタグを入力するのは面倒なので、 Netscape Composerなどの HTMLエディタを使用するのも一つの手でしょう。
<img src="場所 " alt="代替文字列 "> で画像を表示します。
場所 は画像ファイルのある場所（URI）です。
画像ファイルの形式には JPEG形式、PNG形式などが良く使われます。
代替文字列 は画像を表示できないブラウザが、 画像の代わりに表示する文字列です。
HTMLでファイルを作成したら、その HTMLファイルを Webサーバのしかるべき場所に置きます。
香川大学工学部の場合、学生用の Webサーバは stwwwというコンピュータです。stfileとディスクを共有しているので、 stfileにファイルを置けば、stwwwにファイルを置いたのと同じことになります。
stfileの各自のホームディレクトリ（Windowsからは \\stfile\homesというパスでアクセス可能）に public_htmlという名前のディレクトリを作り、そこに HTMLファイルを置きます。 foo.htmlという名前のファイルならば、 http://stwww.eng.kagawa-u.ac.jp/~s学籍番号/foo.htmlという URIでアクセス可能です。
なお index.htmlという名前は特別で、 この場合は URIの最後のファイル名を省略することができます。 上記のディレクトリに index.htmlというファイルを置いた場合は、 http://stwww.eng.kagawa-u.ac.jp/~s学籍番号 という URIでアクセス可能です。
課題： 次のテンプレートをコピーして、 いろいろと書き換えて自分のホームページを作成してみてください。
|
<html> <head><title>Hanako Sanuki</title></head> <body> <h1 align="center">讃岐花子のホームページ</h1> <hr> <img src="myface.png" alt="私の顔写真"> <p> <font color="red">こんにちは。</font> <h2>私のお勧めページ</h2> <ul> <li> <a href="http://www.pref.kagawa.jp/iryotandai/">香川県立医療短期大学</a> <li> <a href="http://www.eng.kagawa-u.ac.jp/">香川大学工学部</a> </ul> <!-- この部分はコメントです。画面には表示されません。--> <hr> <i>さぬきはなこ (hanako@eng.kagawa-u.ac.jp)</i> </body> </html> |
機種依存文字を使わない
（メールの時と同じ理由です。） いわゆる半角カナ・ローマ数字・丸つきの数字などは機種に依存する文字です。 Windowsでは表示できますが、他の機種で表示できるとは限りません。Webページ は相手がどんな機種で読むかわからないので、機種依存文字は使ってはいけま せん。
（特にトップページは）簡素にする
相手が低速な回線で見ている場合もあるので、 サイズの大きな画像をトップページに使うのは感心しません。 Javaもやめた方が良いでしょう。 FLASHも作り方によっては、サイズが大きくなるのでよく考えて使いましょう。 フレームや表（<table>）もむやみに多用するのはやめたほうが良いでしょう。
他人のページをリンクする時はマナーに気をつける
他人のページをリンクする時は、リンク先の作者に連絡するべきだという説と、 連絡する必要はない、という説があります。 （私（香川）は少なくとも公的な性格のあるページへのリンクには、 断りを入れる必要はないと思います。） これは、他人のすることには寛容に（つまり、自分のページを勝手にリンクされても怒らない）、 自分のすることは厳密に（自分が他人のページをリンクする時は連絡を入れる）、 という精神でいけば良いでしょう。
ところで「リンクはご自由に」という意味で、 "リンクフリー"という言葉を使っているページがありますが、 英語としておかしい（「リンクがない」という意味になってしまう）ので、 使わないようにしましょう。
ただし、次のような点には注意しましょう。
大学の Webサーバで金儲けをしない。
香川大学は国立大学ですので、 大学のコンピュータ機器は当然国民の税金でまかなわれています。 大学の Webサーバで商売をしてはいけません。
ネチケットとはすこし話題が異なりますが、作成した HTMLを全世界ではなく、 内輪でだけ公開したい時があります。
もし、stwwwに置いた HTMLファイルを香川大学外からアクセスできないようにしたい場合は、 以下のような内容のファイル
<Limit GET> order deny,allow allow from 133.92. deny from all </Limit>
を作成し、「.htaccess」というファイル名にして置いて下さい。 するとそのディレクトリ以下にある HTMLファイルは、 香川大学内からのみ、アクセスできるようになります。