初心者がゼロから始める【HTML】プログラミング【学習4日目】見出しと外部リンクと内部リンクのまとめ

こんにちわ、ryomaです。

今回は外部リンクと内部リンクの貼り方をメインに、学習内容をまとめていきます。
HPを作る上でリンクは必ず必要になってきますし、ブログなどでも公式サイトへのリンクやアフィリエイトリンクなどを貼ることがあると思いますので、参考になればと思います。

今回の記事内容
・見出しの付け方
・画像の入れ方
・外部リンクの貼り方
・内部リンクの貼り方

上記4つの学習内容をまとめていきます。

見出しの付け方

ブラウザで表示するとこんな感じです

hの後の数字に合わせて変わり、h2の後はh3になりh2➡️h4などへ飛ばして進むことはありません。

ブログを書くときに見出しの表記をh2やh3などで表すこともあり、Webライターの方でしたら、クライアントに納品する際にどこが見出しなのかを伝えるためにも使ったりします。

外部リンクの設置方法

ブラウザ表示がこちら

ryoma-noteの部分にリンク先を設置しました。
<a href="ここに設置したいリンク先のアドレスを入力">リンクを設置するときの名称</a>

HPにはほぼ必ず外部リンクがあるので、必ずマスターしたい要素ですね！

内部リンクの設置方法

ブラウザで表示するとこちら

VScodeの画面の<p>n</p>などは間隔のために設置してあるだけです。
静止したページでは上のnote内部リンクから下のnote内部リンクへ移動しているのかわからないですが、設置に失敗しているとエラー画面になってしまいます。

実際にエラーの場合はこのように表示されました。

サイトを作る上で、外部リンクも内部リンクも必須となってくるので必ずマスターしたいと思います。

まとめ

今回の記事では、「見出し」の入れ方と「外部リンク・内部リンク」の入れ方を簡単に解説しました。

見出し リンクの入れ方を学習しました。

ひとつひとつ積み上げていき、学習内容と自分のレベルをアップしていきたいですね！