基礎からわかる!パソコン入門・再入門 / 無料パソコン教室・基礎知識・Word・Excel・PowerPoint

ウェブページの仕組み(1) ~ HTMLとは ~

ンターネットの要素の中には、電子メールやFTPもありますが、やはりインターネットと言えば「ウェブサイト(ウェブページ)」が代名詞です。

WWWとは で解説のとおり、WWWというリンクでページが結ばれたドキュメントシステムによってウェブページは全世界で爆発的に普及しました。

ウェブページは、写真やイラストなどの静止画像はもちろん、動画や音楽を扱うこともでき、今やマルチメディアとしての地位を確立しています。

したがって、様々な企業や個人がウェブサイトによって情報を発信したり宣伝や販売を行い、ウェブが情報発信やビジネスの中心になりつつあるといっても過言ではありません。

また、現在ではウェブサイトを作成するためのアプリケーションソフトを持たなくとも、個人で簡単にブログを作成し、情報を発信することができるようになりました。ブログについては後述します。

その他、携帯電話に代表するモバイル環境からもウェブページやブログは閲覧、編集が可能となり、インターネットがかなり身近に浸透しています。

今や、誰でも「作家」や「クリエーター」になることができて、小説や映像、音楽といったコンテンツを簡単に発信することができる社会になったのです。それゆえに、思いがけず有名になったり批難されたり、社会的問題や犯罪などが起こっていますが、この流れは留まることはないでしょう。

このようにウェブの世界は巨大で、また日々進歩し、新しい技術やサービスが生まれています。取り残されてしまわないように、インターネットの膨大な情報の中からアンテナを立てて情報収集しなければなりませんが、そんなサービス(RSSなど)も実はもう存在するのです。

しかし、恐れることはありません。基礎をしっかり身につけておけば応用は効くものです。これからしっかりウェブページの基本を学習していきましょう。

さて、このウェブページを構成する大もとは、以外にもシンプルなテキスト情報(文字だけの情報)なのです。

当然、画像や音楽、動画といったコンテンツはそのテキスト情報に埋め込むことはできないので、それらのファイルを個別に用意してリンクさせる必要があります。

しかし、それらのファイルを統括してグラフィカルなページを構成しているのは、

HTMLファイル(エイチティーエムエル ファイル)

と呼ばれるファイルです。HTMLは「HyperText Markup Language」の略で、コンピュータ言語の一種になります。ハイパーテキストとは、WWWとは で解説のとおり、ハイパーリンクを埋め込めるドキュメントのことです。拡張子は「.html(.htm)」で、HTML言語で記述されたテキストファイルがHTMLファイルになります。

文字のみのテキストファイルなので、Windowsの「メモ帳」などのテキストエディタ(テキストのみのファイルを作成・編集するソフト)で見ることができます。(ファイルについては、ファイル管理 を、拡張子については、拡張子 を参照してください)

「見る」といっても、Internet Explorerなどのブラウザで見ているようなウェブページを見るのではなく、それを構成しているテキストを見るということです。

下図は、テスト的に作成した簡単なウェブページと、その下が、そのウェブページを「メモ帳」で開いたものです。

簡単なウェブページのイメージ

ウェブページを「メモ帳」で開いたイメージ

このようにウェブページは、ブラウザで見える本文以外にも、実際の記述には多くの文字が隠れているのです。このHTML言語で記述された「HTMLドキュメント(ファイル)」を、Internet Explorerなどのブラウザで読み取るとウェブページとなり、メモ帳などのテキストエディタで読み取ると、実際の記述内容を確認することができます。

HTMLの記述方法は、「タグ」と呼ばれるマークを記述する

ため、「マークアップ言語」と呼ばれます。通常のテキストファイルに、段落などの文書構造の情報、文字サイズや色などの修飾情報、レイアウトなどの情報を追加してブラウザに表示させたり、画像や他のページへのリンクを埋め込むことができます。

タグは、上図のように、<英単語>のように記述され、このタグによって、ただのテキストファイルをダイナミックなウェブページとして表示することができるのです。

このように、文書にタグを付けることを「マークアップ」と言います。HTMLが「マークアップ言語」と呼ばれるのはこのためです。

つまり、タグはブラウザに対する命令のようなものです。ブラウザはHTMLファイルを表示する時はタグの命令どおりに表示します。

例えば、上図にもあるとおり、<center>と記述すれば、ブラウザは「中央揃え」と解釈してそのとおり、<center>から</center>のタグの間の文字列を中央揃えにします。(上図では、すべての文字が中央揃え)このタグの部分はブラウザの画面には表示されません。

