何よりも前に、マーク付けの方法を書いておきます。 方法は簡単、文書中のマーク付けしたい部分(要素と言う)を開始タグと終了タグで囲むだけです。 基本的には要素をタグで明示することを繰り返すと、HTML文書が完成します。
私も、<EM>One-Poemはナマケモノ</EM>だと思います。と言う具合です。 EMという要素名は「強調」を意味しています。 つまり、強調したいところ(One-Poemはナマケモノ)を開始タグ(<EM>)と終了タグ(</EM>)で囲んだんですね。 開始タグが < で始まるのに対し、終了タグは </ で始めます。 囲まれた部分と開始タグ・終了タグ全体で要素、と言ったりします。 この場合はEM要素ですね。
ちなみに、さっきの例はあなたのブラウザでは次のように出力されます。 EM要素は斜体で表示するブラウザが多いみたいですね。 なお、強調されている部分が赤く表示されている場合もあると思いますが、それはスタイルシートという仕組みを使って赤くしているためで、ブラウザ本来の設定はは必ずしもそうなっていない可能性があります。
私も、One-Poemはナマケモノだと思います。
なお、要素の中に別の要素が含まれていても構いません。
<P> One-Poemは<A href="http://www.mozilla.org/">Mozillaブラウザ</A>を愛用している。</P>Pは段落で、Aはアンカーでハイパーリンクを実現します。 入れ子にする場合は、双方の要素の開始タグと終了タグの位置に注意しましょう(特に、同じ範囲に二つの要素がマーク付けされている時)。 開始タグを中にした場合は、終了タグも中にします。 厳密にはどちらでもいいのですが、そうした方が自分で確認するときも見やすいでしょう。
XMLでは、タグの入れ子関係を正しくしなくてはなりません。
要素が空白となる要素名もあります。 たとえば、BR(改行)やIMG(画像)などですね。 これらには終了タグはありません。
XMLでは全ての要素に開始タグと終了タグがあります。
要素に追加の情報を指定する場合、属性を使います。 例えばIMG要素では、画像があるURIを示すためにsrc属性を使い以下のように書きます。
<IMG src="picture.jpg">このとき、srcを属性と言います。 要素を詳しく定める感じでしょうか。 他の例としては、ハイパーリンクを実現するA要素のhref属性が挙げられます。
属性を指定するとき、"(ダブルクォーテーション)または'(シングルクォーテーション)で括らなければならない場合と、括らなくてもいい場合がありますが、全部括ってしまった方が覚える必要もないので良いと思います。
ちなみに、XMLでは簡便化するため、全ての属性値を引用符(ダブルまたはシングルのクォーテーション)で括ることになっています。
また、HTMLでは(と言うかSGMLでも)、改行・タブ・空白はどれも空白と解釈されます。 連続していても一つという解釈です。 これによって、HTML文書のソースを見やすくインデントできます。
本文中(主にタグ・属性部分以外)ではそのまま書かない方がよい文字がいくつかあります。 タグでないところをタグと誤って解釈されてしまうこともあるので、単純にこれらの文字を使いたい場合は以下のように置き換えると良いでしょう。
他にも実体参照はいくつかあって、そのままでは入力できない文字が定義されています。 一覧も用意していますので気になる方はご覧になってください。 以下は一例で、最後のはスペースです。
まず、HTMLで書く文書のはじめには、DOCTYPEと言うものを付けます。 これは、HTMLのバージョンを示すものです。 例えば、以下のようなものがあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional"><!DOCTYPE HTML PUCLIC "-//W3C//DTD HTML 4.01 Frameset"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">それぞれ、HTML4.01、4.01の移行型、4.01のフレーム使用、3.2のDOCTYPEを示しています。 これらを付けなくても解釈できるWWWブラウザがほとんどですが、DOCTYPEを基に判断している場合もあるので付けた方がいいです。 また、付けた以上はそのDOCTYPEごとの文法を守りましょう。
XHTMLにはXML宣言がまずはじめに必要ですが、ここでは割愛します。
HTML文書は<HTML>と</HTML>で囲まれなくてはならないと決められています。 その為、次に来るのは<HTML>です。
次に、ヘッダ部分を書きます。
ここには、HTML文書に関する情報を書いておきます。
そうすることで、ブラウザなどのユーザーエージェントが文書を正しく理解したり出来ます。
ヘッダ部分は、<HEAD>と</HEAD>のなかに記述します。
以下に、とりあえず必要なものを挙げておきます。
<META http-equiv="Content-Type" content="text/html; charset="Shift_JIS"><TITLE>文書のタイトルを書きます。</TITLE>一行目はほとんどおまじないです。 ただし、charsetの部分は、必要に応じて書き換える必要があります。 たとえば、日本語EUCならEUC-JP、JISならISO-2022-JPと置き換えます。
二行目はタイトルですね。 わかりやすいものを付けてください。
他には、以下のようなものがあります(もちろん、これ以外もありますが)。
<META http-equiv="Content-Style-Type" content="text/css"><META name="Auther" content="作者の名前"><LINK rel="stylesheet" type="text/css" href="CSSを使用したスタイルシートの外部ファイル名">一行目は、style属性を使ってスタイルシートを指定する場合に必要な宣言です。 二行目は、作者の名前です。私だったらOne-Poemと書いています。 三行目は、外部にスタイルシートの定義ファイルを用意したときに書くものです。
やっと<BODY>です。 なかの文章はマーク付けの方法に従って適当に書いてください。 あなたの感性が一番発揮されるところですね。
ただし、フレームセットを定義するファイルの場合は以下のようになります。
<FRAMESET> <FRAME src="..."> <FRAME src="..."> <NOFRAMES> <BODY> フレームが表示できないブラウザ用の内容を書く </BODY></FRAMESET>あとは開始タグに対応した終了タグを閉じて終わりです。 つまり、</BODY>や</HTML>として、入れ子関係を閉じていきます。
以上、全体の流れをまとめると、以下のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> ... </HEAD> <BODY> ... </BODY></HTML>とりあえず、こう書くものだ、って覚えてしまうか、こういう形でひな形ファイルを作っておくと楽ですよ。 私のひな形ファイルも参照してみてください。