第7回 Webページ作成(1)

学習する内容

• Webページの公開の仕方
• HTML文によるWebページの作成
• リンク作成のための相対パスと絶対パス

・サンプル画像

メモ

• Webサーバ利用申請（http://www.u.tsukuba.ac.jp/publishing/）
• 作成したHTMLファイルは Z:ドライブのwwwフォルダに保存する（ファイルとURLの対応）。
  例） Z:ドライブのwwwフォルダの中のtest.html というファイルは http://www.u.tsukuba.ac.jp/~ユーザ名/test.html というURLでアクセスできる。（ユーザ名はs1012345のような数字）
• local_onlyという名前のフォルダに保存されたファイルは、学内からのみアクセス可能になる。
  例） Z:ドライブのwwwフォルダの中のlocal_onlyフォルダの中のtest.htmlというファイルは http://www.u.tsukuba.ac.jp/~ユーザ名/local_only/test.html というURLで学内からのみアクセスできる。
• 画像を掲載したい時は、画像ファイルをHTMLファイルと同じフォルダに保存し、HTMLファイル内で<img src="ファイル名">と記述する。
• HTMLタグはたくさんあるので、それぞれの使い方は手引きの7章、または参考となるWebページを参照する。(たくさんあるけど、よく使われるタグはかなり限られる)
  • HTMLタグ辞書
  • HTMLタグ一覧表
• 相対パスと絶対パスについて
• 練習問題解答
• HTMLの主なタグ
• パーミッションの設定について

課題

課題の達成目標

・テキストエディタを使用して簡単なHTMLを作成できる。
・画像の貼り付け、他のページへのリンクが行える。
・指示されたURLでアクセスできる場所にWebページを配置できる。

課題内容

次の条件を満たすWebページを次回の授業までに作成しなさい。(manabaによる提出物は無い)

• 次のような構成のWebページを作成しなさい。つまり、index.html, 01.html, 02.html, 03.html の4つのHTMLファイルから構成され、index.htmlと他のファイルは相互にリンクされている。
  
• 各ファイルは Z:/www/local_only/kadai6 (Zドライブのwwwフォルダの中のlocal_onlyフォルダの中のkadai6フォルダ）に保存する。
  （つまり、作成したページは http://www.u.tsukuba.ac.jp/~ユーザ名/local_only/kadai6/index.html というURLでアクセスできるようにすること。）
• 受講生Webページ一覧(←筑波大学内部からのみ閲覧可能)からアクセスして表示できることを確認する。
• 各ページは、次の内容とする。デザインは自由に行って構わない。
  • index.html はトップページとし、下記のページへ移動するためのリンクが存在する。
  • 01.html は第1回目の課題でまとめた「面白そうな論文紹介」の内容。論文中の図を引用して構わない。
  • 02.html は第3回目の課題で調べてまとめた「統計データ」に関する内容。Excelのグラフを貼り付けること（グラフを[Ctrl+C]でコピーして、「ペイント」に[Ctrl+V]で貼り付け、png形式で保存）。
  • 03.html は第6回目に発表したプレゼンテーションで扱った内容。
• （CSSの学習は来週の予定だが、知識のある学生はCSSを使っても構わない）