１．準備(拡張子を表示しておこう)
ホームページを作成する際は、ファイルの拡張子（ファイル名の最後の .txt や .html などの文字）はいつでも確認できるようにしておきましょう。
Windowsを使用している場合は、[マイ コンピュータ]→[ツール(又は表示)]→[(フォルダ)オプション]→[表示] で、[登録されているファイルの拡張子は表示しない] のチェックボックスをオフにして、[OK]ボタンを押すと、全ての拡張子が表示されます。
２．HTMLを書いてみる
テキストエディタで、次のHTMLソース文を入力してみてださい。ただしタグの英数字はすべて半角文字です。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> ･･･① </head> <body> 初めてのホームページです。 ･･･② </body> </html> |
|
ホームページの練習 - Microsoft････これを、例えば test.html というファイル名で保存します。test の部分は8文字以内の 半角英数文字で任意ですが、拡張子の.html の部分は必ず .html か .htm にします。
・メモ帳の場合は[ファイル]→[名前を付けて保存]で目的のフォルダに、ファイル名を
test.html にして[保存]ボタンを押します。・ホームページで作成するHTML文や画像ファイルのファイル名は、8文字以内の半角の 英数文字で名前を付けるようにしましょう。記号等は使用しないようにするのが 無難です。
３．ブラウザで表示してみよう →
今作成した test.html をブラウザで表示してみましょう。test.htmlを ダブルクリックしてこれを開きます。開かない場合はＩＥの[ファイル(F)]→[開く(O)...]→ [参照(R)...]からtest.htmlファイルを指定して開きます。
②「初めてのホームページです。」という文が表示され、ブラウザのタイトルバーには ①「ホームページの練習」と表示されているはずです。これで、初めてのホームページは完成です。 ( 蛇足ですが ･･･ )
４．修正してみる
「初めてのホームページです。」という文を、メモ帳などのテキストエディタで、次のように 修正してみましょう。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> </head> <body> 私の初めてのホームページです。 ･･･③ </body> </html> |
|
修正したテキストを上書き保存してください。
次に、修正したファイルをブラウザで再表示します。つまりＩＥ の [表示(V)] メニューの [最新の情報に更新(R)] を実行すると、修正がブラウザ画面に反映されます。
５．改行してみる
「私の」と「初めてのホームページです」の間に改行を入れてみましょう。 改行を行うには次のように、<br>タグを追加して保存、再表示してください。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> </head> <body> 私の<br>初めてのホームページです。 </body> </html> |
|
６．太字にしてみる
今度は「初めてのホームページ」を太字にしてみましょう。次のように<b>～</b>で囲うと、太字で表示されます。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> </head> <body> 私の<b>初めてのホームページ</b>です。 </body> </html> |
|
７．色を変えてみよう
文字の色を赤にするには、次のように<font color="red">タグを使って、修正し、再表示します。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> </head> <body> 私の初めての<font color="red">ホームページ</font>です。 </body> </html> |
|
８．文字を大きくしてみよう
さらに、<font color="red" size="6">で、文字を大きくしてみます。 ブラウザで再表示すると、「ホームページ」が大きな赤文字で表示されます。(タグの詳しい説明は、こちら)
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページの練習</title> </head> <body> 私の<b>初めての<font color="red" size="6"> ホームページ</font></b>です。 </body> </html> |
|
９．実際のページを作る
 |
此処までくれば、あなたも立派な「ＨＴＭＬプログラマ」です。あとは、試行錯誤で、「ひたすらいろいろと作ってみる」ことが、 ＨＴＭＬ習得の秘訣です。
基本は出来ましたので、すぐに右のような実用的なトップページが作れるでしょう。
詳しくは、次の「ＨＴＭＬの初歩」や、 「最少の基本的なタグ」等で述べてありますので、勉強してみて下さい。
このページは、次のような概要のものです。ソースファイルと見較べてみて下さい。 ページのソースの見方は、「ソースTXTを表示する」を参考にして下さい。
① タイトルを「トップページサンプル」としました。
② 見出しを「基本的なトップページ」とし、最大の文字(size=7)にしました。
③ 「挨拶文字を流して」遊んでみました。
④ <a>タグで、画像をクリックするとジャンプするように記述しました。
⑤ 今度は、「ひよこ絵を流して」遊んでみました。
⑥ 「水平罫線」を入れてみました。
⑦ <a>タグで、トップページへの「リンク」を張りました。
⑧ プロバイダの提供するcgi機能「mailto」を使い、メールソフトを起動できるように設定しました。