HTML 入門2005年12月21日 | |
HTML とはHTML とは、文書に書式や構造やリンクを指定するための言語です。タグと呼ばれる "<" と">" で囲まれた 目印を使って、文字の書式や文書の構造を指定したり、他の文書へのリンクを設定することができます。 HTML は Web ブラウザで見ることができます。 基本構造もっとも基本的なタグは <html>...</html>, <head>...</head>, <body>...</body> です。
<html>...</html> : HTML 文書全体を表します。
<head>...</head> : 文書についての情報を指定します。
<body>...</body> : 本文を表します。
基本的な HTML 文書はつぎのようになります。
<!-- HTML の基本構造 -->
<html>
<head>
<title>タイトル</title>
</head>
<body>
... 本文 ...
</body>
</html>
<!--...--> はコメントを表し、無視されます。<title>...</title> は文書のタイトルを表します。上の HTML を テキストエディタで書き、たとえば "sample1.html" (HTML 文書の拡張子は .html や .htm です) などと名前を付けて 保存すれば、HTML 文書のできあがりです。 単純な HTML 文書単純な HTML 文書は、見出しと段落からなります。見出しは <h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6> で表します。 数字が大きくなるにつれて見出しのレベルが小さくなります (文書タイトル、章、節、小節、... のように)。段落は <p>...</p> で表します。 この「HTML 入門」の冒頭を HTML で表すとつぎのようになります (sample2.html)。
<!-- 「HTML 入門」の冒頭 -->
<html>
<head>
<title>HTML 入門</title>
</head>
<body>
<h1>HTML 入門</h1>
<h2>HTML とは</h2>
<p>HTML とは、文書に書式や構造やリンクを指定するための言語です。タグと呼ばれる "<" と">" で
囲まれた目印を使って、文字の書式や文書の構造を指定したり、他の文書へのリンクを設定することが
できます。</p>
<p>HTML は Web ブラウザで見ることができます。</p>
<h2>基本構造</h2>
...
</body>
</html>
<p>...</p> のなかでどんなに改行しても、表示では改行されません。複数の空白はひとつの空白に置き換えられます。 リンクリンクは <a>...</a> で指定します 。たとえば
ペンギンは、氷の上から、また断崖の上から海中に跳び込む。<a href="adelie.html">アデリーペン
ギン</a>の場合、跳び込む海が深ければ頭から、浅いときには足から跳び込む。
(青柳昌宏「ペンギンたちの不思議な生活」 講談社, 1997)
のような文章の場合、「アデリーペンギン」の部分に "href" で指定した文書へのリンクができます (sample3.html)。 画像画像を挿入するには <img> タグを使います。つぎのように "src" で画像を指定します (adelie.html)。
<img src="adelie.png">
リストリスト (箇条書き) には順序なしと順序ありの 2 種類あります (sample4.html)。 順序なしリストは <ul>...</ul> で表します。項目は <li>...</li> で表します。
<ul>
<li>にんにく</li>
<li>ニンジン</li>
<li>ジャガイモ</li>
<li>たまねぎ</li>
<li>カレールー</li>
</ul>
順序つきリストは <ol>...</ol> で表します。
<ol>
<li>なべで野菜を炒めます。</li>
<li>なべに水を入れて煮込みます。</li>
<li>なべにカレールーを入れて煮込みます。</li>
<li>とろみがでてきたらできあがり。</li>
</ol>
リストのなかにリストを入れることもできます。 表表は <table>...</table> であらわします。まず例を示します (sample5.html)。
<table border="1">
<caption>蔵書リスト</caption>
<thead>
<tr><th>著者</th><th>タイトル</th><th>出版社</th><th>出版年</th></tr>
</thead>
<tbody>
<tr><td>大野晋</td><td>日本語の起源 新版</td><td>岩波新書</td><td>1994</td></tr>
<tr><td>ポアンカレ (吉田洋一訳)</td><td>科学の価値</td><td>岩波文庫</td><td>1977</td></tr>
<tr><td>ほしよりこ</td><td>きょうの猫村さん 1</td><td>マガジンハウス</td><td>2005</td></tr>
<tr><td>安岡正篤</td><td>酔古堂剣掃</td><td>PHP 文庫</td><td>2005</td></tr>
</tbody>
</table>
大きな構造は <thead>...</thead> と <tbody>...</tbody> からなります。
<thead>...</thead> : 表の項目名を指定します。
<tbody>...</tbody> : 表の本体を指定します。
表の行は <tr>...</tr> であらわします。そのなかで、項目名は <th>...</th> であらわし、項目は <td>...</td> で あらわします。 <table> の "border" は表の線の太さを指定しています。<caption>...</caption> で表のタイトルをあらわします。 そのまま表示段落 <p>...</p> 内では改行や複数の空白はそのまま表現されません。プログラムのコードを表示するなど、 改行や空白をそのまま表示したい場合、<pre>...</pre> タグを使います (sample6.html)。 特にプログラムのコードであることを示す場合は <code>...</code> を用います。
<pre><code>
X = 0.35
LAMB = 4
FOR I = 1 TO 20
X = LAMB * X * (1 - X)
PRINT X
NEXT
</code></pre>
特殊な文字<...> はタグを表すのに使うため、文章中で "<...>" そのものを表すことができません。これらを表すには &...; の形の特殊な文字を用います。"<" は < (less than、小なり) で、 ">" は > (greater than、大なり) で 表します (sample7.html)。
<pre>
<!-- HTML の基本構造 -->
<html>
<head>
<title>タイトル</title>
<head>
<body>
... 本文 ...
</body>
</head>
</pre>
&...; で特殊な文字を表すということは "&...;" そのものを表すことができないことになります。"&" は & で 表します。"&" と表示したい場合は &amp; と書きます。上の HTML をそのまま表示する場合はつぎのように なります。
<pre>
<pre>
&lt;!-- HTML の基本構造 --&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;タイトル&lt;/title&gt;
&lt;head&gt;
&lt;body&gt;
... 本文 ...
&lt;/body&gt;
&lt;/head&gt;
</pre>
</pre>
その他いろいろ<strong>...</strong> で文字を強調表示できます (sample8.html)。
損失を無視するとエネルギーが一定に保たれるという関係は<strong>ベルヌーイの定理</strong>と
呼ばれ、流体のエネルギー保存則を表しています。
(日本機械学会 編 石綿良三 根本光正 著,「流れのふしぎ」, 講談社, 2004)
<br> タグで強制的に改行できます (sample9.html)。
アリス！ このたわいない話をうけとり<br>
その手でそっとしまっておいておくれ<br>
思い出の神秘な絆のなかに<br>
子供の日の夢が綯いまぜになったあたりに<br>
巡礼たちが遠い国で摘んできた<br>
とうに萎れてしまった花冠のように<br>
(ルイス・キャロル, 矢川澄子 訳,「不思議の国のアリス」, 新潮文庫, 1994)
<hr> タグで横線を引けます。 文字コードの指定文書の文字コードを指定するには、<head>...</head> でつぎのように書きます。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
"charset=..." の部分で "Shift_JIS" や "EUC-JP" などと文字コードを指定します。 スタイルシートスタイルシートとは、HTML 文書の外見を指定するものです。スタイルシートを共有することで、複数の文書 の見た目を統一することができます。 スタイルシートの種類とスタイルシートを記述したファイルを指定するには、<head>...</head> でつぎのように書きます。
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
上では、スタイルシートの種類に CSS を指定し、スタイルシートを記述したファイルを "default.css" と指定しています。 CSS についてはこの文書の範囲を超えるため、ここでは述べません。 DTD の指定DTD (Document Type Definition) とは、使用可能なタグや属性の種類や配置方法を厳密に定義したものです。 理想的な HTML 4.01 文書を作る場合は、文書の先頭でつぎのように書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
参考文献
| |
| PENGUINITIS Yuu Kasuga | |