超簡単ホームページ作成TOP>ホームページに写真やイラストを載せるには

    ホームページに写真やイラストを載せるには

写真やイラストをホームページに掲載するための基本操作です。
  • そのための準備項目
  • 具体的な作業を説明しています。
ここを読むだけで、写真やイラストをホームページに載せたり、背景として表示することができるようになります。

ホームページに写真やイラストを表示させるに際し準備しておく物
超簡単ホームページ作り 画像-1 ホームページに表示させたい写真やイラスト、背景に使いたい画像を用意しておきます。

デジカメ・スキャナー・他サイトからのダウンロード等を利用し、あらかじめ 表示させたい画像を用意しておきます。 他サイトからのダウンロードする際はそのサイトの利用規約を確認し、トラブルにならないように気をつけてください。 画像は.jpgとか.gifがついたものを用意してください。 用意ができたらCHAPTER 1-1で作った「My Homepage」 という名前のホルダーに保存します。半角・英数字であればどんな名前でもかまいません。 ここでは「hana.jpg」と「saboten.jpg」というファイルを「My Homepage」の中に保存しています。

「My Homepage」ホルダーの中身は右のようになっています。
画像等入手時の注意点
素材提供サイトでは『直リンク禁止』という書き方がよくしてあります。これは『画像はあなたのパソコンに保存してから使ってくださいね』 という意味です。リンクを利用すると相手のサイトに画像を置いたまま、自分のホームページでその画像を使うことができてしまいますが これはしないで下さいということです。
自分の所に画像が無いと、画像が表示されるたびに画像の置いてあるサイトまで見に行くことになります。 表示が遅くなるのは当然ですが何よりも、見にこられるサイトに負担がかかります。何十人、何百人が同じ事をすると非常に大きな負担になってしまいます。
無料で提供してくれる画像を使わせてもらうわけですから、できるだけ相手の迷惑にならないように したいものです。
画像を自分のパソコンに保存するには『ダウンロード』と書いた部分を探し、クリックします。 なければ画像の上にマウスポイントを置き、右クリックすると出てくるメニューの中から 『名前をつけて画像を保存(S)』を選びます。後は前の章で取り上げた『ファイルの保存方法』と同じ 要領です。ファイルは圧縮してあることが多いので、その場合は解凍が必要です。
私のサイトではここの画像を使わせてもらっています。              牛飼いとアイコンの部屋
ホームページに写真や図形を表示する具体的な作業
超簡単ホームページ作り 画像-2 ここで覚えるタグは一つだけです。
<IMG src="画像のファイル名">
このタグを覚えれば、このタグを書いた場所に、指定した画像が表示されます。

早速やってみます。「Notepad」を開いて下のように書き、「gazou.htm」という名前で「My Homepage」に保存します。My Homepage ホルダーの中身は右のようになります。
保存ができたら、「gazou.htm」をIEで開きます。「gazou.htm」をダブルクリックすればIEが起動し、写真が表示されます。
画像は改行の指示をしない限り横に並んでいき、スペースがなくなると下に移動します。
<HTML>
<IMG src="hana.jpg">
<IMG src="saboten.jpg">

</HTML>
超簡単ホームページ作り 画像-3超簡単ホームページ作り 画像-4
中間まとめ・・・その1 画像や写真をホームページに表示するためここでまでで覚えておくこと
  • 画像は、絵でも写真でも「.jpg」「.gif」のいずれかの形式で保存する
  • <IMG src="画像のファイル名">というタグを作る
  • そのタグを画像を表示させたい箇所に記入する
  • すべてのファイルを同じフォルダーに保存する(今のところは同一フォルダーに保存してください)
ホームページの背景に画像を表示するための具体的な作業
CHAPTER 1-1で作った文章の背景に、用意した画像を表示させてみます。
<BODY background="画像のファイル名">〜</BODY>というタグを使います。 <BODY>タグは<HTML>タグのすぐ内側に入れます。 文章とか、画像の挿入タグ等を書いたら、その一番外側を<BODY>タグではさみ、更にその外側を<HTML>タグ ではさみます。
実際にやってみます。
<HTML>
<BODY background="hana.jpg">
<FONT color="white"> HTMLで文章を書くコツ<BR>
HTMLで文章を作るときは、通常の文章のように、タグも交えて前から順に書いていくのではなく、 まず文章だけを先に書きます。<BR>
次にどこにどんな効果を出したいかを考え、効果を出したい部分をタグではさんでいきます。</FONT>
</BODY>
</HTML>
HTMLで文章を書くコツ
HTMLで文章を作るときは、通常の文章のように、タグも交えて前から順に書いていくのではなく、 まず文章だけを先に書きます。
次にどこにどんな効果を出したいかを考え、効果を出したい部分をタグではさんでいきます。
画像を背景に使ったとき、画像のサイズが小さいとタイルを敷き詰めたような状態で、同じ画像が繰り返されていきます。


背景の色を変える    

画像を使ったのと同じ要領で、背景の色を変えることができます。
<BODY bgcolor="色の名前">〜</BODY>というタグを使います。
実際にやってみます。
<HTML>
<BODY bgcolor="black">
<FONT color="white">
HTMLで文章を書くコツ<BR>
HTMLで文章を作るときは、通常の文章のように、タグも交えて前から順に書いていくのではなく、 まず文章だけを先に書きます。<BR>
次にどこにどんな効果を出したいかを考え、効果を出したい部分をタグではさんでいきます。
</FONT>
</BODY>
</HTML>
HTMLで文章を書くコツ
HTMLで文章を作るときは、通常の文章のように、タグも交えて前から順に書いていくのではなく、 まず文章だけを先に書きます。
次にどこにどんな効果を出したいかを考え、効果を出したい部分をタグではさんでいきます。


ここ迄で一応、文章が書け、写真や画像をホームページに表示したり、背景に使用したりすることができるようになりました。 しかし画像が表示される位置は左上と決まっていますし、背景は全画面が同じになってしまいます。 文章も左上から順に表示されるだけです。
次はこれらを自由自在に配置できるように、レイアウトの方法にトライします。
上に戻る