Digital Life ~デジタルライフ~(Field)

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

リンクのURL記述方法 ~素材屋さん豆知識~

ホームページ作りを始めたばかりの人はリンクの記述方法について良く分からないと思いますので解説します。


まずは同じファイル(ディレクトリ)内でのリンクの方法です。


 ホームページ

index.html

profile.html

link.html

logo.gif


indexからprofileにリンクする場合。

<a href="profile.html">プロフィール</a>となります。このように同じディレクトリ内のファイルのリンクURLはファイル名+拡張子だけでリンクさせることができます。

例えばindex、profile、linkのHTMLファイルでlogo.gifを表示させようと思えば

<img src="logo.gif">となります。



次に違うディレクトリへのリンクの方法です

ホームページフォルダにsozaiフォルダ(ディレクトリ)を作成した場合の例です。※ディレクトリ名は半角英数字

 ホームページ

index.html

profile.html

link.html

logo.gif

 sozai

index.html

rule.html

ホームページフォルダのindex.htmlからsozaiフォルダのindex.htmlへリンクする場合。

<a href="sozai/index.html">素材ページへ</a>
こんな感じになります。
ディレクトリ名 + / + ファイル名 + 拡張子

その他のファイル(画像ファイルなど)も同じです。


sozaiディレクトリ内のリンクですが同じフォルダ内のリンクは最初にも説明しましたがファイル名+拡張子でOKです。

注意しなければならないのはsozaiディレクトリから前のディレクトリへのリンクです。

sozaiフォルダのindex.htmlから1つ前のディレクトリのlink.htmlにリンクする場合は

<a href="../link.html">リンクへ</a> となります。

../で1つ前のディレクトリへの指定になります。



ディレクトリを2つ戻る場合。

sozaiフォルダの中にさらにphotoディレクトリを作った例です


 ホームページ

index.html

 sozai

index.html

rule.html

 photo

index.html

もう分かっているとは思いますがホームページフォルダのindex.htmlからphotoのindex.htmlへリンクする場合は

<a href="sozai/photo/index.html">写真素材</a>
このようになります。


photoディレクトリからsozaiディレクトリのindexにリンクするときは <a href="../index.html">素材ページへ</a>となります。これもさっきやりました。


photoディレクトリのindexからホームページフォルダのindex(トップページ)へリンクする場合。
<a href="../../index.html">トップページへ</a>
となります。../../で2つディレクトリを戻るということです。



最後にディレクトリを戻り、違うディレクトリにリンクさせる例です。ホームページフォルダに新たにbanerディレクトリを作成したとします。


 ホームページ

index.html


 sozai

index.html

rule.html

 photo

index.html


 baner

index.html

sample01.gif

sample02.gif

sample03.gif


photoディレクトリのindexからbanerディレクトリのindexにリンクする場合。

<a href="../../baner/index.html">バナー</a>

../../で2つディレクトリを戻り、baner/でbanerディレクトリを指定します。

もちろん他のファイルに関しても同じです。
例えば、sozaiディレクトリのindexでbanerディレクトリのsample01.gifを表示させようと思えば、

<img src="../baner/sample01.gif">となります。



| HTMLタグ | 16:06 | comments(-) | trackbacks(-) | TOP↑

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。