部落格經營｜基礎網頁設計(1)-HTML篇

導讀：這篇文章聚焦於「HTML 自學 筆記」，幫你快速掌握重點。

#認識網頁設計及HTML

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

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

訂閱白鷗電子報

每封信濃縮最新文章通知、每日期刊新聞與生醫人才趨勢圖表，三分鐘掌握重點並記得行動。

姓名（選填）電子郵件

想追蹤哪些主題？

依照你勾選的主題寄送不同頻率的信件，也可以隨時在信件裡調整偏好。

每日新聞期刊每日整理重點新聞、期刊動態與政策訊號。每週產業及市場每週追蹤產業趨勢、職缺動態與市場分析。薪資待遇觀測薪資與職級資料的趨勢分析與案例拆解。服務方案動態服務方案、資料產品與封測公告。

訂閱白鷗電子報

信件以新文章通知、期刊新聞摘要與生醫人力趨勢報告為主，必要時再補充活動與工具更新。覺得不適合時，任何一封信都能立即退訂。

網頁設計前後端

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

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

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

#網頁設計編寫語言

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

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

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

#HTML

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

HTML解釋

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

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

此為示意圖，以紅色畫筆的部分說明當不斷地在標籤中加入標籤時會呈現像鳥巢的結構，故稱為巢狀結構。白色文字為網頁呈現的文字

#HTML Tags

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

HTML Tag

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

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

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

下一篇

#後記

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

訂閱白鷗電子報

每封信濃縮最新文章通知、每日期刊新聞與生醫人才趨勢圖表，三分鐘掌握重點並記得行動。

姓名（選填）電子郵件

想追蹤哪些主題？

依照你勾選的主題寄送不同頻率的信件，也可以隨時在信件裡調整偏好。

每日新聞期刊每日整理重點新聞、期刊動態與政策訊號。每週產業及市場每週追蹤產業趨勢、職缺動態與市場分析。薪資待遇觀測薪資與職級資料的趨勢分析與案例拆解。服務方案動態服務方案、資料產品與封測公告。

訂閱白鷗電子報

信件以新文章通知、期刊新聞摘要與生醫人力趨勢報告為主，必要時再補充活動與工具更新。覺得不適合時，任何一封信都能立即退訂。