演習課題「リンクを設定してみよう-その1」
現在、ブラウザには、ぱいじょのリンク
と表示されています。
この文字列をリンクとするために、a
タグで囲み、href
属性として、ぱいじょのトップ画面のURLを指定してください。
なお、ぱいじょのURLにはhttps://paiza.jp/paijo
を使用してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
演習課題「リンクを設定してみよう-その2」
現在、ブラウザには、ぱいじょ登場キャラクターの生徒と先生とPC、それぞれの一覧が表示されるサイトが表示されています。
ブラウザに表示されている生徒と先生とPC
に先生一覧
がリンク先として設定されるようコードを修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#07:リンクのURLの指定(href)
このチャプターでは、ハイパーリンクのリンク先を指定するhref属性について学習します。
href属性はhypertext referenceの略であり、ハイパーリンクのリンク先を指定する属性です。
リンク先は主にUniform Resource Locator、つまりURLを指定します。
例えば、WedページのURLを指定することで、そのページにアクセスするリンクを作成できます。
(PaizaCloudの環境下では、外部のWebページへのアクセスが制限されています。)
今回のチャプターでは、同じディレクトリ内にあるHTMLファイルをリンク先として指定しています。
また、他のタグで指定したid属性の名前を、href属性のリンク先にすることで、ページ内の好きな位置にジャンプできるリンクを作成できます。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#href
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1><a>野菜と果物</a></h1>
<h2 id="vegetables">野菜一覧</h2>
<p>じゃがいも</p>
<p>にんじん</p>
<p>玉ねぎ</p>
<p>白菜</p>
<h2 id="fruit">果物一覧</h2>
<p>りんご</p>
<p>みかん</p>
<p>ぶどう</p>
<p>なし</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="a.html">a.htmlのリンク</a>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1><a href="#fruit">野菜と果物</a></h1>
<h2 id="vegetables">野菜一覧</h2>
<p>じゃがいも</p>
<p>にんじん</p>
<p>玉ねぎ</p>
<p>白菜</p>
<h2 id="fruit">果物一覧</h2>
<p>りんご</p>
<p>みかん</p>
<p>ぶどう</p>
<p>なし</p>
</body>
</html>