KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~

（X）HTMLや「CSS（Cascading Style Sheets）」を記述しながら

うまく表示されなかったり、CSSがうまく適用されなかったりしていませんか？
 

私も何回と経験しています。
 

間違い探しって大変ですよね。

そこで、自力では難しい時には他の力を借りるのが早い（笑）

ということでチェックサイトがあるのでご紹介します。
 

これで効率アップ図ってみてください。

1.HTML Validator

おなじみになっているHTMLの文法が正しいかどうかチェックするツール

http://validator.w3.org/

あと、「Another HTML-lint gateway」も使えます。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

2.CSS Validator

CSSをチェックするツール

http://jigsaw.w3.org/css-validator/

これで正しい(X)HTMLとCSSを記述してください。

チェックすると言えばこんなサイトもチェックしてみてはどうですか？

引越し奉行

http://www.skt-products.com/contents/hikkoshi.html

クスッと笑えます。

SKTのサイトはとっても面白いので是非「チェックしよう！」

さてさて、今回は前回の続きのお話です。


前回は、JavaScriptライブラリーの中のLightBoxという機能を使って、
画像表示時のかっこいい演出をやりました。


前回の記事　＞＞　JavaScriptライブラリー


今回やっていくのは、その応用で、
複数の画像を連続で表示していくという演出です。


次のリンクをクリックしてみましょう。

LightBoxサンプル


今回もLightBoxを使用していますが、
前回と違うのは、「Next」や「Prev」などのボタンが増えていて、
それをクリックすることにより、
すぐさま次、もしくは前の画像を表示できるという点です。


これも簡単なHTML側の記述をしているだけなので、
JavaScriptの記述は1行も書いていません！！


このように、最近では非常に便利なJavaScriptのソースコードを
元から用意してくれていて、
使う側は、単純に使い方が分かっていれば良い状態になっています。


次回は、エレベータメニューについてやっていきます。


それではまた。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでHTMLやJavaScriptを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

ホームページ（以下HPと省略）を観覧している方であれば
バナーを目にする機会が多いと思います。

バナーとは、HPを宣伝するためのもので、HP上に散りばめられています。


会社や自身で作ったHPの
「重要な情報のページ」へ飛ばせたり、「SEO対策（外部リンク）」を貼ったりと、
色々な役割があります。
 

基本的には、そのバナーを押すと、
その指定したURLのHPが開く、ボタン的な使い方をします。
 

バナーには、標準のサイズがあります。
 

できるだけその標準にあわせて作成していくことが良いとされています。 
 

標準サイズ

Rectangles and Pop-Ups（長方形＆ポップアップ）

300 x 250 (Medium Rectangle)?

250 x 250 (Square Pop-Up)?

240 x 400 (Vertical Rectangle)?

336 x 280 (Large Rectangle)?

180 x 150 (Rectangle)

Banners and Buttons（バナー＆ボタン）

468 x 60 (フルバナー)

234 x 60 (ハーフバナー)

88 x 31 (マイクロバー)?

120 x 90 (ボタン1)?

120 x 60 (ボタン2)?

120 x 240(縦バナー)?

125 x 125(正方形ボタン)?

728 x 90 (リーダーボード)

Skyscrapers（スカイスクレイパー）

160 x 600 (ワイドスカイスクレイパー)

120 x 600 (スカイスクレイパー)

300 x 600 (ハーフページAD)

この中でHP上でよく使われているバナーサイズは、

●　468 x 60 (フルバナー)（国際標準）

※ クリックで拡大します


一般的な良く見るサイズ（少し大きすぎる場合もあり）

●234 x 60 (ハーフバナー)※国際標準ではありません

フルバナーの横幅を半分にしたもので、国際標準サイズでなく、
日本でよく使われている。（フルバナーよりコンパクトで良い）

●　88 x 31 (マイクロバー)（国際標準）

かなり小さいサイズですのでデザインなどが、
大きいサイズの物より難しくなります。

● 120 x 90 (ボタン1)（国際標準）

