SlideShare uma empresa Scribd logo
1 de 47
最速 HTML 勉強会 Id:youzaka
HTMLって何? ,[object Object]
オモテ
ウラ
今回 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTMLとWWWとInternet ,[object Object],[object Object],[object Object]
HTMLとWWWとInternet Cited from: 今さら誰にも聞けなかった「インターネット」と「ウェブ」の違い  http://blog.livedoor.jp/ld_directors/archives/50792065.html
WWWの3要素 Cited from: ユニバーサル HTML/XHTML urn:isbn:4-8399-0454-5
WWWの3要素 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTMLとは何であるか ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
文章の構造? ,[object Object],Cited from: d:id:tetsuyasato
たとえば ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
まず覚えるべきこと ,[object Object],[object Object],[object Object],[object Object]
要素 ,[object Object],[object Object],[object Object]
タグ ,[object Object],[object Object],[object Object],開始タグ 終了タグ
タグの入れ子構造 ,[object Object],[object Object],[object Object],[object Object]
属性 ,[object Object],[object Object],[object Object],[object Object],属性名 属性値
最初に覚えるHTML要素 画像  (embedded  im a g e) img 汎用ブロック  (generic container) div アンカー  ( a nchor) a リストアイテム  ( l ist  i tem) li 順序リスト  ( o rdered  l ist) ol 順不同リスト  ( u nordered  l ist) ul 段落  ( p aragraph) p 見出し  ( h eading) h1, h2, …, h6 文書のタイトル  ( title ) title 説明 要素名
マークアップしてみよう http://d.hatena.ne.jp/tetsuyasato/20080419/1208612952
マークアップしてみよう 勘違い学会  <[ ナンセンス演習 ] エントリのネタ ... | [ どうでもいい ]Nexcare が超強力 ...>  2008-04-19 ■ タイトル変えました どうでもいいですけどね。 最近勘違いが多くなってきたので、原因と対策を皆さんと考えたいと思います。 Permalink |  コメント (0) |  トラックバック (0) | 22:49
見出し ,[object Object],WORD のアウトラインモードを参考に…
段落 ,[object Object]
リスト ,[object Object],[object Object],もとの文にあった “ |” の記号は、自然言語においてリストを分ける役割を持っていたと考えて、 HTML で同等の機能を持つ <li> に置き換えた。
リスト ,[object Object],[object Object],タグ以外に “ < ” を書くときは “ &lt; ”  と書く  ( 文字参照 ) 同様に“ > ” は “ &gt;   ”
タイトル ,[object Object],[object Object],[object Object],[object Object]
はい、できましたー <title> タイトルを変えました  -  勘違い学会 </title> <h1> 勘違い学会 </h1> <ol> <li> &lt;[ ナンセンス演習 ] エントリのネタ ...  </li> <li> [ どうでもいい ]Nexcare が超強力 ... &gt; </li> </ol> <h2> 2008-04-19 </h2> <h3> タイトル変えました </h3> <p> どうでもいいですけどね。  </p> <p> 最近勘違いが多くなってきたので、原因と対策を皆さんと考えたいと思います。  </p> <ul>  <li> Permalink </li><li> コメント (0)  </li>  <li> トラックバック (0) </li><li>  22:49 </li> </ul>
ブラウザで見てみよう ,[object Object],[object Object]
もう少し深い話 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
次に覚えるHTML要素 em より強い強調  ( strong er emphasis) strong 汎用インライン  (generic container) span 整形済みテキスト  ( pre formatted text) pre 強調  ( em phasis) em 定義文  ( d efinition  d escription) dd 定義語  ( d efinition  t erm) dt 定義リスト  ( d efinition  l ist) dl 文書の問合せ先 (information on author) address 引用ブロック  (long quotation) blockquote 説明 要素名
blockquote ,[object Object],[object Object],[object Object],[object Object]
address ,[object Object],[object Object],[object Object],[object Object]
dl ,[object Object],[object Object],[object Object],[object Object]
pre ,[object Object],[object Object],[object Object]
そのほか ,[object Object],[object Object],[object Object]
要素の種類と親子関係 ,[object Object],[object Object]
要素の種類 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
要素の種類 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
要素の種類 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
汎用属性について ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
div, span, id, class ,[object Object],[object Object],[object Object],[object Object]
div, span, id, class <h1> 勘違い学会 </h1> <div  class =&quot; main &quot;> <h2> 2008-04-19 </h2> <h3> タイトル変えました </h3> <p> どうでもいいですけどね。  </p> </div> <div  class =&quot; sub &quot;  id =&quot; latest_diary &quot;> <h2> 最近の日記 </h2> <ul> <li> 天才コンプレックス </li> </ul> </div> <div  class =&quot; sub &quot;  id =&quot; latest_bookmark &quot;> <h2> 最近のブックマーク </h2> <ul> <li> 世論調査の嘘 </li> </ul> </div>
div, span, id, class ,[object Object],[object Object]
「おまじない」的なもの ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
文法チェッカーを使おう ,[object Object],[object Object],[object Object],[object Object]
文法チェッカーを使おう ,[object Object]
まとめ ,[object Object],[object Object]
課題 ,[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Destaque

情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
Atsushi Tadokoro
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
 
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
 

Destaque (20)

非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみよう
 
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携
 
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
 
2016年12月冥炎強化月間
2016年12月冥炎強化月間2016年12月冥炎強化月間
2016年12月冥炎強化月間
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
 
三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)
 
Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
 
