Introduction to HTML and CSS
Spring 2019 。 Ric Huang
HTML (HyperText Markup Language)
- 在 “Hello World” 前後加入空白或是換行
- 試試看 <div>, <span> 等其他 text elements
HTML Syntax
- For most of the tags…
<tag attribute1=“value” attribute2=“value”> Some text to display </tag>
- Some exception (no closing tag)
<img src=“someURL” alt=“someText”>
- 字串(value)可以用單引號，也可以用雙引號
- Comments are in <!–…–>
HTML Elements [ref]
- Main root
<html>
- Document metadata (in <head> section)
- <link>: to specify the external resource, especially link to style sheets (CSS)
- <style>: style information for a document
- <title>: title shown in a browser's title bar
- <meta>: other meta data
- Sectioning root
- <body> // <head> is optional
HTML Elements [ref]
- Content sectioning
// to organize the document content into logical pieces.- <h1>…<h6>
- <header>, <footer>
- <article>, <address>, <nav>, <section>
HTML Elements [ref]
- Text content
// to organize blocks or sections of content in <body>…</body>- <p>, <div>
- <ol>, <ul>: ordered, unordered list
- <li>: list items
- <dl>: description list
- <dt>: a term in <dl>
- <dd>: details for the term <dt>
- <figure>, <figcaption>, <blockquote>
- <hr>
HTML Elements [ref]
- Inline text semantics
- <a href=“…”>: hyper link
- <span>
- <em>, <i>, <mark>, <q>, <s>, <strong>
- <cite>, <code>, <time>
- <br>
HTML Elements [ref]
- Image and multimedia
- <img src=“…” alt=“…”>
- <audio>, <video>, <track>
- <map>, <area>: to define image map
HTML Elements [ref]
- Scripting
- <script type=“text/javascript” src=“someSource.js”>
- <noscript>: in case a script type is unsupported
- <canvas>: for canvas or webGL APIs
HTML Elements [ref]
- Table content
- <table>
- <caption>
- <th>, <tr>, <td>: header, row, data cell
- <map>, <area>: to define image map
HTML Elements [ref]
- Forms <form>
- <label for=“…”>
- <input type=“…” value=“…”>
- <output name=“…”>
- <button name=“…”>
- <select>, <option>
- <fieldset>, <datalist>, <optgroup>
- <meter>, <progress>
HTML Elements [ref]
- Interactive elements
- <dialog>
- <menu>, <menuitem>
- Embedded content (e.g. <applet>)
網頁。外觀 / 排版
- 前面講的各種 HTML elements, 可以讓你建置網頁的各種樣式與內容
- 至於網頁的外觀與排版，則可以靠 tags 裡頭各式 attributes 來控制 (例如：align, bgcolor, border, height, size, width…)
- 不過把外觀的控制散落到各個 elements 將會使得 code 很難維護，也很難保持整體外觀的一致性
CSS — Cascading Style Sheets
- CSS「階層式」、「結構化」地定義了 HTML document 的外觀樣式
- 哪些(種)元件 應該要使用 什麼樣的 style
- CSS 檔案 ≡ 許多 rules 所組成
- rule ≡
selector { property: value; /* more properties…*/ }
- rule ≡
- HTML 檔案裡頭 element 的樣式由這些 rules 來定義
CSS — Resources
- Learning CSS in y mins: https://learnxinyminutes.com/docs/css/
- CSS good refernce: https://css-tricks.com/
- CSS playground: http://dabblet.com/
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
CSS 有三種應用方式
- 直接在 <head> 裡頭 include .css file
- <link rel=“stylesheet” type=“text/css” href=“path/to/style.css”>
- 將一段 CSS code 嵌入到 HTML 裡頭
- <style>
- a { color: purple; }
- </style>
- 直接寫在 tag 的 attribute
- <div style=“border: 1px solid red;”>
CSS Specificity Priorities (from Low to High)
- <tag> and ::pseudo-element selectors
- .class, :pseudo-class and [attribute] selectors
- #id selectors
- inline styles
Margin/Border/Padding/Width/Height
Display
- display: allows us to change the block property
- block → takes full available width
- inline → render in same line
- inline-block → u can set the box model properties, yet it works like inline items
- none: invisible
Font-Family
Google Fonts (https://fonts.google.com/)
End
Introduction to HTML and CSS Spring 2019 。 Ric Huang
{"metaMigratedAt":"2023-06-14T20:16:06.900Z","metaMigratedFrom":"YAML","title":"Introduction to HTML and CSS","breaks":true,"slideOptions":"{\"theme\":\"league\",\"transition\":\"fade\",\"slidenumber\":true}","contributors":"[{\"id\":\"752a44cb-2596-4186-8de2-038ab32eec6b\",\"add\":5693,\"del\":213}]"}