| *** 適当に作ってみよう *** |
| 1.TOPページを作る ◇完成予想図 初めて作るので、簡単なトップページを作ります。気に入らなくても、とりあえず最初はコレにして後から作り直す等すればよいと思います。
↑こんな感じの物。実物はこちら ◇実際に作ってみる ソースを書きますので、まずはこれらを全部メモ帳で打ち込んで下さい。 ※ソースと言うのは、コロッケ等にかけるものではなく、タグの集合体だと思ってください。
なんのこっちゃさっぱりわからん・・・。って感じですね。赤色の所がタグです。正式には、bgcolor=""等は属性と呼ばれていますが、ごちゃごちゃしてくるので、タグと呼ばせていただきます。 ◇解説 準備と予備知識の4.タグの基本知識で少し解説を行っているので、かぶる部分もありますが、解説します。 <html> ココからHTML文書が始まります。と言うものだと思ってください。 <head> ブラウザには表示されない情報を書く部分です。<head>はそれの始まりを表しています。 <title> タイトルです。ブラウザのタイトルバーの所に表示されます。 </title> タイトルはここまでです。と言うのを表しています。 </head> ヘッダはここまでです。と言うのを表しています。 ひとまずココまで。このくらいは簡単ですね。それでは次に行ってみましょう。 <body bgcolor="#FFFFCC" text="#000000"> いきなり難しくなりましたね。<body>は、ココから本文です。と言うのを表しているのですが、なんか変な物がくっついていますね。コレは、ブラウザで表示する背景の色とテキスト（文字）の色を指定してるんです。bgcolor=""が背景色を指定する属性と呼ばれる物です。""に囲まれた部分に書かれている#FFFFCCは、完成予想図の背景の色です。この#******については、難しいのでページの終わりくらいに書きます。次に、text=""は、言わなくても分かると思いますけど、テキストの色を指定しています。#000000は、黒色になります。 <div align="center"> また、難しいのが出ましたね。<div>って何？と思うかもしれませんが、<div>自身は何も出来ないタグです。属性を使って、左寄せや右寄せをするのに使います。align="center"は、真ん中寄せと言う意味になります。右に寄せたければright、左に寄せたければleftをcenterの代わりに入れてあげます。 <hr> これは、ブラウザに走ってる横線です。区切り線ですね。 <font color="#0000FF" size="7"> 文字を弄るタグです。color=""は、文字色を指定しています。#0000FFは青色です。size=""は文字の大きさを指定します。""の中には1〜7までの数字を入れることができ、値が大きい程文字は大きくなります。あと、+1〜+7、-7〜-1のと書くことも可能です。 <b> ここから文字を太くすると言うことを表しています。 </b> 太字の終了タグです。 </font> 文字弄りの終了タグです。今回の場合は、<font color="#0000FF" size="7">の終了ですので、大きさ７の青文字を終了と言うことになります。 <br> 改行を表しています。例えば、あいうえお<br>かきくけこ と書けば あいうえお かきくけこ となります。 </div> <div>の終了タグです。今回の場合は、最初に書いた<div align="center">の終了ですので、真ん中寄せ終了と言うことになります。 </body> 本文終了のタグです。 </html> HTML文章の終了タグです。 とりあえず、こんな感じでTOPページを作った事になります。 ◇保存と表示 メモ帳に打ち込んだだけでは、ブラウザで表示させることが出来ないので、保存をします。 メニューバーのファイルを押して、名前をつけて保存を選んでください。分からない人は画像をご覧下さい。[画像はこちら](10,091 バイト) ファイル名をindex.htmlにして、ホームページのファイルを保存しておく所に保存して下さい。分からない人は画像を。[画像はこちら](15,366 バイト) 保存が完了したら、保存した場所に移動しindex.htmlと言うファイルをダブルクリックしてください。するとブラウザが立ち上がって、初めてのホームページが表示されるはずです。実物と同じになればOKです。実物はこちら 人によっては、index.htmlで保存したのに、ブラウザじゃなくてメモ帳が立ち上がった。と言う人は、たぶんindex.html.txtとなってますので、ファイルを右クリックして名前の変更で、index.htmlにして下さい。 ◇#******って何だろう。 さっきから説明を飛ばしていた、#******って何だろう。色を表しているのは分かると思いますが、多くの人は#0000FFと書いてあっても意味が分からないでしょう。実は#******と言うのは、#RRGGBB（レッドレッド、グリーングリーン、ブルーブルー）の光の３原色で表しているんです。しかも一般の人にはわかりにくい１６進数です。実際#******で色を覚えろなんていわれても無理に決まってますので、フリーソフトを使ったり、ウェブ上にあるカラーチャートと呼ばれる物を使います。便利なフリーソフトに載せたChange Color Codeと言うフリーソフトを使うと簡単です。 それから、色の指定は#******ではなく、普通の英語でも指定することが出来ます。<font color="red">や<body bgcolor="blue">の様にします。もちろんスペルを間違えると色は表示されませんので注意して下さい。 |
