HTML入門

ホームページの制作に必要なHTMLを解説するページです。できるだけ、IEでもNNでも解釈できるタグだけを紹介しています。Webページを制作予定または制作中の方、ビルダーを使用中の方は是非ご覧ください。 (このページの内容は、予告なしに変更されます。) 問い合わせはこちらまで

●HTMLとは?

HTMLは、現在のWebページを作る際の基本プログラム言語である。プログラム言語とい うよりも、ほとんどテキストを書くような感覚でプロ グラムを組み立てていける、他の言語に比べると極めて簡単なものである。インターネット上のホームページの多くは、HTMLをベースに、必要に応じて他のスクリプト(Java,VBSなど)を挿入して表示機能を拡張したり、プラグインを呼び出したり、CGIのようにプログラムの中でHTML文を生成したりして、コンテンツを表示する。つまり、HTMLは全てのWebページの基本となる言語であり、Web開発者が使用しているビルダーソフトは、このHTML文を開発者に代わって生成する機能を持っている。実際にどのような言語なのかはブラウザやビルダーのソースを表示する機能を使用すれば確認できるし、書き方は以下の記述を参照して欲しい。(数多くの文献が出版されている。)

HTMLは、「タグでくくる」のが基本である。タグと呼ばれる記号(< >)でくくって表記するところに特徴がある。たとえば、

<P>ここはテキストの表示領域です。</P>

のように表記すると <P>と</P> の間のテキストが表示される。このタグの種類と使い方を理解することがHTMLによるWebページ制作の基本である。

○ダイナミックHTML

HTMLが静的な表現しかできないのに対し、ダイナミックHTMLは、Java、GIFアニメーション、プラグインなどの力を借りずに、HTMLだけで動きのあるWebページを制作しようとする新しい技術である。具体的には、次のような技術の組み合わせである。動きのあるページを作りたいなら、まずダイナミックHTMLを理解しよう。(ブラウザの種類により表現できないものもある。)

1.HTML
2.スタイルシート(Cascading Style Sheet)
  制作者の意図どおりに文字や画像を表示させる技術であり、CSSと呼ばれる。
  フォント、色と背景、レイアウトに関する設定などが提唱されている。
3.スクリプト
  HTMLの中に埋め込んで実行できる言語であり、Javaスクリプト、VBスクリプトがある。

●HTML文書を作るには?

HTML文書(Webページ)は、次のようなツールで作成できる。

1.専用ビルダー(WYSIWYG型)
2.タグ編集型エディター
3.ワープロなど(拡張機能型)
4.プロバイダの提供するサーバー側のツール

3、4を使用すると、驚くほど簡単にWebページが制作できる。ところがワープロやプロバイダのツールはシンプルなページを制作するには効率的だが、気に入らない部分の微調整や複雑なテンプレートを使用するページには不向きであり、制作者の意図するところを100%満たしてくれるものではない。また、1の専用ビルダーで作った表などに関して枠線がどうしても思うように表示されないとか、テキストに関してインデントが思うような位置に挿入されない、といった不満が生じる場合もある。各々のビルダーは万能ではなく、癖もある。同じ表現をしようとしても、生成されるHTML文はソフトによって異なる場合がある。フリーウェアなどの簡易型ビルダーを使用すると、それ以上の緻密な表現法を使いたいと考えても限界がある。さらに高度な表現をしたければ、より高度なビルダーを探してインストールするか、HTMLを勉強しソース文に2のタグ編集型エディターなどで打ち込む必要がある。簡易ビルダーのみでWebページを制作し続けるとタグの知識が習得できず進歩が止まってしまう。制作者の思いどおりのWebページを制作するには、やはりどこかでタグの打ち込みが必要になる。
また、スクリプトを使用したステートメントなど、標準以外のタグがよく使われるページの編集は、極力2で行うことをおすすめします。(質の低いビルダーで編集すると、大事なステートメントが削除されたり、削除しても残っていたりする場合がある。)

●HTMLの基本的な書き方

ここでは、テキスと画像の簡単なページを制作するために必要なタグの使い方を紹介する。タグは半角の大文字または小文字でよいができるだけ統一したほうがよい。

○必ず書かねばならないこと

HTMLは、各ページの最初で、「このページはHTMLで書かれたページである」ことを宣言し、「基本設定」を明記しなければならない。これは、HTMLの約束事であり、次のように記述する。


