[トップページへ] [←前のページへ] [→次のページへ]


HTML文書をメモ帳で作ってみよう

第04回:HTML文書をメモ帳で作ってみよう!4:リンクと画像

ここまで分かれば一通りのwebサイトは作れるでしょう

今まで覚えた要素以外で、一般のwebサイトで使われている要素には何があるでしょうか?
画像、他のページへのリンク、表組み、文字の装飾、フレームなどでしょうか。

では、簡単なところで、他のページへのリンクから作りましょう。
リンクには、A要素を使用します。「index.html」から、他のページ「other.html」にリンクさせるページを作成するには、以下のように書きます。

ここにあるのは、<a href="other.html">他のページへのリンク</a>です。

Aの後に、スペース等で区切った後「HREF="リンク先のURL"」というものを書く必要があります。
HREFは何の略でしょう?ハイパーリンクの参照先、といったような意味を持つと思います。
要素名以外のこういったHREFの様な記述を「オプション」といいます。
各要素には、こういったオプションが必要なものが多数ありますので、解説サイトなどを参考にすると良いでしょう。

例えば、A要素には、他にも「TITLE」というオプションが用意されています。リンク先の簡単な解説をこのTITLEに書いて、教えてあげるんです。

こういった文章に現れない配慮をすることで、もし目の見えない方がページを専用のブラウザで閲覧した場合(この場合は音声で案内する形になるでしょうか)、 リンク先へ行かないと内容が全く分からないということを少しだけ和らげることができるのではないでしょうか。

ここにあるのは、<a href="other.html" title="こんな感じのページです。">他のページへのリンク</a>です。

オプションを記述する順番などは決まっていないので、<A TITLE="xxx" HREF="xxx.html">などと書いても大丈夫です。
リンクのアンカーにする文字(ここで言うと「他のページへのリンク」ですが)は、「ここ」とか「こっち」などではなく、リンク先のページ内容を推測できるようなアンカーを持たせると、より見やすいページにすることができます。(01/12/06)

これでリンクもできるようになりましたね。では、次は画像の表示をしてみましょう。

画像を表示させるには、IMG要素を使用します。
IMG要素には、オプションとしていろいろな物が用意されていますが、 ここでは一般的に必要と思われるSRC,WIDTH,HEIGHT,ALTについて説明します。

まず、画像を用意しなくてはいけませんね。
例えば、「sakura.jpg」という、さくらの絵の描かれた横100×縦80の大きさの画像があって、これをページに使用したいとします。

画像を表示してみました。→<img src="sakura.jpg" width="100" height="80" alt="さくらの画像です。">

SRCに、画像の置いてあるURLを書き、WIDTH,HEIGHTは画像の大きさを、ALTには画像が見られない時や、読み込みが遅い場合のための代わりのコメントを書いておきます。
WIDTHとHEIGHTは省略しても良いのですが、ブラウザは画像を読み込むまで画像の大きさが分からないので、レイアウトが崩れたりすることがあります。
ALTは、iモード用のページなど、容量をどうしても削減したい場合以外は必ず記述しましょう。画像を読み込まない設定にしてあって、「これは何の画像だろう?」ということを考える訪問者の方もいるかもしれませんから。

これで残るは表組み、文字の装飾、フレームとなりました。
もう、他の解説サイトを見ながらでも、HTMLの要素を覚えられる知識が付いているのではないでしょうか。
とりあえず一通りやるべきでしょうかね…念のため(^^;
次回は表組みを…。

Author: tkm / せかんどすたいる

[トップページへ] [←前のページへ] [→次のページへ]