HTML入門

01HTMLとは何か

・HTML5:HTMLにはバージョンがあり、HTML5が主流である。
・HTMLの仕様：W3Cと呼ばれる団体が定義、ブラウザによっては対応していないこともある
・caniuse.com:どのHTMLのバージョンやタグがどのブラウザに対応してるかわかるサイト

02必要なツールを用意しよう

・ブラウザ：Chrome
・テキストエディタ：Atom
・フォント：Ricty Diminished(0とOの違いや全角スペースの可視化)regularで十分
・エディタの設定：File Encodingをutf8に設定、Font FamilyをRicty Diminishedに設定、Show Invisiblesにチェック、日本語の折り返しに関するPackageであるjapanese-wrapをinstall、Toggle Tree Viewを非表示に

03タグと属性を理解しよう

・タグ：文章を意味づけする役割→<タグ>文章or<タグ>文章</タグ>
・属性：タグに追加情報を加える役割、複数付けられる→<タグ属性名=値>文章
※Markupする文章がそもそもない場合は<タグ>or<タグ/>のみの形になる
・<p>：使用例<p class=”message”>Hello World</p>

04はじめてのHTML

・<!DOCTYPE html>
・<html lang=”ja”></html>
・<head></head>
・<body></body>
・HTMLは構造的な文書であり、入れ子構造をよく使う、構造を分かりやすくするために字下げ(インデント)を行う
・<meta charset=”utf8”>、<head></head>内、文字構造を定義、機能していないと文字化けになる
・<title></title>、<head></head>内

05meta、linkタグを使ってみよう※2つとも閉じタグがない!

・<meta name=”description” content=”文書の説明”>、contentはクローラによって確認される、<head></head>内
・<link rel=”shortcut icon” href=”画像の名前”>、ファビコンの設定、<head></head>内

06styleタグを使ってみよう

・<style></style>：中にCSSを書くことができる
・<link>：<link rel=”stylesheet” href=”ファイル名.css”>でCSSファイルを呼び出し※styleタグ不要
・style属性：タグ内にstyle属性を書く

07id、class、style属性を使ってみよう

・グローバル属性：id、class、styleなど
・使用例<p id=”message>文章</p>、idは一回しか使えない
・使用例<p class=”message active”>文章<p>、classは複数回使える、複数のclassを同時に使える
・style属性はstyleタグの属性版、特定の文章だけのCSSを定義できる

08セクションについて理解しよう

09アウトラインを意識してみよう

10h1 h6タグで見出しを付けよう

・<header>,<footer>,<nav>,<article>,<aside>,<section>,<h1> – <h6>などのタグ
・上記のタグは基本的に<body></body>内部に使われる
・<article>独立したメインコンテンツ、<aside>は重要でない補足情報に使う
・<h1> –<h6>は<section>,<header>,<article>,<aside>内の階層構造を表すのに使う
・<nav></nav>は<header></header>の中で使われていた
・<ariticle>や<aside>が<section>の中に入ったりする

11p、hr、pre、blockquote、divを使おう※`<hr>`には閉じタグがない

・<p>：段落
・<hr>：horizonal rule、水平線、罫線
・<pre>：pre-formated text、改行や字下げを保持する
・<blockquote>：引用
・<div>：CSSと組み合わせてスタイリング、グルーピング<div style=””></div>などのように使う

12ol、ul、li、dl、dt、ddでリストを作ろう

・<ol>：ordered list、番号リスト
・<ul>：unordered list、箇条書き
・<li>：list item、<ol></ol>or<ul></ul>の中に入る

・<dl>：definition list
・<dt>：definition term、<dl></dl>の中に入る
・<dd>：definition description、<dl></dl>の中に入る
※<p>,<h1>,<li>などを併用する必要はない!

13strong、br、spanを使ってみよう※`<br>`に閉じタグはない!

・<strong>：重要な箇所に使う、<p></p>内の単語の単語を<strong></strong>で囲むなど
・<br>：改行
・```：テクストの一部にスタイリングを使う時、など

14aタグでリンクを設定しよう```

・<a></a>：<a href=”リンク先URL” target=”_blank”></a>、target=”_blank”で新しいタブで開いてくれる、
・ページ内リンク：<a href=”#「id名」”></a>、リンク先にid属性追加<id=”id名”>

15imgタグで画像を表示させよう※閉じタグがない!

