Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

芸術情報演習デザイン(web) 第2回:HTML入門

1 496 vues

Publié le

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

芸術情報演習デザイン(web) 第2回:HTML入門

  1. 1. 芸術情報演習デザイン (web)第2回:HTML入門2013年4月18日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. WWWを支える3つのしくみURL, HTTP, HTML
  3. 3. WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか2.閲覧したいWebページのアドレスを入力‣ 例:http://www.geidai.ac.jp/facilities/infocenter.html
  4. 4. WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか1. Webブラウザは、アドレスからサーバの場所を探しだす‣ “http://www.geidai.ac.jp” の部分がこれに相当 http://www.geidai.ac.jp
  5. 5. WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか‣ アドレスの残りの部分から、サーバ内の該当データを特定 ‣ “/facilities/infocenter.html” の部分がこれに相当 /facilities/infocenter.html
  6. 6. WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか3. Webページのデータをサーバから手元のPCに送信
  7. 7. WWWを支える3つのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか4. PC側で受信した情報から、Webページを生成し表示
  8. 8. WWWを支える3つのしくみ‣ URL (もしくは URI) ‣ Uniform Resource Locator  ‣ ネットワーク上の情報を一意に特定するアドレス指定方法‣ HTTP  ‣ HyperText Transfer Protocol  ‣ コンピュータ同士が情報をやりとりするルール‣ HTML  ‣ HyperText Markup Language  ‣ 環境にかかわりなくWWWを記述するための文書記述言語
  9. 9. WWWを支える3つのしくみ‣ 先ほどの例でいうと ‣ 3つのしくみ(URL, HTTP, HTML) について理解する URL http://www.idd.tamabi.ac.jp/art/index.php HTTP HTTP HTML
  10. 10. HTMLとは?
  11. 11. HTMLとは?‣ 今日は3つの仕組みのひとつ、HTMLを実際に書いていきます‣ HTML (Hypertext Markup Language) とは何か? ‣ それぞれのパーツごとに意味を理解する
  12. 12. HTMLとは?‣ Hyper Text ‣ 「テキストを越える」 ‣ 複数の文書を相互に関連付け、結び付ける仕組み
  13. 13. HTMLとは?‣ Markup (マークアップ) ‣ 文書の中に目印 (マーク) を付けていくこと ‣ HTMLでは、文書の構造をマークアップする ‣ 今日の授業内容のメイン
  14. 14. HTMLとは?‣ Language ‣ 言語
  15. 15. HTMLとは?‣ つまりHTMLとは ‣ 「文書の要素に目印がつけられた、ハイパーテキストを記 述するための言語」
  16. 16. マークアップ = 文書の構造の記述‣ 例えば以下のような文書があったとする 2009年4月23日 運動会実行委員会 運動会開催のお知らせ 来る、5月14日に第20回運動会を挙行いたします。 皆様におかれましては、ふるってご参加くださいますよ うお願いいたします。 なお雨天の場合は翌週に延期します。中止の際の連絡 は、ホームページに記載しますので、そちらをご参照く ださい。 ○○大学 学部 (http://hoge.com/) tel: 12-345-6789
  17. 17. マークアップ = 文書の構造の記述‣ この文書の構造 2009年4月23日 ヘッダー 運動会実行委員会 運動会開催のお知らせ 大見出し 来る、5月14日に第20回運動会を挙行いたします。 段落 皆様におかれましては、ふるってご参加くださいますよ うお願いいたします。 なお雨天の場合は翌週に延期します。中止の際の連絡 段落 は、ホームページに記載しますので、そちらをご参照く ださい。 ○○大学 学部 (http://hoge.com/) tel: 12-345-6789 フッター
  18. 18. マークアップ = 文書の構造の記述‣ HTMLを書くということは、文書の構造を書くということ‣ 文書のどの部分がどの要素なのかを目印 (マークアップ) に よって示す ‣ タイトル ‣ 見出し ‣ 段落 ‣ 引用 ‣ リスト ...etc.
  19. 19. マークアップ = 文書の構造の記述‣ どこからどこまでがその要素なのかを「タグ」と呼ばれる目印で記述していく‣ 文書の部分ごとの意味に応じて、タグを適切に使っていくことが、HTML作成の主な作業となる
  20. 20. マークアップ = 文書の構造の記述‣ 「タグ」と呼ばれる目印を記述していく‣ 記述する内容は3つ ‣ どこから = 開始タグ ‣ どこまで = 終了タグ ‣ 要素の種類 = 要素タイプ‣ 文書の部分ごとの意味に応じて、要素に適切なタグを適用する ことが、HTML作成の主な作業となる
  21. 21. マークアップ = 文書の構造の記述‣ マークアップの記述例 <h1> はじめに </h1>
  22. 22. マークアップ = 文書の構造の記述‣ マークアップの記述例 <h1> はじめに </h1>
  23. 23. マークアップ = 文書の構造の記述‣ マークアップの記述例 開始タグ <h1> はじめに </h1>
  24. 24. マークアップ = 文書の構造の記述‣ マークアップの記述例 開始タグ 終了タグ <h1> はじめに </h1>
  25. 25. マークアップ = 文書の構造の記述‣ マークアップの記述例 開始タグ 要素内容 終了タグ <h1> はじめに </h1>
  26. 26. マークアップ = 文書の構造の記述‣ マークアップの記述例 開始タグ 要素内容 終了タグ <h1> はじめに </h1> h1要素
  27. 27. マークアップ = 文書の構造の記述‣ 開始タグ、終了タグの詳細 ‣ 開始タグ タグの始点 タグの終点 < h1> 要素タイプの種類 ‣ 終了タグ タグの始点 タグの終点 </ h1>
  28. 28. マークアップ = 文書の構造の記述‣ 開始タグで要素の始点を指定したら、必ず終了タグで閉じる ‣ <p> この要素は段落を意味しています。</p>‣ 開始タグと終了タグがひとつになった特殊なタグが存在する ‣ <br /> 改行 ‣ <img src=”hoge.jpg” alt=”hoge” /> 画像‣ タグは、必ず半角英数文字の小文字で!
  29. 29. DreamWeaverでHTML作成‣ 早速、HTMLを作成してみましょう!‣ この授業では、Adobe Dreamweaver を使用します
  30. 30. DreamWeaverでHTML作成‣ Dreamweaverを起動‣ まずは、環境設定‣ Dreamweaver > 環境設定 > 新規ドキュメント ‣ 初期設定ドキュメントタイプ (DTD) を「HTML5」に ‣ エンコード初期設定を「Unicode 5.1 UTF-8」に
  31. 31. DreamWeaverでHTML作成‣ 環境設定
  32. 32. DreamWeaverでHTML作成‣ 新規作成 > HTML を選択
  33. 33. DreamWeaverでHTML作成‣ 「分割」表示を選択
  34. 34. DreamWeaverでHTML作成‣ ツールバーの地球のマークを押すと、Webブラウザで表示
  35. 35. DreamWeaverでHTML作成‣ なにやら既に記述が…‣ HTML5の基本のテンプレートが自動作成されている!!<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>無題ドキュメント</title></head><body></body></html>
  36. 36. HTMLの骨組み‣ 骨組みとなるHTML文書に含まれる3つの要素 ‣ html要素、head要素、body要素 html 要素 head 要素 body 要素
  37. 37. HTMLの骨組み‣ html要素 ‣ HTML文書の始まりと終わりを指定している ‣ 全てのHTML文書は、html要素で囲まれている
  38. 38. HTMLの骨組み‣ head要素 ‣ 文書自身の情報を記述する要素 ‣ タイトル、文字コード、言語、CSSファイルの場所など ‣ head要素に記述した内容は、Webブラウザ内には表示され ない
  39. 39. HTMLの骨組み‣ body要素 ‣ HTML文書の内容を記述する ‣ ここに記述した部分がWebブラウザに表示される
  40. 40. ページにタイトルを付ける‣ head要素内にtitle要素として記述する‣ 「無題ドキュメント」を書き換える‣ ブラウザで確認してみる<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>初めて作成するHTML</title></head><body></body></html>
  41. 41. ページにタイトルを付ける‣ ウィンドウのタイトルが変化してるはず
  42. 42. 大見出し‣ 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>
  43. 43. 大見出し‣ ブラウザで確認してみる
  44. 44. 見出しの種類‣ 見出しは、h1からh6まで段階がある‣ 試してみる!!... 前略 ...<body><h1>これはh1</h1><h2>これはh2</h2><h3>これはh3</h3><h4>これはh4</h4><h5>これはh5</h5><h6>これはh6</h6></body></html>
  45. 45. 見出しの種類‣ h1からh6をブラウザで表示してみる
  46. 46. 段落‣ 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>
  47. 47. 段落‣ ブラウザで確認してみる
  48. 48. 参考:細かな記述の意味‣ テンプレートから作成された記述の意味<!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>
  49. 49. 参考:細かな記述の意味<!DOCTYPE HTML>‣ !DOCTYPE - 「文書型の定義」を意味する‣ HTMLには様々なバージョンが存在する‣ HTML4.1, XHTML 1.0, XHTML 2.0, HTML5 ...など‣ <!DOCTYPE HTML> は HTML5の文書であることを意味‣ ちなみに、XHTML1.1の場合は…<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  50. 50. 参考:細かな記述の意味<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">‣ この部分は文字コード「UTF-8」を指定している‣ 文字コードとは? - PCで文字を表現するための体系 ‣ 日本語の文字コードは少し複雑 ‣ ISO-2022-JP、EUC-JP、Shift_JIS、UTF-8、UTF-16...‣ Webではどの文字コードを用いるべきか? ‣ これからのWebは多言語対応のUTF-8がお勧め
  51. 51. HTMLは構造の記述に徹する‣ HTMLは文書の構造の記述に専念すること ‣ 現状 - フォントの大きさ、色、フォントフェイス、行間、 文字間隔などの文書の体裁は、デフォルトのまま ‣ ちょっと気のきいたデザインにしてみたい… ‣ しかし、今の段階ではぐっと堪えてそのままで ‣ 文書の体裁(デザイン)の指定には、CSSという別の言語を使 用します
  52. 52. HTMLは構造の記述に徹する‣ なぜ、構造と体裁を分離するべきなのか?‣ 文書は常にPCのWebブラウザで閲覧されるわけではない ‣ 携帯、スマートフォン、カーナビ、音声読み上げ... ‣ どのメディアでも正しく意味構造が表現されるべき ‣ 正しい構造を記述する必要性‣ サーチエンジンへの最適化 (SEO) ‣ プログラムから意味構造を判別できる ‣ サーチエンジンに検索され易いサイト‣ 他のサイトへの引用や転載

×