超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
HP作成
はじめに HP作成に必要なもの HTMLについて HTML作成の基本 実際に作ってみよう！ ファイルの保存方法 タグの基本 見出しの書き方 表示位置を変える 段落・改行を入れる 画像を表示する 文字サイズと色の変更 テーブル(表)の基本 セルに文字を入れる セルの統合 セル内の配置を変える 文字の太さを変える リスト番号をつける リンクって何？ リンクを張ってみよう サーバって何？ HPを公開しよう！ All About
ホームページ作成 All About　JavaScript

リンクの張り方

リンクって何？

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

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

このページのタグは下のようになっています。
<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">３個</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>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</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
今回は同じフォルダにあるファイルにリンクを張りましたが、別のフォルダにあるファイルにリンクを張ることもできます。

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