ＨＴＭＬ簡単解説

　ホームページビギナーズガイド　ＨＴＭＬ簡単解説編！初心者のためのやさしいホームページ作成講座

インターネットビギナーズガイド｜中級｜上級｜ネット活用術｜ネットＱ＆Ａ｜コラム｜IT用語辞典｜サイトマップ

ＨＴＭＬ簡単解説

ＨＴＭＬではタグを指定することで、いろいろなことが出来るようになります。よく使われるタグで、どんな事が指定できるのかをみていきましょう。ＨＴＭＬタグですが徐々に覚えていけば大丈夫です。基本がわかれば、タグ辞典のタグをそのまま記載していくことが出来ます。それに慣れていけば見なくても記述できるようになりますよ。

HP作成の基本メニュー一覧に戻るには＞HP作成の基本ガイド

　HTMLの構成を復習

<html>ここからHTMLの記述をはじめますの合図

<head>ここからは文書に関する情報を記述します

<title></title>
ページタイトルです。お気に入りに入れてもらえると、ここの表記がお気に入りのメニューに追加になります。また、ページの表示をしている時にブラウザの一番上に表示されるページ名もこの部分です。

</head>ここで文書に関する情報の記述を終了します

<body>ここから本文に入りますよ

</body>本文は終了です

</html>HTMLの記述終了です

ワンポイント：htmlはかならず始まりと終わりのタグがあります。このどちらかが欠けていてもエラーでページが正常に表示されません。終了タグがないものもありますが、わずかです。

このページのトップへ戻る

　簡単にはじめてのホームページを作ってみよう！

簡単なホームページのようなものなら、この下の<html>から</html>までを記述して、html形式で保存すればページは作成できます。まだ作成したことのない方はきっと面白いと思いますので、簡単なＨＰを作ってみましょう。

メモ帳を起動させて下さい。（モニター左下のスタートボタン→すべてのプログラム選択→アクセサリ選択→メモ帳の順にクリックすれば、起動します）
下の<html>から</html>までを、メモ帳にコピペして下さい。
メモ帳の左上のファイルをクリック→名前を付けて保存をクリック→新たに出てきた保存画面上のタブ（下向きの▼のボタン）をクリック→わかりやすいようにデスクトップを選んでみましょう。保存画面下の『ファイル名』に1.htmlと記入してみて下さい。（上手くいかない方は1.htm）※1はわかりやすく付けただけのファイル名なので、変えてもＯＫです。→あとは保存ボタンを押せば終了です。
さあ、これであなたのパソコンのデスクトップ上にあなたの始めてのホームページが出来ていると思いますよ。早速見てみてください。

どうでした？ちゃんと出来ていましたか？出来ていない場合は、通常チェックするこんな原因が考えられます。

スペルミス
タグに記述漏れ

以上が全ての基本になります。慣れたら、<title>の文や<body>の文は変えて作ってみてください。ＨＰ作成ソフトならこんな面倒な記述はいらないのですが、基本がわかっているとホームページ作成は楽になるので、覚えておきましょう。ただ単にワープロ入力しているだけの人も多いですが、htmlを知って上の段階を目指しましょう。

このページのトップへ戻る

　基本タグの説明

　部分指定タグ

見出しタグで囲んだ文字は、自動的に太字で大きなサイズの文字になります。数字が大きくなるにつれて字は小さくなります。後から記述する文章の構造を示すものです。そのため、見出し6が見出し1より上に記述されているような順番はありえません。記述の場合は小さい数字から順番に使いましょう。

<br>

改行する際に使用します。

<p></p>

段落の指定に使います。段落で囲まれた部分は、下に1行分行間が空きます。

<b></b>

囲まれた部分は太字になります。

強調されます。bを使用した際のように太字になります。bに対応していないブラウザでも<strong>なら太字で表示が可能です。

<a href="リンク先のＵＲＬ">リンクを貼りたい言葉</a>

リンク

このページのトップへ戻る

　ページ全体タグ（赤字部分は自分で入力する部分）

ページ全体のテキストの色を指定します。

ページ全体のテキストの色を指定します。（スタイル）

ページ全体の背景の色を指定します。

ページ全体の背景の画像を指定します。

普通にページを作っていくなら、上のタグでほとんどの事が出来ると思います。

このページのトップへ戻る

　よくある質問

　リンク部分の色が変わるのはなぜ？

いろいろなサイトを訪問していると、文字の上にカーソルが乗ると文字の背景色や色が変わったりします。それはどうしているんですかという質問をよくいただきますので、ここに掲載をさせていただきます。

今さら聞けないホームページ作成小技←の上にクリックをしないでカーソルだけを乗せてみてください。リンク色が赤色に変わるかと思います。現在は外部スタイルシート（スタイルシートだけのファイルを作成して参照ファイルとして指定しています）で指定をしていますが、ＨＴＭＬに直接記述することも可能です。（よくある質問の答えは今さら聞けないホームページ作成小技でも紹介しています）

　HTML

link　通常のリンクの色です。

alink　クリックした時の色です。

vlink　すでに表示した後の色です。（訪問済み）

　スタイルシート

A:LINK{COLOR:希望のカラー}
A:HOVER{COLOR:希望のカラー}
A:ACTIVE{COLOR:希望のカラー}
A:VISITED{COLOR:希望のカラー}

A:LINK　通常のリンクの色です。

A:HOVER　カーソルが重なった時の色です。

A:ACTIVE　クリックした時の色です。

A:VISITED　すでに表示した後の色です。（訪問済み）

自分でサイトに訪問した時に、どんなサイトがわかりやすいかを参考にすればいいと思います。

私自身が思っていることは、