初心者のためのホームページ製作講座
第4回 画像の張り付け
第3回

いよいよ最後も近づきました。 今回は、画像の張り付けの分を送ります。 ファイルが3つ添付してあります。 sample4.htm moon.jpg nasdamap.gif 例によっていつものフォルダに保存して下さい。 これらのうち、sample4.htmはいつものようにHTMLファイルですが、 moon.jpgとnasdamap.gifは画像ファイルです。拡張子がjpgというのはJPEG(ジェーペグ)という形式の画像ファイルで、 拡張子がgifなのはGIF形式という通信用の画像データの記録様式です。 画像ファイルの保存方式にはいろいろありますが、インターネットのホームページでは、これら2種類の形式のファイル だけが使用できます。 今回のsample4.htmファイルの中身は以下の通りです。 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−− <html> <head> <title>画像の表示</title> </head> <body bgcolor=#408080 text=#00ff00> <center> 画像の表示<br> <img src="moon.jpg"><br><br> <img src="nasdamap.gif" width=100><br><br> <a href="sample2.htm"><img src="nasdamap.gif" width=100></a><br><br> <a href="sample2.htm"><img src="nasdamap.gif" width=100 border=0></a><br><br> </center> </body> </html> −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 今回のタグのうち<body>タグは、中にパラメータが入れてあります。 bgcolor=は背景色、textは<font>で指定しない場合に表示される文字の色です。 このほかにbackground="画像ファイル"パラメータを使うと壁紙の画像データ(これもJPEGかGIF形式だけです)を指定できます。 さて、今回の本題の画像はりつけのタグは <img>タグです。 <img src="画像ファイル"> と記述します。パラメータとしてwidth=というものが入っているのがありますが、 これは画像を表示するときの横幅をドット単位で指定するものです。 <a>タグに入れてリンクを画像に張り付けることもできます。 このとき<img>タグの中にboder=0というパラメータを入れておくと リンクを示す青いワクが表示されません。 補足 大きい画像を直接たくさん貼り付けると、ページの表示に大変時間がかかってしまい、読者が、読むのがいやになります。 そこで、小さいサイズの画像ファイルを別に作っておき、そこから大きい画像ファイルにリンクを張るのが読者のためです。 もちろん、画像数が多いとサムネイルの画像ファイルだけでも相当サーバのディスク領域を消費しますから、 一長一短で、どうしたらいいかは一概に決まりません。 当サイトでは、画像数が多いので、観賞可能で解像度を落とせる限界まで小さくしたファイルを直接貼っていますが。 サムネイルを使ったファイルの例 sample5.htm は次の内容になっています。 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− <html> <head> <title>タイトル</title> <body bgcolor=#408080 text=#00ff00> <center> サムネイルを使った画像の表示
<a href="mx04.jpg"><img src="mx04-s.jpg"></a><br> マツダMX-04<br><br> <a href="evolv.jpg"><img src="evolv-s.jpg"></a><br> マツダRX-エボルブ<br> </center> </body> </html> −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− mx04-s.jpg および evolb-s.jpg というサムネイル画像から大きな mx04.jpg および evolb.jpg に リンクを張っています。 課題 1)背景色を好きな色に変える。 2)moon.jpgファイルにwidth=パラメータを入れて大きさを変えてみる。 3)ここからsample2.htmファイルにリンクが張ってありますから、sample2.htmから   sample4.htmにもリンクを張って下さい。 以上です。
目次