HTML講座：HTMLとは？:Image Collection イメージコレクション

HOME 素材集 HTML講座アニメーションgifとは？カラーチャートサーバー紹介サーバー構築テンプレート雑談ブログリンクお問い合わせ

携帯サイトもよろしく
デコメの素材や待ち受けなどの携帯コンテンツを無料で提供しています。

HTML講座：HTMLとは？

第1回目はHTMLを使用するのに必要なものと、 HTMLの概要や基本的な記述の仕方について解説します。
まず、HTMLとは何でしょうか？HTMLは現在ホームページを作る際に使われています。HTMLの正式名称は HyperText Markup Languageで日本語だとマークアップ言語です。ただ、これだけではどんなものかいまいちよく分かりません。もう少し細かく解説すると、例えばメモ帳などのテキスト文章では画像や音声、動画、他の文章へ移るなどといったことはできないのですが、「HyperText」とあるようにHTMLでは画像や音声、動画などを文章の中に配置したり、他の文章などへリンクしたりとできるのです。このような機能を使用するためには「タグ」と呼ばれる文章を構成するための飾りをつけて記述していきます。これが「Markup：マークアップ」で文章を組む「Language：言語」ということです。しかし、HTMLではプログラム言語のように、時間がたったら別の操作をしたり、画像の上にマウスカーソルを載せたら違う画像を表示させたりするといった動的な処理やネットを使った予約や買い物を行う機能を行うことはできません。これを行うには「JavaScript」や「FlashのActionScript」、「PHP」や「CGI」などのプログラムを使う必要があります。このあたりことはHTMLとは別のものなのでまた違うとこで説明します。また、HTMLを理解していないと上記でのプログラムを使って動的なホームページを作ることは難しいと思います。

HTMLはテキストエディタを使って記述していきます。テキストエディタはWindowsの「メモ帳」やフリーで提供している「TeraPad」やシェアウェアでは「秀丸エディタ」などがあります。テキストエディタに記述しファイル名の拡張子を「.html」にして保存します。
HTMLファイルにして保存したデータを使用するには「ブラウザ」というソフトが必要になります。ブラウザとは「InternetExplorer」や「Netscape」などのホームページを見る時に使用するソフトです。テキストエディタとブラウザはパソコンに標準でインストールされているので用意することなく作成できると思います。

実際にテキストエディタにHTMLを記述して見ましょう。以下と同じようにテキストエディタに記述してみてください。

<html>
<head>
<title>テスト</title>
</head>
<body>
テスト
</body>
</html>

上記に記述したファイルを「test.html」と名前をつけて保存し、開いて見ましょう。すると開いた画面に「テスト」と表示されているはずです。ちなみにHTMLやプログラムを記述することをコーディングといい、そのコーディングした内容をソースコード又はソースといいます。

それでは上から順番に内容を見ていきましょう。まず、HTMLでは<html>のように記述したのをタグと呼びます。このタグを使い文字を大きくしたり、画像を入れたりします。タグは大文字と小文字どちらでもかまわないのですが、W3C(World Wide Web Consortium) という標準化を決めている機関では小文字を推奨しているのですべて小文字で記述するようにしましょう。また、全てタグは半角で記述し、<とhtmlの間やhtmlと> の間にはスペースなどを入れないように記述します。スペースなどが入っていると、ファイルを開いたときに文字化けしたり画像が表示されなかったりします。うまく表示されない時は、記述した内容をもう１度よく確認してみましょう。また、タグの前に半角のスペースを入れても大丈夫なのですが全角のスペースを入れるとうまく表示できなくなるので気をつけましょう。

ここから記述したタグの説明をします。
初めに<html>はここからHTMLを始めるという意味です。このタグは<html>～</html>と記述し、<html>で始め、</html>でこのタグの終わりを記述します。

<head>は作成するホームページのタイトルやキーワードを設定するタグや、CSSやJavaScriptなどを記述する場所のタグです。このタグに記述したものは、ファイルを開いた時には表示されません。<head>～</head>と記述し、<head>で始め、</head>でこのタグの終わりを記述します。

<title>は作成するホームページのタイトルを設定します。 YahooやGoogleなどのロボット型検索サイトではこのタグに記述したタイトルを表示しますので必ず設定しましょう。 <title>～</title>と記述し、<title>で始め、</title>でこのタグの終わりを記述します。

<body>は記述した文章やタグで示した文字の大きさや色、画像などを表示させるタグです。ここに記述した内容が画面に表示されます。<body>～</body>と記述し、<body>で始め、</body>でこのタグの終わりを記述します。

HTMLとはどんな言語なのかをつかめたでしょうか。今回はここまでになります。