世界せかいと つながる！
🔗 きみだけの リンク集しゅう

HTMLの「リンク」と「リスト」をつかって、
好すきな Webサイトを 紹介しょうかいしよう！

エディタを 開ひらく
（ここをつかって つくるよ） 完成版かんせいばん（ゴール）を見みる

このレッスンの やりかた

  1. 上うえの「エディタを 開ひらく」ボタンを おす。
  2. このページの「黒くろい箱はこ（コード）」を コピーする。
  3. エディタに はりつけて、どうなるか 確たしかめる！
ステップ 1： タイトルを かこう

まずは、なんのページか わかるように タイトルを かきます。
HTMLに、下したのコードを はりつけてね。

ここをコピー
    <h1>わたしの すきな Webサイト集</h1>
    <p>よく見る ページを まとめました！</p>
    <hr>
チェック！
右側みぎがわの画面がめんに、大おおきな文字もじで タイトルが 出でたかな？
hr というのは、横線よこせんを ひくタグだよ。
ステップ 2： リンクを つくろう

いよいよ、ほかのページへ とべる「リンク」を つくります。
さっき かいたコードの 一番いちばん下したに、これを ついかしてね。

ここをコピー
    <a href="https://www.google.co.jp">Google（グーグル）</a>
チェック！
文字もじが 青あおくなって、下線かせんが ついたかな？
これが「リンク」だよ。
ステップ 3： 新あたらしいタブで 開ひらこう

そのままだと、いまのページが 消きえてしまいます。
「別べつのタブ」で 開ひらくように、魔法まほうの 言葉ことば をプラスしよう！
さっきのコードを、これに 書かきかえてね。

まるごと コピーして 入いれかえる
    <a href="https://www.google.co.jp" target="_blank">Google（グーグル）</a>
ポイント
target="_blank" というのが、「新あたらしいタブで！」という 合図あいずだよ。
ステップ 4： リストで キレイに 並ならべる

リンクが たくさんあるときは、「箇条書かじょうがき（リスト）」にすると 見みやすいよ。
ul（ユーエル）と li（エルアイ）というタグを つかうよ。
さっきのリンクは 消けして、かわりに これを はってね。

ここをコピー
    <ul>
        <li>
            <a href="https://www.google.co.jp" target="_blank">Google</a>
        </li>
        <li>
            <a href="https://www.youtube.com" target="_blank">YouTube</a>
        </li>
    </ul>
チェック！
・（黒くろいポチ）が ついて、タテに 並ならんだかな？
ステップ 5： グループ分わけ する

もっと わかりやすくするために、見出みだしをつけて グループ分わけしよう。
さっきのコードを 消けして、これを はりつけてみて！

ここをコピー
    <h2>べんきょう</h2>
    <ul>
        <li>
            <a href="https://www.google.co.jp" target="_blank">Google（しらべる）</a>
        </li>
    </ul>

    <h2>おたのしみ</h2>
    <ul>
        <li>
            <a href="https://www.youtube.com" target="_blank">YouTube（どうが）</a>
        </li>
    </ul>
やってみよう
href="..." の 中なかを、きみの 好すきなサイトの URL（アドレス）に 変かえてみよう！

🎉 おめでとう！ 🎉

世界せかいに ひとつだけの リンク集しゅうが できたね。

好すきな ページを ついかして
きみだけの リンク集をつくろう！