新しいページを創ってリンクする

新しいページを創る
リンクさせる
リンクのマークアップ
なぜ profile.html なのか
一気に他のページも創ってしまう
index.html からそれぞれのページにリンクさせる

新しいページを創る

多くの場合、ホームページは1ページでは成り立ちません。いくつかのページを創り、それをトップページとリンクさせる必要があります。このページではその方法を説明します。やることはほとんどが復習なのでサクサク行きたいと思います。

手順1

最初のファイルを創るを参考にして、index.html ではない新しいファイルを創ります。ファイル名は『 profile.html 』にして下さい。

手順2

profile.html に次のように記述して保存する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>自己紹介</title>
</head>
<body>
<h1>自己紹介</h1>
<p>ここは管理人ララのプロフィールが書いてあるページです。</p>
<h2>名前</h2>
<p>ララ</p>
<h2>年齢</h2>
<p>20歳</p>
<h2>血液型</h2>
<p>AB型</p>
<h2>好きな食べ物</h2>
<p>果物</p>
</body>
</html>

結果

profile.html という名前の新しいページが誕生しました。

profile.html - メモ帳

ファイル(F)
編集(E)
書式(O)
表示(V)
ヘルプ(H)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>自己紹介</title>
</head>
<body>
<h1>自己紹介</h1>
<p>ここは管理人ララのプロフィールが書いてあるページです。</p>
<h2>名前</h2>
<p>ララ</p>
<h2>年齢</h2>
<p>20歳</p>
<h2>血液型</h2>
<p>AB型</p>
<h2>好きな食べ物</h2>
<p>果物</p>
</body>
</html>

げっ！また字ばっかりだ。

しつこいですね。デザインは後からやりますから。

こうやって新しいページを創って行くのです。新しいページを創るのに、再びフォルダから作り直す必要はありません。当面は最初に創った website というフォルダの中に全てのHTMLファイルを入れていってください。

フォルダは1つで、ファイルはたくさんでいいんだね。

1つという事でも無いのですが、ファイルを創るたびにフォルダを作る必要は無いという事です。

リンクさせる

さて、index.html に戻ります。リンク先のファイルを創ったのでリンクさせてみます。覚えていますでしょうか。リンクするには <a href="URI">文字列</a> でした。それでは今回の場合、URIには何を入れたら良いでしょうか。

http://・・・・って、profile.html のアドレスがわかりませ～ん。

そうですね。この時点ではまだ profile.html の http:// から始まる絶対パスを知ることは出来ません。というよりも持っていないと言った方が良いかもしれません。

それじゃあどうすればいいの？

ここで登場するのが相対パスなのです。

本当の事を言うと、現段階でも profile.html にはパスが存在します。先ずはその確認をしてもらいます。

手順1: profile.html の上で右クリックし、出てきたコンテキストメニューの中からプロパティを選択しクリックします。
結果: 場所と書かれている右側に書かれているのが profile.html のパスです。
この後は『キャンセル』か右上の閉じる(×ボタン)をクリックして閉じて下さい。

このパスは今後、絶対に用いる事はありません。これはこういった物があるよという説明です。そして相対パスを説明する為のものでしかありません。もう一度言います。この先、ホームページ創りをして行く上で、このパスが必要になることはありません。(このサイトの説明内では)

つまり <a href="C:\Documents and Settings\Owner\デスクトップ\website\profile.html">自己紹介</a> 等となる事は絶対にありません。

リンクのマークアップ

前項と同じようにリンクのマークアップを行います。ただし今度は属性値が絶対パスではなく、相対パスです。相対パスの記述方法については次項の補講で詳しく説明しますので、ここでは説明通りに事を運んで下さい。

手順1

index.html の中の自己紹介の部分を<a>～</a>でマークアップします。

<h2><a href="">自己紹介</a></h2>

手順2

属性値には相対パス(ここでは profile.html )を記入します。

<h2><a href="profile.html">自己紹介</a></h2>

結果

アンカーのマークアップが完成しました。クリックすると index.html から profile.html へ移動することが出来ます。

index.html - メモ帳

ファイル(F)
編集(E)
書式(O)
表示(V)
ヘルプ(H)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ララの世界</title>
</head>
<body>
<h1>ララの世界</h1>
<p>
ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。
</p>
<h2><a href="profile.html">自己紹介</a></h2>
<p>私のプロフィールです。</p>
<h2>ラララ日記</h2>
<p>日々の記録です。</p>
<h2>ララの写真館</h2>
<p>なんとなく撮った写真を公開しています。</p>
<h2>掲示板</h2>
<p>一言お寄せください。</p>
<h2>リンク</h2>
<h3>お友達リンク</h3>
<p>ネットで知り合った私の友人が運営しているサイトです。</p>
<h3>お役立ちリンク</h3>
<h4>ホームページ</h4>
<p>ホームページを創るのにお世話になったサイトです。</p>
<h4>その他</h4>
<p>その他のお役立ちサイトです。</p>
</body>
</html>