<HTML>
<HEAD>
<META ....>
<TITLE>そのページのタイトル
</TITLE>
</HEAD>
<BODY>
---ここにコンテンツを書く---
</BODY>
</HTML>


HTMLを開始する宣言が <HTML>、終了するのが </HTML> というタグである。<HEAD> とヘッダー部分の終了を示す </HEAD> に囲まれた部分がヘッダー部で、ここにはHTMLのタイトルを書く。実際にWebページに表示される部分(ブラウザーのウインドウに表示される部分)の開始を示すタグは <BODY>、終了を示すタグは </BODY> である。上記のタグが正しく書かれていれば、Webページとしてブラウザーで表示することができる。

○METAタグで指定する代表的な情報

METAタグを使って、<HEAD>〜</HEAD>の間に、ページの作者、文字コードなどのメタ情報を次のように記述する。ロボットサーチなどで使用するキーワードなどもここで指定するので極めて重要であり間違いがあってはならない。

1.文字コードの指定

たとえば、日本語ページが「ShiftJIS」、「EUC-JP」、「JIS」コードで記述されているなら、それぞれ次のように記述すればよい。間違えると文字化けスル場合があるので正しい文字コードを指定する。日本語以外の言語の場合は、当然別のコードになる。(HTTP-EQUIVアトリビュートを使えば、Webサーバーが提供する情報以外のページ情報をブラウザに認識させることができる。)


<META http-equiv="Content-Type" content="text/html; charset=x-sjis">

<META http-equiv="Content-Type" content="text/html; charset=euc-jp">
<META http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">

2.自動的に他のページに飛ぶ

「Refresh」を使って次のように記述すると、「待ち秒数」後に他のURLを表示するようにすることができる。ただし、ブラウザによっては無効になる場合もあるので、通常クリックして飛ぶためのステートメントと一緒に記述する。


<META http-equiv="Refresh" content="待ち秒数; URL=xxxx.com ">

3.ページのプロファイルを設定する

<META NAME="Author" content="山脇 祐子">
<META NAME="Copyright" content="Mugiyama Corp.">
<META NAME="Reply-to" content="mamako@mugi.co.jp">
<META NAME="Content-language" content="ja">


4.検索エンジン用の情報を指定する

ロボット型サーチエンジンの巡回ロボットの中には、巡回時にMETAタグのキーワードを取得してデータベースに登録するものがある。ロボットにこれらの情報を渡すには、次のように記述する。(ただし、これを無視するロボットもある。)

<meta name="description" content="マリンスポーツの大好き人間のサイトです。老いも若きもいらっしゃい!">
<meta name="keywords" CONTENT="scuba diving, スキューバダイビング, 海, ヨット, ...">
<meta http-equiv="robots" content="all">

○タグを無効にする(コメント行にする)

コメント行を作成したり、後の復活を考慮して無効にしておくには、次のように記述する。

<!--これはコメントです-->

○ページ全体の背景色の設定

背景色の設定は、<BODY>タグの中に記述する。


<BODY BGCOLOR="blue">

というように、BGCOLOR= に続けて背景色の名前を書けばよい。一般には、微妙な色の違いを表現するために16進数でRGBのカラーを指定する。このページの場合は、”#0000CC” が指定されており、最初の2桁が赤(R)、次の2桁が緑(G)、最後の2桁が青(B)で表示する。

○ページ全体のテキストの色の設定

Webページで使用されるテキストの種類は次の4種類である。

1.TEXT:通常に表示されるテキストの色
2.LINK:リンクが設定されているテキストの色
3.VLINK:以前にリンクしたことがあるテキストの色
4.ALINK: リンクが設定されているテキストをクリックした時の色

これらも <BODY>タグの中に次のように記述する。


<BODY BGCOLOR="#0000CC" TEXT="#FFFFFF" LINK="#00FFFF" VLINK="#009900" ALINK="#009933">

○各々のテキストの属性の設定

テキストの属性を記述するタグは、<FONT>〜</FONT>である。このタグに”SIZE”や”COLOR”などの属性(アトリビュート)を追加して次のように設定する。特に指定しなければ、SIZE="3" が標準のフォントサイズであり、小さくしたい場合は、「1,2」を、大きくしたい場合は、「4,5,6,7」を指定する。(FACE は書体を指定するために使用される。)


<FONT FACE="DFPOP体" SIZE="5" COLOR="#0000CC">
(相対的に大きさを指定するには、SIZE="+2"と記述すればよい。この場合の絶対的な大きさは、3+2=5 になる。)

