●ＨＴＭＬ（Hyper Text Markup Language）とは・・・ブラウザに文書の構造や表示方法を指令する指令言語のようなもの
●ＨＴＭＬの基本構成
<HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> ここに表示したい内容を書く </BODY> </HTML> |
| <HTML>〜</HTML> | ＨＴＭＬファイルであると定義する |
| <HEAD>〜</HEAD> | ドキュメントに関する情報 |
| <TITLE>〜</TITLE> | ドキュメントの名前 お気に入りに登録された時のタイトル |
| <BODY>〜</BODY> | このタグに挟まれた部分に表示したい内容を書く |
●<BODY>の情報
・背景色を決める
（例）<BODY BGCOLOR="#FFFFFF">..........色の１６進数表示サンプルについてはこちらから
・背景に画像を使う
（例）<BODY BACKGROUND="kabe.gif">..........""で挟まれた部分にファイル名（画像がある場所へのURL）を指定する
・テキストの色を指定する
（例）<BODY TEXT="#FFFFFF">
・リンク設定した文字または枠の色を指定する
（例）<BODY LINK="#229955" VLINK="#999933" ALINK="#FF0000">
LINK......リンクがかかっている部分の色
VLINK.....すでに見たことのあるページへのリンクの色
ALINK.....リンクをクリックした時の色
・ページに余白を設定する
（例）<BODY LEFTMARGIN="60">..........上に設定する場合はTOPMARGIN
""で挟まれた部分は余白の数値をピクセル数で設定する
●文字の設定を一部分変える
| <FONT COLOR="#FF0000">〜</FONT> | 文字の色を一部分変える | くろあかあお | 色サンプルはこちらから |
| <FONT SIZE="5">〜</FONT> | 文字のサイズを一部分変える | サンプル | フォントのサイズは、１〜７の７段階で、標準は"3" |
| <FONT FACE="TT-JTCウインZ10">〜</FONT> | 文字の書体を一部分変える | 文字 | ""の情報は , で区切って複数指定することが出来る |
| <B>〜</B> | ボールド（太字）に変える | 太字に変える | |
| <I>〜</I> | イタリック（斜体）に変える | 斜体に変える | |
| <S>〜</S> | 抹消線をつける | ||
| <U>〜</U> | 下線をつける | 下線をつける | |
| <SUP>〜</SUP> | 上付き添字 | 上付き添字 | |
| <SUB>〜</SUB> | 下付き添字 | 下付き添字 | |
| <HR> | 区切り線を引く | ||
| <BLINK>〜</BLINK> | 文字を点滅させる | Netscape Navigatorでサポートしているタグ |
●段落を設定する
<P>〜</P>...............囲まれた部分は段落と認識され前後が一行空きになる
●改行を禁止する
<NOBR>〜</NOBR>
※<BR>〜</BR>...............強制改行する
●ヘッダのサイズを指定する
（例）<H5>〜</H5>................見出しであることを表すタグで、テキストは前後が一行あきになり、太字になる
H1＞H2＞H3＞H4＞H5＞H6
●箇条書きにする１（文頭にマークをつける）
<UL><LI>〜</UL>
| <UL> |
| <LI>ハンドルネーム |
| <LI>メールアドレス |
| <LI>ＵＲＬ |
| </UL> |
この結果はこちらから
・マークの変更
（例）<UL><LI TYPE="disk">〜</UL>..........""で挟まれた部分は、"disk"（黒丸）,"circle"（白丸）,"square"（四角）
●箇条書きにする２（文頭に番号をつける）
<OL><LI>〜</OL>
| <OL> |
| <LI>ハンドルネーム |
| <LI>メールアドレス |
| <LI>ＵＲＬ |
| </OL> |
この結果はこちらから
・番号の種類変更
（例）<OL><LI TYPE="A">〜</OL>
..........""で挟まれた部分は、"A"（英大文字）,"a"（英小文字）,"I"（ローマ数字大文字）,"i"（ローマ数字小文字）,"1"（算用数字）
●定義型リストの設定（タイトルに対するインデント）
<DL><DT>〜<DD>〜</DL>
| <DL> |
| <DT>ハンドルネーム |
| <DD>ハンドルネームのこと。チャット上でつかう名前。（なるべく一つにしましょう） |
| <DT>ＵＲＬ |
| <DD>ホームページアドレス。（ホームページの住所） |
| </DL> |
この結果はこちらから
●テキストの配置を決める
・段落の配置を決める
<P ALIGN="center">〜</P>
・一部分の配置を決める
<DIV ALIGN="center">〜</DIV>
※""の部分は left , center , right
（中央揃えの場合は <CENTER>〜</CENTER> でもＯＫ）
●マーキータグの設定（Internet Explorerでサポートしているタグ）
・マーキーの動きを設定
（例）<MARQUEE BEHAVIOR="scroll">〜</MARQUEE>..........動きの種類は"scroll","slide","alternate"の３つ
| "scroll" | .......... | |
| "slide" | .......... | |
| "alternate" | .......... |
・マーキーのスクロール方向の設定
（例）<MARQUEE DIRECTION="left">〜</MARQUEE>.............""をleft , rightで設定する
・マーキーの回数の設定
（例）<MARQUEE LOOP="5">〜</MARQUEE>...............""は繰り返す回数を設定する（無制限の場合は"infinite"）
・スクロール速度の設定
（例）<MARQUEE SCROLLAMOUNT="2">〜</MARQUEE>.............""は移動距離（ピクセル数で設定）
・マーキーのスクロール範囲や背景色の設定
（例）<MARQUEE BGCOLOR="#FFFF00" WIDTH="600" HEIGHT="50" HSPACE="20" VSPACE="20">〜</MARQUEE>
WIDTHは幅を指定（ピクセル数または％）
HEIGHTは高さを指定（ピクセル数または％）
HSPACEは左右に余白を設定
VSPACEは上下に余白を設定
●画像を表示する
（例）<IMG SRC="sample.gif">
●ハイパーリンクの設定
<A HREF="URL">〜</A>
.............URL の部分はクリックしたときに移動させたいページのURLを指定する
・リンク先のターゲット指定
<A HREF="URL" TARGET="_self">〜</A>
................TARGETは、"_self"（いま開いているウインドウに開く）"_blank"（新しいウインドウに開く）
・メール送信を設定する
<A HREF="mailto:メールアドレス">〜</A>
●表を作る
・表作成の基本タグ
<TABLE>〜</TABLE>..............これで挟まれた部分が表になる
<TD>〜</TD>...............これで挟まれることによって一つの表となる
<TR>〜</TR>...............<TD>〜</TD>の集まりをこれで挟むことで一行分とする
（例）<TR><TD>１</TD><TD>２</TD></TR>
<TH>〜</TH>...............見出しにしたい項目をこれで挟む（その部分は太字になる）使い方は<TD>〜</TD>と同じ
・表の枠を設定する
（例）<TABLE BORDER="5">〜</TABLE>...............BORDERは外枠、CELLSPACINGは内枠
・表に背景色をつける
（例）<TD BGCOLOR="#32CD32">〜</TD>
・表の背景に画像を表示する
<TABLE BACKGROUND="back.gif">〜</TABLE>
・２行以上にまたがる表.................サンプルはこちらから
（例）<TD ROUSPAN="3">〜</TD>
・２列以上にまたがる表.................サンプルはこちらから
（例）<TD COLSPAN="3">〜</TD>
※<TH>〜</TH>でも同じ
<HTML> <HEAD><TITLE>タイトル</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#229955" VLINK="#999933" ALINK="#FF0000"> <BR><BR> <CENTER><IMG SRC="title.gif" ></CENTER><BR> <HR SIZE="6" WIDTH="600" ALIGN="center"><BR><BR> <CENTER> <FONT FACE="TT-JTCウインZ10" SIZE="5" COLOR="#FF1493">プロフィール</FONT> </CENTER> <P> <CENTER> <TABLE BORDER="5" WIDTH=500 HEIGHT=300> <TR> <TD ROWSPAN="5" ALIGN="center"><IMG SRC="siro.jpg"></TD> <TD><B>シロクロ</B></TD> </TR> <TR> <TD><B>オス</B></TD></TR> <TR><TD><B>２才</B></TD></TR> <TR><TD><B>よろしく！</B></TD> </TR> </TABLE> </CENTER> </P> <BR> <CENTER> <A HREF="URL">リンク１</A> ┃ <A HREF="URL">リンク２</A> ┃ <A HREF="URL">リンク３</A> ┃ <A HREF="URL">リンク４</A> <HR SIZE="4" WIDTH="800" ALIGN="center" COLOR="#FFC0CB"> </CENTER><BR><BR> <CENTER> ご意見・ご感想は<A HREF="mailto:000@111.2222.33.jp"> 000@111.2222.33.jp </A>まで </CENTER> </BODY> </HTML> |