<<MENU>>

ファイルに保存

ファイルを開く

文字・大きさ・色

背景色の変更
背景に画像設定

画像の貼り付け

音の貼り付け

表の貼り付け

水平線・色・太さ

記号や番号など

スクロール文字

別ページにリンク

同ページ内リンク

動画の貼り付け

アップロード

HTMLタグ関係

FAQのページへ

Ex web 4メニューへ

講座トップへ

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


HTMLの基本構造について

このページは【タグを用いた『Wewbページ作成方法』】を理解してもらうことを目的として作成しました。
ここでは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(UTF-8BOMなしで保存)

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

しかしながら、HTML5では

  <meta charset="utf-8">

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

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

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

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

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

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

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

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

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

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



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