top


総投稿数 本 
no_

スポンサーサイト

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

HTMLlint:第7回。おぉ、もう7回目だ。そろそろ「褒められたい」。今日もソースを、ちょこっと見直し作業だ・・・ 【HTML-lint 100点への道】

 2009-05-25
このブログのソースを見直すことによって
 (HTMLlint を利用させていただき、
  チェックすることによって)
 ・新しい発見があるかもしれない
 ・重要な基礎知識を再認識できたり
  忘れている必須作業を確認できるかもしれない・・・
という思いではじめた、ソース見直しプロジェクト。
(あれっ? 名前が変わったか? ・・・まぁいいや)

 前回は、
 ・HTMLlint:第6回。ほんとに、ちびちび進むこの道。果たして到着することはできるのか?今日はどんな事を学べるのだろう・・・ 【HTML-lint 100点への道】


 ■本日の(現在の)チェックだ。
  181個のエラーがありました。このHTMLは 60点
   ・181個のエラー
   ・60点
   「ふつうです」


  追記に ▼


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


more

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


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


++++++++++++++++++++++++++++++++++++++++++++++++
■「5: line 417: メタ文字 `>` は `>` と
  書かなければなりません。 → 解説 117」
++++++++++++++++++++++++++++++++++++++++++++++++


 ※またこれかぁ。この ダメ入れ子問題。
  多いな。
 ・該当部分のソースは、
for(var s=((tempstrs.length)-1);s>=0;s--){ if(tempstr!=""){ tempstr += "            "; } tempstr += tempstrs[s]; }</script>

  あれぇ? ここは、JavaScript で
   <script type="text/javascript"></script>
   で、囲っているんだけど・・・
   ・1行で書いてるのが駄目なのかなぁ。
   > 修正トライ
var tempstr="";
for(var s=((tempstrs.length)-1); s >= 0; s--){
if(tempstr!=""){ tempstr += "            "; }
tempstr += tempstrs[s];
}
</script>
 ・・・駄目だ。
  ここもやはり、外部スクリプトにする必要がある、か。
   > 修正トライ
<script type="text/javascript" src="*****.js">
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■「1: line 450: リンクとリンクの間は
  適当な文字で区切りましょう。 → 解説 208」
++++++++++++++++++++++++++++++++++++++++++++++++


 ※まだ、これが結構残っている。
  ほとんどが、外部からの貼り付けで、
  「ソースをこのまま貼ってください。
   内容に変更をしないでください・・・」
  というものだけど、

  このくらいの変更は問題ないよな。
  ・</a><a href
   はだめで、 </a> <a href こうなれと・・・
   > 修正トライ
     ・・・OK.エラー消えた。


++++++++++++++++++++++++++++++++++++++++++++++++
■「5: line 511: <a> のアンカー名が空です。 → 解説 216」
++++++++++++++++++++++++++++++++++++++++++++++++


 ※解説では
  よく、開発途上で利用する # の件
   HTML-lint の解説では、、
<A> のアンカー名が空です。 
アンカー名を指定したつもりが
<a href="http://www.uso800.ac.jp/fake.html#">
となってるときに出る警告です。
"#" の後ろの名前がありません。
   ・・・とある。

  探したら、あったあった。
  ・Google翻訳へのリンクの設定が
   ・http://translate.google.com/translate_t#
   > 修正
     http://translate.google.com/translate_t
    ※ほかにもいくつかあったのでまとめて修正。
  ・trackword はタグが新しくなってた。
   (でも、相変わらず<br /> は、<br>だけど。)


 ●さぁ~て、このあたりから
  貼ってある、ブログパーツとの戦いだ。

  ホント、そろそろ「ブログパーツ」は
  (貼る)相手先の状況を考慮し、
   ・DocType宣言に対応した、ソースを
    用意すべきじゃないかなぁ。


++++++++++++++++++++++++++++++++++++++++++++++++
■MOTTAINAI クリック募金ブログパーツ
 

  1: line 600: <table> には summary 属性を
  指定するようにしましょう。 → 解説 189
  6: line 600: <script> には
   type 属性が必要です。 → 解説 86
  1: line 600: <script> の属性 `language` は
  あまり薦められない属性です。 → 解説 81
  5: line 602: <a> の href 属性の
   URI が空です。 → 解説 226
  1: line 602: <a> には name 属性と
   id 属性の両方を指定するようにしましょう。
   → 解説 222
  0: line 602: (<a> と </a> の間に
  空白文字しか含まれていません。) → 解説 52

