ようこそ
世界で一番簡単なＨＴＭＬの書へ
【ＨＴＭＬの基本的な決まり】
(1)半角の日本語文字は使えません（。・の半角も使えません）
(2)タグ（「<」と「>」にかこまれた部分）が文章の配置、色付けなどの制御を行います。
(3) <br>（改行）と <p>（段落変え）を使わない限り文章は、ブラウザの表示幅に合わせて自動改行されます
（通常の改行コードは無視されます。）
(4)タグに空白を置く場合には、半角スペースを置く。（全角スペースを置くとスペースとは認識しません）
(5)ファイル名及びディレクトリー名には、半角英数字及び半角アンダーライン(_)以外使わないでください。
(6)HTML文書の拡張子はhtmlにして下さい（windows3.1以下の場合、htmにして下さい）。
(7)(1)〜(4)に留意していただければ、全角の日本文字はそのまま打っていただいてかまいません。
【ＨＴＭＬ文書の基本的な構造】
(1)HTML文書は、<html>に始まり</html>で終わるテキスト形式の文書です。
(2)HTML文書は、<head>に始まり、</head>に終わるヘッド部分と、<body>に始まり、</body>に終わる本体部分の２つからなります。
(3)ヘッド部分には、<title>に始まり、</title>に終わるタイトル、スタイルシート、javascriptなどが置かれますが、「世界で一番簡単なＨＴＭＬの書」では、タイトルのみについて説明します。
(3-1)タイトルには、Netscape Navigator等のブラウザのタイトル表示部分に表示させる文章を記述します。他のHTMLタグを使って色をつけたりとかは出来ません。
(4)本体部分は、ブラウザの画面に表示させる内容を記述させる部分です。
〈HTMLの基本構造〉
<html><head><title>ここにタイトルが入る</title></head>
<body>
（ここに本文が入る）
</body></html>
【改行、改段落しよう】
HTMLでは、改行はブラウザ側が制御し、ブラウザの表示幅にあわせて自動改行されます。 しかし、文末で改行させた時には<br>を使います。 また、HTMLの作成時、
僕は、
htmlなんか嫌いだ。
と打っても
僕は、 htmlなんか嫌いだ。
と表示されます（テキスト形式の改行は無視されます。）
そこで、使われるのが、前述の<br>（改行）と <p>（段落変え）です。
です。<br>ます。<p>たい。<br>は
です。
ます。
たい。
と表示されます。
<br>のところでは単純にそこで改行が、<p>のところではダブルスペースの改行（改段落）がされているのが分かります。 通常<p>は、新しい段落の最初に、
<p>僕はHTMLが嫌いだ
のように使います
【リンクを作ってみよう】
改行の次は、リンク。早いですね。
リンクの標準的な文法は、
<a href="リンク先ファイル名">（リンクさせる文章等）</a>です。
リンク先ファイル名には、絶対パス（例のhttp://から始まるアドレスです）又は文書からリンク先文書までの経路を含めて記述する。
相対パス名はファイルが下のような構造になっている場合、 parentディレクトリにあるfather.htmからchildディレクトリにあるmy.htmを指定する場合child/my.htmとなります。 逆にmy.htmからfather.htmを指定する場合には、../father.htmとなります。
じゃ、my.htmlからcusin01.htmを指定する場合にはどうなるでしょう。
答えは、../../relative/cusin/cousin01.htmとなります。
grandparentディレクトリ┬──parentディレクトリ──childディレクトリ
│ ├──father.htm ├──my.htm
│ └──mother.htm └──sister.htm
└──relativeディレクトリ──cusinディレクトリ
├──uncle.htm ├──cusin01.htm
└──aunte.htm └──cusin02.htm
リンクさせる文章等には、画像を使うことも出来ます。これは、次の章でやりましょう。
【画像を張り付けてみよう】
現在、ホームページに一般的に張り付けられている画像は、CompuserveGIF（拡張子がgifの画像）かJPEG（拡張子がjpg又はjpegの画像）です。それぞれの画像の詳しい説明は省きますが、GIFは、ボタン等色数が少なく、小さい画像に強く、JPEGは色数が多く、大きな画像（写真など）に向いています。
画像の張り付けに使うタグは、<IMG SRC="（イメージファイル名）">です。このイメージファイル名も絶対パス又は相対パスを使って指定しなければなりません。 例えば、このhtml.htmがあるディレクトリの下のimageディレクトリにあるblue_but.gifを呼び出してみましょう。
HTMLは、<IMG SRC="image/blue_but.gif">となります。これで
 とblue_but.gifが表示されます。
