参照：http://dotinstall.com/lessons/basic_html_v2
HTMLとは
ホームページを作るための言語
Hyper Text Markup Language
<タグ 属性=”値”>テキストタグ>
<タグ>
使用するHTML
HTML5（草案・caniuse.com参照）
主な構造・headの中身
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="初めてのHTML文書です。">
<title>初めてのHTML</title> <!-- 仮 -->
<style>
p{ color: red;}
</style>
<link rel="stylesheet" href="mystyle.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>こんにちは！</p>
</body>
</html>
- <!DOCTYPE html> 文書宣言
- <html lang="ja"> 日本語
- <!-- --> 隠しコメント
headの中身
- <meta charset="utf-8"> 文字コードの指定
- <meta name="description" content="初めてのHTML文書です。">
検索エンジンのために正確に書くこと - <style> p{ color: red;} </style> スタイルの指定（文字）
- <link rel="stylesheet" href="mystyle.css"> スタイルシートの指定
- <link rel="shortcut icon" href="favicon.ico"> ファビコンの指定
bodyの中身
文字関連
見出し
`
大見出し
中見出し
小見出し
`改行
<p>こんにちは！<br>こんにちは！</p>
強調
<p><strong>こんにちは！</storong></p>
ライン
<hr>
リスト関連
リスト（ul：Unordered List：番号なし）
`
- apple
- banana
リスト（ol：Ordered List：番号あり）
`
- apple
- banana
- li：list Item
##表関連
表
`
| name | 2010 | 2011 |
|---|---|---|
| taguchi | 200 | 210 |
| fkoji | 300 | 420 |
| dotinstall | 500 | 380 |
- tr： table row（行）
- th： table header
- td： table data
リンク関連
aタグのリンク
`
ページ内リンク
`
hello 2 !!!
`画像関連
<img src="cart.jpg" width="500" height="283" alt="カートの写真です。" title="カートの写真">
- 縮小も可能
- alt＝アクセシビリティを高める
- title＝マウスオーバーで表示
入力部品関連 formの中身
form始まり・情報の送り先の指定
<form action="survey.php" method="post">
form終わり
</form>
一行
<p>名前：<input type="text" name="name" size="68" maxlength="5" required></p>
- maxlength：最大数
- required：必須入力
テキストエリア
<p>メモ：<textarea name="memo"></textarea></p>
パスワード
<p>パスワード：<input type="password" name="password"></p>
隠しデータ
<p><input type="hidden" name="user_id" value="32"></p>
（user_idという名前で値32がsurvey.phpに送られる）
日付
<p>日付：<input type="date" name="birthday"></p>
URL
<p>URL：<input type="url" name="url"></p>
E-mail
<p>email：<input type="email" name="email"></p>
※上記3つはHTML5仕様
ラジオボタン
`
Colors:
Red
Blue
Green
チェックボックス
`
Colors:
Red
Blue
Green
テキスト部分をクリックしても選択できる
`
Red
遠くのテキスト部分をクリックしても選択できる
`
Blue
プルダウンメニュー
`
- size：一気に選択肢を見れる
- multiple：複数選択
送信ボタン
<p><input type="submit" value="送信！"></p>
特定の範囲だけをスタイリングする
-
div：汎用ブロック要素（前後に改行が入る）
-
span：凡庸インライン要素（前後に改行が入らない）
⇒特定の範囲だけスタイリングすることができる -
id：その文書に一つだけしか使えない
-
Class：複数に使える
スタイリングはスタイルシートで学ぶ
div
`
こんにちは！こんにちは！
span
<p>こんにちは！<span class="notice">こんにちは！</span></p>
※囲った部分のみスタイリング
構造関連
- header
- footer
- nav
- article
- aside
- section
header
`
起業日記
home profile `article
`
リリース完了！
うれしい！
`aside
`
このサイトについて
taguchiの起業日記です。
`footer
`
copyright 2013 taguchi
`divでの指定
`
その他
実体参照（要検索）
<p>これは<p>です。</p>
style属性
<p style="color:red;">こんにちは！</p>
※基本的にHTMLは構造を示すものでデザインするものではない、書くべきではない
script
<script src="myscript.js"></script>
※bodyタグの一番最後に書くこと