HTMLの学習【新人エンジニア：未経験者向け】

#HTMLの学習

・PCのテキストエディタを使います。
メモ帳でも、フリーのアプリでもなんでもいいです。自分の好きなエディタを準備して、
ファイルを作成しましょう。

・一旦、ファイル名は「index.html」と名前を付けてPCのどこかに
保存してください。デスクトップとかでもかまいません。

・再度、index.htmlをテキストエディタで開きます。
その中に、HTMLの土台となるタグを書いていきます。

・タグは全て半角で記述します。

```lang:index.html
  <html>
    <head>
    </head>
    <body>
    </body>
  </html>
```

・上を書いた状態で、index.htmlをダブルクリックしても特にブラウザには
何も表示されないかと思います。

・ここから、タイトルを付けてあげてください

```lang:index.html
  <html>
    <head>
      <title>HTMLの学習中</title>
    </head>
    <body>
    </body>
  </html>
```

・そうです。画面は真っ白のままです。ごめんなさい。けど、ブラウザのタブのところに
「HTMLの学習中」って見えてませんか？

・では、次に「文字コードの指定」を行います。
HTMLでは、meta要素というのがあります。
これは、「ブラウザ画面には表示されない文書情報を記述するための要素」という役割を果たします。

その要素に文字コードを指定します。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
    </head>
    <body>
    </body>
  </html>
```

・では、もう一度index.htmlをブラウザで表示してみましょう。
・・・・あれ、タイトルの「学習中」あたりが変な状態になっていませんか？？
(Windowsでやってます。macはゴメンナサイ未検証です)

・これが文字コードの変化による「文字化け」です。

・元々、Windowsの標準文字コードとなっている「Shift-JIS」で作成していたHTMLファイルを、
HTML内の文字コードを変更したため、このような状態になります。

・では、修正しましょう。
テキストエディタでHTMLファイルを開き、「UTF-8」で開いた状態で再度
titleタグのところを「HTMLの学習中」として修正し、UTF-8で保存してください。

・そして、再度index.htmlファイルを表示すると、
正常に表示されるはずです。

![html001.JPG](https://qiita-image-store.s3.amazonaws.com/0/22824/1aeb0884-867c-11cf-ddff-6a91d0fec5bc.jpeg)
こんな感じです。

では、今度は本文の中に文章を作成してみましょう。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
    </head>
    <body>
      Hello! HTMLWorld!
    </body>
  </html>
```

ブラウザでの表示を確認してください。

次に、複数行の文章を書いてみましょう。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
    </head>
    <body>
      Hello! HTMLWorld!<br>
      こんにちは!HTMLの世界!
    </body>
  </html>
```

<br>というタグを用いて複数行を表示しました。
brタグとは、改行(break)タグになります。タグが挿入されている位置で改行します。
brタグは行末に書く方が多いと思います。

別の考え方で複数行を表示する

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
    </body>
  </html>
```

hタグはh1～h6まであり、これらは見出し(heading)タグとなります。
h1が一番上位の見出しとなり、h6が一番下位の見出しとなります。

pタグは段落(paragraph)であることを表します。

■CSSを使ってみよう
HTMLは本来デザインを作ってくれません。
デザインを作る場合はCSSが活躍してくれます。

CSSとは・・・(Wikiより)
Cascading Style Sheet(カスケーディング・スタイル・シート)の略です。
HTMLの要素をどのように修飾(表示)するかを指示する仕様の一つ。
とあります。

では、さっそくCSSの簡単な指定を行ってみましょう。
まずは、head内にCSSを記述するためのスペース確保から始めます。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css"></style>　←これ追加
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
    </body>
  </html>
```

で、このスペースの中に「このタグに対して、こうやります」という事を書いてみます。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
    </body>
  </html>
```

そうすると、h1タグで記載されている文章の文字色が、赤く変わりました。
これがCSSを用いたデザインの変更の考え方になります。

上で段落(pタグ)は記述してみましたので、
次に、「リスト形式」を記載してみましょう。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
      <ul>
        <li>この世界は素晴らしい世界だ</li>
        <li>この世界に生まれてきてよかった</li>        
      </ul>
    </body>
  </html>