このように、タグはほとんどの場合、開始タグと終了タグで囲みます。開始タグのタグ名にスラッシュ「/」をつけたものが終了タグです。HTMLは英単語がベースなので、初心者でもなんとなく意味が理解でき、習得しやすい言語です。

ただ、ウェブサイトやブログを作成してみたいと思う方は、このHTML言語をすべて覚えなければならないのではという不安を持たれるかもしれません。

しかし、そんな心配はいりません。専用のアプリケーションソフトを使えば、HTMLを知らなくてもウェブページはワープロ感覚で簡単に作成することができます。ブログもインターネット上から簡単に作成、更新ができます。

ウェブページを作成することができる専用のアプリケーションソフトは、「ホームページビルダー」などが有名です。詳しくは、ホームページビルダー編 で解説しています。

もっとも、HTMLの基本を理解しておけば、ウェブページを作成する時には、より細かくより繊細に凝ったウェブページが作成できるようになりますし、既定の形式のブログも拡張できることがあります。すべてと言わないまでも、基本的なタグは知っておいて損はありません。

下表は、基本的なHTMLの構造です。はじめに<HTML>でHTMLドキュメントであることを宣言し、ヘッダ部分にそのページの情報(文字コードやページの要約など)を記述し、以下にタイトル、そして本文となります。

HTMLファイルの記述構造のイメージ

ヘッダ部は、タイトルや使用する文字コード(符号化方式)などが記述され、<BODY> から</BODY>までの間に本文が記述されます。

HTMLの基本的なタグは下表のとおりです。

HTMLの主なタグ一覧
タグ タグの意味 タグ タグの意味
<html> HTML文書であると宣言 <img src=""> 画像のリンク場所(読み込み先)を指定
<head> ヘッダ情報 <a href=""> リンク先ウェブページを指定
<meta> 文字コードなどの情報 <table> 表の挿入
<title> ページタイトル <tr> 表の行を指定
<p> 段落 <td> 表の列を指定
<br> 改行 <h1>~<h6> 見出し

※ タグの文字は大文字でも小文字でも構いませんが、次項で解説するXHTMLの場合は、小文字で記述します。

さて、このようにウェブページは、HTMLで記述されているテキストファイルなので、逆を言えばHTMLをマスターしていれば、専用のアプリケーションソフトがなくてもウェブページを作成することができます。

テキストエディタで直接HTMLを記述し、そのファイルをブラウザで読み込めば、インターネット上のウェブページと同様にウェブページとして表示されます。

少し実験してみましょう。まず、もっともポピュラーなテキストエディタである「メモ帳」を起動します。メモ帳は、Windows Vista、XPともに、「スタート」ボタン → 「すべてのプログラム」→「アクセサリ」→「メモ帳」で起動します。

メモ帳が起動したら、下記のHTMLをコピーしてメモ帳に貼り付けてください。

<TITLE>テストページ</TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<H1 align="center"><FONT color="#0000ff">HTMLを記述して作る</FONT></H1>
<H3 align="center"><FONT color="#ff0000">
~ とても簡単なウェブページ ~</FONT></H3>
<P align="center">専用ソフトがなくても<BR>
「メモ帳」で<BR>
こんな<BR>
ウェブページが作れます</P>
</BODY>
</HTML>

そして、HTMLを張り付けたメモ帳を、適当なファイル名でマイドキュメントなど任意の場所に保存してください。例として「test.txt」として保存します。

そして、そのHTMLを記述したテキストファイルをブラウザで開くために、下図のように拡張子を「.html」に変更します。

拡張子の変更イメージ。

拡張子「.html」はInternet Explorerなどのブラウザと関連付けられているため、拡張子変更後にこのファイルをダブルクリックすると、ブラウザで開くことができます。そして表示されるウェブページが下図になります。

「メモ帳」で作成した簡単なウェブページのイメージ

ただし、「拡張子」というものを知らずにこの実験を行ってしまうと理解が半減すると思います。もし不安な方は、拡張子 を参照して拡張子の仕組みを学習してください。

さて、これがウェブページの基礎であり仕組みです。当然HTMLの記述のみで、動的なサイト(ムービーなどの動きのあるサイト)を作成することはできませんが、

HTMLファイルがそれらの動的なファイルを統括してウェブページを構成している

のです。つまり、ウェブページのベースにHTMLファイルがあって、画像や映像、サウンド、色々な効果といったコンテンツは、そのHTMLファイルからの「リンク」としてブラウザが読み込んでいるというわけです。