商品などを見やすく表現したい時に使うと良いでしょう。

● 120 x 60 (ボタン2)（国際標準）

マイクロバーほど小さくもなく大きすぎないので、
ボタンとしてちょうど良い感じの大きさです。

● 125 x 125(正方形ボタン)（国際標準）

正方形という事もあり、デザインしやすく、視覚的な効果があるでしょう。

バナーには基準がありますので、
HPのレイアウト（どのように情報を伝えたいか）により変更しましょう。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでHPデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

JavaScriptってご存知ですか？


元々は、
Netscape Navigatorというブラウザソフトを作った、
ネットスケープコミュニケーションズと、
Java言語を作った、Sun Microsystems社が共同開発した、
Webブラウザ上での動作を目的としたスクリプト言語の事です。


これを使うと、例えば
ユーザ入力フォームに抜けがあるのに、送信しようとすると、
「メールアドレスは必須です」のような形でメッセージを出したり、
クリックすると、背景画像を切り替えるなど、
動きのあるページを作成することができます。


さらに、最近では、「ライブラリ」と呼ばれるものがあります。


これは、あらかじめ作成されているJavaScriptのファイルのことです。


昔は、プログラマが１から作成して、ようやくひとつの動きを完成させていましたが、
これだと時間がかかり過ぎるし、品質もまちまちになってしまいます。


これに対し「ライブラリ」とは、
「もう既にプログラム部分は出来ているから、
あとは"呼び出して使うだけ"にしたもの」
というわけです。


いまいち、しっくりこないと思いますので、
すごく有名な、LightBoxというライブラリを使用したサンプルを見てみましょう。


次のリンクのページに行き、画像をクリックしてください。

LightBoxサンプル


カッコイイ画像表示の演出ですよね？


でもこのHTMLファイルを作成する上で、
著者はJavaScriptの記述を「ただの１行も書いていません！！」


驚きですねー。


ソースを表示していただければ分かりますが、
HTMLのタグしか記述してないのです。
 

このように、プログラムを一切記述しなくても、
（もしくはほんのちょっとだけ記述するだけで）
便利なJavaScriptの機能が使えるものが、「ライブラリ」というわけです。


非常に簡単に扱えますので、みなさんも是非、
使ってみてはいかがでしょうか。


次回は、複数の画像を１グループにして表示する仕組みを見ていきます。


それではまた。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでJavaScriptを学びたい方は、Program講座へ！
http://www.kenschool.jp/Program/index.html

以前に一度「HTML5」に関しての記事を書きましたが、
最近また話題が沸騰してきたので、再度記事にしてみたいと思います。

現在、もっとも主流になっているHTMLのVerは、XHTML1.0です。
 

少し前までに使われていた（今もまだその時のまま使われている）ものが
HTML4.01です。

では何故HTMLに、このようなバージョンアップが必要か？
というところから説明します。

HTML4.01の時代には「HTMLを使ってデザインをする」という考え方が中心で
テーブルレイアウトを使用して、どのブラウザでも同じようなレイアウトデザインを
実現することに重きをおいてきました。

ただし、この方法には大きな欠点があります。
 

テーブルを本来の「表」としての使い方ではなく、
レイアウト用のフレームとして使ってしまうため、
コンピューターがデータを正確に理解することができません。

コンピューターが理解できないということは、
スクリーンリーダー（音声読上ソフト）などを使ってサイト閲覧をしている
視覚に障害のある方には、ものすごく不便な作りになってしまいます。

W3Cの目標とする
「全ての人にアクセスしやすいサイトデザイン（ユニバーサルデザイン）」
の考え方には到底およばないものになっていました。

そこで、もう少し厳密にルール付けされているXHTML1.0が推奨されました。
 

ただし、あくまで文章構造上のルールが厳密になっただけです。

簡単にいえば、見出しや段落、箇条書きなど
「その内容が何を表すのか？役割をつける」ということになっただけです。

それだけでは不十分なため、さらに
「全ての人にアクセスしやすい」ということを念頭にHTML5が作られています。

