リンクの貼り方
このページでは、リンクの貼り方をご説明します。まずリンクを貼るために
必要な物があります。それは「複数のページ」です。
このサイトを見ながらサイトの作成をしている方は、「index.html」
の1ページしかないので、他のページをチャチャッと作っちゃいましょう。
ノートパッドで開いた「index.html」の上から下まで全ての文字をコピーして、
新しいメモ帳に貼り付けます。
そうしたら、貼り付けた方のメモ帳を「名前を付けて保存」してください。
ファイル名は「menu1.html」にして保存フォルダは「作業フォルダ」に保存してください。
(必ず「index.html」と同じフォルダに保存してください)
これでもう新しいページが出来ました。しかし「index.html」と「menu1.html」
はまったく同じ内容なので、「menu1.html」の「タイトル」や「見出し」なんかの
文字を適当に書き換えてわかりやすいようにしておきましょう。
そうしたら「index.html」の方をこのように書き換えましょう。
<?xml version="1.0" encoding="shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset-shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
ここにサイトのタイトルを記入
</title>
</head>
<body>
<div class="toptitle">
<h1>
タイトル
</h1>
</div>
<br />
<table class="tabletop">
<tr>
<td valign="top">
ここにサイトの紹介文を記入
<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu" valign="top">
<tr>
<td class="tablemenyu">
<table class="menyulist">
<tr>
<td>
メインメニュー
</td>
</tr>
<td>
<a href="index.html">トップページ</a><br />
</td>
</tr>
<td>
<a href="menu1.html">メニュー1</a><br />
</td>
</tr>
<td>
<a href="menu2.html">メニュー2</a><br />
</td>
</tr>
<td>
<a href="menu3.html">メニュー3</a><br />
</td>
</tr>
<td>
<a href="menu4.html">メニュー4</a><br />
</td>
</tr>
<td>
<a href="menu5.html">メニュー5</a><br />
</td>
</tr>
<td>
<a href="menu6.html">メニュー6</a><br />
</td>
</tr>
<td>
<a href="menu7.html">メニュー7</a><br />
</td>
</tr>
<td>
<a href="menu8.html">メニュー8</a><br />
</td>
</tr>
<td>
<a href="menu9.html">メニュー9</a><br />
</td>
</tr>
<td>
<a href="menu10.html">メニュー10</a><br />
</td>
</tr>
</table>
</td>
<td class="tablekiji" valign="top">
<table class="komidasi">
<tr>
<td>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu">
<tr>
<td valign="top">
<table class="komidasi">
<tr>
<td>
小見出し2<br />
</td>
</tr>
</table>
宣伝、リンク集など<br />
</td>
</tr>
</table>
</body>
</html>
赤い文字のところが変更点です。記述し終わったら上書き保存して
ブラウザで確認してみてください。
「メニュー1」のところに<a href="menu1.html">とかかれていますね。
そこが先程作った「menu1.html」のリンクになります。
「メニュー1」をクリックすると「menu1.html」のページに飛ぶはずです。
その他の「メニュー2」〜「メニュー10」はまだページが出来ていないので、
クリックしても「ページが見つかりません」と表示されます。
これは今後新しくページを作ったときに活用してください。
今の記述でこのようになっていたら成功です。
→このページの見本
次のページでは、スタイルシートを使用して
メインメニューの表のデザインを変えていきます。