HTMLを学び始めると、似たようなタグが出てきて、頭の中が混ざることがあります。
ぼくの場合、今回つまずいたのはリンクタグでした。
少し前に学んだ画像タグと似て見えて、
「これは画像を表示するタグだったかな」
「これはページへ移動するタグだったかな」
と、何度も手が止まりました。
でも、実際にコードを書いてみると、少しずつ違いが見えてきました。
リンクタグは、ページとページをつなぐためのタグです。
そして今日は、その「つながる感覚」が少しだけ分かりました。
ユイこれは画像を表示するタグだったかな。これはページへ移動するタグだったかな。
ユウト実際にコードを書いてみたら、少しずつ違いが見えてきましたよ。
- 画像タグとリンクタグを混同してしまった経緯
- リンクタグでページ移動先を指定する書き方
- 絶対パスと相対パスの違いのつかみ方
HTML リンクタグ｜画像タグとの違いで混乱した日
まずは、今回のつまずきの入り口になった、画像タグとの混同についてお話しします。
画像タグとリンクタグが頭の中で混ざりました
6月10日の職業訓練では、HTMLのリンクタグについて学びました。
リンクタグは、文字や画像をクリックしたときに、別のページへ移動できるようにするためのHTMLです。
ブログでよく見る「詳しくはこちら」というリンクも、この仕組みで作られています。
ただ、初心者の自分には、最初からすんなり理解できたわけではありません。
前に学んだ画像タグと、今回のリンクタグの記述が少し似ているように見えて、混同してしまいました。
画像を表示するタグ。
ページへ移動するタグ。
メールアドレスへつなげるタグ。
役割は違うのですが、コードの中に英語や記号が並ぶと、まだ一瞬で見分けることができません。
「これは何のためのタグだったかな」
そう思いながら、ひとつずつ確認していく時間になりました。
HTMLを学んで「おおっ！」と声が出た日の話は、57歳でHTMLを学ぶ｜「おおっ！」と声が出た日の話に書きました。
HTML リンクタグ｜移動先の指定でできるようになったこと
混同しながらも、今日できるようになったことがあります。ここでは、リンク先の指定方法について整理します。
リンクタグは「どこへ移動するか」を決めるものです
今日、少しできるようになったことがあります。
それは、リンクで飛びたいページを指定できるようになったことです。
リンクタグでは、「クリックしたら、どこへ移動するのか」を指定します。
たとえば、このように書きます。
<a href="page.html">詳しくはこちら</a>
まだ細かい意味を全部覚えられているわけではありません。
でも、href の中に「移動したい先」を書くのだと考えると、少し整理しやすくなりました。
別のWebサイトに移動することもできます。
自分で作った別のページに移動することもできます。
メールアドレスにリンクを設定して、クリックするとメールを送れるようにすることもできます。
最初はただの文字に見えていたHTMLが、リンクを設定することで、実際に動き出す感じがしました。
文字をクリックすると、別のページへ移動する。
メールアドレスをクリックすると、連絡につながる。
自分が書いた小さなコードによって、ページとページ、人と情報がつながっていく。
そう考えると、リンクタグはWebサイトにとって、とても大切な役割を持っているのだと感じました。
絶対パスと相対パスは、住所の書き方に似ています
今日の授業で印象に残った言葉があります。
「外部リンクは絶対パス、内部リンクは相対パスで設定する」
最初に聞いたときは、少しむずかしく感じました。
絶対パスとは、インターネット上の住所を最初から最後までしっかり書くような指定方法です。
外部のWebサイトへリンクするときに使います。
一方で、相対パスは、自分が作っているWebサイトの中で、今いる場所から見て「どこにあるか」を指定する方法です。
たとえば、同じフォルダの中にあるページや、ひとつ下のフォルダにあるページへ移動するときに使います。
自分なりに言い換えるなら、
外へ行くときは、住所をしっかり書く。
家の中で移動するときは、今いる場所から見て案内する。
そんな感覚に近いのかもしれません。
CSSの全称セレクタでブラウザの余白をリセットする方法に気づいた話は、CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセットに書いています。
HTML リンクタグ｜手を動かして学び直す
最後に、今日どうやって手を動かしながら理解を進めたか、そしてそこから見えた学び直しのコツをまとめます。
手を動かすと、少しずつ違いが見えてきました
今日は検索もAIも使っていません。
授業の中で学んだことを、自分の手でコードを書きながら確認しました。
AIを使えば、分からないことをすぐに調べることもできます。
でも今日は、あえて自分で迷いながら、手を動かす時間になりました。
画像タグとリンクタグが混ざる。
絶対パスと相対パスで迷う。
メールアドレスへのリンク設定で確認する。
こういう小さなつまずきは、正直少し疲れます。
でも、実際に書いて、間違えて、直してみると、少しずつ違いが見えてきます。
「分かった」と言えるほどではなくても、昨日より少しだけ見えるものが増える。
57歳からの学び直しでは、この「少しだけ」が大事なのかもしれません。
学び直しは、忘れても戻れば大丈夫です
若いころのように、一度聞いたらすぐ覚えられるわけではありません。
昨日分かったつもりのことを、今日また忘れていることもあります。
でも、それでも大丈夫なのだと思います。
混同したら、もう一度見比べればいい。
忘れたら、もう一度書いてみればいい。
手が止まったところが、今日の学びの入り口なのかもしれません。
今日できるようになったのは、リンクで飛びたいページを指定すること。
そして、メールアドレスにリンクを設定すること。
小さなことですが、Webサイトを作るうえでは大切な一歩です。
リンクが設定できると、Webページがほかのページとつながります。
今日の小さな理解も、明日の授業やこれから作るページにつながっていく。
そう考えると、1つのリンクタグにも、前向きな意味を感じられました。
同じように50代、60代から学び直しをしている方へ。
新しい言葉が出てくると、最初は戸惑いますよね。
でも、ひとつずつ手を動かしていけば、昨日より少し分かることが増えていきます。
あなたが最近、「少しだけできるようになった」と感じたことは何ですか。
コメントで教えてもらえたらうれしいです。
次回は、今回混同したリンクタグと画像タグの違いを、自分なりに整理して書いてみます。
入力を疑うという視点については、HTML・CSSの試験で学んだ「入力を疑っている」という視点にも書きました。
HTML リンクタグに関するよくある質問
HTMLのリンクタグを学び始めた方から、よく聞かれることをまとめました。
- 絶対パスと相対パスはどう使い分ければいいですか
-
外部のWebサイトへリンクするときは絶対パス、自分のサイト内の別ページへ移動するときは相対パスを使います。住所を最初から書くか、今いる場所から案内するかの違いに近い感覚です。
画像タグとの混同から始まった今日の学びは、href属性で移動先を指定する感覚と、絶対パス・相対パスの違いをつかむことにつながりました。忘れてもまた確認すればいい、と思えたことが一番の収穫です。
コメント