++++++++++++++++++++++++++++++++++++++++++++++++


  ソースは、
  
<table width="148" cellpadding="0" cellspacing="0" bgcolor="white" style="border:1px solid #317900"><tr><td><script language="javascript" charset="UTF-8" src="http://www.ekokoro.jp/blogtool/blogtool-nouser_9e19b42e69f31ae5aa4a2787d461b115_mt.js"></script><noscript><p style="padding:4px; font-size:10px; color:gray; ">MOTTAINAIクリック募金ブログパーツを使うには、javascriptをオンにする必要があります。</p>< /noscript>
</td></tr>
<tr><td style="background-color:#2E8A0D;text-align:center;padding-top:3px;padding-bottom:6px;"><a id="ekokoro_sponsor_banner_link" target="_blank" rel="nofollow" href="" style="font-size:10px; color: #FFFFFF;"> </a>
</td></tr><tr><td bgcolor="#FFFFFF" style="text-align:center;padding-top:4px;padding-bottom:4px;">
<a target="_blank" rel="nofollow" href="http://www.ekokoro.jp" style="font-size:10px; color:#2DC1E8;">Powered By イーココロ!</a>
</td></tr></table><br />

 【修正】
 ・table の summary 属性は、なかなか敷居が高いね
  でも一応入れておこう
 ・JavaScript の組込・設置は 方法直しておく
  
<table width="148" summary="MOTTAINAIクリック募金ブログパーツ" cellpadding="0" cellspacing="0" bgcolor="white" style="border:1px solid #317900"><tr><td><script type="text/javascript" charset="UTF-8" src="http://www.ekokoro.jp/blogtool/blogtool-nouser_9e19b42e69f31ae5aa4a2787d461b115_mt.js"></script><noscript><p style="padding:4px; font-size:10px; color:gray; ">MOTTAINAIクリック募金ブログパーツを使うには、javascriptをオンにする必要があります。</p></noscript>
</td></tr>
<tr><td style="background-color:#2E8A0D;text-align:center;padding-top:3px;padding-bottom:6px;"></td></tr><tr><td bgcolor="#FFFFFF" style="text-align:center;padding-top:4px;padding-bottom:4px;">
<a target="_blank" rel="nofollow" href="http://www.ekokoro.jp" style="font-size:10px; color:#2DC1E8;">Powered By イーココロ!</a>
</td></tr></table><br />
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■イーココロ クリック募金ブログパーツ
 

  1: line 609: <table> には
   summary 属性を指定するようにしましょう。
   → 解説 189
  6: line 609: <script> には
   type 属性が必要です。 → 解説 86
  1: line 609: <script> の属性 `language` は
  あまり薦められない属性です。 → 解説 81

++++++++++++++++++++++++++++++++++++++++++++++++


 【修正】
 ・前述と同じ
  
<table width="148" summary="イーココロクリック募金ブログパーツ" cellpadding="0" cellspacing="0" bgcolor="white" style="border:1px solid #317900"><tr><td><script type="text/javascript" charset="UTF-8" src="http://www.ekokoro.jp/blogtool/blogtool_39f2c1a498fe13b977e8decfc92b71b1.js"></script><noscript><p style="padding:4px; font-size:10px; color:gray; ">イーココロクリック募金ブログパーツを使うには、javascriptをオンにする必要があります。</p></noscript>
</td></tr></table>
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■dff.jp クリック募金
 

  6: line 614: <script> には
   type 属性が必要です。 → 解説 86
  1: line 614: <script> の属性 `language` は
  あまり薦められない属性です。 → 解説 81

++++++++++++++++++++++++++++++++++++++++++++++++


  ※これも、JavaScript の組込み記述の違い・・・
 【修正】
  
<script type="text/javascript" src='http://bnr.dff.jp/001click.js'> </script>
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■RSSリスティング
 

  6: line 634: <script> には
   type 属性が必要です。 → 解説 86
  1: line 634: <script> の属性 `language` は
  あまり薦められない属性です。 → 解説 81
  7: line 634: <img> の align の属性値 `absbottom` は
  正しくありません。
   `top`、`middle`、`bottom`、`left`
   または `right` でなければなりません。
   → 解説 102

++++++++++++++++++++++++++++++++++++++++++++++++


  ※JavaScript の組込み記述の違い と
   気になるのは、
   ・align の属性値 `absbottom`
   HTML-lint の解説では、、
