HTML　タグの最近のブログ記事

HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife

久々にＨＴＭＬの話題を見つけて読んでみました。

ＨＴＭＬは現在4なので新しい規格のようですが、HTML5はまだW3CやWHATWGで策定中なので実際に使えるわけではないんです。

最終的には、ブラウザ（MicrosoftのＩＥやFirefoxが対応しないと意味がないんですが、W3Cで決定されてもブラウザが対応するのはその先になります。

リンクに関する疑似クラスでは記述する順番が重要とのことで記載の変更をしました。

たとえば「hover 」が「visited」よりも先に記述されると「visited」スタイルに上書きされてしまいます。
そのため、リンク先から戻って来たときには「hover」に書いたスタイルは無効になってしまいます。

正しい順序だそうです。

a:link
a:visited
a:active
a:hover

XHTMLは、HTML の簡便さを残しつつ、XML の論理的厳密性を備えていますので、HTML のようにルーズなコーディングでもブラウザで問題なく表示される、ということがほとんどありません。つまり、HTMLよりも厳格なコーディングが求められることになります。ただ、使用する要素や属性、属性値はほとんど変わりません。

書式についてはHTMLと少し異なりますのが、詳しくはXHTMLのルールで説明します。

ＣＳＳやＸＨＴＭＬを使わない場合でも、ページのデザインやレイアウトを後々やりやすくする為に、ＤＩＶタグを使ってページ割りをしておくと、ＣＳＳ対応がやり易くなります。

この時に単に<DIV>?</DIV>で囲むのではなくて、名前を付けておきます。
名前はＩＤやＣＬＡＳＳで行います。
ＩＤはそのページで１回（1っ箇所）だけ使うもので、ＣＬＡＳＳは何回」でも使えるものです。

<DIV id="ブロックの名前">?</DIV>
<DIV class="段落の名前">?</DIV>

classは文字の修飾や配置（右寄せ左寄せ等）またはブロックのサイズなどに使います。

<DIV id="mainconntents" class="leftsaide" >?</DIV>

idやclassには解りやすい名前を付けましょう

インターネット上では、Windows、UNIX、Macなど、様々なコンピュータを利用している人がホームページを見ています。外字や特定の機種に依存する文字（機種依存文字）を使用すると、他の機種を使っている人は見ることができないことがありますので使用しないようにしましょう。半角カナもブラウザによっては表示できない場合がありますので、使用しないようにしましょう。

また、ウェブ上に掲載するファイル名には、基本的に小文字のアルファベットと数字のASCII文字（半角）のみを使用するのが安全です。
記号は「-」（ハイフン）、「_」（アンダーバー）および、ファイルの拡張子を区切る「.」（ピリオド）のみとなります。

ファイル名に大文字のアルファベットを使用しているサイトもありますが、UNIXは大文字と小文字を区別するのに対しWindowsやMacintoshはこれらを区別しないなど、OSによって扱いが異なり、問題が発生することがあるため、使用しない方が無難です。また、日本語をファイル名に用いる方法もありますが、特殊であり、これも問題の要因になることが多いので避けましょう。

もともとHTMLはXMLの親にあたるSGMLから派生した言語で、Webブラウザメーカー主導で独自の拡張が続いてきた。このため、HTMLはXMLとは一部整合性を欠く言語仕様となっているが、両者の違いはある程度吸収できる範囲のものであるため、従来のWebブラウザでも問題なく見られ、かつXMLに準拠した文書を作成する言語仕様としてXHTMLが作成されました。



　HTMLをXML準拠のものに更新した理由として、インターネットをはじめとしたオンラインでのデータの送受信にXMLが使用されることを想定し、HTML文書もXML処理系で統一的に扱える環境を整える必要があったことが挙げられている。



　最初のW3C勧告となったXHTML 1.0はHTML 4.01を元にしたものとなっており、HTML 4.01に対応したWebブラウザではほぼ完全な形でページを見られるようになっている。



