PHPプログラミング超入門

HTML復習編

ひな形HTML

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

　HTML文書の内容は、作成するウェブページによって変わりますが、以下の画像のような「基本タグ」の部分は同じです。ここで「基本タグ」というのは、どんなウェブページでも書かなくてはならない共通のタグのこと。これをひな形ファイルとして保存しておき、コピーして使えるようにしておくと、いちいち基本タグを入力しなくて済むので便利です。イメージわかない人は年賀状を思い出して下さい。「謹賀新年　本年もよろしくお願いします。元旦」と「差出人住所氏名」の定型文は誰宛てでも同じなのであらかじめ印刷(コピー)しておいて、宛先ごとのメッセージだけ手書きで書き加えますよね。いちいち全部書くのは面倒だからです。ひな形ファイルの基本タグは、この年賀状の定型文と同じことです。
　下にテキストを張り付けておくのでTerapadにコピペして「hina.html」として「phpkisoフォルダ」に保存しておきましょう。phpkisoフォルダは、準備編ですでに導入済みのXamppフォルダ内のhtdocsフォルダの中に作成しました(詳しくは準備編を参照)。なお、ひな形ファイルの名前は何でもいいのですが、この資料では一貫して「hina.html」としています。なお、以下のサンプルの通り、titleタグやbodyタグのコンテンツ以外のプログラム部分はすべて半角英数記号で書いて下さい。プログラミングでは、表示するテキストデータやコンテンツ以外は、基本的に半角英数記号を使って書くようにしましょう。

　　ひな形ファイル

　　

　なお上の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ファイル)を表示してみましょう。

>>次のページへ進む

HTML復習編

ひな形HTML

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

関連リンク

SPONSORED LINK