# 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.