2010-01-21

ホームページ作成

書きかけです。

gmail管理者を装った詐欺メールに注意

皆さんのメールアドレスに以下のような注意が届いているはずです。

gmail管理者を装った差出人から 「あなたのアカウントは 利用不可の状態になっています、このフォームにアカウント名とパスワードを 入力し再設定してください」という趣旨のメールが届いたそうです。
誤ってメールの指示に従ってしまったところ、被害にあった方のアカウントで 他人が勝手にログインできるようになってしまい、パスワードを勝手に変えら れて、メールを開けなくなったそうです。

もしこの被害にあってメールを読めなくなった人は、情報基盤センター事務室へ相談に行ってください。

今日の内容

  • 授業評価アンケート
  • 前回の課題提出
  • ホームページ作成
今日はまず、パソコンを起動してログオンして使えるようになるのを待つ間に、授業評価アンケートを書いてください。

課題提出

前回の練習問題の1と2をメール本文に貼りつけて提出してください。練習問題2が途中の人は途中までで構いません。1しか出来ていない人は1だけで構いません。
件名:学籍番号と「ブログの表」、本文:HTMLと名前

ホームページ作成

ブログを使うと、全体のデザインを自分で変更することが出来ません。今週は全体のデザインを含め、全部自分で書いてみましょう。
秀丸エディタを使って

<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

と書いてください。このときも仮名漢字変換をOFFにして入力してください。そして「名前を付けて保存」でindex.htmという名前でW:ドライブに保存してください。保存したら、W:ドライブを開いて、index.htmというファイルをダブルクリックしてください。先ほど書いたファイルの内容が表示されたはずです。
 注)W:ドライブが無い人は、情報基盤センターのホームページを見てください。

次にFirefoxで

http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/

を見てください。この方法だと、他の人からも見ることが出来ます。

先ほど書いたファイルの説明をします。

<HTML>  ←ここからHTMLファイルが始まります。
<HEAD>  ←ここから前書きが始まります。
<TITLE>  ←ここからタイトルが始まります。
タイトル     ←ホームページのタイトルです。自由に書き換えてください。
</TITLE>  ←ここまでがタイトルです。
</HEAD>  ←ここまでが前書きです。
<BODY>  ←ここから本文が始まります。
本文      ←ホームページの本文です。自由に書き換えてください。
</BODY>  ←ここまでが本文です。
</HTML>  ←ここまでがHTMLファイルです。

本文のところに、先程提出した表を書いてみてください。

これだけでは本文が物足りないので、色々飾りましょう。沢山のコマンドがありますが、この講義ではその中の一部だけを紹介します。全部のコマンドは HTMLタグリファレンスを見てください。

  • 改行は<BR>、段落は<P>です。
  • 本文全体の色を決めるには、<BODY TEXT=文字の色 BGCOLOR=背景の色>と書きます。例えば<BODY TEXT="white" BGCOLOR="black">のように。
    詳しくは <BODY>を見てください。
  • 一部分の文字の色を変えるには、上の例のように<FONT COLOR=文字の色>と書きます。大きさを変えるなら<FONT SIZE=大きさ>です。例えば<FONT COLOR="green" size="7">大きな緑の文字</FONT>のように、両方同時に指定することも出来ます。
    詳しくは<FONT> を見てください。
  • 色の名前は、色の名前を見てください。
  • 画像を貼り付けるには、例えば、http://www.okayama-u.ac.jp/jp/img/topss_01.jpgを皆さんのホームページに貼るには
    <IMG SRC="http://www.okayama-u.ac.jp/jp/img/topss_01.jpg">と書きます。画像のアドレスは、画像にマウスを合わせて右クリックして「プロパティ」を見ます。デジカメの画像をW:ドライブに保存して使うことも出来ます。
    詳しくは <IMG>を見てください。
  • 他のページへのリンクを張るには、例えば、岡山大学のホームページhttp://www.okayama-u.ac.jp/にリンクを張るには
    <A HREF="http://www.okayama-u.ac.jp/">岡山大学</A>と書きます。
    詳しくは<A>を見てください。
ホームページでは表を使うことが多いです。 先週ブログに書いた、いかにも表っぽい表だけでなく、様々な文字や画像を並べるときも使えます。例えば

銀杏並木が美しい
岡山大学へようこそ
春は桜が美しい
環境理工学部全景

のようにレイアウトも、実は表を使って

銀杏並木が美しい
岡山大学へようこそ
春は桜が美しい
環境理工学部全景
のように並べておいて、内側の表の罫線を表示させず、一方外側の表は枠として表示させることで実現しています。
ホームページ作りに関してはまだまだ沢山の項目があります。興味がある人は解説サイトなどを見てください。但し、沢山の項目を駆使するより、配置、配色を工夫する方が見やすいページになります。

ホームページ作りに関する課題:
http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/
という形で学内から見ることが出来るホームページを作ってください。 内容は何でもいいですが、例えばパワーポイントの課題と同じテーマを使えば内容を新たに考える手間が省けます。
条件は

  1. 少なくともindex.htm, link.htm, page1.htm の3つのファイルを作って下さい。page2.htmなどもっと作っても構いません。
    index.htmは http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/ と指定すれば他の人からも読むことが出来ます。それ以外のページは、例えばlink.htmだったら http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/link.htm と指定すれば読むことが出来ます。
  2. index.htmからはlink.htm, page1.htmへのリンクを作り、link.htm, page1.htmからindex.htmに戻るリンクを作って下さい。
  3. link.htmには他のサイト(友達、僕、岡山大学、外部などどこでもいいです)へのリンクを作って下さい。
  4. 画像を貼る
  5. 色をつける。文字の色でも背景の色でもいいです。
以上を満たすページを2月4日までに作ってください。完成したら
件名:学籍番号と「ホームページ」、本文:「完成しました」と名前
というメールを送ってください。

来週1月28日と再来週2月4日は試験期間中ですので通常の講義ではなく補講として、新しい内容はせずにHTMLのレポートやそれ以前の内容に関する質問の時間にします。

0 件のコメント: