HTMLコーディングメモ003｜のんちなおち日和

HTML記述する際の見出しと文章の作成、画像の挿入、リンクの貼り方。

1 記事の見出し<h1>〜<h6>
2 文章の記述<p>
3 画像の挿入<img>
4 リンク設定<a>

記事の見出し<h1>〜<h6>

見出し部分を記述するのは<h1>〜<h6>。 h : heading

数字が小さいほど大きな見出しになる。

<body>
        <h1>H1 見出し</h1>
        <h2>H2 見出し</h2>
        <h3>H3 見出し</h3>
        <h4>H4 見出し</h4>
        <h5>H5 見出し</h5>
        <h6>H6 見出し</h6>
</body>

表示結果↓

文章の記述<p>

文章の段落を記述するのは<p>。 p : paragraph

<p>タグで囲まれた文章が1つの段落として表示される。

複数の<p>要素を使った場合、段落間は少しスペースができる。

<body>
        <p>1番目の段落</p>
        <p>2番目の段落</p>
</body>

表示結果↓

画像の挿入<img>

画像を挿入するのは<img> img : image

    <body>
        <img src = "./image/sample_image.JPG" alt = "sample画像">
    </body>

表示結果↓

<src>で画像ファイルを指定。絶対パスでも相対パスでもOK

<alt>で、画像を表示できなかったときに表示されるテキストを記述

サイズ指定等しないとヨロシクないですね…

リンク設定<a>

リンクを貼るのは<a>。

テキストにリンクをつけることも、画像にリンクをつけることも可能。

    <body>
        <h2>link with text</h2>
        <a href ="sample_ref.html">sample link</a>
        <h2>link with image</h2>
        <a href ="sample_ref.html">
            <img src = "./image/sample_image.JPG" alt = "sample画像">
        </a>
    </body>

表示結果は↓。テキストでも画像でもクリックするとサンプルページに飛ぶ。