第5-7回授業内容－HTMLの使い方

	<タグ名> … … </タグ名>	範囲の指定を必要とする形式
	<タグ名>	タグ名だけで、配置指定を行なう形式（段落の終りや罫線など）

	"<" は "<" と入力	""" は """ と入力
	">" は ">" と入力	"_（空白）" は " " と入力
	"&" は "&" と入力

	注意 3	タグは大文字、小文字の区別はありません（ここでは強調のため大文字にしているだけです）
	注意 4	かならずしもタグの指示どうりに表示されるとは限りません。とくに文字の修飾や具体的にどう表示されるかは、WWW ブラウザによって違っています。従って、自分のところではちゃんと表示されているからといっても、他の人（他のコンピューターやブラウザ）でも全く同じように表示される保証はありません。その点を十分念頭において、ページデザインを行ないましょう

この演習では、必要とする基本的なHTML言語しか学びません。より詳しいHTMLの文法は、市販の参考書やホームページを参考にして下さい

■ 文書構造

Indexに戻る

(1)	<HTML> … </HTML>
		HTMLで記述されている文書であることを指定する　　－例ここを参照－
(2)	<HEAD> … </HEAD>
		HTML文書の頭書き部。 <TITLE>タグや<META>タグが入る <META>タグの詳細は (42) ～ (45) の項目を参照　　－例ここを参照－
(3)	<TITLE> … 題名 … </TITLE>
		HTML文書の題名を指定する。タイトルバーに表示されるとともに、ブックマークの名前になる　　－例ここを参照－
(4)	<BODY> … 文書本体部 … </BODY>
		HTML文書本体部であることを指定する。(30) も参照　　－例ここを参照－
(5)	<!-- 注釈文 -->
		注釈文を挿入する。ブラウザ上には表示されない　　－例ここを参照－

■ 基本タグ

Indexに戻る

(6)

<H1> … 見出し1 … </H1>、
<H2> … 見出し2 … </H2> ......

文書の見出しを指定する
見出し用のタグはH1からH6まであり、この順に見出しの大きさが小さくなる

（オプション）

見出し文章の左寄せ（中央寄せ、右寄せ）
(9) と同様。参照のこと
<H1 ALIGN = "LEFT 又は (CENTER, RIGHT)">

　　－例ここを参照－

(7)

<BR>

行の終りを指定する　＝改行
　　－例ここを参照－

(8)

<P>

段落の終りを指定する　＝空白行
　<BR> と <P> の違いは例を参照
　<BR> は、連続で使用できるが、<P> は連続で何回使用しても1つ分しか適用されない
　　－例ここを参照－

(9)

<DIV ALIGN = "LEFT 又は (CENTER, RIGHT)"> … </DIV>

範囲内の文章を左寄せ（中央寄せ、右寄せ）で表示する

<P ALIGN = "LEFT 又は (CENTER, RIGHT)"> … </DIV>

でも同様。この場合、文の前後に1行空きができる

(10)

<HR （オプション）>

水平線を引く

（オプション）

太さを変える <HR SIZE="1 ～ 100"> デフォルトは2

長さを変える
<HR WIDTH="aa% 又はピクセル数">

位置を変える <HR ALIGN="LEFT 又は RIGHT">　　デフォルトはCENTER

色を付ける <HR COLOR="色指定">　　色指定については (12) 参照

平面的な線に変える <HR NOSHADE>

注意 ALIGNはWIDTHとの併用で使用できる（当然？）。COLORはNetscapeでは表示されません

　　－例ここを参照－

■ 文字の修飾　　－例ここを参照－

Indexに戻る

(11)

<FONT SIZE = "サイズ"> … </FONT>

"サイズ" は、1（最小）～ 7（最大）、もしくは相対的な +1 ～ +7、-1 ～ -7

　　－例ここを参照－

(12)

<FONT COLOR = "色指定"> … </FONT>

"色指定"は、色名の

AQUA	BLACK	BLUE	CYAN	FUCHSIA
GRAY	GREEN	LIME	MAGENTA	MAROON
NAVY	OLIVE	ORANGE	PINK	PURPLE
RED	SILVER	TEAL	WHITE	YELLOW

で行うか、RGB値（カラーコード）の「#RRGGBB」で行う

カラーコード

光の三原色である赤(R)、緑(G)、青(B)の配分を 00 ～ FF までの16進数で記述する。
一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になる
詳細については「Yahoo! JAPAN」「ホーム> コンピュータとインターネット> インターネット> WWW> ホームページ作成> 色彩の情報」を参照

　　－例ここを参照－

(13)

