開始在電腦上編寫網頁

陳信嘉

網頁編寫及測試的方式

用文字編輯器編寫內容

用瀏覽器開啟查看

(1) 寫完存檔、執行

(2) 有錯就回頭修改

使用文字編輯器

Visual Studio Code

請先下載、安裝

VSC 延伸模組 - EMMET

EMMET 已成為 Visual Studio Code 的預設項目，免安裝

(1) 輸入基本的 html 標籤，按 tab 鍵或移動選擇

(2) 自動生成完整的框架

VSC 延伸模組 - HTML Preview

(2) 點此處可開啟右側的預覽視窗

(1) 搜尋 HTML Preview，安裝

VSC 延伸模組 - Live Server

(3) 或點此處 Go Live

(1) 搜尋 Live Server，安裝

(2) 按滑鼠右鍵後選
Open with Live Server

使用瀏覽器查看網站

(1) 儘可能確保是在網站伺服器 (http://) 中執行

(2) 不宜直接點開 (電腦檔案路徑)

開始編寫網頁

home.html

page1.html

page2.html

page3.html

1. 建立一個資料夾
2. 產生檔案 (先決定好檔名並存檔)
3. 再建立一個 images 資料夾放圖片

初步規畫所需的頁面

myweb

images

xxx.jpg

xxx.jpg

試試看，像這個網頁要能夠

全部用原始碼 coding 出來

還有多個網頁間的超連結

h1

a href

p

table, tr, td

hr

HTML 的基本結構

頁面結構

可以從標準範本 copy來用

html, head, body

了解更多 head 內的標籤意義

• title
• charset
  (顯示中文一定要指定 utf-8)

HTML 的內容呈現部份

(1) 文字編排標籤

(2) 放入圖片

(3) 超連結

(4) 清單項目

(5) 表格

p, h1, h2, h3, br, hr

img src

a href (target)

ul, ol, li

table, tr, td, th

這些標籤都要很熟悉

更細部的屬性要會查

從 W3School 學習

(1) 文字編排標題
      段落

(2) 放入圖片

(3) 超連結

(4) 表格

(5) 清單項目

HTML headings
HTML paragraphs

HTML Images

HTML Links

HTML Tables

HTML Lists

基本重點項目

測試網頁，檢查超連結是否均正常

......