1月17日(水)2コマ目

今日、やったこと

リンク

今日のホワイトボード

リンク

リンクとはクリックすると別ページを表示したり、同じページの別の場所を表示する仕組み。

<a>タグで作ります。<a>タグのhref属性で移動先を指定します。

別ページに移動する場合

<a>タグのhref属性に移動先ファイルを指定します。

図　<a>タグで別ページへ移動

同じページ内で移動する場合

まず、移動先にIDを指定します。

<a>タグのhref属性には移動先のIDを指定します。IDの指定は　#ID名　です。

図　<a>タグで同じページ内を移動

target属性

リンクをクリックして移動する際、移動先ページを同じタブに表示するか、新規タブに表示するかコントロールできる。

target属性値	表示
_blank	新規タブに表示
_self	デフォルト。同じタブに表示

練習問題

リンクの課題ですが、テーブルも使っています。

図　練習問題　ヒント

正解例をあげておきます。

1ページ目(index.html)

写真は表形式(2行x3列)で表示。

リンクの表示内容を写真にすることで、写真をクリックすると各犬の説明ページへ移動。

秋田犬のページ(akita.html)

index.htmlにて秋田犬の写真をクリックすると表示される秋田犬のページ。

説明は横方向に2セルを結合したセル。colspan属性で結合を指定。

甲斐犬のページ(kai.html)

index.htmlにて甲斐犬の写真をクリックすると表示される甲斐犬のページ。

秋田犬のページ(akita.html)の写真ファイル名、説明を変更するだけ。省略。

紀州犬のページ(kishu.html)

index.htmlにて紀州犬の写真をクリックすると表示される紀州犬のページ。

秋田犬のページ(akita.html)の写真ファイル名、説明を変更するだけ。省略。

柴犬のページ(shiba.html)

index.htmlにて柴犬の写真をクリックすると表示される柴犬のページ。

秋田犬のページ(akita.html)の写真ファイル名、説明を変更するだけ。省略。

四国犬のページ(shikoku.html)

index.htmlにて四国犬の写真をクリックすると表示される四国犬のページ。

秋田犬のページ(akita.html)の写真ファイル名、説明を変更するだけ。省略。

北海道犬のページ(hokkaido.html)

index.htmlにて北海道犬の写真をクリックすると表示される北海道犬のページ。

秋田犬のページ(akita.html)の写真ファイル名、説明を変更するだけ。省略。

次回は

レイアウトの話をします。