HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化
現在比較少有機會從頭到尾、以原始碼編寫一個網頁,記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站,最早的網頁就是直接用 HTML 文字編輯器寫出來,後來有了所見即所得編輯器,很多事情變得很方便,也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容,看看呈現出來的結果是否正確,可試試接下來的免費工具。
本文要介紹「HTML.cafe」是一個免費的線上即時 HTML 編輯器,開啟後頁面會分為上下兩個功能,上方是編輯器,下方則為網頁預覽,透過貼上、修改原始碼後即時查看呈現出來的效果變化,以輕量化程式碼(大約只有 25kB)實現 HTML 編輯器所需的最低功能。
當然 HTML.cafe 介面很陽春,也沒有太多的選項,不過對於要測試網頁來說還算方便,不用在瀏覽器跟編輯器間反覆存檔和重新整理,倒是很像早期的網頁編輯器內建預覽功能。
HTML.cafe
https://html.cafe/
使用教學
STEP 1
開啟 HTML.cafe 後會看到一段 HTML 原始碼範例,下方就是呈現出來的效果,點選 new 打開新的畫面或是按下 save 將頁面保存到平台,要注意的是儲存後其他人也能在 gallery 中看到,不要將太過重要或包含隱私資訊的原始碼上傳到 HTML.cafe。
如果你需要更大的編輯器範圍,可以拖曳分隔線調整編輯器大小,HTML.cafe 編輯器本身有上色功能,在閱讀程式碼時會較為輕鬆。
STEP 2
將網頁原始碼貼上立即從下方預覽畫面取得實際顯示效果。
若需要產生鏈結,使用者還能點選 save 保存內容、取得網址,如果想繼續編輯內容,記得要將原本的編輯頁面開著,修改後儲存會即時更新到預覽網址中。
STEP 3
點選編輯器右下角的預覽按鈕,會立即在瀏覽器呈現網頁,HTML.cafe 是一個蠻有用的線上 HTML 編輯器,如果手邊剛好沒有合適的網頁編輯軟體,它可以做為應急使用。
值得一試的三個理由:
- 線上即時 HTML 編輯器,從網頁預覽 HTML 程式碼效果
- 介面很陽春,程式僅有 25kB 大小實現最低所需功能
- 可以儲存程式碼,產生供預覽的頁面鏈結