HTML 5 與 CSS 3

出自KMU Wiki

(修訂版本間差異)

跳轉到: 導航, 搜索

在2018年6月4日 (一) 13:07所做的修訂版本

網頁誰發明？

提姆·柏內茲-李 ( Tim Berners-Lee )

為什麼要網頁？
- CERN （歐洲核子研究組織）
- 概念：超文字
- 實作：1990(?1)
  - 上面是世界第一個網頁
- Tim Berners-Lee制訂了
  - HTML、Httpd及第一個瀏覽器

What is HTML?

- HTML
  - HTML(Hyper Text Markup Language)是描述網頁的一種語言（有語病:)）。現在由W3C(World Wide Web Consortium) 制定其標準。目前為HTML5.2（2017年Dec.）。
- 歷史
  - HTML+ (1993)
  - HTML 2.0 (Nov. 1994)
  - HTML 3.0 (1995)
  - HTML 3.2 (Jan. 1997)
  - HTML 4.0 (Dec. 1998)
  - HTML 4.01
  - HTML 5 (Oct. 2014)

深入一點點
- SGML
  - SGML(Standard Generalized Markup Language)一種通用的電子文件標準。其中一個重要特性為

DTD(Document Type Definition,文件格式定義)。列為ISO8879(1996)標準。

- XML
  - XML(eXtensible Markup Language)為綜合HTML及SGML特徵的語言，同時具有DTD特性，也具有相當簡短性。1998年由W3C推出XML 1.0
- XHTML
  - 2003年10月提出，利用HTML tag實作XML。現在為XHTML 2.0 (2004 July)

為什麼要學HTML
- 寫網頁一定要會嗎？
  - 不一定
  - 但知道就不會寫「爛」網頁
- 會了一定能寫好網頁嗎？
  - 不見得
    - 美工必須要有一點天份:-p
  - 但至少可以使用久一點的網頁
- 還有....
  - 你可以看得懂別人的把戲
  - 可以用在blog客製化

What is URL?

- URL
  - URL(Universal Resource Locator)即一般所謂的網址。
- 格式
  - 服務方式://IP address or Domain name
  - 如：http://www.psy.kmu.edu.tw
  - or ftp://ftp.kmu.edu.tw

- URI
  - Uniform Resource Identifier
    - 多了path
    - 將resource特定的方法

HTML的真象
- Tag language
  - <html>
  - <head>
  - <title> Test </title>
  - </head>
  - <body>
  - 這裡寫內文
  - </body>
  - </html>
- What is Tag?
  - 被<與>所夾的部分就是tag，瀏覽器（browser）將其解讀為命令。並執行。

另一種Tag language

