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