メモ帳でWebページを作ろう!
 
1 はじめに
ホームページ作成ソフトを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとHTMLの基礎知識は必ず必要になります。ホームページの舞台裏といえるHTMLを知っておくことは決して無駄ではないと思います。この演習では、ホームページ作成ソフトを使わずに、メモ帳にHTMLタグを直接打ってホームページ作成する基本的な演習をします。
2 メモ帳を開いて基本タグを打つ
Windowsの「アクセサリ」にある「メモ帳」を起動します。半角で(図1)のように入力します。<HTML>のように< >でくくられたものをタグといいます。2つでペアになっていることが多く、その場合、一方は</ >となっています。
3 タイトル、本文を入れる
<TITLE>と</TITLE>の間にそのページタイトル、<BODY>と</BODY>の間には全角文字でそのページの本文を入力します。時間に余裕のある人はどんどん入力していきましょう。
4 ファイルを保存する 
タイトルと本文の入力ができましたらメモ帳を名前をつけて保存します。(ここでは「www」というフォルダを作りました)。保存するフォルダに移動し、ファイルの種類を「すべてのファイル」にして、ファイル名は任意の半角英数字、拡張子は「.htm」または「.html」にします。(例:profile.htm)またサーバーではファイル名の大文字小文字は区別されますので注意します。
5  ブラウザで確認する
作成したファイルをInternetExplorerやNetscapeNavigetorなどのブラウザで開き、表示させます。
ブラウザを起動し、「ファイル」〜「開く」で保存したHTMLファイルを開きます。
すると<TITLE>と</TITLE>の間に入れた文字はブラウザのタイトルバーの部分に、<BODY>と</BODY>の間にある文字はウィンドウ内に本文として表示されます。
6 ソースを表示し更新する
InternetExplorerのメニューバーの「表示」〜「ソース」をクリックするとメモ帳が表示されます。

メモ帳に内容を追加たら上書き保存しメモ帳を閉じます。

InternetExplorerの「更新」ボタンをクリックすると新しい内容が表示されます。





POINT
メモ帳でいくら改行をしてもブラウザ上では改行されません。本文に<BR>というタグを挿入するとブラウザ上でも改行されます。
7 基本タグ
基本的なタグ一覧を参考にして、さらにホームページを更新して見ましょう。
8 カラーコード
コンピュータで表示される色は赤・緑・青の3色をそれぞれ256段階の強さで表されます。ホームページ作成では機種に依存しないWebセーフカラー216色を使います。
例)白=#FFFFFF、赤=#FF0000、緑=#00FF00、青=#0000FF
主な色はカラーネームで表すこともできます。
例)赤=red、スカイブルー=skyblue
例)背景色をライトグリーンにする場合
<body bgcolor="lightgreen">
9 生徒の作品
パソコン教室内のLAN内で公開

indexへ / 次へ