(6) 11/07の授業内容:HTML(3) 自由製作時間

自由製作時間

本日は前回から作り始めたWebページの完成を目指す。自分で自由に設定したテーマに基づいて、面白いページや、役に立つページを作ってみよう。なお、前回の授業でも記載したが、このWebページ作成はHTML言語を書く練習でもあるため、かならず以下の2つの条件を満たすこと。

  • htmlファイルを最低2つ作成する(ハイパーリンクの練習)
  • 最低1つは画像を表示させる(imgタグの練習)

画像については自分で撮った写真でも良いし、Webページ作成用に無料で公開されている素材を利用しても良い。ただし自由に利用することが許可されている素材以外の利用は著作権の侵害になるため絶対に行わないこと。Webページ作成用の無料素材を提供しているページは、GoogleやYahoo!で「無料素材」などをキーワードに検索すればたくさん見つかるはずである。

本日完成するページは白黒ページになるはずである。また文字の大きさも自由に設定することもできないはずである。これらはCSSで設定する。再来週からは完成した白黒のWebページにCSSを利用して色をつけていく。

htmlファイル作成方法の確認

htmlファイルを作成するための手順を、確認の意味を含めて以下に示す。

  1. TeraTermでroyに接続する
  2. emacs -nw[Enter]でemacsを起動する
  3. Ctrl-x Ctrl-fと押す(新規作成およびファイルオープン)。
  4. ミニバッファにFind File:~/と表示されるので、Find File:~/public_html/ファイル名[Enter]。ファイル名の部分は新規作成したいファイル名もしくは、開きたいファイル名を記載する。拡張子に.htmlを付け忘れないようにする。
  5. emacsの保存のコマンドはCtrl-x Ctrl-s。こまめに保存しよう。
  6. 完成したら、ブラウザにURLを入力する。もしも作成しているファイル名がhobby.htmlの場合、URLはhttp://roy.e.koeki-u.ac.jp/~c106xxx/hobby.htmlとなる(c106xxxは自分の学籍番号)。

画像をWebページに表示させたい場合

画像を利用したい場合、htmlファイルの中ではimgタグを利 用するが、前提条件として画像ファイルをpublic_htmlの中においておく必要が ある。

Webページ用の無料素材を提供しているページに掲載されてい る画像を利用したい場合は、利用したい画像を右クリックして「画像を名前をつ けて保存」(利用しているブラウザによって若干言葉は異なる)を選択し、Zドライブに保存する。自分で撮影した写真を利用 したい場合はさらに方法が複雑になるため、相談すること。

Zドライブに保存をした後で、その画像ファイルをZドライブ からpublic_htmlに移動する。そのための手順は以下のとおり。

  1. royに接続する。すでに接続してemacsを起動している場 合はemacsを終了する。終了するためのコマンドはCtrl-x Ctrl-c
  2. cd Windows[Enter]と入力
  3. mv 画像ファイル名 ../public_html[Enter]と入力

cdはフォルダを開くコマンド。WindowsとすることでZドライ ブが開かれる。mvはファイル移動のコマンドで、画像ファイルを public_htmlに移動せよと命令している。これにより画像がpuclic_htmlに 移動されたので、あとはimgタグを使用すれば表示させることができる。

課題

できれば本日の時間内に2つのhtmlファイルを完成させよう。終わらない場合、最低でもhtmlファイル1つは来週の授業までに完成させておくこと。

出席メールとして、作成したページのURLと進捗状況を記載して送ってください。既に2つhtmlファイルを作成している場合、ハイパーリンク元のURLのみ記載すれば、ハイパーリンク先のURLは不要です。

  1. 提出先:naoya@e.koeki-u.ac.jp
  2. メールの件名(Subject):literacy(6)
  3. 提出期限:授業終了時
  4. 電子メールの使い方に自信がない場合:Mewの主要コマンドについてを確認しよう