メディア芸術基礎 Ⅰ 第3回 html入門 2 情報を整理する - リスト、テーブル
TRANSCRIPT
![Page 1: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/1.jpg)
メディア芸術基礎 Ⅰ第3回 HTML入門 2 情報を整理する - リスト、テーブル
2013年5月13日 (Aクラス)、5月20日 (Bクラス)多摩美術大学 情報デザイン学科 メディア芸術コース担当:田所淳
![Page 2: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/2.jpg)
前回の復習 - HTML入門
![Page 3: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/3.jpg)
先週の復習:WWWのしくみ‣ 3つのしくみ(URI, HTTP, HTML) について確実に理解する
HTTP
HTTP
HTML
URI
![Page 4: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/4.jpg)
HTMLとは?‣ HTMLとは‣ 文書の要素に目印がつけられた、ハイパーテキストを記述するための言語
![Page 5: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/5.jpg)
マークアップ = 文書の構造の記述‣ 文書の構造
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
ヘッダー
大見出し
段落
段落
フッター
![Page 6: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/6.jpg)
マークアップ = 文書の構造の記述‣ HTMLを書くということは、文書の構造を書くということ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) によって示す‣ タイトル‣ 見出し‣ 段落‣ 引用‣ リスト ...etc.
![Page 7: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/7.jpg)
マークアップ = 文書の構造の記述‣ 「タグ」と呼ばれる目印を記述していく
‣ 記述する内容は3つ1.どこから = 開始タグ2.どこまで = 終了タグ3.要素の種類 = 要素タイプ
‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となる
![Page 8: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/8.jpg)
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
h1要素
![Page 9: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/9.jpg)
HTMLの骨組み‣ 骨組みとなるHTML文書に含まれる3つの要素‣ html要素、head要素、body要素
html 要素
head 要素
body 要素
![Page 10: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/10.jpg)
HTMLの骨組み‣ html要素‣ HTML文書の始まりと終わりを指定している‣ 全てのHTML文書は、html要素で囲まれている
![Page 11: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/11.jpg)
HTMLの骨組み‣ head要素‣ 文書自身の情報を記述する要素‣ タイトル、文字コード、言語、CSSファイルの場所など‣ head要素に記述した内容はWebブラウザ内には表示されない
![Page 12: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/12.jpg)
HTMLの骨組み‣ body要素‣ HTML文書の内容を記述する‣ ここに記述した部分がWebブラウザに表示される
![Page 13: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/13.jpg)
基本の要素‣ まずは基本の要素!!‣ meta, title, h1 - h6, p<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初めて作成するHTML</title></head><body><h1>こんにちは、HTML</h1><p>このページは、はじめて作成したWebページです。きちんと表示されているでしょうか?</p></body></html>
![Page 14: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/14.jpg)
HTML入門のつづきハイパーリンク、イメージ
![Page 15: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/15.jpg)
このセクションの内容‣ ひきつづき、HTMLの様々な要素(タグ)の役割、使用法を解説します
‣ アンカー、ハイパーリンク - a要素‣ インラインイメージ - img要素
![Page 16: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/16.jpg)
a要素 - ハイパーリンク、アンカー‣ ハイパーリンク、HTMLの最重要機能
![Page 17: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/17.jpg)
a要素 - ハイパーリンク、アンカー‣ a要素は要素内のリンクを貼りたい範囲をマークアップする‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例:http://yoppa.org/ ヘのリンクを作成する‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を参照してください。 </p>
![Page 18: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/18.jpg)
画像を貼りつける – img要素‣ WWWに載せられるのは、ハイパーテキストだけでない‣ 画像や動画、音声など‣ 様々なメディアを効果的に用いることでページを魅力的に
![Page 19: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/19.jpg)
画像を貼りつける – img要素‣ 画像をWebページに貼りつけるには、img要素を使用‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む‣ br要素と同様に、終了タグのない内容をもたない空要素なので末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
‣ alt属性には画像を説明する内容を入れる‣ 画像が見えないブラウザやダウンロードできなかった時のためにかならず入れる!
<img src="画像ファイルのURL" alt="画像の説明" />
![Page 20: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/20.jpg)
画像を貼りつける – img要素‣ 相対URLと絶対URL‣ src属性には画像ファイルの場所(URL)を指定します。‣ 例えば、yoppa.org のトップの画像
‣ 画像のURLは、http://yoppa.org/wp-content/uploads/2010/09/fetured_img2.jpg
‣ これは「絶対パス」
<img src="http://yoppa.org/wp-content/uploads/2010/09/fetured_img2.jpg" alt="yoppa.orgトップ画像" />
![Page 21: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/21.jpg)
画像を貼りつける – img要素‣ 相対パス - HTMLファイルからの場所を指定する‣ 例えば、下記のようなファイル構造の場合‣ スラッシュ「/」がフォルダの階層構造を表現している
![Page 22: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/22.jpg)
画像を貼りつける – img要素‣ 相対パス - もう少し複雑な例‣ 「../」は自分のファイルからみてひとつ上の階層を表現‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
![Page 23: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/23.jpg)
画像を貼りつける – img要素‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影‣ メールで送付‣ 画像をページに追加してみる!
![Page 24: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/24.jpg)
HTML入門 2: 情報を整理するリスト、テーブル
![Page 25: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/25.jpg)
今日の内容‣ 情報をわかりやすく整理する‣ 複数の関連する情報をわかりやすく整理するには?
‣ 1. 列挙する:リスト‣ 箇条書き - ul要素、li要素‣ ナンバリング - ol要素、li要素‣ 用語とその定義 - dt要素、dd要素
‣ 2. 表にして整理:テーブル‣ table要素、th要素、tr要素、td要素
![Page 26: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/26.jpg)
情報を箇条書きで整理 - リスト‣ リストの効果‣ リスト - 箇条書きで情報を表現する手段‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる‣ また、視覚的にも読みやすい
![Page 27: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/27.jpg)
情報を箇条書きで整理 - リスト‣ 三種類のリスト
‣ 並列列挙リスト - ul要素‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙する
‣ 順序付きリスト - ol要素‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参照するための番号をつける
‣ 定義型リスト - dl 要素‣ 辞書のように用語とその定義から構成される
![Page 28: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/28.jpg)
情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例<ul> <li>ドはドーナッツのド</li> <li>レはレモンのレ</li> <li>ミはみんなのミ</li> <li>ファはファイトのファ</li> <li>空を仰いで</li> <li>ラララララ</li> <li>シは幸せよ</li></ul>
![Page 29: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/29.jpg)
情報を箇条書きで整理 - リスト‣ 並列列挙リスト (ul要素) の例
![Page 30: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/30.jpg)
情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例<ol> <li>一本でも人参</li> <li>二足でもサンダル</li> <li>三艘でもヨット</li> <li>四粒でもごま塩</li> <li>五台でもロケット</li> <li>六羽でも七面鳥</li> <li>七匹でも蜂</li> <li>八頭でもクジラ</li></ol>
![Page 31: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/31.jpg)
情報を箇条書きで整理 - リスト‣ 順序付きリスト (ol要素) の例
![Page 32: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/32.jpg)
情報を箇条書きで整理 - リスト‣ 定義型リストの例 (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>
![Page 33: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/33.jpg)
情報を箇条書きで整理 - リスト‣ 定義型リストの例 (dl, dd要素)
![Page 34: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/34.jpg)
リストの入れ子構造‣ リストは複数のレベルを持つことが可能‣ リストのレベルを表現するには、リストの項目の中に、新たなリスト(ul要素、またはol要素)を入れ子状にする
‣ 多重構造のリストを記述していくことが可能
![Page 35: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/35.jpg)
実験‣ 大きな説明項目‣ うえの項目を補足する内容1‣ うえの項目を補足する内容2‣ うえの項目を補足する内容3
‣ 大きな説明項目‣ うえの項目を補足する内容1‣ うえの項目を補足する内容2‣ うえの項目を補足する内容3‣ さらにこまかな補足1‣ さらにこまかな補足2‣ さらにこまかな補足3
![Page 36: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/36.jpg)
情報を箇条書きで整理 - リスト‣ 多重構造のリストの例<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>
![Page 37: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/37.jpg)
情報を箇条書きで整理 - リスト‣ 多重構造のリストの例
![Page 38: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/38.jpg)
テーブルによる情報の表現‣ 複数の属性とそのサンプルのような、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
![Page 39: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/39.jpg)
テーブルによる情報の表現‣ HTMLではtable要素で表を表現する‣ table要素、tr要素 (Table Row)、td要素 (Table Data)
table 要素tr 要素td 要素 td 要素 td 要素 td 要素
tr 要素td 要素 td 要素 td 要素 td 要素
![Page 40: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/40.jpg)
テーブルによる情報の表現‣ テーブル作成の練習‣ 簡単な表を作成してみましょう
県名 県庁所在地 面積 総人口
東京都 東京 2,187.65km² 13,044,818人
千葉県 千葉市 5,156.60km² 6,200,335人
埼玉県 さいたま市 3,797.25km² 7,189,176人
![Page 41: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/41.jpg)
テーブルによる情報の表現‣ 解答例<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>
![Page 42: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/42.jpg)
まとめ‣ これまで出てきた要素一覧
‣ HTMLの構造 - html, head, body‣ 文書の情報 - meta, title‣ 見出し - h1 ~ h6‣ 段落、改行 - p, br‣ ハイパーリンク - a‣ イメージ - img‣ リスト - ul, ol, li‣ テーブル - table, th, tr, td
![Page 43: メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル](https://reader031.vdocuments.mx/reader031/viewer/2022013115/55a8443e1a28ab38358b4819/html5/thumbnails/43.jpg)
実習と次週までの課題!!
‣ HTMLの主要の要素の解説は、とりあえず一段落‣ 実際にHTMLでWebページを作成してみる
‣ テーマ:「自己紹介」‣ 自分の専攻、活動内容、興味、目標 ...etc‣ 1ページ
‣ これまで学んだHTMLの要素を正しく使用‣ デザインではなく、構造の記述を心掛ける
‣ 次週までに作成してきてください!