初めてのHTML　-基本的なタグ<a>- ＠TWクラブ【BloodyRosary】製作


次はこれ。

<a>


anchor(アンカー)の略。別のページに移動したりできるぞ！
１ページだけのサイトなんてつまらんしょｗ
これでいっぱい別のページに飛んで行くがいい！


たとえば↓のような感じ。

†マイリンク†

google
yahoo
infoseek

↓　中身はこんな感じ

†マイリンク†

<a href="http://www.google.co.jp/">google</a> 
<a href="http://www.yahoo.co.jp/">yahoo</a> 
<a href="http://www.infoseek.co.jp/">infoseek</a>


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>
ぶっちゃけ眠い。２１時には眠いわ。<br>
本当は２０時には寝たいけどな（爆ステ<br>
</p>

<img src="img/neko.jpg" alt="img"  width="100" height="100">

<br>

<a href="test2.html">次のページへ</a>


</body>
</html>

今回変わったところは、『a href』のところと、その前の<br>のところ。
↓　こんな感じで表ｊ（ｒｙ


次のページへ　ってのがリンクになっている。

…今押しても「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に戻る

ブログに戻る

初めてのHTML -基本的なタグ<a>- ＠TWクラブ【BloodyRosary】製作

初めてのHTML　-基本的なタグ<a>- ＠TWクラブ【BloodyRosary】製作