簡素な窓
判りにくいもの等を分かり易く紹介しています。
HTML-CSS講座

HTML5とCSS3基本講座 8回|HTML構造の復習と演習

html csshtml css

HTML の基本的な構造を復習しながら、Bracketsなどの無料のテキストエディタへの入力を通じて、少しずつ学んでいきます。簡単な内容ですが、ホームページの基本が理解出来るようになって、HTMLでホームページ作成出来るようになるでしょう。

HTMLの構造

ちょっとだけ、HTMLの構造を復習しましょう。HTMLは、Webで使うドキュメントを記述する言語です。それぞれのタグには意味があって、タグで挟まれた内容には、「何々の」のような情報が書かれているということを示しています。

このような言語のことをマークアップ言語と呼びます。

タグは<要素名>の形で記載します。(実際には、<>は半角で記載しなければなりませんが、ここでは、HTMLで起動しないように全角で記載しています)。

タグは、<要素名>〜</要素名>と記載します。また、タグ内に別のタグを入れることもできます。

では、いつまでも、内容の紹介ばかりでは、つまらないため、実際に「Brackets」を起動させて動作させてみましょう。

Brackets の起動

尚、Windows PCにBracketsをインストールしたものとして進めます。

  1. スタートメニューから「すべてのプログラム」をクリックしてBracketsを探す。
  2. Bracketsがあったらクリックして起動。
  3. ファイアウォールが起動したら「アクセスを許可」。

以上で、Bracketsは起動します。

  1. Bracketsを起動して画面を表示。
  2. Brackets左上の「ファイル」→「新規作成」
    「名前を付けて保存」を選んで適当な名前をつけてから、「.html」の拡張子を付加して保存して下さい。

ホームページの基本

ホームページをHTMLで作りながらHTML5とCSS3を習得します。

HTMLファイルの基本部分の作成

いつも、言っていますが、ここではタグや/線等を全角で記載していますが、実際のプログラミングでは半角で記載して下さい。

  1. Brackets画面の最初に、<!DOCTYPE html>を記載
    最新のHTMLで書かれていることをWebブラウザーに示しています。
  2. <html>を<!DOCTYPE html>の次に記載
    htmlタグは、ホームページの内容全体を囲みます。内容の最後には</html>を記載します。
  3. headタグを記載
    <head>と</head>の間には、HPタイトルや文字コードなどの全体に関する情報が記載されます。
  4. bodyタグを記載
    <body>と</body>の間には、ブラウザーに表示されるコンテンツの内容を記載します。

《タグの役割》
タグの入力は、<html>と</html>の間に、<head>と</head>を記載します。</head>に続けて、<body>と</body>を入れます。そして、これらの間に記載する内容も決まっています。

  • htmlタグの内容は、headタグとbodyタグだけです。
  • headタグ内容には、ブラウザー表示されませんがタイトルや文字コード情報などHP全体に関わる内容を入力します。
  • bodyタグの内容には、HPに表示する見出しや段落を入力します。

日本語の認識

HTMLファイルで日本語を入力して、正しい文字を表示させるには、タグで文字コード指定しなければなりません。

文字コードは、<head>と</head>の間に記載します。

<head>
<meta charset=”UTF-8”>
</head>

上記は、文字コードがUTF-8の例です。ここで使った、<meta>の終了タグ</meta>は不要です。

本日の演習

今日、習ったことをBrackets画面に入力して、ブラウザーに表示させてみましょう。

Brackets画面の最初に、<!DOCTYPE html>を記載することから始めて下さい。尚、ブラウザーに表示されないと面白くないので、題名は「HTML5とCSS3基本講座」として、<head>と</head>
の間の<title></title>間に記載して下さい。

また、コンテンツの内容は、<body>と</body>の間に記載して下さい。
今回は、「HTMLは、Webで使うドキュメントを記述する言語です。それぞれのタグには意味があります。」を入れて下さい。

Brackets画面への入力内容

次の内容を入力してください。数字とアルファベットは半角文字でお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML5とCSS3基本講座</title>
</head>
<body>
<h2>演習用の題名</h2>
<p>HTMLは、Webで使うドキュメントを記述する言語です。それぞれのタグには意味があります。</p>
</body>
</html>

以上の内容をBracketsに入力して、右上の稲妻をクリックすると、ブラウザーには次の様に表示されます。

8回 講座演習ブラウザー表示画面8回 講座演習ブラウザー表示画面

まとめ

復習を交えながらHTMLの全体構造を学習しました。

次回も、ポイント内容と具体的なテーマ演習を中心に行います。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。
RELATED POST