---
# System prepended metadata

title: 自主學習

---

#  自主學習  
* 計畫名稱:  
	網頁小遊戲開發  
* 自主學習內容概述:  
	未來想就讀資訊相關科系，希望利用這門課增進自己的程式設計能力。至網路上w3school等學習平台，學習HTML、CSS、javascript增強網頁架構，並製作一個簡單的小遊戲，作為最後成果展示。

* 預期效益:  
  * 期望能熟悉網頁的架構，並應用於程式碼中，以便未來所需。  
  * 透過製作小遊戲，找出自己不清楚的程式碼加以改進，期許自己能完整學習製作網頁的方法。  

* 學習成果需要的：
	名稱，組員，動機，預期成果，資源，日期，每週完成事項，過程簡述，心得，成品展示  
	
* 動機：  
	上高中後加入了csvt（資訊志工隊），剛好已經畢業的學長有空閒時間在星期日開了網頁研習的課程，我們每週都會去參加，持續了三個月，也發現程式很好玩，因為平常學校就有教c++，我們想學更多種程式，於是就在此學期想更深入學習網頁設計  
	
* 預期成果：  
	利用html結合css以及JavaScript製作一個網頁小遊戲，可以給大家試玩。同時我們也對網頁設計更加的熟悉。  
	
* 資源：  
	w3school,vscode,replit,github,手機，電腦  

| 週次 | 節次   | 屬性     | 學習內容       |
| ---- | ------ | -------- | -------------- |
| 1    | 第四節 | 自主學習 | 學習HTML       |
| 2    | 第四節 | 自主學習 | 學習HTML       |
| 3    | 第四節 | 自主學習 | 學習HTML       |
| 4    | 第四節 | 自主學習 | 學習CSS        |
| 5    | 第四節 | 自主學習 | 學習CSS        |
| 6    | 第四節 | 自主學習 | 學習CSS        |
| 7    | 第四節 | 自主學習 | 學習CSS        |
| 8    | 第四節 | 自主學習 | 學習javascript |
| 9    | 第四節 | 自主學習 | 學習javascript |
| 10   | 第四節 | 自主學習 | 學習javascript |
| 11   | 第四節 | 自主學習 | 學習javascript |
| 12   | 第四節 | 自主學習 | 學習javascript |
| 13   | 第四節 | 自主學習 | 遊戲主題構想   |
| 14   | 第四節 | 自主學習 | 製作遊戲       |
| 15   | 第四節 | 自主學習 | 製作遊戲       |
| 16   | 第四節 | 自主學習 | 製作遊戲       |
| 17   | 第四節 | 自主學習 | 製作遊戲       |
| 18   | 第四節 | 自主學習 | 架設遊戲網站   |

## HTML
[引用](https://www.w3schools.com/html/html_quotation_elements.asp)
[連結](https://www.w3schools.com/html/html_links.asp)
[div、span](https://www.w3schools.com/html/html_blocks.asp)
[Iframe](https://www.w3schools.com/html/html_iframe.asp)
[code](https://www.w3schools.com/html/html_computercode_elements.asp)
[Entities](https://www.w3schools.com/html/html_entities.asp)
[Canvas](https://www.w3schools.com/html/html5_canvas.asp)

## 第一周
複習html  
從w3school找到HTML學習  
以前就有學過了，我們第一周把學過的都整理出來，依照w3scool的順序複習如下:
* 架構：  
	包含\<html>、\<head>、\<body>、\<h1-6>、\<p>、\<hr>、\<br>、\<title>、\<b>、\<i>、\<hr>、\<pre>、\<a>、\<>
    
	
	
**![](https://lh4.googleusercontent.com/i7ZWPI2lk7i902dhR94ylTWzfkjuiIIYXdFQnTTbWsDXfE3xrHMb8ZPmD-BH3x7nHTAr5o392pKkGpzZf6qJcRXtOGJMDzPdFtgiVyn6eF9_7AVPsvdMx51Z98VuTRCZpU65IWFH)**
https://qaz5823091.github.io/archives/