Htmlのコトバ
HtmlのコトバHtmlのコトバ
Htmlのコトバ
 
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
 
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
 
Ptengineの使い方
Ptengineの使い方Ptengineの使い方
Ptengineの使い方
 
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
 
まちづくり門前
まちづくり門前まちづくり門前
まちづくり門前
 

Semelhante a 最速HTML勉強会

IT研修講座
IT研修講座IT研修講座
IT研修講座
annulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
annulus
 
it研修講座
it研修講座it研修講座
it研修講座
annulus
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
mitamex4u
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
 

Semelhante a 最速HTML勉強会 (20)

Cake php4designers
Cake php4designersCake php4designers
Cake php4designers
 
Html5 入門編 その2
Html5 入門編 その2Html5 入門編 その2
Html5 入門編 その2
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
it研修講座
it研修講座it研修講座
it研修講座
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops
 
Webサーバ、HTML
Webサーバ、HTMLWebサーバ、HTML
Webサーバ、HTML
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
YUI
YUIYUI
YUI
 
Module02
Module02Module02
Module02
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
Collecting corpus
Collecting corpusCollecting corpus
Collecting corpus
 
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
 

最速HTML勉強会

  • 2.
  • 5.
  • 6.
  • 7. HTMLとWWWとInternet Cited from: 今さら誰にも聞けなかった「インターネット」と「ウェブ」の違い http://blog.livedoor.jp/ld_directors/archives/50792065.html
  • 8. WWWの3要素 Cited from: ユニバーサル HTML/XHTML urn:isbn:4-8399-0454-5
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. 最初に覚えるHTML要素 画像 (embedded im a g e) img 汎用ブロック (generic container) div アンカー ( a nchor) a リストアイテム ( l ist i tem) li 順序リスト ( o rdered l ist) ol 順不同リスト ( u nordered l ist) ul 段落 ( p aragraph) p 見出し ( h eading) h1, h2, …, h6 文書のタイトル ( title ) title 説明 要素名
  • 20. マークアップしてみよう 勘違い学会 <[ ナンセンス演習 ] エントリのネタ ... | [ どうでもいい ]Nexcare が超強力 ...> 2008-04-19 ■ タイトル変えました どうでもいいですけどね。 最近勘違いが多くなってきたので、原因と対策を皆さんと考えたいと思います。 Permalink | コメント (0) | トラックバック (0) | 22:49
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. はい、できましたー <title> タイトルを変えました - 勘違い学会 </title> <h1> 勘違い学会 </h1> <ol> <li> &lt;[ ナンセンス演習 ] エントリのネタ ... </li> <li> [ どうでもいい ]Nexcare が超強力 ... &gt; </li> </ol> <h2> 2008-04-19 </h2> <h3> タイトル変えました </h3> <p> どうでもいいですけどね。 </p> <p> 最近勘違いが多くなってきたので、原因と対策を皆さんと考えたいと思います。 </p> <ul> <li> Permalink </li><li> コメント (0) </li> <li> トラックバック (0) </li><li> 22:49 </li> </ul>
  • 27.
  • 28.
  • 29. 次に覚えるHTML要素 em より強い強調 ( strong er emphasis) strong 汎用インライン (generic container) span 整形済みテキスト ( pre formatted text) pre 強調 ( em phasis) em 定義文 ( d efinition d escription) dd 定義語 ( d efinition t erm) dt 定義リスト ( d efinition l ist) dl 文書の問合せ先 (information on author) address 引用ブロック (long quotation) blockquote 説明 要素名
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41. div, span, id, class <h1> 勘違い学会 </h1> <div class =&quot; main &quot;> <h2> 2008-04-19 </h2> <h3> タイトル変えました </h3> <p> どうでもいいですけどね。 </p> </div> <div class =&quot; sub &quot; id =&quot; latest_diary &quot;> <h2> 最近の日記 </h2> <ul> <li> 天才コンプレックス </li> </ul> </div> <div class =&quot; sub &quot; id =&quot; latest_bookmark &quot;> <h2> 最近のブックマーク </h2> <ul> <li> 世論調査の嘘 </li> </ul> </div>
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.