網頁程式設計

# 網頁期中考古題 ## 前情提要 **毛毛我真的做ㄌ很久，想要這份筆記請他來跟我拿，讓我知道這份筆記幫助了多少人owo** **偷偷給別人的考試都會不及格，都是大壞蛋ono** 先附上期中[題目卷](https://drive.google.com/file/d/1ZjaqUQ2T7Wx0mhZJ63PN99JZ--j_9mDs/view?usp=drive_link)，要了解網頁怎麼寫，就必須先知道網頁的格式。 HTML這個語言跟其他語言不同的地方是，他必須按部就班，要由上往下寫，然後再看這些內容是要用純文字還是其他特殊的輸入串又或是其他標籤。 ## 第一題 ![螢幕擷取畫面 2024-04-20 135954](https://hackmd.io/_uploads/HJNgc0lWR.png) 首先先分析整個頁面，看看我們需要什麼部分。那我第一眼就會先分成兩個部分 > 紅色的表格練習 > 整個表格那已經區分出來後就開始撰寫我們的HTML吧.w.!!! 首先先用這個模板建立一個最基礎的HTML ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> ``` 1. 那因為這是第一題，所以我們在**title**這個標籤裡面加上第一題 2. 再來這個表格練習看起來很大，所以我猜測他是用了**h1**標籤 3. 我們先看看這樣的程式碼變成如何 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一題</title> </head> <body> <h1>表格練習</h1> </body> </html> ``` 4. 但是表格練習是紅色的而且還是置中，所以我們要添加css的程式碼 5. 我們可以在**h1**標籤上加上```style="color: red; text-align: center;"``` 6. 如果要在標籤裡面添加css就要把css語法用在```style=" "```裡面 7. > 裡面有兩個元素分別是 > ```color: red;``` 顏色為紅色 > ```text-align: center;``` 文字位置置中 8. 那還有另一種寫法是把css寫在**head**標籤裡面，但基本上大同小異，只是差別在美觀跟排版還有可讀性，就看各位喜歡哪一種 ```html= <h1 style="color: red; text-align: center">表格練習</h1> ``` ```html= <head> <meta charset="UTF-8"> <title>第一題</title> <style> h1 { color: red; text-align: center; } </style> </head> <body> <h1>表格練習</h1> </body> ``` 到了這邊就剩下表格的部分還沒做，那表格的部分其實不難，只是要能把他們拆解。我這邊就幫大家用個圖來說明。 ![螢幕擷取畫面 2024-04-21 000224](https://hackmd.io/_uploads/rkQjPPWWC.png) 可以看到我把表格分成三個部分，在這之前我們先把表格的基本架構先預習一下。 :::warning 04/23補充說明: 因為蠻多人不清楚怎麼分成幾部分，我這邊詳細說明一下。你就由上到下把需要合併的區塊跟不需要的拆出來，但是拆解的部分就是水平線一行一行的看，不要拆解鉛直線。 ::: ```html= <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> ``` 整個表格要用**table**標籤框起來，**tr**標籤可以想成是換下一列，**td**標籤則是往下一欄。但是光是這樣還不夠，如果有注意到老師的表格每個欄位都有用線條包起來，那這邊就要用到css的東西 > ```border: 1px solid black;```產生一像素的線條 > ```border-collapse: collapse;```讓表格之間的線條變成一條線顯示那因為表格裡面的所有元素都要有線條，所以我們在每個**table**、**tr**、**td**都要寫上這些css。 ~~啊這個就真的很麻煩~~，所以我們會把這些css給獨立寫出來像下面這樣ouobbb ```html= <head> <meta charset="UTF-8"> <title>第一題</title> <style> table, tr, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> ``` 再來老師要我們把表格的背景換成藍色(應該是藍色，我分辨不出顏色qq)，然後裡面的字體都要置中，還有整個表格的寬度跟頁面要一樣，所以這些css就可以寫成這樣。 > ```text-align: center;``` 文字位置置中 > ```background-color: lightblue;``` 背景顏色換成亮藍色(結果是亮藍色qq) > ```width: 100%;```寬度隨著介面自動調整縮放比例，如果想要固定就要用px ```html= <style> table { text-align: center; background-color: lightblue; width: 100%; } </style> ``` ```html= <table style="text-align: center;background-color: lightblue;width: 100%;"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> ``` 講完表格的基本框架設定，現在終於要進入表格內容了zzz 先看第一部份，表格是一個3 $\times$ 3的形式，第一欄整個要合併成一個格子給照片，那我先整理基本內容出來。 ```html= <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> ``` 數字1、4、7的部分要合併，所以在開頭1的標籤寫入合併的程式，其餘的4、7都刪掉，然後排版美化一下。 > ```rowspan="3"``` 直的欄位合併 **(注意我不是css語法)** ```html= <table> <tr> <td rowspan="3">1</td> <td>2</td><td>3</td> </tr> <tr> <td>5</td><td>6</td> </tr> <tr> <td>8</td><td>9</td> </tr> </table> ``` 再來把1換成圖片，使用**img**標籤，然後使用**src**屬性來指定檔案位置，然後設定一下css的高和寬，這邊的img標籤不需要尾巴喔。 > ```width: 150px;``` 寬度150像素 > ```height: 150px;``` 高度150像素 ```html= <img src="img_girl.jpg" style="width: 150px;height: 150px;"> ``` 那因為照片有設定寬度，所以欄位也要設定寬度，不然裝不下ㄌ。最後再把其他數字都整理成老師要的內容。 ```html= <table> <tr> <td rowspan="3" style="width: 150px;> <img src="img_girl.jpg" style="width: 150px;height: 150px;"> </td> <td>姓名</td><td>毛毛</td> </tr> <tr> <td>性別</td><td>男</td> </tr> <tr> <td>生日</td><td>2002/11/21</td> </tr> </table> ``` 那這邊第一部分完成，接著往第二部分邁進，一樣先寫出基本架構。 ```html= <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> </table> ``` 那1、2、3都要合併成同一個表格，所以要用到跟上面類似的屬性，只是名稱不一樣，然後寫在1上面，2、3都刪掉，接著改掉1的內容。 > ```colspan="3"``` 橫的欄位合併 **(注意我不是css語法)** ```html= <table> <tr> <td colspan="3">自傳</td> </tr> </table> ``` 剩下最後一個部分，那細心的話會發現他跟第二部分其實格式是一樣的，只是他的要求有一點多，要我們字左右對齊，還要首行縮兩個字，所以我們加上這兩段css。 > ```text-align: justify;``` 字左右對齊 > ```text-indent: 2em;``` 首行縮字 ```html= <table> <tr> <td colspan="3" style="text-align: justify;text-indent: 2em;"> 123456789abcdefg </td> </tr> </table> ``` 最後把三個部分給連接起來，這邊要記得他們都是在同一個表格，也就是**table**標籤，所以只能有一個**table**標籤。 ```html= <table> <tr> <td rowspan="3" style="width: 150px;> <img src="img_girl.jpg" style="width: 150px;height: 150px;"> </td> <td>姓名</td><td>毛毛</td> </tr> <tr> <td>性別</td><td>男</td> </tr> <tr> <td>生日</td><td>2002/11/21</td> </tr> <tr> <td colspan="3">自傳</td> </tr> <tr> <td colspan="3" style="text-align: justify;text-indent: 2em;"> 123456789abcdefg </td> </tr> </table> ``` 恭喜完成第一題啦owo，其實熟悉之後就會越寫越快，~~本篇教學文廢話有點多~~。 :::spoiler 這邊附上第一題完整程式碼 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一題</title> <style> h1 { color: red; text-align: center; } table, tr, td { border: 1px solid black; border-collapse: collapse; } table { text-align: center; background-color: lightblue; width:100%; } </style> </head> <body> <h1>表格練習</h1> <table> <tr> <td rowspan="3" style="width: 150px;"> <img src="img_girl.jpg" style="width: 150px;height: 150px;"> </td> <td>姓名</td><td>毛毛</td> </tr> <tr> <td>性別</td><td>男</td> </tr> <tr> <td>生日</td><td>2002/11/21</td> </tr> <tr> <td colspan="3">自傳</td> </tr> <tr> <td colspan="3" style="text-align: justify;text-indent: 2em;"> 123456789abcdefg後面自行補充... </td> </tr> </table> </body> </html> ``` ::: ## 第二題 ![螢幕擷取畫面 2024-04-21 103125](https://hackmd.io/_uploads/r1r9qgGb0.png) 一樣先分析整個頁面，看看我們需要什麼部分。那我會先分成三個部分 > 紅色的清單練習 > 項目清單1 > 項目清單2 那我這邊就直接把基礎架構跟第一部份都先直接寫出來了，不懂得再回頭去看第一題。 ```html= <head> <meta charset="UTF-8"> <title>第二題</title> <style> h1 { color: red; text-align: center; } </style> </head> <body> <h1>清單練習</h1> </body> ``` 再來是清單的部分，HTML有很多清單的標籤，這邊舉例**ul**、**ol**、**li**、**dl**、**dt**、**dd**。那第二題只會用到三個標籤，總共兩種組合。 **ul**跟**ol**可以想像成容器，而**li**則是內容物 > **ul**搭配**li** 沒排序的清單 > **ol**搭配**li** 有排序的清單 ```html= <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>4</li> <li>5</li> <li>6</li> </ol> ``` 那第二部分屬於沒排序的清單，所以我們會用**ul**搭配**li**來做。題目要求我們的清單前面要有一個小圖示，我們可以用css這樣做 > ```list-style-image: url('icon.png');``` 在清單前使用路徑導入小圖片 ```html= <ul style="list-style-image: url('icon.png');"> <li>1</li> <li>2</li> <li>3</li> </ul> ``` 那顏色的部分我想要晚一點處理，先把第三部份給用好。這邊是用有排序的清單，那他預設的排序就是1.2.3.這樣，不過我怕老師出其他的排列符號，所以這邊介紹一下更改排序符號的css > ```list-style-type: decimal;``` 更改前面排序的符號(有什麼符號看[這裡](https://www.w3schools.com/cssref/pr_list-style-type.php)) ```html= <ol style="list-style-type: decimal;"> <li>4</li> <li>5</li> <li>6</li> </ol> ``` 那這邊基本架構都用好了，剩下那討厭的css，我想要先提一些css的進階語法，可以之後根據題目去自己應用這樣。 :::info css語法有三種歸類法分別是用 > HTML標籤 (就是第一題用的那樣) > id (不能重複，適合用在只有單一物件需要css的時候) > class (可以重複，但是css呼叫就會把有同樣名稱的類別都一起做css) ```html= <h1>1</h1> <h2 id="css1">2</h2> <h3 class="css2">3</h3> <h4 class="css2">4</h4> ``` 那如果我想要呼叫他們該怎麼用css表示 > HTML標籤 (直接把標籤寫上去) > id (前面放#後面id) > class (前面放.後面id) ```html= <head> <meta charset="utf-8"> <title>第1題</title> <style> h1 { } #css1 { } .css2 { } </style> </head> <body> <h1>1</h1> <h2 id="css1">2</h2> <h3 class="css2">3</h3> <h4 class="css2">4</h4> </body> ``` 那如果css有事件發生，例如題目要的停留在清單上，這種時候就需要用到虛擬選擇器，有幫各位整理出[這些](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes) ::: 說了這麼多，直接寫範例出來大家應該會更清楚。首先兩個清單都要用css，所以我們用class把他們選在一起 ```html= <ul class="ouo" style="list-style-image: url('icon.png');"> <li>1</li> <li>2</li> <li>3</li> </ul> <ol class="ouo" style="list-style-type: decimal;"> <li>4</li> <li>5</li> <li>6</li> </ol> ``` 再來題目說停留的時候要顯示紅底黃字，所以去我剛剛提供的網站，可以找到一個叫hover的東東，那要做變顏色的是清單的內容而不是容器本身，所以css要這樣寫 > ```background-color: red;``` 背景變紅色 > ```color: yellow;``` 字體變黃色 ```html= <style> .ouo li:hover { background-color: red; color: yellow; } </style> ``` 那這樣就是第二題啦~~~ 484越來越覺得很簡單ㄌ :::spoiler 這邊附上第二題完整程式碼 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二題</title> <style> h1 { color: red; text-align: center; } .ouo li:hover { background-color: red; color: yellow; } </style> </head> <body> <h1>清單練習</h1> <ul class="ouo" style="list-style-image: url('icon.png');"> <li>項目一</li> <li>項目二</li> <li>項目三</li> <li>項目四</li> <li>項目五</li> </ul> <ol class="ouo" style="list-style-type: decimal;"> <li>項目一</li> <li>項目二</li> <li>項目三</li> <li>項目四</li> <li>項目五</li> </ol> </body> </html> ``` ::: ## 第三題這個太複雜了，我覺得文字沒有辦法表示清楚，只能面教ono :::warning 04/24更新這邊附上完整三個檔案程式碼，還是看不懂的請透過DC聯絡我 ::: :::spoiler ex3.html ```html= <!doctype html> <html> <head> <meta charset="utf-8"> <title>第3題</title> <style> body { margin: 0; background-image: url("bg1.png"); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:hover .not_active { background-color: red; } .active { background-color: #4CAF50; } </style> </head> <body> <ul> <li><a class="active" href="ex3.html">設計者</a></li> <li><a class="not_active" href="ex3_1.html">表格練習</a></li> <li><a class="not_active" href="ex3_2.html">清單練習</a></li> </ul> <div style="padding:20px;margin-top:30px;"> <h1 style="text-align: center; color: #F00;text-decoration: underline;">設計者 </h1> <h2 style="text-align: center; color: #00F;">系級：OO系OO年級</h2> <h2 style="text-align: center; color: #00F;">學號：OOOOOOOO</h2> <h2 style="text-align: center; color: #00F;">姓名：OOO</h2> </div> </body> </html> ``` ::: :::spoiler ex3_1.html ```html= <!doctype html> <html> <head> <meta charset="utf-8"> <title>第3題</title> <style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:hover .not_active { background-color: red; } .active { background-color: #4CAF50; } h1 { color: red; text-align: center; } table, tr, td { border: 1px solid black; border-collapse: collapse; } table { text-align: center; background-color: lightblue; width: 100%; } </style> </head> <body> <ul> <li><a class="not_active" href="ex3.html">設計者</a></li> <li><a class="active" href="ex3_1.html">表格練習</a></li> <li><a class="not_active" href="ex3_2.html">清單練習</a></li> </ul> <div style="padding:20px;margin-top:30px;"> <h1>表格練習</h1> <table> <tr> <td rowspan="3" style="width: 150px;"> <img src="img_girl.jpg" style="width: 150px;height: 150px;"> </td> <td>姓名</td><td>毛毛</td> </tr> <tr> <td>性別</td><td>男</td> </tr> <tr> <td>生日</td><td>2002/11/21</td> </tr> <tr> <td colspan="3">自傳</td> </tr> <tr> <td colspan="3" style="text-align: justify;text-indent: 2em;"> 123456789abcdefg後面自行補充... </td> </tr> </table> </div> </body> </html> ``` ::: :::spoiler ex3_2.html ```html= <!doctype html> <html> <head> <meta charset="utf-8"> <title>第3題</title> <style> body { margin: 0; } .abc { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } .abc li { float: left; } .abc li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .abc li:hover .not_active { background-color: red; } .active { background-color: #4CAF50; } h1 { color: red; text-align: center; } .ouo li:hover { background-color: red; color: yellow; } </style> </head> <body> <ul class="abc"> <li><a class="not_active" href="ex3.html">設計者</a></li> <li><a class="not_activeactive" href="ex3_1.html">表格練習</a></li> <li><a class="active" href="ex3_2.html">清單練習</a></li> </ul> <div style="padding:20px;margin-top:30px;"> <h1>清單練習</h1> <ul class="ouo" style="list-style-image: url('icon.png');"> <li>項目一</li> <li>項目二</li> <li>項目三</li> <li>項目四</li> <li>項目五</li> </ul> <ol class="ouo" style="list-style-type: decimal;"> <li>項目一</li> <li>項目二</li> <li>項目三</li> <li>項目四</li> <li>項目五</li> </ol> </div> </body> </html> ``` ::: ## 第四題終於進到第四題了，從這題開始重心會放在JavaScript身上，那我們一樣先看看題目，題目要我們用4個輸入欄位，那標籤是**input**。那這邊先為每一個欄位都設一個專屬的id，方便之後要查詢數值。 > ```type="text"``` 只能輸入文字 > ```type="number"``` 只能輸入數字 > ```<br>``` 換行 ```html= 姓名: <input id="name" name="name" type="text"><br> 國文: <input id="num1" max="100" min="0" name="num1" type="number"><br> 英文: <input id="num2" max="100" min="0" name="num2" type="number"><br> 數學: <input id="num3" max="100" min="0" name="num3" type="number"><br> ``` 接著放一個按鈕，標籤是**button**。 > ```type="button"``` 按鈕屬性 > ```onclick="funtion()"``` 點擊按鈕之後要呼叫什麼funtion ```html= <button type="button" onclick="funtion()">輸入</button><br> ``` 到這邊上面的部分都已經做完了，老師要我們在按鈕下面弄一個空間用來儲存我們輸入的數值。所以我們會用到**p**標籤來達成分段。那一樣給他一個id，因為之後我們要把這部分給取代掉 ```html= <p id="replace1">顯示陣列的位置</p> ``` 再來就是兩個單選按鈕加上一些文字，那一樣先用個id方便之後調用。那這邊要注意按鈕類型的要多一個value值，不然我選這個按鈕就沒用處啦ouo > ```type="radio"``` 單選按鈕 > ```checked``` 預設選取 > ```value="XXX"``` 賦予這個按鈕一個值 ```html= 排序依據：<br> <input type="radio" id="ByName" name="OrderBy" value="ByName" checked> 姓名 <input type="radio" id="BySum" name="OrderBy" value="BySum"> 總分 ``` 還剩下一點點的部分，那做法跟上面的一樣，這邊快速帶過。 ```html= <button type="button" onclick="funtion2()">顯示表格</button><br> <p id="replace2">顯示表格的位置</p> ``` :::info :::spoiler 到目前為止的程式碼長這樣 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第四題</title> </head> <body> 姓名: <input id="name" name="name" type="text"><br> 國文: <input id="num1" max="100" min="0" name="num1" type="number"><br> 英文: <input id="num2" max="100" min="0" name="num2" type="number"><br> 數學: <input id="num3" max="100" min="0" name="num3" type="number"><br> <button onclick="funtion1()" type="button">輸入</button> <br> <p id="replace1">顯示陣列的位置</p> 排序依據：<br> <input checked id="ByName" name="OrderBy" type="radio" value="ByName"> 姓名 <input id="BySum" name="OrderBy" type="radio" value="BySum"> 總分 <br><br> <button onclick="funtion2()" type="button">顯示表格</button> <br> <p id="replace2">顯示表格的位置</p> </body> </html> ``` ::: 那現在整個html框架都已經用好了，開始要進行js的部分了。我很抱歉沒時間寫完QQ ## 自主練習練習弄出以下表格的部分，字體大小什麼的不用管，只要格式正確就好。 ![螢幕擷取畫面 2024-04-22 225931](https://hackmd.io/_uploads/rJF82JH-R.png) :::spoiler 解答程式碼 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一題</title> <style> h1 { color: red; text-align: center; } table, tr, td { border: 1px solid black; border-collapse: collapse; } table { text-align: center; background-color: lightblue; width: 100%; } </style> </head> <body> <h1>表格練習</h1> <table> <tr> <td colspan="3">畢旅菜單</td> </tr> <tr> <td>星期一</td><td colspan="2">麥當勞</td> </tr> <tr> <td>星期二</td><td>八方雲集</td><td>紅茶</td> </tr> <tr> <td>星期三</td><td>拉麵</td><td>綠茶</td> </tr> <tr> <td colspan="3">同意書</td> </tr> <tr> <td>家長簽名</td><td colspan="2">XXX</td> </tr> </table> </body> </html> ``` :::