HTMLのソースはエディタで記述します。Windowsであれば「メモ帳」で充分ですが、エディタなどを別途用意すると便利です。
<!-- 文章など -->
と記述されている部分はコメント文で、HTMLの命令とは無関係です。入れる必要もありませんが、入れておくと後々見返した糸岐やデバッグ時にとても有利です。ここでは赤字で示しますが、エディターによって緑色になる場合もあります。
<!-- index.html -->
<html> <!-- htmlの開始宣言 -->
<head> <!-- headの開始宣言-->
<title> <!-- titleの開始宣言-->
</title> <!-- titleの終了宣言 -->
</head> <!-- headの終了宣言 -->
<body> <!-- bodyの開始宣言 -->
</body> <!-- bodyの終了宣言 -->
</html> <!-- htmlの終了宣言 -->
<!-- index.html -->
htmlはタグ<命令>の集合体で、タグ<命令>で始まってタグ</命令>で終了します。上ではインデントをしていますが、tabキーなどで積極的にどれとどれが対なのかが一目瞭然状態にするとデバ次ぐが楽です。なお、基本的記述の厳格なルールはありません。htmlソースコード中のtabや改行は基本的に無視されます。
<!-- index.html -->
<!DOCTYPE html> <!-- DOCTYPE宣言 -->
<html lang="ja"> <!-- htmlを日本語宣言 -->
<head>
<title>森のお菓子屋さん</title> <!-- タイトル宣言 -->
<meta charset="utf-8"> <!-- 文字コードをユニコード宣言 -->
</head>
<body>
</body>
</html>
<!-- index.html -->
この最低限記述では何も表示されません。
ただし、ブラウザーのタグの部分に<title>で宣言した「森のお菓子屋さん」が表示されています。Titleは看板のような意味合いがありますから、省かないようにします。
次に背景に色を付けてみます。なお、本来はサーバー側にデータがあるわけですが、制作中はPCの任意のフォルダーなのでURLはファイルから始まっています。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
</head>
<body bgcolor = "#888888"> <!-- 背景をグレーに指定 -->
</body>
</html>
<!-- index.html -->
なお、このサイトに表示されている#と6桁の英数字を指定すればよいのですが、英文名でも設定可能です。
#888888は上のサイトにはサンプルはありませんでしたが、上の様なイメージとなります。もし、イラではなくてイラストや写真を配置したい場合は以下の様に記述します。
<body bgcolor = "#888888">
↓
<body background = "links/pat_01.gif"> <!-- 背景をpat_01.gifを指定 -->
処理結果はこんな感じです。画像は強制的にタイリングされることを理解する必要があります。
<body background = "links/cake_01.gif">
のようにタイリング用の画像以外を間違ってしまいすると、上野よ恵那結果になります。意図的な処理以外で要注意です。ここではグレーの背景に戻して次に進みます。なお今回は全てhtmlだけの処理としました。背景の色指定は最終的にcssで記述しますが、今回の完成ソースは以下の状態としました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
</head>
<body bgcolor = "#888888">
</body>
</html>
<!-- index.html -->
