拡張子「.HTML」ファイルの作成方法
拡張子「.HTML」ファイルの作成方法
まず、HTMLのファイルを作成するには、前回解説した「拡張子」を使って、単純にテキストファイルの「.txt」という拡張子を「.html」に変更するだけで、HTMLとして認識されます。
具体的な方法は、まずデスクトップ画面や、テキトウなフォルダを開いた画面を右クリックして、新規作成より「テキスト文書」をクリックします。
そうすると、以下のようにテキストファイルが作成されます。
テキストファイルを右クリックして「名前の変更」をクリックします。
そして、拡張子「.txt」を「.html」に変更します。確認メッセージが表示されたら「ＯＫ」を選択しましょう。
拡張子「.txt」が「.html」に変わったら、HTMLファイルの出来上がりです。
HTML文章を編集
出来上がった「.html」という拡張子が付いたファイル、つまりHTML文章ですが、このままダブルクリックすると、IE（※InternetExplorer）というブラウザ（※インターネットを見るためのソフト。Windowsでは標準ブラウザとしてInternetExplorerが最初から入っている）で何も内容が無い画面表示されてしまいます。
それは、最初から「.html」という拡張子のファイルはIEで開くようパソコンで設定されているためです。IEではHTML文章を編集する事が出来ませんので、編集するためには、「.html」が付いた拡張子のファイルを右クリックし「アプリケーションから開く」を選択します。そして「notepad」（メモ帳）を選ぶと、メモ帳で開く事が出来ますので、ここにHTML文章を記述していけば編集出来ます。
編集したファイルは、必ず定期的に「保存」（上書き保存）するようにしましょう。
HTML文書とは
元々、HTMLは文書に構造的な意味を持たせるために生まれました。
「タグ」と呼ばれる言葉で文を囲む事により、文書に構造を持たせ、HTMLとなります。（なお、タグは英語で書きますが、半角であれば大文字でも小文字でも構いませんが、以下の解説は全て小文字で記述します。）
この、「タグ」と呼ばれる言葉で文を囲み、構造を持たせる事を「マークアップ」と呼びます。
例えば以下の文を見てください。
「WindowsXP。それは最先端の技術を集結したOSです。より安全なセキュアな環境、簡単で効率的なネットワーク環境、より優れた安定性。」
と、いった文章に、構造化してみましょう。
まず始めの「WindowsXP」は、この文の見出しにあたると言えます。HTMLのタグには、見出しである事を定義するためのタグがあります。それは「<h1>文</h1>」～「<h6>文</h6>」というタグになり、1から6まで順番に「見出し1」「見出し2」「見出し3」...といったような意味を持ちます。
次に、「それは最先端の技術を集結したOSです。」に関しては、見出しに対する説明であり、段落であると言えます。HTMLのタグには段落である事を定義するタグがあります。それは「<p>文</p>」タグです。「<p>文</p>」タグで囲まれる部分は段落として定義されます。
次に「セキュアな環境、簡単で効率的なネットワーク環境、安定性」これらは上記のWindowsXPに対する、良い所をまとめた一覧であると言えます。HTMLのタグには、リストを定義するタグがあります。それは「<li>文</li>」です。また、注意しなければいけないのは、リストである事と、リストタイプを定義するために「<ul>全てのリスト</ul>」タグがあり、リストタグは「<ul>全てのリスト</ul>」で囲まなければいけません（他にリストタイプを定義するタグとして<ol>全てのリスト</ol>などもあります。
こうして出来上がるHTMLは、以下のようになります。
「<h1>WindowsXP</h1><p>WindowsXP、それは最先端の技術を集結したOSです。</p><ul><li>セキュアな環境</li><li>簡単で効率的なネットワーク環境</li><li>安定性</li></ul>」
これで、この文は構造的な意味を持ったHTMLの文になりました。実際に、このHTMLをブラウザ（インターネット画面を見るためのソフトウェア。Windowsでは標準でブラウザとしてInternetExplorerがインストールされています）を通して表示させてみましょう。以下の濃い背景で囲まれた部分のようになります。
WindowsXP
それは最先端の技術を集結したOSです。
- セキュアな環境
- 簡単で効率的なネットワーク環境
- 安定性
いかがでしょうか？字が大きくなったり、一覧（リスト）らしくなったりして構造がわかりやすく表示されたと思います。
ブラウザは、このようにHTML文書を解釈し、視覚（見た目）でその構造的な意味がわかりやすいよう表示します。
このように、構造的な意味を持たせる事により、例えば人間ではないコンピューターなどが見てもどういった構造なのかを理解出来る形式となり、携帯電話やPDA、テレビなどといったインターネット環境でも見る事が出来る、「環境に依存しない、どの環境でも使えるような汎用性の高い文となった」と言えます。
他にも、目的に応じて様々なHTMLタグがありますが、数十個のタグを覚えて、多少のルールさえ守れば、それでHTMLは使えるようになったと言えます。が、多少のルールがありますので、それを次の「ＨＴＭＬのルール」で確認しましょう。
この「初めてのホームページ作成」の分類には以下のページがあります。
