拡張子「.HTML」ファイルの作成方法

まず、HTMLのファイルを作成するには、前回解説した「拡張子」を使って、単純にテキストファイルの「.txt」という拡張子を「.html」に変更するだけで、HTMLとして認識されます。

具体的な方法は、まずデスクトップ画面や、テキトウなフォルダを開いた画面を右クリックして、新規作成より「テキスト文書」をクリックします。

デスクトップ、またはフォルダの中で右クリックして表示されるメニュー

そうすると、以下のようにテキストファイルが作成されます。

新規テキスト文書.txt

テキストファイルを右クリックして「名前の変更」をクリックします。

ファイルを右クリックしたメニュー

そして、拡張子「.txt」を「.html」に変更します。確認メッセージが表示されたら「OK」を選択しましょう。

拡張子変更の確認

拡張子「.txt」が「.html」に変わったら、HTMLファイルの出来上がりです。

新規テキスト文書.txtから新規テキスト文書.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は使えるようになったと言えます。が、多少のルールがありますので、それを次の「HTMLのルール」で確認しましょう。

次は「HTMLのルール」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法現在のページ
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?