[1] htmlファイル

You are here

htmlは,HyperText Markup Languageの略です.HyperTextとは,複数の文章が関連づけられた仕組みを指します.webページは通常の書籍と違い,リンクによって次々と別のページに飛んでいくことができます.これがHyperTextであるという意味です.

markup languageは,文章表示の指定をテキストに埋め込む様式の言語です.それを記述するのが,tagと呼ばれるもので,下記のコード例中,<h1></h1>,<p></p>などがそれにあたります.tagについては,

  • <>で囲む.
  • tagの有効範囲は<>~</>までの範囲(例外あり).

という約束になっています.

ここで,

  • "<h2>お知らせ</h2>"をh2要素
  • "h2"を要素名

と呼びます.

htmlやcssの規則は,W3C (World Wide Web Consortium)が勧告しており,コンテンツ制作者はそれに順じてコードを記述します.html文は,その約束ごとが面倒と感じるかもしれませんが,文章を構造的に記述するという意味で非常に優れています. ホームページは沢山のページの集合であり,一つのページ内にも,意味としての階層性があります.html文を上手く使いこなせば,そのような階層性を全ホームページに渡って統一的に表現することが出来るようになります.

公式ドキュメントなどでは,章や節が厳密に記述されますが,それと同様です.例えば,

  • h1:タイトル
  • h2:章
  • h3:節
  • h4:文中小見出し

のように内容の階層性を要素で分けていけば,ページが遷移しても,階層性がはっきりするのでとてもみやすいコンテンツとなります.



htmlファイルが,ブラウザ上でどのように表示されるかをみてみましょう.
  1. 以下の枠内をコピーして,Crescent Eveに貼り付け,index1.htmlとして保存してください.
  2. index1.htmlをChromeにDrop & Dragして下さい.

 

sample(htmlソース):  index1.html

<!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>

 

» 続きへ