top


総投稿数 本 
no_

スポンサーサイト

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

HTMLlint:おざなりになっている、HTMLのベース。html-lint で追究して常に学び直さねばならない・・・ 【HTML-lint 100点への道】

 2009-04-29
 毎日
 ・ブログに原稿を書き
 ・様々な実験を行い
 ・面白いパーツを(探してきて)貼る

 当然、HTMLソースは日々変わり、いつのまにか
 正しい書き方からは程遠い状態になる。

 それを気にしながらも、「仕方が無い」と一笑に付し
 ただ、原稿を書くことだけに時間を費やす。

 ・・・それも、や、なんだよねぇ。

 で、これを(HTML-lint で調べなおすこと)機会にして
 同時に、不完全な知識や技術を学びなおすこと
 を同時に行なえば それは「いいんじゃないのか」

 ・・・ということで。

目指せ! html-lint で100点への道
Another HTML-lint gateway
Another HTML-lint gateway 「満点で慢心しないでください。」
 というコメント・・・
 ・・・あぁ、慢心してみたい



 それでは
 ■スタート時(本日)のチェック
  スタート時(本日)のチェック
   ▼
  839個のエラーがありました。このHTMLは -13点
   ・839個のエラー
   ・-13点

・・・さぁ、直すぞ。

  追記に ▼

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


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

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

++++++++++++++++++++++++++++++++++++++++++++++++
■「6: line 1: XHTML1.0 では
 XML宣言をすることが強く求められています。
  → 解説 21」
++++++++++++++++++++++++++++++++++++++++++++++++

 ・現在この「創るmetaboy」では、HTMLソースの最初に
  ・XHTML1.0 Transitional
   としての宣言がしてある。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">

   さて、この宣言についてのおさらい。

   このあたりの知識は、
   ・本家
Another HTML-lint gateway
HTML 4.01 Specification W3C Recommendation
  24 December 1999

 ・・・ などよりも、

   多くの先人が、素晴らしい解説サイトを
   公開されている。

W3G - World Wide Web Guide
W3G - World Wide Web Guide まるで、公的機関のようなサイト
 だけれど、個人で、「上田 遼」
 さんという方が、公開されいる。
 とてもわかりやすい、素晴らしい
 サイトだ。

 ・・・ W3G - Author:上田 遼について
    という頁内容も、(なかなか)楽しい

   他にも、いくつも、役に立つ情報サイトが存在する
XHTMLによるページ作成の注意点 ◆XHTMLによるページ作成の注意点


XHTML1.0要約 ◆XHTML1.0要約


XHTML1.0 Transitional ◆XHTML1.0 Transitional



   で、今回のエラー内容である
   「XHTML1.0 では、XML宣言をすることが強く求められています。」

   HTML-lint の解説では、、
