[ MENU PAGE ]     Step [1〜3][4][5][7][8][ホームページのUL方法]
Step 6  ページ・URL リンク
いよいよホームページらしくなってきました。
このStepでは複数のページ・URL(アドレス)へのリンクについて説明していきます。 そもそも、このインターネットとは大きなリンクで成り立っているのです。 

これから本格的なページを作るにあたり、いくつかの下準備が必要です。

[ページ専用のフォルダ(ディレクトリ)を作る]

WINDOWSでたとえるなら「My Documents」のようなものです。 作ったファイル(HTMLファイル・イメージファイル・.etc)を一括管理するものです。 また制作するページの「コンテンツ」「ファイルの数」が多くなる場合は、更にそのフォルダ内に「コンテンツ別」「イメージファイル別」にフォルダを作成するとよいでしょう。

[ファイル名のつけ方]
すべてのファイル名(フォルダ名含む)は英数字・半角・小文字でファイル名にあった名前をつけるよう心がけ、使う英数字は記号などは使わずに「a〜z」「0〜9」を使うようにしましょう。
統一しておけば「Webユーザーの入力ミス」「リンクの入力」「.etc」などミスの原因が1つ減るわけです。

[TOPページのファイル名]
これは必須ではありませんがTOPページには「index.html」を使うのが一般的です。
「index」にするメリットとして、通常ホームページを開く場合はアドレスのフルパスを打ち込みます。
弊社のページを例に)
通常ホームページを開く場合はアドレスのフルパスを打ち込みますが、上の例を見ていただくとお分かりだと思いますが、「index」の場合はアドレスを付けても付けなくてもブラウザで表示が可能となります。 
他のページでも最後が「/」で終わっているアドレスは「index」なのです。

リンクには大きく分けて2種類あります。
1.テキスト文章からのリンク
2.イメージファイルからのリンク


それでは簡単なサンプルページを作ってみましょう。
サンプルイメージファイル(gif)
ファイル名 "te02.gif" 
ファイルサイズ "1.5Kバイト"
画像サイズ "136X136ピクセル"
ファイル名 "te04.gif" 
ファイルサイズ "1.5Kバイト"
画像サイズ "136X136ピクセル"

サンプルページ
サンプルページStep 6
 

 
 
 
これがテキストによるリンクです。ここをクリックしてください。

イメージファイルによるリンクです。 イメージをクリックしてください。 リンクページ
サンプルページのソースコード

<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#3333FF" vlink="#00FF00" alink="#FF00FF" >
<div align="center"><font size="7" color="#0000FF">サンプルページStep 6</font></div>
 <br>
 <br>
 <br>
 <br>
<font size="4">これがテキストによるリンクです。<a href="#" target="_top">ここをクリックしてください。</a><br>
<br>
これがイメージファイルによるリンクです。 イメージをクリックしてください。
<a href="#" target="_top" ><img src="te04.gif" width="136" height="136" border="0" alt="リンクページ"></a></font>
</body>
</html>

ソースの説明
link="#3333FF" vlink="#FFFFFF" alink="#FF00FF"
link  とは、まだアクセスしていないリンク文字のカラーです。
vlink とは、すでに訪問済みのリンク文字のカラーです。
alink とは、リンク文字をクリックしたときに変わるカラーです。
<a href="#" target="_top">ここをクリックしてください。</a>
リンクを指定する場合は<a href="#" target="_top"></a>でくくった部分をクリックし、"#"のURLにジャンプする仕組みになっています。「"#"」にはジャンプしたいURLがはいります。
例1)<a href="http://www.asarinet.co.jp/aaa/xxxx.html" target="top">クリック</a>
例2)<a href="aaa/xxxx.html" target="top">クリック</a>
target="_top"
リンクページを開く際に同じウインドウで開くか、新規にウインドウを開くか記述します。
"_top"  はリンクページを同じウインドウで開きます。
"_blank"
はリンクページを新規にウインドウを開きます。
<img src="te04.gif" width="136" height="136" border="0" alt="リンクページ">
テキストをイメージファイルに置き換えただけです。
border="0"はイメージの枠線幅です。
パスの説明
パスの指定には2種類あります 「絶対URL」「相対URL」
「絶対URL」とは?
http://www.asarinet.co.jp/aaa/xxxx.html
主にリンク先が自分のURLでない場合に使います。

「相対URL」とは?
aaa/xxxx.html
主にリンク先が自分のURL内の場合に使います。

<例えば> 
自分の住んでいる町内で道を聞かれた場合に?県?市?町?交差点を右に、その通りの酒屋の隣です。 などと説明する人はいないと思います。 「相対URL」とは町内のようなもので自分のURL内を示すものです。 変なたとえですがお分かりいただけたでしょうか。

[フォルダ別パスの指定方法]
アドレスでよく「/」を見かけますが「/」はフォルダの階層を意味します。

ホームページには自分専用のメインとなるフォルダがあります。(プロバイダー・レンタルサバー屋さんなどで違います。)
そのフォルダの中に自分のファイルを保存することになります。
フォルダにはHTMLファイルやイメージファイル更には「コンテンツ別」のフォルダを作成するものです。
そのフォルダの階層が「/」になります。WINDOWSでいうなら「¥」と一緒です。
http://www.asarinet.co.jp/aaa/xxxx.html 例に)

弊社のメインフォルダ内の「aaaフォルダ」内のxxxx.htmlにリンクということです。

[フォルダ間のパスの指定方法]
相対URLリンクにはいろんなタイプがあります。
1.同じフォルダ内のリンク
2.下の階層フォルダ内へのリンク
3.上の階層フォルダ内へのリンク.etc
図解説明

記述方法
index.htmlから111.htmlへリンク
aaa/111.html
111.htmlからindex.htmlへリンク
../index.html
111.htmlから222.htmlへリンク
../bbb/222.html
index.htmlから333.htmlへリンク
333.html
イメージの設置に関してもパス設定は同様です。
メールソフトへのリンク
サンプルページ(メール編)


お問合せは こちらまで!

サンプルページのソースコード
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font color="#3300FF" size="7">サンプルページ(メール編)</font><br>
<br>
<br>
<a href="mailto:www@asarinet.co.jp"><font size="4">お問合せは こちらまで!</font></a> <br>
<br>
<a href="mailto:www@asarinet.co.jp"><img src="te04.gif" width="136" height="136" border="0"></a>
</div>
</body>
</html>
ソースの説明
<a href="mailto:www@asarinet.co.jp">
<a href="mailto:#">「#」をご自分のメールアドレスに変更するだけです。

このソースコードを「コピー」&「ペースト」で実行してみてください。 同じ結果が得られるはずです。
イロイロ試してみましょう。
次のStepはテーブルについて説明します。
[ Step 7へ ]
Copyright © 2000 asarinet,co.all rights reserved.