1 / 62

Web ページの 製作

Web ページの 製作. ホームページ ?. Home page The home page is the URL that automatically loads when a web browser starts or when the browser’s “home” button is pressed . (*) 「ホームページ」と は、 Web ブラウザを起動したとき、また は “ ホーム ” ボタン を押したときに、自動的に表示されるページ 。 Web page

roth-mullen
Download Presentation

Web ページの 製作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webページの製作

  2. ホームページ? • Home page • The home page is the URL that automatically loads when a web browser starts or when the browser’s “home” button is pressed.(*) • 「ホームページ」とは、Webブラウザを起動したとき、または“ホーム”ボタンを押したときに、自動的に表示されるページ。 • Web page • A web page is a document that is suitable for the World Wide Web and can be accessed through a web browser.(*) • 「ウェブページ」とは、Webブラウザからアクセスされるドキュメント。 (*)英語版Wikipediaより

  3. URL URL http://www.kantei.go.jp/jp/kan/meibo/index.html スキーム (プロトコル) ホスト名 パス (ファイル名) ① HTTPというプロトコルを使って ② www.kantei.go.jpというサーバから ③/jp/kan/meibo/index.htmlというファイルを取得する

  4. HTTP • Hypertext Transfer Protocol • WebブラウザとWebサーバ間でコンテンツの送受信を行うプロトコル /jp/kan/meibo/index.html をください Webブラウザ Webサーバ HTTP要求 HTTP応答 /jp/kan/meibo/index.html を送り返す www.kantei.go.jp

  5. 簡単に言えば・・・ • ファイルを作って • Webサーバに置くと • Webブラウザで見られるようになる

  6. Webページの構成 • HTMLという言語で文書構造を記述 • CSSで見た目を記述 HTML ① HTMLを読み込む 読み込むCSSの指定 CSS ③ HTMLとCSSを組み合わせて表示する ② HTML中で指定されたCSSを読み込む

  7. 文書構造とは・・・ これは中見出し • 森本の自己紹介 • 略歴 • 昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。 • 所属学会 • 日本教育工学会 • 電子情報通信学会 • 教育システム情報学会 • 千葉市美浜区若葉2-11 • 放送大学ICT活用・遠隔教育センター これは大見出し これは中見出し これは1つの段落 これはリスト これは連絡先

  8. HTMLで書くと・・・ <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・遠隔教育センター</address>

  9. 基本的な用語 • h1は大見出しを表す • 文章にタグ付け(マークアップ)することにより、HTML文書を記述 h1要素 • <h1>森本の自己紹介</h1> 開始タグ h1要素の内容 終了タグ

  10. CSSの例 h1 { background-color: lemonchiffon; color: green; } 大見出し(h1)の背景色(background-color)をレモンシフォン色(lemonchiffon)にして、文字色(color)を緑(green)にする

  11. ファイルの準備 • Moodleから“Webページ製作用ファイル”をダウンロードして、展開 • 含まれるファイル • index.html: トップページ (編集) • ouj.html: 放送大学の紹介 • rakuda.jpg: 写真 • style.css: スタイルシート (編集)

  12. HTMLファイルの編集準備 • index.htmlを Webブラウザ と メモ帳 両方で開く • ダブルクリックすれば Webブラウザ で開く • メモ帳にドラッグ・アンド・ドロップして メモ帳 で開く HTMLファイルを編集しながら Webブラウザでの表示を確認

  13. HTMLの基本的な構造 ファイル自体の情報 全体がhtml要素 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> head要素 body要素 Webブラウザに表示する内容

  14. タグ付けの方法 • 開始タグは <要素名> • 例: <h1> • 終了タグは </要素名> • 例: </h1> • 開始タグと終了タグで囲った部分が要素の内容 • 例: <h1>森本の自己紹介</h1>

  15. HTMLの決まり • タグは半角で入力する • <h1>・・・ ○ • ＜ｈ１＞ ・・・ × • 半角スペースは、いくつ連続して入力しても1つ分 • 「略 歴」と「略 歴」は同じ • 改行は無視される • index.htmlの中身とWebブラウザでの表示を見比べる

  16. body要素内のテキストにタグ付け <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・遠隔教育センター</address> 数字のいち 英文字のエル

  17. index.htmlで使っているタグ • h1～ h6 : 見出し • h1が第1レベル, h2が第2レベル, ... • p : 段落 • 1つの段落を <p> と </p> で囲う • ul, li : リスト • 全体を ul で囲い、各アイテムを liで囲う • ulの代わりに ol を使うと、番号付きリストになる • address : アドレス (連絡先) <ul> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul>

  18. head要素 • ファイル自体の情報を記述 • 最初から書いてあるのは • そのページで使う文字コードの指定 • 読み込むスタイルシートの指定 • title要素で、タイトルを指定 • Webブラウザのタイトルバーなどに表示 ① ② ③ • <head> • <meta http-equiv="content-type" • content="text/html; charset=utf-8">① • <link rel="stylesheet" href="style.css">② • <title>○○の自己紹介</title>③ • </head>

  19. 画像の表示 • imgタグを使用 • src属性で、画像ファイル名を指定 • 終了タグなし 属性 <imgsrc="画像ファイル名"> 属性名 属性値 <p><imgsrc="rakuda.jpg"></p>

  20. リンク • aタグを使用 • href属性でリンク先を指定 <a href="リンク先">アンカーテキスト</a> <a href="ouj.html">放送大学</a> <a href="http://www.chiba-u.jp/">千葉大学</a>

  21. CSS @charset "utf-8"; body { background-color: #ffffff; color: #000000; } 文字コード の指定 背景色を白、文字色を黒にする指定 セレクタ { 属性1: 値1; 属性2: 値2; }

  22. style.cssに追加 h1 { background-color: lemonchiffon; color: green; } h2 { border-left: 9px double crimson; }

  23. 色の指定 • background-color: 背景色; • color: 文字色; • これまで出てきた色 • lemonchiffon, green, crimson : カラーネーム • #ffffff, #000000 : カラーコード

  24. カラーコード • 光の三原色である赤(Red)・緑(Green)・青(Blue) の強さで指定 • 16進数で 00(一番弱い) ～ ff(一番強い) 最初に “#” 緑の強さ #xxxxxx 赤の強さ 青の強さ

  25. カラーコードとカラーネーム #000000 black #ffffff white #808080 gray #ff0000 red #00ff00 lime #0000ff blue #800000 maroon #008000 green #000080 navy #ffff00 yellow #ff00ff fuchsia #00ffff aqua #fffacd lemonchiffon #dc143c crimson #990000 ?

  26. border属性 (1) • 書式 ・・・ { border: 太さスタイル色; } • 太さ • ○○px(ピクセル) • スタイル • solid : 実線 • double : 2重線 • dashed : 破線 • dotted : 点線 • groove, ridge, inset,... • 色 • カラーコード (推奨) • カラーネーム

  27. border属性 (2) • border-top: 上だけ • border-right: 右だけ • border-bottom: 下だけ • border-left: 左だけ h2 { border-left: 9px double crimson; } h2の 左に 9ピクセルの 2重線を クリムゾン色で

  28. ファイルのアップロード • 通常は ftp や sftpなどにより、Webサーバへアップロード • ここの環境は特殊 (以下のスライドは省略)

  29. もう少し詳しく

  30. 用語の復習 HTML a要素 開始タグ a要素の内容 終了タグ <a href="リンク先">アンカーテキスト</a> 属性名 属性値 属性 CSS body { color: #000000; } セレクタ 属性 (color属性) 値 (color属性の値)

  31. HTML • HyperTextMarkup Language • HTMLのバージョン • タグの種類・属性・意味・... はバージョンによって異なる • Webブラウザによって、対応するバージョンは異なる • XHTML(Extensible HyperText Markup Language): HTMLの親戚 • HTML文書中のDOCTYPE宣言で、バージョンを宣言する DOCTYPE宣言の例(HTML 4.01 Strict) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  32. (X)HTMLの主要なバージョン • HTML 4.01 • Strict, Transitional, Frameset • HTML5 • 策定中 • XHTML 1.0 • Strict, Transitional, Frameset • XHTML 1.1

  33. CSS • Cascading Style Sheets • CSSのバージョン • Level 1 (CSS 1) • Level 2 Revision 1 (CSS 2.1) • 策定中 • Level 1の上位互換 (CSS 1で書けばCSS 2.1でもある) • Level 3 (CSS 3) • 策定中

  34. 文書構造と見た目の分離 • HTMLで文書構造を、CSSで見た目を記述 • アクセシビリティの向上 • サイト内でのデザインの統一 • 出力媒体に応じてCSSを切り替えることができる • 例: PC画面への表示用と印刷用でCSSを分ける • 複数のCSSを用意し、ユーザが切り替えることもできる (が、あまり使われていない)

  35. HTMLソースコードの表示 • Webページを右クリックして • Internet Explorer: “ソースの表示” • Firefox: “ページのソースを表示” • ソース(ソースコード) • ソフトウェアなどの元となる人間が書いた命令の集まり • Webページの場合は、Webページを表示する元となっているHTML

  36. 表の作成 キャプション (表題) ヘッダ (見出し) ボディ セル フッタ

  37. 表の書式 <table> <caption>学部ごとの在籍者数</caption> <thead> <tr><th>学部</th><th>在籍者数</th></tr> </thead> <tfoot> <tr><td>全体</td><td>4,493</td></tr> </tfoot> <tbody> <tr><td>文学部</td><td>844</td></tr> <tr><td>教育学部</td><td>1,962</td></tr> <tr><td>法経学部</td><td>1,687</td></tr> </tbody> </table>

  38. 表の構造 • 全体がtable要素 • table要素の中に • caption要素: キャプション • thead要素: ヘッダ • tfoot要素: フッタ • tbody要素: ボディ (ヘッダ・フッタ以外のセル) • thead・tfoot・tbody要素の中に • tr要素: 表の1行 • tr要素の中に • th要素: ヘッダセル • td要素: データセル

  39. tableタグの属性 値はいずれもピクセル単位 border 表の外周の罫線の太さ この例では、border="10" cellpadding セルの罫線と中のデータとの距離 この例では、cellpadding="10" cellspacing 隣り合うセル間の距離 この例では、cellspacing="10" できればCSSで

  40. 多様なメディアの利用

  41. ファイルフォーマット • ファイルの保存形式 • Windowsは、拡張子で区別

  42. ファイルの圧縮 • 圧縮 と 無圧縮 • 1024768pixel・24bit-colorの無圧縮画像 2MB以上 • 640480pixel・24bit-color・30fpsの無圧縮動画 1分で1.5GB以上 (映像のみ) • 可逆圧縮 と 非可逆圧縮 • 圧縮率 • 質の劣化 • 計算時間

  43. 画像ファイル

  44.  Moodleへ • ファイルフォーマットによるファイルサイズの違い • 非可逆圧縮による劣化 • 圧縮率による画質の違い • Exif

  45. ファイルフォーマットとファイルサイズ BMP: 2.25MB JPEG: 207KB PNG(8ビット): 276KB PNG(24ビット): 1.11MB

  46. 色数による違い PNG(24ビット) PNG(8ビット) 224≒1677万色 28＝256色

  47. 非可逆圧縮による劣化

  48. 写真でも・・・ BMP JPEG 物の境界などを拡大してみる

  49. 圧縮率による画質の違い

  50. Exif • Exchangeable image file format • デジタルカメラで撮影した画像に付くメタデータ • 撮影日時やカメラの機種を記録 • スマートフォンなどでは位置情報も • 画像をWebページに使うときは削除する • desk.jpgを撮影した場所を調べてみる 北緯 東経 Googleマップで [ NXXXXXX EXXXXXX ] 度 分 秒 (XXを数字に置き換える)

More Related