V-CLUB春日井　ワンポイントWebpage作成講座

V-CLUB
KASUGAI
WebPage

★HTMLってなんだ？

　Webpageのデータは、HTMLと呼ばれる形式になっていて、 WWWブラウザを通して見ると、きれいに文字や画像がレイアウトされて見えます。 Webpageを作成するということは、このHTML形式の文書を作成することです。 HTML文書は、リアルタイムに整形された文書を表示する文書形式です。しかも、その記述はとても簡単で「タグ」と呼ばれる制御記号を文書中に埋めこむことで、ブラウザで閲覧すると文字の大きさや色を変えたり、画像を表示したりできます。まず、その前にHTMLの基本的なタグを覚える事にしましょう。

HTML文書	ブラウザでの実際の表示
<HTML> <BODY> <TITLE>MY HOME PAGE</TITLE> <FONT SIZE=3>実際に表示されるのはこの部分だけです。</FONT> </BODY> </HTML>	実際に表示されるのはこの部分だけです。

HTMLというのはテキストなのでとりあえずWindows付属のメモ帳に書いていけばＯＫです。ただそのまま保存すると拡張子がtxtとなるので、保存の時に拡張子をhtmlとしてください。上のHTML文書を実際にメモ帳に記述して拡張子htmlで保存してみてください。それをブラウザで開けば上のように見えるはずです。

HTMLはこのような感じで書いていく事になります。タグというのは<HTML>のように< >であらわします。また<HTML>と</HTML>、 <BODY>と</BODY>というように対になっているものがほとんどです。以下に基本タグのとその簡単な説明を書いていきます。

<HTML>～</HTML>

HTML文書の最初と最後につけます。これは絶対必要。

<BODY>～</BODY>

<HTML>～</HTML>のあとにつけます。この間に本文を書いていく事になります。以下のようなオプションをつけることができます。

BACKGROUND="FILE NAME"

背景に画像を使う場合はこのようにしてファイル名を指定します。

BGCOLOR="#NNNNNN"

背景の色を指定します。#NNNNNNは色を表わしています。

TEXT="#NNNNNN"

リンク以外の普通の文字の色を指定します。

LINK="#NNNNNN"

リンクする文字の色を指定します。

VLINK="#NNNNNN"

リンク済の文字の色を指定します。

ALINK="#NNNNNN"

リンクの部分をクリックした瞬間の色を指定します。
実際にオプションをつける時は次のように指定します。
<BODY BACKGROUND="clouds.gif" TEXT="#000000" LINK="#008000" VLINK="#008000">

<TITLE>～</TITLE>

Webpageのタイトルを指定します。<TITLE>～</TITLE>ではさむ形で指定することになります。ここで指定するタイトルというのは実際にページ上に表示されません。ブラウザの一番上のタイトルバーに表示されるものです。またブックマークにした時もここで指定したものが表示されます。以後このように対になっているタグも同じくはさむ形で指定しますので覚えて下さい。

～

フォントに関するタグです。以下のオプションをつけて指定します。

SIZE=N

フォントの大きさを指定します。Nには1～7までの数字が入り、数字が大きいほど文字も大きくなります。

COLOR="#NNNNNN"

フォントの色を指定します。NNNNNNが色をあらわしています。

～

太字にします。

～

斜体にします。

　フォント関連タグの指定の例です。
Webpage作成講座
実際の表示。
Webpage作成講座

<CENTER>～</CENTER>

はさんだ部分をセンタリングします。指定しない場合は通常左寄せになっています。

段落をつけます。段落にする先頭につけます。

 

強制改行します。このタグを使わない場合ブラウザの幅いっぱいまで行きそこで改行されます。

<IMG SRC="file name">

htmlファイルと違うディレクトリに画像ファイルを置く場合は、パスも指定してください。同じディレクトリにあるのならもちろんファイル名だけでいいです。

<UL><LI>～</UL>

<UL>～</UL> の間に<LI>を必要な数だけ入れていきます。

タグの使用例	実際の表示
<UL> <LI>WindowsNT <LI>Windows3.1 <LI>Windows95 <LI>Windows98 </UL>	WindowsNT Windows3.1 Windows95 Windows98

<UL>～</UL>は使わなくても<LI>だけで表示できるようです。

<OL><LI>～</OL>

番号つきのリストになります。

タグの使用例	実際の表示
<OL> <LI>Pentium III <LI>Pentium II <LI>Pentium MMX <LI>Pentium <LI>486DX4-100 <LI>386DX-20 </OL>	Pentium III Pentium II Pentium MMX Pentium 486DX-100 386DX-20

<A HREF="URL">～</A>

URLにはリンク先のURLを、～にはリンクする文字を入れます。
タグの使用例。
<A HREF="http://v-club.jp/">v-club.jp</A>
実際の表示。
v-club.jp

ヴイクラ春日井トップページはこちらから