---
# System prepended metadata

title: Lecture 1

---

# Lecture 1

- [WEB HTML](https://youtu.be/OjQX2TgJyCE)
## Set up
- VS code
- extensions
    - live server
    - material icon theme
    - prettier
    - auto-indent
        - setting -> Commonly used -> tabsize
        - setting -> text editor -> formatting -> format on save
        - setting -> font -> font weight -> setting.json
        - setting -> extension -> prettier -> tabsize
```htmlmixed=
<!-- in settings.json -->
{
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.fontWeight": null,
    "editor.tabSize": 2,
    "prettier.tabWidth": 2
}
```
- Let's get started!

## HTML

### Basic
- concept of tag
- 一層包一層
```htmlmixed=
<!-- HTML5 standard language -->
<!DOCTYPE>
<html lang="en">
    <head>
        <meta charset="UTF-8"></meta>
        <title>Hello HTML</title>
    </head>
    
    <body>
    </body>
</html>
```

- Let's add some stuff
    - difference between `<p>` and `<pre>`
    - `<b>` `<u>` `<s>` `<i>` `br`

```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <p>
        <b>bold</b>
        <br>
        <u>underline</u>
        <hr>
        <i>italic</i>
        <s>strike</s>
    </p>
    <!-- What's the difference -->
    <pre>
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
    </pre>
</body>
</html>
```
<br></br>
- Let's make it a bit more colorful
- Priority
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1 style="color: red;">h1</h1>
    <h2>h2</h2>
    <p style="color: brown; background-color: yellow;">
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
    </p>
</body>
</html>
```


- Better way

```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <style>
        h1 {
            color: red;
        }
        p {
            color: brown;
            background-color: yellow;
        }
    </style>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <p>
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
    </p>
</body>
</html>
```

- Best way
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <link rel="stylesheet" href="./css.css">
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <p>
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
    </p>
</body>
</html>
```
- Question: End tags for <link> and <meta> ?
<br></br>
- How about Javascript?
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <link rel="stylesheet" href="./css.css">
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <p id="test"></p>

    <script>
       document.getElementById("test").innerHTML = "Welcome to Colde Garage"
    </script>
</body>
</html>
```

- Learn by analogy
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <link rel="stylesheet" href="./css.css">
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <p id="test"></p>
    <script src="./javascript.js"></script>
</body>
</html>
```
- `<noscript>Your browser hates Javascript!</noscript>`

### Useful Tags
- `<div>`
    - the main concept of WEB!
    - composed of divs!
- `<header>` `<footer>` `<nav>` `<main>`
    - div
- `<link>` `<a>` `<button>` `<span>`
- `<form>` 
    - action: destination
    - method: get or post or...
- `<label>`
    - `<select>` 
        - `<option>`
    - `<input>`

```htmlmixed=
<form>
    <input type="radio">
    <label for="types">type1</label><br>
    <input type="radio">
    <label for="types">type2</label><br>
    <input type="radio">
    <label for="types">type3</label><br>
</form>

<form>
    <select name="type" id="type">
        <option value="type1">type1</option>
        <option value="type2">type2</option>
        <option value="type3">type3</option>
    </select>
</form>
```
- `<ol>` `<ul>` `<li>`
```htmlmixed=
<ol>
    <li>type1</li>
    <li>type2</li>
    <li>type3</li>
</ol>
<ul>
    <li>type1</li>
    <li>type2</li>
    <li>type3</li>
</ul>
```
- `<table>` `<th>` `<td>`
```htmlmixed=
<table>
    <tr>
        <th>Title1</th>
        <th>Title2</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>2-1</td>
    </tr>
    <tr>
        <td>1-2</td>
        <td>2-2</td>
    </tr>
</table>
```
- `<col>`

```htmlmixed=
<table>
    <colgroup>
        <col span="2"style="background-color: red;">
        <col span="2" style="background-color: blue;">
    </colgroup>
    <tr>
        <th>Title1</th>
        <th>Title2</th>
        <th>Title3</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>2-1</td>
    </tr>
    <tr>
        <td>1-2</td>
        <td>2-2</td>
    </tr>
</table>
```
## CSS

### HTML Rendering
The content are rendered following the `normal flow`.
* **Block element** :  laid out vertically
```display: block```
    ex. ``<div>``, ``<h1>``, ``<p>``<br><br>
* **Inline element** :  laid out horizontally
```display: inline```
    ex. ``<span>``, ``<a>``, ``<img>``
![](https://miro.medium.com/max/2800/1*AFeOAqXNJJdfYAjfXiJ9AQ.jpeg =300x300)

- `display: inline-block`
    - allows to set a width and height on the element
    - does not add a line-break after the element, so the element can sit next to other elements

```htmlmixed=
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line along with adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
```

### Position
The position property specifies the type of positioning method used for an element.
* `static` : default (following the normal flow)
* `relative` : positioned relative to its normal position
* `absolute` : positioned relative to the **nearest positioned** ancestor
* `fixed` : positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled

### Stacking Order (from bottom to top)
1. background and borders of `<html>`
2. descendant blocks in normal flow
3. floating blocks
4. inline descendants in the normal flow
5. descendant positioned elements

* **z-index**
The `z-index` property specifies the stack order of an element.
Default: 0

  The bigger the closer with the user
  Note that elements need to be **positioned** to take effect.