あれ？移動しない。

移動しない人はもう一度よく確認してください。文字の打ち間違いはありませんか？ index.html と profile.html は隣同士で同じ website フォルダの中に入っていますか？何かが少しでも違うと上手く行きません。

あっ! profile.html の p が大文字(Profile.html)になってた。

なぜ profile.html なのか

『ファイル名＝相対パス』なのかという疑問があると思いますが、それはほとんどの意味で間違いです。そういった条件になる場合がたまたまあるというに過ぎません。あまりこのパスの例は出したくないのですが、<a href="C:\Documents and Settings\Owner\デスクトップ\website\profile.html">自己紹介</a> としてもリンクは出来ます。しかし、これはそのパソコン内(ローカルと言ったりします)での場所を示しているに過ぎないのです。説明するならばこのパスは、Cというドライブ内の、Documents and Settingsという中の、Ownerの中の、デスクトップの中の、websiteの中の profile.html ですよという意味なのです。これは誰がどこで、どの位置から見ても変わりません。しかしながら、そこまで詳しく説明する必要があるでしょうか。例えば貴方が自分の住所を示すときに、どこから説明しますか？地球からですか？太陽系からですか？宇宙からですか？そこまでさかのぼる必要はありませんよね。果たしてどこまで省略する事ができるでしょうか。

例えば同じ国内で自分の住所を説明するのならば「日本」も要りません。同じ都道府県内なら「都道府県」も要りません。同じ市町村内ならば「市町村」も要りません。同じ番地内なら「番地」も要りません。同じマンション内ならば「マンション名」も要りません。同じ階数ならば「階数名」も要りません。最終的に残るのは「3号室の佐藤さん」とか「9号室の鈴木さん」という部分だけです。これをそのまま当てはめる事が出来るのです。

index.html と profile.html は website という同じフォルダ(マンション)に入っていて、隣にあります(同じ階にあります)。ですから index.html から見た profile.html はお隣(もしくは？号室)の profile.html(さん)と指定するだけでよいのです。これがつまり『ファイル名＝相対パス』ということなのです。上の例に戻りますが、例えば他のマンションに住んでいる田中さんが「3号室の佐藤さん」と言ったとします。そうしたらこの佐藤さんは上で出てきた佐藤さんと同じでしょうか？違いますよね。これが『相対』なのです。誰が見ても同じではありません。

さて、それでは田中さんが最初に出てきた佐藤さんのことを表現したいときは何と言えば良いでしょうか。そうです。マンション名と階数を言えば良いのです。『 website マンションの○階の3号室の佐藤さん』と言えばしっかりと伝わります。もちろん地球の・・アジア大陸の・・日本の・・○○県の・・××市の・・・・・・で伝わりますが、省略できる部分は省略しなければ後々都合が悪くなります。これから次項にかけてこのような例えを多くしますので、イメージを掴んでください。

しつこいようですが、<a href="C:\Documents and Settings\Owner\デスクトップ\website\profile.html">自己紹介</a> は間違いです。ご自分のパソコン内で楽しむ分には問題ないのですが、公表(発表)する段階になった場合に、これでは上手く機能しません。省略は嫌いだとか、そういった理由で全てを書こうとするのは無意味ですし間違いです。「省略した方が楽だから良い」のではなく、現段階では「省略して書かなければならない理由がある」なのです。

『ファイル名＝相対パス』にならない場合ってたくさんあるんですか？

はい。新しいフォルダを作ってその中にHTMLファイルを入れてリンクする場合はそうなります。

へっ？

難しいですよね。前項から次項までにかけて、この相対パスがずっとまとわりついてきます。これが理解できないとリンクもできませんし、画像も思い通りに使用することができません。補講2の相対パスが終わるまでに、この相対パスを理解できるように頑張ってください。

一気に他のページも創ってしまう

復習や練習の意味も込めて、他のページも創ってしまいましょう。創るのは「diary.html」「photo.html」「bbs.html」「flink.html」「wlink.html」「olink.html」です。数が多いですが、本当にWebサイトを立ち上げて運営していくとなれば、もっと多くのファイルを創ることになるでしょう。この作業を楽しんだり、慣れたりできなければ辛くなる一方かもしれません。新しいファイルの創り方などは既に説明しているので、わからなければさかのぼって読んでください。ここでは完成系と、それぞれのソースしか載せません。コピペをしても構いませんが、流れ作業のように行うのではなく、慣れようとしてください。

