メモ帳で作るWEBページ1

htmlの基本構造

------------------------------
<html>
<head>
<title>タイトル名</title>
</head>
<body>

</body>
</html>
------------------------------
点線内のhtml基本構造をコピーして、メモ帳に貼り付け[.text]を[.html]に替え「sample1.html」、「sample2.html」、 「sample3.html」のように数個の「htmlフアイル」を作っておきましょう。すると、body間にタグ文を貼り付けるだけで、 デスプレーに表示されるようになります。


上記4っつの構造タグの解説

構造タグは上記の順序で構成されます。順序の入れ替えは許されません。
body内のタグの出現は殆ど自由です。(「HTML4.01」 でも[Strict]仕様になると<a>や<img>は<body>内に 直接書いてはいけないことになります。) その他、<p>タグに<div>タグを入れ子にしてはいけない(と言うよりは、現在は<p>タグの終了形は 省略しても良いことなっていまして、次に新しいブロックレベルタグが来ると自動的に終了します。ですから、 <div>タグを入れ子にしようとしても、<p>タグは終了してしまいますので入れ子には出来ないこと になる訳です。) 等の規制がされていますす。(<img>、<div>タグは後日の解説になりますが。)

<html>   ソースがhtmlで記述されていることを宣言しています。html文書の宣言です。
<head>   ドキュメントのタイトル名、製作者の情報、このページに関する情報等を記述します。
       この中に記述された情報は、<title>〜</title> に挟まれたテキスト以外、基本的に
       ブラウザには表示されません。
<title>タイトル名を入れます</title>  「タイトルバー」と「タスクバー」に表示されます。
</head>  開始タグ<head>に対する終了タグです。
<body>
       ここに、本文を記述します。勿論タグ付けされた文字列や画像挿入文等で構成され、
       ブラウザによって、レンダリングされデスプレーに表示されます。
       (基本的にタグは、半角英文字で書き大文字・小文字のどちらで書いてもかまいま
        せんが、近い将来を見透いて半角英小文字使用を推奨します。)
</body>  開始タグ<body>に対する終了タグです。
</html>  開始タグ<html>に対する終了タグです。


body間の記述

body 間の記述のみがデスプレーに表示されますので、まずは body 間の記述から入ります。



例えば蛍光ペンで文節ごとにマークアップし、タグで実行した例です。

この文字列は赤色に、ここは斜体に、 下線を引きます。
蛍光ペンでマークアップするのと同様に、HTMLではタグでマークアップしているのです。

注)上記蛍光ペンを表現するのに、<font>タグではどうしても出来ませんでしたので、まだ学習していませんが、 マークアップとは何か?の説明用としてスタイルシートを使用して表現しました。飛ばしてください。


敢えてW3Cが非推奨タグと指定し、近い将来消滅するであろう、[fontタグ][bタグ][iタグ][uタグ]&[centerタグ]を使用して の説明です。[b]、[i]、[u]は MS-Word の「書式設定ツールバー」にボタン化されているため、理解がし易いと思いましたので。

<font>タグを使用して記述すると下記になります。

この文字列は赤色に、 ここは斜体に、 下線を引きます。

分かり易く行単位で異なった種類のタグを使用しました。

■<font>タグ内に<b>、<i>、<u>タグを入れ子にした場合

 ●<b>タグ: 開始タグ<b>終了タグ</b>を使用し、文字列を囲むと太字で表現されます。
  この行は太字で表現しました。
   (HTML記述は:「 <font><b>この行は太字で表現しました。</b><:/font> 」になります。)

 ●<i>タグ: 開始タグ<i>終了タグ</i>を使用し、文字列を囲むと斜体で表現されます。
  この行は斜体で表現しました。
   (HTML記述は:「 <font><i>この行は斜体で表現しました。</i><:/font> 」になります。)

 ●<u>タグ: 開始タグ<u>終了タグ</u>を使用し、文字列を囲むと下線が引かれます。
  この行には下線を付けました。
   (HTML記述は:「 <font><u>この行には下線を付けました。</u><:/font> 」になります。)

■<font>タグに属性、属性値を付加した場合

 ●開始タグ<font>タグにcolor属性とその属性値(例えば「red」)を与え、終了タグ</font>で文字列を囲むと 赤字で表示されます。
  この行は赤字で表現します。
   (HTML記述は:「 <font color="red">この行は赤字で表現します。</font> 」になります。)
