Kamui's
ＨＴＭＬ超基本講座
TOP
目次
☆★☆★☆★☆★☆★☆

ＨＴＭＬ＆タグとは
ＨＴＭＬ基本構造
基本的なタグ
ファイル（パス）指定
色指定サンプル
ＢＭＰ・ＧＩＦ・ＪＰＧ

☆★☆★☆★☆★☆★☆








































ＨＴＭＬ＆タグとは
（目次へ）

ＨＴＭＬとは、
−−−−−−−−−−−−−−−−−−−−−−−−
「 Hypre Text Markup Language 」
（ハイパー テキスト マークアップ ランゲージ）
−−−−−−−−−−−−−−−−−−−−−−−−
の略です。
Ｗｅｂ（ウェブ）ページは、この基本言語で記述されています。

ＨＴＭＬ文書そのものは単純なテキストファイルで、
Ｔａｇ（タグ）と呼ばれる、簡単な文字列の集まりです。
このＨＴＭＬ形式で書かれた文書をコンピュータ上に、表示させる
アプリケーションが、Ｗｅｂブラウザということです。

Ｔａｇ（タグ）とは、文書の要素や、リンク関係等を表示させる為の
決まり事といった感じですか。

（目次へ）








































ＨＴＭＬ基本構造
（目次へ） 

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

　
　
←−−−−−−−−−
←−　　　　　　　　｜
　　｜タイトル要素　｜ヘッダー要素
←−　　　　　　　　｜
←−−−−−−−−−
　
←−
　　｜ボディ要素
←−
　
　
上記が、ＨＴＭＬ文書の基本構造です。
これだけで、とりあえず文書だけのページくらいは、書けます。

”タイトル”の部分は、ブラウザのタイトルバーに表示されます。
加えて、ブラウザで、「お気に入り」「ブックマーク」等に登録される時の、
タイトルになる為、内容がよく分かるタイトルにしましょう！

”ページ本文”の部分（ボディ要素）に、直接文章を書くか、様々なタグを
埋め込んでいきます。

（目次へ）








































基本的なタグ
（目次へ）

基本的なタグです。
オプション等、かなり省略している部分もありますが、とりあえず
これだけあれば、十分かな。
（ブラウザのバージョンによって、使用できないタグもあります。）
基本
<BODY BGCOLOR="#******">〜</BODY>
（ＢＧＣＯＬＯＲ）
******＝RRGGBB値（１６進数）
例）#ff0000＝赤
　　#00ff00＝緑
　　#0000ff＝青 		背景の色の設定。
設定して置いても、ブラウザ側の
設定で変えられてしまう．．．．
<COMMENT>〜</COMMENT>
 <!--〜--> 		コメント。
テキスト
(1)
<FONT COLOR="#******">〜</FONT>
(2)
<FONT SIZE=++">〜</FONT>
(1)+(2)
<FONT SIZE=++ COLOR="#******">〜</FONT>
（ＳＩＺＥ）
++＝1 〜 7　ｏｒ　-6 〜 +6
 テキストの色指定＆サイズ指定。
<CENTER>〜</CENTER> 画像＆テキストのセンタリング。
（中央揃え。）
<BLINK>〜</BLINK> 表示文字の点滅。
NNのみで、IEでは、効きません。
<B>〜</B> ボールド（太字）

<I>〜</I> イタリック（斜体）

<S>〜</S> 抹消線

<TT>〜</TT> タイプライター（等幅）

<U>〜</U> 下線

<SUP>〜</SUP> 上付添字

<SUB>〜</SUB> 下付添字 		フォントの物理形状の指定。
<H*>〜</H*>*＝1〜6

<H* ALIGN=+>〜</H*>
+＝left（左寄り）（デフォルト）
+＝center（中央）
+＝right（右寄り）

H1

H2

H3

H4
H5
H6
 見出し文字。
前後が自動的に１行アキになる。
<MARQUEE>〜</MAQUEE>

<MARQUEE DIRECTION=*>〜</MAQUEE>
*＝left（右から左へ）（デフォルト）
*＝right（左から右へ）

<MARQUEE BEHAVIOR=*>〜</MAQUEE>
*＝scroll（一定方向）（デフォルト）
*＝slide（画面の端で停止）
*＝alternate（左右を往復）

