HTML簡介

出自KMU Wiki

(修訂版本間差異)
跳轉到: 導航, 搜索
在2008年5月19日 (一) 09:58所做的修訂版本 (編輯)
Sakurai (對話 | 貢獻)

←上一個
當前修訂版本 (2015年5月7日 (四) 10:27) (編輯) (撤銷)
Psy100020045 (對話 | 貢獻)
(作業(期末前完成))
 
(2個中途的修訂版本沒有顯示。)
第7行: 第7行:
* 歷史 * 歷史
-** 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)
=== 深入一點點 === === 深入一點點 ===
第30行: 第30行:
* 會了一定能寫好網頁嗎? * 會了一定能寫好網頁嗎?
** 不見得 ** 不見得
-** 美工必須要有一點天份:-p+*** 美工必須要有一點天份:-p
** 但至少可以使用久一點的網頁 ** 但至少可以使用久一點的網頁
* 還有.... * 還有....
第66行: 第66行:
* 另一種Tag language * 另一種Tag language
* RTF * 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即可,如下) * 解碼(用Wordpad即可,如下)
** RTF also is a tag language ** RTF also is a tag language
第80行: 第80行:
** 包含:標題、動態文件(META,例如: ** 包含:標題、動態文件(META,例如:
** <meta http-equiv="Content-Type" content="text/html; charset=big5">) ** <meta http-equiv="Content-Type" content="text/html; charset=big5">)
-** 或javaScript、VBScript等。+** 或javaScript、VBScript等(現在不太推薦)。
* DTD * DTD
** Document Type Definition ** Document Type Definition
-** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">+*** <!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">+*** <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" />+*** <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-** DTD要放在開頭+**DTD要放在開頭
 +*以上是4.01的,現在
 +**<!DOCTYPE html>
 + 
* Title * Title
第97行: 第100行:
* 本文 * 本文
** &lt;body&gt;.............................&lt;/body&gt; ** &lt;body&gt;.............................&lt;/body&gt;
-** 屬性 +* 屬性
*** 有些標籤另有其屬性,可以增加的功能。如body中指定背景顏色、背景圖等等。(強烈不推薦) *** 有些標籤另有其屬性,可以增加的功能。如body中指定背景顏色、背景圖等等。(強烈不推薦)
*** &lt;body bgcolor=#ffff00&gt; *** &lt;body bgcolor=#ffff00&gt;
第111行: 第114行:
** Cascade Style Sheet ** Cascade Style Sheet
** &lt;LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css"&gt; ** &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]]
=== 用什麼軟體? === === 用什麼軟體? ===
第153行: 第226行:
** 可用 [http://www.mozilla-taiwan.org/nvu/ NVU] (NVU 已經三年沒有更新了;[http://www.kompozer.net/ KompoZer] 是 NVU 的非官方更新版本) ** 可用 [http://www.mozilla-taiwan.org/nvu/ NVU] (NVU 已經三年沒有更新了;[http://www.kompozer.net/ KompoZer] 是 NVU 的非官方更新版本)
** 不要用FrontPage等 ** 不要用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>
[[網際網路與心理學| 回到網際網路與心理學]] [[網際網路與心理學| 回到網際網路與心理學]]

當前修訂版本

目錄

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

[編輯] 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)即一般所謂的網址。
  • 格式
  • 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等(現在不太推薦)。


  • 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>
  • 存檔
  • 用瀏覽器

[編輯] 追加 HTML5

最新的版本

  • 已經在各大瀏覽器中實作
  • 2014年10月完成公告

Image:09-1.png

[編輯] 差在何處

HTML5 vs HTML4
Image:09-2.png 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等動態網頁
  • 新的標簽

再插播:)

  • 雖然是笑話,但有真實性

Image:09-3.png

[編輯] HTML 5 實作

YouTube HTML5 影片播放器

Image:09-4.png

    • HTML5

Image:09-5.png

    • 有趣比較

Image:09-6.png

[編輯] 用什麼軟體?

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

[編輯] 寫作技巧

  • 密笈
  • 重點
    • 維護容易、不同瀏覽器效果差不多、不要太肥
    • 利用工具檢查

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

  • 製作子目錄
    • 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" />
  • 詳見

[編輯] 利用工具

[編輯] 簡易範例

看看以下

再看看以下

[編輯] 作業(期末前完成)

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

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

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

回到網際網路與心理學