Downloaded 25 times
Recommended
More Related Content
What's hot
Similar to HTML初心者講座
More from Yusuke Miyazaki
HTML初心者講座
- 1.
- 2.
- 3.
- 4.HTMLの例<!DOCTYPE html><html lang="ja"><head><metacharset="utf-8"><title>Simple HTTP Page Title</title></head><body><h1>Simple HTTP Page</h1></body></html>
- 5.
- 6.HTML/XML/XHTMLXML (Extensible MarkupLanguage)拡張可能なマークアップ言語XHTMLHTMLをXMLで再定義したもの
- 7.HTML/CSS/JavaScriptCSS (Cascading StyleSheets)色, フォント等のスタイルを記述文書の構造と装飾の分離のためにJavaScript (ECMAScript)プログラミング言語
- 8.HTMLの例<!DOCTYPE html><html lang="ja"><head><metacharset="utf-8"><title>Simple HTTP Page Title</title></head><body><h1>Simple HTTP Page</h1></body></html>
- 9.
- 10.
- 11.
- 12.DOCTYPEの例HTML5<!DOCTYPE html>HTML 4.01<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
- 13.要素 - element<htmllang="ja">~~~</html>html 要素 (element)黄色部分全体 が要素要素タグ
- 14.開始/終了タグ - tags<htmllang="ja">~~~</html>開始タグ終了タグ要素は開始タグで始まり終了タグで終わるタグはタグ名や属性を<>で囲んだもの終了タグは</開始タグ名>
- 15.空要素の開始タグ - tags<metacharset="utf-8">開始タグ空要素は開始タグのみで, 終了タグはない開始タグは以下のように書いても良い<meta charset="utf-8" />
- 16.属性 - attributes<htmllang="ja">~~~</html>lang 属性属性は属性名=属性値属性値を省略すると空文字列を指定したのと同じ
- 17.
- 18.要素 - elements様々な要素が定義されている例:html, head, body, div, a etc…要素毎に記述できる場所, 設定できる属性等が定義されている定義に従ってHTMLを記述していく
- 19.HTMLの例<!DOCTYPE html><html lang="ja"><head><metacharset="utf-8"><title>Simple HTTP Page Title</title></head><body><h1>Simple HTTP Page</h1></body></html>
- 20.
- 21.
- 22.
- 23.meta 要素title 要素などでは記述できないメタデータを記述文字コード,説明, キーワードなど空要素
- 24.
- 25.h1, h2, …h6 要素見出しを表す要素h1が最高位で, h6が最低位
- 26.HTMLの例<!DOCTYPE html><html lang="ja"><head><metacharset="utf-8"><title>Simple HTTP Page Title</title></head><body><h1>Simple HTTP Page</h1></body></html>
- 27.もう少し複雑なHTMLの例<!DOCTYPE html><html lang="ja"><head><metacharset="utf-8"><title>楠 太郎</title></head><body><h1>楠 太郎</h1><h2>自己紹介</h2><p>Consectetur iusto magnam dignissimos quaerat aspernatur, eos quisquam. </p><h2>好きな言語</h2><ul><li>Python</li><li>C++</li><li>Scheme</li></ul><h2>リンク</h2><ul><li><a href="https://twitter.com/CamphorKyoto">Twitter @CamphorKyoto</a></li><li><a href="https://www.facebook.com/Camphorcamphor">Facebook Page</a></li></ul></body></html>
- 28.
- 29.
- 30.ul / li要素ul順序が重要でないリストを表す要素olは順序に意味があるリストを表す要素liリストの項目を表す要素
- 31.a 要素href 属性を持つ場合ハイパーリンクを表す要素href属性に遷移先のURLhref属性を持たない場合プレースホルダ
- 32.構造と装飾の分離 - CSSこれまでHTMLで作成した構造をCSSで装飾して表示してみるここではBootstrapのCSSを利用してみますhead要素に以下の行を追加する<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
- 33.
- 34.
- 35.
- 36.
- 37.資料W3CによるHTML5勧告候補http://www.w3.org/TR/html5/W3C Markup ValidationServicehttp://validator.w3.org/