- RTF
  - {\rtf1\ansi\ansicpg950\deff0\deflang1033\deflangfe1028{\fonttbl{\f0\fswiss\fcharset0 Arial;}{\f1\fnil\fcharset136 \'b7\'73\'b2\'d3\'a9\'fa\'c5\'e9;}} \viewkind4\uc1\pard\lang1028\f0\fs20 RTF\lang1033 also is a tag language\par RTF\lang1028\f1\'ae\'e6\'a6\'a1\'a4\'5d\'ac\'4f\'bc\'d0\'c5\'d2\'bb\'79\'a8\'a5\'a1\'43\par \par }
- 解碼（用Wordpad即可，如下）
  - RTF also is a tag language
  - RTF格式也是標籤語言。

常用tag簡介
- 最外層
  - <html>..........................</html>
- 開頭
  - <head>..........................</head>
  - 非本體，平常用瀏覽器看不到的部分。
  - 包含：標題、動態文件（META，例如：
  - <meta http-equiv="Content-Type" content="text/html; charset=utf-8">）
  - 或javaScript、VBScript等（現在不太推薦）。

常用tag簡介之二
- DTD
  - Document Type Definition
    - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8">
    - <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  - DTD要放在開頭
- 以上是4.01的，現在
  - - <!DOCTYPE html>

常用tag簡介之三
- Title
  - <title>.............</title>
  - title的重要性，在於方便使用者。
- 密笈
  - <!開頭為註解，雖然瀏覽者看不到，但搜尋引擎滿注意的。

常用tag簡介之四
- 本文
  - <body>.............................</body>
- 屬性
  - 有些標籤另有其屬性，可以增加的功能。如body中指定背景顏色、背景圖等等。（強烈不推薦）
  - <body bgcolor=#ffff00>
  - or <body background="filename.gif">
- 插入圖形
  - <img src="filename">
  - 可以有很多控制屬性，其中alt滿有用的。

常用tag簡介之五
- 超聯結
  - <a>必接的屬性為href，所以常見的形式為<a href="URL">
- CSS
  - Cascade Style Sheet
    - <LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">

實作練習
- 用pietty連到主機
- 在自己家目錄上新建立一個子目錄 'public_html'
  - mkdir public_html
- 打開ee 新製做一個文字檔 index.html
  - <!DOCTYPE html>
  - <html>
  - <head>
  - <meta charset="utf-8" />
  - <title>test</title>
  - </head>
  - <body>
  - Hello World （或任何字）
  - </body>
  - </html>
- 存檔
- 用瀏覽器
  - URL http://psyex.kmu.edu./~yourID/

追加 HTML5

- 最新的版本
  - 已經在各大瀏覽器中實作
  - 2014年10月完成公告

差在何處
- HTML5 vs HTML4

HTML5之增減
- 增
  - <audio>
  - <footer>
  - <header>
  - <menu>
  - <nav>
  - <video>
  - ....

- 減
  - <applet>
  - <frame>
  - <frameset>
  - ....

HTML 5 特性
- HTML 5
  - 新的解析順序
  - 新的元素：section, video, progress, nav, meter, time, aside, canvas
  - input 元素的新屬性：日期和時間，email, url
  - 新的通用屬性：ping, charset, async
  - 全域屬性：id, tabindex, repeat
  - 移除元素：center, font, u, strike, s, frameset, frame, applet

HTML 5
- HTML 5特色
  - Document Object Model (DOM)
    - 對內文的結構描述定義
    - 又稱「文件物件模型」
  - 對應plug-in-based rich internet application
    - flash等動態網頁
- 新的標簽

再插播:)
- 雖然是笑話，但有真實性

HTML 5 實作
- YouTube HTML5 影片播放器
  - 參考網頁現在都是5
  - 右邊是HTML4與5

- - 有趣比較

寫作技巧

- 密笈
  - 參考好的教學網站，如：W3 School
  - 看看例子
  - 用手打（別用太高級的工具）
- 重點
  - 維護容易、不同瀏覽器效果差不多、不要太肥
- 利用工具檢查
  - [1]

如何在主機寫網頁
- 製作子目錄
  - pulic_html
- 製作一個主檔
  - index.html
- 以下就看個人造化:)

- 建議
  - 準備Notepad++
  - 可用[2]
  - 不要用FrontPage等

What is CSS

- CSS
  - 全名為Cascading Style Sheets
  - 中文為「串接樣式表」

- - Cascading是串接、連接之意

- - 可以讓網頁的格式與內容分開

CSS好處
- 讓多個網頁有共同的樣子
- 一次更改所有網頁的樣子
- 在不同機器上有相似的效果
- 可以專心更新內容
- 可以更彈性的格式

CSS的樣子
- CSS 語法
  - selector { property: value;}
  - Selector 選項
  - Property 屬性
  - Value 值
  - 例如：
    - h4 { color: green;}

- 參見
  - 雙子貓的胡言亂言
  - Cascading Style Sheets (串接樣式表)的基本介紹

CSS常見用法
- 獨立一個檔案
  - 如：style.css
- 在html檔案中連絡
  - 如：<link rel="stylesheet" href="style.css" type="text/css" />
- 詳見
  - [3]

利用工具
- Simple CSS
  - Free software
  - 官方網頁還活著
  - 下載 [4]
  - 利用這個程式理由有二：一、免費；二、乾淨。
  - 缺點：只支援到 CSS2
- BlueGriffon
  - [5]

簡易範例
- 看看以下
  - [6]
- 再看看以下
  - [7]
  - 改一點點看看

作業（期末前完成）

- 網頁最低要求
  - 要合乎HTML 5標準（要通過檢核）
  - 要有一個CSS檔來規劃排版
  - 只少要三個pages及一個連結（首頁、自介、報告、網誌）。
  - 對自己寫的HTML的tags，CSS的selector、property、value都知道代表什麼意思。
- 不要用太過強力的工具（尤其你是初學者）

為何要用其他瀏覽器看
- 一、希望大家要從取基礎開始學起，要學基礎最好的方式就是把原始碼一個字一個字地敲。
- 二、我希望大家的網頁是可合乎W3C的HTML5即可。
- 三、因為希望大家的網頁是可以持續成長，當然網頁結構要能自己掌握得住才好！
- 四、如果各位網頁弄好了，大家可以宣傳出去（我可能也會幫大家宣傳），那各種情都需要考慮，不要只考慮Windows+IE。

額外作業

- 如果是開源軟體更佳

取自"http://wiki.kmu.edu.tw/index.php/HTML_5_%E8%88%87_CSS_3"

 [[Image:444.jpg]]
-*What is HTML?
+= What is HTML? =
 **HTML
 ***HTML(Hyper Text Markup Language)是描述網頁的一種語言（有語病:)）。現在由W3C(World Wide Web Consortium) 制定其標準。目前為HTML5.2（2017年Dec.）。
 ***可以用在blog客製化
