HTML5初心者メモ

#HTML5初心者向け
##はじめに
[@MiRai](https://twitter.com/Flture)です。HTML/CSSのメモ代わりとして随時更新します。Swiftページも初心者向けに更新していこうと思います。自分も学習中の身であり、完結に書いていくのでさらっと全部読んでいただき、詳しく知りたい方は個々に調べて頂く形でお願いします。
##サンプルコード
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>

</body>
</html>
```
###基本構成

基本構成は`<html>`タグ、`<head>`タグ、`<title>`タグ、`<body>`タグの４種類です。

 >- `<!DOCTYPE>`はHTML5の宣言です。
 >- `<html>`はHTML自体を始めるための宣言です。
 >- `<head>`は文書のヘッダ情報（文書に関する情報）を表します。
 >- `<title>`はホームページのタイトルです。
 >- `<body>`はブラウザに表示される文書の本体を記述します。

そして個々に開始タグと終了タグが存在します。例)`<html>`と`</html>`

###見出しと段落

```html
<h1>見出し</h1>
```
`<h1>`は見出しです。`<h1>`から`<h6>`まで存在し、`<h1>`が１番大きく、`<h6>`が１番小さい見出しとなります。

```html
<p>段落</p>
```
`<p>`タグ(p要素とも呼ばれる)は段落となります。段落とはひとかたまりになってる文と考えてよいでしょう。

##サンプルコード２

<img width="866" alt="スクリーンショット 2016-06-25 22.05.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/131119/a6378c5f-eadc-d217-2375-5c1887589364.png">



```html
<!DOCTYPE html>
<body style="background-color:#D8D8D8">
<html>
<head>
<title>自己紹介</title>
</head>
<body>

<h1>MiRai</h1>
<img src = "http://i.imgur.com/LHoZoRq.png" witdh ="256" height ="256" alt = "profilePic">

<h2>About me</h2>

<ul>
<li>Live in NewportBeach </li>
<li>I'm from Japan.</li>
<li>technology and art is my life.</li>
</ul>

<hr>

<h2>My favorite</h2>
<ol>
<li>go to museum weekend.</li>
<li>listen new music.</li>
<li>making something with my computer.</li>
</ol>

<hr>

<dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日生まれ。偉大なアーティスト</dd>

<dt>坂本龍馬</dt>
<dd>1867年12月10日生まれ。偉大な志士</dd>
</dl>

</body>
</html>
```

上から順番に説明していきたいと思います。
オンラインでhtmlコード実際に確認したい場合、色々ありますが自分は[W3School](http://www.w3schools.com/)で右側にある[Try it Self](http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default)を使用しています。コードをコピペするのもよし、自分で弄るのもよし。また、他のサイトの方が使いやすいならそちらを使ってください。

###背景画像

HTML記述の背景画像は
```html
<body style="background-color:#D8D8D8">
```
となります。この`#D8D8D8`は[カラーコード](http://htmlcolorcodes.com/)（シャープ（#）に続く6桁の16進数）です。また、`color:orange`等の英語での記述でも色は変更できます。

###タイトル

```html
<title>自己紹介</title>
```
題名通りホームページのタイトルとなります。

###`<hr>`タグ

線を引きたいときは`<hr>`タグを使用します。終了タグはありません。


###`<img>`要素

```html
<img src = "http://i.imgur.com/LHoZoRq.png" witdh ="256" height ="256" alt = "profilePic">
```

```html
<img src="画像へのパス" width="画像の幅" height="画像の高さ" alt="代替テキスト">
```
###画像へのパス
画像へのパスのところに画像名またはURLを指定します。
今回の場合、ローカルではなくURL指定しています。自分は[Imgur](http://imgur.com/)というサイトを経由して画像をアップデートしています。このサイトの場合、アップデートした後に、Direct URLを選ぶことを忘れないで下さい。この辺は個々に探してもらうのが良いかと思います。

###画像の大きさ
`width="画像の幅" height="画像の高さ"`はpx(ピクセル)となってます。
今回は幅高さ共に256pxに指定してあります。

###代替テキスト

代替テキストとは画像が表示されなかった場合に、表示されるテキストです。

###`<LI>`タグ

```html
<ul>
<li>Live in NewportBeach </li>
<li>I'm from Japan.</li>
<li>technology and art is my life.</li>
</ul>

<ol>
<li>go to museum weekend.</li>
<li>listen new music.</li>
<li>making something with my computer.</li>
</ol>
```



```html
<タグの種類>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</タグの種類>
```

基本的にはこのような構成になっています。
<LI>タグはList Itemの略で、リスト項目を作成する時に使用します。
今回タグの種類は２種類使用しています。`<ul>`タグと`<ol>`タグです。


####`<ul>`タグ

Unordered listの略で、`・`でリストが表示されます。

####`<ol>`タグ
Ordered listの略で、数字でリストが表示されます。

###定義リスト

```html

<dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日生まれ。偉大なアーティスト</dd>

<dt>坂本龍馬</dt>
<dd>1867年12月10日生まれ。偉大な志士</dd>
</dl>

```

`<dl>`はDefinition Listの略で、`<dt>`で定義語、`<dd>`で定義説明となります。

Next coming soon...