網路連線概論、網頁設計入門、HTML、CSS 基礎概念、DOM 基礎概念

1. 網頁應用程式開發入門 I
Lorex L. Yang（楊宇凡）<ceo@sita.tech>
Nov 28, 2020／鳳山高中標準化醫學資訊工作坊

2. Agenda
• 網路連線概論
• HTML 5 入門
 基礎語法介紹
 常見 HTML 標籤介紹
• CSS 3 入門
 基礎語法介紹
 常見屬性介紹

3. 網路連線概論

4. 你在瀏覽器輸入網址、到顯示網頁內
容中間，到底發生了什麼事？

5. 連線流程
1. 你在網址列輸入網址
2. 瀏覽器拿著網址去跟 DNS 伺服器要 IP
3. DNS 伺服器回報 IP
4. 瀏覽器拿著 IP 去跟目標伺服器要資料
5. 目標伺服器回傳資料
6. 瀏覽器處理資料後顯示網頁內容

6. 網頁設計入門

7. 網頁前端金三角
HTML
• 網頁結構
• 排版
CSS
• 樣式
• 外觀
Javascript
• 行為控制
• 內容控制

8. HTML 是什麼？能吃嗎？
• HTML（Hypertext Markup Language，超文字標示語言）
• 是一種用來組織架構並且呈現網頁內容的語言
• 網頁內容組成可能包含段落、清單、文字、圖片、表格…等
• HTML 不是一種程式語言，而是用來告訴瀏覽器該如何呈現網頁的標記式語言
(markup language)
• HTML 5 是目前最新版本的 HTML，也是目前主流使用的 HTML 版本

9. HTML 基礎概念
元素 & 屬性

10. HTML 元素（Element）

11. HTML 巢狀元素（Nesting Elements）

12. 空元素（Empty Element）

13. 屬性（Attributes）

14. 布林屬性（Boolean Attributes）

15. 解析 HTML Document
文件類型
根元素（Root Element）
Head 元素
指定為 utf-8 編碼
網頁標題
Body 元素（網頁內容）

16. 特殊字元

17. 註解

18. HTML 結構化階層

19. 標題、段落
• HTML 裡共有六種標題元素：
 <h1>
 <h2>
 <h3>
 <h4>
 <h5>
 <h6>
• <h1> 層級最高、<h6> 層級最低
• <p> 為段落元素

20. 清單
• 清單項目 <li>
 每一個清單項目都要用一組 <li> 包起來
• 無序清單 <ul>
 裡面包著若干個 <li> 項目
 清單不會進行排序，僅會顯示項目標頭
• 有序清單 <ol>
 裡面標著若干個 <li> 項目
 清單會以數字進行排序

21. 粗體、斜體
斜體 <em> 粗體 <strong>

22. 超連結
• 使用 <a href=“xxx”> 來建立連結
• <a> 元素內可以包含文字、圖片…等
• href 屬性為目標連結網址
• 絕對 URL
 指向網路上的絕對位址，通常包含協定
（Protocol）和網域名稱（Domain Name）
 例如http://www.example.com/projects/index.html
• 相對 URL
 指向這個網站的相對位置，例如 pdfs/project-brief.pdf
 上述相對 URL 的等效絕對 URL 為
http://www.example.com/projects/pdfs/project-brief.pdf
 可以的話，盡可能使用相對 URL

23. 超連結
• Email 連結
 範例：
mailto:nowhere@mozilla.org?cc=nobody@mozill
a.org&subject=This%20is%20the%20subject
 與 http:// 不同，前面要改加上 mailto:
 mailto: 後面緊跟著收件人信箱
 後面可以加上副本（cc）、密件副本（bcc）、主
旨（subject）與主體（body）等參數
• 電話號碼連結
 範例：tel:0912345678
 通常適用於行動裝置，使用手機瀏覽網站時，戳
到電話號碼連結，就會自動跳轉到撥號頁面

24. 其他元素：縮排
• 縮排
 用法跟清單差不多，最外層是 <dl>，包著
<dt>、<dd> 元素
 <dt> 為項目標題
 <dd> 為項目敘述，會產生縮排的效果
• 引用
 用法為將一段內容用 <blockquote> 包起來
 通常為表示一段內容是從外部引用來的
 cite 屬性為要指引到解釋內容的資訊，例如
資料或援引的來源
• 縮寫標記
 用法為將一段內容用 <abbr> 包起來
 title 屬性為說明文字
 滑鼠滑過去 <abbr> 內的元素時，就會顯示
title 內的說明文字內容

25. 表單

26. CSS 基礎概念

27. CSS 又是什麼？能吃嗎？
• HTML 只有排版功能，很醜
• CSS 是一種基於規則的語言，你可以使用 CSS 來為 HTML 指定一系列規則
 例如「所有階級為 <h1> 的標題，都用國瑜藍 iPhone 藍來呈現」
• 樣式規則由一個樣式選擇器及若干聲明（Statement）組成

28. CSS 基礎語法

29. 根據行為定義的 CSS 規則

30. CSS 事實上如何運作？

31. DOM 概念

32. Q&A