.imgur.com/dUYS0xw.jpg" alt="Hi" />` ## HTML Basic construction ![](https://www.bluekatanasoft.com/wp-content/uploads/document-structure.png) ## Tag Lists #### Comment: `<!-- This is a comment -->` #### Document Type: `<!DOCTYPE html>` #### Title: `<title> This is title </title>` #### Link: link css file `<link rel="stylesheet" href="/css/master.css">` #### Script: where js be imported ``` <script type="text/javascript" src="/js/myJs.js />" <script type="text/javascript"> console.log("this is javascript") </script> ``` #### meta: will not display, for some description ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="網頁簡短描述"> <meta name="keywords" content="網頁關鍵字1, 關鍵字2"> <meta name="author" content="作者姓名"> <meta name="generator" content="編輯器名稱"> <meta name="copyright" content="網頁版權"> <meta name="distribution" content="網頁發佈地區"> <meta charset="UTF-8"> ``` #### Body Part: ``` <body> hi </body> ``` #### Header: <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> #### Hyperlink: <a href="http://ntuee.org/">This is a link</a> #### Strong: <b>Strong</b> #### Defines a section in a document: <div> <div> This is div 1 </div> <div> This is div 2 </div> </div> #### Draw a line: <hr> #### Change a line: <br> #### Image: <img src="https://i.imgur.com/dUYS0xw.jpg" alt="This is a picture" /> #### Form: <!-- hackmd 無法顯示 --> ``` <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> ``` #### List and Ordered List: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> #### Options: ``` <label for="cars">Choose a car:</label> <select id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> ``` #### Defines a paragraph: <p>This is some text in a paragraph.</p> #### Putting Code in the web: <pre>console.log("jizz")</pre> #### Span, use to color a part of a text: Not Red but <span style="color: red">red</span> #### Table: <table> <thead> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> </thead> <tbody> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> </tbody> <tbody> <tr> <td>b4</td> <td>b5</td> <td>b6</td> </tr> </tbody> </table> #### Special Character (Entities): `< &lt;` `> &gt;` ` &nbsp;` `& &amp;` `" &quot;` `' &apos;` ... More: https://www.w3schools.com/html/html_entities.asp #### There is still a lot, see below ## CheatSheet ![](https://websitesetup.org/wp-content/uploads/2019/08/HTML-CHEAT-SHEET.png) ## Reference https://www.w3schools.com/tags/default.asp https://websitesetup.org/html5-cheat-sheet/ https://www.w3schools.com/tags/tag_meta.asp