1 / 51

情報処理 II www による情報発信とサービス提供 I

情報処理 II www による情報発信とサービス提供 I. 第 4 回 2013 年 5 月 1 日 大塚 智宏. Internet Explorer の脆弱性について. MS が 4/27 に 「深刻な脆弱性が見つかった」 と発表 修正プログラムはまだリリースされていないが，一時的な 回避策がいくつか公開 されて いる アメリカ政府が 「 IE 使うな」 と警告する事態に 日吉 ITC の Windows ではまだ有効な対策がなされていないため， IE は使わないでください

lani-lawson
Télécharger la présentation

情報処理 II www による情報発信とサービス提供 I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 情報処理IIwwwによる情報発信とサービス提供I 第4回 2013年5月1日 大塚 智宏

  2. Internet Explorerの脆弱性について • MSが4/27に 「深刻な脆弱性が見つかった」 と発表 • 修正プログラムはまだリリースされていないが，一時的な回避策がいくつか公開されている • アメリカ政府が 「IE使うな」 と警告する事態に • 日吉ITCのWindowsではまだ有効な対策がなされていないため，IEは使わないでください • Windows XPは4/8でサポート終了のため，今後も修正プログラムはリリースされません • 自宅等でまだWindows XPを使っている場合は要注意 • こういうインターネットやセキュリティ関連の時事問題にもぜひ関心を持ってください

  3. 本日の予定 • HTMLの基礎（２） • 前回の復習 • HTMLマークアップの基礎 • 基本的なHTML要素（２） • HTML文書のメタ情報の指定 • HTMLの文法チェック • 第３回課題（再掲）

  4. 初めて出席する人へ • 講義資料 • keio.jp 「授業支援」 で配布中 • 以下のページにも置いてある • http://user.keio.ac.jp/~aa202427/josho/ • 必要なアカウント • ITCアカウント • パソコン室での実習 • keio.jpのアカウント • 講義資料のダウンロード，課題の提出 • 私の連絡先 （質問等はこちらへ） • otsuka@itc.keio.ac.jp

  5. 前回の復習

  6. 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>

  7. 要素とタグ • HTMLは，テキストにタグを埋め込んだ形の文書 • タグには 「開始タグ」 「終了タグ」 がある • 開始タグから終了タグまでの部分を 「要素」 と呼ぶ 属性（必要な場合） 内容 <a href="http://www.keio.ac.jp/">慶應義塾</a> 開始タグ 終了タグ a要素 <p>これはテストです。 <a href="http://www.keio.ac.jp/"> 慶應義塾</a>へのリンクを作ってみました。 </p> a要素 p要素

  8. HTML文書の骨組み • HTML文書の基本構造 • 文書全体は，ただ1つの html要素によって構成される • html要素は，head要素と body要素を1つずつ含む • head要素は文書の表紙（メタ情報）に相当 • body要素は本文（中身）に相当 <html> <head> （タイトル等，表紙を構成する要素） </head> <body> （見出し・段落等，本文を構成する要素） </body> </html> head要素 html要素 body要素

  9. HTML文書の木構造 • 要素同士は入れ子になっており，全体として1つの「木」 を形成する • html要素が head，body要素を含む （内包する） • 入れ子関係が崩れることがあってはならない html <html> <head> <title>...</title> </head> <body> <p>...</p> ... </body> </html> 子要素 head 親要素 title body p

  10. 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

  11. 要素の入れ子関係 • 入れ子関係の基本ルール • ブロックレベル要素は，インライン要素には入れられない • ブロックレベル要素同士の入れ子は要素によって可否が異なる • インライン要素やテキストは，どちらにも入れられる • body要素に直接入れられるのはブロックレベル要素のみ インライン ブロックレベル OK! NG! インライン ブロックレベル

  12. 前回紹介した要素のまとめ • html，head，body，title • 文書の骨組みを形成 （いずれも必須） • h1，h2，h3，h4，h5，h6 • 見出し （数字は見出しのレベルで，h1が最上位） • p • 段落 • ul，li • 順序なしリスト （箇条書き） • ol，li • 順序付きリスト （箇条書き） • a • ハイパーリンク （href属性でリンク先のURIを指定）

  13. HTMLマークアップの基礎

  14. HTMLのマークアップを行う上で • HTMLの作成段階では，ブラウザ上でどのように表示・レイアウトされるかは重要ではない • タグ付けを施した文書の各部分に 「どのような構造や意味を持たせるか」 が重要 • どのように表示・レイアウトされるかに関しては，すべてスタイルシート（CSS）で指定する • これを踏まえ，マークアップを行う上で注意すべき点，間違いやすい点について解説する

  15. html，head，body，title要素 • どんなHTML文書でもこれらは必須 • 2つ以上あってもいけない • 入れ子関係にも注意 <html> <head> <title>タイトル</title> </head> <body> <p> これはサンプルです。 </p> </body> </html> html head title body

  16. 終了タグ • 終了タグ </要素名> を必ず入れるようにする • この講義で扱っているXHTML形式では，文法上必須 • HTML形式の場合は必須でないものもあるが，むやみに省略するのは好ましくない • ブラウザによっては，バグ等により正常に処理できない場合がある • 空要素 （後で説明） の場合は例外 <body> <h1> ごあいさつ <p> こんにちは。 </body> <ul> <li>東京 <li>神奈川 <li>埼玉 </ul> </h1>の省略 （間違い） </li>の省略（XHTML形式では文法違反）

  17. body直下のインライン要素 • 典型的な間違い • ここで言うインライン要素には，素のテキストも含む • 以下のような場合，p要素の中に入れて 「段落」 にする • 他のブロックレベル要素を使う手もあるが，現時点では p でよい <body> こんにちは。 </body> <body> <a href="…"> 慶應へのリンク </a> </body> <body> <p> <a href="…"> 慶應へのリンク </a> </p> </body> <body> <p> こんにちは。 </p> </body>

  18. インライン要素内のブロックレベル要素 • 典型的な間違い • 特に見出し要素 （h1～h6）は，ブロックレベル要素であることを忘れやすいので注意 • em要素（インライン要素）については後で解説 <em> <h1> HTML5入門 </h1> </em> <h1> <em> HTML5入門 </em> </h1> 見出しのマークアップにおける間違いやすい例

  19. ブロックレベル要素同士の入れ子 • 要素ごとに可能かどうかが異なる • p や h1～h6 等の 「文章の基本構成ブロック」 には，他のブロックレベル要素は入れられない，というのが原則 • ul，ol要素には li要素しか入れられない • li要素には，他のブロックレベル要素を入れられる • リストを入れ子にする場合など （次ページ参照） <h1> ごあいさつ <p> こんにちは。 </p> </h1> <ul> <h1>本日の予定</h1> <li>HTMLの基礎（２）</li> <li>URLとURI</li> </ul> <h1>本日の予定</h1> <ul> <li>HTMLの基礎（２）</li> <li>URLとURI</li> </ul> <h1>ごあいさつ</h1> <p> こんにちは。 </p>

  20. リストの入れ子 • 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> ブラウザでの表示例

  21. h1～h6要素の使い方（１） • 見出しのレベルに応じて使い分ける • 最初は h1 を使い，見出しのレベルが下がったら h2，…のように順番に使う • 以下のような用法は好ましくない • h1 がないのにいきなり h2 を使う （h1を省略するのはNG） • h1 の次に h3 が来る （見出しレベルが飛ぶのはNG） <h2>で始まっている。 <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> <h2>タイトル</h2> <h4>第1章</h4> <h2>の次のレベルが <h3>ではなく<h4>。 本来同じレベルで あるべき章立てが， 異なったレベルの 見出しタグで記述 されてしまっている。 <h1>第1章</h1> <h2>第2章</h2> <h3>第3章</h3> <h4>第4章</h4>

  22. h1～h6要素の使い方（２） • 文字を大きくするための要素ではない • 「見出し」 を作るための要素 • 長い文章などを入れるのは本来おかしい • 以下の例のような場合，h2要素の代わりにp要素を使うべき • 文字の大きさはCSSで調整すればよい <h1>つぶやき</h1> <h2> こんにちは。今日はいい天気ですね。明日もいい天気だといいですね。 </h2>

  23. p要素の使い方 • 逆に，p要素を 「見出し」 に使うのも好ましくない • 「段落」 を表す要素なので，基本的には 「文章」 を入れるのが正しい使い方 • ただし，HTML 4.01では他に適当な要素がないためにp要素を使わざるを得ない場合がよくある • HTML5では，そのような場合に代替となるようなブロックレベル要素がいくつか追加されている <p>本日の予定</p> <h1>本日の予定</h1>

  24. その他の好ましくない事例 • p要素の正しくない使い方 • 内容が空の段落 <p></p> で段落間の間隔を調整 • CSSを使えばいくらでも調整可能 • ul要素やol要素を字下げ目的で使う • 「箇条書き」 以外の用途に使うのは正しくない <p>こんにちは。今日はいい天気ですね。</p> <p></p><p>え？雨降ってますけど... </p>

  25. <，>，& 等の記号について • これらを表示したい場合，「文字実体参照」 を使う • 詳しくは次回説明する • とりあえず，以下のように変換しておくこと • < ⇒ &lt; • > ⇒ &gt; • & ⇒ &amp; • " （ダブルクォーテーション） ⇒ &quot;

  26. 基本的なHTML要素（２）

  27. 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> ブラウザでの表示例

  28. 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>

  29. pre要素 （Preformatted Text） • 「フォーマット済みテキスト」 を表すブロックレベル要素 • 改行やスペースなどがそのまま表示に反映される • プログラムのソースコードを表示したい場合などに利用可能 • ただし，HTMLタグは解釈されてしまうので，<，& などは文字実体参照を使う必要がある • インデントだけのために使うのは正しい用法とは言えない • 一部を除くインライン要素のみ入れられる • img（後述）等，入れられないインライン要素がある <pre> &lt;p&gt; 改行やスペースをそのまま表示 &lt;/p&gt; </pre> <p> 改行やスペースをそのまま表示 </p> 表示例

  30. em要素 （Emphasis），strong要素 • それぞれ 「強調」 「重要性」 を表すインライン要素 • 似ているが，em要素は文章の意味が変わるのに対し，strong要素は文章の意味には影響しない • とは言え，細かいニュアンスは言語に依存する • 標準的なブラウザでは em は斜体，strong は太字になる • CSSを使えばこれらを好きなようにカスタマイズできる <p> 私が好きな<em>ブラウザ</em>はSafariとFirefoxだが，いま大事なのはそんなことではない。有効な対策がされるまでは<strong>Internet Explorerを使わないようにする</strong>ことが何よりも大事だ。 </p>

  31. br要素 （Break） • 「改行」 を表すインライン要素 • 終了タグを持たない 「空要素」 （開始タグのみで1つの要素） • XHTML形式の場合，空要素は <要素名 /> のように表記する • 本当に必要な場所以外では使わないこと • レイアウト目的で使うのはNG • 複数の <br /> を連続させるのもNG <p> ちょっと長い文章を書こうと思ったのだ<br /> が、とても長い文章になってしまった。適<br /> 当に改行を入れた方が、カッコイイ感じ<br /> になるんじゃないかと思うが、どうかな？ </p> これだと、ブラウザの横幅が異なる環境では変なところで 改行されてしまう

  32. br要素は乱用禁止 • レイアウト目的で使ってはいけない • 改行位置は，画面サイズやブラウザの横幅の影響を受ける • むやみにbr要素を挿入すると表示が崩れるので注意 • 行間隔等の調整のために使うのは好ましくない • <br /> で空く間隔はブラウザによって違う • 行間はCSSで調整するべき（より細かい制御が可能） • もしその位置が 「段落の区切り」 であるならば，br要素を使わずにp要素を2つにする （段落を分ける） のが適当 • 意味的に改行することが適当である場合に限り使う • br要素の使用例 （address要素は 「連絡先情報」 を表す） <address> 〒223-8521<br /> 神奈川県横浜市港北区日吉4-1-1<br /> 慶應義塾大学日吉キャンパス </address>

  33. 空白文字について • HTMLでは，連続する 「空白文字」（スペース，改行，タブ等） は原則としてすべて 「1文字」 とみなされる • 行頭などに空白をたくさん入れてもインデントにはならない • だからと言って全角の空白文字を使うのはNG （CSSを使うこと） • ただし，「開始タグの直後」 および 「終了タグの直前」 の改行は無視される • 以下はどちらもまったく同じ • 必要に応じて，HTMLファイルを読みやすくするのに利用できる これらの改行は無視される <h1> 慶應義塾ITC本部 </h1> <h1>慶應義塾ITC本部</h1>

  34. HTML文書のメタ情報の指定

  35. 実際の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>

  36. DOCTYPE宣言（文書型宣言） • ファイルがHTML文書であることを示す • HTMLファイルの一番最初（1行目）に書く • 本来は文書の 「型」 を示すだけのものだが，実際にはブラウザの 「表示モード」 の切り替えにも使われている （そのうち解説する） • HTML 4.01以前は，HTML文書が 「どのバージョン・種類の」 HTMLに準拠して書かれているかを示していた • バージョンおよび種類ごとに書式が決まっていた • HTML5でバージョンを表す情報は廃止された <!DOCTYPE html> <html lang="ja"> <head> … </head> <body> …

  37. HTML 4.01 の文書型 （参考） • 3つの種類（文書型）がある • HTML 4.01 Strict • レイアウトに関する要素を排除 （使用禁止） し，文書の構造のみをマークアップする （本来HTMLが目指していた形） • HTML 4.01 Transitional • 互換性のため，非推奨ながらレイアウト要素を残したもの • HTML 4.01 Frameset • レイアウト要素に加え，フレームを使用可能としたもの

  38. DOCTYPE宣言の文法 （参考） • 以下の4つの部分から構成される • html： 文書タイプがHTMLであることを示す • 大文字でもよいが，XHTMLの場合は小文字でなければならない • PUBLIC： DTDが公開されたものであることを示す • DTD： 文書型定義 （Document Type Definition） • フォーマル公開識別子： DTDを特定するための情報 • 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">

  39. DOCTYPE宣言の例 （参考） • HTML 4.01 Strict • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> • システム識別子は省略している （あってもよい） • HTML 4.01 Transitional • <!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/xhtml1-strict.dtd"> • システム識別子は省略不可

  40. 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> ...

  41. 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> ...

  42. 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> ...

  43. 文字コードの表記 • 日本語用の文字コードの表記法 • 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" />

  44. 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">

  45. 仕様準拠の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>

  46. HTMLの文法チェック

  47. 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は必ずいずれかのバリデータでチェックすること

  48. 第３回課題（再掲）

  49. 第３回課題 • 次回（第4回）までの講義内容を踏まえ，自分にまつわる内容を含むHTML文書を作成する • 内容について • 自己紹介，自分の趣味・興味対象についてなど何でも構わないが，ある程度まとまった内容になっていることが望ましい • 分量は自由 （目安として300文字程度以上） • HTMLについて • HTML5 （XHTML形式）の文法に則って記述する • 特に，要素の入れ子関係には注意 • チェックツールを使う方法については次回紹介 • 以下の要素を必ず使うこと • h1，h2，p，a，ulまたはol • デザインやレイアウトは気にしなくてよい

  50. 第３回課題（続き） • 提出物 • 以下をZipファイルにまとめたもの • 作成したHTMLファイル • HTMLファイルを直接提出するのは避けてください • ファイル名が変わってしまうため • Zipファイルの作成方法が分からない人は質問してください • 提出期限： 5月9日（金） 23:59 • keio.jp 「授業支援」 上で提出

More Related