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

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

基本講座では、プログラミングしながらHTMLを習得します。今回は、初心者にも必要な最小限の8つのタグ要素について紹介しています。Bracketsというソフトウェアで実践してきましたが、2021.の9/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に変わるテキストエディタを紹介します。

  1. Bracketsは、WindowsとMacで使えて制作者向けのブラウザーと言われている、Goole Chromeを使って対応します。Google Chromeをインストールしてください。
  2. 次に、テキストエディタのBracketsをインストールしてください。
  3. 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の文法も利用できるため安心して学びましょう。

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

まとめ

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

プログラミングは、Bracketsというテキストエディタで行います。無料で使えますがダウンロードの際、広告に気をつけながら行ってください。Bracketsについては、後日、このブログで具合的なダウンロードの仕方や、使い方を紹介する予定です。

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