HTML入門

参照：http://dotinstall.com/lessons/basic_html_v2

# HTMLとは
ホームページを作るための言語
Hyper Text Markup Language
> <タグ 属性=”値”>テキスト</タグ>
<タグ>

## 使用するHTML
HTML5（草案・caniuse.com参照）

# 主な構造・headの中身
```lang:sample1
<!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>
```

* &lt;!DOCTYPE html>　文書宣言
* &lt;html lang="ja">　日本語
* &lt;!-- -->　隠しコメント

## headの中身

* &lt;meta charset="utf-8">　文字コードの指定
* &lt;meta name="description" content="初めてのHTML文書です。">
　検索エンジンのために正確に書くこと
* &lt;style> p{ color: red;} &lt;/style>　スタイルの指定（文字）
* &lt;link rel="stylesheet" href="mystyle.css">　スタイルシートの指定
* &lt;link rel="shortcut icon" href="favicon.ico">　ファビコンの指定


# bodyの中身

## 文字関連
見出し
`<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>`

改行
`<p>こんにちは！<br>こんにちは！</p>`

強調
`<p><strong>こんにちは！</storong></p>`

ライン
`<hr>`

## リスト関連
リスト（ul：Unordered List：番号なし）
`<ul>
 <li>apple</li>
 <li>banana</li>
</ul>`

リスト（ol：Ordered List：番号あり）
`<ol>
 <li>apple</li>
 <li>banana</li>
</ol>`

* li：list Item

##表関連
表
`<table>
　<thead>
　　<tr><th>name</th><th>2010</th><th>2011</th></tr>
　</thead>
　<tbody>
　　<tr><td>taguchi</td><td>200</td><td>210</td></tr>
　　<tr><td>fkoji</td><td>300</td><td>420</td></tr>
　　<tr><td>dotinstall</td><td>500</td><td>380</td></tr>
　</tbody>
</table>`

* tr： table row（行）
* th： table header
* td： table data

## リンク関連

aタグのリンク
`<p><a href="http://google.com" target="_blank">Google</a></p>
<p><a href="hello.html">Hello</a></p>`

ページ内リンク
`<p><a href="#hello2">hello2</a></p>
<p id="hello2">hello 2 !!!</p>`

## 画像関連

`<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仕様

ラジオボタン
`<p>
 Colors:
　<input type="radio" name="color" value="red">Red
　<input type="radio" name="color" value="blue">Blue
　<input type="radio" name="color" value="green">Green
</p>`
※1つだけ

チェックボックス
`<p>
 Colors:
　<input type="checkbox" name="color" value="red">Red
　<input type="checkbox" name="color" value="blue">Blue
　<input type="checkbox" name="color" value="green">Green
</p>`
※複数選択可能

テキスト部分をクリックしても選択できる
`<p>
<label><input type="radio" name="color" value="red">Red</label>
</p>`

遠くのテキスト部分をクリックしても選択できる
`<p>
<input type="checkbox" name="color" value="blue" id="blue"><label for="blue">Blue</label>
</p>`

プルダウンメニュー
`<select name="color" size="5" multiple>
 <option value="red">Red</option>
 <option value="blue">Blue</option>
 <option value="green">Green</option>
</select>`

* size：一気に選択肢を見れる
* multiple：複数選択

送信ボタン
`<p><input type="submit" value="送信！"></p>`


## 特定の範囲だけをスタイリングする
* div：汎用ブロック要素（前後に改行が入る）
* span：凡庸インライン要素（前後に改行が入らない）
⇒特定の範囲だけスタイリングすることができる

* id：その文書に一つだけしか使えない
* Class：複数に使える

スタイリングはスタイルシートで学ぶ

div
`<div id="main">
<p>こんにちは！こんにちは！</p>
</div>`
※前後に改行を入れてスタイリング

span
`<p>こんにちは！<span class="notice">こんにちは！</span></p>`
※囲った部分のみスタイリング


## 構造関連
* header
* footer
* nav
* article
* aside
* section

header
`<header>
   <h1>起業日記</h1>
　　<nav>
　　　　home
　　　　profile
　　</nav>
</header>`

article
`<article>
　　<h2>リリース完了！</h2>
　　<p>うれしい！</p>
</article>`

aside
`<aside>
　　<h3>このサイトについて</h3>
　　<p>taguchiの起業日記です。</p>
</aside>`

footer
`<footer>
　<p>copyright 2013 taguchi</p>
</footer>`

divでの指定
`<div id="header">
　　<h1>起業日記</h>
　　　<nav>
　　　　home
　　　　profile
　　　</nav>
</div>`


## その他

実体参照（要検索）
`<p>これは&lt;p&gt;です。</p>`

style属性
`<p style="color:red;">こんにちは！</p>`
※基本的にHTMLは構造を示すものでデザインするものではない、書くべきではない

script
`<script src="myscript.js"></script>`
※bodyタグの一番最後に書くこと