Code005: HTMLとは何か!(後編)

この記事は2001年に書かれた物です

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 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="mailto: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くらい走ってもまだバッテリーが回復しません。
う〜ん、来週も走り回らないといけないのかなぁ。
まさに師走(笑)
 ※ベタやなぁ(^^;


さてさて、みなさんからのご意見やご質問は随時受け付けております。
お気軽にお寄せください(^^)/

    < mailto:mm-webp@ichikoro.com >


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

                   【 Webプログラミング Code Sample 】

                    発  行 : ichikoro.com
                発行責任者 : 勝部 麻季人
                              < mailto:katsube@ichikoro.com >
                  発行部数 : 1275部(前回)
                 Webサイト : < http://www.ichikoro.com/webp/ >
            お問い合わせ先 : < mailto: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】---

コメント

コメントを入力. Wiki文法が有効です:
U M᠎ D S F