法政大学国際文化学部

情報リテラシーI,II

担当 重定 如彦

2008年 5月 27日

 

第12回 ウェブページ製作(その1)

1.      HTML

IE やFirefoxなどのウェブブラウザで見ることのできるウェブページの大半はHTML(Hyper Text Markup Language)と呼ばれる言語で記述されています。HTMLはタグ(tag)と呼ばれるものを使って文章の論理構造(見出しやタイトルやリンクなどのこと)を記述する言語で、文章だけでなく画像や音声などのマルチメディアデータを記述したり、他のウェブページへのリンクを貼るというハイパーテキストを記述することができます。HTMLで書かれたウェブページの元データのことを、ウェブページのソース(source)と呼びます。

HTML文章を記述するには主に

·           ワープロソフト(ワードなど)で作成した文章をHTML形式で保存する。

·           ホームページビルダと呼ばれる、ウェブページ作成用エディタを使う。

·           テキストエディタ(メモ帳など)を使って直接HTMLを手で入力する。

などの方法があります。この中で、ワードで書いた文章をHTMLデータとして保存した場合は、IEでしか見ることができないウェブページが作成されてしまうため、もし自分で作ったウェブページをいろんな人に見てもらおうと思った場合(世の中にはIE以外のブラウザを使っている人も大勢いるため)にはあまり適していません。また、ワードで作った文章データは正確にHTMLの文章に変換することができない場合がありますので、思ったようなウェブページが作れない場合があります。

ホームページビルダはHTMLのことを特に知らなくてもワープロ感覚でウェブページを作れる便利なアプリケーションですが、HTMLの知識があればその知識を利用しながらより効率よくウェブページを作ることができるようになりますので、授業ではHTMLの仕組みについて説明しながら3番目のテキストエディタ(メモ帳)を使って入力する方法について説明します。HTMLの仕組みを勉強すればHTMLで表現できること、できないことがわかるようになりますので、他人のウェブページのソース(HTMLデータ)を見て参考にしたり、きめ細かい調整をできるといった、応用力を身に付けることができます。

注意:3番目のHTMLを直接入力する場合は、編集ソフトに必ずテキストエディタ(メモ帳やEmEditor)を使って下さい。ワープロを使うと(画面には表示されない文字の色や大きさなどの)余計なデータが入ってしまうためHTML文章を正しく編集できません。

2.      HTMLファイルの閲覧と編集

HTMLデータは例外はありますが、基本的に拡張子が .html (又は.htm)のファイルに保存します。Windowsでは拡張子が .html のファイルは自動的にウェブブラウザに関連付けられ(アイコンがウェブブラウザのアイコンになる)、そのファイルをダブルクリックするとウェブブラウザが起動されその中身を見ることができます。

この為、一旦HTML文章を編集するソフトを終了してしまうと、次からはそのファイルのアイコンをダブルクリックしても(ウェブブラウザが起動してしまうため)テキストエディタを起動できなくなってしまいます。作成したHTMLファイルを再び編集ソフトを使って編集するには、ファイルのアイコンをマウスで選択し、マウスのメニューボタン(右ボタン)を押し、表示されるメニューの中から「プログラムから開く」→「編集ソフト名(メモ帳の場合はNotepad)」を選択します。これ以外にも、メモ帳を実行し、メニューの「ファイル」→「開く」を使って編集したいファイルを開くという方法もあります。

注:今回の授業では、ウェブページのデータを自分のコンピュータのハードディスクの中に保存しているため、今回作ったデータは他のパソコンから見ることはできません。他のパソコンから見ることが出来るようにする方法は後の授業で説明します。

3.      文章データ

HTMLは、タグと呼ばれる文章の論理構造を記述するためのデータと、画面に実際に表示する文章データの2種類のデータによって構成されます。文章データとして入力したデータはそのままウェブブラウザに表示されます。

 


練習:次の作業を行って下さい。

·           メモ帳を実行し、以下の文章を入力する。

○○のホームページへようこそ!  (注:○○には自分の名前を入力して下さい)

·           作成した文章をデスクトップにhomepage.htmlという名前のファイルで保存する。

·           メモ帳を終了して、作成した homepage.html のファイルを実行する。

IEが実行され、画面に ○○のホームページへようこそ! と表示されれば成功です。

 


こうして作成した文章をメモ帳などで編集した場合、その編集結果はすぐにはブラウザには反映されません。編集の結果をブラウザに反映させるには、以下の作業が必要です。

