箇条書き <ul> <ol> <dl>
ul（unordered list）
順序が置き換わっても意味が伝わる並列な内容に使う。
<ul>
<li>私が好きな真っ赤なりんご</li>
<li>あなたが好きなのはバナナ</li>
</ul>
ol（ordered list）
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。
<ol>
<li>まず良く洗ってから皮をむき</li>
<li>それからおもむろに囓りつく</li>
</ol>
dl（definition list）
「名称（用語）」と「その説明文（定義）」をセットにしてリスト化するときに使う。
- リスト全体に対する dl要素：definition list
- 名称(用語)に対する dt要素：definition term
- 説明文(定義)に対する dd要素：definition description
<dl>
<dt>りんご</dt>
<dd>赤い色をした丸い果物。</dd>
<dt>バナナ</dt>
<dd>黄色い色をした細長い果物。</dd>
</dl>
以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。
<dl>
<dt>06月11日</dt>
<dd>定義型リストと表組みの練習</dd>
<dt>06月10日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>06月09日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
</dl>
表組み
- table 要素
- caption 要素
- tr要素：table row
- td 要素：table data
- th要素：table header
<body>
<h1>Web年表</h1>
<tableborder="1">
<caption>1999年以前</caption>
<tr>
<th>西暦</th><th>出来事</th>
</tr>
<tr>
<td>1989年</td><td>WWWの誕生</td>
</tr>
<tr>
<td>1993年</td><td>Mosaic 登場</td>
</tr>
<tr>
<td>1995年</td><td>Windows 95</td>
</tr>
<tr>
<td>1998年</td><td>Google 登場</td>
</tr>
</table>
</body>
<tableborder="1"summary="カリキュラム内容のイメージ">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>国語</th>
<td>正しい文書構造を理解する（パラグラフの概念）</td>
</tr>
<tr>
<th>算数</th>
<td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>理科</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
<tr>
<th>社会</th>
<td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td>
</tr>
<tr>
<th>英語</th>
<td>Webのバックグラウンドから理解するために必要な言葉の理解する</td>
</tr>
<tr>
<th>図工</th>
<td>デザインのルールを理解する</td>
</tr>
</table>
文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
リンク
Webは「リンク」こそ命。
リンクには３つの使い方があります。
- テキストリンク
- 画像リンク
- メールリンク
<ahref="移動先のアドレス">◎◎◎のページへ移動</a>
<ahref="移動先のアドレス"><imgsrc="画像の住所"width="幅"height="高さ"alt="代替え文字"></a>
<ahref="xxx@xxx.net">お問い合わせ（メールソフトが起動します）</a>
a：anchor
href：hyper reference
新規ウィンドウで開く
水平線
hr：horizontal rule
「キューピー」のページを「表示→スタイルシート→スタイルシートを使用しない」にすると「水平線」が使われているのがわかります。
このように現在では、「hr」は「区切り線」として見せるのではなく、「意味を区切る」ことに利用されるます。
※いわゆる水平垂直の目盛りは「ruler：ルーラー」です。
