JAZZ&ART

アクセスカウンタ

zoom RSS HTMLの全体構造

<<   作成日時 : 2008/08/23 00:15   >>

ブログ気持玉 0 / トラックバック 2 / コメント 1

画像

調べたいものからメール交換まで
インターネットは、私たちの生活の中に、深く浸透してきています。
玄人でなくても、ホームページビルダーを使い、気軽に個人がWEBサイトを作る時代です。
WEBサイトを記述しているのが、HTML&CSSです。
そのHTMLの全体構造として、文書宣言文、HTML要素、ヘッダ要素、ボディ要素、HTMLの骨組み、メタ情報、背景色、文字の色、イメージをバックに、見出し、ブロック属性について語りたいと思います。
※下記に記述している<>タグは本来は半角ですが、全角で打っております。

1、文書の冒頭部分
・DTD(文書型宣言)・・・文章を書く基準になるルールを宣言するもの
・HTML要素<html>ヘッダ、ボディ</html>・・・ヘッダ要素とボディ要素が格納される
・ヘッダ(<head>メタ情報</head>)・・・タイトルを示すtitle要素、追加情報としてmeta情報、関連性を示すlink要素を記述
・ボディ(<body>本文</body>)・・・body要素または、frameset要素になり、bodyの本文が記述される

2、タグサンプル
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitioal//EN”
http://www.w3.org/TR/html14/loose.dtd
<html>
<head>
<meta http-equiv=Content-Type”
Content=”text/html;
Charset=ISO-2022-JP”>
<title>タイトル</title>
</head>
<body>
<!-- 本文 –>
<h1>ヘッドコピー文章</h1>
<p>本文の内容</p>
</body>
</html>


※HTML4.01厳密型DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 //EN”
http://www.w3.org/TR/html14/strict.dtd
※HTML4.01移行型DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitioal//EN”
http://www.w3.org/TR/html14/loose.dtd
※HTML4.01設定型DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
http://www.w3.org/TR/html14/frameset.dtd

3、HTMLの骨組み
<html>
<head>
<title>タイトル</title>
</head>
<body>
本文
</dody>
</html>

4、メタ情報
<html>
<head>
<title>タイトル</title>
<meta name=”expires”Content=”2007.2.3”>
<meta name=”reply”Content=html@cis-z.co.jp>
<meta name=”build”Content=”2003.2.14”>
<meta name=”author”Content=”けい@ちゃん”ang=”jp”>

</head>
<body>
本文
</dody>
</html>

※content属性
Author・・・ページ製作者
Copyright・・・コピーライト
Reply-to・・・連絡先
Content-language・・・記述言語
Build・・・製作年月日
Expires・・・失効日

5、検索エンジン用
<html>
<head>
<title>タイトル</title>
<meta name=”description”
Content=”A”
Description of table element for web design”>
<meta name=”keywords”
Content=”HTML,HTML4.0,Web Design table tag”>

</head>
<body>
本文
</dody>
</html>

※robots属性値は、contentの属性値に指定する
Index・・・ページインデックスを許可
Noindex・・・ページインデックスを禁止
Follow・・・リンクを許可
Nofollow・・・リンクを禁止
All・・・index,followを許可
None・・・index,followを禁止

6、ページの背景色
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
本文
</dody>
</html>

7、文字の基本色・リンク色
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
Text=”#000000”
Link=”#0099FF”
Alink=”#FF6633”
Vlink=”#999900”
本文
</dody>
</html>

8、バックにイメージ
<html>
<head>
<title>タイトル</title>
</head>
<body background=”img/back_1.gif”>
本文
</dody>
</html>

9、バックにイメージ(固定)
<html>
<head>
<title>タイトル</title>
</head>
<body background=”img/back_1.gif”
Bgproperties=”fixed”>

本文
</dody>
</html>

10、ページの上、左に余白
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”
Text=” #0066CC”
Leftmargin=”100” topmargin=”30”>

本文
</dody>
</html>

11、ページに連絡先を入れる
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
本文
<address>
Doglife(E-mail
<a href=mailto:webmaster@xxx.com>webmaster@xxx.com</a>
</address>

</dody>
</html>

12、文章に見出しを入れる
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>

本文
</dody>
</html>

13、見出しの属性を
<html>
<head>
<title>イトル</title>
</head>
<body bgcolor=”#FF6633”>
<h2 align=center”>
見出し
</h2>

本文
</dody>
</html>

※属性
Left・・・左
Center・・・中央
Right・・・右

14、ブロック要素のグループ
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
<div align=”left”>本文
</div>

<dody>
</html>

※属性
Left・・・左
Center・・・中央
Right・・・右

15、インラインでグループに
<html>
<head>
<title>タイトル</title>
</head>
<body bgcolor=”#FF6633”>
<div align=”left”>
本文
<span style=”font-size:25pt;
Color:#FF3366”>
本文
</span>

</div>
</dody>
</html>

関連情報
http://www7b.biglobe.ne.jp/keishi_k/designing/index.html

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(2件)

タイトル (本文) ブログ名/日時
プラダ アウトレット
HTMLの全体構造 JAZZ&ART/ウェブリブログ ...続きを見る
プラダ アウトレット
2013/07/07 08:41
プラダ メンズ
HTMLの全体構造 JAZZ&ART/ウェブリブログ ...続きを見る
プラダ メンズ
2013/07/08 05:03

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
SGMLコメントは<!-- 本文 ?>ではなく<!-- 本文 -->です。

<meta name=”author”Content=”けい@ちゃん”ang=”jp”>

"lang" が "ang" になっています。また、日本語を表す言語コードは "jp" ではなく "ja" です。
黄金谷36
2010/04/11 09:37

コメントする help

ニックネーム
本 文
HTMLの全体構造 JAZZ&ART/BIGLOBEウェブリブログ
文字サイズ:       閉じる