戻る HTML (Hyper Text Markup Language)


HTML は、 ウェブページを記述するための言語です。

ウェブページでテキストや図を表示したり、 リンクを設定するために使用される言語を HTML、 HTML で記述されたページを表示するための総合的なシステムを WWW、 パソコン等で WWW のウェブページを閲覧するためのソフトウェアをブラウザといいます。 ウェブページでは、 文字を表示するだけではなく、 イラストや写真、動画を表示したり、 音楽を再生することもできます。


しかし、 ウェブページのいちばんの特徴は、 なんといっても 「リンク」 です。
ページ内に設けられているリンクをクリックすると、 新しいページが表示されます。 世界中どの国のウェブページでも、 自由に見ることができます。
世界中の 9 億台のコンピュータがインターネットという巨大なネットワークに接続されていて、 無数のウェブページをマウスをクリックするだけで自在に見ることができる…。 まるでドラえもんのポケットです。


"ちひろ" のホームページ。 クラリネット ピッコロとぷう太 食べ物 映画 ちひろのホームページ 左図はウェブページの例です。

(図をクリックすると 「"ちひろ" のホームページ」 が表示されます。 左図下部にある 4 つのリンクボタンをクリックすると、 それぞれのページが表示されます。 このページに戻るには、 ブラウザの "戻る" ボタンで戻って下さい。)

ウェブページで図を表示したり リンクを設定するには、 タグ (tag) を使います。
タグは "<" と ">" に囲まれて記述されている情報で、 たとえば

   <a href="index.html">ちひろのホームページ</a>

と書くと、 <a href="index.html"> と </a> で挟まれた文字が ちひろのホームページ という風に表示されて、 これをクリックするとそのページにジャンプできるようになります。 "index.html" は、 これがクリックされたときに表示させるページのファイル名 または URL です。

文字や写真を中心に揃えて表示させるには

   <center>"ちひろ" のホームページ。</center>

とすれば中心に表示されます。

これらの例のように、 一般的には <タグ> で始まり </タグ> で終わりますが、 図や写真を表示する <img> タグのように、 おしまいのタグがないものもあります。

   <img src="photo.jpg">

と書けば、 "photo.jpg" というファイル名で保存されている写真が表示されます。




以下は上図のウェブページ、 「"ちひろ" のホームページ。」 の HTML ファイルです。
青色で表示されているタグをクリックすれば、 その説明が表示されます。

HTML HEAD META TITLE /TITLE /HEAD BODY CENTER P FONT IMG BR BR B IMG BR BR BR BR BR /FONT BR FONT I B /B /I /FONT /P TABLE TR TD A IMG /A /TD TD A IMG /A /TD TD /TD /TR TR TD /TD TD A IMG /A /TD TD A IMG /A /TD /TR /TABLE /CENTER BR P A /A /P /BODY /HTML
ちひろのホームページ



クラリネット 左図は 「"ちひろ" のホームページ。」 の中の、 「クラリネット」 です。

このページの下の方では、 写真の左側に文字を入れるために <table> タグを利用しています。 本来は 「表」 を作るためのものですが、 罫線を表示しない表の中に写真を入れるなどして、 レイアウトに利用されることが少なくありません。
他には、

   <img src="photo.jpg" align="right">

とするような方法もあります。
やはり写真が右、 文字が左に表示されます。

また、 中心を揃えて表示させるために、 ここでは <p align="center"> としてあります。

上図、 「クラリネット」 の HTML ファイルです。
同様に、 青色で表示されているタグは説明が表示されます。

HTML HEAD META TITLE /TITLE /HEAD BODY P B FONT /FONT /B BR BR BR BR BR BR BR BR BR BR IMG BR BR /P P BR BR BR BR /P CENTER TABLE TR TD BR BR BR BR BR BR BR BR /TD TD IMG /TD /TR /TABLE /CENTER P BR A /A /P /BODY /HTML クラリネット



関連事項:  タグ  タグ (色の指定) 


情報処理概論 に戻る  用語解説 に戻る  戻る 

自由利用マーク
update: 2012.12.10  address