画像の挿入

前のページへ 次のページへ

Webページの<body>〜</body>で囲まれた部分に絞って説明しています。
改行は<br>、リンクは<a href="〜">〜</a>でした。
今度は、画像ファイルをWebページに掲載する方法を紹介します。

画像ファイルを掲載する場合の注意

他人のサイトの画像をダウンロードし、自分のWebページに無断で掲載してはいけません。
掲載したい場合は、必ず許可をとりましょう。

画像ファイルを掲載する方法

画像ファイルを掲載したい位置に、<img src="画像ファイルのアドレス">と書きます。

画像ファイルのアドレスに書き方は、リンクと同じです。
画像ファイルとWebページを同じフォルダに保存している場合は、<img src="画像ファイル名">で良いです。

画像ファイルにリンクを付ける方法

<a href="〜">〜</a>は、囲んだ文字列にリンクの機能を付けます。
同様の方法で、画像ファイル(<img src="〜">)を囲めば、その画像ファイルにリンクの機能を付けることが出来ます。

<a href="リンク先のファイル名"><img src="画像ファイル名"></a>

練習

以下の手順に従って、ここまで書いてきたことを実際にやってみましょう。

以下の画像ファイルを、「fc2web」にダウンロードし、「logo1.gif」という名前で保存してください。

以下の画像ファイルを、「fc2web」にダウンロードし、「logo2.jpg」という名前で保存してください。

以下の内容の「index.html」を作ってください。→プレビュー

<html>
<head>
<title>初めてのWebページ</title>
</head>
<body>

これが、私の始めて作ったWebページです。<br>
<br>
ここがホームページです。<br>
1ページ目は<a href="test1.html">こちら</a>です。<br>
2ページ目は<a href="test2.html">こちら</a>です。<br>
3ページ目は<a href="test3.html">こちら</a>です。<br>
4ページ目は<a href="test4.html">こちら</a>です。<br>
<br>
<img src="logo2.jpg"><br>

</body>
</html>

以下の内容の「test3.html」を作ってください。→プレビュー

<html>
<head>
<title>テストページ3</title>
</head>
<body>

ここはテストページその3です。<br>
前のページは<a href="test2.html">こちら</a>です。<br>
次のページは<a href="test4.html">こちら</a>です。<br>
ホームページは<a href="index.html">こちら</a>です。<br>

</body>
</html>

以下の内容の「test4.html」を作ってください。→プレビュー

<html>
<head>
<title>テストページ4</title>
</head>
<body>

私は、次のWebサイトでWebサイトの作り方を勉強しています。<br>
<a href="http://kumicyou.sakura.ne.jp/hpmake/"><img src="logo1.gif"></a><br>
前のページは<a href="test3.html">こちら</a>です。<br>
ホームページは<a href="index.html">こちら</a>です。

</body>
</html>

リンクで作ったページに、画像ファイルにリンクを付けたページを付け加えることが出来ました。

前のページへ 次のページへ