前回は HTML を学習するための環境について紹介しました。
今回は HTML の基本構造についてです。
非常に基本的な部分ですが、重要なのでぜひ理解しておきましょう。
HTML について
HTML は、Hyper Text Markup Language の略です。
Webページを記述するためのマークアップ言語です。
文書の論理構造や表示の仕方などを記述するためのものです。
私たちが見ているホームページのほとんどがこの HTML で記述されています。
現在は、HTML5 というものが出てきています。
今までの HTML（HTML4）と何が違うのかということですが。
要素の見直しがされて、今まで複雑だった記述が構造的に書けるようになったとか。
動画や音声、グラフィックの描画が可能になったとか。
色々あるんですが。
初めたばかりという人はそもそも HTML 自体わからないと思うので。
違いはあまり気にせず（説明せず）。
HTML（HTML5）を学習していきます。
HTML の基本構造
それでは本題の基本構造です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ぱそたのHTML講座</title> </head> <body> ここに本文を記述。 </body> </html>
細かく見ていきましょう。
最初に <!DOCTYPE html> というのがあるのですが。
これは文書型宣言というものです。
以前のものはもっとややこしかったのですが。
HTML5 はシンプルになっています。
<html></html> というような表記があるかと思います。
これはタグというものです。
htmlタグ があって、その中に headタグ と bodyタグ があります。
これが昔からの基本構造となります。
- htmlタグ → HTML で記述されているという意味。
- headタグ → ヘッダ部分。タイトルや文字コードなどを記述していく。
- bodyタグ → ボディ部分。ここにブラウザに表示される内容を記述していく。
ちなみに <html lang=”ja”> という表記があるかと思いますが。
この lang の部分は属性と言います。
この場合は「日本語で記述しています」という意味です。
タグごとに指定できる属性は異なりますので。
記述しながら慣れていってもらうと良いかと思います。
あと metaタグ の charset=”utf-8″ では文字コードを指定しています。
このように指定する場合、UTF-8 で保存するのを忘れないように注意しましょう。
たしか Atom のインストールを紹介したとき。
前に書いていたテキストが文字化けする場合は Shift-JIS にしましょうという説明をした気がするので。
多分、そのまま HTMLファイルとして保存すると Shift-JIS で保存されると思います。
HTMLファイルの保存方法
Atom エディタなどで先程のような HTMLファイルを制作したら。
拡張子を .html として保存しましょう。
名前は半角英数字にします。
TOPページであれば index.html とするのが一般的です。
上記は Atom エディタの例ですが。
この赤で囲まれた部分がポイントです。
クリックすると色々選択できるので。
新規作成の段階でこの状態にしておきましょう。
ちなみに改行コードが CRLF のままですが。
これは HTML の場合、改行コードはどれでもいいですよと W3C という Web の色々な決めごとをしている団体がそう言ってるからです。
従って、この場合は文字コードだけ UTF-8 にして保存しておきます（改行コードを LF にしても構いません）。
次に開くときも UTF-8 で開いて保存するのを忘れないようにしましょう（文字化けするから気付くと思いますが）。
挫折しそうという方へ
昔の話なんですが。
ホームページに興味があるという子に自分がわかりやすいと思った ホームページ作成マスターブック という本を貸したんですが。
その子は「意味がわからん」と言って、その本は私のもとにすぐ帰ってきました。
でもその子は詳しくは書きませんが他に優れた能力をたくさん持っているので、この知識は必要ないのでしょう。
本業がおろそかになってしまっては本末転倒ですからね。
しかし、今となっては HTML の知識がなくても、プロがデザインしたテンプレートを使って、低価格で簡単にホームページを持つことができるのです。
下記記事が参考になるかと思います。
自分で簡単に更新できるというのがポイントで。
自分なりのホームページをプロがデザインしたテンプレートを基盤にして育てていけるのです。
もちろん自分で制作できるようになった方が費用はかかりませんが。
意外と安いので検討する価値はあるかと思います。
特にデザインに関してはどちらのサービスも本当に優れているのでおすすめです。
最後に
いかがでしょうか。
この基本構造がわかることがソースコードを読むための第一歩と言えます。
あとプログラミングでは半角英数字が基本になります。
例えば、コード部分で半角スペースのところが全角スペースだと正しく表示されません。
注意しましょう。
次回は見出しと段落について紹介します。
コツコツとやっていきましょう。
