HTML 作成演習

HTML Exercises




1 演習全体の説明

JavaScriptの自習用Web教材の一部を作成することで、HTMLを記述する演習を行います。 作成するページが、サイトの中でどういう位置にあるかを理解するため、Web教材全体の構成図とページの表示例を次のリンクに示します(別のウィンドウに表示されます)。
ページ全体構成図には、ページ間の移動をどのように提供するかが赤で記されています。3種のナビゲーションリンクを提供します。 このページをレイアウトするには、stylesheetを使います。 それ以外に、tableタグやframeタグを使う方法があります(した)が、 それは好ましい方法ではありません(資料として下には記述を残してあります)。 演習で作成するページ内容をテキストファイルとして用意しました。必要に応じて使ってください。

2 stylesheetでの配置

stylesheetで要素の配置を行うと、ブラウザの種類やブラウザウィンドウサイズにより見栄えが変わってくることがあります。

タイトル部分の作成(stylesheet)

simple header

次のように考えます。

大項目メニュー・トレイルリストの作成(stylesheet)

top menu

次のように考えます。

小項目メニューの作成(stylesheet)

left menu

項目を縦に並べた小項目メニュー全体をdivブロック要素としてまとめ、それに対して、次のようなスタイルを指定します。

説明部分の作成(stylesheet)


フッタ部分の作成(stylesheet)


3 tableタグのでの配置

タイトル部分の作成1(table)

tableタグを使ってタイトルの最初の部分を配置してみます。左上にロゴマークに相当する小さな画像を置き、それに続いてタイトルを日本語と英語で示します。タイトル部分と次に続くメニュー部分を区別するために、太い青のラインを入れています。
参考のために、テーブル枠線を表示した画面イメージを示します。

simple header

logo mark ロゴマーク代わりの画像は右の画像を、50×50ピクセルで表示しています。線のうち紺色はRGBで330066です。以下の練習では画像、色とも任意のものを使ってください。

タイトル部分の作成2(table)

次に、タイトル部分の文字を装飾します。 、日本語部分を太字にし、英字に色を指定し、小さく表示します。 次の表示例では、Learnとby yourselfをRGBで999999の色にし、JavaScriptの色を9999ccにしています。また、英字は80%の大きさとしています。これらの指定はスタイルシートで行います。

simple header


大項目メニューの作成(table)

大項目へのリンクリストを横線の下に置きます。
このリストはテーブルで作られており、テーブルの背景色を薄いグレー(eeeeee)としています。現在表示されているページがどの項目に属するかを示すため、該当する項目の背景は濃いグレー(ccccccc)にします(例では制御構造)。

title + big menu


トレイルリストの作成(table)

表示されている内容が、ページの階層構造のどこに位置するかを示すリストを追加します。階層を上から順にたどってきた場合は、その道筋を示すことになるので、トレイルリスト(あるいはパンくずリスト)と呼ばれます。
独立した1行1列のテーブルで、セルの中身を右詰めにしてあります。

title + big menu


説明部分の作成(table)

ページの主たる内容である説明部分を作ります。 1行3列のテーブルで、左の列に小項目のリンクリストを、右の列に説明を配置しています。わかりやすいようにテーブル枠線を表示した画面イメージを示します。
テーブル幅には100%を指定し、左のセルは全体の18%、中のセル(マージン用)は2%の幅を占めるようにしました。

title + big menu


フッタ部分の作成(table)

フッタ部分を付け加えます。
横罫線(<HR>)、メールアドレスへのリンク(<a href="mailto:メールアドレス">)を使っています。文字列は少し小さく(90%)表示しています。

title + big menu


全体の統合(table)

大項目、トレイルリストを含んだタイトル部分と、説明部分、フッタ部分をひとつにまとめます。


4 フレームを使ってのリメイク

フレームはブラウザの表示域を分割し、それぞれに異なるページ(HTMLファイル)を表示するものです。
フレームを使うと、ブラウザの表示は、複数のページ(HTMLファイル)を集めたものになります。内容を表示する個々のHTMLファイルと、表示域を分割し、それぞれの領域にどのHTMLファイルを表示するかを指定するだけのHTMLファイルを用意します。それらが合わさって、ひとつのページのようにブラウザ上で表示されます。

フレームの分割は<FRAMESET></FRAMESET>を使います。 <FRAMESET>で分割されたフレームに対して、表示するHTMLファイルやフレームの名前などを指定するのが、<FRAME>です。
<FRAMESET>内の<NOFRAMES>...</NOFRAMES>は、フレームに対応していないブラウザのためのページ記述です。

次に例を示します。 上下に2分割(上部160ピクセル、下部残り)、下部を縦に2分割(左部20%、右部残り)しています。ソースを確認してください。わかりやすいように、frameborder="yes"を指定して、フレームの枠線を表示しています。
このフレーム枠を利用して、上の例のフレーム版を作成してください。
フレームを使うと、次のような欠点も生まれます。なお、フレームはW3Cの標準(HTML4.0 STRICT)には含まれていません。
arigat アットマークacm.org
Last modified: Sep, 2016