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

HTMLの基本構造について

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

HTMLとはHyper Text Markup Languageの頭文字をとったもので、Webページを作成するときに使用する言語です。

基本的にWebページの作成は、タグと呼ばれている一対の記述語を組み合わせて行います。

HTMLの基本構造は、次のようになっています。

<<参考>>　ＨＴＭＬの基本構造について

<!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(UTF-8BOMなしで保存)

本校のExpression Web 4はHTML5のソースコードを書き出す（記述してくれる）設定になっていますが、Expression Web 4は上記のコードを書き出します。

しかしながら、HTML5では

　　<meta charset="utf-8">

という記述でよいとされているので、手入力の場合にはこちらの方が簡単でしょう。

＊＊　動作確認のための課題　＊＊－この課題を提出する必要はありません－

１．

上の『参考部分（HTMLの基本構造について）』に記述された内容をテキストエディタ（特に決めているものがなければWindows標準の『メモ帳』）を使って記述してみて下さい。

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

記述し終わったらエディタのメニューバーから『ファイル(F)』・『名前を付けて保存(S)します。
ファイル名は指示に従って下さい。

２．

動作確認が済んだら、自分でその内容を変更してみて下さい。

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

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

一度エディタを閉じた後にブラウザを用いてHTMLを表示した場合で、HTMLのソースを表示するにはブラウザのメニューバーから『表示（V）』・『ソース（c）』と選択すればできます。

タグを用いてＷｅｂページを作成する方法について理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。

課題16のページへ課題36のページへ課題40のページへ Expression Web 4 解説トップへ

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

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