はじめに

まず、Webページを作る前に、しっかりとコンセプトを考えます。「何を伝えたいのか」「どうしてWebページを使うのか」といったことを明確にしておきます。次に、構成を考えます。「どんな順番でどんな素材を使うか」を決めます。それに伴って、必要な資料を集めます。

下準備ができたら、「メモ帳」を準備し、HTMLでソースを書きます。ソースとは、表示したい内容と、その内容をコンピュータに理解させ意図したとおりに表示させるためのタグを記述したものです。

ソースが完成したら、そのファイルを保存します。そして、そのファイルをWebサーバに伝送します。最後に、実際にWebブラウザを使って、Webサーバに転送したファイルを確認してみてください。意図したとおりに表示できていれば完成です。

用語について

Webページを作る上で、重要かつ基本的な用語を簡単に説明します。

HTML

HTMLとは、HyperTextMarkupLanguage(ハイパーテキストマークアップ言語)の略語で、「タグ」と呼ばれる手段を使って テキストに構造や修飾情報などを追加し、コンピュータが情報を読めるようにする働きを持っています。現在W3C (WorldWideWebConsortium)という非営利団体が、使用の狭義決定を行っています。

タグと要素

<hi align="right">タグと要素は別のもの</h1>
<hi align="right">、</h1>この部分が「タグ」です。そして、”タグと要素は別のもの”という部分が「要素」です。 「要素」とは、表示したい内容のことです。これは、実際にブラウザに表示されるところです。 そして、「タグ」は、その要素コンピュータに理解させるための命令のことです。命令だから、ブラウザには表示されません。「タグ」によって「要素」をブラウザで見えるようにすることができます。

Webページを作ってみよう

ここでは、サンプルとして掲載してあるWebページを参考に、実際にWebページを作る手順を紹介します。サンプルページのソースを掲載しているので、そのソースの必要な部分だけを変更すると、Webページができるようになっています。まず、ソースに出てくるタグの説明から始めます。

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

これは、ドキュメントタイプを宣言するタグです。HTMLでは各バージョンで使用可能なタグや属性などを、DTD(DocumentTypeDefinition)として詳細に定義します。初心者の方は、あまりこだわらず、とりあえず必要なものだと思っていてください。

<html>〜</html>

これは、ここから先に書かれた文書がHTMLで書かれていることを宣言するタグで、文書全体の最初と最後に置きます。先に説明した<!doctype>だけは例外で、これだけ<html>タグよりも前に記述します。

<head>〜</head>

これは、文書のタイトルや特徴、製作者の情報をはじめとした、文書に関する情報を記述するタグです。ここに記述された内容は、基本的に<title>〜</title>ではさまれたテキスト以外ブラウザには表示されません。

<body>〜</body>

このタグにはさまれた部分が、実際にブラウザに表示される文書部分となります。

<title>〜</title>

<head>〜</head>ではさまれた部分に記述して、文書にタイトルをつけます。一般的なブラウザではここに記述された内容がタイトルバー(画面左上)に表示されます。

<h☆>〜</h☆>

このタグで見出しを設定します。☆の部分は1から6までの数字をいれて、文字の大きさを指定します。h1が一番大きく、h6が一番小さな文字は表示されます。

<p>〜</p>

このタグで挟まれた範囲が一つの段落であることを示します。ブラウザではこの範囲の前で内容が改行され、さらに偉業文空白が挿入されます。

<br>

HTML文書(ソース)で行った改行は、ブラウザ上の表示には反映されません。ブラウザ上で実際に改行させるには、改行したい箇所にこのタグを記述します。

<center>〜</center>

このタグに挟まれた部分を中央ぞろえするときに使用します。

<img src=☆>

指定した場所に、画像を埋め込みます。☆には画像ファイルのURLを記述します。例えば、素材集からダウンロードした画像をブラウザで表示する場合は、その画像ファイル名を記述します。このとき、画像ファイルとHTMLファイル(ソース)を同じフォルダ内に保存してください。

<a href="☆">〜</a>

任意のテキストや画像にリンクを設定します。☆には移動先のURLを記入します。