初心者でも出来るHTML入門2

## 1.事前知識
- [初心者でも出来るHTML入門1](https://qiita.com/ryome/items/9ec3819e5e9ab5321553)

事前知識として、上記リンクの内容が必要です。

## 2.HTMLのタグについて

| タグ                     |    内容                                   |
|:------------------------|:------------------------------------------|
| `<html>`                | HTML文書であることを示す。                  |
| `<head>`                | 文書全体の基本的な情報(ヘッダ情報)を定義する。|
| `<title>`               | サイトのタイトルを設定する。　　　　　　　　  |
| `<meta>`                | サイトのメタ情報を設定する。          　　　 |
| `<body>`　              | コンテンツの中身を書く。    　　　　　　　　　|
| `<h1～h6>`              | 見出し作成に使用する。     　　 　　　       |
| `<p>`  　               | 段落を作成する際に使用する。               　|
| `<b>`                   | テキストを太字にする。 　　　　　　　　　     |
| `<br/>`                 | 改行する。   　　　　　　　　　　　　　　     |
| `<u>`                   | テキストに下線（アンダーライン）を引く。      |
| `<a>`                   | リンクの場所を指定する。                     |
| `<ol>,<ul>,<li>`        | リストを作成する。                          |
| `<table>,<tr>,<td>,<th>`| 表を作成する。                     　　　　　|

- 上の表は、htmlの `タグ` と `タグの内容` について書いています。
- htmlでは、`<` と `>` に囲まれた半角の英数字を `タグ` と呼び、`<開始タグ>` と `</終了タグ>` の2つを1セットとして使用します。

## 3.記述例

```html:index.html
<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->

        <!-- タイトル -->
        <title>タイトル名</title>
        
        <!-- 文字コードの指定 -->
        <meta charset="utf-8" />
        
    </head>

    <body>
        <!-- コンテンツ -->

        <!-- 見出し -->
        <h1>見出し1</h1>
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h4>見出し4</h4>
        <h5>見出し5</h5>
        <h6>見出し6</h6>

        <!-- １つの段落（パラグラフ）を表す -->
        <p>test1</p> 
        <p>test2</p> 

        <!-- テキストを太字にする -->
        テキストを<b>太字</b>にする

        <!-- 改行する -->
        <br/>

        <!-- テキストに下線（アンダーライン）を引く -->
        テキストに<u>下線（アンダーライン）</u>を引く<br/>

        <!-- リンクの場所を指定する -->
        <a href="index.html#相対パス">相対パス</a><br>
        <a href="C:/Users/owner/Desktop/index.html#絶対パス">絶対パス</a><br>
        <a href="../index.htm">1つ上のディレクトリ</a><br>
        <a href="mailto:test@test.com">メール</a><br>

        <!-- リストを作成する -->
        <ol type="A">
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ol>
        <ul type="square">
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ul>
        
        <!-- 表を作成する -->
        <table border="1">
            <tr>
                <th>見出し1</th>
                <th>見出し2</th>
                <th>見出し3</th>
            </tr>
            <tr>
                <td>コメント1</td>
                <td>コメント2</td>
                <td>コメント3</td>
            </tr>
            <tr>
                <td>コメント1</td>
                <td>コメント2</td>
                <td>コメント3</td>
            </tr>
        </table>
    </body>
</html>
```

上記は `2.HTMLのタグについて` の表の記述例です。
中身の文をコピーして、文字コードは `UTF-8` を指定し、ファイル名を `index.html` でデスクトップに保存するとブラウザではこうなります↓↓
![htmlの基礎2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/376c356b-d694-d96e-d4a3-70f668bf0ed2.png)

画像のようになれば成功です。

## 4.GitHub
GitHubにソースコードを公開しています。

https://github.com/ryomeblog/qiita/tree/master/%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E5%87%BA%E6%9D%A5%E3%82%8BHTML%E5%85%A5%E9%96%802

## 5.関連
- [初心者でも出来るHTML入門3](https://qiita.com/ryome/items/72408fb260d1576fcb25)
- [初心者でも出来るHTML,JavaScript入門4](https://qiita.com/ryome/items/152ebca06eda9fe05b39)
- [初心者でも出来るHTML,JavaScript入門5](https://qiita.com/ryome/items/c5e7716ff58bbced5173)
- [初心者でも出来るHTML,JavaScript入門6](https://qiita.com/ryome/items/4a75d5d3df0c6355accd)
- [初心者でも出来るHTML,JavaScript入門7](https://qiita.com/ryome/items/6d58c666a4b296e8cc02)