HTMLを勉強する中で、簡単なようで、最初は難しい写真の挿入。しかし、ディレクトリとパスを理解すれば、自由自在に操れるようになります。
ディレクトリとパスに関してはこちら↓
imgタグの使い方
<img src=”URL”>を挿入するだけで、写真を配置できます。終了タグは必要ありません。
これだけでも表示できますが、src以外の属性を指定することもできます。各属性は<img>タグの中に書き込みます。
| 属性 | 説明 |
|---|---|
| src | src=”URL”の形で記述する。これさえあれば画像の表示ができる。 |
| alt | alternate attributeの略。alt=”写真の説明”の形でimgタグの中に記述する。検索エンジンに、写真が使用されている目的を教えるために記述する。 |
| title | title=”写真のタイトル”の形で記述する。写真をクリックしたときのタイトルを指定する。 |
また、幅を指定するwidthなどの属性も指定できますが、通常はCSSに書き込みます。
ディレクトリは、写真用のフォルダとhtmlファイルを同じ階層に置くといいでしょう。
imgタグの使用例
imgタグの使用例を紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真の表示</title>
</head>
<body>
<img src="image/bird.jpg" alt="鳥の写真" title="鳥" width="500px">
<img src="image/cat.jpg" alt="猫の写真" title="猫" width="500px">
</body>
</html>写真ファイルは以下のものをimageというフォルダの中に入れて、htmlファイルと同じ階層に置きました。
ぜひ、一緒に書いてみてください。
上記の様にファイルを配置していただくと、写真がブラウザ上に表示されたと思います。
imgタグの中のパスの書き方
パスの書き方は、最初は難しいものの、慣れればひらがなを書くようにスラスラかけるようになります。
それは盛りすぎｗｗ
パソコンにおいて、ファイルは階層構造になっています。
地下ビルをイメージしてください。下に広い部屋があって、そこに色んなテナントが入っていたりします。
広い部屋がディレクトリ（フォルダのこと）といい、その部屋に入っているテナントが一つ一つのファイルになります。
そして、各ファイルがどこにあるのか指定するのがパス（pathとは英語で道のこと）です。つまり、目的のテナントへの道しるべのようなものです。
絶対パスと相対パス
パスの書き方には二種類あります。それが絶対パスと相対パスです。
絶対パスとは、一番上のディレクトリから見て目的のファイルがどこにあるのか示す書き方です。
相対パスとは、あるファイルから見て、目的のファイルはどこにあるのか、という書き方です。
imgタグの中のパスの書き方としては、基本的に相対パスで書きます。
絶対パスと相対パスの書き方は、↓に詳しく書いてあります。
imgタグのおさらい
imgタグは、終了タグが必要なく、様々な属性を指定できました。
src属性だけで表示することは可能ですが、実際にウェブサイトを作る場合にはaltタグで検索エンジンに画像の説明をしてあげることが絶対に必要です。
imgタグの中のsrc属性には、相対パスで写真のありかを教えてあげる必要がありました。
ガンガン書いて、どんどん慣れていきましょう！
