ホームページ基礎知識講座「第２章 HTMLの基本」

ホームページ基礎知識講座「第２章 HTMLの基本」ホームページを作る前に知っておくべき事（ホームページ作成・初心者向け）

■ HTMLドキュメントの作成

では、実際にHTMLを使ってドキュメントを作成してみましょう。 HTMLのドキュメントを書くには、Windowsならばメモ帳やワードパッド、MacintoshならばSimpleTextなどのテキストエディタがあれば十分です。 一つ注意してもらいたいのは、HTMLファイルを保存する時には、常にテキスト形式でしなくてはいけないことに注意してください。

■ HTMLファイルの保存方法

HTMLファイルはテキスト形式で保存しなくてはいけないのは前述しましたが、このときファイル名の最後に.htmlまたは.htmという拡張子（最後のピリオドより後の部分）をつけてください。そうすれば、HTMLのブラウザの多くは、ファイルの拡張子を見てそれがHTMLのファイルか単純なテキストファイルかを判断します。

■ HTMLの構造

HTMLには３種類の｢ドキュメント構造タグ｣があり、これらを使ってドキュメントの全体的な構造を記述します。 実際に画面上に影響を与えることはほとんどありませんが、このタグのおかげでどのようなマシンでブラウズしても問題がおこらないクロスプラットフォーム性を実現しています。

<HTML></HTML>

すべてのHTMLドキュメントに表れる最初のドキュメント構造タグは、<HTML>タグです。このタグはこのファイルの内容がHTML言語で書かれていることを示すものです。 全てのHTMLのドキュメントは、下記のように<HTML>タグで囲まれていなければなりません。

<HEAD></HEAD>

<HEAD>タグに囲まれている部分はその文章におけるヘッダ（頭書き）です。ドキュメントの<HEAD>部分には、ドキュメントのタイトル、制作者の情報、日付などブラウザに現れない情報を記入することが出来ます。ヘッダ内には、けっしてドキュメントの本文は書きません。

<TITLE></TITLE>

すべてのHTMLドキュメントはタイトル（表題）を持ち、 <TITLE>タグを使って指定します。<TITLE>タグはヘッダの中に書きます。このタグによって記述された内容は多くの場合ブラウザのウインドウのタイトルバーに表示されます。 現在のページでは「ホームページ基礎知識講座「第２章 HTMLの基本」」となっています。

ドキュメントのタイトルを２つ以上書くことはできません。また、タイトルにはテキスト以外のもの（他のタグやリンクなど）を含むことはできません。

<BODY></BODY>

<HEAD>タグに続いて記述し、HTMLドキュメントのその他の要素すべて（テキスト、リンク、画像、絵など）は<BODY>タグに囲まれます。つまり<BODY>タグに囲まれた部分が本文と言う意味なのです。またこの<BODY>タグにはオプションがありそれを指定することでそのページの基本的なレイアウト（背景の色、テキストの色とかリンクの色など）を決めることができます。

  • <BODY BGCOLOR=#xxxxxx>
    この記述で背景色が決まります。xxxxxxのところで１６進数を用いて色を指定します。色の指定の仕方は後述します。
  • <BODY TEXT=#xxxxxx>
    通常のテキストの色の指定をします。
  • <BODY LINK=#xxxxxx>
    リンク色の指定をします。
  • <BODY VLINK=#xxxxxx>
    行ったことのあるリンクの指定をします。vlinkとは「visited link」です。
  • <BODY ALINK=#xxxxxx>
    リンクをクリックしたときに一瞬だけなる色の指定をします。
  • <BODY BACKGROUND="背景のグラフィックの名前">
    背景に貼る画像ファイルの指定をします。グラフィックファイルについては後で紹介します。
これらのオプションは<BODY>タグを書く際に一緒に書きます。
<BODY bgcolor=#ffffdd link=#ffff00 vlink=#0000ff>

以上のことをまとめると、基本的なHTMLドキュメントは以下のようになります。

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

■ 見出し・段落・コメント

<Hn></Hn>　見出し

<Hn>タグ(Header)はそのページの見出しや小見出しを示すために使われます。 見出しのレベルには６レベルあり、nのところをそれぞれ１〜６まで変えることによってそれぞれ違うレベルの見出しを示します。 タグを終了するときに開始したときのレベルと違うレベルで終了してしまうと、修了タグが無いとみなされ表示がおかしくなってしまいます。

この見出しタグを用いると大きい文字や太い文字などで他のテキストよりも目立つように表現されます。
しかし太字で表示させたり、目立たせたりする目的でこのタグを使うべきではありません。
検索エンジンでは、このタグでマークアップされた語句や文章はそのページ内の中でも重要であるとみなし、重要視します。 そのページ内で強調したい部分（本文内で重要と思われる文章や語句）に使うようにしましょう。

<H1>H1の見出し</H1>
<H2>H2の見出し</H2>
<H3>H3の見出し</H3>
<H4>H4の見出し</H4>
<H5>H5の見出し</H5>
<H6>H6の見出し</H6>

全ての見出しレベルは左記のようになります。

<Hn>タグを使う時の注意点；文章の中でレベル順に<Hn>タグを用いる。
<H4>タグのあとで<H1>タグを使ったりしてはいけません。

フォントサイズを変更するために、<FONT>タグがあります。
視覚的にサイズを変えるのならば、<FONT>タグを使用して下さい。


<P>　段落

<P>タグ(Paragraph)は段落を表し改行すると同時に空行を１行挿入します。
このタグにはHTMLのバージョンによって多少違いがあるので、それぞれ説明します。

その違いというのは<P>タグを閉じるか閉じないかです。一番古いHTML1.0においては<P>タグは「パラグラフの（初めではなく）終わり」を示すタグと定義していたので、パラグラフの終わるところに<P>と記述していました。

一方HTML2.0以降においては<P>タグは</P>と対で表すように変更されました。
つまり<P>がパラグラフ開始を表し</P>がパラグラフの終わりを示します。

Copyright © 2009 無料ホームページ作成講座 All rights reserved.
DesignTemplate by　無料ホームページHTMLテンプレート