ＨＴＭＬを覚えたい～リンク編・実践ページ

ホームページを作ってみよう Ⅲ　　★　ＨＴＭＬを覚えたい～リンク編　★　←　こっちも見てみてね♪

≪ ＨＴＭＬを覚えたい～リンク編 ≫の実践ページです。。。ＨＴＭＬの本を参考にして実際に試してみました

　 お知らせ　・・・　 07/11/1７　以下の３つについて更新しました

　　　　　　　　　　　　　　　　※　ページの一番下から、この表の一番上の行にジャンプするようにしました♪

　　　　　　　　　　　　　　　　※　テーブルの中で指定した箇所にジャンプできないという件ですが、できなかった理由が判明しました♪

　　　　　　　　　　　　　　　　　　詳しくは、その説明部分へジャンプして（ ↑ リンクテキストをクリック♪）読んでくださいね

　　　　　　　　　　　　　　　　　　すご～く簡単な原因なのに今まで気付かなかったなんて、恥ずかしいです (^▽^；

　　　　　　　　　　　　　　　　※ 　フレームで分割したページを作ったんだけど、リンク先の開くウィンドウを指定する属性値≪ ＰＡＲＥＮＴ ≫がよく理解できていません (^ー^ゞ

ちゃんと理解できてから、この表のその部分の内容を更新したいと思います。。。ごめんなさい m(__)m

リンク

　　このページでは、リンク設定に関わるタグを使って、それぞれ試してみました

★　ハイパーリンク・・・文字や画像をクリックした時に、他のページや別のサイトを表示（ジャンプ）する機能のこと　　　

　★　文字や画像に

　　リンクを設定

（リンクボタン）　

　●　文字や画像にリンク（リンクボタン）を設定するタグ（要素）　＜Ａ＞

＜Ａ　ＨＲＥＦ＝ ”リンク先のＵＲＬ ”＞

　　　　　　　　　リンクを設定する文字や画像＜／Ａ＞

　ジャンプ先を指定する属性　・・・　ＨＲＥＦ

　　　　　　　属性値　・・・　表示させるページのＵＲＬ

　≪ 記　述　例 ≫　

　　　　リンク先は、私のホームページにして、試してみます

　　◎　文字（テキスト）にリンクを設定する

<a href="../../cocoa_py">ホームページを作ってみよう Ⅲ</a>

　　　　　　　ホームページを作ってみよう Ⅲ　　　

◎　画像にリンクを設定する

　　リンク先は私のホームページ、画像はジオシティーズに保存してあるフリー素材です

★　リンクボタンの

枠を消す

　●　上記のように画像にリンクを設定した場合、枠が表示される場合があるので

　　　　その枠を消す方法です

　　※　画像が四角の場合はあまり気になりませんが、丸い画像の場合は見た目がよくありません

　＜Ａ　ＨＲＥＦ＝ ”リンク先のＵＲＬ ”＞

　＜ＩＭＧ　ＳＲＣ＝ ”リンクを設定する文字や画像のＵＲＬ　ＢＯＲＤＥＲ＝ ”０ ”＞　＜／Ａ＞

　≪ 記　述　例 ≫

上記の画像には枠が表示されていますので、その枠を消してみます　

★ ターゲットウィンドウの設定

　●　リンク先の内容を表示するウィンドウを指定する方法

　＜Ａ　ＨＲＥＦ＝ ”リンク先のＵＲＬ ”

　　　　　　　　ＴＡＲＧＥＴ＝ ”表示するウィンドウの任意の名前 ” ＞

　＜ＢＡＳＥ　ＴＡＲＧＥＴ＝ ”表示するウィンドウの任意の名前 ” ＞

　　※　ＢＡＳＥタグ　・・・　ヘッダー情報としてＴＡＲＧＥＴ属性を指定しておくと

　　　　そのページからリンクしている内容は、いつもそのウィンドウを開いて表示されます

　≪ 記　述　例 ≫

◎　表示するウィンドウに任意の名前を付けて、新しいウィンドウを開いて表示する

★ ホームページを作ってみよう Ⅲ ★</a>

★ ホームページを作ってみよう Ⅲ ★　

「ＨＴＭＬを覚えたい・リンク編」</a>

　　　　　　　「ＨＴＭＬを覚えたい・リンク編」

　　※　★ホームページを作ってみよう Ⅲ★をクリックして開いて、閉じないで

　　　　次に「ＨＴＭＬを覚えたい・リンク編」をクリックして開いてみてください

　　　　　　それぞれ別の新しいウィンドウが開いて表示されます

　　　参考書を読んでも、この設定の内容がどういう事なのか分からなかったんだけど

　　　試してみて「ああ、こういう事だったんだ」と、ようやく理解できました (^_^ゞ

★ リンク先のウィンドウの設定

　●　リンク先の内容を表示するウィンドウを、今開いているウィンドウで表示するか

　　　　別の新しいウィンドウを開いて表示するかを、指定する方法です

　　※　上段では、リンク先の内容を表示するウィンドウに任意の名前を付けて

　　　　その指定したウィンドウで開く方法を試してみました

※　ＴＡＲＧＥＴ属性を指定しない場合は、＿ＳＥＬＦ（今開いているウィンドウ）での表示

　 ★　リンク先の表示するウィンドウを指定

　　◎ ＜Ａ　ＨＲＥＦ＝ ”リンク先のＵＲＬ ”　

　　　　　　ＴＡＲＧＥＴ＝ ”リンク先を表示するウィンドウ ”＞～＜／Ａ＞

　リンク先を表示するウィンドウ（属性値）

　　◎　＿ＳＥＬＦ　・・・　今開いているウィンドウに表示させる

　　◎　＿ＢＬＡＮＫ　・・・　新しいウィンドウを開いて表示させる

　　◎　＿ＴＯＰ　・・・　フレーム内からのリンクで使用する属性値

　　　　　　　　　　フレームを解除して、ウィンドウ全体に表示する

　　◎　＿ＰＡＲＥＮＴ　・・・　フレーム内からのリンクで使用する属性値

　　　　　　　　　　　＜ＦＲＡＭＥＳＥＴ＞を設定したＨＴＭＬなので

　　　　　　　　　　　　ウィンドウ全体に表示される事が多い

　　◎　任意の名前　・・・　フレーム内からのリンクで使用する属性値

　　　　　　　　　　　指定の名前のウィンドウまたはフレームがある場合は、そこに表示

　　　　　　　　　　　指定がない場合は、新しいウィンドウで表示

　≪ 記　述　例 ≫

　　◎　今開いているウィンドウで表示させる場合

★ ホームページを作ってみよう Ⅲ ★</a>

★ ホームページを作ってみよう Ⅲ ★

◎　別の新しいウィンドウで表示させる場合

★ ホームページを作ってみよう Ⅲ ★</a>

　　　　　　 ★ ホームページを作ってみよう Ⅲ ★

　※　＿ＴＯＰ、＿ＰＡＲＥＮＴなど、画面をフレームで分割してある場合のリンク先の表示に関しては、そういうページを作っていないので、いつか作った時に試してみたいと思います

★ リンクボタンの上で、ヘルプを表示

　●　リンクボタンにマウスをのせた時に、ヘルプ（リンクタイトル）を表示させる

　＜Ａ　ＨＲＥＦ＝ ”リンク先のＵＲＬ ”　ＴＩＴＬＥ＝ ”表示させるヘルプの内容 ”＞リンクを設定する文字や画像＜／Ａ＞

≪ 記　述　例 ≫

★ 同じページの指定箇所にジャンプ

　●　同じページにある、指定した箇所にジャンプさせる

　　　ジャンプ先の特定の箇所に、目印となる名前を指定する事を、アンカーと言います

　＜Ａ　ＨＲＥＦ＝ ”＃任意のキーワード（アンカー名） ”＞

　　　　　　　　　リンクを設定する文字や画像＜／Ａ＞　

　　　※　この設定をしたリンクボタンをクリックすると

　　　　　　指定した箇所がページの先頭に表示されることになります

　＜Ａ　ＮＡＭＥ＝ ”任意のキーワード（アンカー名） ”＞

　　　　　　　　　 アンカーを設定する文字や画像＜／Ａ＞　

　　　※　このタグの記述で、アンカー名（任意のキーワード）を設定します

★　テーブル（表組）の中で、指定した箇所にジャンプするのを何度も試したのですが

　　　どうしてもうまくいかなかったので、メモ帳で作ってみました

　　　メモ帳でタグを記述して試したところ、何とか成功したので、下のＵＲＬをクリックしてね♪

★　同じページの指定箇所にジャンプする方法　★

　　★　07/11/17　更新

　　　　上記の、テーブルの中で指定した箇所にジャンプできないという件ですが、できなかった理由が判明しました♪

　　　　原因は、ジオクリエーターの編集画面のプレビューでジャンプができるかどうかを確認した事でした

　　　　Ｗｅｂページとして完成させた状態でアクセスして確認すれば良かったみたいですぅ～ (^ー^ゞ

　　　　このページの上のお知らせのところで、この部分やフレームの説明箇所にジャンプするように設定してるので

　　　　リンクテキストをクリックして試してみてくださいね♪

　　　　一番下から表のＴＯＰの行へジャンプするようにもしたので、試しに一番下のリンクテキストをポチしてみてね

★ 他のページや別のサイトの指定箇所にジャンプ　

　＜Ａ　ＨＲＥＦ＝ ”表示させるページのＵＲＬ＃任意のキーワード（アンカー名） ”＞

　　　　　　　 リンクを設定する文字や画像＜／Ａ＞

　＜Ａ　ＮＡＭＥ＝ ”任意のキーワード（アンカー名） ”＞

　　　　　　リンクを設定する文字や画像＜／Ａ＞　

　≪ 記　述　例 ≫　

　このページから、「メモ帳で作ってみよう・ＨＴＭＬファイル～同じページの指定箇所にジャンプする方法」というページにジャンプしてみます

<a name="zokusei">属　性</a> というタグを、ジャンプ先のページに記述しています

　　 属　性　　← この「属性」をクリックすると、上記で指定した他のページの

キーワードの所にジャンプします

この表のＴＯＰへ

★　このページで使用している画像は、すべてフリー素材です

Ｈ Ｔ Ｍ Ｌ を 覚 え た い ～ リ ン ク 編 ・ 実 践 ペ ー ジ

ＨＴＭＬを覚えたい～リンク編・実践ページ