Chap7-1 リンクの設定

Chap7-1 リンクの設定

ハイパーリンクの種類や基本の設定について理解することが目的です。

使用するフォルダとファイル

「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.