以前よりも構造を明確にするために

• 本文内の前置きを表す<header>タグ
• メインの文章を表す<article>タグ
• ナビゲーションを表す<nav>タグ
• フッターを表す<footer>タグ

上記のようなタグを使用すれば、2ページ目以降でも、
同様の内容が記述されることが多い部分は飛ばし、
本文の部分だけを読むことができるようになります。

まだまだ噂の領域をでませんが、2012年にW3Cから勧告され、
2022年までには完全に普及すると言われています。

ちなみに・・・既に多くのモダンブラウザには実装されており、
今から十分練習できます。
 

ただし気をつけなければならないのが・・・
InternetExplorerに関しては、「8」でさえ実装されておりません。

「9」に期待ですね^^

参考サイト　W3C　「HTML4とHTML5の違い」

http://dev.w3.org/html5/html4-differences/Overview.html

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html
 

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

現在主流で使われているHTMLは「XHTML1.0」や「HTML4.01」となっています。
 

HTML4.01は比較的ルールが簡単な仕様、
XHTML1.0はHTML4.01のルールを少し厳しくし、XMLに近づけた仕様となっています。
 

さらに進化したものがHTML5ということになるわけです。

ではHTML4とHTML5では何がどう変わったのでしょう？

「違い」が載っているWebページがあります。W3Cのサイトです。

http://www.w3.org/TR/html5-diff/

上記ページの3.1「New Elements（新要素）」に新しく増える命令が載っています。

• section
• atricle
• header
• footer
• nav
• dialog

など他多数

セクション分けをする要素や、記事をあらわす要素、
ヘッダー、フッター、ナビゲーションを表す要素などが増えています。

フォームの要素も

• tel
• url
• email
• date
• month
• week
• number

など

明確に何のデータなのか判断ができるようになっています。

また

• 3.2「New Attributes（新属性）」
• 3.3「Changed Elements（変わる要素）」
• 3.4「Changed Attributes（変わる属性）」
• 3.5「Absent Elements（廃止要素）」
• 3.6「Absent Attributes（廃止属性）」

が紹介されています。

いくつか抜粋してご紹介すると

• big
• center
• font
• u

は「better handled by CSS（CSSによって操られるべき）」という理由で廃止。

• frame
• frameset
• noframes

は「ユーザービリティ、アクセシビリティ」の理由で廃止。

• acronym
• applet
• isindex
• dir

は「代わりの命令がある」ので廃止のようです。

また同様にdiv、p、h1～h6、tableに対するalign属性や
bodyのbackground属性、table、tr、tdのbgcolor属性なども
CSSで指定するべきという理由で廃止になります。

だいぶ見慣れたものも廃止になってしまうものが多く、今後はデザインだけでなく
「正確な文章構造を作るスキル」も必須になってくるようです。

すでに現時点でもHTML4.01から比べれば、XHTML1.0で文章構造を
明確に作ることに慣れてはきていると思いますが、
今後はもっと細かく決まりができますし、
何よりもSEOの観点からとても重要になります。

今の内にきちんと身に付けておきましょう^^

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

今回は
ホームページの印刷をできなくするテクニックを
ご紹介したいと思います。

普通にホームページを作成すると、印刷はそのままできるかと思いますが
HTMLのファイルの中か、CSSのファイルの中に

@media print {
     body { display: none; }
}

と上記の命令を入れると、印刷不可能になります。
 

HTMLに直接入力する場合は、命令文がCSS扱いになりますので、
headタグの中に

<style type="text/css">
 @media print {
     body { display: none !important; }
 }
</style>

という入力でOKです。
 

CSSのファイル内に記述する場合は、直接入力できますので、
もし作ったホームページが印刷されたくないという時には
使ってみて下さいね！！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

特殊文字の書き方！！

みなさん、HTMLには
特殊な文字をキーワードで表示をする「文字実体参照」と呼ばれる方法や、
特別な数値で表現をする「数値文字参照」という方法があるのをご存知ですか？？

