HTML5とCSS3基本講座３回｜HTMLの基本文法のマスター

基本講座では、プログラミングしながらHTMLを習得します。今回は、初心者にも必要な最小限の8つのタグ要素について紹介しています。Bracketsというソフトウェアで実践してきましたが、2021.の9/1でサポート終了が決まりました。後日、他のテキストエディタを紹介します。

コンテンツ

1 HTMLの基本文法

1.1 マークアップを理解しよう

1.1.1 初心者も知っておくべき8つのタグ要素

2 テキストエディタで実践

3 まとめ

3.1 関連

HTMLの基本文法

HTMLには、種類やバージョンがありますが、HTML5は、HTML 4.01やXHTMLの文法も利用できるため安心して学びましょう。

マークアップを理解しよう

タグというもので、文書の意味付けをしていく作業のことを、「マークアップ」と呼びます。

例えば、見出しを付ける場合は、h1要素を不等号記号で挟み込みます。具体的には、開始タグ（＜h1＞）と、スラッシュの入った終了タグ（＜/h1＞）で、見出し文を挟み込みます。（後で、具体例で試すので、今は意味不明でも適当に読む程度でOKです。）

タグは、山のようにありますが、覚えようとしなくても大丈夫です。頻繁に使うタグは、自然に覚えてしまうため、実際にプログラムしていく時に必要なタグは、辞書で調べながら記述する方法で良いでしょう。

但し、初心者でも知っておいた方が良いタグはあります。

初心者も知っておくべき8つのタグ要素

《webページの骨格》

html要素：HTML文書全体を定義
head要素：文書の詳細情報を定義
body要素：コンテンツの定義

《コンテンツのタグ》

h1〜h6要素：見出しのレベル（数字が増えると小さな見出し）
p要素：段落
a要素：ハイパーリンク
br要素：改行（開始タグのみで、終了タグはない）
img要素：画像の表示

テキストエディタで実践

文法などを学んでも、なかなか飲み込めないので、Bracketsというテキストエディタで実践します。尚、後日、Bracketsに変わるテキストエディタを紹介します。

Bracketsは、WindowsとMacで使えて制作者向けのブラウザーと言われている、Goole Chromeを使って対応します。Google Chromeをインストールしてください。
次に、テキストエディタのBracketsをインストールしてください。
Bracketsを開いて、「ファイル」から新規作成画面に進んで下さい。何も書いていないページになります。このページの下欄に表示されている「Text」から「HTML」を選んで下さい。ワープロと同じように文字を記載できるようになります。Bracketsの使い方は、後日、本ブログで紹介する予定です。尚、後日、Bracketsが無くなるため、別のテキストエディタを紹介します。今回は、このままお付き合い下さい。

Bracketsに次のような文字を打ち込んでみましょう。（練習用です）
不等号は、ワードプレスが機能して反応しないように、大文字で表記しています。実際に、Bracketsに記載する時には、小文字にして下さい。（・・・の後ろの文字は、この講座での簡単な説明文です、プログラミング時には除去して下さい）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＜!DOCTYPE html＞・・・・・HTML5バージョン宣言
＜html＞
＜head＞
＜meta charaset=”utf-8″＞・・・・・文字コード UTF-8 の指定
＜title＞練習ページ＜/title＞
＜/head＞

＜body＞
＜h1＞HTML5とCSS3基本講座 3｜HTMLの基本文法のマスター＜/h1＞・・・大見出し
＜p＞これは、基本講座の抜粋記事です。＜/p＞・・・・・左記の中に文章を記載
＜h2＞ HTMLの基本文法＜/h2＞・・・・大見出しの次に大きな見出し
＜p＞HTMLには、種類やバージョンがありますが、HTML5は、HTML 4.01やXHTMLの文法も利用できるため安心して学びましょう。＜/p＞
＜/body＞

＜/html＞
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

① Bracketsのファイル→「名前を付けて保存」にして、「Brackets」の右上に表示される稲妻記号をクリックして下さい。稲妻記号がダイダイ色に変わってから印字されます。

② 次のような印字が出てきます。
HTML5とCSS3基本講座 3｜HTMLの基本文法のマスター
これは、基本講座の抜粋記事です。

HTMLの基本文法
HTMLには、種類やバージョンがありますが、HTML5は、HTML 4.01やXHTMLの文法も利用できるため安心して学びましょう。

マークアップを理解しよう
タグというもので、文書の意味付けをしていく作業のことを、「マークアップ」と呼びます。