<MARQUEE BGCOLOR="#******>〜</MARQUEE>
背景色の指定 		テキストのスクロール。
IEのみで、NNでは、効きません。
段落・区切り
<HR>〜</HR>

<HR SIZE=*>〜</HR>
*＝ピクセル数（線の太さ）

<HR WIDTH=*>〜</HR>
*＝線の長さ（ピクセル数 or "??%"）

<HR NOSHADE>〜</HR>
影なしの黒線 		区切り線。
（横罫線）
<BR>
 		改行設定。
<P>〜</P>
 		段落設定。（改行後１行空ける。）
画像
<IMG SRC="*" ALT="+">
 *＝画像ファイル名
+＝画像の代わりに表示させるテキスト
　（画像が読めない場合に、表示されるテキスト）

<IMG SRC="*" WIDTH=+1 HEIGHT=+2>
 +1＝画像の横幅（ピクセル数 or "??%"）
+2＝画像の縦幅（ピクセル数 or "??%"）

<IMG SRC="*" ALIGN="+">
 （画像と文字列の並び）
+＝top（頭揃え）
+＝middle（中揃え）
+＝bottom（下揃え）（デフォルト）
（文字列の回り込み）
+＝left（左側に文字列が回り込む）
+＝right（右側に文字列が回り込む）

<IMG SRC="*" BORDER=+>
 +＝ピクセル数（画像の周りの境界線）
　（境界線を表示させたくない場合、BORDER=0）
 画像のページへの貼り込み。
<BODY BACKGROUND="*">〜</BODY>
 *＝画像ファイル名
 背景画像の指定。
ハイパーリンク
<A HREF="*">〜</A>
 *＝リンク先のファイル名 or ＵＲＬ
〜＝リンクをかけたい文字or画像

<A HREF="*" TARGET="+">〜</A>
 （リンク先の表示ウインドウの指定）
+＝_self（今のウインドウ）（デフォルト）
+＝_blank（新しいウインドウ）
 文字や画像へのリンク。
<A HREF="mailto:*">〜</A>
 *＝メールアドレス
 メール発信リンクの設定。
（ブラウズ側がメールソフトを
設定している必要があります。）
テーブル
基本的な２行２列のテーブルの例

<TABLE BORDER=2>

<TR>　（行要素−始）
<TD>1</TD>　（セル要素）
<TD>2</TD>　（セル要素）
</TR>　（行要素−終）

<TR>　（行要素−始）
<TD>3</TD>　（セル要素）
<TD>4</TD>　（セル要素）
</TR>　（行要素−終）

</TABLE>
12
34

テーブル（表）の定義。
複数行にわたるテーブルの例 （ROWSPAN=*）

<TABLE BORDER=2>

<TR>
<TD ROWSPAN=3>1</TD>
<TD>2</TD>
</TR>

<TR>
<TD>3</TD>
</TR>

<TR>
<TD>4</TD>
</TR>

</TABLE>
複数列にわたるテーブルの例 （COLSPAN=*）

<TABLE BORDER=2>

<TR>
<TD COLSPAN=3>1</TD>
</TR>

<TR>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>

</TABLE>
 		複数行にわたるテーブルの例
1 2
3
4







複数列にわたるテーブルの例
1
234
<TABLE ●>　<TR ■>　<TD ▲>＆<TH ▲>

●BORDER=*
*＝ピクセル数（外枠の枠線の太さ）
●CELLSPACING=*
*＝ピクセル数（内枠の枠線の太さ）
●ALIGN=*
*＝left（表全体を左端に）
*＝right（表全体を右端に）
■▲ALIGN=*
*＝left（セル内のテキストを左端に）
*＝center（セル内のテキストをセンターに）
*＝right（セル内のテキストを右端に）
■▲VALIGN=*
*＝top（セル内のテキストを頭揃えに）
*＝middle（セル内のテキストを中揃えに）
*＝bottom（セル内のテキストを下揃えに）
 		テーブルのオプション。
準備中 準備中

（目次へ）








































ファイル（パス）指定
（目次へ）

ＨＴＭＬファイルでは、様々なリンクを張れます。
リンク先を記述する際の注意点を書きます。

（相対パス）

