HTMLタグでホームページ作成(SEO対策) そのI 複数のホームページをリンクで連結しよう。

ホームページを書き続けると1ページには収まらなくなる。
複数のページに分けて、相互にリンクできるようにしよう。

前回はリンクの挿入を行った。

今までホームページを作成してきたが、1ページだと見にくくなってしまった。
そこで複数ページに分けてリンクで連結することとする。
目次ページを作成して、そこから、各種ページへ飛ぶようにする。

sample11.htm

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">社長になりたい日記</H1>
<H2 ALIGN="CENTER">社長を目指すため汗みず働く平社員の物語</H2>
<P ALIGN="RIGHT">更新日 2009.3.15</P>
<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP" WIDTH="15%">
<P ALIGN="center">
<A HREF="./sample11.html">日記</A>
</P>
<P ALIGN="center">
<A HREF="./sample11/sample11-1.html">今後の予定</A>
</P>
<P ALIGN="center">
<A HREF="./sample11/sample11-2.html">リンク集</A>
</P>
</TD>
<TD VALIGN="TOP" WIDTH="85%">
<P>3月10日</P>
<P>
今日は会社であった。最近、<BIG><BIG>定時上がり</BIG></BIG>ではあるが、仕事が詰まっており、苦しんでいる
。<BR>
しかし、家に持ち帰って<S>サービス残業する気はない。</S><BR>
会社は会社。自宅は自宅。<BR><BR>
<SMALL>建前はそうなんだけどね。。</SMALL>
</P>
<HR>
<P>
3月11日
</P>
<P>
今日も会社。<STRONG>早く週末にならないかな。</STRONG><BR>
今週はどこいこうかな。<BR>
残念ながら、<B>家計</B>が<I>財政難</I>で<U>遠出</U>は無理だけど、考えてみるか。<BR>
</P>
<HR>
<P>
3月13日
</P>
<P>
今日は金曜日。定時の日だ。といっても、最近は残業禁止だ。<BR>
<DIV ALIGN="LEFT">
<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1"><BR>
</DIV>
何気に携帯で撮ってみた。<BR>
夜遅くの残業もなくなってしまったなぁ〜。<BR>
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

sample11-1.html

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">社長になりたい日記</H1>
<H2 ALIGN="CENTER">社長を目指すため汗みず働く平社員の物語</H2>
<P ALIGN="RIGHT">更新日 2009.3.15</P>
<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP" WIDTH="15%">
<P ALIGN="center">
<A HREF="../sample11.html">日記</A>
</P>
<P ALIGN="center">
<A HREF="./sample11-1.html">今後の予定</A>
</P>
<P ALIGN="center">
<A HREF="./sample11-2.html">リンク集</A>
</P>
</TD>
<TD VALIGN="TOP" WIDTH="85%">
<TABLE BORDER="1" ALIGN="CENTER">
<CAPTION ALIGN="TOP">今週の残業予定</CAPTION>
<TR ALIGN="RIGHT" VALIGN="TOP">
<TD ALIGN="CENTER">日付</TD>
<TD>3/16</TD>
<TD>3/17</TD>
<TD>3/18</TD>
<TD>3/19</TD>
<TD>3/20</TD>
</TR>
<TR ALIGN="RIGHT" VALIGN="TOP">
<TD ALIGN="CENTER">残業時間</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>0</TD>
</TR>
</TABLE>
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

sample11-2.html

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">社長になりたい日記</H1>
<H2 ALIGN="CENTER">社長を目指すため汗みず働く平社員の物語</H2>
<P ALIGN="RIGHT">更新日 2009.3.15</P>
<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP" WIDTH="15%">
<P ALIGN="center">
<A HREF="../sample11.html">日記</A>
</P>
<P ALIGN="center">
<A HREF="./sample11-1.html">今後の予定</A>
</P>
<P ALIGN="center">
<A HREF="./sample11-2.html">リンク集</A>
</P>
</TD>
<TD VALIGN="TOP" WIDTH="85%">
<P ALIGN="CENTER">リンク集</P>
<P ALIGN="CENTER">
<A HREF="http://www.yahoo.co.jp/">YAHOO!JAPAN</A><BR>
<A HREF="http://www.google.co.jp/" TARGET="_new">GOOGLE</A><BR>
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

リンクを貼る時は以下のタグを使用する。
<A HREF="リンク先">名称</A>

ここで、フォルダの階層の概念を使用する。

sample11.html
sample11フォルダ‐‐‐sample11-1.html
            sample11-2.html

リンク先をsample11.htmlからsample11フォルダ内のsample11-1.htmに指定する場合は
<A HREF="./sample/sample11-1.html">名称</A>
となる。

リンク先をsample11フォルダ内のsample11-1.htmからsample11.htmlに指定する場合は
<A HREF="../sample11.html">名称</A>
となる。

../は上の階層という意味になり、../../../は上の上の上の階層、
../../sample/sample11.htmlとすると上の上のsampleフォルダ内のsample11.htmlへリンクすることになる。

リンク先をsample11フォルダ内のsample11-1.htmlから同じフォルダのsample11-2.htmに指定する場合は
<A HREF="sample11-1.html">名称</A>
となる。

ついでに、<TABLE>(表)を使用して、リンクする場所と本文を分けた。
ブログ風にリンクを貼ることができる。


サンプルソースをダウンロードできます。

以上で自分で作成した複数のホームページをリンクで連結完了。

次はフォームを作成しよう。


実践!ホームページ作成TOP