第 9 回 SGML, HTML, XML

本日の内容


このドキュメントは http://edu.net.c.dendai.ac.jp/ 上で公開されています。

9-1. SGML, HTML, XML

マークアップ言語

SGML

マークアップとはもともとは文書の注釈で、組版などの仕上がり の指示を出すための記号のことでした。 そのような記号として「段落を分ける」「誤字を直す」など小学校でいくつか 習ったと思います。

マークアップ言語とはこれらの手法の集まりを言います。 XML 以前にも UNIX の roff システムや論文プロセッサの TeX など、テキス トファイルにマークアップを行い、さらに、組版(画面やプリンタでの仕上がりの指定) をコントロールしたものがいくつかありました。

1967 年にGCA(グラフィックコミュニケーション協会)の会長ウィリアム・タ ニクリフはカナダ政府印刷局の会合中に文書の構造情報と体裁情報の分離を提 唱しました。 これを受けて、1969 年に IBM の Ed Mosher, Ray Lorie, Charles F. Goldfarb が Generalized Markup Language というものを提案しました。 これがその後 SGML (Standard GML) に発展し、 1986 年に ISO8879 という国際規格になりました。

SGML はメタ言語です。つまり様々なマークアップ言語を定義するためのルー ルです。 特定の文書に対してそれをマークアップするための定義を記述し、実際にその 文書をマークアップします。 この、マークアップするための定義を文書型定義(Document Type Definition DTD)と言います。 つまり SGML 文書は、 DTD とそれに基づいてマークアップされた文書の組で 表現されます。 これは、「文脈自由文法」と「ルール」と「そのルールにしたがった文字列」 との間の関係と同じようなものです。

文書型定義(DTD)
マークアップされた文書

SGML 文書の構造

HTML

さて、WWW はもともと応用物理学者のティム・バーナーズ・リーが論文を 共有するためにCERN(欧州原子核研究機構)で作られました。 論文には特有の文書構造があるため、プレインテキストではなく、適当なマー クアップが望まれました。 そのため、 SGML を用いて WWW 用の DTD が作成されました。 この DTD で規定された WWW 用の文書のマークアップ法が最初 のHTML です。 ティム・バーナーズ・リーの考案したHTMLに対して、マーク・アンドリーセン はモザイクブラウザを作成し、画像の表示が可能になりました。 この頃のHTML は HTML2.0 と呼ばれ、IETF により RFC1866として規定されました。

そして、Netscape Communications 社と Microsoft によるブラウザ戦争が 勃発し、Netscape Navigator と Internet Explorer の機能の拡張に合わせ て、ドキュメントの記述機能もどんどん増えていきました。

WWWに関する標準化を行う団体として W3C(World Wide Web Consortium)が発 足し、混乱したドキュメントの記述を HTML 3.2 として標準化しました(1997/1)。 そして、概念的に整理したものを HTML 4.0 として標準化しました (1997/12)。 HTML 4.0 は3つの規格からなります。

HTML 4.0 Transitional
HTML 3.2 をなるべく取り込んだ、移行用規格
HTML 4.0 Strict
必要な整理と抽象化がされたもの
HTML 4.0 Frameset
当時のブラウザで実現されていたフレーム表示をコントロールするため に、作られたもの

HTML4.0 はその後、バグの修正などで HTML 4.01 となりました。

HTML の規格の騒動が一段落した後、W3Cは SGML がもともと持つ強力な自由度 がコンピュータ処理を複雑にしているという問題に手を付けました。 そして、 SGML とある程度の互換性を維持しつつ、拡張可能にし、さらにコンピュー タ処理を容易にしたものとして XML を定めました(1998) そして、さらに HTML4 を XML 化する作業が行われました。 まず、HTML4 とほぼ完全互換を目指した XHTML1.0 が登場しました。 これは、 XML の文法に合わせるために HTML4 にいくつか制約を与えたような ものです。 XHTML1.0 には Transitional, Strict, Frameset の3種類があります。 そして、さらに、 XML の特徴である拡張可能性を使えるようにしたのが XHTML1.1です。これは HTML4.01 Strict と機能的に互換性があり、さらに XMLの拡張機能が使えるものです。 HTML3.0 には数式が入るなどと言う話がありましたが、 XHTML1.1 でついに数式(MathML)が使えるようになりました。

