バカネコ日記

フリーページ

2004年07月01日
XML
カテゴリ:カテゴリ未分類

 
今回は講師が遅刻してしまったので、即、始める。

リンクの基本形は 

  <a href="URL">テキスト</a>

であった。 忘れた方や、追記を見ていない方は前回のページを
もう一度おさらいしてほしい。

寄り道だが、ここでHTMLのパターンを見てみよう。
HTMLはタグというものを使って記述するのであった。

タグとは、こんな半角のカッコ <> で囲んだものである。
リンクなら <a> 太字指定なら <b> イタリック指定なら <i>
などである。

これらは「ここからタグの内容を適用しますよ」という意味であり、
開始タグと呼ばれる。
これに対して「ここでタグの効力はおしまいだよ」と示すのが終了タグである。

リンクなら </a> 太字指定なら </b> イタリック指定なら </i>
何のことはない、単にスラッシュが付いただけである。

そして、タグの使い方は適用したい文字列を開始タグと終了タグで挟むだけだ。





実演してみよう。


ここで<b>里親募集</b>しています。 ←HTMLソース
    ↓
ここで里親募集しています。    ←ブラウザ上での表示


ここで<i>里親募集</i>しています。 ←HTMLソース
    ↓
ここで里親募集しています。    ←ブラウザ上での表示


なんという安直なルールであろうか。
考えた奴はきっと安直な性格だったに違いない。←偏見

これでもHTMLは難しいとおっしゃるかな?
実際のところはきわめて単純なルールで構成されているのである。
若干の例外はあるものの、所詮はこの組合せなのだ。




ちょっと待て! リンクの場合はもっとややこしいじゃないか!

確かに、そのとおり。
タグで挟むだけならネコでも書けそうだ。

リンクの場合、開始タグの中に「href="URL"」というあて先を書かなければ
役に立たなかった。
実はHTMLを見づらくしているのは、このパラメータも元凶のひとつである。

しかし、このパラメータのおかげで、単純なルールにも関わらず、タグは
実に多様な指示をすることが出来るのである。
まあ、HTMLのルールは単純だということと、パラメータがいろいろあるよ、
ということだけ覚えておけば良かろう。




手を広げすぎると、何の説明だか分からなくなるので、リンクの話に戻る。

さて、今回はテキストではなく画像をリンクさせてみよう。
基本形は
<a href="URL">テキスト</a>
であった。

この、テキストの部分を画像に取り替えるだけの話である。したがって、

<a href="URL"><IMG SRC="画像のパス"></a>

となる。 簡単でしょ?



この、<IMG>が画像を表示する開始タグであり、SRC="画像のパス" が
「画像はここにありますよ~」というパラメータである。
パスというのは画像をおいてある場所+ファイル名である。
楽天日記では通常URLと同じ形式で示す。

ここで、リンクの飛び先URLと混同しないように注意すること。
片方はリンク先を示し、もう片方は画像の置き場所を示すものだ。


実際に書いてみる。
リンクの飛び先をこのサイトのアクセスログ
http://plaza.rakuten.co.jp/nyancolon/?func=log とし、
画像はミケの写真を使ってみる。


<a href="http://plaza.rakuten.co.jp/nyancolon/?func=log"><IMG SRC="http://plaza.rakuten.co.jp/img/user/49/28/5934928/39.jpg"></a>

実際のブラウザ上の表示は以下のようになる。
クリックすれば当サイトのアクセスログのページへジャンプする。




<IMG>タグの中には他にもサイズ指定や代替文字指定などをぶち込むことが出来る。

たとえば

<IMG SRC="画像のパス" width="320" height="240" alt="目が開いたミケ">

もう、お気づきだろうが、widthが横幅指定、heightが高さの指定である。
この数字をいじれば、元画像を編集することなく、見かけの大きさを変更できる。
もっとも画像の重さとか、きめの細かさは変わらない。
見かけを小さくしても容量は減らせないし、拡大すれば画面は粗くなる。

altは、本来は画像が表示できない場合にその代替として表示される文字列だ。
画像が表示されている場合は、マウスカーソルを画像の上にあわせると
まるで説明文のような感じで出てくるアレである。


今回ここまで。



この記事がおもしろかったと思う人は1票! クリック → おもしろかったらクリックしてね








最終更新日  2004年09月08日 16時16分51秒
コメント(14) | コメントを書く

■コメント

お名前
タイトル
メッセージ
画像認証
別の画像を表示
上の画像で表示されている数字を入力して下さい。


利用規約に同意してコメントを
※コメントに関するよくある質問は、こちらをご確認ください。


 Re:手抜きHTMLリンク 第2講(07/01)   うにねこ さん
遅刻した講師の話を 遅刻して聞きに来ました 生徒Aです。

altも変える事出来たんですね~うっしっし・・。
ありがとうございます。

今日は ちょっと贅沢なビールを飲みつつお勉強しました。 (2004年07月03日 19時01分12秒)

 うにねこさんへ   海獣トド さん
>遅刻した講師の話を 遅刻して聞きに来ました 生徒Aです。

廊下に立ってなさい...って、今日は言えないのかぁ。

>altも変える事出来たんですね~うっしっし・・。

けっこう、いじりがいがあって楽しそーでしょ?

