什麼是HTML，為什麼要使用它?
如何建立網站？
Python? C++? Ruby? Java?
HTML
HTML (Hyper Text Markup Language)
(超文字標記語言)
簡而言之：
HTML元素標記內容的不同部分，例如“這是標題”、“這是段落”、“這是鏈接”等等。
HTML的優點
⚡ HTML是輕量級(Lightweight)的，加載速度快
基本結構
index.html
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Life is Possible ar</ title >
</ head >
< body >
<!-- All stuff here -->
< h1 > Hello mate </ h1 >
</ body >
</ html > 簡單結構
index.html
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
<!-- All Style / CSS / Headerstuff here -->
<!-- To define meta tags, css file, title is here -->
</ head >
< body >
<!-- All HTML / JS stuff here -->
<!-- To define visible stuff and JS script here -->
</ body >
</ html > 🏷 基本標籤
這些標籤是很重要的基礎知識
<html> </html>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
<html> 元素代表HTML文檔的根（頂級元素），因此也被稱為根元素。所有其他元素都必須是此元素的子孫元素。
也就是說，告訴電腦這個文件是一個HTML文件。
<head> </head>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
<head>元素包含有關文檔的機器可讀信息（元數據），例如其標題，腳本和樣式表。
也就是說，告訴電腦這些項目是標題，腳本和樣式表。
<body> </body>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
<body> HTML 元素表示 HTML 文檔的內容。一個文檔中只能有一個 <body> 元素。
也就是說，告訴電腦這些在這些標籤之間的部分是 HTML 文檔的內容。
index.html
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Life is Possible ar</ title >
</ head >
< body >
<!-- All stuff here -->
< h1 > Hello mate </ h1 >
</ body >
</ html > 成品
注意事項
有些標籤是成對出現的，但有些標籤不是。 例如：（成對出現：<body>...</body>，單獨出現：<meta>）
請查閱文件和教程以檢查其使用方法。
基本標籤
🏷 body 標籤 (與容器相關)
<div> : 基本框盒標籤
<section> : 儲存各個區域 的內容
規則 1
通常 HTML 標籤是成對出現的
Copy 開始標籤 結束標籤
< div > </ div >
Copy < div >some stuff inside the box</ div >
< header >some stuff inside the box</ header >
< footer >some stuff inside the box</ footer > 規則 2
標籤可以互相嵌套，只要語法正確即可
Copy < div >
< div >hello</ div >
< div >
< div >hello</ div >
< div >yolo</ div >
</ div >
</ div > Ref: https://www.interviewbit.com/blog/difference-between-html-and-css/
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Hi all</ title >
</ head >
< body >
< header >Hello all</ header >
< div >
< h1 >Hello</ h1 >
</ div >
< footer >Bye</ footer >
</ body >
</ html > 主要常用的標籤
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Hi all</ title >
</ head >
< body >
< h1 >Hello</ h1 >
< h2 >Hello 2</ h2 >
< h3 >Hello 3</ h3 >
< br >
< p >Yoooo</ p >
< span >Apple</ span >
< b >I am strong</ b >
</ body >
</ html > 主要常用的標籤
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Hi all</ title >
</ head >
< body >
< a href = "https://youtu.be/dQw4w9WgXcQ" > Funny youtube video </ a >
< hr >
< img
src = "/media/orange.jpg"
alt = "I am a orange"
>
</ body >
</ html > <ul>, <ol>, <li>: 無序清單、有序清單和清單項目。
稍後會在 JS 課程中進一步介紹。
查看此處以了解我們可以在 HTML 中使用什麼：
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
‼ 記住：搜尋 Google 和文件是編碼的關鍵。 ‼
Lab 01 - 嘗試複製網站
嘗試使用 html 代碼編寫相關圖像。
註： 😀 是一個表情符號。
Lab 02 - 自我介紹
使用以下模板，嘗試用 HTML 頁面介紹自己。 (中英文都可以)
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Peter homepages</ title >
</ head >
< body >
<!-- Your content -->
</ body >
</ html > 你的網頁應包含Must 以下內容：
你也可以包含Should 以下內容：
完成後，你會有30-60秒的時間向其他人展示你的網站。將site.html重新命名為 <your-name>_l01_lab02.html，例如 peter_l01_lab02.html 。
你可以將網站提交到以下google表格中： （連結將在課堂時間分享）
額外閱讀 (英語)
https://www.w3schools.com/html/
https://zellwk.com/blog/html-structure/
