2015年5月6日水曜日

WEB 第７回 HTMLとCSSの仕組み--1.HTMLの基本


  • HTMLの始まりと今後
  • 読み方を間違いやすいHTMLタグやCSSタグ
  • ■HTMLの書き方
年月日出来事
1989年ティム・バーナーズ＝リーがHTMLを開発
1993～95年頃HTML 1.0～3.0
1994年10月W3C（World Wide Web Consortium）が発足
1996年12月CSS1勧告
1997年1月HTML3.2勧告
1997年12月HTML4.0勧告
1998年2月XML1.0勧告
1998年4月HTML 4.0仕様改訂
1998年5月CSS2勧告
1999年12月HTML4.01勧告
2000年1月XHTML1.0勧告
2000年12月XHTML Basic勧告
2001年5月XHTML1.1勧告
2004年2月XML1.1勧告



読み方を間違いやすいHTMLタグやCSSタグ

HTMLタグの読み方辞典

http://www.coolwebwindow.com/cssref/html-tag-ref.html


今さら聞けない！読みづらいCSSプロパティの正しい読み方
http://creativememomemo.com/css_property_readings/



以下HTMLクイックリファレンスより引用

■HTMLの書き方 


<開始タグ>～</終了タグ>で内容を囲む

HTMLタグの使い方は、とても簡単です。
<開始タグ>～</終了タグ>で内容を囲めば、 要素（element）の種類を指定することができます。 
ウェブページ内の各部分をどのような要素に割り当てるかによって、 タグの種類を使い分けます。
以下の例では、<p>タグを使用して<p>～</p>の部分が段落（paragraph）となるp要素であることを示しています。
<p>段落となります。</p>
↓↓↓
段落となります。


属性を指定する

HTMLでは、それぞれタグの種類ごとに指定できる属性の名称とその値が定義されています。 タグに属性を追加することで、要素のサイズや配置などをより詳細に指定できます。
以下の例では、<p>要素のalign属性に center という値を指定して、段落を中央揃えにするように指定しています。
<p align="center">段落となります。</p>
↓↓↓
段落となります。
属性を指定する際には、値を引用符で囲んで指定します。 使用する引用符は、半角のダブルクォーテーション（ " ） 、または、半角のシングルクォーテーション（ ´ ）のどちらでも構いません。
複数の属性を指定する場合には、以下の例のように半角スペースで区切って記述します。属性を記述する順序は問われません。
<p id="sample" align="center">段落となります。</p>


タグは入れ子にできる

タグは入れ子（ネスト）にすることができます。 例えば、<p>タグと<strong>タグを入れ子にして、 段落（paragraph）のなかの特定箇所だけを、強調（strong）することができます。タグの順番は前後しないように正しく配置します。
正：正しい入れ子
<p id="sample" align="center"><strong>段落</strong>となります。</p>

誤：間違った入れ子
<strong><p id="sample" align="center">段落</strong>となります。</p>


日本語の「」と同じと考えるとわかりやすい

○　父「母が「娘から「今日は何日？」と聞かれた」」

×　父「母が「娘から「今日は何日？と聞かれた」」」


要素内容を持たない空要素

HTMLの中には、<br>や<img>のように、要素内容を持たない空要素（empty element）と呼ばれるものもあります。 このような内容を持たない要素には終了タグはありません。
空要素の使用例
<p id="sample" align="center">段落となります。<br>
<img src="image.gif" alt="画像"> </p>


HTML文書の基本構造

HTML文書は、以下のように大きく3つの部分に分けられます。

HTMLのバージョンを宣言する部分

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

<html>


HTML文書のヘッダ部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ウェブページのタイトル</title>
</head>


HTML文書のボディ部分

<body>
<h1>ウェブページの見出し</h1>
<p>ウェブページを作成しました！</p>
</body>

</html>




■HTMLでのサイズ指定

HTMLで要素の表示サイズを指定する際には、その要素の幅と高さの長さで指定します。 HTMLで長さを指定する場合には、ピクセル数・パーセント（ % ）・長さ比率の3つの方法があります。

１．ピクセル数で指定する


整数値でピクセル数を指定します。

<table width="500">～</table>

ピクセル数とは、スクリーンの1ピクセルの長さを1とした単位です。 実際にモニタに表示されるサイズは、そのモニタの解像度に依存するので、どのモニタで表示しても実寸がきっちり揃うということではありません。

２．パーセント（ % ）で指定する


水平方向・垂直方向の表示可能な領域（長さ）に対するパーセント（ % ）で指定します。

<table width="50%">～</table>

３．長さ比率で指定する


アスタリスク（ * ）を使用して、長さ比率を指定します。 この指定方法は長さを複数に分割する場合などに用いますが、例えば、「*,3*」と記述した場合、長さを１：３の比率で分割します。

ピクセル数やパーセント（ % ）による長さ指定と長さ比率を同時にしている場合には、 ピクセル数やパーセント（ % ）で指定した分が先に確保され、 残りの長さがアスタリスク（ * ）で指定した比率で分割されます。

<frameset cols="200,3*,*">
<frame src="hidari.html">
<frame src="naka.html">
<frame src="migi.html">
</frameset>

長さ比率で指定する

上記の例の場合、フレームでウェブページを縦方向に3分割していますが、 まずhidari.htmlの領域が幅200ピクセル確保された上で、残りの領域についてnaka.htmlの領域とmigi.htmlの領域が３：１の長さ比率で分割されます。


コメントアウト


<!-- と --> で囲むことでコードを一旦非表示にすることができます。
現場ではコードを引き継いで使う人用や自分用の覚え書きに使われます。

<!--
p {color:blue;}
-->

時刻:
ラベル: