開始在電腦上編寫網頁
陳信嘉
網頁編寫及測試的方式
用文字編輯器編寫內容
用瀏覽器開啟查看
(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
- 建立一個資料夾
- 產生檔案 (先決定好檔名並存檔)
- 再建立一個 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
基本重點項目
