# その他のタグの説明

hello.htmlには登場しないタグについて説明します。

## `img`タグ

HTMLの`img`タグは、画像を表示するためのタグです。`src="..."`の「`...`」の部分にファイル名を指定します（`src`はsource（ソース）を省略したものです。画像のソース（源（みなもと））のファイルを指定することになります）。

たとえば`<img src="pictures/picture000.jpg">`と書くと、HTMLファイルがあるフォルダ（ディレクトリ）内の`pictures`フォルダにある`picture000.jpg`というファイルの画像がブラウザのドキュメント領域に表示されます。

### 属性の指定

`<img>`タグの`scr="..."`の部分のことを属性と呼びます。タグについての付加的な情報を指定するために用います。

`img`タグの`src`属性は表示する画像の場所を指定するものです。場所としてはこの例のようにHTML文書が置かれているファイルからの相対的な位置を示す場合もありますし、URLを指定することもできます。URLを指定すると、ネット上で公開されている画像を表示することができます（ただし、他人の画像等を利用する場合は、承諾を得る必要があります）。

`img`タグの`src`属性は「必須の属性」です。どの画像を表示するか指定がないと`img`タグの存在意義がありません。

これに対して必須ではない属性（オプションの属性）も存在します。たとえば画像の大きさを指定するために`style`属性を指定できますが、それは省略することができます。

## `br`タグ

ドキュメント領域の文章に「改行」を入れるにはHTMLの`br`タグを使う必要があります。次のようにすることで、「おはようございます」「こんにちは」「こんばんは」がそれぞれ別の行に表示されます。

    おはようございます<br>
    こんにちは<br>
    こんばんは

一方、次のように`br`タグを書かないと、改行はされず1行に表示されてしまいます。

    おはようございます
    こんにちは
    こんばんは

結果は次のようになってしまいます。

    おはようございます こんにちは こんばんは

## 順序付きリストと順序なしリスト

次のように`ol`タグを使うことで「順序付きリスト（Ordered List）」を出力できます。`li`はlist item（リストの要素）の意味です。

    <ol>
      <li>
        私はプログラミングが好きになる〜〜
      </li>
      <li>
        私はプログラミングが好きになる〜〜
      </li>
      ...
      【中略】
      ...
      <li>
        私はプログラミングが好きになる〜〜
      </li>
    </ol>

出力は次のようになります。

     1. 私はプログラミングが好きになる〜〜
     2. 私はプログラミングが好きになる〜〜
     3. 私はプログラミングが好きになる〜〜
    ... 【中略】 ...
    15. 私はプログラミングが好きになる〜〜
    16. 私はプログラミングが好きになる〜〜

同様に、`ul`タグを使うことで「順序なしリスト（Unordered List）」を出力できます。

    <ul>
      <li>
        私はプログラミングが好きになる〜〜
      </li>
      <li>
        私はプログラミングが好きになる〜〜
      </li>
      ...
      【中略】
      ...
      <li>
        私はプログラミングが好きになる〜〜
      </li>
    </ul>

出力は次のようになります。

     ・私はプログラミングが好きになる〜〜
     ・私はプログラミングが好きになる〜〜
    ... 【中略】 ...
     ・私はプログラミングが好きになる〜〜

## 表関連のタグ

次のようなHTMLコードを書くことで表（table）を作ることができます（このほかにも表関連のタグがありますが、ここでは省略します。ここで用いられているタグだけで表を作ることができます）。

      <table>
        <tr>  <!-- 1行目の始まり。  trは Table Row の略 -->
          <td>1-1</td>  <!-- 1行目の1列目の要素。 td は Table Dataの略 -->
          <td>1-2</td>  <!-- 1行目の2列の要素 -->
          <td>1-3</td>
          <td>1-4</td>
        </tr>  <!-- 1行目の終わり -->
        <tr>   <!-- 2行目 -->
          <td>2-1</td>  <!-- 2行目の1列目の要素 -->
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
        </tr>  <!-- 2行目の終わり -->
        <tr>   <!-- 3行目 -->
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
        </tr>  <!-- 3行目の終わり -->
      </table>

上のコードを表示すると次のように表示されます。

    1-1  1-2  1-3  1-4
    2-1  2-2  2-3  2-4
    3-1  3-2  3-3  3-4

1-1、1-2、...に画像（`img`）タグを書けば、画像が表のように並ぶことになります。

たとえば、画像を1行4列に並べるには、次のようなHTMLコードを出せばよいことになります。

    <table>
      <tr>
        <td><img src="pictures/picture000.jpg" style="..."></td>
        <td><img src="pictures/picture001.jpg" style="..."></td>
        <td><img src="pictures/picture002.jpg" style="..."></td>
        <td><img src="pictures/picture003.jpg" style="..."></td>
      </tr>
    </table>

## リンク

HTMLの「リンク」を書くには`a`タグを使います（`a`は錨（イカリ）などの意味をもつanchorのaで、`href`はHypertext REFerence）。形式は次のとおりです。

    <a href="【URL】">【リンク対象】</a>

- `【URL】` ── 外部ページのアドレス（`https://...`）を指定することも、自分のサイトのほかのファイル（ページ）を指定することもできます
- `【リンク対象】` ── この部分がリンクになり、選択（クリックあるいはタップ）すると`【URL】`に移動します。テキストだけでなく画像なども指定できます

## `span`タグとスタイル指定

`span`タグを使うことで`<span>`...`</span>`で囲んだ部分の文字などにstyle（スタイル）を指定できます。

    あなたの今日の運勢は<span style="color: red;">中吉</span>です。

たとえば上のコードでは`"color: red;"`と指定されているので、中吉が赤い字で表示されることになります。

## `div`タグ

`div`タグ（`<div>`...`</div>`）は、「領域（division）」を作るためのタグです。

このタグを使うことで、領域全体に関係するスタイルを指定したり、領域内の各要素に適用されるスタイルを指定したりできます。

たとえば、次のようにすると、文字列と画像が、幅320ピクセルの領域に（`width: 320px;`、センタリングされて（`text-align: center;`）、文字は36ポイントの大きさ（`font-size: 36pt;`）で表示されることになります。

    <div style="width: 320px; text-align: center; font-size: 36pt;">
      ロケット発射<br>
      <img src="pictures/rocket2.png" style="width: 200px;"><br>
      発射！
    </div>