ホームページ制作の基礎知識

「ホームページ制作基礎演習」

■ホームページとは
■ホームページの作成方法
■HTMLファイルの基本構造
■ハイパーリンク
■URL(Universal Resource Locator)
■ファイル名と保存場所
■マルチメディア・データ
■HTMLタグ一覧
■カラーチャート
■スタイルシート

■ホームページとは

●WWW (World Wide Web）

インターネットを使うにあたって最も利用することの多いサービスがWWWでしょう。
WWWは、文書だけではなく、画像や音声、動画などの情報を混在した形で転送できるようになっています。このようなシステムをハイパーテキストシステムと呼んでいます。

WWWサービスで利用されているハイパーテキストを作成する方法がHTML（Hyper Text Markup Language）で、HTMLで作成された情報をホームページと呼んでいます。
このHTMLで作成されたホームページをコンピュータ上で表示させるためのアプリケーションがWebブラウザです。

●Webブラウザ

Webブラウザは、WWWで提供されているハイパーテキスト情報をインターネットから検索して、コンピュータの画面に表示させるアプリケーションです。

Webブラウザの代表的なものは、Internet ExplorerとNetscape Navigatorです。
ブラウザによって独自のHTML拡張機能があり、ブラウザでは正常に表示できなかったり指定が無視されたりすることがありますので注意が必要です。

この講座では、Internet Explorerを中心に解説していきます。
Internet Explorerは現在バージョンが5.5になっています。バージョン3以前と、バージョン4以降では機能に大きな違いがありますので、バージョン4以降（できれば最新版）を使用してください。

●HTML（Hyper Text Markup Language）

HTMLはWWWで利用する情報を作成するための基本言語です。
言語といっても特別な作成ソフトを使う必要はなく、テキスト形式の文書にタグと呼ばれる制御記号を記入していくだけです。テキストエディタの機能があり、テキストファイルとして保存できればどのようなアプリケーションでも作成できます。
Webブラウザは、WWWサーバから送られてくるデータのタグの意味を解析して、指定されたとおりに画面へ文字や画像などを表示します。

現在では、HTMLファイルを作成するさまざまなアプリケーションが発売されていますが、細部にわたって自分の思ったとおりのページを作成するためにはHTMLタグの知識は不可欠です。また、最近多くなったホームページ翻訳（ホームページのレイアウトを崩さず上書き翻訳する）の際にHTMLの知識がないと、どの部分をどのように翻訳したらよいかわからなくなってしまうので、翻訳者にとっても必須の知識となっています。。

そこで、この講座では、いわゆるホームページ作成ソフトは使わずにあえてタグを手入力する方法をとります。

■ホームページの作成方法

●ホームページとは

ホームページとは「HTMLのタグを使って、Webブラウザに表示できるようにしたファイルの集合体」です。このファイルの集合体をWebブラウザで表示すると1つのページとして表示されます。
また、いくつかのページで構成されているホームページの場合、目次や先頭のページを他のページと区別する意味で「ホームページ」と呼ぶことがあります。この講座ではその場合、「トップページ」と呼ぶことにします。

作成したホームページをインターネットで公開するには、インターネットに接続されているWWWサーバにホームページのファイルを保存する必要があります。自分のPC上で作成したファイルをFTPソフトでプロバイダのWWWサーバへ転送してインターネットに公開することになります。
ほとんどのプロバイダは加入者に専用のディスクスペースを用意しています。最初はそのようなサービスを利用するといいでしょう。

●HTML作成アプリケーション

HTML文書を作成するにはテキストエディタを使用します。

「秀丸エディタ」や「WZエディタ」などのエディタをお使いの方はそれで結構です。
専用のテキストエディタの無い方は、Windowsに付属している「メモ帳」をお使いください。

画像の作成およびファイル形式の変換にはWindowsに付属している「ペイント」を使用します。

Front Page やホームページビルダーなどのホームページ専用ソフトは、基本的なHTMLタグをマスターした後で、さらに高度なページを作成する場合に使用してください。

●HTMLタグとは

HTMLファイルは、HTMLの構造にしたがってHTMLタグを記述したプレーンテキスト・ファイルです。

HTMLタグは、次のように<　>記号で囲まれている文字列です。

<タグ名>タグが影響する文字列</タグ名>

最初のタグが開始タグ、最後の / が入ったタグが終了タグです。終了タグのないものもあります。

例えば下線を引きたい場合は、

<U>下線を引く文字列</U>

のように使います。

終了タグが必要な場合に終了タグを付け忘れると、これ以降の文字列すべてに影響が及ぶことになります。
タグとして入力する文字は大文字でも小文字でも構いませんがどちらかに統一します。また必ず半角英数文字を使用します。

■HTMLファイルの基本構造

HTMLファイルは、基本的に下記のようになっています。

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
　本文
</BODY>
</HTML>

<HTML>と</HTML>で囲むことによってこの文書がHTMLファイルであることを示します。
<HEAD>と</HEAD>で囲まれた部分にはヘッダ情報が書き込まれます。
<TITEL>と</TITLE>で囲まれたタイトルは、ブラウザの上部に表示されたり、お気に入り（ブックマーク）に登録した場合の題名になったりします。
<BODY>と</BODY>の間にページのメインとなる情報が入ります。ブラウザの画面に表示されるのがこの部分です。

■ハイパーリンク

WWWで一番重要な機能がハイパーリンクです。
ハイパーリンクは、ページに表示されている文字列やイメージをクリックすることによって、自由に他のページを表示させることです。自分のホームページのファイル以外にも、URLを指定すれば、他のホームページのHTMLファイルにリンクすることができます。

■URL(Universal Resource Locator)

URLは、インターネット上の情報のある所在地を表します。インターネット上にはまったく同じURLを持った別々の情報はありません。

URLは以下のようになります。
http://サーバのドメイン名/ディレクトリ名/ファイル名

httpは、Hyper Text Transfer Protocolの略で、WebブラウザとWWWサーバとの間でデータを転送するための通信手順です。

■ファイル名と保存場所

ホームページのファイルが完成したら、FTPソフトでプロバイダのWWWサーバにファイルを転送してホームページを公開します。

●ファイル名のつけ方

HTMLファイルには必ず、拡張子「.html」または「.htm」をつけます。とちらでも結構ですが統一するようにしてください。
一番先に表示したいトップページのファイル名はindex.htmlまたはindex.htmとします。
WebブラウザでURLを入力する際、ファイル名を省略しても自動的にindex.html（index.htm）を表示するようになっています。

ファイル名は小文字にします。WWWサーバはUNIXを使っているものが多く、ファイル名の大文字小文字が区別されます。不統一の場合でも、Windowsでは区別されないので、HTMLファイルを作成しているときは問題なく画像の貼り込みやハイパーリンクが出来ますが、いざWWWサーバにアップロードすると画像が欠けてしまったり、リンク機能が効かなかったりします。

●フォルダで整理

HTMLファイルはフォルダの中に整理しながら作成します。
先ず、ローカルディスク上に「WWW」などというフォルダを作成してそれをWWWサーバに見立ててその中にファイルを作りこんでいきます。

ホームページの構成に合わせてさらにフォルダを入れ子にしてわかりやすく整理します。
画像は「img」などという名前でフォルダを作成しその中にまとめておくと管理が楽になります。

■マルチメディア・データ

ホームページでは、文字情報だけではなくいろいろなマルチメディア・データを扱うことが出来ます。

●イメージ

GIF(Grafics Interchange Format)
このフォーマットは、256色の表示ができます。フルカラーの画像は256色に減色してフォーマットする必要があります。
背景を透明にしたトランスペアレント形式や、はじめにぼんやりと表示させ、次第にはっきりとした画像を表示させるインターレース形式にすることもできます。

JPEG(Joint Photographic Experts Group Bitmap)
このフォーマットは、GIFよりも圧縮率が高くフルカラーで保存できるので写真などに適したフォーマットです。
GIFのインターレース表示のように、プログレッシブJPEG形式にすると、じわじわと表示させることができます。背景を透明にすることはできません。

●動画

アニメーションGIF
複数のGIF画像を一まとめにし連続して表示させることによって、簡単な動画を再生することが可能です。

Video for Windows(.avi)
マイクロソフトが開発したWindows標準の動画形式です。

QuickTime(.mov)
アップル社が開発した動画フォーマットでです。

MPEG(.mpg .mpeg .mp2)
Moving Picture Experts Groupが標準化した動画フォーマットです。

Shockwaveファイル(.dcr .dir .dxr)
Macromedia社が開発した動画フォーマットです。

●サウンド

WAVEファイル(.wav)
マイクロソフトとIBMが開発したWindowsで標準的に使われているサウンド形式です。

AIFFファイル(.aif .aiff)
Audio Interchange File Formatは、アップル社が開発したサウンド形式です。

AUファイル(.au .snd)
UNIXでよく用いられるサウンド形式です。

RealAudio(rm)
wav .aiff .auよりもサイズが小さく、ダウンロードしながら再生（ストリーミング）が可能です。再生にはRealPlayerというプラグインが必要です。

MIDIファイル(.mid .midi)
Musical Instrument Digital Interfaceの略で、音色、音程、発音のタイミング、発音の長さなどが記述されたファイルです。再生するには音源が必要ですが、最近ではソフトウエア音源で十分に再生できます。

MP3ファイル(.mp3)
MPEG-1 Audio Layer 3の略で、動画技術MPEGの音声部分のみを取り出した規格です。WAVに比べて10分の1程度のファイルサイズに圧縮することができます。

WMAファイル
Windows Media Audioの略。ストリーミング再生が可能。Windows Media Player などのソフトを用いて再生します。

■HTMLタグ一覧

●基本タグ

　<HTML> ～</HTML> /HTMLファイルの宣言

　記述されている内容がHTMLによるものであることを定義します。

　<HEAD>～ </HEAD> /ヘッダ

タイトルの記述およびサーバーやブラウザで利用できる情報を記述します。

ヘッダ部に記入する主なタグ　
<TITLE >～</TITLE >/タイトル <LINK> /関係、<META> /汎用タグ、<STYLE> </STYLE>/文書スタイル

　<BODY> ～</BODY>/本文

Webブラウザに表示される内容を指定します。

　<Hn>～ </Hn> /見出し

nには1～6の数字が入ります。このタグで挟まれた文字列は見出しとなり、前後に自動的に改行が入り、上下にスペースがとられ、文字は太字になります。
H1が最上位の見出しで文字サイズも最大になり、H6が最下位となります。文字サイズは相対的なもので、ブラウザによって変化します。　　　

　<P> ～</P>/段落

段落を作成します。
<P>だけで使った場合、その直後に1行分のスペースができます（改行2つ分）。
ただし、現在では<P> ～</P>で挟んで段落を作るという本来の使い方が推奨されています。

　<HR> /水平線

水平線（区切り線）を表示します。上下にスペースがとられます。

/注釈

　　　動作内容やその部分の説明を記述する場合に使用します。
　　　このタグで挟んだ部分は、Webブラウザに表示されません。

　<ADDRESS> ～</ADDRESS> /アドレス

慣例として、HTML作成者の情報（氏名、E-Mailアドレス、作成日、更新日、クレジットなど）を示します。
イタリック体で表示されます。

●配置に関するタグ

　<BR> /改行

強制的に改行したい部分に入れます。

　<CENTER> ～</CENTER>/中央揃え

文字列や画像、表などをセンタリングします。

　<DIV> ～</DIV>/表示位置

このタグで挟まれた部分をブロックとして扱い、本文の段落と分割して行揃えを行います。

　<BLOCKQUOTE> ～</BLOCKQUOTE> /引用文

前後の文章から切り離されて、インデント表示されます。引用文であることが明確になります。

　<PRE>～ </PRE> /整形済みテキスト

テキスト形式で作成された文書の改行やスペース、空行などがそのままWebブラウザに表示されます。

●フォントおよび意味定義に関するタグ

　<FONT> ～</FONT>/フォントの属性を指定

<FONT SIZE=　　文字サイズを指定します
<FONT COLOR= 文字の色を変更します
<FONT FACE=　フォント名の指定をします

　物理スタイルのタグ（文字のスタイルを直接指定します）

<B> ～</B>/ボールド
<I> ～</I>/イタリック
<U>～</U> /アンダーライン
<S>～</S> /削除線
<SUP>～</SUP> /上付き文字
<SUB>～ </SUB> /下付き文字

　論理スタイルのタグ（文書の意味に合わせて指定するタグ）　　　　

文字列の意味を明確にしたいときに使用します。Webブラウザの種類によって表示が異なりますので、文字修飾の指定には物理スタイルのタグを使います。

<EM> ～</EM> /強調 (イタリック）
<STRONG> ～</STRONG>/強調 (ボールド）
<CODE> ～</CODE>/コンピュータ・コード （固定ピッチ・フォント）
<CITE> ～</CITE>/引用文（イタリック）
<DFN> ～</DFN>/定義文字（変化無しあるいはイタリック）
<KBD> ～</KBD>/キーボード入力（固定ピッチ・フォントあるいはボールド）
<VAR> ～</VAR>/変数(イタリックあるいは固定ピッチ・フォント）
<ACRONYM> ～</ACRONYM>/頭字語 （変化無し）
<DEL> ～</DEL>/削除文字 （取り消し線あるいは変化無し）
<INS> ～</INS>/挿入文字 （アンダーラインあるいは変化無し）
　
　

●リストに間するタグ

　<UL><LI>・・・・</UL> /一般的なリスト

行頭に記号のついたリストを作成します。
項目の頭に<LI>をつけます。
<UL>タグは入れ子にすることができます。<UL></UL>で挟まれた部分にさらに<UL></UL>を挿入すると、この部分がインデント表示されます。
第1階層の項目には●、第2階層の項目には○、第3階層の項目には■の行頭記号が付きます。

　<OL><LI>・・・・</OL> /番号付きリスト

行頭に連番がついたリストを作成します。
それ以外は<UL>タグと同じです

　<DL><DT>・・・・<DD>・・・・</DL> /定義型リスト 　

見出し語とその説明文を一組にしてリスト表示します。

次のようにタグをつけます。

<DL>
<DT>見出し語
<DD>説明文

</DL>

----------------
見出し語（改行）
（インデント）説明文
----------------
という表示になります。

●リンクに関するタグ

　<A>～</A> /ハイパーリンク

機能的に次の2つに分けられます。

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

このタグで挟まれた文字列はホットテキスト、リンクポインタなどと呼ばれ、下線が引かれて指定された色が付けられます。ブラウザに表示されたホットテキストをクリックすると指定したホームページが表示されます。

"　"には、他のサイトのURLやHTMLファイル名、自分のホームページの別のHTMLファイル名をディレクトリ名も含めて記述します。
また、ファイル内の指定個所にリンクする場合は次で説明するマーカー名を指定します。

<A NAME="　">～</A>

HTMLファイルにマーカー名を指定します。ブラウザ表示上の変化はありません。

●テーブルに関するタグ

　<TABLE> ～</TABLE>/テーブル

このタグで挟まれた部分が、データを行や列で区切ったテーブル（表）になります。

以下のタグと共に用います。

<CAPTION> ～</CAPTION> /表題
<TR> ～</TR>/行
<TH> ～</TH>/見出しセル（水平・垂直方向に中央揃えで文字はボールド表示）
<TD> ～</TD>/項目（データセル）

タグの付け方の例

<TABLE>
<CAPTION>表のタイトル</CAPTION>
<TR><TH>見出し</TH><TD>1行2列</TD><TD>1行3列</TD><TD>1行4列</TD>
</TD></TR>
<TR><TH>見出し</TH><TD>2行2列</TD><TD>2行3列</TD><TD>2行4列</TD>
</TD></TR>
<TR><TH>見出し</TH><TD>3行2列</TD><TD>3行3列</TD><TD>3行4列</TD>
</TD></TR>
</TABLE>

●画像・サウンドに関するタグ

　<IMG> /画像をインライン表示する

このタグを使うとホームページの中に直接画像を表示できます。

次のようにsrc="～"の～に画像ファイル名を指定します。

<IMG SRC="ファイル名">

このタグには自動的に改行が入らないので、適宜、<P>や<BR>タグを入れてください。

　<BGSOUND> /バックグラウンドでサウンドを再生

Internet Exprorer3.0以降でホームページを読み込むとバックグラウンドで音声を再生します。

次のように音声ファイルを指定します。

<BGSOUND SRC="ファイル名">

以下の音声のフォーマットに対応しています。

.wav　Windowsの標準サウンドフォーマット
.au　　SunやNeXTが採用しているフォーマット
.mid（MIDI）　電子楽器を制御するフォーマット（プラグインのMIDI音源が必要です）

●フォームに関するタグ

　<FORM> </FORM> /入力フォーム

ホームページに記入フォームを作成します。
記入フォームには、テキストボックス、ラジオボタン、ボタン、リスト、選択メニューなどを表示するタグを記述します。
通常、フォームデータを処理するには、CGI（Common Gateway Interface）プログラムが必要です。

　<INPUT> </INPUT>/入力エリアやボタンの表示

テキストボックスを表示するには以下のように記述します

<INPUT NAME="フィールド名">

また、TYPEを指定することにより、以下のような表示ができます。

<INPUT TYPE="表示形式" NAME="フィールド名">

チェックボックス（TYPE="checkbox"）
ラジオボタン　（TYPE="radio"）
不可視フィールド　（TYPE="hidden"）
送信ボタン　（TYPE="submit" VALUE="送信"）
リセットボタン　（TYPE="reset" VALUE="リセット"）

●フレームに関するタグ

　<FRAMESET> ～</FRAMESET>/フレーム設定

ページを縦横に分割して表示する設定を行います。
ROWS属性は上下方向、COLS属性は左右方向の分割数と高さを指定します。

高さは、ピクセル数かパーセンテージで指定します。

上下方向に2分割で上が20%で下が80%の場合は以下のように記述します。

<FRAMESET ROWS=20%,80%>

　　　　　～

</FRAMESET>

　<FRAME> /フレーム要素

<FRAMESET>で分割したフレームセルに表示するHTMLファイルを指定します。

次のように記述します。

<FRAMESET ROWS=20%,80%>
<FRAME SRC="上画面のファイル名">
<FRAME SRC="下画面のファイル名">

</FRAMESET>

　<NOFRAMES> ～</NOFRAMES> /フレーム未対応ブラウザでの表示

フレームに対応していないブラウザのために、注意書きを記述します。

記述例：

<NOFRAMES>
<P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P>
</NOFRAMES>

　<IFRAME>～</IFRAME> /インラインフレーム

このタグで挟まれた部分は、ページの中に独立したフレームエリアを作りその中に指定したHTMLファイルを表示します。

記述例：

<IFRAME SEC="表示するファイル名">
ここにインラインフレームに対応していないブラウザ用のメッセージを記入します。
</IFRAME>

●拡張機能に関するタグ

　<EMBED> ～</EMBED>/プラグインのデータを表示
　<NOEMBED>～ </NOEMBED>/<EMBED> タグ未対応用
　<MARQUEE> ～</MARQUEE>/文字のスクロール
　<SCRIPT>～ </SCRIPT>/スクリプトの実行
　<APPLET> ～</APPLET> /Javaの使用
　<OBJECT> ～<OBJECT> /ActiveXの使用

■カラーチャート

コンピュータでは、光の3原色を組み合わせてさまざまな色を表現しています。
3原色はR(Red)、G(Green)、B(Blue)で、3色の強さは、0～255の数値で表します。

HTMLでのカラーの指定は、2桁の16進数かカラーネームで行います。
例えば「黒」は、R=00、G=00、B=00で、#000000とするか、カラーネーム=Blackで指定します。

実際の色は、コンピュータのディスプレイによってかなり変化します。
例えば、ディスプレイが256色モードの場合には、微妙な色は、下記の216色に近いものに置き換えられ、意図したものと異なる色になってしまうことがあります。その場合、基本16色または216色で作成しておけば安全です。
さらに、ディスプレイそのものの違いや、OS（Windows、Mac）の違いによっても変化します。

基本16色パレット

216色パレット

■スタイルシート

●スタイルシートとは

HTMLタグはもともと文書の構造を記述する言語でしたが、いつのまにか見栄えが中心になってしまい、ブラウザの独自仕様も増えてきました。
そこで、HTML4.0以降では、HTMLは本来の文書の構造を記述し、見え方はスタイルシートで指定するように役割分担がなされるようになりました。

スタイルシートを活用すると、ソースの変更をしなくても複数のページのスタイルを統一できます。

スタイルシートはテキストファイルです。メモ帳などのテキストエディタで作成し、ファイルの拡張子を.cssとします。

スタイルシートの指定は、そのスタイルを適用するHTMLファイルの<HEAD>～</HEAD>の間に<LINK>タグを使って記述します。

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="スタイルシート名">
</HEAD>
<BODY>
　～

上記のようにスタイルシートはHTML文書と別ファイルにすることもありますが、HTML文書の中に書き加えることもできます。

HTML文書に記述する場合は以下のようにヘッダー部分に入れます。

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<STYLE TYPE="text/css">
　H1{COLOR: blue}
</STYLE>
</HEAD>
<BODY>
<H1>見出し１の文字が青くなります。</H1>
</BODY>
</HTML>

次のようにタグの中に直接書き込む方法もあります。

<P STYLE="color:red;">この段落の文字は赤色になります。</P>

●スタイルの指定方法

セレクタ{属性:値}　

セレクタには、タグやID名、クラス名が入ります。

部分的にスタイルを指定する場合は<SPAN>～</SPAN>あるいは<DIV>～</DIV>タグを使用します。
<SPAN>はインライン要素、<DIV>はブロック要素（直後に自動的に改行が入る）を作ります。

複数指定する場合は次のようにセミコロン（;）で区切ってつなげます。

セレクタ{属性:値;属性:値;属性:値;属性:値;}

例：
見出し１のフォントサイズが30ポイントで書体がSans-Serifの場合

H1{font-size:30pt;font-family:Sans-Serif;}

●スタイルシートの主な属性

font-family　フォントの指定（serif、sans-serifなど）
font-size　フォントサイズの指定（ポイントptやcm、mmなど）
font-style　フォントスタイルの指定（italicなど）
font-weight　フォントの太さの指定（boldなどのキーワードか数値で指定）
text-align　ブロック要素の水平方向の位置（left、center、right、justifyなど）
text-decoration　文字列の修飾（overline、underlineなど）
background-color　背景色の指定（カラーネームか16進数で指定）
background-image　背景画像の指定
color　文字色の指定（カラーネームか16進数で指定）
width　ブロック要素の幅を指定（px、cm、%など）
height　ブロック要素の高さを指定（px、cm、%など）
border　枠の属性を指定
margin　上下左右の余白の指定

●クラス名とIDの指定

クラス名は同じものを複数の要素に対して何度でも使用できます。

IDはHTMLファイルの中で1回しか使用できません。

ID名の前には「#」を、クラス名の前には「.」を付けます。

次のように記述します。

#ID名{属性:値}
.クラス名{属性:値}