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