初級編9

 リンクボタンをつけよう
   ボタンひとつで目的のページに飛ばすって難しそう。


『答え』 大丈夫です。 飛ばす先がある限りはどこへでも。

これまた、決まった書式でビュンと飛びます。では、サンプルを。

<A HREF="https://www.google.com/">グーグル検索へ飛ぶ。</A>

<A HREF="https://misteroz.net/">花鳥風月サイト</A>

リンクの書式は、 <A HREF="〇〇〇"> です。 この〇〇〇がジャンプする先の住所。グーグル検索の住所が https://www.google.com/ という意味なのです。 別の言い方で URL とも言います(uniform resource locatorの略)。
使い方はサンプルの通り、 <A HREF="〇〇〇"> リンク先の名前 </A> となります。 このリンク先の名前の部分にカーソルを当ててクリックするとジャンプ!という仕掛け。リンク先の名前というよりもクリックゾーンという方が適切ですね。
複数ページのサイトを作られた場合にページを捲ることもリンクボタンの仕事になります。かなり身近な機能です。

上記のサンプルは文字をリンクボタンにしていますが、画像データをリンクボタンに使うことも多いですね。こんなボタンは如何でしょう。
画像の取り込みはマスターしてますよね?画像の上で右クリック「名前を付けて画像を保存」ですよね。このgogoボタンを取り込んで下さい。それを使った書式は下記の通り。

<A HREF="https://www.google.com/"><IMG SRC="go.gif"></A>

ページのジャンプ以外に、ホームページ見た方からメールを送って戴くためのリンク書式にも使います。

<A HREF="mailto:〇〇〇">メールを送って!</A>
〇〇〇は貴方のメールアドレスを書き込みます。

前の項で作成中のabc.htmlにリンクボタンを加えてみましょう。

<HTML>
<BODY BGCOLOR="YELLOW">
<center>
<FONT SIZE=5>
<FONT COLOR="BLUE">
私は○○○。これは私のホームページです。
<BR><BR>
<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="MSM.jpg"><br>
</td></TABLE>
</TD></TABLE>
</td></table>
</FONT>
</font>
</center>
<BR>
<DIV align="right">
<font color="green" size=4>
コンテンツを増やして行くのでご期待ください。
</font>
</DIV>
Google検索→<A HREF="https://www.google.com/"><IMG SRC="go.gif"></A>
お問合せ→<A HREF="mailto:〇〇〇">メールを送って!</A>
</BODY>
</HTML>

ブラウザで見てみましょう。●ココをクリック●して下さい。
ほら、GO!GO!のボタンにカーソルを宛てると指の形になるよね!?。クリックすると「グーグル検索」ページに飛んで行きます。
「メールを送って!」の方はメールソフトが立ち上がるという仕掛けです。
どうですか。基本的なリンクの書式は把握できましたか。以上が理解できたら、リンクボタンの項目は修了です。

☆彡main point
 ・<A HREF="○〇○"> △△△</A> がリンクボタンの書式。
 ・○〇○が飛んでいく先の住所、△△△がボタンの役目。
 ・<A HREF="mailto:□□□"> ▽▽▽</A>でメール。
 ・□□□にメールアドレスを記入。
 ・リンクボタン役の△△△と▽▽▽は画像もOK。アニメGIFでも構いません。


質問メール  SCHOOL MENU