body

Report
情報処理II
wwwによる情報発信とサービス提供I
第4回
2013年5月1日
大塚 智宏
Internet Explorerの脆弱性について

MSが4/27に 「深刻な脆弱性が見つかった」 と発表


修正プログラムはまだリリースされていないが,一時的な
回避策がいくつか公開されている
アメリカ政府が 「IE使うな」 と警告する事態に
日吉ITCのWindowsではまだ有効な対策がなされて
いないため,IEは使わないでください
 Windows XPは4/8でサポート終了のため,今後も
修正プログラムはリリースされません



自宅等でまだWindows XPを使っている場合は要注意
こういうインターネットやセキュリティ関連の時事問題
にもぜひ関心を持ってください
本日の予定

HTMLの基礎(2)






前回の復習
HTMLマークアップの基礎
基本的なHTML要素(2)
HTML文書のメタ情報の指定
HTMLの文法チェック
第3回課題(再掲)
初めて出席する人へ

講義資料


keio.jp 「授業支援」 で配布中
以下のページにも置いてある


必要なアカウント

ITCアカウント


パソコン室での実習
keio.jpのアカウント


http://user.keio.ac.jp/~aa202427/josho/
講義資料のダウンロード,課題の提出
私の連絡先 (質問等はこちらへ)

[email protected]
前回の復習
HTML文書の例

前回紹介した要素を使ったHTML文書の例

http://user.keio.ac.jp/~aa202427/1-04/ex.html
<html>
<head>
<title>この講義について</title>
</head>
<body>
<h1>講義資料の情報</h1>
<p>
講義資料は<a href="http://user.keio.ac.jp/~aa202427/josho/">この
ページ</a>にあります。以下はこの講義の参考書のリストです。
</p>
<ul>
<li>「よくわかるHTML5+CSS3の教科書」</li>
<li>「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」</li>
<li>「CJKV日中韓越情報処理」</li>
</ul>
</body>
</html>
要素とタグ

HTMLは,テキストにタグを埋め込んだ形の文書


タグには 「開始タグ」 「終了タグ」 がある
開始タグから終了タグまでの部分を 「要素」 と呼ぶ
属性(必要な場合)
内容
<a href="http://www.keio.ac.jp/">慶應義塾</a>
開始タグ
終了タグ
a要素
p要素
<p>これはテストです。
<a href="http://www.keio.ac.jp/">
慶應義塾</a>へのリンクを作ってみました。
</p>
a要素
HTML文書の骨組み

HTML文書の基本構造


文書全体は,ただ1つの html要素によって構成される
html要素は,head要素と body要素を1つずつ含む


head要素は文書の表紙(メタ情報)に相当
body要素は本文(中身)に相当
<html>
<head>
(タイトル等,表紙を構成する要素)
head要素
</head>
html要素
<body>
(見出し・段落等,本文を構成する要素) body要素
</body>
</html>
HTML文書の木構造

要素同士は入れ子になっており,全体として1つの
「木」 を形成する


html要素が head,body要素を含む (内包する)
入れ子関係が崩れることがあってはならない
<html>
<head>
<title>...</title>
</head>
<body>
<p>...</p>
...
</body>
</html>
html
子要素
head
親要素
title
body
p
body要素に含まれる要素の分類

ブロックレベル要素


文書の骨格を形成する
基本構成要素のグループ
前回紹介した要素


h1~h6,p,ul,ol,li
ブロックレベル
インライン要素


単語やフレーズに意味を
与えるための要素グループ
前回紹介した要素
インライン

a
<body>
<h1>
見出し
<p>
段落
aaaaaaaaaaaaaaaaaaaaa
aaaaaa<a>aaa</a>aaaa
aaaaaaaaaaaaaaaaaaaaa
aaa<em>aaaa</em>aaa
aaaaaaaaaaaaaaaaaaaaa
<p>
段落
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
a<strong>aaaa</strong>
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
要素の入れ子関係

入れ子関係の基本ルール

ブロックレベル要素は,インライン要素には入れられない



ブロックレベル要素同士の入れ子は要素によって可否が異なる
インライン要素やテキストは,どちらにも入れられる
body要素に直接入れられるのはブロックレベル要素のみ
OK!
ブロックレベル
インライン
NG!
インライン
ブロックレベル
前回紹介した要素のまとめ

html,head,body,title


h1,h2,h3,h4,h5,h6


順序なしリスト (箇条書き)
ol,li


段落
ul,li


