HTMLを書く

最初のファイルを創る
HTMLを書く
ブラウザで確認する
編集して更新する

最初のファイルを創る

さて、いよいよHTMLファイル(ホームページ)を創って行きます。先ずは先ほど創った websiteフォルダの中に index.html という名のHTMLファイルを創ります。

手順1

上で創った websiteフォルダを開きます。

手順2

フォルダ内の空いているところで右クリックします。

手順3

出てきたコンテキストメニューから [ 新規作成 ] にカーソル合わせます。

手順4

さらに広がったメニューから [ テキストドキュメント ] にカーソルを合わせてクリックします。

[ テキストドキュメント ] ではないかもしれませんが、 [ 新規テキスト ] などテキストファイルを創るものを選択してください。

手順5

ファイルの名前を index.html として enterキーを押します。

全て半角英数で記入してください。「ドット」は平仮名の「る」のキーにあります。半角です。全角にしないように気を付けてください。

半角と全角の切り替えは、お使いのパソコン (キーボード) によって若干操作が異なりますのでここでは詳しく説明できませんが、【半角/全角】【カタカナ・ひらがな・ローマ字】【Caps Lock 英数】などのキーを用いて変更することが出来ます。また、マウスでも（おそらくは画面右下に表示されているであろう）IMEツールバーを操作することによって変更することが出来ます。それぞれの方法はご使用のパソコンの取扱説明書などをご覧いただければ記載されていると思います。

Webサイトの作成では全角と半角が厳密に区別されます。半角で記述しなければならないところを全角で記述したりすると (逆もまた然り) 正常に動作してくれません (意図した動作を期待できません)。

enterキーを押したときに
このようなアラートが表示されると思いますが、これは前述したとおりに、ファイルの拡張子をむやみに変更したりしないための注意です。今回の場合は「.txt」を「.html」に変更した為に表示されましたが、[ OK ] をクリックして大丈夫です。

結果

index.html という名前のHTMLファイルが作成されました。

ファイル名を index.html にすることによってアイコンが上のような画像に変化します (パソコンの設定いかんによっては上記と同様のアイコンだとは限りません)。これはHTMLファイルであるという印でもあるのでアイコンが変更されない場合は何かが間違っています。もう一度よく確認してください。特に b15.gif(1007 byte) この画像のようになっている人は要注意です。準備のページの拡張子を表示させるという操作が正常に行われているか確認して、もう一度やり直してみてください。

説明で用いている画像のフォルダの表示は『アイコン』になっています。また、ツールバーは「ボタン名を表示しない」「小さいアイコン」になっています。この設定の違いによって若干の違いは生じているかもしれません。

index.html でなければダメですか？もっとカワイイ名前がいいなぁ。

はい。詳しい説明は後述しますが、ホームページで一番最初に表示させたいページのファイル名は index.html にしてください。そうしておいた方が後々面倒になりません。

HTMLを書く

それではHTMLを書いてもらいます。

手順1: index.html が入った websiteフォルダを開きます。
手順2: メモ帳を起動します。
手順3: index.html を起動したメモ帳の空白部分へドラッグ＆ドロップします。
ドラッグ＆ドロップはパソコンの基本的な操作です。マウスのボタンを押し、それを押下したままマウスを移動させる事をドラッグ(drag)といいます。そして任意の場所まで移動し、ボタンを離す事をドロップ(drop)といいます。この一連の動作をドラッグ＆ドロップ(drag and drop)といいます。
結果: メモ帳で index.html が編集できる状態になります。

上のようにタイトルバーが無題だったのが下のように index.html となっていれば合格です。

さて、これでやっと index.html を編集できる状態になりました。それでは実際にメモ帳に文字を記入していきます。基本的には自分の書きたい事を書くのですが、ある決められたルール内で書かなければなりません。これから進めて行く作業はそのルールを覚えて行く作業ということになります。説明は後から付け加えて行きますので、先ずは意味がわからなくとも、書かれてある通りに実行してみてくださ。

手順1

先ずはDTD宣言を記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
このファイルは html4.01 Transitional で書かれていますという宣言です。(※前項参照)

手順2

<html lang="ja">と記入します。
ここから html が始まりますという印です。lang="ja" は日本語コードで書かれていますという印です。

手順3

<head>と記入します。
ここから head(ヘッダ) が始まりますという印です。

手順4

文字コードを指定します。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
このファイルは Shift_JIS という文字コードで書かれていますという印です。

手順5

タイトルを記入します。
<title>ホームページ</title>
このページ(HTMLファイル)のタイトルです。

手順6

</head>と記入します。
ここで head(ヘッダ) が終わりますという印です。

手順7

<body>と記入します。
ここから body(内容) が始まりますという印です。

手順8

内容を記入します。
楽しく頑張ろう！
ここに書かれたことがブラウザに表示されます。～は段落を示すものなのですが、詳しくは後で説明します。

手順9

</body>と記入します。
ここで body(内容) が終わりますという印です。

手順10

</html>と記入する。
ここで html が終わりますという印です。

手順11

[ ファイル ] から [ 上書き保存 ] を選択してクリックします。

結果

最初のページが出来上がります。(コピーしても構いませんが、なるべくなら自分でタイプしましょう)

index.html - メモ帳

ファイル(F)
編集(E)
書式(O)
表示(V)
ヘルプ(H)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ホームページ</title>
</head>
<body>
<p>楽しく頑張ろう！</p>
</body>
</html>

