Web表現 2010

HTML基礎1 – 文書型宣言、文字コードの指定、インラインイメージ

October 20, 2010

先週の復習

先週は、HTMLの導入としてHTML(= Hyper Text Markup Language)の重要な概念である「マークアップ」について解説しました。またその上で、HTMLのマークアップの基礎、要素と、開始タグ・終了タグについて学び、基本的な要素をいくつか紹介しました。

まず始めに先週学んだ要素について復習してみましょう。

HTMLの骨組みを構成する要素
- html要素：HTML文書のルート要素、全てのHTML書類の土台となる
- head要素：HTML文書自身に関する情報（例：タイトル、要約、言語、文字コードなど）を指定する
- body要素：HTML文書の本体部分、Webブラウザに表示される部分
頻出する、基本的な要素
- title要素：文書のタイトルを指定する要素、head要素内に記入する
- p要素：段落を構成する
- h1 – h6要素：見出し、h1から順番に大きな見出しから小さな見出しとなる
- br：改行位置を指定する

先週学んだ要素を使用して、下記のようなHTML書類を作成することができました。

<html>
  <head>
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめに</h1>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h2>このページについて</h2>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
  </body>
</html>

今日は、このHTMLをより「正確に」宣言するための方法と、さらにいくつかの基本的な要素について学んでいきます。

より「正確な」HTMLにする 1 – 文書型宣言

初回の授業で解説したように、ひとくちにHTMLといっても様々なバージョンが存在します。それぞれのバージョンで使用できる要素や文法規則に差異があります。

様々な環境で正しく文書を閲覧してもらうには、その文書がどのバージョンのHTMLに準拠して記述されているのかを宣言する必要があります。この、記述されているHTMLがどの定義(= DTD)に基づいて記述されているかを示すことを、文書型宣言と呼びます。文書型宣言は、html要素の手前に記入します。

文書型宣言は、使用したいHTMLのバージョンによって異なります。いくつかの代表的な文書型宣言を紹介します。

HTML4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML1.0 Transitional

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

XHTML1.0 Strict

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

XHTML1.1 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

こうして過去のバージョンからの文書型宣言の変遷を眺めてみると、HTML 5 で急激に簡略化された記法になったことがわかると思います。HTML 5 では以前使用されていた、定型句を極力省略しようという方針があります。ですので、この文書型宣言に関しても、とてもシンプルに記述されるようになりました。

この授業では、HTML 5 に準拠してHTMLを記述していきますので、HTML 5 の文書型宣言を使用するようにします。先週作成したHTMLの冒頭ににHTML 5 の文書型宣言を記入しましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめに</h1>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h2>このページについて</h2>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
  </body>
</html>

より「正確な」HTMLにする 2 – 文字コードを指定する

日本語の文書をインターネット上で流通させる際に、ひとつ面倒な問題が存在します。それは文字コードに関する問題です。コンピュータで文字を扱う際には、その各文字に対してコードを割り振っていく必要があります。日本語に関しても全ての文字と対応した文字コードの基準が存在していて、それを元にコンピュータ上でテキストを扱っています。

ところが、日本語を表現するための文字コードは、その歴史的な経緯から複数の文字コードが混在してしまっています。良く使用される文字コードとしては、下記のものがあげられます。

日本語固有の文字コード
- ISO-2022-JP：俗に「JISコード」と呼ばれる、主にインターネット上での文字の流通(特に電子メール)などで使われている
- Shift_JIS：日本におけるパソコン用の文字コードとして発展、Windows系のOSを中心に使用されてきた
- EUC-JP：UNIX系のOSで日本語の文字を扱う際に使用されてきた文字コード
多言語用文字コード (Unicode)
- UTF-8：言語間での互換性問題を解決するためにすべての言語の文字コードを1つの文字コードで対応したもの、現在インターネットではもっとも一般的に利用されている

ここに取り上げた以外にも数多くの日本語用の文字コードが存在します。このように、日本語を表記するだけでも、様々な文字コードが存在しており、きちんと指定しないといわゆる「文字化け」という現象が起きてしまします。どの文字コードを使用するのが正解というものはないのですが、この授業では、XHTMLで標準的に用いられている、UTF-8を標準の文字コードとして使用するものとします。

HTML 5 の規格にのっとって文字コードを指定してみましょう。文字コードを指定するには、head要素の中にmeta要素を使用して指定します。UTF-8を指定する場合には、meta要素は、下記のような記述になります。

