HTMLとCSSで構成される一般的なwebページの仕組みを学習します。
Webページはどのように作成されるのでしょうか。Webページは、インターネットブラウザーが一連の特殊な命令を読み出し、変換することで、表示されています。そのような命令は主に、HTMLとCSSの2つの言語で記述されます。
これらの言語の仕様つまりweb標準規格は、World Wide Web Consortium（W3C）で定義されます。ページをどのwebブラウザーでも正しく表示するには、web標準の理解が重要となります。Dreamweaverには最新のweb標準にもとづきwebページを構築できる機能が搭載されています。HTMLとCSSの組み合わせでwebページが構築される仕組みを説明します。
HTMLとは何か
Webページには、HTMLで定義された構造を基にしてコンテンツが表示されます。コンテンツにはテキスト、画像、リンクのほか、オーディオやビデオも含まれます。ほとんどのHTML要素は、ブラウザーに表示するコンテンツの種類を指定するための、開始タグ<要素名>と終了タグ</要素名>で記述されます。タグはページの構造を定義するため特定の順序で記述されます。以下は、よく用いられる3つのHTMLタグの例です。
- <h1> - 見出しのテキストを指定し、ページのタイトルによく使用されます
- <p> - 段落テキストを指定し、本文によく使用されます
- <img> - src（ソースファイル）で指定した画像を表示します
注意：例として示した図のHTMLでは、タグを明確に示すため、すべて大文字で表記していますが、実際にページを作成する際は、小文字でHTMLタグを記述することをお勧めします。
CSSとは何か
HTMLでwebページの基本構造を定義しましたが、スタイルやレイアウトは細かく設定されていません。最終的には、色やテキストの書式、画像を指定し、ページ内の各要素の配置を整えたいでしょう。そのような場合にHTMLと組み合わせて使用し、webページにスタイルやフォーマットを適用するための言語が CSSです。CSSを使用して、1つまたは複数のHTML要素に対して追加の命令（色の変更、中央揃えなど）を記述します。
CSSを使って3つのHTML要素の外観を変更する例を次に示します。
- h1 見出しのテキストを中央揃えにします
- p 段落のテキストを赤、太字、中央揃えにします
- img 画像を150x100ピクセルにサイズ変更します
