HTML入門講座|リンクを学ぼう

HTML
アイキャッチ
うさタブ
うさタブ

今回は【リンク】について勉強するッピ!

ユウキ
ユウキ

リンク??

うさタブ
うさタブ

インターネットのページは、ページ同士を繋げて別のページにアクセスすることができるッピ!

これをリンク・リンクを貼る、というッピよ~

この記事で学べること
  • 作ったページの中に、他のページへのアクセスできる【リンク】を貼るやり方

ページとページを繋ぐ【リンク】を貼ってみよう

必要なもの

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

<a>タグを使ってリンクを貼る

うさタブ
うさタブ

ではさっそく【リンク】を貼っていくッピよ~!

うさタブ
うさタブ
<a href="https://janken.asotetu.work/">Hey there!</a>

<body></body>の中に、この文を足してみるッピ!

サンプルコード
<html>
<head></head>
<body>

<a href="https://janken.asotetu.work/">Hey there!</a>

</body>
</html>

文章をクリックして指定したページに飛んでみよう

うさタブ
うさタブ

作ったページが開けたら、

Hey there!』の部分をクリックするッピよ!

ユウキ
ユウキ

おおおおお! ページが変わった!!!?

うさタブ
うさタブ

ふふふふ、これがプログラミングの魔法ッピ!

【リンク】を使いこなせば、世界中のたくさんの情報を繋げることができちゃうッピネ!

うさタブ
うさタブ

今回のタグの意味を解説すると、

<aリンクの設定をします href 繋げる先は=”http://janken.chu.jp”>好きな文字</aリンクを閉じます>

という意味ッピ!

ユウキ
ユウキ

ウェブページってこんなこともできるんだな~

すげーや!

全体のコードの確認

<html>
<head></head>
<body>

<a href="https://janken.asotetu.work/">Hey there!</a>

</body>
</html>
学習のまとめ
  • <a href=”アクセスしたいサイトのURL”>好きな文字</a>で、ページにリンクを貼ることができる

うさタブ
うさタブ

上手くきたッピか?

次回もホームページの色んな基礎を学んでいくゆえ、楽しみにしているッピよ~!

タイトルとURLをコピーしました