TOP PAGE

BACK

INDEX

CONTENTS

基本

使い道

BBS

Link

Mail

 

 

ここでは、タグの基本について書いてあります。
詳しく知るには、専門書籍や他のサイトで調べる事をお勧めします。
専門書籍を選ぶ際は、各ブラウザの対応が書かれている、最近発行されたものを選ぶ
中を見てみて使いやすそう、必要な情報が書かれている、他は、好みかな?

HTMLは『Hyper Text Markup Language』の略です。
HTMLは、ブラウザによるWebページの文字や画像などの表示を制御するための
マークアップ言語です。『言語』と呼ぶと難しいイメージですが
いたってシンプルな仕組みになっていますので、短期間に覚える事ができます。
HTMLは『言語』よりブラウザに表示させるためのお約束と思ってください
また、工夫によって色々なことができますが、ブラウザに対する依存が有りますので
WEB上に公開する場合、可能な限りブラウザ、OSによる依存を無くすようにしましょう。

ブラウザへの表示を制御するためのマークアップ言語を『タグ』と呼びます。
タグの基本ルールは<HTML>(開始タグ)と</HTML>(終了タグ)のセットから成り立ち
大文字、小文字の区別はありませんが、基本的に、半角英数字で記述する必要があります。
ただし、タグ内の、大文字、小文字は、サーバーの環境により区別されるので統一するように心がけましょう。
<>に挟まれた文字列(HTML)を要素と呼び、開始タグには、属性と呼ぶ要素の名前や値を追加するものもあります。
属性は、<IMG src="画像名"><A href="URL">など要素によって指定が必須のものもあります。
属性に対して具体的な内容を指定する値は、属性により「文字列」「数値」「ピクセル」「パーセンテージ」「色」などがあります。
<font size="数値" face="フォントの名称" color="色">
要素属性
また、終了タグがない、省く事ができるタグも有ります。

  <BR>、<IMG><HR>終了タグは、ありません
<P>段落を区切る</P>終了タグを省く事ができます。

<BR>、は、ソース内で改行してもブラウザでは改行されませんので、
強制的に改行する場合に使います。
ただし、注意事項として、ブラウザで認識されないからと、タグの途中(特に単語の途中)で不用意に改行しないで下さい
タグとして認識されなくなります。
また、閲覧者の環境によっては、
意図しない場所
での
改行になる場合
が有ります。
この場合、非常に見難い表示になる場合があるので注意が必要だったり

さらに、複数のタグを使用する場合入れ子の状態でタグを配置します。これを「ネスティング」と呼びます。
例)太字太字+斜体太字
<B>太字<I>太字+斜体</I>太字</B>
これを、「<B>太字<I>太字+斜体</B>斜体</I>」な書き方は間違いです。

