HTML4.0の基本

基本タグ

2009年8月5日
CATEGORY: HTML4.0の基本 TAGS: ,
SMARTのJavaScript講座が書籍になりました。 入門JavaScript フロントエンドエンジニアになるための基本と実践スキル amazonで購入

文書定義宣言 DTD

HTMLバージョン情報

HTMLは、文書の先頭でその文章がどのバージョンにあたるかなどの宣言、DTD(Document Type Definition)を明示します。HTML4.01仕様は、次の3つのDTDが規定されていて、各DTDは、サポートする要素が異なっています。

HTML 4.01厳密型DTD

一番厳しい仕様で、推奨されない要素や属性、フレーム設定用の要素・属性をサポートしません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01移行型DTD

厳密型よりもルールが緩くなっていて、推奨されない要素や属性をサポートします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 フレーム設定型DTD

移行型DTDでサポートするすべてに加えて、フレーム設定用の要素･属性をサポートします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

上記DTDの対応状況などは、要素索引を参照してください。

DTD (Document Type Definition)
文章型定義。 SGMLによる特定の型を持つドキュメントの記述方法です。

HTMLファイル形式であることを示すタグ： <HTML></HTML>

<HTML>タグは､ファイルの始めに置き、これ以後に書かれるテキストは、HTMLのファイルであることを示します。終了タグの</HTML>はファイルの一番最後に置きます。

たとえば、厳密型DTDのHTMLは下記のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
----ヘッダ、本文等がここに含まれます----
</html>

情報掲載タグ： <HEAD></HEAD>

<HEAD>要素は､タイトルやデフォルトURL、制作者の情報、日付など、ブラウザには表示されない情報を記入でます。

タイトルタグ： <TITLE></TITLE>

この<TITLE>で挟まれた文字列はブラウザのタイトルバーに表示されます。タイトルタグは必ず<HEAD></HEAD>タグ内に置きます。
TITLE要素の中に、他のタグを含めてはいけません。

<head>
   
<title>smartのホームページ</title>
</head>

ファイルの内容タグ： <BODY></BODY>

<BODY>タグに挟まれた部分が、ブラウザに表示されます。

<body>
ここに文章が入る。
</body>

廃止される予定の属性として、background、bgcolor、text、link、vlink、alinkがあります。これらの属性は、スタイルシートで設定しま しょう。

改行タグ： <BR>

line break：改行を行います。改行は行間に余分なスペースを入れずに強制的に改行を行います。

強力無比なパウンドでノゲイラを破り、第二代PRIDEヘビー級王者に輝いている。<BR />

段落タグ： <P>

Paragraph：段落を行います。行をPタグで挟むと、段落になります。

<P>04年のPRIDE GPではコールマン、ランデルマン、小川を軽く一蹴</P>

区切り線： <HR>

Horizontal Rule：ブロックの区切りの線を表示したい場合、<HR>タグを用います。<HR>タグは横線の他に改行を行います。

<p>・・・・圧倒的な強さを見せつけ、因縁にケリをつけた。</p>
<hr>
<p>そして05年8月、『PRIDE GP 2005 決勝戦』でついにミルコと対戦。</p>

出力結果は以下のとおりです。

・・・・圧倒的な強さを見せつけ、因縁にケリをつけた。

そして05年8月、『PRIDE GP 2005 決勝戦』でついにミルコと対戦。

プレフォーマットタグ： <PRE>

<PRE>と</PRE>に挟まれた文字列は、スペース、改行、行間などがそのままブラウザ上で表示されます。 文字の折り返しも行われません。

<pre>
{----------------------------
Name:	   
StripBlanks function
Delaraton:   StripBlanks(S:String; D:String)
Unit:	    String
Description: 文字列から指定文字を削除する
-----------------------------}
function StripBlanks(S:String; D:String):string;
var
   i:Integer;
begin
	 i := Length(S);
		  while S[i] = D do begin
			  
Delete(S,i,1);
			  
Dec(i);
		  end;
	 StripBlanks := S;
end;
</pre>

この出力結果は、

{---------------------------
Name:        StripBlanks function
Delaraton:   StripBlanks(S:String; D:String)
Unit:        String
Description: 文字列から指定文字を削除する
----------------------------}
function StripBlanks(S:String; D:String):string;
var
i:Integer;
begin
i := Length(S);
while S[i] = D do begin
Delete(S,i,1);
Dec(i);
end;
StripBlanks := S;
end;

のようになります。

段落を整列させるタグ： <DIV>

DIV要素は、id属性やclass属性とともに使用して、指定した内容をブロックレベルに設定します。一般的なブラウザでは、このタグ要素の前後が改行されます。 

<div>
    ・・・その後は主導権を渡さず判定勝ちを収め、最強の挑戦者を退けた。<bt />
    正真正銘の「60億分の1」の男。
</div>

DIV要素はスタイルシートを導入するに当たって、非常に重要なタグです。

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

CONTACT US

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。