HTMLの最近の話題

HTML4に関係する最近の話題についての発表です。このHomePage自体が, HTML4のFrame, CSS ( Cascading Style Sheet )を使ったものとなっています。内容と, HTML自体とをいっしょに見ていただくとよりわかりやすいです。なお, HTML4に未対応のBrowserをご利用の方は, HTML4本来の表現の欠落した表示となりますので, できるだけ, HTML4対応のBrowserをご利用ください。

内容

Browser
Web Server
Dynamic HTML
HTML4
フレーム
スタイルシート

AACUのHome Pageへ戻る

Browser

最近、よく使われているBrowserは何?

1998年1月のある1週間のwww.ascii.co.jpへのアクセス (Internet@ASCII 1998 April p.131より引用)

全体

MSIE Mozilla

44.3% 34.8%

MSIE	Mozilla
44.3%	34.8%

ドメイン別

ドメイン	MSIE4.x	MSIE3.x	Mozilla4.x	Mozilla3.x	Mozilla2.x
co.jp	20.9%	19.2%	15.1%	19.4%	2.2%
or.jp,ne.jp	36.8%	14.9%	12.9%	16.2%	1.1%
ac.jp	13.6%	12.7%	19.0%	39.5%	4.0%

Web Server

最近、よく使われているWeb Serverは何?(Linuxパワーガイドp.155から引用)

Site	Web Server
www.microsoft.co.jp	MS-IIS
www.nec.co.jp	Apache
www.sony.co.jp	Apache
www.panasonic.co.jp	Apache
www.hitachi.co.jp	Apache
www.sanyo.co.jp	NCSA
www.canon.co.jp	Netscape-Enterprise
www.toshiba.co.jp	Netscape-Communications
www.ibm.co.jp	NCSA
www.oki.co.jp	CERN
www.toyota.co.jp	Netscape-Communications
www.nissan.co.jp	Netscape-Communications
www.melcoinc.co.jp	CERN
www.iodata.co.jp	NCSA
www.ajinomoto.co.jp	CERN

Dynamic HTML

Dynamic HTML = Script + Object Model + CSS
スクリプト言語
- 元々　JavaScript ( Netscape )
- Jscript ( Microsoft )
- ECMA Scriptとして標準化 ( European Computer Manufactures Association )
  - JavaScript1.2 ( Netscape Navigator4.0 )
  - JScript3.01 ( Microsoft IE4.0 )
Object Model
- HTMLのタグごとに、オブジェクト
  
  FORMタグ formオブジェクト
  
  IMGタグ imgオブジェクト
- オブジェクトごとに、プロパティ, イベント, メソッド
  例えば、IMGタグには、srcプロパティ
  imgオブジェクトのon mouse overイベントで、
  srcプロパティを書き換えて、画像を変化させる
CSS ( Cascading Style Sheet )
Web Pageの属性を細かに指定→DTPのように

トップに戻る

HTML4

HTMLの変遷

HTML2.0 基本的なタグの定義

HTML3.0 廃案

HTML3.2

HTML4 1997年12月に推奨規格
HTML4.0の特徴

国際化
UCS ( Universal Character Set ), 各国語のHTMLドキュメント
アクセシビリティ
音声読み上げブラウザのための機能、代替テキスト
表機能

復号ドキュメント
イメージやアプレットを＜OBJECT＞タグで統一
スタイルシート
HTMLによる文書構造の記述と, スタイルシートによる表現の規定とを分離
印刷機能
印刷用の内容制御

トップに戻る

フレーム

フレーム…HTML4で標準規格
このHomePage自体…フレームの例

フレーム機能の使い方

フレーム定義ドキュメントの作成

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Frameset//EN">
<HTML>

<HEAD>
  <TITLE> タイトル </TITLE>
</HEAD>

<FRAMESET COLS="20%,80%">  <!-- 20%,80%の比率で2列に分割する -->
  <FRAME SRC="ドキュメントURL" NAME="フレーム名"> 
  <FRAME SRC="ドキュメントURL" NAME="フレーム名">
</FRAMESET>

</HTML>

各フレームのドキュメント作成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
  <META HTTP-EQUIV="Content-type" content="text/html; charset=x-sjis">
</HEAD>

<BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="WHITE" VLINK="WHITE">

<UL>
 <LI> <A HREF="ドキュメントURL#アンカー名" TARGET="フレーム名"> リンク1 </A>
 <LI> <A HREF="ドキュメントURL#アンカー名" TARGET="フレーム名"> リンク2 </A>
</UL>

</BODY>

</HTML>

フレーム未対応のBrowserへの対応

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Frameset//EN">
<HTML>

<HEAD>
  <TITLE> タイトル </TITLE>
</HEAD>

<FRAMESET>

<FRAMESET COLS="20%,80%">
  フレーム定義
</FRAMESET>

<NOFRAME>
  非フレームブラウザ用のHTMLコード
</NOFRAME>

</FRAMESET>

</HTML>

トップに戻る

CSS ( Cascading Style Sheet )

スタイルシートとは
- スタイルシート = スタイルルールの集まり
- スタイルルール = レイアウト, 体裁, ドキュメントのデザイン的要素を定義
- ドキュメントの構造は、従来通り、HTMLで記述
なぜ, カスケード? スタイルシートによる序列
1. 外部ファイルからのスタイルシート
2. ドキュメントのスタイルシート
3. 特定要素のSTYLE属性

外部ファイルからのスタイルシート

         HTMLドキュメントのヘッダ中に
         <LINK REL=stylesheet HREF="…">

ドキュメントのスタイルシート

         HTMLドキュメントのヘッダ中に
         <SYTLE TYPE="text/css">
            タグ {スタイル定義}
            タグ {スタイル定義}
         </STYLE>

特定要素のSTYLE属性

         HTMLドキュメントのボディ中の各タグで指定
         <H1 STYLE="スタイル定義">
         </H1>

STYLE属性

属性	説明	値の例
font-family	フォント指定
font-size	フォントの大きさ	small, medium, large
color	テキストの色	aqua, black, blue, gray, lime, siilver, white, yellow
text-decoration	テキストの飾り	underline, overline, line-through, blink
text-align	テキストの配置	left, center, right, justify
text-indent	テキストのインデント	2%

トップに戻る

FORMタグ	formオブジェクト
IMGタグ	imgオブジェクト

HTML2.0	基本的なタグの定義
HTML3.0	廃案
HTML3.2
HTML4	1997年12月に推奨規格