W3CはXMLを中心技術として、様々な標準規格を制定していきました。 なお、W3CはXHTML1.1 とは互換性のない、1から設計し直したマークアップ言 語 XHTML2 の策定をはじめました。

DOM

Netscape Communicator 2.0 からはLiveScript(JavaScript)による画面表示 の変更が可能になりました。 これは JavaScript に対応したAPIとして、 DynamicHTMLと呼ばれる HTML ドキュメント への API が定められました。 一方、Internet Explorere 3.0 にも似たような DHTML が搭載されました。

このマークアップされたドキュメントのデータ構造と、プログラミング言語 への API は DOM(Document Object Model)として、W3C が標準 化するようになりました。 当初は XML に対して規格化されましたが、DOM2HTMLで HTML ドキュメント にも対応しました。

DOM の API はウェブブラウザだけでなく、 XML をデータ記述のために使うために、 多くのプログラミング言語で作られました。

Webの進化

当初、Webによるユーザとのやり取りは、Form と言うページ内に値を入力し、 Submitボタンを押して、次のページに値を引数として渡す仕組みで行っていました。 引数の処理はCGI(Common Gateway Interface)というもので、任意のプログラムを起 動して標準入力から引数をそのまま与え、プログラムからの標準出力をその ままブラウザに送るような仕組みでした。

しかし、その後のブラウザにより、Form の内容を JavaScript のプログラ ムに送ることができる様になりました。 そして、ブラウザに内蔵されている通信 API(XMLHttpRequest)を用いて、ページを切り替えること無く、サーバと データをやり取りして画面の任意の部分を更新できるようになりました。 このような技術を Ajax(Asynchronous Javascript+XML)と呼びます。

この技術を用いることで Webブラウザ上で入出力機能の豊富なアプリケーショ ンソフトを作ることができるようになりました。 HTML4, XHTML1, DOM2HTML を含み、Ajaxなどの改良を加えた HTML が Apple, Mozilla, Opera による WHATWG というグループにより提案され、W3Cにより HTML5 とし てまとめられました。 しかし、規格としてまとめようとした W3C と、常に改良を続けて発展させて いこうとする WHATWG で意見が合いませんでした。 そして、最終的に 2019 年に WHATWG が主導で HTML Standard として開発されることになりました。

9-2. XML

マークアップのメタ言語 XML(Extensible Markup Language) を紹介します。

XML の基本的な要素の記法は、次のような書式になります。

<要素名 属性1="値1" 属性2="値2">
内容
</要素名>

この始めの要素名の部分を「開きタグ」と言い、/(スラッシュ)の部分を「閉 じタグ」と言います。

なお、内容がない要素の記述法は次のようにします。

<要素名 属性1="値1" 属性2="値2" />

さて、データに対して、そのデータを含む抽象的な概念に関するデータをここで はメタデータと呼ぶことにしましょう。 例えば、「坂本直志, データ構造とアルゴリズム II, 火曜日 2 限」というデー タに対して「担当, 科目名, 日時」というデータがメタデータとして対応しま す。 さらにこれらはさらなる「授業」というメタデータに対応します。 このような関係に対して、XML では次のような表し方をします。

  1. <授業>
    <担当>坂本直志</担当>
    <科目名>データ構造とアルゴリズム II</科目名>
    <日時>火曜日 2 限</日時>
    </授業>
    
  2. <授業>
    <担当 name="坂本直志" />
    <科目名 name="データ構造とアルゴリズム II" />
    <日時 day="火曜日" period="2 限" />
    </授業>
    
  3. <授業 担当="坂本直志" 科目名="データ構造とアルゴリズム II"
       日時="火曜日 2 限" />
    

このようにデータを表す際に、要素を用いる方法と、属性を用いる方法があり ます。 これらの違いについて考えてみましょう。

XML では要素は属性とデータを含むことができます。 しかし、含む際に制約条件があります。 まず、データとして含めるデータ型は #PCDATA と呼ばれています。 これは様々なデータを含め、マークアップが可能です。 一方、属性では ""(ダブルクォーテーションマーク) 中にデータを書きますが、 ここに書けるデータは CDATA と呼ばれる文字列データです。 これにはマークアップはできません。 そのため、 CDATA 中には構造のあるデータは書くことができません。

