HTMLの基本構文を知ろう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

※当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。
インストール手順はこちらをご覧ください。


※当ページに関係のある過去記事は以下の通りですので、先にご覧いただくことをお勧めします。
HTMLの基礎 

今回の内容

今までのHTML解説で、どのようにしてホームページが作られているかが何となくわかってきたと思います。
なので今回は、HTMLの基本構文と<title>タグについて説明します。

HTMLの基本構文

HTMLには基本となる書き方が存在しています。
それが、以下のコードです。

<html>
  <head></head>
  <body></body>
</html>

とりあえず今の段階では、「<head>は色々な設定をするタグ<body>がページの中身」というニュアンスで覚えておけば大丈夫です♪

ただ、<body>の中身はなんとなくイメージできるかもしれませんが、<head>はピンとこないでしょう。
ということで、書くものの例を一つ紹介しておきます。

実際にコーディング!

タイトルを設定するには、<title>タグを使用します。
実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOKです♪

<html>
  <head>
    <title>タイトルはここに書きます。</title>
  </head>
  <body>
    <p>ページに表示するのはこの部分です。</p>
    <img src="test.png" alt="ページに表示するのはこの部分です。">
  </body>
</html>

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードして同じ様に動かしてみましょう。

今回は《HTMLの基本構文.html》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。

手順は「記述→保存→表示の確認」となります。
表示の確認は『文字を表示してみよう!』の記事をご覧ください。

さいごに

今回はHTMLの基本構文と<title>タグについてお話をさせていただきました。
今後はこの構文を使いながら書いていくので、しっかり覚えておいてくださいね♪

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