Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn More網頁前端開發三部曲：HTML
Rating: 4.3 out of 54.3(3 ratings)
9 students
網頁前端開發三部曲：HTML
透過運算思考的方式，透過正確的 HTML 語法建立穩定的開發基礎及學習設計與建立網站。
Created by大寶 潘
Last updated 5/2024
Chinese (Traditional)
What you'll learn
- 網頁設計
- HTML
- GitHub
- 運算思維
Explore related topics
Course content
5 sections • 26 lectures • 5h 44m total length
- 為你設計的網頁設計課程5:36
- 關於網頁設計三部曲 - HTML2:30
- 認識網頁基礎運作4:00
網頁是透過一系列的文字標籤來組成，這些文字標籤稱為 HTML 程式碼。HTML 程式碼會告訴瀏覽器如何顯示網頁的內容，例如文字、圖片、影片、表格等。
當您在瀏覽器中輸入網址時，瀏覽器會向網站的伺服器發送請求。伺服器會將網頁的 HTML 程式碼傳送給瀏覽器。瀏覽器會解析 HTML 程式碼並顯示網頁的內容。
網頁的運作可以分為以下幾個步驟：
使用者在瀏覽器中輸入網址。
瀏覽器向網站的伺服器發送請求。
伺服器將網頁的 HTML 程式碼傳送給瀏覽器。
瀏覽器解析 HTML 程式碼並顯示網頁的內容。
網頁的運作是一個複雜的過程，但它使我們可以輕鬆地存取和瀏覽網頁上的資訊。
- 網站基礎概念先修（一）24:00
- 網站基礎概念先修（二）27:16
網域名稱註冊服務
匯智
GoDaddy
namecheap
google domain
- 網站開發流程10:22
- 裝起來：安裝、申請與設定16:12
- 什麼是 HTML5:27
HTML 是指超文本標記語言，它是一種用於創建網頁的標記語言。HTML 標記語言使用標記來告訴瀏覽器如何顯示網頁的內容。HTML 標記語言非常簡單易學，可以用任何文字編輯器來編寫。
HTML 標記語言的基礎元素是標籤。標籤由尖括號 < 和 > 組成，標籤的名稱位於尖括號之間。標籤可以是開啟標籤或閉合標籤。開啟標籤告訴瀏覽器開始顯示內容，閉合標籤告訴瀏覽器結束顯示內容。
HTML 標記語言中有很多不同的標籤，每個標籤都有不同的功能。例如，<h1> 標籤用於顯示標題，<p> 標籤用於顯示段落，<img> 標籤用於顯示圖像。
HTML 標記語言可以用來創建各種各樣的網頁，從簡單的文字網頁到複雜的網站。如果您想學習 HTML，有很多資源可以幫助您。您可以在網上找到許多教程，也可以在書店中找到許多書籍。
- 專案啟動13:05
- index.html19:58
index.html 是 HTML 網頁的預設檔案名稱。當您在瀏覽器中輸入網址時，瀏覽器會首先嘗試載入 index.html 檔案。如果沒有 index.html 檔案，瀏覽器會顯示錯誤訊息。
index.html 檔案可以包含任何 HTML 標記。最常見的用法是包含網頁的標題、文字、圖片和其他內容。
以下是 index.html 檔案的範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my website.</p>
<img src="image.jpg" alt="My Website Image">
</body>
</html>
這個檔案會在瀏覽器中顯示以下內容：
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my website.</p>
<img src="image.jpg" alt="My Website Image">
</body>
</html>
如果您要建立新的 HTML 網頁，您可以使用任何文字編輯器來建立 index.html 檔案。然後，您可以將檔案上傳到網站的根目錄。
- 一切都是方的10:14
網頁上的 HTML 元素以矩形框架呈現，而 CSS 盒模型是描述這些框架的概念。它是組成 HTML 網頁的基礎概念。
盒模型由四個部分組成：
內容：這是 HTML 元素的實際內容。
填充：這是內容和邊框之間的空間。
邊框：這是環繞內容和填充的線條。
邊距：這是一個元素的邊框和另一個元素的邊框之間的空間。
盒模型用於控制 HTML 元素的大小和佈局。例如，我們可以使用盒模型來設定元素的寬度和高度，或添加填充或邊框。
- 頁面分析16:46
- 運算思維：拆解5:41
拆解是一種運算思維技能，它可以幫助我們將複雜的問題分解成更小的、更容易解決的子問題。拆解可以幫助我們更好地理解問題，並找到解決問題的最佳方法。
拆解的步驟如下：
識別問題的關鍵要素。
將問題分解成更小的、更容易解決的子問題。
針對每個子問題，找到解決問題的方法。
將子問題的解決方案組合起來，解決原始問題。
拆解是一種重要的運算思維技能，它可以幫助我們在許多領域解決問題。例如，在學習新知識時，我們可以使用拆解來將複雜的概念分解成更小的、更容易理解的部分。在工作中，我們可以使用拆解來將複雜的任務分解成更小的、更容易完成的步驟。在生活中，我們可以使用拆解來解決複雜的問題，例如規劃旅行、組織活動等。
拆解是一種簡單但有效的運算思維技能，它可以幫助我們在許多領域解決問題。
- 運算思維：模式識別9:12
模式識別是一種計算機科學技術，它可以幫助我們從大量的數據中找出隱藏的模式。模式識別在許多領域都有應用，例如生物醫學、金融、零售和製造業等。
運算思維中的模式識別能力可以幫助我們更好地理解和分析問題，並找到解決問題的最佳方法。例如，在生物醫學領域，模式識別可以幫助我們從大量的醫療數據中找出隱藏的疾病模式，從而開發新的治療方法。在金融領域，模式識別可以幫助我們從大量的財務數據中找出隱藏的市場模式，從而做出明智的投資決策。在零售領域，模式識別可以幫助我們從大量的客戶數據中找出隱藏的購買模式，從而提高銷售業績。在製造業領域，模式識別可以幫助我們從大量的生產數據中找出隱藏的故障模式，從而提高生產效率。
模式識別是一種重要的運算思維能力，它可以幫助我們在許多領域解決問題。
- 運算思維：數據化、抽象化12:00
數據化是指將問題中的資訊轉換成數據。數據可以是數字、文字、圖像或音訊等。數據化可以幫助我們更好地理解問題，並找出解決問題的關鍵資訊。
抽象化是指將複雜的資訊簡化成更簡單的形式。抽象化可以幫助我們更好地理解問題，並找到解決問題的策略。
以下是數據化和抽象化在運算思維中的應用：
在遊戲中，我們可以使用數據化來分析遊戲的規則，並找到最有效的遊戲策略。
在數學中，我們可以使用數據化來解決數學問題，並找到最簡潔的解法。
在科學中，我們可以使用數據化來分析實驗數據，並得出合理的結論。
在工程中，我們可以使用數據化來設計和製造產品，並提高產品的性能。
在商業中，我們可以使用數據化來分析市場數據，並做出明智的決策。
數據化和抽象化是運算思維中的重要概念，它們可以幫助我們更好地解決問題。
- 區塊18:53
HTML 中的 <div> 標籤用於創建一個容器，可以包含其他 HTML 元素。div 標籤沒有任何內建的樣式，但可以使用 CSS 來對其進行樣式化。
以下是 <div> 標籤的示例：
HTML
<div>This is a div.</div>
此標籤將創建一個包含文字 "This is a div." 的容器。
div 標籤可以用於各種目的，例如：
創建網頁的不同部分，例如 header、footer 和 main content。
分組相關的 HTML 元素。
應用 CSS 樣式到一組 HTML 元素。
div 標籤是 HTML 中非常強大的工具，可以用於各種目的。
以下是 <div> 標籤的一些常見用途：
創建網頁的不同部分，例如 header、footer 和 main content。
分組相關的 HTML 元素，例如圖像、文字和表格。
應用 CSS 樣式到一組 HTML 元素，例如更改文字顏色、大小或背景顏色。
創建自定義網頁佈局。
您可以使用 div 標籤來創建您想要的任何內容。
- 程式縮排14:50
- 超連結13:24
HTML 中的 <a> 標籤用於創建超連結，超連結是允許使用者從一個頁面導航到另一個頁面的鏈接。<a> 標籤有幾個屬性，包括：
href：超連結指向的頁面的 URL。
title：超連結的標題，當滑鼠懸停在超連結上時顯示。
target：超連結將在哪個窗口或框架中打開。
以下是 <a> 標籤的示例：
HTML
<a href="https://www.google.com">Google</a>
此標籤將創建一個超連結，指向 Google 網站。文本 "Google" 將是鏈接的可見文字。
a 標籤也可以用於創建鏈接到電子郵件地址、同一頁面中的位置以及其他資源。
以下是 a 標籤的一些常見用途：
創建鏈接到其他網站。
創建鏈接到同一頁面中的位置。
創建鏈接到電子郵件地址。
創建鏈接到其他資源，例如圖像、PDF 文件或音頻文件。
您可以使用 a 標籤來創建您想要的任何鏈接。
- 列表7:31
在 HTML 中，<ul> 標籤用於創建無序列表。無序列表中的項目由 <li> 標籤表示。
以下是 <ul> 標籤的示例：
HTML
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
此標籤將創建一個無序列表，其中包含三個項目。
<ul> 標籤是 HTML 中用於創建列表的兩種標籤之一。另一種標籤是 <ol>，用於創建有序列表。
有序列表中的項目使用數字或字母進行編號。
以下是 <ol> 標籤的示例：
HTML
<ol>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ol>
此標籤將創建一個有序列表，其中包含三個項目，並使用數字進行編號。
<ul> 和 <ol> 標籤都可以用於創建列表。選擇哪種標籤取決於您想要列表的顯示方式。
如果您想列表中的項目不按任何特定順序顯示，請使用 <ul> 標籤。如果您想列表中的項目按順序顯示，請使用 <ol> 標籤。
- 按鈕8:55
HTML 中的 <button> 元素是一種容器元素，可用於在網頁上建立可以讓使用者點擊的按鈕。<button> 元素可以包含文字、圖片或其他 HTML 元素。<button> 元素可以與表單一起使用，也可以獨立使用。
<button> 元素有許多屬性，可用於自訂按鈕的樣式和行為。一些常見的屬性包括：
type 屬性：指定按鈕的類型。可以使用以下值：
submit：提交表單
reset：清除表單
button：按鈕
value 屬性：指定按鈕的值。當按鈕被按下時，此值將被傳遞到伺服器。
name 屬性：指定按鈕的名稱。此名稱可用於識別按鈕，並將其與表單中的其他元素相關聯。
id 屬性：指定按鈕的 ID。此 ID 可用於在 JavaScript 中引用按鈕。
以下是 <button> 元素的一個簡單範例：
HTML
<button type="submit">Submit</button>
此按鈕將提交表單。當按鈕被按下時，值 "Submit" 將被傳遞到伺服器。
<button> 元素可用於建立各種各樣的按鈕，包括：
提交按鈕
重置按鈕
功能按鈕
自訂按鈕
通過使用 <button> 元素，您可以為您的網頁建立交互式和吸引人的按鈕。
- 文字21:25
在 HTML 中，有許多標籤可用於格式化文字。以下是一些最常見的標籤：
<b>, <strong>：用於粗體文字。
<i>, <em>：用於斜體文字。
<u>：用於下划線文字。
<s>：用於刪除線文字。
<mark>：用於突出顯示文字。
<code>：用於顯示程式碼文字。
<pre>：用於顯示原始文字。
<blockquote>：用於顯示引文。
<q>：用於顯示單行引文。
您可以使用這些標籤來格式化您的文字，以使其更容易閱讀和理解。您還可以使用 CSS 來進一步自定義文字的樣式。
- 圖片15:53
HTML image 是一種用於在網頁上顯示圖片的標籤。圖片可以用來美化網頁，也可以用來傳遞資訊。
要創建 HTML image，您需要使用 <img> 標籤。<img> 標籤的 src 屬性用於指定圖片的來源，alt 屬性用於指定圖片的替代文字，如果圖片無法載入時會顯示。
您可以使用 HTML image 來顯示各種各樣的圖片，從簡單的圖片到複雜的圖片。圖片是一種簡單而有效的方式來美化網頁和傳遞資訊。
HTML 可以使用的圖片有以下幾種：
PNG (Portable Network Graphics)：一種無損壓縮圖片格式，具有透明度。
JPG (Joint Photographic Experts Group)：一種有損壓縮圖片格式，具有較高的壓縮率。
GIF (Graphics Interchange Format)：一種有損壓縮圖片格式，具有動畫效果。
SVG (Scalable Vector Graphics)：一種可縮放的向量圖形格式，具有高質量和可編輯性。
HTML 圖片可以通過 <img> 標籤來插入到網頁中。<img> 標籤有以下幾個屬性：
src：指定圖片的來源。
alt：指定圖片的替代文字，如果圖片無法載入時會顯示。
width：指定圖片的寬度。
height：指定圖片的高度。
title：指定圖片的標題，當用滑鼠懸停在圖片上時會顯示。
以下是一個簡單的 HTML 圖片範例：
HTML
<img src="image.jpg" alt="Image Description">
此範例會在網頁上顯示名為 image.jpg 的圖片。圖片的替代文字為 "Image Description"。
您可以使用 HTML 圖片來顯示各種各樣的圖片，從簡單的圖片到複雜的圖片。圖片是一種簡單而有效的方式來美化網頁和傳遞資訊。
- 表格15:38
HTML 表格是一種用於在網頁上顯示資料的標籤。表格由行和列組成，每行和每列可以包含一個或多個單元格。單元格可以包含文字、圖片、連結或其他 HTML 元素。
HTML 表格可以用來顯示各種各樣的資料，例如產品目錄、統計數據、時間表或任何其他需要以表格形式顯示的資訊。
要創建 HTML 表格，您需要使用 <table> 標籤。<table> 標籤的開啟和關閉標籤之間，您可以包含 <tr> 標籤和 <td> 標籤。<tr> 標籤用於創建表格的行，<td> 標籤用於創建表格的單元格。
<tr> 標籤和 <td> 標籤可以包含許多不同的屬性，這些屬性可以用來控制表格的外觀和行為。例如，您可以使用 <tr> 標籤的 "align" 屬性來控制行中的單元格如何對齊，您可以使用 <td> 標籤的 "width" 屬性來控制單元格的寬度。
以下是一個簡單的 HTML 表格範例：
HTML
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Occupation</td>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>23</td>
<td>Teacher</td>
</tr>
</table>
此表格有三行和三列。第一行包含表格的標題，第二行和第三行包含表格中的資料。
您可以使用 HTML 表格來顯示各種各樣的資料。表格是一種簡單而有效的方式來組織和顯示資料。
- 表單10:44
HTML form 表單是一種用於從使用者收集資料的標籤。表單由輸入欄位組成，每個輸入欄位可以包含不同的資料類型，例如文字、數字、日期或電子郵件地址。
HTML form 表單可以用來收集各種各樣的資料，例如註冊表單、聯絡表單或意見調查表單。
要創建 HTML form 表單，您需要使用 <form> 標籤。<form> 標籤的開啟和關閉標籤之間，您可以包含 <input> 標籤。<input> 標籤用於創建表單的輸入欄位。
<input> 標籤可以包含許多不同的屬性，這些屬性可以用來控制輸入欄位的外觀和行為。例如，您可以使用 <input> 標籤的 type 屬性來指定輸入欄位的類型，您可以使用 <input> 標籤的 name 屬性來指定輸入欄位的名稱。
以下是一個簡單的 HTML form 表單範例：
HTML
<form action="/submit" method="post">
<input type="text" name="name" />
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
此表單有兩個輸入欄位：一個文字欄位和一個電子郵件地址欄位。表單的提交按鈕標籤為 "Submit"。
您可以使用 HTML form 表單來收集各種各樣的資料。表單是一種簡單而有效的方式來從使用者收集資料。
- 認識 Github13:26
GitHub 是一個線上的軟體開發平台，讓開發人員可以儲存、分享和管理他們的程式碼。GitHub 是基於 Git 的版本控制系統，這意味著它可以追蹤程式碼的變更，並讓開發人員輕鬆地合作開發軟體。
GitHub 是世界上最大的軟體開發平台，有超過 8000 萬的活躍用戶。GitHub 被廣泛使用於各個產業，包括科技、金融、醫療和教育等。
GitHub 提供許多功能，包括：
儲存和管理程式碼
協作開發軟體
追蹤程式碼的變更
發布軟體
管理軟體的品質
與其他開發人員交流
GitHub 是開發人員不可或缺的工具，它可以幫助開發人員提高工作效率、提高軟體品質和與其他開發人員交流。
以下是一些 GitHub 的優點：
免費使用
使用簡單
功能強大
安全可靠
擁有龐大的開發人員社群
總體而言，GitHub 是一個優秀的軟體開發平台，它可以幫助開發人員提高工作效率、提高軟體品質和與其他開發人員交流。如果您是開發人員，我強烈建議您使用 GitHub。
- 發布 Github Pages21:39
好的，以下是簡單介紹 GitHub Pages 的內容：
GitHub Pages 是 GitHub 提供的一個免費的靜態網站託管服務，它允許使用者在 GitHub 上託管靜態網站，而不需要使用額外的網站託管服務。GitHub Pages 可以用來建立個人網站、部落格、作品集等，它非常簡單易用，而且可以與 GitHub 的其他功能很好地整合。
GitHub Pages 支持多種語言和框架，包括 HTML、CSS、JavaScript、Jekyll 和 Hugo。您可以使用任意語言或框架來建立您的網站。
GitHub Pages 是一個非常好用的靜態網站託管服務，它非常簡單易用，而且可以與 GitHub 的其他功能很好地整合。如果您需要建立一個靜態網站，我強烈建議您使用 GitHub Pages。
以下是一些使用 GitHub Pages 的優點：
免費
簡單易用
與 GitHub 的其他功能很好地整合
支持多種語言和框架
以下是一些使用 GitHub Pages 的缺點：
只能託管靜態網站
無法使用動態功能
無法使用複雜的網站設計
Requirements
- 無需任何經驗，只要聽得懂中文都能報名。
Description
網頁設計三步曲涵蓋如何編寫語法正確的 HTML 和 CSS，以及如何使用 JavaScript 創建交互式 Web 體驗。這門課主要以學習正確建立良好的 HTML 語法為主，之後會陸續推出二部曲的 CSS 及三部曲的 Javascript；掌握這一系列技術將使您能夠開發高質量的網站，這些網站可以在移動設備、平板電腦及瀏覽器上工作。在課程中，您將開發一個專業品質的作品集，展示您作為網頁開發人員的成長以及您在無障礙網頁設計方面的知識。這將包括您設計和實施響應式網站的能力，該網站利用工具創建可供廣大受眾訪問的網站，包括那些有視覺、聽覺、身體和認知障礙的人。
Who this course is for:
- 想成為網頁設計師
- 想成為前端工程師
- 對程式設計有興趣
- 想學習最夯的運算思維