制作の注意点用意するもの書いてみる宣言についてタグの挿入レイアウト・装飾

記事をレイアウトし、装飾する

HTMLでの装飾

前章までは、基本的な文章の書き方などのレクチャーでした。
しかし、そのままではとても味気ないものになります。
そこで文章など、文字を装飾していきます。
また、この記述を繰り返す事により、ページ全体の装飾が可能です。
*注意:これより解説する『HTMLでの装飾』・『HTMLでのレイアウト』はこの作成講座では
使わないので、参考程度に見て下さい。

ソース
<font size="4" color="#ff0000">フォントの色や太さ、サイズなどの変更が可能です。</font>
結果
フォントの色や太さ、サイズなどの変更が可能です。

HTMLでのレイアウト

HTMLでホームページのレイアウトを行う場合、多くはテーブルを使用していました。
全体をテーブルで囲い、その中のメニューもテーブル、各コンテンツもテーブル…テーブル、テーブル、テーブル…
実際のソースの例を記述したいのですが、膨大な量になってしまいますので割合させて頂きます。

ソース
<table width="200" border="1" bordercolor="#000000">
<tr>
<th colspan="3">タイトルなど</th>
</tr>
<tr>
<td>左メニュー</td><td>本文</td><td>サブメニュー</td>
</tr>
<tr>
<td colspan="3">フッター</td>
</tr>
</table>
結果
タイトルなど
左メニュー本文サブメニュー
フッター

実際に使うレイアウト・装飾の方法

上記2項目の手法は一昔前に使われていました。
しかし、すべての指令(色であったり、場所の指定であったり…)をHTMLで書いてしまうと、ソースが非常に混沌とし、人からもクローラーからも見易いとは言い難いものになってしまいます。
そこで、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報は別のファイルに記述し、それを読み込んで反映させる。という仕組みが標準化されました。
ここで、ホームページの作り方-HTML編-を終了します。
次回からは、レイアウト・装飾について『css(カスケーティングスタイルシート)』編となります。

新しい章へ⇒cssについて