メインページ　 序章　 その1　 その2　 その3　 その4　 終章
画像関連タグおさらい
画像に関するタグも学びこれでほとんどのことができるのではないかと思います。画像タグのおさらいをして最終段階に入りましょう。ここまでくればあと一息だ！

タグ意味　説明
<img src="1" width="2" height="3">1に画像のファイル名　2に横のサイズ　3に縦のサイズを指定する場合
<img src="1">1にファイル名　サイズを指定しない場合です
<body bgcolor="blue">背景色の指定　この場合は青色になります
<body background="壁紙の画像名">背景に画像を使う場合です
<img src="フォルダの名前/画像の名前">同一の場所の他フォルダから画像を呼び出す場合です

トマトくん最終段階に挑戦
　トマトくん
いやぁーマリモさん、自分のHPができるなんて感動ものですね。これからどんどん日記も増えていくし、画像の貼り付け方もわかったし、この調子でバンバン行きますよ！

　マリモさん
そうだよその調子。私なんか最初誰も教えてくれなかったから、メモ帳を使って基本的なことから始めりゃよかったのに、最初からHP作成ソフトを使ってタグの意味やら使い方も分からず3日くらいかかったからね。太陽さんに聞いたのはその後だったし。

それじゃあ今までの知識を利用しながらもう少し工夫を加えてみよう。今までは改行で縦の変化をやってみて、横のスペースを空けたりしてみたけど、横のレイアウトについてもう少し考えてみよう。

　トマトくん
それ思ってたんですよ。タイトルロゴなんかを真ん中に持ってきたりしたいんですけど。

　マリモさん
そうだね、Wordを使って文章を作るときに右や左に揃えたり真ん中に文章を持ってくることをやるよね。それをHTMLを使ってやってみよう。なにも指定しない場合は左揃えだからね。

まずは真ん中に持ってくる記述の仕方だ。
<div align="center"> </div>
真ん中に持ってきたいものをこのタグで囲えばよいよ。
<center> </center>
という簡単な方法もあるんだ。

　トマトくん
センター・・・中央、字のごとくですね。タグって意外と分かりやすいものなんですね。すると右や左の場合はライト、レフトってなるのかな？2番目の方が簡単に記述できそうなんですけど違いはあるんですか？

　マリモさん
最初のやつは空行が入るみたいだけど簡単に記述できる2番目の方法の方が楽だよね。右左はその通りだ、なかなかいい勘をしているよ。試してないけど右左はright、leftだけじゃだめだろうね。ページ全体をセンタリングしたい場合は<body>の直後に<center>を書いて</body>の手前に</center>を書けばすべてのものが真ん中に揃うよ。もちろん個別に使っても良いからね。

右にそろえる場合 <div align="right"> </div>
左にそろえる場合 <div align="left"> </div>

それじゃあ早速ロゴを真ん中にそろえてみよう。文字をそろえるのも画像をそろえるのもタグでくくればOKだ。

　トマトくん
index.html - メモ帳
ファイル(F)　編集(E)　書式(O)　表示(V)　ヘルプ(H)
<html>
<head>
<title>
トマトの初めてのホームページ作り
</title>
</head>
<body background="image/tomatoback.jpg">
<div align="center"><img src="image/logo.gif"></div><br><br>
ソースを編集しました。

　マリモさん
うん、それでOKだ。ブラウザの更新をクリックしてレイアウトの変化の様子を確かめよう。

ちゃんと真ん中にきてるね。右左の場合も同じだ。これで縦横のレイアウトもばっちりだね！

　トマトくん
後は自己紹介のページを作ってと、いろいろと忙しくなりますね。このトップページから自己紹介のページに切り替える場合はどうすればいいんですか。Yahoo! JAPANとGoogleに飛べるようにリンクをはるのはわかったんですけど、自分のページ内の移動方法を教えてください。

　マリモさん
全く同じだよ。飛びたいアドレスというかファイル名を指定してやればいいんだ。例えば自己紹介ページのHTMLファイル名を[profile.html]としようか、この場合、[index.html]と同じ場所にあれば
<a href="profile.html">表示される文字</a>
となるよ。

