ここまでの復習

5種類の要素

師匠

これまでに学んだ要素は、
<h1><h6><p><a><strong><img> やな。

師匠

ミニ復習や。

師匠

<h1><h6>は何や?

弟子

見出し?

師匠

せや。
<p>は?

弟子

段落。

師匠

<a>は?

弟子

ハイパーリンク。

師匠

<strong>は?

弟子

重要性の強調。

師匠

<img>は?

弟子

画像。

師匠

正解や。
この中に、終了タグが無い要素は ある?

弟子

<img>要素・・・でしたっけ?

師匠

せや。
この要素を 全部使ったサンプルが、下や。

<h3>おフランス</h3>

<p>下の写真は、<strong>モン・サン=ミシェル</strong>や!</p>

<img src="sample.jpg">


<p>クリックするのは、<a href="sample.html">ここ</a>や! (ページは無いけどね)</p>

おフランス

下の写真は、モン・サン=ミシェルや!

クリックするのは、ここや! (ページは無いけどね)

師匠

境界線を無くすと、こうなる。

おフランス

下の写真は、モン・サン=ミシェルや!

クリックするのは、ここや! (ページは無いけどね)

弟子

あいかわらず、いい写真ですね~。

師匠

せやろ、せやろ。

木構造の絵を書いてみる

師匠

前に、下みたいな木構造の絵を書いてたなー。
上のコードの場合、どんな絵になる?
下に解答があるけど、まず、自分で考えて 書いてみ。( ← <body>以下で ええで。 )

師匠

できたか?

弟子

あっ、ハイ。
こんな感じで。

師匠

そうや。
ギャグのセンスが無いヤツ にしては、上出来や。

弟子

(怒)

師匠

さっき 言うたけど、<img>要素には、終了タグは無い。
つまり、この木の図にした場合、<img>要素から伸びる枝は無いってことや。

弟子

ふむ。

師匠

枝が伸びる、ってことは、開始タグと終了タグに挟まれているってことや。
よって、<img>要素みたいな終了タグは無い要素の場合、必ず そこで止まるわけやな。

師匠

こういう感覚は大事やな。
こういうセンスが無いヤツは、無茶苦茶な HTMLコードを書く傾向にある。
あと、 ギャグのセンスが無いヤツ もダメやな。

弟子

(怒)

リスト と テーブル

師匠

次にやるのは、リスト(箇条書き)テーブル(表) や。

師匠

今まで学んだ要素との違いは、複数の要素で、特定の機能を実現することや。

師匠

例えば、<img>要素は、それだけ(1要素)で「画像」の機能を実現した。

師匠

けど、テーブルの場合、少なくとも <table><tr><td>の3種類の要素が必要や。
そういうのを やるで。

弟子

はーい。