Embed Size (px)
Citation preview
メディア芸術基礎 Ⅰ第3回 HTML入門 2 情報を整理する - リスト、テーブル
2013年5月13日 (Aクラス)、5月20日 (Bクラス)多摩美術大学 情報デザイン学科 メディア芸術コース担当：田所淳
前回の復習 - HTML入門
先週の復習：WWWのしくみ‣ 3つのしくみ(URI, HTTP, HTML) について確実に理解する
HTTP
HTTP
HTML
URI
HTMLとは?‣ HTMLとは‣ 文書の要素に目印がつけられた、ハイパーテキストを記述するための言語
マークアップ = 文書の構造の記述‣ 文書の構造
2009年4月23日運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。皆様におかれましては、ふるってご参加くださいますようお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡は、ホームページに記載しますので、そちらをご参照ください。
○○大学××学部 (http://hoge.com/)tel: 12-345-6789
ヘッダー
大見出し
段落
段落
フッター
マークアップ = 文書の構造の記述‣ HTMLを書くということは、文書の構造を書くということ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) によって示す‣ タイトル‣ 見出し‣ 段落‣ 引用‣ リスト ...etc.
マークアップ = 文書の構造の記述‣ 「タグ」と呼ばれる目印を記述していく
‣ 記述する内容は3つ1.どこから = 開始タグ2.どこまで = 終了タグ3.要素の種類 = 要素タイプ
‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となる
マークアップ = 文書の構造の記述‣ マークアップの記述例
<h1> はじめに </h1>開始タグ 終了タグ要素内容
h1要素
HTMLの骨組み‣ 骨組みとなるHTML文書に含まれる3つの要素‣ html要素、head要素、body要素
html 要素
head 要素
body 要素
HTMLの骨組み‣ html要素‣ HTML文書の始まりと終わりを指定している‣ 全てのHTML文書は、html要素で囲まれている
HTMLの骨組み‣ head要素‣ 文書自身の情報を記述する要素‣ タイトル、文字コード、言語、CSSファイルの場所など‣ head要素に記述した内容はWebブラウザ内には表示されない
HTMLの骨組み‣ body要素‣ HTML文書の内容を記述する‣ ここに記述した部分がWebブラウザに表示される
基本の要素‣ まずは基本の要素!!‣ 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>
HTML入門のつづきハイパーリンク、イメージ
このセクションの内容‣ ひきつづき、HTMLの様々な要素(タグ)の役割、使用法を解説します
‣ アンカー、ハイパーリンク - a要素‣ インラインイメージ - img要素
a要素 - ハイパーリンク、アンカー‣ ハイパーリンク、HTMLの最重要機能
a要素 - ハイパーリンク、アンカー‣ a要素は要素内のリンクを貼りたい範囲をマークアップする‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例：http://yoppa.org/ ヘのリンクを作成する‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を参照してください。 </p>
画像を貼りつける – img要素‣ WWWに載せられるのは、ハイパーテキストだけでない‣ 画像や動画、音声など‣ 様々なメディアを効果的に用いることでページを魅力的に
画像を貼りつける – img要素‣ 画像をWebページに貼りつけるには、img要素を使用‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む‣ br要素と同様に、終了タグのない内容をもたない空要素なので末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
‣ alt属性には画像を説明する内容を入れる‣ 画像が見えないブラウザやダウンロードできなかった時のためにかならず入れる!
<img src="画像ファイルのURL" alt="画像の説明" />
画像を貼りつける – 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トップ画像" />
画像を貼りつける – img要素‣ 相対パス - HTMLファイルからの場所を指定する‣ 例えば、下記のようなファイル構造の場合‣ スラッシュ「/」がフォルダの階層構造を表現している
画像を貼りつける – img要素‣ 相対パス - もう少し複雑な例‣ 「../」は自分のファイルからみてひとつ上の階層を表現‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
画像を貼りつける – img要素‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影‣ メールで送付‣ 画像をページに追加してみる!
HTML入門 2: 情報を整理するリスト、テーブル
今日の内容‣ 情報をわかりやすく整理する‣ 複数の関連する情報をわかりやすく整理するには?
‣ 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>
情報を箇条書きで整理 - リスト‣ 多重構造のリストの例
テーブルによる情報の表現‣ 複数の属性とそのサンプルのような、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>
まとめ‣ これまで出てきた要素一覧
‣ 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の要素を正しく使用‣ デザインではなく、構造の記述を心掛ける
‣ 次週までに作成してきてください!