＊リンク先ファイル（ＨＴＭＬファイル、画像ファイル等）が、作成中の
　ＨＴＭＬファイルと同じ階層（同じフォルダ）内にあれば、単純に
　ファイル名を指定する。
　例）<A HREF="abc.html">リンク先</A>

＊リンク先ファイル（ＨＴＭＬファイル、画像ファイル等）が、作成中の
　ＨＴＭＬファイルの下層（ＨＴＭＬファイルと同じ階層にあるフォルダの中）
　にファイルがある場合、「フォルダ名/ファイル名」で表す。
　例）<A HREF="gif/abc.gif">リンク先</A>

＊リンク先ファイル（ＨＴＭＬファイル、画像ファイル等）が、作成中の
　ＨＴＭＬファイルの上層（ＨＴＭＬファイルを含むフォルダと同じ階層）
　にファイルがある場合、「../ファイル名」で表す。
　例）<A HREF="../abc.jpg">リンク先</A>

＊リンク先ファイル（ＨＴＭＬファイル、画像ファイル等）が、作成中の
　ＨＴＭＬファイルの上層にある別のフォルダ内（階層的には同階層）
　にファイルがある場合、「../フォルダ名/ファイル名」で表す。
　例）<A HREF="../txt/abc.txt">リンク先</A>

（絶対パス）

＊全体からみたリンク先を表す場合は、以下の様に直接ＵＲＬを入れます。
　例）<A HREF="http://www.netwave.or.jp/~tsujita/index.htm">リンク先</A>

（目次へ）








































色指定サンプル
（目次へ）

Netscape Navigatorのバージョンによっては、枠内の色が
表示されていないようです m(_ _)m
この項目（色指定サンプル）を個別で表示
ディスプレイの色を構成する、
Ｒed（赤）、 Ｇreen（緑）、 Ｂlue（青）
それぞれを、１６進数を用いて２桁の数値で表記します。
（00、01、02、・・・・、fd、fe、ff）

＃ＲＲＧＧＢＢ

#ff0000＝赤
#00ff00＝緑
#0000ff＝青
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
#0000**
#00**00
#**0000
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
#00****
#****00
#**00**
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
#ffff**
#ff**ff
#**ffff
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
#ff****
#****ff
#**ff**
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
#******
Sample 16進数 色名 Sample 16進数 色名 Sample 16進数 色名
#00ffff aqua #f5f5dc beige #000000 black
#0000ff blue #a52a2a brown #d2691e chocolate
#ff7f50 coral #ffd700 gold #808080 gray
#008000 green #fffff0 ivory #e6e6fa lavender
#00ff00 lime #ff00ff magenta #b03060 maroon
#000080 navy #808000 olive #ffa500 orange
#ffc0cb pink #800080 purple #ff0000 red
#fa8072 salmon #2e8b57 seagreen #c0c0c0 silver
#87ceeb skyblue #ff6347 tomato #ee82ee violet
#ffffff white #ffff00 yellow #9acd32 yellowgreen

（目次へ）








































ＢＭＰ・ＧＩＦ・ＪＰＧ
（目次へ）

ＨＴＭＬとは直接、関係ないのですが、画像の形式について説明します。

Windows上でイラストやアイコン、写真データを保存する場合、ＢＭＰ形式が
よく使われますが、ホームページ上では、ＧＩＦ形式かＪＰＧ形式が、主に
使われています。ＢＭＰ形式は、サイズが大きい為、使われません。

以下に、各形式の簡単な特徴を示しますので、状況に応じて使い分けて下さい。
　 ＢＭＰ ＧＩＦ ＪＰＧ
最大色数 フルカラー ２５６色 フルカラー
データの圧縮 なし あり あり
圧縮による
画質の劣化 		− なし あり
（保存時の圧縮率
　により変化）
ファイルサイズ 大 イラストのように同じ色が
連続して続く画像では、
かなり小さくなる 		フルカラー画像では、
小さくなる率が高い
主な使用法 ・壁紙
・フルカラー
　画像の
　マスター 		・イラスト・アイコン画像
・アニメＧＩＦ
・透過ＧＩＦ
　（バックが透けるもの）
・インターレスＧＩＦ
　（画像を徐々に出す） 		・フルカラー写真
要するに、
・壁紙には、ＢＭＰ
・イラストは、ＧＩＦ
・写真は、ＪＰＧ
って感じですかね。

（目次へ）








































TOP