Lesson1
さぁ、それでは、ホームページを実際に作ってみましょう!!
”おいおい、いきなり作っちゃうの？”と思われる方がいるかもしれませんが、とりあえず全体の流れをつかむのが目的ですので、リラックスしていきましょう。
ここでは、実際にソースを作成し、どのように表示されるかを確認することで、基本操作を体で覚えてしまいます。
さぁ、それでは、はじめましょう。
 ソースを実際に作ってみましょう。
@ディレクトリの作成
まず、これから作成するソースを保存するフォルダを作成しましょう。
どこにつくっても問題はありませんが、分かりやすいところに作っておくと便利です。
Aエディタを開く
つぎに、ソースを書くためのエディタを開きましょう。エディタならば、なんでもＯＫです。
よくわからない方は、メモ帳を使いましょう。
・スタートメニューのなかから、「プログラム」→「アクセサリ」→「メモ帳」とクリックしてください。
Bファイルの保存
メモ帳を開いたら、ソースを書きこむ前に、いったんファイルを保存しておきましょう。はじめはこ
うしておいた方が間違えを防ぐことができます。
・メニューから「ファイル」→「名前をつけて保存」をクリックし、「lesson1.html」という名前で、さっき
作ったフォルダの中に保存しましょう。
※ＨＴＭＬ文書は、ファイルの最後に".html"という拡張子をつけることになっています。
".txt"という拡張子ですと、ホームページは表示されませんので注意してください。
Cソースを書く
さぁ、それではソースを書きましょう。
下のソースを、そっくりそのまま、うつしてみてください。（細かいことは、あとで説明します。）
・体で覚えるためにコピーするのではなく、実際にタイプすることをお勧めします。
<html>
<head>
<title>初ホームページ</title>
</head>
<body>
祝!!初めてのホームページ!!
</body>
</html> |
タイプし終えたら「ファイル」→「上書き保存」でファイルを上書き保存しておきましょう。
D動作確認をする
さぁ、とうとうソースが完成しました。
では、いま書いたソースが、ちゃんと、表示されるかを確認してみましょう。
さきほど作った、フォルダの中に「lesson1.html」というファイルがあると思うので、そのファイルを
ダブルクリックしてください。すると、真っ白な画面に『祝!!初めてのホームページ!!』と書かれた
ページが表示されたと思います。
なんともそっけないページですが、これがすべてのホームページの第１歩なのです。
Lesson2以降では、この中に色々なソースをくっつけていくだけなのですから…
それだけ、重要な基礎なのです。
<参考>ドキュメント構成について
ここでは、ソースの内容について簡単に触れておきます。ソースの内容については、今は、おおまかなイメージを持つといったぐらいの理解で充分です。ただ、<html>のように< >で囲まれたものを "タグ"と呼ぶということだけは、覚えておきましょう。
| ・<html>〜</html>： |
<html>タグは、この文書がＨＴＭＬで書かれていますよ。と宣言するタグで
文書の最初と最後につけます。 |
| ・<head>〜</head>： |
<head>タグはドキュメントの特徴を記述するタグで、例えばタイトルや
製作者の情報などを記述します。タイトル以外は画面には表示されません。 |
| ・<title>〜</title>： |
<title>タグに挟まれた部分がタイトルバーに表示されます。また、ここで
指定したタイトルが、お気に入りなどに表示される名前になります。
ただし、このタグは必ず<head>タグに挟まれた部分におく必要があります。 |
| ・<body>〜</body>： |
<body>タグに挟まれた内容が画面に表示される部分となります。
さきほどは、"祝!!初めてのホームページ!!"と書きこみましたが、
他の文字を書きこんで色々と試してみましょう。。 |
|
⇒⇒Lesson2
|