ＨＴＭＬをメモ張で書く
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"＞
＜html＞
＜title＞タイトル＜/title ＞
＜/head＞
＜h1＞大見出 し＜/h1＞
＜p＞ほにゃほにゃ本文＜/p＞
＜h2＞中見出し＜/h2＞
＜p＞ほにゃ本文＜img src＝”a.gif”＞だよ。
＜a href＝”link.html”＞リンク＜/a＞＜/p ＞
＜/body＞
＜/html＞
ＨＴＭＬというと「ホームページビルダーでつくるもの」と言った先入観をお持ちのかたもいらっしゃるでしょうが、実はＨＴＭＬはメモ帳のような簡単なエディタで作れます。
今日はＨＴＭＬをメモ帳でつくるための準備としてＨＴＭＬの大まかな構造を説明しておきたいと思います。
（１）最初に呪文を・・・
一番はじめにページで使うＨＴＭＬの種類を宣言する文章を書きます。ここではＨＴＭＬの４．０１トランンジッショナルというバージョンを使うことを宣言しています。
わけのわからないリンクを含んだ文章ですが、これは使用するバージョンにより書き方が決まっていますのでそのまま呪文だと思って書いてしまいます（本当はちゃんと意味があるんですが・・＜笑＞）。
（２）＜html＞～＜/html＞で囲む
＜html＞～＜/html＞の間の文章がＨＴＭＬですよ、という事になりますので最初にこれで囲みます。なお、＜html＞の部分には「このページは日本語を使うよ」と言う属性を付けておくと良いです。つまり＜html lang="ja"＞としておきましょう。
（３）頭脳部分と胴体部分を仕切っておく
ＨＴＭＬ文章には頭脳部分（各種設定情報など）と胴体部分（本文が書かれる部分）があります。それぞれ頭脳部分は＜head＞～＜/head＞で囲み、胴体部分＜body＞～＜/body＞部分を囲みます。
（４）頭脳部分＜head＞～＜/head＞の設定
通常頭脳部分には必須なものとして文字セットの設定やページのタイトルを設定する事があります。文字セットの設定は＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞といったように書いておきます。ここでは文字セットとしてUTF-8を使うことにしましたので、それが決まればUTF-8セットでの日本語使用OKですから続けてページのタイトルを＜title＞～＜/title＞で囲んで書いておきます。
この他に頭脳部分にはページで使用する文字セットの設定や、CSSやJavascriptの使用宣言などもここで行います。
CSS使用宣言
＜meta http-equiv="Content-Style-Type" content="text/css"＞
Javascript使用宣言
＜meta http-equiv="Content-Script-Type" content="text/Javascript"＞
（５）胴体部分＜body＞～＜/body＞の記述
胴体の部分に本文を書いていきます。この部分がブラウザで表示される部分です。
通常はＨＴＭＬで文章の論理構造を記述して、CSSで見栄えを調整していきます。論理構造記述のためのＨＴＭＬはそれほど多くはないので何度も使っていればわかるようになってきます。
論理構造～要するに論文を書くときの要領を思い出せば良いのです。「大見出し」～「文章」～「中見出し」～「文章」・・・と言った具合です。
ＨＴＭＬは見出しはそのレベルに応じて＜h1＞～＜/h1＞（大見出し）、＜h2＞～＜/h2＞（中見出し）・・・と数字の番号をつけて設定していきます。
ここで気を付けなければいけないことは、論文では中見出しの次に大見出しが来ることは無いように、＜h2＞～＜/h2＞で記述している文脈の中に＜h1＞～＜/h1＞が来ることは論理的にあり得ません。
（実は当サイトのhttp://kempo9.com/cms/index.phpのページではこの論理的エラーをやっています。これは既存のページに別なページを表示しているために起こった論理エラーです）
さて見出しの次に文章を書きます。通常文章は段落ごとに書かれます。段落を示す＜p＞～＜/p＞の中に文字を入れていきます。気を付けなければならないのはＨＴＭＬでは画像も文字と同じ扱いとなるということです。＜img src＝”a.gif” height="100" width="200"＞などと画像用のタグを書いておきます。
なお、画像のタグは＜/img＞といった閉じたタグはありません。閉じるタグがないものとしては他に改行を示す＜br＞といったものもあります。厳密に言うと、これら閉じるタグがないものはそれひとつで開始と閉じることを表現するわけですから、正式には＜img src＝”a.gif” height="100" width="200" /＞、＜br /＞と書く事になっています。（ＨＴＭＬのこのバージョンではそのように書かなくとも大丈夫ですが、レベルアップしたＨＴＭＬではそう書かないとエラーになります）
インターネットは「ワールドワイドウェブwww」と言うくらいですから、リンクからリンクをたどって他のページへと移動していきます。リンクを示すタグは＜a href＝”link.html”＞リンク＜/a＞です。
・・・とまぁ、こんな感じでＨＴＭＬを書いていきます。通常はメモ帳（ウィンドウズに最初から付属している）で十分に書けるものです。練習のためにいろいろと書いてみると良いでしょう。（メモ帳で書いた場合、保存の際にはファイルの種類を「すべてのファイル」にして、ファイル名を「○○.html」といった具合にして保存しておきます。
なお、この文章でＨＴＭＬのタグを表示する際に＜＞の部分は全角文字で書いています。半角にしてしまうとモロにＨＴＭＬタグと認識されてしまうためにあえて全角にしました。
ＨＴＭＬだけだと無味乾燥なページになる。見栄えを調整するためにＣＳＳを使う
さて、上で示したようなＨＴＭＬを書いて、それをブラウザで見ると、実に味もそっけもない状態となることに「愕然」とする人もいると思います。「もう少し見出しに色をつけたり、画像を寄せたり、文章もきれいに整形したりしたい」という要求がで出てくるでしょう。
それを実現するのがCSSです。CSSについては別項を立てて説明します。
なお、ＨＴＭＬを紹介したサイトの中にはＨＴＭＬタグで色をつけたりしているワザを紹介しているものもありますが、それらはいわゆる標準規格から外れるものですので、当サイトでは紹介しません。標準規格ではあくまでもＨＴＭＬで文章の論理構造を記述し、ＣＳＳで見栄えを調整しろ、と勧告されています。
【参考】ＨＴＭＬだけで書いたファイルをご覧ください。
←前のページにもどる
前のページに戻らない場合にはブラウザの「戻る」ボタンを押してください