·           メモ帳の文章をメニューの「ファイル」→「上書き保存」で保存する

·           ブラウザ上で「更新」ボタンを押す

 

以後授業ではこの作業を「ブラウザの表示を更新する」と表記します。なお、ブラウザの表示を更新する際にはメモ帳を終了させる必要はありません。メモ帳とブラウザを同時に実行したままで編集作業を行うことが可能です。

HTML文章をウェブブラウザで見た場合とメモ帳で見た場合以下の点が異なります。

·           ブラウザで見た場合はウィンドウの幅にあわせて文章が自動的に改行して表示されるが、メモ帳の場合はエンターキーを押さない限り改行されない。実際にメモ帳とウェブブラウザのウィンドウの幅を狭くして確かめて下さい。

·           逆に、メモ帳で文章を改行しても、ウェブブラウザでは改行されない。
先ほど作成したhomepage.htmlをメモ帳で開き2行目に以下のような文章を付け加え(○○には、自分の学部、学年、氏名を書く)、ブラウザの表示を更新して下さい。ブラウザ上では「ようこそ!」の後で改行されないはずです。

○○のホームページへようこそ!
○○学部 ○年○組 ○○ ○○

·           半角のスペース記号や改行を連続して複数並べてもそれらはまとめて一つの半角スペース記号として扱われる。先ほどの 「○○学部」と「○年○組」の間に半角のスペース記号を10個ほど入力し、ブラウザの表示を更新して下さい。また、1行目の2行目の間に10行ほど改行を行ってからブラウザの表示を更新して下さい。いくら半角のスペース記号や改行を入力してもブラウザ上ではそれらがまとめて一つの半角スペース記号として扱われることを確かめて下さい。

 何故このようになっているかにはいくつか理由がありますが、理由の一つに人によって作成したウェブブラウザを見る環境が異なっていることが挙げられます。例えば、ウェブページを見るときのブラウザのウィンドウのサイズは人によって変わります。ウィンドウを画面いっぱいのサイズにして見る人もいれば、画面にウィンドウを複数ならべて小さなサイズのウィンドウで見る人もいます。また、最近では携帯電話でもウェブページを見ることができますが、携帯電話の場合はさらに小さな画面でウェブページを見ることになります。このため、HTML文章のほうで改行やスペース記号を使って文章のレイアウトを行っても、それを見る側の環境によっては作成者が意図した通りに表示されるとは限りません。従って、HTMLでは改行やスペースなどのレイアウトは文章データでは行わず、ブラウザに任せるという設計になっています。どうしても改行したい場合や空白記号を入れたい場合は次に説明するタグを使って行います。

 他には、HTML文章内で自由に改行や空白を入れることによって、読みやすいHTML文章を記述することができるようになるという利点が得られる(これについては後述します)という理由もあるようです。

 

4.      タグ

文章データは、半角のスペースや、改行に関する扱いが違う点を除けば記述した文章データがそのままウェブブラウザで表示されます。しかし、メモ帳では文字のサイズを変更したり、文字の色を変更することはできませんし、画像や表を書くこともできません。そこで登場するのがタグと呼ばれるものです。タグは半角の < と > でタグの名前(英数字の半角)を囲うことで記述し、文章に対して様々な修飾を行うことができます。例えば改行を行う為のタグは <BR> です。先ほどの文章を以下のように変更し、ブラウザの表示を更新して下さい。なお、繰り返しますが <BR> はすべて半角で記述して下さい。HTML文章を記述した際の最も多いミスの一つがタグのどれかの文字を全角文字で記述したためうまくいかないというものです。なお、タグは大文字と小文字は区別されないので、 <br> と記述するのはかまいません。

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

これで、ブラウザ上で「ようこそ!」の後で文章が改行されます。HTMLを覚えるということは、すなわちこのタグの種類と意味を覚えることだといっても差し支えないでしょう。タグには一般に開始タグと終了タグがあり、開始タグは

 <タグの名前>

終了タグは < の後ろに以下のように半角の / 記号を記述して表現します。

 </タグの名前>

開始タグと終了タグで囲まれた文章データに対してそのタグの修飾が行われます。例えば、<B>というタグは、タグで囲まれた間の文章を強調する(IEでは太字で表示する)という意味を持ちます。メモ帳の内容を以下のように変更してブラウザの表示を更新し、タグで囲まれた部分が太字で表示されることを確認して下さい。

<B>○○</B>のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

