2014年04月13日

リンク その2

リンク その2

■よそのウェブサイト(ホームページ)へのリンク

自分で作成したページではなく、他の企業や団体・個人のページにリンクさせたい時があります。
個人のサイトにリンクを貼る時は、出来れば そのサイトを公開している人に、事前にその旨を連絡するのが望ましいのですが、「このページはリンクフリーです。ご自由にどうぞ」というような文言がある場合は必要ないでしょう。

■リンク先のURLを入手する

まず最初に、リンクさせたいページのURL(アドレス)を入手します。

◆Internet Explorerの場合

目的のページを開き、Altキー+D を押します。
次に、Ctrlキー+Cを押します。
これで そのページのURLが、クリップボードにコピーされます。

◆NetReaderの場合

目的のページを開き、Applicationキー またはAltキー+K を押します。
拡張メニュー(コンテキストメニュー)が開きますので「ページURLのコピー」にカーソルを合わせます。
右矢印キーでサブメニューを開き、「タイトルとURLのコピー」と「URLのみコピー」のどちらかを選んでEnterキーを押します。

※NetReaderで、「タイトルとURLのコピー」を実行した場合は、ページのタイトルとURLが、半角スペースで区切られてコピーされます。
これを、自分のHTML文書に貼り付けた後、Ctrlキー+左矢印キーを押します。
カーソルが http…の先頭の h の所にジャンプしますので、そこでEnterキーを押して改行します。
こうすると、上の行にページのタイトル、下の行にURL というふうになります。

■HTMLタグの挿入

ここからの手順は、前回の記事で自分の作ったHTMLファイルにリンクさせるのと、ほぼ同じ手順です。

※NetReaderでページのタイトルとURLを一緒にコピーした場合は、URLの部分だけを、あらためてコピーするか切り取りしておきます。

1.HTML文書を開き、リンクの始点(きっかけ)にしたい文字列を探して 範囲選択します。

2.HTMLタグの入力支援メニューを開き、「リンク」の項目にカーソルを合わせます。

3.右矢印キーでサブメニューを開き、「他の文書」を選んでEnterキーを押します。

4.ダイアログボックスが開いて、「リンク先URL」と音声がします。
ここに、先ほどコピー(または切り取り)しておいたURLを、Ctrlキー+V で貼り付けます。

5.Tabキーで「OK」のボタンに移動してEnterキーを押します。
これで、選択範囲の前後にリンクタグが挿入されます。

※「新規ウィンドウを表示先に指定する」のチェックボックスにチェックをつけると、ブラウザの新しいウィンドウが開いて、そこにリンク先のページが表示されます。つまり、ブラウザが二つ 起動した状態になります。

■同じHTML文書の中でのリンク(ページ内リンク)

ひとつのページ(HTML文書)の中の文章や項目が多くなってくると、閲覧する人が読みたい部分・必要とする項目が、どこにあるのか すぐに探し出せなくなってしまいます。
また、本文の他に、それを補う脚注などを本文とは別の場所、たとえばページの最後の所などに掲載したい場合もあります。

そういう時は、「ページ内リンク」を使います。
ページ内リンクでは、一つのページ(HTML文書)の中に、リンクの始点と終点を設けることになります。

■ページ内リンクの終点を指定する

まず最初に、ページ内リンクの終点(ジャンプ先)を指定します。
これを「アンカー」と呼んでいます。アンカーとは、「錨 anchor」のことです。

■アンカータグ

<a name="">

(ページ内リンクの終点 = リンク先の文字)

</a>

これがアンカータグです。
"と " の間には、半角英数 小文字で、わかりやすい(自分にだけわかればよい)文字列を入れます。

例:

<a name="anchor-01">
ページ内リンクの終点の文字
</a>

■HTMLタグの入力支援メニューで挿入

◆アンカータグの挿入

1.ページ内リンクの終点の文字列を範囲選択します。

2.「リンク」のサブメニューから「アンカーの設定」を選んでEnterキーを押します。

3.ダイアログボックスが開いて、「キーワードの エディット 文字入力」と音声がします。ここは手作業で入力します(半角英数小文字 スペースは入れない)。

4.入力したら、そのままEnterキーを押します。

