全國勞工總會─網頁設計與網拍 2018.09.09

全國勞工總會第七天課程
HTML 網頁編輯、CSS 編輯美化

下圖取自 https://www.codercv.com/job/1/i-will-do-html-css-development-or-fix-of-any-bug-or-error

今天繼續 HTML 的設計。上節課我們採用結合雲端硬碟的 HTML 編輯器「HTML editey」，好處是編輯過程中完全不用按存檔的動作，但製作時預覽，牽涉到相對路徑的超連結、圖片等就無法正確預覽結果(因為雲端硬碟的檔案各有特定的網址)，有點小小遺憾。

因此再來使用一個單機版使用的 HTML 編輯器：Brackets，只要將網頁與圖片都整理在一個資料夾下，使用 Brackets 來開啟編輯，預覽都能無誤，當然相對的，別忘記要存檔喔！

另外也介紹 CSS 的編輯方式，不過限於時間的關係，無法介紹 CSS 所能展現的更多功能。

本周六小時的上課內容有：

1. HTML 的 p 與 br 標籤
2. HTML 的 hr 標籤，以及標籤使用查詢
3. HTML 的 a 標籤
4. HTML 的 a 標籤的相對路徑寫法
5. 安裝本機版的免費網頁編輯器 Brackets
6. 本機端網頁編輯器 Brackets 的介面使用
7. HTML 的 img 標籤的寫法
8. HTML 的 img 標籤再說明
9. HTML 的 ol、li、ul 標籤的寫法
10. HTML 的 ol、li、ul 標籤的 type 屬性
11. HTML 的 table 標籤
12. HTML 的 table 標籤屬性進一步說明
13. HTML 的 iframe 標籤
14. HTML 的 iframe 標籤嵌入 Youtube 影片、Google 地圖、Google 日曆
15. CSS 修改原始 HTML 標籤屬性1
16. CSS 修改原始 HTML 標籤屬性2
17. CSS 修改 a 標籤屬性
18. CSS 修改 a 標籤屬性再進化
19. CSS 其他自訂屬性方式