見出し (数字は見出しのレベルで,h1が最上位)
p


文書の骨組みを形成 (いずれも必須)
順序付きリスト (箇条書き)
a

ハイパーリンク (href属性でリンク先のURIを指定)
HTMLマークアップの基礎
HTMLのマークアップを行う上で

HTMLの作成段階では,ブラウザ上でどのように表示・
レイアウトされるかは重要ではない



タグ付けを施した文書の各部分に 「どのような構造や意味
を持たせるか」 が重要
どのように表示・レイアウトされるかに関しては,すべてスタ
イルシート(CSS)で指定する
これを踏まえ,マークアップを行う上で注意すべき点,
間違いやすい点について解説する
html,head,body,title要素

どんなHTML文書でもこれらは必須


2つ以上あってもいけない
入れ子関係にも注意
<html>
<head>
<title>タイトル</title>
</head>
<body>
<p>
これはサンプルです。
</p>
</body>
</html>
html
head
title
body
終了タグ

終了タグ </要素名> を必ず入れるようにする

この講義で扱っているXHTML形式では,文法上必須



HTML形式の場合は必須でないものもあるが,むやみに省略する
のは好ましくない
ブラウザによっては,バグ等により正常に処理できない場合がある
空要素 (後で説明) の場合は例外
<body>
<h1>
ごあいさつ
<p>
こんにちは。
</body>
</h1>の省略
(間違い)
<ul>
<li>東京
<li>神奈川
<li>埼玉
</ul>
</li>の省略
(XHTML形式では
文法違反)
body直下のインライン要素

典型的な間違い


ここで言うインライン要素には,素のテキストも含む
以下のような場合,p要素の中に入れて 「段落」 にする

他のブロックレベル要素を使う手もあるが,現時点では p でよい
<body>
こんにちは。
</body>
<body>
<p>
こんにちは。
</p>
</body>
<body>
<a href="…">
慶應へのリンク
</a>
</body>
<body>
<p>
<a href="…">
慶應へのリンク
</a>
</p>
</body>
インライン要素内のブロックレベル要素

典型的な間違い


特に見出し要素 (h1~h6) は,ブロックレベル要素である
ことを忘れやすいので注意
em要素(インライン要素)については後で解説
<em>
<h1>
HTML5入門
</h1>
</em>
<h1>
<em>
HTML5入門
</em>
</h1>
見出しのマークアップにおける間違いやすい例
ブロックレベル要素同士の入れ子

要素ごとに可能かどうかが異なる



p や h1~h6 等の 「文章の基本構成ブロック」 には,他の
ブロックレベル要素は入れられない,というのが原則
ul,ol要素には li要素しか入れられない
li要素には,他のブロックレベル要素を入れられる

リストを入れ子にする場合など (次ページ参照)
<h1>
ごあいさつ
<p>
こんにちは。
</p>
</h1>
<h1>ごあいさつ</h1>
<p>
こんにちは。
</p>
<ul>
<h1>本日の予定</h1>
<li>HTMLの基礎(2)</li>
<li>URLとURI</li>
</ul>
<h1>本日の予定</h1>
<ul>
<li>HTMLの基礎(2)</li>
<li>URLとURI</li>
</ul>
リストの入れ子

li要素内に別のul要素やol要素を入れればよい

ul や ol に直接入れられるのは li要素のみ
<ul>
<li>MacBook
<ul>
<li>MacBook</li>
<li>MacBook Pro</li>
<li>MacBook Air</li>
</ul>
</li>
<li>iPod
<ul>
<li>iPod shuffle</li>
<li>iPod nano</li>
<li>iPod classic</li>
<li>iPod touch</li>
</ul>
</li>
</ul>
ブラウザでの表示例
h1~h6要素の使い方(1)

見出しのレベルに応じて使い分ける


最初は h1 を使い,見出しのレベルが下がったら h2,…
のように順番に使う
以下のような用法は好ましくない


h1 がないのにいきなり h2 を使う (h1を省略するのはNG)
h1 の次に h3 が来る (見出しレベルが飛ぶのはNG)
<h2>タイトル</h2>
<h4>第1章</h4>
<h1>第1章</h1>
<h2>第2章</h2>
<h3>第3章</h3>
<h4>第4章</h4>
<h2>で始まっている。
<h2>の次のレベルが
<h3>ではなく<h4>。
本来同じレベルで
あるべき章立てが,
異なったレベルの
見出しタグで記述
されてしまっている。
<h1>タイトル</h1>
<h2>第1章</h2>
<h3>1.1.</h3>
<h3>1.2.</h3>
<h2>第2章</h2>
<h3>2.1.</h3>
<h3>2.2.</h3>
<h2>第3章</h2>
<h3>3.1.</h3>
<h3>3.2.</h3>
h1~h6要素の使い方(2)

