第2回 Web文書

Size: px

Start display at page:

Download "第2回 Web文書"

きみのしんみしま
5 years ago
Views:

1 Web 情報システム構成法第 2 回 Web 文書萩野達也 (hagino@sfc.keio.ac.jp) 1

2 HTML 簡単な HTML 文書を書いてみましょう. HTML の特徴を入れなさい. <!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> <title>my Page</title> </head> <body> <h1>my Page</h1> <p>this is just a <em>test</em> page.</p> <ul> <li><a href=" </ul> </body> </html> 2

3 文書印刷文書本新聞雑誌ポスターオンライン文書ワード PDF Webページ e-book 3

4 オンライン文書紙の制限がない : A1 紙の大きさ縦の長さ A3 横の幅 A2 549mm ページ A5 ページ数厚さ A4 A6 A7 A7 マルチメディア 841mm 音声ビデオハイパーリンク目次索引 4

5 文書とは? document = doc- + -ment doc-: ラテン語 docere( 教える ) -ment: 名詞にする document は何かを教えるもの document は何か情報を伝えるものロングマン (Longman) 1. a piece of paper that has official information on it 2. a piece of written work that is stored on a computer 似た言葉 documentary documentation 5

6 構造化文書文書は構造を持つ : 表題著者概要章, 節, 小節箇条書き, 数え上げ図, 表目次, 索引表題章節章図 6

7 構造化プログラミング C 言語 x = 0; y = 0; i = 1; while (i <= 100) { if (i % 2 == 0) { x = x + i; } else { y = y + i; } i = i + 1; } BASIC 100 let x = let y = let i = goto let i = i if int(i/2)=i/2 then goto if i <= 100 then end 190 let x = x + i 200 goto let y = y + i 220 goto 140 goto 文がない構造化プログラムは分かりやすく, 書きやすい 7

