HTMLについて


HTMLとは

HTMLは Hyper Text Markup Languageの略です。 文字通りハイパーテキストを記述するための言語です。

WWW上の文書(Internet Explorerや Firefoxなどのブラウザで閲覧できる文書)は、 基本的にこの HTMLで書かれています。 この文書「HTMLについて」自身も HTMLで書かれています。

なお、このページでは HTMLという規格のごく一部のみを紹介しています。 もっと詳しく知りたい人は以下のリンクや、いろいろな書籍を参照して下さい。


HTML文書の作成

HTML文書はメモ帳のようなエディタでも作成することができます。 その場合、フォント(字の形)や字の大きさ・色などを変えるときには、 タグというものを使います。 HTMLのタグは「<...>」という形をしています。 例えば、「太い」のように文字を太字にするには、 「<b>太い</b>」のように書きます。 <b>が太字の開始を、 </b>が太字の終了を表わします。 すると、ブラウザで見たときには「太い」の部分が太字で表示されます。 一般に HTMLのタグは <...></...>の対という形で使われることが多く、 前者が何かの開始、後者が何かの終了を表わします。 (なお、タグに使うアルファベットは大文字・小文字は区別しないので、 先ほどの例は <B>太い</B> でも構いません。 ただし、今後(XHTML1.1の規格では小文字を使うことに統一されそうです。)

Microsoft Wordや OpenOffice.org Writerなどワープロソフトを使えば、 タグを直接見ることなく、整形された形をその場で確認しながら HTML文書を作成することができますが、 メモ帳のようなエディタで作成する方法は、 慣れれば意外に早いですし、なんと言ってもメモ帳は最初から Windowsに無料でついてきます。 また、タグを知っていれば、他人の書いた HTML文書を見て、 そのテクニックを真似することもできます。 (Internet Explorerの場合、 メニューの「ページ」―「ソースの表示」で、 Firefoxの場合、 メニューの「表示」―「ページのソース」で、 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-JPJISコード 
Shift_JISシフト JISコード Windowsパソコンのメモ帳で新規にファイルを作ると普通これになる。x-sjisは誤り。
EUC-JPEUC JISコード UNIX系のコンピュータではこれが多かった。
UTF-8UTF-8コード最近の Linuxや Windowsでもこれを使うアプリケーションが多くなってきた。

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> WWWiiittを使わなければ 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原色の強さを 00FFまでの 16進数(256段階)で指定する方法もあります。 <font color="#RRGGFF ">〜</font>という形で、 RR, GG, BBがそれぞれ赤, 緑, 青成分の強さです。


CSSを使ったフォントの指定

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-color:色名"というスタイルを使います。

入力例表示例
<span style="color:red">赤</span>
<span style="background-color:blue">青</span>
<span style="color:red;background-color:blue">青</span>


「<」や「>」

「<」や「>」は HTML文書中で特別な意味を持っていますから、 「<」や「>」自体を表示するには特別な形が必要です。 また、HTML中では空白はいくつ連続していても、 1つの空白と同様に扱われますから、 複数の空白を挿入するときにも特別な方法が要ります。

入力表示備考
&lt; < less than
&gt; > greater than
&nbsp; (空白) 空白を複数個挿入したいときに用いる
&amp; & ampersand

また、&なんとか;という形は、いわゆる機種依存文字を表示 するためにも使えます。例えば○つきの数字やローマ数字は機種依存文字なの で、ふつうにShift_JISで書かれたHTML中に使うと、Windows PCでは表示でき ても、他の機種では正しく表示できません。ただし、Unicodeという文字コー ドには入っているので、数値文字参照という形を使えば(フォントが入っていれば) 表示できます。(また、はじめからページ全体を Unicodeで書くという方法もあります。)

入力表示備考
&#8545; 8545はⅡの unicode
&#9313; 9313は②の unicode


箇条書き・連番つき箇条書き・右揃え・中央揃え

箇条書きは <ul>〜</ul>で箇条書きする部分を囲みます。 そして各項目を <li>〜</li>で囲みます。 (終了タグの </li>は省略できますが、 XHTML 1.1では省略不可になります。) 連番付の箇条書きは、<ul>〜</ul>の代わりに、 <ol>〜</ol>を使います。

入力 表示
<ul>
<li> 項目その 1</li>
<li> 項目その 2</li>
<li> 項目その 3</li>
</ul>

  • 項目その 1
  • 項目その 2
  • 項目その 3
<ol>
<li> 項目その 1</li>
<li> 項目その 2</li>
<li> 項目その 3</li>
</ol>

  1. 項目その 1
  2. 項目その 2
  3. 項目その 3

段落の中央揃え・右揃えはそれぞれ、 <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文書をブラウザで表示したときに、 上の方 ところに表示されている文字列のことです。

例えば、

  <a href="http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/index.html">ホームページ</a>

としておくと、

  ホームページ

のようにリンクができます。

この場所のことを正式には URI(Uniform Resource Indicator) といいます。(URL(Uniform Resource Locator) ということもありますが、厳密には URIの方が URLより広い概念です。)

URIには絶対URIと 相対URIがあります。

絶対URIとは "http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/index.html" のように場所を省略することなく、すべて記述したものです。

最初の httpは場所にアクセスするためのプロトコルを表します。 http以外にも ftpなどのプロトコルがありますが、もっとも良く使うのは httpです。

://の後の guppy.eng.kagawa-u.ac.jpはコンピュータ名です。 (インターネットに直接つながっているコンピュータには、 必ずユニークな名前がついています。)

残りの/2010/Kyosemi/index.htmlパスです。 つまりコンピュータの記憶装置の中の階層構造のどこにあるかを表しています。

Windowsで用いるパスと異なり、区切りの文字は \(バックスラッシュ)ではなく、 /(スラッシュ)です。 また、Windowsではパス中のアルファベットの大文字と小文字は区別しませんが、 URIでは一般的には大文字と小文字は区別します

相対URIは絶対 URIの最初のいくつかの部分を省略したものです。 現在の URIに対する相対的な位置を表します。 特に単にファイル名を書けば、同じ場所(ディレクトリ)にあるファイルを表します。 例えば、http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/HTML.html という URIで表されているファイルから、index.html という相対 URIで参照されるファイルの絶対 URLは http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/index.htmlです。

下の例は現在の URIが http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/HTML.html の場合です。
相対 URI絶対 URI
index.html http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/index.html
Examples/template.html http://guppy.eng.kagawa-u.ac.jp/2010/Kyosemi/Examples/template.html
../CompNet1/index.html http://guppy.eng.kagawa-u.ac.jp/2010/CompNet1/index.html
..は Windowsと同様、一つ上の階層(親ディレクトリ)を表します。


コメント

<!---->の間はコメントになります。 つまり、ブラウザはこの部分をまったく無視します。 コメントは改行した時に入ってしまう空白をキャンセルするのにも使えます。

入力表示
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>
123
456
789
<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>
ABA+BA・B
FFFF
FTTF
TFTF
TTTT

複数行や複数列にわたるセルを作成することもできますが、 エディタでいちいちテーブルのタグを入力するのは面倒なので、 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でアクセス可能です。


課題

次のテンプレートをコピーして、 いろいろと書き換えて自分のホームページを作成してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<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.eng.kagawa-u.ac.jp/">香川大学工学部</a>
<li> <a href="http://www.kagawa-u.ac.jp/">香川大学</a>
</ul>

<!-- この部分はコメントです。画面には表示されません。-->
<hr>
<i>さぬきはなこ (hanako@eng.kagawa-u.ac.jp)</i>
</body>
</html>


戻る
Koji Kagawa