## 計算機概論Lab-7
### HTML5 CSS
<p>https://hackmd.io/@IMOK/Lab7</p>
---
<img src="https://hackmd.io/_uploads/ryUSIqnJT.jpg" width=400 style="border-radius:1000px;"/>
講師: 賴昱有
---
## 網頁的構成
<font size =4>網頁可以由以下三種語言去撰寫完成的，分別為 Html, CSS, Javascript</font>
+ <font size=4>Html : 負責描述網頁的內容</font>
+ <font size=4>CSS : 負責定義內容顯示的外型、顏色等樣式</font>
+ <font size=4>Javascript : 負責處理與使用者戶互動的邏輯</font>
----
## 網頁開發的優點
+ <font size =4>網頁開發較為容易，速度快速，可以很快地做出成品</font>
+ <font size =4>由於使用 Html, CSS 來定義APP, 桌面應用 UI (User Interface)對於開發上來說十分的便利</font>
+ <font size =4>學習網頁的開發，對於未來進行其他的平台的 UI 撰寫也有很大的幫助。</font>
----
## Fifteen Puzzle Game
<font size =4>是由一塊有凹槽的板和數個寫有數字的大小相同的方塊所組成。
遊戲者要移動板上的方塊，讓所有的方塊順著數字的次序排列。</font>
<img src="https://hackmd.io/_uploads/ByNCai2m6.png" width=350 />
<font size =4>連接 : https://lorecioni.github.io/fifteen-puzzle-game/</font>
---
## 環境設定
<font size =5>Visual Studio Code</font>
<font size =4>並在 Visual Studio Code 中安裝以下項目:</font>
+ <font size =4>IntelliSense for CSS class names in HTML</font>
+ <font size =4>Live Server (F1 + "Show Live Server Preview")</font>
+ <font size =4>HTML Preview (ctrl+shift+v)</font>
+ <font size =4>HTML CSS Support</font>
+ <font size =4>JavaScript (ES6) code snippets</font>
----
## 安裝Visual Studio Code
<img src="https://hackmd.io/_uploads/r1KnzhnmT.png" width=800 />
<font size =4>載點 : https://code.visualstudio.com/</font>
----
## 安裝 Extensions
<font size =5 style="float : left;margin : 0px 0px 0px 350px">1. 點選左方的 Extension 頁面</font>
<font size =5 style="float : left;margin : 0px 0px 0px 350px">2. 輸入 Extension 的名子</font>
<font size =5 style="float : left;margin : 0px 0px 0px 350px">3. 點選 Install</font>
----
----
---
## HTML
https://www.w3schools.com/
----
## HTML 特徵
<font size =4>1. HTML 描述了整個網頁的架構與內容</font>
<font size =4>2. HTML 由很多不同的 element 所組成</font>
<font size =4>3. 瀏覽器會根據不同的 element 來使用不同的方式呈現 element 中的內容</font>
----
## Simple Example (Hello World)
```html=
<!DOCTYPE html>
<html>
<head>
<title>hello html</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello .....</h1>
<h2>Hello ...</h2>
<h3>Hello World</h3>
<p>Author by IMOK.</p>
</body>
</html>
```
----
---
## DTD(Document Type Definition)
```html=
<!DOCTYPE html>
```
<font size =4>告訴瀏覽器說，使用 html 5 的語法來進行render
如果同學有興趣，可以看看其他格式的 DTD 宣告方式。</font>
<font size = 5>[W3schools-DTD](https://www.w3schools.com/tags/tag_doctype.ASP)</font>
----
## Elements and Tags
<font size =4>剛剛提到 HTML 由很多不同的 element 所組成。
而每個element 由 start tag 與 end tag 組成</font>
<img src="https://hackmd.io/_uploads/r1C3oYpQp.png" width=450 />
----
<font size =4>奇怪，有一個沒有 end Tag 的 element。</font>
```html
<meta charset="utf-8">
```
<font size =4>它是”Empty Element”，指沒有內容的 element，因此他沒有 end tag 。</font>
<font size =4>其他常見 Empty Element 。如：</font>
```html
<br> <!--表 示 換 行-->
<img> <!--圖 片-->
<hr> <!--水 平 線-->
<input type="text"> <!--表 示 文 字 輸 入 框-->
```
----
## Attribute
<font size =4> attribute 對於 element 來說就像是一些可以改變的選項，
像是 img element 有 height / width attribute 可以更改寬高等。</font>
```html
<meta charset="utf-8">
<img height="20" width="50">
```
<font size =4>※attribute 只能定義在 start tag 裡面</font>
----
## HTML Basic Structure
```html
<html> <!--所有的 element 都會被放在裡面-->
<head> <!--放置各種設定(網頁名稱、編碼)-->
<title>hello html</title> <!--網頁名稱-->
<meta charset="utf-8"> <!--編碼-->
</head>
<body> <!--存放要顯示在網頁中的內容-->
...
</body>
</html>
```
----
## Heading
```html
<h1>Hello .....</h1>
<h2>Hello ...</h2>
<h3>Hello World</h3>
```
<font size =4>通常是用來放置要作為標題的文字，這類的標籤有 6 個，由文字的大到小分別為 h1, h2, ..., h6</font>
----
## Paragraph
```html
<p>Author by IMOK.</p>
```
<font size =4>Paragraph Element 會將其中的內容視為一個段落。</font>
<font size =4>不過 Paragraph Element 有些特性需要注意：</font>
<font size =4>1. 前後自動換行</font>
<font size =4>2. 不能nesting (paragraph裡面不能有另一個paragraph)</font>
---
## HTML 的語法檢查
<font size =4>由於現在多數的瀏覽器十分的聰明，
當我們撰寫錯誤的 html 語法的時候也會去猜測我們的語意，並嘗試的修復錯誤。
因此多數的時候，我們就算寫錯語法，也可以正常的顯示出來。
不過對於學習 HTML 時會造成學習者的一些困擾，我們會無法得知自己所撰寫的 HTML 是否是正確的。
這個時候，我們可以利用 World Wide Web Consortium (W3C) 所提供的
Markup Validation Service(https://validator.w3.org/)
來驗證我們所撰寫的 HTML 有那些部分是可以改正的。</font>
----
## 使用 Markup Validation Service
<img src="https://hackmd.io/_uploads/rJUk49a76.png" width=900 />
----
----
---
## HTML Link
```html
<a href="http://google.com/">Go To Google</a>
```
<font size =4>建立超連結的基本寫法
• a : anchor tag
• href attribute 來設定連結的網頁
• element content 則是表示連結顯示的文字</font>
----
## Target Attribute
<font size =4>網頁中開啟另外一個網頁的方式其實有很多種，
如” 在新分頁開啟連結”、” 在目前頁面開啟連結”、” 在新視窗開啟連結” 等。
在 HTML 中，我們可以透過 target attribute 來設定連結開啟的效果。</font>
```
• _blank 開啟新的頁面或是視窗
• _self 在目前頁面開啟 (他是預設值)
• _parent 在 parent frame 開啟連結
• _top 在最上層開啟連結
• _frameName 在特定的 frame 開啟連結
```
<font size =4>最後三個牽涉到 frame 的使用，因此這邊的示範會只先介紹前兩種。
若有興趣的同學可以參考這個部分：https://www.w3schools.com/html/html_iframe.asp</font>
----
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>Target Attribute Example</h1>
<p><a href="http://google.com/" target="_blank">Using _blank</a></p>
<p><a href="http://google.com/" target="_self">Using _self</a></p>
</body>
</html>
```
----
## Internal Linking(內部連結)
```html
<h1 id="123">Bookmark Title!!!!!</h1>
```
<font size =5>創建一個element 加上 id</font>
```html
<a href="#123">Go to Bookmark</a>
```
----
```html
<!DOCTYPE html>
<html>
<head>
<title>internal link</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="123">Bookmark Title!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<h1>HELLO!!!!!</h1>
<a href="#123">Go to Bookmark</a>
</body>
</html>
```
---
## HTML Image
```html
<img src="img/test.jpg" height="500" width="200">
```
<font size =4>• src : 設定圖片的來源</font>
<font size =4>• height: 設定圖片的高度，單位為 pixels</font>
<font size =4>• width: 設定圖片的寬度，單位為 pixels</font>
<font size = 5>[W3schools-Width property](https://www.w3schools.com/cssref/pr_dim_width.php)</font>
----
## Alt Attribute
<font size =4>當網頁中的圖片無法顯示的時候，會顯示出來的文字。
這個屬性主要是用於當瀏覽器，無法顯示圖片時，
為了讓人能正常閱讀網頁內容，會將圖片使用文字替代。</font>
----
```html
<!DOCTYPE html>
<html>
<head>
<title>image</title>
<meta charset="utf-8">
</head>
<body>
<img src="img/test.jpg" height="600" width="900" alt="alternative text!!!" >
</body>
</html>
```
---
## HTML Table Elements
```html
<table> <!--建立表格-->
<tr> <!--table row-->
<th>Name</th> <!--table heading ，用來表示一列中的一個 cell，字會加粗加大-->
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>QQQ</td> <!--table data 的縮寫，用來表示一列中的一個 cell-->
<td>QQQ@gmail.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX@yahoo.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>OOO</td>
<td>OOO@hotmail.com</td>
<td>+886 912-345-678</td>
</tr>
</table>
```
----
<img src="https://hackmd.io/_uploads/rkFfJspXp.png" width=500 />
----
## 合併儲存格
<font size =4>如果大家有用過 Word, Excel 的表格應該會對這個功能不陌生。
HTML table中也有相似的功能，不過他將橫向合併與縱向合併分別拆開變成 rowspan 與 colspan。
※rowspan 與 colspan 都是 td/th 的 attribute</font>
----
## Rowspan
```html
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td rowspan="3">QQQ</td>
<td>QQQ@gmail.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>XXX@yahoo.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>OOO@hotmail.com</td>
<td>+886 912-345-678</td>
</tr>
</table>
```
<img src="https://hackmd.io/_uploads/BJQf-jaQa.png" width=500 />
----
## Colspan
```html
<table>
<tr>
<th>Name</th>
<th colspan="2">content</th>
</tr>
<tr>
<td rowspan="3">QQQ</td>
<td>QQQ@gmail.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>XXX@yahoo.com</td>
<td>+886 912-345-678</td>
</tr>
<tr>
<td>OOO@hotmail.com</td>
<td>+886 912-345-678</td>
</tr>
</table>
```
---
## HTML Lists
<font size =4>Order List v.s. Unorder List
在 HTML 中，列表有兩種，分別為 Ordered List 與 Unordered List。
這兩種的差別在於Unordered List 在每個項目的開頭會放置一個圖案，
而 Ordered List 則是放置有順序性的數字、字母。</font>
----
## Unordered List
```html
<ul>
<li>Hello</li>
<li>Unordered</li>
<li>List</li>
<li>IMOK</li>
</ul>
```
<img src="https://hackmd.io/_uploads/HyiruoT7a.png" width=175 />
----
## Unordered List 符號更換
<font size =4>有四種可以選擇</font>
```html
<ul style="list-style-type:disc;">
<ul style="list-style-type:circle;">
<ul style="list-style-type:square;">
<ul style="list-style-type:none;">
```
----
## Order List
```html
<ol>
<li>Hello</li>
<li>Unordered</li>
<li>List</li>
<li>IMOK</li>
</ol>
```
<img src="https://hackmd.io/_uploads/B1RUqsp76.png" width=175 />
----
## Ordered List 符號更換
<font size =4>有五種可以選擇</font>
```html
<ol type="1">
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">
```
---
## Input Element
<font size =4>Input Element 是表單元件中最常見，也是用途最廣泛的元件。
input element 擁有 type attribute 可以進行設定，當設定為不同的內容時，會變化成不同的輸入元件。</font>
----
## Input Type
<font size = 5>[W3schools-Input type](https://www.w3schools.com/html/html_form_input_types.asp)</font>
<img src= "https://hackmd.io/_uploads/S1Gwhjp7p.png" width=150 style="float : left ;margin : 10px 0px 0px 250px"/>
<img src= "https://hackmd.io/_uploads/Sk__hi6QT.png" width=125 style="float : left ;margin : 10px 0px 0px 150px"/>
----
## Button
```html
<form>
<input type="button" value="click">
</form>
```
----
## Checkbox
```html
<form>
<input type="checkbox"> Option
</form>
```
----
## File
```html
<form>
<input type="file">
</form>
```
----
## Radio
```html
<form>
<input name="radioGroup" type="radio"> Option1
<input name="radioGroup" type="radio"> Option2
<input name="radioGroup" type="radio"> Option3
</form>
```
<font size =4>※ type 為 radio 時的用法較為特殊，使用相同 name attribute 的 radio element同時只能選擇一個。</font>
---
## create a search bar
```html
<!DOCTYPE html>
<html>
<head>
<title>
Creating Search Bar using HTML CSS and Javascript
</title>
<!-- linking the stylesheet(CSS) -->
<link rel="stylesheet" type="text/css" href="searchbar.css">
</head>
<body>
<!-- input tag -->
<input id="searchbar" onkeydown="checkEnter(event)" type="text" name="search" placeholder="Search animals..">
<!-- ordered list -->
<ol id='list'>
<li class="animals">Cat</li>
<li class="animals">Dog</li>
<li class="animals">Elephant</li>
<li class="animals">Fish</li>
<li class="animals">Gorilla</li>
<li class="animals">Monkey</li>
<li class="animals">Turtle</li>
<li class="animals">Whale</li>
<li class="animals">Aligator</li>
<li class="animals">Donkey</li>
<li class="animals">Horse</li>
</ol>
<!-- linking javascript -->
<script src="searchbar.js"></script>
</body>
</html>
```
---
## HTML CSS
Inline CSS
```html
<h1 style="color:blue;">A Blue Heading</h1>
```
Internal CSS
```html
<style>
body {background-color: powderblue;}
h1 {color: blue;}
</style>
```
External CSS
```html
<link rel="stylesheet" type="text/css" href="searchbar.css">
```
----
## searchbar.css
```CSS
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out; /*timing function避免切換寬度開始和結束時的突兀感*/
transition: width 0.15s ease-in-out;
}
/* 當 input field 被 focus, 改變它的 width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em; /* 改變字體大小 */
margin-left: 90px;
}
.animals{
display: list-item;
color: rgb(4, 204, 4); /* 設置字體顏色為綠色 */
background-color: black; /* 設置背景顏色為黑色 */
padding: 5px; /* 添加內邊距以增加文字周圍的空間 */
margin: 5px; /* 添加外邊距以控制列表項之間的間距 */
width: 500px;
height: 30px;
}
```
----
## Selectors
<font size = 5>[W3schools-selectors reference](https://www.w3schools.com/cssref/css_selectors.php)</font>
----
## margin
<img src="https://hackmd.io/_uploads/Syk1z4CXa.png" width=300 />
```CSS
p {
margin: 25px 50px 75px 100px;
}
```
+ <font size =4>top margin is 25px</font>
+ <font size =4>right margin is 50px</font>
+ <font size =4>bottom margin is 75px</font>
+ <font size =4>left margin is 100px</font>
----
## border
<img src="https://hackmd.io/_uploads/rkEBS40mp.png" width=300 />
----
```CSS
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
```
----
----
## padding
<img src= "https://hackmd.io/_uploads/r1lmrV0X6.png" style="float : left ;margin : 0px 0px 10px 150px"/>
<img src= "https://hackmd.io/_uploads/HJdDIE0Qp.png" style="float : left ;margin : 50px 0px 0px 50px"/>
```
div {
padding: 15px 15px 15px 15px;
}
```
+ <font size =4>top padding is 15px</font>
+ <font size =4>right padding is 15px</font>
+ <font size =4>bottom padding is 15px</font>
+ <font size =4>left padding is 15px</font>
----
## color
```
p {
color: lightblue; /* 使用顏色名稱 */
}
```
```
p {
color: #00FFFF; /* 使用HEX表示淡藍色 */
}
```
```
p {
color: rgba(173, 216, 230, 0.5); /* 使用RGBA值表示淡藍色(0~255)，並設置透明度為0.5(0~1) */
}
```
----
<img src="https://hackmd.io/_uploads/r14BCERX6.png" width=500 />
----
## color(HSL)
```
p {
color: hsl(0, 100%, 50%); /* hsl(hue[0~360], saturation[0~100%], lightness[0~100%]) */
}
```
---
## HTML Javascript
```
<script src="searchbar.js"></script>
```
----
## searchbar.js
```javascript
function search_animal() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('animals');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
function checkEnter(event) {
// 檢查是否按下的是 Enter 鍵
if (event.key === "Enter") {
search_animal();
}
}
```
----
## buld
<font size =4>https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb</font>
---
## Lab Questions
<img src="https://hackmd.io/_uploads/HyfHIwAm6.png" width=300 />
----
## Question 1
<font size=4>建立一個自我介紹的網頁</font>
<font size=4>(需使用html及css)</font>
----
## Question 2
<font size=4>建立一個介紹你最喜歡的神奇寶貝的網頁</font>
<font size=4>需包含名稱及神奇寶貝圖片及左下方介紹</font>
<font size=4>建立一個外部連結，連結到你最喜歡的神奇寶貝頁面，URL由下連結取得</font>
<font size=4>https://tw.portal-pokemon.com/play/pokedex</font>
<img src="https://hackmd.io/_uploads/SJgdcxDCXa.png" width=300 />
<img src="https://hackmd.io/_uploads/ryHjgDAQ6.png" width=300 />
<img src="https://hackmd.io/_uploads/HyengvRma.png" width=300 />
----
## Question 3
<font size=4>將自我介紹作為主頁面，建立內部連結至最喜歡的神奇寶貝網頁</font>
<font size=4>並可以由最喜歡的神奇寶貝頁面回到主頁面</font>
----
## Question 4
<font size=4>建立一個表格在介紹寶可夢的網頁
並將你最喜歡的神奇寶貝依據各種進化型態把數值列出</font>
<img src="https://hackmd.io/_uploads/SJIXGwCmT.png" width=500 />
----
## Question 5
<font size=4>使用CSS美化Question4的表格(需要width、margin、padding、border、background-color、color)</font>
----
## Question 6(bonus)
<font size=4>完善講義中的searchbar
將其美化並使其具備CRUD及reset的function</font>
---
## 作業網站
http://140.121.197.13/tutorial
---
<font size=10>Pokemon TCG pocket </font>
<img src="https://hackmd.io/_uploads/rJ9zy3HW1e.png" width=370 />
{"title":"計算機概論Lab-7","description":"image","contributors":"[{\"id\":\"738dd674-cd6a-462c-87e2-b67e68f12ac0\",\"add\":34045,\"del\":17112}]"}