次はこれ。
|
<a>
|
anchor(アンカー)の略。別のページに移動したりできるぞ! 1ページだけのサイトなんてつまらんしょw これでいっぱい別のページに飛んで行くがいい! たとえば↓のような感じ。
|
†マイリンク† |
↓ 中身はこんな感じ
|
<p>†マイリンク†</p> <p> <a href="http://www.google.co.jp/">google</a><br> <a href="http://www.yahoo.co.jp/">yahoo</a><br> <a href="http://www.infoseek.co.jp/">infoseek</a><br> </p> |
a の横に『href』があると思うが、これがリンク先のURLを指定している。 そして、『</a>』で閉じるまでが、リンク先のURLに飛ぶ文章。 ↑のgoogle とか yahoo とか infoseek とかがそれ。押す場所のことね。 この、「http」から始まる文章はフルパスと言って、 URLをすべて記述している。 だが、自分の作ったサイトであれば、これは省略できる!(てか、これimgの説明のときやってたやん ではサンプル的に説明したいので、test.htmlを改良してみよう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <link rel="stylesheet" href="default.css" type="text/css"> <link rel="prev" href="index.html"> <link rev="made" href="mailto:mai_tukamoto@infoseek.jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ようこそ、このサイトへ</title> </head> <body> <h1>今日の一言</h1><br> <p> ぶっちゃけ眠い。21時には眠いわ。<br> 本当は20時には寝たいけどな(爆ステ<br> </p> <img src="img/neko.jpg" alt="img" width="100" height="100"> <br> <a href="test2.html">次のページへ</a> </body> </html> |
今回変わったところは、『a href』のところと、その前の<br>のところ。 ↓ こんな感じで表j(ry
次のページへ ってのがリンクになっている。 …今押しても「Internet Explorer ではこのページは表示できません」とか 出てくるので、今度は『a href』で指定した『test2.html』を作ってみよう。 とりあえず『test.html』をコピーして、名前だけtest2.htmlに変更してみる。 で、中身のtitleとbodyの中身だけ変えてみよう。 ↓ これはtest2.htmlの中身だよん。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <link rel="stylesheet" href="default.css" type="text/css"> <link rel="prev" href="index.html"> <link rev="made" href="mailto:mai_tukamoto@infoseek.jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ここは次のページだ</title> </head> <body> <h1>昨日の一言</h1><br> <p> 俺を信じろ、アル!<br> </p> </body> </html> |
test.htmlの「次のページへ」を押すと、 ↓
こんなページに飛ぶと思う。 これで、リンクが完成した!!
次へ(基本的なタグ<table>) 前へ(基本的なタグ<img>) 目次へ 別館TOPに戻る
ブログに戻る