<要素名 属性1="CDATA" 属性2="CDATA">
(属性値には<などは入れられるがマークアップできない)
#PCDATA(内容には< など直接書いてはいけない文字がある一方、
        他の要素を含むことができる)
</要素名>

また、属性に関しては同じ属性は二度現れてはいけないという制限があります。 例えば、授業担当者が複数存在したり、実施日が週に2回以上あるような場合 が想定される場合、それは属性としては表現できません。 また、一人の授業担当者の名前が一つしかないとか、授業科目の名前も一つし かないなど、必ず唯一性が成立していなければならないような状況の場合、属 性としてデータを持たせると、それを処理させるプログラム側で唯一性のチェッ クが不要になります。 このようなことを踏まえると、上記の例は次のように定義すると良いことがわ かります。

<授業 科目名="データ構造とアルゴリズム II" >
<担当 name="坂本直志" />
<日時 day="火曜日" period="2 限" />
</授業>
このようにすると次のような記述もできます。
<授業 科目名="情報通信基礎実験" >
<担当 name="金田先生" />
<担当 name="坂本直志" />
<日時 day="月曜日" period="3 限" />
<日時 day="月曜日" period="4 限" />
</授業>

このようにすると複数の指定が可能な部分とそうでない部分で切り分け、XML のルールから制約を設定できます。

XML のデータ型

それでは、 XML に関して細かいルールを見ていきましょう。

文字

XML は基本的には Unicode で記述します。 特に UTF-8 で記述すれば文字コードの宣言自体を省略できます。 しかし通常は XML 文書の冒頭の XML 宣言で文字コードの宣言をします。

<?xml version="1.0" encoding="utf-8"?>

utf-8 以外で記述しても構いませんが、 Shift_JIS など宣言を書く必要があ ります。

XML 1.0(1998) では要素名や属性名は英字などしか使用できませんでした。し かし、XML 1.1(2004) は要素名にも今まで示した例のように日本語が使えるよ うになりました。 しかし、いくら様々な国の言語の文字をユニコードで指定できるというのは長 所でもありますが、一方で欠点にもなり得ます。 つまり XML 文書を英語以外の言語だけで完結できる一方、現状のパソコンの ように「英語+一言語」という仕様では、指定された外国語が利用可能でない と、 XML 文書その物が他言語のフォントをインストールしなくては確認できないよ うな状況になりえます。 そのためか、 XML1.1 は現在普及していません。 本講義でもたとえ話のような説明以外は、 XML 1.0 を使用し、要素名に英数 字を使います。

さて、要素名ですが、 SGML では大文字小文字を区別しませんでしたが、 XML では区別することになりました。 これでパーサを書くのは楽になりました。 例えば、HTML では要素名を大文字でも小文字でも記述できました。 しかし、 XML に基づいて作られた XHTML では要素名は小文字のみになっています。 そのため、 HTML からXHTML への変換を考えると、少なくとも要素名が小文字 になっているかをチェックする必要があります。

また、文字列を表す時ですが、 CDATA ではタグなどを入れてもそのまま文字 列として解釈されますが、 #PCDATA ではタグはすべて意味があるものとして 解釈されてしまいます。 そのため、内容に < などのタグの一部になる文字が含まれるものを書 く場合は注意が必要です。 例えば、 script 要素の内容にはプログラムを書きます。 つまり、 script の内容に対してマークアップは不要ですが、大小比較のため に、大量の< などの記号が含まれるような場合は、 <![CDATA[]]> の間にプログラムなどを入れるという表現があります。 一方、単純に一文字だけ < などを入れるには実体参照という 表現を使います。 実体参照にはこの他キーボードから直接入力しづらいような文字も指定します。 下記がよく使われる実体参照です。

実体参照表示される文字
&amp;&
&lt;<
&gt;>
&quot;"
&apos;'
&copy;©
&trade;
&alpha;α
&spades;
&euro;

また、 &#文字コード(10進数);&#x文字コード(16進数); で指定した文字コードの指す文字を表示できます。

文書構造

ここでは XML の定 義 Extensible Markup Language (XML) 1.0 (Fifth Edition) http://www.w3.org/TR/2008/REC-xml-20081126/ を参考に XML の文法を見ていきます。 これは文脈自由文法で XML の文法を厳密に与えています。 以下、文脈自由文法のルールには番号が表示されていますが、これは原文のそ のままの引用で、原文の式番号です。

その他の構文

