WWWによる情報発信


A.HTML文法の基本の基本

「ワープロみたいなものなのですが,ふつうのワープロとは2点だけちがうと思ってください。ひとつは、HTML は構造を明示的に指定する必要があるということです。ですから、たとえば、2行空白を入れたいからといて、ファイルの中でリターンを2回入れておいても、 ブラウザは無視してまうということです。改行ならば改行というマークを印を入れる必要があるし、箇条書きで項目を列挙するときも、そう指定すれば、字下げ をしたり、項目の頭に適当な記号や数字を入れてくれたりするのです。 もうひとつは、何といってもリンクです。ある文字列をクリックと別のHTML文書な どに移ることを指定することができることが、ハイパーメディアたるゆえんですからね。これは、URLで指定すればいいのです。」


Webページ作成のための準備

HTMLファイルの作成

実習1:
(Windowsの場合)[スタート]→[プログラム]→[アクセサリ]→[メモ帳]とたどっていきエディタを起動します。作成したファイルは保存 時に[ファイル名.html]とします。

基本的な形式

<html>
<head>
<title>Title of this page</title>
</head>
<body>
この部分がウィンドウに表示される本体です。
</body>
</html>

 実 習2:
上記のタグを使って下図のページを作ってみましょう。今回はファイル名をmainとしmain.htmlと いう名前で保存します。保存したHTMLファイルはブラウザで開くことができます。
また,保存したファイルは(保存先がpublic_htmlになっていれば)http://hot1/~ユーザ名/ファイル名.htmlというアドレスを ブラ ウザに打ち込むと(WS室内部では)見れるようになっていますので実際に確認してみましょう。

テキストのフォーマット

実 習3:
上記のタグを利用して下図の内容をmain.htmlに加えましょう。さらに自分の好きな色(単純でない色)のカラーコードを調べて内容に追加してくださ い。

背景色,文字色の指定


ページのレイアウト

実 習4:
上記のタグを使って下図の内容をmain.htmlに加えましょう。

データの列挙

実 習5:
リストのタグは他にもあります。番号つきのリストタグと定義(記述)型リストタグを自分で調べてmain.htmlに書き加えてください。また,リストを 入れ子構造にして(下図)うまくいくか試してみましょう。

ページをリンクさせる

実 習6:
上記のタグを使って下図の内容(情報文化学部HPにリンクを張る)をmain.htmlに加えましょう。



また,リンクをクリックするとリンク先が表示されることも確かめましょう。

実 習7:
さらに上記のタグを使って自分自身のページ内の指定部分,自分で作った別のページの指定部分, 自分で作ったページの冒頭部分,他人の作ったページの指定部分にリンクを張りましょう。(指定部分に飛ぶためにはリン ク先のページ内にアンカー(目印)を 作っておかなければいけません。その方法をまず調べてから実習7をやってください。)



画像の表示

実 習8:
上記のタグを使って下図の内容をmain.htmlに加えましょう。



表をつくる

実習9:
上記のタグを使って下図のような表を作り,それをmain.htmlに加えましょう。



実習10:
表には様々な発展形式があります。たとえば,ここなどで面白い使い 方を調べ,実際に3つ表を作ってmain.htmlに書き加えてください。

フレームについて

実 習11:
フレームを利用して(index.html)これまでの実習で作ったmain.htmlを右枠に指定し,左枠には自分の学籍番号,名前,メールアドレスを 書いたページ(name.html)を指定したものを作ってみ ましょう。


実 習12:
表と同じくフレームにも様々な種類があります。それを自分で調べ,実習11で作ったフレームの構造を変えてみましょう。


指令

1.以下のページの素材などを利用して練習のために簡単な自己紹介のページを作る(ファイル名はkadai1.htmlとし,main.htmlからリンクを張ること)。今回学んだ内容をできるだけ多く 含むようなページに仕上げること。さらに、ページ内に自分にとって今回の授業の程度はどうだったか(難しかった,ちょうどよいなど)と,そう思う理由を具体的に(フレームのタグの意味がわからなかったから,HTMLは以前やったことがあるので内容は理解しているからなど)200字程度書く.件名はreport6で.

http://homepage2.nifty.com/ColorfulLovers/
http://www.yasuragian.com/"