育將電腦工作室 - 線上書籍

網頁設計好好玩(10501)
==============

### 一、HTML

1. HyperText Markup Language：超文本標記語言，通過定義的內容，例如，標題，段落或圖像給人的內容結構和含義。用來處理網站的架構。
2. 非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
3. HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
4. 廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合。
5. 各瀏覽器HTML5支援：<http://www.findmebyip.com/litmus/> 或 [http://html5test.com](http://html5test.com/)
6. HTML標籤及屬性是不分大小寫的：`<IMG>和<img>`一樣，但建議採用小寫。
7. 英文手冊：[http://www.w3schools.com/html/html5\_intro.asp](http://www.w3schools.com/html/html5_intro.asp)
8. 中文手冊：<http://www.w3school.com.cn/tags/index.asp>
9. HTML：由 elements(元素), tags(標籤) , attributes(屬性) 組成 
 ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/hhjh/4/1_html.jpg)
10. 元素：h1~h6、div、p、a .....等
11. 標籤：<>，使用<>將元素與屬素包裝起來。通常由開始標籤到結束標籤，例 <div>.....</div>，但也自閉標籤如 <img> <meta>.....
12. 屬性：屬性是用來提供有關元素的附加信息的屬性。最常見的屬性包括id屬性，它標識的元素; 的class屬性，該屬性分類的元素; src屬性，該屬性指定嵌入內容的來源; 及href屬性，它提供了一個超鏈接引用到一個鏈接資源。
 
### 二、CSS

1. Cascading Style Sheets：串接樣式表，是創造的樣式與內容使用的外觀展現語言，例如，字體或顏色。用來處理網站的外觀。
2. CSS可以自定 CLASS(.) 與 ID(#) 兩種選擇器。
3. CLASS 可以重複 ， ID則是唯一
4. CSS 套用方式  
   行內套用 (Inline)  
   嵌入套用 (Embed)  
   外部連接套用 (External Link)  
   匯入套用 (Import)
 
### 三、JavaScript

1. JavaScript 是用於客戶端的腳本語言，通常給 HTML 網頁增加動態效果
2. 直譯式程式語言
 
### 四、練習

1. 每次到教室要做的事： 
 請在c:\\ 底下建立一個自己名稱的英文資料夾，然後將 工具放在此資料夾中 如 [sublime text3](http://class.tn.edu.tw/modules/tad_web/files.php?WebID=2085&op=tufdl&files_sn=557926#Sublime_20160915_3114_x64.zip)、[GitHub desktop](https://desktop.github.com/)(安裝)、[Bootstrap3](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) 
 將 GitHub 的 repository [同步](https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=302)回來「資料夾」，同步完後，請檢查該「repository」是否有資料
2. 請用sublime text3 建立一個網頁： 
 [sublime操作方法](https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=306) 
 網頁的副檔名為 .html 
 用sublime 「! + tab」建立一個網頁 ```
 <pre class="brush:as3;">
 
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 </head>
 <body>
 我的網頁	
 </body>
 </html>
 ```
 
 然後存進 專案資料夾/4\_1.html 
 用GitHub desktop => Commit => Sync 
 檢查網站：[https://tawan158.github.io/hhjh/4\_1.html](https://tawan158.github.io/hhjh/4_1.html) (自己的)
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown