HTML簡介

出自KMU Wiki

(修訂版本間差異)

跳轉到: 導航, 搜索

當前修訂版本

[編輯] 網際網路與心理學第七講

[編輯] What is HTML?

HTML
- HTML(Hyper Text Markup Language)是描述網頁的一種語言（有語病:)）。現在由W3C(World Wide Web Consortium) 制定其標準。目前為HTML4.01（1999年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=big5">）
- 或javaScript、VBScript等（現在不太推薦）。

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>

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

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

超聯結
- <a>必接的屬性為href，所以常見的形式為<a href="URL">

CSS
- Cascade Style Sheet
- <LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">

[編輯] 實作練習

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

[編輯] 追加 HTML5

[編輯] 差在何處

HTML5 vs HTML4
HTML5之增減

增
- <audio>
- <footer>
- <header>
- <menu>
- <nav>
- <video>
- ....
減
- <applet>
- <frame>
- <frameset>
- ....

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特色

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

再插播:)

雖然是笑話，但有真實性

[編輯] HTML 5 實作

YouTube HTML5 影片播放器

參考網頁
- HTML4

- HTML5

- 有趣比較

[編輯] 用什麼軟體？

專用軟體
- FrontPage
- Dreamweaver
- HTML ABC
- HOT DOG
- Netscape Composer
- NVU
文字編輯軟體
- M$ Word
- NotePad
- OpenOffice

[編輯] 寫作技巧

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

[編輯] 如何在系上主機寫網頁

製作子目錄
- www
製作一個主檔
- index.html
以下就看個人造化:)

建議
- 準備Notepad++
- 可用 NVU （NVU 已經三年沒有更新了；KompoZer 是 NVU 的非官方更新版本）
- 不要用FrontPage等

[編輯] What is CSS

CSS

全名為Cascading Style Sheets
中文為「串接樣式表」
Cascading是串接、連接之意
可以讓網頁的格式與內容分開

CSS好處

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

CSS的樣子

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

參見

CSS常見用法

獨立一個檔案
- 如：style.css
在html檔案中連絡
- 如：<link rel="stylesheet" href="style.css" type="text/css" />
詳見
- http://www.csszengarden.com/

[編輯] 利用工具

Simple CSS
- Free software
- 官方網頁還活著
- 下載 https://www.hostm.com/simplecss-download.m
- 利用這個程式理由有二：一、免費；二、乾淨。
- 缺點：只支援到 CSS2
BlueGriffon
- http://bluegriffon.org/

[編輯] 簡易範例

看看以下

http://ex.psy.kmu.edu.tw/~sakurai/style.css
全選以後讀到TopStyle Lite

再看看以下

http://ex.psy.kmu.edu.tw/~sakurai/
改一點點看看

[編輯] 作業（期末前完成）

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

[編輯] 為何要用其他瀏覽器看

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

回到網際網路與心理學

取自"http://wiki.kmu.edu.tw/index.php/HTML%E7%B0%A1%E4%BB%8B"

 * 歷史
-** HTML+ (1993)
+**HTML+ (1993)
-** HTML 2.0 (Nov. 1994)
+**HTML 2.0 (Nov. 1994)
-** HTML 3.0 (1995)
+**HTML 3.0 (1995)
-** HTML 3.2 (Jan. 1997)
+**HTML 3.2 (Jan. 1997)
-** HTML 4.0 (Dec. 1998)
+**HTML 4.0 (Dec. 1998)
-** HTML 4.01
+**HTML 4.01
+**HTML 5 (Oct. 2014)
 === 深入一點點 ===
 * 會了一定能寫好網頁嗎？
 ** 不見得
-** 美工必須要有一點天份:-p
+*** 美工必須要有一點天份:-p
 ** 但至少可以使用久一點的網頁
 * 還有....
 * 另一種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 }