3段階の文字サイズでよい場合は、<BIG>タグ、<SMALL>タグで次のように記述すればよい。

この文字は標準サイズ
<BIG>この文字は大きめ</BIG>
<SMALL>この文字は小さめ</SMALL>

○標準文字サイズの変更

標準の文字サイズを変えるには、<BASEFONT>タグで次のように指定する。


<BASEFONT SIZE="2">

○文字の装飾

装飾したいテキストを次のようにタグで囲む。

1.<B>太字</B>
2.<I>イタリック体</I>
3.<U>アンダーライン</U>
4.<S>削除線</S>
5.<SUP>上付文字</SUP>
6.<SUB>下付文字</SUB>
7.<TT>固定ピッチ(等幅フォント)</TT>
8.<U><I><B>太字・イタリック・アンダーラインのミックス</U></I></B>

○改行

<BR>で強制改行させる。以下のように改行したいところに書き込む。


<FONT SIZE=+1>
ここで改行する。<BR>
</FONT>

ブラウザのウインドウ幅に合わせて改行したくない場合は、<NOBR>〜</NOBR> で囲み、囲まれた中で改行したい場合は <WBR> を次のように挿入する。

<NOBR>この文章は改行しない。しかしここで <WBR> 改行する。</NOBR>

○段落の設定

段落の終わりは、<p>タグで指定する。<BR>と異なるのは、改行と同時に空白行が挿入されること、連続して使用しても2個目以降は無視されることである。次のように使用する。

ここで改行します<BR>
<BR>
ここで段落終了です<P>

○行揃えとセンタリング

次のようなタグを使って、行や段落を両端または中心に配置できる。


1.<DIV>

<DIV ALIGN="left">このテキストは左揃え</DIV>
<DIV ALIGN="center">このテキストは中央揃え</DIV>
<DIV ALIGN="right">このテキストは右揃え</DIV>


2.<P>

<P ALIGN="left">この段落は左揃え</P>
<P ALIGN="center">この段落は中央揃え</P>
<P ALIGN="right">この段落は右揃え</P>


3.<Hn>

Hn の n は文字の大きさを指定する。(1が最大。)最近はあまり使われなくなった。


<H2 ALIGN="left">この見出しは左揃え</H2>
<H2 ALIGN="center">この見出しは中央揃え</H2>
<H2 ALIGN="right">この見出しは右揃え</H2>

4.センタリング

テキストの表示位置を画面の横サイズに合わせてセンタリングするには、<CENTER>タグを次のように使用する。


<CENTER>
<FONT SIZE=3 COLOR="#009900">
このテキストをブラウザーの幅の中心に表示します
</FONT>
</CENTER>


○線を引く

線を引くタグは、<HR> であり、 ”SIZE”(線幅)と”WIDTH”(線長)というアトリビュートを追加し次のように使用する。(「3」の太さでブラウザのウインドウ幅の80%に線を引く場合)

<HR SIZE=3 WIDTH=80%>

○自由にレイアウトする

HTMLでは、半角スペース、タブ、改行などのワープロ的なコードは無視される。これらを生かしたい場合は、<PRE>タグを使用する。(<PRE>タグで囲まれた文字列は固定ピッチフォントで表示される。)

<PRE>
明子さんは秋田生まれ

   直美さんは茨城生まれ

      篤尚君は東京生まれ 
</PRE>


○画像の表示
画像を表示させるには、<IMG>タグを次のように使用する。”WIDTH”で幅を、”HEIGHT”で高さを設定できる。 (%またはピクセルで指定する。)

<IMG SRC="img01.gif" WIDTH="90%" HEIGHT="120">

○ページの背景に画像を貼り付ける

視覚的な効果は大きいが、貼り付けつける画像の大きさと形(縦長、横長)により表現が異なるため、工夫が必要である。

<BODY BACKGROUND="sora.gif">
背景に空の画像を貼り付けた
</BODY>


○リンクの設定

