より詳しく説明します。
------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>簡単なHTML</title>
</head>
<body>
<p>Hello,world!!!</p>
</body>
</html>
------------------------------------
◆HTMLサンプルの説明
二行目からのhtml要素：
ルート要素です。
「HTMLタグで囲まれたデータがHTML文書」と思ってください。
想像するなら、
HTML要素開始タグが「ここからHTMLだよ」、
HTML要素終了タグが「ここまでHTMLだよ」という宣言だと思ってください。
この要素の外の「ただのテキスト」は、表示されないか、ブラウザが決めたサイズでテキスト表示されます。文章型宣言（!DOCTYPEうんちゃらかんちゃら）は「特別なテキスト」です。文章型宣言は表示されません。
この要素に、「画面に表示される文章」の情報（これをヘッダ情報という）や「画面に表示する本文や小見出しの情報」（ボディ情報という）が入ります。
三行目からのhead要素：
要素名から予想する通り、このhead要素は、ヘッダ情報を書く場所です。
このhead要素には、HTML文書の、基本的に表面には文章として表示されない情報を書き込みます。
webブラウザですぐ確認できるヘッダ情報と言えば、タイトルでしょう。四行目の解説にタイトルのことを書きます。
四行目のタイトル情報以外にも、拡張情報（Meta）やスタイル定義部（Style)、スクリプト定義部（Script）などをこの要素の中に書きます。
四行目 title要素：
ここも要素名から予想する通り、タイトルです。
ブラウザのタブなどに表示される部分です。これがないと、コンピュータから見て「名無し」のHTMLファイルになってしまいます。
「名無し」の場合、ブラウザによって、表示されるタイトルが変わってくると思います。
六行目からのbody要素：
ボディ情報です。ここら辺までは名前から意味が予想できますね。HTML5では「要素名から意味が連想しやすい要素」が多くなるみたいですが。
※HTML5の解説書をみてのパラめくりで思ったことです。
七行目のp要素：
ここが本文（段落）であることを示す要素です。gisi_spicaは、P要素が paragraph から名づけられていると思っています。詳しくは第五回で。
以上、要素の簡単な説明です。
………骨組み書いてないですね。
タイトルを裏切らせないためにも骨組みを見ていきましょう。
◆HTMLの枠組み
さんぷるで作ったhtml文章の枠組みは、木構造にするとこうなります。
- HTML要素
- HEAD要素
- META情報
- TITLE情報
- BODY要素
- P要素（本文）
- HEAD要素
※body要素が欠けると本文には何も表示されません。
なんか単純ですね。
この状態だと、単純な構造の代わりに単純なHTML文書しか書けないです。
次回はより複雑なHTML文書のデザインとそれを実現するための構造を考えるつもりです。
Yahoo!やGoogle等の有名なサイトのHTMLの木構造はとてもフクザツになりますよ。
※見てみたい方は、ブラウザ付属の開発者ツール（付属していないブラウザもあります）で見てみてください。
gisi_spicaの知っている範囲では、IE:[F12キー]または「ツール→開発者ツール」GoogleChrome：「ツール→デベロッパー ツール」となっていました。
HTML要素の中に、HEAD要素とBODY要素を作る！←これ重要
0 件のコメント:
コメントを投稿