imgタグも、画像ファイルへのリンクです。しかし<img src= のリンクは、画像ファイルを埋め込むリンクで、htmlで書かれたドキュメントの中に画像が表示されます。
これに対し、特定の種類のファイルは、そのアドレスへのリンクを設定することで、新しいページへ飛んで、そのファイルを表示できます。自動的に飛ぶリンクもありますが、セキュリティのため、特定の場所をクリックするなどの操作で、別のファイルに飛びます。これをリンクといいます。
●<A HREF="ファイルアドレス">というファイルへのリンクタグ
このタグは、終了タグ</A>が必要で、この間にあるものが、リンク先へ飛ぶためのクリック対象になり、文字の場合は青いアンダーラインが表示されます。これは、「クリックすると飛びます」という警告のための表示です。
ファイルアドレスは、場所とファイル名ですが、ファイル名は拡張子を含むものです。ファイル名を省略すると、その場所にあるhtmlファイルのうち、表紙を意味するindexという名前のhtmlファイルになります。
メモ帳を開き、以下のタグを書いてlesson3.htmlという名前で保存します。
このファイルを開くと、アンダーラインのリンクが表示され、これをクリックすると、winboys.netの表紙に飛び、開いていたページが変わります。もう、lesson3.htmlではなくなっていますが、←で戻ることができます。
●リンクのセキュリティ対策
このように、リンクは、何処に飛ばされるのか分からず、悪用されることもあります。リンクが存在することを示すブルーのアンダーラインは、htmlの書式設定(CSSの記述)で消すこともできますが、マウスを乗せると、カーソルが手のマークになって、リンクの存在を教えます。また、ブラウザによっては、下に、埋め込まれたリンクのアド
レスが表示され、右クリックすれば、リンクへの処理を選択できます。
新しいウインドウで開く、というのは昔タイプのブラウザでタブが無い時代、リンクでもう一枚のブラウザが開く方式です。ネットサーフィンをしているうちに、ブラウザが何十枚も開かれ、パソコンが止まってしまうなどのトラブルもあったので、今は「新しいタブで開く」のが普通です。その為に、ブラウザにタブ(複数ページへの切り替え)が出来ています。
<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坊のアップしたファイルを、右クリックして、画像アドレスをコピーで得たアドレスです。直リンクした場合、画像は原寸表示になります。
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の画像をクリックすると、原寸の画像が開かれます。
■ポイント htmlは、文字だけなので、リンクの塊で作られています。