HTML基礎
以下是一份為初學者設計的 HTML 教材，內容簡潔易懂，並包含實用範例：
HTML 教學
什麼是 HTML？
HTML（HyperText Markup Language）是一種用來描述網頁結構的標籤語言。簡單來說，HTML 就是用來告訴瀏覽器，網頁中的文字、圖片、連結等元素應該如何呈現。
為什麼要學 HTML？
- 建立自己的網站： 不需要依賴其他人，你可以自由設計並製作屬於自己的網頁。
- 客製化網頁： 你可以根據自己的需求，調整網頁的樣式和內容。
- 了解網頁運作： 學會 HTML 能幫助你更好地理解網頁的結構和原理。
HTML 的基本結構
一個 HTML 文件的基本結構如下：
HTML
<!DOCTYPE html> <html> <head> <title>我的第一個網頁</title> </head> <body> <h1>歡迎來到我的網站！</h1> <p>這是一個簡單的 HTML 範例。</p> </body> </html>
- <!DOCTYPE html>: 告訴瀏覽器，這是一個 HTML5 文件。
- <html>: 代表整個 HTML 文件。
- <head>: 包含網頁的標題和其他元數據。
- <title>: 設定網頁的標題，顯示在瀏覽器的標籤上。
- <body>: 包含網頁的可視內容。
常用的 HTML 標籤
- 段落：
<p> - 標題：
<h1>,<h2>,<h3>, … - 強調：
<strong>,<em> - 列表：
<ul>(無序列表),<ol>(有序列表),<li>(列表項目) - 連結：
<a> - 圖片：
<img>
HTML 屬性
屬性是用來提供元素額外資訊的。例如：
<a href="https://www.google.com">Google</a>：href 屬性指定連結的網址。<img src="image.jpg" alt="我的圖片">：src 屬性指定圖片的來源，alt 屬性提供圖片的替代文字。
實作練習
- 建立一個 HTML 文件： 使用文字編輯器（如 Notepad、Sublime Text、Visual Studio Code）創建一個新的文字文件，並將副檔名改為 .html。
- 輸入 HTML 程式碼： 將上面的範例程式碼複製到你的 HTML 文件中。
- 在瀏覽器中開啟： 將保存好的 HTML 文件拖曳到瀏覽器中，或者在瀏覽器的地址欄輸入文件路徑。
進階主題
- 表格：
<table> - 表單：
<form> - 分區：
<div> - 內嵌框架：
<iframe>
學習資源
- W3Schools: https://www.w3schools.com/
- MDN Web Docs: https://developer.mozilla.org/
- FreeCodeCamp: https://www.freecodecamp.org/
建議：
- 多練習： 建立一個屬於自己的網頁，不斷嘗試新的 HTML 元素和屬性。
- 查閱文件： 當遇到問題時，可以參考 W3Schools 或 MDN Web Docs 上的詳細說明。
- 加入社群： 與其他學習 HTML 的人交流，共同進步。
範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>我的興趣</h1>
<ul>
<li>程式設計</li>
<li>閱讀</li>
<li>旅行</li>
</ul>
<img src="cat.jpg" alt="可愛的貓咪">
</body>
</html>
反思更具體的問題，例如：
- 如何讓文字變大或變色？
- 如何製作一個表格？
- 如何嵌入一個 YouTube 影片？