本文へ

CyberLibrarian

図書館員のコンピュータ基礎講座

HTML講座

6. リンク

【2003-12-05更新】

この章では、他のページなどへリンクを張る実習をおこないます。

1.新規にHTML文書を作成します。

まず、「welcome.html」を保存します。次に、メモ帳で新しいHTML文書を作成し、「greeting.html」という名前で「welcome.html」と同じフロッピーに保存します。

■ HTMLの記述 「greeting.html」
<html>
<head>
<title>ごあいさつ</title>
</head>
<body>
<h1 align="center">ごあいさつ</h1>
<hr>
ようこそ!<br>
新しくホームページを開設しました。
</body>
</html>

■ ブラウザでの表示

ごあいさつ


ようこそ!
新しくホームページを開設しました。
ページのトップへ

2.リンクを張る

■ HTMLの記述 「greeting.html」
<html>
<head>
<title>ごあいさつ</title>
</head>
<body>
<h1 align="center">ごあいさつ</h1>
<hr>
ようこそ!<br>
新しくホームページを開設しました。
<hr>
<a href="welcome.html">トップページへ</a>

</body>
</html>

■ ブラウザでの表示

ごあいさつ


ようこそ!
新しくホームページを開設しました。
トップページへ

■ 解説
リンクを張るには、<a>(Anchor)タグを使用し、href(Hypertext REFerence)属性でファイル名を指定します。外部のホームページなどにリンクを張る場合は、ファイル名の代わりにアドレス(URL)を指定します。また、メールアドレスにリンクを張る場合は、ファイル名の代わりに「mailto:」に続けてメールアドレスを指定します。

HTMLの記述 ブラウザでの表示
<a href="hp1.html">トップページ</a> トップページ
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> Yahoo! JAPAN
<a href="mailto:ax2s-kmtn@asahi-net.or.jp">メール</a> メール
ページのトップへ

3.ページ内の特定行にリンクを張る。

ページ内の特定の行にリンクを張ることもできます。

■ HTMLの記述 「greeting.html」
<html>
<head>
<title>ごあいさつ</title>
</head>
<body>
<h1 align="center"><a name="ptop">ごあいさつ</a></h1>
<hr>
ようこそ!<br>
新しくホームページを開設しました。
<hr>
<a href="welcome.html">トップページへ</a><br>
<br>
<a href="#ptop">ページの先頭へ</a>

</body>
</html>

■ ブラウザでの表示

ごあいさつ


ようこそ!
新しくホームページを開設しました。
トップページへ

ページの先頭へ

■ 解説
あるページの指定の場所へリンクを張るには、まず、ジャンプしたい場所に<a>タグのname属性を使用して、「<a name="指定場所名前">~</a>」の形でジャンプ先を指定しておきます。その上で、「<a href="ファイル名#指定場所名">~</a>」の形でジャンプしたい場所を指定します。

■ 補足
リンクを張った場合には、リンクポインタ(リンクの起点)の文字色が変わります。通常、アンダーライン表示され、クリック前(訪問前)は青、クリック後(訪問後)は紫で表示されます。

クリック前
クリック後

<body>において、link属性を指定するとクリック前の、vlink属性を指定するとクリック後の色を指定できます。

HTMLの記述 ブラウザでの表示
<body link="#ff0000" vlink="#ffff00">
<a href="hp1.html">クリック前</a><br>
<a href="hp2.html">クリック後</a>
クリック前
クリック後
ページのトップへ
前ページへ / 次ページへ
CyberLibrarian : tips on computer for librarians, 1998-