基礎網頁設計(1)-HTML篇

認識網頁設計及HTML

在我們進行網頁設計的學習之前，先來了解什麼是網頁，以及它的結構。

如果你第一次看到我的文章，歡迎訂閱我的電子報，會陸續更新國中、高中的生物課內內容、筆記重點整理以及大學研究所上遇到的種種乃至於畢業、找工作、談薪水等職涯規掛，以及每周一篇的新知分享，包含部落格、生物新科技等等內容。

一共可以分為前端與後端兩種。前端較注重使用者體驗以及網頁整體視覺及互動的部分，而後端部分，則是處理前端經由互動後，收集使用者給予回饋的資訊並加以處理的部分。

舉例而言，時常有網路購物的經驗，例如蝦皮購物點進網頁後會看到許多品項、版面、排版、動畫都是屬於前段的部分，而加入購物車後，幫你計算需要多少錢、有哪些品項、要送到哪裡、你的訂單編號、名稱等等都是屬於後端的範疇。

平常我們能夠看到的網頁，是經過原始碼撰寫包含HTML,CSS,Javascript等的方式，告訴電腦要呈現的樣子。隨後把這個寫好的原始碼放到雲端上面，好讓我們在網路的世界當中能夠瀏覽並視覺化。

網頁設計編寫語言

其中最主要的編寫語言共粗分為三項:

1. HTML : 主要負責文字的部分，包含標題、內文、按鈕文字等等所有可視的文字。
2. CSS : 通常經過HTML撰寫之後只有文字的部分，若要能夠美化網頁增加其易讀性、設計感等就需要用到CSS來進行網頁頁面的排版。
3. Javascipt : 其與常聽到的Java是截然不同的語言，主要在增加使用者互動感。以事件的方式增加動畫或給予回饋。例如點擊事件後按鈕下要顯示出文字說明等。

因此，通常在設計網頁的過程順序為 : HTML處理主要文字後，CSS加以排版美化頁面，最後以JS的方式增加此網頁使用者的互動感，達到較好的使用者體驗。

HTML

接下來，進入到HTML的部分，首先要說明究竟什麼是HTML?

全名為 Hyper Text Markup Language ，也就是指在純文字的表現上，能夠透過瀏覽器達到超連結到其他網站或子網頁。舉例來說，你告訴電腦說你想要透過連結到達購物車時，你的螢幕頁面就會從選單跳到購物車頁面。

HTML是一個以標籤為主巢狀方式編寫的語言。意思就是要以標籤與標籤中間放入文字來告訴電腦你要編寫的內容。

HTML Tags

主要大標籤可以分為 : head, title, body三個部分，但大標籤必須被html標籤包住好讓電腦知道這個文件是html的內容

至於小標籤，主要在body中撰寫最主要的頁面文字內容時會使用到，首先介紹幾個較常用的標籤

• h1,h2,h3,h4,h5,h6 : 作為文字標題，根據數字增加而減小標題文字大小

• p段落 : 為內文文字的標籤，適合使用在說明、講述時。
• img : 能夠在網頁中放入圖片
• a 連結 : 能夠經過點擊協助使用者到另一個網頁

後記

如果你喜歡這樣解說的方式的話，幫我按讚拍手分享，讓更多人了解設計的有趣之處 ! 如果你覺得有疑問或者有錯誤的話，歡迎在下面留言告訴我 !