スタートアップ研修記

こんにちは。hirafujiです。

今日は前回に引き続きa要素と、img要素について勉強しました。

【a要素】

【shape】

イメージマップの形状を指定する。

• rect:四角形
• circle:円状
• poly:多角形
• default:画面全体

【cords】

イメージマップの座標を「,」で区切って指定する。

【tabindex】

TABキーを押した時の、フォーカスの移動の順番を指定する。

【accesskey】

ショートカットキーを指定する。

【target】

リンク先の文書を表示するウィンドウを指定する。

【img要素】

画像を表示する。指定できる属性は以下の通り。

【src】※必須

表示される画像のURLを指定する。

【alt】※必須

画像が表示できなかった時に、画像の代わりに表示されるテキストを指定する。

【longdesc】

表示する画像の詳細な説明のあるページのURLを指定する。

【width】

画像の横幅を指定する。

【height】

画像の高さを指定する。
なお、widthとheightはピクセル数以外にも％でも値を指定できる。

今回は時間が足りなかったので、img要素の続きはまた次回ということになりました。

ということで、早速ですが、今日習った範囲で実際に画像を表示してみようと思います。

【コード】

<img src='http://www.dino.co.jp/images/www/index_logo.gif'
 alt='株式会社ディノのロゴ' longdesc='http://www.dino.co.jp/'
 width='150%' height='150%' />

【表示結果】

なんだか大きいですが、とりあえずちゃんと表示されました！

今までなんとなく使っていたimg要素でしたが、改めてしっかり学んでみると「altって書いてなかった！」「画像の大きさって、%でも指定できるんだ！」などなど、今までどんなにダメダメな使い方をしていたか思い知らされました。
これからはちゃんと気をつけて書こうと思います！

—-
(2008/06/26 17:55 hirafuji追記)
動画をご覧下さい！
part.1

part.2

part.3