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入門

2 346 vues

Publié le

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

情報編集 (web) 第2回:HTML入門

  1. 1. 情報編集 (web)第2回:HTML入門2013年4月16日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. WWWを支える3つのしくみURL, HTTP, HTML
  3. 3. ‣ 自分のPCでWebページを見ているとき、何が起っているのか2.閲覧したいWebページのアドレスを入力‣ 例:http://www.geidai.ac.jp/facilities/infocenter.htmlWWWを支える3つのしくみ
  4. 4. ‣ 自分のPCでWebページを見ているとき、何が起っているのか1. Webブラウザは、アドレスからサーバの場所を探しだす‣ “http://www.geidai.ac.jp” の部分がこれに相当WWWを支える3つのしくみhttp://www.geidai.ac.jp
  5. 5. ‣ 自分のPCでWebページを見ているとき、何が起っているのか‣ アドレスの残りの部分から、サーバ内の該当データを特定‣ “/facilities/infocenter.html” の部分がこれに相当WWWを支える3つのしくみ/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) について理解するHTTPHTTPHTMLhttp://www.idd.tamabi.ac.jp/art/index.phpURL
  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><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には様々なバージョンが存在する‣ HTML4.1, XHTML 1.0, XHTML 2.0, HTML5 ...など‣ <!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">
  50. 50. 参考:細かな記述の意味‣ この部分は文字コード「UTF-8」を指定している‣ 文字コードとは? - PCで文字を表現するための体系‣ 日本語の文字コードは少し複雑‣ ISO-2022-JP、EUC-JP、Shift_JIS、UTF-8、UTF-16...‣ Webではどの文字コードを用いるべきか?‣ これからのWebは多言語対応のUTF-8がお勧め<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  51. 51. HTMLは構造の記述に徹する‣ HTMLは文書の構造の記述に専念すること‣ 現状 - フォントの大きさ、色、フォントフェイス、行間、文字間隔などの文書の体裁は、デフォルトのまま‣ ちょっと気のきいたデザインにしてみたい…‣ しかし、今の段階ではぐっと堪えてそのままで‣ 文書の体裁(デザイン)の指定には、CSSという別の言語を使用します
  52. 52. HTMLは構造の記述に徹する‣ なぜ、構造と体裁を分離するべきなのか?‣ 文書は常にPCのWebブラウザで閲覧されるわけではない‣ 携帯、スマートフォン、カーナビ、音声読み上げ...‣ どのメディアでも正しく意味構造が表現されるべき‣ 正しい構造を記述する必要性‣ サーチエンジンへの最適化 (SEO)‣ プログラムから意味構造を判別できる‣ サーチエンジンに検索され易いサイト‣ 他のサイトへの引用や転載

×