ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その1)演習の準備、いきなりHTML


連休前の桜開花観察お疲れ様でした。PowerPointを使った人やWebページを使って資料を作ったり目的は同じでもいろいろな方法がありました。グループごとに自分達の技術にあった作品を作っているようでした。

表現しようとするものは同じでも、自分達のテクニックとのバランスにより見た目はいろいろ変わってくるものです。しかし、テクニックがあっても内容が大したことがない場合もあるし、逆の場合もあります。

内容を一番に考え、それに伴いテクニックを向上させていきたいものです。連休後のゼミではWebページを作っていくわけですが、大事なのはWebページの内容です。最終的にコンテストで発表するページについては自分で考えるようにしてください。

ゼミの時間ではWebページを作るときに必要なテクニックを紹介していきます。取り上げるコンテンツ(Webページの内容)は2006ワールドカップです。

連休明けのゼミの予定は以下の通りです。

060508  Webページ作成(その1)
060515  Webページ作成(その2)
060522  Webページ作成(その3)
060529  Webページ作成(その4)
060605  Webページ作成(その5)
060612  Webページ作成(その6)
060619  Webページ作成(その7)
060626  Webページ作成(その8)
060703  HTMLコンテスト作品準備
060710  HTMLコンテスト作品作成の締め切り(仮)、サーバについて
060717  祝日
060724  みんなで評価、発表

Webページ作成について練習していきますが、7月末の評価に向けコンテスト用の作品を作ってもらいます。つまり、ゼミではテクニックについて実習しますが、その他にコンテスト用の作品を作るためにいろいろアイディアを練っておきましょう。また、空いた時間を使ってWebページを作るようにしてください。

どんなWebページにするのかアィディアを練っていく際には、Windowsのワープロやメモ帳のようなテキストエディタに文章でアイディアを書いていく、あるいは、ノートみたいなものを持ち歩いてそれに気が付いたことをいろいろメモしておくと作品を作るときに役に立つことがあります。

アィデイアがたまったらそれを並べ替えたり、もっとよく調べたりするなどしてWebページの構成を考えていくことになります。

今年度からツールを使用してHTML(HyperText Markup Language)のタグを入力して、Webページを作っていくことにしました。簡単に作ることができるので、自分でどんどん作っていきたくなると思います。そこで次の参考書を紹介します。

HTMLポケットリファレンス、シーズ著、技術評論社

ハンディサイズでオールカラー、しかもHTMLのタグの他にCSSもある程度カバーしています。

それでは、まずHTMLを使ってWebページを作るためのツールを用意してもらいます。ez-HTMLというツールを次のサイトからダウンロードしてHドライブにインストールしてください。

http://www.vector.co.jp/

サイトのWebページが表示されるとキーワードで探すという入力部分があります。ここにez-HTMLと入力して検索ボタンをクリックします。

1件検索結果が表示されるので、このリンク先からダウンロードを行います。ダウンロードはHドライブに行ってください。ダウンロード後、ファイルを解凍します。

もう一つダウンロードするファイルがあります。キーワードで探すという入力部分でSusie plug-in pngと入力して検索ボタンをクリックします。

検索結果のうちSusie32 PNG Plug-in 0.24のリンク先からダウンロードを行ってください。ダウンロードはHドライブに行ってください。ダウンロード後、ファイルを解凍します。解凍後IFPNG.SPIというファイルをez-HTMLのフォルダにコピーしておきます。

どのようにしたらいいのかわからない方がいたら、モニターを使って説明します。

ezhtml.exeをダブルクリックしてezHTMLを起動します。

起動方法がわからない方のためにモニターを使って説明します。

メニューでファイル>新規作成の順にクリックします。

すると、次のようなHTMLのプログラムが自動的に作られます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.
org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<title></title>
</head>
<body>
</body>
</html>

これだけで、Webページが作られますが何も表示されません。

確認してみましょう。モニタを使いながら説明します。まず、このプログラムを保存します。新規に保存する場合、メニューでファイル>名前をつけて保存をクリックします。現れたウィンドウの保存する場所をで保存する場所にHドライブを指定します。

それから、この並びの右側にアイコンが並んでいますが、新しいフォルダの作成のアイコンをクリックして新しいフォルダを作成しておきましょう。新しいフォルダが作られますので、新しく名前をつけてください。

このフォルダが選択された状態で下に開くボタンがあるのでクリックしてください。それからファイル名をindex.htmに変えてから、保存ボタンをクリックして保存します。Webページはファイル名の次に.(ドット)を置いてhtmあるいはhtmlと書きます。これは拡張子と呼ばれ、htmあるいはhtmlを使用した時は一般にWebページとして認識されます。

次にこのプログラムの上にタブが並んでいます。ブラウザタブをクリックしてください。左端にインターネットエクスプローラのアイコンがるのでクリックしてみましょう。

インターネットエクスプローラが起動しますが何も表示されません。実際に何も文書を書いていないので正常な動作です。閉じるボタンをクリックしてインターネットエクスプローラを終了しておきましょう。

ここでページとHTMLの関係を見ていきます。

HTMLとはHyperText Markup Labguageの略です。冒頭のハイパーテキストは文書間の連携をイメージしたものです。マークアップ言語とはタグを利用した言語です。

