HTML簡介
出自KMU Wiki
(修訂版本間差異)
在2008年4月21日 (一) 15:06所做的修訂版本 (編輯) Sakurai (對話 | 貢獻) 小 ←上一個 |
在2008年4月21日 (一) 15:06所做的修訂版本 (編輯) (撤銷) Sakurai (對話 | 貢獻) 小 下一個→ |
||
第42行: | 第42行: | ||
* 格式 | * 格式 | ||
** 服務方式://IP address or Domain name | ** 服務方式://IP address or Domain name | ||
- | ** | + | ** 如:http://www.psy.kmu.edu.tw |
- | ** or | + | ** or ftp://ftp.kmu.edu.tw |
* URI | * URI | ||
** Uniform Resource Identifier | ** Uniform Resource Identifier |
在2008年4月21日 (一) 15:06所做的修訂版本
目錄 |
網際網路與心理學第七講
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
深入一點點
- 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特定的方法
- Uniform Resource Identifier
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要放在開頭
- 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">
用什麼軟體?
- 專用軟體
- FrontPage
- Dreamweaver
- HTML ABC
- HOT DOG
- Netscape Composer
- NVU
- 文字編輯軟體
- M$ Word
- NotePad
- OpenOffice
寫作技巧
- 密笈
- 重點
- 維護容易、不同瀏覽器效果差不多、不要太肥
- 利用工具檢查
如何在系上主機寫網頁
- 製作子目錄
- www
- 製作一個主檔
- index.html
- 以下就看個人造化:)
- 建議
- 準備Notepad++
- 可用NVU nvu
- 不要用FrontPage等
期末要完成
- 網頁最低要求
- 要合乎HTML 4.01標準(要通過檢核)
- 要有一個CSS檔來規劃排版(這以後會教)
- 只少要三個pages及一個連結(首頁、自介、報告、網誌)。
- 對自己寫的HTML的tags,CSS的selector、property、value都知道代表什麼意思。
- 不要用太過強力的工具(尤其你是初學者)
為何要用其他瀏覽器看
一、希望大家要從取基礎開始學起,要學基礎最好的方式就是把原始碼一個字一個字地敲。
二、我希望大家的網頁是可合乎W3C的HTML4.01(或XHTML1.0)即可。
三、因為希望大家的網頁是可以持續成長,當然網頁結構要能自己掌握得住才好!
四、如果各位網頁弄好了,大家可以宣傳出去(我可能也會幫大家宣傳),那各種情都需要考慮,不要只考慮Windos+IE。