計算機概論Lab-7 - HackMD

計算機概論Lab-7

HTML5 CSS

https://hackmd.io/@IMOK/Lab7

講師: 賴昱有

網頁的構成

網頁可以由以下三種語言去撰寫完成的，分別為 Html, CSS, Javascript

Html : 負責描述網頁的內容
CSS : 負責定義內容顯示的外型、顏色等樣式
Javascript : 負責處理與使用者戶互動的邏輯

網頁開發的優點

網頁開發較為容易，速度快速，可以很快地做出成品
由於使用 Html, CSS 來定義APP, 桌面應用 UI (User Interface)對於開發上來說十分的便利
學習網頁的開發，對於未來進行其他的平台的 UI 撰寫也有很大的幫助。

Fifteen Puzzle Game

是由一塊有凹槽的板和數個寫有數字的大小相同的方塊所組成。
遊戲者要移動板上的方塊，讓所有的方塊順著數字的次序排列。

連接 : https://lorecioni.github.io/fifteen-puzzle-game/

環境設定

Visual Studio Code
並在 Visual Studio Code 中安裝以下項目:

IntelliSense for CSS class names in HTML
Live Server (F1 + "Show Live Server Preview")
HTML Preview (ctrl+shift+v)
HTML CSS Support
JavaScript (ES6) code snippets

安裝Visual Studio Code

載點 : https://code.visualstudio.com/

安裝 Extensions

1. 點選左方的 Extension 頁面
2. 輸入 Extension 的名子
3. 點選 Install

tempsnip

HTML

https://www.w3schools.com/

HTML 特徵

1. HTML 描述了整個網頁的架構與內容
2. HTML 由很多不同的 element 所組成
3. 瀏覽器會根據不同的 element 來使用不同的方式呈現 element 中的內容

Simple Example (Hello World)

 <!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)

 <!DOCTYPE html>

告訴瀏覽器說，使用 html 5 的語法來進行render

如果同學有興趣，可以看看其他格式的 DTD 宣告方式。
W3schools-DTD

Elements and Tags

剛剛提到 HTML 由很多不同的 element 所組成。
而每個element 由 start tag 與 end tag 組成

奇怪，有一個沒有 end Tag 的 element。

<meta charset="utf-8">

它是”Empty Element”，指沒有內容的 element，因此他沒有 end tag 。
其他常見 Empty Element 。如：

<br> <!--表 示 換 行-->
<img> <!--圖 片-->
<hr> <!--水 平 線-->
<input type="text"> <!--表 示 文 字 輸 入 框-->

Attribute

attribute 對於 element 來說就像是一些可以改變的選項，
像是 img element 有 height / width attribute 可以更改寬高等。

<meta charset="utf-8">
<img height="20" width="50">

※attribute 只能定義在 start tag 裡面

HTML Basic Structure

<html> <!--所有的 element 都會被放在裡面-->
    <head>  <!--放置各種設定(網頁名稱、編碼)-->
        <title>hello html</title> <!--網頁名稱-->
        <meta charset="utf-8">    <!--編碼-->
    </head>
    <body> <!--存放要顯示在網頁中的內容-->
        ...
    </body>
</html>

Heading

<h1>Hello .....</h1>
<h2>Hello ...</h2>
<h3>Hello World</h3>

通常是用來放置要作為標題的文字，這類的標籤有 6 個，由文字的大到小分別為 h1, h2, …, h6

Paragraph

<p>Author by IMOK.</p>

Paragraph Element 會將其中的內容視為一個段落。
不過 Paragraph Element 有些特性需要注意：
1. 前後自動換行
2. 不能nesting (paragraph裡面不能有另一個paragraph)

HTML 的語法檢查

