リンクの設定
リンクのまとめ
トップページからリンクを張る
これまでのリンクの練習や、その前のスタイルの指定の練習で、たくさんのファイルを作成してきた。
そこで、サイトのトップページからもこれら作品を辿れるようにリンクを張ることにした。
現在のトップページ「index.html」です。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>2020年講習会</title>
- </head>
- <body>
- <h1>2020年講習会</h1>
- <p>
- <a href="htmls/zoo.html">画像のサイズ</a>
- </p>
- <p>
- <a href="htmls/report.html">レポート</a>
- </p>
- </body>
- </html>
これに見出し「スタイル指定作品」を追加し、作品一覧を並べ、該当のファイルへリンクを張ります。
- <h2>スタイル指定作品</h2>
- <p><a href="htmls/sakusei1-3.html">複数セレクタ</p>
- <p><a href="htmls/sakusei2.html">セレクタのグループ化</p>
- <p><a href="htmls/sakusei4.html">子孫セレクタ</p>
- <p><a href="htmls/sakusei7.html">クラスセレクタ</p>
- <p><a href="htmls/sakusei8.html">IDセレクタ</p>
- <p><a href="htmls/sakusei10.html">ユニバーサルセレクタ</p>
同様に「リンクの設定作品」についても追加します。
- <h2>リンクの設定作品</h2>
- <p><a href="htmls/odekake.html">階層を越えてリンクを張る<p>
- <p><a href="htmls/hatsumoude.html">他サイトへリンクを張る<p>
- <p><a href="htmls/terms_index.html">ページ内リンクを張る<p>
トップページへ戻るリンクを入れる
これらのそれぞれのページの最下部には、トップ「index.html」ページへ戻るリンクを挿入しましょう。
- <p>
- <a href="../index.html">トップページへ戻る</a>
- </p>
参加者一覧ページへ戻るリンクを張る
最後にトップページ「index.html」から参加者全員の名前が表示されているページへのリンクを張ります。
- <p>
- <a href="../../text/member.html">参加者一覧ページへ戻る</a>
- </p>
サイトをサーバーへアップロードする
ここまできたら、作成したサイトをサーバーにアップロードしよう。
アップロードにあたってのサーバーの設定等に関しては「09_Webサーバーにアップロードする」を参照します。
それぞれのリンクが働くことを確認しましょう。
以上で、リンクの練習は終わりです。