HTMLの復習

すぐにホームページが作れるように HTMLの書き方を簡単にまとめてみました。ただし、あまりにも説明が簡単であったり、不正確な表現もかなりありますので、より詳しく勉強したい人は、情報科学演習関連のリンクで紹介したページやその他の参考ページ、参考書などを自分で調べてください。意見・感想は松本まで。

1. HTML ファイルの基本構造
2. 見出し (Heading)
3. 段落 (Paragraph)
4. 改行 (BReak)
5. 箇条書き (List)
6. ハイパー・リンク
7. 署名
8. 罫線
9. 特殊な文字
10. 整形済みテキスト (PRE-formatted text)
11. 引用 (BLOCKQUOTE)
12. 画像を挿入 (IMaGe)
13. 表 (TABLE)
14. 文字色と背景色・背景イメージの指定
15. 取り消し

1. HTML ファイルの基本構造

簡単な HTML ファイル

タグ(<要素名>と</要素名>)を使って、文書内の各要素を定義していきます。

ソース

<html>
  <head>
    <title>初めてのページ</title>
  </head>
  <body>
    これは初めてのページです。
  </body>
</html>

表示例

これは初めてのページです。

<head>〜</head> には、表示したい内容ではなく、ページのタイトルやキーワード、文字コードなどの情報(メタ情報)を入れておきます。 <title>〜</title> にはそのページの題を書きます。そして表示したい内容は、<body>〜</body> の間に書きます。始まりのタグを書いたら忘れないうちに終りのタグも書いておきましょう。

文書型定義

歴史的な発展に伴い、HTMLにはいろいろなバージョン(文法)があります。そして、どのバージョンの HTML を使用して内容を記述するか、ということを明記するために文書型定義 (Document Type Definition) とよばれるものを最初の行に書いておく必要があります。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"">
<html>
  <head>
    <title>初めてのページ</title>
  </head>
  <body>
    これは初めてのページです。
  </body>
</html>

表示例

これは初めてのページです。

文書型宣言については、神崎さんのページに詳しい説明があります。

日本語のコード指定

ブラウザやサーバにも依存しますが、日本語のコードを正しく指定しないと文字化けしてしまうブラウザもあります。アクセシビリティを向上させるためにも以下のようにヘッダに日本語コードを記述しておきましょう。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <title>初めてのページ</title>
  </head>
  <body>
    これは初めてのページです。
  </body>
</html>

表示例

これは初めてのページです。

charset のところは日本語のコードを指定します。以前はGNU/LinuxやUnixではEUCが、 WindowsやMacではshift-jisが使われていましたが、最近ではutf-8がよく使われます。 EUCの場合には「euc-jp」、shift-jisの場合には「Shift_JIS」、 JISコードの場合には「ISO-2022-JP」、 UTF-8の場合には「utf-8」と指定してください。

スタイルシート

文字の色や大きさ、背景の色、その他、空白などの文書レイアウトに関する設定は、スタイルシートを用いて行います。以下の例では、mystyle.cssという別のファイルを作成して、そこにスタイルを記述しています。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="mystyle.css" type="text/css">
    <title>スタイルシートを使った例</title>
  </head>

  <body>
      このようにスタイルを別のファイルで指定しておくと、
      複数のページで共通のスタイルを使用しても、
      変更する場合には一つのファイルだけを編集すればいいだけなので
      とても便利です。
  </body>

</html>

ソース (mystyle.css)

body {
  color: #6600cc; 
  background-color: #ccff99;
  margin-left: 10%;
  margin-right:10%;
}

この例では、mystyle.cssというファイルを作成して、そこにスタイルを記述しています。

2. 見出し (Heading)

見出し

見出しのレベルは1から6まであります。

ソース

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>

表示例

見出し１

見出し２

見出し３

見出し４

見出し５

見出し６

これらのタグはいろいろなレベルの見出しを指定するものであって、文字の大きさを指定するものではない、ということに注意してください。表示される見出しの文字の大きさはスタイルシートで指定します。

見出しの位置・色指定など

位置や色などの体裁はスタイルシートで記述します。

ソース

<h2>左寄せ見出し</h2>
<h3>センタリングした青い見出し (背景は黄色)</h3>
<h4>右寄せした赤い見出し</h4>

ソース (スタイル指定)

h2 { text-align: left; font-size: large;}
h3 { text-align: center; color:blue; background-color: yellow;}
h4 { text-align: right; color:red;}