文字を大きくするための要素ではない

「見出し」 を作るための要素



長い文章などを入れるのは本来おかしい
以下の例のような場合,h2要素の代わりにp要素を使うべき
文字の大きさはCSSで調整すればよい
<h1>つぶやき</h1>
<h2>
こんにちは。今日はいい天気ですね。
明日もいい天気だといいですね。
</h2>
p要素の使い方

逆に,p要素を 「見出し」 に使うのも好ましくない

「段落」 を表す要素なので,基本的には 「文章」 を入れる
のが正しい使い方


ただし,HTML 4.01では他に適当な要素がないためにp要素を
使わざるを得ない場合がよくある
HTML5では,そのような場合に代替となるようなブロックレベル
要素がいくつか追加されている
<p>本日の予定</p>
<h1>本日の予定</h1>
その他の好ましくない事例

p要素の正しくない使い方

内容が空の段落 <p></p> で段落間の間隔を調整

CSSを使えばいくらでも調整可能
<p>こんにちは。今日はいい天気ですね。</p>
<p></p>
<p>え?雨降ってますけど... </p>

ul要素やol要素を字下げ目的で使う

「箇条書き」 以外の用途に使うのは正しくない
<,>,& 等の記号について

これらを表示したい場合,「文字実体参照」 を使う


詳しくは次回説明する
とりあえず,以下のように変換しておくこと




< ⇒ &lt;
> ⇒ &gt;
& ⇒ &amp;
" (ダブルクォーテーション) ⇒ &quot;
基本的なHTML要素(2)
dl要素 (Description List)

「記述リスト」 を構成するブロックレベル要素

1つのdl要素内に,「名前」 を表すdt要素と,「値」 を表す
dd要素を複数組入れられる



dl要素に入れられるのは,dt と dd のみ
dtに入れられる要素はインライン要素のみ
ddにはブロックレベル要素も入れられる
<dl>
<dt>HTML</dt>
<dd>Webページを記述するための言語</dd>
<dt>要素</dt>
<dd>HTML文書の構成単位</dd>
<dt>タグ</dt>
<dd>要素の開始と終了を示す印</dd>
</dl>
ブラウザでの表示例
dl要素の使い方

「用語とその説明」 「Q&A」 等,いろいろ使い道がある

サイトの更新履歴
<dl>
<dt>2014年4月24日</dt>
<dd>第3回の資料をアップロードしました。</dd>
<dt>2014年5月1日</dt>
<dd>第4回の資料をアップロードしました。</dd>
</dl>

対談などでの発言内容
<dl>
<dt>Aさん</dt>
<dd>今日はいい天気ですね。</dd>
<dt>Bさん</dt>
<dd>ええ,そうですね。</dd>
</dl>
pre要素 (Preformatted Text)

「フォーマット済みテキスト」 を表すブロックレベル要素

改行やスペースなどがそのまま表示に反映される




プログラムのソースコードを表示したい場合などに利用可能
ただし,HTMLタグは解釈されてしまうので,<,& などは文字実体
参照を使う必要がある
インデントだけのために使うのは正しい用法とは言えない
一部を除くインライン要素のみ入れられる

img(後述)等,入れられないインライン要素がある
<pre>
&lt;p&gt;
改行やスペースをそのまま表示
&lt;/p&gt;
</pre>
<p>
改行やスペースをそのまま表示
</p>
表示例
em要素 (Emphasis),strong要素

それぞれ 「強調」 「重要性」 を表すインライン要素

似ているが,em要素は文章の意味が変わるのに対し,
strong要素は文章の意味には影響しない


とは言え,細かいニュアンスは言語に依存する
標準的なブラウザでは em は斜体,strong は太字になる

CSSを使えばこれらを好きなようにカスタマイズできる
<p>
私が好きな<em>ブラウザ</em>はSafariとFirefoxだが,
いま大事なのはそんなことではない。有効な対策がされるまでは
<strong>Internet Explorerを使わないようにする</strong>
ことが何よりも大事だ。
</p>
br要素 (Break)

「改行」 を表すインライン要素

終了タグを持たない 「空要素」 (開始タグのみで1つの要素)


