スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

勝手にHTML講座 Vol.2 HTMLを具体的に

さてさてHTML講座第二回目の今回は、HTMLの具体的な説明に入りたいと思います。(すごくやっとです)

Vol.1の最後で保存してもらったHTMLコードを覚えてくれているでしょうか。
覚えているなんてそんな幻想を抱いちゃいけませんね。
実はちょっとミスがあったので修正してもう一度乗せます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>ハロー ワールド!</h1>
<p>これが見えているかな?</p>
<p><a href="http://www.google.co.jp">検索する</a></p>
</body>
</html>


これが、前回のコードです。
一見してわかるように、いくつものタグの入れ子になっています。
そのタグそれぞれの機能について、今日は解説を行います。

次の三つは、HTMLの構造の基幹となるタグです。重要です。

<html>~</html>


  このタグは、HTMLの一番外側の入れ子となります。
 いわば、ここからここまでがHTMLですよーと言っているようなものです。
 

<head>~</head>


  このタグは、HTMLのヘッダ情報であることを表します。
 この中身の内容は、ページの表示内容よりも先に読み込まれます。
 具体的には、「ページがどのような言葉で書かれているか」
 「このスタイルシートを読み込め」
 「リンク基準はここな」
 「あ、タイトルバーにこれ表示しといて~」
 といった「メタデータ」が記述されます。
 この中にもし、なにか文書を書いても、「定義上は」無意味になります。書いてはいけません。
 実際に書いたらふつうに見えちゃうけど。

<body>~</body>


  このタグは、HTMLの「内容」を表します。
 ここに、文字やら画像やらを書けば、ブラウザに表示される、というわけです。

上の三つが、HTMLの構造のもとになっています。
ちなみに、<html>直下には、<head>,<body>以外のタグを書いてはいけません。
ついでに言っておけば<foot>なんてのもないし<hand>なんてのもありません。

では次に、bodyやheadの中に書かれたタグについて。

<title>~</titile>


  このタグは、ページの「タイトル」を表すタグです。
 通常はこの内容が、ブラウザのタイトルバーに表示されます。
 この内部では、他のタグは一切無効化されるので、タイトルバーに太字とか斜体は使えません。
 <head>の内部にしか書いてはいけません。(定義上)
ちなみに――
022_3.png
titleタグを複数書いた場合。
022_2.png
titleタグをbodyの中に書いた場合。
022_4.png
タグをtitle内部で使った場合。

<h1>~</h1>


  このタグは、ページの「見出し」を表します。
 決して、「太字」や「大文字」を表すものではありません。
 そう表示されるからといって、そのように用いるのは「非推奨」とされます。
 実は、このh1タグの仲間には、h2やらh3やらがあります。
 推察のとおり、hの後の数字が小さくなるにつれ、表示される大きさも小さくなります。
 中見出し、小見出しといったものに使われるように設計されているのです。
 便利ですね。
 最小はh6となっています。
022_1.png
参考画像

<p>~</p>


  このタグは、「段落の区切り」を表します。
 pは「パラグラフ」の略です(聞き覚えありますよね?)
 通常は前後に改行が現れます。

<a>~</a>


  前回ちょこっとやりましたが、このタグは、リンクのためのタグです。
 クリックすると、href=""で指定したページにジャンプします。
 リンクってのは素晴らしい仕掛けだと個人的に思う。

これで一通り、例のコードのタグの解説はすんだかな?

もちろん、このほかにもタグはたくさんあります。
太字や大文字のタグもたくさん出てきます。

次回からは、目的別にいろいろ解説したいかなと思っています。




一時間でかけた。
まじめにやればできたんだな・・・
スポンサーサイト

コメントの投稿

No title

なんかそれらしくなって来ましたね♪
<h7>、覚えたての頃に入れた覚えがw
"<!DOCTYPE~"が気になりますが、後はよく分かりました!

No title

strictか。
loose.dtdで良くね?
正規表現なんて免土井し。
HTML5からは<!doctype html>でいいらしいし。まぁ公開を待てと。

No title

補足。
IE8では「ソースの表示(S)」ではなく「メモ帳で編集(D)」です。
前者で開くと別窓でわかりやすく表示しますが、編集はできません。
そのまま編集したいものがあるときやメモ帳を開きたいときには後者を選択するとよいでしょう。
ガチでIE7までとは使い勝手が違うのでご注意あれ。

No title

>>MASQUERADEさん
<!DOCTYPE~については二回くらい後で詳しく解説するつもりです。
いまは何も考えないでくださいw

>>jot22bさん
HTML5のはちょっと簡略化しすぎだと思うの。
あと補足サンクス
EUのせいでIE7にupdateする気が失せちゃいまして(笑)

No title

学校の授業でやってからやっと9割方この投稿の意味がわかりましたwww
非公開コメント

最新記事
カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
月別アーカイブ
カテゴリ
プロフィール

pojime.6654

Author:pojime.6654
特撮に目がないPC中毒者です。
http://anchorage.2ch.net/sfx/

あと最近また変な方向に走っていきそうで…

最新トラックバック
最新コメント
リンク
メールフォーム

名前:
メール:
件名:
本文:

検索フォーム
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。