<>は直接入力か半角英数で、Shiftを押しながら『ね』『る』（注：日本語入力でも入力されてしまいますが、全角ではだめですので半角にして下さい）
「!」は直接入力か半角英数で、Shiftを押しながら『ぬ』
「"」は直接入力か半角英数で、Shiftを押しながら『ふ』
「-」は直接入力か半角英数で、『ほ』
「/」は直接入力か半角英数で、『め』
「.」は直接入力か半角英数で、『る』
「=」は直接入力か半角英数で、Shiftを押しながら『ほ』
日本語は日本語で、アルファベットやその他の記号は半角英数で。（全角は不可です。大文字はＯＫですが、今後の事を考えて小文字にしてください）
改行は自由ですが、見やすいように改行しましょう。<と>の間で改行はしないようにしましょう。
半角スペースは無視されますが全角スペースは有効です。（注：余計な全角スペースがあると上手く表示されない事があります）

『<>』と『＜＞』、『""』と『””』、『/』と『／』は全く別物です。しつこく注意書きが出てきますが、最初のうちは全角と半角の違いにそれほど神経質になってください。全て半角にします。

日本語の箇所以外は全て半角英数字で記入してください。これから特に注意書きがない場合は全て半角英数字です。大文字と小文字はどちらでも構いませんが、XHTMLへの移行を視野に入れているので、全て小文字で記入するようにしてください。

記入した内容のそれぞれの意味は後ほど説明いたします。

ふぅ。やっと書き終わりました。結構大変ですね。

慣れないうちは時間がかかるかもしれませんが、その内スラスラと書けるようになりますから慣れましょう。記入する記号はそう多くはないはずです。ところで全角と半角などの間違いはありませんか？

はい。大丈夫です。

おや。自信満々ですね。記入に間違いが無いかを確認する為に、コピーして並べて見るのも良いかもしれません。

あっ！並べて見たら『=』が『＝』で全角でしたぁ。

ブラウザで確認する

それでは創った index.html を早速ブラウザで見てみましょう。

手順1

index.html が入った websiteフォルダを開きます。

手順2

index.html を開きます。色々な方法がありますので各自で好きな方法を選択してください。

index.html を選択した状態でツールバーの [ ファイル ] から [ 開く ] にカーソルを合わせクリックする。
index.html を右クリックし、 [ 開く ] にカーソルを合わせクリックする。
index.html をダブルクリックする。

パソコン設定により、微妙に操作が異なる事があります。

結果

index.html がブラウザに表示されます。

お気づきになられたと思いますが、実際にブラウザに表示されるのは<body>～</body>の間に記入された文字だけです。他の箇所 ( < と > に挟まれた箇所) は表示されません (も表示されていませんよね)。<title>～</title>に挟まれた記述は、上部の青い帯の部分(タイトルバー)に表示されます。

この時点ではブラウザのアドレス欄にはまだ『 file:///C:/なんたらかんたら/ログインユーザ名/デスクトップ/website/index.html 』などと書かれていて、自分や家族の名前などが (日本語も含んで) 表示されていますが、これはパソコン内でのファイルの位置を示したアドレスであって、公開する時にはちゃんとしたアドレス ( http://www.hayasoft.com/rara/index.html というような感じ ) になりますので安心してください。

えっ？これだけ？

どういう意味ですか！？自分で書いた文字をブラウザで表示出来るようになったのですから、もっと喜んでもらっても構わないのですが。

ワーイ、うれしいな（棒読み)

編集して更新する

それぞれの記入の意味が気になるところですが、それは次項で説明しますので、ここではもう一つ編集と更新の仕方を覚えてください。

手順1

index.html をメモ帳で開きます。(上記の「HTMLを書く」の手順1～手順3を参照)
開いたままの人はそのままで結構です。

手順2

『ホームページ』の箇所を『ララの世界』とし、『楽しく頑張ろう！』の箇所も『ララの世界』と書き換えます。

index.html - メモ帳

ファイル(F)
編集(E)
書式(O)
表示(V)
ヘルプ(H)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ララの世界</title>
</head>
<body>
<p>ララの世界</p>
</body>
</html>

手順3

上書き保存をします。(上記の「HTMLを書く」の手順11を参照)

結果

index.html が編集され、更新されました。ブラウザで確認しましょう。

ブラウザが開かれたままの人の場合

ツールバーの更新ボタンをクリックする。
「Ｆ5キー」を押す。

ブラウザを一旦閉じた人の場合

上記の「ブラウザで確認する」の手順2を参照して index.html を再び開く

このように更新されていれば合格です。正しく記述しているはずなのに、どうしても更新されないという方は「Ctrlキー」を押しながら「F5キー」を押してみてください。

おおっ！変わった。こうやって創っていくんですね。

そうです。このように何回、何十回、何百回と書き換えて自分好みのサイトを創っていくのです。

ところでこれはもう誰でも見る事が出来るのですか？

いえいえ。これはまだ自分のパソコンの中だけの話ですから、作っているパソコンのディスプレイを直接覘き見ない事には誰も見ることは出来ません。まだ公開をする為の手順を何もしていないのにパソコンの中身を誰でも見る事が出来る状態になったとしたら怖いですよね。ほら、アドレスも良く見るものとは違いますよね。詳しくは次の章の WWWのイメージと概略で説明しますが、この章の中では何をやっても外部に公開されているという事はありませんので気軽にどうぞ。