ウェブランサー

HTMLファイルの作り方

HTMLファイルの作り方

HTMLは、誰でも簡単にウェブページを作れるように設計された言語です。基本的に、文字列(テキスト)だけで構成されているので、特別なソフトは必要ありません。

HTMLファイルを作る手順は簡単です。テキストファイルを新規で作成し、その中にHTMLを記述し、保存したらファイルの拡張子を「html」にするだけです。それでは、詳しい手順を見ていきましょう。

HTMLファイルを作る準備

まずは、次のサンプルの<html>~</html>までを選択してコピーして下さい。

HTML
<html>
<head>
<title>ここに好きなタイトルを書きます</title>
</head>
<body>

ここが内容です。自由に文字列を書いてみましょう。

</body>
</html>

コピーできたら、一旦デスクトップに戻って右クリック(Macはcontrol+クリック)のメニューを開き、「新規作成」から、「テキストドキュメント」を選びます(普通のメモ帳です)。ファイルを作ったら、先ほどコピーしたソースを貼り付けて上書き保存しておいてください。

HTMLファイルを作る

HTMLファイルの作り方を知らない状態では、何だか難しそうな印象を持ってしまう方がいるかも知れませんが、作り方はとても簡単です。先ほど上書き保存したテキストファイルの拡張子を「.html」に変更して確定するだけです。ファイルの拡張子が表示されていない場合は、パソコンの設定を調整してください。

例えば、先ほど保存したファイルの名前が「新規テキスト.txt」となっていたなら、「新規テキスト.html」に変更するだけでOKです。

拡張子が「html」になっているファイルをウェブブラウザで読み込むと、自動的にHTMLドキュメントであるという解釈を行ってくれます。その中に、先ほどコピーした内容が保存されていれば、HTMLタグは直接画面に表示されずに、<body>から</body>の間に囲まれた内容だけが表示されます。

初めて作るHTMLのファイル名は「index」

indexファイルについて

ここまでの作業で、あなたのパソコンのデスクトップには、HTMLファイルが保存されていると思います。それでは、このファイルに名前を付けてみましょう。新しくHTMLファイルを作った際に、一体どんなファイル名にすればいいのか迷ってしまう事があります。せっかくなので、ここでHTMLに関するルールを一つ紹介します。

将来あなたがインターネット上に公開するウェブサイトを作ろうと思った時、パソコン上で作ったファイルをサーバーにアップロードする作業が発生します。その時、トップページになるファイル名は、必ず「インデックス(index)」という名前になる、ということを覚えておいて下さい。

トップページ以外のファイル名は、半角英数字であれば何でも良いのですが、トップページだけは「index.html」にしなければなりません。今は「そういう決まりがあるんだな」と覚えておけば大丈夫です。詳しい理由は、もう少しHTMLに慣れてきた時にゆっくり調べてみると良いでしょう。

ファイル名に使える文字

半角アルファベット(半角英語)
a b c d e f g
h i j k l m n
o p q r s t u
v w x y z
半角数字
0 1 2 3 4 5 6 7 8 9
半角記号(限定的)
-(ハイフン), _(アンダーバー)
HTMLファイル名の例
index.html
page001.html
article_0621.html
my-file-name.html

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール