| テキストエディターで学ぶ簡単ホームページ |
ホームページは、パソコン標準仕様で簡単に作れます。ここではテキストエディターを利用した簡単HP制作方法をご紹介します。
|
| 準備するもの |
ホームページを作成するのに多くのものは要りません。OS標準の下記の2つのツールです。
-
ブラウザ
Internet Explorer などのブラウザを用意してください。以降の説明では、Internet
Explorer のことを IE と表記します。
-
テキストエディタ
Windows の場合はメモ帳（[スタート]→[プログラム]→[アクセサリ]→[メモ帳]）、Macintosh
の場合は SimpleText があれば充分です。
|
| 拡張子の表示出来るよう設定変更 |
ホームページの作成において、拡張子（ファイル名末尾の .txt や .htm などの文字）は非常に重要です。下記の手順で拡張子を表示するモードに変更しておくことを強く推奨します。
- フォルダーを開いた上体で、メニューのの [ツール]→[フォルダオプション] を実行してください。
- [表示] タブの中の [登録されている（ファイルの）拡張子は表示しない] をオフにして
[OK] ボタンを押してください。
|
| HPの場所を作ります。 |
まず、今から作成する各種ファイルを格納するためのフォルダを作成します。
- ますは、ディスクトップ上で結構です。
- ディスクトップ上で右クリックして、メニューの[新規作成]→[フォルダ] を実行してください。
- [新しいフォルダ] が作成されます。[ファイル]→[名前の変更] で、フォルダの名前を
hp に変更してください。
|
| HPデータの作成 |
メモ帳などのテキストエディタでHPデータの書き込み （HTML 文書）を作成します。
- [スタート]→[プログラム]→[アクセサリ]→[メモ帳] を起動してください。
- メモ帳に次の文章を入力してください。
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html> |
これを、ディスクトップのhp フォルダに test.htm という名前で保存します。
- メモ帳の [ファイル]→[名前を付けて保存] を実行してください。
- ファイル選択ダイアログが表示されるので、ディスクトップの]hpフォルダに移動してください。
- 「ファイルの種類」を「全てのファイル」に変更し[ファイル名] に test.htm
と入力し、[保存] ボタンを押してください。
「ファイルの種類」を「全てのファイル」にしないと、ファイル名が test.htm.txt
になってしまうしまいます。
|
| HPのをブラウザで表示してみましょう。 |
やることは唯一つ、test.htm をダブルクリックして開くだけ。
ブラウザーには
と表示されるはずです。
|
| HTML文書の解説 |
<html>・・・・・・・・・・・・・・・・・・・・・・・・・・・・これからHTML文書が始まりますの宣言
<head>・・・・・・・・・・・・・・・・・・・・・・・・・・・・HTML文書の前書き部分という宣言（ブラウザーに表示されない）
<title>ホームページの練習</title>・・・・ブラウザー上部に表示されているはずです。(ページの表題です）
</head>・・・・・・・・・・・・・・・・・・・・・・・・・・HTML文書の前書き部分終了の宣言
<body>・・・・・・・・・・・・・・・・・・・・・・・・・・・ここから表示部分が始まりますの宣言
初めてのホームページです。・・・・・・・・・表示内容です
</body>・・・・・・・・・・・・・・・・・・・・・・・・・・表示内容が終了しましたの宣言
</html>・・・・・・・・・・・・・・・・・・・・・・・・・・・HTML文書が終了しましたの宣言
|
| 一部修正してみましょう |
「初めてのホームページです。」という文章を修正してみましょう。test.htm
のファイルをダブルクリックするとブラウザが起動しますが、修正はブラウザではなく、[メモ帳]
などのテキストエディタで行います。test.htm のファイルをメモ帳で開くには次のような方法があります。
- メモ帳を起動しておいて、そこに test.htm ファイルをドラッグ＆ドロップする。
- メモ帳を起動し、[ファイル]→[開く] で [ファイルの種類] を [すべてのファイル]
または [すべて(*.*)]に変更して、test.htm ファイルを選択して開く。
メモ帳で test.htm を開くことができたら、次のようにして内容を修正してください。
- メモ帳で、文章を次のように修正する。
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
私の初めてのホームページです。
</body>
</html> |
- 修正したテキストを、[ファイル]→[上書き保存] で保存する。
- ブラウザで再度 test.htm を表示してみましょう。すでに表示したままだったら、ブラウザのメニューから
[表示]→[最新の情報に更新] を実行してください。
メモ帳で修正した内容が、ブラウザに反映されていれば OK です。
|
| 一部の修正・・改行をしてみよう |
「私の」と「初めてのホームページです」の間に改行を入れてみましょう。前項と同様にtest.htm
のファイルをメモ帳で開いて
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
私の
初めてのホームページです。
</body>
</html> |
としてみましょう。ところが、これをブラウザで再表示（[最新の情報に更新]）しても、うまく改行できていません。まったく改行されないか、ブラウザによっては、「私の
初めてのホームページです。」のように多少の隙間があくだけです。改行を行うには次のように修正して保存、再表示してください。
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
私の<br>初めてのホームページです。
</body>
</html> |
今度はちゃんと改行されるはずです。<br> は break の略で、改行しろという命令のようなものです。
|
| 一部の修正・・色を変えてみよう |
今度は「ホームページ」を赤色にしてみましょう。
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
私の初めての<font color=red>ホームページ</font>
</body>
</html> |
ブラウザで再表示すると、「ホームページ」が赤字で表示されます。
|
この様に、テキストエディタでHTML文書を作成していくだけで、HPは作成できていくのです。表示内容によりドンドン内容は複雑化されてきますが、原理原則は一緒です。正式には、HP制作ソフトを利用しますが、一度上記を実行していただき、HPの原点を味わってみてください。
|
[ ページトップ ] [アドバイス トップ]
|
|
|