<FONT FACE = "フォント名"> … </FONT>
<FONT FACE = "フォント名1, フォント名2, フォント名3, ..."> … </FONT>

フォントを指定する
注意ただしこれは、インターネットエクスプローラとNetscape4.0以降でしか使えません。（他のブラウザでは無視される）
　　－例ここを参照－

(14)

<B> … </B>

太字 (Bold) で範囲内を表示する
　　－例ここを参照－

(15)

<I> … </I>

斜体 (Italic) で範囲内を表示する
　　－例ここを参照－

(16)

<TT> … </TT>

タイプライタ体（等幅フォント）で範囲内を表示する
　　－例ここを参照－

(17)

<U> … </U>

範囲内にアンダーラインを引く
　　－例ここを参照－

(18)

<S> … </S>

範囲内に取消線を引く
　　－例ここを参照－

(19)

<SUP> … </SUP>

上付き文字で範囲内を表示する
　　－例ここを参照－

(20)

<SUB> … </SUB>

下付き文字で範囲内を表示する
　　－例ここを参照－

(21)

<BLINK> … </BLINK>

範囲内の文字を点滅させる
注意ただしこれは、Netscapeでしか使えません
　　－例ここを参照－

(22)

<BIG> … </BIG>

範囲内の文字を大きくする。 <FONT SIZE=+1> … </FONT> と同じ
　　－例ここを参照－

(23)

<SMALL> … </SMALL>

範囲内の文字を小さくする。 <FONT SIZE=-1> … </FONT> と同じ

　　－例ここを参照－

■ 箇条書き

Indexに戻る

(24)

<UL> <LI> … <LI> … … </UL>

箇条書きで表示する。箇条書きのそれぞれの項目の開始は、タグ <LI> によって指定し、各項目の始めに、自動的にマークが付けられる

（オプション）

マークの形を変える <UL (LI) TYPE="DISK 又は CIRCLE, SQUARE"> デフォルトはDISK

注意ただしこれは、インターネットエクスプローラでは使えません

　　－例ここを参照－

(25)

<OL> <LI> … <LI> … … </OL>

箇条書きで表示する。箇条書きのそれぞれの項目の開始は、タグ <LI> によって指定し、各項目の始めには、自動的に番号が付けられる

（オプション）

番号の形式を変える（1,2,3...） <OL （LI） TYPE = "1">

番号の形式を変える（a,b,c...） <OL （LI） TYPE = "a">

番号の形式を変える（A,B,C...） <OL （LI） TYPE = "A">

番号の形式を変える（i,ii,iii...） <OL （LI） TYPE = "i">

番号の形式を変える（I,II,III...） <OL （LI） TYPE = "I">

始まりの番号を変える <OL START = " 開始番号 ">

注意ブラウザによって表示のされ方が異なります

　　－例ここを参照－

(26)

<DL> <DT> … <DD> … <DT> … <DD> … … </DL>

項目とそれに対する説明の形で表示する。（改行して右にインデント表示）
項目の開始は <DT> で、それに対する説明の開始は <DD>

　

（オプション）

<DD> による改行をなくす <DL COMPACT>

　　－例ここを参照－

■ 作表　　－例ここを参照－

Indexに戻る

(27)

<TABLE BORDER = " 罫線サイズ ">
<CAPTION ALIGN = "TOP 又は BOTTOM"> タイトル名 </ CAPTION >

<TR>

<TD> … </TD>	<TH> … </TH>	<TD> … </TD>	… …
<TD> … </TD>	<TD> … </TD>	<TH> … </TH>	… …
… …	… …	… …	… …

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

表の作成・表示をする
<TR> … </TR>　表の行を示す
<TD> … </TD>　表のデータを表示する
<TH> … </TH>　表の項目を表示する。<TD> … </TD>に比べ、太字･中央揃えで表示する

（オプション）

文章の折り返しをしない

NOWRAP

セルを横に結合する

COLSPAN = "結合セル数"

セルを縦に結合する

ROWSPAN = "結合セル数"

セルの幅や高さを変える

WIDTH = "サイズ" HEIGHT = "サイズ"
　　ピクセル数又はパーセント(%)で指定する

表や文字の配置（横位置）を変える

ALIGN = "LEFT 又は CENTER, RIGHT"

文字の配置（縦位置）を変える

VALIGN = "TOP 又は MIDDLE, BOTTOM"

表の外枠の太さを変える

BORDER = "（サイズ）"
　　初期値2 （BORDERのみ表示）
　　0 又は省略では全ての線が消える

内枠線の太さを変える

CELLSPACING = "サイズ" 0では線が消える

