Home > 2-3.トップページ作成

2. Edit Website

<< 戻る | 進む >>

2-3.トップページ作成

いよいよ、念願のトップページ、すなわちindex.htmlを作ります。 はて、index.htmlとは何だったっけ？という方は 2-2のindex.htmlってなに？を もう一度おさらいしてみて下さいね。

HTMLファイルの作り方は2-1でtest01.htmlを作った時と同じです。 でも今回は、ファイル名をindex.htmlにして「website」 フォルダの中に保存して下さい。 そして、この先はtest01.htmlは使わないので削除してください。 すると、現在のぷう太郎のフォルダ状況は次の通りになります。

website
index.html
title01.html(使わないので削除)

それではこのindex.htmlの中身を作っていきましょう。

▼ファイル名：index.html
<html> <head> <title>ぷう太郎のホームページ</title> </head> <body bgcolor=#FFCC66 text=#EE7700> <center> <h1>楽しく貧乏！</h1> </center> <hr width=70%><br /><br /> <center> <b>■はじめまして■</b><br /> ぷう太郎のホームページへようこそ！<br /> ここでは「楽しく貧乏する」をモットーに<br /> コストパフォーマンスの高い生活について<br /> 貴方と一緒に考えていきたいと思ってます。<br /> こんなぷう太郎をどうぞよろしくっ！<br /><br /> </center> <hr width=70%> </body> </html>


また、タグのパターンがちょっと新しくなりました。 このHTMLファイルをブラウザでみてみると、一体どうなっているでしょう？

ご覧になりましたか？
なんと、test01.htmlの時と違い、画面や文字の色が変わっています(^o^) 一体どのタグがこのページをこんなにオシャレにしているのでしょうか？


ページをカラフルにする

★ 背景に色をつける 背景に色を付けているタグは<body>タグの中のbgcolor=#FFCC66 の部分です。bgcolorというのはBackGroundColor、つまり背景の色です。 次の#FFCC66というのは使用する色を表わしています。実は、HTMLでは 色を表わす時に光の3原色を16進数で表わしたものを使います。といっても、 いきなり16進数が読める人はいないと思うので、欲しい色は 4-A. HTMLの色見本を参照して、 好きな色を選ぶようにしましょう。

★ 文字に色をつける 文字に色をつけているタグは同じく<body>タグの中のtext=#EE7700 の部分です。textというのは文字の事なんですね。色の使い方は上で説明した 通りです。詳しくは2-Bの色見本を参照して下さい。

★ 横棒を任意の長さに設定する 横棒を表わすタグは<hr>でした。この横棒を「画面幅の70%の長さ」 で表示させているのは<hr>タグの中のwidth=70%の部分です。 他にも30%とか100%とか、いろいろ試して見ると面白いですよ！

★ それ以外のタグは ところで、上記以外のタグについての意味が知りたい方は、これまでの 解説ページに戻って復習するか、 4-B. HTMLタグ辞典を活用して下さい。


ついでに、メニューも

せっかくここまで作ったのですから、もうちょっと内容が分かりやすいように、 index.htmlにメニューなんかも加えてみましょう。

▼ファイル名：index.html


メニューだけあってリンクも何もついていないのはちょっとマヌケな感じも しますが(^^;)、なんとなくWebサイトの雰囲気が出てきたので、 とりあえずはこれで良し!? 次からはリンクの作り方なんかもやってみましょう。

>> 上にもどる
<< 戻る | 進む >>