※このページはフレーム構成です。検索で来られた方はこちらからご覧ください。

●HTML の基本

まずはじめにおことわりいたします．このページは 1997 年頃にハンドコーディングで書いたものですので，現在では少々古い内容になっています．また，いくつか修正はしましたが，古き良き時代には許された，文法的に少々お行儀の悪い部分もあるかも知れません．しかし、現在でも少々複雑なホームページを作成すると，ここでご紹介する html タグを知っているのと知らないのとでは，相当違ってきます．というわけで，引き続き公開しております．

なお、検索でいらっしゃる方に多い、テキストの右寄せの方法は その他 に出てきます.

いわゆるインターネットのホームページ（WWW; World Wide Web）は HTML（Hyper Text Markup Language） と呼ばれる簡易言語によって記述されます． 以下にもっとも基本的な HTML の例をあげます．

Example 


<html>
<head><title>例題1</title></head>
<body>
これはもっとも基本的な HTML の例です．<br>
タイトルが"例題1"と表示されています．<p>
うまく表示されましたか？
</body>
</html>

これを Windows の notepad（メモ帳） や Macintosh の simpletext などのテキストエディタで作成して （ファイル名を "ex1.html" として保存しておきましょう．）， ブラウザ（ネットスケープやインターネットエクスプローラ）で 表示してみてください．
保存したファイル（アイコン）をダブルクリックすれば， ブラウザが起動され表示されます．
間違いなく作成できていれば こんな風 に表示されるはずです．

さて，例題1で見たように，HTML はタグと呼ばれる <> で囲まれた文字列 によって表示の仕方（書式）を定義します．

また，タグは基本的に <html>...</html> のようにペアで使い， その書式の及ぶ範囲を間に挟むようにします．ただし，<br> や <p> のように単独で使用するものもあります．

例題1で使用したタグの説明をしておきましょう．

Reference Manual

●文字サイズ

今度は文字の大きさを変えてみましょう．

Example


<html>
<head><title>例題2</title></head>
<body>
見出し（ヘッドライン）を書くときには次のようなものがある．
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>小見出し</h4>
<h5>小見出し</h5>
<h6>小見出し</h6>
でも，これは見出し用のタグなので勝手に改行してしまいます．<p>

見出し以外の本文中で自由に文字サイズを変えるには
<font size="7">こ</font>
<font size="6">ん</font>
<font size="5">な</font>
<font size="4">風</font>
<font size="3">に</font>
<font size="2">す</font>
<font size="1">る</font><p>

<font size="5">
また，<b>太字</b>や<i>斜体</i>，<blink>点滅</blink>も
簡単にできます．
</font>
</body>
</html>

例題1の要領で作成してみてください．（"ex2.html"） 結果はこんな風 に表示されるはずです．

例題2で使用したタグの説明をしておきましょう．

Reference Manual

●文字色と背景色

今度は文字の色や背景の色を変えてみましょう．

Example


<html>
<head><title>例題3</title></head>
<body bgcolor="black" text="white">
<font color="red">文字</font>の<font color="green">色</font>
も<font color="blue" size="7">自由</font>に
<font color="yellow">変える</font>ことが
<font color="#ffaa33">できます．</font><p>
また，このように背景色も自由に設定できます．<p>

ついでに水平ラインも引いておきましょう．
<hr>
線の太さや幅も変えられます．<p>
<hr size="10" width="80%">
<hr size="5" width="50%">
<p>
また，通常はセンタリング（中央よせ）されますが<p>
<hr align="left" width="50%">
左よせ
<hr width="50%">
中央よせ
<hr align="right" width="50%">
右よせができます．
</body>
</html>

同様に作成してみてください．（"ex3.html"） 結果はこんな風 に表示されるはずです．

※お知らせ
"右よせ" の検索でココに来られる方が多いようですが、テキストの右よせは その他 にあります。 例題3で使用したタグの説明をしておきましょう．

Reference Manual

●イメージ

いよいよイメージ（画像）を張り付けてみましょう．

さて，その前に一般に用いられる３種類の画像ファイルのフォーマット （形式）について理解しておく必要があります．

Example

<html>
<head><title>例題4</title></head>
<body>
文章と画像の位置関係に注意してください．<p>

下下<img src="gif/otaru.gif">下下<p>
中中<img src="gif/otaru.gif" align="middle">中中<p>
上上<img src="gif/otaru.gif" align="top">上上
</body>
</html>

