HTML入門③ よく使うタグ

HTML/CSS入門 HTML/CSS入門

HTML 入門の第3回では、
Web ページを作る上で必ず使う 基本タグ4つ をまとめて解説します。

1. 見出しタグ(<h1>〜<h6>)

Webページの「タイトル」「章タイトル」をつけるときに使います。

  • <h1> … ページの一番大きな見出し(基本1ページに1つ)
  • <h2> … 大見出し
  • <h3> … 小見出し
    以下 <h6> まであるが、よく使うのは主に h1~h3

▼サンプルコード

<h1>HTML入門③:よく使うタグ</h1>
<h2>見出しとは?</h2>
<h3>小見出しの例</h3>

2. 段落タグ(<p>)

文章(段落)を書くときに使います。

▼サンプルコード

<p>これは段落を表すpタグです。文章を書く時に使います。</p>
  • 長文を書くときは <p></p> の中に書く
  • <br> で改行もできるが、基本は段落単位で書くのが正しい書き方

3. リンクタグ(<a>)

他のページや外部サイトへのリンクを貼るタグです。

▼基本形

<a href="https://example.com">リンク先の名前</a>
  • href="" の中にURLを書く
  • 外部サイトは https://〜
  • 自分のサイト内なら相対パスでもOK

▼例(自分のブログへのリンク)

<a href="https://ryopro-pocket.com/">RyoPro Pocketのトップページに遷移します</a>

4. 画像タグ(<img>)

Webページに画像を表示するタグです。

▼基本形

<img src="images/sample.jpg" alt="サンプル画像">
  • alt="" は画像の説明(画像が表示されない場合、このテキストが表示される)
  • src="" は画像の場所(パス)
    実際に表示させたいときは、保存してある画像を作成しているhtmlファイルと同じプロジェクトに配置する必要があります。
    以下に画像の例を。

▼注意点

  • <img>閉じタグなし</img> は使わない)
  • 横幅を指定するなら:
<img src="images/photo.jpg" alt="風景" width="300"> //width=""を使うと横幅を指定可能

まとめて書くとこうなる

以下のコードを貼れば、
今回学んだ4つのタグが全部使われたシンプルなWebページになります👇

<h1>HTML入門③:よく使うタグ</h1>

<h2>見出しタグの例</h2>
<p>これは段落タグです。文章を書く時に使用します。</p>

<h2>リンクの例</h2>
<p>HTML入門①の記事は以下から読めます。</p>
<a href="https://ryopro-pocket.com/html-basic-01/">HTML入門①はこちら</a>

<h2>画像の例</h2>
<img src="images/sample.jpg" alt="サンプル画像" width="300">

最後に

いかがだったでしょうか?

恐らくですが、画像表示の際に手こずるだろうなと感じています。

画像をどこにほぞんするの?
同じようにしてるのに画像が表示されない。
パスって何?
プロジェクトって単語出てきたけどなに?

などなど。

説明の通りにしてしまうと、解説や手順書がなければ自分で作成できなくなってしまいます。

なので少し不親切ではありますが、説明不足?理解しにくい?
そういった部分は自分で是非調査してみてください!
そうすれば地力が身につき、1人でも難なくこなしていけます!

ではでは!次回:HTML/CSS入門④ リスト(箇条書き)と表


コメント

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