情報編集 (web)第4回：HTML入門 3 情報を整理する - リスト、テーブル

2013年4月30日東京藝術大学 芸術情報センター(AMC)担当：田所淳

今日の内容‣ 情報をわかりやすく整理する‣ 複数の関連する情報をわかりやすく整理するには?

‣ 1. 列挙する：リスト‣ 箇条書き - ul要素、li要素‣ ナンバリング - ol要素、li要素‣ 用語とその定義 - dt要素、dd要素

‣ 2. 表にして整理：テーブル‣ table要素、th要素、tr要素、td要素

情報を箇条書きで整理 - リスト‣ リストの効果‣ リスト - 箇条書きで情報を表現する手段‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる‣ また、視覚的にも読みやすい

情報を箇条書きで整理 - リスト‣ 三種類のリスト

‣ 並列列挙リスト - ul要素‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙する

‣ 順序付きリスト - ol要素‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参照するための番号をつける

‣ 定義型リスト - dl 要素‣ 辞書のように用語とその定義から構成される

情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例<ul>  <li>ドはドーナッツのド</li>  <li>レはレモンのレ</li>  <li>ミはみんなのミ</li>  <li>ファはファイトのファ</li>  <li>空を仰いで</li>  <li>ラララララ</li>  <li>シは幸せよ</li></ul>

情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例

情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例<ol>  <li>一本でも人参</li>  <li>二足でもサンダル</li>  <li>三艘でもヨット</li>  <li>四粒でもごま塩</li>  <li>五台でもロケット</li>  <li>六羽でも七面鳥</li>  <li>七匹でも蜂</li>  <li>八頭でもクジラ</li></ol>

情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例

情報を箇条書きで整理 - リスト‣ 定義型リストの例 (dl, dt, dd要素)<dl>  <dt>HTML</dt>  <dd>Hyper Text Markup Languageの略。Webページを記述するためのマークアップ言語。</dd>  <dt>HTTP</dt>  <dd>Hyper Text Transfer Protcol。Webサーバとクライアントがデータを送受信するのに使われるプロトコル。</dd>  <dt>URL</dt>  <dd>Uniform Rosource Locator。インターネット上の情報の場所を指定する。</dd></dl>

情報を箇条書きで整理 - リスト‣ 定義型リストの例 (dl, dd要素)

リストの入れ子構造‣ リストは複数のレベルを持つことが可能‣ リストのレベルを表現するには、リストの項目の中に、新たなリスト(ul要素、またはol要素)を入れ子状にする

‣ 多重構造のリストを記述していくことが可能

実験‣ 大きな説明項目‣ うえの項目を補足する内容１‣ うえの項目を補足する内容２‣ うえの項目を補足する内容３

‣ 大きな説明項目‣ うえの項目を補足する内容１‣ うえの項目を補足する内容２‣ うえの項目を補足する内容３‣ さらにこまかな補足１‣ さらにこまかな補足２‣ さらにこまかな補足３

情報を箇条書きで整理 - リスト‣ 多重構造のリストの例<ul>  <li>リスト1    <ul>      <li>リスト1.1</li>      <li>リスト1.2</li>      <li>リスト1.3</li>    </ul>  </li>  <li>リスト2    <ul>      <li>リスト2.1</li>      <li>リスト2.2</li>      <li>リスト2.3</li>    </ul>  </li></ul>

情報を箇条書きで整理 - リスト‣ 多重構造のリストの例

情報を箇条書きで整理 - リスト‣ Dreamweaverでは、HTMLのプロパティーで簡単にリストが作成可能

テーブルによる情報の表現‣ 複数の属性とそのサンプルのような、2次元で表現できる情報‣ 「表」の形式にまとめると理解しやすい‣ Exelなどの表計算ソフトや、データベースなどは「表」で情報を整理している

‣ 表形式のデータの例

属性1 属性2 属性3 属性4

サンプル1

サンプル2

サンプル3

サンプル4

10 20 30 40

15 25 35 45

40 30 20 10

45 35 25 15

テーブルによる情報の表現‣ HTMLではtable要素で表を表現する‣ table要素、tr要素 (Table Row)、td要素 (Table Data)

table 要素tr 要素td 要素 td 要素 td 要素 td 要素

tr 要素td 要素 td 要素 td 要素 td 要素

テーブルによる情報の表現‣ テーブル作成の練習‣ 簡単な表を作成してみましょう

県名 県庁所在地 面積 総人口

東京都 東京 2,187.65km² 13,044,818人

千葉県 千葉市 5,156.60km² 6,200,335人

埼玉県 さいたま市 3,797.25km² 7,189,176人

テーブルによる情報の表現‣ 解答例<table border="3" cellpadding="5">  <tr>    <th>県名</th>    <th>県庁所在地</th>    <th>面積</th>    <th>総人口</th>  </tr>  <tr>    <td>東京都</td>    <td>東京</td>    <td>2,187.65km²</td>    <td>13,044,818人</td>  </tr>  <tr>    <td>千葉県</td>    <td>千葉市</td>    <td>5,156.60km²</td>

    <td>6,200,335人</td>  </tr>  <tr>    <td>埼玉県</td>    <td>さいたま市</td>    <td>3,797.25km²</td>    <td>7,189,176人</td>  </tr></table>

テーブルによる情報の表現‣ Dreamweaverでは、より簡易に表が作成可能‣ メニューから「テーブル」ボタンを選択する

テーブルによる情報の表現‣ 作成する表に関する様々な設定ができる

テーブルによる情報の表現‣ 設定したサイズで表に必要な要素が自動的に生成される‣ あとは項目を打ち込んでいくだけ

まとめ‣ これまで出てきた要素一覧

‣ HTMLの構造 - html, head, body‣ 文書の情報 - meta, title‣ 見出し - h1 ～ h6‣ 段落、改行 - p, br‣ ハイパーリンク - a‣ イメージ - img‣ リスト - ul, ol, li‣ テーブル - table, th, tr, td

実習と次週までの課題!!

‣ HTMLの主要の要素の解説は、とりあえず一段落‣ 実際にHTMLでWebページを作成してみる

‣ テーマ:「自己紹介」‣ 自分の専攻、活動内容、興味、目標 ...etc‣ 1ページ

‣ これまで学んだHTMLの要素を正しく使用‣ デザインではなく、構造の記述を心掛ける

‣ 次週までに作成してきてください!