HTML入門

HTMLの概要

ホームページのソースは HTML(HyperText Markup Language)またはXHTML(eXtended HyperText Markup Language)という言語で記述する。本講義ではHTMLを取り上げる。

HTMLは直訳すると、ハイパーテキストを対象としたマークアップ言語である。ハイパーテキストとは、文書から別の文書や画像、音声などを自由に参照できる文書である。マークアップ言語とは、文章中に組み指定(markup)をつけて論理構造をつくる言語である。

HTMLは、見出し、段落、引用文、箇条書き、表、画像の表示、強調、リンクなどの論理構造を要素により表現する。

例えば、 <h1>東京子のページへようこそ</h1> は、最上位の見出しを表わすh1要素(element)で、 <h1> は、h1要素の開始タグで、 </h1> は、終了タグである。「東京子のページへようこそ」はh1要素の内容(content)である。ブラウザは「東京子のページへようこそ」を最上位の見出しとして表示する。フォントや大きさはブラウザが決めるので、ブラウザによって見え方は異る。

また、<html lang="ja"> から </html> までをhtml要素という。 <html lang="ja"> はhtml要素の開始タグ、lang="ja"は属性、langは属性名、jaは属性値である。

HTMLの構成

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
```
はHTML4.01 Strictの文書型宣言である。 HTML4.01 Strictの使用とそのDTDの場所が書いてある。

html要素は、head要素とbody要素からなる。

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  ← 文書型宣言
    "http://www.w3.org/TR/html4/strict.dtd">          ← 文書型宣言の続き
   <html>             ← ここからhtml要素
    <head>            ← ここからヘッダ要素

    </head>           ← ここまでヘッダ要素
    <body>            ← ここからbody要素

    </body>           ← ここまでbody要素
   </html>            ← ここまでhtml要素

注 HTML文書は大文字で表わしても小文字で表わしてもよい。 W3C仕様書では見やすさのためhtmlなどの要素名は大文字、langなどの属性名は小文字で表してある。本講義では文書型宣言は大文字、その他は小文字で表すが、一部に例外もある。

注 HTML文書では段下げなどの空白や改行は、ソースを読みやすくするために用いる。ブラウザは半角の空白1個とみなし表示する。

head要素

head要素はタイトルおよびサーチエンジンが利用するキーワードや本文に表示されない事項を記述する。 title要素、meta要素、style要素、link要素などからなる。

meta要素

文字コード、著者、キーワードなどを表す。

title要素

title要素は必ず必要で、ブラウザのタイトルバーに表示され、ブックマークしたページはタイトル要素が登録される。

style要素

色、フォント、表示する位置などの見え方の指定はスタイル要素、またはスタイル要素を独立のファイルにしたスタイルシートで表わす。

例 h1要素は紺色の文字で背景は水色で中央揃え、 body要素の背景は白、文字は黒で表わすには、title要素の前に

    <style type="text/css">
     <!--
      h1{ color: navy; background: aqua; text-align: center }
      body{ background-color: white; color: black }
     -->
    </style>

と書く。

注 で挟んだのは、スタイルシートに未対応のブラウザが、そのまま表示するのを防ぐため。スタイルシートのコメントは、/* と */ で挟む。

表示する位置
属性の値	意味
left	左揃え
center	中央揃え
right	右揃え

色(HTML4.0で名前の定義されている色)
色名	カラーネーム	色名	カラーネーム	色名	カラーネーム	色名	カラーネーム
黒	black	紺	navy	青	blue	緑	green
濃緑	teal	黄緑	lime	水	aqua	小豆	maroon
紫	purple	オリーブ	olive	グレー	gray	銀	silver
赤	red	紅紫	fuchsia	黄	yellow	白	white

色(HTML4.0で名前の定義されてない色)
色名	カラーネーム	カラーコード
オレンジ	orange	#FFA500
スプリンググリーン	springgreen	#00FF7F
空	skyblue	#87CEEB
藤紫	royalblue	#4169E1
すみれ	violet	#EE82EE

カラーネームの大文字と小文字は区別されない。red、Red、REDはすべて赤を表す。
カラーネームによって指定してもブラウザによっては表示されないことがある。
カラーコード(#のあとに2桁の16進数を3つ並べる)は color: #FFA500 のように指定する。
安全に利用できる216色のカラーネームとカラーコードは
http://html.eweb-design.com/0204_cn.htmlあるいは
http://e-words.jp/p/r-colornames.htmlなどを見よ。

body要素

文書の実際の内容を記述する。表示方法はスタイル要素に書く。

見出し

見出し(Heading)は、h1要素からh6要素まである。 h1要素が最上位の大見出し、h6要素が最下位の見出しである。見出しの表示のさせ方は、ブラウザにより異なる。

見出しだけを抜き出すと目次が作れるような使い方がよい。大きな文字を表示するためにh1要素を用いるのは間違い。

で挟んだ部分はコメントになり、ブラウザでは表示されない。

段落、改行、空白

段落(Paragraph)は、p要素の内容とする。(<p>と</p>で挟まれた部分に書く。) 終了タグ</p>は省略可能である。一般的なブラウザでは、p要素の前で改行され1行空白ができる。どの要素に含めていいか分からないときは、p要素に含めるとよい。

強制的な改行(forced line BReak)はbr要素である。開始タグ(<br>)だけで終了タグも内容もない。

空白をあけたいときは、 を使う。例えば、   とすると、半角3つ分の空白が入る。

注 &で始まり;で終わる記号の列を文字実体参照という。

例

    HTMLのソースの空白   はブラウザでは無視される。
    &amp;nbsp;を使って、&nbsp;&nbsp;&nbsp;とすると、半角3つ分の空白が入る。
    ソースファイルの改行
    は、ブラウザで見ると改行にはならない。&lt;br&gt;タグを使い<br>とすると、改行される。

をブラウザで見ると、

HTMLのソースの空白はブラウザでは無視される。  を使って、とすると、半角3つ分の空白が入る。ソースファイルの改行は、ブラウザで見ると改行にはならない。<br>タグを使い
とすると、改行される。

改行や空白をそのまま表示したいときは、 pre要素(preformatted text=整形済みテキスト)を用いる。 <pre>と</pre>で挟む。フォントは等幅フォントで表示される。

例

<pre>
    pre要素のなかの空白   はブラウザではそのまま空白として表示される。
    改行もそのまま表示される。
</pre>

をブラウザで見ると、

pre要素のなかの空白はブラウザではそのまま空白として表示される。
改行もそのまま表示される。

引用

長い引用文は、blockquote要素の内容とする。終了タグ</blockquote>は省略できない。一般的なブラウザでは、左右がインデント(段下げ)されて表示される。

引用先はcite属性で表わす。引用先はブラウザには表示されない。

例上の数行を引用してみる。

    <blockquote cite="http://www.cis.twcu.ac.jp/~osada/comp2d/html.html">

    <p>
    長い引用文は、blockquote要素の内容とする。終了タグ</blockquote>は省略できない。
    一般的なブラウザでは、左右がインデント(段下げ)されて表示される。
    </p>

    <p>
    引用先はcite属性で表わす。引用先はブラウザには表示されない。
    </p>

    </blockquote>

リスト(箇条書き)

箇条書きには

番号なしリスト
番号つきリスト
定義リスト

がある。

番号なしリスト

番号なしリスト(Unordered List)は、 ul要素で表す。項目はli要素である。終了タグ</li>は省略可能であるが、</ul>は省略できない。

例上の箇条書きのソースを示す。

  箇条書きには、
  <ul>
    <li> 番号なしリスト </li>
    <li> 番号つきリスト </li>
    <li> 定義リスト </li>
  </ul>
 がある。

番号つきリスト

番号つきリスト(Ordered List)は、 ol要素で表す。項目はli要素である。終了タグ</ol>は省略できないが、</li>は省略可能である。

例箇条書きの例。

  <p>ホームページを公開するには、</p>
  <ol>
    <li> 公開する場所を確保 </li>
    <li> ホームページのソースを作成 </li>
    <li> ホームページのソースを所定の場所に保存 </li>
  </ol>
  <p>が必要である。</p>

定義リスト

定義リスト(Definition List)は、dl要素で表す。定義対象はdt要素(Definition Term)、定義対象の説明はdd要素(Definition Description)である。終了タグ</dl>は省略できないが、</dt>と</dd>は省略可能である。

例

定義リスト: その範囲が定義リストであることを示す。用語の説明以外に、シナリオ等にも利用できる。
定義対象: 定義する対象の他、シナリオの場合は役者名等を書く。
定義対象の説明: 定義対象の説明の他、シナリオの場合は役者のせりふ等を書く。

のソースは以下。

  <dl>
    <dt>定義リスト</dt>
    <dd> その範囲が定義リストであることを示す。
    用語の説明以外に、シナリオ等にも利用できる。</dd>
    <dt>定義対象</dt>
    <dd> 定義する対象の他、シナリオの場合は役者名等を書く。</dd>
    <dt>定義対象の説明</dt>
    <dd> 定義対象の説明の他、シナリオの場合は役者のせりふ等を書く。</dd>
  </dl>

テーブル(表)

表(table)は、table要素で表す。表の罫線の太さは、border属性を使いピクセル単位(0.3mm程度)で表わす。 (border属性を省略すると、罫線のない表ができる。) 音声や点字など非視覚系メディアのためsummary属性を用いることが推奨されている。終了タグ</table>は省略できない。表の見出しは、caption要素で表す。 (caption要素はなくてもよい)。

横方向の一列(Table Row 各行)は、tr要素で表し、項目(Table Data cell)はtd要素で表す。行あるいは列の見出しを表すヘッダセルはth要素で表す。 th要素は通常のブラウザでは太字で表される。 th要素にはabbr属性で見出しの要約を付けることがアクセシビリティーの向上になるとされている。終了タグ</tr>、</td>、</th>は省略可能である。

例表

１列の見出し	２列の見出し
(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

のソースは次のようになる。

   <table border="5" summary="4行2列の表">
    <tr><th abbr="head">１列の見出し</th><th abbr="head">２列の見出し</th></tr>
    <tr><td>(1,1)<td>(1,2)</tr>
    <tr><td>(2,1)<td>(2,2)</tr>
    <tr><td>(3,1)<td>(3,1)</tr>
  </table>

センタリング

テキストやインライン要素をセンタリングするにはhead要素のstyle要素に

<style>
  p#centerid1 {text-align: center}
</style>

と書き、センタリングするテキストやインライン要素を<p id="centerid1">と </p>で挟む。たとえば、

<p id="centerid1">ここをセンタリング</p>

とすると

ここをセンタリング

となる。

テキストのセンタリングは、head要素のstyle要素に

<style>
  div.centerclass {text-align: center}
</style>

と書き、body要素の中のセンタリングする要素を<div class="centerclass">と </div>で挟むことによってもできる。たとえば、

<p><div class="centerclass">ここをセンタリング</div></p>

とすると

ここをセンタリング

となる。

表をセンタリングするにはhead要素のstyle要素に

<style>
   table.centerclass {margin-left: auto; margin-right:auto}
</style>

としてtable要素に

class="centerclass"

を付ける。

   <table class="centerclass" border="5" summary="4行2列の表">
    <tr><th abbr="head">１列の見出し</th><th abbr="head">２列の見出し</th></tr>
    <tr><td>(1,1)<td>(1,2)</tr>
    <tr><td>(2,1)<td>(2,2)</tr>
    <tr><td>(3,1)<td>(3,1)</tr>
  </table>

とすると

１列の見出し	２列の見出し
(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

となる。

リンク

URLで指定されるページをリンク先に指定するには、 a要素(anchor)のhref属性を用いる。 <a href="リンク先のURL"> と </a> で挟んだ部分は、通常では青色で表示されアンダーダインが引かれる。この部分をダブルクリックするとリンク先に移動する。

例東女のトップページをリンク先に指定するには、

  <a href="http://www.twcu.ac.jp/">東女のトップページ</a>

とする。ブラウザは、東女のトップページを青色で表示しアンダーダインを引く。マウスカーソルを青色部分に移し、ダブルクリックすると東女のトップページが表示される。

リンク先が同じディレクトリにあるときは、HTMLファイルのパス名を指定する。

例趣味のページのHTMLファイルhobby.htmlが、呼び出し元のファイル(index.html)と同じフォルダにおかれてあるとき、 hobby.htmlをリンク先に指定するには、

  <a href="./hobby.html">趣味</a>

とする。 (./は同じフォルダにあることを表わしている)。ただし、同じフォルダにあるときはパス名の./は省略できるので、

  <a href="hobby.html">趣味</a>

としてよい。

またURLを使って

  <a href="http://www-local.twcu.ac.jp/~k12e1234/comp2d/hobby.html">趣味</a>

としてもよい。

画像

指定した位置に画像を表示するのは、IMG要素(IMaGe)を用い、 src属性(SouRCe)で画像ファイルのファイル名を指定し、画像が表示できないブラウザで閲覧する人や、目の不自由な人のために alt属性(ALTernative)で説明をつける。標準的なブラウザでは、マウスカーソルを画像の上に置くと、altで示した文字列が表示される。

画像の大きさを指定したいときは、 width属性で横幅をピクセル(pixel=画像上の点)単位で指定し、 height属性で高さをピクセル単位で指定する。(最近はディスプレ全体で幅1024、高さ768などが多い)

例表示したい画像imgTop02.jpgをindex.htmlと同じフォルダにおいてあるとき、

  <img src="./imgTop02.jpg" alt="東京女子大学トップページ画像">

とすると
東京女子大学トップページ画像
となり、画像の大きさを

  <img src="./imgTop02.jpg" alt="東京女子大学トップページ画像" width="270" height="60">

と指定したとき、
東京女子大学トップページ画像
となる。

画像の回転

CSS3のstyle属性のtransformプロパティによる。 Firefox以外はCSS3に対応していないのでベンダープレフィックスを付ける。
<img style="-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg)" src="./imgTop02.jpg" alt="東京女子大学トップページ画像" width="270" height="60"> と指定すると

インラインCSS記述で画像を回転表示させる方法

画像のセンタリング

表をセンタリングするにはhead要素のstyle要素に

<style>
   p#centerid2 {text-align: center}
</style>

として画像のimg要素を

<p id="centerid2">

と

</p>

で挟む。同じidを複数箇所で使うことはできないのでidの名前を違うものにする。

<p id="centerid2">
 <img src="./imgTop02.jpg" alt="東京女子大学トップページ画像" width="270" height="60">
</p>

東京女子大学トップページ画像

背景画像

index.htmlと同じフォルダにあるabcd.pngを背景画像にするには、style 要素を

    <style type="text/css">
     <!--
       h1{ color: green; text-align: center }
       body{ background-image: url("./abcd.png"); color: black }
     -->
    </style>

と変更する。

色の変え方

文字列の色の変更(スタイルシートの利用)

注意喚起を赤で表し、警告を黄で表すには、style要素に

    <style type="text/css">
     <!--
       span.attention { color: red}
       span.warning { color: yellow}
     -->
    </style>

と書き(クラス名attention,warningは自由に付けてよい)、本文では

<span class="attention">注意は赤</span>そして
<span class="warning">警告は黄</span>となる。

と書くと、注意は赤そして警告は黄となる。

文字列の色の変更(インラインスタイルシートの利用)

ある文字列を赤にしたいときは、 span要素のstyle属性を用いて

<span style="color:red">文字列</span>

とする。文字列を文字列にする場合は、red をyellow に変える。

リンク先の色の変更

背景の色とリンクされている部分の色が同じ場合はリンクが表示されないが、以下のようにリンクされている部分などの色を変更することにより表示することができる。

style 要素に
    a:link { color: まだ見ていないリンクされている部分の色 }
    a:visited { color: すでに見たリンクされている部分の色 }
    a:active { color: リンクされている部分をクリックしたときの色 }
を加える。

まだ見ていないリンクされている部分の色を blue、すでに見たリンクされている部分の色を purple、リンクされている部分をクリックしたときの色(マウスボタンが押されている間の色)を red とする場合

     a:link {color: blue}
     a:visited {color: purple}
     a:active {color: red }

表の色の変更

表の背景色をskyblue、セルの文字の色をnavyにするには、 style要素に

      table{ background-color: skyblue } 
      tr{ color : navy }

を加える。

問い合わせ先の色の変更

style 要素に

  address {color: blue}

とすると、address は blue で表示される。

ブロックレベル要素とインライン要素

body要素が直接含むことができる要素はブロックレベル要素のみである。
ブロックレベル要素はインライン要素および他のブロックレベル要素を内容に取り得る。
例外もある。例えば、p要素はブロックレベル要素であるが、他のブロックレベル要素を内容に取ることはできない。
インライン要素はテキスト及び他のインライン要素を内容に取り得る。

ブロックレベル要素	インライン要素
address, blockquote, center, dir, div, dl, fieldset, form,h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul	a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike,strong, sub, sup, textarea, tt, u, var

赤字で表した要素は、TransitionalまたはFramesetであり、将来廃止される可能性がある。 (strict.dtdの場合Another HTML-lint gatewayで検証すると大幅に減点される。)

Naoki Osada
最終更新日時：2013年 11月19日火曜日 13時53分58秒 JST