最終的な websiteフォルダ内の様子

diary.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ラララ日記</title>
</head>
<body>
<h1>ラララ日記</h1>
<p>ここは管理人ララの日記が書いてあるページです。</p>
<h2>2005年</h2>
<h3>1月</h3>
<dl>
<dt>3日</dt>
<dd>
ホームページ創りは難しいけど楽しい。
もっとお客さんに来てもらえるようにしようと思う。
</dd>
<dt>1日</dt>
<dd>
新年の始まりと共に日記をつけることにした。
いつまで続くかわからないが、気軽に頑張ろう。
</dd>
</dl>
</body>
</html>

表示サンプル ⇒ diary.html

photo.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ララの写真館</title>
</head>
<body>
<h1>ララの写真館</h1>
<p>
ここは管理人ララが気まぐれに撮った写真が展示してあるページです。
(写真をクリックすると拡大して表示されます)
</p>
<h2>静物</h2>
<dl>
<dt>風景</dt>
<dd>
<a href="image/pho01.jpg">
<img src="image/pho01.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho02.jpg">
<img src="image/pho02.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho03.jpg">
<img src="image/pho03.jpg" alt="" width="150" height="100">
</a>
</dd>
<dt>物質</dt>
<dd>
<a href="image/pho04.jpg">
<img src="image/pho04.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho05.jpg">
<img src="image/pho05.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho06.jpg">
<img src="image/pho06.jpg" alt="" width="150" height="100">
</a>
</dd>
<dt>植物</dt>
<dd>
<a href="image/pho07.jpg">
<img src="image/pho07.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho08.jpg">
<img src="image/pho08.jpg" alt="" width="150" height="100">
</a>
<a href="image/pho09.jpg">
<img src="image/pho09.jpg" alt="" width="150" height="100">
</a>
</dd>
</dl>
</body>
</html>

表示サンプル ⇒ photo.html
画像はウンロードして使用して下さい。その方法は次項で説明しますので、とりあえずは上のソースを記述していただければ、現在の所は何も表示されなくても構いません。

bbs.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<p>ここは掲示板の入り口です。約束事を守ってお気軽に書き込んでください。</p>
<h2>約束事</h2>
<p>
難いことは言いません。
<strong>一般常識</strong>や<strong>マナー</strong>を守ってご利用ください。
</p>
<h2>掲示板入口</h2>
<p>
<a href="">掲示板</a>
</p>
</body>
</html>

表示サンプル ⇒ bbs.html

flink.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>お友達リンク</title>
</head>
<body>
<h1>お友達リンク</h1>
<p>ここは管理人ララのお友達のサイトへのリンクページです。</p>
<ul>
<li>
<a href="http://www.border.jp/dearest/">あなたへ ～Memory of Love～</a>
</li>
</ul>
</body>
</html>

表示サンプル ⇒ flink.html

wlink.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>リンク(ホームページ)</title>
</head>
<body>
<h1>リンク(ホームページ作成支援)</h1>
<p>
ここは管理人ララがホームページを作成するのに
お世話になっているサイト様へのリンクページです。
</p>
<h2>講座</h2>
<dl>
<dt>
<a href="http://www.hayasoft.com/rara/web/index.html"><strong>真面目に創るWebサイト</strong></a>
</dt>
<dd>
管理人 : <em>rara</em> さん
</dd>
</dl>
<h2>素材</h2>
<dl>
<dt>
<a href="http://www.ushikai.com/"><strong>牛飼いとアイコンの部屋</strong></a>
</dt>
<dd>
管理人 : <em>Y.Kishino</em> さん
</dd>
</dl>
</body>
</html>

表示サンプル ⇒ wlink.html

olink.html のソースとその表示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>リンク(その他のお役立ち)</title>
</head>
<body>
<h1>リンク(その他のお役立ち)</h1>
<p>ここは管理人ララが普段利用しているサイト様へのリンクページです。</p>
<h2>検索サイト</h2>
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a></li>
</ul>
<h2>天気予報</h2>
<ul>
<li><a href="http://www.tenki.jp/">ワンクリック気象情報サイト</a></li>
<li><a href="http://weathernews.jp/">天気予報 - ウェザーニュース</a></li>
</ul>
<h2>地図</h2>
<ul>
<li><a href="http://maps.google.co.jp/maps">Google ローカル</a></li>
<li><a href="http://www.mapion.co.jp/">Mapion</a></li>
<li><a href="http://www.mapfan.com/">MapFan Web</a></li>
</ul>
</body>
</html>