>今日は ちょっと贅沢なビールを飲みつつお勉強しました。

ああーっ、いーないーな。エビスだな、さては?
我が輩にも飲ませろ~!

どうもビールの話になると急に意地汚くなるトドであった。
暑さのせいか、品性が足りないせいか...。

(2004年07月03日 19時39分46秒)

 Re:手抜きHTMLリンク 第2講(07/01)   1967ひめ さん
ごめんなさい、私も遅刻しました。

はやく試せば良いのに、なかなか試せないぐずな生徒です。

私は牛乳酎飲んでます。(焼酎の牛乳割り (2004年07月04日 00時31分41秒)

 1967ひめさんへ   海獣トド さん
>ごめんなさい、私も遅刻しました。

ハイ、あなたグラウンド10周ね。(←イヤミな体育女教師風)

>はやく試せば良いのに、なかなか試せないぐずな生徒です。

早くしないと居残りにゃん。

>私は牛乳酎飲んでます。(焼酎の牛乳割り

うっ、酒好きのわしも、そ、そりは...。
(2004年07月04日 00時45分36秒)

 Re:手抜きHTMLリンク 第2講(07/01)   カーペントリーさと森 さん
 ホームを訪問していただき、ありがとうございます。タグについては、まだまだ学習中で、いろいろ参考にさせていただきます。
ありがとうございました。 (2004年07月04日 20時29分55秒)

 Re:手抜きHTMLリンク 第2講(07/01)   どら美 さん
こんばんは、海獣トド先生!
第2講、今頃見に来ました。大遅刻(笑

とても分かりやすくまとめてありますね~
今度、どらみの弟子たちに教えるときに使わしてください☆
物事を文章で分かりやすく説明できる才能、どらみも欲しいです…

ちなみに3日はバーベキューで久しぶりにビールを呑みました。
多分、授業中ではないはず…(汗 (2004年07月04日 22時35分44秒)

 カーペントリーさと森さんへ   海獣トド さん
>タグについては、まだまだ学習中で、いろいろ参考にさせていただきます。

おおー、きばりやぁ! (2004年07月05日 03時15分58秒)

 どら美さんへ   海獣トド さん
>こんばんは、海獣トド先生!
>第2講、今頃見に来ました。大遅刻(笑

またか。

>とても分かりやすくまとめてありますね~
>今度、どらみの弟子たちに教えるときに使わしてください☆

当然の著作権料としてバーベキューとビールを要求する。

>ちなみに3日はバーベキューで久しぶりにビールを呑みました。
>多分、授業中ではないはず…(汗

ばかもの! 授業中じゃ。 廊下に立っとれ!
ん? まてよ、今回は特別に酒気帯び出席OKにしたんだっけ? わりーわりー。
(2004年07月05日 03時22分10秒)

 出来ましたよ~♪   こももちゃん4363 さん
<a>,<b>,<i>初めてやってみました。画像はまだやってませんが、<A hret="URL">テキスト</a>もやってみました。
リンク出来ました。うれしーい。感激で~す\(^o^)/
有難うございました。

(2004年08月16日 15時52分08秒)

 Re:出来ましたよ~♪(07/01)   海獣トド さん
こももちゃん4363さんへ

><a>,<b>,<i>初めてやってみました。画像はまだやってませんが、<A hret="URL">テキスト</a>もやってみました。
>リンク出来ました。うれしーい。感激で~す\(^o^)/

あらまあ、感激ですか。私も嬉しいです。
良かったですね。
(2004年08月16日 16時01分08秒)

 画像に複数のリンクを貼るには?   スナネズミッキー さん
たびたび教えてもらい、お世話になってます!
また1つあるんですが…1枚の画像に複数のリンクを貼るのは楽天ブログで可能でしょうか?
日本地図に北海道、東北、などの字を入れてその字をクリックしたら別ページに飛ばしたいんです。ネット見たり人に聞いたりしてやってみてるんですが、受け付けないタグがあったりで出来ません~。 (2008年09月14日 22時33分24秒)

 スナネズミッキーさんへ   海獣トド さん
>また1つあるんですが…1枚の画像に複数のリンクを貼るのは楽天ブログで可能でしょうか?

基本的に1つの画像には1つしかリンクは張れません。

>日本地図に北海道、東北、などの字を入れてその字をクリックしたら別ページに飛ばしたいんです。

それは、クリッカブルマップを使えば可能ですが、
初心者にはかなりややこしい上に、楽天では
使えなかったと思います。
楽天では使用可能なタグは限定されているのです。

無理やり実現する方法もあるでしょうが、
それなりの技術を要します。

(2008年09月15日 11時19分56秒)

 Re:スナネズミッキーさんへ(07/01)   スナネズミッキー さん
そうか~基本ダメだと分かるとすっきりしました!
別の方法で頑張ってみます、ありがとうございました! (2008年09月15日 13時57分40秒)

 スナネズミッキーさんへ   海獣トド さん
>そうか~基本ダメだと分かるとすっきりしました!

どういたしまして。

>別の方法で頑張ってみます、ありがとうございました!

画像をいくつか組み合わせるという手もありますが...
面倒です(笑)

(2008年09月18日 20時51分45秒)

PR

バックナンバー

2019年09月
2019年08月
2019年07月
2019年06月
2019年05月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.