サンプルページ
|
|
サンプルページのソースコード
|
<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:#">「#」をご自分のメールアドレスに変更するだけです。 |