ホントの初心者でも絶対分かる!HTMLタグ<html><head><body>の意味とは -ホームページビルダーを使ったWebサイトの作り方-
こんにちは。PCインストラクターの良知敏子です。
第2回目のコラムでは、HTMLソースを読んでいく上での基本事項を解説していきました。
今回のコラムでは、HTMLソースの構造やタグの解説を行っていきます。
少しだけソースの修正も行ってまいります。
まずは、前回作成した、ごく簡単なホームページのソースを見ていきましょう。
このソースは「ページ編集」タブでホームページを作成すると、ホームページビルダーが自動で記述を行うものでしたね。
まずは、おおまかに見ていきましょう。
「」「」「」という3つのタグに注目しましょう。
HTML文書は「」「
」「」の3つのタグで文書の構造を表します。
- :この文書がHTML文書である事の宣言
- :文書のヘッダー情報の記述
- :文書の本体
それぞれのタグは終了タグと共に使用し、以下のように使っていきます。
- 「 ~ 」:HTML文書を記述する部分
- 「 ~ 」:文書のヘッダー情報を記述する部分
- 「 ~ 」:実際にブラウザ上で見える内容を記述する部分
それでは1行ずつ見ていきます。
まずは1行目の「」。
こちらは、どの規格に準じたHTML文書を記述しているのかを定義する部分なのですが、今の段階では難しい事は考えず、おまじないのようなものだと認識して下さい。
この部分が無くても問題はありません。
ブラウザはHTML文書を解釈して表示してくれます。
次に2行目。
「」ですが、こちらはhtml文書内でどのような言語を使っているのかを定義している部分です。
日本語を使っているので「ja」と指定しています。
つまり「これから日本語でHTML文書を記述します」と読み替えることが出来ます。
ここで少し前回のおさらいです。
要素を「<>」で囲んだものが「タグ」と呼ばれるものでした。
2行目の「」という部分を見ると「html」という要素の後ろに「lang="ja"」と記述されていますが、この「lang」の事を属性といいます。
「lang」は「language」の事で「言語を指定して下さい」という意味になります。
要素ごとに定義が出来る属性が決まっており、要素が「概要」だとしたら、属性は「詳細」と考えることが出来ます。
次に「
」の部分です。ここは、文書のヘッダー情報が記述される場所です。
ヘッダー情報にはどのような種類があるかというと、文書のタイトルや作成者情報、文書のキーワードや説明文、文字エンコーディング情報などになります。
今回のHTMLソースでは3つのヘッダー情報が記述されており、以下のように読み替えることが出来ます。
- :
文字エンコーディングは、UTF-8を使用します。
(UTF-8とは、日本語文字エンコーディングの値の一つ)
- :
JustSysytem社のホームページビルダー18で作成しました。
(メモ帳などのテキストエディタで作成する場合は記述しないこと)
:
この文書のタイトルは○○です。
まずは「」タグですが、これは文書に関する様々な属性を定義するタグです。
今回は文字エンコーディングの指定と、文書をホームページビルダーにて作成したことが定義されています。
また、文字エンコーディングについてですが、指定は必須ではありません。
しかし、指定を行わないとブラウザによっては文字化けが起きる場合もあります。
出来れば指定しておいた方が良いでしょう。
次に「
ホームページビルダーでタイトルの設定を行っていなかったため「
7行目の「」までがヘッダー情報になり、次の「
いかがですか?
このように順序立てて見ていくことで、ただの英字の羅列ではなく、きちんと構造化され、意味のある文書であると認識していただけるのではないかと思います。
HTML文書は3つの大事な部分で構成されていると覚えておいて下さいね。
最後に、HTML文書を少しだけ修正してみましょう。
8行目の「
追加が出来たら「ページ編集」タブをクリックします。
HTMLソース内に、入力した文章が表示されています。
このように、文章の追加はHTMLソースからでも可能です。
ソース内で編集した文章は、正しく解釈され、ブラウザで表示することが出来るのです。
いかがでしたか?
ホームページビルダーを使ったソース内容の見方をご紹介いたしました。
次回は様々なHTMLソースの修正作業を行っていきます。
楽しみにお待ち下さいね。
|
|
はじめまして。静岡県静岡市でパソコン講習やセミナー、ホームページ作成やサポートを行っているテックスカラ代表の良知敏子と申します。
営業事務業務のIT担当として、たまたま携わったパソコンでしたが、色々な業務に携わりながらとてもたくさんの事を学び、現在に至っております。
常にユーザー目線での講習や制作を心がけることが信条です。
どうぞよろしくお願いいたします。
|
|