その他
<!--ここにHTMLのヴァージョン記述(間違った宣言だとブラウザにより正しく表示できなくなることがあるので、注意-->
<HTML>と↑などは特に記述しなくても問題はないようです。
<HTML>HTML文書である事を宣言します。</HTML>
全てのタグを囲みます。(ソースの始めと終り)
<HEAD>ヘッダー部分</HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="コンテンツタイプ; CHARSET=文字コード">
文字コードは、文字化けを少なくする為できるだけ入れたほうがいいかも
HEADには、TITLEや、各種スプリクトなどを記入します。<BODY>タグより先に解釈されます。
<TITLE>タイトル</TITLE>
ブラウザのタイルバーに表示され
お気に入り(ブックマーク)に登録すると<TITLE></TITLE>のタグ内が表示されます。
<BODY>ページ内容を記述する</BODY>
ページの中心となるコンテンツで実際にブラウザに表示される部分です。(BODYの外に書いてもしっかり表示されます。)
BODYタグには、bgcolor="背景の色" background="背景に画像を使う"
text="テキストの色"(FONT、スタイルシートで指定しない限りここで設定した色になる)
link="まだクリックしてないリンクの色"
alink="クリックしてから表示されるまでの色"
vlink="すでにブラウズしたリンクの色"
の属性、値を指定できます。
これらのタグは、ブラウザでの表示に絶対必要ではありません
テキストエディタの文をブラウザで開いても改行が無視されるだけで
普通に見ることができたりします。
色=#RRGGBB値または、色の名前 参照→カラーチャート

↓サンプルタグ↓
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>サンプル</TITLE>
</HEAD>
<!--shift_jisは、文字コード。文字コード変えたら変更-->
<BODY bgcolor="#660066" link="#cc0033" vlink="#66cccc" alink="#660066" text="#000000">
ページの本文<br>
表示されるかな??
</BODY>
</HTML>

<!--コメント‐‐>
コメントタグはブラウザ上に表示されません
ただし、スペースや-を多用すると無効になる場合があります。
コメントタグの使用法は、製作過程での注釈などに使ったり
1行目にHTMLのヴァージョン宣言に使用
HTML4.0の仕様を完全に満たしている場合↓
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"-->
使わない方がよいとされているタグも使用している場合↓
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"-->
使わない方がよいタグ、フレームを使っている場合↓
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"-->
<BODY>内の属性、値をスタイルシートで記述する場合
<STYLE type="text/css">
<!--
A:link {color:☆}☆=まだ訪れていないリンクの色
A:active {color:★}★=マウスでポイントした時の色
A:hover {color:■}■=クリックした時の色
A:visited {color:□}□=すでに訪れたリンクの色
-->
</STYLE>
スタイルシート未対応のブラウザではそのまま表示されるので
<!--コメントタグで囲む事-->

↓サンプルタグ↓
<STYLE type="text/css">
<!--
A:link {color:#ff0000}
A:active {color:#0000ff}
A:hover {color:#ffff00}
A:visited {color:#660066}
-->
</STYLE>
また、複数指定する場合;(セミコロン)で区切る
<STYLE type="text/css">
<!--
A:link {color : #ffff00; text-decoration : none; }
A:visited {color : #00ffff; text-decoration : none; }
A:active {color : #66ff66; text-decoration : none; }
A:hover {color : #ff0000; text-decoration : underline overline blink; background-color : #000000;}
-->
</STYLE>

ページ情報を付加する。

<META HTTP-EQUIV="★" content="★についての情報や値; CHARSET=文字コード">
<META NAME="★" CONTENT="★についての情報や値">
★=Content-Type、Author、Keywords、index Type、Reply-to、など
全て<HEAD>タグ内に記入します。

この他に知っていると便利なものは、以下のようなものです。
./同じフォルダ内にある。
../一つ前のフォルダ
../../二つ前のフォルダ
../../a/b/index.htmlは、
このフォルダから2個前のフォルダにあるaフォルダ内にあるbフォルダ内のindex.htmlを指定しています。
これを、相対パスと呼びます。
サーバー内の一番上のディレクトリを基準としたパスの指定での記述を絶対パスと呼びます。
画像などを一つのフォルダにまとめると整理が楽ですが
URL(http:)からの記述は、長くなりますので、
相対パスにするとソースがスッキリしたり、更新時に役に立ちます。

簡単な基本ルールはここまでで、よく使うタグをおぼえましょう。

<a href="URL">リンクが適応される部分</A>
リンク
上の記述は、こんなタグです。⇒†<a href="#link" target="_blank">リンク</A>
<A href="☆" target="リンクのターゲット">★</A>
☆=URL
★=テキスト、画像(この部分がリンクに適用される)
ターゲット=「_self」「_blank」ウインドウの名称

特定の場所に飛ぶ
リンク元の記述
<A href="☆#キーワード">★</A>
☆=違うファイルの場合URL#キーワード(../ファイル名.htmlなど)
リンク先の記述
<A name="キーワード">■</A>
■=画面最上部に表示されるテキスト、画像
キーワードは、日本語でも可能ですが、ブラウザによっては、
正常に動作しませんので半角英数字で記述した方が吉

メールをクライアントを起動する
<A href="mailto:メールアドレス">リンク適応部分</A>

画像を配置代伏文字
上の画像のタグは、こんな感じです⇒<IMG src="./フォルダの名前/画像の名前.拡張子" width="縦幅" height="横幅" alt="代伏文字">
<IMG src="★" alt="☆">
★=画像の場所と名前(URL)
☆=カーソルを合わせた時や、画像を表示できないブラウザで画像の変わりに表示される文字
画像のサイズ指定
<IMG src="◆" height="■" width="□" alt="☆">
◆=画像の場所、ファイル名
■=画像の高さ ピクセルか、ブラウザに対して%
□=画像の横幅 ピクセルか、ブラウザに対して%
☆=カーソルを合わせた時や、画像を表示できないブラウザで画像の変わりに表示される文字
画像の表示上の大きさが変わりますが、画像のサイズ(バイト)は同じです。
画像のサイズ(バイト)を変える場合画像編集のソフトなどを使って変更してください
GIFの特性を生かしheightや、widthを使うとカラフルな罫線を作成することができる。

フォント
<FONT face="□" size="■" color="◇">適応される文字</FONT>
□=フォントの名前、指定フォントがインストールされたない場合は、他のフォントで表示される
フォントはMS P明朝など、MSP明朝は全角でMSP明朝と書く
全角と半角、スペースが正確でない場合正しく表示されないことがあります。
正確に記述しないと正しく表示されません
■=フォントのサイズ1〜7かまたは、基本サイズからの+−です。
基本は、ほとんどの場合3で指定してあるようです。
フォントサイズ例:1234567890(基本サイズ)137(サイズ1〜7で指定)+1+3-1(基本から+-で指定)
◇=フォントの色#RRGGBB値または、色の名前
#RRGGBB値指定と色の名前の場合ブラウザでの色のズレがある場合があります。

カラーチャート
"#FF0000""red"
"#00FF00""lime"
"#0000FF""blue"
"#FFFF00""yellow"
"#FFFFFF""white"
"#000000""black"
理論的には、216×216×216=16777216色ある

<I>斜体</I>
<B>太字</B>
<U>アンダーライン</U>
<S>あっ間違えた。</S>
<TT>等幅フォント</TT>
<SUP>上付き</SUR>
<SUB>下付き</SUB>
<HR>罫線


↑<HR align="left" size="1" width="100">
align="?"(left、center、right)size="?"線の太さ(ピクセル)、width="?"線の長さ(ピクセル。ウインドーの%)
<H1>

見出し

</H1>見出しタグは、『6』が最小『1』が最大です。
間違っても<H?>タグは、文字サイズを指定するタグではありません。文章に対するタイトルのようなものです。
例)
<H1>○○のタイトル</H1>
<H2>第1章</H2>
<H3>第1節</H3>
第1節に対してのコメント
<H3>第2節</H3>
第2節に対してのコメント
<H2>第2章</H2>
(以下略)

これ以外にもデザインに便利なテーブルタグが有りますが、
自分で調べてくだされ。

上へ