ページのリンク

おさる旅館WEBページのリンクがなくて見られません。
おさるさんが困っているので、助けてあげましょう。

リンクのhtmlタグ <a href=""></a>
リンクタグの「a href」は、使用頻度の高い基本的なHTMLタグのひとつです。
一般的なリンクタグの書き方はこのようになります。
<a href="リンク先のＵＲＬ">アンカーテキスト</a>

 

参考ページ　HTML基本とCSS ➡ リンク

01　まずは index.html のページから始めよう

Brackets ➡ ファイル ➡ フォルダーを開く／06hotel
index.htmlページを選ぶ。

<div class="side">～</div> 内の<ul>リストがリンクメニューになっています。<a>～</a>

 

※ href（hypertext reference）

02　リンクのコードを入れていきます<a>～</a>

●hrefのリンク先として一番よく使われるのがURL（絶対パス）です。
　<a href="https://www.p1room.com/">WEB＆DESIGN</a>

 

●リンク先としてURL（相対パス）を指定
　相対パスは現在のページを起点にリンク先ページの場所を指定する形です。

 

●リンクをクリックしたときに新しい画面が開くように設定する場合には「target="_blank"」を記入します。
　（※targetの前に半角スペースが必要）

　<a href="リンク先のＵＲＬ" target="_blank">アンカーテキスト</a>

 

 

 

03　他のページも同じようにコーディングしていきます

room.html、onsen.html、dinner.html

出来上がったら全部のページへリンクの確認をしましょう。

04　メニューをプラスする時は・・・

フォルダー内にもう１つ map フォルダーがあり中に index.html が入っています。
このページへもリンクさせてみましょう

マップのページだけは「map」というフォルダーに入っているので注意してください。

 

 

index.html、room.html、onsen.html、dinner.html
すべてのページにリンクを追加しましょう。
<li><a href="map/index.html">MAP</a></li>

05　mapフォルダーにあるindex.htmlもリンクをつける

マップのページは他のページと階層が違うため気をつけなければいけません。
ひとつ上の階層の時は「../」をファイル名の前に入れてください。

これでページリンク完成です。

おさるさんも喜んでくれると思います。