HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス /  ウェブ制作チュートリアル / 第2章 HTMLファイルを作成する：HTMLファイルを作成する

第2章　HTMLファイルを作成する

| HTMLファイルを作成する​
テキスト・画像・動画・音声などの情報を、コンピュータにも意味が分かるようにタグ付けしたものがHTMLファイルです。 ウェブページとは、要するにHTMLファイルのことなのです。 早速、HTMLファイルを作成してみましょう。
テキストエディタを起動してください。テキストエディタとは、Windowsならメモ帳、Macならテキストエディットなどのソフトウェアを指します。
起動直後の画面では、すでに新しいファイルの作成画面になっていて、真っ白のウィンドウが表示されています。 もし、画面内に新規ファイルのウィンドウが表示されていない場合には、テキストエディタ上部のメニューからファイルを新規作成してください。
テキストエディタの白いウィンドウに、キーボードからHTMLソースをテキスト入力していきます。 HTMLの意味や記述ルールなどの詳細は追々説明していきますので、まずは理屈抜きにそのまま入力してみてください。半角英数で下記内容を入力します。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
ウェブサンプル株式会社
</body>
</html>
入力が完了したら文書を保存してください。ファイル名は「index.html」、文字コードは「UTF-8」にします。
保存をしたら、拡張子がきちんと.htmlになっているかどうか確認してください。拡張子の.htmlは、このファイルがHTMLファイルであることを表しています。 もし、拡張子が.txtなどになってしまっている場合には、拡張子を.htmlにして保存し直すか、ファイル名の変更で拡張子を変更します。
いま保存したindex.htmlをダブルクリックして、ブラウザ（Internet Explorer・Google Chrome・Safariなど）で表示してみましょう。 ブラウザの画面に「ウェブサンプル株式会社」というテキスト表示されたら成功です。
▶︎ この段階のサンプルサイトを確認する
基本となるHTMLタグをいくつか記述しただけなので、ブラウザの画面には「ウェブサンプル株式会社」と表示されているだけですが、これも立派なウェブページです。

| meta要素で文字コードを指定する
上記のHTMLソースの4行目にある <meta charset="UTF-8"> の部分は、このHTMLファイルの文字コードがUTF-8であることを表しています。 今回作成したindex.htmlは文字コードUTF-8で作成していますが、もしShift JISで作成したHTMLファイルなら <meta charset="shift_jis"> となります。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
ウェブサンプル株式会社
</body>
</html>
このようにHTML文書の文字コードをmeta要素で指定することで、ブラウザが適切に文字コードを判別できるようになります。 その結果として、ウェブページを表示させる際に、ブラウザ上で文字化けを起こさずに表示させられるようになります。

| ファイルの拡張子を.htmlにする
HTMLソースを記述したテキストファイルをHTMLファイルとして新規保存する際には、ファイルの拡張子を.htmlにしてやる必要があります。
テキストエディタでファイルを新規保存する場合、ファイルの種類が初期値では「テキスト文書(*.txt)」となっています。 そのまま保存すると、拡張子が.txtのテキストファイルとなってしまうので注意してください。

| なぜ、indexというファイル名？
HTMLファイル、CSSファイル、画像ファイルなどを作成する際には、ファイル名や拡張子はすべて半角英数にします。 いま作成したHTMLファイルには、「index.html」というファイル名を付けました。これは、ファイル名がindexで、拡張子が.htmlということです。
なぜindexというファイル名なのか疑問に思われるかもしれません。indexの部分は他の名前でも良いのですが、ウェブサイトのトップページのファイル名はindexとするのが一般的です。 その理由は、一般的なウェブサーバーでは、indexというファイル名をトップページとして認識するように初期設定されていることが多いためです。

| HTML とは？
このチュートリアルでHTMLに初めて触れたという方は、HTMLとはどのようなものか簡単に理解しておきましょう。 だいたい分かるという方は、読み飛ばして次へ進んでください。
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するための言語です。 HyperText Markup Languageを日本語で表すなら、「ハイパーテキストを使って情報に目印をつける言語」くらいの意味になります。
ハイパーテキスト（HyperText）では、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。
また、目印をつける（Markup）というのは、文書の各部分が、どのような役割を持っているのかを示すということです。 例えば、見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が分かるように目印をつけます。
文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。 具体的には、検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。
このようにコンピュータに理解できるように文書の構造を定義することが、HTMLの最も重要な役割と言えるでしょう。 この際、目印をつけるための記号として使用されるのがHTMLタグ（例えば、<p>とか<br>とか<a>とか）です。
まとめ
  1. ウェブページとは、要するにHTMLファイルのこと
  2. HTMLファイルを保存する際には、適切な文字コードを選択する
  3. ウェブサイトのトップページのファイル名はindexとするのが一般的