おやじ
2015年12月12日
ＨＴＭＬひな形の説明
ダウンロードした「index.html」をTeraPadで開いてください
|
1 2 3 4 5 6 7 8 9 10 |
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>無題ドキュメント</title> </head> <body> </body> </html> |
１行目の<!DOCTYPE・・・・・・・・・・・>はHTML言語のバージョンを表します。
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
最新バージョンは「HTML5」ですが、「XHTML 1.0 Transitional」は対応しているブラウザ（Internet Explorer 、Firefox、Safariなど）も多いです。
「HTML」とは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略で、元々は文章を書くために開発された言語です。
２行目の<html・・・・・・>、１０行目の</html>で、この間がHTML文書であることを宣言しています。
３行目の<head>、７行目の</head>間は文書のタイトル等のヘッダ情報を記述します。
|
3 4 5 6 7 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>無題ドキュメント</title> </head> |
４行目は使用する文字コードが「utf-8」だと宣言しています。
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5行目はスタイルシートのリンクを宣言しています。
スタイルシートについては「スタイルシート（ＣＳＳ）ひな形の説明」で解説します。
|
5 |
<link href="style.css" rel="stylesheet" type="text/css" /> |
6行目はホームページのタイトルを記述しています。
「無題ドキュメント」をタイトル名に変更します。
|
6 |
<title>無題ドキュメント</title> |
8行目<body>、9行目</body>間にブラウザで表示されるホームページ本体を記述します。
|
8 9 |
<body> </body> |
ここでは深く考えず「ふ～ん」てな感じで、なんとなく見て頂ければ結構です。
現時点（２０１５年）で何も問題は無いので、「ひな形」として気にせず使ってください。
