HTML -画像の表示、記事,表,リスト,リンクの作成-

画像の表示について

HTMLでは画像を表示する時にimgタグを使います。
imgタグではパスを使って表示する画像を指定します。

パス

パスとは、目的のファイルやディレクトリまでの経路のことを言います。
パスには２種類あって、絶対パスと相対パスがあります。

file5を表示するように実際に書いてみます。
・絶対パス

 /dirA/dirB/file5

絶対パスは、ディレクトリ階層の頂点である/(ルートディレクトリ)からの経路になります。
・相対パス

 ./file5

相対パスは現在地点から見ての経路になります。
現在地点は、.(ドット)を使用します。

また、相対パスを使用して上の階層のパスを指定する場合は、上の階層分.(ドット)を付けたします。
実際に書いてみるとこうなります。

../file5

絶対パスの方が、経路が最初から見えるので、直感的に理解しやすくなっています！

ただ、絶対パスだと、基本的に途中のディレクトリに変更があった場合全てを書き換えなければいけなくなるので、相対パスで記述します！

実際に、画像ファイル(images)の中のリンゴの画像(apple.png)を表示させるプログラムを書いてみます。

<img src="./images/apple.png">

src属性は、画像やスクリプトなどの場所を設定する属性のことです。

記事の作成

記事のような文章の作成には、Pタグを使用します。

<P>私の名前はReyowといいます。プログラミングを勉強しています。</P>

表の作成

表の作成には、tableタグを使用します。
tableタグ内でtrタグ、thタグ、tdタグを使用します。

• trタグ
  表の行を定義するときに使用します。
  表の行数分trタグを記述し、子要素にその要素を記述していきます。
  trは「table raw」の略です。

• thタグ
  表内のデータを説明するときに使用します。
  thタグを使用して、列名や行名を記述します。
  thは「table header」の略です。

• tdタグ
  表内のデータを記述するときに使用します。
  タグ1つに対して、記述できるデータは1つなのでデータの数だけtdタグを記述します。
  tdは「table data」の略です。

個人的には、表を横から読んでいく意識で書くと、わかりやすいと思いました！

実際に、上記のタグを使って下記の表を書いてみるとこうなります。

<table>
     <tr>
	<th></th>
	<th>2017年</th>
	<th>2018年</th>
	<th>2019年</th>
	<th>2020年</th>
     </tr>
　　　<tr>
	<th>10~20代</th>
	<td>380</td>
	<td>2300</td>
	<td>5300</td>
	<td>1500</td>
     </tr>
     <tr>
	<th>30~40代</th>
	<td>1</td>
	<td>100</td>
	<td>300</td>
	<td>1000</td>
     </tr>
     <tr>
	<th>50~60代</th>
	<td>25</td>
	<td>10</td>
	<td>1000</td>
	<td>20000</td>
     </tr>
</table>

長いコードで一見難しいですが、分解して見ると同じコトの繰り返しなので、比較的簡単だと思います！

また、tableタグ内に複数の表がある場合は、theadタグ、tbodyタグ、tfootタグの記述が必要になります。

リストの作成

リストの作成には、ulタグまたはolタグを使用します。
それぞれの違いを説明します。

• ulタグ
  順序が無い箇条書きのリストを表示するときに使用します。
  「unorderd list（アンオーダーリスト）」の略です。
• olタグ
  順序があるリストを表示するときに使用します。
  「orderd list（オーダーリスト）」の略です。

リスト内の項目にはli(listの略）タグを使用して記述します。
olタグでもulタグも同じようにliタグは使用します。

実際に、Google,Amazon,Appleのリストを書いてみます。順序は関係ありません。

<ul>
  <li>Google</li>
  <li>Amazon</li>
  <li>Apple</li>
</ul>

リンクの作成

リンクの作成には、aタグを使用します。

aタグはHTML内(同ページ内)の特定の要素に移動することや、Web上に公開されている他のサイトに移動することが可能となります！とても便利なタグですね。

HTML内(同ページ内)の特定の要素に移動する場合、id属性を指定します。

id属性とは個人的には合言葉のようなものだと思っています。
指定した合言葉があっている場所に移動することができるイメージです。

他のサイトへ移動するときは、URLを指定して移動します。
移動する前のコードには、href属性をつけます！

実際に、先ほど作ったGoogle,Amazon,Appleのリストにそれぞれのサイトのリンクをつけて表示してみます。

<ul>
   <li><a href="https://www.google.com/?hl=ja">Google</a></li>
   <li><a href="https://www.amazon.co.jp/ref=nav_logo">Amazon</a></li>
   <li><a href="https://www.apple.com/jp/">Apple</a></li>
</ul>

リンクの作成は、違うサイトに移動することもできれば、ページ内の好きなところに移動することもできるとても便利なコードだと思ったのでしっかりと抑えておきたいですね！