ウェブページ作成はうす -基本の書き方-

htmlって？

htmlは、HyperText Markup Languageの略です。ハイパーテキストをマークアップする言語ってことです。ハイパーテキストっていうのは、テキストを超えたテキストです。具体的には、リンク機能があります。別のテキストへとハイパーリンクできます、移動できます。マークアップは、目印をつけますってことです。ここは見出しだよ、ここはリンクするところだよっていうふうにです。つまり、おおざっぱにまとめると、WWWでよく使われるハイパーテキストの目印のつけ方です。

htmlも年月とともに、混乱進化してきました。今、新しくておすすめなのは、html4.01です。これを、このサイトでは学んでいきます。

基本用語

markupは、目印付けです。たとえば、タイトルを付けるときは、<title>かきかたきょうしつ</title>のようにします。見出しは、たとえば、<h4>みだしだよ</h4>というふうにします。この、titleやh4などのはたらきを、要素といいます。また、< >で囲んだものを、タグといいます。タグは、開始タグと終了タグとのセットで使われます。title要素は、<title>という開始タグがあって、そのあとに、titleの中身があって、</title>という終了タグで閉じて使われます。終了タグは、/がついてます。

最低限のhtmlの形

ここでは、ざっと、htmlがどんなものか見ていきましょう。詳しい話は、あとでね。最低限の要素だけで作ったhtmlの形は、こんな感じになります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>かきかたきょうしつ</title>
</head>
<body>
</body>
</html>

1行目の、<!DOCTYPE～は、どんなhtmlを使うかを宣言してます。例では、html4.01 Strictというhtmlです。

2行目と最後の行で、全体をhtmlで囲んでいます。htmlは、html要素内に書くようにします。lang="ja"で、日本語ということを示しています。

head要素に、この文書の情報を書きます。例では、meta要素とtitle要素が入ってます。

<title>かきかたきょうしつ</title>で、タイトルが入ります。タイトルは必ず入れなくてはいけません。

<body> </body> で、body要素の中に本文を書きます。例ではなにも入ってませんが。

本文

本文がないと、寂しいですね。というか、ふつうは入れるものです。タイトルだけしかないサイトなんて、無価値に近いでしょう。さっきのbodyの中に、こんなのを入れるとしましょう。


<h4>なかみについて</h4>
<p>
中身のないサイトは、もう訪ねないだけですが、中身が間違ってるサイトは、害になりますので、やっかいです。
</p>

要素が、2つ入ってますね。h4(h1～h6までありますが)で、見出しを表します。p要素で、段落を表します。

リンクしてみましょう

htmlの、HyperTextのハイパーなとこに、リンクがあります。別の文書へ移動できます。


<h4>検索サイトについて</h4>
<p>
検索サイトで有名なのは、<a href="http://www.yahoo.co.jp/">yahoo</a>でしょうね。
</p>

実行結果です。↓

検索サイトについて

検索サイトで有名なのは、yahooでしょうね。

a要素がでてきました。リンクします。a href="ジャンプしたい相手先のURI(住所)" で、指定します。

本文の中身として、よく使うであろうものは、見出し(h1～h6)、段落(p)、リンク(a)だと思いますので、この3つを覚えれば、それなりのhtmlが書けると思います。

ブロックレベルとインライン

body内に入る要素は、ブロックレベル要素とインライン要素の2つに分けられます。ブロックレベルは、おおきなかたまりです。見出しとか、段落とか、リスト、divなどです。インラインは、行内とも訳されます。ブロックレベルの中で使います。行内の一部の文字を、強調(em,strong)したり、リンク(a)させたりします。画像(img)もインラインです。

bodyに、直接インライン要素は、書けません。bodyに直接書けるのは、ブロックレベル要素です。インラインは、その中に書きます。

こんなのは、ダメです。

<body>
こんにちは
</body>

こんなのもダメです。

<body>
<a href="http://jp.excite.com/">excite</a>
</body>

それぞれ、p要素で囲めばOKですね。


<p>こんにちは</a>
<p><a href="http://jp.excite.com/">excite</a></a>

htmlのかきかたのまとめ

htmlのmは、Markupです。適切にマークアップすれば、要素を適切に使えばいいのです。

まず、1行目で使うhtmlをDOCTYPEで宣言します。
2行目に、<html>、最終行に</html>を書いて、htmlであることを示します。
headの中に、<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">を書くと、Shift_JISを使うことがはっきりします。
headの中にtitleを入れます。titleは、必須です。
bodyの中に本文を書きます。ブロックレベルの中にインラインを書くようにします。

以上で、正しいhtmlが書けます。