ゼロからはじめるHP作成講座

■ホームページって何

一般的にホームページというと「公開しているページすべて」を意味することが多いですが、本来は一番最初に表示される先頭ページだけを指します。個々のページはWebページといいます。ホームページを公開している場所のことは、WWWとかWebサイト、あるいは単にサイトと呼んでいます。


ホームページの中には文字や画像だけではなく、音楽が流れるものまであります。これは、ページの中に画像や音声が直接埋め込まれているわけではなく、命令語
(タグという)がそういう画面に見えるように指示しているだけです。タグが埋め込まれたファイルのことをHTML(Hyper Text Markup Language)ファイルといいます。ホームページの正体はHTMLファイルなのです。



HTMLファイルのイメージ



ホームページを作るには以下の方法があります。

1.メモ帳などを使って命令語を直接入れる。(タグ打ち)

2.ホームページ作成ソフトを使う。(ホームページビルダー、フロントページなど)



1.HTML言語とホームページの作成例

HTML言語はタグと呼ばれるものから出来ており、基本的には次のような使い方をします。

    <タグ名>文字列</タグ名>


このように「開始タグ」と「終了タグ」で文字列の前後を挟んで使います。終了タグには半角のスラッシュ「/」を付けます。またタグ名は大文字でも小文字でもかまいません。タグを文章の各部に入力していくことで、
HTMLファイル(ホームページ)ができるわけです。


■主なタグ


<HTML>
 </HTML>

このふたつのタグで挟まれた部分がHTML形式で書かれたソースであることを意味しています。


<HEAD> </HEAD>

ヘッダと呼ばれ、このファイルの題名が入る部分になります。以下の<BODY>,</BODY>で示す本文の前に置かれます。


<TITLE> </TITLE>

ページのタイトルを表しています。これらのタグの間に書かれた文字がページのタイトルとしてタイトルバーに表示されます。


<BODY> </BODY>

この範囲が本文であることを示します。ホームページとして実際に内容が表示される部分になります。


<H1> </H1>

文章の見出しを表しています。文字Hの隣の数字は1から6まで指定でき、見出しの文字の大きさを意味しています。1からの順番で小さくなります。


<HR>

横線を引く働きをもったタグです。このタグは、他のペアになっているタグと違って、単独で用います。


<OL> </OL>

箇条書きとして表示することを示しています。各項目は<LI>を行頭に置いて並べます。<OL></OL>の組を<UL></UL>の組に変更すると、行頭に数字の付かない箇条書きとなります。


<A HREF=“file1.htm”>文字</A>

他のHTML文書を関連付けるための部分です。実際の画面表示では、この文字の部分をマウスでクリックするだけで、他のHTML文書へ移動する事ができます。すなわち、他の情報源にアクセスするための目印となるわけです。このように他の文書と結び付けることをリンクと呼びますが、物理的には遠く離れたURLのファイルをリンクすることで、いとも簡単にネットワークを渡り歩く事ができます。


<IMG SRC=“image.gif”>文字

<IMG>タグを使用することによって画像(イメージ)を取り込む事ができます。画像データの入ったファイルを用意しておき、そのファイル名(例ではimage.gif)をSRCで始まる部分で指定することで、画像が表示されます。また、文字の部分は必ずしも必要ではありませんが、図の説明文等を入れておくといいでしょう。この文字(文章)の位置は次に示すように、ALIGN=という文字を指定すれば変更が可能です。

    <IMG  SRC=“image.gif  ALIGN=top >文字

    <IMG  SRC=“image.gif  ALIGN= middle>文字

    <IMG  SRC=“image.gif  ALIGN= bottom>文字

top,middle,bottomに応じて、画像の上端、中央、下端に文字が表示されることになります。ALIGN=を指定しないときは、bottomとしたときと同じになります。



HTML言語作成例

sample.htm

<HTML>

<HEAD>

  <TITLE> Home Page Sample </TITLE>

</HEAD>

<BODY>

  <H1>文章の見出し</H1>

  <HR>

  <OL>

    <Li>   <IMG SRC="image.gif">画像取込の例

    <Li>   <A HREF="file1.htm">文書1を参照</A>

  </OL>

  <HR>

</BODY>

</HTML>

上のソースをブラウザで表示すると以下のようになります。

http://www.geocities.jp/shiotika/hpkouza/tag/sample.htm



file1.htm

<HTML>

<HEAD>

  <TITLE> 文書1 </TITLE>

</HEAD>

<BODY>

  <H1>文書1に来ました。</H1>

  <HR>

  <UL>

    <Li>   <A HREF="sample.htm">戻る</A>

  </UL>

  <HR>

</BODY>

</HTML>

上のソースをブラウザで表示すると以下のようになります。

http://www.geocities.jp/shiotika/hpkouza/tag/file1.htm



■自己紹介のページを作る


サンプル⇒ http://www.geocities.jp/shiotika/hpkouza/tag/siosaki1.htm


ホームページビルダー用サンプル
     ↑  ↑  ↑
上のサンプルのようなページをホームページビルダーで作ってみよう。