認識網頁開發從生活開始

曾想想過自己花多少時間上網嗎？

重度網路成癮症的我們每天拿著手機滑呀滑的，通勤時滑，就連上班和上廁所的時候都在滑，就這樣，我們每天在不同的社群平台瀏覽大量資訊，在不同的網頁上來回擷取資訊，滑手機漸漸變成現代人一種戒不了的癮！

你可能心裡有個網站待看清單，每天固定來回瀏覽 Facebook 和 Instrgram 又或是網拍的新品登場，你也可能沈迷於社群媒體，深怕錯過周遭身邊親友的分享，讓自己一不小心就變成時代的眼淚（擦）；你也可能透過某個網頁獲得知識，經由連結或是搜尋進到其他網站，資訊的流通彈指間就能完成。

你最常瀏覽的網站又是哪些呢？

也許有人會說 PChome 或是 Ikea，但不論是哪一個網站，你曾經想過自己的視覺習慣嗎？每次瀏覽網頁時，哪些網站會特別留住你的目光呢？它們有什麼共同的特色或是風格呢？

如果你是網頁菜菜子，不妨跟筆者的腳步認識一下網頁是什麼，跟著我的視角來練習，一步一步打穩網頁的基本概念！

網站怎麼組成了呢？

我們每天瀏覽的網站到底是怎麼組成呢？這邊簡單地將網站分為「前端」和「後端」。

前端：掌管一個網站的所顯現的畫面和排版。
後端：控制一個網站的功能或是資料庫管理，例如：金流或是發信系統。

這是最籠統的分類，不管是前端和後端，它們的學問極深，都有各自的發展規則，彼此可能卻有息息相關。

五倍紅寶石

Photo by Florian Olivo

❏ 前端的三大基礎天王

筆者要帶大家稍微認識前端的三大基礎天王，用一個簡單的例子讓大家可以更好理解。想像一下，如果我們把網站想像成一個人，「前端」- 負責一個人的外貌長相有沒有突出，而「後端」就控制人的器官和四肢能不能正常運作。

前端，你必須要認識三大天王，它們分別為 HTML 和 CSS 以及 JavaScript。有了以上三位的幫忙，一個人的肢體表現才能活靈活現！

HTML：就是臉上的五官和身體的四肢要擺在對的地方，總不能把嘴巴擺在眼睛的上面。
CSS：可以想成化妝品和裝飾品， CSS 替你的身體穿上一件漂亮的洋裝還是帥氣的皮外套；又或是要替你的嘴巴畫上淡橘還是現在流行的奶茶色口紅，跟外觀相關的就由 CSS 來決定。
JavaScript：則是掌管身體的神經元素，讓骨架可以移動，讓身體可以改變姿勢。

透過這樣簡單的介紹，從生活開始認識網頁，對於「前端」這個名詞在網站上代表的意思，是不是具體多了呢！

❏ 網頁起步走

仔細回想大家開網站的習慣，都我們透過連結又獲釋搜尋引擎進入網站，而網站內又按主題分類分成數十個網頁。我們就先從網頁寫在哪裡開始認識吧！

❏ 網頁寫在哪裡呢？

無論你是要寫在電腦裡頭的記事本，又或是 Office 的 Word ，只要能把文字寫下來的應用程式都可以用來寫網頁，要特別注意的是網頁是由 HTML 格式完成的，不過你用什麼應用程式，副檔名記得改成 .html，這樣在瀏覽器 (Chrome、Safari、Firefoxe 等)開啟檔案時，才能正確讀取唷！但一般寫網頁會在專門寫網站的工具編輯器或網站上撰寫喔！ (別擔心，這篇文章將會一步一步帶你認識這些工具！)