また、ただのテキストファイルをブラウザがウェブページとして表示してくれている、と言い換えることもできます。HTMLファイルはブラウザ(またはブラウザ機能をもつアプリケーションソフト)で開かなければ、メモ帳で開くのと同様に、単なるHTML言語の羅列が表示されるだけになります。

上図の「yamanjo的ウェブページ」のイカのような宇宙人の画像は、リンクとしてブラウザが読み込んで表示しています。したがって、その下のHTMLの記述の中には、この画像をHTML化した記述はなく、この画像の表示位置とリンク先の情報が記述されているのみです。(other030.gifというのがこの画像のファイル名)

このように、実際にウェブページを作成する時には、ページを統括するHTMLファイルと、画像や映像などのファイルを両方用意してブラウザに読み込ませることで、ウェブページが完成します。

では、インターネット上の色々なウェブページのHTMLの記述を実際に見てみましょう。実は、ブラウザから簡単に表示させることができます。

下図は、「YAHOO! JAPAN」のホームページです。(トップページの意味。ホームページとウェブページの違は、名称 で解説します)

Internet Explorer 7では「ページ」→「ソースの表示」、それ以前のバージョンでは「表示」→「ソース」で確認することができます。いろいろなウェブページのHTMLを見比べてみましょう。

「YAHOO! JAPAN」のトップページのイメージ

ただし、フレームページという、複数のページを組み合わせて(分割して)ひとつのページとして表示するタイプのページでは、この操作では一部のページのソースしか表示されないので、ページの任意の場所で、右クリックより「ソースの表示」を選択してください。

これから実際にサイトやブログを作成してみようという方は、その作成の途中で参考になるウェブページを見つけることと思います。どうやったらこんなレイアウトになるのだろうとか、どうしたらこんなキレイで見やすいページになるのだろうとソースを表示させて勉強してみてください。

では、HTMLとタグ基礎はこれくらいにして、次にHTMLの歴史と現在、未来について、ひいてはWWWの未来について学習していきましょう。

ページトップへ戻る


関連情報&オススメ

『ニューズウィーク』は『タイム』とともに世界的に購読されているアメリカのニュース雑誌です。日本に関する記事は少ないですが、世界的な視点で編集されており、国際社会の様々な価値観を知ることができます。

様々な意見を取り上げ、いい意味で画一的でないので、私は、毎週読んでいくうちに「自分自身の考え」を持てるようになりました。国際情勢や経済、地域紛争などについて、自分がその歴史や背景、登場人物を認識していて意見できるくらいの知識を得ることができるようになったと思います。

読み始めた当初は、ほとんどのことが理解できないくらい難しい内容に感じました。たとえば、円高や金利などの経済の仕組みや国際社会の地政学的な背景などの基礎知識がなかったからです。しかし、「毎週全部の記事を読む」「わからないことはネットで調べる」と自分に決め、一年間読み続けたらなんとか理解できるようになり、記事を読むのが本当に楽しくなりました。

また、日本のメディアにはない視点に立って書かれている記事が多いので、感心させられることや考えさせられることも多々あります。例えば、日本では「クジラ食文化」は断固として守らなければならないという視点で記事が書かれますが、「クジラを食することを文化としてる日本人はどれだけいるのか」という視点から記事が掘り下げられていきます。

そこには、画一的な報道からでは見えない「気づき」があります。多角的な視点を持つことで、ニュースの裏に透けて見える矛盾や戦略を感じとる皮膚感覚が身についてきたように思います。

さらに、各国の元閣僚や大物財界人、ビッグスターの寄稿も多く、デービット・ベッカムが札幌でPKを決めたときの気持ちをつづったコラム(その前回のワールドカップで退場になった因縁のアルゼンチン戦)で、「もう、大丈夫だと思った」という言葉は今でも印象に残っています。

先進国の世界的不況や中東の動乱、そして東日本大震災における援助や報道など、世界の中で、国際社会と複雑に絡み合う時代に生きていることを教えてくれます。ひとつ上の目線と価値観を与えてくれた雑誌です。

決して安くはありませんが、1年購読は18,520円(一冊定価460円)です。

ページトップへ戻る

更新履歴

2008年11月24日
ページを公開。
2009年6月12日
ページをXHTML1.0とCSS2.1で、Web標準化。レイアウト変更。
2014年5月22日
内容修正。

ページトップへ戻る

参考文献・ウェブサイト

当ページの作成にあたり、以下の文献およびウェブサイトを参考にさせていただきました。

文献
図解入門 インターネットのしくみ参考文献
文献
Web標準の教科書―XHTMLCSSでつくる“正しい”Webサイト参考文献

ページトップへ戻る