リンクを設定する

リンクタグの使い方

次にリンクの設定の仕方を学びましょう。

リンクのタグは、<a href=""></a>であり、""の中にはアドレスが入り、間にはリンクさせたい文字が入ります（<a href="URL">文字</a>）。

<a href="lesson1.html">文字</a>
<a href="http://www.google.ne.jp/">文字</a>
<a href="lesson1/lesson1.html">文字</a>
<a href="../index.html">文字</a>

リンクで注意しないといけないのが階層です。

同じフォルダ内のページにリンクするのであればいいのですが、「HP作成講座」というフォルダから「lesson1」というフォルダの中のページにリンクしたい場合は、上から三番目のように記述します。

逆に階層を一つ上に戻る場合は、上から4番目のように記述します。「..」は一つ前の階層に戻ることを意味するので、一つ前のフォルダに戻ってからindex.htmlを参照しています。

<a href="#nn">同一ページ内リンク</a>
<a href="sample.html#nn">同一フォルダ内リンク</a>
<a href="../file/sample.html#nn">別のフォルダ内へリンク</a>
<a name="nn">フラグ</a>

同一ページ内や他のフォルダのページ単位のリンクではなく、特定の場所へ飛ぶ場合は、リンクボタンの方にはアドレスとリンク先で定義された名前を書き、リンク先にはフラグを立てておきます。

こうすることで同一ページ内リンクという文字を押すとフラグという文字にリンクされます。

<a href="mailto:hamayu@nifty.com">メーラー起動</a>
<a href="aaa.zip">ダウンロード</a>

メールアドレスからメーラーを起動するときや、ダウンロードさせたいファイルにアクセスするためにも使います。

リンクタグを使ってみる

さて、先ほどのサンプルにリンクを設定してみましょう。

リンクといえばメニューということで、文字をメニューのように並べてみて、その一つ一つの文字に対してリンクを設定します。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
</head>
<body>
<h1><img src="gif/1.gif" alt="ホームページ作成講座" /></h1>
<p><img src="gif/2.gif" alt="境界線" /></p>
<p>｜<a href="../index.html"<HOME</a>｜<a href="#>Lesson1</a>｜<a href="#>Lesson2</a>｜<a href="#>Lesson3</a>｜<a href="#>Lesson4</a>｜<a href="#>Lesson5</a>｜</p>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<ul>
<li>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</li>
<li>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</li>
<li>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</li>
</ul>
<h2>LLesson2：タグを書いてみよう！</h2>
<ul>
<li>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
<p><img src="../jpg/1.jpg" alt="メモ帳に記述" /></p>
<h3>＜文字の大きさを変える＞</h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3>＜文字の色を変える＞</h3>
<p>文字の色は、colorタグを使用します。</p>
</li>
<li>ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。</li>
</ul>
<hr />
<address>Copyright 2007@nkdesk. all right reserved.</address>
</body>
</html>

これで完成！サンプルはコチラ→サンプル（ホームページ作成講座）

Lesson1～HTMLの基礎～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>