その７ head要素の設定（ページのタイトル設定とその他の基本設定）
前回のセクションでは、ホームページの全体像を学びましたね(もう一度確認してみてください）。おさらいしますが、ホームページの構造は
xml宣言
文書型宣言
html宣言
が大きな枠組で、そしてhtml宣言の中にさらに、head要素とbody要素があるということを学びました。そしてbody要素に「ページの本文」を書くこと。body要素がブラウザで表示される部分であるということを学びました。ではhtml要素の中のもうひとつの要素、head要素には何を記述するのでしょう？今回も前回同様少し難しいですが、重要な要素なので、概念だけでもさらりと覚えるようにしましょう。それでは解説します。
head要素の構成は？
head要素の中には、そのページの基本情報が入ります。ブラウザ上では表示されない部分です。
このセクションでは具体的に作成したファイルにコードを入力しながら学んでください。
ファイルは前回作成したファイル「base.html」を使用しhead要素に入力していきますね。このセクションを乗り越えると次からはページ作成に入りますからもう少しの辛抱です。
head要素の設定 その１タイトルを決める（title要素)
ホームページのもっとも重要な要素タイトルを設定しましょう。
タイトルはhead要素で挟まれたなかに、titleタグをコーディングしその中にタイトルを入れて記述します
タイトルタグの役割
- ブラウザーの上に設定したタイトルが表示される
- 検索したときに、そのタイトルで表示される
と、主にこのような役割があります。
では実際にタイトルタグを入力しましょう。
タイトルタグは以下のようにコーディングします。
<title>あなたのホームページのタイトル</title>
ではbase.htmlのhead要素の中にタイトルタグを挿入してみましょう。
タイトルはあなたのお好きなタイトルでかまいませんが、ここでは「ホームページの作り方」と
入力します。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページの作り方</title>
</head>
<body>
あいうえお
</body>
</html>
それではbase.htmlを上書き保存し、ブラウザーで確認してみてください。（参考画面はこちら）
あなたのブラウザーの上にタイトル（今回は「ホームページの作り方」）が確認できたらOKです。
タイトルタグはホームページの画面には出てきませんが、絶対記載項目です。初めてホームページを作る際は見落としがちですが、必ず記載するようにしましょう。
head要素の設定 その２ meta要素の設定①
meta要素はあなたのサイトの基本データを設定するものです。属性値にhttp-equiv属性またはname属性を指定し、content属性でその具体的な値を指定します。
http-equiv属性ではページの種類を設定する（text/html)、スタイルシートの種類を設定する(text/cxx)、スクリプトの種類を設定する(text/javascript）を設定するのが一般的です。これらはプログラムをサイトに取り入れたい場合などにも必要な設定なので、全てのページにこれらのコードが必要なのだと理解してもらえるだけで十分です。では実際に先程編集したタイトルタグの上に以下のように入力してみてください。編集ファイルは先ほど同様base.htmlですからね☆彡
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ホームページの作り方</title>
</head>
<body>
あいうえお
</body>
</html>
head要素の設定 その３ meta要素の設定②
次はmeta要素のもう一つの属性name属性を設定します。name属性の役割は実際ににページ閲覧者が検索するキーワードを設定したり、ページが検索されたときに表示される概要文を設定します。今度はタイトルタグの下に以下のように記述します。
キーワードは今回は、「ホームページ、作成、初心者」と記述し、概要分は「初心者のためのホームページ作成
講座」と入力します。これもあなたのサイトのキーワードや説明文を記載してもらって構いません。 では以下のように入力してください。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
あいうえお
</body>
</html>
これでbase.htmlを上書き保存してそして、このファイルをクリックして確認してみてください。（確認画面はこちら）
titleや概要分をつける意味
あなたは誰かと会話するとき日本語で話しますよね？ホームページでも同じでまず、どんな言語で話をするのかあらかじめ決めておく必要があるのです。head要素はそういった、基本的な情報を設定する重要な役割をしています。最終的に制作する場合は、これらのタグを一から打ち直すのではなく、基本ページを作成し、それを編集して作成するほうが効率的です。ですので、今回作成したbase.htmlをコピーして活用していただくことが実務的にもおすすめです。
実際にサイトを作成していきましょう
大きな構造や基本設定は、単純ではないので大変だったのではと思いますが・・・これからは、全く難しくありませんし、ホームページ作成の醍醐味はこれからです。ですので次回からは楽しく、取り組めるかと思います。ではいよいよサイト作成にとりかかっていきましょう。
これでひとまずサイトの設定は終了です。次はいよいよ実際に文字を入力してサイトを作っていきましょう。
次のセクションは
その８ 文章を入力する です