-*What is URL?
+= What is URL? =
 **URL
 ***URL(Universal Resource Locator)即一般所謂的網址。
 ***被<與>所夾的部分就是tag，瀏覽器（browser）將其解讀為命令。並執行。
-*另一種Tag language
+= 另一種Tag language =
 **RTF
 ***{\rtf1\ansi\ansicpg950\deff0\deflang1033\deflangfe1028{\fonttbl{\f0\fswiss\fcharset0 Arial;}{\f1\fnil\fcharset136 \'b7\'73\'b2\'d3\'a9\'fa\'c5\'e9;}} \viewkind4\uc1\pard\lang1028\f0\fs20 RTF\lang1033 also is a tag language\par RTF\lang1028\f1\'ae\'e6\'a6\'a1\'a4\'5d\'ac\'4f\'bc\'d0\'c5\'d2\'bb\'79\'a8\'a5\'a1\'43\par \par }
 ***URL http://psyex.kmu.edu./~yourID/
-*追加 HTML5
+= 追加 HTML5 =
 **最新的版本
 ***已經在各大瀏覽器中實作
 [[Image:2424-3.png]]
-*寫作技巧
+= 寫作技巧 =
 **密笈
 ***參考好的教學網站，如：[https://www.w3schools.com/html/html_examples.asp W3 School]
 ***不要用FrontPage等
-*What is CSS
+= What is CSS =
 **CSS
 ***全名為Cascading Style Sheets
 ***改一點點看看
-*作業（期末前完成）
+= 作業（期末前完成） =
 **網頁最低要求
 ***要合乎HTML 5標準（要通過檢核）
 **四、如果各位網頁弄好了，大家可以宣傳出去（我可能也會幫大家宣傳），那各種情都需要考慮，不要只考慮Windows+IE。
-*額外作業
+= 額外作業 =
 **做不做是任意的（不做沒分但也不扣分，做了加分）
 **請尋找工具

HTML 5 與 CSS 3

出自KMU Wiki

在2018年6月4日 (一) 13:07所做的修訂版本

目錄

網頁誰發明？

What is HTML?

What is URL?

另一種Tag language

追加 HTML5

寫作技巧

What is CSS

作業（期末前完成）

額外作業

檢視

個人工具

導航

搜索

工具箱