<TAG> の ATTR の属性値 `XXXX` は正しくありません。 
属性値として、取り得る値が決められているものが
多くあります。
例えば
 <DIV ALIGN> には LEFT、CENTER、RIGHT のいずれか、
 <BR CLEAR> には ALL、LEFT、RIGHT、NONE のいずれか
しか書けないなどです。
   ・・・とある。
   今回の場合、align="bottom" とすべき
   ということだな。
 【修正】
  
<div class="plugin-all" &align><a href="<%url>archives.html">サイトマップ(全ての記事)<br />を表示する</a><br />
▼ほんと最新の10件:<br />
<script type="text/javascript" src="http://rss.tc/feed/RssReader.aspx?url=http://metaboy.blog23.fc2.com/?xml&amp;displayRow=10&amp;enc=2&amp;dispTitle=true&amp;dispTime=false&amp;id=60574"></script><div style="font-size: 10px; text-align: right; margin: 2px ">Powered by <a href="http://rss.tc/" target="_top"><img src="http://rss.tc/images/rsstcicon.gif" alt="RSSリスティング" width="80" height="15" border="0" align="bottom" /></a></div>
<br />
</div>
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■Powerd by FC2
 

  7: line 829: <a> の
   id の属性値 `115188-2556-115982` は
  正しくありません。
  ・英字または_から始まる:を除く
   名前文字列(ID)でなければなりません。 → 解説 102
  1: line 829: <a> には name 属性と
   id 属性の両方を指定するようにしましょう。
   → 解説 222
  6: line 833: <img> には alt 属性が必要です。
   → 解説 86

++++++++++++++++++++++++++++++++++++++++++++++++


  ※すべて今までに学んだことばかり・・・
   でも、このid値は変えるとまずいよなぁ・・・
   (しかし、やるんだ、metaboy!)
 【修正】
  
<a href="http://blog.fc2.com/" rel="nofollow" target="_blank" id="fc2_115188-2556-115982" name="fc2_115188-2556-115982">
<small>ブログ</small></a>
<script type="text/javascript" src="http://cnt.affiliate.fc2.com/afftag2.js"></script>
<a href="http://cnt.affiliate.fc2.com/cgi-bin/click.cgi?aff_userid=115982&amp;aff_siteid=115188&amp;aff_shopid=26" target="_blank" rel="nofollow">
<img src="http://cnt.affiliate.fc2.com/cgi-bin/banner.cgi?aff_siteid=115188&amp;bid=2556&amp;uid=115982" width="100" height="60" border="0" alt="FC2 ブログ" /></a>
 ・・・OK.エラー消えた。

++++++++++++++++++++++++++++++++++++++++++++++++
■あし@
 

  6: line 867: <img> には
   alt 属性が必要です。 → 解説 86
  9: line 868: <style> を 866行目の
   <div>~</div> 内に書くことはできません。
   → 解説 43

++++++++++++++++++++++++++++++++++++++++++++++++


  ※さてと・・・
   ・alt タグは加えればいい
   ・ <style> は、ここで外部参照にしても
    エラー出るから、エラーさえ出さないようにするには
    外部JSで、document.write で、書き出すか・・・
 【修正】
  
<p><script type="text/Javascript" src="http://ashia.to/client/js.php?id=41528&amp;enc=euc"></script><a href="http://www.ashia.to/start/?cid=buser41528"><img src="http://www.ashia.to/images/ashiato_strat.gif" border="0" alt="あし@" /></a></p>
<script type="text/javascript" src="http://blog-imgs-26.fc2.com/m/e/t/metaboy/blogparts_ashiato20090525_1.js" charset="euc-jp"></script>
<ul id="seoparts"><li id="seoparts-img-li"><a href="http://seoparts.com/"><img src="http://seoparts.com/u80.gif" width="80" height="15" border="0" alt="seo" /></a></li></ul><script type="text/javascript" src="http://escape-u.seoparts.com/u.js?2/5/" charset="euc-jp"></script>
 ・・・OK.エラー消えた。

      あぁ、疲れた。
      今日はここまで。


 それでは
 ■現在のチェック (2009/05/25 19:39)
  83個のエラーがありました。このHTMLは 72点
   ・83個のエラー
   ・72点


   なんだよ。まだ「ふつう」だ。


 今度こそは・・・

commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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