リンク先のアドレスは、自分のサイトの他のページにリンクする場合は相対パス(ex ../xxx/xxx)で、他のURLへリンクする場合は絶対パス(http://xxxxx)で指定する。

1.テキストにリンクを設定

リンクの設定されたテキストに下線を引きたくない場合は、STYLE="text-decoration:none" を追加する。


<A HREF="link1.html" STYLE="text-decoration:none"> このテキストは同じディレクトリの link1.html へリンクされているが下線は表示されない</A>
<P>
<A HREF="http://www.top5.com/~user1/index.html">このテキストは http://www.top5.com/~user1/index.html へリンクされている</A>


2.画像にリンクを設定

BORDER=n の n は枠線の太さ(ピクセル数)を指定する。

この画像は link1.html リンクされている
<A HREF="link1.html"><IMG SRC="logo1.gif" BORDER="5" ALT="これがリンクされた画像"></A>

3.リンク先のページを新ウインドウで表示する

TARGET オプションで新規のウインドウにリンク先のページを表示できる。


<A HREF="link1.html" TARGET="_blank">ここをクリックすると新しいウインドウに link1.html が表示される</A>

また、ヘッダー部分で次のように指定しておくと、各々のAタグでTARGET オプションを指定する必要はなくなる。

<HEAD>
<BASE TARGET="_blank">
</HEAD>

○メールの設定

訪問者が文字列や画像をクリックすると、自動的にメーラーが起動しWebマスターへメールを送れるようにするには、<A>タグで次のように指定する。

1.テキスト:<A HREF="mailto:user1@pop1.ne.jp">ここを</A>クリックしてメールを送ろう!
2.画像:  <A HREF="mailto:user1@pop1.ne.jp"><IMG SRC="mail.gif"></A>

○ファイルをダウンロードする

文字や画像のリンクに、ダウンロードさせたいファイルのURLをを指定すればよい。

http://www.t3.rim.or.jp/~masawat/sen_zip/wob_v110.zip
●HTMLのより高度な書き方

ここでは、段組の作成、マルチメディアのデータの再生など、より高度な表現を含むWebページの制作に必要なタグの使い方を紹介する。

○スタイルシートで文字の大きさを設定

ブラウザの設定に左右されない絶対サイズで表示したい場合には、スタイルシートのFONT-SIZEプロパティを使ってみる。

<FONT STYLE="font-size:50pt">50ポイントの文字</FONT><BR>
<FONT STYLE="font-size:50px">50ピクセルの文字</FONT><BR>
<FONT STYLE="font-size:0.5in">0.5インチの文字</FONT><BR>
<FONT STYLE="font-size:5cm">5cmの文字</FONT><BR>
<FONT STYLE="font-size:50%">標準の文字サイズの50%の文字</FONT><BR>


○スタイルシートで文字の背景色を設定

<FONT STYLE="background:blue">文字の背景は青になる</FONT>

○インデントの設定

HTMLにはインデント・タグはないが、次のようなタグで代用できる。

1.<BLOCKQUOTE>


インデントは設定されず文字列長は最長になる。
<BLOCKQUOTE>
左右に適当にインデントが設定され文字列長は短くなる。
<BLOCKQUOTE>
インデントが設定され文字列長はさらに短くなる。
</BLOCKQUOTE>
インデントが設定され文字列長は最初のインデント設定と同じになる。
</BLOCKQUOTE>
インデントは設定されず文字列長は最長になる。

2.表の作成(<TABLE>)

表は、ブラウザの種類によって表現が微妙に異なる。複雑な表やネステイングはできるだけ避けたほうがよい。

<TABLE BORDER="0">
<TR>
<TD WIDTH=50></TD>
<TD>ここにテキスト。TABLEタグで2列の表を作成し、1列目は幅を指定し、2列目にテキストを入力する。ピクセル単位またはページ幅に対する割合でインデントを設定できる。罫線は表示しない。
</TR>
</TABLE>


3.スタイルシートでインデントを設定

<SPAN STYLE="margin-left:50;margin-right:50">インデント幅はピクセル(px)、ポイント(pt)、インチ(in)、センチメートル(cm)、デフォルトの大きさに対する割合(%)単位で指定できる。
</SPAN>


○スタイルシートで行頭インデントを設定

<FONT STYLE="text-indent:10pt">段落の1行目に行頭インデントを設定。
</FONT>


○項目別リストの作成

<DL>
<DT>項目1
<DD>項目1の説明
<DT>項目2
<DD>項目2の説明
</DL>


○箇条書きの作成

1.記号なし


頭に何もつけない箇条書き
<DL>
<DD>栄養のバランス
<DD>十分な睡眠
<DD>適度な運動
</DL>


2.記号を付ける

頭に、黒丸(省略値)、白丸、黒い四角をつける場合は次のように指定する。


頭に記号をつける
<UL>
<LI TYPE="disk">これが黒丸(STYLE= は省略可)
<LI TYPE="circle">これが白丸
<LI TYPE="square">これが黒い四角

</UL>


3.連番を付ける

頭に、数字(1,省略値)、英大文字(A)、英小文字(a)、ローマ数字大文字(I)、ローマ数字小文字(i)をつける場合は、次のように指定する。
 - START オプション:<OL>に指定する。
 - TYPE オプション:<OL>(リスト全体)、<LI>(その項目のみ)に指定する。

頭に3から連番をつける
<OL START="3">
<LI>文頭に3がつく
<LI>文頭に4がつく
<LI>文頭に5がつく
</OL>


○段組の設定

段組専用のタグはブラウザにより表示が異なるため、一般的な段組は表<TABLE>として作成するのが望ましい。(BORDER="0" にして罫線を消す。)


<TABLE CELLSPACING="3" BORDER="0">
<TR VALIGN="top">
<TD>ここに本文1</TD>
<TD>ここに本文2</TD>
<TD>ここに本文3</TD>
</TR>
</TABLE>


○テキストの中にボックス状の余白を入れる

テキストの左側に、50X50ピクセルのボックス状の余白を挿入するには、次のように記述する。

<SPACER TYPE="block" WIDTH="50" HEIGHT="50" ALIGN="left">

ここにテキストを記述する。
</SPACER>


○画像の横にテキストを配置する

画像の横にテキストを複数行回り込ませるには、IMGタグにALIGNオプションを追加する。次の例では、左右2段の画像の右左にテキストを回り込ませている。

<IMG SRC="gazou1.jpg" ALIGN="left">
テーマ:湘南海の家<BR>
撮影日:10/25/2000<BR>
撮影者:渡風太郎<BR CLEAR=ALL>
<BR>
<IMG SRC="gazou2.jpg" ALIGN="right">
テーマ:伊豆の民宿<BR>
撮影日:12/12/2000<BR>
撮影者:田中佐恵子<BR CLEAR=ALL>

○表の横にテキストを配置する

<TABLE BORDER ALIGN="left" VSPACE=20" HSPACE="20">
<TR><TD>静岡県</TD><TD>伊豆半島</TD></TR>
<TR><TD>東京都</TD><TD>伊豆七島</TD></TR>
</TABLE>
このテキストが表の右側に回りこむ。表と回り込むテキストの間隔(ピクセル)を、VSPACE(縦間隔) および HSPACE(横間隔) で指定する。(IEでは無効かもしれない。)


○表の背景の設定

1.表の背景色の設定

<TABLE BDCOLOR="色" >は表単位に、<TR BGCOLOR="色" >は行単位に、<TD BGCOLOR="色" >はセル単位に色をつける。


<TABLE BORDER BGCOLOR="red">
<TR BGCOLOR="pink"><TD>このセルの背景はピンク</TD><TD>このセルの背景はピンク</TD></TR>
<TR><TD BGCOLOR="blue">このセルの背景はブルー</TD><TD>このセルの背景はレッド</TD></TR>
</TABLE>


○表の背景に画像を貼り付ける

<TABLE BACKGROUNDR="ファイル名" >は表単位に、<TR BACGROUNDR="ファイル名" >は行単位に、<TD BACKGROUNDR="ファイル名" >はセル単位に画像を貼り付ける。

<TABLE BORDER HEIGHT="150" BACKGROUND="gazou1.gif">
<TR BACKGROUNDR="gazou2.gif"><TD>このセルの背景は画像2</TD><TD>このセルの背景は画像2</TD></TR>
<TR><TD BACKGROUNDR="gazou2.gif">このセルの背景は画像2</TD><TD>このセルの背景は画像1</TD></TR>
</TABLE>


○プラグインで再生する

BGMを流したりや映像を再生する場合に用いられるのがプラグインである。次のように、<EMBED>タグを使用してプラグインを呼び出しプラグインデータを再生することができる。(他にも再生方法はあるがIEでもNNでも利用できるのが<EMBED>である。)1回のみの再生なら、REPEATオプションやLOOPオプションはつけなくてよい。

1.サウンドの再生

<EMBED SRC="sound1.mid" HEIGHT="50" WIDTH="130" AUTOSTART="true" REPERT="true" LOOP="true">

再生ボタンをクリックすると音が出るようにするには次のように指定する。

<EMBED SRC="sound1.wav" HEIGHT="50" WIDTH="130">左のボタンをクリックすると音が出る

2.ビデオの再生

<EMBED SRC="video1.mpg" HEIGHT="320" WIDTH="240">