 |
ＳＴＥＰ３ |
|
|
☆画像を表示する <IMG SRC="画像ファイル名" > で、表示できるのですが、ここで問題なのは、ファイルの指定の仕方です。 ファイルの指定の仕方は、画像、リンクなど全て同じ指定の仕方になるので説明しておきます。 まず、絶対パスと相対パスという指定の方法があります。 絶対パス 全体から見て一番元になる位置から記述する方法です。「http://」で始まります。 他のサイトへのリンクなどはこれを使います。 相対パス 今作っているファイルから見てどの位置にあるか指定する方法です。
index.html
img ┬ niko.gif
├ ikari.gif
└ naki.gif
diary ┬ june.html
└ july ┬ 1.html
├ 2.html
└ 3.html
.gifや.htmlは、拡張子と言ってなんのファイルかわかるようになってます
拡張子がついていないものはフォルダです。例えば、 「index.html」に「niko.gif」という画像を表示させるとき <IMG SRC="img/niko.gif" > 「june.html」に「naki.gif」という画像を表示させるとき <IMG SRC="../img/naki.gif" > 「1.html」に「ikari.gif」という画像を表示させるとき <IMG SRC="../../img/ikari.gif" > といった形になります。 まず、フォルダの中にあるときは「フォルダ名／ファイル名」となり、 一つ上にあるときは「．．／ファイル名」や「．．／フォルダ名／ファイル名」となります。 この「．．／」は一つ上の階層にあるときに指定しますので二つ上なら「．．／．．／」となります。  その他の注意 画像の拡張子もいくつかあるので、きちんと拡張子まで指定しないと表示されません。 ファイル名は大文字と小文字を区別するので、「.jpg」と「.JPG」は違いますので注意してください。 画像は、自分で作るのもいいですし、素材屋さんから借りてくることもできますが、 素材屋さんから借りてくる場合は素材屋さんごとに注意事項がありますので、必ず読んで それに従ってください。（リンクしてくださいというところが多いと思います） 持ってくる方法としては、基本的には画像の上で「右クリック」→「名前をつけて画像を保存」 で保存先を指定して保存です。この際先に画像を入れるフォルダを作っておくと後が楽だと思います。 他に「img」タグの中に <IMG SRC="img/niko.gif" ALT="にこにこ" > といった感じで指定しておくと、画像が表示されなかった場合や、画像を非表示にしている人にも 何がここに表示されるのかわかりやすいので、指定しておいたほうがよいです。 ☆リンクを作る <A HREF="リンク先ＵＲＬ" >リンク先名称</A> リンク先ＵＲＬは、リンク先のファイル名を絶対パスか相対パスで指定します。 リンク先名称は、画面に表示される文字を指定します。
index.html
watashi.html
diary ┬ june.html
└ july ┬ 1.html
├ 2.html
└ 3.html
例えば、「index.html」に「watashi.html」へのリンク <A HREF="watashi.html" >自己紹介のページへ</A> 「index.html」に「june.html」へのリンク <A HREF="diary/june.html" >６月の日記</A> 「index.html」に「1.html」へのリンク <A HREF="diary/july/1.html" >７月１日のの日記</A> 「1.html」に「index.html」へのリンク <A HREF="../../index.html" >トップページへ</A> とこんな感じです。またリンクは画像にもつけられます。 リンク先名称のところに画像を表示させればよいわけです。 <A HREF="../../index.html" ><IMG SRC="img/niko.gif" ></A> という感じですが、この指定だとこんな感じで枠がついてしまいます。  そこで、 <A HREF="../../index.html" ><IMG SRC="img/niko.gif" border=0 ></A> というように「border=0」と入れると枠がなくなります。
ここまでで、ホームページは形になると思います。 実際作ってみましょう。 参考 |
次へ（ＳＴＥＰ４）