HTML復習編

ひな形HTML

基本タグとひな形ファイル

　HTML文書の内容は、もちろん作成するウェブページによって変わりますが、「基本タグ」の部分は同じです。「基本タグ」というのは、どんなウェブページでも書かなくてはならない共通のタグのこと。以下の画像を見て下さい。HTML文書というのは、このような共通の「基本タグ」があって、その中に各ページのタイトルや本文や表示する画像などを入れ込んでいくという「つくり」になっています。
　それならば、ということで、この「基本タグ」を「ひな形ファイル」として保存しておき、コピーして使えるようにしておくと、いちいち「基本タグ」を入力しなくて済むので便利です。

　　

　イメージわかない人は・・例えば、年賀状を思い出して下さい。誰に出しても同じ「あけましておめでとうございます」や「自分の住所氏名」の部分は、あらかじめ印刷(コピー)しておいて、「相手の住所氏名」と「個別のメッセージ」だけ手書きで書き加えたりしますよね。いちいち全部書くのは面倒だからです。ひな形ファイルの「基本タグ」は、この年賀状の「あらかじめ印刷しておく共通部分」と同じことです。

SPONSORED LINK

　下にテキストを張り付けておくのでテキストエディタ(Terapad等)にコピペして「hina.html」として「phpkisoフォルダ」に保存しておきましょう。phpkisoフォルダは、準備編ですでに導入済みのXamppフォルダ内のhtdocsフォルダの中に作成しました(詳しくは準備編を参照)。なお、ひな形ファイルの名前は何でもいいのですが、この資料では一貫して「hina.html」としています。なお、以下のサンプルの通り、titleタグやbodyタグのコンテンツ以外のプログラム部分はすべて半角英数記号で書いて下さい。プログラミングでは、表示するテキストデータやコンテンツ以外は、基本的に半角英数記号を使って書くようにしましょう。
　　

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>ここがタイトル</title>
</head>
<body>
ここが本文



</body>
</html>

　なお上のHTML文書の基本タグの意味をざっくり確認しておきましょう。

<html>～</html>タグ・・・この範囲がHTML文書ですよ。
<head>～</head>タグ・・・HTML文書のヘッダー部分ですよ。
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">タグ・・・メタタグ。ヘッダー部分に記載。「これはHTML文書で文字コードはShift-JISです」みたいな感じ。
<title>～</title>タグ・・・HTML文書のタイトルを定義。ヘッダー部分に記載。このタイトルがブラウザのタイトルバーや検索結果などに表示される。
<body>～</body>タグ・・・HTML文書の本文はここですよ。コンテンツは通常この中に記載。

　上記のメタタグのような例外もありますが、タグは基本的に開始タグ<●>で始まり終了タグ</●>で終わります。タグ同士は、入れ子状態になり、入れ子が外れることはありません。また先にも書きましたがウェブページやタイトルに表示されるコンテンツ以外のプログラム部分は、すべて半角英数記号を使う必要があります。全角文字とか全角スペースとか使ってはいけません。

　　タグの入れ子構造

　次にXammpで仮想サーバーを起動してウェブページ(HTMLファイル)を表示してみましょう。

>>次のページへ進む

PHPプログラミング。入門、入門、超入門！

HTML復習編

ひな形HTML

基本タグとひな形ファイル

関連リンク

SPONSORED LINK