例えば、代表的なのに著作権表示に使われる「（C）」の記号は
「&copy;」→文字実体参照
「&#169;」→数値文字参照

この機能は、キーボードから入力できない文字を表示させるために使われたり、
HTML上では文字ではなく意味のある記号として認識してしまう
一部の「＜」や「”」などを入力するのに使ったりします。

入力するときは

1. 「＆」アンパサンドで始まり、「；」セミコロンで終わる
2. 数値文字参照の場合は「＃」が付く
3. 半角で

■HTMLで特別な意味を持つ文字

「＜」→&lt;　か　&#60;
「＞」→&gt;　か　&#62;
とかとか・・・

■よく使われる特殊記号

「(R)」→　&reg;　か　&#174;　 （登録商標）
「TM」  →　&trade;　か　&8482; （商標に使用）
などなど・・・

あるんですよ！！

ちなみにキーボードにある＠（アットマーク）だって表示できますよ！
 

「&#64;」で！！
 

メールアドレスを「＠」を使わずに記述できます。
 

スパムメールを大量配信するために、ホームページ上に掲載されている
アドレスを自動的に収集するプログラムがあるらしいのですが、
「＠」の記号を探しているようなのです・・・。

こわい・・・
 

なので、「＠」を使わなければ、収集されずにすむ可能性が高くなる！！
 

・・・ごめんなさい！必ずではないけれど・・・

こんなのもあるんだなって、頭の隅っこにおいて頂けると嬉しいです。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

アメリカでは、オバマさんが大統領に就任し、
日本では「低額」いや「定額給付金」が話題になっています。

この定額給付金、お金を給付して、給付金以上の贅沢品などを買わせ、
お金を周るようにしたいらしいですね。

テレビでやっていたのですが、贅沢品を買う年代で一番高いのが、
10代～20代の女性だそうです。

ただ、給付金を貰ったらどうするかの答えに、貯蓄すると一番答えたのも、
10代～20代の女性だそうです。

あとは、ほとんど生活費とか、貯蓄とか、中には
滞納している税金を払うと言う答えも(笑)。
 

贅沢品に当たる事は、そのアンケートでは少なかったそうです。

これだけを見てしまうと、国会議員のお偉いさん方が
描く結果どおりにはならない気が･･･。

なんか先に、お金をあげるから、
将来、増税の時に文句言わないでね。
的に聞こえるのは自分だけでしょうか？

さて、前置きが長くなって申し訳ございません。
サイトとって、それって本当に必要なの？
って思うものが多々あります。

これって、本当に必要ないものの場合、
ユーザーをイラつかせる原因になってしまい、
訪問者の減少につながってしまいます。

例えば、

• デザインに凝りすぎてメニューが見えづらかったり。
• SEO対策の事ばかり考えていて、ユーザビリティの低いサイト。
• 何度クリックしても、目的の場所までに行かない。
• 画像が一杯あってなかなか、ページを読み込まない。
• サイトのドメインが変わった時に、「移転しました」のメッセージのまま、新しいページ移動しない。
  
  etc

サイトを作るときには、
まず、ユーザーのイラつきの無いサイト
を作るように心がけたいものです。

話は戻りまして、決して給付金が要らない訳では無いです。
貰える物は、何でも貰います!!

--------------------------------------------------------------------------------

パソコンスクール KENスクール北千住校　Webインストラクター
http://www.kenschool.jp/school/kitasenju/index.html

KENスクールでサイトのデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

さてさて、みなさんこんにちは。

最近は、ニュースなどで話題になると、
すぐに検索キーワードランキングが上がりますよね？
または、ネットの世界で話題を呼び、
ランキングが上がっていったりもします。

これは、検索されたキーワードを、
ポータルサイトが溜め込んでおいて、
それを元にランキングデータを出しているわけです。

さらに、最近Googleで調べ物をした人は
お気づきだと思いますが、

最近のGoogleは、キーワードを入力したときに
そのキーワードでランキングが高いものを表示してくれます。

下記の写真のような形ですね。

