リンクを貼る

<a href=""></a> リンク

リンクを貼る

文字にリンクを貼る

<a href="○○○.html">リンクを貼る文字</a>

画像にリンクを貼る

<a>タグで囲った箇所にリンクが貼られます。画像の場合も同じです。

<a href="○○○.html"><img src="○○.jpg" alt="画像の代替文字" /></a>
額縁

※このままだと画像に枠線が入ってしまうので、スタイルシートなどを使って、枠線を消そう。

リンクする場所について

同じフォルダ内のページ

<a href="./raku.html">楽ワザ<a>

同じフォルダにあるファイルにリンクする場合

フォルダの中に入っているページへのリンク

<a href="./sample/001.html">サンプル集・1ページ目<a>

そのページから見て、一階層奥のページにリンクする場合

外部のサイトへリンクする

<a href="http://gensoan.com/">GENSOAN.com<a>

自分のサイトではない外部サイトの場合は新しいウィンドウで開いてリンクした方が便利である

リンクターゲット

新しいウィンドウで開く

<a href="http://gensoan.com/" target="_blank">GENSOAN.com<a>

新しいウィンドウで開く方法だけはおさえておこう。(targetの前の半角スペースを忘れないようにしよう)
また、<frame>や<frame>を扱うときはこれらの他に_top、_parentなどのターゲットの指定を使うことがある。

アンカーリンク ≪応用≫

<h3>日記</h3>のところにジャンプさせたい場合

<h3 id="menu1">日記<h3>
<a href="#menu1">日記へジャンプ</a>

解説:ページの特定の場所にリンクさせる方法です。アンカーの使い方次第ではとてもスマートなウェブサイトを作ることが可能です。

HTMLの基本

CSS

  • 項目1
  • 項目2

便利な使い方

アイテム

  • タスクバーにフォルダのショートカット
  • warabimochi.jpg
  • 016.jpg
  • suikozu1.jpg
  • 015.jpg
  • 014.jpg
  • 013.jpg
  • 012.jpg
  • 011.jpg