New・HTML実験室: 12.公開する準備

11回までのHTMLドキュメントは、ローカルの実験練習用で、この状態でサーバーにアップして、他の人にも見てもらうことはできません。インターネットサーバーにアップする場合、環境はwindowsとも限らず、ブラウザもedgeとは限らず、見る人は日本人とも限らないからです。

そこで、規格の宣言文が必要です。

●HTMLをサーバーにアップする場合に必要な宣言文

どのバージョンのHTMLで書かれているか、CSSやJavascriptなどが含まれているか、そしてテキストファイルの文字コードは何かを示す文をタグ形式で最初に書いておきます。敢えて、古いバージョンで各場合以外は、上位互換を考慮し、HTML5で宣言します。HTML5では、この宣言はシンプルになりました。

<!DOCTYPE html>　　　　バージョン５の宣言　これだけです

<html>　　　　　　　　　　ここから、</html>までが、html書式で書いているという宣言　　　　　　　　　

<head>　　　　　　　　　ここから</head>の間は、ページに表示しないものです。

<title>ページタイトル</title>　検索などで使われるものページタブに表示されます。

</head>　　　　　　　　　　　ここまでが、ページには表示しない記述です。

　　　　　　　　　　　　　　CSSやJavascriptなどは、ここに分けて書き込みます。

<body>　　　　　　　　　ここから、htmlの中身です。</body>で終わります。

</body>

</html>

CSSやJavascriptなどは、htmlとは別に、<head>や<body>の中に分けて書かなくてはいけませんが、今までのサンプルは、これらを省略していました。それでも、windows10のローカル環境では、拡張子をhtmlにするだけで、htmlドキュメントとなり、ブラウザが自動判定してくれていました。本番では、最低ここまでの宣言は必要です。

ちなみに、前のバージョンHTML4.０1では、以下のようになっていました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">　　ドキュタイプ宣言

新しいブラウザは、この様な定義が無くても自動的に判断してページを表示してくれます。しかし、公開するとなると、相手はwindows10の新しいedgeブラウザとは限りません。また、パソコンでなくスマホで見る人もいます。ここで紹介してきたものは、簡易実験のための教材です。こういうやり方は、書籍やwebの教材では紹介されません。自己責任で実験してください。

●スタイルシートを別ファイルにする

拡張子htmlのファイルに、書き込むのでなく、拡張子cssで別ファイルに保存し、それをhtmlから読み込むことができます。凝ったデザインは、殆どがCSSの記述になるので、一般的には別のファイルにします。それを読み込むには、html側に以下の書式で書き込みます。これも、昔と変わっています。新しい書式は、

@chraset "UTF-8";

div {width: 240px;height: 100px;border: 6px solid #00b200;}

a {text-decoration: none;}

h1 {color: #ffaa00;}

.b-radius {border-radius: 16px;text-align: center;}

を別ファイルで（sample.css）保存した場合、htmlは、

<h1>CSSで角丸を作る</h1>

<div>太枠の箱に文字を入れる。横240　縦100　太さ6　です。</div><br>

<div class="b-radius">箱の、四つ角を丸くする設定をし、文字を中央配置にしています。改行していないので、折り返し後に中央になります。</div>

<a href="http://winboys.net/">ここをクリックして</a>

となります。cssを置く場所が異なる場合は、アドレス・ファイル名の形にします。