Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.513 Aufrufe

Veröffentlicht am

  • 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,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

芸術情報演習デザイン(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) ‣ プログラムから意味構造を判別できる ‣ サーチエンジンに検索され易いサイト‣ 他のサイトへの引用や転載

×