XML 文書の構造の説明に入る前に、 XML 文書のどこにでも配置できる構文を 説明します。

White Space

まず、White Space ですが、通常の空白記号 (&#x20;) の他に、TAB 記号 と、 CR と LF を含みます。 これらの 1 個以上連続を white space と呼びます。 XML のドキュメントでは次のように文脈自由文法で定義されています。


[3] S ::= (#x20 | #x9 | #xD | #xA)+
コメント

コメントは <!-- で始まって、 --> で終わり、中になにを書いても構わないの が基本ですが、もともと SGML では定義文とコメントを --(ハイフン二つ) を -- 区切りにして交互に使っていました。

SGML 時代のコメントの使われ方
<! 定義文 -- コメント --
      定義文 -- コメント --
      定義文 -- コメント --
>

それを廃止する際に、コメント中にこのハイフン二つを書かないように規定さ れました。 そのため、XML のコメントの定義も下記のように文脈自由文法で定義されてい ます。


[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->'

なお、Char は文書で使用する文字のことです。

PI

PI とは Processing Instructions のことです。 これは、文書の文字データではなく、アプリケーションに直接渡される記述で す。 例えば、 XHTML 中に PHP のプログラムを書く場合、次のように記述します。


<p>
<?php echo 'Hello World'; ?>
</p>

これは XML の定義書では次のように定義されています。


[16] PI ::= '<?' PITarget (S (Char* - (Char* '?>' Char*)))? '?>'
[17] PITarget ::= Name - (('X' | 'x') ('M' | 'm') ('L' | 'l'))

なお、 Name は要素名などを定義するための「名前」を表すことのできる文字 列です(英文字+英数字の 0 文字以上の連続と思ってよい)。

XML の構造

XML 文書は次のように定義されています。


[1] document ::= prolog element Misc*
[22] prolog ::= XMLDecl? Misc* (doctypedecl Misc*)?
[27] Misc ::= Comment | PI | S

まず、 prolog ではすべての部分が省略可能であることに注意してください。 上の定義を解釈すると XML 文書とは次のような構造を持ちます。

  1. XMLDecl(XML 宣言) (あってもなくても良い)
  2. doctypedecl(文書型宣言) (あってもなくても良い)
  3. 一つだけの要素
  4. 以上に加え、 XML宣言の前を除き、コメント、PI、 WhiteSpace はどこで も配置可能

この「一つだけの要素」とは root element とか呼ばれます。 XML 文書では基本的には一つの要素について記述します。 但し、その要素の内容には他の要素が含まれていても構いません。 例えば、 XHTML ドキュメントでは、一つだけの html 要素から構成されてい ますが、内容には head 要素と body 要素が含まれます。

XML 宣言

XML 宣言は既に上の文字の定義の際に、文字コードの指定をするために紹介し ました。 XML 宣言では文字コードの指定の他に version と standalone というオプショ ンを指定します。 standalone オプションは外部参照をするか否かを指します。 この条件は複雑なので、ここでは詳しく説明しません。 standalone オプションは省略可能であり、省略しても問題ありません。 また、 XML のバージョンは "1.0" を常に指定することにします。

<?xml version="1.0" encoding="utf-8"?>
文書型宣言

文書型宣言は、XML 文書にどのような要素が含まれるかを記述します。

[28] doctypedecl ::= '<!DOCTYPE' S Name (S ExternalID)? S?
                          (' [' intSubset ']' S?)? '>'

文書型宣言を行うには外部サブセット宣言と、内部サブセット宣言の二通りの 方法があります。 外部サブセット宣言は以下のように ExternalID を指定するもの、内部サブセット宣言は intSubset を指定するものです。 内部サブセット宣言は章を改めて説明します。

外部サブセット宣言

外部サブセット宣言は次の二つの宣言があります。

[75] ExternalID ::= 'SYSTEM' S SystemLiteral 
                  | 'PUBLIC' S PubidLiteral S SystemLiteral

PUBLIC は文書宣言が公式なものとして既に広まっていて、利用側で文書宣言 を改めて取得しなくてよいようなものを言います。 よく使う有名な例は XHTML の宣言などです。

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

PubidLiteral は DTD を表すような識別子になります。 ここで、 SystemLiteral は上のように実際に文書型定義が dtd ファイルとし て存在する URI を指定します。

一方、SYSTEM の宣言は、文書型定義を取得するための URI を指定します。 複数の XML 文書で DTD を共有する場合などは、この SYSTEM を使用して、ネッ トワークを利用して行います。

<!DOCTYPE class SYSTEM "class.dtd" >
整形式

XML ではパーサを作り易いように SGML のオプション機能(タグの一部を省略 する機能)が取り除かれました。 そして、構文解析をする際、誤っている構文を発見したら通知する義務があり ます。 従来の HTML 文書では多少の構文誤りに関しては、エラーとせず、なるべく文 書を表示するようになっていました。 しかし、XHTML のような XML 文書は構文誤りを発見した途端、表示を止め文 書のエラーを通知します。

9-3. HTML Standard の読み方

HTML Standard は Living Standard ということで、バー ジョン番号は管理されず、常に更新されます。 日本語訳もありますが、 翻訳版に完璧は期待しないほうが良いと思います。

  1. 導入
  2. 共通インフラ
  3. セマンティックス、構造、HTML文書のAPI群
  4. HTMLの要素
  5. Microdata
  6. ユーザーとの対話処理
  7. ウェブページの読み込み
  8. ウェブアプリケーションAPI
  9. コミュニケーション
  10. Web workers
  11. Web storage
  12. HTML構文
  13. XML構文
  14. Rendering
  15. 旧式の機能
  16. IANAの考慮

HTMLの基本構文

HTMLドキュメントの最小のテンプレートは以下のようになります。これを拡張 子が html のテキストファイルに入れます。ファイルをブラウザで開くとド キュメントがレンダリングされて表示されます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
<title>演習1</title>
</head>
<body>
ここにマークアップされたドキュメントを記述する
</body>
</html>

マークアップには、段落を意味する p、 見出しを意味する h1, ..., h6、 箇条書きを表す ol, ul, li, dl, dt, dd など、ドキュメントの意味の区分 にタグをつけて要素とします。

HTMLの拡張性(1.7.3)

  1. 表示のスタイルに関しては CSS により設定可能
  2. img 要素では画像ファイルを指定し、読み込みます。
  3. クライアント側でプラグインを作り、embed 要素で呼び出せる。
  4. script 要素でインラインまたはサーバ側のスクリプトを実行する
  5. Cookieによりブラウザにデータを保管する

文字参照

キーボードに無い文字を表示する方法として、文字コードで参照する方法と、 定められた名前で指定することもできます。 これらを文字参照と言います。 構文は & と ; の間に、文字コードや名前を入れて表現します。 なお、このタグを表すために、 <, >, & の文字をそのまま表 示したい場合は名前文字参照を使って、 &lt;, &gt;, &amp; と &amp; 記号と; (セミコロン)の間に定められた語を書きます。名前文字参照 には、この他、トランプのハート &amp;hearts;&hearts; やユーロ記号&amp;euro; &euro; や様々な数学記号やアクセント付きの文字などがあります。

内容の種類

HTML4.01 や XHTML1.1 では、要素の分類は block と inline という2種類 しかありませんでした。 HTML Standard では以下のカテゴリがあり、各要素は0個以上のカテゴリに 属します(HTML Standard 3.2.5.2. Kinds of content)。 なおこれ以外の分類もあります。

これらの包含関係については、参照先を参考にしてください。

HTML4.01では、従来のブロックと呼ばれる、単独で body 内に置かれ、矩形に描 画されるものと、インラインというブロックの中に置かれるべきものが厳密 に区別されるだけでした。 HTML Standard ではこの厳密な分類を止め、ほとんどの要素は body 内に置け る Flow とし、さらに、 Flow の中に属せるものを Phrasing のカテゴリに入ることとしたということです。 さらに、ヘッダ、フッタの領域を定める Sectioning 、見出しを定める Headingが 用意され、 一方、メディアを埋め込むのが Embedded、 またユーザが操作可能なのが Interactive のカテゴリになります。

なお、本来は様々な要素には意味がありますが、無意味な要素として Flow, Palpable カテゴリの div 要素とFlow, Phrasing, Palpableカテゴリの span 要素があります (Palpable は明瞭な内容の意味)。 これらは、HTMLで定められている範囲の意味付をせずに class などの属性 を与えたい時や、要素のグルーピング などに使用します。

HTMLのJavaScriptのAPI

もともと、JavaScript は HTML ドキュメントを操作するために作られた言 語です。 そのために、HTML はプログラミング言語からは DOM(Document Object Model)というデータ構造で見ることができるようになっています。

HTML ドキュメントをブラウザ上で JavaScript で操作するには、 script 要素を使います(HTML Standard 4.12.1)。 script 要素は、JavaScript のファイルを src で指定して読ませるか、 script 要素内にプログラムを直接書きます。 head 要素内に書いた script は body が読み込まれる前に実行され、 body 内に書かれた script はその場で読み込まれる度に実行されます。 なお、ドキュメントが全て読み込まれてから実行したい時はscript 要素に defer 属性を指定します。

7.3 Window object

ブラウザが HTML ドキュメントを解釈する際、JavaScript のグローバルな オブジェクトとして window (7.3章)が

document
このドキュメントの Document オブジェクトを返します
alert
メッセージをポップアップウィンドウに表示します
confirm
メッセージをポップアップウィンドウに表示し、Ok か cancel かユーザに選ばせます。
prompt
メッセージをポップアップウィンドウに表示し、入力ボックスを表示し、文字入力をさせます

3.1 Document object

HTMLドキュメントの DOM(Document Object Model) を参照するオブジェク トが Document です。このオブジェクトを介して、全てのドキュメントの要 素にアクセスできます。 この他、 getElementByID や getElementsByName という検索や、 createElement という、要素を作成することもできます。

さらに write メソッドや writeln により、直接ドキュメントに文字列を書き込むこと もできます。

9-4. HTML演習

演習9-1

以下の文章を表示する HTML ドキュメントを作成しなさい。

HTMLの基本文法は <要素名 属性名="属性値">内容</要素名>と書
く。なお、このタグを表すために、 <, >, & の文字をそのまま表
示したい場合は名前文字参照を使って、 &lt;, &gt;, &amp; と
& 記号と; (セミコロン)の間に定められた語を書く。なお、名前文字参照
にはトランプのハート &hearts;♥ やユーロ記号&euro; €
や様々な数学記号やアクセント付きの文字などがある。

文字の一部をのように赤くするには
1. スタイルシート、或いは style 要素に、.クラス名 {color: red;} と定義
2. 指定したい部分を span 要素とし、そのspan の属性として class="クラス名"を指定する
なお、赤くする理由が強調したい場合の時は、クラスを使用する依り、強調を
意味する em 要素にスタイルシートで赤を設定する。

演習9-2

window.alert を使用して、HTML ドキュメントを開くと画面にポップアッ プウィンドウが開き、 Hello World が出るようにしなさい。

また、confirm, prompt も試しなさい。

演習9-3

document.write を使用して、HTML ドキュメントに Hello World が出るよ うにしなさい。

9-5. HTML演習解答

演習9-1

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
<title>演習9-1</title>
<style>
  .red {color: red;}
</style>
</head>
<body>
<p>
HTMLの基本文法は &lt;要素名 属性名="属性値"&gt;内容&lt;/要素名&gt;と書く。
なお、このタグを表すために、 &lt;, &gt;, &amp; の文字をそのまま表
示したい場合は名前文字参照を使って、 &amp;lt;, &amp;gt;, &amp;amp; と
&amp; 記号と; (セミコロン)の間に定められた語を書く。なお、名前文字参照
にはトランプのハート &amp;hearts;&hearts; やユーロ記号&amp;euro; &euro;
や様々な数学記号やアクセント付きの文字などがある。
</p>
<p>
  文字の一部を<span class="red">&hearts;</span>のように赤くするには
</p>
<ol>
  <li>スタイルシート、或いは style 要素に、.クラス名 {color: red;} と
    定義</li>
  <li>指定したい部分を span 要素とし、そのspan の属性として class="ク
    ラス名"を指定する</li>
</ol>
<p>
なお、赤くする理由が強調したい場合の時は、クラスを使用する依り、強調を
意味する em 要素にスタイルシートで赤を設定する。
</p>
</body>
</html>

演習9-2

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>演習9-2</title>
  </head>
  <body>
    <script>
      window.alert("hello world");
    </script>
  </body>
</html>

演習9-3

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>演習9-3</title>
  </head>
  <body>
    <script>
      document.write("hello world");
    </script>
  </body>
</html>

坂本直志 <sakamoto@c.dendai.ac.jp>
東京電機大学工学部情報通信工学科