對於新接觸網頁開發的人來說，HTML 與 CSS 是兩個最重要的網頁開發語言。這兩個語言也是最簡單的網頁開發語言。如果你一直都想要有設計網頁的經驗但害怕接觸程式，這門課程會用快速且簡單的方法讓你學會這兩個語言。
這門課程採用做中學的方式，一步步引導你從零開始完成迷你網頁。
這門課讓你用快速且簡單的方法學會網頁設計領域中最重要的兩個語言。
- HTML 基礎
- HTML 父子結構
- CSS 基礎
- ID 選擇器
- 撰寫代碼與設計網頁樣式
- 了解網頁的組成
網路上每一個網頁都是由程式語言代碼來完成。有許多程式語言都可以讓你的網站有各種應用，但其中最重要的兩個程式語言就是 HTML 與 CSS 。實際上，即使是聘請其他廠商設計網頁的人，對於這兩種語言也該具備基本的了解。有了這兩種語言的基本知識，你就可以不用仰賴其他人，對網頁的格式做一些調校。
課程內容與課程概要
這一門課程包含 77 個講座、講座影片總共有 8 個小時。這一門課會讓你對於 HTML 與 CSS 有基本的了解。這一門課會引導你直接撰寫代碼，從實作中學習，並且在課程的尾聲會利用 HTML 與 CSS 完成屬於你自己的網頁。
Read more
對於新接觸網頁開發的人來說，HTML 與 CSS 是兩個最重要的網頁開發語言。這兩個語言也是最簡單的網頁開發語言。如果你一直都想要有設計網頁的經驗但害怕接觸程式，這門課程會用快速且簡單的方法讓你學會這兩個語言。
這門課程採用做中學的方式，一步步引導你從零開始完成迷你網頁。
這門課讓你用快速且簡單的方法學會網頁設計領域中最重要的兩個語言。
- HTML 基礎
- HTML 父子結構
- CSS 基礎
- ID 選擇器
- 撰寫代碼與設計網頁樣式
- 了解網頁的組成
網路上每一個網頁都是由程式語言代碼來完成。有許多程式語言都可以讓你的網站有各種應用，但其中最重要的兩個程式語言就是 HTML 與 CSS 。實際上，即使是聘請其他廠商設計網頁的人，對於這兩種語言也該具備基本的了解。有了這兩種語言的基本知識，你就可以不用仰賴其他人，對網頁的格式做一些調校。
課程內容與課程概要
這一門課程包含 77 個講座、講座影片總共有 8 個小時。這一門課會讓你對於 HTML 與 CSS 有基本的了解。這一門課會引導你直接撰寫代碼，從實作中學習，並且在課程的尾聲會利用 HTML 與 CSS 完成屬於你自己的網頁。
對於新接觸網頁開發的人來說，HTML 與 CSS 是兩個最重要的網頁開發語言。這兩個語言也是最簡單的網頁開發語言。如果你一直都想要有設計網頁的經驗但害怕接觸程式，這門課程會用快速且簡單的方法讓你學會這兩個語言。
這門課程採用做中學的方式，一步步引導你從零開始完成迷你網頁。
這門課讓你用快速且簡單的方法學會網頁設計領域中最重要的兩個語言。
- HTML 基礎
- HTML 父子結構
- CSS 基礎
- ID 選擇器
- 撰寫代碼與設計網頁樣式
- 了解網頁的組成
網路上每一個網頁都是由程式語言代碼來完成。有許多程式語言都可以讓你的網站有各種應用，但其中最重要的兩個程式語言就是 HTML 與 CSS 。實際上，即使是聘請其他廠商設計網頁的人，對於這兩種語言也該具備基本的了解。有了這兩種語言的基本知識，你就可以不用仰賴其他人，對網頁的格式做一些調校。
課程內容與課程概要
這一門課程包含 77 個講座、講座影片總共有 8 個小時。這一門課會讓你對於 HTML 與 CSS 有基本的了解。這一門課會引導你直接撰寫代碼，從實作中學習，並且在課程的尾聲會利用 HTML 與 CSS 完成屬於你自己的網頁。
課程一開始你會知道 HTML 與 CSS 是什麼，並了解這兩種語言的用途。這一門課程中，你會建造數個迷你網頁，藉此複習學習到的知識。課程中的應用練習也能幫助磨練你的技能
不論你是熱情的網頁設計者、部落客、程式開發員或是企業主，你都可以從學習 HTML 與 CSS 中得益。你可以建造自己的動態網頁，或是管理你已經擁有的網頁。如果你計畫要成為一個網頁開發者或是設計者，HTML 與 CSS 是最基本的兩個語言。實際上，任何人、從任何角度學習網頁開發，都需要學會 HTML 語言。同時學習 HTML 與 CSS 讓你能立刻開始設計網頁。
What's inside
Learning objectives
- 這門課結束時，你能夠完整的了解 html 與 css 的基礎知識
- 這門課程結束後，你會具備撰寫一些 html 與 css 範例的相關經驗
- 這門課的最後部份，你主要在使用 html 與 css 建造一個精美且具有意涵的網頁
- 在這門課程的最後，你會對自己感到驚訝，你能立即發揮所學技能
- 你有能力建造精美的網頁
- 你可以建造作品集網頁，強調你的網頁設計技能
- 你可以開始著手進行，發展你的網頁設計職涯
- 這門課結束時，你能夠完整的了解 html 與 css 的基礎知識
- 這門課程結束後，你會具備撰寫一些 html 與 css 範例的相關經驗
- 這門課的最後部份，你主要在使用 html 與 css 建造一個精美且具有意涵的網頁
- 在這門課程的最後，你會對自己感到驚訝，你能立即發揮所學技能
- 你有能力建造精美的網頁
- 你可以建造作品集網頁，強調你的網頁設計技能
- 你可以開始著手進行，發展你的網頁設計職涯
Syllabus
啟程
歡迎來到 從零開始用 HTML 和 CSS 打造網站！這是第一堂課，我們會簡介這門課程如何教導你從零開始使用 HTML 與 CSS 打造網站。
這堂課我們會學習 HTML 與 CSS 的用途，以及兩者之間的差異。
這堂課我們會學習 HTML tag, HTML 屬性及 HTML 元素。
Read more
Syllabus
歡迎來到 從零開始用 HTML 和 CSS 打造網站！這是第一堂課，我們會簡介這門課程如何教導你從零開始使用 HTML 與 CSS 打造網站。
這堂課我們會學習 HTML 與 CSS 的用途，以及兩者之間的差異。
這堂課我們會學習 HTML tag, HTML 屬性及 HTML 元素。
這堂課我們會學習大部份網站所使用的檔案與資料夾命名規則。
這堂課我們會學習一個簡單網站的檔案與資料夾結構。
這堂課我們會學習專業網頁設計師如何用最好的方法讓開發檔案保持整齊。
這堂課我們會學習如何使用正確的工具學習網頁設計。
請注意：
我把一些連結當作這堂課程的外部資源，你可以下載或購買這些軟體以加強你的學習體驗。
有些連結是我的 '會員' 連結，假設你從這些連結購買軟體，我會分得些許的佣金，而不會對你造成額外的花費。你可以把這個方式當作免費的給予小費 :）
了解你目前學到的HTML 知識
這堂課我們會學習如何建立你的第一個網頁！
Doctype 是什麼？這堂課我們會學習 Doctype 是什麼以及為何我們要使用 Doctype :）
這堂課我們會學習如何動手撰寫 HTML 文件的基本架構。
這堂課我們會學習如何使用 HTML 在網頁上添加網頁標題。
這堂課我們會學習如何使用 HTML 階層一至階層六標題。
這堂課我們會學習如何使用 HTML 段落元素。
這堂課我們會學習如何使用 HTML em 元素與 strong 元素強調文字。
這堂課我們會學習 HTML 元素之間的父子關係與層級。這個架構就像是族譜。
這堂課我們會親自動手做，將這個部份所學到的知識應用在一個迷你的網頁上。
了解你在這個章節中學到的 HTML 基礎知識
這堂課我們會學習如何在網頁上建立連結。
這堂課我們會學習三種列表的使用方式：
- Unordered lists
- Ordered lists
- Description lists
這堂課我們會學習如何在網頁內添加圖片！
這堂課我們會學習 HTML5 標準的 address 元素。
這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。
了解你在這個章節中學到的HTML 基礎知識
這堂課我們會學習 HTML 表格元素。
這堂課我們會學習 HTML 表單元素。
這堂課我們會學習 HTML 特殊字元。
這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。
了解你在這個章節中學到的 HTML 基礎知識
這堂課我們會學習 HTML 元素的 id 與 class 屬性。
這堂課我們會學習 span 與 div 元素。
這堂課我們會學習 HTML5 header 與 footer 元素。
這堂課我們會學習 HTML5 nav 元素, section 元素與 article 元素的正確用法。
這堂課我們會學習 HTML aside 元素。
這堂課我們會學習 HTML time 元素。
這堂課我們會學習 abbr 元素, q 元素與 blockquote 元素。
這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。
這堂課我們會學習 CSS 樣式規則是什麼。
這堂課我們會學習三種添加 CSS 的其中一種方法：行內樣式。
這堂課我們會學習三種添加 CSS 的其中一種方法：外部樣式。
這堂課我們會學習三種添加 CSS 的其中一種方法：外部樣式。
這堂課我們會學習 CSS 選擇器, 屬性與屬性值。
這堂課我們會學習一些 CSS 樣式的繼承規則。
這堂課我們會學習 CSS 最常使用的長度單位。
了解你在這個章節中學到的 CSS 基礎知識
這堂課我們會學習使用 CSS 的 id 選擇器。
這堂課我們會學習使用 CSS 的 class 選擇器。
這堂課我們會學習使用 CSS 的 後代選擇器。
這堂課我們會學習使用 CSS 的 群組選擇器，幫助我們撰寫有效率的程式碼！
這堂課是上一個課程的更新資料。
了解你在這個章節中學到的 CSS 基礎知識
這堂課我們會學習 CSS 的 Box Model。
這堂課我們會學習 CSS 的顏色設定。
這堂課我們會學習 CSS 的文字樣式設定。
這堂課我們會學習如何使用 CSS 樣式讓字型變得好看。
這堂課我們會學習 CSS 的邊界。
這堂課我們會學習 CSS 的背景圖片。
這堂課我們會學習使用 CSS 建立好看的 HTML 表單！
這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。
了解你在這個章節中學到的 CSS 基礎知識
這堂課我們會學習設定超連結樣式。
這堂課我們會學習塊元素與行內元素的差異。
這堂課我們提供了一些簡單的資料讓你了解 CSS 漂移。
這堂課我們會學習元素相對定位與絕對定位。
這堂課我們會學習 CSS 權重。
這堂課我們會動手做，將目前所學到的技巧建立迷你網站！
這是上一個課程的第二部份。
了解你在這個章節中學到的 CSS 基礎知識
這堂課我們會一瞥最終網頁的全貌。
這堂課我們會了解如何藉由下載課程檔案附件增進學習經驗。
下載課程檔案的方法：
點擊位於外部資源的連結。
這堂課我們會撰寫網頁的頁眉與 Hero 區塊。
這堂課我們會撰寫網頁的 General Content 部份。
這堂課我們會撰寫網頁的 News 與 Events 區塊。
這堂課我們會撰寫網頁的頁尾。
這堂課我們會學習如何替網頁套用 normalize.css 檔案。
這堂課我們會使用 CSS 整理網頁外觀。
這堂課我們會使用 CSS 設定網頁頁眉樣式。
這堂課我們會使用 CSS 設定 Hero 區塊樣式。
這堂課我們會使用 CSS 設定 General Content 區塊樣式。
這堂課我們會使用 CSS 設定 News 與 Events 區塊樣式。
這堂課我們會使用 CSS 設定頁尾樣式。
這堂課我們會檢視網頁完成後的外觀並做一些結論 :）
這堂課我們會對完成這門課之後的學生提供未來繼續學習的建議！
Save this course
Save
Activities
Career center
Reading list
Save
Save
Save
Save
Save
Save
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
