Webページの製作 1 ホームページ? 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より 2 URL URL http://www.kantei.go.jp/jp/kan/meibo/index.html スキーム ホスト名 (プロトコル) パス (ファイル名) ① HTTP というプロトコルを使って ② www.kantei.go.jp というサーバから ③ /jp/kan/meibo/index.html というファイルを取得する 3 HTTP Hypertext Transfer Protocol WebブラウザとWebサーバ間でコンテンツの送受信 を行うプロトコル /jp/kan/meibo/index.html をください Webブラウザ Webサーバ HTTP要求 HTTP応答 /jp/kan/meibo/index.html を送り返す 4 www.kantei.go.jp 簡単に言えば・・・ 1. ファイルを作って 2. Webサーバに置くと 3. Webブラウザで見られるようになる 5 Webページの構成 HTMLという言語で文書構造を記述 CSSで見た目を記述 ① HTMLを読み込 む ③ HTMLとCSSを 組み合わせて表示す る 6 ② HTML中で指定 されたCSSを読み込 む HTML 読み込む CSSの指定 CSS 文書構造とは・・・ これは中 見出し 森本の自己紹介 これは大 見出し 略歴 昭和52年生まれ。徳島県出身。・・・ うんぬんかんぬん・・・。現在、放送 これは中 大学で勤務しています。 これは1 見出し つの段落 所属学会 これはリ • 日本教育工学会 スト • 電子情報通信学会 • 教育システム情報学会 これは連 絡先 千葉市美浜区若葉2-11 放送大学ICT活用・遠隔教育センター 7 HTMLで書くと・・・ <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかん ぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・ 遠隔教育センター</address> 8 基本的な用語 h1要素 <h1> 森本の自己紹介 </h1> 開始タグ h1要素の内容 終了タグ h1は大見出しを表す 文章にタグ付け(マークアップ)することにより、 HTML文書を記述 9 CSSの例 h1 { background-color: lemonchiffon; color: green; } 大見出し(h1)の背景色(background-color) をレモンシフォン色(lemonchiffon)にして、 文字色(color)を緑(green)にする 10 ファイルの準備 Moodleから“Webページ製作用ファイル”をダウン ロードして、展開 含まれるファイル 11 index.html: トップページ (編集) ouj.html: 放送大学の紹介 rakuda.jpg: 写真 style.css: スタイルシート (編集) HTMLファイルの編集準備 index.htmlを Webブラウザ と メモ帳 両方で開 く ダブルクリックすれば Webブラウザ で開く メモ帳にドラッグ・アンド・ドロップして メモ帳 で開 く HTMLファイルを編集しながら Webブラウザでの表示を確認 12 HTMLの基本的な構造 head 要 素 body 要 素 全体がhtml要素 ファイル自体の情報 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> Webブラウザに表示する内容 13 タグ付けの方法 開始タグは <要素名> 終了タグは </要素名> 例: <h1> 例: </h1> 開始タグと終了タグで囲った部分が要素の内容 14 例: <h1>森本の自己紹介</h1> HTMLの決まり タグは半角で入力する 半角スペースは、いくつ連続して入力しても1つ分 <h1> ・・・ ○ <h1> ・・・ × 「略 歴」と「略 歴」は同じ 改行は無視される 15 index.htmlの中身とWebブラウザでの表示を見比べる body要素内のテキストにタグ付け 数 字 の い ち 英 文 字 の エ ル 16 <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかん ぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・ 遠隔教育センター</address> index.htmlで使っているタグ h1 ~ h6 : 見出し p : 段落 1つの段落を <p> と </p> で囲う ul, li : リスト h1 が第1レベル, h2 が第2レベル, ... 全体を ul で囲い、各アイテムを li で囲う ul の代わりに ol を使うと、番号付きリストになる address : アドレス (連絡先) 17 <ul> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> head要素 ファイル自体の情報を記述 最初から書いてあるのは そのページで使う文字コードの指定 ① 読み込むスタイルシートの指定 ② title要素で、タイトルを指定 ③ Webブラウザのタイトルバーなどに表示 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> ① <link rel="stylesheet" href="style.css"> ② <title>○○の自己紹介</title> ③ </head> 18 画像の表示 imgタグを使用 src属性で、画像ファイル名を指定 終了タグなし 属性 <img src="画像ファイル名"> 属性名 属性値 <p><img src="rakuda.jpg"></p> 19 リンク aタグを使用 href属性でリンク先を指定 <a href="リンク先">アンカーテキスト</a> <a href="ouj.html">放送大学</a> <a href="http://www.chiba-u.jp/">千葉大学</a> 20 CSS @charset "utf-8"; 文字コード の指定 body { background-color: #ffffff; color: #000000; } 背景色を白、文字 色を黒にする指定 セレクタ { 属性1: 値1; 属性2: 値2; } 21 style.cssに追加 h1 { background-color: lemonchiffon; color: green; } h2 { border-left: 9px double crimson; } 22 色の指定 background-color: 背景色; color: 文字色; これまで出てきた色 23 lemonchiffon, green, crimson : カラーネーム #ffffff, #000000 : カラーコード カラーコード 光の三原色である赤(Red)・緑(Green)・青(Blue) の強さで指定 16進数で 00(一番弱い) ~ ff(一番強い) 最初に “#” 緑の強さ #xxxxxx 赤の強さ 24 青の強さ カラーコードとカラーネーム 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 ? border属性 (1) 書式 ・・・ { border: 太さ スタイル 色; } 太さ スタイル ○○px (ピクセル) solid : 実線 double : 2重線 dashed : 破線 dotted : 点線 groove, ridge, inset, ... 色 26 カラーコード (推奨) カラーネーム border属性 (2) border-top: 上だけ border-right: 右だけ border-bottom: 下だけ border-left: 左だけ h2 { border-left: 9px double crimson; } h2の 左に 9ピクセルの 2重線を クリムゾン色で 27 ファイルのアップロード 通常は ftp や sftp などにより、Webサーバへアッ プロード ここの環境は特殊 (以降のスライドは省略) 28 もう少し詳しく 29 用語の復習 HTML a要素 a要素の内容 開始タグ 終了タグ <a href="リンク先">アンカーテキスト</a> 属性名 属性値 属性 CSS body { color: #000000; } セレクタ 30 属性 値 (color属性) (color属性の値) HTML HyperText Markup 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"> 31 (X)HTMLの主要なバージョン HTML 4.01 HTML5 策定中 XHTML 1.0 Strict, Transitional, Frameset Strict, Transitional, Frameset XHTML 1.1 32 CSS Cascading Style Sheets CSSのバージョン Level 1 (CSS 1) Level 2 Revision 1 (CSS 2.1) Level 3 (CSS 3) 33 策定中 Level 1の上位互換 (CSS 1で書けばCSS 2.1でもある) 策定中 文書構造と見た目の分離 HTMLで文書構造を、CSSで見た目を記述 アクセシビリティの向上 サイト内でのデザインの統一 出力媒体に応じてCSSを切り替えることができる 例: PC画面への表示用と印刷用でCSSを分ける 複数のCSSを用意し、ユーザが切り替えることもで きる (が、あまり使われていない) 34 HTMLソースコードの表示 Webページを右クリックして Internet Explorer: “ソースの表示” Firefox: “ページのソースを表示” ソース(ソースコード) 35 ソフトウェアなどの元となる人間が書いた命令の集まり Webページの場合は、Webページを表示する元となって いるHTML 表の作成 キャプション (表題) ヘッダ (見出し) ボディ フッタ 36 セル 表の書式 <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> 37 表の構造 全体がtable要素 table要素の中に thead・tfoot・tbody要素の中に caption要素: キャプション thead要素: ヘッダ tfoot要素: フッタ tbody要素: ボディ (ヘッダ・フッタ以外のセル) tr要素: 表の1行 tr要素の中に 38 th要素: ヘッダセル td要素: データセル tableタグの属性 値はいずれもピクセル単位 border 表の外周の罫線の太さ この例では、border="10" cellpadding セルの罫線と中のデータとの距離 この例では、cellpadding="10" cellspacing 隣り合うセル間の距離 この例では、cellspacing="10" できればCSSで 39 多様なメディアの利用 メディアの種類 文字 (テキスト) 画像 (イメージ) Webページでの利用 表示可能 対応フォーマットなら表示 可能 音声 (オーディオ) OS・Webブラウザ・プラグ イン・ファイルフォーマッ トの組み合わせによっては、 Webブラウザ上で再生可能 動画 (ビデオ) 40 〃 ファイルフォーマット ファイルの保存形式 Windowsは、拡張子で区別 41 拡張子 .txt ファイルの種類 テキスト .html .css .docx HTML文書 スタイルシート Word文書 .xlsx .pptx .zip Excelブック PowerPointプレゼンテーション ZIP書庫 ファイルの圧縮 圧縮 と 無圧縮 1024×768pixel・24bit-colorの無圧縮画像 2MB以上 640×480pixel・24bit-color・30fpsの無圧縮動画 1分で1.5GB以上 (映像のみ) 可逆圧縮 と 非可逆圧縮 圧縮率 42 質の劣化 計算時間 画像ファイル ファイル フォーマット 拡張子 説明 BMP .bmp Windows標準 通常、無圧縮 Webページに利用してはいけない JPEG .jpg .jpeg 通常、非可逆圧縮 写真に向く Webページで利用可 PNG .png 可逆圧縮 色数を選択できる (8bits, 24bits, ....) コンピュータで描いたイラストなどに向く Webページで利用可 43 Moodleへ ファイルフォーマットによるファイルサイズの違い 非可逆圧縮による劣化 圧縮率による画質の違い Exif 44 ファイルフォーマットとファイルサイズ 45 BMP: 2.25MB JPEG: 207KB PNG(8ビット): 276KB PNG(24ビット): 1.11MB 色数による違い PNG(24ビット) PNG(8ビット) 224≒1677万色 46 28=256色 非可逆圧縮による劣化 47 写真でも・・・ BMP JPEG 物の境界などを拡大してみる 48 圧縮率による画質の違い 49 Exif Exchangeable image file format デジタルカメラで撮影した画像に付くメタデータ 撮影日時やカメラの機種を記録 スマートフォンなどでは位置情報も 画像をWebページに使うときは削除する desk.jpgを撮影した場所を調べてみる 北緯 東経 Googleマップで [ NXX XX XX EXX XX XX ] 度 分 秒 ( XX を数字に置き換える) 50 ペイントを使った簡単な画像編集 (1) bird.jpgをペイントで開く 表示 ズーム や、右下のズームスライダーで全体 が写るように縮小 51 ペイントを使った簡単な画像編集 (2) トリミング: 画像の一部を切り出す ② “トリミング” をクリック ① 範囲選択をして 52 ③ 選択範囲が 切り出される ペイントを使った簡単な画像編集 (3) サイズ変更 53 “サイズ変更” コマンド Webページで使う画像 デジタルカメラで撮影した画像は、Webページで使 うには大きすぎる 写真を見せたい場合でも、800×600ピクセル、 300KB程度までが理想 ① 元画像 54 ② トリミング ③ サイズ変更 画像ファイルのフォーマット変換 専用のソフトウェアを使用 ペイント の “名前をつけて保存” 55 音声ファイル 説明 WAV 拡張子 の[例] .wav MP3 .mp3 非可逆圧縮 音楽などに向く ファイル フォーマット .wma Windows Media Audio .aac AAC 56 Windows標準 通常、無圧縮 通常、非可逆圧縮 MP3よりも圧縮効率に優れ、高音質 非可逆圧縮 MP3よりも圧縮効率に優れ、高音質 動画ファイル 説明 AVI 拡張子 の[例] .avi MPEG-4 .mp4 低速回線用の低画質・高圧縮率動画から、 高画質動画まで幅広くカバー Windows Media Video .wmv 高画質 Flash Video .flv .f4v Webページ上での再生に適する ファイル フォーマット 57 Windows標準 より正確には 音声ファイル・動画ファイルは複雑怪奇 コンテナとコーデック 音声 圧縮 圧縮 オ ー デ ィ オ コ ー デ ッ ク ビ デ オ コ ー デ ッ ク コンテナ 動画ファイル 58 動画 動画ファイルの例 よく見る Windows Media Video ビデオコーデック: Windows Media Video 9 オーディオコーデック: Windows Media Audio 9.2 コンテナ: ASF (Advanced Systems Format) 最近の Flash Video 59 ビデオコーデック: H.264 オーディオコーデック: AAC コンテナ: F4V Webページにおける音声・動画の利用 Webブラウザ単体では再生できない (少し前までは) “プラグイン”を入れることにより、対応フォーマッ トのファイルを再生できる Flash Player QuickTime 再生可否は、環境に依存する 60 現在、Flash Videoがもっとも多くの環境で再生できる WebページとFlash Video Webページ (HTML) Flash Video (FLV・F4V) 61 Flashコンポー ネント (SWF) 動画配信の体験 (以降のスライドは省略) 62
© Copyright 2024 ExpyDoc