同様に作成してみてください．（"ex4.html"）
結果を表示する前に，今作成した "ex4.html" が保存されているフォルダの中に "gif" という名前のフォルダを作成し，作成したフォルダの中に画像ファイル "otaru.gif" をコピーしておく必要があります．
"otaru.gif" はここにあります から，マウスを右クリックして（マックの場合はマウスボタンを押し続けて）保存してください．
この時のディレクトリ構成は このようになります．
結果はこんな風 に表示されるはずです．

例題4で使用したタグの説明をしておきましょう．

Reference Manual

Example

<html>
<head><title>例題5</title></head>
<body>
文章と画像の位置関係に注意してください．<p>

<img src="gif/otaru.gif" align="left">
これは文章の回り込みの例です．<br>
先ほどの例では画像の横には１行しか書けませんでしたが，
画像を左よせや右よせにすることで複数行書けるようになります．
<br clear="all">
<img src="gif/otaru.gif" align="right">
ちなみに写真は小樽運河で撮ったものです．<br>
なかなかよく撮れてます．<br clear="all">

<center>
文章や画像をセンタリング（中央よせ）することもできます．<p>
<img src="gif/otaru.gif">
</center>
</body>
</html>

同様に作成してみてください．（"ex5.html"）
結果はこんな風 に表示されるはずです．

例題5で使用したタグの説明をしておきましょう．

Reference Manual

●リンク

次は，他の文章（HTMLファイル）へのリンクをやってみましょう．

ここまでまじめにやってきた人は例題1～例題5の HTML ファイル（ex1.html～ex5.html）があるはずですね？ ちゃんとある人は次の例題6をやってください．

Example


<html>
<head><title>例題6</title></head>
<body>
<a href="ex5.html">ここ</a>を押せば例題5に飛んでいきます．<p>
下の写真（gif）をクリックすると大きな写真（jpeg）が見られます．<p>
<a href="jpeg/otaru.jpg"><img src="gif/otaru.gif"></a><p>
もし，あなたのパソコンがインターネットにつながっていれば
<a href="http://www.whitehouse.gov/">ここ</a>をクリックすれば
アメリカ合衆国ホワイトハウスのホームページに飛んでいきます．
</body>
</html>

同様に作成してみてください．（"ex6.html"）
結果を表示する前に，今作成した "ex6.html" が保存されているフォルダの中に "jpeg" という名前のフォルダを作成し，作成したフォルダの中に画像ファイル "otaru.jpg" をコピーしておく必要があります．
"otaru.jpg" はここにあります から，マウスを右クリックして （マックの場合はマウスボタンを押し続けて）保存してください．
この時のディレクトリ構成は このようになります．
結果はこんな風 に表示されるはずです．

例題6で使用したタグの説明をしておきましょう．

Reference Manual

●リスト

次は，リスト（箇条書き）です．

Example


<html>
<head><title>例題7</title></head>
<body>
HTML では３つのリストが使えます．<p><hr>
<h3>番号なしリスト</h3>

<ul>
<li>犬
<li>猫
</ul>

<hr>
<h3>番号付きリスト</h3>

<ol>
<li>犬
<li>猫
</ol>

<hr>
<h3>定義型リスト</h3>

<dl>
<dt>犬
<dd>４本足でワンと鳴く．
<dt>猫
<dd>４本足でニャァと鳴く．
</dl>

<hr>
</body>
</html>

同様に作成してみてください．（"ex7.html"）
結果はこんな風 に表示されるはずです．

例題7で使用したタグの説明は省略します．
例題7の HTML とブラウザでの表示結果をよく比較してみてください．
リストの中にリストを定義することもできます．

●テーブル

次は，テーブル（表組）です．

Example


<html>
<head><title>例題8</title></head>
<body>
テーブル（表組）の例です．<br>
ちょっと複雑そうに見えますが，わかってしまえば簡単です．<p>

<table border>
<tr>
 <th></th><th>月</th><th>火</th><th>水</th>
</tr>
<tr>
 <th>１限</th><td>国語</td><td></td><td>算数</td>
</tr>
<tr>
 <th>２限</th><td>理科</td><td>社会</td><td></td>
</tr>
</table>
<p>

<table border="5" cellpadding="10" cellspacing="10">
<caption>表のタイトル</caption>
<tr>
 <td>AAAAA</td><td colspan="2" align="center">BBBBB</td>
