html初心者講座
DESCRIPTION
2013/11/15 19:00- @CAMOHOR-HOUSEで行ったHTML初心者講座のスライドです.TRANSCRIPT
![Page 1: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/1.jpg)
HTML初心者講座
Yusuke Miyazaki
HTML for Beginners
![Page 2: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/2.jpg)
この講座について対象
HTMLを書いたことの無い人でも
目標
HTML文書の構造を理解する
簡単なHTML文書を作成できるようになる
![Page 3: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/3.jpg)
HTMLとはHypertext Markup Languageの略
Webで利用されるマークアップ言語
文書の構造を記述するために用いる
!
ここでは基本的にHTML5について記述
![Page 4: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/4.jpg)
HTMLの例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Simple HTTP Page Title</title> </head> <body> <h1>Simple HTTP Page</h1> </body> </html>
![Page 5: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/5.jpg)
HTMLの歴史1990年にCERNで開発された
1993年にHTML 1.0のドラフト
1999年にHTML4.01がW3C勧告
現在HTML5は勧告候補
![Page 6: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/6.jpg)
HTML/XML/XHTMLXML (Extensible Markup Language)
拡張可能なマークアップ言語
XHTML
HTMLをXMLで再定義したもの
![Page 7: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/7.jpg)
HTML/CSS/JavaScriptCSS (Cascading Style Sheets)
色, フォント等のスタイルを記述
文書の構造と装飾の分離のために
JavaScript (ECMAScript)
プログラミング言語
![Page 8: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/8.jpg)
HTMLの例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Simple HTTP Page Title</title> </head> <body> <h1>Simple HTTP Page</h1> </body> </html>
![Page 9: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/9.jpg)
HTMLの例
![Page 10: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/10.jpg)
HTMLの構造DOCTYPE
1行目に記述する
要素 - elements
html要素をルートとする, 入れ子構造になった要素
![Page 11: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/11.jpg)
DOCTYPE必須のpreamble
指定しない場合はブラウザが適切な描画モードで表示しないことある
これを適切に指定することで, 多くのブラウザで仕様に沿った表示が出来る
![Page 12: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/12.jpg)
DOCTYPEの例HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
![Page 13: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/13.jpg)
黄色部分全体 が要素
要素 ≠ タグ
要素 - element<html lang="ja">~~~</html>
html 要素 (element)
![Page 14: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/14.jpg)
開始/終了タグ - tags<html lang="ja">~~~</html>
開始タグ 終了タグ
要素は開始タグで始まり終了タグで終わる
タグはタグ名や属性を<>で囲んだもの
終了タグは</開始タグ名>
![Page 15: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/15.jpg)
空要素の開始タグ - tags<meta charset="utf-8">
開始タグ
空要素は開始タグのみで, 終了タグはない
開始タグは以下のように書いても良い <meta charset="utf-8" />
![Page 16: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/16.jpg)
属性 - attributes<html lang="ja">~~~</html>
lang 属性
属性は属性名=属性値
属性値を省略すると空文字列を指定したのと同じ
![Page 17: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/17.jpg)
コンテンツ - contents<html>~~~~~~~</html>
コンテンツ
コンテンツには他の要素やテキストが入る
その他にも制約あり
空要素はコンテンツを持たない
![Page 18: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/18.jpg)
要素 - elements様々な要素が定義されている
例: html, head, body, div, a etc…
要素毎に記述できる場所, 設定できる属性等が定義されている
定義に従ってHTMLを記述していく
![Page 19: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/19.jpg)
HTMLの例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Simple HTTP Page Title</title> </head> <body> <h1>Simple HTTP Page</h1> </body> </html>
![Page 20: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/20.jpg)
html 要素ルートとなる要素
head要素とbody要素を順にコンテンツに持つ
![Page 21: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/21.jpg)
head 要素html 要素の最初の要素
メタデータコンテンツを記述
メタデータコンテンツ
表示の仕方
他のドキュメントとの関係など
![Page 22: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/22.jpg)
title 要素head 要素に1つだけ記述
コンテンツにページのタイトルを設定
ブラウザではタブやウィンドウに表示される
![Page 23: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/23.jpg)
meta 要素title 要素などでは記述できないメタデータを記述
文字コード, 説明, キーワードなど
空要素
![Page 24: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/24.jpg)
body 要素html 要素の2番目の要素
文書のコンテンツを記述
![Page 25: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/25.jpg)
h1, h2, … h6 要素見出しを表す要素
h1が最高位で, h6が最低位
![Page 26: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/26.jpg)
HTMLの例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Simple HTTP Page Title</title> </head> <body> <h1>Simple HTTP Page</h1> </body> </html>
![Page 27: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/27.jpg)
もう少し複雑なHTMLの例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="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>
![Page 28: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/28.jpg)
もう少し複雑なHTMLの例
![Page 29: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/29.jpg)
p 要素段落を表す要素
![Page 30: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/30.jpg)
ul / li 要素ul
順序が重要でないリストを表す要素
olは順序に意味があるリストを表す要素
li
リストの項目を表す要素
![Page 31: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/31.jpg)
a 要素href 属性を持つ場合
ハイパーリンクを表す要素
href属性に遷移先のURL
href 属性を持たない場合
プレースホルダ
![Page 32: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/32.jpg)
構造と装飾の分離 - CSSこれまでHTMLで作成した構造をCSSで装飾して表示してみる
ここではBootstrapのCSSを利用してみます
head 要素に以下の行を追加する <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
![Page 33: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/33.jpg)
構造と装飾の分離 - CSS
![Page 34: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/34.jpg)
構造と装飾の分離 - CSSHTMLに少し修正を加えると…
![Page 35: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/35.jpg)
構造と装飾の分離 - CSS
![Page 36: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/36.jpg)
まとめHTMLは文書の構造を記述する言語
文書の構造と装飾は分離する
きちんと仕様に従って記述する
![Page 37: HTML初心者講座](https://reader033.vdocuments.pub/reader033/viewer/2022060119/558decda1a28ab27668b45de/html5/thumbnails/37.jpg)
資料W3CによるHTML5勧告候補
http://www.w3.org/TR/html5/
W3C Markup Validation Service
http://validator.w3.org/