三回目ーー＜head＞、＜body＞、＜！DOCTYPE＞ーー
前回のファイルに関してですが、認識としてフォルダ(ウィンドウ)が家、ファイル(ページ)が中身の物や人、タグが名称や名前と思えばいいのでしょう。
今回はプログラムするうえでの必須事項を学びました。
どうやら前回までの範囲が『HTML』と『CSS』の基礎となるようで、今回から日頃目にするホームページやらサイトやらを目標に学んでいくことになります。
では、早速三回目を始めていきます。
今回学んだのは、『HTMLの全体構造』です。
HTMLファイルには、決められた型を書く必要があり
●『head』――ページに関する情報
●『body』――実際表示される内容
この二つの要素があります。
分かりやすく言うと
『head』は基本ページに表示されることのない記述
『body』は逆に表示したい事柄の記述
をするということでしょう。
『body』には今まで学んだものが入るということです。
それでは『head』について始めます。
１．<head>に記述すること
それ以前にプログラムを書く上でしておかないといけないことがあります。それは【DOCTYPE宣言】と呼ばれる、謂わば『HTMLのバージョンを宣言』する文章を記述することです。
『ブラウザがどんな言語で書かれているか把握するために今からこの仕様で始める』と宣言する必要があるかららしいです。
因みに、ブラウザとはネットを使う上で欠かせない代物で、Google ChromeやInternet Explorerが当てはまります。
それを踏まえて本題に入ります。
もう一度言いますが、<head>要素はページに関する情報を記述し、ページに表示されることはありません。
では、宣言と内容の例を書きます。
『HTML』
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
『CSS』
body {
font-family: “Avenir Next”;
}
前回までと若干ややこしいですが、意味は今のところ特にありません。
『HTML』ファイルに書かれるプログラムは必ず必要な記述なので覚えるしかなく、『CSS』ファイルの内容は【bodyで使う文字の書体を『Avenir Next』にする】というだけなのです。
よって、今の段階で完成しているわけではありません。
では、次に本格的な<head>に記述する内容を語ります。
２．<head>に記述すること2
引き続き説明します。
記述する事柄は『3つ』あり、どれも必ず必要な事項とります。
1．文字コードの指定
2．タイトル設定
3．SCCの読み込み
これらは定型文でもあり、何度も使っていれば自然に覚えでしょう。
コピペでもいいかも知れません。
順に説明すると
1は指定することで文字化けを防ぎます。
文字コードというのは、コンピューターが認識する固有番号のことで、以前話したカラーコードに似たようなものとなります。違うとすると、コンピューターは二進法(0と1だけで表す)なことです。
2はページのタイトル、即ちタブに現れる名前の事です。
これが無ければ何のページを開いているのか分からないでしょう。
3は『CSS』ファイルを読み取る為に必要不可欠な内容です。
以前のままでは『CSS』を読み取ることが出来ず、正確には表示されないプログラムだったということです。しかし、今回からはしっかり『CSS』を読み取るようになります。
例
『HTML』
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>プログラムを学ぼう</title>
<link rel=”stylesheet” href=”stylesheet.css”>
</head>
<body>
</body>
</html>
『CSS』は同じなので省きます。
新たに加えたのは以下の三つ
1 <meta charset=”utf-8”>
2 <title>プログラムを学ぼう</title>
3 <link rel=”stylesheet” href=”stylesheet.css”>
数字は上記で説明したものと一致します。
1
『meta』というのは『情報に関する情報』ということなのですがあまり意味が通じないので、私は『そういうものだ』と認識しておきます。
『charset=”utf-8”』というのが文字コードに値します。
2
説明するまでもなくタグに『プログラムを学ぼう』と表示されます。
3
『link』とはブラウザに『別のページやファイルが関係する』と伝えるものです。
『rel』はファイルとの関係性で
『href』は『そのファイルを読み込む』URLのことです。
意味は『linkが書かれているページとhrefで指定するページの関係性』となり、コンピューターは『CSS』ファイルなんだ、と認識するわけです。
今回はこれで一旦終わります。
次は全体のレイアウトに進み、部分分けに入ります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど」を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
