HTMLの要素は,ホームページのコンテンツ(文章,画像など)に構造と意味を与えるためのものです.
現段階では「本文」に何の構造も設定していないので,ただの文字の羅列になっています.文章の構造与えるには,その部分にHTMLの書式で命令を書いておく必要があります. ここでは,最も基本的な構造を持ったページを作ってみましょう.
本や雑誌,新聞を見れば分かるように,ある程度以上のまとまった文章は,内容を「章」や「節」といった一つまたは複数の段落で構成されるブロックに分けて記述します. HTMLでは,<section> と </section> のような要素を用いて,こういった構造を記述します.階層構造を持たせる場合には,これを入れ子にして用います.
<section> は一般的なセクション分けに使用しますが,他に <article>,<nav>,<aside> という要素があり,コンテンツの性質によって使い分けます.
文章の最も基本的な構造は「段落」です.<P> と </P> の間が1つの段落です. 通常の文章はすべて段落にします.
段落にすると,次に来る文章が前の段落から一行空けて始まります.
セクション分けされた文章には見出しを付けます. 見出しは、<H(数字) > と </H(数字) > の間に書きます.
以下に見出しの例を挙げます.
セクション分けされた文章に見出しをつけるときの見出し要素の使い方は,次の二つのやり方が推奨されています.
<h1>見出し1</h1> <section> <h1>見出し2</h1> <section> <h1>見出し3</h1> </section> </section>
<h1>見出し1</h1> <section> <h2>見出し2</h2> <section> <h3>見出し3</h3> </section> </section>
ページやセクションに「ヘッダー」や「フッター」(本などで,ページの上部や下部にページ番号や章のタイトルが書いてある部分)を記述するときに使用します.
ヘッダーは <header> と </header> の間に,
フッターは <footer> と </footer> の間に記述します.
練習2ー1で作成した「renshu1.html」の文章に次のHTML要素を加えてみましょう.
その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.
通常の文章は,ページの端で自動的に改行して表示されます.しかし,「会話文」,「詩」など段落の途中で
文章の体裁を整えて見やすくするために「改行」する必要がある場合,その場所に,<BR> を記述すれば
このように,その場所で強制的に改行します.
以上のことを用いると,以下の例のように読みやすい文章がつくれます.
今日は,学生食堂に行って“カレーライス大盛(340円也)”を食べた.時間が時間だった(午後3時)もんだから,おじさんもサービス満点で,すごい量のごはんを盛ってくれた.
僕:『すいませーん,カレー大盛でお願いします』
おじさん:『サービスしときます』
僕:(...おいおい,ご飯そんなに盛るんだったら,カレーももっと入れてくれよ.と思いつつ)『あっ,どうも』
おじさん:『はい,どうもね〜』
しかし,今一つ食欲がなかったので,全てをたいらげるまでに,かなり苦しい思いをしてしまった.
なんだかねぇ,こんな状態になってしまっても,いっぱい食べれたという事で,かなり満足してしまっているのは,やはり,ビンボー症なんだろうか.うーむ,イカンイカン.
やまがためぐむ
ページに明確な区切りを入れたい時に,ページの端から端までの横線を引くことができます.
ここにあるような横線を引くためには,<HR> というタグを使います.
「renshu1.html」の文章の部分に改行を使ってみましょう.また,セクションの区切りの部分に横線を引いてみましょう.
その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.
実は,この上の部分には
<!-- この部分はコメントになります.-->
と書いてあるのですが、ブラウザ上では見えません.
<!--と-->に挟まれた部分はコメントと言って、ホームページの制作における覚え書きなど、表には出したくないことを書いておきたい時に使用する書式です.
「renshu1.html」にコメントを書き加えてみましょう.
その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.
来週まで,毎日の出来事,思ったことなどを1日に付き100文字以上書いておくこと.できれば,関連する写真などを撮っておくとなお良い(後で使用することが出来るため).