| |
| [準備すること] |
| ホームページを作成するには |
| ウェブブラウザとテキストエディタの用意ができたら |
| 拡張子の表示をオンにする |
| HTML文書の作成 |
| 作成したHTML文書をブラウザで確かめる |
| |
| ホームページを作成するには |
|
・ウェブブラウザの用意
|
|
ウェブブラウザとは、Microsoft社のInternet ExplorerやNetscape社のNetscapeなどのことです。
|
・テキストエディタの用意
|
|
テキストエディタとは、Windowsの[メモ帳]やMacintoshの[Simple Text]などのことです。
僕の場合はフリーソフトウェアの[Tera Pad]を使用しています。これはVecterで無償で手に入ります。
|
| |
| ウェブブラウザとテキストエディタの用意ができたら |
|
・フォルダ(ディレクトリ)の作成
|
|
フォルダとは、これから作成するHTMLファイルを格納しておくところです。
それではまずフォルダを作成してみましょう！
1. C:ドライブでもD:ドライブでもマイドキュメントでもいいので作成する場所を決めましょう！
2. 作成する場所が決まったら、ウィンドウのツールバーから[ファイル]を選択してください。
3. [ファイル]を選択したら、[新規作成]→[フォルダ]を選択してください。
4. 何でもいいので好きな名前でフォルダを作成してください。
ただし、記号はドット(.)、ハイフン(-)、アンダーバー(_)ぐらいしか使用できません。
また、スペース(空白)も使用できません。
5. 新しくフォルダが作成されたら、それでOKです!!(^-^)v
これからは、このフォルダにHTML文書や画像を保存していきます。
もちろん、その他のフォルダ同様にサブフォルダを作ることも可能です。
(サブフォルダとは、フォルダの中にあるフォルダのことです。)
|
| |
| 拡張子の表示をオンにする |
|
・拡張子の表示をオンにするには
|
|
拡張子とは、ファイル名のあとの.txtや.htmlなどのことです。
拡張子の表示をオンにしていないと、メモ帳やTera Padで記述したテキストは全て.txtで保存されてしまいます。
では、この拡張子をオンにしてみましょう！
1. マイコンピュータを開いてください。
2. 開いたらウィンドウのツールバーから[ツール]を選択してください。
3. [ツール]を選択したら、[フォルダオプション]を選択して、[表示]タブを選択してください。
4. そしたら、「登録されているファイルの拡張子は表示しない」のチェックをはずしてください。
5. チェックをはずして[適用]→[OK]ボタンをクリックしたらOKです!!
これで拡張子が表示されるようになります。
|
▲ページトップへ |
| HTML文書の作成 |
|
・HTML文書を作成するには
|
|
それでは、試しに簡単なHTML文書を記述・作成していきましょう!!
1. まず、テキストエディタを開いてください。
2. 1行目に<html>と記述してください。
3. 2行目に<head>と記述してください。
4. 3行目に<title>HTMLテスト</title>と記述してください。
5. 4行目に</head>と記述してください。
6. 5行目に<body>と記述してください。
7. 6行目に本文と記述してください。
8. 7行目に</body>と記述してください。
9. 8行目に</html>と記述してください。
10. とりあえずここまで記述できたら、先ほど作成したフォルダに保存しましょう！
11. フォルダのときとは違い、ファイル名には拡張子をつけなければなりません。
ですので、とりあえずtest.htmlまたはtest.htmと保存してください。
12. これで簡単なHTML文書が完成しました。
|
| |
| 作成したHTML文書をブラウザで確かめる |
|
・作成したHTML文書をブラウザで確かめるには
|
|
それでは、今作成したHTML文書をブラウザで確かめましょう!!
1. まず、ブラウザを開いてください。
2. 開いたらウィンドウのツールバーから[ファイル]を選択してください。
3. [ファイル]を選択したら、[開く]を選択してください。。
4. 「ドキュメントやフォルダを開くには、インターネットアドレスまたはパスを入力してください。」と表示されるので、
[参照]ボタンをクリックして、今作成したファイル(test.html)を選択して[開く]ボタンをクリックしてください。
もしtest.htmlと表示されてなければ、[ファイルの種類]で全てのファイルかHTMLファイルを選択してください。
そしたら、test.htmlが表示されるようになります。
5. 選択したら、[OK]ボタンをクリックしてください。
6. そしたらこのように(サンプル)表示されると思います。
7. その画面が表示されたらOKです!!v(^-^)
ここまでできたなら、あとはタグや本文を記述するだけです。
といっても、どんなタグがあるのかわかりませんよね？それを、これから一緒に学んでいきましょう!!o(^o^)/
|
▲ページトップへ |
| |