表示サンプル ⇒ olink.html

創りっぱなしで放置しますが、その結果は下で説明します。

もの凄く疲れました。

本当ですか？コピペしていたように見えましたが。

ギクッ!ええっと、そんなことよりもリンクした文字って下線が引かれたり色が変わったりしちゃってますけど、これってなんとかならないですか？

だから見栄えは後でやりますって。それにリンクしてある文字列が他と区別されてなかったらどこにリンクがあるかわかり難いではないですか。

そんなに怒らなくてもいいのに…

index.html からそれぞれのページにリンクさせる

どうでしょうか。もう説明しなくても出来るくらいになっていますでしょうか。リンクさせたい文字列を選び、<a>～</a> でマークアップし、href属性の属性値に上で創ったHTMLファイルの相対パスを入れるだけです。

手順1

index.html の<a>要素内のhref属性の属性値に、それぞれのファイルの相対パスを記入します。

<h1>ララの世界</h1>

<p>ご訪問ありがとうございます。
ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。
今のところは日記や写真、掲示板しかありませんが、
もっと頑張って素敵なサイトにして行きたいと思っていますので、
どうぞ宜しくお願いします。</p>

<h2><a href="profile.html">自己紹介</a></h2>
<p>私のプロフィールです。</p>

<h2><a href="diary.html">ラララ日記</a></h2>
<p>日々の記録です。</p>

<h2><a href="photo.html">ララの写真館</a></h2>
<p>なんとなく撮った写真を公開しています。</p>

<h2><a href="bbs.html">掲示板</a></h2>
<p>一言お寄せください。</p>

<h2>リンク</h2>

<h3><a href="flink.html">お友達リンク</a></h3>
<p>ネットで知り合った私の友人が運営しているサイトです。</p>

<h3>お役立ちリンク</h3>

<h4><a href="wlink.html">ホームページ</a></h4>
<p>ホームページを創るのにお世話になったサイトです。</p>

<h4><a href="olink.html">その他</a></h4>
<p>その他のお役立ちサイトです。</p>

わかり難いかもしれないので、変更箇所のみを下記に抽出表示してみました。

<a href="profile.html">自己紹介</a>
<a href="diary.html">ラララ日記</a>
<a href="photo.html">ララの写真館</a>
<a href="bbs.html">掲示板</a>
<a href="flink.html">お友達リンク</a>
<a href="wlink.html">ホームページ</a>
<a href="olink.html">その他</a>

前にも書きましたが、<a href="profile.html"><h2>自己紹介</h2></a> や <h2><a href="profile.html">自己紹介</h2></a> などには絶対にならないので気をつけてください。

結果

全てのページが index.html とリンクされました。

index.html - メモ帳

ファイル(F)
編集(E)
書式(O)
表示(V)
ヘルプ(H)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ララの世界</title>
</head>
<body>
<h1>ララの世界</h1>

<p>ご訪問ありがとうございます。
ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。
今のところは日記や写真、掲示板しかありませんが、
もっと頑張って素敵なサイトにして行きたいと思っていますので、
どうぞ宜しくお願いします。</p>

<h2><a href="profile.html">自己紹介</a></h2>
<p>私のプロフィールです。</p>

<h2><a href="diary.html">ラララ日記</a></h2>
<p>日々の記録です。</p>

<h2><a href="photo.html">ララの写真館</a></h2>
<p>なんとなく撮った写真を公開しています。</p>

<h2><a href="bbs.html">掲示板</a></h2>
<p>一言お寄せください。</p>

<h2>リンク</h2>

<h3><a href="flink.html">お友達リンク</a></h3>
<p>ネットで知り合った私の友人が運営しているサイトです。</p>

<h3>お役立ちリンク</h3>

<h4><a href="wlink.html">ホームページ</a></h4>
<p>ホームページを創るのにお世話になったサイトです。</p>

<h4><a href="olink.html">その他</a></h4>
<p>その他のお役立ちサイトです。</p>
</body>
</html>

どうですか。デザインはともかく、ホームページらしくなってきましたよね。

はい。デザインはともかくですが。それより写真を表示させたいのですが。

画像を扱うのは最後でも良いと思うのですが、相対パスの説明もあるので次で説明してしまいましょう。他の見慣れないタグについては徐々に説明して行くので今は読み流して下さい。それから表示されない画像もそのままで構いません。