タグとは<単語></単語>のような一対のラベルです。<単語>で始まったら同じ単語を使って</単語>で終了します。ただし、例外もいくつかあります。また、タグがいくつかある場合には入れ子の状態になるようにタグではさんでいきます。

<単語A>
<単語B>
</単語B>
</単語A>

次のように入れ子でない順番の場合にはデータに対し正常にタグの効果が現れません。

<単語A>
<単語B>
</単語A>
</単語B>

タグではさむのは一般に文章あるいはデータです。タグの単語によりはさまれた文書に対し、効果を与えるようにしてあります。ブラウザでHTMLで書かれたファイルを開くとその効果を確認することができます。さらにタグ中に属性と呼ばれるパラメータを指定して値を設定することで各種の効果を与えることができるようになっています。

ゼミでは、この部分について解説していきます。

さて、今作ったindex.htmのページはこれだけで、Webページとして使えます。いわば骨格のようなのでスケルトンとも呼ばれます。構造上重要な部分について考えるために必要なタグだけ抜き出すと以下のようになります。

<html lang="ja">
<head>
</head>
<body>
</body>
</html>

まず、タグから見ていきます。

・htmlタグではさんだ部分がHTMLのプログラムの記述であることを示しています。
・headタグではさんだ部分はヘッダの情報として扱われ、Webページで表示する部分とは直接関係がありません。ただし、重要な情報を含むことがあります。
・bodyタグではさんだ部分に文章やデータを書いていきます。Webページで表示される部分です。

次にhtmlタグのパラメータを見ていきます。

・パラメータは名前=”値”のように書きます。値は””ではさまなくてもかまいませんが、HTMLの他のバージョンやXMLでエラーとなることがあるので””で囲んで書くようにしましょう。
・langという属性に対し、jaという値を指定することで、Webページを記述する際に日本語を使用することを宣言しています。

残りのタグについて見ていきます。先頭の一行は次のようになっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.
org/TR/html4/loose.dtd">

これはHTMLのバージョンの情報を示すものです。省略してもかまいません。

headタグには次のタグが利用されています。

	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<title></title>

・最初のmetaタグは一対のタグとして使われていない例です。ここではhttpと呼ばれるプロトコルに関する情報が書き込まれています。Webページ作成には直接関係ないので説明は省略します。省略してもかまいません。
・titleタグではさんだ文章はブラウザのウィンドウのタイトルバーの部分に表示されます。

それでは、index.htmを少しずつ書き替えて試してみましょう。

・titleタグではさんだ部分に初めてのページと書きましょう。
・bodyタグではさんだ部分に同じ文章を書いてみましょう。

これを上書き保存してください。さきほどと同じようにしてインターネットエクスプローラで確認してみましょう。タグにより期待した通りの効果が現れているでしょうか。

インターネットエクスプローラのウィンドウのタイトルバーの部分とブラウザのクライアント領域(Webページが通常表示される部分)に初めてのページと表示されたことと思います。

それでは、下のリンクを右クリックしてファイル2006kyouzai.lzhをダウンロードしてください。ダウンロードしたら解凍しておきます。フォルダ中にあるファイルkunimei.txtには2006年ワールドカップ参加国のリストがグループ別に並んで書かれています。

2006kyouzai.lzh

ダウンロードしたら、テキストエディタで開いてください。

さっそくindex.htmに取り込んでみましょう。次の順に作業を進めてみましょう。

・titleタグではさんだ部分を2006年ワールドカップに書き替えます。
・bodyタグではさんだ部分に同じ文章を書き、その下にkunimei.txtの内容をコピーして貼り付けます。

上書き保存してから、さきほどと同じようにしてインターネットエクスプローラで確認してみましょう。

ところが期待通りに表示されていないことと思います。bodyタグではさんだ部分では改行キーできれいに一行ごとにデータが入っています。しかし、ブラウザで表示されると、その効果は現れていません。

これは、改行もデータとして扱われているためで、ブラウザで改行としての効果を表すにはやはりタグを使用する必要があります。

・改行にはbrタグを使用します。
のように書き、文章の最後において改行の効果を与えます。対のタグとして利用されない例です。

ezHTMLでは文書形式タブをクリックするとBRというアイコンがあるので、これをクリックすると簡単にbrタグを挿入することができます。

<参考>編集のもとに戻すという項目をクリックすることで、一つ前の状態に戻ることができます。

練習1.もとのデータと同じように表示できるようにbrタグを挿入してください。

もう少しタグの練習をしてみましょう。

・bodyタグではさんだ部分の2006年ワールドカップをドラッグして選択します。
・標準タブをクリックすると左から二つ目からB、I、Uと並んでいます。まず、Bをクリックしてみましょう。bタグで2006年ワールドカップがはさまれます。
・保存してブラウザで確認してみましょう。2006年ワールドカップの文章が太字で表示されます。
・編集のもとに戻すという項目をクリックして一つ前の状態に戻します。
・2006年ワールドカップをドラッグして選択します。
・同様にしてI(iタグでイタリック体で表示)、U(uタグで下線の効果)について試してみましょう。

練習2.文書構造のところで棒グラフとH1などのように描かれたボタンがあります。hタグで見出しの効果を与える時に用いられます。hの次の数字は1から6まであって1を指定すると一番大きなサイズで表示されます。hタグは共通の大きさで文字の大きさを指定できます。bodyタグではさんだ部分の2006年ワールドカップにこのタグを試してみなさい。