HTML

我們都知道當 IP 要對外存取時，會透過子網路遮罩來判斷目地的的電腦是否在同一個網段，若不是，則會透過路由器來選擇路徑，CountryTraceRoute 是一個路由器路徑追蹤工具，只要輸入網址或 IP，就可以查詢由本機電腦出發所經過路由器的 IP 位址、回應時間等，另外，CountryTraceRoute 還會顯示 IP 所屬的國家，還可以將查詢的結果匯出為 HTML 格式，所得數據可用來診斷網站連線的問題。

將網頁轉換成 PDF 檔案的線上服務不少，像是 HTML to PDF Converter 簡單實用的線上網頁轉 PDF 檔案(支援中文) 或是 Web2PDFConverter Tools 將網頁轉換成 PDF 格式 都有提供。CreatePDF 也是提供線上將網頁轉成 PDF 檔案的網站，只要輸入要轉換的 URL 網址，就可以進行轉換，轉換完成後，可直接下載到本機電腦且也支援中文。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式，可說是網頁的排版師，也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器，對於所需要的效果，可利用其產生器進行調整設定，便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。

想要在網頁上對「Button - 按鈕」進行樣式調整，通常會使用背景圖片或是使用 CSS 來調整按鈕的外觀，若要加上當滑鼠移到按鈕的上方或是離開，也會使用 Javascript 來加上，若對繪製這些圖片、Javascript 都不是很熟悉的話，還是要花一些時間來製作，若是偶而用用，建議可以到 CSS Button Designer 這個免費的按鈕樣式產生器來製作，除了可使用 CSS 改變按鈕樣式，也提供滑鼠移到按鈕的上方或是離開時的 Javascript ，製作完成後，直接複製所產生的 Code 便可應用的網頁裡，相當方便。

透過 HTML 的 <a> 標籤來產生連結，多數會使用文字或是使用圖片，但如果想利用 CSS 樣式表做來調整，甚至是產生一個按鈕的樣式，對初學者來說還是有點門檻，尤其是還要兼容不同廠牌的瀏覽器，更增初學難度。

階層樣式表 (Cascading Stylesheets，CSS) ，最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式，讓同一個元素可以有不同的樣貌呈現，不過對於初學者而言，要了解整個 CSS 語法規則並不容易，除了時間之外，如果有輔助的工具可以協助，相信可以更快的跨過門檻，CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器，其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化，用戶可以透過可操作的面板進行屬性值變更，且立刻可看到所產生的變化，完成整個調整，還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法，快速套用到元素上。

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

CSS Scanner 是一款極具便利性和直觀性的瀏覽器擴充功能，它能夠直接顯示出網頁上任何 HTML 元素所套用的 CSS 語法，操作上，只需在網頁上滑動滑鼠游標到任意 HTML 元素上，CSS Scanner 就會立即顯示出該 HTML 元素所使用的 CSS 語法及其相關屬性，並讓使用者能夠輕鬆地複製該語法，以供後續使用。

寫網頁時難免會有需要一些動畫效果，例如當滑鼠指標在按鈕、圖片、功能表上或離開時，或是希望做出具有專業水準個人檔案、新聞、產品卡時，如果是初學者想要從無到有，可能需要花費較長時間，要是可以參考別人已做出的效果，取得其程式碼再來修改成自己想要的效果，這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果，且每個都有效果展示，更提供 HTML、CSS、JQuery 完整的範例程式碼，用戶只需取得這些程式碼，稍加修改，就可以在自己網頁呈現，相當方便。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化，目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。若是有學習 CSS 3.0 的需求，可以來參考這份 CSS 3.0 參考手冊，內容從語法、參數、使用方法、瀏覽器相容性到語法範例均有詳細說明，是相當好的入門手冊。

寫網頁時，當需要應用一些特效，例如標題文字會閃動、旋轉等，以吸引讀者的注意，很多人都會考慮使用 JavaScript 來實現，如果要透過 CSS 來呈現，對 CSS 語法不熟悉，則變成是一個困擾，即便寫出，還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效，支援 Edge、Chrome 主要瀏覽器，選好效果可立即檢視與產生 CSS 語法，複製即可使用，簡單方便。

對 HTML 的初學者來說，如果有 HTML 與 CSS 相關的工具來輔助入門，將可事半功倍，以網頁的製作來看，通常都少不了 table 與 div 的應用，如果要有些變化，就需要在色彩、框線、文字、背景等多加著墨，HTML Table Styler 📅 CSS Generator 是一個免費互動式的 HTML 表格與 CSS 線上程式碼產生器，透過操作方便的調整介面，就能產生出 Gradient、Box Shadow、Text Shadow、Color、Font、Table、Column Border、Border Radius、Transform、Background 各種樣式，每種均可產生 HTML、CSS Code，且可預覽，另外，針對 table 要改用 div 也提供轉換器，讓初學過程大幅減短，兼顧工作效率。