Web プログラマになる

:: be web programmer ::

３つの言語 その１　HTML

「Web プログラマ」といえば Perl や PHP などのプログラムを連想しますが、実は最も大切なのがこの HTML です。

Perl にしても、PHP であっても、最終的に出力するのは HTML です。
Web プログラマになるには、最低でも HTML を理解する必要があります。

HTML は単純です。
文章やデータを「タグ」と呼ばれる文字列で囲むだけです。

今あなたが見ているこのページを例にして説明しましょう。

このページは HTML の拡張版である「XHTML」で書かれていますが、タグの付け方は HTML とほとんど変わりません。

このページの一部は、次のようになっています。
（画像のタグは省略）

<h2>３つの言語 その１　HTML</h2>
<p>「Web プログラマ」といえば Perl や PHP などのプログラムを
連想しますが、実は最も大切なのがこの HTML です。</p>

<h2> や <p> がタグです。 HTML は基本的にこれらのタグを付けるだけですから、プログラミングよりずっと簡単です!

HTML では、タグを付けることで文書の構造を定義します。
<h2> タグは「見出し」、<p> タグは「段落」を表します。

ほとんどのタグには、開始タグと終了タグがあります。
終了タグには「 < 」の後にスラッシュ（ / ）が付きます。

この開始タグと終了タグによって、文章などを囲みます。

タグに囲まれた文字は、タグに設定されている色や大きさでブラウザに表示されます。（通常は、色や大きさをスタイルシートで設定します）

---

●HTML の構成(1)　要素

開始タグから終了タグまでを「要素」といいます。
タグに囲まれた文字も要素に含まれます。

≪要素の構成≫

要素     … <h2>３つの言語 その１　HTML</h2>
タグ     … <h2> 、</h2>
要素名   … h2
要素内容 … ３つの言語 その１　HTML

要素は、「ブロックレベル要素」と「インライン要素」の２つに分類されます。

ブロックレベル要素は、文章やデータのかたまり（ブロック）を表します。
見出しや段落、リスト、表などが当てはまります。

address	blockquote	center	div	dl
fieldset	form	h1	h2	h3
h4	h5	h6	hr	menu
noframes	noscript	ol	p	table
ul

ブロックレベル要素には、インライン要素を含めることができます。
div や table などは、他のブロックレベル要素も含めることができます。

ブロックレベル要素を一般的なブラウザで表示した場合、その要素の前後には改行が入ります。

---

インライン要素は、文章やデータの一部を表します。
リンクや強調、画像、入力欄などが当てはまります。

a	abbr	acronym	applet	b
basefont	big	br	button	cite
code	em	font	i	iframe
img	input	kbd	label	map
object	q	s	samp	script
select	small	span	strike	strong
sub	sup	textarea	tt	u
var

インライン要素の多くは、ブロックレベル要素を含めることができません。
他のインライン要素のみを含めることができます。

インライン要素のうち、それ自体が何かに置き換わる要素を「置き換え要素」といいます。

画像や入力欄などが置き換え要素になります。

applet	button	img	input	textarea
select	object

---

●HTML の構成(2)　属性

タグには、いろいろな「属性」を指定できます。

<img width="20" height="20" src="/img/parts02.gif">

<img> は、画像のタグです。
「 width="20" 」の部分が一つの属性になります。

≪属性の構成≫

属性   … width="20"
属性名 … width
属性値 … "20"

width は画像の幅、height は画像の高さ、src は画像ファイルを表しています。

このように、属性は要素に追加する情報です。
タグによって指定できる属性は異なります。

なお、スタイルシートで表現できる属性は、非推奨になっています。
align などの表示に影響する属性は、すでに使われなくなっています。

---

●小文字に統一

HTML では、要素名や属性名を大文字と小文字の両方で書くことができます。
大文字と小文字の区別はありません。

それに比べて、XHTML は大文字と小文字を区別し、要素名や属性名を小文字で書くように決められています。

例えば、次のような要素があった場合、

<h2>見出しのサンプル</H2>

HTML の場合は問題ありませんが、XHTML の場合は </h2> と <H2> がない状態になります。

今 HTML で書いていても、XHTML に書き直す日が来るかもしれません。
そのときに備えて、要素名や属性名は小文字で統一しましょう。

Next ３つの言語 その２　CSS

---