カボチャ入りラタトゥーユのレシピ

3.3.定義リスト（definition list）　　<dl> <dt> <dd>

箇条書きを作るための要素は、番号なしの箇条書き(unordered list)を作る ul要素と、番号つきの箇条書き(ordered list)を作る ol要素の２種類があり、いずれもブロックレベル要素で、箇条書きのひとつの項目(list item)を示す li要素と組み合わせて使う。適当な文章を <li>…</li> で囲んでそれをひとつの項目を表す要素とし、 <ul>…</ul> もしくは <ol>…</ol> の間にそれの要素を好きなだけ含める事ができる。


<ul>
   <li>輪切りにしたナス 3本</li>
   <li>乱切りした緑ピーマン 1個</li>
   <li>乱切りした赤黄パプリカ 各1個</li>
</ul>

<ol>
   <li>材料の処理。</li>
   <li>ニンニクをいためる。</li>
   <li>野菜をいためる。</li>
   <li>ホールトマト缶を加えて煮込む。</li>
</ol>

↓
ブラウザで読み込むと…

輪切りにしたナス 3本
乱切りした緑ピーマン 1個
乱切りした赤黄パプリカ各1個

材料の処理。
ニンニクをいためる。
野菜をいためる。
ホールトマト缶を加えて煮込む。

　【文書3-1a】にこれを使用し（【文書3-2a】）、ブラウザで読み込むと【文書3-2b】となる。

3.4.段落（paragraph）　・　改行（break）

定義の見出し語(definition title)を示す dt要素と、定義の説明本体(definition description)を示す dd要素を２つで１組とし、それを任意の数だけ <dl>…</dl> で囲むことで、dl要素が作られる。アカデミックな内容の場合に、用語解説などに使われることがある。ブロックレベル要素。


<dl>
    <dt>ラタトゥーユ</dt>
      <dd>トマトで煮こむ、南フランスの伝統的な野菜料理</dd>
    <dt>ミネストローネ</dt>
      <dd>「具沢山のスープ」という意味</dd>
</dl>

↓
ブラウザで読み込むと…

ラタトゥーユ: トマトで煮こむ、南フランスの伝統的な野菜料理
ミネストローネ: 「具沢山のスープ」という意味

3.5.整形済みテキスト（preformatted text）　　<pre>

p要素は、 … で囲まれた文章を一段落とみなすためのブロックレベル要素。後で説明する div要素と同様にブロックを分けるのに利用されるが、div要素との違いは、「一段落である」という意味を持たせることと、中に他のブロック要素を含めることができないことである。一般的ブラウザでは p要素の前後に適当な空行が勝手に挿入されるので、 p要素内の文章を前後と離して表示させたい時は便利だが、逆に段落ごとに空白を入れたくない時は使えない（その場合は div要素か br要素を使用する）。スタイルシートによってパディング（余白）を細かく設定できるようになった今、段落編集を含めたブロック分けは、もっぱら div要素で事足りる気もする。
　また p要素は、ブロックを分けるだけであって先頭の一文字を下げたりはしない。よって、全角スペースか、半角スペースを表す「   」を書くか、スタイルシートで以下のように設定しなければならない。

ラタトゥーユとは、・・・

　一方 br要素は挿入した位置で強制的に文章を改行させるインライン要素で、 br要素は終了タグをもたない空要素である。


<p>　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。            
日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、            
簡単で栄養も満点なので家庭料理としても使える一品です。</p>

<p>　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、            
実はパスタとも相性抜群です。ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。            
ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。</p>


　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。            
日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、            
簡単で栄養も満点なので家庭料理としても使える一品です。<br>

　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、            
実はパスタとも相性抜群です。ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。            
ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。<br>

↓
ブラウザで読み込むと…

　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、簡単で栄養も満点なので家庭料理としても使える一品です。

　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、実はパスタとも相性抜群です。ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。

　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、簡単で栄養も満点なので家庭料理としても使える一品です。
　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、実はパスタとも相性抜群です。ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。

　【文書3-2a】に p要素と br要素を使用し（【文書3-3a】）、ブラウザで読み込むと【文書3-3b】となる。ここでは p要素を、形式段落ではなく意味段落（大きな段落）を分けるのに用いており、 br要素によって形式段落を作ることで、その内部をさらに細かく分けている。 p要素の有効な使い道の一つとしては、このように、 ul要素・ol要素や dl要素内の解説部分を、適当な空白を取ることでスッキリさせるのに便利である。

3.6.横罫線（horizontal rule）　　<hr>

　 pre 要素は、要素内の空白や改行をそのまま表示させるために使用するブロックレベル要素である。　【文書1-1】を、 pre要素内に【文書3-4a】のようにコピーすると、ブラウザで読み込んだとき、【文書3-4b】のように、メモ帳で編集した時と同じような構造で表示される。

3.8.画像の配置　　<img style="float:left;">

　 hr要素は、区切りのための横線を表すためのブロックレベル要素である。下例のように、スタイルシートで長さと太さを設定することもできる（色と位置は未対応のブラウザがある）。なお、 hr要素は終了タグをもたない空要素である。


<hr>
<hr style="color:red ;">
<hr style="width:70% ;">
<hr style="width:50% ; text-align:left ;">
<hr style="width:50% ; text-align:right ;">
<hr style="height:10px ;">

↓
ブラウザで読み込むと…

　 img要素は、画像を埋め込むためのインライン要素である。埋め込まれた画像は下例のように、文章中では一つの文字のように扱われる。なお、 img要素は終了タグをもたない空要素である。

ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。日本でもポピュラーな料理なので、
<img src="rata6.jpg" alt="Ratatouille" title="Ratatouilleは美味しい" width="202" height="152">
どこでも見かけることができると思いますが、簡単で栄養も満点なので家庭料理としても使える一品です。

↓
ブラウザで読み込むと…

　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。日本でもポピュラーな料理なので、 Ratatouille

どこでも見かけることができると思いますが、簡単で栄養も満点なので家庭料理としても使える一品です。

　img要素の属性には以下のようなものがある。

src属性で画像のURLを指定する。
width属性と height属性で画像の幅と高さを指定する。全ての画像を読み込む前にページの外見を作ることができるようになるため、ブラウザでの表示を早く行うことができる。 Webページで表示されずにしばらく待たされるようなものは、ページ内に画像が多く、かつ幅と高さが設定されていないことが原因であることが多い。画像の実際のサイズと異なる場合は、指定した大きさにあうように、拡大縮小される。
title属性で画像のタイトルを指定する。『Microsoft Internet Explorer』や『Netscape Navigator』で、マウスを画像の上に乗せたときに、タイトルが書かれたツールチップが表示されるようになる。
longdesc属性で、その画像の説明が書かれたページのURLを指定する。ほとんど使われない。
alt属性で、画像を表示しない場合に表示する代替テキストを指定する。画像を表示することができないブラウザを使用する人や、画像を見ることができない人のために必須となっている。また『Microsoft Internet Explorer』では、title属性が書かれていない場合、マウスを画像の上に乗せたときに表示されるツールチップに、こちらの内容が表示される。

3.9.リンク（anchor）　　<a href="～">

　スタイルシートを使うことで、 img要素を、それを含む要素の上の左右どちらかに固定し、”浮かべる”（float）ことができる。
　文章中では一つの文字として扱われる画像は、それを含む要素の横の長さが変化することで動き、また画像が大きい場合、3章7節で見たように無駄なスペースが生じる。よって img 要素は、後述するテーブルを使用して好きな位置に固定するか、下例のように”浮かべる”のが普通である。


<p>ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。      
<img src="rata6.jpg" alt="Ratatouille" width="202" height="152" style="float:left;">       
日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、      
簡単で栄養も満点なので家庭料理としても使える一品です。<br>

　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、      
実はパスタとも相性抜群です。<br style="clear: left;">       
ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。      
ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。</p>

↓
ブラウザで読み込むと…

　ラタトゥーユとは、トマトで煮こむ、南フランスの伝統的な野菜料理です。 Ratatouille 日本でもポピュラーな料理なので、どこでも見かけることができると思いますが、簡単で栄養も満点なので家庭料理としても使える一品です。
　暖かいままで食べても、さましてから食べても美味しいのがラタトゥーユのいいところですが、実はパスタとも相性抜群です。
ラタトゥーユをソースをベースにしたソースをパスタとからめるだけ。ラタトゥーユを多めに作れば、おかずとパスタで二度楽しめます。

3章7節と異なり、画像が常に左によっているが、これは。 style="float:left;" で「左に固定して浮かぶ」ことを指定しているからである。また、画像の右側に回りこめる部分は、 <img> より後であり、かつ の前までである。 style="clear: left;" をもたない によっては、画像の横で改行されるが、 は、回り込みの終了の合図で、それ以後は画像の下から始まることになる。
　【文書3-3a】に img要素を加え（【文書3-5a】）、ブラウザで読み込むと【文書3-5b】となる。

3.10.アンカー（anchor）　　<a name="～">

<a href="～">・・・</a> は、ブラウザで要素内の文章を選択したとき、 href属性の属性値 "～" の内容によって以下のようなアクションを起こさせる。