これは実はAjaxというものを使用しています。

Ajaxとは、Asynchronous JavaScript + XML の略で、
ページ上で、JavaScriptを使って、
常にリアルタイムに情報を取得する仕組みです。

前回、「Google Map」はAjaxで作られているというお話をしましたが、
検索する機能においてもGoogleはAjaxを使用してるんですね。
やりますねぇーGoogle。

まだまだAjaxを利用した機能はありますが、
それはまたの機会にご紹介いたします。

それでは、またー（＾o＾ノ

 HTMLでリンクを設定する命令は「a」です。
フルスペルは「anchor」、読み方は「アンカー」です。

HTMLでのリンク以外では、InDesignなどで文章の中に配置し
扱いとしては文字を同じ扱い（改行などを入れると文字と一緒にずれていく）
の画像のことを「アンカー付グラフィック」などと呼びます。

もともとは「船の錨（いかり）」のことです。

http://www.sophia-it.com/content/anchor

運動会の最後にあるクラス対抗リレー。リレーの最終走者のことも
「アンカー」と呼びます。

実はリレーの最終走者をアンカーと呼ぶのは、別の競技「綱引き」が語源のようです。
もともとは「綱引き」で一番後ろにいる人が船の錨のようにどっしりと動かない
ことからアンカーと呼ばれ、最後の人＝アンカー＝最終走者となったとのこと。

綱引きが語源なので、HTMLのリンクなどはつながっている印ということでここから
このような名前がついたのかもしれませんね^^
 

HTMLやXHTML、はたまたCSSなどで出てくるタグや属性、プロパティなど…
どんな読み方なのか…
どういう由来で命名されたのか…

気になったことはありませんか？

KEN SCHOOL自体では、授業で概ね一貫した呼称を利用しているようですが、
私自身、ちゃんとしたスクールで勉強したわけではないので、
HTMLを勉強開始した当初は、かなり気になったものです。
(今となっては呼称などはどうでもよいと思っていますが)

英会話も一時期は、日常会話に不足がない程度にはできましたが、
普段使わないようなものに関しては、全くといっていいほど分からない状態で、
Webで調べようにもサイトの絶対数が今ほどありませんでした。

現在なら解説しているサイトも存在しますが、
当時は同業のデザイナーさんの呼称をこっそりと聞き耳を立てたりしたものです。

例を挙げますと『width』
これは、幅をあらわすものです。

これは、『幅が広い』をあらわす『Wide』に『th』を語尾につけたものですが、
このままで、発音するとなると…

「ワイズ」とか「ワイドス」になるんじゃないか？って気がしますよね。

私が教わったときは「ワイズ」と習いました。
ちゃんとしたスクールじゃなくて働いてる人に聞いたのですけどね。

で、制作会社で働いている友人が『ウィドス』と呼称しているの聞いて、
私自身も気になってgooの英和辞書で発音を聞いてみたりしたことがあります。

それ以来、『ウィドス』と呼称していますが、それぞれ呼称が違うこともしばしばあります。

ここで私が思いついたものを少々挙げてみたいと思います。
呼称の仕方なのですが、特にこう読まなければならないといった決まりは、もちろんありませんし、強制するものでもありません。
一番大事なのは、使えることなのですから…
上記を踏まえた上で参考になれば幸いです。

<h1>～<h6>　　ヘディング
<hr> 　　ホライゾンタルルール
<a href> 　　アンカー ハイパーリンク リファランス
<br>　　ブレイク
<p>　　パラグラフ
<img src>　　イメージ ソース
alt 　　オルタネイティブ
<div> 　　ディヴィジョン

まだまだ、あると思いますが今日のところはここまで！！！！１１！
 

Webページを作成する上でひとつ重要な要素となるのが「パンくずリスト」です。

よくページの上部に見るテキストリンクで、どのようにリンクをたどってくると
現在のページにたどり着けるのかを階層構造で表しています。

コンピューターとインターネット＞Web開発＞書籍＞入門書

