[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータI(コンピュータリテラシ)第12回

目次 索引
12.1 Webページ作成(2)
12.1.1 リスト(2)
12.1.2 画像ファイル
12.1.3 画像ファイルのコピー
12.1.4 画像の埋め込み
12.1.5 リンク
12.1.6 Webページ公開の注意事項
12.2 演習12
12.3 レポート課題
12.4 参考文献

12.1 Webページ作成(2)

12.1.1 リスト(2)

最初に、前回作成したHTMLファイルとWebページを開いておいてください。 DockのFinderアイコンをクリックし、サイドバーのホームをクリックし、「WWW-local」→「index.html」とダブルクリックしますと、HTMLファイルが開きます。 DockのSafariアイコンをクリックし、アドレスバーにhttp://www-local.twcu.ac.jp/~ loginname /と入力しますと、Webページが開きます。

リストには、番号無しリスト、番号付きリスト、定義リストがあります。 定義リストとは、用語とその説明が並ぶリストです。 HTMLでは、まず、用語を <DT></DT> で囲み(Definition Term)、説明を <DD></DD> で囲みます(Definition Description)。 そして、用語と説明の並びを <DL></DL> で囲みます(Definition List)。 すると、ブラウザでは、上下に余白が設けられ、用語は字下げされずに、説明は字下げされて表示されます。

12.1.2 画像ファイル

Webページには、文字だけでなく、画像を埋め込むこともできます。 画像を埋め込むには、まず、画像ファイルを用意します。 パソコンでは様々な画像形式が利用されていますが、Webページに埋め込めるのは以下のものだけです。 他の画像形式については、適当なツール(例えば、「プレビュー」で開いて「ファイル」→「書き出し」)で変換しておきます。

表 12.1  Webページに埋め込める画像形式
画像形式 読み方 用途 拡張子
GIF ジフ イラスト(数色) .gif
JPEG ジェーペグ 写真(数千色) .jpeg, .jpg
PNG ピング GIFの代替 .png

12.1.3 画像ファイルのコピー

ここでは、画像ファイルは自由に使えるものをコピーすることにします。 次のように操作してください。

  1. DockのSafariアイコンをクリックし、メニューバーの「ファイル」をクリックし、「新規ウィンドウ」を選択。
  2. アドレスバーに検索エンジンのURL(例えばhttp://www.google.com/)を入力。
  3. 「ホームページ作成」、「フリー素材」などのキーワードで検索。
  4. コピーする画像が見つかったら、自由に使えることを確認し、画像をcontrolキーを押しながらクリックし、「画像を別名で保存」を選択。
  5. 「別名で保存」欄の右の三角ボタンをクリックして詳細表示にする。
  6. ホーム→「WWW-local」とクリック。
  7. 「拡張子を隠す」チェックを無効にする。
  8. 「別名で保存」欄に分かりやすいファイル名(拡張子は変更しない)を入力。
  9. 「保存」をクリック。

12.1.4 画像の埋め込み

画像ファイルが用意できましたら、それをWebページに埋め込みます。

HTMLでは、画像を埋め込むところに、タグ <IMG src=" file " alt=" text "> を書きます(IMaGe, SouRCe, ALTernate)。 ここで、 file はファイル名、 text は代替テキストです。 すると、ブラウザでは、その画像が表示されます。

12.1.5 リンク

リンクの機能、すなわちWebページをクリックして他のページへジャンプすることも、タグを書くことによって実現します。

HTMLでは、リンク元を <A href="file"></A> で囲みます(Anchor, Hyper REFerence)。 ここで、 file はリンク先のファイル名です。 すると、ブラウザでは、下線が付いた青か紫の字で表示されます。 そして、リンク元をクリックしますと、リンク先へジャンプします。

なお、 href 属性の値をURLにしますと、そのURLのページへジャンプします。

例えば、ファイルindex.htmlからcircle.htmlへジャンプするには、index.htmlの中に <A href="circle.html"></A> と書きます。 実際の作業では、circle.htmlを作成してからindex.htmlを作成しますと、うまくいきます。 具体的には、次のように操作します。

  1. DockのJeditアイコンをクリックし、メニューバーの「ファイル」をクリックし、「新規」を選択。
  2. DockのSafariアイコンをクリックし、メニューバーの「ファイル」をクリックし、「新規ウィンドウ」を選択。
  3. アドレスバーに、http://www-local.twcu.ac.jp/ip-edu/comp1/と入力。
  4. テンプレートのページへ移動し、テンプレートをJeditの新規ウィンドウへコピー。
  5. メニューバーの「ファイル」をクリックし、「別名で保存」を選択。
  6. フォルダWWW-localの中にcircle.htmlというファイル名で保存。
  7. Safariのウィンドウをクリック。
  8. アドレスバーに、http://www-local.twcu.ac.jp/~ loginname /circle.htmlと入力。
  9. ファイルcircle.htmlを編集し、Webページを完成させる。
  10. アドレスバーに、http://www-local.twcu.ac.jp/~ loginname /と入力。
  11. ファイルindex.htmlを編集し、Webページを完成させる。
  12. index.htmlからcircle.htmlへジャンプできるかどうかを確認。

12.1.6 Webページ公開の注意事項

ここで、Webページを公開する際の注意点をまとめます。 特に、WWWフォルダにファイルを格納して、世界中に情報を公開するつもりの人は、軽々しく考えないでください。

ファイル名には安全な文字を使う。

公開するHTMLファイルや画像ファイルなどに、漢字のファイル名を付けますと、正常にアクセスできなくなる可能性があります。 ファイル名として安全な文字は、半角の英数字、ハイフン(-)、アンダースコア(_)などです。

いろいろなブラウザで表示を確認する。

世間では、いろいろなブラウザが使われています。 自分の使っているブラウザでは大丈夫でも、他のブラウザでは全然違う表示になることがあります。 どれでも意味が通じるように、できるだけ多くのブラウザで表示を確認しておいてください。

著作権などを侵害しない。

他人が創作したものは、普通は著作権で保護され、勝手に公開すると違法行為になる可能性があります。 新聞記事(テキストデータ)、雑誌の写真(画像データ)、CDの音楽(音声データ)、DVDの映画(動画データ)などを、WWWフォルダに格納しないでください。

営利目的のWebページを開設しない。

大学の施設は、研究・教育を目的として維持・管理されています。 ネット・ビジネスを始めたい人もいるでしょうが、学内では行わないでください。

他人のプライバシーに配慮する。

他人の経済状態、健康状態、思想信条などはプライバシーに当たります。 このような情報を安易に公開しないでください。

自分の個人情報を不用意に公開しない。

自分の住所や電話番号などを公開するのは、トラブルの元です。 また、自分の顔写真を公開することも、慎重になってください。


12.2 演習12

今日の演習は、テキストの演習9.2.3(198ページ)とします。 ファイル名は、例えば、クイズのページはquiz.html, 「正解」ページはcorrect.html, 「残念」ページはsorry.htmlとしてください。

余力のある人は、Webページに適当な画像を埋め込んでください。


12.3 レポート課題

今日の演習12の答案(URL)をメールで提出してください。 メールの送信には学内のコンピュータ(メール・サーバ)を用い、送信先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(7月6日)を明記してください。


12.4 参考文献


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2005年7月6日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2005 Zenjiro Konishi. All rights reserved.