第３章　HTMLファイルの基本知識

3-1.ＨＴＭＬやＣＳＳのソース・コードに慣れておく必要性

ホームページ・ビルダーやＤｒｅａｍｗｅａｖｅｒのようなホームページ作成ソフトを使えば一般的にはＷｏｒｄ感覚で視覚的にウェブ・ページの内容を入力出来て、ＨＴＭＬやＣＳＳのソース・コード知らなくてもよいと思われています。

然しながら、現実的には、ＨＴＭＬやＣＳＳのソース・コードを完全に覚えておかないまでも、ある程度の知識を持っていた方が、次のような理由でホームページの開発には有利であると言われています。

3-2. ＨＴＭＬファイルの構造

HTMLファイルは一番外側を<html>と</html>で囲み、その中がheadの部分とbodyの部分に分かれています。
ページに含まれる主要な内容はbodyの部分に書かれ、headの部分にはtitle(ページの表題)や外部スタイルシートへのリンクやJavaScriptの読み込みなどの命令などが含まれます。
そして重要なことは、このファイルを保存した場合はファイルの拡張子が「.html」になっていなければなりません。

<html>
　　<head>

　　　　この中に　<meta> <title> <link> <script> 等のＨＴＭＬタグが含まれる

　　</head>
　　<body>

　　　　この中に　<div>　<h1> <p> <ul> <li> <table> <img> 等のＨＴＭＬタグが含まれる

　　</body>
</html>

3-3. ＨＴＭＬタグの主なもの

差し当たり知っておいた方がよいHTMLタグは以下の様なものです。

種類 タグ 機能
見出し h1,h2,h3,h4.h5,h6  見出し或いは見出し的な枠 
段落  p  1段落の文字列或いは枠 
枠  div ページの枠組みや 部品の配置
画像  img  src="画像のアドレス" 画像の読み込み　
ハイパー・リンク  a href="アドレス" 新しいファイルの読み込み
表 table, th, td  表の枠、表の見出し、表のセル 
リスト  ul,ol,li  箇条書きの枠（番号なし、番号付 ）、セル
ファイル識別 html  HTMLファイルを囲み、ＨＴＭＬファイルの識別 
head識別  head  head部分を囲み、head部分の識別
本体識別   body  本体部分を囲み、本体部分の識別
表題 title  頁の表題で、画面のタイトル・バーに表示される
リンク  link  外部ＣＳＳファイルへのリンク 
スクリプト  script  外部ＪａｖａＳｃｒｉｐｔファイルの読み込み 

HTMLタグは必ず 　<p> 〜</p>　のようにオープニングとクロージングのタグが対になっている。

3-4. ＣＳＳ（スタイル・シート）の役割

ＨＴＭＬタグのフォント・サイズ、色、配置などの所謂書式は一昔前まではＨＴＭＬタグの属性としてそのタグ自身に中に記述されていました。
例えば、　<p>< font size="16px" color="green">文字列</p>のように。

然し、最近ではＨＴＭＬ仕様の標準化の波で、ＨＴＭＬはページの基本的な構造を規定するに留め、内容物の書式である見栄えに関してはＨＴＭＬと独立したスタイル・シート（ＣＳＳ）で規定するようになりました。その方がサイトの保守作業が遥かに効率的であるからです。

例えば、上の例ではＨＴＭＬは　<p>文字列</p>　に留め、<head>の中のＣＳＳの中で
　　　　　　　　　　　　　　　　　　　　p { font-size : 16px; color :green;}　のように規定するようになりました。

ＣＳＳに就いては後の何所かでもう少し詳しく勉強する機会があると思います。