五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ?

隨著網頁技術發展,現在的網站可以做到許多事,除了購物外、還能開發各式的工具,例如你可以透過瀏覽器收發信件 (Gmail) 、存取檔案 (Dropbox)、輕鬆的看電影(Netflix)、專案管理 (Trello)、線上會議 (Google Meet) 等;那麼要如何開始著手撰寫網站呢?

你需要先知道建構網站的三大要素:HTML / CSS / JavaScript

簡單來說 HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』,最後 JavaScript 讓網頁動起來(像是畫面淡入、文字淡出等)、讓網頁與使用者互動(例如,點擊按鈕跳出視窗、輸入文字等)。

接下來將會逐步介紹這三者的關係,進入正題 🏃‍♀️

什麼是 HTML ?

HTML 是一種用來建構網頁的 標記語言 而非程式,可以想像網頁就像一頁文件,而文件內會有標題、內文、圖片、頁尾等元素。HTML 是告訴瀏覽器網頁上有哪些標題?標題放在哪裡?圖片在哪裡等。

不同的元素,會用標籤 <> 標示出來,例如標題 <h1> 、網頁內容 <body>、圖片 <img> 等。大部分標籤會有開頭、結尾,讓網頁知道所謂的“標題”內的文字有哪些。這時候會像這樣標示:

<h1>我是標題</h1>

或是按鈕:

<button>我是一顆按鈕</button>

少部分標籤沒有結尾標籤,例如圖片:

<img src="https://i.imgur.com/P8U0L2O.jpg" alt="替代文字">

附帶一提,在上方圖片標籤 <img> 可以看到裡面包含了 srcalt 這些都是這個標籤的『屬性』;每個標籤都有提供不同的屬性,讓這個標籤的資訊能夠更完整。

HTML 提供很多標籤做使用,但標籤使用也是需要留意的,例如 Google 進行爬蟲,定期會將發佈的網頁收錄在索引內,讓使用者可以透過搜尋找到網頁。Google 會盡可能的收錄完整資訊的網站,但如果是標籤使用濫用,嚴重可能會引響搜尋排名。因此善用 HTML 標籤也是一門學問,這方面我們也有開設相關的課程,有興趣的人可以查閱 :)

什麼是 CSS ?

在 MDN 的 CSS 基礎 有明確的解釋:

CSS 既非標準程式語言,也不是標記語言, 而是一種風格頁面語言(style sheet language)

我們常形容 HTML 猶如一個人的骨架,而 CSS 就像是為這個人穿上衣服,你可以透過 CSS 自訂網頁字體樣式、顏色,網頁排版橫排、直排、動畫等,除此之外,CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁,使頁面不管是在任何尺寸下都整到適合的瀏覽樣式。

來看看 CSS 長什麼樣子吧:

CSS 樣式

可以看到上面 『選取』了 HTML 頁面中的 h1 顏色變成藍色。

如果你想要將你的網頁上其他 HTML 標籤更改樣式,可以透過上面的方式撰寫。

CSS 可以做到哪些有趣的效果呢? 不妨查看 GitHub 上的: You Don't Need JavaScript

當中示範了 跳出視窗

CodePen Home Modal Container without JS from Chris Burnell

Tab 切換

Transitioning Between Variable Heights with CSS Tabs from Joseph Fusco

這些都只使用 CSS 和 HTML 撰寫,是不是令人振奮呢!

但,先別急著開始寫網站,有了這兩項神器外,絕對不能錯過網站重要角色: JavaScript

什麼是 JavaScript ?

JavaScript (簡稱 JS) 是一個簡單、以物件為基礎的腳本語言。這樣說可能有點抽象,讓我們繼續引用前述的 HTML 像是人的『骨架』、CSS 是『衣服樣式』,那麼 JavaScript 就像是人的『神經系統』。

我們能透過 JavaScript 讓網頁骨架移動、改變樣式、獲取資料(如果你有聽過網站 API 串接)、讓使用者和你的網站互動(像是讓他們輸入文字後顯示正確或錯誤的提示)等許多事。

JavaScript 的程式碼長什麼樣子呢?來看看以下例子:

// 這邊準備執行一件事,並且將這件事命名為 “sayHello”:
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 的話,這邊可以看到我們先前所做的懶人包:

或是追蹤我們 專頁,我們將不定期更新技術懶人包、文章。

和我們一起學習網頁開發技能! 💪💪

訂閱文章