罫線と文字間を変える

CELLPADDING = "サイズ"

表の内側の色を変える

BGCOLOR = "色指定"

外枠線の色を変える

BORDERCOLOR = "色指定"

外枠線の暗い部分の色を変える

BORDERCOLORDARK = "色指定"

外枠線の明るい部分の色を変える

BORDERCOLORLIGHT = "色指定"

背景イメージを指定する（IEのみ）

BACKGROUND = "ファイル名"

外枠線の有無を指定する（IEのみ）

FRAME = "BOX 又は VOID, HSIDES, VSIDES, ABOVE, BELOW, LHS, RHS"

BOX	外枠全てを表示	VOID	表示しない
HSIDES	上下を表示	VSIDES	左右を表示
ABOVE	上のみを表示	BELOW	下のみを表示
LHS	左のみを表示	RHS	右のみを表示

内枠線の有無を指定する（IEのみ）

RULES = "ALL 又は NONE, ROWS, COLS, GROUPS"

ALL	内枠全てを表示	NONE	表示しない
ROWS	行を区切る横の線のみ表示	COLS	列を区切る縦の線のみ表示
GROUPS	グループ化タグの境界線のみ表示

注意ブラウザによって表示のされ方が異なります

■ 画像および背景

Indexに戻る

(28)

<IMG SRC = "画像ファイル名" （オプション）>

本文に画像ファイル（GIF形式かJPEG形式）を入れることを指示します
例えば、<IMG SRC="rainbow.gif"> とします
多くのWWWブラウザでは、GIF形式の画像ファイルが取り扱えるので、容量が小さいGIF形式画像用いる方が良いでしょう

（オプション）

画像のサイズを変える WIDTH = "横の長さ" HEIGHT = "縦の長さ"

画像の名前（説明文）を表示させる ALT = "説明文"

画像に外枠を付ける BORDER = "サイズ"

画像に対する文章の回り込みを指定 ALIGN = "LEFT 又は RIGHT"

前後の文字との位置を指定 ALIGN = "TOP 又は MIDDLE, BOTTOM, etc"

TOP 行の上辺を画像の上辺にあわせる

TEXTTOP 文字の上辺を画像の上辺にあわせる

MIDDLE 文字のベースラインを画像の中央にあわせる

ABSMIDDLE 行の中央を画像の中央にあわせる

BOTTOM 文字の下辺を画像の下辺にあわせる

ABSBOTTOM 行の下辺を画像の下辺にあわせる

BASELINE BOTTOMと同じ効果

(29)

<BODY BACKGROUND = "ファイル名">

背景に絵を載せる

(30)

<BODY BGCOLOR= "色指定">

背景の色を指定する

<BODY>タグではこの他に以下の指定が出来る

<BODY TEXT = "色指定">	本文の色	デフォルト黒
<BODY LINK = "色指定">	リンクの色	デフォルト青
<BODY VLINK = "色指定">	リンク済の色	デフォルト紫
<BODY ALINK = "色指定">	リンク中の色	デフォルト赤

■ リンク

Indexに戻る

(31)	<A HREF = "リンクするＵＲＬ"> … … </A>
		他のURLへリンクを張ることを指示します「 … … 」の部分がクリックされると、指定したURLに飛びます　例: <A HREF="http://www.riise.hiroshima-u.ac.jp/~wadashin/">物理科学科「情報活用演習」</A> リンク先が自分のHTMLファイルなら、完全なURL記述の代わりに省略形式 <A HREF="フォルダ名/ファイル名"> も使えます　例えば <A HREF="Report03.html"> は、現在表示されているページと同一のフォルダにあるファイル Report03.htmlへのリンクを指定します上層フォルダの場合フォルダ名は「 ../ 」とする
	<A HREF = " … … " TARGET = _BLANK> … … </A> のオプションでは、新しいウインドウを作成してリンク先を表示する
(32)	<A HREF = "リンクするＵＲＬ"> <IMG SRC = "画像ファイル名" （BORDER = 0）> </A>
		アイコンや画像をクリックするとリンクする
(33)	<A HREF = "MAILTO:e-mailアドレス"> … … </A>
		クリックするとメーラーが起動し、e-mailが送れる状態になる
