線上書籍

Home

網頁設計好好玩(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
  6. HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
  7. 英文手冊：http://www.w3schools.com/html/html5_intro.asp
  8. 中文手冊：http://www.w3school.com.cn/tags/index.asp
  9. HTML：由 elements(元素), tags(標籤) , attributes(屬性) 組成
  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、GitHub desktop(安裝)、Bootstrap3
    將 GitHub 的 repository 同步回來「資料夾」，同步完後，請檢查該「repository」是否有資料
     
  2. 請用sublime text3 建立一個網頁：
    sublime操作方法
    網頁的副檔名為 .html
    用sublime 「! + tab」建立一個網頁 <!DOCTYPE html> <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 (自己的)