---
# System prepended metadata

title: HTML

---

# HTML
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>max</title>
    </head>
    <body>Hello this note is about HTML</body>
</html>
```
## Add a content title
use <h (num)></h>
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>max</title>
    </head>
    <body>
        <h1>one</h1>
        <h2>two</h2>
        <h3>three</h3>
        <h5>five</h5>
    </body>
</html>
```
## Add a picture on your pages
use \<img src = "picture.jpg">\</img>
## Make a list,and put an URL on the words
use \<ul>\</ul> to make a list,
and use \<li>item name\</li> to present an item,
and then use\<a href = "The website name">\</a>,
so that when you click the words, you can get to the website.
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>max</title>
    </head>
    <body>
        <h1>My favorite company</h1>
        <ul>
            <li><a href = "https://www.apple.com/tw/">Apple</a></li>
            <li><a href = "https://www.google.com.tw/">Google</a></li>
            <li><a href = "https://www.asus.com/tw/">Asus</a></li>
        </ul>
    </body>
</html>
```
## To create a table
use \<table>put your data\</table>,
and \<tr>data\</tr> when you put this first,it can be your first row.
and the you can use \<td>data\<td> to be your first column.
If you want to embellishment the table, you can put an attributes on table, \<table border = true>\</table>,the preset of border is false.
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>max</title>
    </head>
    <body>
        <h2>MLB Baseball</h2>
        <table border = true>
            <tr>
                <td>Name</td>
                <td>Win</td>
                <td>Lose</td>
            </tr>
            <tr>
                <td>New York Yankees</td>
                <td>10</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Boston Red Sox</td>
                <td>8</td>
                <td>3</td>
            </tr>
        </table>
    </body>
</html>
```
## Embellishment table
If you think your table is too narrow, you can add some attributes on your table to change it's appearence,use \<table border = true width = "200" cellpadding = "10"> \<table> .
Result:![](https://i.imgur.com/qebY14U.png)
## Embellishment your words and your web
If you want to have bold face,you can use \<b>\</b>,and if you want to bottom line, you can use \<u>\</u>,if you want to add a horizontal line, you can use \<hr>\<hr> .

```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <title>max</title>
    </head>
    <body>
        <h4><b>Hello</b></h4>
        <hr></hr>
        <h4><u>My name is max</u></h4>
    </body>
</html>
```
## Display chinese on your web,without garbled
Write an label called \<meta charset = "utf-8">\</meta> inside \<head>\</head>
```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"></meta>
        <title>我的網站</title>
    </head>
    <body>
        <h1>我愛台灣</h1>
        <h4><b>你好</b></h4>
        <hr></hr>
        <h4><u>我愛中華民國</u></h4>
        
    </body>
</html>
```