XHTML形式の場合,空要素は <要素名 /> のように表記する
本当に必要な場所以外では使わないこと


レイアウト目的で使うのはNG
複数の <br /> を連続させるのもNG
<p>
ちょっと長い文章を書こうと思ったのだ<br />
が、とても長い文章になってしまった。適<br />
当に改行を入れた方が、カッコイイ感じ<br />
になるんじゃないかと思うが、どうかな?
</p>
これだと、ブラウザの横幅が異なる環境では変なところで
改行されてしまう
br要素は乱用禁止

レイアウト目的で使ってはいけない

改行位置は,画面サイズやブラウザの横幅の影響を受ける


行間隔等の調整のために使うのは好ましくない




むやみにbr要素を挿入すると表示が崩れるので注意
<br /> で空く間隔はブラウザによって違う
行間はCSSで調整するべき (より細かい制御が可能)
もしその位置が 「段落の区切り」 であるならば,br要素を使わずに
p要素を2つにする (段落を分ける) のが適当
意味的に改行することが適当である場合に限り使う

br要素の使用例 (address要素は 「連絡先情報」 を表す)
<address>
〒223-8521<br />
神奈川県横浜市港北区日吉4-1-1<br />
慶應義塾大学日吉キャンパス
</address>
空白文字について

HTMLでは,連続する 「空白文字」(スペース,改行,タブ等) は
原則としてすべて 「1文字」 とみなされる



行頭などに空白をたくさん入れてもインデントにはならない
だからと言って全角の空白文字を使うのはNG (CSSを使うこと)
ただし,「開始タグの直後」 および 「終了タグの直前」 の改行は
無視される


以下はどちらもまったく同じ
必要に応じて,HTMLファイルを読みやすくするのに利用できる
これらの改行は無視される
<h1>慶應義塾ITC本部</h1>
<h1>
慶應義塾ITC本部
</h1>
HTML文書のメタ情報の指定
実際のHTML文書

これまで紹介したHTMLは,実は文法的に不完全

標準準拠のHTML文書とするには,3つの追加情報が必要



DOCTYPE宣言
html要素のlang属性
meta要素による文字コードの指定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
<h1>サンプル</h1>
<p>これはHTMLファイルのサンプルです。</p>
</body>
</html>
DOCTYPE宣言(文書型宣言)

ファイルがHTML文書であることを示す

HTMLファイルの一番最初(1行目)に書く


本来は文書の 「型」 を示すだけのものだが,実際にはブラウザの
「表示モード」 の切り替えにも使われている (そのうち解説する)
HTML 4.01以前は,HTML文書が 「どのバージョン・種類
の」 HTMLに準拠して書かれているかを示していた


バージョンおよび種類ごとに書式が決まっていた
HTML5でバージョンを表す情報は廃止された
<!DOCTYPE html>
<html lang="ja">
<head>
…
</head>
<body>
…
HTML 4.01 の文書型 (参考)

3つの種類(文書型)がある

HTML 4.01 Strict


HTML 4.01 Transitional


レイアウトに関する要素を排除 (使用禁止) し,文書の構造のみを
マークアップする (本来HTMLが目指していた形)
互換性のため,非推奨ながらレイアウト要素を残したもの
HTML 4.01 Frameset

レイアウト要素に加え,フレームを使用可能としたもの
DOCTYPE宣言の文法 (参考)

以下の4つの部分から構成される

html: 文書タイプがHTMLであることを示す


PUBLIC: DTDが公開されたものであることを示す


DTD: 文書型定義 (Document Type Definition)
フォーマル公開識別子: DTDを特定するための情報


大文字でもよいが,XHTMLの場合は小文字でなければならない
Formal Public Identifier (FPI)
システム識別子: DTDのURIを示す

HTMLでは省略可能だが,XHTMLでは必須
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE宣言の例 (参考)

HTML 4.01 Strict



HTML 4.01 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
システム識別子は省略している (あってもよい)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
XHTML 1.0 Strict


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
システム識別子は省略不可
html要素のlang属性

文書中で主に使われている 「言語」 のコードを指定



文法上は必須ではないが,必ず指定しておくべき
ダブルクォーテーション(「" "」)を省略しないこと
代表的な言語コード



ja (日本語), en (英語),en-US (アメリカ英語),zh (中国語),
ko (韓国語),fr (フランス語),de (ドイツ語), es (スペイン語) 等
大文字小文字は区別されないが,小文字を使うのが普通
「国コード」(JP,US など) とは違うので注意
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
...
meta要素による文字コード指定

