HTMLの基本と作成

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

前回は“HTML”の基礎知識を覚えました。
今回からは“HTML”の基本と作成に入ります。

作成

それでは、テキストエディタ、私の場合は「TeraPad(テラパッド)」を使用して下記の“HTML”を書いていきます。
書くのが面倒という方はコピーしてテキストエディタに貼り付けてください。

テキストエディタには様々なものがありますので、ご自分が使い易いと思うものを使用してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
作成できましたら、「ファイル→名前を付けて保存で、文字コードをutf-8に設定。
ファイルの種類をHTMLにするか、ファイル名の後ろに.htmlと書きましょう。

分かり易いようにデスクトップにでも保存しておきましょう。
半角英数字で保存した方がトラブルは少ないです。

保存したものをブラウザの“ファイルを開く”などで読み込ませるとタブ名に<title>で入力した「HTMLの基本」と<p>で入力した「こんにちは」が表示されます。

URLの拡張子が「ファイル名.htm」になっているかも確認してください。

以上が“HTML”を作成する上の基本的な流れになります。

基本的なタグ

まず、一行目の<!DOCTYPE html>ですが、これは“文章宣言”と呼ばれるタグになります。
つまり、「これは html ですよ~」と書いている訳です。

次の<html lang="ja">と</html>は、前回書いたように“開始タグ”と“終了タグ”になります。
lang="ja"は日本語で書いていくという指定です。

<head>タグと<body>タグ、頭と体ですね。
頭はページ名となる<title></title>を使用し、体はページの内容と覚えてください。
こちらも同じように“終了タグ”をそれぞれ使用します。

<meta charset="utf-8">はメタタグと呼ばれるもので、単体で使用できるタグになります。
この場合は、文字コードのutf-8を指定していることになります。

それでは、「こんにちは」の上にコメントタグを書いていきたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<!--コメント-->
<p>こんにちは</p>
</body>
</html>
こちらも書けたら保存しておきましょう。

<!--コメント-->は読み込んでもブラウザ上では表示されないタグになります。
ページのソースを表示させると見えますので、簡単なメモ書きに使用すると良いでしょう。

コメントタグは<!--が“開始タグ”になり、-->が“終了タグ”になるので、何行でも書けます。

まとめ

今回から“HTML”の作成に入りましたが、“HTML”はもの凄く難しいものではないということがお分かりいただけたのではないでしょうか?

まだまだ覚えることは多いですが、“開始タグ”と“終了タグ”で指定するという基本さえ覚えれば大体なんとかなると思います。

次回は他にどんなタグがあるのかを見ていこうと思います。

今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。