　現在の最新版はXHTML 1.1で、文書見栄えを指定するタグが廃止(見栄えの記述は全てCSSで行なうことになった)など、文書構造の記述に特化した言語へと変化しつつある。



　XHTMLの各バージョンに共通したHTMLとの違いをいくつかあげると、タグ名がすべて小文字に統一される、XMLベースの他の言語(MathMLやSVGなどが想定されている)による記述を埋め込むことができる、終了タグをもたず単独で使用される「<br>」などのタグを「<br/>」ないし「<br />」と書く、などがある。

http://happy.honesto.net/cgi/

ここにあるランダムメッセージのＣＧＩはテキストベースでＨＴＭＬを記述できるので、文書は勿論、 画像やアフエリエイトのタグなども設定できます。

複数のアフェリエイトと提携してる場合、このＣＧＩを使えば同じ場所にランダムで表示させられます。

ホームページのデザインにTABLEを多用するのは邪道とか言う意見が多いので、DIVで作成しようとした。ところが、これが難しいのだ。DIVはTABLEのように区画を区切れないので、
デザイン要素を様々なサイズの四角形を作成し配置するのだが、マージンやパディングを使用すると、表示サイズがずれたり、回り込み等上手くいかない、中央表示が困難で、結局TABLEを入れ子にするケースが多くなりました。
　ただ、DIVで作成する場合、縦横サイズをしっかり指定すれば、かなり上手く配置できることがわかりました。

ブラウザーから当サイトを印刷する場合に、再度メニューおよび、ヘッダーのバナー広告・フッターのバナー広告が印刷されないようにスタイルシートを変更しました。

ただし、文中に挿入されているバナー広告は表示されてしまいます。ご了承ください。

SSI化をさらに進めて、広告の表示もSSI化いたしました。

現在以下の項目をSSIでインクルードしています。

サイドメニュー
トップナビゲーションメニュー
ヘッドバナー
フッター
フッターバナー
ランダムメッセージ

今契約しているサーバはSSIが使える、ただ拡張子が.shtmlに変える必要があるので使用を躊躇していたのです。

しかし、ものは試しとやってみたら中々便利な機能ですね。

SSIと言えば、カウンターやCGIの結果をｈｔｍｌに埋め込むとかファイルの更新日時の表示とかが一般的ですが、 私が便利だと思ったのは　<!--#include file/virtual="?"-->　というコマンドです。

指定したファイルを埋め込むコマンドですが、便利なのは各コンテンツのメニューや広告等を書くページに書き込む手間が省けるのです。

つまり、html入門のページが１０ページあると、この１０ページに全て同じメニューを作っていたのですが、 SSIのincludeを使うとメニューファイルを１つ作成して、各ページには、 <!--#includefile/virtual="メニューを書いたファイル"-->　をつければすみます。 もちろんページの追加や削除ファイル名の変更があってもこのファイルを修正するだけです。

アフィリエイトのｈｔｍｌコードもファイル化して、 表示した居場所に<!--#includefile/virtual="バーナー１のファイル名"-->といった感じで言い訳です。

提携が切れたりＥＣサイトを変更するのも簡単になります。

　<!--#include filel="?"-->　は相対位置で指定します

<!--#include virtual="?"-->　ホームディレクトリからの絶対パスです

相対位置で指定すると、一括で変更したいときなどに困るので全てvirtual=で指定したほうが管理しやすいと思います。

また、japaScriptも外部ファイル化が推奨されていますが、ssiで呼び出しても良いですね。

ただ、ＳＳＩはサーバへの負担が大きいといわれ、 あまり重いようだとレンタルサーバ会社から注意を受けたり使用を中止されたりすると警告しています。

これは、<!--#exec cgi="?"-->　を使用して、 cgiの結果をhtmlファイルに埋め込む場合にＣＧＩがサーバに負担をかけるとの意味です。 このような注意はＣＧＩの使用についても書かれていますから、SSIに限らず注意しましょう。

☆さくらインターネット☆
はSSIが利用できます。