HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 実際に作ってみよう >> リンクを指定する
お問い合わせはこちら サイトマップはこちら

実際に作ってみようメニュー
1.初期設定をする
2.ファイルの新規作成
3.背景を設定する
4.文字に変化を与える
5.表を作成する
6.画像を挿入する
7.リンクを指定する
8.ファイルを保存する

リンクを指定する [タグ編]

[ ソフトで編集 ] [ 直接タグで編集 ]

リンクのはたらき

ホームページを作成したら、作ったページ同士をつなげる(関係づける)必要があります。ページを見てくれる人がスムーズにページ間を移動できるようにするためには、あるページからあるページへリンクを正しく指定しなければなりません。


※リンクについて詳しくは
リンクタグ:HTMLタグ辞典を参照してください。


リンクを設定しよう

それでは、実際にリンクを挿入してみましょう。ここではタグで直接編集する方法を紹介します。


完成例
この文字から新しいウィンドウを開いてリンクをする。
外部リンク例えばYahooへならこのように。
メールアドレスの指定も出来る。
ラベルを付けてみる。
ページ内のラベルへリンクしてみる。
他のファイルのラベルへリンクしてみよう。

操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付(コピー&ペースト)をする。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta
http-equiv="Content-Style-Type" content="text/css">
<title>リンクを挿入しよう</title>
</head>
<body>

<!--リンクの挿入タグの例-->
<a href="007.html" target="_blank">この文字から新しいウィンドウを開いてリンクをする。</a><br>
<a href="http://www.yahoo.co.jp/" target="_blank">外部リンク例えばYahooへならこのように。</a><br>
<a href="mailto:yourmail@domain.com?Subject=リンクの件">メールアドレスの指定も出来る。</a><br>
<a name="label_exm">ラベルを付けてみる。</a><br>
<a href="#lebel_exm">ページ内のラベルへリンクしてみる。</a><br>
<a href="007.html#label_exm">他のファイルのラベルへリンクしてみよう。</a>
<!--ここまで-->

</body>
</html>

記述手順

リンクをする場合はリンクしたい文字を<a>…</a>で囲みます。「href=""」という属性でリンク先を指定します。


1. 他のファイルへリンクをする場合
この場合は最初の例のように「href=""」を相対パスで指定します。


2. 外部のリンク先を指定する場合
この場合は2つめの例のように「href=""」を絶対パスで指定します。


3. 新しいウィンドウを開いてリンクさせる場合
この場合は2つめの例のように「target="_blank"」のように記入します。
※それ以外のターゲットの指定方法は「リンク先のページの表示場所、表示方法を指定する:HTMLタグ辞典」を参照してください。


4. メールアドレスをリンク先とする場合
この場合は3つめの例のように「href=""」を「href="mailto:+メールアドレス"」のように指定します。
さらに、件名を予め入力しておく場合はメールアドレスの後に続けて「?Subject=件名」のようにします。


5. ラベルを付ける場合
ページ内にリンクを貼りたい場合はあらかじめラベルを付けておく必要があります。
この場合は4つの例のようにラベルを付けたい文字を「name=""」という属性で追加します。


6. ラベルへリンクする場合
同じページ内のラベルへリンクする場合は「href="#ラベル名"」とし、他のファイルのラベルへリンクしたい場合は「href="ファイル名+#+ラベル名"」というターゲットの指定をします。


<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>

画面のトップへ戻る

こんな時どうする?

リンクについてもっと詳しく知りたい

HTMLタグ辞典

リンクタグ


こんな時どうする?

相対パスと絶対パスってなに?

相対パスと絶対パス

相対リンクと絶対リンク:仕組みを理解しよう - HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード


画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