</tr>
<tr>
 <td rowspan="2">CCCCC</td>
 <td bgcolor="darkslategray"><font color="white">DDDDD</font></td>
 <td>EEEEE</td>
</tr>
<tr>
 <td>FFFFF</td><td align="right">123</td>
</tr>
</table>
</body>
</html>

同様に作成してみてください．（"ex8.html"）
結果はこんな風 に表示されるはずです．

例題8で使用したタグの説明は省略します．
例題8の HTML とブラウザでの表示結果をよく比較してみてください．
border="5" や cellpadding="10"，cellspacing="10" の数字を変えれば， 表の雰囲気が変わります．

●その他

これまでに紹介しきれなかった，いくつかのタグを紹介しておきます．

Example


<html>
<head><title>例題9</title></head>
<body text="white" background="gif/forest.gif">
その他，このように背景に画像ファイル（gif ファイル）を
張り付けたりもできます．<p>

ここでは，これまでに紹介しなかったいくつかのタグを
列挙しておきます．<p>

<div align="right">テキスト（文章）の右よせ</div>

<pre>
あいうえお
         かきくけこ
                   さしすせそ
</pre>

<strong>最強調文字．</strong><p>
<em>斜体で強調．</em><p>
<big>文字を大きくする．</big><p>
<small>文字を小さくする</small><p>
<s>抹消線を引く．</s><p>
<u>下線を引く．</u><p>
<sup>上付き</sup>文字と<sub>下付き</sub>文字<p>
電子メールアドレスを書くときに
<address>hoge@icc.ac.jp</address>
のように使います．
</body>
</html>

同様に作成してみてください．（"ex9.html"）
結果を表示する前に，例題4で作成した "gif" という名前のフォルダの中に画像ファイル "forest.gif" をコピーしておく必要があります．
"forest.gif" はここにあります から，マウスを右クリックして （マックの場合はマウスボタンを押し続けて）保存してください．
この時のディレクトリ構成は このようになります．
結果はこんな風 に表示されるはずです．

例題9で使用したタグの説明をしておきましょう．

Reference Manual

●フレーム

フレームとは，ブラウズウインドウの中をいくつかに分割し，それぞれに違った HTML ファイルを表示させるものです．
例えば，この「HTML 基本講座」も「タイトル」，「目次」，「本編」の３つ部分に分割されたフレーム形式のページです．

Example


<html>
<head><title>例題10</title></head>
<frameset cols="25%,75%">
  <frame src="ex1.html">
  <frame src="ex2.html">
  <noframes>このページを表示するには，フレームをサポートしているブラウザが必要です．</noframes>
</frameset>
</html>

この例題10は，ウインドウを左右２つに分割し，それぞれに例題1と例題2の HTML を表示させるためのフレーム定義の HTML です．
注意するところはフレーム定義の HTML には <body>...</body> がないということです．
では，これまでと同様に作成してみてください．（"ex10.html"）
結果はこんな風 に表示されるはずです．

例題10で使用したタグの説明をしておきましょう．

Reference Manual

Example

<html>
<head>
<title>例題11</title>
</head>
<frameset cols="25%,75%">
  <frame src="ex1.html"> 
  <frameset rows="100,*">
    <frame src="ex2.html">
    <frame src="ex3.html">
  </frameset>
  <noframes>このページを表示するには，フレームをサポートしているブラウザが必要です．</noframes>
</frameset>
</html>

今度は少し応用してみましょう．
例題11は，まずウインドウを左25%，右75%に分割し， 左のウインドウに例題1を表示するように定義しています．
そして，右側のウインドウの中をさらに <frameset...>...</frameset> で上100ドット幅，下は残り全部と， 上下に分割し，上のウインドウに例題2，下に例題3を表示するように 定義しています．
同様に作成してみてください．（"ex11.html"）
結果はこんな風 に表示されるはずです．

●おわりに

HTML 基本講座はこれで終わりです．
これだけ知っていれば，なかなか見栄えのよいの ホームページが作成できるはずだと思います．
今回紹介しきれなかった部分は，市販の本や， 他人のホームページをハックしてください．
とはいえ，最近はそこそこ使える HTML エディターが市販されてますので，それを使ったほうが簡単かも知れません．

追記：UTF-8 化にあたって結構修正しました.

Last update: Mar. 2010,