東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けの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の入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

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

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

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

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

ホームページ制作・保守

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