例：夏のことをフランス語では と言います。（この例ではフランス語が gif イメージ） |
HTML とはHyper Text Markup Language の略であり、インターネットのいわゆるWeb ページの作成に一般的に使用される言語です。後で例を紹介しますが、タグとよばれる機能付加のマークをテキスト上にちりばめ、Web ページの主にレイアウト関係を指示します。HTMLはページの外観を主に処理するので直感的に理解しやすいコンピュータ言語ということができます。ワープロやエディターを使い、タグのレフェランス・ブックを片手に打ち込んでも２，３日でHTMLの基本は理解できるでしょう。しかも、最近ではHTML作成エディタも数多く市販され、ものによってはWYSISWYG（作成用エディタの画面と出来上がりの画面とが極めて近い状態）でホームページができてしまうものまであります。
本ホームページ作成にあたっては、はじめの段階ではHTML作成エディタを用いましたが、作成のほとんどの過程はワープロ（Nisus Writer）、エディタ（Simple Text, Edit7）でおこないました。Nisus Writer はHTMLのタグを打ち込むためのマクロや特殊文字変換のマクロがついており、特にフランス語でのHTML作成には大変便利です。
ホームページ作成ではすでに公開されている数多のホームページがお手本になります。目にも鮮やかなものから、地味な中にも味わいのあるものまで実に様々ですが、ホームページの用途や自分の趣味に合うものを探し、刺激を受けると同時に部分的に模倣して、ホームページの外観や構成をよりよいものにしていくことになります。公開されているホームページのカラーやレイアウトで気に入ったものがあれば、そのページのソースを調べます。ソースを調べるには、Netscape Navigator の場合ではプルダウン・メニューの「表示」より「文書のソース」を選びます（フレームが使われている場合は「フレームのソース」）。本稿で使っている Java Script についても同様に確認できます。ちなみに「文書情報」にはページを構成するエレメント（フレーム、画像、サウンドなど）のリストがあらわれますからページ構成の全体がわかります。
| Accent aigu | (ex) lphant | |
| Accent grave | , , | (ex) pre |
| Accent circonflexe | , , , , | (ex) htel |
| Tr士a | , , | (ex) haku |
| C仕ille | (ex) a |
従来の問題はこれらのアクセント記号のついた文字が、HTMLではすべて特殊記号として扱われる点でした。その結果、例えば accent aigu のついた e は、é と書かなければ適切に表示されないことになったのです。以下にアクセント記号のつく文字の記述方法を示します（太字がアクセント記号がつく母音です）。
| Accent aigu | é |
| Accent grave | à è ù |
| Accent circonflexe | â ê î ô û |
| Trema | ë, ï, ü |
| Cedille | ç |
しかも、フランス語ではアクセント記号が頻繁に使われます。 HTMLでフランス語を書く場合に以上のようなアクセント・コードをいちいち書き加えていたのでは大変です。どうしたらよいでしょうか。
まず考えられることはワープロやエディタの検索・置換機能を使うことです。一文字ずつ打ち込むよりはフランス語をふつうに打って、後でまとめてコード変換する方が確かに楽です。しかし、この方法でも上の表のように１３種類の文字について変換しなければならずやはり作業としては大変です。
もう一つの解決方法は高機能ワープロなどについているマクロを使うことです。例えば、Nisus Writer （5.04J 以降のバージョン）には HTML専用のマクロがついており、その中に「特殊文字の変換」というマクロがありますから、それを使えば作業効率が格段にあがります。もちろん自分でも作ることができます（注１）。
| 例：夏のことをフランス語ではと言います。（この例ではフランス語が gif イメージ） |
もう一つの大きな問題は、フォームを使用した場合、 gif イメージはもちろんですが、上で述べたコード変換が使えない点です。解答チェック用の if 構文は HTML で書かなければならない一方で、フォーム入力されたフランス語をHTML に自動変換するメソッドが Java Script にはないからです。自動解答システムがフランス語入力で機能しないのでは大変困ります。
最も単純な解決方法はアクセント付きのフランス語を入力しないで済ませる問題を用意することです。しかし、これは姑息な手段であり、フランス語学習教材としてはあまりにも大きな限界を抱え込むことになります。
もう一つの解決方法は Java Script の escape メソッドを使って、フォーム入力されたフランス語をアスキーコード（ISO Latin 1）に変換するというものです。これならば、正解の方もあらかじめアスキーコードにしておけば、 if 構文による比較が可能になります（フレーム・デモ３参照）。 ただし、この操作はNetscape Navigator 3.0では有効ですが、Internet Explorer 4.0では機能しません。
あるいはもっと単純に Java Script 内の正解も、フォーム入力するフランス語もともにアクセント付きでそのまま用いるという手があります。実はこれがベストでしょう。少なくともInternet Explorer 4.0では文字セットを欧文にしても、日本語にしてもともにうまく機能します（フレーム・デモ４参照）。ただし、Netscape Navigator 3.0では文字コードを日本語にしないとうまくいかないようです。
自動解答システムでのフランス語入力処理がこれですべてうまくゆくわけではありません。特に日本語にローカライズされたブラウザーでは、フォーム入力されたフランス語をそのまま別フレームに表示すると文字化けが起こるなど問題が残ります。これからのブラウザーやJava Script の発展に期待せざるをえません。
２）フレームごとにリンクをはる
フレーム分割によるページ作りの細かい点についてはここではふれませんが、ページ構成についてだけ簡単に説明します。例えば、Ａ，Ｂ，Ｃの三つのフレームからなるページ Lesson 1 を作る場合を考えましょう。このためには A.html, B.html, C.html の三ページを個別に作るほかにフレーム分割のレイアウトを指定するページ（仮に lesson1.html と名付けます）が必要になります（注２）。ここでＡが Lesson 1 以降も共通に使われるタイトル用のフレームでしたら、後続のフレーム分割指定ページ（lesson2.html など）で A.htmlをそのつど指定すればそれで済みます。また、あるフレームの表示内容を他のフレームのリンクから自由に指定できますから、例えばＣフレームのリンクを利用して学習者が必要に応じてＢフレームに動詞の活用表を表示させたり、語彙の説明を呼び出すことができることになります。なお、他のサイトのページをこちらのフレームの一つに呼び出すことも同様にすればできますが、この場合は無断引用に当たりますので問題が残ります。やはり、他サイトへのリンクはページ全体でおこなうべきでしょう。なお、現在開いているページを維持したままでリンク先をそれとは別の新しいページに呼び出すためにはすでにのべたようにターゲットを指定します。
３）サイト内ハイパーリンク構築
一貫したサイト内ハイパーリンクを構築するためには、サイト全体のアーキテクチャーがしっかり把握できている必要があります。YU Internet French Courseの構造を例にとりましょう。階層の最上位に index.html （日本語版）とindex_e.html （英語版）がきます。Page created: 97.12.2 Last modified: 98.1.15 By morita (morita@kkb.yamanashi.ac.jp)
Nisus Writer 付属のマクロではアクセント付きの文字を HTML用に変換することはできますが、その逆の作業はできません。次のようなマクロを作れば、これが可能となります（下の表ではアクセント付きの母音字を表示できませんので、便宜的に accent aigu 付きの e を e=aigu という風に示します。実際にNisus Writer 用マクロを作るときはその点にご注意願います。）
|
検索・置換... "é" "e=aigu" "-Siatt" 検索・置換... "è" "e=grave" "-Siatt" 検索・置換... "à" "a=grave" "-Siatt" 検索・置換... "ù" "u=grave" "-Siat" 検索・置換... "ê" "e=circonflexe" "-Siat" 検索・置換... "î" "i=circonflexe" "-Siat" 検索・置換... "ô" "o=circonflexe" "-Siat" 検索・置換... "â" "a=circonflexe" "-Siat" 検索・置換... "û" "u=circonflexe" "-Siat" 検索・置換... "ë" "e=trema" "-Siat" 検索・置換... "ï" "i=trema" "-Siat" 検索・置換... "ü" "u=trema" "-Siat" 検索・置換... "ç" "c=cedille" "-Siat" |
以下はレイアウト指定ページの例です。
| <HTML> <HEAD> <TITLE>lesson1</TITLE> </HEAD> <FRAMESET ROWS="80,*"> <FRAME SRC="A.html" NAME="a" SCROLLING = no noresize> <FRAMESET COLS="200,*"> <FRAME SRC="B.html" NAME="b"> <FRAME SRC="C.html" NAME="c" SCROLLING = auto> </FRAMESET> </HTML> |
| <a href=../index.html target="_top">ホーム</a>
| 初級
| <a href=../grammar/index.html target="_top">文法</a>
| <a href=../lexique/index.html target="_top">語彙</a>
| <a href=../quiz/index.html target="_top">クイズ</a>
| <a href=../intermediate/index.html target="_top">中級</a>
| <a href=../advanced/index.html target="_top">上級</a>
| <a href=../password/index.html target="_top">登録者</a>
| <a href=../roleplay/index.html target="_top">ロールプレイ</a> |