 マリモさん
よし、まずはトマトくんのHPのサイト名を決めよう。これは私が決めるよりトマトくん自身が考えたものがいいよね。どんな名前にする？シンプルでもいいし、凝った名前でもいいけど、あんまり長くない方がいいよ。いつか[お気に入り]に登録してくれたりする場合長すぎると他のサイト名と一緒に登録してる場合、ファイル名が長いと調和がとれないかもしれないからね。
 トマトくん
『トマトの初めてのホームページ作り』ってどうですか？なんかそのままですけど、初めてのことなんで・・・・。
マリモさん
いいね。じゃあ、タイトルは決まり。HPの内容なんだけどどんなもの作りたい？
トマトくん
えーっと、まずは掲示板が欲しいな。チャットなんかも魅力あるし、BGMも流してみたい。あとは日記とか自己紹介かな。
マリモさん
トマトくん、チャレンジャーだね。掲示板やチャットはCGIなどの機能を利用しないとできないんだ。そのためにはまずはHTMLの基礎とHP作りの基礎ができてないと無理だよ。これらは後から追加したりできるからまずは自己紹介と日記だけ作ってみようか。BGMの流し方はそんなに難しくないんだけどね。
トマトくん
はい、なんかでしゃばりすぎたようで、すみません。HTMLもわからないのに掲示板の設置なんて早すぎますよね。
 太陽さん
初登場！掲示板はHP作成者はみんな作りたがるよね。最初は難しいからレンタル掲示板とかを利用しよう。あとで出てくるリンクのタグを覚えれば、レンタル業者から指定された掲示板やチャットのアドレスを指定すればOK。
マリモさん
じゃあ始めるよ。まずはホームページだ。いわゆるWebサイトのトップページだね。トマトくんのHPをインターネット上に公開した場合に皆に最初に表示されるページだ。メモ帳を起動してね。
トマトくん
| 無題 - メモ帳 |
| ファイル(F) 編集(E) 書式(O) 表示(V) ヘルプ(H) |
|
なんかピカ！と光ったような気がしましたけど・・・・。
起動しました。Wordみたいに重くなくていいですね。このまっさらなページが埋まっていくと思うとワクワクします。
マリモさん
今、太陽さんがでてきたよね。私も最初は自力でがんばってみたんだけど途中から太陽さんからHP作りを教わったんだ。何か困ったことがあったりすると登場してくれるとありがたいね。
ではHTMLを記述しはじめるよ。まずは<html> </html>と記述しよう。半角の文字を用いてね。大文字でもよいけど、小文字で記述していこう。2つのものはそれぞれ改行というか縦にすると後からの作業がしやすいよ。
トマトくん
はい、書き込みました。<html>と</html>では2つ目のやつにはスラッシュがはいってますね。たしか前項で扱ってた[閉じるタグ]ですよね。ここまでってやつですよね。
マリモさん
そうそう、ではどんどんいくよ。つぎは<html>と</html>の間に<head> </head>を記述してね。
そしたらさらに<head> </head>の間に<title> </title>を記述してね。
トマトくん
なんか知ってる英語の単語みたい。頭と項目か、htmlはなんの単語かわからないけど、書き込みしました。
マリモさん
htmlは〝HTMLですよ〟という表現だよ。headはHPの情報を書き込むところなんだ。字のごとくページ内の上部に位置するよ。じゃあ、最後は<body> </body>だ、これを</head> </html>の間に記述して。titleとbody間は後で記入するから適度に改行しておくといいよ。
トマトくん
| 無題 - メモ帳 |
| ファイル(F) 編集(E) 書式(O) 表示(V) ヘルプ(H) |
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
|
身体か、これはどんな意味があるのかな。HTMLの身体ってことでよいのかな。全部書き終わりました。改行もいれました。こんな感じになりましたよ。
マリモさん
うんいいね。これで基本骨格は終了だ。じゃ保存しよう。[ファイル]→[名前を付けて保存]だ。他の所はいじらないで名前だけ[index]としてね。これは約束なんだ。保存先はデスクトップ上にしてね。
トマトくん
はいデスクトップ上に保存しました。あれ・・・・HTMLファイルを作ったのに、拡張子が[txt]になってますけど、僕間違ってますか？
マリモさん
間違ってないよ。メモ帳で作ったファイルはそのまま保存すると標準でテキストファイルなんだ。だからあってるよ。後でHTMLファイルに変換するからね。保存できたらダブルクリックして開いてみて。
トマトくん
はい、そのままメモ帳が起動してさっき書いた内容がそのまま表示されました。
マリモさん
じゃあ、さっき決めたトマトくんのHPのサイト名を記入しよう。『トマトの初めてのホームページ作り』を、<title></title>タグの間のところに記入して。
トマトくん
はいできました。タイトルってページのタイトルだったんですね。なんとなくHTMLが理解できたような気がします。どんどん行きたいです。
マリモさん
それじゃ、実際にブラウザに表示される部分を書き始めようか。これは<body> </body>のところに書くよ。この<body> </body>内に書かれた内容がブラウザに表示されるんだ。さて、ここですぐに覚えられて頻繁に使うタグをひとつ教えよう。<br>だ。これは改行を意味するよ。HTMLではこの改行を指定してやらないと、長い文章になるといつまでもいつまでも文字が横に表示されて、ブラウザを横にスクロールするハメになってしまうよ。HPは基本的に縦スクロールして見るものだからね。
トマトくん
簡単なタグなんですね。でもスラッシュのついた[閉じるタグ]がありませんけどいいんですか？
マリモさん
うん。ほとんどのタグは[閉じるタグ]が必要だけどいらない場合のものもあるんだ。改行はそのひとつ。これで文章が書けるようになったよ。改行したいところでタグを使用すればよいよ。
トマトくん
| index.txt - メモ帳 |
| ファイル(F) 編集(E) 書式(O) 表示(V) ヘルプ(H) |
<html>
<head>
<title>
トマトの初めてのホームページ作り
</title>
</head>
<body>
2月25日<br>
今日からホームページ作りを始めました。<br>
講師は僕の先輩のマリモさんです。
</body>
</html>
|
はい、<body> </body>内に記述すればいいんですよね。こんな感じで
書きましたけどどうですか？
マリモさん
改行タグがちゃんと挿入できてるね。文章をただ単に改行してもタグが入ってないとブラウザに無視されちゃうからね。日付で改行できてるからいかにも日記という感じだ。そのまま日記のコンテンツとしてみよう。タイトルや内容の記入欄もOKだね。改行を2個連続で入れれば、1行分のスペースを空けることもできるし、<br>は使用頻度が高いよ。これならHP作成ソフトを使わなくたって手動でもラクに入力できるよね。
|