HTMLファイルを指定すればページが切り替わるし、画像やファイルを指定してやれば画像が表示されたりダウンロードの画面に切り替わるよ。自己紹介専用のフォルダを作ってその中に[profile.html]がある場合は、画像の時みたいに/を入れて指定すればOKだ。コンテンツが増えてきたら整理しておいた方が更新するときも分かりやすいしね。

この場合ページそのものが切り替わるけど、リンクタグに色々とオプションを指定することによって新規のWindowが表示されたり、トマトくんのページは普通だけどフレームを使用している場合自分のサイトのフレーム内に他のサイトのページが表示されちゃ、リンク先のサイトが見づらくなることもあるからね。オプションとしてはこんなものがあるよ。

<a href="アドレス" target="_self">表示される文字</a>　現在のWindow(フレーム)に表示
<a href="アドレス" target="_top">表示される文字</a>　フレームがあれば解除してWindow全体に表示
<a href="アドレス" target="_blank">表示される文字</a>　新しくWindowを作成しそこに表示

　トマトくん
早速自己紹介ページもこれまでの方法で試してみますね。[index.html]のコピーを使って中身の文字を消して内容を書き加えて[profile.html]とすればいいですね。

　マリモさん
自分のサイト内に移動する場合はそのままで他のサイトに移動する場合は新規にWindowが出るようにすると良いと思うよ。または自分のサイト内でも別窓に表示したい場合はblankオプションを使ってみるのもいいかもしれないね。

　トマトくん
・・・・・・10分後

自己紹介ページができました。早速トップページの内容を書き換えて、それと太陽さんからもらった自己紹介用のProfile画像を使って自己紹介ページに移動できるようにしてみます。

　マリモさん
その場合はリンクタグの[表示される文字]のところにProfile画像を用いれば画像をクリックすることにより移動できるようになるよ。それとブラウザの[戻る]ボタンでも前回表示されてたページに戻れるけど自己紹介ページからとトップページに戻れるようにリンクをはるのも親切だしいいよ。HomeかBackボタンを利用するといいかもしれないね。

最終段階
　太陽さん
さっきは失礼。ちょいとトイレに行ってきてすっかり出してきたからもう大丈夫だよ。さすがラッパのマークは効くね。さっきのドロドロ状態からかなり固形物に変化したよ。ところで、どれぐらい進んだの？

　マリモさん
太陽さん、大丈夫ですか？固形物ってう○このことですか？それにしてもトマトくんはなかなか飲み込みが早いよ。用意した画像もちゃんと使えてるし、もう自己紹介のページも作ってるからね。

　トマトくん
いや、そんなことないですけど、基本から教えてくれたマリモさんと画像まで用意してくれた太陽さん2人のおかげですよ。常備薬の定番、ラッパのマークは強力ですね。糖衣錠よりハ○クソタイプの方が効きそうなのは気のせい？

　太陽さん
ハ○クソタイプは歯痛にもよいらしいけど、詰めたものをなめるとヒリヒリするはクサイはで大変だぞ！

どれどれ・・・レイアウトもちゃんとしてるね。壁紙はちょっと文字が読みづらいかもしれないけどそんなに問題はなさそうだね。それじゃ、最後に重要なタグを教えてあげよう。

　トマトくん
え！まだなんかすごいことがあるんですか？

　マリモさん
う〜ん、私からは基本的なことは全部教えてあげたから最後に太陽さんにまかせます。

　太陽さん
これからどんどんページを作っていつかインターネット上にアップして世界中のひとからトマトくんのサイトを見てもらえるようになるよね。トマトくんが他の人の作ったサイトをみていろいろな感想を持つように、トマトくんのサイトを訪れてくれた訪問者もきっと何か感想を持つはずだ。楽しいサイトだな、綺麗なサイトだな、面白いなとか・・・・。トマトくんのサイト向けにリンクをはってもらえることもあるだろうし、そんなときにはお互いにリンクをはりあって相互に行き来できるようなサイトになるとアクセスも増えてくるだろうし、同じ内容を持った人達と触れ合うことができ、輪が広がってゆくよね。

