top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1047

HTMLlint:第9回。現在、基本的に100点ではあるけれど。まだ、「たいへんよくできました」と言われない・・・ 【HTML-lint 100点への道】

 2009-07-29
ずいぶん久しぶり。
投稿も重ねていると、いつの間にかソースが荒れてくる。
前に、なんとか 100点に到達した
HTML-lint でのソースチェック
 ・HTMLlint:第8回。ついに「ふつう」から這い上がれることはできるのか!? おい、いい加減に手仕舞えよ、metaboy・・・ 【HTML-lint 100点への道】

心配なので、今テストしてみょう。


 ■本日の(現在の)チェックだ。
  77個のエラーがありましたが、このHTMLは 100点
  ふぅ~、一応100点キープだ。
  しかし
   ・77個のエラー
  ブログだから難しい、ところもあるけれど
  なんとかこれをクリアして
  「たいへん」よくできました。
  ・・・と言われたい


  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ 目指せ! html-lint で100点への道:9回目
************************************************


 今日は、減点数が0ではあるけれど、
 一応「エラー」とされているソースをチェック。
 何とかできる方法はあるだろうか・・・

それでは、順にチェックしてゆこう。


++++++++++++++++++++++++++++++++++++++++++++++++
■「0: line 32: (<head>~</head> 内に
   <link rev="made" href="mailto:~" /> が含まれていません。)
   → 解説 124
  0: line 32: (<head>~</head> 内に
   <link rel="next" href="~" /> などの
  ナヴィゲーション用のリンクが含まれていません。)
   → 解説 125」
++++++++++++++++++++++++++++++++++++++++++++++++


 ※これは一応知ってはいるのだが・・・

   HTML-lint の解説では、


Lynxなどの一部のWWWブラウザは、この情報を解釈して、
このメールアドレスへ直ちにメールを出したりできます。
HTML作者を明示するためにも、このタグは入れるようにしましょう。
しかし、古いMozillaは <LINK> タグをサポートしていないので、
このタグをせっかく書いても、Another HTML-lint ではエラーが出ますが、
気にしないでください。Mozilla4.0 になってようやく
<LINK> がサポートされました。
と、指定を薦めているにもかかわらず、HTML4.01では、
リンク形式に MADE は含まれていません。
また、指定があれば mailto: である必要もありません。
この警告は減点されません。

  mailto はねぇ。
  スパムメールを呼ぶことにもなる、のだけれど
  きちんとしたメールをいつでも受ける準備もすべき、か。
  とりあえずペンディング。
<LINK> を用いて、
複数のHTML文書間の関係を記述することができます。
ナヴィゲーション用のリンク形式の指定をチェックしています。
どれも指定されていないときに警告されます。
LynxやMosaicなどの一部のWWWブラウザはこれらを解釈することができます。
このナヴィゲーション情報についてはWAIで用意するように指示されています。
この警告は減点されません。

  こちらは、この FC2ブログでは、
  index.html も index.htm も無いからねぇ。
<link rel="index" href="./" />

  こうしておこう。

++++++++++++++++++++++++++++++++++++++++++++++++
■「0: line 33: (<img> には width と height 属性を
  指定するようにしましょう。) → 解説 186
++++++++++++++++++++++++++++++++++++++++++++++++


  これは既知の無視事実、でした。
  ついつい、ブログで生成されるソースそのままに記述していた。
  これは、ちゃんとやるべきだよね。
  ひとまず、最新のトップ頁に表示されているものだけでも
  (結構大変だけど)対応するぞ。

++++++++++++++++++++++++++++++++++++++++++++++++
■「0: line 105: (<img> の属性 `border` は
  あまり薦められない属性です。スタイルシートを使いましょう。)
  → 解説 82
  0: line 110: (<img> の属性 `align` は
  あまり薦められない属性です。スタイルシートを使いましょう。)
  → 解説 82
  0: line 110: (<img> の属性 `border` は
  あまり薦められない属性です。スタイルシートを使いましょう。)
  → 解説 82
  0: line 110: (<img> の属性 `hspace` は
  あまり薦められない属性です。スタイルシートを使いましょう。)
  → 解説 82
  0: line 110: (<img> の属性 `vspace` は
  あまり薦められない属性です。スタイルシートを使いましょう。)
  → 解説 82
++++++++++++++++++++++++++++++++++++++++++++++++


  これもついついやってしまっていた。
  昔ながらのHTMLの書き方。
<img src="*****" width="80" height="80" align='left' border="0" hspace="6" vspace="6" alt="*****" /> ここにコメント書いて<br clear='all' />

  これを機会にクラス指定のものに置き換えておこう。
.leftside_img {
border: 0;
float: left;
margin: 3px 6px 0 0;
vertical-align: top;
}

 ブログパーツで張り込んであるものも多いので、
 結構大変な作業。だが、この際なのですべて対応。
 画像に関するエラーは、ただひとつとなり
  59個のエラーがありましたが、このHTMLは 100点
 おぉ、あと59個のエラーだ。


 さて、その残るひとつの画像エラーとは?
.leftside_img {
border: 0;
float: left;
margin: 3px 6px 0 0;
vertical-align: top;
}

++++++++++++++++++++++++++++++++++++++++++++++++
■「0: line 925: (<img> には width と height 属性を
  指定するようにしましょう。) → 解説 186
++++++++++++++++++++++++++++++++++++++++++++++++


 ※無料アクセス解析を組み込んでいる部分だ。
<a href="http://*****/c.f?id=*****" target="_blank" rel="nofollow"><img src="http://*****/l.f?id=*****&amp;url=X" alt="AX"  /></a>

 img src にプログラムを指定しているわけで、この場合は
 width="1" height="1" を指定する。

 これで、すべての画像関連のエラー(警告)は
 無くなった。
 よし、続きはまた後で・・・


 ところで、
 警告はまだ残っているのだけど、基本的なソースは
 W3Cに準拠できている、というところまでは
 こぎつけた。


 この段階で、HTML-lintではなく
 ・W3C の Markup Validation Service での
  チェックも受けておく。


  > Result:Passed !

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1047-1fdc229c
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。