画像の張り方 : STEP4 【 HTMLに画像を張ってみよう】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

画像を張る

画像について

画像の準備

画像の張り方

背景に画像を使う

サイト内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　画像の張り方

HTMLに画像を張ろう！

画像の準備もできましたので、いよいよHTMLに画像を張り、ホームページに表示させてみましょう。と、その前にまずは下記の赤い部分を追加してください。

～（上略）～
<div align="center">
体験ホームページ
<br>
<br>
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
<br>
<br>
<hr width="300">
<br>
</div>
～（下略）～

追加が終わったら、いよいよ本番です。下記をご覧ください。

～（上略）～
<div align="center">
体験ホームページ
<br>
<br>
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
<br>
<br>
<hr width="300">
<br>
<img src="image/banner.gif">
</div>
～（下略）～

HTMLタグ【画像の表示】

上の赤い部分が画像を表示させるためのタグです。
「<img>」というタグが画像を表示させるという意味のタグで、属性タグの「src="*"」で表示させる画像を指定します。指定する際には、必ず拡張子も一緒に入力しなければ認識されませんので注意してください。また、指定する画像がフォルダに入っている場合には、画像名との間に「/」（スラッシュ）で区切ってフォルダ名も入力しなければなりませんので注意してください。
それでは入力してみましょう。上記と同じようにタグを入力して見てください。

拡大表示

上のように表示されれば画像の表示は完了です。
（小さくて見えない方は、上の画像をクリックすれば拡大画像が見れます）
続いて、タイトル部分も画像に変えましょう。

～（上略）～
<div align="center">
<img src="image/title.gif">
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
<br>
<br>
<hr width="300">
<br>
<img src="image/banner.gif">
</div>
～（下略）～

やり方は先ほどと同じですが、同じ部分に今まで入力していた「体験ホームページ」と「<br>x2」を消してから上記の赤い部分を入力してください。

拡大表示

上のように変更されれば完了です。ようやくホームページぽくなってきましたね。
それでは次の「背景に画像を使う方法」に進みましょう。

ページの上へ

前のページ

トップページ

背景に画像を使う方法

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.