もくじ

大きな画像を使う

大きめの画像だけのブロックを作るのが楽

画像を用意

すでに、yama.png というファイル名の画像があるものとします。これを サーバーにコピーするのですが、ウェブページの習慣に従って images というフォルダを作ってその中に入れることにします。

大きめの画像とは横の大きさで400px~600px程度です。普通のコンピュータの画面の横幅は現在1024px~1280px程度であることを考慮しましょう。目的に応じた最小限の大きさにします。画像のデータは大きくなります。一文字ぐらいのニンジンでも半角文字で268文字分のデータ量があります。

画像がない場合は作りますが、ウェブで公開する時に使用する画像の種類は png jpg gif のどれかです。gimp の形式であるxcfはそのままでは使えません。png jpg gif のどれかに変換して使います。gimpで保存し直すだけで簡単にできます。

画像を表示するための記述

大きな画像は、p タグの中に画像だけをいれて次のようにすればいいでしょう。

<p><img src="images/yama.png" alt="空と山と木を描いた絵" /></p>

yama.png というファイル名の画像を images というフォルダに入れた場合です。もっと正確に言えば、このhtmlファイルのある場所を基準にして、同じフォルダに images というフォルダがあってその中に yama.png があると指定しています。次のようになります。

空と山と木を描いた絵

左右の位置を調整

pタグに入れていますから他のpタグの内容と左の余白が同じになります。これを変えたい場合は、class分けをして、スタイルシートで、マージンやパディング、センタリングなどを指定します。

センタリングしてみます。

body の中に、

<p class="gazou"><img src="images/yama.png" alt="空と山と木を描いた絵" /></p>

スタイルシートには、

p.gazou { text-align: center; }

で、このようになるでしょう。

空と山と木を描いた絵

課題 sakuhin.html

もし、yama.png がなければ、とりあえず、このページの山の絵をダウンロードして使ってください。画像の上で右クリックして、「名前を付けて画像を保存」をします。どこに保存するか聞いてこなければ、デスクトップかユーザーホームに保存されているはずです。

ただし、この場合画像は yama.png でなく、yama.jpg になります。ファイル名を変更してもうまくいきません。 イメージタグ内に記述してあるファイル名の方を書き換えて実際のファイル名に合わせます。

あとで時間のある時に自分で描いた絵に直しておきます。

見出しや、説明など適当に加えて、仕上げてください。

「もどる」リンクも入れて、index.html にいけるようにし、index.html にも sakuhin.html にいけるリンクを加えて完成です。

余裕があれば2つ3つ自分の作品を紹介するページにしてください。

スタイルシートでセンタリングするかどうかは好きにしてかまいません。

できあがりの様子

<!DOCTYPE html... Doctype宣言
<html xmlns="h... ここからhtml

<head>            ここからhead部
<title>GIMP作品.. ここにtitle
<style type="t... ここからstyle
        ここにstyleいろいろ
</style>          ここまでstyle
</head>           ここまでhead部

<body>            ここからbody部
<p><a href="in... index,htmlへのリンク
<h1>GIMP作品集... ここにh1要素(大見出し)
        ここにh2とかpとかいろいろ
<p class="gazou"><img src="images/yama.png" ...   ここが画像。2つ以上あってもよい
        ここにh2とかpとかいろいろ
</body>            ここまでbody部
</html>            ここまでhtml

ウェブページ(Mar.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2002 改訂