8 構造の与え方文法で構文を決める構造化プログラミング言語数式文脈自由文法テキスト構文解析構造 ( パース木 ) 文法規則構造を表す記号を埋め込む LaTeXの環境 SGMLのマークアップ (mark-up) `mark-up' = marking up 歴史的には, 編集者が青鉛筆で原稿に書き加えた SGMLでタグ (tag) が導入された, 8

9 SGML: Standard General Markup Language ISO 標準 (1986 年 ) ISO 8879: Introduction This International Standard specifies a language for document representation referred to as the "Standard Generalized Markup Language" (SGML). SGML can be used for publishing in its broadest definition, ranging from single medium conventional publishing to multi-media data base publishing. SGML can also be used in office document processing when the benefits of human readability and interchange with publishing systems are required. DTD: 文書型 (Document Type Definition) 文書の構造を定義 <!ELEMENT chapter - - (title, section+)> <!ELEMENT title o o (#PCDATA)> <!ELEMENT section - - (title, paragraph+)> <!ELEMENT paragraph - - (#PCDATA)> 文書タグを使って構造を明記 <chapter> <title>web documents</title> <section> What is HTML <paragraph>html is the format for Web documents.</paragraph> <paragraph>html is used widely.</paragraph> </section></chapter> 9

10 HTML とは HTML SGMLの一つ (SGMLアプリケーション) ハイパーテキストのためのSGML 文書 SGML (XML) HTML の特徴内容と表現の分離表現はCSSで与える直交技術を用いる内容 :HTML 表現 :CSS 動作 :Javascript 直交技術の利用 HTML ビデオ動画音声 10 サブタイトル

11 内容と表現の分離分離するメリット HTMLの役割を明確にするデザイナーと中身を書く人内容を変更せずに表現を変えることができる複数の文書で同じ表現を使うことができるサイト全体を統一しやすい利用者が表現を変えることができるアクセシビリティ stylesheet stylesheet share user choice HTML HTML HTML 11

HTML のバージョンの変化 1989 HTML SGML XML IETF standard 1994 HTML2 2000 XHTML1.

12 HTML のバージョンの変化 1989 HTML SGML XML IETF standard 1994 HTML XHTML1.0 mobile modules 1995 HTML XHTML1.1 XHTML Basic merge several dialects XML 1997 HTML3.2 XHTML2.0 correct HTML 1997 HTML HTML HTML5 12

13 HTML タグの分類構造のためのタグ address, article, aside, audio, blockquote, body, canvas, caption, col, colgroup, dd, details, dialog, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1-6, head, header, html, iframe, img, legend, li, map, menu, nav, noscript, object, ol, p, pre, q, script, section, summary, table, tbody, td, tfoot, th, thead, title, tr, ul, video 意味を表すタグ abbr, cite, code, del, dfn, em, i, ins, kbd, mark, meter, rp, rt, ruby, s, samp, small, span, strong, sub, sup, time, var その他 a, area, b, base, bdi, bdo, br, button, command, datalist, hr, input, keygen, label, link, meta, optgroup, option, output, param, progress, select, source, style, textarea, track, u, wbr 13

14 HTML 要素の分類構造を表す要素 html, head, body,... section, article,... 段落の要素 block elements h1, h2, ul, ol, table,... 語句の要素 inline elements text elements i, b, em, strong,... html head body block 要素 inline 要素 14

15 内容としての HTML 内容的に意味のない要素 center font 内容的に意味のない属性 align 属性 bgcolor 属性 olとulのtype 属性内容的に意味のある要素 em strong cite dfn code samp kbd var abbr 15

16 どうしてイタリックや太字にしたいか考える! 強調 This is <b>important</b>. This is <em>important</em>. This is <strong>very important</strong>. 初出, 定義 <b>html</b> is the language of describing Web pages. <dfn>html</dfn> is the language of describing Web pages. コンピュータの入出力 The assignment statement <code>x=x+1</code> increases the value of <var>x</var> by one. 省略形 At Keio University <abbr title= Shonan Fujisawa Campus >SFC</abbr>, students can choose various subjects to study. 16

17 HTML5 の内容モデル Metadata content Elements for specifying CSS, Javascript,... Specify relationship with other documents Flow content Elements for body Phrasing content text mark-up of intra-paragraph level Embedded content Embed non-text contents Import another resource Sectioning content Define scope of headings and footers Heading content Header of a section Interactive content Specify user interaction Flow Phrasing Heading Interactive Embedded Metadata Sectioning 17

18 HTML5 の基本的な body 構造 HTML5 では標準のページを表す要素がある <body> <header> header </header> <article> body main content </article> <aside> advertisement </aside> <footer> footer </footer> </body> header body main content footer article はさらに header と footer を持ってもかまわない ad. 18

19 HTML5 セクション要素 div division 特別な意味はない一般的な段落要素 section 一般的なセクション段落のかたまり headerとfooterを持つ ( 必須ではない ) article それ自身で完結するセクションその部分を取り出して使うことが可能 nav ナビゲーションようのセクションメニューなど HTML5 で出現 aside 主たる内容から独立したセクション広告など 19

20 どのセクション要素を使えばよいか? 開始ナビゲーション? no 独立した no 主の内容 no に関係あ内容か? るか? <aside> yes yes yes <nav> <article> 付録に持って行って良いか? no 題名を付けれるか? yes <section> yes no <figure> 意味を持つか? yes <p> <blockquote> <pre> no <div> 20

21 h1-6 と section HTML5 以前 h1が最も高いレベル h6がもっとも低いレベル HTML5 sectionのネストの深さでレベルは決めるヘッダはh1だけを使ってもよい <h1>chapter 1</h1> head part of chapter 1 <h2>section 1.1</h2> content of section 1.1 <h2>section 1.2</h2> content of section 1.2 <h3>subsection 1.2.1</h3> subsection inside section 1.2 <h1>chapter 2</h1> head part of chapter 2 <h2>section 2.1</h2> content of section <section> <h1>chapter 1</h1> head part of chapter 1 <section> <h1>section 1.1</h1> content of section 1.1 </section> <section> <h1>section 1.2</h1> content of section 1.2 <section> <h1>subsection 1.2.1</h1> subsection of section 1.2 </section> </section> </section> <section> <h1>chapter 2</h1> head part of chapter 2 <section> <h1>section 2.1</h1> content of section 2.1 </section> </section>

22 HTML のハイパーリンク HTML = Hypertext Markup Language ハイパーリンクは HTML の最も重要な要素ハイパーリンク関連する文書を結びつける文書を指し示すためにURL (Uniform Resource Locator) を使うハイパーリンク要素 a link img object 22

23 a 要素と link 要素 a 要素 bodyの中で使う anchor 要素文書の一部分から別文書にリンクする link 要素 headの中で使う文書どおしをリンク stylesheets, javascripts,... relは通常のリンク revは逆方向のリンク <p><a href=" University</a> is the oldest university in Japan.</p> 23 <head>...other head information... <title>chapter 5</title> <link rel="prev" href="chapter4.html" /> <link rel="next" href="chapter6.html" /> <link rel="stylesheet" href="book.css" /> </head>

24 まとめ Web 文書 HTML 質問紙の文書とオンライン文書構造化文書 SGML: Standard General Markup Language SGMLアプリケーション HTMLの構造内容と表現の分離ハイパーリンク HTML は Web ページの記述言語として完全か? HTML に足らないもの, 余分なものは? 24

第2回 Web文書

第2回 Web文書 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 2 回 HTML 入門萩野達也 (hagino@sfc.keio.ac.jp) 1 HTML 簡単な HTML 文書を書いてみましょう.