■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code002: HTMLとは何か！(前編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
1. What's this? ................. このメルマガについて
2. Sample1 ...................... 基本タグ その1:タグの考え方
3. Sample2 ...................... 基本タグ その2:TITLEタグ
4. Sample3 ...................... 基本タグ その3:BRタグ
5. Sample4 ...................... 基本タグ その4:半角スペースを表示する
6. Sample5 ...................... 基本タグ その5:タグには属性がある
7. Sample6 ...................... 基本タグ その6:BODYタグの属性
8. Sample7 ...................... 基本タグ その7:色の指定の仕方
9. Sample8 ...................... 基本タグ その8:16進数ってなに！？
10. Sample9 ...................... 基本タグ その9:ファイルの“場所”とは
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.What's this? 「このメルマガについて」
──────────────────────────────────────
みなさんこんにちは！
編集者のかつべです。
このメルマガは、Webに関係するプログラム(マークアップ)言語について、サンプル
をメインに解説していこうというものです。各言語の基本的な概念などについては、
別途書籍やWebサイトでお調べください。
※気が向いた時や、リクエストがあった時はするかもしれません(^^;
【 重要!! 】
『このメルマガでは,各言語の概念や最初のSTEPの説明はありません』
また、「こんなこと取り上げて！」というリクエストは随時受け付けております。
お気軽にメールをください(^ ^)/
こちらまでどうぞ
< mm-webp@ichikoro.com >
今回はHTMLの基礎について解説したいと思います。
※年内中は、HTML、CSS、JavaScript、CGIの基礎について解説する予定です。
さてさて、あまりの長文に前後編になってしまいました(^^;
ただ来週の月曜日にお届けするのはお約束と違いますので、後編は今週の木曜日(!)
にお届けする予定です。まとめて週末に読まれるも良し、お昼休みやアフター5にじ
っくりと勉強するのもOKです。
さぁ、それではハリキッテいきましょう！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2.Sample1 「基本タグ その1:タグの考え方」
──────────────────────────────────────
HTMLはプログラミング言語ではなくマークアップ言語です。その名の通り、元の文
章に「ここからここまではこれ」という印をつけていきます。
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
大なり小なりの等符号で英字を囲んだもの
<名前>
これを“タグ”と呼びます。タグには様々な種類があり、例えば文字の色やサイズを
指定したり、段落などを指定するタグがあります。
そして、始まりを指定したら必ず終わりはどこかを指定しないといけません。
</名前>
その際は、スラッシュ(/)をつけてここまでという指定をします。
つまり
<名前> 〜 </名前>
で、一つの組み合わせになります。
【 重要!! 】
『タグには開始を表す物(開始タグ)と、終了を表す物(終了タグ)がある』
※例外もあります。
さて、では上のサンプルを見てみましょう。
・HTMLタグ
まずはHTMLという開始タグが一番上に、一番下にはHTMLの終了タグがあります。
これは呼んで字のごとくこの間がHTMLで書かれていることを示します。
・HEADタグ
ここには、このファイルの情報を記述します。
タイトルや作成者をはじめ、検索エンジンなどで検索した時に使われるキーワード
などを指定することができます。
・BODYタグ
実際の内容は、このBODYタグの間に記述します。
うーん、この説明だけではピンとこないですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3.Sample2 「基本タグ その2:TITLEタグ」
──────────────────────────────────────
というわけで、上のサンプルにちょっと書き足してみました。
<HTML>
<HEAD>
<TITLE>HEADの中で指定したタイトル</TITLE>
</HEAD>
<BODY>
BODYのなかに書いた文章です。
</BODY>
</HTML>
・TITLEタグ
この文章のタイトルになります。
ここで指定した文字が、InternetExplorer(以下IE)やNetscapeNavigator(以下NN)
ではタイトルバーに表示されたり、お気に入り(ブックマーク)した際の名前に使用
されます。
早速"sample.html"などと名前をつけたファイルに保存した後、ブラウザから開いて
確認してみてください。
また、タグの大文字小文字は同一視されます。つまり <HTML> と <html> は同じ意味
になります。また、半角スペースやタブ、改行などは表示されずに無視されますので、
どこからどこまで囲っているかを分かりやすくするため、サンプルのようにインデン
ト(字下げ)に用いる場合が多いです。
【 重要!! 】
『大文字と小文字は関係ない』
『半角スペースやタブ、改行は無視される』
余談ですが、TITLEタグの効能は上記に書いただけでなく、gooやgooleなどのロボッ
トタイプの検索エンジンで入力されたキーワードと一致するものがTITLEタグの中に
ある場合、検索結果の中で高い位置に来ます。
※もちろんそれ以外の要素も加味されますので、一様に上がるわけでは
ありません(^^; が、ちゃんと意味のあるタイトルをつけたほうが、
ヒットしやすくなります。
【 重要!! 】
『TITLEタグには、意味のある名前をつけよう』
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4.Sample3 「基本タグ その3:BRタグ」
──────────────────────────────────────
半角スペースや改行は無視されると書きましたが、逆に改行したい場合や半角スペー
スを記述したい場合はどうすればいいのでしょうか？
<HTML>
<HEAD>
<TITLE>改行のテスト 1</TITLE>
</HEAD>
<BODY>
な、なんてことだ。
まさか改行されないなんて( ゜_゜;)
</BODY>
</HTML>
上のサンプルをブラウザで確認してみてください。
やはり改行されません。そこで、
<HTML>
<HEAD>
<TITLE>改行のテスト 2</TITLE>
</HEAD>
<BODY>
な、なんてことだ。<BR>
まさか改行するタグがあるなんて( ゜_゜;)
</BODY>
</HTML>
を実行してみてください。
見事に改行されましたよね？
・BRタグ
改行を表すタグで、BReak(改行)の略称です。
ここで、
「ん？タグって開始タグと終了タグがあるんじゃないの？」
と思った方、するどいですねぇ。例えばBRタグの様に、ここからここまでと言った範
囲を指定しない物については、終了タグが無い物も存在します。
「じゃぁどうやって、有る物と無い物を見分ければいいの？」
はい、これは後編で解説いたします。
【 重要!! 】
『必ずしも終了タグがあるわけではない』
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5.Sample4 「基本タグ その4:半角スペースを表示する」
──────────────────────────────────────
では、半角スペースはどうすればいいのでしょうか？
「やっぱり、半角スペースを表すタグがあるんですか？」
うーん、改行のように半角スペースを表すタグは現在のところ存在しません。結果的
に半角スペースを表示するにはいくつか方法があるのですが、今回は文字参照を使った
例を紹介します。
<HTML>
<HEAD>
<TITLE>半角スペースのテスト 1</TITLE>
</HEAD>
<BODY>
半角スペースはここから→ ←ここまでです。
</BODY>
</HTML>
上のサンプルを実行してみてください。
お分かりの通り、ポイントは
の部分です。
HTMLにはあらかじめ、予約された特別なキーワードがいくつかあります。
&キーワード;
とすると、実際に表示される際に別の文字に置き換わります。
つまり上の例で行くと と書いた場合、実際に表示される時は半角スペースに置
き換わる、といった具合です。
これが特に活躍するのはタグを表示するときです。
<BR>
と表示したい場合、どうすればいいでしょうか？
このままBODYの中に書いたのでは、改行されてしまうだけです。
そこで、下記のようにします。
<HTML>
<HEAD>
<TITLE>BRタグを表示する</TITLE>
</HEAD>
<BODY>
<BR>
</BODY>
</HTML>
つまり、
< → <
> → >
となるわけです。
余談ですが、掲示板(BBS)でタグを禁止するような仕組みは、上記のような予約語に
変換しているケースが多いです。
また他にも
" → "
& → &
© → (C) ←表示されない環境もあります。
と言ったような感じで、いくつも存在しています。
【 重要!! 】
『HTMLには予約語が存在する』
ここではキーワードで表示できるとお話しましたが、
は、
 
と記述することも可能です。
つまり、
&キーワード;
&#数値;
の2種類の書き方があります。
というわけで、
< < → <
> > → >
" " → "
& & → &
© © → (C) ←表示されない環境もあります。
のようになります。
「この数値はどういう法則なんですか？」
文字コードと呼ばれるものがそのまま適用されていますが、詳しいことはまた別の機
会に説明いたします。お楽しみに(^^)/
---------------------------------------------------------------------------
■おまけ
---------------------------------------------------------------------------
厳密に言うと、IEやNNでは半角スペースを認識してしまう場合があります。
上記の例で言うと、
半角スペースはここから→ ←ここまでです。
の部分を
半角スペースはここから→ ←ここまでです。
としても同じ結果になります。
これはおそらく
This is a pen!
という場合に
This is a pen!
何て事にならないようにとの配慮だと思います。
ですが、
半角スペースはここから→ ←ここまでです。
と、
半角スペースはここから→ ←ここまでです。
では実行結果が異なります。
しかもこれは改行にも適用されるのです。
半角スペースはここから→
←ここまでです。
を実行してみてください。
つまり、ブラウザは
半角スペースまたは改行がある場合 → 半角スペースへ
複数の半角スペースまたは複数の改行がある場合 → 半角スペースへ
という作業をしているワケです。
これが原因でダサいリンクを時々みかけますが、それはまた別の機会に。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6.Sample5 「基本タグ その5:タグには属性がある」
──────────────────────────────────────
それぞれのタグには、細かい指定が出来るようになっています。
<HTML>
<HEAD>
<TITLE>背景色をつけてみよう！</TITLE>
</HEAD>
<BODY bgcolor="Blue">
藍は青より出でて青より青し？<BR>
違ってそうやなぁ...(^^;
</BODY>
</HTML>
上記を実行すると背景が青くなると思います。
これは
<BODY bgcolor="Blue">
がポイントです。
タグ名に続いて、bgcolorという指定が出ています。
bgcolorというのは既にお分かりの通り、背景色を指定するBODYタグのオプションの
ような物です。一般的にこのようなオプションを属性と言います。
“BODYタグ の bgcolor属性”という言い方をします。
つまりタグは、
<タグ名>
という書き方だけではなく
<タグ名 属性名="値">
という具合に書くことができます。
属性は複数書くことも可能ですし、その際の順番は前後しても大丈夫ですから、さら
に正確に言うと、
<タグ名 属性名1="値" 属性名2="値" 属性名3="値" ..... 属性名n="値">
ということになります。
属性と属性の間は、半角スペースで区切ります。
値は"(ダブルコーテーション)で囲みます。省略することもできますが、普段から囲
む癖をつけた方が安全です。
【 重要!! 】
『タグには属性が存在し、複数指定することもできる』
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
7.Sample6 「基本タグ その6:BODYタグの属性」
──────────────────────────────────────
ここまでご紹介してきたタグには様々な属性が存在しています。
その一例をご紹介します。
<HTML lang="ja">
<HEAD>
<TITLE> BODYタグで遊ぼう! </TITLE>
</HEAD>
<BODY bgcolor="Black" text="White" background="sample.gif">
う〜ん、バックが黒だと<BR>
ちょっとアダルトな感じですねぇ(^^;
</BODY>
</HTML>
・HTMLタグ
lang属性：
使用されている言語を指定できます。
“ja”は日本語を意味します。
日本国内向けの一般的な日本人だけを対象としたのWebサイトだとあま
りお目にかかる事はありませんが、海外向けであったり他国語を用いる
場合は、押さえておいた方が良いです。
他にも、
en → 英語
fr → フランス語
de → ドイツ語
zh → 中国語
などがあります。
・BODYタグ
bgcolor属性：
背景色を指定できます。
text属性：
テキスト色を指定できます。
background属性：
ここで指定した画像が、背景画像として用いられます。
正確には画像ファイルのある“場所”を指定します。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
8.sample7 「基本タグ その7:色の指定の仕方」
──────────────────────────────────────
ここまでで、いくつか疑問がありますよね？
例えば、
「色って、英語でしか指定できないの？他には何があるの？」
というわけで、色の指定方法について解説いたします。
色の指定の仕方は2種類あります。
1)色名で指定する
上の例でもあった通り、"White"や"Blue"などの色名で指定する方法です。
人間が見て、直感的に分かる点からHTMLタグをいじる人はこちらでの指定が
お勧めです。
ただ、ブラウザによっては対応していたり、いなかったりしますので、必ず
チェックが必要です。
2)RGBで指定する
RGBとは、Red Green Blue の頭文字で、それぞれの色の混ざり具合を数値で
表した物です。DTPや、PhotoShopなどをバリバリ使ってる方にはおなじみで
すね。
数値が大きければ大きいほど、その色が濃いことになります。
99 FF FF
という数値が合った場合、
R G B
99 FF FF
といった解釈になります。
実際の指定は
<BODY bgcolor="#99FFFF">
のようになります。
色名で指定するよりも、確実に表示できます。
【 重要!! 】
『色の指定には、名前と数値で指定する方法の2種類がある』
色の見本表がWebにはいくつかありますが、中でも
■とほほの色入門・色見本
< <A href="http://tohoho.wakusei.ne.jp/wwwcolor.htm">http://tohoho.wakusei.ne.jp/wwwcolor.htm >
がお勧めです。
と、ここまではよろしいでしょうか？
「ちょっと待って、Fって何？それ数値なの？？」
おっとっと、そうでした。
はい、実はこれも数値です。
日常生活では中々使う機会がないですが、16進数と呼ばれる物がこれに当たります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
9.sample8 「基本タグ その8:16進数ってなに！？」
──────────────────────────────────────
普段皆さんが使う数字は、9の次は10だと思います。
これは、9の次に桁が一つ増えるので、10進数と言います。
パソコンは0と1で計算しているという話は皆さんご存知だと思いますが、
これは 1 の次に 10 と 1の次に桁上がりする2進数で計算しているからです。
※回路のONとOFFの制御に、2進数がマッチしているタメです。
ついでに、7の次に10と、7の次に桁上がりする8進数も存在します。
そして話に出てきた16進数は、15の次で桁上がりするのです。
理屈だけ聞くと頭がスポンジになりそうですね(^^;
というわけで、実際に表にすると下のようになります。
2進数 8進数 16進数 10進数
-------------------------------------------
0 0 0 0
1 1 1 1
10 2 2 2
11 3 3 3
100 4 4 4
101 5 5 5
110 6 6 6
111 7 7 7
1000 10 8 8
1001 11 9 9
1010 12 A 10
1011 13 B 11
1100 14 C 12
1101 15 D 13
1110 16 E 14
1111 17 F 15
10000 20 10 16
10001 21 11 17
10010 22 12 18
10011 23 13 19
10100 24 14 20
10101 25 15 21
10110 26 16 22
10111 27 17 23
11000 30 18 24
11001 31 19 25
11010 32 1A 26
11011 33 1B 27
11100 34 1C 28
11101 35 1D 29
11110 36 1E 30
11111 37 1F 31
100000 40 20 32
一番右が、みなさん普段使っている10進数です。
その隣が16進数です。
そうなんです。
桁が上がっちゃうとまずいので、16進数で言うところの
10は、A
11は、B
15は、F
という具合に、途中から英字に切り替わっています。
「何でこんなややこしい事してるの？10進数でええやん」
と、みなさん感じていらっしゃると思いますが、これには色々と事情があるの
です(^^; 詳しくはまた機会を見て解説したいと思います。
と、説明しましたが、みなさんが直接この値を調節することは、中々ないと思いま
す。最近のホームページ作成ソフトは色を選ぶと自動的に、この16進数に変換して
くれるものが大半です。
また、色見本表などを見たほうが圧倒的に作業効率もいいですし、ストレスがたま
らないので胃に優しいです（笑）
「じゃぁ、なんで解説したの？」
というと、色見本表などに書いてある数値を見て、いつも「なんだろう、これ」と
思うのって、気持ち悪いじゃないですか。下地をしっかり勉強しておくと、それが
そのまま自信につながるのです！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10.sample9 「基本タグ その9:ファイルの“場所”とは？」
──────────────────────────────────────
段々濃い話になってきました(^^;
いかがでしょうか？ゆっくりと読んでいただければ、きっと理解していだけると
思います。
今スグに分からなくても、使っているうちに
「あ！このことだったのか！！」
と叫びたくなる瞬間がきっとあります。
というわけで、とりあえずは目を通してください。
そして、迷った時にまたこのメルマガを引っ張り出してださい。
話を戻しましょう。
7.Sample6「基本タグ その6:BODYタグの属性」の中で出てきた
background属性ですが、
> background属性：
> ここで指定した画像が、背景画像として用いられます。
> 正確には画像ファイルのある“場所”を指定します。
とあります。
ここでいう“場所”とはどう指定すればいいのでしょうか？
この指定方法には、2種類あります。
(1)絶対パス
(2)相対パス
というわけで、ごめんなさい、ここから後編に続きます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
一気に書き上げて、ちょっと息切れしています (^u^;)ハァハァゼェゼェ・・・
さてさて、いかがでしたでしょうか？
ぜひ、みなさんのご意見・ご感想をお聞かせください。
こうしてメルマガを書いていて改めて思うのは、HTMLだけ覚えればいいってワケでは
なく必要な基礎知識が本当に多岐にわたっている点です。途中でつまずくのも、やは
りこうした所にあるのだろうなぁと感じずにはいられません。
そのおかげで、これまで何冊専門書を買ったことでしょうか(^^;
もう学生のころは、文字通り食うのに困るくらいの専門書貧乏でした。
このメルマガではそうした“穴”を出来るだけフォローして行こうと思っています。
ですので、分からない所があったら、ぜひ具体的に教えてください。
送信先は、
< mm-webp@ichikoro.com >
になります。
次回の後編は木曜日にお届けする予定です。
それでは！
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1088部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
---【PR】-------------------------------------------------------------------
『CGIプログラミングメーリングリスト』
一緒にCGI極めませんか？
< http://www.ichikoro.com/cgi/ml/ >
Produced by ichikoro.com
-------------------------------------------------------------------【PR】---
