初心者のためのホームページ製作講座
第1回 ファイルの基本構造

とりあえず、第1回の始まりです。今回ははサンプルファイル「sample1.htm」というファイルが教材です。 まず、はじめに自分のパソコンの適当な所に「sample」というフォルダを作って、このファイルをその中にセーブして下さ い。今後の実習用サンプルプログラムはすべてその中にセーブします。 セーブの方法はブラウザの「ファイル」−「名前をつけて保存」です。 そのファイルのアイコンをダブルクリックすると、設定してあるブラウザ(ネットスケープかインターネットエクスプロー ラーだと思う)が立ち上がって上のところに「タイトル」中に ───────────────────────────────── 「本文」.... ───────────────────────────────── と表示されているでしょう。 次にsample1.htmを適当なエディタで開いて下さい。Windows95の場合「スタート」−「プログラム」−「アクセサリ」− 「ワードパッド」で、ワードパッドというエディタがあると思うのでそれで開いて下さい。  開き方は「ファイル」−「開く」で、ファイルの種類は「すべてのファイル」を選択します。 このファイルの中身は ──────────────────────────────────────── <html> <head> <title>タイトル</title> </head> <body> 「本文」.... </body> </html> ──────────────────────────────────────── となっています。実はすべてのホームページのファイルの基本構造はこれと同じになっています。 このファイルは<**>というタグの集まりで出来ています。タグはHTML言語というコンピュータの制御用言語の一種で、 タグはHTML言語の制御コードです。 タグは、一部の例外を除いて始まりの<**>と、終わりの</**>の対になっています。 <**>より</**>タグが少ないと、正常動作しません。 もうひとつ重要なことは、別の種類のタグが存在する場合、必ず入れ子構造でないと動作は保証されません。 <**><++>文字</++></**> が正しくて <**><++>文字</**></++> は誤りです。 それではここに出ているタグの説明をします。一番最初の<html>はHTML言語であることを宣言しており最後の</html> までの間がHTML言語で構成されていることになります。 次の<head>と</head>タグは、このファイルの表紙の最初と最後と思って下さい。 この中で<title>と</title>の間がタイトルで、ブラウザの一番上の青い場所に表示される文字です。 <body>と</body>の間が本文で、タグ以外の文字はそのまま、画面に表示されます。 なお、HTML言語では原則として半角のスペースは無視されます。また、ファイル上で改行されていてもされていなくても同 じとみなします。 本当にこのような構成になっているかは、私のホームページをブラウザで開いて、「表示」−「文書のソース(またはソー ス表示)」でファイルの中身を見て確認してください。 それでは今回の課題 1)タイトルを好きな名前に書き換える。 2)本文に好きなことを書く。 これをしたら、エディタの「ファイル」−「上書き保存」で保存して、アイコンをダブルクリックしてブラウザで開いて、 思ったように表示されるかを確認してください。
付録
色つき文字 <font color=#******>文字</font> と記述します。******は16進でカラーコードを示します。2文字ずつ対でRGBです。 カラーコードの例 #ff0000 #ff8000 #ffff00 #00ff00 #00ffff #0000ff #8000ff #ff00ff 大きさを変える <font size=*>文字</font> と記述します。*は1〜7です。 <font size=7>文字</font> 文字 色と大きさ同時指定も可 <font size=7 color=#ff0000>文字</font> 文字 太文字(ボールド) <b>太くしたい文字列</b>そうでない文字列 太くしたい文字列そうでない文字列 斜体(イタリック) <i>文字</i> 文字 アンダーライン <u>文字</u> 文字
第2回 目次