タグは基本的に開始タグを記述した後に必ず対応する終了タグを書く必要がありますが、タグの中には終了タグを必要としないものもあります。例えば先ほどの<BR>は改行を行うという意味を持ちましたが、改行には開始と終了という概念はありませんので、</BR>という終了タグは存在しません。

ここまでの例でわかるとおり、HTML文章内に記述されたタグそのものはブラウザ上には表示されません。その代わり、HTMLに記述されたタグが表す意味がブラウザの表示に反映される(例えばBRタグは改行を行う)という仕組みになっています。

5.      HTML、HEAD、TITLE、BODYタグ

·           HTMLタグ
 これまでの例では省略していましたが、HTML文章ではその文章がHTMLで記述されているということを表すHTMLタグを記述することが推奨されています。これを省略しても大抵のウェブブラウザはちゃんと表示してくれるのですが、推奨されていますのでウェブページを書く場合は以下のように最初と最後に灰色の部分をなるべく記述するようにして下さい。なお、下記の例では、HTML文章の見た目をわかりやすくするためにわざと<HTML>の前後で改行をしています。

<HTML>

 

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

 

</HTML>

·           HEADタグ
 HEADタグはヘッダタグと呼ばれ、このタグで囲まれた部分にはウェブブラウザの本体の部分に直接表示しない、HTML文章の情報などを記述します。HEADタグの中に記述するものとしては次に説明するTITLEタグなどがあります。

·           TITLEタグ
 TITLEタグで囲まれた文章データはそのウェブページのタイトルを表し、この部分はウェブブラウザのタイトルバーに表示されたり、ウェブページをお気に入りに登録したときのメニューの項目名に使われます。TITLEタグはHEADタグの中に記述します。灰色の部分を追加し、ウェブページの表示を更新して下さい。
 HTMLではこの例のようにタグの中に別のタグを入れ子にすることができます。入れ子にした場合、内側にあるタグは外側のタグの影響を受け継ぎます。

<HTML>

<HEAD>

<TITLE>○○のホームページ</TITLE>

</HEAD>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

</HTML>

·           BODYタグ
 BODYタグで囲まれた部分が、ウェブブラウザの中に実際に表示される本体(body)のデータです。BODYタグも実は多くのブラウザではHTMLタグのように省略できるのですが、記述することが推奨されていますので以下のようになるべくHEADタグの後に記述するように心がけて下さい。

<HTML>

 

<HEAD>

<TITLE>○○のホームページ</TITLE>

</HEAD>

 

<BODY>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

</BODY>

 

</HTML>

6.      見出しとタグの属性
 H○タグ(○のなかには1〜6までの数字が入る)によって、見出しを記述することができます。<H○>で囲まれた文章データは見出しとして表示され、開始タグと終了タグの前後で自動的に改行されます。見出しは一般に太文字で表示され、数字が小さいほど大きなサイズの文字で表示されます。BODYタグの後に、以下の灰色の部分(これ以降の例ではHTMLタグやHEADタグの部分など、特に変更しない部分は省略します)を記述し、ブラウザの表示を更新して下さい。

 

<H1>○○のホームページ</H1>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

 

タグにはタグの意味を細かく指定するための属性と呼ばれるものを記述することができます。タグの属性は、開始タグの中に以下のような形で記述します。

<タグ名 属性名=“設定値”>


 タグに指定できる属性は、タグの種類によって決まっており、タグによっては複数の属性を書くことができるものもあります。その場合は、それぞれの属性の間に半角のスペースを記述します。見出しタグの場合、見出しの揃えを ALIGN という名前の属性で設定でき、ALIGNには以下の値を設定できます。見出しタグの場合ALIGN属性を記述しなかった場合は、左揃えが設定されたものとみなします。

設定値

意味

LEFT

左揃え

CENTER

中央そろえ

RIGHT

右そろえ

 

 灰色の部分を追加して、ウェブブラウザの表示を更新して下さい。

<H1 ALIGN=“CENTER”>○○のホームページ</H1>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○


又、H1の部分をH2やH3などに変更したり、ALIGNの設定値をRIGHTに変更して、ウェブブラウザの表示を更新して下さい。

注意:<H1>を<H2>などに変更した場合、それに合わせて必ず終了タグの部分も</H1>から</H2>に変更する必要があります。これを怠ると表示がおかしくなってしまいます。このように、終了タグが必要なタグは必ず開始タグと終了タグの記述を対応させる必要がある点に注意して下さい。

