■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code005: HTMLとは何か！(後編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
15. Sample14 ...................... ハイパーリンク その1：Aタグ
16. Sample15 ...................... ハイパーリンク その2：Aタグ mailto
17. Sample16 ...................... ハイパーリンク その3：Aタグ target属性
18. Sample17 ...................... ハイパーリンク その4：Aタグ アンカー1
19. Sample18 ...................... ハイパーリンク その5：Aタグ アンカー2
20. Sample19 ...................... 画像を読み込む その1：IMGタグ
21. Sample20 ...................... 画像を読み込む その2：IMGタグ
width,height,
alt,border属性
22. Sample21 ...................... 段落：Pタグ
23. Sample22 ...................... リスト：ULタグ、OLタグ
24. Sample23 ...................... テーブル： TABLEタグ その1
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
15.sample14 「ハイパーリンク その1：Aタグ」
──────────────────────────────────────
いよいよHTMLの華、ハイパーリンクです。
まずは、sample.htmlというファイルをご用意ください。
中身は何でもかまいません。
<HTML>
<HEAD>
<TITLE> ハイパーリンク！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="sample.html">ここをクリック！</A>
</BODY>
</HTML>
“ここをクリック”の部分が、ハイパーリンクになっていると思います。
そのままクリックしてみてください。最初に用意したsample.htmlに移動
します。もちろん、
<HTML>
<HEAD>
<TITLE> ハイパーリンク！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="/index.html">TOPページへ</A><BR>
<A href="../ue.html">一つ上の階層へのリンク</A><BR>
</BODY>
</HTML>
というような相対パスや絶対パスでも記述できます。
リンクするのは同じサーバの中だけとは限りませんよね。
Yahooなどの検索エンジンでは、様々なサーバへのリンクを多数用意
しているのはみなさんご存知だと思います。
というわけで、他のサーバへリンクするには中編で紹介しました
http:// からはじまる絶対パスで記述します。
<HTML>
<HEAD>
<TITLE> ハイパーリンク！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="http://www.isize.com/">イサイズ</A>
</BODY>
</HTML>
リンクって、すごく簡単なんです(^-^)/
【 重要!! 】
『ハイパーリンクにはAタグを使用する』
『リンク先は相対パスまたは絶対パスで指定する』
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
16.sample15 「ハイパーリンク その2：Aタグ mailto」
──────────────────────────────────────
さて、リンクを貼れるAタグには、もっと便利な機能があります。
例えばリンクをクリックしたと思ったらOutlookやEudoraなどのメールソフトが
立ち上がった経験はないですか？実はこれもAタグによるものです。
<HTML>
<HEAD>
<TITLE> メールソフトを立ち上げる </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="mm-webp@ichikoro.com">お問い合わせはこちらへ</A>
</BODY>
</HTML>
ご覧の通り、普段URLを記述するhref属性に
href="mailto:メールアドレス"
という書式で記述します。
【 重要!! 】
『メールソフトを起動するには mailto:メールアドレス と記述する』
■メールアドレスを記述する際に気をつけるポイント
ただ、このメールアドレスを記述したページをWebサーバにアップしていると、
そのアドレスにSPAMメール(*1)がやってくることがあります。
これは、SPAMを送りつけている会社などが送信リストを作成する際に、gooや
Googleなどのロボット式の検索エンジンが機械的にWebページをたどりながら収
集していくのと同じ原理で、メールアドレスを収集するためです。
※他にもいくつか方法はあります。
知人のメールアドレスを記述した名簿を作成する際には、アクセス制限などを
かける、インターネット以外の方法に切り替えるなどの対策を取られる事を
おすすめします。
ここまでで既にお気づきだと思いますが、例えば掲示板などにメールアドレスを
書き込むのも同様に対象となります。ためしにGoogleで“@docomo.ne.jp”で
検索してみてください。
・Googleでiモードのアドレスを検索すると...
< http://www.google.com/search?q=@docomo.ne.jp&hl=ja
【 重要!! 】
『メールアドレスを
インターネットに公開するとSPAMメールが来る恐れがある』
*1 ..... SPAMメールとはいわゆる迷惑メールのことです。最近だとiモード
を対象とした物が社会現象にまでなったのは有名ですよね。
・SPAMメール撃退法
< http://www.kaiteki-net.com/spamkiller/index.html >
・Internet 秘宝館
< http://ux01.so-net.ne.jp/~komori/doc/hoax/ >
※SPAMメールを収集しているページです
・DoCoMo(iモード)の対策
< http://www.nttdocomo.co.jp/new/contents/01/whatnew1112.html >
※メールマガジンやオプトインメールなどを配信しているサイト
などでも届かなくなるなど、この対策による弊害も起こってい
ます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
17.sample16 「ハイパーリンク その3：Aタグ target属性」
──────────────────────────────────────
新しいウィンドウでリンクを見せたい時というのはよくあります。
リンク集や、検索結果の一覧ページなどはそうですよね。
その際は、
<HTML>
<HEAD>
<TITLE> 新しいウィンドウを立ち上げる </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="sample.html" target="_blank">
新しいウィンドウが立ち上がるぞ！
</A>
</BODY>
</HTML>
という具合に、target属性を使用します。
この属性は、他にも下記のような値を指定できます。
・ _blank ..... 新しいウィンドウを立ち上げます。
・ _self ...... 自分自身を書き換えます。普段使うことはあまりありませ
んが、明示的に表したい場合に使用します。
・ _top ....... フレーム(後述)使用時に、フレームをすべて消しその上に
指定されたURLを反映します。
複数同時に指定することはできません。
とと、これはtarget属性の本来の使い方とはちょっと違います。
本来target属性には、『ウィンドウ名』を指定します。
<A href="sample.html" target="_blank">
とした場合、これは名無しの権兵衛なウィンドウになります。
が、ここに例えば
<A href="sample.html" target="new_window">
と、勝手に名前をつけるとやはり _blank と同じように新しくウィンドウが開きま
すが、このウィンドには“new_window”という名前がつけられます。
「名前がつくと何か違うの？」
というわけで下記のサンプルを実行してみてください。
<HTML>
<HEAD>
<TITLE> targetにはウィンドウ名を指定するのだ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="http://www.yahoo.co.jp/" target="new_window"> Yahoo </A> <BR>
<A href="http://www.infoseel.co.jp/" target="new_window"> infoseek </A> <BR>
<A href="http://www.lycos.co.jp/" target="new_window"> lycos </A> <BR>
<A href="http://www.goo.ne.jp/" target="new_window"> goo </A> <BR>
<A href="http://www.isize.com/" target="new_window"> ISIZE </A> <BR>
</BODY>
</HTML>
お分かりいただけたでしょうか？
ちなみに、
<HTML>
<HEAD>
<TITLE> targetにはウィンドウ名を指定するのだ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="http://www.yahoo.co.jp/" target="_blank"> Yahoo </A> <BR>
<A href="http://www.infoseek.co.jp/" target="_blank"> infoseek </A> <BR>
<A href="http://www.lycos.co.jp/" target="_blank"> lycos </A> <BR>
<A href="http://www.goo.ne.jp/" target="_blank"> goo </A> <BR>
<A href="http://www.isize.com/" target="_blank"> ISIZE </A> <BR>
</BODY>
</HTML>
とすると、新しいウィンドウが開き続けます。
【 重要!! 】
『target属性には、ウィンドウ名を指定します』
このtarget属性は、後ほど出てくるフレームでも大きな働きをしてくれます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
18.sample17 「ハイパーリンク その4：Aタグ アンカー1」
──────────────────────────────────────
FAQのページでは、上にタイトル一覧のリンクがあり、その下に詳しい内容が書かれ
ているというのは定石です。これは、同じページの中でリンクしているわけですが、
これもAタグで可能です。
<HTML>
<HEAD>
<TITLE> 同じページの中でのリンク </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="#dorayaki"> どら焼き </A> <BR>
<FONT size="7">
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
</FONT>
<A name="dorayaki"></A><BR>
<FONT color="Red"><B>■どら焼き</B></FONT>
大好きです。<BR>
ドラえもんも大好きです。<BR>
小豆を砂糖でグツグツ煮込んで餡を作ります<BR>
小麦粉(ホットケーキミックスなど)をふんわり焼き上げます<BR>
もう一枚焼きます。<BR>
餡を挟みます<BR>
出来上がり〜♪<BR>
<BR>
</BODY>
</HTML>
ウィンドウを上下に長細くして実行してみてください。
ポイントはまず、飛び先にあらかじめ印をつけておくことからはじまります。
name属性がこれになります。
<A name="dorayaki"></A>
このタグがある場所にジャンプする事が可能になります。
そしてジャンプするには、
<A href="#dorayaki">
とします。
つまり、
<A href="#name属性で指定した名前">
です。
これを、「アンカー(碇)」と呼びます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
19.sample18 「ハイパーリンク その5：Aタグ アンカー2」
──────────────────────────────────────
FAQのページも大きくなると、リストと詳細を二つのページに分けた方が、
いい場合がよくあります。そんなときも、同じようにアンカーを使用します。
■xxxxx.html
<HTML>
<HEAD>
<TITLE> 違うページの指定ポイントへリンク </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<A href="sample.html#dorayaki"> どら焼き </A> <BR>
</BODY>
</HTML>
■sample.html
<HTML>
<HEAD>
<TITLE> 違うページの指定ポイントへリンク </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FONT size="7">
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
↓<BR>
</FONT>
<A name="dorayaki"></A><BR>
<FONT color="Red"><B>■どら焼き</B></FONT>
大好きです。<BR>
ドラえもんも大好きです。<BR>
小豆を砂糖でグツグツ煮込んで餡を作ります<BR>
小麦粉(ホットケーキミックスなど)をふんわり焼き上げます<BR>
もう一枚焼きます。<BR>
餡を挟みます<BR>
出来上がり〜♪<BR>
<BR>
</BODY>
</HTML>
お分かりですね？
<A href="sample.html#dorayaki"> どら焼き </A> <BR>
このようにURLを直前につけることができるのです。
無論、絶対パス、http://から始まる絶対パス、相対パスでの指定が可能です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
20.sample19 「画像を読み込む その1：IMGタグ」
──────────────────────────────────────
さぁ、今度は画像を呼び出してみましょう。
画像があるとやはり、ページが華やかになりますよね！(^-^)
<HTML>
<HEAD>
<TITLE> 画像を貼り付けよう1 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
・画像の読み込み<BR>
<IMG src="sample.gif">
</BODY>
</HTML>
sample.gifは別途用意してください。
GIF形式のファイルなら何でもかまいません。
画像であるなら基本的に何でも指定できますが、ブラウザが対応している
ことが条件になります。Apple社のQuickTimeなどがインストールされてい
る場合は、様々な形式のファイルが読み込めます。
・QuickTime
< http://www.apple.co.jp/quicktime/download/index.html >
※Appleのサイトは何度見ても美しいですね。
インターフェースも分かりやすく非常に参考になります(^-^)
ただ、一般的にはGIFかJPEGを使用します。
GIFの特許問題などから、最近だとPNGが使われることもあるようです。
詳しくは他の書籍か、Webサイトなどをご覧ください。
・ノンデザイナーズ・ウエッブブック
< http://www.amazon.co.jp/exec/obidos/ASIN/4839903328/ref=sr_aps_d_1_2/249-4001552-1093128 >
※ちょっと古いですが、わかりやすく書いてあります。
・わかりやすいPNGの話 for Web
< http://www.mikeneko.ne.jp/~lab/grp/png/ >
・日本ユニシス社
< http://www.unisys.co.jp/LZW/index.html >
ちなみに、iモードはGIF(一部JPEG)、WAP(auほか)はBMP、J-PHONEはPNG形式が
標準だったりします。誰か統一してください(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
21.sample20 「画像を読み込む その2：IMGタグ width,height,alt,border属性」
──────────────────────────────────────
IMGタグには、下記のような属性が存在します。
<HTML>
<HEAD>
<TITLE> 画像を貼り付けよう2 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
・画像の読み込み<BR>
<IMG src="sample.gif"
width="128" height="32" alt="画像" border="0">
</BODY>
</HTML>
・src ..... 画像の場所を指定します。
これまで出てきたタグと同じように、絶対パス、http://から始まる絶
対パス、相対パスでの指定が可能です。
・width ... 画像の横幅を指定します。
width="128"とすると、横幅が128ピクセルと解釈されます。
width="50%"とすると、パーセントでの指定もできます。
オリジナルよりも小さい(大きい)サイズを指定した場合はブラウザに
よって縮小(拡大)が行われます。主にデザインが崩れるのを防いだり、
簡単なサムネイルを表示するのに用いられます。
・alt ..... 画像が表示されない(表示されない設定の)ブラウザで、画像の変わり
にここで指定される文字が表示されます。また画像が読み出されるま
での間表示するブラウザもあります。
※Googleのイメージ検索はこれを利用している？？
< http://www.google.co.jp/imghp?hl=ja >
・border .. 画像を下記のようにリンクさせた場合
<A href="http://www.yahoo.co.jp/">
<IMG src="http://img.yahoo.co.jp/images/recip.gif">
</A>
青い線で画像が囲まれるブラウザがあります。
この線の太さを指定できます。分かりやすい反面、これをかっこ悪
いと思う場合は、0にすると出なくなります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
22.sample21 「段落：Pタグ」
──────────────────────────────────────
HTMLは本来、文章構造を指定するものです。“文章”ということは“段落”が存在し
ます。それをHTMLタグでは、Paragraphの頭文字をとって、Pで指定します。
<HTML>
<HEAD>
<TITLE> 段落を指定しよう1 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<P>段落その1</P>
<P>段落その2</P>
<P>段落その3</P>
</BODY>
</HTML>
IE、NN(NC)では段落のたびに空行が作られるため、一行ほど間を空けるために使わ
れることが多いようです。が、なるべくなら本来の意味通りの使い方をおすすめし
ます。
また、Pタグの属性にalgnというものが存在します。
これは<P>〜</P>の間の表示位置を指定できます。
<HTML>
<HEAD>
<TITLE> 段落を指定しよう2 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<P align="left">段落その1</P>
<P align="center">段落その2</P>
<P align="right">段落その3</P>
</BODY>
</HTML>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
23.sample22 「リスト：ULタグ、OLタグ」
──────────────────────────────────────
リストとして、内容を表示できるタグです。
まずは、ULです。
<HTML>
<HEAD>
<TITLE> リスト1 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<UL>
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</UL>
<UL type="disc">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</UL>
<UL type="square">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</UL>
<UL type="circle">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</UL>
</BODY>
</HTML>
このタグを使わなくても無理やり書くことは可能ですが、後ほど出てくるCSSと
組み合わせて使うことなどもできますので、なるべくタグは本来の意味通り使い
ましょう。
ULと同じほぼ同じ意味を持ちますが、リストに順番をつけたい場合は、OLタグを
使用します。
<HTML>
<HEAD>
<TITLE> リスト2 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<OL>
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
<OL type="1">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
<OL type="a">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
<OL type="A">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
<OL type="i">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
<OL type="I">
<LI>しゃけ
<LI>めんたいこ
<LI>うめぼし
<LI>おかか
<LI>ツナ
</OL>
</BODY>
</HTML>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
24.sample23 「テーブル： TABLEタグ その1」
──────────────────────────────────────
テーブルとは、その本来の意味通り表(テーブル)を作成するものです。
Excelのような表を、ページの中に埋め込めます。
※もちろん計算はできません(^^;
<HTML>
<HEAD>
<TITLE> テーブルを使おう！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3">
<TR>
<TD>あ</TD>
<TD>い</TD>
<TD>う</TD>
<TD>え</TD>
<TD>お</TD>
</TR>
<TR>
<TD>か</TD>
<TD>き</TD>
<TD>く</TD>
<TD>け</TD>
<TD>こ</TD>
</TR>
<TR>
<TD>さ</TD>
<TD>し</TD>
<TD>す</TD>
<TD>せ</TD>
<TD>そ</TD>
</TR>
</TABLE>
</BODY>
</HTML>
テーブルには本当に様々な使い方があります。
列や行を連結したり、背景色や背景画像を指定したり.....などなど、一度では
書ききれません。
今回すべてお届けするつもりでしたが、書きたいことがたくさん出てきましたので、
もう少しだけお付き合いください。よろしくお願いします( ^.^)( -.-)( _ _)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
むー、書いていると止まらなくなってしまいます(^^;
すでに001でお話した予定とはずいぶんとかけ離れてしまいました。
申し訳ないですが、もうしばらくお付き合いください。
その分ビシッ！と解説いたします。
先々週、クルマのバッテリーが上がってしまいました(^^;
ソケットから電源を取っているMDをつけっぱなしにして、2週間くらいほっといたの
が原因でした。
おかげで生まれて初めてJAFのお世話になりました。会員だったため一万円くらいの
料金はタダだったのですが、先週と今週は充電のためひたすら走り回る羽目に(ーー;)
300kくらい走ってもまだバッテリーが回復しません。
う〜ん、来週も走り回らないといけないのかなぁ。
まさに師走（笑）
※ベタやなぁ(^^;
さてさて、みなさんからのご意見やご質問は随時受け付けております。
お気軽にお寄せください(^^)/
< mm-webp@ichikoro.com >
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1275部(前回)
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】---