注)「font color="red">」の属性値を表す記号(ここでは赤色指定)の red はダブルクォーティション「" "」で 囲む規則になっています。書式は「 <タグ+属性+属性値> 」で「 <font color="red"> 」の形式で記述します。

 ●同様に開始タグ<font>タグにcolor属性とその属性値(例えば「blue」)を与え、終了タグ</font>で 文字列を囲むと青字で表示されます。
  この行は青字で表現します。
   (HTML記述は:「 <font color="blue">この行は青字で表現します。</font> 」になります。)

 ●開始タグ<font>タグにsize属性とその属性値(例えば「4」)を与え、終了タグ</font>で文字列を囲むと 文字サイズ4で表示されます。
  この行はフォントサイズ「4」に設定しました。
   (HTML記述は:「 <font size="4">この行はフォントサイズ「4」に設定しました。 </font> 」になります。)
注)「font size="4">」の属性値の4は現在、数値に限ってはダブルクォーティション「" "」で 囲まなくても良いとされていますが、近い将来、属性値全てに囲むことになります。囲む習慣を付けましょう。

 ●開始タグ<font>タグにface属性とその属性値(例えば「MS 明朝」)を与え、終了タグ</font>で 文字列を囲むと書体がMS 明朝で表示されます。
  この行の書体は「MS 明朝」に設定しました。
   (HTML記述は:「 <font face="MS 明朝">この行の書体は「MS 明朝」 に設定しました。</font> 」になります。)
   書体の違いをご覧ください。
なお、IE等のブラウザのデフォルト書体は「MS ゴシック体」のようです。(ワードなどでは明朝がデフォルトの書体です。)

■1つのタグに対して属性・属性値を幾つも並べることができます。

上記3例を1つの<font>タグに納めると下記表示になります。
3っつの属性を連記しました。
(HTML記述は:「 <font color="blue" size="4" face="MS 明朝" >3っつの属性を連記しました。</font> 」 になります。

使用する文字について

現時点では使用文字は半角英数字なら混在しても良いとされています。(ただし、拡張子名例えば画像表示 の「.jpg」「.JPG)」とでは全く別のフアイルに認識され、手元で表示されてもネット上では無効で表示されません。)
しかし次世代言語では、タグの記入に当たってHTML宣言および使用する文字コード以外は全て「半角英数小文字 ([ - ][ _ ]含む)」を使用ことになっております。今のうちから、タグの記述に当たっては全て「半角英数小文字」 使用の習慣を付けておくことをお奨めいたします。
(なお、フアイル名、とそれに付ける拡張子名およびフォルダ名に至るまで「半角英数小文字」を 使用しませんと「アップロード」が出来なくなったり、小文字に修正されたりする事態が生じます。)

開始タグ、終了タグの扱い方(並べ方)

1.一番上の構造タグを見ると分かると思いますが、終了タグは開始タグの逆順で終了させます。
例えば、<font><b>と使用した場合、終了は</font></b>はたすき掛けと言って正しくありません。 ブラウザでは、それが間違っているとしても表現させては呉れますが、正しくは</b></font>の順で なければなりません。

2.また、タグの書き順で<b><font>〜</font></b>とした場合、ブラウザでは、 それが間違っているとしても表示しますが、 正しくは<font><b>の順で書き出さなければなりません。

3.現在、<p>タグや後で学習する<dt>、<dd>、<tr>、<td>、および<li>タグ は終了形を省略しても良いとされていますが、近い将来全てのタグに終了形が必須になります。これを見透いて、今からでも終了 タグを付ける習慣を付けておいた方が良いでしょう。

このページの body 部分記述では主として、<h>、<p>、<font>、<br>タグを使用して書きました。

その他臨時的に使用したタグは下記です。
W3Cで非推奨と指定され、それを[IE]、[NN]。[Mozilla]等ブラウザが遵守した場合間もなく消滅するであろう<u>および<font>の2っつのタグと、 同W3Cで物理スタイルを規定するタグとして、その使用を敬遠している<b>および<i>タグですが、
ワード書式設定ツールバーでお馴染みの記号を使用している点と入力が簡単で説明し易く、タグと言う概念の理解する一助になればと思いまして、このページに限り使用しております。
(なお、<span>タグは未学習で後日解説になります。)


使用した用語の解説

レンダリング:理解可能な表現

トップへ戻る     スタイルシート目次へ戻る
メモ帳で作るWEBページ2へ

inserted by FC2 system