2007年03月22日

[HTML]ホームページ製作講座Aタグ

ん、もうみんな飽きたということで終了でおk?



というわけで、第5回は昨日までに語れなかったタグについてお話いたします。

現在インターネットにおいて(それ以外の場所でも)なぜHTMLがここまでも発展したのでしょうか。それはHTMLにはこれから紹介するハイパーリンクという技術が実装されているためでしょう。ハイパーリンクというと凄そうな印象ですが、要するにみなさんがインターネット上のページでたどるリンクのことです。

いまや常識ですが、改めて考え見るとあれはすごいと思いませんか?言ってしまえば世界中の文章が一つにつながった感じです。例えばこのHTML講座も僕の力量が足りないところはリンクを貼ってここを参照してくださいって言えばそれだけで説明はついたようなものですね。(やりすぎると僕の存在価値がなくなりますが。。

では、その大変にすごいハイパーリンクですが、HTMLでは一体どうなっているのでしょうか。

もちろんご想像通り、これもタグですね。


<A></A>

A要素は参照するファイルへのURLを文章に貼り付けます。読者はこのタグに囲まれた文字列(或いは画像など)をクリックすことによってダイレクトに筆者が参考してほしいURLに飛ぶことが出来ます。
使い方は、

<A href="参照ファイルのURL">実際に文書で表示する文字</A>

例えば僕のもう一つのサイトピピネラ座に飛ばしたいときには、

<A href="http://pipp.cosa2.com/">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

実際の文章にはこのように表示されます。ピピネラ座はこれからHPを作る人のためにフリー(無料)で使える素材を提供している素材サイトです。ここで得たHTMLの知識をすぐ発揮したいけど、ページを整えるためのイラストやアイコンがないという方は是非訪れてみてください。(じゃなくてもリンクを体験するために一度飛んでみるといいかもしれません。ハイパーリンクの便利さが体験できます。

前にも言いましたが、タグには要素のほかにもプロパティという項目が設定できます。Aタグの場合にはhrefというプロパティでリンク先のURL、またはファイルへのパスを指定することが出来ます。またこのほかにもtargetプロパティがよく使われます。これはリンク先のURLをどのウィンドウで開くかを設定するものです。

例えば、現在のページを表示しているウィンドウにリンク先のページを表示したい場合には、

<A href="http://pipp.cosa2.com/" target="_self">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

上のリンクとの違いは実際に押してみると分かりますが、新しいウィンドウが開かず、いまのウィンドウで内容が表示されます。戻るときにはブラウザの戻るボタンを押してください。

同じウィンドウに表示してしまった場合今見ている内容はもちろん消えてしまいますので対比してほしいときなどには新しくウィンドウを開いてほしいときがあります。そんなときにはtargetプロパティに次のように指定します。


<A href="http://pipp.cosa2.com/" target="_blank">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

このようになります。違いはやっぱり実際に押してみてください。ちなみに、targetプロパティを指定しなかった場合にはどうなるかといいますと、前にも言いましたとおりにタグはブラウザによって独自に解釈されていますので、ブラウザの設定によって動作は異なるようです。僕のIE6の環境ではtarget="_self"と同じ動きをしました。



Aタグのように同じタグにいくつものプロパティがあることがあります。Aタグにも上に紹介した以外にもプロパティがありますし、以前紹介したタグ要素のほとんどにもプロパティが存在します。ただしこれらは普段あまり使われないので、実際に使うときに調べるといいでしょう。ここらへんもなれが必要です。HTML タグ などと検索してみるといろんな資料が見つかりますし、この講座でも今後必要に応じて紹介していきます。


少々短いようですがリンク要素はそれだけ大切ですので今日はここまでにしておきましょう。


注:インターネット上のサイトにはこのページにはリンクを貼らないでくださいやリンクはトップページにお願いしますなどといった注意書きをよく目にすることがあります。そのような場合にはサイトの管理人の都合がありますので、素直に従ってあげてください。
posted by ラリコ at 02:03 | Comment(0) | TrackBack(0) | 小技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。