meta要素は,文書のさまざまなメタ情報を指定


空要素で,head要素の中に複数入れられる
文書の文字コードを charset属性で指定する


文法上は必須ではないが,常に指定しておくべき
伝統的に,title要素よりも前に置くのが普通


以前はそうしないとtitle要素が文字化けするブラウザがあった
現在はほとんどないと思われるが…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
...
HTML 4.01での文字コード指定 (参考)

meta要素で,http-equiv属性とcontent属性を
セットで指定する

title要素よりも前に置く


書式がやや複雑なので,間違えないように (特にcontent属性)
文法上は必須ではないが,常に指定しておくべき
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
<title>タイトル</title>
</head>
<body>
...
文字コードの表記

日本語用の文字コードの表記法





その他の文字コード






Shift_JIS: シフトJIS (ハイフンではなく,アンダースコア「_」)
ISO-2022-JP: いわゆるJIS (こちらはハイフン「-」)
EUC-JP (これもハイフン「-」)
UTF-8: UnicodeのUTF-8符号化 (これもハイフン「-」)
US-ASCII: ASCII文字のみの場合
ISO-8859-1: ラテンアルファベット(ドイツ語,フランス語など)
EUC-KR: 韓国語EUC
EUC-CN: 簡体字中国語EUC
EUC-TW: 繁体字中国語EUC
大文字小文字は区別されないので小文字でも可
<meta charset="UTF-8" />
MIMEタイプ (参考)

Webサーバとブラウザ間でやり取りされるデータ形式の指定



HTTPにおいて,サーバ応答に含まれるContent-Typeヘッダの
パラメータとなる
実際には,ファイルの拡張子等によってWebサーバが決定するのが
普通なので,meta属性での指定はあまり意味がない
MIMEタイプの例







テキスト(.txt): text/plain
HTML文書(.html,.htm): text/html
XML文書(.xml): text/xml
CSS(.css): text/css
JPEG画像(.jpg,.jpeg): image/jpeg
PNG画像(.png): image/png
PDF文書(.pdf): application/pdf
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
仕様準拠のHTML文書

冒頭の例に3つのメタ情報を追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>この講義について</title>
</head>
<body>
<h1>講義資料の情報</h1>
<p>
講義資料は<a href="http://user.keio.ac.jp/~aa202427/josho/">このページ
</a>にあります。以下はこの講義の参考書のリストです。
</p>
<ul>
<li>「よくわかるHTML5+CSS3の教科書」</li>
<li>「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」</li>
<li>「CJKV日中韓越情報処理」</li>
</ul>
</body>
</html>
HTMLの文法チェック
HTMLバリデータの利用

The W3C Markup Validation Service
http://validator.w3.org/

Unicorn - W3C 統合検証サービス
http://validator.w3.org/unicorn/

Another HTML-lint 5
http://www.htmllint.net/

いずれも,HTMLの文法等をチェックしてくれる


HTML Validator (バリデータ) と呼ばれる
今後,作成したHTMLは必ずいずれかのバリデータで
チェックすること
第3回課題(再掲)
第3回課題

次回(第4回)までの講義内容を踏まえ,自分にまつわ
る内容を含むHTML文書を作成する

内容について



自己紹介,自分の趣味・興味対象についてなど何でも構わないが,
ある程度まとまった内容になっていることが望ましい
分量は自由 (目安として300文字程度以上)
HTMLについて

HTML5 (XHTML形式) の文法に則って記述する
 特に,要素の入れ子関係には注意
 チェックツールを使う方法については次回紹介

以下の要素を必ず使うこと
 h1,h2,p,a,ulまたはol

デザインやレイアウトは気にしなくてよい
第3回課題(続き)

提出物

以下をZipファイルにまとめたもの


HTMLファイルを直接提出するのは避けてください



作成したHTMLファイル
ファイル名が変わってしまうため
Zipファイルの作成方法が分からない人は質問してください
提出期限: 5月9日(金) 23:59

keio.jp 「授業支援」 上で提出
ファイル名に関する注意

HTMLファイル名には 「半角英数字」 のみを使う



Webサイトにアップロードする際は半角英数字のファイル名
にすることが必須
現状では,日本語を(多国語化ドメイン名を除き)直接URIに
入れることはできません
Webの世界には,日本語を入力できない端末や,理解でき
ない人もたくさんいます

similar documents