HTMLの呪文（２）

  • 投稿日:
  • by るじ
  • カテゴリ:

ページを作ってリンクでつなげてみます。

こんなかんじで、もくじページから各ページにリンクをつけました。リンクした先のページからもくじに戻ってこれるようにもしました。
ファイルは、全部同じ階層にあります。同じフォルダーに入ってるともいいます。

index.html　もくじ　トップページ

各ページ。それぞれに１枚絵を表示してます。
oekaki.html
20070912.html
20070913.html

呪文はどーなってるのか、ここにずらっと載せると長くなるので、それぞれのページに行って、ブラウザのメニューから、　表示→ソース　をするとのぞけますので、のぞいてみてください。

リンクの呪文基本は、<a href="url"></a>です。

<a href="oekaki.html">ミハリバン</a>

て、書いておきますと、ミハリバンの文字をクリックするとoekaki.htmlのページに行きます。
これは、同じ階層にある場合。

ひとつ上の階層にリンクするときは、

../index.html

と、書きます。../をつけます。２つ上だと、../../になります。
下の階層に行く場合、たとえば、index.htmlがトップの階層にあって、imagesというフォルダーの中のoekaki.htmlにリンクしたいときは、

images/oekaki.html

と、書きます。

http://から全部書いてしまえば、どこにあってもリンクします。

文字にリンクをつける他、画像をクリックしたらリンクすることもできます。
たとえば、もくじページのリンクを文字でなく縮小した画像をこんなかんじで使ってみたり。

index2.html

書き方は、

<a href="oekaki.html"><img src="20070606k.jpg" width="60" height="80" alt="ミハリバン"></a>

です。 width="60" height="80" のとこが、画像のたてよこサイズです。実際には、 width="240" height="320" の大きさの画像を小さく表示してます。ウインドウズだと、たしか、縮小表示した画像はきれいじゃなかったんですが、、、。

<a href="oekaki.html">ミハリバン</a>

と、書くと、クリックしてリンクすると、今いたところから移動するかんじですが、

<a href="oekaki.html" target="_blank">ミハリバン</a>

にすると、別のウインドウを開きます。

<a href="20070606k.jpg" target="_blank">

と、書けば、画像にリンクもできます。

そして、別ウインドウを開くとき、ウインドウのサイズを指定したいとか、表示する絵の位置を少し余白をとって真ん中にとかとか技もあるんですが、また別の呪文が出てきますのです。

文字の大きさ、フォントの種類、色を変える、背景に絵を入れるなどなども、また別の呪文がーー。