では、button_5.gifを押すと、button_5.gifがあるのと同じディレクトリーにあるhtml.gifが表示されるというのをやってみましょう。先のリンクを作ってみようの（リンクをさせる文書等）のところに<IMG SRC="（リンクボタンとなるファイル名）">を入れるだけです
HTMLは<a href="image/html.gif"><IMG SRC="image/blue_but.gif"></a>とするとで枠にかこまれた青いボタンが表示されます。このボタンを押すと、世界で一番簡単なHTML文書のバナー表示されます。ここに戻る時には、ブラウザの戻るボタンで戻ってきて下さい。
【文字の大きさを変えてみよう】
文字の大きさを変えるには２種類のタグが使えます。
〈見出しの大きさ〉
行毎の大きさを規定するには<H*>タグを使います。*には１〜６の数字が入ります。文章の終わりは</H*>で閉めなくてはなりません。
<H1>H1の見出し</H1>
<H2>H2の見出し</H2>
<H3>H3の見出し</H3>
<H4>H4の見出し</H4>
<H5>H5の見出し</H5>
<H6>H6の見出し</H6>
のように表示されます。
〈文字ごとの大きさ〉
文字毎の大きさを規定したい場合は、<font size=*>を使います*には、１〜７までの数字か入ります。大きく（小さく）する文字の後を</font>で閉じなければなりません。（<H*>タグを使っている文章には使えません。）
<font size=1>font size1の文字</font> <font size=2>font size2の文字</font> <font size=3>font size3の文字</font> <font size=4>font size4の文字</font> <font size=5>font size5の文字</font> <font size=6>font size6の文字</font> <font size=7>font size7の文字</font>という具合になります
【色を変えてみよう】
〈全般的な色の指定〉
先に本体部分は、<body>に始まり、</body>に終わると書きました。実は、最初の<body>のところで、背景の色、テキストの色、リンクの色、訪問済みリンクの色が規定できます。
HTMLは、<body bgcolor=背景の色 text=テキストの色 link=リンクされてる箇所の色 alink=リンクされた箇所をクリックした時の色 vlink=訪問済みリンクの色>となります
色には、プロは１６進法の数字を使いますが、直接色の名前（colorname）をいれることも出来ます。（どのようなcolornameが使えるかはすぐ後で説明します）
〈部分的な文字色の指定〉
部分的な文字色の指定には、、<font color=（文字色）>を使います。文字色には、１６進法の数字又はcolornameを使います。色を変えた文字の後を</font>で閉じなければなりません。
〈カラーネーム〉
colornameとして代表的なものは、
orange（オレンジ色） purple（紫） red（赤） chocolate（チョコレート色） gold（金色） yellow（黄色） yellowgreen（黄緑色） green（緑色） blue（青） aqua（水色） navy（ネイビー色） black（黒色）
（whiteも使えますが、ここでは見えなくなるので止めます）があります。
【その他のＴＩＰs】
〈水平線〉
水平線を置きたい場所に<hr>を置きます。
〈文字や絵をセンタリング〉
センタリングしたい文字や絵を<center>と</center>で挟みます。例えば、先ほどのボタンをセンタリングするには、
<center>
<IMG SRC="image/blue_but.gif"><br>
</center>
となります。これで
〈させるには〉
結構、好き嫌いが多いのがこの点滅です。注意を引くにはいいのですが、あまり多くの文字を点滅させると読みづらくなります。出来れば２〜３文字に押さえたほうがいいと思います
htmlは、<blink>と</blink>で点滅させたい文字を挟みます。
<font color=red size=4>皆様<blink>ここに</blink>注意</font>は
皆様注意と表示されます。
〈文書内でのリンク〉
本文書には、目次が置いてあります。この目次は文書内でのリンクを利用して、目次をクリックすると、当該箇所に飛べるようになっています。 これを実現するためには、飛ばせる先に<a name"*名前*"></a>のアンカー置き、先ほどのリンクで説明した<a href="リンク先ファイル名等">（リンクさせる文章等）</a>の （リンク先ファイル名）のところに#*名前*を入れます。本文書の最初に<a name"top"></a>というアンカーを置きましたので、ここに飛ぶリンクを作ってみましょう。 <a href="#top">topへ</a>で、topへとなります。では、飛んでみて下さい。
【最後に】
〈ここまでの復習〉
・HTML文書の基本的な構造<html>、<head>、<title>、<body>について学びました。 ・<body>は、<body bgcolor=背景の色 text=テキストの色 link=リンクされてる箇所の色alink=リンクされた箇所をクリックした時の色 vlink=訪問済みリンクの色>とすることによって、文書全体の色を指定することが出来ることを学びました。
・改行には改行したい文字の後ろに><br>を置くことを学びました。
・改段落には改段落される文字の最初に><p>を置くことを学びました。
・リンクには<a href="リンク先ファイル名">（リンクさせる文章等）</a>という文法を学びました。
・画像張り付けには<IMG SRC="（イメージファイル名）">という文法を学びました。
・リンクと画像張り付けの際使用する相対パスについて学びました。
・文字の行ごとの大きさを変える<h*>について学びました。
・個別の文字を修飾する<font color=colorname size=*>について学びました
・水平線を描く<hr>について学びました
・文字や画像をセンタリングするための<center>について学びました。
・文字を点滅させるための<blink>について学びました。
・文書内でリンクさせるためには<a name="アンカー名"></a>のアンカーを置き、 <a href="#アンカー名">リンクさせる文章等</a>でリンクさせる。 ここで学んだHTMLタグのうち、終了タグ（/のついたタグ）を必要としないのは、<br>と<p>と<hr>だけです。
〈更なる学習のために〉
ここで学んだタグだけでも、十分なHTML文書が作れると思います。
HTMLでは、更に多くの事ができます。表の作成、フレーム、画像への文字のまわり込みなどが出来ます。
copyright 1997 suzuki@apple.club.or.jp
|
