
おやじ
2015年12月12日
HTMLひな形の説明
ダウンロードした「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> |
1行目の<!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(ハイパーテキスト マークアップ ランゲージ)の略で、元々は文章を書くために開発された言語です。
2行目の<html・・・・・・>、10行目の</html>で、この間がHTML文書であることを宣言しています。
3行目の<head>、7行目の</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> |
4行目は使用する文字コードが「utf-8」だと宣言しています。
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5行目はスタイルシートのリンクを宣言しています。
スタイルシートについては「スタイルシート(CSS)ひな形の説明」で解説します。
5 |
<link href="style.css" rel="stylesheet" type="text/css" /> |
6行目はホームページのタイトルを記述しています。
「無題ドキュメント」をタイトル名に変更します。
6 |
<title>無題ドキュメント</title> |
8行目<body>、9行目</body>間にブラウザで表示されるホームページ本体を記述します。
8 9 |
<body> </body> |
ここでは深く考えず「ふ~ん」てな感じで、なんとなく見て頂ければ結構です。
現時点(2015年)で何も問題は無いので、「ひな形」として気にせず使ってください。