web ページの仕組み【4. 本日の課題】

本日の課題:ホームページの作成

本日の実習の内容+αを用いて, オリジナルのホームページを作成してみましょう．

例. (山東) , 例. (茂木) , 例. (人見) , 例. (和氣) , 例. (長野)

課題概要

各情報実験機の/home/USERNAME/public_html/以下に自分のホームページを作成し, そのURLとホームページに関するコメントをMoodle上のフォーラムに提出してください.
課題の要求仕様は以下のように指定しますが, 要求仕様を満たしている限りは特にテーマは設けないので個人の裁量で自由に制作してください.
セキュリティのため，こちらでアクセス制限をかけています． 閲覧に必要なユーザー名とパスワードは elms で公開されている INEX レクチャー動画視聴用のものと同じです.
(実技資料で閲覧した hello.html, rich.html, index.html は johoXX の /home/inex/html 以下に置いてあります. ソースコードを見ることでホームページ作成のヒントが得られるかもしれません.)
パスワードはかけてありますが、Web ページ自体は不特定多数の人が見ることが前提のものです. 公序良俗に反するようなこと(例えば卑猥な内容, 誹謗中傷など)や, 不特定多数に見られては困ることを書かないようにしてください

要求仕様

• 以下のものは最低限作成してください.
  • public_html ディレクトリ
    • 自分のホームディレクトリ直下に作成すること
  • index.html
    • /home/USERNAME/public_html/ 直下に作成すること
    • introduce.html や参考文献のページへのハイパーリンクを貼ること
  • introduce.html
    • /home/USERNAME/public_html/ 以下に作成すること(直下でなくてもよい)
    • 画像を最低1 枚貼ること
  • 参考文献のページ(ex. reference.html)
    • /home/USERNAME/public_html/ 以下に作成すること(直下でなくてもよい)
    • Web ページなどの参考文献の場合はハイパーリンクを貼ること
• 以下のタグは少なくとも 1 回以上利用するようにしてください. 利用する場所については指定しませんが, ちゃんと意味を持って, 正常に機能するようにしてください.
  (中身がなかったり, 形が崩れてしまっている "リスト" や "表" に意味はありません. )
• <title>
• <h1>
• <h2>
• <p>
• <a>
• <img>
• <ul> or <ol>
• <table>
• HTML5 の仕様に沿ったHTML 文書を作成してください. 仕様に関しては以下を参考にしてください.
• W3C HTML5 仕様書
• W3C HTML5 仕様書の日本語訳(非公式)
• HTML5 クイックリファレンス
• w3c markup validation service (HTML の文法をチェックしてくれるサービス)
• 各自の手元の計算機からWeb ブラウザを用いてページが見える状態にしてください.
• 情報実験機の自分のホームディレクトリ以下に public_html ディレクトリを作成してください. 作成した html ファイルや画像ファイルなどはすべてこのディレクトリ以下に格納してください(さらにディレクトリを作り分けてもよいです).
• public_html ディレクトリ直下にトップページとして index.html ファイルを作成してください.
• introduce.html ファイルを作成しそこに画像を貼り, 自己紹介（など，テーマは指定しません）を書いてください.
• 参考文献リストを作成してください. Web ページなどの場合は URL をハイパーリンクで張るようにしてください.

提出内容

以下のものをMoodle上に投稿してください.

• Moodle 上で提出するもの
  • 情報実験機に作成した Web ページの URL
    • "https://johoXX.ep.sci.hokudai.ac.jp/~USERNAME/" という形の URL を記述すること
  • 作成したWeb ページの解説
    • そのページ自体の説明やアピールポイント, 工夫した点などを記述すること
  • 作業協力者, 参考文献
    • 他人の Web ページを参考にした場合もちゃんとその旨を記述すること
  • フォーラム名：Web ガイドおよびコメント
• 情報実験機上で提出するもの
  • 各自のホームディレクトリに要求仕様を満たしたpublic_htmlディレクトリを保存して残すこと．

注意点

• 作成したホームページは "https://johoXX.ep.sci.hokudai.ac.jp/~USERNAME/" にブラウザからアクセスすることで確認可能です.
• ホームページ作成ソフト(ホームページビルダーなど)の使用は禁止します. テキストエディタで 直接 html 文書を書くようにしてください. ホームページ作成ソフトを使っていることが判明した場合作成し直し等をしてもらう可能性もあるので注意してください.
• 他人の著作物や写真などには注意をしてください.
• Web ページ自体は不特定多数の人が見ることが前提のものです. 公序良俗に反するようなこと(例えば卑猥な内容, 誹謗中傷など)を書かないようにしてください.
• レクチャー資料をしっかり読みましょう.
• また, 実習資料もしっかり読みましょう.

ヒント

• Webブラウザからページがhtmlでどのように書かれているか確認することができます．例えば Google Chrome の場合， 右クリックをして，ページのソースを表示を選択することで確認出来ます．
• 使いたい画像ファイルを情報実験機に転送するにはいくつか方法があります．過去の講義でsftpコマンドを紹介しているため, こちらを利用してください.．

困ったときは

• わからないことがあったらまずは本日の実習資料を見直しましょう. また, 文献やインターネット上の検索エンジンも利用しましょう.
• やっぱりわからないときは zoom 質問会で相談しましょう.
• どうしてもわからないときは inex2021-ml を活用しましょう. 同じような疑問を持っている人の助けになるかもしれません.

>> 付録へ

情報実験第 8 回のページへ戻る