看圖識HTML

做了一份簡易的網路語言, 讓大家可以看圖識HTML, 我也是這麼學HTML的, 當初選了一本最薄的書, 用視覺學習HTML。

學習HTML PDF檔案。(Learn HTML by examples - 這份有一些舊的做法, 應該要改成css了, 不要再用font tag來顯示顏色, 要改成<span style="color:red">紅字</span> )

HTML codes of Symbols

如果有需要可下載HTML editor, 其實用notepad就可以做的。用gvim來做editing, 它比notepad來得好, tags會出現不同的顏色。

時代越來越進步, 不會HTML也可以用code generators, 例如: 想要在網頁中包含紫禁城的照片, 就用iframe generator, 輸入URL即可。 Quackit也是一個程式製造器, 它可用在HTML, javascript, css等, 還有免費的圖片

HTML的顏色需參考:Color codes, Color names
三個原色是紅、綠、藍; 用16進位數字來表示, 0-9加上a-f; 若是每個顏色都用最高數字, #ffffff就是白色; 若是最低, #000000則是黑色。

如果想在網頁中顯示大於和小於的符號怎麼辦? 請參考escape characters列表。

多樣化的背景圖案, 點綴網頁。還有不少好玩的Flash動畫檔, 不過請不要放太多好玩的在網頁上, 因為會造成網路速度不夠快的訪客麻煩。 另外最好也不要放自動播放的背景音樂, 每看一頁都得被吵, 訪客很煩的。

想要在網頁中加漢語拼音又對齊嗎? 那就用ruby tag吧!

The browsers (IE and Chrome) that support the ruby tag will display the following.
supported browser display

The browsers (Firefox) do not handle the ruby tag will display on the side.
not support ruby

ruby code

下列是實作樣品:



(xué )
()
()
(zhōng )
(wén )
()
(jiā )
(shàng )
(hàn )
()
(pīn )
(yīn )



延伸閱讀: html entities, ascii html codes chars and symbols

有關系列: 顏色教學, 解碼駭客, CSS, xhtml validation, 練習跑馬燈, HTML5

1 comment :

Erin said...

謝謝ucs老師的分享和整哩! 很有幫助呢!
~Erin:):)