---
# System prepended metadata

title: HTML5 for Stat Class01
tags: [HTML5]

---

---
title: HTML5 for Stat Class01
tags: HTML5

---

> 【目次】
> [TOC]
> 
> Reference Website：
> 1. [MDN Web Doc](https://developer.mozilla.org/zh-TW/)
> 2. [W3school](https://www.w3schools.com/)
> 3. [freecodecamp](https://www.freecodecamp.org/)
> 4. [放棄當世界首富！不申請專利的 HTTP、HTML 發明者，要為你奪回數據自主權](https://buzzorange.com/techorange/2018/10/29/www-inventor/?utm_source=TOLINEING_1029_wwwinventor)

---
# **11/13 Class01 HTML5**
--- With HTML you can create your own Website.

## What is HTML？
* **["HyperText"](https://techterms.com/definition/hypertext) ["Markup Language"](https://techterms.com/definition/markup_language)** 超文件標示語言
    * 標記語言的一種
<img src="https://wordpress.susqu.edu/engl390/wp-content/uploads/sites/51/2018/04/HTMLDEMO.png">


## 偷窺別人的網頁 --- 開發人員工具
* ==Ctrl+U：檢視網頁原始碼==

* ==Ctrl+Shift+I 或 F12：檢查==

## LAB 1 --  HTML 基本架構
* HTML tag 
==<標籤 屬性="value"> 內容放在這裡 </標籤>==

<img src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png">

<img src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png">

* 存檔 index.html
```htmlmixed=
<!DOCTYPE html>     
<html>      
<head>      
	<meta charset="UTF-8">    <!--若要打中文，補上此行-->
	<title>我顯示在瀏覽器的分頁上！</title>
</head>
<body>        
	<p>這是我的第一個網頁</p>
</body>
</html>
```
* ```<!DOCTYPE html>```
    * defines this document to be HTML5
    * DOCTYPE 「文件類型」對 CSS 是==必要的宣告==。
    * 如果 HTML 缺少 DOCTYPE 設定，將使得瀏覽器無法在「標準模式」下顯示 CSS 效果！
* ```<html></html>```
    * root element of an HTML page
* ```<head>這裡放網頁所需要用的功能</head>```
    * meta information about the document
    * [網頁設計-SEO網頁優化必備的meta標籤你設對了嗎？](https://www.minwt.com/webdesign-dev/html/870.html)
    * [The HTML \<head> Element](https://www.w3schools.com/html/html_head.asp)
        * title：網頁標題。(For searching)
        * meta：Metadata，描述資料的資料。(For searching)
        * link：Defines the relationship between a document and an external resource.
        * style：導入CSS網頁樣式。
        * script：導入 javascript, jQuery...。
* ```<body></body>```
    * visible page content



## HTML 常用標籤
> 註解：```<!-- 我是註解 -->```[color=#907bf7]
* 文字標籤：```<h1> ~ <h6>```  -> 字體由大到小
```htmlmixed=
<h1>This is a h1 Heading</h1>

Title 屬性：
    mouse over -> title will be displayed as a tooltip
    <h2 title="I'm a header">The title Attribute</h2>
```

* 段落：```<p>我是文字段落</p>```
* 清單：
    * ```<ul></ul>``` : unordered list
    * ```<ol></ol>``` : ordered list
    * ```<li></li>``` : a list item (放在ul/ol裡)

* 其他文字標籤：
    * ```<br>```：換行
    * ```<hr>```：水平線
    * ```<u></u>```：底線
    * ```<i></i>, <em></em>```：斜體
    * ```<b></b>, <strong></strong>```：粗體

* 圖片標籤：```<img src="圖片來源 (file path、url)">```
    * file path：```<img src="pictures/chocolate.png">```
    * url：```<img src="https://cdn.pixabay.com/photo/2016/04/01/10/16/bar-1299829_960_720.png">```
```htmlmixed=
Alt 屬性：
    image can't be displayed -> show an alternative text 
    <img src="w3schools.jpg" alt="W3Schools.com" >
    
Height、Width 屬性：
    <img src="..." width="300px" height="200px"> <!--html的味道-->
    <img src="..." style="width:300px; height:200px;"> <!--css Inline style的味道-->
```

* 連結標籤：```<a href="連結前往的網址"> 名稱 </a>```
    * href -- Hypertext REFerence
    * 點擊圖片，連結至其他網頁：```<a href="">  <img src="">  </a>```
```htmlmixed=
Target 屬性：
    The target attribute specifies where to open the linked document.
    "_blank" -> 開新分頁
    "_self" -> 直接在本頁跳轉 (default)
    
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
```

* 區塊標籤：```<div></div>```
    * CSS +DIV 排板
    * 獨立的區塊，會獨自佔用一整行。
    * vs. ```<span></span>``` 
        * div與span皆是Block element，皆用來切割網頁區塊。
        * 不同處：span不會獨自佔用一整行。

```htmlmixed=
<p>這裡是<div style="border: 3px solid red;">紅色</div>的</p>

<p>這裡是<span style="border: 3px solid red;">紅色</span>的</p>
```
* 按鈕：```<button>Click me</button>```
```htmlmixed=
<script language="javascript">
function ShowMeDate() {
　var Today=new Date();
　alert("今天日期是 " + Today.getFullYear()+ " 年 " + (Today.getMonth()+1) + " 月 " + Today.getDate() + " 日");
}
</script>

<button onclick="ShowMeDate()">告訴我今天日期</button>
```
## LAB 2 – Pchome 商品頁
![](https://i.imgur.com/4Sf1jyJ.png)

```htmlmixed=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pchome 商品頁</title>

	<script language="javascript">
		function ShowMeDate() {
		　var Today=new Date();
		　alert("今天日期是 " + Today.getFullYear()+ " 年 " + (Today.getMonth()+1) + " 月 " + Today.getDate() + " 日");
		}
	</script>
</head>
<body>
	
    <a target="_blank" href="https://24h.pchome.com.tw/prod/DHAEDE-A9009F9IS">
        <img alt="Show this while image can't be displayed" src="https://c.ecimg.tw/items/DHAEDEA9009F9IS/000001_1538633404.jpg" height="200px;"/>
    </a>
    
    <button onclick="ShowMeDate()">告訴我今天日期</button>

    <h1 title="ACER 筆電">ACER SF514-52T-85PC蜂蜜金</h1>    
    <h2>特色</h2>
    <ul>
    	<li>LCD尺寸：14’’ FHD IPS/鏡面/觸控/LED背光</li>
		<li>處理器：i7-8550U (1.8GHz/4.0GHz) </li>
    	<li>顯示晶片：Intel® UHD Graphics 620 </li>
		<li>記憶體：16GB LPDDR3</li>
        <li>硬碟：512GB SSD</li>
    </ul>
    
    <p>其他贈品：<span style="color: pink;">TESCOM大風量負離子吹風機TID450(玫瑰桃)</span></p>
    
    
    <h2>價錢：<span style="background-color: yellow;">$41900</span></h2>
    <!--另一種方法:使用 mark    <h2>價錢：<mark>$41900</mark></h2>    -->
    
	<div style="background-color:pink; height:110px;">
        <h2>付款方式：</h2>
        <ol>
            <li>信用卡 ATM 貨到付款</li>
            <li>信用卡紅利折抵刷卡金<a href="https://24h.pchome.com.tw/edm/card/redeem.htm"> 多家銀行</a></li>
            <li>PChome儲值</li>
        </ol>
	</div>
    
</body>
</html>
```
---

## bonus
* Web Server for Chrome：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related
![](https://i.imgur.com/iAnRm63.png)


* [favicon.ico](https://blog.miniasp.com/post/2007/12/17/Introduce-faviconico-and-important-concept.aspx)
* http://tw.faviconico.org/

```htmlmixed=
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>我顯示在瀏覽器的分頁上！</title>
	<link href="C:\Users\pcsh1\Pictures\Saved Pictures\favicon.ico" rel="icon" type="image/x-icon">
</head>
<body>
	<p>我的第一個網頁</p>
</body>
</html>
```

