中学生のプログラミング　HTML編（4）

2/5 2023

カテゴリー・HTML　中学生　プログラミング

中学校から学ぶHTMLについての学習帳です。今回はHTMLの基本について学びます。

いいね！(150)

中学校で学ぶプログラミング

前回はGoogle Chromeのデベロッパーツールの内容について説明しました。
今回はデベロッパーツールからは離れて、HTMLの基本を説明したいと思います。

HTMLについて

HTMLはみなさんがインターネットなど通じて見ているページ（Webページ）を作っているプログラミング言語です。

プログラミング言語とは、外国の人には英語を話すようにコンピューター（パソコンなど）に分かるように言葉であると理解してもらったら良いと思います。

世の中にはたくさんのプログラミング言語がありますが、HTMLはページ（Webページ）を作るための言語となり、学生が馴染みやすいプログラミング言語であると思います。

タグについて

HTMLではページに表示したい文字や画像などを「タグ」と呼ばれるもので表現します。
タグは「<○○>」と「」で構成されていて、
「<○○>」は開始タグ、「/」を加えた「」を終了タグと言い、以下のように書きます。

<タグ名> 内容（文字など） 

ここで、注意点として、半角文字で入力するという！ということです。
また、スペースも半角文字を入力する状態で挿入して下さい！！

よくやってしまうのですが、文字を入力する際に全角文字を使用するので、そのまま全角文字を入力してしまうことが結構あります。
特に、スペースは目には見えないので注意が必要です。

HTMLの基本構造

まず、以下のサンプルコードを見てみましょう。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>中学生のプログラミング</title>
    </head>
    <body>
        <h1>HTMLについて</h1>
        <p>はじめてのプログラミング</p>
    </body>
</html>

●「<!doctype html>」とは
<!doctype html>はドキュメントタイプ宣言と呼ばれ、先頭に書きます。
これはページがHTMLの現在の最新バージョン（HTML5)であることを宣言しており、
HTMLをプログラミングするときには最初に書くものである。と思っておいて良いです。
●「<html>～</html>」とは
htmlタグで、先程の<!doctype html>に続いて書きます。
これはHTMLですよってことを表していて、開始タグの<html>から終了タグの</html>の間にページの内容を書いていきます。
lang=”ja”というのは、ページの言語を設定しており、「ja」はJapanese(日本語)であることを表しています。
ここで、日本語ですよ！って言っておかないとページを表示した際に正しく日本語が表示されない場合もあります。
<!doctype html>と同様に「lang=”ja”」もHTMLをプログラミングするときには書くものとおぼえておいて下さい。

m's blog