リンクの張り方
リンクって何？
リンクとはファイルからファイルに移動できるようにすることを「リンクを張る」といいます。
 |
リンクを張るとこのようにファイルとファイルを移動できるようになります。 |
では、簡単な２ページ目をつくってみましょう。
このページのタグは下のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE2</title>
</head>
<body>
ページ2
</body>
</html>
これに「page2.html」と名前をつけて、ファイルを「index.html」と同じフォルダに保存してください。
（ファイル名は何でもかまいません）
では、「index.html」のファイルから「page2.html」のファイルに移動できるようにします。
リンクを張るタグは <a href="ファイル名"> </a>
で、はさみます。
リンクはページの左下に作るので スタイルシートに
.left {
text-align:left;
}
上記のように左寄せのスタイルを記述します。
その後、BODYの部分で <div> </div> でひと固まりにして、その固まりを左寄せにします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
.sell {
text-align:center;
}
.strong {
font-weight: bold;
}
.left {
text-align:left;
}
-->
</style>
</head>
<body>
<div class="center">
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>
<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>
<p>
<table border="0">
<tr>
<td>
<span class="strong">＜スポンジのつくり方＞</span>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</td>
</tr>
</table>
</div>
<div class="left">
<a href="s_mihon_link_1.html">次のページへ</a>
</div>
</body>
</html>
ではファイルを保存してブラウザで見てみましょう！
うまく表示できたら「次のページへ」をクリックしてみましょう！
どうですか？「page2.html」が表示されましたか？
これでトップページの完成です！
このようにして色々なページにリンクを張っていきます。
スタイルシートの基本的な練習はこれで終了します。
今までの練習を元にして、自分の好きなHPを作ってみてください！
自分のHPが完成したらHPを公開しましょう！
HPの公開の仕方がわからない方は「HTMLのHPを公開しよう！」に進みましょう！
▲このページのトップに戻るTop
|
スタイルシートについて
基本のページ