(34)	<A NAME = "リンク先の名前"> </A> <A HREF = "#リンク先の名前"> … … </A>
		ページ内でリンクを張って、そこ（特定の場所）に移る　例情報活用演習ホームページでの例ホームページのソースファイル（HTMLファイル）では、"LINKS" と記した行の上に <A NAME = "links"> </A> と書いてあり、ホームページ最初の方にある "一気に「LINKS」に GO! " はソースファイルでは <A HREF = "#links"> 一気に「LINKS」に GO! </A> と記してある別のページの特定場所に移るには、 <A HREF = "ファイル名#リンク先の名前"> … … </A> 　例情報活用演習ホームページついでに<a href="Enquete02.html#last">「アンケート結果」の最後の設問</a>にひとっ飛び!

■ その他のタグ

Indexに戻る

(35)

<PRE> … </PRE>

タグで囲まれた文章を、そのまま（改行も含めて）表示させる

(36)

<XMP> … </XMP>

タグで囲まれた文章を、タグのソースを含めてそのまま（改行も含めて）表示させる
「<」や「>」を、「<」や「>」と入力しなくてもよい

(37)

<NOBR> … … </NOBR>

タグで囲まれた文章を、どんなに長くても改行せずに表示する。NO BReakの略

(38)

<WBR>

ブラウザのウインドウ幅よりも文章が長く、改行が必要な時に、このタグのある場所で改行する
改行する必要がなければ改行しない（(7)の<BR>は必ず改行する）。Word BReakの略
(37)の<NOBR>で改行が禁止されていても使用可能
改行するならここで改行した方が見栄えが良いという時に使うと良い

(39)

<MARQUEE> … </MARQUEE>

文章をスクロールさせます

（オプション）

右（左）方向に移動 DIRECTION = RIGHT 又は LEFT

動き方の指定 BEHAVIOR = "SCROLL 又は SLIDE, ALTERNATE"

SCROLL 一定方向（省略時のデフォルト）

SLIDE 画面の端まで行ったら止まる

ALTERNATE 画面の端まで行ったら方向を変える

注意ただしこれは、インターネットエクスプローラでの機能です

(40)

<BASEFONT （オプション）>

これ以降のフォントの基準サイズや、色、フォントの種類を指定
オプションは (11) ～ (13) と同様

(41)

<BASE HREF = " リンクするＵＲＬ " TARGET = "_blank etc">

あらかじめ、リンク先のURLの基準パスを指定する
その後のリンク<A HREF=" …">全てに適用される

<HEAD> </HEAD> 内に記す

　例 <BASE HREF=" http://home.hiroshima-u.ac.jp/wadasin/Info/ "> としておけば、
<A HREF="abcd.html" TARGET="_blank"> … </A>でInfoディレクトリ内のファイルabcd.htmlを読み込む

(42)

META内のオプション1 ：ページの自動更新

一定時間（秒）毎に再読込を行う

<HEAD> </HEAD> 内に、
<META HTTP-EQUIV = "REFRESH" CONTENT = " 時間（秒） ">

(43)

META内のオプション2 ：ページの自動ジャンプ

一定時間（秒）後にリンク先のページに移る

<HEAD> </HEAD> 内に、
<META HTTP-EQUIV = " REFRESH " CONTENT = " 時間（秒） ; URL = リンクするＵＲＬ ">

(44)

META内のオプション3 ：日本語文字コード（漢字コード）の指定

<HEAD> </HEAD> 内に、
<META HTTP-EQUIV = " CONTENT-TYPE" CONTENT = "TEXT/HTML;CHARSET= 日本語文字コード ">

　 SHIFT_JIS シフトJIS。一般のパソコンではほとんどこれ

　 EUC-JP UNIX系で多く使用されているもの

　 ISO-2022-JP 一般的なJIS

(45)

META内のオプション4 ：その他諸々

以下全て <HEAD> </HEAD> 内に記す

<META NAME = "AUTHOR" CONTENT = " … ">

このページの著者名を記す。ページ上には表示されない

<META NAME="KEYWORDS" CONTENT=" …, …, … ">

このページに関するキーワードを記す。検索ロボットがこの内容を調べたりする

<META NAME="DESCRIPTION" CONTENT=" … … ">

このページに関する解説を記す。検索ロボットがこの内容を調べたりする

(46)

BODY内のオプション：背景は固定したままで、文字のみをスクロールさせる

<BODY>タグ内で、
BGPROPERTIES = "fixed"

■ フレーム機能　　　作成中　　　プリント参照

Indexに戻る

■ ホームページを彩る素材集ホームページ

Indexに戻る

Internet上で、様々な絵や模様が提供されています

「Yahoo! JAPAN」の
「ホーム>コンピュータとインターネット>インターネット>WWW>ホームページ作成>グラフィックス、素材」を参照

ただし使用するときは、ホームページに書いてある注意事項等を良く読んで守ること

Last updated on Nov. 21 2002