象ならわかるWebオーサリング

「猿でもわかる***」という言い方が流行ったことがありましたが、これは猿にもその人にも失礼。というわけで、「象なら判る」というページであります(*1)。

Webオーサリングの範囲は広いと思いますが、HTML/CSS/WEB用スクリプトの基本を「子象」の段階から「マンモス」に至るまで幾つかにわけて、メモしておきます。

リンクの見方:それぞれ、左はHTMLファイルのソース、右はHTMLで普通に見た場合。見比べてください。

どちらもポップアップ窓で開きますので、沢山窓が開いているのを気づかずエライことになりますので、ご注意を。時々窓を閉じてね。


生まれたて象

単純な文字記述

HTMLソース(popup) HTML:単純な文字記述(popup)

赤ちゃん象

p要素で段落を区切る

HTMLソース(popup) HTML:p要素(popup)

h要素で見出し

HTMLソース(popup) HTML:h要素(popup)

ol/ul要素でリスティング

HTMLソース(popup) HTML:リスティング(popup)

画像を入れてみる

HTMLソース(popup) HTML:画像(popup)

赤ちゃん象、「はしか」にかかる

「文字化け」

HTMLソース(popup) HTML:文字コードの違い(popup)

「文字化けなおる」

HTMLソース(popup) HTML:文字コードの違い(popup)

小学生象、0点を取る

HTMLの文法がおかしいんじゃね?

文字化けが直ったからといって喜んではいけない。

ここからがHTML文法問題の理解が始まる。

http://「ひみつ」/htmllint/ (*2)

にアクセスして、下画像のゲートウエイサーヴィスのリンクに行ってください。

そのサイトは、HTMLの文法を自動チェックするプログラムサイトです。


/misc/webAuthoring/anotherHTML.jpg


そこで、上のページ

http://radio-age.com/misc/webAuthoring/rawtext/case7.html(popup)

つまりは

http://radio-age.com/misc/webAuthoring/rawtext/case7.html

のURLを下記の画像のように入れてチェックしてみると。。。

/misc/webAuthoring/anotherHTML2.jpg


採点結果は


/misc/webAuthoring/anotherHTML3.jpg


わはははは。落第。

HTML文法チェックプログラム Another HTML-lint

上のプログラムはプログラマ石野恵一郎氏の超有名プログラムAnother HTML-lintです。

石野さんのfacebook −>https://www.facebook.com/people/Ishino-Keiichiro/100002014744749

なおこのページ

http://radio-age.com/misc/webAuthoring/index.html

のチェックをすると98点。100点はとれてませんが、今のところ象さんよりいいみたいです。


/misc/webAuthoring/hereHTMLcheck.jpg


*1: いわゆるポリティカルコレクトネスです(笑

*2: 負荷がかかるので、一般的にこのプログラムサイトのURLはあまり公開されていません。

this file --> last modified:2012-03-31 13:53:03