WWWによる情報発信
A.HTML文法の基本の基本
「ワープロみたいなものなのですが,ふつうのワープロとは2点だけちがうと思ってください。ひとつは、HTML
は構造を明示的に指定する必要があるということです。ですから、たとえば、2行空白を入れたいからといて、ファイルの中でリターンを2回入れておいても、
ブラウザは無視してまうということです。改行ならば改行というマークを印を入れる必要があるし、箇条書きで項目を列挙するときも、そう指定すれば、字下げ
をしたり、項目の頭に適当な記号や数字を入れてくれたりするのです。 もうひとつは、何といってもリンクです。ある文字列をクリックと別のHTML文書な
どに移ることを指定することができることが、ハイパーメディアたるゆえんですからね。これは、URLで指定すればいいのです。」
Webページ作成のための準備
- まず,HTMLファイルを置くフォルダを作成します。Zドライブにpublic_htmlというフォルダを作ります。今から作成していく
HTML
ファイルはこの中に置くことにします。
HTMLファイルの作成
- HTMLは一般にテキストエディタを使って作成・編集します。
実習1:
(Windowsの場合)[スタート]→[プログラム]→[アクセサリ]→[メモ帳]とたどっていきエディタを起動します。作成したファイルは保存
時に[ファイル名.html]とします。
基本的な形式
- HTMLはタグと呼ばれる命令で構成されています。その最も基本となる形式は以下の通りです。
<html>
<head>
<title>Title of this page</title>
</head>
<body>
この部分がウィンドウに表示される本体です。
</body>
</html>
実
習2:
上記のタグを使って下図のページを作ってみましょう。今回はファイル名をmainとしmain.htmlと
いう名前で保存します。保存したHTMLファイルはブラウザで開くことができます。
また,保存したファイルは(保存先がpublic_htmlになっていれば)http://hot1/~ユーザ名/ファイル名.htmlというアドレスを
ブラ
ウザに打ち込むと(WS室内部では)見れるようになっていますので実際に確認してみましょう。
テキストのフォーマット
- 表示される文字の大きさや色を変えてみましょう。
- <b>...</b>
- 太字
- <i>...</i>
- イタリック
- <u>...</u>
- 下線
- <var>...</var>
- 変数名
- <tt>...</tt>
- タイプライタフォント
- <kbd>...</kbd>
- キーボードからの入力表示用フォント
- <code>...</code>
ソースコード表示用フォント
- <em>...</em>
- 強調フォント
- <strong>...</strong>
- さらに強い強調
- <!-- comment -->
- (コメント)
また,<font size="3"
color="色">と</font>の間に文字を書くことでフォントの大きさや色を変えることができます。
実
習3:
上記のタグを利用して下図の内容をmain.htmlに加えましょう。さらに自分の好きな色(単純でない色)のカラーコードを調べて内容に追加してくださ
い。
背景色,文字色の指定
- BODYタグを使ってテキストの色,背景色,LINKの色を指定することができます。
色はRGBまたは名前で指定します。
- <BODY TEXT="#333333" LINK="#005AFF" VLINK="#007CFF"
ALINK="#00FF00" BGCOLOR="#FAFAFA">
引数の内容は以下の通りです。
text =#rrggbb or colorname テキストの色
link =#rrggbb or colorname リンクの色
vlink =#rrggbb or colorname アクセス済みのリンク色
alink =#rrggbb or colorname アクセス中のリンクの色
bgcolor =#rrggbb or colorname 背景色の色
ページのレイアウト
- ページのレイアウトに関するタグには以下のようなものがあります。
- <p>...</p>
- パラグラフ(</p>は省略可)
- <p align=type>...</p>
- 行揃え指定(type=left,center,right)付きパラグラフ
- <br>
- 改行
- <hr>
- 横線
-
- <hr attribute>
- 属性指定(type=left,center,right, size=n, width=n)付き横線
-
- <hn>...</hn>
-
見出し(n=1)
-
見出し(n=2)
-
見出し(n=3)
-
見出し(n=4)
-
見出し(n=5)
-
見出し(n=6)
- <hn align=type>...<hn>
- 行揃え指定(align=left,center,right)付き見出し(n=1,..,6)
見出し(align=right n=3)
- <pre>...</pre>
- そのフォーマットのまま表示
学年 優 良 可 不可
1 16 14 9 1
2 20 12 5 3
- <pre width=n>...</pre>
- そのフォーマットのまま表示(幅指定n)
- <center>...</center>
- 文字の中央揃え
実
習4:
上記のタグを使って下図の内容をmain.htmlに加えましょう。
データの列挙
- データをリストさせる方法を学びましょう。
- 非順序(マーク付き)リスト
- <ul>
<li>Hot
<li>Warm
<li>Cold
</ul>
実
習5:
リストのタグは他にもあります。番号つきのリストタグと定義(記述)型リストタグを自分で調べてmain.htmlに書き加えてください。また,リストを
入れ子構造にして(下図)うまくいくか試してみましょう。
ページをリンクさせる
- リンクとは複数のリソースを関連付けることです。リンクするためには以下のタグを埋め込みます。
<a href="URL">...</a>
<a href="URL#label">...</a>
<a href="#label">...</a>
<a name="label">...</a>
<a href="mailto:address">...<a>
実
習6:
上記のタグを使って下図の内容(情報文化学部HPにリンクを張る)をmain.htmlに加えましょう。
また,リンクをクリックするとリンク先が表示されることも確かめましょう。
実
習7:
さらに上記のタグを使って自分自身のページ内の指定部分,自分で作った別のページの指定部分,
自分で作ったページの冒頭部分,他人の作ったページの指定部分にリンクを張りましょう。(指定部分に飛ぶためにはリン
ク先のページ内にアンカー(目印)を
作っておかなければいけません。その方法をまず調べてから実習7をやってください。)
画像の表示
- ページ内に画像を貼り付けることもできます。 そのタグを以下に示します。
- <img src="filename" alt="words">
- filenameで指定されるイメージを表示
- altはブラウザがイメージを非表示にしている時に表示される文字列
また,<img src="filename" width="350"
height="250">のように表示される画像の大きさを指定することもできます。
実
習8:
上記のタグを使って下図の内容をmain.htmlに加えましょう。
表をつくる
- ページ内に表を入れることもできます。 そのタグを以下に示します。
基本的なテーブルの作り方: - <table >
- <tr >
- <td >
- </td >
- </tr >
- </table >
これで以下のような表を作ることができます。(わかりやすくするために、枠を表示してテーブルのサイズはかえてありま
す。)
表の要素を増やすには:
- <table border = 2 height = 200 width = 200 >
- <tr>
- <td>1行1列</td><td>1行2列</td><td>1行3列
</td>
- </tr>
- <tr>
- <td>2行1列</td><td>2行2列</td><td>2行3列
</td>
- </tr>
- <tr>
- <td>3行1列</td><td>3行2列</td><td>3行3列
</td>
- </tr>
- </table>
- borderで枠線の太さを、width heightで表の大きさを指定しています。
1行1列 |
1行2列 |
1行3列 |
2行1列 |
2行2列 |
2行3列 |
3行1列 |
3行2列 |
3行3列 |
つまり、<tr>が行を<td>が列を作っているわけです。<tr>と</tr>の間に、<
td>と</td>で列を作っていきます。
テーブルはまだまだ他に色々細かい指定ができます。(例えば、大きさを指定したり、枠線の太さを指定したり、セルを結合さ
せたりetc)
HTMLこれだけでどうだ!?などを参考にしてみましょう。
実習9:
上記のタグを使って下図のような表を作り,それをmain.htmlに加えましょう。
実習10:
表には様々な発展形式があります。たとえば,ここなどで面白い使い
方を調べ,実際に3つ表を作ってmain.htmlに書き加えてください。
フレームについて
- フレームとは複数のページを1つのページで設定した枠内で表示するものです。目次などは他のページに移動したときも変わらずに表示されている
と便利です。フレームはそのような目的で利用されます。フレームに関するタグは以下の通りです。
- 上下方向にフレーム分割
- Index: ファイル名・・・TopPage1.html
- <html>
<head>
<title>FrameView</title>
</head>
<frameset rows="20%,80%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</html>
- Frame: ファイル名・・・Frame.html
- <html>
<head>
<title>Frame</title>
</head>
<body>
<P align="center">Frame<BR>
<BR>
Main-<A href="Main-A.html" target="Main">A</A>
Main-<A href="Main-B.html" target="Main">B</A>
Main-<A href="Main-C.html" target="Main">C</A>
<BR>
<BR>
<A href="../html.html" target="_parent">Return</A></P>
</body>
</html>
- Main:
ファイル名・・・Main-A.html,Main-B.html.Main-C.html
- <html>
<head>
<title>MAIN-A</title>
</head>
<body bgcolor="#ff0000">
<P align="center"><BR>Main-A</P>
</body>
</html>
AをBやCに置き換えてそれぞれのファイルを作成
それぞれのファイルについて説明します。まず,TopPage1.htmlというファイルはフレームの枠組みを決めるもので分割の割合やフレームの中で表
示するファイル名を指定します。次に,Frame.htmlですがここではフレームの上部に表示されMain-A,B,CとReturnにリンクを張るも
のです。最後に,Main-A.html,-B.html,-C.htmlはFrame.htmlからリンクをクリックすることで画面の中央から下部にか
けてそれぞれ表示されます。
ここをクリックすると,フレームを
利用したページが見れます。
次に左右方向にフレーム分割したい場合はTopPageを以下のように変更します。Frame,Mainについては上記と同様です。 - Index: ファイル名・・・TopPage2.html
- <html>
<head>
<title>FrameView2</title>
</head>
<frameset cols="15%,85%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</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/"