ー
htmlとは何ぞや？を考える前に先ず実習です。例題で覚える「html＆スタイルシート」 のコーナーです。
画面は真っ白です。（黄色い注意書きは私のソースとは無関係です。）
<html> <head> <title></title> </head> <body> </body> </html>
head部の「titleタグ」にタイトルを記入。画面は真っ白ですが、 上段の「タイトルバー」と下段の「タスクバー」にタイトル文字が表示されます。
<html> <head> <title>ページのタイトル</title> </head> <body> </body> </html>
body部に文章を書きます。
<html> <head> <title>文字表示</title> </head> <body> body内に文字を書き画像を挿入するとIE、NNといった「ブラウザ」が その文字や画像をディスプレーに表示します。 一般的にはｐタグとかdivタグ等ブロックレベルタグと 呼ばれているタグで囲むのですが、ここでは、何のタグも付けません。 それでも、bodyタグには挟まれているのです。 </body> </html>
body部に文章を書き、<p>〜</p>タグで囲みました。
<html> <head> <title>文字表示１</title> </head> <body> <p> body内に文字を書くとIE、NNと言った「ブラウザ」がその文字を モニターに表示します。 ここではｐタグを使用しました。 </p> </body> </html>
body部に文章を書き、<div>〜</div>タグで囲みました。
<html> <head> <title>文字表示２</title> </head> <body> <div> body内に文字を書くとIE、NNと言った「ブラウザ」がその文字を モニターに表示します。ここではdivタグを使用しました。 </div> </body> </html>
body部に文章を書き、<ol><li>〜</li></ol>タグで囲みました。
<html> <head> <title>文字表示３</title> </head> <body> <ol> <li> ここでは「箇条書き通し番号あり」のolタグを使用しました。 </li> <li> 折角のリストですから、リストタグを２つ重ねました。olタグと liタグはセットで使用します。行頭に番号が付けられたことに 注目してください。 </li> </ol> </body> </html>
body部に文章を書き、<ul><li>〜</li></ul>タグで囲みました。
<html> <head> <title>文字表示４</title> </head> <body> <ul> <li> ここでは「箇条書き通し番号なし」のulタグを使用しました。 行頭にマークが付けられたことに注目してください。 </li> <li> 上と同様にリストタグを３つ重ねました。ulタグとliタグは セットで使用します。 </li> <li> 以上p、div、ol、ul、タグの使用例を挙げましたが、出てきた 文字そのものには変化が起きてないことに、注目してください。 </li> </ul> </body> </html>
body部に文章を書き、<dl><dt><dd>〜</dd></dt></dl>タグで囲みました。
<html> <head> <title>文字表示５</title> </head> <body> <dl> <dt>ここでは「定義語」と言われるdl、dt、ddタグを使用しました。 <dd> dl、dt、dd、タグは３点セットで使用します。下段が「辞書スタイル」 のように字下げになっていることに注目してください。 </dd> </dt> </dl> </body> </html>
body部に文章を書き、<h1>〜</h1>タグで囲みました。
<html> <head> <title>文字表示６</title> </head> <body> <h1> ここではh1タグを使用しました。「見出し１」のレベルで文書の タイトルなどに向いています。文字が太字になっていることに注目して ください。（使用ブラウザによって文字の大きさが多少異なります。） </h1> </body> </html>
body部に文章を書き、<h4>〜</h4>タグで囲みました。
<html> <head> <title>文字表示７</title> </head> <body> <h4> ここではh4タグを使用しました。 （hタグはh1、h2、h3、h4、h5、h6の６段階あります。 その内のh1とh4の２つを例にあげました。） どちらも文字が太字になっていることに注目してください。 またｈタグの１〜６夫々はフォントサイズを表すものでは ありませんで、フォントのレベル即ち階級を表すものです。 </h4> </body> </html>
以上いろいろなタグを使ってbody部に文章を書きましたが、みな横幅一杯に
なった所で自然改行されています。
そこで<br>タグを使い適当な所で区切って、読み易くしました。
上記「サンプル１」に<br>タグを使った例
<html> <head> <title>文字表示８</title> </head> <body> <p> body内に文字を書くとIE、NNと言った「ブラウザ」がその文字をモニ ターに表示します。<br> ここではｐタグを使用しました。 </p> </body> </html>
上記「サンプル２」に<br>タグを使った例
<html> <head> <title>文字表示９</title> </head> <body> <div> body内に文字を書くとIE、NNと言った「ブラウザ」 がその文字をモニターに表示します。<br> ここではdivタグを使用しました。 </div> </body> </html>
上記「サンプル３」に<br>タグを使った例
<html> <head> <title>文字表示１０</title> </head> <body> <ol> <li> ここでは「箇条書き通し番号あり」のolタグを使用しました。 </li> <li> 折角のリストですから、リストタグを２つ重ねました。olグとliタグ<br> はセットで使用します。行頭に番号が付けられたことに注目して<br> ください。 </li> </ol> </body> </html>
上記「サンプル４」に<br>タグを使った例
<html> <head> <title>文字表示１１</title> </head> <body> <ul> <li> ここでは「箇条書き通し番号なし」のulタグを使用しました。<br> 行頭にマークが付けられたことに注目してください。 </li> <li> 上同様リストタグを３つ重ねました。ulタグとliタグはセットで<br> 使用します。 </li> <li> 以上p、div、ol、ulタグの使用例を挙げましたが、文字<br> そのものには変化が起きてないことに、注目してください。 </li> </ul> </body> </html>
上記「サンプル５」に<br>タグを使った例
<html> <head> <title>文字表示１２</title> </head> <body> <dl> <dt>ここでは「定義語」と言われるdl、dt、ddタグを使用しました。 <dd> dl、dt、dd、タグは３点セットで使用します。<br> 下段が「辞書スタイル」のように字下げになっていることに注目して ください。 </dd> </dt> </dl> </body> </html>
上記「htmlの基本構造３」：が読みづらいので<br>タグを使い整理しました。
<html> <head> <title>文字表示</title> </head> <body> body内に文字を書き画像を挿入するとIE、NNといった「ブラウザ」が<br> その文字や画像をディスプレーに表示します。<br> 一般的にはｐタグとかdivタグ等ブロックレベルタグと呼ばれている<br> タグで囲むのですが、ここでは、何のタグも付けません。<br> それでも、bodyタグには挟まれているのです。 </body> </html>
以上８〜１３まで<br>タグを使用した場合の動作を体験しました。これで
<br>タグは卒業です。幾分、行の整理がついたい思いますが如何でしたでしょうか。
注１）
</ >の終了タグの直前には<br>タグを用いなくても、自動的に改行されます。
（<h1>タグと<h4>タグは本来見出しタグとして短かい文字列ですので省略しました。）
注２）
以上文書構成の主なタグを列挙しました。<h1>、<h4>タグ以外は文字
そのものには変化が見られませんでした。
文字を装飾するのには。スタイルシートを使用することをW3Cでは推奨しています。また、
時代の流れでそうせざるを得なくなりつつあります。
<p>タグを３段に重ね、<div>タグも３段に重ねてみました。
<html> <head> <title>pタグとdivタグの比較</title> </head> <body> <p> pタグ１行目の文章です。pタグは通常数行にまたがり[段落]を構成します。 しかし、１〜２行であっても目的次第によっては一向差し支えありません。 </p> <p> ｐタグ２行目の文章です。 </p> <p> ｐタグ３行目の文章です。 </p> <div> divタグ１行目の文章です。 </div> <div> divタグ２行目の文章です。 </div> <div> divタグ３行目の文章です。 </div> </body> </html>
サンプル１４を見ると、<p>タグで区切られた間隔が広いことがわかります。
<p>タグは上下に空白行を伴うからです。
<p>タグでは間延びして体裁が悪いような場合、行を詰めて表示したい場合には<div>タグを使用すると調整ができます。
<div>タグは「汎用ブロックレベルタグ」と言われています。１行でも、段落にでも
使用でき、またページ全体の設定にも使用できる非常に便利なタグです。
ちなみに、このページの「ソース部分」は<div>タグで囲みました。枠線、背景色を備えたタグとして使用しています。（<div>タグ以外にも<h3><h4><h5>タグにも枠線、背景色をつけてありますが）
<p>でも全く同様な設定ができます。<p>タグと<div>タグを反対にしても、
殆ど同様な表示になる筈です。
役割分担で使い分けているのです。
今までの例では、「開始タグ（ < > ）」「文章」の後、「同種の終了タグ（ </ > ）」で文章を囲むという、単純な使用例を挙げてきました。しかし、１つのブロックレベルタグが終了しないうちに新たなブロックレベルタグを使うことが出来るのです。この関係を「入れ子」と言ってます。
ただし、<p>タグは例外で、<p>タグの場合終了タグが省略可となっており、次のブロックレベルタグに出会うと自動的に終了してしまうからです。
<div>タグの中で<p>タグを使用しました。
<div>タグ内での４行目の文章の終わりに</div>終了タグを付けると「入れ子」になりませんので注意してください。
同じような条件で<div>タグと<p>タグを使用しました。行間隔の違いに注目してください。
<html> <head> <title>入れ子について</title> </head> <body> <div> divタグ内での１行目の文章です。 </div> <div> divタグ内での２行目の文章です。一旦divタグを閉じて、また開始しました。 </div> <div> divタグ内での３行目の文章です。一旦divタグを閉じて、また開始しました。 </div> <div> divタグ内での４行目の文章です。ここでは＜/div＞で閉じないで＜br＞ タグで改行<br> divタグ内での５行目の文章です。＜br＞タグで改行<br> divタグ内での６行目の文章です。次が＜p＞タグを入れ子にしますので ＜/div＞で閉じてはなりません。また＜br＞タグも不要です。 <p> pタグ内での１行目の文章です。 </p> <p> pタグ内での２行目の文章です。一旦pタグを閉じて、また開始しました。 </p> <p> pタグ内での３行目の文章です。一旦pタグを閉じて、また開始しました。 ここではpタグをで閉じないで＜br＞タグで改行<br> pタグ内での４行目の文章です。＜br＞タグで改行<br> pタグ内での５行目の文章です。次が終了タグなので＜br＞タグは不要です。 </p> pタグが終了したので、divタグ内での文章になります。この行必要 なければ無くても構いません。 </div> </body> </html>
htmlには箇条書きタグが「<ol>、<ul>、<dl>」の３種類用意されています。
それぞれに特徴があって、「入れ子」の場合でも、ときには順序を変えて使用したい場合もあります。
順序不同で入れ替えが出来、また、<p>、<div>その他ブロックレベルタグも入れ子にで出来るのです。
ここでは、<div>タグの中に、<ol>を入れ、その<ol>の中に<ul>を入れました。
「箇条書き番号有り」タグの<ol>タグでは算用数字で、「箇条書き番号無し」タグの<ul>タグでは小○印しが付けられています。属性を指定しないデフォルトではこの形になります。なお、属性を指定はスタイルシートで行います。
箇条書きは、字下げで表示されています。