HTML5 について

2014.04.25
Webページを作る規格が変わり、現状はHTML5です。
リスト冒頭の、「DOCTYPE宣言」など冒頭の記述が簡単になり、1種類になりました。試みにこのページを考察してHTML5で作成してみました。 IE10、Firefox27 共にページの表示が同じになりました。 今までは、何箇所か違いがあり、修正するのに苦労しましたが、これで悩みから開放されます。

DOCTYPE 宣言が簡単になり、HEAD の記述も簡単化

今までの、HTML4.01 の記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="ja">
<HEAD>
<link rel="shortcut icon" href="../favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="html5.css" type="text/css">
<TITLE>HTML5について</TITLE>
</HEAD>
<BODY>
新しい、HTML5 の記述
<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../favicon.ico" >
<link rel="stylesheet" href="html5.css" type="text/css">
<TITLE>HTML5について</TITLE>
</HEAD>
<BODY>

元のリストが、HTML 4.01 Strict dtd で記述されていれば、変更しても支障が出ませんが、HTML 4.01 Transitional で記述したリストでは、ブラウザのコマンドに対する解釈に違いがありますので、リスト冒頭の DOCTYPE 宣言のみを変更しても表示が乱れることが予想され、古いリストを変更される方は注意が必要です。

参考書を紹介

近くの本屋に行って探した、HTML5の参考書。一緒に購入したホームページ辞典。
画像左:HTML5&CSS辞典
翔泳社、本体2500-、A5版、435頁
画像右:ホームページ辞典4
翔泳社、本体2000-、A5版、597頁

使っている参考書


随分溜まった参考書。左端は、平成9年に入手。右端は、平成23年購入。
本屋で立ち読みし、面白そうな記事がいくつかあると手に入れていますので、こんなに増えました。
この中でよく使うものは、「セオリー・オブ・スタイルシート」です。この参考書には、タグの定義が記載されているのでお勧めです。
body  { margin: 8px }
h1   { font-size: 2em; margin: .67em 0 }
hr   { border: 1px inset }
この定義を読むと、CSSファイルでの再設定の方法がわかります。

HTMLエディタソフトについて

Webページを作るアプリケーションソフトを購入すれば、インターネットのページは簡単にできると考える人がいますが、officeソフトのように簡単にはいきません。 市販品で有名なものに、「DreamWeaver」、「IBMホームページビルダー」があります。
しかし、新しいアプリケーションソフトを手に入れると、その使い方の勉強から始める事になります。同時に、プログラムリストも読まなければ、Webページは完成しません。つまり、使い方と、リストと両方の勉強をする必要があるのです。 また、HTMLの規格が進歩し、Webブラウザも進歩します。 これらに対応するために、エディタソフトも進歩します。つまりバージョンアップです。 その度に新しいバージョンを購入しますか?
一番の問題は、あるソフトのバージョンで作ったものは、その後のバージョンでは変更が難しいのです。また、すべてが関連ずけられて作られているので、リストを変更するとリンクが動作しなかったり、ファイルが行方不明になるのです。5ページ位でお手上げです。100ページにもなったらどうします?
以前に、ボランティアであるグループのページを作りました。これを「ホームページビルダー」で、書き換えようと努力した人がいましたが、不可能でした。リストのヘッダー部分が読み込めないのです。自動では読み込めないので、定義を変更する必要があるのですが、ソフトの設定の変更方法がわからないので先へ進みません。その時のリストはこのページの最初の方に記してある、HTML4.01 strict.dtd でした。この規格は1番厳しいもので、いい加減にリストを作ると表示が狂います。しかし、この規格に準拠すればクレームは来ませんので、この方法を採って作りました。読み込もうとしたソフトの標準は、HTML4.01 Transitinal だったので、無理に読み込んでも表示や配置が違い、まったく手に負えませんでした。テキストエディタで書き直すのが最良の方法です。

Webページ製作に必要なもの
1.プログラムリストを書く、テキストエディタ-
2.デジタルカメラの画像を切り抜いたり加工する、画像加工ソフト
3.何冊かの参考書
これだけで作れます。後は努力だけです。