XHTML では XML宣言をすることが強く求められています。
XHTML1(J)では、XML宣言をするように強く求められています。例えば次のようなもの。
<?xml version="1.0" encoding="UTF-8"?>


   上記情報サイトの情報によれば、
 ・XML はデフォルトの文字コードに Unicode の "UTF-8"、
  または "UTF-16" が設定されているが、
  それ以外の文字コードを用いる場合は、
  HTTPヘッダなどで文字コード情報を設定している場合を除き、
 ・必ず当該文書で使う文字コードをその冒頭に
  XML宣言で追加指定しなければならない。
 とある(XHTMLによるページ作成の注意点

   ・一応、head の中で、
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
   としているのだが
   これでは不十分、ということか。

------------------------------------------------
◇頭に
<?xml version="1.0" encoding="EUC-JP"?>
   を入れてみる
  → 再チェック!
------------------------------------------------
 ・おぉ!エラー表示が消えたぞ。クリアだ。 +6点 獲得。



++++++++++++++++++++++++++++++++++++++++++++++++
■「1: line 76: onclick 属性を使うときは
  onkeypress 属性も指定しましょう。
  → 解説 150」
++++++++++++++++++++++++++++++++++++++++++++++++

 ・該当部分のソースは、
  該当部分のソース
  ・ブログカスタマイズで、
   ・ヘッド部分を固定 させているところ(>過去記事
<input type="checkbox" id="ck1" name="ck_headonoff" value="1" onclick="javascript:headerStayOnOff();" /><label for="ck1" style="color:#003CB3;text-decoration: underline;">ヘッド部分を固定</label>

   ・キーワード検索のボタン のところ(>過去記事
<input type="text" size="30" id="q1" name="q" value="お探しのキーワードは?" maxlength="200" />
<input type="button" value=" 検索 " onclick="javascript:formCheck();" />


   HTML-lint の解説では、、
ATTRA 属性を使うときは ATTRB 属性も指定しましょう。
スクリプトのイベント処理では、装置非依存性を確保するために、
次の属性は対で使用するように、
アクセス指針技術文書4.12.2(J)で薦められています。
onmousedown + onkeydown
onmouseup + onkeyup
onclick + onkeypress

   ということだ。(アクセス指針技術文書4.12.2(J))

   ・この問題に関しては、面白い記事をみつけた。

onclickとonkeypressの重複
onclickとonkeypressの重複 W3Cのアクセシビリティ指針
 に素直に沿って「onkeypress」を記述すると
 重複問題が起こり、それに対応するための
 意見交換。

 ・・・ しかし、開発者の方々は
     ほんと、まじめな方が多い。

   他にも、同じ問題についての記述が存在する
イヴェントハンドラ - JAVAスクリプト ◆イヴェントハンドラ - JAVAスクリプト


onclick メモ ◆onclick メモ


【提案】onkeypressの正しい併用の仕方! ◆【提案】onkeypressの正しい併用の仕方!(あんちもん2.Lab)



   ・いろいろ試行錯誤したけれど
    上記「あんちもん2.Lab」さんが提案されていた方法を
    スクリプトで挿入
function keyPressFilter(evt,op) {
var keyCode;
if (evt) {
keyCode = evt.keyCode;
} else {
keyCode = event.keyCode;
}
// ↓[Enter]キーが押されたかどうかの判定
if (keyCode != 10 && keyCode != 13) {
return true;
} else {
if(op==1){ formCheck(); }
return false;
}
}
   を用意して(オプションつけて)
   エラー指摘されているソース変更
<input type="checkbox" id="ck1" name="ck_headonoff" value="1" onclick="javascript:headerStayOnOff();"  onkeypress="return keyPressFilter(event,0);" /><label for="ck1" style="color:#003CB3;text-decoration: underline;">ヘッド部分を固定</label>  
<input type="text" size="30" id="q1" name="q" value="お探しのキーワードは?" maxlength="200" onclick="javascript:return keyPressFilter(event,0);" onkeypress="javascript:return keyPressFilter(event,1);" />
<input type="button" value=" 検索 " onclick="javascript:formCheck();" onkeypress="javascript:return keyPressFilter(event,1);" />
   ・IE/Firefox/Chrome で
    動作確認

------------------------------------------------
◇一応思い通りのうごきなので、
(ひとまず)これでいいか・・・
  → 再チェック!
------------------------------------------------
 ・おぉ!エラー表示が消えたぞ。クリアだ。



++++++++++++++++++++++++++++++++++++++++++++++++
■「9: line 103: <strong> を 103行目の <script>~</script> 内に
 書くことはできません。<strong>~</strong> 内に
  <script> を書くことはできます。
  → 解説 43」
++++++++++++++++++++++++++++++++++++++++++++++++
  あぁ、これねぇ。

 ・該当部分のソースは、
  
<script type="text/javascript">document.write("総投稿数 <strong>" + numall_items+ "</strong> 本 ");</script>

  この FC2ブログ で「投稿本数」表示させたくてねぇ、
  ・ブログカスタマイズで、
   ・「総投稿数」を表示 させているところ(>過去記事
<?xml version="1.0" encoding="EUC-JP"?>


  単純に、本数のところ太字にしたかったんだけど
  このやり方は、まずい わけだ。

   単純に修正。
総投稿数 <strong><script type="text/javascript">document.write(numall_items);</script></strong> 本 


------------------------------------------------
◇表示に変化無く、大丈夫のようだ。
  → 再チェック!
------------------------------------------------
 ・クリアだ。


 よし、今日作業出来る時間はこのくらいだ。
 それでは
 ■現在のチェック (2009/04/29 18:44)
  839個のエラーがありました。このHTMLは -13点
   ・835個のエラー
   ・-7点

・・・これ、なかなかいいかも知れないな。
   エラー修正をきっかけとして
   復習の時間。
   続けます。
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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