Introduction to HTML and CSS

### Introduction to HTML and CSS ![](https://i.imgur.com/9aFL3yM.png) ![](https://i.imgur.com/27WHpQ8.png) Spring 2019 。 Ric Huang --- #### HTML (HyperText Markup Language) ![](https://i.imgur.com/8gJiMwm.png) ![](https://i.imgur.com/jZThaCG.png) * 在 “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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Content sectioning // to organize the document content into logical pieces. * \<h1\>…\<h6\> * \<header\>, \<footer\> * \<article\>, \<address\>, \<nav\>, \<section\> --- ### HTML Elements \[[ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Inline text semantics * \<a href=“…”>: hyper link * \<span> * \<em>, \<i>, \<mark>, \<q>, \<s>, \<strong> * \<cite>, \<code>, \<time> * \<br> --- ### HTML Elements \[[ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Image and multimedia * \<img src=“…” alt=“…”> * \<audio>, \<video>, \<track> * \<map>, \<area>: to define image map --- ### HTML Elements \[[ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Table content * \<table> * \<caption> * \<th>, \<tr>, \<td>: header, row, data cell * \<map>, \<area>: to define image map --- ### HTML Elements \[[ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Forms \<form> * \<label for=“…”> * \<input type=“…” value=“…”> * \<output name=“…”> * \<button name=“…”> * \<select>, \<option> * \<fieldset>, \<datalist>, \<optgroup> * \<meter>, \<progress> --- ### HTML Elements \[[ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)] * Interactive elements * \<dialog> * \<menu>, \<menuitem> * Embedded content (e.g. \<applet>) --- ### HTML 練習 * Download a .txt file [here](https://ric2k1.github.io/W1_0220/practice/index.txt) * Make it into a HTML file * A sample HTML output can be viewed [here](https://ric2k1.github.io/W1_0220/practice/index.jpg) * Hints: you may use tags like: `html head title body div h1 h2 h3 h4 h5 h6 p br hr b strong i em small mark del ins sub sup blockquote a input table caption tr th td ul li ol span` --- ### 網頁。外觀 / 排版 * 前面講的各種 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...*/ } * 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 有三種應用方式 1. 直接在 \<head> 裡頭 include .css file * \<link rel=“stylesheet” type=“text/css” href=“path/to/style.css”> 2. 將一段 CSS code 嵌入到 HTML 裡頭 * \<style> * a { color: purple; } * \</style> 3. 直接寫在 tag 的 attribute * \<div style=“border: 1px solid red;”> --- ### CSS Specificity Priorities (from Low to High) 1. \<tag> and ::pseudo-element selectors 2. .class, :pseudo-class and \[attribute\] selectors 3. #id selectors 4. inline styles --- ### Margin/Border/Padding/Width/Height ![](https://i.imgur.com/T8spF05.png) --- ### 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