だからそんな人達と連絡が取れるようにトマトくんにメールが送れるようにしよう。タグは簡単だよ。トマトくんのメールアドレスを[tomato@tomatoweb.com]とした場合こうするよ。
<a href="mailto:tomato@tomatoweb.com">表示される文字</a>

こうすれば、リンクみたいになって、訪問者がクリックしてくれれば、メールソフトが起動して、トマトくん宛てにメールが送れる状態になるよ。

　マリモさん
さすが太陽さんだ。ちょっぴり感動しちゃいました。リンクのはりかたも覚えたトマトくんなら簡単にできるはず。[表示される文字]のところは太陽さんが用意してくれたMail画像を使おう。いよいよ完成だね！

　トマトくん
本当にそうなってくれると嬉しいですね。僕もなんだかやる気がでてきました。僕が作った最後のHTMLファイルの点検を最後にお願いします。日記のトップに[Diary]の画像を加えて、リンクのところに画像を加えて、最終更新日も加えてみました。

index.html - メモ帳
ファイル(F)　編集(E)　書式(O)　表示(V)　ヘルプ(H)
<html>
<head>
<title>
トマトの初めてのホームページ作り
</title>
</head>
<body background="image/tomatoback.jpg">
<div align="center">
<img src="image/logo.gif">
</div>
<br><br>
<img src="image/diary.gif"><br>
<img src="image/sankaku.gif"><font size="4" color="blue"><b>2月29</b></font><br>
今日はマリモさんからページのレイアウト方法を教えてもらい<br>
太陽さんからメールの送信ができる方法を教えてもらいました。<br>
新たに自己紹介のページが完成しました。<br><br>
<img src="image/sankaku.gif"><font size="4" color="blue"><b>2月28</b></font><br>
今日はマリモさんに画像の貼り付け方を教えてもらいました。<br>
太陽さんとマリモさんが作ってくれたロゴと壁紙を使用してみました。<br><br>
<img src="image/sankaku.gif"><font size="4" color="blue"><b>2月27</b></font><br>
今日も新しいタグを教わりました。文字に関する装飾です。<br><br>
<img src="image/sankaku.gif"><font size="4" color="blue"><b>2月26</b></font><br>
今日はマリモさんにリンクのはりかたを教わりました。<br>
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
&nbsp;&nbsp;&nbsp;
<a href="http://www.google.co.jp/">Google</a><br><br>
<img src="image/sankaku.gif"><font size="4" color="blue"><b>2月25</b></font><br>
今日からホームページ作りを始めました。<br>
講師は僕の先輩のマリモさんです。<br><br>
<div align="center">
<a href="profile.html"><img src="image/profile.gif"></a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="mailto:tomato@tomatoweb.com"><img src="image/mail.gif"></a>
</div>
<div align="right"><font size="4" color="red"><b>最終更新日　2005年2月29日</b></font>
</div>
</body>
</html>

　マリモさん＆太陽さん
うんうん、よくできてるよ、文字の装飾もリンクも画像もレイアウトもちゃんとできてるし、今までに教えたあげたタグのほとんどを使えてるね。右揃えに最終更新日を入れたのはトマトくんのヒラメキじゃない？いかにもHPって感じに仕上がってるよ！ここは全角のスペースを入れて間隔をつくったんだね。これからどんな感じに発展していくのかな？

　トマトくん
マリモさんと太陽さんのおかげで僕もHP作りができるようになりました。最終完成の様子はこちらです。

最終完成の様子
　　　　　　
完成
どうでしたでしょうか？全くの初心者の方でも順番通りに追っていけばHP作成ができます。今回は自分のPC内で自分が作ったHPが閲覧できる状態にするということが目標でしたのでFTPソフトやHPスペースのお話などはできませんでしたが、次項のページで簡単に触れてみたいと思います。
メインページ　 序章　 その1　 その2　 その3　 その4　 終章