練習問題：Webページの基礎

この単元は、モジュール 1「Web ページの基礎」で学んだ内容を振り返る練習問題です。目標は、白紙の状態から HTML ファイルを 1つ、自力で作成できるようになることです。ここまでに学んだ 6つの学習事項を、実際に手を動かしながら確認していきましょう。

モジュール 1 では、6つのことを学びました。まず、HTML がページの構造を、CSS が見た目を担当するという役割分担です。次に、実際にファイルを保存し、ブラウザで開いて表示を確認する一連の流れです。そして、開始タグ・終了タグ・属性という HTML の基本的な書き方、DOCTYPE 宣言と html・head・body から成る文書の骨組み、meta 要素の charset 属性と title 要素の役割、最後に、要素どうしが親子や兄弟の関係を持つ入れ子構造です。これらをすべて使って、次のスライドからの演習に取り組みます。

この演習では、まったく白紙の状態から新しい HTML ファイルを作成します。完成条件は3つです。1つ目は、ブラウザのタブに「自己紹介 | 佐藤玲奈」という文字列が表示されること。2つ目は、ページの本文に挨拶の一文が表示されること。3つ目は、モジュール 1 で学んだ 6つの学習事項を、すべて実際に使って書くことです。

このイラストは、HTML のコードとブラウザでの表示結果の対応関係を示しています。head 要素の中の title 要素に書いた文字列は、ブラウザのタブに表示されます。一方、body 要素の中に書いた文章は、ページの本文として表示されます。同じ1つのファイルの中でも、書く場所によって表示される場所が変わることを確認しましょう。

まず、ファイルを準備します。手順は3つです。1つ目、普段使っているテキストエディタを開きます。2つ目、新しいファイルを作成し、わかりやすい名前を付けます。3つ目、拡張子を「.html」にして保存します。この時点ではファイルの中身は空でかまいません。

次に、文書全体の骨組みを書きます。一番上に DOCTYPE 宣言を書き、この文書が HTML で書かれていることを示します。続けて、lang 属性を付けた html 要素を書き、その中に head 要素と body 要素を用意します。この段階では、head 要素と body 要素の中身はまだ空のままで構いません。

head 要素の中に2つの要素を書きます。1つ目は、meta 要素の charset 属性に「UTF-8」を指定するもので、文字化けを防ぐ役割があります。2つ目は、title 要素で、ここに書いた文字列がブラウザのタブに表示されます。

最後に、body 要素の中に挨拶の文章を書きます。たとえば、「はじめまして、佐藤玲奈です。」のような一文でかまいません。このとき、要素の中身を一段インデントして書くと、親子関係が見た目でも分かりやすくなります。開始タグと終了タグの対応が崩れないよう、書き終えたら必ず見直しましょう。

これが、この演習の解答例です。DOCTYPE 宣言から始まり、html 要素に lang 属性で「ja」を指定し、head 要素の中に meta charset と title を、body 要素の中に挨拶の一文を書いています。自分が作成したファイルと見比べて、タグの対応やインデントに違いがないか確認してみましょう。

最後に、自分が作成したファイルを次の観点でチェックしましょう。DOCTYPE 宣言は書けているか。html 要素に lang 属性は指定したか。head 要素の中に meta charset と title は書けているか。body 要素の中に挨拶の文章は書けているか。そして、インデントによって入れ子構造が読みやすくなっているか。すべて確認できれば、モジュール 1 の内容は身についています。

この単元では、モジュール 1 で学んだ 6つの学習事項を実際に使いながら、白紙の状態から HTML ファイルを作成しました。HTML と CSS の役割分担、ファイルの作成と確認、タグ・属性の書き方、文書の基本構造、文字コードとタイトル、そして要素の入れ子構造を、演習を通じて振り返ることができました。次のモジュールでは、リンクやコメントなど、HTML の基本文法をさらに広げていきます。