7.      箇条書きとインデント

 UL、OL、LIの3つのタグで箇条書きを行うことができます。箇条書きにはWordの箇条書きに相当するULタグ、段落番号に相当するOLタグがあり、それぞれの箇条書きの要素はLIタグの後に記述します。

·           ULタグ
 ULタグは箇条書きの開始と終了を宣言するためのタグです。箇条書きを開始する前に必ず<UL>を記述し、箇条書きが終わるところで</UL>を記述します。

·           LIタグ
 LIタグは箇条書きの要素を記述するためのタグです。LIタグは必ずULタグで囲まれた場所に書く必要があり、LIタグを記述した部分に箇条書きマークが表示されます。また、LIタグを記述すると自動的に改行が行われます。
 以下の灰色の部分を追加し、ブラウザの表示を更新して下さい。

<H1 ALIGN=“CENTER”>○○のホームページ</H1>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

 

<H2>私の趣味</H2>
<UL>

  <LI>テニス</LI>

  <LI>音楽鑑賞</LI>

  <LI>野球観戦</LI>

</UL>

 

·           OLタグ
 OLタグは数字つきの箇条書きの開始と終了を記述するためのタグです。ULタグでは、箇条書きのマークに記号が表示されましたが、OLタグの場合は数字が表示されます。先ほどの例で<UL>と</UL>をそれぞれ<OL>と</OL>に変更し、ブラウザの表示を更新して下さい。

·           HTML文章の改行とインデント
 タグとは関係ないのですが、HTML文章では編集する文章を見やすくするために、ウェブブラウザでの表示には直接関係しない改行や、行頭にスペース記号を頻繁に記述します。例えば、先ほどの例では、<UL>タグや</LI>タグの後で改行を行っていますが、実際にはこの改行やスペースはあってもなくてもウェブブラウザでの表示には全く影響はありません。何故このようなことをするかの理由ですが、これは改行を行わなかった場合と比べてみれば一目瞭然です。例えば改行もスペースも書かなかった場合は以下のようになります。上の改行やスペース記号入りのものと見比べた場合どちらが見やすいか比べてみて下さい。

 

<H2>私の趣味</H2><UL><LI>テニス</LI><LI>音楽鑑賞</LI><LI>野球観戦</LI></UL>

 

ところで、先ほどの例では<LI>の前にスペース記号が入っていますが、これはこの<LI>のタグが、<UL>と</UL>という別のタグの内部にあることを示しています。このように別のタグの内側にある部分を、行頭にスペース記号を記述して内側(右側)に表示することで、タグの入れ子の関係を見た目にわかりやすくすることが可能です。この行頭のスペースのことをインデントと呼びます。

なお、残念ながらメモ帳にはWordのインデント機能に相当する機能はありませんので、このインデントはスペース記号を手で入力する必要があります。

·           箇条書きの入れ子
 箇条書きの中にさらに箇条書きを書くことが出来ます。例えば、灰色の部分を追加して、ウェブブラウザの表示を更新して下さい。


<H2>私の趣味</H2>
<UL>

  <LI>テニス</LI>

  <LI>音楽鑑賞</LI>

  <LI>野球観戦(好きなチーム)

        <UL>

          <LI>マリナーズ</LI>

          <LI>ロッテ</LI>

        </UL>

</LI>

</UL>

 

 この例でもインデントが使われていますがインデントがなければ、


<UL>

<LI>テニス</LI>

<LI>音楽鑑賞</LI>

<LI>野球観戦(好きなチーム)

    <UL>

    <LI>マリナーズ</LI>

    <LI>ロッテ</LI>

    </UL>

</LI>

</UL>

 

 となります。インデントがないほうは、どの<UL>とどの</UL>が対応しているのかなどのタグの対応を理解するのが非常に困難です。インデントのおかげで、どの<UL>とどの</UL>が対応しているかなどがずいぶんわかりやすくなります。このようなインデントや改行はHTML文章以外でも、プログラミングなどで頻繁に使われるテクニックで、HTML文章の間違いを見つけやすくしたり、後からHTML文章を編集しなおす場合に非常に役に立つので積極的に使うことをお勧めします。

8.      改行と罫線

HTML文章では、文章の改行はウェブブラウザのウィンドウの幅によって自動的に行われますが、BRタグを記述することで、その場所で強制的に改行を行うことができます。複数行の改行を行うには、改行の数だけ<BR>を記述します。改行には特に始まりと終わりがありませんので、BRタグには終了タグ(</BR>)はありません。

HRタグを記述することで、罫線(横線)を描くことが出来ます。以下の灰色の部分を追加してウェブページの表示を更新して下さい。

