9.HTMLの基本構造

<HTML>

<HEAD>

<TITLE>印刷について</TITLE>

</HEAD>

<BODY>

ここに本文を記入

</BODY>

</HTML>

※HTMLのタグおよびオプションは大文字、小文字を区別しません。編集時のことを考えて混在させるのは避けましょう。

基本構造タグ <HTML>

書式:<HTML>HTML文書全体</HTML>

HTMLの基本構造を決めるために使用します。通常はHTMLファイル全体を囲み、このタグで囲まれた範囲がHTML文書であることを示します。


ページ情報記述タグ<HEAD> <TITLE>

書式:<HEAD>ページ情報</HEAD>

このタグの有効範囲に各種ページ情報を記述します。通常このタグの有効範囲内に下記の<TITLE>タグを記述します。

書式:<TITLE>ページタイトル</TITLE>

ページタイトルを指定します。有効範囲内に記述された文字がページタイトルとしてブラウザウインドウのタイトルバーに表示されます・

また、ここで指定されたタイトルがブラウザのブックマーク(Netscape)やお気に入り(Internet Explore)に登録されます。


本文記述タグ<BODY>

書式:<BODY>本文</BODY>

HTMLファイル本文の記述範囲を指定できます。<BODY>タグで囲まれた部分がHTMLファイルの本文となり、ブラウザで表示されます。


◆色について

ページの背景色、本部の文字の色など、色の指定を行います。HTMLでは色は16進数で現されます。

【例】背景色の場合

<BODY BGCOLOR="#FFFFFF">

<BODY>タグオプション

BGCOLOR="#RRGGBB"……ページの背景色を指定します。
TEXT="#RRGGBB"……本文で使用される文字の色を指定します。
LINK="#RRGGBB"……未参照のリンク部分の文字の色を指定します。
ALINK="#RRGGBB"……リンク部分をクリックした時の文字の色を指定します。
VLINK="#RRGGBB"……参照済みリンク部部の文字の色を指定します。

BACKGROUND="URL"……背景に使用する画像ファイルを指定します。背景に使用された画像はタイル状に表示されます。

point!!

16進数による色の表現

HTMLでは色の指定は具体的に色の名前を指定することもありますが、基本的に16進数を使用します。モニタ表示を前提とするためRGBカラーで表現します。

書式:#RR GG BB

16進数:0〜9,A〜Fで1つの位を成し、Fの次は繰り上がり0に戻ります。

実際の指定には、書式にもあるようにRGBのそれぞれに2桁の16進数、つまり00〜FFまでの計256階調を指定することができます。一番小さい数=00が黒、一番大きい数=FFが白になります。RGB全体では理論上16,777,216色表示ができますが、実際にはモニタの表示能力に依存します。


10.見出し

見出しタグ<H>

見出し、段落の初めなどに使います。このタグで囲むとその前後は自動的に改行され、太文字になり、さらに指定したフォントサイズで表示されます。

書式:<Hn></Hn>(n=1〜6)

※1が最大、6が最小

【例】<H1>印刷について</H1>


◆表示位置の調整

ALIGNオプションを使用することで表示位置を指定できます。
何も設定しない場合、左揃えで表示されます。

書式:<Hn ALIGN="xxx">〜</Hn>(xxx=LEFT,CENTER,RIGTH)

【例】<H1 CENTER>印刷について</H1>


11.画像

画像表示タグ<IMG>

書式:<IMG SRC="xxx">(xxx=画像ファイル)

画像をブラウザに表示する時に使います。SRCオプションは必須で、表示させたいファイルの保存場所とファイル名で指定します。

◆画像表示サイズ

書式:<IMG SRC="aaa" WIDTH="n" HEIGHT="n">
(aaa=画像ファイル名 n=ピクセル数 n%とすることも可)

WIDTH(幅)・HEIGHT(高さ)オプションを使用すると、物理的に画像サイズを指定することができます。
※入力した方が早く表示される。


◆代替テキスト

書式:<IMG SRC="aaa" ALT="xxx">
(aaa=ファイル名 xxx=任意の文字)

ALTオプションを記述することで画像をできないブラウザや、画像読み込み待ち状態の時など画像の代替となるテキストを表示させることができます。


12.表組

テーブルタグ<TABLE>

書式:<TABLE>----</TABLE>……テーブルの有効範囲を示します。
   <TR>---</TR>……テーブルの横一行分の有効範囲を定義します。
   <TD>---</TD>……テーブル内の各要素を定義します。
   <TH>----</TH>……テーブル内の各見出し要素を定義します。

◆枠線の太さ

書式:<TABLE BORDER="n">〜</TABLE> (n=ピクセル数)

◆表の大きさを指定

表全体の大きさを指定するときに使用します。

