◆リンクを貼る場合は、<a>タグを用います。
<a href="URL">▲▲</a>のように書くと、▲▲をクリックした時ジャンプ先URLにジャンプします。
【ページ内の指定位置にジャンプさせる】
ページ内で、<a id="NAME">～</a>のように書いてジャンプ先位置名 NAMEを指定し、
<a href="#NAME">△△</a>のように書くと、△△をクリックしたとき、NAMEのあるジャンプ先位置にジャンプします。
ジャンプ先のページで、ジャンプ位置名NAMEを指定し、ジャンプ元のページに、<a href="URL#NAME ">▼▼</a>のように書くと、▼▼をクリックした時、指定したURLを持つジャンプ先ページのジャンプ位置 NAME にジャンプします。
【画像をリンクボタンにする】
この ▲▲、△△および ▼▼の部分は文字を書いたり、<img>タグで画像を指定することが出来ます。し、それらをクリックすると指定先にジャンプします。
＊この頁右下の例： <a href="y03a3.jpg" target="_blank" ><img src="y03a3s.jpg" style="width:150px; height:100px;" alt="富士" ></a>
◆リンク先の内容をどのウィンドウに表示するかは、次の target属性 で指定します。
| _blank | 新規のウィンドウを開いて、そこに表示する |
| _self | 現在のウィンドウに表示する |
| _top | フレーム分割を全て解除して、そこに表示する |
| _parent | フレーム分割を１段解除して、そのフレームに表示する |
２．ＵＲＬを指定する
【相対的URL指定の例】 public_html (利用者のWebスペース) ├ page01.html (1) ├ page02.html ├ fig01.jpg (2) ├ folder1 │ ├ page11.html │ ├ page12.html (3) │ ├ fig11.jpg │ ├ fig12.gif │ └ folder11 │ ├ page111.html (4) │ └ fig111.png (5) └ folder2 ├ page21.html (6) ├ style21.css (7) └ fig21.jpg 基点→行先 記述例 (1)→(2) ./fig01.jpg (又は fig01.jpg) (1)→(3) ./folder1/page12.html (1)→(5) ./folder1/folder11/fig111.png (4)→(2) ../../fig01.jpg (4)→(6) ../../folder2/page21.html (6)→(4) ../folder1/folder11/page111.html (7)→(2) ../fig01.jpg |
| 絶対的指定 | https://www.tohoho-web.com/www.htm のように URL を表示します。 |
| 相対的指定 右例参照 |
./～/syoho4.htmlのように現ページより相対的な位置を表示します。 ../ ～は一つ上のフォルダの、../../ ～は二つ上のフォルダのファイル～を示し、 ./syoho4.htmlと、syoho4.htmlは同じで現ホルダ内のファイル syoho4.html を示します。 |
| 場所指定 | ./syoho5.html#url のように書くと、syoho5.htmlページ内のジャンプ先位置 ( <a name="url"></a>と書いた位置 ) にジャンプします。 |
| メール先指定 | メール送信先の指定は、href=mailto:dareka@xxx.yyy.zzz の様に指定します。 ただし、ページファイルのある Webサーバが「mailto:」に対応している必要があります。 |
リンクをマウスで右クリックして、[対象をファイルに保存] のメニューを選ぶとファイルをダウンロードすることが出来ます。
ブラウザが対応しないファイルでも、<a href="sample.zip">▲▲</a>のように書くと、▲▲を右クリックし、メニューを選んで、[対象をファイルに保存] を選択すると、ファイル(sample.zip)をダウンロードします。
以下はリンクの例です。 ご興味のある方は本ページのリストをご覧下さい。 ( リストの見方 )
下記の文字をクリックすると指定先にジャンプします。
◆ 画像を表示する方法
◆ <TABLE>タグを使う
◆ リンクするには<A>タグを使う
◆ 「とほほのＷＷＷ入門」の HTMLリファレンスにリンクする。
◆ 画像を表示する方法
◆ <TABLE>タグを使う
◆ リンクするには<A>タグを使う
◆ 「とほほのＷＷＷ入門」の HTMLリファレンスにリンクする。
下図をクリックすると
拡大表示します
拡大表示します
＊このページは、とほほさんのサイト
にリンク
させて頂いております。
Top ページ> ＨＰ作りTop> HTMLの初歩/ 初歩 解説/ ソース表示/ 画像貼付/ リンク/ Tableタグ/ 演習sample/