ハイパーリンクの種類や基本の設定について理解することが目的です。
使用するフォルダとファイル
「chap06」フォルダ内の「2-1」フォルダへ、「link.html」を作成し保存します。
web制作
chap06
1-2.html
2-1
link.html(作成するファイルは2-1フォルダへ保存)
neko_4.jpg
A
HTMLの文章をコピー
「link.html」を作成し、下の文章をコピーして貼り付けましょう。
--見出し1--
リンクを設定するタグ
--段落--
文章の一部分や表示されている画像ファイルに、別のページやサイズの違う画像ファイルなどへリンク(参照)するタグ
--見出し2--
aタグ(アンカー/anchor)
--段落--
リンクを設定するには、クリックする範囲や場所をaタグで囲み、href属性でリンク(参照)
先を指定する。
--段落--
href属性の属性値には、リンク先のURLまたはファイル名を記述する。(絶対パス・相対パス)
--段落、改行--
aタグで囲まれたテキスト部分を「アンカーテキスト」と呼ぶ。
アンカーテキストは、リンク先の内容がわかる表現にすることで、操作性が向上し、利用しやすくなる。
--見出し3--
リンクの設定例
--段落--
東京通信大学のサイトへ
--見出し3--
リンクの種類と属性値
--段落--
リンクには、別のHTMLファイルや画像ファイルを表示する一般的なリンクの他、宛先のメールアドレスをメールソフトへ送るメールリンク、携帯電話で直接電話をかけるTELリンク、新しいブラウザタブでリンク先を表示するターゲットリンク、同じページ内の特定の場所へ移動す るページ内リンク、圧縮されたファイルをダウンロードできるダウンロードリンクなどがある。
--説明・定義リスト--
メールリンク
href="mailto:sample_ID@tou.ac.jp"
TELリンク
href="tel:08011112222"
ターゲットリンク
target="_blank"
ページ内リンク
href="#id名"(リンク先のタグに「id="id名"」が必要)
ダウンロードリンク
download(downloadのみでOK)文章に見出し・段落・改行・リストをマークアップする
「– 見出し –」というヒントは削除しておきましょう。
See the Pen 7-1 by Rayout-gw (@Rayout-gw) on CodePen.
絶対パスを使ったリンクの設定
絶対パスは「http://〜」から始まるURLを使った場所の指定です。
ブラウザの新しいタブで表示するには、target=”_blank“を追加します。
See the Pen 7-1-2 by Rayout-gw (@Rayout-gw) on CodePen.

