立即登入

或使用以下方式登入
尚未有帳戶?現在建立帳戶!
驗證你的電話號碼
已發送驗證碼訊息至你的電話號碼。 輸入驗證碼以啟動你的帳戶。
在此輸入驗證碼
沒有收到驗證碼?
登入
/立即註冊
語言設定
ENG
中(港)
中(台)

發佈工作

類型

>

資料

>

內容

我想尋找 ...

指定專長 (請選擇至少一個)

下一頁
發佈工作可以即時通知所有freelancer,讓你免費及快速找到合適工作人選。每當有freelancer向你的工作提交回覆,你便會收到電郵通知(你在此授權Freehunter為你以電郵方式收集報價資料)。 你的電郵將會收到來自最合適的申請者的訊息。

日期

工作時間

位置

上一步
下一頁

工作主題

工作類型

工作內容

預算金額

發佈工作
上一步

【程式語言大比拼】HTML、CSS、JavaScript入門教學

【程式語言大比拼】HTML、CSS、JavaScript入門教學

 

程式語言👨🏻‍💻

打算學一種新語言嗎?在考慮選擇法文還是德文?有沒有想過學習一種程式語言,自行編寫一個屬於自己的網站?

 

HTML, CSS, Javascript等程式語言,對於一般沒有電腦工程學背景的人士來說,好像很遙不可及,但編碼其實真的很困難嗎? 以下就讓Freehunter為你整合三種主要程式語言——HTML、CSS、Javascript的分別!

 

1️⃣HTML 

不論網站的複雜程度,HTML 是任何一個網頁的核心,亦是建設網站的基本程式語言。對於希望了解更多關於網站開發*的你,HTML是最佳的起點!HTML,是HyperText Markup Language的簡稱,中文又稱為「超文字標示語言」。它透過不同標籤分辨網站頁面內容,以及它在網站中的作用。 

 

*如果想了解更多關於「網頁開發」和「網頁設計」的分別,歡迎看看下面這篇文章,可按此了解更多。

 

如果用標籤分類的方法來識辨網站的內容,可以分為「標題」、「副題」、「正文」、「圖片」等類別。

 

HTML的運作原理就如同我們剛剛用「文字」分辦網頁的不同部分,但HTML運用的則是HTML標籤。HTML標籤,又稱為「元素」(element),是HTML檔案的一個基本組成單元。

 

我們可以看到元素的基本架構:

  1. 起始標籤 (The opening tag):在「< 」和「>」符號之中放入元素名稱,如圖所視的例子「<h1>」,代表把兩個「標籤」中間的「內容」標示為Header1(h1)。元素從起始標籤開始。
  2. 結束標籤 (The closing tag): 與起始標籤一樣,但在元素名稱前會多加個「/」。元素會以結束標籤作結。
  3. 內容(The content): 這個元素的內容,以上面的例子來說,內容就是「【網頁開發】傻傻分不清?一文了解網頁設計與網頁開發的分別!」。

 

 

2️⃣CSS 

CSS 是Cascading Stylesheets的簡稱,中文又稱為「階層樣式表」。這個程式語言讓我們能為HTML元素套用不同的頁面樣式,塑造網站的獨特風格。頁面設計當中的字形、文字顏色、圖象等的元素皆由CSS處理,可見CSS對頁面程現的視覺效果有關鍵性作用。 

 

為了讓你看到CSS的效果,讓我們來比較一下以下兩個螢幕截圖吧!以下兩個圖片皆展示了Freehunter的主頁,但圖一只程現了基本的HTML,而圖二則包含了HTML及CSS的元素。 

 

HTML例子 (沒有CSS)

值得留意的是兩個網頁展示同樣的內容,但卻有著截然不同的視覺效果!以下的網頁而圖二則包含了HTML及CSS的元素,可見CSS對於頁面設計風格重要性。

 

HTML+CSS例子

 

簡單來說,CSS是一個指令清單,他們會指示HTML元素套用不同的頁面樣式,指令可以是單單套用於某些標籤,或是整個頁面,甚至是多個頁面。HTML本身的定位只是希望讓網頁開發者展示頁面的基本格式,例如是分辨標題及內文,字形、顏色等設計元素並非考慮之內,而CSS就正好補充了HTML在設計效果的不足。

 

 

3️⃣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為你服務吧!

 

精選30,000+位Freelancer,涵蓋18種不同行業,
一個網站一應俱全。

 

參考資料:

https://blog.hubspot.com/marketing/web-design-html-css-javascript

想更有效率的發佈工作?
限時優惠
推廣工作
HK$399
  • 即時電郵通知平台上
    所有
    相關Freelancer
  • 你的工作會置頂於工作版上
不用了, 謝謝!
確認要關閉工作?
關閉工作
保留工作
工作已關閉
OK
你身處的位置是
版網頁
你想回到
版網頁嗎?
好的