Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5 入門
Similar a HTML5 入門 (20)
HTML5 入門
- 2. 自己紹介 • N@N（@spark6251） • N@N→NOaN→NOAN→ノアン • 明石高専 電気情報工学科四年生 • プログラミングあんまりしてない • たぶんWeb屋 進行中のお仕事 • 明石高専
- 4. ねらい • HTML5について幾らか知ってもらう • セマンティクスな構文を • あとXHTMLdis
- 6. 内容 • HTMLとは • HTML5とは • HTML 4.01との比較 • 読める！DTD――1分で分かる？DTD入門 • まとめ
- 7. 1. HTMLとは
- 8. ところで
- 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属性は廃止
- 16. 結局使われたのはXHTML 1.0でtext/html つまり構文はXHTMLながら実情はHTML • application/xhtml+xml（理想） • XHTML 1.0でtext/html（現実）
- 17. ＿＿＿ / ||￣￣|| ∧＿∧ |.....||＿＿|| （ ） どうしてこうなった… |￣￣＼三⊂/￣￣￣/ | | ( ./ / W3C
- 20. 結論
- 22. W3Cの対策 • XHTML 1.1でMIMEタイプは application/xhtml+xmlのみに限定 • XHTML 1.2、XHTML 2.0も同様（結局両方共 中止）
- 27. XHTML is HTML
- 30. HTML5とは一体何でしょう？
- 32. 冗談はさておき
- 34. 小話 • 2004.06：W3Cがワークショップを開く Webアプリケーション開発者向けの機能が出るが W3Cの構想ではない…… • HTMLやCSSのためにDOMの拡張を？→否決 • その機能を実現しようと離反（WHATWG） • W3CはXHTML 2.0、WHATWGはフォームな どの機能 • XHTML 2.0は終息し、W3CとWHATWGは共 同作業、HTML5開発へ
- 35. つまり • HTML5の目的：明確なタグ構造、 デベロッパーへの機能 • 事実HTML5とはWeb Applications 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. canvas
- 45. HTML5とは • <br /> • 物理タグの論理タグ化 • 意味の変わった要素 • 消えた要素、新しい要素
- 46. • u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 • hr：水平線→段落レベルの区切り
- 47. • u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 • hr：水平線→段落レベルの区切り 最早要素名から予測不可能
- 51. 新しい要素 • nav • section • header • footer • article • aside • video • audio • canvas
- 52. 2013年5月2日発売
- 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> • ヘッダ • 見出し • ページ全体のヘッダ でも良いし、セク ションごとの見出し でも良い
- 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); });
- 67. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//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>
- 75. JavaScript
- 76. The type attribute gives 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.
- 78. HTML 4.01 <div class="header"> <img src="" 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>
- 80. <!ELEMENT HTML O O (%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, B A, Bがこの順で A&B A, Bが順不同で +A 子孫にAが記述可能 -A 子孫にAが記述不可
- 82. <!ELEMENT HTML O O (%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 -->
- 84. <!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> <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>
- 88. 結局DTDっているの？ • HTML5にDTDは存在しない←表現しきれない • 自身で考えてコーディング • 自身で思う適した書き方で良い 参考：WCAN mini Markup vol.11をとおして、 HTML5のDTDについて考えてみた (http://chifffon.net/blog/web/entry-135.html)
- 89. コンテンツモデル • Metadata、Flow、Sectioning、Heading、 Phrasing、Embedded、Interactiveの6つの コンテンツもでるによる文書構造 • 例えばa要素はFlow、Phrasing、Interactive に属す。 • block要素、inline要素の区別ではない
- 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. 御清聴ありがとうございました