町田の実験室-html

webサイト

webサイトはHTML（HyperText Markup Language）と呼ばれる言語で記述されたファイルによって構成されています。
「Internet Explorer」「Google Chrome」などのブラウザはHTMLファイルの置いてあるサーバにアクセスしてファイルを解析して表示をします。現在最新のバージョンのものはHTML5であり、各ブラウザ最新のものは表示に対応しています。

webサイト作成に必要なもの

webサイトを作成する上で必要なものは

サーバ
HTMLファイル

この2つです。サーバはなかなか個人で持つものではないのでプロバイダ等のレンタルサーバで大丈夫です。
またHTMLはとても簡単なのでwebサイトを公開しないという方も記述して遊んでみてください。自分の使用しているブラウザで簡単に表示することができます。
ここではHTMLの記述を取り扱っていきます。

txtファイルとHTMLファイルの違い

ブラウザはtxtファイルやHTMLファイルを読み込んで表示することができます。拡張子を「html」に変更するとHTMLファイルとして認識されるのでtxtファイルの状態と表示が異なります。

txtファイルとHTMLファイルを確認してみます。
windowsのメモ帳に以下の二行を入れます。

こんにちは
これはテスト用のファイルです。

これを保存するときにひとつは「test.txt」もうひとつは「test.html」のファイル名で保存します。
さらにこの二つのファイルを「Internet Explorer」で確認してみます。

txtファイル

htmlファイル

HTMLファイルはHTMLの文法に則した表示になるので改行は無視されます。
またHTMLファイルはtxtファイルと違い、画像を挿入したりリンク使って別のHTMLファイルに移動することができます。

HTMLの記述

前述したようにHTMLはW3Cによって仕様が決まっているのでどのブラウザでも同様のレイアウトで表示されるようになっています。
HTMLファイル内にただ文章を書いて表示することもできますが、正しい文法どおりに書かない場合は表示が異なったりレイアウトが崩れたりする可能性があります。さきほどの文章を正しい文法になおしてみます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>タイトル</title>
</head>

<body>
<p>こんにちは<br>
これはテスト用のファイルです。</p>
</body>

</html>

<～></～>をタグと呼び、囲まれたタグによってタグ間の文章の表示のされ方が変わります。
上のソースは先ほどのtxtファイルと表示は同様となりますがブラウザは内部でそれぞれのタグを解析して表示しています。
このとき文字の表示がおかしくなってしまった人はメモ帳で保存するときに文字コードを「UTF-8」にしてみてください。ソースの5行目の「charset=utf-8」という記述がブラウザに「UTF-8」で読み込むように指示しています。

文字化けした表示

UTF-8を指定した場合の表示

プログラムの埋め込み

htmlファイルにはプログラムを簡単に埋め込むことができます。
プログラミングによって動的なサイトを作成する手段はいくつかあるのですが、今回はJavaScriptを使用してみます。
この言語はかなり主流のものなので修得して損はありません。
以下のソースを入力します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>タイトル</title>
</head>

<body>
<p>こんにちは<br>
これはテスト用のファイルです。</p>


<script language="JavaScript" type="text/javascript">
<!--
	var now = new Date();
	var h = now.getHours();
	var m = now.getMinutes();
	var s = now.getSeconds();
	document.write(h+"時"+m+"分"+s+"秒");
// -->
</script>

</body>

</html>

前述のコードとの違いはbodyタグ内のJavaScriptの記述です。実際にブラウザに表示すると表示したタイミングに合わせて現在時刻が表示されます。更新を押すタブに表示が変わるのがわかります。
このようにプログラムを簡単に実行できるのでプログラミングの入門にも最適です。

htmlはwindows標準搭載のメモ帳とブラウザがあればできるので、手間のかかる準備をせずに自分だけのレイアウトやプログラムができます。
興味がある方は是非挑戦してみてください。