HTML ガイドまずやってみる
ＨＴＭＬ（Hyper Text Markup Language）は、ＷＷＷページを記述するために作られた言語です。言語といえば難しいと思いがちですが、文書をどのように表示させるかを指示する命令（記号）と考えればよいでしょう。文字の大きさやスタイル、箇条書き、画像の貼り付け、表やリンクなどＷｅｂページで見かける構造を記述できます。
説明は少しずつ付け加えることにして、Windows についている メモ帳 を使ってとにかく始めてみましょう。
Webページ(*1)の制作に取りかかる前にページの内容をあらかじめ用意しておかねばなりません。
ここでは、作成する内容が準備されているものとして、用意された文書をブラウザで見えるようにする方法（すなわち HTML文書の作成）について説明します。
(*1)Webページ
一般的にはホームページということが多いのですが、元来、ホームページは最初のページのことです。この「HTMLガイド」では意味を取り違えないようにWebページを使います。
とにかく、文書を書きながら説明を進めます。
- 『メモ帳』の起動
- 《手順》
『スタート』→「プログラム」 → 『アクセサリ』と辿り、『メモ帳』をクリックするとメモ帳が開きます。
- メモ帳に、下の枠内の文字を書き込んで下さい
<html>
Webページの練習
</html>
- これに saisyo.html という名前を付けてデスクトップに保存します（*1）
- 《手順》
メモ帳のメニューバーで、ファイル → 名前を付けて保存 → 保存する場所を「デスクトップ」に指定 → ファイル名を「 saisyo.html 」として → 「保存」をクリック →
《結果》
デスクトップに saisyo(.html) というアイコンが現れる
(*1)ファイル名と保存場所
ファイル名と保存場所は任意でよろしいが、このページの説明では、保存場所はデスクトップ、ファイル名は「 saisyo.html 」として説明を進めます。
- これが一番簡単なHTML文書です。作業を続けますから、メモ帳は開いたままにしておきます。
- 今書いたHTML文書をブラウザで見ます。
- 《手順》
デスクトップにある、先ほど保存した「saisyo」（または「saisyo.html」）をダブルクリック →
《結果》
→ Webブラウザが開いて、先ほど書いた ホームページの練習 という文字が表示されているはず。
- 【 HTML文書の説明 0-1 】
- テキスト文を <html> と </html> で挟んで、ファイル名に .html（*1）を付けて保存すれば、保存されたファイルは HTML文書になります。
文中の <html> や </html> のように < と > で囲まれたものを「 タグ tag （*2）」といいます。
<html> を開始タグ、 </html> を終了タグと呼び、開始タグと終了タグで挟まれた部分に対して構造や表示形式をを指定します。
-
（*1） .htm でも .html いづれでもよろしい。いずれかに統一しておいた方が混乱を防げます。
（*2）タグ [1] ふだ。荷札。[2] 商品の値段・材質・製造会社名などをしるした札。 [3] 情報処理で、データやプログラムの一部分に付ける目印。（岩波国語事典）
先ほどの文書（というのは大げさすぎますが）に、もう1行「やってみると簡単ですね」と付け加えます。
<html>
Webページの練習
やってみると簡単ですね
</html>
- これを上書き保存します
- 《手順》
メニューバー → ファイル → 上書き保存
- ブラウザの「更新ボタン」をクリックして、どのように見えるか試します
- 《結果》 → 『ホームページの練習やってみると簡単ですね』と繋がっています。
- 【 HTML文書の説明 0-2 】
- メモ帳の上では2行になっていますが、ブラウザに対してはどこで改行すればよいかという指示がされていません。従って、ブラウザは繋がっているものとして表示しているのです。
- 行を変えて表示させるには、ここで改行するということを指示しなければなりません。改行させたい箇所に br タグ(*1)を付けておくとブラウザはその箇所で改行します。
- （*1）br は line break から br という文字を切り出しています。タグに使われる記号は、英語を省略したものがほとんどですから、何の省略かを知れば意味を知ることができます。
『Webページの練習』の後ろに <br> を付け加えて、上書き保存し、ブラウザの「更新ボタン」をクリックして下さい。
<html>
Webページの練習<br>
やってみると簡単ですね
</html>
今度は2行に分かれて表示されているはずです。
- 【 HTML文書の説明 0-3 】
- 「タグ」は < と > で囲んで使います。このタグに構造制御や修飾情報を記入しておけば、ブラウザはこのタグの指示に従って表示をします。
文字に下線を付けるには、u タグを使用します。u は underline を省略したものです。下線を始めるところに <u> を、終わりの所に </u> を付けます。
『簡単ですね』に下線を付けるには、<u>簡単ですね</u> とします
<html>
Webページの練習<br>
やってみると<u>簡単ですね</u>
</html>
上書き保存をしてブラウザを更新すれば、『簡単ですね』に下線が付いているはずです。
ブラウザーの一番上のタイトルバーを見て下さい。C:\WINDOWS\デスクトップ\saisyo.html とファイル名が表示されています。ここに「HTMLの練習」と表示させてみましょう。
やってみると<u>簡単ですね</u>の次に <title>HTMLの練習</title> と付け加えて下さい。
<html>
Webページの練習<br>
やってみると<u>簡単ですね</u>
<title>HTMLの練習</title>
</html>
上書き保存をしてブラウザを更新すれば、タイトルバーの表示はファイル名から titleタグで挟んだ文字に変わっているはずです。
- 【 HTML文書の説明 0-4 】
- 以上で最初のページが表示されましたが、これは文法的には間違っているところがたくさんあります。ブラウザーが文法的におかしいところを適当に解釈して表示してくれたのです。
- ブラウザーで表示させたい文章などは bodyタグ で挟みます。
また、画面には表示しないけれど、HTMLの情報は headタグ で挟んで書きます。先ほど作った saisyo.htm の書き方を整えると下のようになります。
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
Webページの練習<br>
やってみると<u>簡単ですね</u>
</body>
</html>
この項終わり。
次に、「Webページの作成」ではタグの意味を考えながらHTML文書を作ります
↑ページの先頭に戻る Webページの作成 一歩、二歩、もう一歩
タグの詳しい説明や使用例の掲載されているＷｅｂページを、リンク集で紹介していますから参考にしてください。
ページの先頭に戻る 直前のページに戻る
作成 ： 小田桐 一良 （舞子の浜）
