Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML與CSS入門
Search
Bobby Tung
January 24, 2024
Technology
0
45
HTML與CSS入門
2020台灣數位出版聯盟線上課程
Bobby Tung
January 24, 2024
Tweet
Share
More Decks by Bobby Tung
See All by Bobby Tung
EPUB導覽文件完全攻略
bobbytung
0
43
以Markdown製作EPUB 3文字書
bobbytung
0
140
電子書無障礙發展史與規範實踐
bobbytung
0
42
都 2017 了注音還沒搞定嗎?
bobbytung
5
410
幾個中文排版訣竅,有效改善閱讀體驗
bobbytung
1
790
Other Decks in Technology
See All in Technology
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
Taming you application's environments
salaboy
0
190
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Git: the NoSQL Database
bkeepers
PRO
427
64k
What's in a price? How to price your products and services
michaelherold
243
12k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
BBQ
matthewcrist
85
9.3k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Transcript
董福興 2020年10 月 23 日 HTML與CSS入 門 數位出版聯盟EPUB3課程 第 二
堂
課程規劃 課程內容說明
整體課程規劃 主題與學習對象 • 10/23:HTML與CSS入 門 基本網 頁 技術與EPUB內容編輯 【對象】:需要調整EPUB內容的讀者與編輯者
• 10/28:EPUB結構詳解與範本介紹 EPUB結構與聯盟提供的範本說明 【對象】:電 子 書製作者或技術者
第 二 堂課程規劃 HTML與CSS入 門 • 第 一 節:HTML與CSS 用
途與XML規則 HTML與CSS的角 色 / EPUB中 用 到的網 頁 技術/ XML是什麼、XML的規則 • 第 二 節:HTML構成與常 用 標籤 HTML檔案構成 / 常 用 標籤 / EPUB常 用 模組 • 第三節:CSS基本概念與設計範例 CSS的構造 / CSS對應 方 式 / 層疊與繼承 / CSS選擇器 CSS常 用 單位 / CSS 色 彩 / CSS盒狀模型與縮寫 / 範例
講師介紹 董福興 Bobby Tung • 汪達數位出版(Wanderer Digital Publishing Inc.)創辦 人
• W3C 國際化 工 作 小 組邀請專輯,〈中 文 排版需求(CLREQ)〉編輯 • W3C Evangelist • 參與制定數位出版聯盟〈台灣 EPUB 3 製作指引〉 • 參與制定中推會業界標準〈注 音 符號排版〉
HTML與CSS 用 途與XML規則 構成內容的基本技術,與通 用 全EPUB的規則
EPUB內容 文 件 幾乎所有的EPUB內容都使 用 HTML • EPUB僅接受兩種內容 文 件
• XHTML內容 文 件 • SVG內容 文 件 • XHTML內容 文 件可以做到的三種事 • 文 字為主的內容(re fl ow): 一 般 文 字書。 • 固定版 面 漫畫(Fixed Layout):漫畫與雜誌。 • 固定版 面 複雜排版(Fixed Layout):繪本等。
EPUB中使 用 的網 頁 技術 HTML / CSS / JavaScript
HTML CSS JavaScript 內容結構 內容樣式 控制與動態
JavaScript動態範例 黃 心 健《科技蜃樓》 大 塊 文 化出版
JavaScript動態範例 黃 心 健《科技蜃樓》 大 塊 文 化出版
EPUB中使 用 的網 頁 技術 HTML / CSS的 角 色
• HTML內容「結構」 • 文 字書:標題、段落、引 言 、列表、圖片與圖說等⋯⋯ • 圖 文 書: 文 字區塊、圖片、物件等…… • CSS內容「樣式」 • 基本: 文 字 方 向、尺 寸 、字體、縮排、間距、邊界、邊框、定位等…… • 進階:版 面 設計(grid, fl exbox)、動畫(animate)、圖 文 變形(transform)等……
──某位CSS 工 作 小 組成員如此說 「如果系統不 支 援最新的CSS, 頂多只是難看 一
點,內容還是 一 樣的。」
XML是什麼? 用 於整體EPUB的重要知識
XML是什麼? XHTML與HTML有什麼差別? • HTML:網 頁 使 用 的 一 套標準化標記語
言 ; • XHTML:符合XML規則的HTML。 • XML是什麼? • eXtensible Markup Language的縮寫。 • 發展 自 SGML,由W3C於1998年完成制定。 • 結構簡單可延伸,但規則嚴謹。
XML是什麼? XML範例 <活動時間地點> <時間><年 紀年=" 西 元">2019</年>< 月 >3</ 月
>< 日 >12</ 日 ></時間> <地點>台北市</地點> </活動時間地點> 開始標籤 start-tag 結束標籤 end-tag 元素 element 屬性 attribute 值 value 內容 content
XML是什麼? XML宣告 <?xml version="1.0" encoding="UTF-8"?> 所有的XML開頭都要有這 一行 , 並且前 面
不能有空 白 。 <!DOCTYPE html> XML能使 用 哪些標籤與屬性, 需要定義DTD或者Schema, 這是HTML的DTD宣告。
XML規則 XML的八項規則 ① 所有XML都要有 一 個根元素<root> ② 所有標籤都需要結束(關閉) ③ 所有標籤都要完整以巢狀結構建構
④ 標籤名稱有所限制 ⑤ 標籤名稱有分 大小 寫 ⑥ 標籤名稱不能包含空格 ⑦ 屬性的值需要以""標記 ⑧ 空 白 會被保留
XML是什麼? 1. 所有XML都要有 一 個根元素<root> 根元素名稱不需要為<root>, 範例中根元素為<活動時間地點>, XHTML中則為<html> <活動時間地點> <時間><年
紀年=" 西 元">2019</年>< 月 >3</ 月 >< 日 >12</ 日 ></時間> <地點>台北市</地點> </活動時間地點>
XML是什麼? 2. 所有標籤都需要結束(關閉) <img src="image01.jpg alt=""></img> 有些元素像<img><hr><br>,沒有內容。 <img src="image01.jpg alt=""
/> 就在最末加上「/」來結束,稱為 「置空元素(empty element)」。
XML是什麼? 3. 所有標籤都要完整以巢狀結構建構 ❌<b><i> 文 字</b></i> ⭕<b><i> 文 字</i></b> 標籤的結束需要依序關閉。
HTML:<red>紅 色 <b>紅 色 粗體</red>粗體</b> XHTML:<red>紅 色 <b>紅 色 粗體</b></red><b>粗體</b> HTML相對寬鬆,但XHTML需要嚴謹閉合標籤 (實際上沒有<red>這裡做為 示 範)。
XML是什麼? 4. 標籤名稱有所限制 ❌<01_p> ❌<"作者"> XHTML不會遇到這問題, 但XML標籤名稱不能以 「數字、除了_以外的標點」 開頭。
XML是什麼? 5. 標籤名稱有分 大 小 寫 ⭕<br /> ❌<BR />
<Br /> 常 見 錯誤,標籤名 大小 寫有差。
XML是什麼? 6. 標籤名稱不能包含空格 ⭕<blockquote> ❌<block quote> 不要說XHTML了,連HTML也不 行 。
XML是什麼? 7. 屬性的值需要以""標記 <tag attribute="value"></tag> HTML時有 人 不加引號,有 人用 單引號'',
但XHTML 一 律都要 用 雙引號""。
XML是什麼? 8. 空 白 會被保留 <p> 空 白 會 被
保留</p> 盡量減少編輯原稿、InDesign排版時使 用 空 白 調整。
XML規則 如何對應規則? ② 所有標籤都需要結束(關閉) ③ 所有標籤都要完整以巢狀結構建構 ⑤ 標籤名稱有分 大小 寫
九成錯誤發 生 於以上三點,但幸好EPUB檢查 工 具都找得到。 然 而 保留的空 白 不是錯誤,但會讓排版顯得很醜。 不需要強記規則,不推薦 手 寫製作XHTML;動 手 做多改就會記得了。
Q&A時間 HTML與CSS 用 途與XML規則
HTML構成與常 用 標籤 從零開始學習HTML結構
HTML檔案的構成 簡單的概要結構 • 文 件檔頭 • <html>(根元素) • <head> •
<body>
HTML檔案的構成 文 件檔頭 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> EPUB 3標準宣告,EPUB
2使 用 XHTML 4略有不同。
HTML檔案的構成 <html>根元素 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="zh-TW" lang="zh-TW" class="vrtl" > xmlns為XML
namespace,使 用 的epub字 首 需要在此宣告才不會變成錯誤。
HTML檔案的構成 <head> <head> <meta charset="UTF-8"/> <title>台灣EPUB 3製作指引EPUB 3流式版 面 範本</title>
<link rel="stylesheet" type="text/css" href="../style/book-style.css"/> </head> <title>是EPUB 3中需要修改之處,有時會被閱讀系統使 用 。
HTML檔案的構成 <body> <body> 書的內容 </body> <body>中的內容佔了99%的內容編輯時間。
常 用 標籤 標題 • 標籤:<h1>、<h2>、<h3>、<h4>、<h5>、<h6> • 預設樣式: 大 字、粗體、加邊界
標題是取英 文 的heading 首 字h,預設六層級標題。 六層標看似夠 用 ,但其實不 大 夠,書名、章節就佔去兩組。 標題 用 於不同元素可以之後以CSS做出設計上的差異。
常 用 標籤 段落 • 標籤:<p> • 預設樣式:1rem字級、段落後加邊界 段落凸排與縮排使 用
CSS配合Class進 行 設計。 段落預設會有間距,記得刪除。 縮排可以使 用 U+3000 Ideographic Space全形空 白 來佔位。
常 用 標籤 列表 • 標籤:<ul>(無排序)、<ol>(排序)、<li>(項 目 ) • 預設樣式:整體縮排、項
目 縮排 <ul>為無排序的 黑 點、<ol>為有順序的編號 <li>為每 一 項 目 ,另可加<p> 可透過CSS list-style調整列表顯 示方 式 <ol> <li><p>15克鹽巴</p></li> <li><p>200克 牛肉 </p></li> <li><p>5克胡椒</p></li> <ol>
常 用 標籤 圖片與圖說 • 標籤:<img />、< fi gure>、< fi
gcaption> • 預設樣式:無 並非所有閱讀系統都 支 援< fi gure>結構 src要注意到路徑如/images/ ../images/ alt=""為必要,最好加入內容說明 < fi gure> <img src="image01.jpg" alt="" / > < fi gcaption>圖說</ fi gcaption> </ fi gure>
常 用 標籤 表格 • 標籤:<table>(整體)、<th>(標題列)、 <tr>(資料列)、<td>(資料格) • 預設樣式:沒有邊框,尺 寸
按內容 而 定。 跨欄可使 用 屬性colspan、rowspan來設定 閱讀系統表現不 一 ,建議使 用 圖片來處理 <table> <th> <td>表格標題 一 </td> <td>表格標題 二 </td> </th> <tr> <td>表格內容 一 </td> <td>表格內容 二 </td> </tr> </table>
常 用 標籤 div與span : 區塊與 文 內的不同 • 標籤:<div>(區塊)、<span>(
文 內) • 佔空間且換 行 使 用 <div>、內 文 元素的樣式指定使 用 <span> 不想換 行 但希望 行 為如區塊元素,可以使 用 display: inline-block來處理 <p>你真是癩<img src="缺字.jpg" class="mot" alt="哥" /> 鬼 </p> .mot { display: inline-block; height: 1rem; }
常 用 標籤 文 內樣式 • 標籤:<b>、<i>、<u>(不推薦)、<em>、<strong> <b>粗體、<i>斜體、<u>底線(不推薦)是過去HTML的樣式符號,現在已經不再 推薦使 用
, 而 建議使 用 語意標籤。 <em>強調與<strong>強烈兩種語意標籤也都可以使 用 CSS來調整設計。 <i>還是可以 用 於 一 定斜體的 文 字,如英 文 書名、<u>依然可 用 於私名號上。
EPUB常 用 HTML模組 註解 注印: <a epub:type="noteref" class="noteref" id="位置編號" href="#註解編號"
rel="footnote" >1</a> 注 文 : <div epub:type="footnote" class="footnote" id="註解編號"> <p>注釋內容中的 一 個段落。</p> <a href="#位置編號">返回符號</a> <div> <div>可 用 <aside>取代,但得考慮相容性。
EPUB常 用 HTML模組 註解 <ruby>注<rt>ㄓㄨˋ</rt></ruby> <ruby> 音 <rt>ㄧㄣ</rt></ruby> <ruby>符<rt>ㄈㄨˊ</rt></ruby> <ruby>號<rt>ㄏㄠˋ</rt></ruby>
另須配合CSS設計與嵌入字體 方 能做到完整的顯 示 , 參考:https://cmex-30.github.io/Bopomofo_on_Web/testpage/index.html
小 結 先從整理書的結構製作範本 • HTML 5中還有很多標籤,EPUB 3也推薦使 用 <section>、<article>等結構標 籤,但以上基礎標籤就可以建構
一 本書的基礎樣式。 • 實作或練習可以先做 一 本印刷書的內容摘錄,按照書的樣式與結構來做 一 範 本,然後配合CSS來做設計練習。
Q&A時間 HTML構成與常 用 標籤
CSS基本概念與設計範例 描述性的設計語 言
CSS長怎樣? 一 份CSS範本 • CSS構造 • CSS對應 方 式 •
CSS的層疊(cascading)與繼承(inheritance) • CSS選擇器(selector) • CSS常 用 單位與 色 彩 • CSS盒狀模型(box model)與縮寫(shorthand)
CSS的構造 選擇器、特性與值 • 選擇器(selector):決定CSS與HTML元素,其class與id屬性對應 方 式與邏輯 • 特性(properties):CSS的各種特性,分別有定義好的 行 為與模式
• 值與數值(value):CSS特性的值與數值,可使 用 的值為固定或數值 選擇器 { 特性: "值"; 特性: 數值; } h1 { text-algn: "center"; font-size: 1.4em; }
CSS對應的 方 式 三種 方 式但只有 一 種好 ① 在HTML的<head>中連結外部樣式表
② 在HTML的<head>中以<style>撰寫樣式 ③ 直接在HTML中以屬性寫入樣式 <link rel="stylesheet" type="text/css" href="../style/book-style.css"/> <style> h2 {font-weight: bold;} </style> <h1 style="text-align:center;">置中標題</h1>
CSS的層疊(cascading)與繼承(inheritance) CSS的兩項重要特性 • 繼承(inheritance): 子 元素會繼承上層元素的特性與值。 • 層疊(cascading):相同特性與值被指定時,最新(下層)的值會覆蓋前者。 p {line-height:
2; } p {line-height: 1.8; } 最終 行 距會是1.8, 行 與 行 間距離為0.8字級。但如果遇到: <p style="line-height: 1.5;">段落</p> 行 距就是1.5, 行 與 行 間的空格為半字級。
CSS選擇器 對應到HTML元素與屬性 • 基本對應: • 元素(如h1):直接對應到指定的元素名稱 • class屬性(如.noteref):對應到.後的class名稱,HTML中可以有相同的 class •
id屬性(如#footnote01):對應到#後的id名稱,HTML中id僅能出現 一 次 • 進階對應: • 透過各種邏輯關係決定,以下為例:
CSS選擇器 對應到HTML元素與屬性 • 雙重class(如.class1.class2):同時具備兩個class的元素才套 用 • 特定 子 元素(如h1 .sub):在h1中的.sub
class套 用 • 特定元素的class(如h2.sub):class為sub的h2元素 • 兩 方 都指定(如div, p):同時將特性套 用 到div與p • 在前者中的元素(如div > p):在div裡的所有p元素 • 緊接前者的元素(如h2 + p):在h2後頭的第 一 個p元素
CSS常 用 單位 EPUB請多 用 相對單位 • 絕對單位:cm / mm
/ pt / px等…… • 相對單位:em / rem / % / vw / vh等…… • 推薦使 用 em / rem • em:內 文 字的尺 寸 ,但指定後會成為該元素的預設尺 寸 • rem:內 文 字的尺 寸 ,不會受到改變 h1 { font-size: 1.4em; } h1 {margin-left: 1 (em / rem?); }
CSS常 用 單位 EPUB請多 用 相對單位 Apple Books Asset Guide
5.2.1.1 https://help.apple.com/itc/booksassetguide/en.lproj/static.html
CSS 色 彩 使 用 前請注意:台灣也有電 子 紙閱讀器 • 色
彩選擇 方 式: • HEX 色 碼:#000000 ~ #FFFFFF • rgb值:rgb(255, 255, 255) • rgba值:rgba(200, 200, 200, 0.5) • 還有HSL(Hue, Saturation, Lightness)與HSLA。
CSS盒狀模型與縮寫 內縮邊界、邊框、外邊界與外框 • padding: 內縮邊界 • border: 邊框 • margin:
外邊界 • outline: 外框,緊貼 border,會佔 用 margin的空 間,少 用 。
CSS盒狀模型與縮寫 CSS 方 向與縮寫(shorthand) • 一 個數值代表:區塊的上下左右邊界 • 二 個數值代表:區塊的上下、左右邊界
• 三個數值代表:區塊的上、左右、下邊界 • 四個數值代表:區塊的上、右、下、左邊界 p {margin: 0; } .box {padding: 1em 0.9em; } blockquote {margin: 2em 0.9em 1em; } h1 {margin: 2rem 1em 0 3.6rem; }
CSS盒狀模型與縮寫 CSS 方 向與縮寫(shorthand) • 邊界在CSS中有這些語法: • 可以縮寫成: • 或者僅指定
一 邊: border-width: 1px; border-style: solid; border-color: black; border: 1px solid black; border-right: 1px solid black;
範例 CSS參考資料 • CSS的特性與值眾多,時間有限請參考以下網 頁 : • W3Schools: https://www.w3schools.com/css/default.asp •
Mozilla Developer: https://developer.mozilla.org/zh-TW/docs/Web/CSS • CanIuse: https://caniuse.com
範例 內 文 p { font-family: serif; line-height: 1.8; margin:
0; }
範例 對話 p.dialogue2 { margin-top: 3em; text-indent: -3em; }
範例 標題 .box { font-family: sans-serif; margin: 0 0.9em; padding:
1em 0.9em; border: 1px solid red; border-radius: 1em; }
範例 box h1 { font-family: sans-serif; font-size: 1.4em; margin: 2rem
1rem 0 3rem; }
小 結 HTML與CSS於出版應 用 上的鴻溝 • HTML兼顧 人 讀與機讀,需要完整的結構,傳統出版能印刷出來就好,鉛字印刷 時代還需要嚴謹,但電腦排版反
而 鬆散。 • Word作為原稿 工 具,實際上善 用 樣式的 人 並不多。 • CSS的 門 檻不 高 ,入 門 容易,但設計簡潔、精通各種進階機制難。要讓視覺為 主的設計師轉換以描述性語 言 來設計,也許會有障礙。 • 懂CSS的網站設計師對於書籍排版的規則不 大 了解。
Q&A時間 最終 自 由提問時間
感謝聆聽 次堂:2020/10/28(三)14:00 EPUB結構詳解與範本介紹