```

なんか2つくらいタグが出てきました。
まず、「ul」タグについて。これはリストに順序を付けない場合に利用します。
（黒い丸でリストを並べる）
そのulタグの中に、それぞれリスト行として記載する内容を「li」タグで指定します。

リストに順序を付けたい場合、olタグを使うことによって、上から順番に
1から番号の割り当てが自動で行われます。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
      <ul>
        <li>この世界は素晴らしい世界だ</li>
        <li>この世界に生まれてきてよかった</li>        
      </ul>
      <ol>
        <li>これは最初のリストとして。</li>
        <li>このは次のリストとして。</li>        
      </ol>
    </body>
  </html>
```
では、最後にリンクを作ってみましょうか。
リンクは「a」タグを利用します。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
      <ul>
        <li>この世界は素晴らしい世界だ</li>
        <li>この世界に生まれてきてよかった</li>        
      </ul>
      <ol>
        <li>これは最初のリストとして。</li>
        <li>このは次のリストとして。</li>        
      </ol>
      <a href="https://www.i2c.jp/study/">クリックするな</a>
    </body>
  </html>
```

リンクの開き方は主に2種類あります。
今表示している画面からリンク先にジャンプする挙動と、
別タブを開いてリンク先を表示する方法です。

```lang:index.html
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
      <ul>
        <li>この世界は素晴らしい世界だ</li>
        <li>この世界に生まれてきてよかった</li>        
      </ul>
      <ol>
        <li>これは最初のリストとして。</li>
        <li>このは次のリストとして。</li>        
      </ol>
      <a href="https://www.i2c.jp/study/">クリックするな</a>
      <a href="https://twitter.com/i2c_jp" target="_blank">クリックするなよー</a>
    </body>
  </html>
```

・・・・
ここまで、実はとても大事なことを黙ってていました。
実は、このHTML文書は「種類」が宣言されていないのです。
「種類」？

たとえば、仮にqiitaのサイトを見てみましょう。
サイトを開いて、画面で右クリック→ページのソースを表示、とすると、
その画面のHTMLが見えます。
その一番先頭を見てください。

「<!DOCTYPE html>」こんなんありませんか？
そうです。これがHTMLの「種類」を表す、「DOCTYPE宣言」という
ものになります。
つまり、このHTML文書が「HTML5ですよ」ということを表すには、
この「DOCTYPE宣言」が欠かせないのです。

書いていなくても表示はできますが、表示がブラウザの「互換モード」というものに
なってしまい、正しく表示されない可能性が多くなります。
ですので、必ず宣言しておきましょう。

ちなみに、上の「<!DOCTYPE html>」はHTML5としての宣言形式です。
HTML5が出る前はまた違った書き方になっていました。
今回は深く掘り下げませんが、古いHTML文書などを見ると宣言の種類が違いますので、
一度検索してみてください。

では、DOCTYPE宣言をつけておきましょう。

```lang:index.html
  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTMLの学習中</title>
      <style type="text/css">
        h1 {color:red;} ←これ追加
      </style>
    </head>
    <body>
      <h1>Hello! HTMLWorld!</h1>
      <p>こんにちは!HTMLの世界!</p>
      <ul>
        <li>この世界は素晴らしい世界だ</li>
        <li>この世界に生まれてきてよかった</li>        
      </ul>
      <ol>
        <li>これは最初のリストとして。</li>
        <li>このは次のリストとして。</li>        
      </ol>
      <a href="https://www.i2c.jp/study/">クリックするな</a>
      <a href="https://twitter.com/i2c_jp" target="_blank">クリックするなよー</a>
    </body>
  </html>
```

最終的に表示されるHTML文書はこんな感じになります。
（なかなかのダサさですが）

![html2.JPG](https://qiita-image-store.s3.amazonaws.com/0/22824/d4f4a120-1642-dc2a-44b5-7a41442f792f.jpeg)

HTMLの超基礎講座、一旦ここまでにします。
【2016/08/20更新】