ＨＴＭＬの基本構造を理解するためのページ（タグ利用編）

 　
　 　 　
　 　 　
　 ＨＴＭＬの基本構造について

このページは【タグを用いた『Ｗｅｂページ作成方法』】を理解してもらうことを目的として作成しました。
ここではＨＴＭＬの基本構造についてお話しします。

ＨＴＭＬとはHyper Text Markup Languageの頭文字をとったもので、Ｗｅｂページを作成するときに使用する言語です。

基本的にＷｅｂページの作成は、タグと呼ばれている一対の記述語を組み合わせて行います。		 　
　 　 　
　 　 <<解説>> 　
　 　 ＨＴＭＬの基本構造は、次のようになっています。
　
　 ＨＴＭＬの基本構造について
　 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>
<body>ここにはページの内容を書きます</body>
</html>



<<参考>>
１． HTMLは<html>で始まり、</html>で終わります。
２． <html></html>の中には、必ず<head></head>と<body></body>というタグの組み合わせを記述しなければなりません。
３． <head></head>の中には、最低限<title></title>というタグの組み合わせを記述しなければなりません。

ここにはページタイトル（ブラウザのタイトルバーに表示される内容）として、表示したい内容を記述します。
４． <body></body>の中には、このＷｅｂページに表示したい内容を記述します。
５． 赤字はHTML5。 但し、Expression Web4(使用HTMLはHTML5draftに設定)が書き出したもの　<meta charset="utf-8">でＯＫ。
(UTF-8BOMなしで保存)
　 　

＊＊　動作確認をするための課題　＊＊　　この課題を提出する必要はありません
　 　
１． 上の白い部分に記述された内容をテキストエディタ（特に決めているものがなければWindows標準の『メモ帳』）を使って記述してみて下さい。

UTF-8で保存するときは『BOMなし』で保存できるものを使用して下さい。

記述し終わったらエディタのメニューバーから『ファイル(F)』・『名前を付けて保存(S)：（ ファイル名は『sample.htm』にしておきましょう）』して下さい。作成されたＨＴＭＬファイルをダブルクリックして動作確認をして下さい。
　
　 　
２． 動作確認が済んだら、自分でその内容を変更してみて下さい。

適当に、<title></title>で囲まれた部分や<body></body>で囲まれた部分を変更し、保存後に
ブラウザの『更新』ボタンを押して、動作確認をして下さい。

これだけで、どのようにしてＷｅｂページができているかを理解することができます。

一度エディタを閉じた後にブラウザを用いてＨＴＭＬを表示した場合で、ＨＴＭＬのソースを表示するには ブラウザのメニューバーから『表示（V）』・『ソース（c）』と選択すればできます。
　 　
　 タグを用いてＷｅｂページを作成する方法について理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。
　
　 　 　 　
　 　 　 　
　 　 解説ページへ