ハイパーリンクを作成する


WEBの代名詞、リンクを作成してみましょう。

動画の流れ

  • publicディレクトリ内に静的ファイルabout.htmlを作成します。
  • about.html内に事前に用意していたHTMLを貼り付けます。
    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <h1>このサービスについて</h1>
            <p>Sinatraで作成したWEBサービスですよ!</p>
            <div>
                <a href="/">戻る</a>
            </div>
        </body>
    </html>
  • <a href="/">戻る</a>の部分がリンクの書き方であることを確認します。
  • index.erb内にfooterを作りabout.htmlへのリンクを作成します。
            <footer>
                <a href="about.html">このサービスについて</a>
            </footer>
  • https://workspace-username.c9users.io/にアクセスして作成されたリンクをクリックします。
  • https://workspace-username.c9users.io/about.htmlにアクセスできることを確認します。
  • https://workspace-username.c9users.io/about.htmlのリンクからもhttps://workspace-username.c9users.io/にアクセスできることを確認します。

検索してみよう

  • 「絶対パス 相対パス」で検索してリンクの指定の仕方を確認してみましょう。
  • 「Sinatra」で検索して公式ドキュメント(日本語版)を開いてみましょう。
  • 公式ドキュメント内で、「public」で検索して静的ファイルの扱いについて確認してみましょう。
    • command + fでページ内検索をすることができます。

今回のコードはこちらから確認することができます。

前の章に戻る

次の章に進む


コメントを残す