五倍學院
網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？
隨著網頁技術發展，現在的網站可以做到許多事，除了購物外、還能開發各式的工具，例如你可以透過瀏覽器收發信件 (Gmail) 、存取檔案 (Dropbox)、輕鬆的看電影（Netflix）、專案管理 (Trello)、線上會議 (Google Meet) 等；那麼要如何開始著手撰寫網站呢？
你需要先知道建構網站的三大要素：HTML / CSS / JavaScript
簡單來說 HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，最後 JavaScript 讓網頁動起來(像是畫面淡入、文字淡出等)、讓網頁與使用者互動(例如，點擊按鈕跳出視窗、輸入文字等)。
接下來將會逐步介紹這三者的關係，進入正題 🏃♀️
什麼是 HTML ?
HTML 是一種用來建構網頁的 標記語言 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。HTML 是告訴瀏覽器網頁上有哪些標題？標題放在哪裡？圖片在哪裡等。
不同的元素，會用標籤 <> 標示出來，例如標題 <h1> 、網頁內容 <body>、圖片 <img> 等。大部分標籤會有開頭、結尾，讓網頁知道所謂的“標題”內的文字有哪些。這時候會像這樣標示：
或是按鈕：
少部分標籤沒有結尾標籤，例如：
附帶一提，在上方圖片標籤 <img> 可以看到裡面包含了 src 和 alt 這些都是這個標籤的『屬性』；每個標籤都有提供不同的屬性，讓這個標籤的資訊能夠更完整。
HTML 提供很多標籤做使用，但標籤使用也是需要留意的，例如 Google 進行爬蟲，定期會將發佈的網頁收錄在索引內，讓使用者可以透過搜尋找到網頁。Google 會盡可能的收錄完整資訊的網站，但如果是標籤使用濫用，嚴重可能會引響搜尋排名。因此善用 HTML 標籤也是一門學問，這方面我們也有開設相關的課程，有興趣的人可以查閱 :)
什麼是 CSS ?
在 MDN 的 CSS 基礎 有明確的解釋：
我們常形容 HTML 猶如一個人的骨架，而 CSS 就像是為這個人穿上衣服，你可以透過 CSS 自訂網頁字體樣式、顏色，網頁排版橫排、直排、動畫等，除此之外，CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁，使頁面不管是在任何尺寸下都整到適合的瀏覽樣式。
來看看 CSS 長什麼樣子吧：
可以看到上面 『選取』了 HTML 頁面中的 h1 顏色變成藍色。
如果你想要將你的網頁上其他 HTML 標籤更改樣式，可以透過上面的方式撰寫。
CSS 可以做到哪些有趣的效果呢？ 不妨查看 GitHub 上的： You Don't Need JavaScript
當中示範了 跳出視窗：
CodePen Home Modal Container without JS from Chris Burnell
這些都只使用 CSS 和 HTML 撰寫，是不是令人振奮呢！
但，先別急著開始寫網站，有了這兩項神器外，絕對不能錯過網站重要角色： JavaScript
什麼是 JavaScript ?
JavaScript (簡稱 JS) 是一個簡單、以物件為基礎的腳本語言。這樣說可能有點抽象，讓我們繼續引用前述的 HTML 像是人的『骨架』、CSS 是『衣服樣式』，那麼 JavaScript 就像是人的『神經系統』。
我們能透過 JavaScript 讓網頁骨架移動、改變樣式、獲取資料(如果你有聽過網站 API 串接)、讓使用者和你的網站互動(像是讓他們輸入文字後顯示正確或錯誤的提示)等許多事。
JavaScript 的程式碼長什麼樣子呢？來看看以下例子：
function sayHello() {
alert('Hello World!');
}
// 執行上面的 sayHello 這件事
sayHello();
在 JavaScript 的執行區域或檔案內輸入上面的程式碼，即會顯示跳出視窗：
示範：https://jsbin.com/bibabiqugo/edit?js,output
就這樣輸入了程式碼，我們讓網頁跳出了訊息，這就是 JavaScript 提供的方法之一。
你或許有聽過 React 、 Vue.js 、 Angular 或是 jQuery，這些都是從 JavaScript 發展而成的，而 React / Vue.js / Angular 皆是『前端框架』， jQuery 則為 JavaScript 的 『函式庫(Library)』，這些框架和函示庫誕生除了解決 JavaScript 本身某些問題、優化開發和維護效率等，也使得 JavaScript 成了蟬聯最熱門的程式語言榜首多年的原因。
以上就是 HTML / CSS / JavaScript 簡介，如果對於這三個主題有興趣，
推薦上 MDN 文件查閱： 學習該如何開發 Web | MDN
在 MDN 上有詳盡的指令、語法說明，算是一個網站開發的線上辭典，不妨多多利用！
如果你對於這樣的文件感到複雜的話，同樣可以透過 Google 搜尋，在開發者社群內也許會遇到和你有相同問題的人，有很許多優秀、樂於分享的開發者也會透過文章的方式記錄這些解決或理解的過程，寫法或描述可能有誤或是過時，在搜尋時也請記得多方比較喔！
試著 Google 輸入你的問題關鍵字吧！
如果你已經有在寫 HTML / CSS 的話，這邊可以看到我們先前所做的懶人包：
或是追蹤我們 專頁，我們將不定期更新技術懶人包、文章。
和我們一起學習網頁開發技能！ 💪💪
五倍學院