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

html css

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

コンテンツ

HTMLの構造

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

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

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

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

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

Brackets の起動

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

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

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

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

ホームページの基本

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

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

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

Brackets画面の最初に、＜!DOCTYPE html＞を記載
最新のHTMLで書かれていることをWebブラウザーに示しています。
＜html＞を＜!DOCTYPE html＞の次に記載
htmlタグは、ホームページの内容全体を囲みます。内容の最後には＜／html＞を記載します。
headタグを記載
＜head＞と＜／head＞の間には、HPタイトルや文字コードなどの全体に関する情報が記載されます。
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に入力して、右上の稲妻をクリックすると、ブラウザーには次の様に表示されます。