教育サーバーのページ

オンラインテキスト目次（水谷先生）

コンピュータリテラシー演習目次

HTML文書の作成

学習内容

参考：

• 戸田将さんによる簡単で正しいHTMLの書き方
• HTML文書作成（水谷先生のページ）
• HTMLからXHTMLへ

1. HTML (Hyper Text Markup Language)の基本知識の理解
   • WWW (World Wide Web)
   • Webブラウザ
   • ホームページ、Webページ、Webサイト
   • URL (Uniform Resource Locator)
   • HTTP (Hyper Text Transfer Protocol または Hyper Text Transport Protocol)
   • public_htmlディレクトリ
2. HTMLの基本的なタグ
3. HTMLタグの問題
4. スタイルシート
5. 文字コードの指定
6. Webページのアクセス制御： .htaccessによるWebページの学外公開
   • 学内のみ公開用（学外非公開）.htaccessファイル
   • 学外公開用.htaccessファイル
7. JavaScript

課題（HTML文書の作成）

1. index.htmlの作成
   1. HTML文書のサンプルとして、 「index.htmlファイル」を、自分の ~/public_htmlディレクトリに、index.htmlというファイル名で 保存せよ。保存の際に、エンコードを日本語（シフト JIS）に指定するように。
   2. 保存後、テキストエディタでindex.htmlを開き、適宜自分の情報に置き換えよ （名前、メールアドレスなど）。
   3. Webブラウザ上で、index.htmlが閲覧できるか確認せよ。URLは、
      http://www.edu.tuis.ac.jp/~自分のユーザ名/index.html
      である。
2. town.htmlの作成
   1. town.htmlのサンプルとして、 「sample.htmlファイル」を、自分の ~/public_htmlディレクトリに、town.htmlという ファイル名で保存せよ。
   2. 保存後、テキストエディタでtown.htmlを開き、適宜自分の情報に置き換えよ （名前、メールアドレスなど）。また、以前作成した、town.docの 内容を反映したい。その際に、適切なタグをつけることに注意しよう。例えば、
   3. Webブラウザ上で、town.htmlが閲覧できるか確認せよ。URLは、
      http://www.edu.tuis.ac.jp/~自分のユーザ名/town.html
      である。
   4. 参考：
      [town.htmlの見本 （表、参考文献なし）]
      [town.htmlの見本 （表、参考文献つき）]←最終的にこの形まで仕上げる
3. dream.html, hobby.htmlの作成：
   上記のtown.htmlの作成手順と同様に、 dream.html, hobby.htmlを作成し、 ~/public_htmlディレクトリに保存せよ。保存後は、Webブラウザ上で、 正しく表示されているか確認せよ。

課題（スタイルシートの作成）

1. スタイルシートを活用したHTML文書のサンプルとして、下記の2点が挙げてある。 両方の方法を自分のindex.htmlへ適用してみよう。
   • HTML文書内に埋め込む形式
   • 別ファイル(style.css)に記述する形式 [style.css]
2. これまでに作成したtown.htmlファイルに対して、自分自身で作成した スタイルシートを適用してみよう。色や配置など自分自身で工夫してみよう。

課題（JavaScriptの作成）

1. 下記のJavaScriptを使用したサンプルを確認した上で、自分自身のindex.htmlファ イルに追加して、動作確認してみよう。

   1. 時刻を表示するサンプル1
   2. 時刻を表示するサンプル2
   3. 時刻によって表示メッセージを 変更するサンプル（サンプル3）
2. 上記のサンプル2、3でのJavaScriptを利用して、春（3〜5月）、夏（6〜8月）、 秋（9〜11月）、冬（12月〜2月）を表示するJavaScriptをindex.htmlの中に 作成せよ。

本演習用Web教材は、平成13年度までに水谷正大教授が作成した教材に加え、 須崎純一、大城正典、大見嘉弘らが加筆、修正したものである。