TOPページ > カテゴリ別表示 : (x)html講座

本文開始▼

(x)html講座 アーカイブ

2006年11月05日

(X)HTML講座 step:002 (X)HTMLの簡単な作例

簡単な作例の前に、HTMLとXHTMLの違いについて説明します。

前回の記事に書いたように、両者とも文書構造を定義するという点では同じです。というか、基本的に構文はほとんど一緒です。

違いといえば、(XHTMLの場合は)<br>を始めとする対になっていないタグを<br />と書き換える必要があることと、タグは小文字で書く、閉じタグを省略してはいけないことぐらいです。細かい違いは他にもありますが、とりあえず はこのくらいで十分でしょう。
一言でいうと、XHTMLのほうが厳格な記述が求められるということです。

当ブログでは将来性を見据えてXHTMLを使った作例を紹介していきます。

それでは、作例を紹介しましょう。初めてということもあるので、簡単な例で。


<html>
<head>
     <title>HTMLサンプル</title>
</head>

<body>
     <h1>WEBデザインとは</h1>
     <p>印刷物デザインとはまた違ったデザインスキルが問われます。</p>
</body>
</html>


タグの簡単な説明。
まず<html>。これは、これからHTMLを書き始めるよと宣言するためのタグです。基本的にHTMLはこのタグで始まり、このタグで終わります。

このタグに限らず、(特別なタグを除き)全てのタグはこのように入れ子状になってなくてはなりません。

<head>はHTMLの補足情報などを指定するためのタグで、直接表示に影響は出ません。

<title>はページのタイトルを指定するためのタグで、その内容はブラウザの上部に表示されます。また、<title><head>内に記述します。

<body>は、画面に反映される部分でHTMLの肝となる部分です。基本的にこのタグ内にコーディングをしていくこととなります。

<h1>は見出しを表します。見出しはh1~h6まであり、h1は大見出し、h2はh1に対する小見出し…
というように、h1から順に使っていきます。

<p>は段落を表すためのタグです。

と、今回はここまで。次回は文書タイプの指定方法です。

(X)HTML講座 step:001 (X)HTMLとは?

HTMLとは文書構造を指定するための言語です。

通常のテキストファイルは、どの部分が見出しで、どこが本文か等、人間が見れば構造を理解することが可能ですが、コンピュータにとっては単なる文字のカタマリであって、どの部分が重要なのかは理解できません。
そのテキストをHTML化することでコンピュータが、文書に対して重み付けすることが可能になります。(ただし、正しくマークアップしなければ元も子もありません。)

HTMLには様々なバージョンがあり、2006年8月現在、HTMLは4.01、XHTMLは1.1(ブラウザの都合上1.0を薦めます)まで勧告されています。

HTML4.01やXHTMLでは、非推奨要素(タグ)、非推奨属性が多数存在していて、これらの要素・属性のほとんどは見栄えを指定するものです。
基本的にHTMLやXHTMLで見栄えを指定することは、好ましくないとされているのでそれらはスタイルシート(CSS)で指定します。

当サイトはXHTML1.0で作成されているので、XHTML1.0をベースに解説していきます。(HTML、XHTML両方とも記述の違いは微々たるものなので、XHTMLから学習しても全く問題ありません。)

今回はここまで。次回は簡単な作例を紹介します。(たぶん。

本文終了▲