HTML入門（ドットインストール）


基本内容
ドットインストール html 入門で学ぶことのまとめ。


＊HTML（Hyper　Text　Markup　Language）ここでは、HTML５
　ホームページをつくるための言語 
　[caniuse.com](http://caniuse.com/) でどのバージョンでサポートされているかがわかる。



#コードまとめ

```html
<!DOCTYPE>
<html lang="ja">
<head>
      <meta charset="UTF-8">
     <title>初めてのHTML</title>
     <meta name="description" content="初めてのhtml文書です。">    <!-- 検索結果で文書表示　-->
     <link rel="shortcut icon" href="favicon.ico">    <!-- ファビコンの表示　-->
</head>
<html>
     <body>
          <h1>大見出し</h1>
          <h2>中見出し</h2>
          <h3>小見出し</h3>
          <p>こんにちは！<br>

<!-- <br>改行タグ   -->
               <strong> こんにちは！</strong></p>
<!--  <strong>で意味的に強調する -->
               <hr>
<!-- <hr> 水平線を引く -->

             <p><a href="http://google.com">Google！</a></p>
<!-- 別タブで開く　target="_blank" —>

 <p><a href="#rink">ページ内リンク</a></p>
     <p id="rink">リンク先</p>

           <ul>
               <li>apple</li> <!-- list item -->
               <li>banana</li>
          </ul>
<!-- <ul> unordered list -->

          <ol>
               <li>apple</li>
               <li>banana</li>
          </ol>
<!-- <ol> ordered list —>

<!--
 tr :table row (行)
th :table header
td :table data
-->
<table>
     <thead>
          <tr><th>name</th><th>2010</th><th>2011</th></tr>
     </thead>
     <tbody>
          <tr><td>@shizuma</td><td>200</td><td>210</td></tr>
          <tr><td>@shizuma</td><td>200</td><td>210</td></tr>
          <tr><td>@shizuma</td><td>200</td><td>210</td></tr>
     </tbody>
</table>

<img src="cart.jpg" width="500" height="280" alt="カートの写真" title="カートの写真">
<!-- キャプションの表示 -->

<form action="survey.php"  method="post">
          <p>名前 :<input type="text" name="name" size="60" maxlength="5" required></p>
          <!-- required 入力を求める -->
          <p>パスワード :<input type="password" name="password"></p>
          <p><input type="hidden" name="user_id" value="32">
          <p>メモ :<textarea name="memo"></textarea></p>
          <p><input type="submit" value="送信！"></p>
          <p>日付 :<input type="date" name="birthday"></p>
          <p>URL :<input type="url" name="url">

     <!-- radio 一つだけ選択
　　     checkbox 複数選択
            label 指定した文字を選択しても、チェックが入るようにする。→ユーザビリティーの向上　 -->
          <p>
               Colors:
               <label><input type="radio" name="color" value="red">Red</label>
               <input type="radio" name="color" value="blue"><label for="blue">Blue</label>
               <input type="radio" name="color" value="green">Green
          </p>
          <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>
<!-- select
      size :一度に複数の選択肢を表示
      multiple :複数の同時選択を可能にする。　-->
          <select name="color" size="5" multiple>
               <option value="red">Red</option>
               <option value="blue">Blue</option>
               <option value="green">Green</option>
          </select>

          <p>email : <input type="submit" value="送信！"></p>
</form>

<!--
スタイリング
div :汎用ブロック要素（前後に改行が入る）
span: 汎用インライン要素（前後に改行が入らない）

id: その文書に一つだけの要素
class: 複数あっても良い

 構造的
　header
    footer
    nav
    article 副次的情報
    section-->
<div id="main">
<p>こんにちは！こんにちは！</p>
<p>こんにちは！<span class="notice">こんにちは！</span></p>
<p>こんにちは！<span class="notice">こんにちは！</span></p>

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

<article>
     <h2>リリース完了！</h2>
     <p>嬉しい</p>
</article>

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

<footer>
       copyright 2014 @shizuma
</footer>

<!-- 実態参照
　　style 属性
　　script-->
               <p>これは　&lt; p &gt; です。</p>
               <p style="color:red;">こんにちは！</p>
               <script src="myscript.js"></script>
     </body>
</html>
```




 
#html入門補足
                    
* コメント`<!-- コメント　-->` 数行でも可
 
* スタイルの書き方

    ```css
    <style>
         p{ color:red;}
    </style>
    ```