次の方法で共有


HTML の基礎

更新 : 2007 年 11 月

ブラウザのほとんどは、参照先のページの HTML ソースを調べることができます。通常、ソースを参照すると、山形かっこ (<>) で囲まれた HTML (Hypertext markup language) タグがいくつもあり、その間にテキストがあります。

以下の手順では、HTML タグを使用して単純な Web ページをビルドします。標準のテキストをメモ帳のファイルに入力し、多少の変更を加えてファイルを保存します。その後で、ブラウザでページを再読み込みして変更を表示します。

HTML ファイルを作成するには

  1. メモ帳などの標準のテキスト エディタを開きます。

  2. [ファイル] メニューの [新規] をクリックします。

  3. 以下の行を入力します。

    <HTML>
    <HEAD>
    <TITLE>Top HTML Tags</TITLE>
    </HEAD>
    </HTML>
    
  4. [ファイル] メニューの [上書き保存] をクリックし、ファイルを c:\webpages\First.htm として保存します。

  5. ファイルは、エディタで開いたままにします。ブラウザに切り替えて、[ファイル] メニューの [開く] をクリックするか、ブラウザの URL エディット ボックスに「file://C:/webpages/first.htm」と入力します。"Top HTML Tags" というタイトルの空のページが表示されます。

    タグは対になっており、山形かっこで囲まれていることに注意してください。タグの大文字と小文字は区別されませんが、通常はタグが目立つように大文字が使用されます。

    タグ <HTML> がドキュメントの開始を示し、タグ </HTML> がドキュメントの終了を示します。終了タグは、必須ではありません。終了タグと開始タグは、タグの前のスラッシュ (/) 以外は同じです。山形かっこ (<) とタグの先頭の間にはスペースを入れません。

  6. メモ帳に戻り、</HEAD> 行の後に次のように入力します。

    <BODY>
    HTML is swell.
    Life is good.
    </BODY>
    
  7. [ファイル] メニューの [上書き保存] をクリックします。

  8. ブラウザに切り替え、ページを最新表示します。

    ブラウザのウィンドウのクライアント領域に文章が表示されます。キャリッジ リターンが無視されていることに注意してください。改行する場合は、最初の行の行末に <BR> タグを挿入します。

    以下の手順でドキュメントのボディにテキストを追加する場合は、<BODY> と </BODY> の間に挿入します。

  9. 見出しを追加します。

    <H3>Here's the big picture</H3>
    
  10. ページと同じフォルダに保存されている .GIF ファイルを使用して、イメージを追加します。

    <IMG src="yourfile.gif">
    
  11. リストを追加します。

    <UL>Make me an unordered list.
    <LI>One programmer</LI>
    <LI>Ten SDKs</LI>
    <LI>Great Internet Apps</LI>
    </UL>
    
  12. リストに番号を付ける場合は、<UL> と </UL> の代わりに <OL> と </OL> のタグを対で使用します。

これで、HTML ファイルのビルドを開始できます。Web ページで気に入った内容を見つけた場合は、HTML ソースを調べると、どのようにして作成されたかがわかります。Microsoft Front Page などの HTML エディタを使用すると、単純なページでも複雑なページでも作成できます。

ビルドしたファイルの HTML ソース全体を次に示します。

<HTML>
<HEAD>
<TITLE>Top HTML Tags</TITLE>
</HEAD>
<BODY>
HTML is swell.<BR>
Life is good.
<H3>Here's the big picture</H3>
<IMG src="yourfile.gif">
<UL>Make me an unordered list.
<LI>One programmer</LI>
<LI>Ten SDKs</LI>
<LI>Great Internet Apps</LI>
</UL>
</BODY>
</HTML>

タグ、属性、および拡張機能の詳細については、以下の URL で HTML (Hypertext Markup Language) の仕様を参照してください。

http://www.w3.org/pub/WWW/MarkUp/

参照

概念

MFC インターネット プログラミングの基礎