ページを増やしてリンクしよう！

せんせい

1ページだけじゃ寂しいから自己紹介のページとリンクページを追加してみよう。「index.html」をメモ帳で開いて↓のように入力してくれ。ついでに全部をセンターで揃えてみる。<a>の前には全角の空白があるので注意。リンクの間を空けるために入れてある。

 

<html>
<head>
<title>私のページ</title>
</head>
<body background="img/back.gif">
<div align="center">
<img src="img/welcome.gif" width="210" height="88"  alt="welcom">
<br><br>

<hr width="500">
<a href="index.html">トップ</a>
　<a href="about.html">プロフィール</a>
　<a href="link.html">リンク集</a><br>
<hr width="500"><br><br>

初めてホームページを作ってみた。<br><br>
<hr width="500">
</div>
</body>
</html>

HTML
タグメモ

<div align="center">　</div>
囲んだ中身をセンターに揃える。<div>自体は意味のあるタグではなく、中央寄せやCSSの効果を範囲指定するのに利用する。

<a href ="*"> </a>
hrefで指定したページにリンクします。

<hr width="*">
水平線を表示します。width="数字"で長さを指定。

入力が終わったら、上書きしてから「index.html」をクリックしてブラウザで確認すること。

センターで揃ってカッコよくなりました！
でも「プロフィール」と「リンク集」をクリックしても何も表示されないですよ？
せんせい

当たり前だ。まだページ作ってないだろうが。

先に言ってください。
せんせい

仕方ないな。
「プロフィール」と「リンク集」のリンク先ページを作ってないから、まだ表示されない。

遅すぎます！



プロフィールとリンク集を追加しよう！


せんせい

「プロフィール」と「リンク集」のページを追加するわけだから、「index.html」以外に2つのHTMLファイルを作らないといけない。「hp」フォルダを開くと今あるのは「index.html」ひとつだから、これをコピーして２つＨＴＭＬファイルを作るのだ。

コピーするには、index.htmlの上で右クリック→コピーしてからhpフォルダの中の何もないところで右クリック→ペーストで出来るぞ。他にもＣｔｌキーを押しながらドラッグしたり、コピーしたいファイルを選択してCtrl＋Ｃでコピー、Ctrl＋Ｖでペースト（貼り付け）でもＯＫ。ショートカットキーの説明はこちら。

コピーしたファイルは名前が「コピー〜index.html」とかになってるので、「about.html」と「link.html」に変更しておこう。※ファイル名に日本語が入ってると後でトラブルの原因になるので半角英数字の小文字で入力すること。

ファイル名の変え方は、ファイルの上で右クリック→名前の変更か、ファイルを選択してキーボード上のF２キーだ。

２つのファイルが出来たところで、今度は中身を変えていく。最初に作ったページをコピーしたわけだから、当然中身も最初のページのまま。まずは自己紹介ページ「about.html」の内容を変更してみよう。「about.html」をメモ帳にドロップして中身を↓のように変更してみる。 



<html>
<head>
<title>プロフィール</title>
</head>
<body background="img/back.gif">
<div align="center">
<img src="img/welcome.gif" width="210" height="88"  alt="welcom">
<br><br>

<hr width="500">
<a href="index.html">トップ</a>
　<a href="about.html">プロフィール</a>
　<a href="link.html">リンク集</a><br>
<hr width="500"><br><br>

初めてホームページを作ってみた。　←削除する
<br><br>

やっとホームページを作れた初心者です。<br>
教官！グズでノロマな亀だけど、がんばって<br>
立派なスチュワーデスになります！<br><br>

<hr width="500">
<a href="index.html">戻る</a>
</div>
</body>
</html>

入力が終わったら、上書き保存を忘れずに。

せんせい、できました！けど、この自己紹介はなんですか！？
せんせい

ヒロシ、この手をどうしてくれるの？
初心者

３０代にしか通じないネタはやめてください。
せんせい

だめか。自己紹介の内容は好きに書き換えてくれていいよ。

言われなくても変えますよ〜。

次はリンクのページの中身を変えてみよう。「link.html」を開いて↓のように書き換えること。 

<html>
<head>
<title>リンク集</title>
</head>
<body background="img/back.gif">
<div align="center">
<img src="img/welcome.gif" width="210" height="88"  alt="welcom">
<br><br>

<hr width="500">
<a href="index.html">トップ</a>
　<a href="about.html">プロフィール</a>
　<a href="link.html">リンク集</a><br>
<hr width="500"><br><br>

初めてホームページを作ってみた。<br><br> ←削除する

<a href="http://www.shoshinsha.com/hp/index.html">
1時間で作るホームページ</a><br><br>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
<a href="http://www.google.co.jp/">Google</a>
<br><br>
<hr width="500">
<a href="index.html">戻る</a>
</div>
</body>
</html>

全部入力したら、保存して確認すること。
※リンクに「1時間で作る」が入っているけども、参考で入ってるだけなので
　 必要ない人は削除してください。せんせいは泣くかもしれないけど気にするな。

初心者

せんせい、できました！自己紹介もリンクページもちゃんと表示されてます！
せんせい

あたりまえだろ。

せっかく出来たのに、いっしょに喜んでくださいよ〜。
せんせい

わーい、できたー。

ぼ、棒読み！？
せんせい

ここまでで、ページの作成は終わり。後はみんなに見てもらえるように次の「FTPでアップ」へ進んでくれ
FTPでアップへ