計算機概論Lab-7

--- type: slide --- ## 計算機概論Lab-7 ### HTML5 CSS ![image](https://hackmd.io/_uploads/BkPy5s2X6.png) <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> ---- ![image](https://hackmd.io/_uploads/Bk-Ct32Xp.png) ---- ![tempsnip](https://hackmd.io/_uploads/HyW4oh2XT.png) --- ## 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> ``` ---- ![image](https://hackmd.io/_uploads/HyQam627T.png) --- ## 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>  <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 /> ---- ![image](https://hackmd.io/_uploads/BJAGHqT7a.png) ---- ![image](https://hackmd.io/_uploads/BkA5I9TQa.png) --- ## 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>  <th>Name</th>  <th>Email</th> <th>Phone</th> </tr> <tr> <td>QQQ</td>  <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>  <link rel="stylesheet" type="text/css" href="searchbar.css"> </head> <body>  <input id="searchbar" onkeydown="checkEnter(event)" type="text" name="search" placeholder="Search animals..">  <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>  <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 ![image](https://hackmd.io/_uploads/HJP9ZrCQa.png) <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;} ``` ---- ![image](https://hackmd.io/_uploads/rJIREECX6.png) ---- ## 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%]) */ } ``` ![image](https://hackmd.io/_uploads/rJQ5xBA7T.png) --- ## 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 ![image](https://hackmd.io/_uploads/BJvZOLAma.png) <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 /> ![image](https://hackmd.io/_uploads/ryhYbw07p.png) ---- ## Question 5 <font size=4>使用CSS美化Question4的表格(需要width、margin、padding、border、background-color、color)</font> ![image](https://hackmd.io/_uploads/r1cexDRXp.png) ---- ## 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 />

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.