まず はじめに |
---|
はじまり はじまり
ホームページ(HP)公開の流れはこうだ!! |
---|
あなたのプロバイダでHP掲載がOKかを確認 |
---|
HPを作成 |
---|
作成したHPを、転送ソフトを使い、あなたのプロバイダに転送 |
---|
まずホームページを公開するには、あなたの契約しているプロバイダが個人のホームページ掲載を許可していることが条件です。 プロバイダによっては、インターネットの接続サービスのみでホームページサービスは行っていない場合もあります。 またはホームページサービスを行っていても、あらためて申し込まなくてはいけない場合もあります。OKですか。
ここまで当たり前なことをいうと逆におこられそうですが、もしもの方のために失礼を承知で言わせてください。 ホームページというものの基本は、すべて文書の重なりです。文字はもちろん、絵・色・背景などなどすべてそうです。 すべてを文書にしたものを、ホームページの画面として表示させるのが、あなたが今ご覧になっているブラウザ (ネットスケープやインターネットエクスプローラ)です。 |
じゅんび
●まず、あなたのホームページ作成文書を書き込むアプリケーションを起動させましょう。なにもなければWindows'95付属の「ワードパット」でもいいでしょう。
ワードパットでホームページ作成文書(HTML文書)を作る時の注意点 |
---|
[ 1 ]これからあなたが作る文書を保存するときのファイル名は
入力フィールドにOOO.htmlというように、いっきに「.html」
(半角英数字で)までを含んだものをファイル名として入力してください。 ワードッパットの保存形式には、HTMLファイルという項目が ないため、ファイル名自体を「OOO.html」として保存し ます。これで全く問題はありません。 [ 2 ]ファイルタイプは必ず「テキスト文書」を選択してください。他のタイプ、例えば「リッチテキスト形式」などを選択しても、htmlファイルとしては扱えません。 |
●これから作成する文書は保存の際、必ず「OOO.html」というように拡張子を「html」にして保存してください。
●まったく初めての方は、あなたが書き込んだ文書を、こまめにブラウザ上「インターネットエクスプローラ」 や「ネットスケープ ナビゲーター」などで確認することをおすすめします。
ながながとした説明を読み、ここで、もうすでに あきらめかかっている方いませんか?大丈夫です。 ゆっくり進めば必ずわかります。私も、もちろん 全くの「超」初心者でした。 だから、全くの初心者の方でも理解できるように 私なりに出来るだけ分かりやすいマニュアルを、 お作りしました。自信を持って始めてください。 |
---|
いよいよ、ここからが 本題 |
---|
ホームページを創る時には、アルファベットの命令が必要です。これを「タグ」と言います。 この「タグ」が、2つでひと組となり、あなたが表示させたい文字などすべてをはさみ込んでいきます(例外もありますが・・・)。 対になっている「タグ」のうち、後の「タグ」には、「 / 」が付いているのに注意しましょう。 それと「タグ」は必ず半角で書き込んでください。それでは、まず最初にホームページ創りに 最低限必要な「タグ」4つ。いきます。
<1> <html></html>
<2> <head></head>
<3> <title></title>
<4> <body></body>この4つです。
<html>はページの一番最初にかならず書きます。 </html>はページの終わりにかならず書かなければなりません。 これから出てくる、<head>からはじまる、さまざまな「タグ」で、はさまれた、文章や絵は、この間に置くわけです。
つぎに、<head>です。本来は様々な事に関係があるのですが、ここではホームページの「前置き」としてとりあえず <title>の前に書いておくという程度のものとしておきます。
<title>と</title>の間にはあなたが付けたいページの名前を書きます。 これがそのページの名前となり、ブラウザの画面のいちばん上に表示されます。ご自由に書いてください。
</head>を置きます。
その直後に、いよいよページの中身をこれから書くぞという印<body> を置きます。この先に書かれたものがブラウザ上に表示されるのです。ページの「本体」となるわけです。同様に「本体」が終わったところには </body>を置き、これで本体は終わりとなります。
締めは</html>となるわけです。
ここまでを利用してページを創ってみましょう |
---|
<html>
<head>
<title>
お好きなページ名を書いてください
</title>
</head>
<body>
ここが本体になります
</body>
</html>
この文章のイメージはこうです |
---|
それでは、つぎいきます。
改行するぞ |
---|
文章、イメージの後に付けて、改行します
<p> 文章、イメージの後に付けて、改行したうえに 「一行分スペースを開けます」
これらの「タグ」は例外的に、2つの「タグ」ではさむのではなく、ひとつだけでも指定が有効になります。 それと注意点は、<p><p>と書き込んでも空白行を増やすことはできません。 <br><br>だったら空白行を増やすことができます。
実際に<br>を10回書き込んだイメージ |
---|
文字の大きさを変えるぞ |
---|
文字の大きさを変えるタグは、2種類あります。ひとつはこれです。
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
本来、このタグの意味は少々違うのですが、使い勝手を考え、ここでは文字の大きさを変えるタグとして紹介します。
このタグは「 h 」の後の数字を変えることによって、このタグではさまれた文字の大きさを変えます。 <h1>が一番大きくて、<h6>が一番小さくなります。
実際にやってみよう |
---|
<h1>とりゃ!</h1> と書いた場合、こうなります。 とりゃっ!
同様に
「 h2 」では
「 h3 」では とりゃっ!
「 h4 」では とりゃっ!
「 h5 」では とりゃっ!
「 h6 」では とりゃっ!
とりゃっ!
こんな感じです。
ただし、このタグをつかうと自動的に改行しますんで注意してください。 1行の中で、大きい文字や小さい文字を並べたい時
こんな時は、 つぎの タグを つかいましょう!
文字の大きさを変えるもうひとつのタグは、これです。
<font size=数字></font>
このタグは<h1>とは反対に、数字が小さいほど文字は小さくなります。
実際にやってみよう |
---|
<font size=7>うりゃっ!</font> と書いた場合、こうなります。 うりゃっ!
同様に
「 font size=6 」では
うりゃっ! 「 font size=5 」ではうりゃっ! 「 font size=4 」ではうりゃっ! 「 font size=3 」ではうりゃっ! 「 font size=2 」ではうりゃっ! 「 font size=1 」ではうりゃっ!
こんな感じです。
1行の中で好きな部分を大きくしたり、小さくしたりすることもできます。
ABCD EFGH IJKL MNOP QRST UVWX YZ あい うえ おか
こんな感じです。
文字の色を変えるぞ |
---|
<font size=数字>タグは、タグの中に色の指定を入れることで、同時に色を変えることもできます。
<font size=数字 color=色></font>
実際にやってみよう |
---|
たとえば、むらさき色の指定番号の「 ff00ff 」を色のところに入れ
<font size=6 color=ff00ff>色を変えるぞ!</font>
と書き込むと、こうなります。
色を変えるぞ! また、色のところは指定番号でなく、そのまま、色の名前を書き込んでもいけます。 たとえば「 blue 」と入れてみましょう。
<font size=6 color=blue>色を変えるぞ!</font>
と書き込むと、こうなります。
|
文字を強調させるぞ |
---|
文字を強調させたい・太くしたい時は
<b>ここに、はさまれた文字が太くなります </b>
文字を点滅させるぞ |
---|
点滅させるタグは簡単で、しかも目をひきます。ただし文字が消えているる時間がわりと長く、かえって見づらいという 点もあります。このタグの使いすぎには、くれぐれも注意してください。
<blink>ここに、はさまれた文字が点滅します </blink>
こんな感じです。
文字を斜体にするぞ |
---|
文字を斜体にしたい時は
<i>ここに、はさまれた文字が斜体になります </i>
ここに、はさまれた文字が斜体になります
こんな感じです。