画像にリンクをはろう

画像にリンクを作るのは前のページのテキストにリンクを作るのと同じです。ただ、テキストの部分が画像ファイルをはる記述になるだけです。こんなファイルを2つ作ってみましょう。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<a href=”tsugi.html”><img src=”001.jpg” alt=”写真001番” width=”300″ height=”225″ border=”0″></a>
</body>
</html>

上記の内容で「index.html」と保存し、同じフォルダに画像ファイル「001.jpg」を用意します。そして以下のソースで「tsugi.html」を作成します。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<a href=”index.html”><img src=”sub/002.jpg” alt=”写真002番” width=”300″ height=”225″ border=”0″></a>
</body>
</html>

そして「sub」というフォルダを作成し、そのなかに「002.jpg」という画像を用意します。このようになりましたか?

画像をはるときの解説ではなかった「border=”0″」という記述がありますが、これが無いと画像の周りにボーダー(枠)が出来ます。確認してみましょう。

リンクをクリックするとウィンドウが開く

作成したリンクをクリックするとそのページが別のウィンドウに表示されるようにするには…さっきから「このように表示」とかをクリックするとそのようになっていると思いますが、そのようにするためには、

<a href=”~~.html” target=”_blank”>

というように「target=”_blank”」を書き加えるだけです。試してみましょう。ほかのサイトへのリンクを作ったりするときに便利ですね。

さてこれまでのHTMLタグを総合してサイトを作ってみましょう。次のページで簡単なサイトの制作例を示しましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録