• home
  • XHTML
  • css
  • 要素
  • その他

Xhtml

  • はじめに
  • XHTML3種類
  • metaの説明1
  • metaの説明2
  • Strict
  • Tranditional
  • Frameset
link
link

ホームページ基礎

これからホームページの制作に関する事について、少しずつ簡単にまとめていきたいと思います。尚、このホームページでは自身同様、XHTMLでのホームページ制作について書いています。（XHTMLとは、マークアップ言語HTML4.0をXMLとして再定義されたもので、Strict、Transitional、Framesetの3種類のDTD（文書型定義）があります）

とりあえず詳しい事はわからなくてもホームページは制作できます。フリー・シェアのどちらのソフトでも起動した時点で基本的な文書は出来ています（個人的にはKompozerというフリーソフトを使っています）。あとはそれに応じてメタタグの付け足しと、内容の制作（<body>~</body>が実際ブラウザに表示される内容）です。とりあえずメタタグの簡単な説明とXHTMの基本的な文書を書いておきます。

補足ですが、拡張子は.htmlです。

XHTML3種類について

XHTMLについての簡単な説明をします。

1.Strict

XHTML1.0の使用を厳格、忠実に守らなければならない文書型です。

2.Transitional

HTML4.01との相互性（ある程度の要素が使用可能）が考慮された文書型です。

3.Frameset

フレームを使ったXHTMLを制作するときに使う文書型です。

meta1

http-equiv属性についてです。

コンテンツの言語
下の例の"ja"は文書がjaで記述されてることを示します。
<meta http-equiv="content-Language" content="ja" />

スタイルシートの種類
下の例の"text/css"はスタイルシートがcssで記述されてることを示します。
<meta http-equiv="content-style-type" content="text/css" />

スクリプト言語の種類
下の例の"text/javascript"はスクリプトがjavascriptで記述されてることを示します。
<meta http-equiv="content-script-type"content="text/javascript" />

文字コード
下の例の"コンテンツと文字コード"です。コンテンツはtext/htmlで、文字コードがutf-8で記述されてることを示します。
<meta http-equiv="content-type"content="text/html;charset=utf-8" />

meta2

全てではないですがname属性についてです。

キーワード
文書関連する単語のキーワードをカンマで区切って記述
<meta name="keywords"content="キーワード1,キーワード2,キーワード3" />

概要
文章の内容に対しての概要を記述
<meta name="discription"content="コンテンツの概要" />

作者情報
文書の作者についての情報
<meta name="author"content="名前" />

著作権情報
文書の著作権についての情報
<meta name="copyright"content="&著作権" />

strict

XHTML-Strictの基本的な文書です。必要に応じてmetaを付け加えてください。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-Language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<title>ホームページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="discription" content="コンテンツの概要" />
<meta name="author" content="名前" />
<meta name="copyright" content="著作権" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
</body>
</html>

コピペで使えます。（拡張子は.htmlにします。）

Transitional

XHTML-Transitionalの基本です。必要に応じてmetaを付け加えてください。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-Language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<title>ホームページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="discription" content="コンテンツの概要" />
<meta name="author" content="名前" />
<meta name="copyright" content="著作権" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
</body>
</html>

コピペで使えます。（拡張子は.htmlにします。）

Frameset

XHTML-Framesetの基本です。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページタイトル</title>
</head>
<frameset cols="20%,80%" />
上記は縦割り。横割りのときは　<frameset rows="20%,80%" />
<frame src="ファイル名.html" name="left" noresize　 scrolling="no" />
<frame src="ファイル名.html" name="right" noresize />
<noframe>
フレーム機能が無いブラウザに対して内容の記述
</noframe>
</html>

コピペで使えます。（拡張子は.htmlにします。）