－画像貼り付けを理解するためのページ（HTMLタグ利用編）

画像を貼り付ける方法を理解するためのページ（HTMLタグ利用編）

このページでは『Webページを作成するにあたって画像を貼り付ける方法を理解してもらうことを目的として作成しました。
ここでは画像を貼り付ける方法について解説します。

画像を貼り付けるにあたっての注意事項はここにまとめましたので、リンクを辿って解説を読んで下さい。
ポイントだけ箇条書きにしてみました。

１．

２．

画像が表示されなかった場合の、画像についての説明を表示したい場合には、alt="" のダブルクォーテーションの間に記述する（書式は下の解説欄を参照）

３．

一度、自分の管理下のフォルダ（ＭＯに作成したimagesフォルダ）にコピーすること

４．

貼り付けたい画像は、ここのフォルダ（imagesフォルダ）内の画像ファイルを貼り付けること
直リンクは厳禁

元々のHTMLの基本構造は、次のようになっています。

<<参考>>　ＨＴＭＬの基本構造について

別ページで解説したHTMLのサンプルファイルを用いて、そこに画像を貼ってみることにしましょう。
基本的な書式は以下の通りです。

画像を貼り付けた後のHTMLの基本構造は、次のようになっています。

<<参考>>　ＨＴＭＬの基本構造について

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ここにはページのタイトルを書きます</title>
</head>
<body>ここにはページの内容を書きます

<img src="画像ファイルの場所とファイル名" alt="画像の代わりに表示される文字（画像についての簡単な説明）">

</body>
</html>

以下はサンプルデータ（sample.htm）です。

sample.htmがあるフォルダ内にimagesフォルダを作成し、その中にl14_16s.jpg（L14_16S.JPG）という名前で保存してあります（実際には半角英数小文字のファイル名です）。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ここにはページのタイトルを書きます</title>
</head>

<body>
<br>
ここにはページの内容を書きます<br>
<br>
<img src="images/l14_16s.jpg" alt="画像の代わりに表示される文字（画像についての簡単な説明）">
</body>

</html>

<<参考>>

１．

基本の記述形式は右の通り、<img src="" alt="">

２．

<img src=""の中には画像ファイルの場所とファイル名を記述

３．

alt=""の中には画像の代わりに表示される文字（画像についての簡単な説明）を記述

４．

その他の記述項目として次のようなものがあります。

height="画像の高さのピクセル数またはウィンドウに対する％"
width="画像の幅のピクセル数またはウィンドウに対する％"
align="leftまたはright"
border="線の太さ(ピクセル数)"
hspace="画像の左右の間隔"
vspace="画像の上下の間隔"

タグを用いて画像を貼り付ける方法について理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。

課題16のページへ課題36のページへ課題40のページへ Expression Web4解説トップへ