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>ＨＴＭＬ５について</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>ＨＴＭＬ５について</TITLE>
</HEAD>
<BODY>
元のリストが、HTML 4.01 Strict dtd で記述されていれば、変更しても支障が出ませんが、HTML 4.01 Transitional で記述したリストでは、ブラウザのコマンドに対する解釈に違いがありますので、リスト冒頭の DOCTYPE 宣言のみを変更しても表示が乱れることが予想され、古いリストを変更される方は注意が必要です。
参考書を紹介
近くの本屋に行って探した、ＨＴＭＬ５の参考書。一緒に購入したホームページ辞典。
- 画像左：ＨＴＭＬ５＆ＣＳＳ辞典
- 翔泳社、本体２５００－、Ａ５版、４３５頁
- 画像右：ホームページ辞典４
- 翔泳社、本体２０００－、Ａ５版、５９７頁
使っている参考書
随分溜まった参考書。左端は、平成９年に入手。右端は、平成２３年購入。
本屋で立ち読みし、面白そうな記事がいくつかあると手に入れていますので、こんなに増えました。
この中でよく使うものは、「セオリー・オブ・スタイルシート」です。この参考書には、タグの定義が記載されているのでお勧めです。
- 例
-
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
hr { border: 1px inset }
この定義を読むと、ＣＳＳファイルでの再設定の方法がわかります。
ＨＴＭＬエディタソフトについて
Ｗｅｂページを作るアプリケーションソフトを購入すれば、インターネットのページは簡単にできると考える人がいますが、officeソフトのように簡単にはいきません。
市販品で有名なものに、「DreamWeaver」、「IBMホームページビルダー」があります。
しかし、新しいアプリケーションソフトを手に入れると、その使い方の勉強から始める事になります。同時に、プログラムリストも読まなければ、Ｗｅｂページは完成しません。つまり、使い方と、リストと両方の勉強をする必要があるのです。
また、ＨＴＭＬの規格が進歩し、Ｗｅｂブラウザも進歩します。
これらに対応するために、エディタソフトも進歩します。つまりバージョンアップです。
その度に新しいバージョンを購入しますか？
一番の問題は、あるソフトのバージョンで作ったものは、その後のバージョンでは変更が難しいのです。また、すべてが関連ずけられて作られているので、リストを変更するとリンクが動作しなかったり、ファイルが行方不明になるのです。５ページ位でお手上げです。１００ページにもなったらどうします？
以前に、ボランティアであるグループのページを作りました。これを「ホームページビルダー」で、書き換えようと努力した人がいましたが、不可能でした。リストのヘッダー部分が読み込めないのです。自動では読み込めないので、定義を変更する必要があるのですが、ソフトの設定の変更方法がわからないので先へ進みません。その時のリストはこのページの最初の方に記してある、HTML4.01 strict.dtd でした。この規格は1番厳しいもので、いい加減にリストを作ると表示が狂います。しかし、この規格に準拠すればクレームは来ませんので、この方法を採って作りました。読み込もうとしたソフトの標準は、HTML4.01 Transitinal だったので、無理に読み込んでも表示や配置が違い、まったく手に負えませんでした。テキストエディタで書き直すのが最良の方法です。
- Ｗｅｂページ製作に必要なもの
- １．プログラムリストを書く、テキストエディタ－
２．デジタルカメラの画像を切り抜いたり加工する、画像加工ソフト
３．何冊かの参考書
- これだけで作れます。後は努力だけです。
<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>ＨＴＭＬ５について</TITLE>
</HEAD>
<BODY>
<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>ＨＴＭＬ５について</TITLE>
</HEAD>
<BODY>
元のリストが、HTML 4.01 Strict dtd で記述されていれば、変更しても支障が出ませんが、HTML 4.01 Transitional で記述したリストでは、ブラウザのコマンドに対する解釈に違いがありますので、リスト冒頭の DOCTYPE 宣言のみを変更しても表示が乱れることが予想され、古いリストを変更される方は注意が必要です。
参考書を紹介
近くの本屋に行って探した、ＨＴＭＬ５の参考書。一緒に購入したホームページ辞典。
- 画像左：ＨＴＭＬ５＆ＣＳＳ辞典
- 翔泳社、本体２５００－、Ａ５版、４３５頁
- 画像右：ホームページ辞典４
- 翔泳社、本体２０００－、Ａ５版、５９７頁
使っている参考書
本屋で立ち読みし、面白そうな記事がいくつかあると手に入れていますので、こんなに増えました。
この中でよく使うものは、「セオリー・オブ・スタイルシート」です。この参考書には、タグの定義が記載されているのでお勧めです。
- 例
-
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
hr { border: 1px inset }
ＨＴＭＬエディタソフトについて
しかし、新しいアプリケーションソフトを手に入れると、その使い方の勉強から始める事になります。同時に、プログラムリストも読まなければ、Ｗｅｂページは完成しません。つまり、使い方と、リストと両方の勉強をする必要があるのです。 また、ＨＴＭＬの規格が進歩し、Ｗｅｂブラウザも進歩します。 これらに対応するために、エディタソフトも進歩します。つまりバージョンアップです。 その度に新しいバージョンを購入しますか？
一番の問題は、あるソフトのバージョンで作ったものは、その後のバージョンでは変更が難しいのです。また、すべてが関連ずけられて作られているので、リストを変更するとリンクが動作しなかったり、ファイルが行方不明になるのです。５ページ位でお手上げです。１００ページにもなったらどうします？
以前に、ボランティアであるグループのページを作りました。これを「ホームページビルダー」で、書き換えようと努力した人がいましたが、不可能でした。リストのヘッダー部分が読み込めないのです。自動では読み込めないので、定義を変更する必要があるのですが、ソフトの設定の変更方法がわからないので先へ進みません。その時のリストはこのページの最初の方に記してある、HTML4.01 strict.dtd でした。この規格は1番厳しいもので、いい加減にリストを作ると表示が狂います。しかし、この規格に準拠すればクレームは来ませんので、この方法を採って作りました。読み込もうとしたソフトの標準は、HTML4.01 Transitinal だったので、無理に読み込んでも表示や配置が違い、まったく手に負えませんでした。テキストエディタで書き直すのが最良の方法です。
- Ｗｅｂページ製作に必要なもの
- １．プログラムリストを書く、テキストエディタ－
２．デジタルカメラの画像を切り抜いたり加工する、画像加工ソフト
３．何冊かの参考書 - これだけで作れます。後は努力だけです。