目次 | 索引 |
---|---|
最初に、前回作成した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)。
すると、ブラウザでは、上下に余白が設けられ、用語は字下げされずに、説明は字下げされて表示されます。
Webページには、文字だけでなく、画像を埋め込むこともできます。 画像を埋め込むには、まず、画像ファイルを用意します。 パソコンでは様々な画像形式が利用されていますが、Webページに埋め込めるのは以下のものだけです。 他の画像形式については、適当なツール(例えば、「プレビュー」で開いて「ファイル」→「書き出し」)で変換しておきます。
画像形式 | 読み方 | 用途 | 拡張子 |
---|---|---|---|
GIF | ジフ | イラスト(数色) | .gif |
JPEG | ジェーペグ | 写真(数千色) | .jpeg, .jpg |
PNG | ピング | GIFの代替 | .png |
ここでは、画像ファイルは自由に使えるものをコピーすることにします。 次のように操作してください。
画像ファイルが用意できましたら、それをWebページに埋め込みます。
HTMLでは、画像を埋め込むところに、タグ
<IMG src="
file
" alt="
text
">
を書きます(IMaGe, SouRCe, ALTernate)。
ここで、
file
はファイル名、
text
は代替テキストです。
すると、ブラウザでは、その画像が表示されます。
リンクの機能、すなわち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を作成しますと、うまくいきます。
具体的には、次のように操作します。
ここで、Webページを公開する際の注意点をまとめます。 特に、WWWフォルダにファイルを格納して、世界中に情報を公開するつもりの人は、軽々しく考えないでください。
ファイル名には安全な文字を使う。
公開するHTMLファイルや画像ファイルなどに、漢字のファイル名を付けますと、正常にアクセスできなくなる可能性があります。 ファイル名として安全な文字は、半角の英数字、ハイフン(-)、アンダースコア(_)などです。
いろいろなブラウザで表示を確認する。
世間では、いろいろなブラウザが使われています。 自分の使っているブラウザでは大丈夫でも、他のブラウザでは全然違う表示になることがあります。 どれでも意味が通じるように、できるだけ多くのブラウザで表示を確認しておいてください。
著作権などを侵害しない。
他人が創作したものは、普通は著作権で保護され、勝手に公開すると違法行為になる可能性があります。 新聞記事(テキストデータ)、雑誌の写真(画像データ)、CDの音楽(音声データ)、DVDの映画(動画データ)などを、WWWフォルダに格納しないでください。
営利目的のWebページを開設しない。
大学の施設は、研究・教育を目的として維持・管理されています。 ネット・ビジネスを始めたい人もいるでしょうが、学内では行わないでください。
他人のプライバシーに配慮する。
他人の経済状態、健康状態、思想信条などはプライバシーに当たります。 このような情報を安易に公開しないでください。
自分の個人情報を不用意に公開しない。
自分の住所や電話番号などを公開するのは、トラブルの元です。 また、自分の顔写真を公開することも、慎重になってください。
今日の演習は、テキストの演習9.2.3(198ページ)とします。 ファイル名は、例えば、クイズのページはquiz.html, 「正解」ページはcorrect.html, 「残念」ページはsorry.htmlとしてください。
余力のある人は、Webページに適当な画像を埋め込んでください。
今日の演習12の答案(URL)をメールで提出してください。 メールの送信には学内のコンピュータ(メール・サーバ)を用い、送信先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(7月6日)を明記してください。