PPTX - 放送大学 森本研究室
Download
Report
Transcript PPTX - 放送大学 森本研究室
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> ・・・ ○
＜ｈ１＞ ・・・ ×
「略
歴」と「略 歴」は同じ
改行は無視される
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