Webサイトの醍醐味リンクを貼ろう

次に、Webページにリンクを貼ってみましょう。
【 リンクがないWebサイトはWebサイトじゃない 】って 言っちゃっても良いくらい、リンクは重要なものです。 Webページはリンクで色々なWebページと繋がるのが醍醐味ですからね。

では、早速先ほどの【 index.htm 】に編集を加えていきましょう。

<html>
<head>
<title>ようこそMyPageへ</title>
</head>
<body>
<img src="logo_html.gif">
<p>ようこそMyPageへ</p>
<p>MyPageでは、○○についての情報を発信していきます。</p>
<p>オススメリンク</p>
<a href="http://www.google.com/">google</a>:超大手検索エンジン
<a href="http://www.yahoo.co.jp/">Yahoo!japan</a>:超大手ポータルサイト
</body>
</html>

太字の部分が追加した部分です。編集が終了したら、ブラウザで確認してみてください。
実際にgoogle、yahoo!japanにリンクするのを確認してみましょう。

上記のリンクは、外部のサイトへリンクする場合の方法です。 では、次にサイト内へリンクを貼ってみましょう。

その前にリンク先のページを作りましょう。 【 index.htm 】と同じフォルダにリンク先のページを作ります。
テキストエディタで以下の内容を入力して下さい。

<html>
<head>
<title>リンクページ</title>
</head>
<body>
<img src="logo_html.gif">
<p>ようこそリンク先Pageへ</p>
</body>
</html>

入力できたら、名前を付けて保存して下さい。
保存場所は、【 index.htm 】と同じフォルダ、名前は【 link.htm 】としましょう。

リンク先のページが出来たところで、【 index.htm 】に編集を加えていきましょう。

<html>
<head>
<title>ようこそMyPageへ</title>
</head>
<body>
<img src="logo_html.gif">
<p>ようこそMyPageへ</p>
<p>MyPageでは、○○についての情報を発信していきます。</p>
<p>オススメリンク</p>
<a href="http://www.google.com/">google</a>:超大手検索エンジン
<a href="http://www.yahoo.co.jp/">Yahoo!japan</a>:超大手ポータルサイト
<p>リンクページへ</p>
<a href="link.htm">リンク</a>:リンクページへ
</body>
</html>

太字の部分が追加した部分です。編集が終了したら、ブラウザで確認してみてください。
実際にリンクページにリンクするのを確認してみましょう。


スポンサードリンク