その他のタグの説明

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>