<H1 ALIGN=“CENTER”>○○のホームページ</H1>

<HR>

HRタグには WIDTH と ALIGN という2種類の属性を記述することができます。WIDTHでは罫線の長さを2種類の方法で数字で指定することができます。

WIDTH=“100”

のように直接数字で指定した場合は、長さをドット単位で指定します。一方

WIDTH=“80%”

のように%単位記述した場合は、罫線の長さをウィンドウの横幅の比率で指定することができます。こちらの場合はウィンドウの横幅を広げたり狭くしたりすると罫線の長さも自動的に変更されます。先ほどの<HR>を以下のように変更し、ウェブページの内容を更新して下さい。また、100の部分を80%に変更して更新して下さい。

 <HR WIDTH=“100”>

 ALIGN属性は、見出しタグと全く同じで、罫線の表示位置の揃えを指定します。上記のHRタグを以下のように変更してウェブページの内容を更新して下さい。

 <HR WIDTH=“80%” ALIGN=“CENTER”>

 

 参考:ここまで完成したウェブページのソースは以下のようになります。

<HTML>

<HEAD>

<TITLE>○○のホームページ</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=“CENTER”>○○のホームページ</H1>

       <HR WIDTH=“80%” ALIGN=“CENTER”>

○○のホームページへようこそ!<BR>
○○学部 ○年○組 ○○ ○○

<H2>私の趣味</H2>

<UL>

     <LI>テニス</LI>

     <LI>音楽鑑賞</LI>

     <LI>野球観戦(好きなチーム)

           <UL>

             <LI>マリナーズ</LI>

             <LI>ロッテ</LI>

           </UL>

</LI>

</UL>

</BODY>

</HTML>

9.      タグの意味

タグは(いくつか例外もありますが)文章の論理構造を記述するためのもので、ウェブブラウザで表示したときのレイアウト(文字の大きさや色など)を指定するものではありません。例えばH1というタグはタグで囲まれた部分が「見出し」であるという文章の構造を表しているのであって、その中身を「文字のサイズを○○にして太文字で表示する」という意味でありません。HTMLではそれぞれのタグをどのようなレイアウトで表示するかを特に定めてはおらず、ウェブブラウザの種類によっては全く同じHTML文章でも表示の仕方が若干異なる場合があります。先ほど作ったウェブページをFirefoxで表示して、表示の内容がIEの場合と微妙に違うことを確かめて下さい。他の例としては、携帯電話のウェブブラウザがあります。携帯電話の画面はパソコンのディスプレイと比べて非常に小さいので表示には限界があるため、携帯電話のウェブブラウザはいろんなタグを通常のパソコンのウェブブラウザとは異なった方法で表示するといったことを行います。

タグを覚える際にそれぞれのタグがどのように画面に表示されるかだけを覚えるのではなく、それぞれのタグがどういう意味をもっているのかを覚えてから、それが実際にはそれぞれのブラウザでどのように表示されるかを覚えることをお勧めします。そうすることで、それぞれのタグを正しく使いこなすことができるようになるからです。

10. 今回の授業で出てきたタグと属性の一覧

タグ

意味

終了タグ

属性

備考

HTML

HTML文章の開始と終了

必要

 

 

HEAD

ヘッダの開始と終了

必要

 

 

TITLE

ウェブページのタイトル

必要

 

 

BODY

本体のデータの開始と終了

必要

 

 

H○

見出し

必要

ALIGN

○は1〜6

UL

記号の箇条書き

必要

 

 

OL

数字の箇条書き

必要

 

 

LI

箇条書きの項目

省略可

 

 

BR

改行

無し

 

 

HR

罫線

無し

ALIGN

WIDTH

揃え

幅

 

属性

設定値

意味

ALIGN

LEFT

左揃え

CENTER

中央揃え

RIGHT

右揃え

WIDTH

数字

ドット数で幅を指定

数字%

ウィンドウのサイズの割合で幅を指定

 

11. 今日作ったファイルの保存

今日作ったhomepage.htmlは次回以降の授業で使いますので、各自Gドライブに保存しておいて下さい。なお、今回の授業には課題はありません。

 

 

 

 

出席、課題のメールは ta080017@mail.edu.i.hosei.ac.jp  までお願いします。

質問のメールなどは、 sigesada@hosei.ac.jp までお願いします。

授業の資料の最新版は http://www.edu.i.hosei.ac.jp/~sigesada/ にあります。