>> HTML入門トップに戻る

head部について

今回は主にhead部に記述するコードについて説明します。
head部に入る前に、一番最初の行にドキュメントタイプを指定します。
html自身にもバージョンがあるのですが、今回はバージョン4.01に沿って説明します。
基本的に以下の三つがあります。

●Strict DTD
非推奨の要素や属性、フレーム等が使用できません。仕様に対して厳格であることを意味します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

●Transitional DTD
フレームが使えない以外は、特に制限なく記述することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

●Frameset DTD
フレームも使用でき、特に制限無く記述することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

上記三つのうちどれかのコードをそのままコピーしてhtmlファイルの一番上に貼り付けるだけで結構です。
この講座では、1つ目はかなり厳格なので、2つ目のドキュメントタイプを使って説明していきます。


次に、htmlタグ内でページの言語を指定します。

htmlタグの中にlang="ja"と書いてください。
<html lang="ja">
こうなります。タグの後には半角スペースを一つ以上入れてくださいね。
次にhead部の説明に入ります。
head部は基本的にその文書がどのような内容で記述されているのかの情報を書きます。
それには、METAタグを使います。
コードは下記のようになります。

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="description" content="あいうえお">
<meta name="keywords" content="かきくけこ">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="../main.css">
<title>さしすせそ</title>



http-equiv属性ではどの情報を登録するかを指定し、
content属性にその内容を記載します。
最初の一行はこのページが何の言語で記述されているか、なんの文字コードで書かれているかを示しています。
いじる場所と言えば、最後の文字コードのところでしょう。
shift-jisなどのほかの文字コードを指定してもよいですが、私はutf8をオススメします。

2行目はこのWEBページ内のスクリプトは何の言語を使っているかを指定します。
text/javascriptと書いていますが、これはjavascriptというスクリプト言語をこのページで使っていますよ、
という意味です。
javascriptとはWEBページに動的な変化を加えることが出来る言語です。
javascriptを使わなければ書く必要はありません。
もし他の言語を使う場合は、「javascript」と書かれた部分を指定の言語に書き換えます。

3行目はこのWEBページのスタイルが何かを指定します。
ページのスタイルは基本的にCSSで指定しますので、上記のように書くだけです。

4~6行目は、このページの説明や検索ロボットに対する設定です。
ここはname属性を使います。

・description
→このページがどういうページなのかを説明するためのものです

・keywords
→このページに関するキーワードを記述します。

・robots
→検索ロボットに対する設定を記述します。
→index,followとかけば、検索ロボットへの登録、文書内のリンクの探索を許可することを意味します。
→noindex,nofollowと書けば、登録もリンク探索も無効にします。

6行説明しましたが、この中で最低限必要なのは1行目だけです。
ほかは必要に応じて付け足しましょう。
書き方はそのままなので全部丸暗記するしかありません。

次にlinkタグがありますが、
これは主にスタイルシートの場所を指定するものです。
上記のコードの../main.cssと書かれてる部分に取り込みたいCSSのパスとファイル名を指定します。
ほかは丸暗記で構いません。

最後にtitleタグです。
この中のページのタイトルを書きます。

以上が大体head部に書く内容です。
ただ覚えて書くだけなので、そんなに難しくないですよね?

次回はbody部についての説明を行います。

>> 【body部について】に進む
>> HTML入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)