表示例

左寄せ見出し

センタリングした青い見出し (背景は黄色)

右寄せした赤い見出し

このようにして、それぞれのエレメントのスタイルを指定することができます。位置と色などスタイルを複数指定する場合には、セミコロン(;)で区切って続けて指定します。色に関しては、色の指定の説明を見てください。また、タグの中で直接スタイルを指定することもできますが、この場合には <head> 〜 </head> の中に以下の行を入れておきましょう。

    <meta http-equiv="Content-Style-Type" content="text/css">

3. 段落 (Paragraph)

ソース

<p>
    ひとつの段落はこのように区切ります。
</p>
<p>
    これは次の段落です。
    ひとつの段落を適当に区切ってあまり長くならないようにしましょう。
    単に改行したい場合には次の「改行」のようにしてください。
</p>
<p>
    それぞれの段落でどのようなことを書くのか、
    ということをよく考えましょう。
</p>

表示例

ひとつの段落はこのように区切ります。

これは次の段落です。ひとつの段落を適当に区切ってあまり長くならないようにしましょう。単に改行したい場合には次の「改行」のようにしてください。

それぞれの段落でどのようなことを書くのか、ということもよく考えましょう。

4. 改行 (BReak)

ソース

強制的に改行するときには、<br />
このようにします。

表示例

強制的に改行するときには、
このようにします。

<br /> の乱用はなるべく避けましょう。通常は、段落の指定 <p>〜</p> で十分だと思います。プログラムのソースコードのように、そのまま表示したい場合には <pre>〜</pre> を使った方が便利です。

5. 箇条書き (List)

番号なしリスト (Unordered List)

ソース

<ul>
   <li>理科</li>
   <li>体育</li>
   <li>算数</li>
</ul>

表示例

理科
体育
算数

このようにひとつひとつの項目(List Item)を <li>〜</li> で囲みます。

番号つきリスト (Ordered List)

ソース

<ol>
   <li>理科</li>
   <li>体育</li>
   <li>算数</li>
</ol>

表示例

理科
体育
算数

番号つきリストの場合、このようにひとつひとつの項目(List Item)に自動的に番号がつきます。

定義リスト (Definition List)

ソース

<dl>
  <dt>順序なしリスト</dt>
  <dd>順序(番号)をつけない箇条書き。記号を変えることもできる。</dd>
  
  <dt>順序つきリスト</dt>
  <dd>順序をつける箇条書き。自動的に番号がつく</dd>
  
  <dt>定義リスト</dt>
  <dd>定義を列挙する。辞書的な用法に適している。</dd>
</dl>

表示例

順序なしリスト: 順序(番号)をつけない箇条書き。記号を変えることもできる。
順序つきリスト: 順序をつける箇条書き。自動的に番号がつく
定義リスト: 定義を列挙する。辞書的な用法に適している。

このように定義リストでは定義する用語 (Definition Term) と定義の説明 (Definition Description) のペアを列挙します。

入れ子のリスト

ソース

<ul>
   <li>すきな科目
     <ol>
       <li>理科</li>
       <li>体育</li>
       <li>算数</li>
      </ol>
   </li>
   <li>趣味
     <ol>
       <li>スキー</li>
       <li>サッカーゲーム</li>
     </ol>
   </li>
</ul>

表示例

すきな科目
1. 理科
2. 体育
3. 算数
趣味
1. スキー
2. サッカーゲーム

このように箇条書きの項目 (List Item)の中に箇条書きを含めることができます。これを入れ子構造と言います。

6. ハイパー・リンク

URLを参照

ソース

<a href="http://www.shinshu-u.ac.jp/">信州大学のホームページ</a>

表示例

信州大学のホームページ

スペル間違いを無くすため、URL はなるべく手で入力せずコピー＆ペーストで入力するようにしましょう。

ファイルを参照

ソース

<a href="another.html">次のページ</a>へ進む
<br />
<a href="recipe/curry.html">カレーのレシピ</a> 
<br />
<a href="../foo.html">親ディレクトリのファイル</a>

表示例

次のページへ進む
カレーのレシピ
親ディレクトリのファイル

ファイルにリンクを張る場合には必ず相対パスで表記します。リンク先のファイルが同じディレクトリにある場合には単にファイル名だけを書くか、現在のディレクトリ「./」に続いてファイル名を書きます。また親ディレクトリ(ひとつ上のディレクトリ)は「../」で表します。絶対パス (/home/…/public_html/…) では絶対に書かないようにしましょう。

