Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to 情報編集 (web) 第2回：HTML入門
Similar to 情報編集 (web) 第2回：HTML入門 (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
情報編集 (web) 第2回：HTML入門
- 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
- 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. HTMLとは?
- 11. HTMLとは? ‣ 今日は3つの仕組みのひとつ、HTMLを実際に書いていきます ‣ HTML (Hypertext Markup Language) とは何か? ‣ それぞれのパーツごとに意味を理解する
- 12. HTMLとは? ‣ Hyper Text ‣ 「テキストを越える」 ‣ 複数の文書を相互に関連付け、結び付ける仕組み
- 13. HTMLとは? ‣ Markup (マークアップ) ‣ 文書の中に目印 (マーク) を付けていくこと ‣ HTMLでは、文書の構造をマークアップする ‣ 今日の授業内容のメイン
- 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を作成してみましょう! ‣ この授業では、Adobe Dreamweaver を使用します
- 30. DreamWeaverでHTML作成 ‣ Dreamweaverを起動 ‣ まずは、環境設定 ‣ Dreamweaver > 環境設定 > 新規ドキュメント ‣ 初期設定ドキュメントタイプ (DTD) を「HTML5」に ‣ エンコード初期設定を「Unicode 5.1 UTF-8」に
- 32. DreamWeaverでHTML作成 ‣ 新規作成 > HTML を選択
- 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. 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>
- 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>
- 44. 見出しの種類 ‣ 見出しは、h1からh6まで段階がある ‣ 試してみる!! ... 前略 ... <body> <h1>これはh1</h1> <h2>これはh2</h2> <h3>これはh3</h3> <h4>これはh4</h4> <h5>これはh5</h5> <h6>これはh6</h6> </body> </html>
- 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> <meta http-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) ‣ プログラムから意味構造を判別できる ‣ サーチエンジンに検索され易いサイト ‣ 他のサイトへの引用や転載