以HTML語言寫成，透過全球資訊網(World Wide Web)公開呈現的文字檔都可以稱做”網頁”，而”網站”則是由一個或多個網頁所組成。
- 靜態網頁(static website): 內容經由人修改才會改變。
- 動態網頁(dynamic website):內容經由軟體產生，會因為變數的變化而每次呈現出不同的內容。
前端與後端
在客戶端所呈現的內容是網頁的前端，大多以HTML、CSS、Javascript為主編寫而成。而後端是由伺服器傳送給客戶端所進行的幕後流程，後端可以經由不同的程式語言編寫，例如:PHP、Python、javascrpit等等。
前端的HTML、CSS、Javascript
HTML(HyperText Markup language)是一種標示語言，主要的作用是告訴瀏覽器的內容是屬於標題或是內文亦或是連結。
CSS是(階層樣式表Cascading Style Sheets)，為定義網頁版面設計(layout)而誕生，透過指定在HTML裡的標籤改變視覺樣式。
JavaScript為程式語言，一種直譯式腳本語言，能將網頁轉換成互動式的應用程式，使網頁可以回應使用者動作、改變視覺樣式和元件、向其他資源請求額外資訊、發揮其他需求功能。
用比喻來說HTML相當於房子的結構，CSS為房子外觀樣式，JavaScript為房子內的各項功能，例如:電燈、空調、門等等。
Chrome開發者工具
使用Chrome瀏覽器時，按下快捷鍵F12或者是ctrl+shift+i(Mac使用command+option+i)可以開啟。是做網頁開發的時候是一個方便的工具。
在開發的時候最常使用到的幾項基礎工具為
- 元件選取工具(element selection tool，熱鍵為ctrl+shift+c)，可以協助我們尋找DOM(Document Object Model)結構中視覺元件位置。
- 裝置工具列(device toolbar，熱鍵為ctrl+shift+m)，可以讓我們檢視在不同裝置、不同螢幕尺寸、不同解析度中的網頁顯示效果。
- 元件標籤(Elements tab)，可以檢視DOM結構及每個元件細節；控制台標籤(Console tab)幫助我們偵測JavaScript程式碼。
- DOM檢視器(DOM inspector)可檢視和修改HTML文件結構。當滑鼠移到元件上時，會在網頁中標示出相對應於元件的位置。
- 細節窗格(details pane)可檢視修改元件上的CSS樣式；計算標籤(computer tab)則會顯示瀏覽器計算結果。
網頁瀏覽器
“瀏覽器”是解析(parse)HTML的工具，解析後呈現出使用者可以理解的樣式。當點擊網址時:
- 透過DOM樹狀結構組織HTML文件。
- 文件內容會套用CSS樣式並執行Javascript程式碼。
- 將渲染(render)後的畫面呈現在螢幕上。
目前常見的瀏覽器有Google Chrome、Mozilla Firefox、Safari、IE、Opera、Edge等等。
文字編輯工具
使用記事本就可以編寫HTML，但為實務工作工程師通常使用Sublime Text、Atom、Visual Studio Code等等，由於可以安裝額外需求功能，使得撰寫上會方便許多。
認識CodePen
CodePen是可以在網路上撰寫網頁設計想法的網站，可以免除工程師想分享卻需要處理檔案管理與上傳的麻煩。
網頁開發流程基礎認識
在練習網頁設計的時候需要有一個流程幫助我們順利推進進度
網頁設計稿→線框稿→編HTML→CSS
設計稿:拿到網頁設計稿的時候，會先分析設計稿，去規劃HTML整體架構。
線框搞(wireframe):規劃架構後，用線條的方式將網站雛型畫出來，以便於了解內容層次與整體架構。在wireframe中不會填入真正資料而是以替代性文字和圖片(placeholder)呈現各種元件，良好的wireframe可以幫助我們跟團隊了解設計的網站可用性，以便於針對目標，快速達到共識。
HTML、CSS:前置作業完成後，就是呈現HTML結構、完成CSS樣式。
網路工具: CodePen.io、 Lorem Picsum