・<img>：<p></p>の中に入る、<p><img src=”ファイル名”></p> <p><img src=”ファイル名” width="150" height="150" alt="画像が出ないときに表示される文字"></p>

16tableタグで表組みを作ろう

・<table>：<table><thead><tr><th>Size</th><th>Hight</th><tr></thead><tbody><tr><td>S</td><td>165</td></tr><tr><td>M</td><td>170</td></tr><tr><td>L</td><td>175</td></tr></tbody></table>
・<thead>：
・<tbody>：
・<th>：table header
・<tr>：table row
・<td>：table data
・<td colspan=”2”>文章</td>：二つの行を連結する

17formタグでフォームを作ろう

・<form>：<form action=”survey.php” method=”post”><p>名前やメアド<input type=”text” name=”actionのデータ送り先がこのデータを認識する時に使う名”></p></form>
・action属性：入力データをどこに送るか
・method属性：get or post、データを送る方式

18inputタグで入力部品を作ろう※閉じタグなし!

・<imput>の属性：<p>文章<input type=”text” name=”email” size=”” maxlength=”” value=”” placeholder=””></p>
・Placeholder属性とvalue属性の使い分け
・type =”text”or”password”or”hidden”がある

・使用例：<input type=”hidden” name=”user_id” value=”23423”>、ページ上に表示させずに何らかの情報を送りたい時

19textarea、buttonタグを使ってみよう

・<textarea>： <p>文章<textarea name=”comment” cols=”40” rows=”5”></textarea></p> or <p>文章<textarea name=”comment” cols=”40” rows=”5”>コメント</textarea></p>
・cols属性：横幅
・rows属性：縦幅
・<button>：
<p><button type=”submit”>ボタン上に書かれる文章</button></p> Or 協調するときは <p><button type=”submit”><strong>ボタン上に書かれる文章</strong></button></p> Or 送信はしないが画面上で何らかの処理をするボタンを作れる、郵便番号からの住所検索など <p><button type=”button”>ボタン上に書かれる文章</button></p> ※<p><input type="submit" value="送信!"></p>との区別は?
・disabled属性：項目が入力されるまで入力ボックスや送信ボタンを無効化する

20checkbox、radio、labelを使ってみよう
・チェックボックス：
<p>スマホ <input type=”checkbox” name=”phone” value=”android”>android <input type=”checkbox” name=”phone” value=”iPhone”>iPhone </p>
・複数の選択肢から一つだけ選択：
<p>color <input type=”radio” name=”color” value=”red”>red <input type=”radio” name=”color” value=”blue”>blue </p>
・<label>：横の文字をクリックするだけでチェックボックスやラジオボタンにチェックがつく、 <label><input type=”checkbox” name=”phone” value=”android” checked>android</label> Or <input type=”checkbox” name=”phone” value=”android” checked id=”android”> <label for=”android”>android</label>

21selectタグでセレクトボックスを作ってみよう

<p>都市：
<select name=”city”>
<option value=”tokyo”>Tokyo</option>
<option value=”osaka”>Osaka</option>
<option value=”nagoya”>Nagoya</option>
<option value=”fukuoka”>Fukuoka</option>
</select>
</p>```
・```<option>：<select></select>内に選択肢を書くためのタグ```
・multiple属性：複数選択できるようになる
・size属性：

#22HTML5から使える属性を使ってみよう
・```<input>の新たな属性：<input type=”email”>or<input type=”number”>or
<input type=”date”>or<input required>```
・```<form>の新たな属性：<form action=”” method=”” novalidate>```
・caniuseでこれらの属性が使用できないブラウザがわかる

#23文字参照を使ってみよう
・文字参照：タグをHP内で紹介したい時などタグがHTMLの構造のためだと判断されブラウザで表示されないことがある。
・```数値文字参照：「&#60;」```
・```文字実体参照：「&lt;」、<p>「&lt;p&gt;タグ」</p>で「<p>タグ」と表示される
Or
「“」ダブルクオーテションマークは、&quot;で表せる
Or
「&」は&amp;

24コンテンツモデルを理解しよう

・タグにはW3Cによってカテゴリーとコンテンツモデルが定義されている
・カテゴリー：どの分類か?
・コンテンツモデル：どのカテゴリーのタグがそのタグの中に入れられるか?
・トランスペアレント：親要素のコンテンツモデルを使ってという意味

ドットインストールのHTML入門の動画を見て分かったこと(箇条書き)