Transcript 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
A web page is a document that is suitable for the
World Wide Web and can be accessed through a
web browser. (*)
“ウェブページ”とは、Webブラウザからアクセスされる
ドキュメント。
(*) 英語版Wikipediaより
1
URL
URL
http://www.kantei.go.jp/jp/kan/meibo/index.html
スキーム
ホスト名
(プロトコル)
パス
(ファイル名)
① HTTP というプロトコルを使って
② www.kantei.go.jp というサーバから
③ /jp/kan/meibo/index.html というファイルを取得する
2
HTTP
Hypertext Transfer Protocol
WebブラウザとWebサーバ間でコンテンツの送受信
を行うプロトコル
/jp/kan/meibo/index.html
をください
Webブラウザ
Webサーバ
HTTP要求
HTTP応答
/jp/kan/meibo/index.html
を送り返す
3
www.kantei.go.jp
簡単に言えば・・・
1.
ファイルを作って
2.
Webサーバに置くと
3.
Webブラウザで見られるようになる
4
Webページの構成
HTMLという言語で文書構造を記述
CSSで見た目を記述
① HTMLを読み込
む
③ HTMLとCSSを
組み合わせて表示す
る
5
② HTML中で指定
されたCSSを読み込
む
HTML
読み込む
CSSの指定
CSS
文書構造とは・・・
これは中
見出し
森本の自己紹介
これは大
見出し
略歴
昭和52年生まれ。徳島県出身。・・・
うんぬんかんぬん・・・。現在、放送
これは中
大学で勤務しています。
これは1
見出し
つの段落
所属学会
これはリ
• 日本教育工学会
スト
• 電子情報通信学会
• 教育システム情報学会
これは連
絡先
千葉市美浜区若葉2-11
放送大学ICT活用・遠隔教育センター
6
HTMLで書くと・・・
<h1>森本の自己紹介</h1>
<h2>略歴</h2>
<p>昭和52年生まれ。徳島県出身。・・・うんぬんかん
ぬん・・・。現在、放送大学で勤務しています。</p>
<h2>所属学会</h2>
<ul>
<li>日本教育工学会</li>
<li>電子情報通信学会</li>
<li>教育システム情報学会</li>
</ul>
<address>千葉市美浜区若葉2-11 放送大学ICT活用・
遠隔教育センター</address>
7
基本的な用語
h1要素
<h1> 森本の自己紹介 </h1>
開始タグ
h1要素の内容
終了タグ
h1は大見出しを表す
文章にタグ付け(マークアップ)することにより、
HTML文書を記述
8
CSSの例
h1 {
background-color: lemonchiffon;
color: green;
}
大見出し(h1)の背景色(background-color)
をレモンシフォン色(lemonchiffon)にして、
文字色(color)を緑(green)にする
9
ファイルの準備
Moodleから“Webページ製作用ファイル”をダウン
ロードして、展開
右クリックして
“すべて展開”
含まれるファイル
10
index.html: トップページ (編集)
ouj.html: 放送大学の紹介
rakuda.jpg: 写真
style.css: スタイルシート (編集)
HTMLファイルの編集準備
index.htmlを Webブラウザ と メモ帳 両方で開
く
11
ダブルクリックすれば Webブラウザ で開く
右クリック → プログラムから開く → Notepad で メモ
帳 で開く
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ブラウザに表示する内容
12
タグ付けの方法
開始タグは <要素名>
終了タグは </要素名>
例: <h1>
例: </h1>
開始タグと終了タグで囲った部分が要素の内容とな
る
13
例: <h1>森本の自己紹介</h1>
注意点
タグは半角で入力する
半角スペースは、いくつ連続して入力しても1つ分
<h1> ・・・ ○
＜ｈ１＞ ・・・ ×
「略
歴」と「略 歴」は同じ
改行は無視される
14
index.htmlの中身とWebブラウザでの表示を見比べる
body要素内のテキストにタグ付け
<h1>森本の自己紹介</h1>
<h2>略歴</h2>
<p>昭和52年生まれ。徳島県出身。・・・うんぬんかん
ぬん・・・。現在、放送大学で勤務しています。</p>
<h2>所属学会</h2>
<ul>
<li>日本教育工学会</li>
<li>電子情報通信学会</li>
<li>教育システム情報学会</li>
</ul>
<address>千葉市美浜区若葉2-11 放送大学ICT活用・
遠隔教育センター</address>
15
index.htmlで使っているタグ
h1 ～ h6 : 見出し
p : 段落
1つの段落を <p> と </p> で囲う
ul, li : リスト
h1 が第1レベル, h2 が第2レベル, ...
全体を ul で囲い、各アイテムを li で囲う
ul の代わりに ol を使うと、番号付きリストになる
address : アドレス (連絡先)
16
<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>
17
画像の表示
imgタグを使用
src属性で、画像ファイル名を指定
終了タグなし
属性
<img src="画像ファイル名">
属性名
属性値
<p><img src="rakuda.jpg"></p>
18
リンク
aタグを使用
href属性でリンク先を指定
<a href="リンク先">アンカーテキスト</a>
<a href="ouj.html">放送大学</a>
<a href="http://www.chiba-u.jp/">千葉大学</a>
19
CSS
@charset "utf-8";
文字コード
の指定
body {
background-color: #ffffff;
color: #000000;
}
背景色を白、文字
色を黒にする指定
セレクタ {
属性1: 値1;
属性2: 値2;
}
20
style.cssに追加
h1 {
background-color: lemonchiffon;
color: green;
}
h2 {
border-left: 9px double crimson;
}
21
色の指定
background-color: 背景色;
color: 文字色;
これまで出てきた色
22
lemonchiffon, green, crimson : カラーネーム
#ffffff, #000000 : カラーコード
カラーコード
光の三原色である赤(Red)・緑(Green)・青(Blue)
の強さで指定
16進数で 00(一番弱い) ～ ff(一番強い)
最初に “#”
緑の強さ
#xxxxxx
赤の強さ
23
青の強さ
カラーコードとカラーネーム
24
#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, ...
色
25
カラーコード (推奨)
カラーネーム
border属性 (2)
border-top: 上だけ
border-right: 右だけ
border-bottom: 下だけ
border-left: 左だけ
h2 {
border-left: 9px double crimson;
}
h2の 左に 9ピクセルの 2重線を クリムゾン色で
26
ファイルのアップロード
通常は ftp や sftp などにより、Webサーバへアッ
プロード
ここの環境は特殊
(以降のスライドは削除)
27