2008年12月18日 木曜日  著者:

タグの基本

タグの基本
HTMLでは、タグとよばれる<>で囲まれた半角英数字を使用します。
原則として、<タグ>で始まって、</タグ>で終わるのが基本となっています。

HTMLファイルを書き出す

ホームページの基本構造

HTMLで書かれたホームページは、以下のような構成になっています。

ホームページの基本構造
ホームページの基本構造
<html>~</html>

<html>部分で囲まれた部分は、HTMLとしてブラウザに読み込まれます。

<head>~</head>

<head>で囲まれた部分をヘッダ部といいます。タイトルや外部CSSファイルを指定する時などにヘッダ部に記述します。

<body>~</body>

<body>で囲まれた部分をボディ部(本文)といいます。実際にブラウザで表示されるのは、この部分となります。

TeraPadに記述する

まずTeraPadを起動させて、ホームページの基本構造を記述してみましょう。
TeraPadに記入

HTMLファイルとして保存する

メニュー[ファイル]から、[名前を付けて保存]をクリックします。
保存

保存したい場所を選択して、ファイル名を入力します。その際にファイル名に「.(半角ピリオド)html」を付けてください。例では、「test.html」となっています。入力が終わったら、[保存]をクリックします。
保存

保存が終了すると、入力されたHTMLが青色になっています。また、ブラウザボタンが追加されました。
HTMLモード

ieのボタンをクリックすると、IEでファイルを表示することができます。
※今の状態では、何も表示されない。

タイトルを付ける

次にサイトにタイトルを付けてみます。
タイトルを付けるには、<title>~</title>を使用します。
ブラウザには、以下のように表示されます。
ブラウザの表示

<title>~</title>は、ヘッダ部(<head>~</head>)に記述します。

例として、タイトル「クィーン・オブ・ザ・ビキニ」を記述してみます。
タイトル記述
ブラウザには、以下のように表示されます。
ブラウザの表示

見出しタグを使う

HTMLで見出しを表示させるには、<h>(heading)を使用します。
<h>は、h1~h6の6つの見出しがあります。h1(大見出し), h2(中見出し), h3(小見出し)…数字が大きくなるにつれて小さくなっています。基本的には順番に使用します。

<h>は、見出しの部分を<h1>~</h1>で囲みます。

h1(大見出し)を付けてみる

先ほどのHTMLファイルに、大見出しを追加してみましょう。
大見出しなので<h1>を使用します。
ボディ部の中に、<h1>ビキニが似合うアイドル</h1>を記述します。
ビキニ挿入

ブラウザには、以下のように表示されます。無事「ビキニが似合うアイドル」が見出しになりました。
ビキニブラウザの表示

h1~h6の6つの見出しを比較するとこんな感じになります。
ビキニブラウザの表示

人気ブログランキング にほんブログ村 IT技術ブログへ

関連する投稿

カテゴリー: 7日で覚えるHTML  | タグ: , , ,

コメントはまだありません >コメントする

コメントはまだありません。

コメントする