立即登入

或使用以下方式登入
尚未有帳戶?現在建立帳戶!
驗證你的電話號碼
已發送驗證碼訊息至你的電話號碼。 輸入驗證碼以啟動你的帳戶。
在此輸入驗證碼
沒有收到驗證碼?
登入
/立即註冊
語言設定
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+位自由業者,涵蓋18種不同行業,
一個網站一應俱全。

 

參考資料:

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

想更有效率的發佈工作?
限時優惠
推廣工作
NT$1590
  • 即時電郵通知平台上
    所有
    相關Freelancer
  • 你的工作會置頂於工作版上
不用了, 謝謝!
Are you sure to repost?
取消
Restart Job
確認要關閉工作?
請問關閉工作的理由是?
已在Freehunter上找到適合人選
已在其他渠道找到適合人
工作暫時取消
沒有特別原因
提交
保留工作
關閉工作
工作已關閉
OK
Your job has been repost
OK
你身處的位置是
版網頁
Do you want to switch to
site?
不要
好的