 |
ホームページを作る（HTMLの基本）
htmlの基本タグについて説明します。基本中の基本なので、これはきっちりｔ覚えましょう。
<開始タグ> </終了タグ>
これがHTMLの基本です。
さらに、開始タグに属性をつけることもできます（これについては後ほど…(#^.^#)）。
※開始タグ、終了タグ…とわかりやすくするために描いていますが、実際は両方とも同じ文字が入ります。
まず、ためしにテキストファイルに以下を書いて「test.htmlという名前で保存してみてください。
<html>
<head>
<title>ページのタイトルだよ</title>
</head>
<body>ページの中身だよ
</body>
</html>
保存したファイルをダブルクリックして、ブラウザで「ページの中身だよ」という文字が表示されたら成功です。
ちなみに、ブラウザの上の青い部分に「ページのタイトルだよ」と書いてあるはずです♪
このサンプルを見ればわかりますね。
<html></html>の中に<head></head>と<body></body>があります。
このページももちろん、ホームページはこうしてタグから出来上がっているのです。
入れ子…といっても意味がわからないかもしれません。
わかりやすく言うと、以下になります。
◎
<head><title>ページのタイトルだよ</title></head>
×
<head><title>ページのタイトルだよ</head></title>
<head></head>の中に<title></title>がある、これが正しいわけです(#^.^#)
×の場合は、<head></title>の中に<title></head>がある…という開始タグと終了タグが変わっているおかしい状態です。
まずは<header>部分の説明をします。ここは表示されるものではありませんが、大切なものなので覚えておきましょう。
では、先ほどのお試しサンプルの<head>の下に以下の二つをコピーしてください。
※もちろん説明文はコピーする必要はありません。太字の部分だけでＯＫですよ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
文書型宣言です。HTMLの仕様上、文章の先頭に、その文章がどの仕様にしたがっているかを示します。
…これによって表示の仕方が多少異なるので、これをいつも描くようにしてください。
※今回の文書型宣言は、制約がゆるいタイプです(#^.^#)
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
文字化けを防ぐために文字コードをいれます。
※ちなみに、headにはもっと情報を入れる事が出来ます。
詳細は、ヘッダーアーカイブ：スタイルシートメモを見てくださいね。
実際に表示されるbody部分の基本中の基本です。
<h1>見出し</h1>
ページのタイトルを入れる場所です。
h1〜h6まであり、数字が小さいほど重要です。
※ちなみにh1はページ内に一度しか使わないようにしましょう。
<p></p>
段落をあらわします。文章を段落ごとに分けたいときは、これで囲みます。
<br>
改行します。文章の途中で改行をしたくなったら、このタグを入れてみてください。
<a href="" target="" ></a>
開始タグに属性をつけるタグ…それがこれです。
<a>タグはリンクを意味します。このタグに囲まれた文章や絵は別ページを開くリンクになるわけです。
hrefは、そのリンク先を示す属性に成ります。
targetは、そのリンクを開く場所を意味しています。
同じページに開く場合はこれを削除してかまいません。
別ページに開きたいときは、「target="_blank"」としてください。
※ちなみに、bodyにはもっと情報を入れる事が出来ます。
詳細は、標準規格に従ってページを作成する：スタイルシートメモを見てくださいね。
基本のテンプレート（head部分）、基本のテンプレート（body部分）をモトにページを作成してみましょう。
まず、ためしにテキストファイルに以下を書いて「test.htmlという名前で保存してみてください。
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ページのタイトルだよ</title>
</head>
<body>
<h1>ページのタイトルだよ</h1>
<p>ひとつめの段落です。</p>
<p>二つめの段落です。<br>
朱沙のサイトは<a href="http://highlord.littlestar.jp/" target="_blank">みつけたきせき</a>です </p>
</body>
</html>
保存したファイルをダブルクリックして、ブラウザで「ページのタイトルだよ」と太字で書かれている下に、「ひとつめの段落です。」「二つめの段落です。」「朱沙のサイトはみつけたきせきです」という文字が表示されたら成功です。
ちなみに、みつけたきせきをクリックすると朱沙のサイトが開くはずです(#^.^#)
お試しあれ。 |
