それではさっそく、表紙ページの作成に入りましょう。 先ほど作った「index.html」ファイルが、「homepage」フォルダにありますね？ そのアイコンをダブルクリックして開いて見ましょう。真っ白な画面が開きましたね？  次に、このページの編集画面を開きます。「表示」をクリックして、下に伸びるメニューの中から、「ソース」を選びましょう。すると、新しいウインドウが開きました。これが「メモ帳」で、ここにホームページに表示する様々なｈｔｍｌや文章などを書きこんで行くのです。 |
それでは、さっそくｈｔｍｌの基本構造を書きこんでみます。 まずは、下をご覧下さい。 | |
| |
|---|---|
|
まずはこれを、メモ帳にコピー＆ペーストしてください。そして、メモ帳の「ファイル」をクリックし、下に伸びるメニューから「上書き保存」を選びます。つぎに、メモ帳ではなく、ＩＥ（インターネットエクスプローラー）の「更新」をクリックして下さい。 これでメモ帳に書き込んだ内容が反映されました。 え？ なにも変化しないって？ それでいいのです。タグはホームページの画面上には現れませんから、上記のようにタグだけを書き込んでも、何ら変化は起こらないのです。 <html> ～ </html> 一番最初にあるのが、<html>です。ｈｔｍｌ文ですよ、と宣言しているのです。それにスラッシュを加えた</html>が、一番最後に来ています。ここでｈｔｍｌ文は終わりです、と言っているのです。 このように、<と>に囲まれたものを「タグ」といい、最初にあるスラッシュのないものが「開始タグ」、スラッシュつきで終わりを宣言しているものが「終了タグ」です。 この青字の用語は頻出しますので、必ず覚えてください。 <head> ～ </head> ここは「頭」の部分です。このページ（ファイル）全体の、必要な情報を書き込みます。上の例では、必要最低限の情報しかありませんが、通常ここでは「文字コード」を定義したり、検索エンジンに引っかかって欲しいキーワードや説明文なども書きます。ここではまだ触れません。 <title> ～ </title> この間には、文字通りそのページのタイトルが入ります。試しにやってみましょう。 <title>と</title>の間に「わたしのページ」と記入して下さい。そして、先ほどと同じように、メモ帳を「上書き保存」して、ＩＥを「更新」して下さい。すると、どうなりましたか？  となっていたものが、  と、なりましたね。 そう、画面の左上に、ページのタイトルが表示されました。 |
では、上に出てくるタグをもう少し解説してみましょう。 <body> ～ </body> いよいよここには、本文が来ます。ホームページの画面上に表示したいものは、すべてこの<body>と</body>の間に書きこむのです。 ところで、<body>の中には、これまでと違って、色々なものがゴチャゴチャと書かれていますね。これはなんでしょうか？ text="****"は、地の文章の色を指定しています。ここでは「ブラック」すなわち黒です。 link="****"は、リンクの張ってある文字の色を指定しています。ここでは青です。 vlink="****"は、既に訪れたリンクの文字色を指定しています。ここでは紫です。 alink="****"は、現在接続しようとしてるリンクの文字色を指定しています。クリックされてから画面がリンク先に切り替わるまでこの色で表示されます。ここでは赤です。 ちなみに、「Ｖ」はｖｉｓｉｔｅｄのこと、「ａ」はａｃｔｉｖｅのことです。 また、ここでは色の名前を指定していますが、光の三原色「赤緑青」の構成によって色を指定することも出来ます。これは各色ごとに０～Ｆまでの１６進数の二桁、つまり００～ＦＦで表されます。左から赤の二桁・緑の二桁・青の二桁の順で、先頭に「＃」を添えて合計７文字で全ての色を表現してしまうのです。 ＃ＦＦ００００なら赤、＃００ＦＦ００なら緑、＃００００ＦＦなら青という具合です。 これらを組み合わせて、＃００ＦＦＦＦなら水色、＃ＦＦＦＦ００なら黄色などとなり、 ＃００００００なら黒、＃ＦＦＦＦＦＦなら白となります。 さて。ではここで、ちょっと遊んでみましょう。 <body text="black" link="blue" vlink="purple" alink="red"> のところに、少し書き加えてみます。下の赤文字の部分です。 <body text="black" link="blue" vlink="purple" alink="red" bgcolor="yellow"> 自分でメモ帳に記述してもいいですし、コピー＆ペーストしてもかまいません。そして、メモ帳を「上書き保存」して、ＩＥを「更新」して下さい。 ホームページの背景が黄色くなりましたね？ bgcolor="****"が、背景色を指定しているのだということが理解できましたか？ 「yellow」のかわりにさっき勉強した「#ffff00」と記述しても構いません。ちなみに、このホームページ講座の背景色は、bgcolor="#ffffbb"です。色々ためしてあなたの好きな色にして下さい。なお、講義を進める都合で、とりあえず背景色は黄色のままにしておきましょう。 <basefont size=3> これには閉じタグはありません。ここではベース（他の指示がなければこれを適用）となるフォント（文字）のサイズ（大きさ）をしていしています。文字の大きさには、１から７まであり、１が一番小さく、７が一番大きくなります。ここでは「３」という標準的なサイズを指定しています。 ちなみに、指示がない場合はベースフォントは「３」が適用されます。 さて、これで、ページを作るためのごくごく基本的な設定が出来ました。 |
いよいよここから、ページの本文作りに入るわけですが、次の章に移る前に、もう少しだけがんばってみましょう。 まずは、下をご覧下さい。いままでに作ってきたｈｔｍｌが表示されています。 | |
| |
|---|---|
あれ？ でも１ヶ所違います。そう、本文に、「みなさん、こんにちわ。はじめまして。」と書かれています。あなたもこれと同じように、メモ帳に書いてください。そしてメモ帳を「上書き保存」をして、ＩＥを「更新」してください。 こんな風になりましたか？ |
目次へ戻る 前のページに戻る 次のページに進む