More Related Content
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
メディア芸術基礎 Ⅰ 第3回 HTML入門 2 情報を整理する - リスト、テーブル
- 1. メディア芸術基礎 Ⅰ
第3回 HTML入門 2 情報を整理する
- リスト、テーブル
2013年5月13日 (Aクラス)、5月20日 (Bクラス)
多摩美術大学 情報デザイン学科 メディア芸術コース
担当:田所淳
- 5. マークアップ = 文書の構造の記述
‣ 文書の構造
2009年4月23日
運動会実行委員会
運動会開催のお知らせ
来る、5月14日に第20回運動会を挙行いたします。
皆様におかれましては、ふるってご参加くださいますよ
うお願いいたします。
なお雨天の場合は翌週に延期します。中止の際の連絡
は、ホームページに記載しますので、そちらをご参照く
ださい。
○○大学 学部 (http://hoge.com/)
tel: 12-345-6789
ヘッダー
大見出し
段落
段落
フッター
- 6. マークアップ = 文書の構造の記述
‣ HTMLを書くということは、文書の構造を書くということ
‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) に
よって示す
‣ タイトル
‣ 見出し
‣ 段落
‣ 引用
‣ リスト ...etc.
- 7. マークアップ = 文書の構造の記述
‣ 「タグ」と呼ばれる目印を記述していく
‣ 記述する内容は3つ
1.どこから = 開始タグ
2.どこまで = 終了タグ
3.要素の種類 = 要素タイプ
‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用する
ことが、HTML作成の主な作業となる
- 13. 基本の要素
‣ まずは基本の要素!!
‣ 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>
- 17. a要素 - ハイパーリンク、アンカー
‣ a要素は要素内のリンクを貼りたい範囲をマークアップする
‣ リンク先は開始タグに href=”〈URL〉” という属性で指定
‣ 例:http://yoppa.org/ ヘのリンクを作成する
‣ 詳しくは田所淳のホームページを参照してください。
<p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を
参照してください。 </p>
- 18. 画像を貼りつける – img要素
‣ WWWに載せられるのは、ハイパーテキストだけでない
‣ 画像や動画、音声など
‣ 様々なメディアを効果的に用いることでページを魅力的に
- 19. 画像を貼りつける – img要素
‣ 画像をWebページに貼りつけるには、img要素を使用
‣ img要素は画像そのものではなく、外部の画像ファイルの位置
(URL)を指定して読み込む
‣ br要素と同様に、終了タグのない内容をもたない空要素なの
で末尾は「/>」で閉じる
‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述)
‣ alt属性には画像を説明する内容を入れる
‣ 画像が見えないブラウザやダウンロードできなかった時のため
にかならず入れる!
<img src="画像ファイルのURL" alt="画像の説明" />
- 20. 画像を貼りつける – 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トップ画像" />
- 21. 画像を貼りつける – img要素
‣ 相対パス - HTMLファイルからの場所を指定する
‣ 例えば、下記のようなファイル構造の場合
‣ スラッシュ「/」がフォルダの階層構造を表現している
- 22. 画像を貼りつける – img要素
‣ 相対パス - もう少し複雑な例
‣ 「../」は自分のファイルからみてひとつ上の階層を表現
‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
- 26. 情報を箇条書きで整理 - リスト
‣ リストの効果
‣ リスト - 箇条書きで情報を表現する手段
‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる
‣ また、視覚的にも読みやすい
- 27. 情報を箇条書きで整理 - リスト
‣ 三種類のリスト
‣ 並列列挙リスト - ul要素
‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙
する
‣ 順序付きリスト - ol要素
‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参
照するための番号をつける
‣ 定義型リスト - dl 要素
‣ 辞書のように用語とその定義から構成される
- 28. 情報を箇条書きで整理 - リスト
‣ 並列列挙リスト (ul要素) の例
<ul>
<li>ドはドーナッツのド</li>
<li>レはレモンのレ</li>
<li>ミはみんなのミ</li>
<li>ファはファイトのファ</li>
<li>空を仰いで</li>
<li>ラララララ</li>
<li>シは幸せよ</li>
</ul>
- 30. 情報を箇条書きで整理 - リスト
‣ 順序付きリスト (ol要素) の例
<ol>
<li>一本でも人参</li>
<li>二足でもサンダル</li>
<li>三艘でもヨット</li>
<li>四粒でもごま塩</li>
<li>五台でもロケット</li>
<li>六羽でも七面鳥</li>
<li>七匹でも蜂</li>
<li>八頭でもクジラ</li>
</ol>
- 32. 情報を箇条書きで整理 - リスト
‣ 定義型リストの例 (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>
- 35. 実験
‣ 大きな説明項目
‣ うえの項目を補足する内容1
‣ うえの項目を補足する内容2
‣ うえの項目を補足する内容3
‣ 大きな説明項目
‣ うえの項目を補足する内容1
‣ うえの項目を補足する内容2
‣ うえの項目を補足する内容3
‣ さらにこまかな補足1
‣ さらにこまかな補足2
‣ さらにこまかな補足3
- 36. 情報を箇条書きで整理 - リスト
‣ 多重構造のリストの例
<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>
- 41. テーブルによる情報の表現
‣ 解答例
<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>
- 42. まとめ
‣ これまで出てきた要素一覧
‣ HTMLの構造 - html, head, body
‣ 文書の情報 - meta, title
‣ 見出し - h1 ∼ h6
‣ 段落、改行 - p, br
‣ ハイパーリンク - a
‣ イメージ - img
‣ リスト - ul, ol, li
‣ テーブル - table, th, tr, td