■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code003: HTMLとは何か！(中編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
■ お詫び ■
前回のSubjectを誤ったまま配信してしまいました。
誤：[WebP Vol.001]HTMLとは何か！(前編)
正：[WebP Vol.002]HTMLとは何か！(前編)
~~~~~~~
というわけで今回はVol.003で間違いありません。
申し訳ございませんでした _<(. .)>_
─【Contents】───────────────────────────────
10. Sample9 ....................... 基本タグ その 9:ファイルの“場所”とは
11. Sample10 ...................... 基本タグ その10:絶対パス
12. Sample11 ...................... 基本タグ その10:相対パス
13. Sample12 ...................... 文字装飾 その 1:FONTタグ
14. Sample13 ...................... 文字装飾 その 2:B,I,TT,SUP,SUB,U,Sタグ
15. Sample14 ...................... ハイパーリンク その1:Aタグ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10.sample9 「基本タグ その9:ファイルの“場所”とは？」
──────────────────────────────────────
7.Sample6「基本タグ その6:BODYタグの属性」の中で出てきた
background属性ですが、
> background属性：
> ここで指定した画像が、背景画像として用いられます。
> 正確には画像ファイルのある“場所”を指定します。
とあります。
ここでいう“場所”とはどう指定すればいいのでしょうか？
この指定方法には、2種類あります。
(1)絶対パス
一番上の位置(ルート)からの場所を示します。
(2)相対パス
自分がいる場所(カレント)からの場所を示します。
これだけではさっぱりですね(ーー;)
例えば下記のような構成のファイル群があったとします。
※［］で囲まれているのがディレクトリとします。
※Windowsでいうエクスプローラ、Macでいうリスト表示の様なイメージです。
┌ [ public_html ]
│ │
│ ├ index.html ← HTML
│ │
│ ├ [ image1 ]
│ │ │
│ │ └ backback.gif
│ │
│ ├ [ document ]
│ │ │
│ │ ├ sample.html ← HTML
│ │ │
│ │ └ [ image2 ]
│ │ │
│ │ └ back.gif ← 背景画像
│ │
public_htmlディレクトリから下が、
http://www.ichikoro.com/
の下に表示されるものとします。
※実際にブラウザから見ることの出来る一番上のディレクトリの事を
“ドキュメントルート”と呼びます。
つまり index.html は、
http://www.ichikoro.com/index.html
となります。
ところで、
「突然出てきた“ディレクトリ”って何？フォルダとは違うの？？」
ディレクトリとはWindowsやMacで言うところのフォルダと同じ意味です。インターネ
ットのサーバーに一番良く使われているUNIXというOSでは、ディレクトリという言葉
が使われているため、このメルマガではそれに合わせます。
余談ですが、MS-DOSのころはディレクトリと言っていましたが、Windows95からフォ
ルダという言い方になりました。あまり一般的ではないという判断だと思います。
Macは漢字Talkのころから“フォルダ”だったと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
11.sample10 「基本タグ その10:絶対パス」
──────────────────────────────────────
まずは(1)の絶対パスから行きましょう。
これは一番上から見て相手がどこにいるかを指定するものです。
それでは、index.htmlの背景画像を、image2の下にあるback.gifにする場合はどう書
けばいいでしょうか？
これは
<BODY background="/document/image2/back.gif">
↑ ↑ ↑
(A) (B) (C)
となります。
・(A)
一番上を示すのが "/" です。ルートと呼びます。
・(B)
ディレクトリとディレクトリの間は、"/" で区切ります。
・(C)
最後には普通にファイル名を記述します。
また、下記のような書き方もできます。
<BODY background="http://www.ichikoro.com/document/image2/back.gif">
~~~~~~~~~~~~~~~~~~~~~~~
これは主に、違うサーバにある画像(ファイル)を指定する時などに使用します。
そう、絶対パスにもこの2種類があるのです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
12.sample11 「基本タグ その11:相対パス」
──────────────────────────────────────
次は(2)の相対パスです。
今度は、sample.html の背景を backback.gif にするには、さてどうしたらいいで
しょうか？
<BODY background="../image1/backback.gif">
↑
(A)
基本的には絶対パスと同じですが、(A)の部分に注目してください。
これは、下記のような特殊な意味を表します。
.. ← 親ディレクトリ(一つ上のディレクトリ)をあらわします。
では、応用です。back.gif と同じ階層から見た backback.gif はどういう相対パス
になるでしょうか?
../../image1/backback.gif
そうです、連続して書けるのです。
この例では、上に二つ、ディレクトリを上がっています。
今度は下に下りてみましょう。
index.html から back.gif を呼び出します。
<BODY background="./document/image2/back.gif">
↑
(A)
また新しい物がでてきました。
この意味は
. ← 今自分がいるのと同じ階層を示します。
となりますが、
<BODY background="document/image2/back.gif">
このように省略することも可能です。
ここまでは大丈夫でしょうか？
「ちょっと頭がこんがらかって来たよー(T_T)」
落ちついて、もう一度確認しながら読み直してください。
大丈夫、考え方は非常にシンプルです。
「ところで、相対パスと絶対パスではどちらを使えばいいの？」
これは、どちらでもかまいません。
状況によって使い分けてください。
基本タグの部分はバッチシでしょうか？
ここまでマスターしていれば、後は楽勝ですよ！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
13.sample12 「文字装飾 その1：FONTタグ」
──────────────────────────────────────
現在ではスタイルシート(以下CSS)に役割をゆずりつつありますが、CSSが一般的でな
かったころは、これらのタグにすべてを頼らざるをえませんでした。
<HTML>
<HEAD>
<TITLE> FONTタグを使おう！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FONT color="Blue" size="+1">●</FONT>
<FONT color="Yellow">●</FONT>
<FONT color="Red"size="1">●</FONT>
</BODY>
</HTML>
・FONTタグ
フォントタグは、文字色や文字の大きさ、フォントを指定することができます。
color属性：
色を指定することができます。
色名とRGBでの指定が可能です。
size属性：
文字の大きさを指定できます。
ここには、1〜7の数値を指定します。何も指定しない時IEやNNでの標準の大き
さは3です。また、現在の大きさに対して“+1”や“-2”といった相対的な指定
も可能ですが、1〜7の範囲内でないといけません。
face属性：
これを指定することにより、様々なフォントを指定することができます。
が、見る人のパソコンにそのフォントが入っていない場合は無効です。またブラ
ウザによっては思ったように動作してくれないため、使用時は注意が必要です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
14.sample13 「文字装飾 その2：B、I、TT、SUP、SUB、U、Sタグ」
──────────────────────────────────────
FONTタグでは、色と大きさ、フォントの変更が可能でした。
HTMLではこの他にも、様々な文字装飾が用意されています。
<HTML>
<HEAD>
<TITLE> 文字装飾を使おう！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
これは <B>ボールド</B> です。<BR>
これは <I>イタリック</I> です。<BR>
これは <TT>等幅</TT> です。<BR>
これは 2<SUP>12</SUP>といった上付き文字です。<BR>
これは 2<SUB>cm</SUB>といった下付き文字です。<BR>
これは <U>下線</U> です。<BR>
これは <S>打ち消し線</S>です。<BR>
</BODY>
</HTML>
強調という意味で言うと、BよりもSTRONGタグの方が文法的には正しいようです。
全体的に、見栄えを表すものはCSSの使用が推奨されていますので、いずれ消えて
いくタグなのかもしれませんが、今でも気軽さからよく使われているようです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
15.sample14 「ハイパーリンク その1：Aタグ」
──────────────────────────────────────
いよいよHTMLの華、ハイパーリンクです。
<HTML>
<HEAD>
<TITLE> ハイパーリンク！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="sample.html">ここをクリック！</A>
</BODY>
</HTML>
とと、ちょっと予想以上に忙しく、ここまでしか書けませんでした(^^;
続きは、次回の後編にてお届けいたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、かつべです。
本当は今回ですべてご紹介する予定でしたが、時間の関係でお届けすることが
できませんでした。楽しみにしていたみなさん、ごめんなさい！
次回は月曜日(12/3)に発行予定ですので、その際に後編を届けしたいと思います。
そして、次週はCSS(スタイルシート)もあわせてやっちゃいます。
お楽しみに！
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1173部(前回)
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】---