書式:<TABLE WIDTH="xxx" HEIGHT="yyy">〜</TABLE>
(xxx=ピクセル数 横幅に対する割合)
(yyy=ピクセル数 縦幅に対する割合)

◆セル間の罫線

セルとセルの間の罫線の太さを指定します。

書式:<TABLE CELLSPACING="n">〜</TABLE> (n=ピクセル数)


◆複数のセルにまたがる表

複数のセルにまたがる表を作成したい時は、その1番左上に当たるセルでROWSPAN(縦方向)、COLSPAN(横方向)オプションを使用します。

書式:<TH ROWSPAN="n" COLSPAN="n">〜</TH>
   <TD ROWSPAN="n" COLSPAN="n">〜</TD> (n=またがるセルの数)


◆表の背景色・背景画像

表の背景に色を付けたり、背景画像を配置したりするときにこれらのオプションを使用します。

書式:<TABLE BGCOLOR="xxx">〜</TABLE>
   <TABLE BACKGROUND="yyy">〜</TABLE>
   <TH BGCOLOR="xxx">〜</TH>
   <TH BACKGROUND="yyy">〜</TH>
   <TD BGCOLOR="xxx">〜</TD>
   <TD BACKGROUND="yyy">〜</TD>

(xxxは16進数による色指定 yyyは画像ファイル名)


13.フレーム

◆ウインドウを左右に分割する

書式:<FRAMESET COLS="xxx,yyy...">
   <FRAME SRC="URL">
   <FRAME SRC="URL">
   …
   </FRAME>

<FRAMESET>タグはフレームの集合を表し、このタグのオプションでCOLSと指定するとウインドウを左右に分割することができます。xxx,yyyの部分は分割する数分だけ記述します。指定する数値はピクセル数、%です。また、ウインドウ2分割で、左側100ピクセル、右側が残り全ての場合は以下のように記述します。

<FRAMESET COLS="100,*">

※残りの大きさを指定しない場合は「*(アスタリスクvあで指定します。

◆ウインドウを上下に分割する

書式:<FRAMESET ROWS="xxx,yyy...">
   <FRAME SRC="URL">
   <FRAME SRC="URL">
   …
   </FRAME>


14.リンク

リンクタグ<A>

書式:<A HREF="xxx">〜</A> (xxxはURLまたはファイル名)

別ファイルにリンクを貼るときに使用します。<IMG>タグの周りに<A>タグを記述すると、画像がリンクボタンになります。その際、青い境界線が画像の周りに付きますが、<IMG>タグ内にBORDER="0"とオプションを追加することで消すことができます。

外部サイトへリンクする

書式:<A HREF="http://xxx.xxx.xx.xx/">〜</A>

メールリンク

書式:<A HREF="mailto:xxx@xxx.xx.xx">〜</A>

この設定をすると、ブラウザでリンク部分をクリックした時にOSで設定されているメールソフトが起動し、新規メール作成画面が開きます。自動的に宛先がここで設定したアドレスになります。



15.ディレクトリ指定に関して

大規模なWebサイトを作成する場合、関連する全てのファイルを同一のディレクトリ内で管理するのは好ましくありません。通常はテーマ別、種類別などのディレクトリを作成して管理するのが一般的です。
リンクの設定をする時に下位のディレクトリにあるファイルを指定したり、上位のディレクトリのファイルを指定したり階層を飛び越えてリンクを設定する作業が発生する。このリンクの設定でファイルの所在を指定するには、ディレクトリを「/」(スラッシュ)で区切って記述します。また指定方法は2種類あります。
※ディレクトリとはMacintoshやWindouwsのフォルダに相当します。

◆絶対パス指定

これはファイル管理システム上の最上位の階層からたどって特定のファイル名を指定するというものです。また、コンピュータの最上位階層のことをルートと呼びます。
この方法では指定側のファイルがどこにあるのかは一切関係ありません。しかし、この方法で指定を行うと指定後にファイルの位置を動かした場合などはリンクの指定を書き直さなければならないという欠点があります。

【例】「xxx」フォルダ内の「yyy」フォルダ内の「zzz.html」を絶対パスで指定する場合

<A HREF="/xxx/yyy/zzz.html">

◆相対パス指定

これは指定側のファイル位置に対してリンクしたいファイルがどこにあるのか位置をしていする方法です。
通常はこの方法を使うのが一般的です。ただ、この方法で記述する場合は階層構造を正確に把握して作成する必要があります。

●menu.htmlの中でxxx.htmlを指定する場合

<A HREF="xxx.html">

●menu.htmlの中でindex.htmlを指定する場合

<A HREF="../index.html">

●index.htmlの中でmenu.htmlを指定する場合

<A HREF="files/menu.html">

●menu.htmlの中でsiteディレクトリを指定する場合

<A HREF="../../site/">