などと比較的ページ上部に書いてありますよね^^

結構有名な話なのでご存じの方も多いかもしれませんが・・・
名前の由来は童話「ヘンゼルとグレーテル」です。

主人公たちが森の中で道に迷わないように、自分たちの持っていたパンを
少しずつちぎって「道しるべ」としておいていくシーンが由来です。

まぁまぁ、サイト内で訪問者がどのページを見ているか迷わないようにするための「道しるべ」ってことです。


ここから少し技術的な話になりますが・・・

パンくずリストはSEO的な効果も発揮します！！

パンくずリストをサイト内に配置することで圧倒的に内部リンクを増やすことができます。
Yahoo！では外部リンクと内部リンクは別物として評価されるようですが、Googleでは内部リンクも
外部リンクと同じ程度の評価を受けることができます。

デザイン的にも自然で、ユーザビリティもよく、SEO効果もある「パンくずリスト」
サイトに配置してない方はぜひ導入してみてください^^

さて、余談ですが・・・
私には小さな子供がおりまして、先日本屋に行ったときのこと。

子供用の300円ぐらいの本ってありますよね？その中からたまたま「ヘンゼルとグレーテル」を
欲しいと^^パンくずリストのシーンが見てみたいのもあり購入、家に帰って読んでみたところ・・・

なんと「パン」ではなく「石ころ」を道しるべに使っていました。
やはりパンだと「食べ物を粗末にする」イメージなんですかね・・・・

「これじゃあ『石ころリスト』じゃん！！」（って心の中でツッコミ）

私は大の野球好きです。熱狂的な阪神ファンです。

なので、今年のペナントレースが楽しくてしょうがないのですが（笑）、
以前テレビで、「プロ野球の、セ・リーグは何の略でしょうか？」というクイズをやっていました。

当然、「セントラル・リーグ」の頭文字から「セ・リーグ」なのですが、
そういえば、Webの世界でも頭文字などを組み合わせて付けられたものが多々あります。

代表的なもので「HTML」がそうです。
そこで、今回は「HTML」とはどういう意味だろうか？と言う事について考えてみたいと思います。

HTMLとは、「Hyper Text Markup Language」の頭文字をとったものです。
この名前を少し丁寧に解釈すれば、「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。

では、もう少し細かく単語ごとに見てみましょう。

• HyperText:
  ハイパーテキストとは、「テキストを超えたテキスト」というような意味です。
  　　　　　つまり、通常のテキストにない機能を備えた「超」テキストというわけです。
• Markup:
  マークアップとは、普通の文書に目印を付ける（マークアップする）
  　　　　　ことで、その部分が文書中でどんな働きをしているか
  　　　　（見出しなのか、段落なのかなど）をはっきりさせようという考えです。
• Language:
  これは、英語とか仏語とか、あるいはプログラミング言語などの「言語」
  　　　　　というよりも、このマークアップをどんなルールで行うかをきちんと
  　　　　 決めておくための約束、つまり「文法」という程度の意味にとらえた
  　　　　　ほうが良いでしょう。

では、どの辺りが「テキストを超えたテキスト」なのでしょうか？

文書のある部分と別の文書を「関連づける」ことをハイパーリンク（あるいは単にリンク）といい、その機能を持つ文書のことを「ハイパーテキスト」と呼びます。

つまり、「テキスト」とはただ単に表示をするだけのものに対し、「ハイパーテキスト」とは、他の文章に飛ぶことの出来る、リンク機能のあるテキストと言うことになります。

でも、「超えた」と言う意味を持たせたいのなら「Super」とかでもいい気がします。
某有名漫画のように･･･。
そうすると、「HTML」ではなく「STML」になるのか･･･。
マークアップ言語の源流になっている「SGML」と似ている上に、
なんかしっくりこないですねぇ～。

Webの世界では「PHP」や「Perl」と言う言葉をよく耳にしますが、
これらも文字の組み合わせから出来ています。

これらの単語をそれぞれ紐解いていくと、また違った見方が出来るのではないでしょうか？