建築マップ「参加のご案内」 step2

参加のご案内
Join Us -step2-

step2-4.HTMLの読み方

(text=makoto)

Webページは通常ブラウザを使用して閲覧しますが、実はHTMLという一種のコンピュータ言語によって記述されています。ブラウザはHTMLで書かれた内容を解読してその指示通りに表示しているわけです。
Web作成ソフトを使ってしまうと通常HTMLそのものを見ることはありませんが、Web作成ソフトには限界もありますので、少しずつでもHTMLを読めるようになっておきたいものです。詳細な説明は市販の解説書をご覧頂くとして、ここでは初歩の初歩だけ紹介します。判りやすさを優先しましたので、やや不正確な表現もあります。

まずはソースを見てみる

まずこちらのページを開き、「表示」の中の「ソース」を選んでください（Internet Explorerの場合）。

HTMLソースを表示する方法を示した画像

するとテキストエディタが立ち上がり、HTMLの内容が表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">



<head>

  <meta http-equiv="Content-Language" content="ja">

  <meta http-equiv="Content-Style-Type" content="text/css">

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

<title>建築マップ　説明用サンプルページ</title>

</head>



<body>

  <p>これはサンプルページです。</p>

  <img src="a_map_title.gif" width="280" height="70" border="0">

  <p>

  <a href="http://www.archi-map.jp">建築マップ</a>

  <br>

  </p>

 </body>

</html>

ソースについて解説

ではこのソースについて順番に解説していきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

これはHTMLの最初に必ず書くおまじないです。HTMLには規格がいくつかあるので、どの規格に基づいているのか最初に宣言しています。

<html lang="ja">

ここからHTMLが始まりますよという宣言です。<html>だけでも通常は大丈夫ですが、ここでは言語は日本語であるという情報を付け足しています。ちなみに、</html>は「HTMLはここでお終いですよ」という意味になります。

<head> </head>
<body> </body>

HTMLの中身は大きく、HEADとBODYに分けられます。実際にブラウザで表示されるのはBODY（<body>と</body>に挟まれた部分）で、HEADはブラウザに表示する以外の情報を記述する場所です。いくつか難しそうなことが書いてありますが、どのページでも全く同じものを書いておけばいいので気にしなくて構いません。ただ、制作する際に知っておかなくてはいけないのがtitle要素です。

<title>建築マップ　説明用サンプルページ</title>

ここがHTMLのタイトルに相当します。かならずHEAD内に記載します。HTMLのファイル名（この例の場合はsample.html）には必ずアルファベットを使いますが、このタイトルには日本語も使えます。タイトルはブラウザの一番上に表示されるほか、検索エンジンもこのタイトルを参照するので、かならずタイトルを付けるようにしてください。

続いて、BODY内について説明します。

<p>これはサンプルページです。</p>

pは本文を記載する「段落」を示します。

<img src="a_map_title.gif" width="280" height="70" border="0">

ブラウザに対し画像を表示するように命令します。上の例を解読すると、「a_map_title.gifという画像を、幅280ピクセル、高さ70ピクセル、境界線なしで表示せよ」となります。

<a href="http://www.archi-map.jp">建築マップ</a>

リンクを示します。上の例を解読すると、「<a>と</a>に挟まれた部分をクリックしたら、http://www.archi-map.jpにジャンプせよ」となります。

<br>

改行を示します。テキストエディタで「Enter」キーを押して改行してもHTMLには反映されないので、必ず<br>を使って改行します。Web作成ソフトはワープロに似せてあるので、「Enter」キーを押して改行すると自動的に<br>と書いてくれます。

以上、簡単に解説してきました。<br><a><img>といったカッコに囲まれた部分を「タグ」と言いますが、このタグには他にも多くの種類があります。書店に行けば多くの解説本がありますので、できるだけ詳しい、中級者向けのものを一冊手元に置いておいてください。初心者向けの本では内容が薄すぎて使い物にならないケースが多く、あまりお奨めできません。
慣れてきたらスタイルシートやJavaScriptにもチャレンジしてみてください。

このページで使った用語

ブラウザ: インターネットを閲覧するソフトのこと。Internet ExplorerとNetscape Navigatorが有名。インターネットエクスプローラーはIEと略されることがあります。ネットスケープはNNやNCやネスケと略されることがあります。セキュリティの関係から、常に最新のブラウザを利用するよう心がけましょう。
pixels（ピクセル）: パソコンに表示される画面の点の数の単位。Windows系のモニターの解像度：dpiで1280×1024となっていると、モニターの横幅1280ピクセル縦幅1024ピクセルの点で表示しているという意味です。デジタルカメラなどは、この縦横をかけ合わせた数字を画素（がそ）と表現しています。48万画素なら、800×600の大きさのデジタル写真が撮れます。最近のデジタルカメラの600万画素ともなると、大きすぎてパソコン上では縮小しないと見られません。

「参加のご案内」のサブコンテンツ

はじめに
Webチュートリアル

参加に向けて