HTMLタグを使ってみよう - 超初心者向けHTML講座

HTMLタグを使ってみよう - 超初心者向けHTML講座 2008/08/02 00:00

この講座では、「HTMLタグって何なの？」という人向けに、
HTMLの概念を基本から画像付きで解説しています。

この講座がきっかけでHTMLタグの扱いが上達し、
web拍手のお礼画面を自由自在に操れるようになっていただけたらうれしいです。

この講座では、途中で出てくるちょっと難しい解説は赤字で書かれています。
何のことか分からない方は読み飛ばしてしまっても特に問題はありません。

【第一章】
HTMLタグを使ってみよう

まず、HTMLファイルを実際に作ってみましょう。
そのために最初にやらないといけない設定があります。

マイドキュメントを開いて、ウィンドウ上部のメニューから
「ツール」→「フォルダオプション」を開きます

「フォルダオプション」が開いたら、「表示」タブを開き、
「登録されている拡張子は表示しない」のチェックを外します。
「OK」を押してフォルダオプションを閉じましょう。

これにより、パソコンに保存されているファイルの「拡張子」というものが表示されるようになります。

「拡張子」とは、そのファイルが何のアプリケーション用かを示しているもので、
これが正しく設定されていることにより、ファイルのアイコンが決まったり
ファイルをダブルクリックしたときに正しいアプリケーションを開いたりします。

通常、ファイルの拡張子を誤って変えてしまうことが無いように拡張子は見えないようになっていますが、
今回はこの設定をオフにします。

次に、マイドキュメントのウィンドウの中の適当な余白で右クリックをして、
「新規作成」→「テキストドキュメント」を選択します。

すると、「新規テキストドキュメント.txt」というファイルが作成されます。

この「txt」が拡張子で、これはこのファイルがメモ帳等のアプリケーションで使用される
「テキストファイル」であることを示しています。
先ほど行った「登録されている拡張子は表示しない」のチェックを外す作業を行わないと、
この拡張子は見えないというわけです。
このように拡張子は「（ファイル名）.（拡張子）」というように「.」で区切って記されています。

作ったばかりの「新規テキストドキュメント.txt」はファイル名の入力待ちの状態になっています。
これを「.txt」の拡張子も含めて全て消し、「test.html」というファイル名に打ち変えてエンターキーを押してみましょう。

すると、「拡張子を変更すると、ファイルが使えなくなる可能性があります。」
なんて書かれた恐ろしいダイアログが現れますが、臆せずに「はい」を選択しましょう。

これは、誤って拡張子を変えてしまい、
そのファイルが正しく処理されなくなるのを防ぐために出てくるダイアログなので、
今回のように拡張子を意図的に変える場合は無視してかまいません。

ダイアログが消えると、名前を変えたファイルのアイコンが変わっている事に注目してください。
これでHTMLファイルの準備ができました。

では、実際にHTMLタグを打ち込んでみましょう。
作成した「test.html」のアイコンを右クリックし、
「プログラムから開く」→「Notepad」をクリックします。

メモ帳が開き、「test.html」の中身が表示されます。
作成したばかりのファイルなので中身は空です。

以下の通り打ち込んでみましょう。

打ち込み終わったら、上部のメニューの「ファイル」から
「上書き保存」を選んで保存します。

保存したら、一度メモ帳を閉じ、
「test.html」のアイコンをダブルクリックします。

すると、インターネットエクスプローラが立ち上がり「test.html」が表示されます。

ここで注目してもらいたいのが、ただ「テスト」とだけ表示されているということ。
ファイルの中には「<HTML>」「<BODY>」といった記述があるのに、
それらは表示されていません。

このように「<」と「>」に囲まれた単語はインターネットエクスプローラでは表示されず、
特別な意味を持つ単語として扱われます。
この単語のことを「HTMLタグ」といいます。

試しに、パッと見て効果が分かるタグを打ち込んでみましょう。

もう一度「test.html」右クリックから開き、以下のように打ち込みます。

打ち込み終わったら保存してもう一度ダブルクリックで開いてみましょう。

すると、「テスト」の文字が赤くなっていることが確認できるはずです。
これは先ほど打ち込んだ
<FONT color="#FF0000">テスト</FONT>
の効果で、HTMLタグにはこのように目に見える効果を持ったものがあります。

今回はHTMLタグに実際に触れてみることがテーマなので、
一度ここで終わりにしたいと思います。

次回はHTMLタグを使ってもっと色々と遊んでみましょう。

だんでぃ

web拍手を送る

<<ã€€è¨˜äº‹ä¸€è¦§ã€€>>