▼(ハイパー)リンクは世界をつなぐ

・WebページからWebサイトへ
Webページは(ハイパー)リンクを貼ることにより、Webサイトとなります。

(ハイパー)リンクとは、WebページとWebページをつなぐ役割をします。
つまりあなたのWebサイト内のページとページをつなぎ、
あなたのWebサイト内のページと顔も知らない人のWebサイト
のページをつなぎます。

ではさっそく(ハイパー)リンクを貼ってみましょう!

まず、トップページを開きソースを開きます。
リンク元のテキスト・画像の前後にこう書きます。
<a link href="▲">
画像やテキストのURL
</a>
▲・・・リンク先URL

これでハイパーリンクは完了です。
URLはダブルコーテーション(”)でくくる癖をつけて下さい。

※ここまではまだ、ローカルエリアの話です。(自宅のパソコン内だけの世界という事)




▼リンクの貼り方 -絶対リンクと相対リンク

・絶対リンクとは?(絶対位置指定)

<a href="http://www.・・">から始めるリンク指定のしかたです。
主に他のサイトのWebページとリンクを貼るときに使用します。
またオーサリングソフトを使用してリンク指定すると絶対リンクになります。

・相対リンクとは?(相対位置指定)

<a href="index.html">とファイル名のみを指定します。
同一ディレクトリ内のリンク指定ではこの相対リンクを使います。
同一ディレクトリとは同じフォルダの中という事です。(上の例では「web」フォルダが ルートディレクトリ)
サーバーのアドレスなどが省略でき、別のフォルダのWebページでも道筋の分だけ 書けばよいので通常は相対リンクの使用頻度の方が高いと思います。

・リンクの書き方例 -同じWebサイト内でリンクする

(ケース)「index.html」から「02link」フォルダにある「hajimete.html」にリンクを貼る場合

<a href="02link/hajimete.html">初めてWeb</a>
と書きます。
絶対リンクの場合は
<a href="http://www.・・・/web/02link/hajimete.html">初めてWeb</a>
となります。

・リンクの書き方例 -上位ディレクトリ(上のフォルダ)へリンクする。

(ケース)「02link」フォルダの「hajimete.html」からトップページ「index.html」 に戻る場合

<a href="../index.html">トップページへ戻る</a>
と書きます。ピリオドピリオドスラッシュ(../)と書くと1つ上のフォルダを 指定できます。
3つ上の階層のWebページを指定したい場合は、
<a href="../../../index.html">トップページへ戻る</a>
となります。
繰り返しになりますが、同じ階層の場合(同じフォルダ内)のWebページを指定するときは、
<a href="index.html">トップページへ戻る</a>
でOkです。

・リンクの書き方例 -yahooにリンクする場合

(ケース)yahooやgoogleにリンクを貼りたい

yahooなど外部のWebページにリンクする場合はtarget属性を使用して 別ウィンドウを開くようにします。
<a href="http://www.yahoo.co.jp/" target="_blank">yahooを開く!</a>
注意して欲しいのは、target属性を使用して別ウィンドウで開くということは ユーザーから見て「邪魔な画面が1つ増える」ことになりかねないという事です。 外部にリンクするときにtarget属性を使う事は一般的ですが、何でもかんでも 別ウィンドウというのも考えものだと思います。




▼最後に。

さて、「製作の部」はここまでです。
続きまして「作ったWebサイトをインターネット上に公開する方法」について説明します。
「えっ!もう終わり?」と思われる方もいると思いますが、この段階では他にする事がありません。

これまで1つのトップページと4つのコンテンツページを一緒に作ってきました。。
実作業時間にしたら、30分もかかりません。
考える時間も含めて1日に最低3回はやり直しが出来るはずです。
納得がいくまで何でも作り直してみて下さい。

「カッコイイは易しい!!」が私のWebサイトのテーマです
//



※(コラム) こ こ ま で の ま と め

■この章で出来上がった作品

  ・フォルダ(作業スペース)
  ・トップページ
  ・Webページ(コンテンツ) ×4

ここまではまだローカルエリアです。世界とは繋がっていません。

ローカルエリア環境ではどのようなページを作っても、誰にも迷惑をかけることはありません。
どのような情報でもいいし、どのようなデザインでもココでは全く気にする必要はありません。
何度だって作り直す事もできます。

また実際のところ、作り直すごとにカッコよく仕上がってきます。
全く同じWebページを5回作り直してみてください。
全く同じレイアウトなのに、だんだんとカッコよくなっていきます。そんなものです。
この段階では何も気にせずバンバン作ってみて下さい。