ページを追加する

ホームページ作成6日目:ページを追加する

「index.html」以外のページを作る!

ここまではホームページのメインページとして「index.html」のページを作ってきましたが、 これだけだとメインページ1ページだけのホームページとなってしまいます。

そこで、ここからは他のページを増やす作業をしていきたいと思います。

「001.html」をあたらしく作成する。

あたらしいページを作るには「index.html」を元データとして複製を作るところから始まります。

そして複製したら、ファイルを右クリックして”名前の変更”で「indeh.html」から「001.html」に名前を変えてください。

これだけでデータとしてあたらしい「001.html」のページが作れたことになります。 中身はメインページとまったく同じものを作ったことになります。

あとはページの中身を変えていくことで「001.html」ページを作りこんでいきます。

あたらしいページを作るときは「複製」して作るとかんたんに作れる

この時に気になるのが「ページを作るときに複製したもので対処して大丈夫なのか?」という点になると思いますが、 これは大丈夫です。基本的に各ページで違ってくるのはHTMLでいう<body>タグの中になります。

その他の<head>タグなどもありますが、変えるところはタイトル部分やメタタグ部分など わずかところだけなので、基本的に複製で対応して、そのページごとの<body>タグを 作りこんでいく。というスタンスで問題ありません。実際、私もあたらしいページを作るときは複製したものを使っています。

次に「リンク」の説明をしたいと思います。

HTMLでリンクを作る方法

「index.html」から「001.html」へリンクをつける

あたらしいページを作って、次に必要になるのは「index.html」ページから「001.html」ページへ移動できるよう リンクというものを作る作業になります。

せっかくページを作っても、このリンクがないと訪問者はメインページから001ページに移動することが出来ません。 なのでリンクを作ってあげることで、移動を可能にします。

リンクがどういうものなのかと言うと、次のようなものになります。

メインページに移動します。これがリンクとなります。

うえのリンク部分を選択してもらうとわかりますが、訪問者が選択することでメインページに移動することが出来るようになっています。 このようなリンクをちゃんと作ってあげることで、訪問者はホームページ中にある各ページを見にいくことが出来るわけです。

リンクの作り方は(<a href="URL">タイトル</a>)を使う

リンクを作るにはどうしたらいいでしょうか?

次のHTMLを使うことでリンクが作れます

<a href="移動先のサイト内URL">これがリンクとなります</a>

リンクを作るときは、「a href=" "」の部分に移動先のURLを入力する形になります。例えば今回の場合であれば「001.html」を入力することになるので以下のようなHTMLになります。

<a href="/001.html">001.htmlへのページへリンクする</a>

リンクを作るときに移動先のURLの記入の方法がいくつかあるのですが、私はよくこの記入方法でわからなくなった経験があります。例えば「/001.html」「../001.html」「https://www.domain-server-study.com/001.html」のように同じ「001.html」を入力するだけでも、いくつも記入方法があるわけです。この点を次に説明してみたいと思います。

「絶対ハス」「相対ハス」の説明

「絶対ハス」

<a href="https://www.domain-server-study.com/001.html">これが絶対ハスとなります</a>

絶対ハスは、移動先URLを記入するときにドメインから含めてURLを全部を記入する方法になります。 なので「https://www.domain-server-study.com/001.html」と記入しているのがわかると思います。

「相対ハス」

<a href="001.html">これが相対ハスとなります</a>

相対ハスの場合は、絶対パスと違い短くなっていますね。このようにドメインの部分を抜かして省略化して 記載するのが相対パスとなります。

単純に短くすればよいというものではなく、記述の方法が決まっています。この説明をするときには移動先ファイルが 「同じフルダ内にあるのか?」「違うフルダ内にあるのか?」なども考えなくてはいけません。 もし違うフルダ内にある場合は次のように記述します。

<a href="001.html">同じフルダ内にあるファイルを指定</a>
<a href="../001.html">1つうえにあるフルダのファイルを指定</a>

私が良く使っているURLの記述の方法は「/001.html」

このようにURLの指定する方法にはいくつも種類があって、非常にわかりづらいのですが現在、私が良く使っている記述は「/001.html」「/domai/001.html」といったような記述の形式になりました。

これは、絶対ハスであれば「https://www.domain-server-study.com/001.html」と記載するところ、ドメイン部分を簡略化して「https://www.domain-server-study.com/」を「/」の1文字だけで表示してしまう方法になります。

例えば当サイトのホームページカテゴリーにリンクを付けたい場合、絶対ハスであれば「https://www.domain-server-study.com/homepage/」と入力することになりますが「/homepage/」で同じように指定することができます。

「https://www.domain-server-study.com/homepage/template.html」であれば「/homepage/template.html」と記述する形になります。

なので、もしメインページから001.htmlにリンクを作る場合は「/001.html」と記述することになります。<a href="/001.html">001.htmlへのページへリンクする</a>

リンクの記述方法は種類が多く、慣れるまではわかりづらい点が多いのですが、個人的にはこの簡略化した絶対ハス「/001.html」の記述方法をおすすめしておきます。