文字リンクと画像リンクを作ってみよう

作成ファイル・保存場所

作成した html-basic フォルダの中に html05.html というファイル名で保存してください。

目的

HTMLにおけるリンクの基本である <a> タグの使い方を学び、テキストリンクや画像を使ったリンクを作成できるようになる。

また、外部リンクを新しいタブで開くための target="_blank" の使い方も習得する。

指示

以下の条件に従って、リンクを含んだHTMLページを作成してください。

HTMLの基本構造は前回と同様に記述すること
タイトルは「HTML課題05」とすること
<h1> タグで「リンクのサンプル集」と表示すること
以下の3つのリンクを作成すること：

作成するリンクの種類

文字リンク（外部）
「Googleへ移動」と表示し、クリックで https://www.google.co.jp へ移動するリンクを作成する。
このリンクは 新しいタブで開くように target="_blank" を指定すること。
画像リンク（外部）
<img> タグを使って画像を表示し、それをクリックすると https://kobeya.com に移動するリンクを作成する。
このリンクも 新しいタブで開くように target="_blank" を指定すること。
画像は、以下の Kobeya Lab ダミー画像生成ツールで作成したURLを src に使用してください。
- 画像ジェネレーター：https://kobeya.com/no-image-generator/
- 例：https://dummy.kobeya.com/?width=300&height=200&text=KobeyaLink
ダミーリンク（開発中のボタンなどを想定）
「リンク未設定」というテキストで、クリックしても移動しないリンクを作成する。
href="#" で作成すること。

チェックポイント

<a> タグの href 属性が正しく使われているか
外部リンクに target="_blank" が使われているか
画像リンクで <a> と <img> の入れ子が適切か
alt 属性が画像にもつけられているか
意図しないリンク動作や閉じタグのミスがないか

HTMLの解答例

リンク未設定（まだリンク先が確定していない場合）は#(ダミーリンク）を入れます

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題05</title>
</head>

<body>
    <h1>リンクのサンプル集</h1>

    <p>
        <a href="https://www.google.co.jp" target="_blank">Googleへ移動</a>
    </p>

    <p>
        <a href="https://kobeya.com" target="_blank">
            <img src="https://dummy.kobeya.com/?width=300&height=200&text=KobeyaLink" alt="Kobeya Labへのリンク画像">
        </a>
    </p>

    <p>
        <a href="#">リンク未設定</a>
    </p>
</body>

</html>

プレビュー

画面上で右クリックし、Open with Live Serverを起動。（プラグインのLive Serverが必要です)