程式語言大比拼】HTML、CSS、JavaScript入門教學
程式語言
打算學一種新語言嗎？在考慮選擇法文還是德文？有沒有想過學習一種程式語言，自行編寫一個屬於自己的網站？
HTML, CSS, Javascript等程式語言，對於一般沒有電腦工程學背景的人士來說，好像很遙不可及，但編碼其實真的很困難嗎？ 以下就讓Freehunter為你整合三種主要程式語言——HTML、CSS、Javascript的分別！
HTML
不論網站的複雜程度，HTML 是任何一個網頁的核心，亦是建設網站的基本程式語言。對於希望了解更多關於網站開發*的你，HTML是最佳的起點！HTML，是HyperText Markup Language的簡稱，中文又稱為「超文字標示語言」。它透過不同標籤分辨網站頁面內容，以及它在網站中的作用。
*如果想了解更多關於「網頁開發」和「網頁設計」的分別，歡迎看看下面這篇文章，可按此了解更多。
如果用標籤分類的方法來識辨網站的內容，可以分為「標題」、「副題」、「正文」、「圖片」等類別。
HTML的運作原理就如同我們剛剛用「文字」分辦網頁的不同部分，但HTML運用的則是HTML標籤。HTML標籤，又稱為「元素」（element），是HTML檔案的一個基本組成單元。
我們可以看到元素的基本架構：
- 起始標籤 （The opening tag）：在「< 」和「>」符號之中放入元素名稱，如圖所視的例子「<h1>」，代表把兩個「標籤」中間的「內容」標示為Header1（h1）。元素從起始標籤開始。
- 結束標籤 （The closing tag）： 與起始標籤一樣，但在元素名稱前會多加個「/」。元素會以結束標籤作結。
- 內容（The content）： 這個元素的內容，以上面的例子來說，內容就是「【網頁開發】傻傻分不清？一文了解網頁設計與網頁開發的分別！」。
CSS
CSS 是Cascading Stylesheets的簡稱，中文又稱為「階層樣式表」。這個程式語言讓我們能為HTML元素套用不同的頁面樣式，塑造網站的獨特風格。頁面設計當中的字形、文字顏色、圖象等的元素皆由CSS處理，可見CSS對頁面程現的視覺效果有關鍵性作用。
為了讓你看到CSS的效果，讓我們來比較一下以下兩個螢幕截圖吧！以下兩個圖片皆展示了Freehunter的主頁，但圖一只程現了基本的HTML，而圖二則包含了HTML及CSS的元素。
HTML例子 （沒有CSS）
值得留意的是兩個網頁展示同樣的內容，但卻有著截然不同的視覺效果！以下的網頁而圖二則包含了HTML及CSS的元素，可見CSS對於頁面設計風格重要性。
HTML＋CSS例子
簡單來說，CSS是一個指令清單，他們會指示HTML元素套用不同的頁面樣式，指令可以是單單套用於某些標籤，或是整個頁面，甚至是多個頁面。HTML本身的定位只是希望讓網頁開發者展示頁面的基本格式，例如是分辨標題及內文，字形、顏色等設計元素並非考慮之內，而CSS就正好補充了HTML在設計效果的不足。
JavaScript
現時幾乎所有網絡瀏覽器亦會支援JavaScript，而程式開發員亦會運用Javascript以架設網頁中更複雜的功能。JavaScript通常會用於網站的互動功能，例如確認頁面（confirmation boxes）, 行動呼籲（ calls-to-action）等指令，令網站的部件會因應用戶的輸入而出現不同的效果。以下就讓我們看看Freehunter網站如何利用JavaScript為你帶來更好的體驗吧！
表單驗證（Form Validation）
其中一個常見的JavaScript用途是表單驗證（Form Validation），記得你當初成為Freehunter用戶的過程嗎？（還沒有加入我們？即按此！）
如果用戶在註冊頁面未有填寫所有個人資料就按下「立即註冊」鍵，例如是忘記填寫「名字」和「姓氏」，頁面頂部會出現「請輸入名字」的提示字句，提醒用戶提供遺漏的資料。這種和網站用戶互動的功能，就是由Javascript所編寫而成！
除此之外，如果輸入資料沒有滿足程式的設定，網站亦會出現對應的指示。下例情況顯示，於「電郵」欄中，用戶輸入的電郵不符合程式要求的格式（例如是必須有「@」符號），頁面頂部會出現「請輸入正確的電郵地址」的提示字句，提醒用戶提供正確的電郵地址，確保日後帳戶能順利運作。（註冊Freehunter帳戶後需要透過電郵進行認證，所以記得輸入正確的電郵地址呀！）
以上網站互動功能，是根據用戶的輸入而作有獨有的回應，這是Javascript經常應用在網站的功能。大家在瀏覽網站時也可多留意網站的互動功能，看看它們有沒有提升你的用戶體驗吧！
結語 
以上只是三款常用程式語言的入門簡介，以供外行人作為了解程式語言的參考。還記得你第一日牙牙學語，到今天你能暢所欲言的學習過程嗎？掌握一門程式語言就如學習一門新語言一樣，需要長時間的練習和應用！
想運用程式語言編寫一個符合用戶需要，吸引客戶消費的網頁？今天才開始學習編碼覺得太遲？Freehunter有超過30,000位Freelancer，當中的網頁開發員都掌握高水平的程式語言能力，具備豐富經驗，相信他們絕對能提供專業的意見和協助！趕快免費發佈工作以尋找專業Freelancer為你服務吧！
留言列表
