Moo-t.blog - ■【HTML-12】自分のブログのHTMLを見てみる

Main Contents

Apr 12 2005

さぁ、ちょっとステップアップして、実際の強面HTMLに挑戦です。
まず手始めに普段見ているWebページのHTMLを見てみましょう。

いままでやった、こんなに簡単なことでホントにいいんだろうか？とまだ思われているかもしれませんが、全然大丈夫です。この回で強面HTMLが少しでも分れば、ちょっとは自信つくと思いますよ！

さぁ、始めましょう！対決する強面HTMLは何でもいいんですけど、
説明しやすいように、例えばこのブログを見てみます。
ページのどこででもいいので、右クリック（Macではコンテクストメニューって読み替えてね）をします。すると「ソースの表示」がありますので、それを選択します。

すると、まぁ立派な強面なHTMLが表示されますね。

まず、親近感を持ってもらうため、知っているタグを探してみます。
最初はやっぱ、<html>でしょう。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

2行目あたりにありません？いろいろ属性付いてますが、htmlタグですね。
んでずーっと下までスクロールして、一番最後の行を見てみますと…</html>がありますね。
その一つ上には、</body>がありますね。ってことは<body>もあるわけです。

またずーっと上までスクロールして最初に戻って、26行目あたりを探してみてください。ありました？
その上は</head>がありますね。ってことは<head>もあるわけです。
<head>は<html>の次行にありますね。

こんなに強面ですが、あんなに簡単だった基本構造とおりにできていることが分っていただけましたでしょうか？
属性もいっぱい入って途中いろいろややこしいのはありますが、タグの基本とおりです。
間にいっぱい入っているだけで、分ってしまえばどうってことないでしょう？

ちょっと親近感持ってもらえました？

<body>以下をざぁーと見てみると、時々日本語がありますね。
その日本語は、このページに書かれている日本語ばかりです。
Webページを見てください。それで同じ文字が書いてある場所を探してみます。

ありました？
日本語だけ追って行ったら、書いてある構成順が一緒ですよね。

いままでの話を理解してもらっていたら、全然当たり前な話です。HTMLは電話での聞き伝えなんですから、表示する日本語はそのまま書いてあるわけです。

ってことはですよ！
Webページ見てて「これはどんな風にHTMLを書いたら、こんな表示になるんだろう？」って思ったら、そのHTMLを見ればタネ明かしできるってことです。

実は、みんなそうやってHTMLの勉強をしています。

例えば、エントリータイトルの文章を見つけてみてください。

<h3><a href="http://moo-t.net/blog/・・・" title="■【HTML-12】自分のブログのHTMLを見てみる">■【HTML-12】自分のブログのHTMLを見てみる</a></h3>

ってなっています。（ご覧になったページによっては<aタグがないかもしれません）

<h3>ってなんやねん？ってリファレンスで調べてみると、
□h1～6　見出し

H は Heading（見出し）の意味です。文章の見出し（章題）を記述します。見出しのレベルは h1～h6 まであり、h1 が一番大きな見出しになります。

ってありました。
ということは、<h3>は3番目に大きな見出しってことになります。

<h3>の次は、<a href="とあります。
□a - リンクする

a はアンカー（Anchor）の略です。
<a href="...">～</a> の形式は、指定したページにジャンプしたり、指定したメールアドレスに対するメールソフトを起動したりする目的で使用されます。

ってありました。
ということは、この見出しはリンクになってるってことですね。

Webページにもどって、実際リンクであるエントリータイトルを押してみてください。
リンクになっているので、違うページに移動しましたよね。

ねっ！なんか小難しそうな強面HTMLですが、色々尾ひれが付いているだけで、じっくり見ていけばとても単純な仕組みで出来ていることがわかってもらえたかと思います。

注：スパム対策の為、管理者確認後に表示されます

TrackBacks URL :

(Moo-t.blog では不適切なコメントを防止するため、コメントを掲載する前に管理者がコメントの内容を確認しています。コメントを初めて投稿する場合すぐに掲載されませんが、管理者が適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)

コメントフォーム