第2章 ホームページらしくしよう

1:いきなりリンク

さっそくですが、ホームページの醍醐味、リンクをしてみましょう。
以下のように打ち込んでセーブし、ブラウザで開いてみて下さい。
リンクを指定したところが赤く(別の色の可能性もあります)なっているはずです。
そして押してみてインフォシークのぺーじが現れればリンクは成功です!

▲使用例▲

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
    "http://www.w3.org/TR/REC-html40/frameset.dtd">

<HTML>
<HEAD>
<TITLE>インフォシークへのリンク</TITLE>
</HEAD>
<BODY>
<A href="http://www.infoseek.co.jp/">インフォシーク</A><BR>
</BODY>
</HTML>

さて、インフォシークへ行けたでしょうか?
ちなみに当たり前ですが、インターネットに繋いでないといけません。
繋いでいないときにリンクを押すと、接続画面が出ます。それでも成功です。
では以下にリンクの元、A要素を説明していきます。

A
Aはアンカーリンクの略です。これを使うと別のページへ簡単に結びつけることが出来ます。
HREFに相手のアドレスを入力すれば完成です。オプションにどこに表示するか、リンク先はどんな物か、等を指定できます。
またAを使うと、リンクをするだけでなく!リンクされる場所にもなります。
そして、普通の要素に「id属性」か「name属性」を使って名前を付けると、そこにリンクすることも可能です。(IEのみ)
IEでは、「title属性」でリンク先の説明をバルーン表示をすることができます。
そのたいろいろあるので、知りたいかたはリファレンス編で調べて下さい。

▲使用例▲

<A href="http://www.infoseek.co.jp/" title="infoseek JAPAN">絶対パスでの指定です</A><BR>
<A href="index.html">相対パスでの指定です</A><BR>
<A href="http://www.yahoo.co.jp/" taget="_blank">新しいWindowを作って開きます</A><BR>
<A href="http://www.goo.ne.jp/" target="_top">フレームの影響を受けずに開きます</A><BR>
<A href="../l_kakutyoshi.html" accesskey="k">Alt+Kでここが選択されます</A><BR>
<A name="anchor">ここがアンカー先</A><BR>
<A href="#anchor">ここをクリックすると↑に行きます</A><BR>
<H2 id="anchor2">ここもアンカー先</H2><BR>
<A href="#anchor2">ここをクリックすると↑に行くんだね</A><BR>
絶対パスでの指定です
相対パスでの指定です
新しいWindowを作って開きます
フレームの影響を受けずに開きます
Alt+Kでここが選択されます(IEのみ)
ここがアンカー先
ここをクリックすると↑に行きます

ここもアンカー先

ここをクリックすると↑に行くんだね(IEのみ)


相対パスについて
さて、普通URIは絶対URIで示します。絶対URIとは全部アドレスを書いたものです。
そして簡単につかえる相対URIという物もあります。これはファイル名など少しだけですむので便利です。
以下に説明をしてあるので覚えて下さいね。
▲相対パスの説明▲
ファイル名のみtest.html同じディレクトリのそのファイルを参照します。
一つ上のディレクトリ../index.html一つうえのディレクトリのファイルを参照します。この場合は一つ上のindex.html。
一つ下のディレクトリomake/index.htmlそのディレクトリの中のファイルを参照します。この場合は「omake」内のindex.html。
同じ階層のディレクトリ../test/test.html一旦、上に上がってから目的のディレクトリを指定します。

2:文章の構成法

ここでは、文章をいろいろ整形する方法を教えます。
とくに「BR」「HR」「DIV」あたりは覚えましょう。
一番下に使用例を書いてあります。

1:BR
BRを使うと改行する事が出来ます。
逆に言うと、どんなに改行しても「BR」無しでは改行されずに表示されてしまいます。
使い方は、改行したいところに「<BR>」と入力するだけです。
また画像等のオブジェクトに対しては、clear属性により改行位置を指定することもできます。

2:HR
HRを使うと、区切り線を引くことが出来ます。
この区切り線は、長さ、太さを指定したり、べた塗り型にしたり出来ます。
使い方は「<>」と入力するだけです。

3:PRE
PREを使うと、書いた文章をそのまま表示させることが可能です。
たとえばBRを使わずに改行ができたり、空白も有効になります。
表示は等幅フォントで行われるようになります。
しかしタグはそのまま有効なので、気を付けて下さい。

4:P
P要素は、段落を指定します。よって入れ子にはできません。
よく1行あけるのに使われるみたいですが、そのときには「<BR><BR>」とするのが正しいし、分かりやすいです。

5:DIVSPAN
DIVやSPANは、囲んだ所をグループ化するなどの意味があります。
実際の使用時には、囲んだ所を中央寄せしたり、スタイルシートで修飾したりできます。
SPANは短い文(インライン)に、DIVは長い文章(ブロック)に使われます。

6:BLOCKQUOTEQ
引用文を表すのに使う要素です。
IEやNNでは字下げで表示されます。
BLOCKQUOTEは長い文章に、Qはちょっとした語句に使われます。

▲使用例▲

あいうえお<BR>
かきくけこ<BR>
さしすせそ<BR>

<HR>
<HR width="50%" align="right" size="5" noshade>
<HR width="300" align="left" color="red">

<PRE>
このなかでは
  <FONT COLOR="Navy">BR</FONT>無しでも
    改行可能です
</PRE>

<P>
第一章<BR>
あいうえお<BR>
かきくけこ<BR>
</P>
<P>
第二章<BR>
さしすせそ<BR>
たちつてと<BR>
</P>

<DIV align="center">
ココの部分はまとまって中央寄せされます。<BR>
いろいろ<SPAN style="color:red;">便利</SPAN>なので覚えておきましょう。<BR>
</DIV>

<BLOCKQUOTE>
引用文を表します。<BR>
そして字下げされます。<BR>
かならず字下げされるとは限りません。<BR>
注意しましょう。<BR>
</BLOCKQUOTE>

あいうえお
かきくけこ
さしすせそ



このなかでは
  BR無しでも
    改行可能です

第一章
あいうえお
かきくけこ

第二章
さしすせそ
たちつてと

ココの部分はまとまって中央寄せされます。
いろいろ便利なので覚えておきましょう。
引用文を表します。
そして字下げされます。
かならず字下げされるとは限りません。
注意しましょう。



カラフルだなぁo/)~~(^^)
Copyright(C) 風浪へぽぽ
★INDEX★