ＨＴＭＬの画像のリンクの＜タグ＞について。わかる方、教えてください。

質問

ＨＴＭＬの画像のリンクの＜タグ＞について。わかる方、教えてください。

ＨＴＭＬの勉強をはじめたのですが。画像のリンクのタグのところで、つまずいています。

↓学校でとったノートです。
ひとつひとつの記述の意味などを、どうか解説して教えてください。

<a href="../photo01.jpg">
<img border="0" src="../photo01.jpg" alt="グランドキャニオンの写真" title="グランドキャニオンへ旅行をした時の思い出の写真。
　クリックしたら拡大します" width="100" />

もう、なにがなにやら・・・混乱してしまっているのですが、とくに../というのは、現在の場所からの相対的パスの記述のようなのですが。絶対的パスをするときの記述のしかたが、わからないのです。

教えてください。お願いします。ｍ(_ _)ｍ

回答No.1

WhiteWolf_ · ベストアンサー

独学で怪しい記憶ですが

<a href="">～</a>
はハイパーリンクを張るための記述です
クリックしたら他のページに飛ぶやつですね

今回は画像をクリックで拡大(画像自体を表示)するために使ってます

例で言うと一個上の階層のphoto01.jpgにアクセスしよう！っていうリンクになります。

終了タグ</a>が出るまでをリンクしますので</a>を必ずセットとして書きます

<img>については
borderは枠の設定みたいなもので、数値を大きくすると枠が大きくなります
リンクタグと併用してるから使ってるのかな？

srcは表示する画像のパスです。
相対パスなので一個上のフォルダを参照しているようですね

abc/def/ghi.html
だとして考えると
「./」はdefフォルダの中身を指定します(同階層)

「../」はabcフォルダの中身を指定します(一つ上の階層)

絶対指定は所謂アドレス全部のようなもので

「http://www.abc.com/def.html」
と記述すると絶対パス

defフォルダ同階層から指定するなら
「./def.html」か「def.html」となります。
これが相対パスです

altは画像が表示されなかったときのための文だったと思います。試しに画像を存在しないものにすると分かりやすいです

titleは画像にマウスを乗せたときに表示される文です。画像タイトル書いたりとかでしょうか

widthは画像の幅を指定しています。指定しないと画像のそのままサイズになってしまいます。

お礼

(^^)こんにちは。

うわーあぃ(感激！)
ありがとうございますぅ！White wolf さんアリガトウ！！

フムフム・・・だいぶ理解できてきました。少し復習します。まちがっていたらば指摘して=教えてください。

○<a href="">～</a>は、ハイパーリンクのための記述である。
○ハイパーリンクとは、他のページに飛ぶリンクのことである。
○今回の学校の例は、画像を表示するためのもので（画像自体をクリックしたら拡大をするように指定つき）　　　　　　　

(^^) まずはココまで理解しました。

○＜img border="0"　　のborderは枠の大きさのコトで"0"に入る数字によって変化する

○＜img border="0"　src＝ 　　src＝はパスのことを示している
＜img border="0"　src＝../phot01.jpg 　　　例は「ひとつ上の階層から写真を参照」と訳せる。（./　は同階層　　../　はひとつ上の階層を示す）

○＜img border="0"　src＝../phot01.jpg　 art＝グランドキャニオンの写真　

　　　artは画像が表示されなかったときの文の記述である
（^^)ナルホド！表示に失敗すると、このメッセージが・・了解！

○＜img border="0"　src＝../phot01.jpg art＝グランドキャニオンの写真　title＝グランドキャニオンへ旅をしたときの思い出の写真

title＝は、画像にマウスをのせたときに表示される文章　　ナルホド・・・

○＜img border="0"　
src＝../phot01.jpg
art＝グランドキャニオンの写真　
title＝グランドキャニオンへ旅をしたときの思い出の写真　　
クリックしたら拡大します。width＝"100"/>　

このクリックしたらば拡大します。width＝"100"　　の"100"は←拡大した際の幅のサイズを指定いしている
(指定しなければ、モトのサイズで表示されてしまう)

おかげさまで、だいぶ気持ちが楽になってきました♪
やはり　src ＝のパスのところが、まだチョット難しいですね。
完全に理解できるように頑張ります。

ｍ(_ _)ｍ今回は助かりました。スペシャル感謝です。

回答No.4

WhiteWolf_

昨日は携帯から書いたのでパソコンから補足します。
絶対パスと相対パスはもっと簡単に例え話にするといいかもしれません。

