Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (13)
Destaque
Destaque (20)
Semelhante a メディア芸術基礎 Ⅰ 第2回 HTML入門
Semelhante a メディア芸術基礎 Ⅰ 第2回 HTML入門 (20)
Mais de Atsushi Tadokoro
Mais de Atsushi Tadokoro (20)
メディア芸術基礎 Ⅰ 第2回 HTML入門
- 1. メディア芸術基礎 Ⅰ 第2回 HTML入門 2013年4月22日 (Aクラス)、5月6日 (Bクラス) 多摩美術大学 情報デザイン学科 メディア芸術コース 担当：田所淳
- 2. HTML入門
- 3. 先週の復習：WWWのしくみ ‣ 3つのしくみ(URI, HTTP, HTML) について確実に理解する HTTP HTTP HTML URI
- 4. HTMLとは? ‣ 今日は3つの仕組みのひとつ、HTMLを実際に書いていきます ‣ HTML (Hypertext Markup Language) とは何か? ‣ それぞれのパーツごとに意味を理解する
- 5. HTMLとは? ‣ Hyper Text ‣ 「テキストを越える」 ‣ 複数の文書を相互に関連付け、結び付ける仕組み
- 6. HTMLとは? ‣ Markup (マークアップ) ‣ 文書の中に目印 (マーク) を付けていくこと ‣ HTMLでは、文書の構造をマークアップする ‣ 今日の授業内容のメイン
- 9. マークアップ = 文書の構造の記述 ‣ 例えば以下のような文書があったとする 2009年4月23日 運動会実行委員会 運動会開催のお知らせ 来る、5月14日に第20回運動会を挙行いたします。 皆様におかれましては、ふるってご参加くださいますよ うお願いいたします。 なお雨天の場合は翌週に延期します。中止の際の連絡 は、ホームページに記載しますので、そちらをご参照く ださい。 ○○大学 学部 (http://hoge.com/) tel: 12-345-6789
- 10. マークアップ = 文書の構造の記述 ‣ この文書の構造 2009年4月23日 運動会実行委員会 運動会開催のお知らせ 来る、5月14日に第20回運動会を挙行いたします。 皆様におかれましては、ふるってご参加くださいますよ うお願いいたします。 なお雨天の場合は翌週に延期します。中止の際の連絡 は、ホームページに記載しますので、そちらをご参照く ださい。 ○○大学 学部 (http://hoge.com/) tel: 12-345-6789 ヘッダー 大見出し 段落 段落 フッター
- 11. マークアップ = 文書の構造の記述 ‣ HTMLを書くということは、文書の構造を書くということ ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) に よって示す ‣ タイトル ‣ 見出し ‣ 段落 ‣ 引用 ‣ リスト ...etc.
- 12. マークアップ = 文書の構造の記述 ‣ どこからどこまでがその要素なのかを「タグ」と呼ばれる目印 で記述していく ‣ 文書の部分ごとの意味に応じて、タグを適切に使っていくこと が、HTML作成の主な作業となる
- 13. マークアップ = 文書の構造の記述 ‣ 「タグ」と呼ばれる目印を記述していく ‣ 記述する内容は3つ 1.どこから = 開始タグ 2.どこまで = 終了タグ 3.要素の種類 = 要素タイプ ‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用する ことが、HTML作成の主な作業となる
- 14. マークアップ = 文書の構造の記述 ‣ マークアップの記述例 <h1> はじめに </h1><h1> はじめに </h1>
- 15. マークアップ = 文書の構造の記述 ‣ マークアップの記述例 <h1> はじめに </h1> 開始タグ
- 16. マークアップ = 文書の構造の記述 ‣ マークアップの記述例 <h1> はじめに </h1> 開始タグ 終了タグ
- 17. マークアップ = 文書の構造の記述 ‣ マークアップの記述例 <h1> はじめに </h1> 開始タグ 終了タグ要素内容
- 18. マークアップ = 文書の構造の記述 ‣ マークアップの記述例 <h1> はじめに </h1> 開始タグ 終了タグ要素内容 h1要素
- 19. マークアップ = 文書の構造の記述 ‣ 開始タグ、終了タグの詳細 ‣ 開始タグ ‣ 終了タグ < h1> タグの始点 タグの終点 要素タイプの種類 </ h1> タグの始点 タグの終点 要素タイプの種類
- 20. マークアップ = 文書の構造の記述 ‣ 開始タグで要素の始点を指定したら、必ず終了タグで閉じる ‣ <p> この要素は段落を意味しています。</p> ‣ 開始タグと終了タグがひとつになった特殊なタグが存在する ‣ <br /> 改行 ‣ <img src=”hoge.jpg” alt=”hoge” /> 画像 ‣ タグは、必ず半角英数文字の小文字で!
- 21. HTMLの骨組み ‣ 骨組みとなるHTML文書に含まれる3つの要素 ‣ html要素、head要素、body要素 html 要素 head 要素 body 要素
- 22. HTMLの骨組み ‣ html要素 ‣ HTML文書の始まりと終わりを指定している ‣ 全てのHTML文書は、html要素で囲まれている
- 23. HTMLの骨組み ‣ head要素 ‣ 文書自身の情報を記述する要素 ‣ タイトル、文字コード、言語、CSSファイルの場所など ‣ head要素に記述した内容は、Webブラウザ内には表示され ない
- 24. HTMLの骨組み ‣ body要素 ‣ HTML文書の内容を記述する ‣ ここに記述した部分がWebブラウザに表示される
- 25. ページにタイトルを付ける ‣ head要素内にtitle要素として記述する ‣ 「無題ドキュメント」を書き換える ‣ ブラウザで確認してみる <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head> <body> </body> </html>
- 27. 大見出し ‣ body要素内に、h1要素として記述する ‣ ブラウザで確認してみる <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head> <body> <h1>こんにちは、HTML</h1> </body> </html>
- 29. 見出しの種類 ‣ 見出しは、h1からh6まで段階がある ‣ 試してみる!! ... 前略 ... <body> <h1>これはh1</h1> <h2>これはh2</h2> <h3>これはh3</h3> <h4>これはh4</h4> <h5>これはh5</h5> <h6>これはh6</h6> </body> </html>
- 31. 段落 ‣ body要素内に、p要素として記述する ‣ p要素は、”paragraph” の略 <!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>
- 32. 段落 ‣ ブラウザで確認してみる
- 33. a要素 - ハイパーリンク、アンカー ‣ ハイパーリンク、HTMLの最重要機能
- 34. a要素 - ハイパーリンク、アンカー ‣ a要素は要素内のリンクを貼りたい範囲をマークアップする ‣ リンク先は開始タグに href=”〈URL〉” という属性で指定 ‣ 例：http://yoppa.org/ ヘのリンクを作成する ‣ 詳しくは田所淳のホームページを参照してください。 <p> 詳しくは<a href=”http://yoppa.org/”>田所淳のホームページ</a>を 参照してください。 </p>
- 35. 画像を貼りつける – img要素 ‣ WWWに載せられるのは、ハイパーテキストだけでない ‣ 画像や動画、音声など ‣ 様々なメディアを効果的に用いることでページを魅力的に
- 36. 画像を貼りつける – img要素 ‣ 画像をWebページに貼りつけるには、img要素を使用 ‣ img要素は画像そのものではなく、外部の画像ファイルの位置 (URL)を指定して読み込む ‣ br要素と同様に、終了タグのない内容をもたない空要素なの で末尾は「/>」で閉じる ‣ 画像ファイルのURLは、絶対パス or 相対パスで (後述) ‣ alt属性には画像を説明する内容を入れる ‣ 画像が見えないブラウザやダウンロードできなかった時のため にかならず入れる! <img src="画像ファイルのURL" alt="画像の説明" />
- 37. 画像を貼りつける – 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トップ画像" />
- 38. 画像を貼りつける – img要素 ‣ 相対パス - HTMLファイルからの場所を指定する ‣ 例えば、下記のようなファイル構造の場合 ‣ スラッシュ「/」がフォルダの階層構造を表現している
- 39. 画像を貼りつける – img要素 ‣ 相対パス - もう少し複雑な例 ‣ 「../」は自分のファイルからみてひとつ上の階層を表現 ‣ 例えば2つ上の階層は「../../」3つ上の階層は「../../../」
- 40. 画像を貼りつける – img要素 ‣ 携帯電話で自分の写真(もしくはなにか自分のもの)を撮影 ‣ メールで送付 ‣ 画像をページに追加してみる!
- 41. 情報を箇条書きで整理 - リスト ‣ リストの効果 ‣ リスト - 箇条書きで情報を表現する手段 ‣ 短い文字量で表現したい論旨を的確にわかり易く表現できる ‣ また、視覚的にも読みやすい
- 42. 情報を箇条書きで整理 - リスト ‣ 三種類のリスト ‣ 並列列挙リスト - ul要素 ‣ 項目の順番にはあまり大きな意味を持たず、並列的に列挙 する ‣ 順序付きリスト - ol要素 ‣ 項目の順番が意味を持たせたり、もしくは項目をあとで参 照するための番号をつける ‣ 定義型リスト - dl 要素 ‣ 辞書のように用語とその定義から構成される
- 43. 情報を箇条書きで整理 - リスト ‣ 並列列挙リスト (ul要素) の例 <ul> <li>ドはドーナッツのド</li> <li>レはレモンのレ</li> <li>ミはみんなのミ</li> <li>ファはファイトのファ</li> <li>空を仰いで</li> <li>ラララララ</li> <li>シは幸せよ</li> </ul>
- 44. 情報を箇条書きで整理 - リスト ‣ 順序付きリスト (ol要素) の例 <ol> <li>一本でも人参</li> <li>二足でもサンダル</li> <li>三艘でもヨット</li> <li>四粒でもごま塩</li> <li>五台でもロケット</li> <li>六羽でも七面鳥</li> <li>七匹でも蜂</li> <li>八頭でもクジラ</li> </ol>
- 45. 情報を箇条書きで整理 - リスト ‣ 定義型リストの例 (dl, 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>
- 46. 情報を箇条書きで整理 - リスト ‣ 実習： ‣ リストを使用して、Bookmarkページをつくってみる ‣ 自分の好きなアーティストや好きなWebページ ‣ よく利用しているサイトなど
- 47. 参考：細かな記述の意味 ‣ テンプレートから作成された記述の意味 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>初めて作成するHTML</title> </head> <body> <h1>こんにちは、HTML</h1> </body> </html>
- 48. 参考：細かな記述の意味 ‣ !DOCTYPE - ｢文書型の定義｣を意味する ‣ HTMLには様々なバージョンが存在する ‣ HTML4.1, XHTML 1.0, XHTML 2.0, HTML5 ...etc ‣ <!DOCTYPE HTML> は HTML5の文書であることを意味 ‣ ちなみに、XHTML1.1の場合は… <!DOCTYPE HTML> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- 49. 参考：細かな記述の意味 ‣ この部分は文字コード「UTF-8」を指定している ‣ 文字コードとは? - PCで文字を表現するための体系 ‣ 日本語の文字コードは少し複雑 ‣ ISO-2022-JP、EUC-JP、Shift_JIS、UTF-8、UTF-16... ‣ Webではどの文字コードを用いるべきか? ‣ これからのWebは多言語対応のUTF-8がお勧め ‣ HTML5では、UTF-8が推奨されている <meta charset="UTF-8">
- 50. HTMLは構造の記述に徹する ‣ HTMLは文書の構造の記述に専念すること ‣ 現状 - フォントの大きさ、色、フォントフェイス、行間、文 字間隔などの文書の体裁は、デフォルトのまま ‣ ちょっと気のきいたデザインにしてみたい… ‣ しかし、今の段階ではぐっと堪えてそのままで ‣ 文書の体裁(デザイン)の指定には、CSSという別の言語を使用 します
- 51. HTMLは構造の記述に徹する ‣ なぜ、構造と体裁を分離するべきなのか? ‣ 文書は常にPCのWebブラウザで閲覧されるわけではない ‣ 携帯、スマートフォン、カーナビ、音声読み上げ... ‣ どのメディアでも正しく意味構造が表現されるべき ‣ 正しい構造を記述する必要性 ‣ サーチエンジンへの最適化 (SEO) ‣ プログラムから意味構造を判別できる ‣ サーチエンジンに検索され易いサイト ‣ 他のサイトへの引用や転載
- 52. 次回までの課題！ ‣ 自己紹介のWebページを作成する ‣ HTMLの基礎練習として、簡単なページを作成してみましょう ‣ 使用するタグは、以下のものを使用してください ‣ h1要素∼h6要素 ‣ p要素 ‣ ul -li要素 ‣ img要素 ‣ タイトルをつけるようにしてください - title要素