他のWebページを紹介=リンクを貼る
ときのいろいろ
前回 「Webサイト制作〜内容を書こう編〜」からの続きです
前回書いたHTMLが以下のようなものです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> あいさつの種類 </h1>
<p> あいさつは一番やさしいコミュニケーションの一つです。<br>丁寧な言葉遣いとラフな言葉遣いを使い分けることで相手との距離感も掴むことができます。</p>
<h2> 朝の挨拶 </h2>
<h3> 日本語 </h3>
<h4> 丁寧な言葉遣い </h4>
<h4> ラフな言葉遣い </h4>
<h3> 英語 </h3>
<h4> 丁寧な言葉遣い </h4>
<h4> ラフな言葉遣い </h4>
</body>
</html>ここに、他のWebサイトを紹介する表記をしたいと思います。
紹介したいWebサイトのURLを調べる
まずは紹介したいWebサイトをGoogle Chromeなどのブラウザで表示させます。
Google Chromeなどのブラウザ上部にある「アドレスバー」がそのWebページのある場所です。
試しに、Wikipedia「挨拶」のページを表示してみましょう。
Google Chromeなどのブラウザ上部にある「アドレスバー」に表示されたものがそのWebサイトのURL、つまり住所です。
紹介したいWebサイトのURLをHTMLで表示させる
前回の
Webサイト制作〜内容を書こう編〜で紹介した
<p>← ここから 段落 ここまで→</p>のタグをつかってURLを表記すると以下のようになります。
https://ja.wikipedia.org/wiki/%E6%8C%A8%E6%8B%B6
紹介したいWebサイトをクリックするとそのサイトを表示できるようにする
https://ja.wikipedia.org/wiki/%E6%8C%A8%E6%8B%B6このような表現でなく
このように表示したい場合には
<a href="https://ja.wikipedia.org/wiki/%E6%8C%A8%E6%8B%B6">Wikipedia 挨拶のページ</a>と記述する必要があります。
<a href="紹介したいWebサイトのURL">紹介したいWebサイトのサイト名・説明など</a>URLは必ず " と " で囲むようにします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> あいさつの種類 </h1>
<p> あいさつは一番やさしいコミュニケーションの一つです。<br>丁寧な言葉遣いとラフな言葉遣いを使い分けることで相手との距離感も掴むことができます。</p>
<h2> 朝の挨拶 </h2>
<h3> 日本語 </h3>
<h4> 丁寧な言葉遣い </h4>
<h4> ラフな言葉遣い </h4>
<h3> 英語 </h3>
<h4> 丁寧な言葉遣い </h4>
<h4> ラフな言葉遣い </h4>
<a href="https://ja.wikipedia.org/wiki/%E6%8C%A8%E6%8B%B6">Wikipedia 挨拶のページ</a>
</body>
</html>
全体像で見ると、上記24行目になります。
以上、Webサイト制作〜他のWebページを紹介しよう編〜 でした。