HTML

 このCAIは,ホームページを作成する言語,HTML(Hyper Text Markup Language)の基礎を,そのHTMLで書かれたe-Learning Systemによって,体系的に学習することを目的として作られました.
 我々がこのCAIをインターネットで公開したのは,誰でも利用できるようにする,言い換えれば,あらゆる人と「教育環境を共有する」ためであり,「ユビ キタスな教育環境設計」を目指したからです.そして,e-Learning SystemでHTMLのような言語を学習するメリットは,1.いつでも好きなときに学習できること,2.自分のペースで学習できること,3.個人個人が 関心のある部分,よく知らない部分だけ学習することも可能であること,4.実行結果をその場で見て確認できること,5.必要に応じて書かれているプログラ ム・ソースを自分のファイルにコピーして利用できること,等があげられます.特に最後の5.は,プログラミングで犯しがちな単純なスペルミス等の表面的な バグの修正に時間や労力が費やすことなく,実質的なプログラミング技術に集中する上で,大変有用です.
 是非,こうしたメリットを活かし,このe-Learning Systemを活用してくださることを願います.


0章 はじめに(全くの初心者に)

  1. 最も簡単なホームページを書く:<html>< head><title><body>タグ
  2. 書いたホームページをブラウザで見る
1章 HTMLの基礎
  1. 文字の大きさを変える:<h1>〜<h6>タ グ, <font size=1〜7>タグ
  2. 文字の色を変える:<font size=n color="#xxxxxx">タグ内のアトリビュート(より細かな属性)
  3. その他の文字書式を変える:<b><i> < u><blink><sup><sub>タグ
  4. テキストの書式を変える:<center>< br> <p>タグ
  5. 背景の色や全体の文字色を指定する:<body bgcolor="#xxxxxx" text="#x〜" link="#x〜" alink="#x〜" vlink="#x〜">
  6. 背景にイメージを使う:<body background="ファイル名(〜.gif)">
  7. 水平ラインを引く:<hr size=n width=n align=left/center/right>
  8. リスト:<ol><ul>< li>
  9. 番号付きのリス トの番号 を変える
  10. リストの番号の数値を変える
  11. リストの文頭に表示される記 号の種類 に変化をつける:<li type="disc"/"square"/"circle">
2章 イメージ
  1. ブラウザで見ている他のページの画像を保存する
  2. イメージの貼りつけの基本:<img src="filename.gif(.jpeg:以下省略)" width=w(ピクセル)/w% height=h((ピクセル)/h%)>
  3. イメージの貼りつけ場所のコントロール:< center>, %指定と<br>タグ
  4. イメージとテキストの配置:<img src="filename.gif" align="top"/"center"/"bottom"/"left"/"right">
  5. 絵の横に来る文字の回り込み
  6. イメージの境界線の指定:<       〃        border=n>
  7. イメージの左右の隙間の指定:<    〃        hspace=n>
  8. イメージに説明文を追加す る: <img src="filename.gif" alt="説明文">
  9. イメージの2段階 表示: <      〃      lowsrc="filename2.gif">
3章 リンク
  1. 同じディレクトリの他のファイルにリンクする:<a href="filename.html">テキスト</a>
  2. 他の様々なディレクトリのファイルにリンクする:<a href="../filename.html" or "../other/filename.html" or "other/filename.html">テキスト</a>
  3. イメージでリンクする:<a href〜><img src〜></a>
  4. イメージに枠をつ け太さを 指定する。:<border="数字">
  5. 同じページの別の場所にリンクする:<a name="アンカー名"></a>と<a href="#アンカー名">テキスト</a>.
  6. 他のページの特定の場所にリンクする:(他のページでの)<a name="アンカー名"></a>と<a href="アンカーのあるファイル名#アンカー名">テキスト</a>
  7. 他のサーバーのファイルにリンクする:<a href="http://www.〜.〜.〜/")>テキスト</a>.
  8. ページを自動的に 移動させ る:<meta http-equiv="refresh" content="秒数;url=filename.html">
4章 テーブル
  1. テーブル作りの基本:<table border><tr><td>
  2. テーブルを見やすくする1:<table border=n><caption (align="top"/"bottom")>
  3. テーブルを見やすくする2:<tr/td/th (align="right"/"left"/"center") (valign="top"/"bottom")>
  4. テーブルにイメージを貼る:<td><img src="filename.gif" width=w height=h></td>
  5. ネストになったテーブル:<td>の使い方に注意
  6. セルの幅と高さ:<td/th rowspan=r colspan=c>
  7. テーブルの背景色を指定す る: <table bgcolor=""><tr bgcolor=""><th/td bgcolor="">
5章 フレーム
  1. フレーム作りの基本:<frameset rows="上ピクセル/%,下ピクセル/%"><frameset cols="左ピクセル/%,右ピクセル/%"><frame name="フレームの名前" src="ファイル名.html">
  2. リンクファイルを別のフレームにロードする:<a href="ファイル名.html" target="別のフレームの名前">テキスト</a>
  3. リンクファイルを常に同じフレームにロードする:< head> 〜<base target="フレームの名前"></head>
  4. リンクファイルをフレームを解除した画面全体に提示する:<     〃     target="_top">
  5. フレームの各種アトリビュート:<frame name〜 src〜(既出) scrolling="1/0" marginheight=h marginwidth=w noresize>
  6. フレームの境界線の有無:<frameset frameborder="1/0"><frame frameborder="1/0"><frameset border="1/0">
6章 フォーム
  1. フォームの基本:入力された1行テキストを特定のアドレスに送る/取り 消す. <form action="送り先" method="post"><input type="text" name="データ名" size=n></form>
  2. 複数行のテキストボックス:上の,<input type〜size=n>の代わりに<textarea name="データ名" rows=r cols=c></textarea>
  3. ラジオボタン:<input type="radio" name="データ名" value="選択データ名1 checked>選択肢1<〜value="選択データ名2>選択肢2〜
  4. チェックボックス:<input type="checkbox" name="選択データ名1" value="On">選択肢1<〜 name="選択データ名2" value="On">選択肢2
  5. 選択ボックス:<select name="データ名" size=n><option selected>選択肢1<option>選択肢2<option>選択肢3〜</selected>
  6. 送信ボタンの代わりにイメージボタンを使う:<input type="image" src="画像ファイル名.gif">
7章 その他の役に立つ「小技」
  1. コメント化: <!-- と -->
  2. フォントの種類を指定する:<font face="オプション1,オプション2〜"></font>
  3. クリッカブルマップ:<img src="画像ファイル名" usemap="#定義名"><map name ="マップの定義名"><area shape="rect"/"circle"/"polygon"/"default" href="リンク先のURL"/nohref(リンクなし)>〜</map>
  4. クリッカブルマッ プの応 用:テーブルとの組み合わせ
  5. 背景のイメージ を固定す る
  6. 文章を引用する
  7. 画像をテキストで代用する
  8. 背景イメージを表 示させる スタイル指定する。(Internet Explorerのみ):<styletype="text/css">a{font-size:数字pt; background:url(gif名)}</style><a>〜</a>
  9. 文字を左右に動か す。 (Internet Explorerのみ):<marquee behavior="動き">〜</marquee>
8章 役に立つ「大技」
  1. 音楽を流す
  2. Shockwave for Flashを使ってマルチメディアなページを作成する:classied=オブジェクトエレメントのID
  3. <DIV> ダグを駆使する:<div>