本節の目的
2ブロックで学習してきたHTML技術の練習として、サンプル文書のHTML化を行なう。
構造化されていないテキスト文書のHTMLによる構造化の練習
以下に示す手順に従い、(HTMLタグが付いていない)未構造化テキスト文書(kmt.txt) を、提示する条件を満たす構造化されたHTML文書(kumamoto.html) にして下さい。
- まず「html2」フォルダを作成する。
- ここをクリックし、作成した「html2」フォルダに「template1.zip」というファイル名で圧縮ファイルを保存し、そのファイルを解凍する。 解凍後には、「template1」フォルダができるので､その中の「template1.html」をコピーし、1階層上のフォルダ「html2」へコピーする。
- 次に、ここをクリックして構造化されていない文書と画像ファイルのアーカイブ(関連した複数のファイルを一つにまとめたファイル) template2.zip を、「html2」フォルダに保存する。保存ファイルを解凍すると「template2」というフォルダが現れる。
- 今展開した「template2」フォルダ中にある「kmt.txt」と「suizenji.png」の2つのファイルを、1階層上の「html2」へコピーする。
- 「template1.html」をHTMLエディタで開き「kumamoto.html」という名前を付けて保存する。
- 次に、構造化されていない「kmt.txt」の内容をコピーして、「kumamoto.html」のbody要素として (つまり、<body> と </body> の間に) 貼り付け、上書き保存する。
- 保存した「kumamoto.html」のアイコンをダブルクリックしてWebブラウザで表示し、最初の状態のHTMLファイルを表示した様子を確認しておく。
ブロックレベル要素がないので、全てがつながって表示される (下図参照)。
- そこで、必要なHTMLのタグを追加して、このHTMLファイルを構造化していく。 例えば、最初の「目次」を見出し要素の<h2> を追加することで、 見出しとしての役割を付加する。
ついでに、ページのタイトルも変えておく (下図では、「熊本って？」としている)
- 変更したHTMLファイルの表現を確認するために、先程表示したブラウザの画面を再読み込みして変化を確認する。すると下図のように、タイトルがFirefoxのウィンドウ上部に現れ、「目次」の文字サイズが大きくなり、独立して表示されるようになるはずである。
- このようにして順にHTMLタグを追加して、このHTMLファイル(kumamoto.html)を下図のような構造をもつように変更しなさい。 条件およびヒントを欄外に示していますので、しっかり確認すること。
まずは、
HTMLタグ一覧
をクリックすると、これまで学習したHTML要素の一覧表が表示されますので、 必要に応じて適宜利用して下さい。
上記のHTMLファイルは、下図のようなHTML要素で構成して下さい。
(下図をクリックすると別ウィンドウ、もしくは、別タブに拡大表示されます。)
図でわかりにくいところは、次に条件を明記しますので、 その条件を満たすように構成して下さい。
- (1)title要素の内容を、適当に(例えば「熊本」)などに書き変えて、表題を付けて下さい。
- (2)各見出し(「目次」、「熊本の観光地」、「熊本の名産品」)には、アンカーを付けて下さい。
- (3)「目次」の2項目 (1. 熊本の観光地 および 2. 熊本の名産品)は、それぞれ、(2) で付けたアンカーへのリンクとして下さい。(ただし、「目次」へのリンクは不要です。)
(2)と(3)の設定により、「目次」中の「1. 熊本の観光地」や「2. 熊本の名産品」をクリックすることで、ぞれぞれ下方の「熊本の観光地」や「熊本の名産品」の見出しへジャンプするようになるはずです。 - (4)各見出しは、<h2> 要素にして下さい。
- (5)省略語のところは、「水前寺成趣園」の字の上にマウスポインタを置くと、 図のように「すいぜんじじょうじゅえん」という読みが、(ポップアップして)表示されるようにして下さい。
- (6)参考ページのところは、以下に示す絶対URIに、それぞれリンクを張って下さい。
- なごみ紀行 ふるさと寺子屋 No.114
http://kumanago.jp/benri/terakoya/?mode=114&pre_page=6 - 辛子蓮根 - Wikipedia
http://ja.wikipedia.org/wiki/%E8%BE%9B%E5%AD%90%E8%93%AE%E6%A0%B9
- なごみ紀行 ふるさと寺子屋 No.114
まだ、HTML要素の一覧表を表示していない人は、こちらを右クリックし、「リンクを新しいウィンドウで開く」を選択して、これまで学習したHTML要素の一覧表を別ウィンドウで表示してください。それぞれの「機能」部分をクリックすると、要素の解説(テキスト)を読む(復習する)ことができますので利用して下さい。その際は、HTML要素の一覧表と同じウィンドウの別タブで表示されます。