HTML與CSS入門

董福興 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動態範例黃心健《科技蜃樓》大塊文化出版

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結構詳解與範本介紹

HTML與CSS入門

HTML與CSS入門

More Decks by Bobby Tung

Other Decks in Technology

Featured

Transcript