由於現在多數的瀏覽器十分的聰明，
當我們撰寫錯誤的 html 語法的時候也會去猜測我們的語意，並嘗試的修復錯誤。
因此多數的時候，我們就算寫錯語法，也可以正常的顯示出來。
不過對於學習 HTML 時會造成學習者的一些困擾，我們會無法得知自己所撰寫的 HTML 是否是正確的。
這個時候，我們可以利用 World Wide Web Consortium (W3C) 所提供的
Markup Validation Service(https://validator.w3.org/)
來驗證我們所撰寫的 HTML 有那些部分是可以改正的。

使用 Markup Validation Service

HTML Link

<a href="http://google.com/">Go To Google</a>

建立超連結的基本寫法
• a : anchor tag
• href attribute 來設定連結的網頁
• element content 則是表示連結顯示的文字

Target Attribute

網頁中開啟另外一個網頁的方式其實有很多種，
如” 在新分頁開啟連結”、” 在目前頁面開啟連結”、” 在新視窗開啟連結” 等。
在 HTML 中，我們可以透過 target attribute 來設定連結開啟的效果。

• _blank 開啟新的頁面或是視窗
• _self 在目前頁面開啟 (他是預設值)
• _parent 在 parent frame 開啟連結
• _top 在最上層開啟連結
• _frameName 在特定的 frame 開啟連結

最後三個牽涉到 frame 的使用，因此這邊的示範會只先介紹前兩種。
若有興趣的同學可以參考這個部分：https://www.w3schools.com/html/html_iframe.asp

<!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(內部連結)

<h1 id="123">Bookmark Title!!!!!</h1>

創建一個element 加上 id

<a href="#123">Go to Bookmark</a>

<!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

<img src="img/test.jpg" height="500" width="200">

• src : 設定圖片的來源
• height: 設定圖片的高度，單位為 pixels
• width: 設定圖片的寬度，單位為 pixels

W3schools-Width property

Alt Attribute

當網頁中的圖片無法顯示的時候，會顯示出來的文字。
這個屬性主要是用於當瀏覽器，無法顯示圖片時，
為了讓人能正常閱讀網頁內容，會將圖片使用文字替代。

<!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

<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>

合併儲存格

如果大家有用過 Word, Excel 的表格應該會對這個功能不陌生。
HTML table中也有相似的功能，不過他將橫向合併與縱向合併分別拆開變成 rowspan 與 colspan。
※rowspan 與 colspan 都是 td/th 的 attribute

Rowspan

<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>

Colspan

<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

Order List v.s. Unorder List
在 HTML 中，列表有兩種，分別為 Ordered List 與 Unordered List。
這兩種的差別在於Unordered List 在每個項目的開頭會放置一個圖案，
而 Ordered List 則是放置有順序性的數字、字母。

Unordered List

<ul>
    <li>Hello</li>
    <li>Unordered</li>
    <li>List</li>
    <li>IMOK</li>
</ul>

Unordered List 符號更換

有四種可以選擇

<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

<ol>
    <li>Hello</li>
    <li>Unordered</li>
    <li>List</li>
    <li>IMOK</li>
</ol>

Ordered List 符號更換

有五種可以選擇

<ol type="1">
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

Input Element

Input Element 是表單元件中最常見，也是用途最廣泛的元件。
input element 擁有 type attribute 可以進行設定，當設定為不同的內容時，會變化成不同的輸入元件。

Input Type

W3schools-Input type

Button

<form>
    <input type="button" value="click">
</form>

Checkbox

<form>
    <input type="checkbox"> Option
</form>

File

<form>
    <input type="file">
</form>

Radio

<form>
    <input name="radioGroup" type="radio"> Option1
    <input name="radioGroup" type="radio"> Option2
    <input name="radioGroup" type="radio"> Option3
</form>

※ type 為 radio 時的用法較為特殊，使用相同 name attribute 的 radio element同時只能選擇一個。

create a search bar

<!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

<h1 style="color:blue;">A Blue Heading</h1>

Internal CSS

<style>
body {background-color: powderblue;}
h1   {color: blue;}
</style>

External CSS

<link rel="stylesheet" type="text/css" href="searchbar.css">

searchbar.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

W3schools-selectors reference

margin

p {
  margin: 25px 50px 75px 100px;
}

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

border

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

div {
  padding: 15px 15px 15px 15px;
}

top padding is 15px
right padding is 15px
bottom padding is 15px
left padding is 15px

color

p {
    color: lightblue; /* 使用顏色名稱 */
}

p {
    color: #00FFFF;  /* 使用HEX表示淡藍色 */
}

p {
    color: rgba(173, 216, 230, 0.5); /* 使用RGBA值表示淡藍色(0~255)，並設置透明度為0.5(0~1) */
}

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

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

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Lab Questions

Question 1

建立一個自我介紹的網頁
(需使用html及css)

Question 2

建立一個介紹你最喜歡的神奇寶貝的網頁
需包含名稱及神奇寶貝圖片及左下方介紹
建立一個外部連結，連結到你最喜歡的神奇寶貝頁面，URL由下連結取得
https://tw.portal-pokemon.com/play/pokedex

Question 3

將自我介紹作為主頁面，建立內部連結至最喜歡的神奇寶貝網頁
並可以由最喜歡的神奇寶貝頁面回到主頁面

Question 4

建立一個表格在介紹寶可夢的網頁
並將你最喜歡的神奇寶貝依據各種進化型態把數值列出

Question 5

使用CSS美化Question4的表格(需要width、margin、padding、border、background-color、color)

Question 6(bonus)

完善講義中的searchbar
將其美化並使其具備CRUD及reset的function

作業網站

http://140.121.197.13/tutorial

Pokemon TCG pocket

計算機概論Lab-7 HTML5 CSS https://hackmd.io/@IMOK/Lab7

{"title":"計算機概論Lab-7","description":"image","contributors":"[{\"id\":\"738dd674-cd6a-462c-87e2-b67e68f12ac0\",\"add\":34045,\"del\":17112}]"}

changed 9 months ago 1210 views