属性値がURLで、指定されたファイルが HTMLファイル（拡張子が .html）の場合、そのページに移動する。
属性値がURLで、指定されたファイルが画像ファイル（拡張子が .jpg .gif .png等）の場合、その画像を読み込み、表示する。
属性値がURLで、指定されたファイルが音声・動画ファイル（拡張子が .mp3 .midi .mpg .avi等）の場合、適当なアプリケーションで再生する。
属性値がURLで、指定されたファイルが圧縮ファイル（拡張子が .zip等）の場合、そのファイルのダウンロードを開始する。
属性値がURLで、指定されたファイルがプログラムファイル（拡張子が .exe等）の場合、それをダウンロードし、そのプログラムを実行する。
属性値が "mailto:メールアドレス" の場合、指定されたアドレスへメールを送るためのメールソフトを起動させる。
属性値が "tel:電話番号" の場合、指定された電話番号へ電話をかける（ i-mode ）。

　例えば下のように記述する。


<a href="index.html" title="このWebサイトのindex" hreflang="ja-JP" charset="Shift_JIS" accesskey="i">index</a>
<br><br>
<a href="rata.jpg" title="ラタトゥーユの大きな写真" accesskey="p">picture</a>
<br><br>
<a href="mailto:mrhamacco@yahoo.co.jp" title="このWebサイトの管理人にメールを送信" accesskey="m">mail</a>

↓
ブラウザで読み込むと…

index

picture

mail

　href属性以外の属性には以下のようなものがある。

title属性は、リンク先のファイルのタイトルを指定する。
hreflang属性は、リンク先の文書の言語を指定する。
charset属性は、リンク先の文書の文字コードを指定する。
accesskey属性は、値として1文字を指定し、その文字キーとブラウザごとに決まった制御キー（Windowsは altキー、Macintoshは controlキーであることが多い）を押すことで、リンクを選択できるようにする。マウスをうまく扱えない人や扱いにくい環境（モバイルなど）で操作する人のために、設定しておくと親切。

また、<a href="～">・・・</a>の要素は文章（文字）ではなく、画像（ img要素）でもかまわず、その場合はボタンのようになる。
　【文書3-5a】に <a href="～">・・・</a>を加え（【文書3-6a】）、ブラウザで読み込むと【文書3-6b】となる。ただし、このページ以外は作成していないので、リンク先の URL はいい加減である。

3.11.引用（quotation）　　<q>　<blockquote>

<a name="～">・・・</a> は、これによって囲まれた部分を、指定した名前～のアンカーとして定義するインライン要素である。つまり、ページの特定位置に名前をつけることができ、そのページ内からも外のページからも参照ができるようになる。１つのページで多くの情報をもつページなどをこれによって区分けしておいたり、重要な用語の解説をアンカーとして定義しておいて、他のページからも参照できるようにしたりするのに使える。
　このページも、このアンカーによって名前付けを行っている。このページに書かれた３章「簡単なWebサイトの作成１」は、 3章1節から 3章12節までの計12節を含んでいるが、それぞれの節の頭（タイトル）には、第３節なら <a name="03"> のように、名前がつけられている。また、他の章も同様に、節ごとに名前がつけられている。、 3章9節で説明した <a href="～">・・・</a> の指定するURLの末尾に、「#～」をつけてアンカー "～" を指定することで、下の例のように各章の各節を参照することができる。

↓
ブラウザで読み込むと…

３章２節

１章３節

<q>・・・</q>と<blockquote>・・・</blockquote> は、これによって囲まれた部分が引用文であることを示す要素で、前者がインライン要素、後者がブロックレベル要素となる。他のWebサイトの文章から引用した場合、cite属性にその引用元のページの URL を記述する。
　また、引用した内容ではなく、参照（citation）した文献やサイト名、もしくは著者名を明記するためのインライン要素 <cite>・・・</cite> もある。

     
information という意味での情報は、
<q cite="http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=%BE%F0%CA%F3&sw=2">ある特定の目的について、
適切な判断を下したり、行動の意志決定をするために役立つ資料や知識</q>のことである。

<blockquote cite="http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=%BE%F0%CA%F3&sw=2">
情報【じょうほう】 
（２）〔information〕ある特定の目的について、適切な判断を下したり、
       行動の意志決定をするために役立つ資料や知識。
</blockquote>

<cite>『大辞林第二版』</cite> より引用

↓
ブラウザで読み込むと…

information という意味での情報は、ある特定の目的について、適切な判断を下したり、行動の意志決定をするために役立つ資料や知識のことである。

情報【じょうほう】（２）〔information〕ある特定の目的について、適切な判断を下したり、行動の意志決定をするために役立つ資料や知識。

『大辞林第二版』より引用

3.12.補足： URL の記述の仕方