iBitzEdge

初心者でもブラウザ上で表示できるHTMLページを作ってみる その2

mushkinoko

こんにちは、mushkinokoです。自分のサイトのテーマの作成や旅行や色んな用事などで、記事を書くのが遅れてしまいました。いやー夏は忙しいですね。もう少し記事を書けるように頑張っていきます。今回の記事は、前回の初心者でもブラウザ上で表示できるHTMLページを作ってみるの続きで、HTMLの厳密なルールについて説明したいと思います。

HTMLの基本のルール

HTMLを作成するにあたって、守ったほうがいい決まりがあります(というより、必ず守りましょう)。それをまとめたので、一つずつ説明していきます。

基本のコード

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

なんか見たこともないタグがたくさん出てきました。じゃあ、一つずつ紹介します。

doctype

これは、DOCTYPE宣言というタグで、<!doctype html>または<!DOCTYPE html>と書くことが多いです。ただ、前にも言った通り、大文字小文字は区別されないので、何でも大丈夫です。あと、終了タグはありません。だから単体で大丈夫です。

htmlタグ

このタグは、htmlタグと言い、「ここからここまでがHTMLですよー」っていうことを表すタグです。

<html>この場所にHTMLの中身を書く</html>

こんな感じで使います。範囲を表すので、開始タグと終了タグがあります。

headタグ

このタグは、headタグと言って、ブラウザには表示されない情報を書くタグです。これも開始タグと終了タグがあります。

metaタグ

これは、メタデータという情報を書くタグです。metaタグは、headタグの中に書きます。メタデータには色々な種類があるのですが、文字コードを指定するのにも使います(文字コードについては後で説明します)。

<meta charset=”utf-8″>

このようにしてHTMLの文字コードを指定します。

titleタグ

これは、HTMLのタイトルを指定するもので、ブックマークやブラウザのウインドウやタブに表示されます。これもheadタグの中に書きます。

<title>HTMLのタイトル</title>

こんな感じです。

bodyタグ

この中にブラウザに表示される部分を書きます。ここに、前回やったようなpタグやh1タグなどををここに書きます。

ちなみに、なぜタブを使っているのかというと、これは字下げ(インデント)というもので、プログラムを見やすくするためのものです。HTMLでは、開始タグと終了タグの位置を合わせたり、タグが入れ子になっていることを表すのに使います。

文字コードって何？

みなさんも、コンピュータは数字を使ってデータを表していることは知っていると思います。文字も、数字を使って表しています。

文字コードは昔からOSによって別々のものが使われていましたが、Unicodeという基本的にどのOSでも使える文字コードが作られて、最近は、その文字コードが使われるようになってきています。Unicode – Wikipedia

ちなみに、さっきmetaタグで指定した文字コードとファイルを保存するときに指定した文字コードは統一する必要があります。そうしないと文字化けしてしまうことがあります。

とりあえずやってみよう！

前回作ったHTMLを基本のコードに当てはめてみます。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>○×のブログ</title>
    </head>
    <body>
        <h1>○×のブログ</h1>
        <h2>7/20 散歩をしたよ</h2>
        <p>今日は散歩をしました。どこかの海岸沿いを<br>ずーっと歩きました。</p>
        <p>また明日もどっか行きたいなー。</p>
        <a href="https://i-bitzedge.com">iBitzEdgeはこちら</a>
    </body>
</html>

matome2.htmlというHTMLファイルに保存したら、ブラウザで開いてみましょう。

ちゃんと、titleタグが反映されています。

これからももっとHTMLを練習していきましょう！！次回は、属性というものの話と、画像を表示する方法を紹介します。