何を期待してるのかわかりませんが、ここはほんとにわかりづらいですよ？
他のサイトの方が100000000倍いいです。マジです。
それでもこのページについてくるならありがたく御招待します。
ほんとにいいんですか？（しつこい）
さて、さっきのでだいぶ少なくなったと思います。
どうせ、私は少数を相手にするのが得意なんでいいんです。いいんですってば・・・ぅぅ。
それでは本題に戻ります。
まずは必要な環境から。
| 必要なもの | 説明 | 推奨するソフト | 理由＆入手先 |
| エディタ | エディタは文字を書くソフトです。 文字を書くといってもWordの用に飾られた文字を書くのではなく、地味に文字だけです。 文字の色を変えたりはできません（できる場合もありますが、そのエディタで見たときのみそう見えるだけです。） エディタは文章のみならずHTMLやCGIも作ることができ非常に便利です。 |
HTML Editor For My Friends フリーソフト ダウンロード（Vector） ダウンロード（本家サイト） |
このソフトはHTMLを書くことを目的としたエディタです。 よって、HTMLを書くのに便利な機能がたくさんあります。 ただ、HTMLはメモ帳等のOS付属のソフトでもかけます。「ハードディスクぱんぱんなんだよね」という方は そちらで書いても差し支えありません。 |
あれ？
間違えたかな・・・（他サイトで確認；をぃ）
やっぱりそうか。
えっと、ですね。ホームページ作るのに、実質必要なものはこれだけなんです。
お手軽ですね。いいですね。
なんかそっけない感じがしますが、これでいいんです。いいんですってば。
もうちょっと凝ったページにするなら、絵を描くソフトとか、色を16進法に変換するソフトとか、いろいろ必要になってきます。
ま、これはいつか載せておきます。（いつになるかな〜・・・）
さて、それでは早速HTMLのお勉強です。
まず、次のリンクを
Windows………右クリック＞対象をファイルに保存
Macintosh……「control」キーを押しながらクリック＞画像をディスクにダウンロード
で、保存してください。ホームページ専用のフォルダ（マイドキュメントの中にMy Webというフォルダを作るとか）を作るとさらにいいかもしれません。
お勉強専用HTMLファイル
ダウンロードできましたか？
できない場合は各自調べてください（ぇ。
できたらよかったね、さようなら。
というわけにもいかないので、説明します。
まず、HTML Editor For My Friends（以下HTMLエディタ）や、メモ帳などのエディタ（以下エディタ）を開きます。
そして、HTMLエディタなら開くボタン、エディタならファイル＞開くで先ほどダウンロードしたHTMLファイルを呼び出してください。
エディタなら、文字が、HTMLエディタなら、文字といつも見ているWebページが表れたはずです。
存分にHTMLソースを眺めた所で、いろいろと気づく点があると思います。
文字も、ただの羅列ではなくなんだか意味ありげですね。
それでは、その意味を解いていきましょう。
| <HTML> | ||
| これは「このファイルはHTMLだヨ」と、パソコンに教えるタグです。 ちなみにタグとは「○○しなさい」というような、命令をパソコンに伝える言葉のようなものです。（あってるかな・・・。 |
||
| <HEAD> | ||
| これは「このページはこういうものです。」という情報を伝えるタグです。 タイトルや、このページの情報などを<head>〜<head>の間に書きます。 | ||
| <TITLE>私、今、HTMLの勉強してます！</TITLE> | ||
|
これは、このページのタイトルを伝えるタグです。 実際には  こんなふうに、ブラウザの上の所（名前知らない）にでてきます。 | ||
| </HEAD> | ||
|
先ほどでてきた<HEAD>の命令を終了するタグです。「ここまでがHEADタグの中身です。」といった感じ。 ほとんどのタグがこのように<○○>〜</○○>といった形で出てきます。 | ||
| <BODY> | ||
| このタグの先から実際にブラウザに表示される部分をつくっていきます。 ちなみにこのBODYタグは背景色や文字の基本色を設定することもできる非常に便利なタグです。それはまた後ほど。 | ||
| <h1 align="center">私、今、HTMLの勉強してます！</h1> | ||
| これはタイトルを作るタグです。<h1>から<h6>まであり、hのあとにつく数が小さいほど
大きな文字になります。これはあとにでてくる<font>タグとは逆なので注意しましょう。 そして、h1のあとにalign="center"と書いてありますね。 これは、「このタイトルは中央（center）に表示しなさい」という命令です。このcenterの文字をleft（左）やright（右）にすると、 文字通り左や右に表示されます。このalign="○○"は書かなくても差し支えありません。書かないと左寄せで表示されます。 ちなみに、<h1>の中身と<TITLE>の中身は同じでなくてもかまいません。 | ||
| <p align="center"> | ||
|
このタグは、段落を設定するタグです。このタグにもalign="center"がついています。先ほどの<h1>とほとんど同じ意味です。 そういえば、<h1>からカッコの中身が小文字になっていますよね。 HTMLのタグは大文字、小文字どちらでも使えるようになっています。 下手をすれば、<H1 ArIgN="cEnTeR">なんてこともできます。やりたい人はどうぞ。 | ||
| 私は今、<b><font color="red">HTMLの勉強</font></b>をしてま〜す！<BR> | ||
| いや〜。いろいろなタグがでてきましたね（めんどくさ。 まずは<b>から。これは太字にするタグです。太字っていうのは、こういうのです。 つぎに、<font color="red">。これは、フォントの色を変えるタグです。<font のあとにcolor="○○"とか、size="○○"とかつけることでいろいろフォントの設定ができます。 そして、<b>と<font color="red">を組み合わせると、テキスト系サイトなどで見かけるこういうのができます。 さあ、やっとこの行最後のタグです。<BR>、このタグは改行タグです。 HTMLではただエンターキー押しただけではブラウザに表示されたときに改行されません。この<BR>タグを入力しておく必要があります。 ちなみに、HTMLエディタではShift+Enterでこのタグが入力されます。非常に便利な機能なので、なれてきたらぜひ使いましょう。 | ||
| ちなみに、今現在<font color="#0000FF" size="4">超初心者</font>です。<BR> | ||
| 今度は<font>タグで文字の色とサイズを変更してみました。 サイズは1から7まで選べます。こちらは<h○>タグと違って数字が大きくなるほど文字が大きくなります。 そして、color="○○"ですが、先ほどは色の名前を英語で入力していましたね？「していなかった」という人は置いておいて、 今度は謎の#0000FFなる文字が入力されています。これは16進法という書き方で、#のあとにRRGGBBと色の強さを赤（R）緑（G）青（B）で入力します。 16進法の数の数え方は特殊で、1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10という風になります。16進法の10は10進法（いつも使っている数）では 16になります。詳しくはどこか他のページで勉強してください（ぇ。 | ||
| がんばるので皆さん応援してくださいね♪<BR> | ||
| あ、ちなみに、<a href="http://xxxxx.com/yyyyy/">ここのサイト</a>はオススメです！<BR> | ||
|
インターネットを利用している方のほとんどがリンクをクリックしてサイトをみてまわっていることだと思います。 <a href="○○">は、そのリンクを作るためのタグです。○○の中にはサイトのアドレスが書いてあります。 ここではhttp://から書いています。このような書き方は他サイトへのリンクにむいています。 | ||
| 私もここでHTMLを勉強しました。</p> | ||
| ここで段落を閉じます。これ以外のタグを使うときも、</○○>を書くのを忘れないでくださいね。 | ||
| <table border="1" align="center"> | ||
| これはHTMLの醍醐味ともいえるタグで、表を作ることができます。一般に、「テーブル」と呼ばれています。 border="1"というのは線の太さを設定する命令です。align="center"は、表全体を真ん中に持って来る命令です。 しかし、このタグだけでは表は作れません。 | ||
| <tr> | ||
|
そのために必要となるのがこのタグです。このタグは列（横）を表わします。 3段の表を作りたいと思ったらこのタグを3回（終了タグ含む）繰り返します。 | ||
| <td bgcolor="yellow" align="center"> | ||
そして、このタグです。このタグはセル（表の一つ一つの箱））を表わします。
| ||
| めにゅー | ||
| </td> | ||
| ここまでがひとつのセルです。わかってきましたか？わからなかったらそれは私の説明力不足 ですので、あなたのせいではありません。御安心ください（何が。 | ||
| </tr> | ||
| ここまででひとつの列です。 | ||
| <tr> | ||
| <td> | ||
| <a href="xxxx.html">HTML勉強軌跡</a> | ||
| さあ、上のタグをみて何か気づくことはあるでしょうか。 気づいた方は凄い！北朝鮮の機密工作員になれます（ぇ。 それでは気づかなかった方のために教えましょう。この<a href="○○">の○○の部分が、http://から始まっていないのです。 これは、自分のホームページ内でのみ使える技で、他サイトから呼び出す場合などには使えません。 しかし、使えれば便利なので覚えておきましょう。ちなみに、こういうアドレスの書き方の事を相対パスといいます。 （さらにいうと、http://から始まるアドレスを絶対パスといいます。） | ||
| </td> | ||
| </tr> | ||
| <td> | ||
| <tr> | ||
| <a href="../vvv.html">あんなこんなで21世紀</a> | ||
|
またまたリンクです。今度は何が違うでしょうか。 ファイル名の前に.../が表示されてますよね。これは「ひとつ上のフォルダの中にあるファイル」を示します。 難しいですね。また図で表わしてみましょう。
| ||
| </td> | ||
| </tr> | ||
| <td> | ||
| <tr> | ||
| <a href="aaa/">観葉植物の育て方</a> | ||
|
またリンクです。「もうリンクはうんざり」って方も、将来（？）サイト作るのに役立つかもしれないので、我慢してみて見ましょう。 今度はアドレスがaaa/になっていますよね。この/（スラッシュ）というのは、HTMLでは「フォルダ」を表わします。 だからaaa/は、「aaaというフォルダの中身」という意味になります。「でも、ファイルの名前が書いてないじゃないか。これでちゃんとリンクできてるの？」 と思ったあなたは鋭い！サイトを作るときに、一番最初に開くページを作りますよね。そのファイルの名前は必ず「index.html」にする と決まっているのです。（ちなみにindex.html以外のファイルは自由な名前にしていい） あともうひとつ。リンクにするときindex.htmlは書かなくていいのです。 この場合でいうと、本当はaaa/index.htmlなのですが、aaa/でも同じ所にリンクされます。 | ||
| </td> | ||
| </tr> | ||
| <td> | ||
| <tr> | ||
| <a href="aaa/yyy.cgi" target="_blank">掲示板</a> | ||
|
「またリンクかい（恕）」と思った方。私もつらいのです。もうa hrefなんて自分で調べやがれとでもいいたい気分です。 話が横道にそれましたが、説明をはじめます。 さっきまで.（ピリオド）のあとはかならずhtmlだったのに、急に.cgiになりました。これはCGIといって、皆さんがよく使う掲示板やチャットのほとんどはCGIでできています。 CGIは、設置しかやった事がないので詳しいこといえません。御勘弁ください(^_^;) あと、謎のtarget="_blank"がついてますね。こいつは、「新しいウインドウ開いてそこにこのページを表示する」という命令です。 フレーム（画面が2つ以上に割れてるやつ）を使うまでは、これひとつで充分だと思うのでこれだけまず覚えちゃいましょう。 | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
さあ、やっとあと少しで終わりです。がんばりましょう。 テーブルが終わったら終了タグを書くのを忘れずに。ここまでが表です。帰るまでが遠足です。 | ||
| </BODY> | ||
| </HTML> | ||
|
やっと終わりました！達成感ありますね。 ずいぶん前に出てきた、</BODY>と</HTML>を閉じましょう。 これでHTMLファイルが終わります。おめでとうございます（何が。 |
この中に青い文字のタグがありますが、これはHTMLエディタではファイル＞新規作成ウィザードで自動的に出て来るタグです。
めんどくさいヘッダ（最初の方の青い文字群）が最初から入力されていてとても便利ですね。
ちなみに小文字は私が書いたタグ、大文字はHTMLエディタの機能を使わせていただいたタグです。
ホント便利です。
普段何気なく見ているWEBサイトもこんな努力によって作り出されていたとは、驚きですね。
実際、このページもこのようなタグで作り出されています。
「こんなにいろいろなタグがあって、忘れないかな・・・。」心配御無用。ネット世界にはたくさんの親切なページがあります。
忘れたときにはそのようなサイトで調べればいいんです（実際私もそうしてるし^_^;）
それに、「習うより慣れろ」でよく使うタグは使ってるうちに覚えます。
これからがんばってサイトをつくっていきましょう。
