Download as PDF, PPTX
![XHTMLの話
1998.02：W3CによるXML
そもそもXMLは厳格な構文である
HTMLをXMLの形式で再定義
できたXHTMLは厳格である
application/xhtml+xmlで厳格なチェック！
エラーがあっても正常に[要出典]動作するHTML
とはおさらば！](https://image.slidesharecdn.com/html5-130329061014-phpapp02/75/HTML5-13-2048.jpg)
![HTML5とは
今までのHTML
• タグ付けした文書の
製作
• Webアプリケーショ
ンには不向き
HTML5
• より強固なタグ付け
• Webアプリケーショ
ンの開発の手助け
• 便利[要出典]
• わかりやすい[要出典]
• 神[要出典]](https://image.slidesharecdn.com/html5-130329061014-phpapp02/75/HTML5-37-2048.jpg)
HTML5 入門
- 1.
- 2. 自己紹介 • N@N（@spark6251） • N@N→NOaN→NOAN→ノアン •明石高専 電気情報工学科四年生 • プログラミングあんまりしてない • たぶんWeb屋 進行中のお仕事 • 明石高専
- 3.
- 4. ねらい • HTML5について幾らか知ってもらう • セマンティクスな構文を •あとXHTMLdis
- 5.
- 6. 内容 • HTMLとは • HTML5とは •HTML 4.01との比較 • 読める！DTD――1分で分かる？DTD入門 • まとめ
- 7.
- 8.
- 9.
- 11. まずMIMEタイプの話 Content-Type: • text/html • text/css •image/jpeg • application/pdf URLの付いてるもの全てにあるどう表示・処理す べきかの唯一の指標。 参考：IANA | MIME Media Types (http://www.iana.org/assignments/media-types)
- 12. XHTMLの話 • 要素名は小文字(ex. <html> •空要素は閉じる(ex. <br /> • 全ての属性値は囲む(ex. <div width=“100”> • <html lang=“ja-JP” xml:lang=“ja-JP”> ちなみにXHTML 1.1でlang属性は廃止
- 13.
- 16. 結局使われたのはXHTML 1.0でtext/html つまり構文はXHTMLながら実情はHTML • application/xhtml+xml（理想） •XHTML 1.0でtext/html（現実）
- 17. ＿＿＿ / ||￣￣|| ∧＿∧ |.....||＿＿||（ ） どうしてこうなった… |￣￣＼三⊂/￣￣￣/ | | ( ./ / W3C
- 18.
- 19.
- 20.
- 21.
- 22. W3Cの対策 • XHTML 1.1でMIMEタイプは application/xhtml+xmlのみに限定 •XHTML 1.2、XHTML 2.0も同様（結局両方共 中止）
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. 小話 • 2004.06：W3Cがワークショップを開く Webアプリケーション開発者向けの機能が出るが W3Cの構想ではない…… • HTMLやCSSのためにDOMの拡張を？→否決 •その機能を実現しようと離反（WHATWG） • W3CはXHTML 2.0、WHATWGはフォームな どの機能 • XHTML 2.0は終息し、W3CとWHATWGは共 同作業、HTML5開発へ
- 35. つまり • HTML5の目的：明確なタグ構造、 デベロッパーへの機能 • 事実HTML5とはWebApplications 1.0＋ Web Forms 2.0 • FLASHの代替だとか、速度云々だとか、完全な 勘違い
- 36. HTML5とは • HTMLのver. 5 •2014年に策定予定 • デベロッパー泣かせ（主にブラウザのせい） • HTMLと5の間にスペースは挿れない • HTML＋XHTML1＋DOM2 HTML • フォームがかなり強くなった
- 37. HTML5とは 今までのHTML • タグ付けした文書の 製作 • Webアプリケーショ ンには不向き HTML5 •より強固なタグ付け • Webアプリケーショ ンの開発の手助け • 便利[要出典] • わかりやすい[要出典] • 神[要出典]
- 38.
- 39.
- 44.
- 45. HTML5とは • <br /> •物理タグの論理タグ化 • 意味の変わった要素 • 消えた要素、新しい要素
- 46. • u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 •hr：水平線→段落レベルの区切り
- 47. • u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 •hr：水平線→段落レベルの区切り 最早要素名から予測不可能
- 48.
- 49.
- 50.
- 51. 新しい要素 • nav • section •header • footer • article • aside • video • audio • canvas
- 52.
- 53. nav <nav> <ul> <li><a href=""> </a></li> <li><a href=""> </a></li> </ul> </nav> •主要なナビゲーショ ンに用いる • <ul id=“mainMenu”> に相当する（もちろん それ以外でも主要であ れば該当）
- 54. section <article> <section> <header> </header> <div></div> </section> </article> • 汎用セクション • 基本的にヘッダを伴 う •div要素のが汎用なブ ロック要素に対し、 section要素は汎用な セクション
- 55. header <header> <img src="" alt=""/> </header> <!-- サイトのヘッダ --> <section> <header></header> <!-- 記事の見出し --> <p></p> </section> • ヘッダ • 見出し • ページ全体のヘッダ でも良いし、セク ションごとの見出し でも良い
- 56.
- 57.
- 58. aside <article> <aside></aside> <!-- articleと 密接な関係 --> </article> <aside></aside> <!--そうではない --> • 話の内容から少しそ れたもの • 印刷物の囲み記事 • 広告
- 59. video <video src=""></video> <video src="“controls> </video> <video src="" autoplay> </video> • 動画を再生する • controlsでインター フェース表示 • autoplayで自動再生
- 60. audio <audio src=""></audio> <audio src=""controls> </audio> <audio src="" autoplay> </audio> • 音声を再生する • controlsでインター フェース表示 • autoplayで自動再生
- 61. canvas <canvas id="sample"> </canvas> • 図形を描く •標準のHTMLとJSの みで図形が描ける （！） • widthとheightのデ フォルト値はそれぞ れ300と150
- 62. canvas $(function() { //var ctx= document.getElementById('sample').getContext('2d'); var ctx = $('#sample').get(0).getContext('2d'); ctx.beginPath(); ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillRect(10, 10, 10, 20); });
- 63.
- 64.
- 65.
- 66.
- 67. HTML 4.01 <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Title</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src=“main.js” type="text/javascript"></script> HTML5 <!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="style.css" /> <script src=“main.js”></script>
- 68.
- 75.
- 76. The type attributegives the styling language. If the attribute is present, its value must be a valid MIME type that designates a styling language. The charset parameter must not be specified. The default value for the type attribute, which is used if the attribute is absent, is "text/css" 参考：HTML Living Standard (http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element) The src attribute, if specified, gives the address of the external script resource to use. The value of the attribute must be a valid non-empty URL potentially surrounded by spaces identifying a script resource of the type given by the type attribute, if the attribute is present, or of the type "text/javascript", if the attribute is absent.
- 77.
- 78. HTML 4.01 <div class="header"> <imgsrc="" alt=""> </div> <div class="article"> <div class="section"> <div class="header"></div> <p></p> </div> </div> HTML5 <header> <img src="" alt="" /> </header> <article> <section> <header></header> <p></p> </section> </article>
- 79.
- 80. <!ELEMENT HTML OO (%html.content;) -- document root element --> <!ELEMENT DL - - (DT|DD)+ -- definition list --> <!ELEMENT DT - O (%inline;)* -- definition term --> <!ELEMENT DD - O (%flow;)* -- definition description --> <!ELEMENT IMG - O EMPTY -- Embedded image --> 参考：strict.dtd
- 81. 形式 意味 A, BA, Bがこの順で A&B A, Bが順不同で +A 子孫にAが記述可能 -A 子孫にAが記述不可
- 82. <!ELEMENT HTML OO (%html.content;) -- document root element --> <!ENTITY % html.content "HEAD, BODY"> <!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head --> <!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT“ -- repeatable head elements --> <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
- 83.
- 84. <!DOCTYPE html> <html lang="ja-JP"> <head> <metacharset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="css/style.css" /> <script src=“js/main.js”></script> </head> <body> <article> <section> <header></header> <p></p> </section> </article> </body> </html>
- 85. <!DOCTYPE html> <meta charset="UTF-8"/> <title>Title</title> <link rel="stylesheet" href="css/style.css" /> <script src=“js/main.js”></script> <article> <section> <header></header> <p></p> </section> </article>
- 87.
- 88. 結局DTDっているの？ • HTML5にDTDは存在しない←表現しきれない • 自身で考えてコーディング •自身で思う適した書き方で良い 参考：WCAN mini Markup vol.11をとおして、 HTML5のDTDについて考えてみた (http://chifffon.net/blog/web/entry-135.html)
- 89.
- 90.
- 91.
- 92. 5. まとめ • HTML5で新しく出た要素でわかりやすい HTMLを •jQueryなどの手軽に使えるライブラリが増えて るのでこの機にJavaScript等の言語も <!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href=“css/style.css" /> <script src=“js/main.js”></script> </head>
- 93.