Info Tech

HTML5とCSS3基本講座 3|HTMLの基本文法のマスター

HTML CSS

この講座は、プログラミングしながらHTMLを習得しますが、初心者にも必要な最小限の8つのタグ要素について紹介しています。プログラミングは、「Brackets」というテキストエディタで実践します。ダウンロードや使い方などは、後日、本ブログでも紹介する予定です。

HTMLの基本文法

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

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

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

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

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

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

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

《webページの骨格》

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

《コンテンツのタグ》

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

テキストエディタで実践

PCと楽しそうな赤ちゃんPCと楽しそうな赤ちゃん

 

文法などを学んでも、なかなか飲み込めないので、「Brackets」というテキストエディタで実践していきます。

① 「Brackets」は、WindowsとMacで使えて制作者向けのブラウザーと言われている、Goole Chromeを使って対応します。Google Chromeをインストールしてください。

② 次に、テキストエディタのBracketsをインストールしてください。

③ 「Brackets」を開いて、「ファイル」から新規作成画面に進んで下さい。何も書いていないページになります。このページの下欄に表示されている「Text」から「HTML」を選んで下さい。ワープロと同じように文字を記載できるようになります。「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の文法も利用できるため安心して学びましょう。
マークアップを理解しよう
タグというもので、文書の意味付けをしていく作業のことを、「マークアップ」と呼びます。

ポイントのまとめ

この講座では、実際にプログラムを書くことで、HTMLを習得することを目指していますが、いきなりプログラミングしても混乱するので、必要最小限の8つのタグ要素について紹介しています。覚えなくても良いですが、一読して下さい。

プログラミングは、「Brackets」というテキストエディタで行います。無料で使えます。「Brackets」については、後日、このブログで、簡単な使い方等を紹介する予定です。

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