5.選択した文字列の前後に、アンカータグが挿入されます。

■リンクタグの挿入

こうして、いくつかの部分にアンカータグを挿入して、リンクの終点 = アンカーを設定していきます。
アンカーの設定が終わったら、次はそこにジャンプさせるための始点 = リンクタグを挿入します。

<a href="#anchor-01">
(アンカーの場所にジャンプさせる文字)
</a>

<a href="# アンカーの名前 "> ページ内リンク ここから 
</a> ページ内リンク ここまで

これを読んでいただくとわかると思いますが、一箇所を除いて、他のページへのリンクのタグと同じです。
違うのは、" と " の間の文字列、リンクの終点を指定する文字列の先頭に # が付いていることです。

"# アンカーの名前 " 
"#anchor-01" 

◆HTMLタグの入力支援メニューで挿入

1.ページ内リンクの始点の文字列を範囲選択します。

「リンク」のサブメニューから、「同一文書」を選んでEnterキーを押します。

3.ダイアログボックスが開いて、「リンク先のアンカーを選択してくださいの リストビュー」と音声がします。

4.リストビューの中を上下矢印Keyで移動しながら、目的のアンカーを探してカーソルを合わせます。

5.EnterKeyを押すと、リンクタグが 範囲選択した文字列の前後に挿入されます。

■リンクタグはどこに挿入する?

リンクタグやアンカータグをつけたい文字列に、見出しや太字などの文字装飾のタグがすでについている場合があります。
その場合は、下記のように 見出しタグなどの文字装飾のタグは、リンクタグ・アンカータグの外側に挿入します。

<p>
<b>
<a href="#profile">
自己紹介はこちらです。
</a>
</b>
</p>

<h2>
<a name="profile">
自己紹介 私は……です。
</a>
</h2>
posted by yanikun at 14:35| Comment(0) | 日記

リンク その1

リンク その1

インターネットを利用していて、便利だなあと感じることのひとつが、リンクによって関連するページに一発でジャンプ出来ることです。
次々とリンクを開いていって、いろいろなページを閲覧した経験は、どなたもあると思います。

なぜこういうことが可能なのかというと、そのページのソース(HTML文書)の中に、このリンクの所をクリックしたら(キーボードでは Enterキーを押したら)指定したページや場所にジャンプしなさい、という命令が書かれているからです。

というわけで、今回は「リンクタグ」の説明です。
なお、分量が多いため、二回に分けて掲載します。

■リンクの種類

リンクの命令には、次の三種類があります。

1.自分のサイトの中での、他のページ(HTML文書)へのリンク

2.よそのウェブサイト(ホームページ)へのリンク

3.同じページの中でのリンク(ページ内リンク)

■自分のサイトの中での、他のページ(HTML文書)へのリンク

もう ホームページ用のフォルダは作成してあると思います。次の二つのファイルを作成して、そのフォルダに保存して下さい。
※リンクタグでは、ファイル名の大文字と小文字が区別されます。ファイル名は原則として 半角英数 小文字にして下さい。

そして、ファイル名を入力する時は、間違いを防ぐために手入力ではなく、ファイル名をコピーして貼り付ける(ペーストする)ようにして下さい。

◆トップページのファイル名:

index.html

◆トップページの内容:

<html>
<head>
<title>
○○のはじめてのホームページ
</title>
</head>
<body>

<h1>
ようこそ、○○(あなたの名前)のはじめてのホームページへ
</h1>

<p>
<a href="profile.html">
自己紹介
</a>
</p>

</body>
</html>

◆リンク先のページのファイル名:

profile.html

◆リンク先のページの内容:

<html>
<head>
<title>
自己紹介
</title>
</head>
<body>

<p>

(※ここに、簡単な自己紹介の文章を入力して下さい。)

</p>

</body>
</html>

■リンク先のページにジャンプするか試してみる

ファイルを保存したら、MyFileで index.htmlにカーソルを合わせてEnterキーを押します。
Internet ExplorerやNetReaderなど、既定(標準)のブラウザが起動して、ページが表示されます。

下矢印キーを押すと、「自己紹介」という所の音程が変わっているはずです。
※リンクの音声の種類を変える設定にしている場合は、音声の種類が変わります。

