ホームページの言葉を覚えよう(3)

トップ > ホームページの言葉を覚えよう(3)
★文字の飾りつけ。
先ずは前回の復習です。前回、<font>というタグの使い方を説明しました。
<font size="6">文字!</font>
このように書くと、文字!になることを説明しました。

前回中途半端に説明を終わってしまった<b><u><i><s>等の使い方を説明します。
<b>タグは、 <b>文字!</b> というように使います。
こうすると、 文字! というように、太字になって、目立たせることが出来ます。
<u>タグの説明です。 <u>文字!</u> と書くと、
 文字! と、下に傍線がついて目立たせることが出来ます。
<i>というタグは、 <i>文字!</i> と書きます。
そうすると、 文字! というように、斜体(イタリック)をかけ、目立たせることが出来ます。
<s>というタグを <s>文字!</s> このように使って、
文字! と、抹消線をつけることが出来ます。


また、これらのタグは、組み合わせることが出来、
文字!
というような表現も可能です。
実際、これは今まで出たタグを重ねて使っただけなので、皆さんも、同じようにやってみてください。
<font face="HG丸ゴシックM-PRO" size="6" color="#ff0000"><b><i><u>文字!</u></i></b></font>
と、書きました。

■演習問題
(1) 次の題文と同じ修飾の文字をタグで表示せよ。
ただし、フォントの大きさは 2 、文字色は #0000ff 、 書体は MS 明朝 とする。
題文: WWWとは、ワールドワイドウェブの略です。

※解答を採点したい方は こちら に、次のように送ってください。
後日、正しい解答とアドバイスを書いて送信させていただきます。
件名:「演習問題の解答」
本文:(問題番号) 貴方の解答、返信先メールアドレス (HNなしで構いません)。

★リンクをしよう!
さて、大体ひとつのページが完成するくらいのスキルは身についたのではないでしょうか。
なので、もうひとつページを作って、つなげる方法を教えましょう。
――――リンクです。正式には「ハイパーリンク(HyperLink)」といって、Linkという単語には
連結するという意味があり、ファイルとファイルが連結されたようになります。

タグを説明するのは簡単なんですが、同時に予備知識として、「パス」というものを説明します。
コンピュータを使っていると何かと必要な知識ですので、是非覚えましょう。
何も難しくはありません。
先ず拡張子が表示される設定にしてください。
Windows98の場合「エクスプローラ」 の 「表示(V)」 から 「フォルダオプション(O)」 を選びます。
Windows2000の場合、エクスプローラの 「ツール(T)」 から 「フォルダオプション(O)」 を選びます。
そして、図の赤いまるで囲ってある「登録されているファイルの拡張子は表示しない」の
チェックをはずします。他は、いじらない方が無難です。
図。
※他の部分を下手にいじると大変なことになります。当方では一切の責任は取れません。※


そうしたら次の図のようなディレクトリ構成を想定します。
別にフォルダの名前は大文字である必要はありませんが、便宜上、大文字にしてあります
(フォルダ→Windowsでの呼び名 / ディレクトリ→サーバ上での呼び名)。
図。
リンクのタグは <a href="リンク先"> です。
リンク先を指定するとき、先に述べた「パス」というものが必要です。
まず、「相対(あいたい)パス」を説明します。

とりあえず「index.html」の目から見てみましょう
すると、「aaa.html」というファイルは同じフォルダにあります。
同じフォルダにある場合、 <a href="ファイル名"> となります。
(ファイル名の前に './'をつける人もいる。これは同じフォルダを示す記号で、
あっても無くてもよいため、ここでは省きます。私も省いております。)
逆にいうと、フォルダを指定していないときは同じフォルダを指定したものとみなされます。

「bbb.html」というファイルは、「index.html」から見ると同じフォルダにあるBBBフォルダにあります。
つまり、ひとつ下の階層にあるといえます。
この場合、<a href="下の階層のフォルダ名/ファイル名">とします。

もし、仮に、BBBフォルダの中に更にフォルダ[DDD]の中に
ファイル[fff.html]があった場合、「index.htmlから」
<a href="BBB/DDD/fff.html"
というタグを書きます。理解できましたか?

ここで使う / (スラッシュ) は WindowsやMS-DOSで言うところの \ のように
フォルダを区切る記号です。URLを観ると解りますね。
たとえば、http://www.tokiwa-f.com/hp/aaa.htmlなら、「tokiwa-f.com」というサーバの中の
「hp」というフォルダの中にある「aaa.html」というファイルをさすのです。

さて、次は「bbb.html」の目から見てみましょう
「index.html」が、上の階層に見えます。さっき [ ./ ]は同じ階層を示す記号といいましたが、
上の階層を表す記号もあります。それは、[ ../ ]です。
なので、「bbb.html」から「index.html」へは、<a href="../index.html">となります。
実は、index.htmlという名前は、特殊な名前で、そのフォルダの目次をあらわすファイル名です。
リンクで、フォルダの中のファイル名が指定されていないとき(省略されているとき)は、
自動的にindex.htmlを表示する、という決まりがあるのです。
つまり、index.htmlは省略できるということです。
そうすると、<a href="../">でもよいのです。
あまり、個人的に好きでは有りませんが…。

さて、応用編です。
「bbb.html」から、「eee.html」にリンクする場合は、どうするのでしょうか。
さっきまでやったことを考えると、
<a href="上の階層/ひとつ下の階層/ファイル名">であることが解ると思います。
そのまま、記号、フォルダ名、ファイル名を当てはめてみましょう。
<a href="../CCC/eee.html">となります。

また、画像や音楽にもリンクさせることができます。
試してみましょう。

そして、もうひとつ、「絶対パス」という指定方法があります。
これは、ファイルのある場所を http://www.〜.〜/〜/〜/... と、書きます。
相対パスはファイル名やフォルダ名だけでよかったのですが、これはずいぶんと面倒です。
しかし、相対パスは、ファイルのディレクトリ関係が不正確だと、きちんとリンクが出来ません。
それに比べると、絶対的に確実な方法なので、「絶対パス」という名前なのでしょう。
この方法を、ディレクトリ構成全てを書くことから「フルパス」とも呼びます。

他人のページや、違うサーバのページへのリンクでは、相対パスが使えないので、
絶対パスを使うほかありません。
両方使えるようにしておきましょう。
トップ > ホームページの言葉を覚えよう(3)
Copyright (C)2003 渕瀬 真理瑠璃 All right reserved. リンク確認不要。
Powerd by トキワの森の小屋