Webサイトを作ろう!(HTML編)

4. 見出し・段落

1. 見出し

<h1>の「h」は「headline(見出し)」の頭文字です。<h1>と</h1>に囲まれた部分が見出しであることを表します。見出しを指定するタグには<h1>から<h6>まであって、1から6の数字は見出しのレベルを表します。たとえばこのページの場合、

Webサイトを作ろう!(HTML編)   ⇒大見出し

   3. HTMLの基本   ⇒中見出し

       1. HTML文書の構造   ⇒小見出し

       2. 見出し   ⇒小見出し

       3. 段落   ⇒小見出し

       4. 練習問題   ⇒小見出し

という構造になっているので、タグは

<h1> Webサイトを作ろう!(HTML編) </h1>

   <h2> 3. HTMLの基本 </h2>

       <h3> 1. HTML文書の構造 </h3>

       <h3> 2. 見出し </h3>

       <h3> 3. 段落 </h3>

       <h3> 4. 練習問題 </h3>

のように記します。

2. 段落

<p>の「p」は「paragraph(段落)」の頭文字です。<p>と</p>に囲まれた部分が1つの段落であることを表します。

<p> 吾輩は猫である。名前はまだ無い。</p>

<p> どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。 </p>

<p> この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。 </p>

3. 練習問題1

  1. 練習問題1」をクリックしてください。
  2. ブラウザのメニューバーの[表示]>[ソース]をクリックしてください。
  3. メモ帳のメニューバーの[ファイル]>[名前をつけて保存]をクリックしてください。
  4. マイドキュメントの「web」フォルダに、ファイル名はそのまま(「practice01.html」)で保存してください。
  5. メモ帳で「practice01.html」ファイルに見出しと段落のタブを正しく追加して、上書き保存してください(※日記の文章は一文で一段落と考えてください)。
  6. [マイドキュメント]>「web]>[practice01.html]のアイコンをダブルクリックして、以下のように表示されるか確認してみましょう。

練習問題1の完成サンプル


←2-3 HTMLの基本  Topページ  2-5 リスト→