HTML - 情報公開システム論2.pptx

•  HTML とは

–  Web

ページを記述するためのマークアップ言語

–  W3C

が規格策定

– 

HTML 4.01

•  HTML の特徴

– 

文書の論理構造や見栄えなどを記述

– 

文書中に画像や音声などを配置できる

– 

他の文書へのハイパーリンクを設定できる

HTML 構文

•  WWW の文書記述記法

•  タグと呼ばれる命令文

– 

「＜」「＞」で囲まれた命令文

– 

「＜（開始タグ）＞」「＜／（終了タグ）＞」

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

<head>

<title>IT総合学部 | サイバー大学</title>

HTML の例

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

html4/loose.dtd">

<head>

学、2007年4月開学。">

<title>サイバー大学</title>

media="screen,tv,projection">

media="all" class="fontsize" id="fontsize-small" title="文字サイズ：小">

class="fontsize" id="fontsize-medium" title="文字サイズ：標準">

media="all" class="fontsize" id="fontsize-large" title="文字サイズ：大">

タグと呼ばれる命令と本文

表示される以外にも大量の情報もともとは論理構造の記述

HTMLのレンダリング

<HTML>

<BODY>

<H1>

名前 </H1>

<H1>

挨拶 </H1>

<P>

みなさんこんにちは。

サイバー大学 </A>

の横山です。

</P>

</BODY>

</HTML>

• 

HTMLの特徴

– 

テキストファイル

– 

タグの入れ子構造

– 

冗長

– 

意味構造のみを記述

• 

体裁は別途CSS (Cascading Style Sheet)で指定

• 

見出し、リンクなど

簡単なHTMLファイルの例ブラウザ出力例

初期の Web ページ

デザインの分離

•   CSS (Cascading Style Sheets)

–  HTML

要素のデザイン指定

– 

レイアウト、文字種類、サイズ、色などの装飾を指定

–  W3C

が標準化

–  CSS 2.1

が提案

(2008

年現在

)

•  CSS

の利点

–  HTML

と独立したデザイン指定

–  CSS

を切り替えることで多機種、多環境へ対応

– 

デザインとコンテンツの分業

p#id { 

color: #ff3300; 

font-size: 24px  }

pタグのid=「id」を持つタグの装飾指定

<div id="id">テストの文字列</div>

<div class="class">テストの文字列</div>

HTMLタグでのid, class指定

スタイルシート例

WWW

•  現在もっとも普及したハイパーテキスト実装

– 

ハイパーテキスト機能の簡単な実装

•  Web

ページとリンク

• 

ユーザーに文書の格納場所を意識させない

– 

サーバクライアントモデルでの文書管理

•  WWW を支える技術

– 

サーバクライアントの通信モデル

–  URI, HTTP, HTML

WWW の三大要素

•  URI

– 

文書などの情報の場所を表す表記法

•  HTTP

– 

文書などの情報を転送する通信プロトコル

•  HTML

– 

文書を記述するための表記法

– 

簡単なハイパーテキスト構造を持つ

Trojan room Coﬀee-‐Pot

• 

コーヒー残量確認サービス

– 

英ケンブリッジ大学

コンピュータ研究所内の

コーヒーポットの残量表示

–  WWW

最初期の

Web

カメラアプリケーション

ドキュメント内情報公開システム論2.pptx (ページ 69-78)

HTML

• HTML とは

– Web

– W3C

–

HTML 4.01

• HTML の特徴

–

–

–

HTML 構文

• WWW の文書記述記法

• タグと呼ばれる命令文

–

–

HTML の例

HTMLのレンダリング

•

–

–

–

–

•

•

初期の Web ページ

デザインの分離

• CSS (Cascading Style Sheets)

– HTML

–

– W3C

– CSS 2.1

(2008

)

• CSS

– HTML

– CSS

–

p#id {

color: #ff3300;

font-size: 24px }

<div id="id">テストの文字列</div>

<div class="class">テストの文字列</div>

スタイルシート例

WWW

• 現在もっとも普及したハイパーテキスト実装

–

• Web

•

–

• WWW を支える技術

–

– URI, HTTP, HTML

WWW の三大要素

• URI

–

• HTTP

–

• HTML

–

–

Trojan room Coﬀee-­‐Pot

•

–

– WWW

Web

•  HTML とは

–  Web

–  W3C

– 

•  HTML の特徴

– 

– 

– 

•  WWW の文書記述記法

•  タグと呼ばれる命令文

– 

– 

• 

– 

– 

– 

– 

• 

• 

•   CSS (Cascading Style Sheets)

–  HTML

– 

–  W3C

–  CSS 2.1

•  CSS

–  HTML

–  CSS

– 

p#id { 

color: #ff3300; 

font-size: 24px  }

•  現在もっとも普及したハイパーテキスト実装

– 

•  Web

• 

– 

•  WWW を支える技術

– 

–  URI, HTTP, HTML

•  URI

– 

•  HTTP

– 

•  HTML

– 

– 

Trojan room Coﬀee-‐Pot

• 

– 

–  WWW