<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>フリーソフトで作るHP講座 「HTML文書の作り方の基礎の基礎」</TITLE>
</HEAD>
<BODY BGCOLOR="000000"  TEXT="FFFFFF" LINK="FF8888" VLINK="BBBBBB">
フリーソフトで作るホームページ講座 「HTML文書の作り方の基礎の基礎」
<HR>
まず第1回目はHTML文書の作り方の基礎の基礎です。HTML文書というのはホームページを作る為の文書だというくらいに理解しといてください。まず必要なソフトはインターネットエクスプローラ(以下IE)やネットスケープ等のブラウザです。このページが読めるということは、もう入手済みです。次にエディタです。後には別のエディタが必要になる場合がありますが現時点ではWindowsに付いているメモ帳で十分です。<BR>
<BR>
それではメモ帳を起動して以下を入力してみて下さい。<BR>
<BR>
<BR>
&lt;HTML&gt;<BR>
&lt;HEAD&gt;<BR>
&lt;/HEAD&gt;<BR>
&lt;BODY&gt;<BR>
hello!<BR>
&lt;/BODY&gt;<BR>
&lt;/HTML&gt;<BR>
<BR>
入力しおわったらファイルを保存してください（c:ドライブの下にHomePageというディレレクトリを作ってsample1.htmlという名前で保存したと仮定します)。<BR>
ブラウザのアドレスを指定する場所にc:\HomePage\sample1.htmlと入力してください。<BR>
<BR>
ネットスケープでは白い背景に黒い文字でhello!と表示されているはずです(IE3では灰色に黒い文字です)。<BR><BR>
<A HREF="sample1.html">ここをクリックするとサンプルが見れます。</A><BR><BR>
すなわち&lt;BODY&gt;と&lt;/BODY&gt;とで囲まれた所にあるhello!という文字がブラウザに表示されるわけです。hello!を好きな文章に変えれば最低限のホームページのできあがりです。<BR>
でもやってみるとすぐわかると思いますがこのままでは改行がうまくいきません。改行させるには&lt;BR&gt;と入力してみて下さい。<BR>
<BR>
&lt;HTML&gt;<BR>
&lt;HEAD&gt;<BR>
&lt;/HEAD&gt;<BR>
&lt;BODY&gt;<BR>
hello!&lt;BR&gt;<BR>
hello!&lt;BR&gt;<BR>
&lt;/BODY&gt;<BR>
&lt;/HTML&gt;<BR>
<BR>
これを同じ名前で保存してブラウザの再読み込みボタン(IEでは更新ボタン)を押すと<BR>
hello!<BR>
hello!<BR>
と表示されます。<BR>
<BR><BR>
<A HREF="sample3.html">ここをクリックするとサンプルが見れます。</A><BR><BR>
これで一応、文章だけのホームページは作れますがあまりにも寂しいので少し飾りを入れます。<BR>
まず色を付けましょう。<BR>
いままで&lt;BODY&gt;だったところを&lt;BODY BGCOLOR="000000" TEXT="FFFFFF"&gt;に変えてみてください。<I>I/Oh!</I>の部屋の色と同じ黒い背景に白い文字になります。
<BR><BR>
<A HREF="sample4.html">ここをクリックするとサンプルが見れます。</A><BR><BR>
BGCCOLORで背景の色、TEXTで文字の色を指定できます。色は6桁の16進数で表現され赤、緑、青(光の三要素です)それぞれ2桁からなっています。すなわち赤にしたけれえば"FF0000"、青にしたければ"00FF00"、緑にしたければ"0000FF"、中間の色にしたければそれぞれの桁を増減してください（16進数なので0〜9,A,B,C,D,E,Fを使う）。<BR>
あと簡単な割に画面が引き締まるのは水平線&lt;HR&gt;です。このページの一番上にも使っています。<BR>
<BR>
今まで&lt;BODY&gt;と&lt;/BODY&gt;とで囲まれた所しか使っていませんでしたが&lt;HEAD&gt;と&lt;/HEAD&gt;とで囲まれた所を使う場合を説明します。<BR>
&lt;TITLE&gt;〜のホームページ&lt;/TITLE&gt;<BR>
という行を入れておくと、あなたのページを見てブックマーク(IEではお気に入り)を付けようとしたときに、その見出しが"〜のホームページ"になります。またブラウザのウィンドウの左上に見出しが表示されています。<BR>
<BR>
また日本語を使う場合は以下の行を入れておかないとブラウザの設定によっては正しく表示してくれない場合があります。<BR>
&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=<SPAN STYLE="COLOR:red">Shift_JIS</SPAN>"&gt;<BR>
<BR>
ここまで出てきた内容で作ったサンプルです。<BR>
<BR>
&lt;HTML&gt;<BR>
&lt;HEAD&gt;<BR>
&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=<SPAN STYLE="COLOR:red">Shift_JIS</SPAN>"&gt;<BR>
&lt;TITLE&gt;I/Oh!の部屋ホームページサンプル&lt;/TITLE&gt;<BR>
&lt;/HEAD&gt;<BR>
&lt;BODY BGCOLOR="EE8080" TEXT="FFFFFF"&gt;<BR>
I/Oh!の部屋ホームページサンプル
&lt;HR&gt;
ようこそI/Oh!の部屋ホームページサンプルへ&lt;BR&gt;<BR>
&lt;BR&gt;<BR>
今後のホームページ講座予定です。&lt;BR&gt;<BR>
&lt;BR&gt;<BR>
・自分しかみれないんじゃつまらないので他の人が見れるようにプロバイダのサーバに自分のホームページを作る方法の説明&lt;BR&gt;<BR>
・ハイパーリンク（それをクリックすると別のページを表示できる）を作る方法の説明&lt;BR&gt;<BR>
・絵を表示する方法の説明&lt;BR&gt;<BR>
・その他いっぱい&lt;BR&gt;<BR>
&lt;/BODY&gt;<BR>
&lt;/HTML&gt;<BR>
<BR>
<A HREF="sample2.html">ここをクリックするとサンプルが見れます。</A>
<BR>
<BR>
第１回目はここまでです。以降の予定はサンプルのページの通りです。<BR>
<BR>
<SPAN STYLE="COLOR:yellow">上記に赤字でShift_JISとしていた部分は以前はISO-2022-JPとしていました。MS-WINDOWS上で作った場合は普通はShift JISになっているはずなのでShift_JISと設定してください。Shift JISなのに間違って設定していると一部検索サイトで文字化けしたり、表示しないブラウザがあるようです。</SPAN><SPAN STYLE="COLOR:red"><BLINK><SUP>★8/24更新★</SUP></BLINK></SPAN><BR>
<BR>
<A HREF="../"><IMG SRC="/iohamada/to1up.gif" BORDER=0></A>
<A HREF="/iohamada/"><IMG SRC="/iohamada/totop.gif" BORDER=0></A>
</BODY>
</HTML>
