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
42
以Markdown製作EPUB 3文字書
bobbytung
0
140
電子書無障礙發展史與規範實踐
bobbytung
0
40
都 2017 了注音還沒搞定嗎?
bobbytung
5
400
幾個中文排版訣竅,有效改善閱讀體驗
bobbytung
1
780
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
フルカイテン株式会社 採用資料
fullkaiten
0
36k
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
APIテスト自動化の勘所
yokawasa
7
4.2k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Speed Design
sergeychernyshev
24
570
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Teambox: Starting and Learning
jrom
132
8.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Facilitating Awesome Meetings
lara
49
6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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結構詳解與範本介紹