[3] htmlファイルの構造

You are here

Home »css道場
Mon, 06/27/2011 - 18:40 — acordo

まず別ウィンドウでindex1.htmlのソースを表示して下さい． sample(htmlソース): index1.html を大まかにみると，以下の３つのパートによって構成されています．
(1) DOCTYPE宣言
(2) html
     (2-1) head
     (2-2) body

(1) DOCTYPE宣言とは，このファイルがどの規格のドキュメントであるかを宣言する部分です．htmlにもいろいろなタイプがあり，ここでは，XHTML 1.0 Transitional の書式に則っていることを宣言しています．なお，Drupal 7では，XHTML+RDFa 1.0 となっています．これは以下のように記述されます．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

 

(2) htmlの部分が，内容を記述している部分です．全体が，<html>　</html>というタグの対で囲まれていることを確認してください．これは，さらに二つの部分に分かれています．
(2-1) head(<head> </head>)は，通常のブラウザでは表示されない部分ですが，キーワードなどのメタ情報が書き込まれます．cssファイルの指定もここで行います．

(2-2) body(<body> </body> )が，ページの内容を記述する部分です．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>株式会社ACORDOからのお知らせ</title>
</head>

 

<body>
<h1>株式会社ACORDO</h1>
<div class="section">
<h2>お知らせ</h2>
<div class="section">
<h3>2009-4-1 音楽配信事業開始</h3>
<p>mp3フォーマットによる音楽配信事業を開始いたしました．新サイト：<a href="http://acordomusic.com">Shall We Ensemble?</a> に是非アクセス下さい.</p>
</div>
</div>
<div class="section">
<h3>2011-6-4 日本ロービジョン学会発表</h3>
<p>守山正樹, 鎌田幹夫, 岩井梢, 触覚を用いたリスクコミュニケーション・ゲームの開発と試行, 第12回 日本ロービジョン学会, P-29, 2011.6.4, 北九州国際会議場</p>
</div>
<br />
<div class="section">
<div class="section">
<h3>お問い合わせ先</h3>
<ul>
<li>ACORDO Corporation，Kamakura, Japan </li>
<li>Mail: contact@acordo.jp</li>
</ul>
</div>
</div>
</body>

</html>