Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML與CSS入門

Bobby Tung
January 24, 2024

 HTML與CSS入門

2020台灣數位出版聯盟線上課程

Bobby Tung

January 24, 2024
Tweet

More Decks by Bobby Tung

Other Decks in Technology

Transcript

  1. 整體課程規劃 主題與學習對象 • 10/23:HTML與CSS入 門 
 基本網 頁 技術與EPUB內容編輯 【對象】:需要調整EPUB內容的讀者與編輯者

    • 10/28:EPUB結構詳解與範本介紹
 EPUB結構與聯盟提供的範本說明 【對象】:電 子 書製作者或技術者
  2. 第 二 堂課程規劃 HTML與CSS入 門 • 第 一 節:HTML與CSS 用

    途與XML規則
 HTML與CSS的角 色 / EPUB中 用 到的網 頁 技術/ XML是什麼、XML的規則 • 第 二 節:HTML構成與常 用 標籤
 HTML檔案構成 / 常 用 標籤 / EPUB常 用 模組 • 第三節:CSS基本概念與設計範例
 CSS的構造 / CSS對應 方 式 / 層疊與繼承 / CSS選擇器 CSS常 用 單位 / CSS 色 彩 / CSS盒狀模型與縮寫 / 範例
  3. 講師介紹 董福興 Bobby Tung • 汪達數位出版(Wanderer Digital Publishing Inc.)創辦 人

    • W3C 國際化 工 作 小 組邀請專輯,〈中 文 排版需求(CLREQ)〉編輯 • W3C Evangelist • 參與制定數位出版聯盟〈台灣 EPUB 3 製作指引〉 • 參與制定中推會業界標準〈注 音 符號排版〉
  4. EPUB內容 文 件 幾乎所有的EPUB內容都使 用 HTML • EPUB僅接受兩種內容 文 件

    • XHTML內容 文 件 • SVG內容 文 件 • XHTML內容 文 件可以做到的三種事 • 文 字為主的內容(re fl ow): 一 般 文 字書。 • 固定版 面 漫畫(Fixed Layout):漫畫與雜誌。 • 固定版 面 複雜排版(Fixed Layout):繪本等。
  5. EPUB中使 用 的網 頁 技術 HTML / CSS / JavaScript

    HTML CSS JavaScript 內容結構 內容樣式 控制與動態
  6. EPUB中使 用 的網 頁 技術 HTML / CSS的 角 色

    • HTML內容「結構」 • 文 字書:標題、段落、引 言 、列表、圖片與圖說等⋯⋯ • 圖 文 書: 文 字區塊、圖片、物件等…… • CSS內容「樣式」 • 基本: 文 字 方 向、尺 寸 、字體、縮排、間距、邊界、邊框、定位等…… • 進階:版 面 設計(grid, fl exbox)、動畫(animate)、圖 文 變形(transform)等……
  7. XML是什麼? XHTML與HTML有什麼差別? • HTML:網 頁 使 用 的 一 套標準化標記語

    言 ; • XHTML:符合XML規則的HTML。 • XML是什麼? • eXtensible Markup Language的縮寫。 • 發展 自 SGML,由W3C於1998年完成制定。 • 結構簡單可延伸,但規則嚴謹。
  8. XML是什麼? XML範例 <活動時間地點> <時間><年 紀年=" 西 元">2019</年>< 月 >3</ 月

    >< 日 >12</ 日 ></時間> <地點>台北市</地點> </活動時間地點> 開始標籤 start-tag 結束標籤 end-tag 元素 element 屬性 attribute 值 value 內容 content
  9. XML是什麼? XML宣告 <?xml version="1.0" encoding="UTF-8"?> 所有的XML開頭都要有這 一行 , 並且前 面

    不能有空 白 。 <!DOCTYPE html> XML能使 用 哪些標籤與屬性, 需要定義DTD或者Schema, 這是HTML的DTD宣告。
  10. XML規則 XML的八項規則 ① 所有XML都要有 一 個根元素<root> ② 所有標籤都需要結束(關閉) ③ 所有標籤都要完整以巢狀結構建構

    ④ 標籤名稱有所限制 ⑤ 標籤名稱有分 大小 寫 ⑥ 標籤名稱不能包含空格 ⑦ 屬性的值需要以""標記 ⑧ 空 白 會被保留
  11. 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>這裡做為 示 範)。
  12. XML是什麼? 5. 標籤名稱有分 大 小 寫 ⭕<br /> ❌<BR />

    <Br /> 常 見 錯誤,標籤名 大小 寫有差。
  13. XML是什麼? 8. 空 白 會被保留 <p> 空 白 會 被

    保留</p> 盡量減少編輯原稿、InDesign排版時使 用 空 白 調整。
  14. XML規則 如何對應規則? ② 所有標籤都需要結束(關閉) ③ 所有標籤都要完整以巢狀結構建構 ⑤ 標籤名稱有分 大小 寫

    九成錯誤發 生 於以上三點,但幸好EPUB檢查 工 具都找得到。 然 而 保留的空 白 不是錯誤,但會讓排版顯得很醜。 不需要強記規則,不推薦 手 寫製作XHTML;動 手 做多改就會記得了。
  15. 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中需要修改之處,有時會被閱讀系統使 用 。
  16. 常 用 標籤 標題 • 標籤:<h1>、<h2>、<h3>、<h4>、<h5>、<h6> • 預設樣式: 大 字、粗體、加邊界

    標題是取英 文 的heading 首 字h,預設六層級標題。 六層標看似夠 用 ,但其實不 大 夠,書名、章節就佔去兩組。 標題 用 於不同元素可以之後以CSS做出設計上的差異。
  17. 常 用 標籤 段落 • 標籤:<p> • 預設樣式:1rem字級、段落後加邊界 段落凸排與縮排使 用

    CSS配合Class進 行 設計。 段落預設會有間距,記得刪除。 縮排可以使 用  U+3000 Ideographic Space全形空 白 來佔位。
  18. 常 用 標籤 列表 • 標籤:<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>
  19. 常 用 標籤 圖片與圖說 • 標籤:<img />、< fi gure>、< fi

    gcaption> • 預設樣式:無 並非所有閱讀系統都 支 援< fi gure>結構 src要注意到路徑如/images/ ../images/ alt=""為必要,最好加入內容說明 < fi gure> <img src="image01.jpg" alt="" / > < fi gcaption>圖說</ fi gcaption> </ fi gure>
  20. 常 用 標籤 表格 • 標籤:<table>(整體)、<th>(標題列)、
 <tr>(資料列)、<td>(資料格) • 預設樣式:沒有邊框,尺 寸

    按內容 而 定。 跨欄可使 用 屬性colspan、rowspan來設定 閱讀系統表現不 一 ,建議使 用 圖片來處理 <table> <th> <td>表格標題 一 </td> <td>表格標題 二 </td> </th> <tr> <td>表格內容 一 </td> <td>表格內容 二 </td> </tr> </table>
  21. 常 用 標籤 div與span : 區塊與 文 內的不同 • 標籤:<div>(區塊)、<span>(

    文 內) • 佔空間且換 行 使 用 <div>、內 文 元素的樣式指定使 用 <span> 不想換 行 但希望 行 為如區塊元素,可以使 用 display: inline-block來處理 <p>你真是癩<img src="缺字.jpg" class="mot" alt="哥" /> 鬼 </p> .mot { display: inline-block; height: 1rem; }
  22. 常 用 標籤 文 內樣式 • 標籤:<b>、<i>、<u>(不推薦)、<em>、<strong> <b>粗體、<i>斜體、<u>底線(不推薦)是過去HTML的樣式符號,現在已經不再 推薦使 用

    , 而 建議使 用 語意標籤。 <em>強調與<strong>強烈兩種語意標籤也都可以使 用 CSS來調整設計。 <i>還是可以 用 於 一 定斜體的 文 字,如英 文 書名、<u>依然可 用 於私名號上。
  23. 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>取代,但得考慮相容性。
  24. 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
  25. 小 結 先從整理書的結構製作範本 • HTML 5中還有很多標籤,EPUB 3也推薦使 用 <section>、<article>等結構標 籤,但以上基礎標籤就可以建構

    一 本書的基礎樣式。 • 實作或練習可以先做 一 本印刷書的內容摘錄,按照書的樣式與結構來做 一 範 本,然後配合CSS來做設計練習。
  26. CSS長怎樣? 一 份CSS範本 • CSS構造 • CSS對應 方 式 •

    CSS的層疊(cascading)與繼承(inheritance) • CSS選擇器(selector) • CSS常 用 單位與 色 彩 • CSS盒狀模型(box model)與縮寫(shorthand)
  27. CSS的構造 選擇器、特性與值 • 選擇器(selector):決定CSS與HTML元素,其class與id屬性對應 方 式與邏輯 • 特性(properties):CSS的各種特性,分別有定義好的 行 為與模式

    • 值與數值(value):CSS特性的值與數值,可使 用 的值為固定或數值 選擇器 { 特性: "值"; 特性: 數值; } h1 { text-algn: "center"; font-size: 1.4em; }
  28. 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>
  29. 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, 行 與 行 間的空格為半字級。
  30. CSS選擇器 對應到HTML元素與屬性 • 基本對應: • 元素(如h1):直接對應到指定的元素名稱 • class屬性(如.noteref):對應到.後的class名稱,HTML中可以有相同的 class •

    id屬性(如#footnote01):對應到#後的id名稱,HTML中id僅能出現 一 次 • 進階對應: • 透過各種邏輯關係決定,以下為例:
  31. 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元素
  32. 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?); }
  33. CSS常 用 單位 EPUB請多 用 相對單位 Apple Books Asset Guide

    5.2.1.1 https://help.apple.com/itc/booksassetguide/en.lproj/static.html
  34. CSS 色 彩 使 用 前請注意:台灣也有電 子 紙閱讀器 • 色

    彩選擇 方 式: • HEX 色 碼:#000000 ~ #FFFFFF • rgb值:rgb(255, 255, 255) • rgba值:rgba(200, 200, 200, 0.5) • 還有HSL(Hue, Saturation, Lightness)與HSLA。
  35. CSS盒狀模型與縮寫 內縮邊界、邊框、外邊界與外框 • padding: 內縮邊界 • border: 邊框 • margin:

    外邊界 • outline: 外框,緊貼 border,會佔 用 margin的空 間,少 用 。
  36. CSS盒狀模型與縮寫 CSS 方 向與縮寫(shorthand) • 一 個數值代表:區塊的上下左右邊界 • 二 個數值代表:區塊的上下、左右邊界

    • 三個數值代表:區塊的上、左右、下邊界 • 四個數值代表:區塊的上、右、下、左邊界 p {margin: 0; } .box {padding: 1em 0.9em; } blockquote {margin: 2em 0.9em 1em; } h1 {margin: 2rem 1em 0 3.6rem; }
  37. CSS盒狀模型與縮寫 CSS 方 向與縮寫(shorthand) • 邊界在CSS中有這些語法: • 可以縮寫成: • 或者僅指定

    一 邊: border-width: 1px; border-style: solid; border-color: black; border: 1px solid black; border-right: 1px solid black;
  38. 範例 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
  39. 範例 標題 .box { font-family: sans-serif; margin: 0 0.9em; padding:

    1em 0.9em; border: 1px solid red; border-radius: 1em; }
  40. 小 結 HTML與CSS於出版應 用 上的鴻溝 • HTML兼顧 人 讀與機讀,需要完整的結構,傳統出版能印刷出來就好,鉛字印刷 時代還需要嚴謹,但電腦排版反

    而 鬆散。 • Word作為原稿 工 具,實際上善 用 樣式的 人 並不多。 • CSS的 門 檻不 高 ,入 門 容易,但設計簡潔、精通各種進階機制難。要讓視覺為 主的設計師轉換以描述性語 言 來設計,也許會有障礙。 • 懂CSS的網站設計師對於書籍排版的規則不 大 了解。