HTMLのコトバ
HTMLのいまさらな用語解説
html5jマークアップ部勉強会 OSAKA
2014.6.10
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
H...
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
著
HTML5
http://www.w3.org/html/wg/drafts/html/master/
HTML5もいいけど、
今日はあえて
HTMLの常識的なお話をします。
新人さん向けに
1. 要素とかタグとか
<body>
これはなんですか?
body要素の開始タグ
<a href= ... >HTMLの基礎</a>
要素名
要素
開始タグ 終了タグ
属性
属性値 要素のテキスト
マークアップの用語をきちんと使い
分けないと、打ち合わせのとき勘違い
されて仕事がうまく進まないかも。
あとクリエイターとしてダサいw
2. 文章型宣言
<!DOCTYPE html>
HTML5は簡単になったけど、HTML4
とかはやたら長い。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://
www.w3.org/TR/html4/strict.dtd">
公開識別子キーワード
システム識別子
文書型宣言の種類
Document Type Definition
Strict 厳密型
Transitional 移行型
Frameset フレーム設定型
非推奨の要素、属性、フレーム
を使わない場合
非推奨の要素、属性を使用する
場合
移行...
DTDによってWEBブラウザのレンダリングモード
がコントロールされる
http://www.htmq.com/htmlkihon/302.shtml
DTDを正しく設定しましょう。
めんどくさいから
HTML5にすれば?
<!DOCTYPE html>
3. 要素には意味がある
<html></html>
なんの意味?
html要素
htmlドキュメントの
ルートを表す
全ての要素に意味があります。
http://html5.jp/ とかで勉強しましょう。
<article></article>
これはどこで使う?
勉強会があるよw(宣伝)
http://html5experts.jp/?p=5506
4. 正しいマークアップは有益
正しい、高度なマークアップの
スキルは今後重要になる。
http://www.google.com/intl/ja_jp/webmasters/
https://support.google.com/webmasters/answer/35769
https://support.google.com/webmasters/answer/146750
http://googlewebmastercentral-ja.blogspot.jp/
新しい機能が追加されていってます
たまにチェックするといいよ。
MarkupCafeでもやってますw
http://html5experts.jp/?p=5506
HTMLマークアップも意外と奥が深い
追究すると正解のない世界
まだまだ進化するので、
いっしょに勉強していきましょう!
Thanks!
Htmlのコトバ
Upcoming SlideShare
Loading in …5
×

Htmlのコトバ

1,746 views
1,659 views

Published on

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
13
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Htmlのコトバ

  1. 1. HTMLのコトバ HTMLのいまさらな用語解説 html5jマークアップ部勉強会 OSAKA 2014.6.10 Bathtimefish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimefish
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. Firefox OSの 薄い本書きました。 http://goo.gl/mA8ebW 好評発売中! 開発に、「もえあがる」のはつきものだ 第一話 がいあハックス (Gaia開発環境の構築とデバッグ) 著
  5. 5. HTML5
  6. 6. http://www.w3.org/html/wg/drafts/html/master/
  7. 7. HTML5もいいけど、 今日はあえて HTMLの常識的なお話をします。 新人さん向けに
  8. 8. 1. 要素とかタグとか
  9. 9. <body> これはなんですか?
  10. 10. body要素の開始タグ
  11. 11. <a href= ... >HTMLの基礎</a> 要素名 要素 開始タグ 終了タグ 属性 属性値 要素のテキスト
  12. 12. マークアップの用語をきちんと使い 分けないと、打ち合わせのとき勘違い されて仕事がうまく進まないかも。 あとクリエイターとしてダサいw
  13. 13. 2. 文章型宣言
  14. 14. <!DOCTYPE html>
  15. 15. HTML5は簡単になったけど、HTML4 とかはやたら長い。
  16. 16. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/strict.dtd"> 公開識別子キーワード システム識別子
  17. 17. 文書型宣言の種類 Document Type Definition Strict 厳密型 Transitional 移行型 Frameset フレーム設定型 非推奨の要素、属性、フレーム を使わない場合 非推奨の要素、属性を使用する 場合 移行型DTDでフレームを使用す る場合
  18. 18. DTDによってWEBブラウザのレンダリングモード がコントロールされる http://www.htmq.com/htmlkihon/302.shtml
  19. 19. DTDを正しく設定しましょう。 めんどくさいから HTML5にすれば? <!DOCTYPE html>
  20. 20. 3. 要素には意味がある
  21. 21. <html></html> なんの意味?
  22. 22. html要素 htmlドキュメントの ルートを表す
  23. 23. 全ての要素に意味があります。 http://html5.jp/ とかで勉強しましょう。
  24. 24. <article></article> これはどこで使う?
  25. 25. 勉強会があるよw(宣伝) http://html5experts.jp/?p=5506
  26. 26. 4. 正しいマークアップは有益
  27. 27. 正しい、高度なマークアップの スキルは今後重要になる。
  28. 28. http://www.google.com/intl/ja_jp/webmasters/
  29. 29. https://support.google.com/webmasters/answer/35769
  30. 30. https://support.google.com/webmasters/answer/146750
  31. 31. http://googlewebmastercentral-ja.blogspot.jp/ 新しい機能が追加されていってます たまにチェックするといいよ。
  32. 32. MarkupCafeでもやってますw http://html5experts.jp/?p=5506
  33. 33. HTMLマークアップも意外と奥が深い 追究すると正解のない世界 まだまだ進化するので、 いっしょに勉強していきましょう!
  34. 34. Thanks!

×