トップ基礎編
HTMLを書いてみよう

メモ帳やSimpleTextなどのテキストエディタを利用して、HTMLを書いてみましょう。 タグは、必ず半角英字で書きます。大文字で書いても小文字で書いてもかまいませんが、どちらかに統一しておくと、見やすく記述することができます。


HTMLドキュメントの基本的な構造は次の通りです。
<HTML> HTMLドキュメントの始まりを示します。

<HEAD> ヘッダ部の始まりを示します。

|  この間が「ヘッダ部」

</HEAD> ヘッダ部の終わりを示します。


<BODY> ボディー部の始まりを示します。

|  この間が「ボディー部」

</BODY> ボディー部の終わりを示します。

</HTML> HTMLドキュメントの終わりを示します。



具体的には、以下のようになります。
<HTML>

<HEAD>

<TITLE>ここにタイトルを書きます</TITLE>
※タイトルバーに表示されるページのタイトルです。
タイトルは、ブックマークやお気に入りの名前としても使われます。


</HEAD>

<BODY BGCOLOR="#色コード">
※BGCOLOR=背景色を指定します。色コードについては色見本を参照してください。

<CENTER> センタリング

文字装飾
<FONT SIZE=文字のサイズ(1〜7) COLOR="#色コード">
テキスト
※この部分に書かれた文字が影響を受けます。
</FONT>

<BR> 改行

画像の貼り込み
<IMG SRC="画像のURL" WIDTH=画像の横幅(ピクセル) HEIGHT=画像の縦幅(ピクセル)>

ハイパーリンク
<A HREF="リンク先">
テキストや画像
※<A>と</A>で囲まれた部分をクリックすると、ジャンプします。(アンカー)
</A>

</CENTER> センタリング終わり

</BODY>

</HTML>



これだけのタグを覚えるだけで、こんなページを作ることができます。
もっと詳しいタグは、基本のタグを参照してください。





WIDTH・HEIGHT (画像の表示サイズ)

<IMG>タグの中で、画像の表示サイズを必ず指定しましょう。ブラウザがサーバーに対して画像のサイズを問い合わせる必要がなくなるので、ページの読み込みが速くなります。

    <IMG SRC="title.gif" WIDTH=50 HEIGHT=23>



ALT (代替テキスト)

<IMG>タグの中に、「ALT」(代替テキスト)を書くことにより、画像を表示させない設定にしている人のために、画像の代わりにテキストを表示させることができます。

    <IMG SRC="title.gif" WIDTH=50 HEIGHT=23 ALT="タイトルロゴ">





基礎知識 | HTMLを書いてみよう | 基本のタグ | 画像フォーマット

トップ | 基礎編 | 応用編 | 実践編 | ステップアップ | 付録