- ホームページのファイル名
- ホームページを作るということ
- ページを作成する方法
- 実習：最も簡単なページの作成
- 最も簡単なページの解説
ホームページのファイル名
ホームページは、一度に表示される内容を１ページと呼び、１つのファイルとして作成します。したがって、３ページのホームページを作成するためには、３つのファイルを作成する必要があります。１ページの大きさは同じである必要はありません。
コンピュータに何かを記憶させておく時の一つの固まりを、ファイルと呼びます。 ファイルには、必ず名前がついています。我々はその名前を指してそのファイルを利用します。
ホームページのファイルは、名前が必ず、xxxx.html のように ".html" （拡張子という）を付ける約束があります。xxxx の部分は何でも構いません。 しかし、その部分がindexの場合（index.htmlというファイル名の場合）、『最初に表示される特別なページ（１ページ目）』という特別な役割があるファイル名になります。
ひとつのページには、様々なものが掲載されています。例えば次のような、
- 「タイトルをつける」、
- 「文章を書く」、
- 「写真を張る」、
- 「絵を張り付ける」、
- 「リンクさせる」、あるいは
- 「背景に模様をつける」など
上記のうち「文章」以外の「写真」、「絵」、「タイトル」、「背景の模様」などは、 あらかじめ別々に作成し、ファイルとしてコンピュータに記憶させておく必要があります。これらを部品と呼ぶことにします。 ホームページを作成するということは、台紙（xxxx.html のファイル）にこれらの部品を張り付けていく作業に似ています。
各部品などを組み合わせてページを構成していく方法は、非常にたくさんあります。 大きく分けて次の２通りがあります。
- HTML言語を使って書く
- HTMLエディタを使って書く
HTMLはホームページを記述するための言語の名前です。HTMLエディタは、HTMLを簡単にタイプインできるように支援してくれるものから、全くHTMLを記述せずにワープロで作成した文書を自動的にHTMLを生成してくれるものなど多数あります。
この講座では、「HTML言語を使って書く」方法でホームページを作成してゆくことにします。
とりあえず、最も簡単なページをひとつ作ってみましょう。
- エディタ（メモ帳）を開く
【メモ帳】の起動方法
【スタート】→→ 【プログラム】→→ 【アクセサリ】→→ 【メモ帳】 - 以下の内容をタイプする。
但し、＜html＞などの＜＞はすべて半角の<>とします。＜html＞ ＜head＞ ＜title＞「とりあえずホームページ」ページ＜/title＞ ＜/head＞ ＜body＞ ＜h1＞江木鶴子のホームページ＜/h1＞ ＜h2＞ Welcome ! ようこそ！ ＜/h2＞ ＜hr＞ これは、「とりあえずホームページ」の最初のページです。 ＜br＞ 今からホームページを作りはじめます。 これは最も簡単なページの例ですが、今からどんどん良くなりますから期待して下さい。 ＜P＞ 私は、どんなページを作ろうかと考え中です。 ＜/body＞ ＜/html＞
- タイプした内容を index.html という名前のファイルとして保存する。
【ファイル】→→ 【名前を付けて保存】→→ ディレクトリを指示 →→ ファイル名にindex.htmlとタイプ →→ 【保存】ディレクトリを指示では、
ネットワークコンピュータ --> spring --> kouza2000 -->（名前）
の順に指示する。 - Netscapeを起動させる。
- 作成したページを表示する
【ファイル】→→ 【ページを開く】→→ 先ほど保存したファイルのディレクトリとファイル名を指定 →→ 【開く】 - ページの内容を変更する
- 再度「メモ帳」を起動させて、変更し、保存します。
- 変更前のページが開いているnetscape 上で、【再読込】あるいは【reload】ボタンをクリックすると、変更後のページが表示されるはずです。
- 変更後のページが表示されない場合は、ページの記述に何らかの誤りがある時です。もう一度内容を確かめて下さい。
タイプした内容のうち、＜＞の部分は表示されません。この部分をタグと呼び、このタグがHTML言語そのものです。
- HTMLの構造
１つのホームページは、普通複数ページで構成されています。 それらのどのページも同じ構造（形式）で書かれます。
１つのページは、下の図のように、＜HTML＞で始まり、＜/HTML＞で終ります。 その中は大きく分けて、ヘッダ情報と本文から構成されています。 ヘッダ情報は、＜HEAD＞で始まり＜/HEAD＞で終り、本文は＜BODY＞で始まり＜/BODY＞で終ります。
HTMLソース文書の構造
- その他のタグ
上記以外のタグには、次のような役割があります。
- ＜H1＞＜/H1＞
文字の大きさを指定する。これはタイトルの文字を指定する。 - ＜H2＞＜/H2＞
文字の大きさを指定する。これはタイトルの次に大きな文字を指定する。 - ＜HR＞
ラインを引く。 - ＜BR＞
強制的に改行する。改行の指示がない限り改行はしない。 - ＜P＞
段落の終りを指示する。段落の終りは、通常の改行と異なって１行程度の空白行があけられる。
- ＜H1＞＜/H1＞
講座「とりあえずホームページ」
連絡先：egi@cs.ube-c.ac.jp
最も簡単なページの作成