ページの途中を参照

ソース

… <br />
… <br />
<h2 id="sample1">ジャンプ先</h2> (ここに飛びたい) …<br />
… <br />
… <br />
… <br />
… <br />
… <br />
<a href="#sample1">ここから飛びたい</a>
<br />
<a href="foo.html#sample2">違うファイルの特定の箇所</a>

表示例

…
…

ジャンプ先

(ここに飛びたい)
…
…
…
…
…
ここから飛びたい
違うファイルの特定の箇所

ジャンプしたいh2に <h2 id="…">ジャンプ先<h2> のようにしてあらかじめidで名前を付けておきます。参照する場合には、その名前の前に # を付けます。

ところで「このページの最初にもどる」でこのページの最初に戻ることができるのは、最初の見出しのところに

      <h1 id="top">HTMLの復習</h1>

のように名前を付けておいたからです (このページのソースを見ればわかります)。

7. 署名

ソース

<address>
  <a href="mailto:matsu@johnen.shinshu-u.ac.jp">Seiji Matsumoto</a>
</address>

表示例

Seiji Matsumoto

書いたページに責任を持つという意味でも、ページの最後が最初に自分の署名をいれておきましょう (もちろん <body>〜</body> の間に書く)。

8. 罫線

ソース

<hr />
<hr style="width:70% ; margin-left:15% ;" />

表示例

9. 特殊な文字

ソース

&lt;  小なり <br />
&gt;   大なり <br />
&amp;  アンパサンド <br />
&quot; ダブル・クォート <br />
&nbsp;  空白

表示例

< 小なり
> 大なり
& アンパサンド
" ダブル・クォート
空白

上のように HTML で特殊な意味を持つ文字は、そのまま書いてはいけません。

10. 整形済みテキスト (PRE-formatted text)

ソース

<pre>
  書いたテキストは
  このように
  そのまま表示される。

  プログラムのソースコードを表示するときに
  よく用いられる。
</pre>

表示例

  書いたテキストは
  このように
  そのまま表示される。

  プログラムのソースコードを表示するときに
  よく用いられる。

11. 引用 (BLOCKQUOTE)

ソース

<p>エリック・レイモンドは「How To Become A Hacker」の中で、</p>
<blockquote>
<p>プログラムを学ぶということは、よい自然な言語を書くのを学ぶようなも
のです。学ぶのにもっともよい方法はフォームをマスターした者によって書か
れたものを読むことです。自分で何かを書く、もっとたくさん読む、少し書く、
もっとたくさん読む、もっと何かを書く......そしてあなたの書くものが、手
本で理解できた長所を取り入れ無駄がはぶかれた美しいものに進展しはじめる
まで繰り返しなさい。 </p>
</blockquote>
<p>と書いている。</p>

表示例

エリック・レイモンドは「How To Become A Hacker」の中で、

プログラムを学ぶということは、よい自然な言語を書くのを学ぶようなものです。学ぶのにもっともよい方法はフォームをマスターした者によって書かれたものを読むことです。自分で何かを書く、もっとたくさん読む、少し書く、もっとたくさん読む、もっと何かを書く......そしてあなたの書くものが、手本で理解できた長所を取り入れ無駄がはぶかれた美しいものに進展しはじめるまで繰り返しなさい。

と書いている。

もちろんスタイルを指定することもできます (色の指定参照)。

ソース (スタイル指定)

