ここからは、数あるHTMLの要素(タグ)を一つ一つ書いていきます。 まずは、HTML文書を書く上で最低限必要な要素からはじめます。
HTMLを書くためのエディタを起動してください。へてむるクリエイターが あるならそれを使うと楽です。
HTMLにはいくつかのバージョンがあり、HTML文書の一行目で、一体どのバージョンを使うのか 書く必要があります。ですが実際によく使われているのは次の3通りです。
特別な意味がない限り、真ん中の「Transitional」を書けば問題ないでしょう。
要素を書いていくとは書きましたが、これらは要素ではありません。どんなHTML文書にも必要な、 いわゆるおまじないのようなものです。省略しているサイトは非常に多いですが、これを省くと、 HTMLの文法上ではHTMLと認められなくなります。
先ほどのDOCTYPE宣言を除いたHTML全体を囲う要素です。
開始タグは<html>、終了タグは</html>です。
また、そのHTML文書の中で使われている言語を表すためのlangという属性があります。 日本語なら開始タグは、<html lang="ja">と書いておきましょう。
HTMLの本文を書く前に、HEAD要素を書く必要があります。HEAD要素だけでは特に意味を持ちませんが、 その中にHTML文書のタイトルや、キーワードなどの情報を書くことができます。
開始タグは<head>、終了タグは</head>です。
ちなみにhead要素の中は、実際には表示されませんのでご安心を。
私たちの目に直接ではなく、サーバやブラウザ、GoogleやYahoo!などの検索エンジンのロボット に、HTML文書の情報を送るための要素です。HEAD要素のタグの中に書きます。
この要素と属性は非常にややこしいので、次の5つだけ覚えておいてください。
ちなみに、meta要素には終了タグは存在しません。
HTML文書のタイトルを書くための要素です。これもhead要素のタグの中に書きます。
開始タグは<title>、終了タグは</title>です。
HEAD要素の中なのでHTMLの本文には表示されませんが、このタグの間に書いた言葉が、ブラウザの上部や、お気に入りに入れたときのタイトルなどに表示されます。
TITLE要素はどんなHTML文書にも絶対必要です。お忘れなく。
HTMLの本文部分を入れるための要素です。これはHEAD要素の中に入れてはいけません。headの終了タグの後に書きます。
開始タグ<body>、終了タグ</body>に挟まれた部分が、HTML文書の本文となります。つまり、私たちの目に見える部分はすべてこの中に書かなければいけないということです。
BODY要素には、背景色を変えるためのbgcolor属性、 背景画像のためのbackground属性、本文の色を変えるtext属性、 リンクしている部分の色を変えるlink属性などがあります。 例えば背景色を黒くして、本文の文字を白くしたいなら、下のように開始タグを書きます。
<body bgcolor="black" text="white">
link属性も同じようにして色を変えることができます。
もちろん、黒以外にもさまざまな色を設定することができます。 色について詳しくは、「文字のサイズや色を変える」の、「文字の色を変えてみよう」で説明します。が、実はこれらの属性は、実際には使うべきではありません。 BODY要素のタグに限らず、htmlで色を設定するのはおすすめできる方法ではないのです。 後から説明するスタイルシート(CSS)というものを使うようにしましょう。
ここではあくまでも、「こういうやり方があるんだ」ということだけ覚えて下さればそれで構いません。
それでは実際に、エディタを開いてこのページで説明した要素を次のように書いてみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta name="description" content=""> <meta name="keywords" content="html,てーこく"> </head> <body> </body> </html>
へてむるクリエイターでは、わざわざ手打ちでなくても、簡単にタグを入力するための機能があります。
骨組みに関する要素のタグを入力するには、右クリックメニューの「タグの挿入」 にある「ページ設定」から「HTMLの骨組み」をクリックするか、 画面上部のタグパレットの「ページ」をクリックして、その上にあるアイコンのうち、一番左のものをクリックすれば、 ウィンドウが立ち上がるので、「ページの配色」、ソースにGENERATORを含めるのチェック を全てはずして、ページの情報をクリックして、「ページの説明」、「キーワード」に チェックを入れてそれぞれの欄に必要な言葉を入力してOKを押してください。 これで上の文を一つ一つ打つのと同じように、html、head、meta、body要素が一気に 挿入されます。
ちなみに「ページの配色」の欄は、BODY要素のbgcolor属性や、text属性などを指しています。
それぞれの要素のタグを個別に入力したい場合(例えばTITLE要素だけなど)は、同じように右クリックで表示されるメニューか、タグパレットから、 挿入したい要素を選択してクリックしてください。
これから色んな要素、タグを説明していきますが、全て同じような操作(右クリックメニューかタグパレット)で 簡単にタグを入力することができます。
書き終えたら、「index.html」という名前で、「作業用フォルダの準備」で作成した「web」フォルダに保存してください。
保存が完了したら、「エディタの基本的な使い方 」で 説明した方法で、ちゃんと表示されるか確認してみましょう。
どうです?ブラウザになにか表示されましたか?もし表示されたら失敗です。 どこか間違っています。BODY要素の中は空っぽですので、 何も表示されるはずがありませんよね?真っ白なのが正解です。
さて、次からはいよいよBODY要素の中に書く、本文に関わる要素を説明していきます。