Basic HTML Introduction
•
2 recomendaciones•825 vistas
This is Basic HTML Introduction for Designers, Coders.
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Basic HTML Introduction
Último
Último (9)
Basic HTML Introduction
- 2. アジェンダ • HTMLとは • HTMLの歴史 • HTMLのバージョン • HTMLの基本形 • タグについて(要素と属性) • HTMLの記述 • HTMLの文章構造
- 3. HTMLとは
- 12. World Wide Webの誕生 Webの誕生 研究者の成果物（論文）を共有できるように するためのシステムとして誕生 通信 ドキュメントの記述 ハイパーテキスト（HTML） 通信 HTTP ウェブの閲覧 ウェブブラウザ リソースの置き場所 ウェブサーバー リソースの参照 URI
- 14. HTMLのバージョンの推移 • HTML 1.0（1993） • HTML 2.0（1995） • HTML 3.0（1997）策定途中で破棄 • HTML 3.2（1997） • HTML 4.0、HTML 4.01（1997） • XHTML 1.0（2000） • XHTML 1.1（2001） • XHTML 2.0（2009）策定の打ち切り • HTML 5（2008） Web、HTMLがなぜ作られたか
- 15. HTMLの基本形
- 19. 要素 • 文書を構成するパーツのようなもの • 開始タグと終了タグを持つ • 終了タグを持たない要素もある が、終了タグを持たない要素の ことを空要素という 要素と属性 例： <img> <meta> <br> など 開始タグ 終了タグ <h1 lang=“ja”>大見出し</h1> 例：<h1>、<p>、<ul>など
- 20. • 要素に情報を付加するもの • 属性の種類には下記の2種類に分 類される ➡ すべてのHTML要素に付与で きる属性 ➡ そのHTML要素のみに付与で きる属性 要素と属性 属性 例：class, id など 例：href, alt など
- 21. HTMLの記述
- 22. ① DOCTYPE ② html要素 ③ head要素 ④ title要素 ⑤ body要素
- 23. ① DOCTYPE
- 24. • HTMLファイルの一行目に記述さ れているやつ • DTD（Document Type Definition） 文書型の定義 • どの仕様（バージョン）のHTML なのかを明示する ➡ HTMLは、バージョンごとに使 用できる要素や属性が定義され ている DOCTYPE
- 26. • 一般的なブラウザではレンダリングモードが互換モー ド（Quirks mode）となる。 ➡ 互換モードのブラウザではCSSの解釈が標準と異 なるため、レイアウトが大きく崩れる場合があ る。 DOCTYPEは必ず指定
- 27. ② HTML要素
- 28. • ドキュメントのルート（基点） 要素 ➡ HTML や XHTML におい て、その文書のルート（基 点）となる要素 • 他の全ての要素は、この要 素の子孫として配置しなけれ ばならない HTML要素
- 29. ③ head要素
- 30. • ドキュメントのメタデータコン テナ • HTML文書のメタデータ群を内 包する要素 • 前後のページ等へのリンク、ス クリプトやスタイルシートの定 義などを内包する head要素
- 31. ④ title要素
- 33. ⑤ body要素
- 36. • メタデータコンテンツ • セクショニングコンテンツ • ヘディングコンテンツ • フローコンテンツ • フレージングコンテンツ • エンベデッドコンテンツ • インタラクティブコンテンツ • フォームリレイテッドコンテンツ <link>、<meta>、<style>、<title> など <header>、<footer>、<article>、 <nav>、 <section> など <h1> ∼ <h6>、<hgroup> <a>、<p>、<ul>、<ol> など <em>、<i>、<img>、<span> など <audio>、<iframe>、<svg>、<video> な ど <button>、<input>、<a> など <select>、<textarea>、<input>、 <progress> など
- 38. HTMLの文章構造
- 40. 基本的な文章構造 • セクション ‣ 見出し ‣ 本文 ‣ リスト ‣ (表) ‣ (画像) HTMLの文章構造 セクション 見出し 本文 リスト
- 47. 利用できる Usable / Accessible / Findable 安心できる Useful / Credible 満足できる Desirable / Valuable HTMLの文章構造（UXピラミッド） http://blog.iaspectrum.net/2013/06/25/ux_honeycomb/
- 48. アクセスできる Accessible 安心できる Useful / Credible 満足できる Desirable / Valuable HTMLの文章構造（UXピラミッド） 利用できる Usable / Findable http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
- 52. 1. 見出し
- 55. スクリーンリーダー • 画面に表示されているコンテンツを読み上げるソフト • 日本で有名なスクリーンリーダー ‣ PC-Talker ‣ JAWS ‣ NVDA ‣ VoiceOver 音声を発した正体
- 56. • 見出しナビゲーション • リスト項目数の読み上げ • ランドマークナビゲーション • フォームの読み上げ スクリーンリーダーが持つ主な機能 音声を発した正体
- 57. 見出しの重要性 • 文書構造を明確にする • SEOに有効である、と昔はよく 言われた （生きる都市伝説） • セクションの頭に見出しを 配置することで見出しナビ ゲーション操作ができる （右図参照） HTMLの文章構造 ① ② ③ ④ ⑤ 見出し
- 58. 2. リスト
- 64. HTMLの文章構造 リストの項目数を知ることができる • 項目数が分かることによって、情報量の目安がつく • しかる箇所ではリストは非常に有効 ※VoiceOverでリストの読み上げ時のキャプチャ
- 68. デ モ HTMLの文章構造
- 76. 赤（必須）で示されている項目は必須項目です。 携帯番号 （必須） HTMLの文章構造 ① ② ③ ④ HTMLの記述順から順番に読み上げられる •必須項目なのかどうか入力後に気付く可能性がある
- 87. まとめ
- 88. • Webはもともと論文を共有するために作られた • HTMLはいくつかバージョンはあるが、HTML5が今は主流 • 文章構造で考える • セクション/見出し/本文 という関係で考える • 文章構造を明確にすることで誰かがアクセスしやすく、探 しやすく、使いやすく感じる • ユーザーに入力をさせる場合は、何を入力させるか明確にさせ るためにラベルが必要 • Webは唯一のユニバーサルアクセスを可能とする まとめ