超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

リンクの張り方

リンクって何?

リンクとはファイルからファイルに移動できるようにすることを「リンクを張る」といいます。
リンクを張るとこのようにファイルとファイルを移動できるようになります。

では、簡単な2ページ目をつくってみましょう。

このページのタグは下のようになっています。
<html>
<head>
<title>MY HOMEPAGE2</title>
</head>
<body>

ページ2

</body>
</html>

これに「page2.html」と名前をつけて、ファイルを「index.html」と同じフォルダに保存してください。
(ファイル名は何でもかまいません)

リンクを張ってみよう!

では、「index.html」のファイルから「page2.html」のファイルに移動できるようにします。

リンクを張るタグは <a href="ファイル名"> </a> で、はさみます。
リンクはページの左下に作るので </center> タグの下に書きます。

<例題17>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>
<center>
<h1>MY HOMEPAGE</h1>
<img src="../img/cake.jpg"><p>
<font size=4 color="#0000FF">スポンジのつくり方</font><p>
<table width="350" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2"><font color="#FF0000"><材料></font> (例)18cmの丸型1個分</td>
</tr>
<tr><td width="200">卵</td>
<td align="center">3個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
<p>
<table border="0">
<tr>
<td>
<b><スポンジのつくり方></b>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>4に3を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>8割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</td></tr>
</table>
</center>
<p>
<a href="../kihon2.html">次のページへ</a>

</body>
</html>

ではファイルを保存してブラウザで見てみましょう!

うまく表示できたら「次のページへ」をクリックしてみましょう!
どうですか?「page2.html」が表示されましたか?

これでトップページの完成です!

このようにして色々なページにリンクを張っていきます。

基本的な練習はこれで終了します。
今までの練習を元にして、自分の好きなHPを作ってみてください!

自分のHPが完成したら「HPを公開しよう!」に進みましょう!

▲このページのトップに戻るTop


Tips
今回は同じフォルダにあるファイルにリンクを張りましたが、別のフォルダにあるファイルにリンクを張ることもできます。

詳しくは別フォルダにあるファイルのリンクで説明します。(準備中)