+**{\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
 ** 包含：標題、動態文件（META，例如：
 ** &lt;meta http-equiv="Content-Type" content="text/html; charset=big5"&gt;）
-** 或javaScript、VBScript等。
+** 或javaScript、VBScript等（現在不太推薦）。
 * DTD
 ** Document Type Definition
-** &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+*** &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-** &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"&gt;
+*** &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"&gt;
-** &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
+*** &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
-** DTD要放在開頭
+**DTD要放在開頭
+*以上是4.01的，現在
+**<!DOCTYPE html>
 * Title
 * 本文
 ** &lt;body&gt;.............................&lt;/body&gt;
-** 屬性
+* 屬性
 *** 有些標籤另有其屬性，可以增加的功能。如body中指定背景顏色、背景圖等等。（強烈不推薦）
 *** &lt;body bgcolor=#ffff00&gt;
 ** Cascade Style Sheet
 ** &lt;LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css"&gt;
+====實作練習====
+*用pietty連到主機
+*在自己家目錄上新建立一個子目錄 'www'
+**mkdir www
+*打開ee 新製做一個文字檔 index.html
+**<!DOCTYPE html>
+**<html>
+**<head>
+**    <meta charset="utf-8" />
+**    <title>test</title>
+**</head>
+**<body>
+**   Hello World （或任何字）
+**</body>
+**</html>
+*存檔
+*用瀏覽器
+**URL http://ex.psy.kmu.edu./~yourID/
+===追加 HTML5===
+最新的版本<br>
+*已經在各大瀏覽器中實作
+*2014年10月完成公告
+[[Image:09-1.png]]
+===差在何處===
+HTML5 vs HTML4<br>
+[[Image:09-2.png]]
+HTML5之增減<br>
+*增
+**<audio>
+**<footer>
+**<header>
+**<menu>
+**<nav>
+**<video>
+**....
+*減
+**<applet>
+**<big>
+**<center>
+**<font>
+**<frame>
+**<frameset>
+**....
+HTML 5 特性<br>
+*新的解析順序
+*新的元素：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特色<br>
+*Document Object Model (DOM)
+**對內文的結構描述定義
+**又稱「文件物件模型」
+*對應plug-in-based rich internet application
+**flash等動態網頁
+*新的標簽
+再插播:)<br>
+*雖然是笑話，但有真實性
+[[Image:09-3.png]]
+====HTML 5 實作====
+YouTube HTML5 影片播放器<br>
+*[http://www.techbang.com/posts/1862 參考網頁]
+**HTML4
+[[Image:09-4.png]]
+**HTML5
+[[Image:09-5.png]]
+**有趣比較
+[[Image:09-6.png]]
 === 用什麼軟體？ ===
 ** 可用 [http://www.mozilla-taiwan.org/nvu/ NVU] （NVU 已經三年沒有更新了；[http://www.kompozer.net/ KompoZer] 是 NVU 的非官方更新版本）
 ** 不要用FrontPage等
+==What is CSS==
+CSS<br>
+*全名為Cascading Style Sheets
+*中文為「串接樣式表」
+*Cascading是串接、連接之意
+*可以讓網頁的格式與內容分開
+CSS好處<br>
+*讓多個網頁有共同的樣子
+*一次更改所有網頁的樣子
+*在不同機器上有相似的效果
+*可以專心更新內容
+*可以更彈性的格式
+CSS的樣子<br>
+*CSS 語法
+**selector { property: value;}
+**Selector 選項
+**Property 屬性
+**Value 值
+**例如：
+***h4 { color: green;}
+參見<br>
+*[http://www.pagras.net/article/272/  雙子貓的胡言亂言]
+*[http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm Cascading Style Sheets (串接樣式表)的基本介紹]
+CSS常見用法<br>
+*獨立一個檔案
+**如：style.css
+*在html檔案中連絡
+**如：<link rel="stylesheet" href="style.css" type="text/css" />
+*詳見
+**[http://www.csszengarden.com/ http://www.csszengarden.com/]
-=== 期末要完成 ===
+===利用工具===
+*Simple CSS
+**Free software
+**官方網頁還活著
+**下載 [https://www.hostm.com/simplecss-download.m https://www.hostm.com/simplecss-download.m]
+**利用這個程式理由有二：一、免費；二、乾淨。
+**缺點：只支援到 CSS2
+*BlueGriffon
+**[http://bluegriffon.org/ http://bluegriffon.org/]
+====簡易範例====
+看看以下<br>
+*[http://ex.psy.kmu.edu.tw/~sakurai/style.css http://ex.psy.kmu.edu.tw/~sakurai/style.css]
+*全選以後讀到TopStyle Lite
+再看看以下<br>
+*[http://ex.psy.kmu.edu.tw/~sakurai/ http://ex.psy.kmu.edu.tw/~sakurai/]
+*改一點點看看
+== 作業（期末前完成） ==
 * 網頁最低要求
-* 要合乎HTML 4.01標準（要通過檢核）
+**要合乎HTML 5標準（要通過檢核）
-* 要有一個CSS檔來規劃排版（這以後會教）
+**要有一個CSS檔來規劃排版
-* 只少要三個pages及一個連結（首頁、自介、報告、網誌）。
+**只少要三個pages及一個連結（首頁、自介、報告、網誌）。
-* 對自己寫的HTML的tags，CSS的selector、property、value都知道代表什麼意思。
+**對自己寫的HTML的tags，CSS的selector、property、value都知道代表什麼意思。
-* 不要用太過強力的工具（尤其你是初學者）
+*不要用太過強力的工具（尤其你是初學者）
 === 為何要用其他瀏覽器看 ===
-一、希望大家要從取基礎開始學起，要學基礎最好的方式就是把原始碼一個字一個字地敲。<br> 二、我希望大家的網頁是可合乎W3C的HTML4.01（或XHTML1.0）即可。<br> 三、因為希望大家的網頁是可以持續成長，當然網頁結構要能自己掌握得住才好！<br> 四、如果各位網頁弄好了，大家可以宣傳出去（我可能也會幫大家宣傳），那各種情都需要考慮，不要只考慮Windos+IE。
+一、希望大家要從取基礎開始學起，要學基礎最好的方式就是把原始碼一個字一個字地敲。<br>
+二、我希望大家的網頁是可合乎W3C的HTML5即可。<br>
+三、因為希望大家的網頁是可以持續成長，當然網頁結構要能自己掌握得住才好！<br>
+四、如果各位網頁弄好了，大家可以宣傳出去（我可能也會幫大家宣傳），那各種情都需要考慮，不要只考慮Windows+IE。<br>
 [[網際網路與心理學| 回到網際網路與心理學]]