東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.12 ページのリンクを設定する

ページのリンクを設定する

演習1.12 ページのリンクを設定する

☑リンクの設定
<a href =”(リンク先のファイル名)”>○○○</a>

ここまで、トップページ(index.html)と、2つのサブページ(koneko.html、koinu.html)の準備をしました。続いて、それぞれのページのメニューをクリックするだけで、お互いのページを自由に行き来できるようにリンクの設定をします。

1. index.htmlのメニューにリンクを設定する

まず、「トップページ(index.html)」のメニューにリンクを設定します。

メニューにある、「トップページ」、「子猫写真」、「子犬写真」のセルに、<a
href=”○○○”>と</a>を書くことで、リンクが設定できます。

[index.html]をメモ帳で開いて、メニュー部分のテーブルのソースコードの記述を、以下のように変更してください。

➢ index.html (※必要部分のみ記載)

	~前略~
<table border="3" cellpadding="4" cellspacing="4 " width="660">
<tr>
<td width="220" align="center" bgcolor="#333333" ><a href="index.html"><strong><font color="#FFFFFF">トップページ</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333" ><a href="koneko.html"><strong><font color="#FFFFFF">子猫写真</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333"><a href="koinu.html"><strong><font color="#FFFFFF">子犬写真</font></strong></a></td>
</tr>
</table>
 	~後略~
        

上記の記述が終わったら、上書き保存をしてください。

ブラウザで表示すると、メニューの「トップページ」、「子猫写真」、「子犬写真」の文字の下にアンダーラインが引かれ、リンクの設定がされたことがわかります。

図 1.12.1

2. koneko.html、koinu.htmlのメニューにリンクを設定する

続いて、サブページの[koneko.html]と[koinu.html]のメニューにも、同様にリンクを設定します。先ほど[index.html]で記述した内容を、そのまま流用できます。

[koneko.html]と[koinu.html]をメモ帳で開き、メニュー部分のソースコードの記述を、先ほどの[index.html]と同様にしてください。

➢ koneko.html、koinu.html (※必要部分のみ記載)

	~前略~
<table border="3" cellpadding="4" cellspacing="4 " width="660">
<tr>
<td width="220" align="center" bgcolor="#333333" ><a href="index.html"><strong><font color="#FFFFFF">
トップページ</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333" ><a href="koneko.html"><strong><font color="#FFFFFF">
子猫写真</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333"><a href="koinu.html"><strong><font color="#FFFFFF">
子犬写真</font></strong></a></td>
</tr>
</table> 
 	~後略~
        

2つのサブページへの記述が終わったら、上書き保存をしてください。

3. リンクを確認する

[index.html]をブラウザで開いて、2つのサブページへ、メニューのリンクで行ったり来たりできるようになったか、確認してみましょう。

図 1.12.2

以上で、3つのページから構成される、「子猫と子犬の部屋」の完成です。

NEXT>> 演習1.13 本章のまとめ

HTMLとCSSの入門 目次

セミナー一覧

神田ITスクールの就職・転職

HTMLとCSSの入門 目次

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.