5.リンクの使い方

imgタグも、画像ファイルへのリンクです。しかし<img src= のリンクは、画像ファイルを埋め込むリンクで、htmlで書かれたドキュメントの中に画像が表示されます。

これに対し、特定の種類のファイルは、そのアドレスへのリンクを設定することで、新しいページへ飛んで、そのファイルを表示できます。自動的に飛ぶリンクもありますが、セキュリティのため、特定の場所をクリックするなどの操作で、別のファイルに飛びます。これをリンクといいます。

●<A HREF="ファイルアドレス">というファイルへのリンクタグ

このタグは、終了タグ</A>が必要で、この間にあるものが、リンク先へ飛ぶためのクリック対象になり、文字の場合は青いアンダーラインが表示されます。これは、「クリックすると飛びます」という警告のための表示です。

ファイルアドレスは、場所とファイル名ですが、ファイル名は拡張子を含むものです。ファイル名を省略すると、その場所にあるhtmlファイルのうち、表紙を意味するindexという名前のhtmlファイルになります。

メモ帳を開き、以下のタグを書いてlesson3.htmlという名前で保存します。

このファイルを開くと、アンダーラインのリンクが表示され、これをクリックすると、winboys.netの表紙に飛び、開いていたページが変わります。もう、lesson3.htmlではなくなっていますが、←で戻ることができます。

 

•lesson3.html - メ モ 第 
表 示 (V) ヘ ル プ Ⅲ ) 
フ ァ イ ル 旧 物 第 に ) 書 式 0 
朝 h 「 ef="http://wv•h'.winboys.net">Win坊の ペ ージ く /a> 
ロ 
X 
鬥 厄 550n 引 h い 
朝 
0 
〇 フ ァ イ ル ー C:/Users/winboys/Desktop/lesson3.ht... ☆ 
の 
女 
Win 坊 の ペ ー ラ 
ロ 
X 
4 Win 坊 パ ソ コ ン 教 言 所 
0 〇 セ キ ュ リ ア イ 保 護 な し 一 肭Ⅷ . winboys.net 
← 
☆ 
ExcelVBA 
HTML 
プ ロ グ 
、 MindOW に つ し 、 て 
当 
X P S 
と 1i1 
GMail 
14 
法 寺 ( 畧 
21 
Y' ^ 00 ! M 
28

●リンクのセキュリティ対策

このように、リンクは、何処に飛ばされるのか分からず、悪用されることもあります。リンクが存在することを示すブルーのアンダーラインは、htmlの書式設定(CSSの記述)で消すこともできますが、マウスを乗せると、カーソルが手のマークになって、リンクの存在を教えます。また、ブラウザによっては、下に、埋め込まれたリンクのアド

レスが表示され、右クリックすれば、リンクへの処理を選択できます。

鬥 厄 550n ま ht 
0 
Win 坊 の ペ ・ 
ロ 
ロ 
朝 
www.winboys.net 
〇 フ ァ イ ル C:/Users/winboys/De.. 
☆ 
臨 
の 
査 
0 
リ ン ク を 新 し い タ ブ て ぐ を 
リ ン ク を 新 し い ウ イ ン 物 て 関 ぐ w ) 
リ ン ク を 陬 va 悼 ウ イ ン ド ウ で 弩 ぐ P ) 
名 前 を 付 け て リ ン ク を 保 存 ( K ) 
リ ン ク の コ ビ 70 ) 
コ し ク シ ョ ン に 追 第 
費 発 者 ツ - ル て ま 支 す 引 N ) 
ロ ′ ト Shi 代

 

新しいウインドウで開く、というのは昔タイプのブラウザでタブが無い時代、リンクでもう一枚のブラウザが開く方式です。ネットサーフィンをしているうちに、ブラウザが何十枚も開かれ、パソコンが止まってしまうなどのトラブルもあったので、今は「新しいタブで開く」のが普通です。その為に、ブラウザにタブ(複数ページへの切り替え)が出来ています。

<a タグに、target="_blunk" オプションを追加することで、元のページは開いたままタブの追加でリンク先を開けます。_blunk は、ブランク・何もない の意味なので target="" でも大丈夫です。

いずれにしても、リンクは便利ですが、セキュリティという指摘はつきものです。そもそも、インターネットは、ネット上のファイルを共有するリンクの塊です。リンク先の、内容・著作権については十分注意してください。htmlは、そもそも、共有のためのドキュメントですから。

 

●<aタグで、リンクできるファイルの種類

基本的に、実際に存在するファイルなら、何でもリンクは指定できます。ただし、ブラウザで直接開かれるファイルは、原則htmlファイルに限られます。しかし、jpegなどの画像ファイル(gif・png)やpdf

も今はブラウザだけで開けます。昔のように、adobereaderをインストールしてファイルをダウンロードして開く必要はありません。

直接開けないファイルは、「ダウンロードしますが」でダウンロードして開くのですが、これは何でもありの危険ファイルです。pdfは、インターネットでの実績が30年以上になり、adobe社が著作権も放棄したので、ブラウザで標準で開けます。microsoft社のワード・エクセル・パワーポイントは、著作権が残っているので、ダウンロードしてパソコンにインストールされたOfficeソフトで開くことになります。著作権管理がコンピューターとは別の、音声・動画ファイルも、直接は開けません。

リンクさせるのは、直接開けるものだけにします。

 

●画像の直接リンクの例

aタグの hrefで、https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpgの画像アドレスを指定します。インターネット上のWin坊のアップしたファイルを、右クリックして、画像アドレスをコピーで得たアドレスです。直リンクした場合、画像は原寸表示になります。

lesson3,html - 
JL'(F) e it(O) 
<a href="https://i .pinirng. 
lesson3.html 
comFö64x/06/ee/12/06ee 122bdgc9ed983e2fb05fgggOl 637. 
(D )rdJL' C:/Users/winboys/Des... 
06ee122begcgedg83e2fb05fggg x + 
https://i.pinimg.com/564x/06/ee... 
o 
x

imgタグとの違いに注意してください。

 

●縮小画像を、リンクに使う

<aタグの中身を、画像にすれば、文字でなく縮小画像をクリックして原寸画像を表示できます。

<a href="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg">

<img src="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg" width=200"></a>

画像です の位置に<img タグを挿入しました。長くなるので、改行しています。

横幅200の画像をクリックすると、原寸の画像が開かれます。

 

lesson3.html - 
: //I .P Ing.com/564x/06/ee/12/06ee122bdgcged983e2fb05f99901637. 
<img s c-"https://i .pinimg.com/564x/06/ee/12/06ee122bdgcgedg83e2fb05fggg01637.jpg 
lesson3.html 
CD (D C:/Users/winboys/Deskt... 
06ee122bd9cged983e2fb05f99g x + 
https://i.pinimg.com/564x/06/ee... @

 

■ポイント htmlは、文字だけなので、リンクの塊で作られています。