文書の構造化・スタイル付加の演習

【本節の目的】
これまで学習してきたHTMLとCSSの技術の練習として、サンプル文書をHTML化し、更にCSSによりスタイル設定を行ないます。

構造化されていないテキスト文書のHTMLによる構造化の練習

[演習：構造化されていない文書の構造化]

以下に示す手順に従い、 (HTMLタグが付いていない)構造化されていない文書 (hearn.txt) を、提示する条件を満たす構造化されたHTML文書にして下さい。

まず「week10」フォルダを作成する。
次に、＞＞ここをクリックして＜＜サンプルファイルのアーカイブ(関連した複数のファイルを一つにまとめたファイル) template2.zip をダウンロードする。
ダウンロードした「template2.zip」のアイコンをダブルクリックして現われる template2.html、hearn.txt、hearn.jpg の3つのファイルをコピーして「week10」に保存する。
「week10\template2.html」ファイルのコピーを、「week10\ユーザID.html」として作成する。例えば、ユーザIDが999q9999の人は、「week10\999q9999.html」のようにする。もちろん、ファイル名は、すべて半角文字で書くこと。
秀丸エディタで、「week10\ユーザID.html」と「week10\hearn.txt」を(別ウィンドウで)同時に開く。
構造化されていない hearn.txt の内容をコピーして、「week10\ユーザID.html」のbody要素としてペーストした(貼り付けた)後、そのHTMLファイルを下図のような構造をもつように、各種タグを挿入しなさい。

上記のHTMLファイルは、下図のようなHTML要素で構成して下さい。

＞＞こちらに＜＜これまで学習したHTML要素の表がありますので利用して下さい。

[演習：CSSによるスタイルの設定]

上の演習で作成したHTMLファイルを、 CSSを使って以下の条件のように見栄えを変えてみて下さい。

template2.html 中にあるように、CSSの記述は、「../css/mystyle2.css」に書いて下さい。

色や文字の大きさ、ブロックの幅などは、サンプルを参考に、自分の好きなように変えて下さい。

上記の文書は、下図のようなスタイルをCSSでつけて構成して下さい。