とにかく作ってみよう

とほほのWWW入門 > ホームページ作成入門 > とにかく作ってみよう
2000年6月12日版
何も知らない状態からホームページを作るまでの手順を紹介します。わからない用語などがあれば、「とほほのWWW用語集」なども参照してください。

ホームページを作成するには

ホームページを作成するには次のような方法があります。

(1)知人やホームページ作成業者に依頼する: 有料でホームページ作成を代行する多くの業者があります。下手に自作するよりもプロに依頼したほうが安上がりな場合もあります。ただし、作成後の保守や改版についての取り決めを明確にしておくことをお勧めします。

(2)ホームページ作成ソフトで作成する: ホームページを作成支援するソフトが各社から発売されています。フリーのものやシェアウェアなどもあります。「とほほの厳選ツール集(HTMLエディタ編)」を参照してください。

(3)テキストエディタで作成する: ホームページはHTMLという言語を用いて記述しますが、パソコンでワープロを使ったことがある人ならすぐに覚えられると思います。

ここでは、最後のHTMLを理解してテキストエディタで作成するための手順を紹介します。

ホームページを作成するための準備

ホームページを作成するのに多くのものは要りません。ちょっとした勇気と下記の2つのツールです。

(1)ブラウザ: Internet Explorerや、Netscape Navigatorなどのブラウザを用意してください。以降の説明では、Internet Explorer 4.0のことをIE40、Netscape Navigator 4.0のことをNN40と表記します。

(2)テキストエディタ: Windowsの場合はメモ帳([スタート]→[プログラム]→[アクセサリ]→[メモ帳])、Macintoshの場合はSimpleTextがあれば充分です。

これ以降の説明では、「Windows 95」で「Internet Explorer 4.0」と「メモ帳」を用いた例を示します。Macintoshの場合や、Netscape Navigatorの場合でも、メニューの名前が若干異なる(例えば[上書き保存]が単なる[保存]であるなど)場合がありますが、適切に読み替えてください。

まず、フォルダを作ろう

まず、今から作成するHTMLファイルを格納するためのフォルダを作成してください。

Windows 95の場合は[スタート]→[プログラム]→[エクスプローラ]を起動し、[ファイル]メニューの[新規作成]→[フォルダ]で新しいフォルダを作成し、[ファイル]-[名前の変更]でフォルダ名を変更することで、目的のフォルダを作成することができます。

Macintoshの場合は[ファイル]→[新規フォルダ]で作成可能です。

私の場合はWindows 95で、C:\HomePage というフォルダを作成しています。これは、[デスクトップ]の中の[マイコンピュータ]の中の[なんとか(C:)]というドライブの中の[HomePage]という名前のフォルダを意味します。

拡張子を表示しておこう

Windowsを使用している場合は、[マイ コンピュータ]→[表示]→[(フォルダ)オプション]→[表示] で、[登録されているファイルの拡張子は表示しない] のチェックボックスをオフにして、[OK]ボタンを押しておいてください。

これにより、ファイルの拡張子(ファイル名の最後の .txt や .htm などの文字)が表示されるようになります。ホームページを作成する上で、ファイルの拡張子は非常に重要なので、こうして、いつでも確認できるようにしておきましょう。

テキストエディタでHTMLを書いてみよう

テキストエディタに次の文章を入力してください。英字はすべて半角文字で入力してください。

<HTML>
<HEAD>
<TITLE>ホームページの練習</TITLE>
</HEAD>
<BODY>
初めてのホームページです。
</BODY>
</HTML>

これを test.html というファイル名で保存してください。test の部分はなんでも構いませんが、.html の部分は必ず .html か .htm にしてください。.html や .gif や .jpg などのファイルの末尾(最後のドット以降)の部分を拡張子と呼びます。

ホームページで作成するHTML文書や画像ファイルのファイル名は、半角の英数文字で名前を付けましょう。記号は極力使用せず、使用するとしても、ハイフン(-)やアンダーバー(_)程度に留めておくのが無難です。
    ○ test.html
    × テスト.html

HTML文書の拡張子は通常 .html なのですが、Windows 3.1など古いシステムでは拡張子に3文字までしか使用できなかったため、Windows系では未だに .html の代わりに .htm と記述するケースが多いようです。

ブラウザで表示してみよう

今作成した test.html をブラウザで表示してみましょう。 「初めてのホームページです。」という文章が表示されていますね。ブラウザのタイトルバーには「ホームページの練習」が表示されているはずです。これで、初めてのホームページの完成です。

修正してみよう

「初めてのホームページです。」という文章を次のように若干修正してみましょう。修正はブラウザではなく、メモ帳などのテキストエディタで行います。

私の初めてのホームページです。

修正したテキストを保存してください。

修正したファイルをブラウザで再表示してみましょう。 修正が画面に反映されましたね。

改行してみよう

「私の」と「初めてのホームページです」の間に改行を入れてみましょう。

私の
初めてのホームページです。

ところが、これをブラウザで再表示しても、うまく改行できていません。「私の 初めてのホームページです。」のように、隙間があくだけです。

改行を行うには次のように修正して保存、再表示してください。

私の<BR>初めてのホームページです。

今度はちゃんと改行されるはずです。

太字にしてみよう

今度は「ホームページ」を太字にしてみましょう。

私の初めての<B>ホームページ</B>です。

ブラウザで再表示すると、「ホームページ」が太字で表示されます。

色を変えてみよう

今度は「ホームページ」を赤色にしてみましょう。

私の初めての<FONT COLOR=red>ホームページ</FONT>です。

ブラウザで再表示すると、「ホームページ」が赤字で表示されます。


Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwbeg1.htm