<meta charset="utf-8" />

この文字コードの記法も、HTML 5 から大幅に簡略化されました。では、作成したHTMLに、文字コードを指定しましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめに</h1>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h2>このページについて</h2>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
  </body>
</html>

これにより、ほとんどのブラウザで「文字化け」を防ぐことができるでしょう。

画像を貼りつける – img要素

WWWは、ハイパーテキストだけでなく、画像や動画、音声なども文書に貼りつけることで表現できることに大きな特徴があります。画像や動画など様々なメディアを効果的に用いることでページを効果的に見せることが可能です。

メディアの利用の第一歩として、画像をページに貼りつけてみましょう。

画像をWebページに貼りつけるには、img要素を使用します。具体的には下記のように記述します。img要素もbr要素と同様に、終了タグのない内容をもたない空要素ですので、末尾は「/>」で閉じる必要があります。

<img src="画像ファイルのURL" alt="画像の説明" />

alt属性は、代替文字を用意して、画像を表示しない利用者のブラウザで代わりにその文字が表示するためのものです。alt属性は様々な状況で正しく情報を提供するためにとても重要なもので、HTML4以降では必須となっています。必ず画像の内容を要約する内容を記述するようにします。

相対URLと絶対URL

src属性には画像ファイルの場所(URL)を示します。このURLは、Webブラウザのアドレス欄に入力するURLと同じものです。例えば、千葉商科大学のトップページの大学のロゴの画像の場所は「http://www.cuc.ac.jp/img/logo_top.gif」にあります。この画像を自分の作成するWebページに貼りつける場合は、下記のようになります。

<img src="http://www.cuc.ac.jp/img/logo_top.gif" alt="千葉商科大学" />

千葉商科大学

画像ファイルはこの千葉商科大のロゴの画像のように、Webサーバーのマシン名から始めた完全なURLで記述することも可能ですが、もし画像ファイルが同じWebサーバ内に格納されている場合は、画像を貼りつけるHTMLファイルから見た相対的な場所で指定することも可能です。このような貼り付けるファイルからみた場所の指定のやりかたを「相対URL」と呼びます。それに対して先程の千葉商科大のロゴのように、先頭からの完全なアドレスで指定する方法を「絶対URL」と呼びます。

相対URLの例をいくつかみてみましょう。

画像ファイルとそれを貼りつけるHTMLファイルが同じディレクトリ(フォルダ)にある場合には、相対URLはファイル名を指定するだけです。例えば、画像ファイル名が「photo.jpg」だったとすると、URLを入れたimg要素は下記のようになります。

<img src="photo.jpg" alt="写真" />

HTMLファイルと同じ場所にひとつ新たにディレクトリを作成して、その中に画像ファイルを入れた場合は、階層構造の区切りをスラッシュ「/」で表現します。HTMLファイルと同じ場所にあるディレクトリの名前を「image」その中に配置した画像ファイルが「photo.jpg」とした場合、相対URLは「img/photo.jpg」となります。よって、img要素は下記のように記述されます。

<img src="image/photo.jpg" alt="写真" />

より複雑な相対URLについて考えてみます。

HTMLファイルのひとつ上の階層に、画像を保存するディレクトリ「image」があり、その中に「photo.jpg」があったとします。その際には、相対URLは「自分自身から一つ上の階層にあるimageディレクトリの下のphoto.jpg」というように考えます。一つ上の階層を表現するには「../」という記号を使用します。よって、一つ上の階層のimageフォルダの下のphoto.jpgファイルを相対URLで表現すると「../image/photo.jpg」となります。

<img src="../image/photo.jpg" alt="写真" />

この、ひとつ上のを表現する「../」という記号を重ねてどんどん上の階層へ辿ることも可能です。例えば2つ上の階層は「../../」3つ上の階層は「../../../」というように表現します。

実習 – 自己紹介のページを紹介する

ここまで学んだ要素を駆使して、簡単な自己紹介のページを作成してみましょう。下記の要素を盛り込んでページを作成するものとします。

自分自身の顔写真、もしくは自分で撮影した写真
名前
所属、学籍番号
自分自身の簡単な自己紹介を複数の段落に分けて記入する
- 必要に応じて見出しを使用してわかりやすく、読みやすいように工夫する