ホームページ事始め

楽しいホームページ入門
２．基本的なページを作ろう

●　HTML文書作成開始→Web画面の確認

予備知識はこれくらいにして、実際にホームページ作りを始めます。まずはWindowsの「メモ帳」を開いて、１行目にXML宣言文、２行目に文書型宣言文を記述します。

XML宣言文とはXML（Extensible Markup Language）で書かれた文書であることを示すものですが、詳しい知識がありませんので深く考えずに、本などで指示された通りに

<?xml version=”1.0” encoding=”Shift_JIS”？>

と入力し、文書型宣言としては、一般的と言われているXHTML1.0Transitionalを使用するので、

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml-tansitional.dtd”>

と宣言します。この２つの宣言文に続けて

と入力します。さらに段を変えて

</html>

と入力します。この記述によって、、この２つのタグ　<html～>　と、</html>　の間にこれから書き込む文章がHTMLで記述された文書である事を示し、文書のｘmlns属性とlang属性を示します。

これらの作業の後にホームページの内容となる部分を記述していきます。<html～>の後に、段を替えながら<head>、</head>、<body>、</body>と書いていきます。<head>と</head>の間にはページの基本情報や設定を、<body>と</body>の間にはホームページで表示する本文を書いていく事になります。イメージとしては右図の様になります。

さて、<head>と</head>の間に記述していくページの基本情報の代表例としてページタイトルがあります。ここでは、<title>、</title>と入力しこの間に例えば「こんにちは」と記述します。次に、本文として<body>と</body>の間に「おはようさん」と記述します。

ちなみにHTMLでは、<、>とそれで囲んだ文字列をタグと呼び、「開始タグ」例えば<body>と「終了タグ」例えば</body>とそれで囲んだ内容とを合わせて「要素」と呼びます。

ここで、ホームページ作りの第一歩として、ここまで作った文書を保存します。今回の例では、「sample1」と名付け、sample1.txtと、sample1.htmlの２つの拡張子でファイル保存します。この内sample1.htmlがHTML文書です。

ここまでのHTML文書はWeb画面ではどのようになっているのでしょうか。

試しに、sample1.htmlをダブルクリックしてみると、Webブラウザが起動され左図の様なWeb画面が出て来ます。タイトルバーとタブに「こんにちは」と表示され、本文としては「おはようさん」と表示されてています。尚、私はWebブラウザーとしてinternet Explorer 8 を使用しています。

●　文字の装飾とタグの使い方を理解する

いよいよ本格的にタグを使って、その働きを確認します。まずは「見出し」で、見出しは６段階のレベル設定が出来ます。その記述方法は、

<h見出しレベル（１～６）>　文字列　</h見出しレベル>

で、又、本文の記述方法は、

です。サンプルとして、下の様に記述してみました。

<body>
<h1>おはようさん</h1>
<h2>こんばんは</h2>
<h3>いただきます</h3>
<h4>ごちそうさまでした</h4>
<h5>おやすみなさい</h5>
<h6>ありがとう</h6>
<p>狭いながらも楽しい我が家。</p>
</body>

Web画面では右の様になります。H4のレベルは通常文字を太字にしたものと同じ大きさです。尚、これらの文字の大きさや色などは、後で出て来るスタイルシートで変えることができます。

次は、Office-wordなどの汎用ソフトでは何の苦もなくできている文字の「斜体」、「太字」と「改行」、更には「上付き文字」、「下付き文字」を書いてみます。少し手間がかかります。

「斜体」の記述・・・・<em>斜体にしたい文字列</em>

「太字」の記述・・・・<strong>太字にしたい文字列</strong>

「改行」の記述・・・・<br />

「上付き文字」の記述・・・<sup>上付きにしたい文字列</sup>

「下付き文字」の記述・・・<sub>下付きにしたい文字列</sub>

となります。又、特殊文字は、

&＃番号；　　　　又は　　　&キーワード；

と記述します。以上の記述方法を、実際にサンプルで試してみます。すでに記述していた<p>～</p>の内容を以下の様に変えてみます。

<p>狭いながらも<strong>楽しい我が家</strong>。広さはなんと２０ｍ<sup>２</sup>。だけど心はあったかよ&hearts;<br/>H<sub>2</sub>O</p>は<em>水</em>です。 >/p>

Web画面では下の様になります。尚、特殊文字の例としてハートマークを試してみましたが、これ以外に非常に多くの特殊文字があります。ここでは全てを紹介しきれませんので、割愛します。

　ところで、HTML文書中に、Web画面には表示したくないメモ書き等を残したい時があります。この時には、下の様に記述して必要コメントを入れます。

●　画像を貼る

文字の記述について一通り基本がマスターできましたので、次は画像を貼ります。

まず、ホームページで利用できる画像の形式は限定されます。JPEG形式、GIF形式、PNG形式の３つです。これらの形式について、細かい説明は他にゆずるとして、私は以下の様に理解し、使い分けています。

JPEG形式・・・Joint Photographic Experts Group。約1670万色のフルカラーを扱う事が出来、デジカメ画像出力などの写真型画像に適した画像形式。写真画像で使用。
GIF形式・・・Graphics Interchange Format。２５６色の画像形式であり、JPEGに比べると画質は落ちる。しかし、特定の色を透過にしたり（透過GIF）、パラパラマンガの様に表示（アニメーショGIF）できる。アイコン、説明図等に使用。
PNG形式・・・Portable Network Graphics。

画像の貼りつけの前に画像サイズを最適化しておく必要もあります。と言うのは、デジタルカメラで撮影した高解像度の画像は容量も大きくなっており、そのまま貼りつけるとWebページを表示する際に時間がかかってしまい訪問者に不快感を与えてしまうからです。画像サイズの最適化（圧縮）は、パソコンやデジタルカメラに付属している画像ソフトなら大抵可能です。私が今回サンプルで使用している画像はもともと4,221KBであったものを51KBに圧縮したものです。圧縮の方法は

Microsoft-Office-Picture-Manager（付属ソフト）で画像呼び出し

→「画像」クリック→「画像の圧縮」クリック

→「圧縮の目的」を「Webページ」にして「OK」をクリック

→名前を付けて保存

　　（今回はpicsと言う１フォルダー内で100428rome1と名付けて保管）

とやっています。

さて本題の画像の貼りつけに入ります。<img>タグを使い、属性としては、

src属性・・・画像ファイル名、パスの指定。

width属性・・・画像の幅（ピクセル数又は画像ウインドウ幅比（％））を指定。

height属性・・・画像の高さを指定。

alt属性・・・画像データが無い場合に入る説明文の指定。

　　　　　　画像上にマウスポインタを置いた時の画像の説明文にもなる。