HTML-リンクの作成
リンクを利用することにより、ブラウザに別のホームページを
表示させたりすることが出来ます。
先程作成した「index.html」←→「profile.html」へと相互に表示を切り替える
(ジャンプする)リンクを作成してみましょう。
index.htmlの変更 (リンクの作成)
「profile.gif」「top.gif」の2種類の画像は、
下の画像を右クリック して【名前を付けて画像を保存】から取得してください


<HTML>
<HEAD>
<TITLE>ホームページの練習</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif">
<CENTER>
<FONT SIZE="7">
<B>私の<I>ホームページ</I>にようこそ!
</FONT></B><BR>
<BR>
<IMG SRC="picture.gif">
<BR><BR>
<FONT COLOR="BLUE">これから色々作成していきます。
ごゆっくりどうぞ</FONT>
<BR><BR><BR><BR>
<A HREF="profile.html">
<IMG SRC="profile.gif" BORDER="0"></A>
<BR><BR>
<IMG SRC="welcome.gif">
</CENTER>
</BODY>
</HTML>
profile.htmlの変更 (リンクの作成)
<HTML>
<HEAD>
<TITLE>ホームページの練習</TITLE>
</HEAD>
<BODY BGCOLOR="moccasin">
<CENTER>
<FONT SIZE="7" COLOR="blueviolet">
<B>私のプロフィール</B></FONT>
<BR><BR>
<TABLE BORDER="1">
<TR>
<TD>自己紹介</TD>
</TR>
<TR>
<TD>名前</TD>
<TD>5年は寝たろう</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>ほどよく中年</TD>
</TR>
<TR>
<TD>趣味</TD>
<TD>食べ歩き・飲み歩き</TD>
</TR>
<TR>
<TD>特技</TD>
<TD>死んだふり</TD>
</TR>
</TABLE>
<BR><BR><BR><BR>
<A HREF="index.html">
<IMG SRC="top.gif" BORDER="0"></A>
<BR></BR>
</CENTER>
</BODY>
</HTML>

リンクさせる時にはどうすれば良いの?
項目をリンクさせるには、
<A HREF="リンク先">~</A>タグを使用します。
リンク先にはリンクする先のファイル名を、"~"の部分には
リンクさせる項目を指定します。
リンクさせる項目は、文字でも画像でも構いません。
上の例では、「profile」という画像(gifファイル)と「TOP」という画像
(gifファイル)を指定しています。
投稿者 hana : 2006年02月10日 17:23
