Web Page作り
（第１段階・・・Ｗｅｂ Ｐａｇｅを見まわす・・・）
インターネットで、他の人のＷｅｂ Ｐａｇｅを見ながら「自分はこーゆーの作りたいな」って作戦を練る。
でも、実は、そんなに用意周到なもんじゃない・・・どっちかいうといきあたりばったり。
なつ子☆の場合「やぎさん郵便」状態なんで・・・読まずに食べた♪・・・
あんまり他人のＷｅｂ Ｐａｇｅも参考にしないで、ひたすら自分のイメージを構築している感じです。
（第２段階・・・「ＨＴＭＬ」って、どーやるの？・・・）
「Ｗｅｂ Ｐａｇｅを作るんなら、ＨＴＭＬ覚えなくっちゃね・・・」と言われた。
はて? 「ＨＴＭＬ」ってのは・・・？(「「HTML」とは、HyperText Markup Language」の略らしい・・・。）
どーも「Ｗｅｂ Ｐａｇｅ」を記述するモノ（コンピュータ言語かしら？）らしい・・・。
最近の「Ｗｅｂ Ｐａｇｅ」は、優秀なソフトがあって、 問答形式で「タイトル記入」とかやるとカッコよく仕上がる・・・らしい。 でも・・・なつ子☆が「Ｗｅｂ Ｐａｇｅ」を習った先生は、「ＨＴＭＬで記述する」という方法で教えてくれたのだ。 故、なつ子☆は、今日までずーーーーっと「制作ソフト」などは一切使わずにこの「Ｗｅｂ Ｐａｇｅ」を作っているのである。
（第３段階・・・「インターネット・エクスプローラー」でＧＯ！）
なつ子☆は「インターネット・エクスプローラー」というブラウザー・ソフト（Ｗｅｂ Ｐａｇｅを見るためのソフト）を使っている。 もしかしたら「ネット･スケープ」では、やり方が違うかもしれない・・・が、それは解らない・・・スミマセン。
さて、Ｗｅｂ Ｐａｇｅは「ＨＴＭＬ」っちゅーもんで書かれているそうな・・・。 それは、良いとして・・・例えば、今、見つけたこのＷｅｂ Ｐａｇｅはどんな風に記述されているのだろうか？ そんなことも実は簡単に調べられてしまうのだ。
それが「表示」を選んで「ソース」を開く！である。
（第４段階・・・「表示」を選んで「ソース」を開く）
さて、さて、さっそく最寄の「Ｗｅｂ Ｐａｇｅ」の「ソース」とやらを開いてみる事にしよう。
「インターネット・エクスプローラー」の表示の上の方を見ると 左から「ファイル」「編集」「表示」・・・と書かれている。 この左から３番目の「表示」をクリックすると・・・まぁ、いくつか選択肢が出てくる。 その中から「ソース」を選ぶと「メモ帳」が開き・・・
<HTML>
<HEAD>
<TITLE>Ｗｅｂ Ｐａｇｅ作り</TITLE>
</HEAD>
<BODY bgcolor="#CCEEFF" TEXT="#0000A0" LINK="#00a000" VLINK="#f020a0">
<BR>
<CENTER>マッシロなページに「タグ」を書いて・・・<BR>
<FONT SIZE="+4">「HTML超入門」</FONT><BR>
へ〜、こんなふうにして「Ｗｅｂ Ｐａｇｅ」作ってるんだぁ!?<BR>
<BR>
<HR>
・・・
</BODY>
</HTML>
と、こんな感じで表示されると思う。
（第５段階・・・おぉ…これが「HTML」ってもんかい！）
・・・っと、ここで表示させたのは、まさにこのページの「ソース」である。 ふむ〜、スゴイ！ スゴイ！ なんだか記号とかいっぱい書いてあるぞ。 日本語もあるが、英語みたいのもあるぞ・・・。なんだか、わかんないぞ。
ここで「わかんない」と思わずに、ちょっと冷静になって見て見ると・・・ 「全角かな漢字」で書かれている部分・・・日本語で書いてある部分は、 本編に表示されている部分であるらしい事がわかる。
例えば、タイトルの部分・・・
<FONT SIZE="+4">「HTML超入門」</FONT><BR>
この記述によって・・・「HTML超入門」
が作られているのだ。
ってコトは・・・ココの部分を書きなおせば、 どんなタイトルにするコトだってできる。
例えば・・・
<FONT SIZE="+4">πは円周率…3.14159265358979</FONT><BR>
と書けば・・・πは円周率…3.14159265358979
と変わるのだ。
（第６段階・・・なぁ〜んだ、結構、簡単じゃん！）
・・・個人的に「π＝円周率」が好きなもんで・・・失礼致しました。
ま、それはともかく、「全角かな漢字」の部分を書きなおせば、 そのＷｅｂ Ｐａｇｅで展開されているのと同じ書式で自分の好きなコトが記述できそうだ。
結構、簡単である。
（第７段階・・・今度は「半角」に注目！）
さぁて、ステップをさらに進めるコトにしよう。
さっきは「全角かな漢字」に注目したけれど、今度は「半角アルファベット数字」に注目だ。
<HTML>
<HEAD>
<TITLE>Ｗｅｂ Ｐａｇｅ作り</TITLE>
</HEAD>
<BODY bgcolor="#CCEEFF" TEXT="#0000A0" LINK="#00a000" VLINK="#f020a0">
<BR>
<CENTER>マッシロなページに「タグ」を書いて・・・<BR>
<FONT SIZE="+4">「HTML超入門」</FONT><BR>
へ〜、こんなふうにして「Ｗｅｂ Ｐａｇｅ」作ってるんだぁ!?<BR>
<BR>
<HR>
・・・
</BODY>
</HTML>
まず、目に付くのは、記号の中でも 「<」 とか 「>」 だ。 というか 「<・・・>」 って
セットで使われている。
それから、「<★★>」「</★★>」という 「対」 も多い。 でも、「<BR>」 や 「<HR>」 みたいに 「対」になってないのもある けどね。
（第８段階・・・スイッチの「ＯＮ］と「ＯＦＦ」）
私にＨＴＭＬを教えてくれた先生によると・・・ 「<・・・>」との記号で囲まれた文字や数字、記号が ページを記述する「命令」になるという。
「<★★>」と「</★★>」とは、 まぁ、スイッチの「ＯＮ」「ＯＦＦ」みたいなものらしい。 「<★★>」でスイッチを入れて、 「</★★>」でスイッチを切る・・・解除するという訳だ。
ナルホド！ そう思って見ると「<★★>」と「</★★>」 の「★★」の部分が同じだ。 同じでないモノは、先の「<・・・>」の中の先頭の単語と「／」の後の単語の綴りが同じである。
（第９段階・・・ちょっと整理しちゃってみる）
- 「<・・・>」に囲まれた文字や数字、記号がページを記述する「命令」
＊ページ上では、「<・・・>」の中身は、表示されない。
- 「ＯＮ」と「ＯＦＦ」の必要な命令は、「<★★>」と「</★★>」いうように記述。
＊解除（ＯＦＦ）の命令を忘れないように注意する。【例】
- 文字を赤く（色指定）・・・解除の命令を忘れると→文字は赤い色のまま
- 文字を大きく（サイズの変更）
・・・解除の命令を忘れると→文字は大きくなったまま
・・・あーぁ、大変なコトになってますね。
ちゃんと解除の命令「</★★>」を入れましょうねぇ・・・
はい！ ご安心下さい。元に戻りました。
（第10段階・・・イロイロありますので・・・ちょっと「色」の話。）
え？ 「色の話」って・・・ そんな期待しないでくださいよぉ〜。
「色っぽい話」じゃなくて・・・ 「<・・・>」で示されるタグの中での 「色」の表現の話ね。
ま、一口に「色」って言っても・・・「背景の色」 もあれば「文字の色」とか「表の色」とか ・・・
本当に イロイロ ありますわな。
「色」は、英語で「カラー=ＣＯＬＯＲ」です。 ソースの中に「ＣＯＬＯＲ」という綴りを探して見ましょう。
い ろ い ろ 探 し て見ると 文字の色の変更は、＜ＦＯＮＴ ＣＯＬＯＲ＝”＃▲▲●●◆◆”＞色の変わった文字＜／ＦＯＮＴ＞と なっています。
基本的には、「色」は 「▲▲●●◆◆」って６桁の英数字で表わされます。
今、６桁って書きましたけれど・・・ 実は「２桁」＋ 「２桁」＋「２桁」 っていう意味・・・つまり「２桁」ずつ３つの色を表わしそれを合成して「色」を表現している・・・ ってことなんです。
「R・G・B」って聞いたことないですか？
「R→レッド＝赤」 「G→グリーン＝緑」 「B→ブルー＝青」 この「赤」 「緑」 「青」を ２桁ずつの英数字で表わしているのです。
ところで、さっきから「英数字」って・・・「数字」じゃないんでしょうか？
実は、この色を表わす６桁は０〜９の10進数ではなく、 ０〜９さらにABCDEFまで続く16進数が利用されているのです。
（第11段階・・・「16進数」と「RGB」）
色は、この「16進数」と「RGB」さえ判ってしまえばOK。それも全然難しくない。
まず「16進数」から・・・０、１、２、３、４，５、６、７、８、９、Ａ、Ｂ、Ｃ、Ｄ、Ｅ、Ｆ次に「Ｒ・Ｇ・Ｂ」など・・・
これが「16進数」だっっっっ！！！！
２桁の場合は・・・ 00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F,10,11…FC,FD,FE,FF
「00」から「0F」までは、16あります。（だから「16進数」なんだってば）
「00」から「FF」までは、16×16＝256。 ・・・まぁ、難しいコトは置いておいて、
「00」が一番小さい数で「FF」が一番大きい数ってことね。「Ｒ・Ｇ・Ｂ」方は、カンタン、カンタン！
ようは、様々な「色」を作り出す時の「光」の組合せですわ。
「赤」「緑」「青」とも目いっぱい明るくしたら・・・「白■」になります。
「赤」「緑」「青」ともＯＦＦにしたら・・・真暗暗の「黒■」になります。
「■赤のみ」「■緑のみ」「■青のみ」・・・
（第12段階・・・んじゃま、少々「色見本」などを・・・）
■バックの色・・・赤「#FF0000」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
■バックの色・・・緑「#00FF00」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
■バックの色・・・青「#0000FF」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
■バックの色・・・黒「#000000」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
■バックの色・・・水色「#CCEEFF」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
■バックの色・・・白「#FFFFFF」
★文字の色・・・白「#FFFFFF」
★文字の色・・・黒「#000000」
★文字の色・・・赤「#FF0000」
★文字の色・・・緑「#00FF00」
★文字の色・・・黄「#FFFF00」
★文字の色・・・青「#0000FF」
★文字の色・・・桃「#FF00FF」
ちなみに「■バックの色・・・」という文字の色は「#0000A0」です。
まぁ「紺色」というところでしょうか？
「背景の色」が変わると「文字の色」の印象も全然違いますね。
（第13段階・・・）
まだまだ「連載中」です。また、見に来て下さい。
お楽しみに・・・
（第14段階・・・）
まだまだ「連載中」です。また、見に来て下さい。
お楽しみに・・・
（第15段階・・・）
まだまだ「連載中」です。また、見に来て下さい。
お楽しみに・・・
なつ子☆です！