まずは書いてみよう

準備

まずはソースコードを書く準備をしなければなりません。とはいえHTMLを書くのに必要なものは他のプログラミング言語とは違って非常に少ないです。ソースを書くテキストエディタと、それを解釈、表示するためのWebブラウザだけ。今のPCなら最初からこれらはそろっています。(Windowsならばメモ帳とIE(Internet Explorer)、大学のMacOSXならばEmacsとSafari)

あとは、どの作業にも言えることですがファイル置き場を確保しておくとよいでしょう。

最初のページ

とりあえず簡単なページを作ってみましょう。テキストエディタを起動して、何も考えずに以下に示すソースコードを書いて、保存してください。ファイル名は何でもいいですが、拡張子として.htmlもしくは.htmを指定します。

<html>
<head>
<title>私のサイト</title>
</head>
<body>
<h1>WelCome!</h1>
<p>やあ（´・ω・｀)<br>ようこそ、私のサイトへ。</p>
</body>
</html>

ファイルを保存できたら今度はブラウザで見てみます。ExplorerやFolderから作成したファイルを実行してください。ブラウザが立ち上がって、なにやら表示されるはずです。(Sample01)

説明

さて、何も考えずにソースをコピーしてもらったわけですが、これを説明します。<>にはさまれた単語がたくさん出てきますね。これはタグといって、HTML言語を構成する非常に重要なものです。多くのタグは<hoge>という形の開始タグと</hoge>という形の終了タグという対になっていて、この対ではさまれた部分を意味づけします。(そしてこれがマークアップ言語たるゆえんです。)なお、この<hoge>〜</hoge>で囲まれた部分全体をhoge要素といいます。次に下から3行目の中ほどにある<br>というタグを見てみますと、対になるタグが見当たりません。実はbr要素は単独で改行を表す要素で、一般に空要素といいます。今回出てきた要素を見てみましょう。

html要素: 要素がHTML文書であることを示します。
head要素: このHTML文書全体の情報を記述する要素です。
title要素: 文書のタイトルを示します。
body要素: 本文をあらわします。title要素を除き、この中に書いたことだけが表示されます。
h1要素: 見出しをあらわします。h1からh6まであり、数字が小さいほど大きな見出しになります。
p要素: 段落をあらわします。前後が改行されます。
br要素: 改行を表す空要素です。

HTMLソースコード内での改行は無視されます。つまり、ソースコードで

<p>
Hello,
World!!
</p>

と書いてもブラウザで観たときには改行されません。改行したいときにはbrタグを用いましょう。

また、HTMLのソースコードHTMLでは基本的に小文字と大文字の区別をしません。なので、<html>も<Html>も<HTML>もすべて同じhtml要素をあらわします。しかし、XMLおよびXHTMLでは要素名は小文字のみとされているので、のちのち移行を考えるならすべて小文字で書いておいたほうがよいでしょう。

戻る