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

 
     
     
  HTMLの基本構造について

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

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

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



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

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

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

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

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

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

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

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