blockquote { margin-left: 2em; background-color: #ffccff; }

表示例

エリック・レイモンドは「How To Become A Hacker」の中で、

プログラムを学ぶということは、よい自然な言語を書くのを学ぶようなものです。学ぶのにもっともよい方法はフォームをマスターした者によって書かれたものを読むことです。自分で何かを書く、もっとたくさん読む、少し書く、もっとたくさん読む、もっと何かを書く......そしてあなたの書くものが、手本で理解できた長所を取り入れ無駄がはぶかれた美しいものに進展しはじめるまで繰り返しなさい。

と書いている。

12. 画像を挿入 (IMaGe)

単純な埋め込み

ソース

<p>
  <img src="car.png" alt="車の絵" />
  <img src="car.png" width="200" height="100" alt="車の絵" />
</p>

表示例

車の絵

src にはファイル名あるいは URL を指定します。グラフィカルなブラウザでなくても内容がある程度わかるように、画像の簡単な説明を alt 属性に書いておきましょう。通常は width や height で画像のサイズを指定しますが、小さな画像(解像度の低い画像)を拡大した場合にはギザギザになります。

13. 表 (TABLE)

基本的な表

ソース

<table>
  <caption>月の名前</caption>
  <tr>
    <td> １月 </td>  <td> 睦月 </td>  <td> January </td>
  </tr>
  <tr>
    <td> ２月 </td>  <td> 如月 </td>  <td> February </td>
  </tr>
  <tr>
    <td> ３月 </td>  <td> 弥生 </td>  <td> March </td>
  </tr>
</table>

表示例

月の名前
１月	睦月	January
２月	如月	February
３月	弥生	March

１行 (Table Raw) ごとに <tr>〜</tr> で囲みます。さらに一つの欄 (Table Data、セルとも言う) を <td>〜</td> で囲みます。<caption>〜</caption> には表の説明を書きます。

境界線、表の説明

ソース

<table border="1">
  <caption>月の名前</caption>
  <tr>
    <td> ４月 </td>  <td> 卯月 </td>  <td> April </td>
  </tr>
  <tr>
    <td> ５月 </td>  <td> 皐月 </td>  <td> May </td>
  </tr>
</table>

表示例

月の名前
４月	卯月	April
５月	皐月	May

<caption>〜</caption> で表の題を書いておきましょう。

複雑な表

いろいろな表の例がネットスケープ社のページにあります。

14. 文字色・背景色・背景イメージの指定

テキストの文字色・背景色の指定

ソース (スタイル指定)

span.hitokotomidashi { color: #0000FF; background-color: #FFFF00; }
span.important { color: red; }

ソース

<span class="hitokotomidashi">今日のひとこと</span>
できるだけ<span class="important">文書の構造とスタイルを分離</span>しましょう。

表示例

今日のひとことできるだけ文書の構造とスタイルを分離しましょう。

以前は <font> というタグを使って文字の色や大きさを指定していましたが、文書の構造とスタイルを分離するという近年の流れでは、なるべくスタイルシート使った方がよいでしょうまた、書体も変えることができますが、表示のされかたはブラウザやOSにかなり依存していますので自分が見ているのと同じように他の人が見ているという保証は全然ありません。 (なるべく文字の体裁よりも内容に時間を使いましょう)。

色を数字で表す (216色)

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

テキストと背景色とデフォルト色、背景イメージの指定

ソース (スタイル指定)

body {
  color: #FFFF00;
  background-color: #336666; 
  background-image: url(mybackground.jpg);
}

このようにスタイルシートを使えばいろいろな要素に対してその表現方法を指定してすることができます。

それ以外のスタイル指定

例えばとほほのスタイルシート入門に詳しく載っています。

15. 取り消し

ソース

チケットは<del>まだあります</del> 完売しました。

表示例

チケットは~~まだあります~~ 完売しました。

以前のテキストをどのように変更したかはっきりと示したいときにはこの取消しのタグをつかいましょう。

Seiji Matsumoto

Last modified: Wed Jun 9 10:19:04 JST 2004

HTMLの復習

目次

1. HTML ファイルの基本構造

簡単な HTML ファイル

文書型定義

日本語のコード指定

スタイルシート

2. 見出し (Heading)

見出し

見出し１

見出し２

見出し３

見出し４

見出し５

見出し６

見出しの位置・色指定など

左寄せ見出し

センタリングした青い見出し (背景は黄色)

右寄せした赤い見出し

3. 段落 (Paragraph)

4. 改行 (BReak)

5. 箇条書き (List)

番号なしリスト (Unordered List)

番号つきリスト (Ordered List)

定義リスト (Definition List)

入れ子のリスト

6. ハイパー・リンク

URLを参照

ファイルを参照

ページの途中を参照

ジャンプ先

7. 署名

8. 罫線

9. 特殊な文字

10. 整形済みテキスト (PRE-formatted text)

11. 引用 (BLOCKQUOTE)

12. 画像を挿入 (IMaGe)

単純な埋め込み

13. 表 (TABLE)

基本的な表

境界線、表の説明

複雑な表

14. 文字色・背景色・背景イメージの指定

テキストの文字色・背景色の指定

色を数字で表す (216色)

テキストと背景色とデフォルト色、背景イメージの指定

それ以外のスタイル指定

15. 取り消し