Transcript body
情報処理II wwwによる情報発信とサービス提供I 第4回 2013年5月1日 大塚 智宏 Internet Explorerの脆弱性について MSが4/27に 「深刻な脆弱性が見つかった」 と発表 修正プログラムはまだリリースされていないが，一時的な 回避策がいくつか公開されている アメリカ政府が 「IE使うな」 と警告する事態に 日吉ITCのWindowsではまだ有効な対策がなされて いないため，IEは使わないでください Windows XPは4/8でサポート終了のため，今後も 修正プログラムはリリースされません 自宅等でまだWindows XPを使っている場合は要注意 こういうインターネットやセキュリティ関連の時事問題 にもぜひ関心を持ってください 本日の予定 HTMLの基礎（２） 前回の復習 HTMLマークアップの基礎 基本的なHTML要素（２） HTML文書のメタ情報の指定 HTMLの文法チェック 第３回課題（再掲） 初めて出席する人へ 講義資料 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の基礎（２）</li> <li>URLとURI</li> </ul> <h1>本日の予定</h1> <ul> <li>HTMLの基礎（２）</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要素の使い方（１） 見出しのレベルに応じて使い分ける 最初は 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要素の使い方（２） 文字を大きくするための要素ではない 「見出し」 を作るための要素 長い文章などを入れるのは本来おかしい 以下の例のような場合，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要素を字下げ目的で使う 「箇条書き」 以外の用途に使うのは正しくない <，>，& 等の記号について これらを表示したい場合，「文字実体参照」 を使う 詳しくは次回説明する とりあえず，以下のように変換しておくこと < ⇒ < > ⇒ > & ⇒ & " （ダブルクォーテーション） ⇒ " 基本的なHTML要素（２） 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> <p> 改行やスペースをそのまま表示 </p> </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は必ずいずれかのバリデータで チェックすること 第３回課題（再掲） 第３回課題 次回（第4回）までの講義内容を踏まえ，自分にまつわ る内容を含むHTML文書を作成する 内容について 自己紹介，自分の趣味・興味対象についてなど何でも構わないが， ある程度まとまった内容になっていることが望ましい 分量は自由 （目安として300文字程度以上） HTMLについて HTML5 （XHTML形式） の文法に則って記述する 特に，要素の入れ子関係には注意 チェックツールを使う方法については次回紹介 以下の要素を必ず使うこと h1，h2，p，a，ulまたはol デザインやレイアウトは気にしなくてよい 第３回課題（続き） 提出物 以下をZipファイルにまとめたもの HTMLファイルを直接提出するのは避けてください 作成したHTMLファイル ファイル名が変わってしまうため Zipファイルの作成方法が分からない人は質問してください 提出期限： 5月9日（金） 23:59 keio.jp 「授業支援」 上で提出 ファイル名に関する注意 HTMLファイル名には 「半角英数字」 のみを使う Webサイトにアップロードする際は半角英数字のファイル名 にすることが必須 現状では，日本語を（多国語化ドメイン名を除き）直接URIに 入れることはできません Webの世界には，日本語を入力できない端末や，理解でき ない人もたくさんいます