気ままにやっていくプログラミングとかブログ

中学1年生が気ままにプログラムのことを中心に書いていくブログです。

自己流HTML入門2

こんにちは。

Kitachisukuです。

今回はページの本文を書く方法について書いて行きます。

 


 1.BODYタグ

2.使えるもの(タグ)

3.まとめ


 

 1.BODYタグ

ボディータグとは何でしょう?

 

前回もお伝えした通り、

ボディータグは本文を記述する要素です。

 

HTMLはタグとタグの間にあるテキスト(もしくはタグ)を表示するタグが多くで、

ボディータグもその一種です。

    <body>
        Hello World!
    </body>

前回はこのように記述しましたが、

今回はこの中身を変えていきます。

 

2.使えるもの(タグ)

使えるものはこれらです。

・pタグ

段落を表します。

pタグの後には自動的に改行が入れられます。

 

<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <p>1行目</p>
        <p>2行目</p>
        <p>3行目</p>
        <p>4行目</p>
    </body>
</html>

 

f:id:Kitachisuku:20210127185824j:plain

 

・divタグ

1つの"塊"を作るタグです。

 

pタグは段落ですが、

divタグは1つのまとまりを作ることができます。

 

またpタグと同じく後に改行がいれられます。

 

<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <div>
            <p>1-1行目</p>
            <p>1-2行目</p>
            <p>1-3行目</p>
            <p>1-4行目</p>
        </div>
        <div>
            <p>2-1行目</p>
            <p>2-2行目</p>
            <p>2-3行目</p>
            <p>2-4行目</p>
        </div>
    </body>
</html>

 

f:id:Kitachisuku:20210127190339j:plain

 

 ・brタグ

改行を表すタグです。

 

HTMLは普通の改行では文章を改行できないので、

このbrタグを使って改行します。

 

※改行を入れるのはそのままなので写真の例は出しません。

<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <p>1行目</p>
        <br>
        <br>
        <p>4行目</p>
    </body>
</html>

 

3.まとめ

いかがでしたでしょうか。

 

タグの効果は、

pタグ...段落

divタグ...まとまり

brタグ...改行

となっており、

これさえ覚えれば簡単なウェブサイトが作れます。

 

また、

タグの中にタグを入れるのも可能なので、

pタグの中にpタグの中に...と、

マトリョーシカ方式でタグを入れていくこともできます。

 

では。