Webページは「HTML」(Hyper
Text Markup
Language)という、あるルール(最新ではHTML4.0)に従ったスクリプト(文字列)で記載され、スクリプト内で他のHTMLスクリプトや、イメージ、サウンド、ファイル等へのリンクを容易に行うことができます。
インターネットのWebページで、リンクをたどって次から次のページへと渡り歩くことができるのは、このHTMLのおかげです。
では、Webページを構成するHTMLスクリプトってどのように書かれているでしょうか?ちょっとした実習をしてみたいと思います。
まず、メモ帳やワープロソフトで、下の枠内の内容を入力して、『test.html』というファイル名で保存してみましょう。
|
や |
|
といったアイコンで表示されるはずです。 |
<HTML>
<HEAD>
<TITLE>HTMLテスト</TITLE>
</HEAD>
<BODY>
<H1>こんにちは</H1>
<HR>
これはHTMLテストです
</BODY>
</HTML>
|
次に、保存した『test.html』をダブルクリックしてみてください。インターネットエクスプローラやネットスケープナビゲータといったブラウザアプリケーションが立ち上がり、下のような表示を行うはずです。
枠内の文字列は、Webページのソース(源)です。<×××>・・・・</×××>という形で記載された記号はHTMLタグと呼ばれるもので、このタグにいろいろな機能があり、これらを組み合わせることでWebページはできています。
例外的ないくつかのタグ(上記例では<HR>)を除いて、タグは開くタグ(< >)と閉じるタグ(</ >)で1セットとなります。例えばタイトルを表すタグでは、
<TITLE>HTMLテスト</TITLE>と記載します。
今度は『test.html』に文字修飾、イメージ、表、ハイパーリンクを追加してみましょう。
主な文字修飾タグとして、以下のようなタグがあります。
| <B>・・・</B> |
太字(ボールド) |
| <I>・・・</I> |
斜字(イタリック) |
| <U>・・・</U> |
下線(アンダーライン) |
| <FONT>・・・</FONT> |
フォントサイズ、色などを指定
指定は<FONT SIZE=5 COLOR="#FF0000">
という形で行う。 |
また、イメージの貼り付けには<IMG>タグを用います。
ここでは、『 http://www.e-nakanoku.com/img/mark.jpg 』というアドレスに置かれている「ハート商品券」マークを貼り付けてみましょう。 この場合、タグは
<IMG SRC="http://www.e-nakanoku.com/img/mark.jpg">と記載します。
次に作表ですが、作表で主に使われるタグには以下のようなものがあります。
| <TABLE>・・・</TABLE> |
一つの表(テーブル)を定義 |
| <TR>・・・</TR> |
テーブルの行の開始/終了を定義 |
| <TD>・・・</TD> |
テーブルのデータセルを定義 |
ということでテーブル部分についてだけのHTMLスクリプトのサンプルを書いてみたいと思います。
<TABLE BORDER=5>
<TR>
<TD>あいうえお</TD><TD>かきくけこ</TD><TD>さしすせそ</TD>
</TR>
<TR>
<TD>たちつてと</TD><TD>なにぬねの</TD><TD>はひふへほ</TD>
</TR>
<TR>
<TD>まみむめも</TD><TD>やいゆえよ</TD><TD>らりるれろ</TD>
</TR>
</TABLE>
|
このHTMLスクリプトを実行すると、ブラウザ上では下のように表示されます。
| あいうえお | かきくけこ | さしすせそ |
| たちつてと | なにぬねの | はひふへほ |
| まみむめも | やいゆえよ | らりるれろ |
ということで、これらのタグを組み合わせて、以下のようなHTMLソースを書いてみました。Webページとしてはどのような形で表示されるでしょうか?
<HTML>
<HEAD>
<TITLE>HTMLテスト2</TITLE>
</HEAD>
<BODY>
<H1>こんにちは</H1>
<HR>
<FONT SIZE="5" COLOR="#FF0000">これはHTMLテストです</FONT><BR>
太字の表示は<B>このようになります。</B><BR>
斜字の表示は<I>このようになります。</I><BR>
下線の表示は<U>このようになります。</U><BR>
<IMG SRC="http://www.e-nakanoku.com/img/mark.jpg">イメージ表示です。<BR>
<TABLE BORDER=5>
<TR>
<TD>咲いた</TD><TD>咲いた</TD><TD>チューリップの花が</TD>
</TR>
<TR>
<TD>並んだ</TD><TD>並んだ</TD><TD>あか・しろ・きいろ</TD>
</TR>
<TR>
<TD>どの花見ても</TD><TD>きれいだな</TD><TD>(おしまい)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
このHTMLソースをブラウザで表示させるとこんな感じで表示されます。(↓)
ここでは、インターネットエクスプローラを例に説明しましたが、ネットスケープナビゲータでもこのレベルのソースであればほぼ同じように表示されるはずです。
ただし、もっと複雑なページになってくると、二つのブラウザのタグの解釈の違いにより、異なったイメージとなってしまうこともあります。
HTMLについて、ここで説明したことはほんのさわりの部分です。ご自分のWebページを作ってみようと思われる方は、やはりマニュアル本やWebページ作成アプリケーションなどを入手して、いろいろと試してみることが大事だと思います。
インターネット上のお助けWebページとしては、「とほほのWWW入門」をお勧めします。(私も愛用させてもらっています。)このページは、マニュアル本よりも内容が充実しており、こまめに更新されていること、そしてなによりもうれしいのは、コンテンツを丸ごとダウンロードさせてくれるしくみが作ってあることです。
丸ごとダウンロードして、いつでも参照できるようデスクトップにショートカットを置いておけば、マニュアル本なんかよりよっぽど便利かも知れません!!
|