ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー >> ホームページのデザインテンプレートをダウンロードできるサイト
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
【クリック募金】


【ウィルス対策】
Click Here!

【HTMLタグ】
みんなのタグ辞書
TAG <index>

【PCトラブル】
Windows.FAQ

【ランキング】
206 Web Ranking
ホームページの情報屋さん

【P R】


Click Here!

Click Here!



リンク

> タグの簡易テスト(別窓)
| 文字でリンク | 画像でリンク | リンクターゲット | 変化するリンク | 同じページ内でのリンク |
| ロールオーバーイメージでリンク |

文字でリンク

<html>
<head>
<title> </title>
</head>

<body>
☆表示させたい部分に記述します☆
</body>

</html>


表示例 記述
文字
<a href="リンク先のURLやファイル名.html">文字</a>
解説
リンクはご覧のとおり、とっても簡単なタグで出来ちゃいます。リンクには指定の仕方が2種類あります。

相対パス指定: <a href="link-test.html">文字</a>
絶対パス指定: <a href="http://laz.chu.jp/hp/tips/link-test.html">文字</a>

↑これはこの「ホームページできるかな」では同じファイルを指しています。
相対パス指定はサイト内(ディレクトリ・フォルダ内)でのリンク、絶対パス指定はインターネット上のリンク、です。
イメージとしては、相対パス指定は「うちのクラスの相川さん」、絶対パス指定は「日本の東京都○○区○○小学校1年2組出席番号1番相川○○」といったかんじです。
相対パス・絶対パス

Point
普通にホームページ専用のフォルダを作り、その中にHTML文書を保存している限り、リンクは相対パス指定で済むはずです。絶対パス指定は他のホームページをリンクするときに使います。
※この絶対パス指定で画像を呼び出すのが「直リンク」です。

このページのトップへ




画像でリンク

文字の場合と同じく<body>〜</body>間の表示させたい部分に記述します。

表示例 記述

<a href="リンク先のURLやファイル名.html">
<img src="表示させたい画像GIFやJPG" width="画像の横幅" height="画像の高さ">
</a>

←この場合は・・・
<a href="link-test.html">
<img src="banner.gif" width="88" height="31">
</a>

FAQ:青や紫色の枠線が付いてしまう!
リンクしたら枠線が表示される時は、以下のスタイルシートを記述するか、または<img>タグ内に border="0" を記述してください。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>

スタイルシート <head>区間に
<style type="text/css">
<!--
img { border: 0px}
-->
</style>
タグ <img>タグ内に
<a href="link-test.html">
<img src="banner.gif" width="88" height="31" border="0">
</a>
※スタイルシートまたはタグのみでOKです。両方記述する必要はありませんよ。


このページのトップへ



リンクターゲット

リンク先をどのように開くか(表示させるか)の指定です。新しいウィンドウで表示させるか、同じウィンドウ内で表示させるか、などです。

そのまま
<a href="リンク先.html" target="_self">文字や画像</a>

そのまま2
<a href="リンク先.html" target="_parent">文字や画像</a>

※↑上記2つは同じウィンドウ内で表示されます。同じ働きです。

新しいウィンドウ(別窓)
<a href="リンク先.html" target="_blank">文字や画像</a>

同じウィンドウ
フレームなどに左右されず、ウィンドウいっぱいに開きます。
<a href="リンク先.html" target="_top">文字や画像</a>

フレーム指定
<a href="リンク先.html" target="フレーム名">文字や画像</a>

■ページ全体に適用
ページ内のすべてのリンクターゲットが一括指定できます。新しいウィンドウですべて開くリンク集ページや、フレームを使用したページに便利ですよ。
これは <head> 〜 </head>内に記述します。すると<body>〜</body>の表示部分は普通にリンクするだけで、リンクターゲットが適用されます。
<html>
<head>
<title> </title>
☆この部分に記述します☆
</head>

<body>
</body>

</html>

記述
<base target="リンクターゲット">
新しいウィンドウで開く記述
<base target="_blank">
フレームページへリンクの記述
<base target="フレーム名">

Point:
<base target="リンクターゲット">
を、<head> 〜 </head>内に記述してリンクターゲットを一括指定しても、個別に
<a href="リンク先.html" target="リンクターゲット">文字や画像</a>
と指定して、リンクターゲットを変えられます。
例えば、リンク集のページですべて新しいウィンドウで開くようにリンクターゲットを一括指定しても、「HOME」や「BACK」などは個別にリンクターゲットを記述することによって、同じウィンドウ内で移動したりできますよ。

このページのトップへ
BACK HOME
ホームページできるかな
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
当サイト内の無断使用及び無断転載を固く禁じます。