無料でWEBサイトを作っちゃお！　～WEBサイト作りの基本//リンク作成

Sponsored sites

ページ同士をつなげることをリンクもしくはハイパーリンクと言います。
リンクはウェブサイトの要です。

では、今からリンクを作成して行きましょう。

１．リンクを作成する前に
　　２．土台作り～５．背景とページの設定までと同じ方法で何ページか作りましょう。

今度は好きなファイル名でOKです。
こんなページを作ってみました。・・・ profile.html と poem.html というファイル名にしました。

今までのファイルと同じフォルダに入れておきます。

２．リンクの作成

３．文字の方法でindex.htmlにMENU部分を追加しました。

リンクは <a href="ファイル名orURL">テキストor画像</a> で設定します。

サンプルページ：只今こんな感じです。

テキストだけでなく、画像からリンクを貼ることもできます。

画像からむりょっちゃお！のTOPページにリンクを貼るとこうなります。

今の状態ではリンクは全て同じウィンドウで開きます。
<a>の中に target="_blank" を入れると新しいウィンドウでページを開くことが出来ます。

これで画像をクリックするとむりょっちゃお！のTOPページが新しいウィンドウで表示されます。

今までと同じ方法でprofile.htmlからindex.htmlへ、poem.htmlからindex.htmlへリンクをして、
全てのページをつなげましょう。

以上で簡単なウェブページが完成しました。
完成形はこんな感じです。
◇index.htmlのHTML
　　　<html> <head> <meta http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル子のホームページ</title> <style type="text/css">  </style> </head> <body> サンプル子のホームページ <img src="picture001.jpg" width="280" height="240" border="1" alt="フルーツ"> ようこそ、ここは「サンプル子のホームページ」です。 初めてホームページ作りに挑戦してみました。 どんどん内容を充実させていきます。 どうぞゆっくりしていってください。 ◇MENU◇ <a href="profile.html">プロフィール</a> <a href="poem.html">ポエム</a> <a href="http://tocopoco.com/" target="_blank"><img src="banner.jpg" width="88" height="31" border="0" alt="無料でHPを作っちゃおう！"></a> 管理人：サンプル子 2008.10.01 </body> </html>
◇profile.htmlのHTML
　　　<html> <head> <meta http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル子のホームページ</title> <style type="text/css">  </style> </head> <body> ○○のプロフィール ハンドルネーム：サンプル子 星座：射手座 血液型：B型 動物占い：コアラ よろしくお願いします♪ <a href="index.html">TOPページに戻る</a> 管理人：サンプル子 2008.10.01 </body> </html>
◇poem.htmlのHTML
　　　<html> <head> <meta http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル子のホームページ</title> <style type="text/css">  </style> </head> <body> 詩 このページでは○○の書いた詩を載せていきます。 出来次第アップしていくので楽しみにしていてください☆ <a href="index.html">TOPページに戻る</a> 管理人：サンプル子 2008.10.01 </body> </html>

それでは、いよいよ公開しましょう！

戻る＜　TOP　＞次へ

△ページTOPへ　：　無料でWEBサイトを作っちゃお！TOP