そこでEnterキーを押します。
すると、profile.htmlのファイルにジャンプして、そこに書いた自己紹介のページが表示されます。

この、profile.htmlというファイルが、リンクの終点で、index.htmlの中に書いてある次の文字列が、リンクの始点です。

「終点」「始点」というのは、

リンクの行き先(終点=終わりの点)

そこまで行きなさい という命令(始点=始まりの点)

ということです。リンクには、この二つの点が必要になります。

■リンクタグの説明

<a href="profile.html">
自己紹介
</a>

「自己紹介」という言葉の前後のタグについて説明します。
わかりやすくするために、最初の行の href=…… という部分を消してしまいます。
すると、

<a> = リンク ここから 
</a> = リンク ここまで

となり、最初の方で紹介した、
< なんとか >
</ なんとか >
という セットのタグの形になっています。

次に、先ほど消した部分、
href="profile.html"
についての説明です。

href=
というのは、Hypertext REFerenceの略で、リンク先 つまり 終点がどこにあるかを示すものです。

ちなみに、この hrefは、「えいちれふ」または「はーふ」と読みます。
それに = がついていますから、リンク先は = の先に書いてあるよ、ということになります。
その リンク先を記述する時には、必ず前後を " " で囲うことになっています。

profile.html 
というリンク先のファイル名を " で囲み、href=の後にくっつけると、
href="profile.html"
となります。

これを、リンクタグ <a> の中にはめ込むと、
<a href="profile.html">
となります。
※なお、
<a

href="profile.html">
の間には、半角スペースが必要です。

こうして出来上がった、リンク ここから のタグと、リンク ここまで のタグ
</a>のふたつのタグで、リンクのきっかけとなる文字列をはさみます。

<a href="profile.html">
自己紹介
</a>

■HTMLタグの入力支援メニューで入力

下の説明だと、リンクタグの挿入は、とても手間がかかるように思えますが、実際はそれほどでもありません。

1.MyFileでホームページ用のフォルダを開きます。

2.リンク(ジャンプ)させたいページのファイル、この場合は
profile.html
にカーソルを合わせます。

2.F2キーを押して、「名前の変更」のダイアログボックスを開きます。
現在のファイル名が範囲選択された状態で、エディットボックスにフォーカスされていますので、Ctrlキー+C を押してコピーします。

4.Escapeキーを押して、ダイアログボックスを閉じます。

5.MyFileのカーソルを、リンクの始点を書き込みたいファイル、この場合は、
index.html
に合わせて、Ctrlキー+Enterキーを押します。
MyEditが起動して、index.html のファイルが開きます。

6.リンクの始点(きっかけ)にしたい文字列を探して 範囲選択します。

7.HTMLタグの入力支援メニューを開き、「リンク」の項目にカーソルを合わせます。

8.右矢印キーでサブメニューを開き、「他の文書」を選んでEnterキーを押します。

9.ダイアログボックスが開いて、「リンク先URL」と音声がします。
ここに、先ほどコピーしておいたファイル名を、Ctrlキー+V で貼り付けます。

10.Tabキーで「OK」のボタンに移動してEnterキーを押します。
これで、選択範囲の前後にリンクタグが挿入されます。

※「新規ウィンドウを表示先に指定する」のチェックボックスにチェックをつけると、ブラウザの新しいウィンドウが開いて、そこにリンク先のページが表示されます。つまり、ブラウザが二つ 起動した状態になります。

■相対パスと絶対パス

相対パスと絶対パスというと、何やら難しく聞こえますが、慣れればどうということはありません。
まず、「パス Path」というのは、ファイルの住所のようなもので、そのファイルがどこにあるのかを示すものです。HTMLの場合は、リンクの終点のファイルの場所を示すことになります。

◆相対パス

上に挙げた例では、リンク先のファイル名だけを指定しています。
HTMLでは、同じフォルダの中にあるファイルは、そのファイル名だけを指定すればいいことになっています。これが「相対パス」です。

◆絶対パス

これに対して、他のサイトのページをリンク先に指定する場合は、
http://talk-pc.sakura.ne.jp/
というように、http で始まるアドレス(URL)を指定する必要があります。これが「絶対パス」です。
posted by yanikun at 14:31| Comment(0) | 日記