例えば、マンションがあったとしてフォルダで考えるとこうしたとします。
./HTMLマンション/2階/201/a.html
./HTMLマンション/2階/202/b.html

このとき、a.htmlさんから見て考えて
b.htmlさんを呼びたいと思った場合

■相対パス
同じマンションにすんでいる「a.html」さんだからこそいちいち「どこのマンションの何階、何号室の何さん」まで言わなくても

「2階の202のb.html」さんとだけ言えば通じるという感じです。
相対パスは今の自分の居場所から考えるのでスタート地点は「./HTMLマンション/2階/201/a.html」です

そこから「b.html」さんへたどり着くためには
一階層フォルダを上がって、202フォルダ(202号室)へといかなければなりません。

そこで「../202/b.html」と記述すると
「../」なので一つ上階層へ移動し、「202」を開き「b.html」さんへとアクセスできます。

■絶対パス
絶対パスはどちらかというと同じ場所に住んでいるわけじゃなくて
他の場所から伝える際に使うような感じです。
HTMLマンションを知らない人に「2階の202にいるよ」と言っても通じませんから、絶対パスとしてどこに住んでいるか全てを伝えなければならないので

「b.htmlさんはHTMLマンションの2階、202号にいるよ～」と他の人に伝える。つまり
「http://www.hogehoge.com/HTMLマンション/2階/202/b.html」のようにアドレスのフル表記になります。
※このhogehoge.comは適当に書いたものなので存在しません。通常はサーバーのアドレスやらが入ります。google.comとか、yahoo.co.jpとか色々ありますね。

自分で書いててこれは分かり安いか不安ですが
参考になれば幸いです。

お礼

(^^)こんにちは。

うわぁ～い♪再びありがとうございます。

ハイ、とてもわかりやすいです！なんかイメージつかめてきました。
つまり../は、同じマンションにすんでいるのだから・・・と省略したイメージですね。

ありがとうございます。これから、さらにＣＳＳの勉強がはじまります。
困ったら、また助けを呼びに来ます。

ｍ(_ _)ｍ今後とも、ドーゾよろしくお願いします。

回答No.3

ORUKA1951

絶対パスとは/からのもの
相対パスとは、
1) ブラウザが現在表示しているページの(パスを含んだ)ファイル名
からの相対的なファイルへのパス
絶対パスとは、
2) 現在表示しているファイルをどこに移動しても特定される絶対的なパス
と理解するのが正しいです。
　絶対パスの場合は、/(ルート--根っこ)から始まるパスを記述します。
　人によっては、通信プロトコル(http:などの)や、インターネット上のサーバーの位置まで含めることもありますが、本来は/からのものです。
[CJ-Club]-[FAQ]-相対パス? 絶対パス? ( http://www.cj-c.com/faq/pass.htm )

とりあえず、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )

お礼

(^^)こんにちは。

Ｎｏ１　様のおかげで、おおむねのところはつかめたのですが・・・やはり、最後にsrc＝のパスがむずかしくて・・・残りました。

http://okwave.jp/qa/q5784591.html

↑の場合は　http://　の部分はプロトコルの部分なので省略する場合が、普通と考えて良いということですね。

つまりokwave.jp/qa/q5784591.htmlと記述するわけですね。

ありがとうございます。これだけでも、ひとつ利口になりました。

教えていただいたＵＲＬどちらもすごく為になるし、私の目的にあっています。（感激！）

今夜は、じっくりとコレをよく読んで勉強していきます。ありがとうございます。

ｍ(_ _)ｍ

回答No.2

SAYKA

今、ブラウザ使ってこのページ見てるかな？
もしそうならそのブラウザの上の方に　いわゆる「アドレスバー」ってのが有ってそこに「URL」と言われる「アドレス」が書かれてるのは判るかな？

それが、絶対(アドレス)。そこを基準に指定するのが相対(アドレス)だよ。
パス、と言っては居るけど、アドレスもパスも、そう大差無いから。

お礼

(^^)こんにちは。お返事ありがとございます。

ハイ♪ブラウザとかアドレスバーとか・・・そういう言葉すら、最近わかるようになったばかりのド初心者なんです。

先生に、ブラウザには「ファイヤーフォックス」とか「インターネットエクスプローラー」とかが、あるんですよォ～てネ(笑)

＞パス、と言っては居るけど、アドレスもパスも、そう大差無いから。

この言葉！目からウロコでアリガタイです。
それなら、いずれは使いこなせるかも・・・そんなような気がしてきました。そっかあ・・・って気分になってきました。

../は、当分は悪夢のようです。（　＾＾；）

優しい回答をありがとうございました。勇気をもらいました。