Basic HTML Introduction
•
2 likes•825 views
This is Basic HTML Introduction for Designers, Coders.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Basic HTML Introduction
Recently uploaded
Recently uploaded (10)
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は唯一のユニバーサルアクセスを可能とする まとめ