Giao Trinh HTML

Gio Trnh

HHTTMMLL ((XXHHTTMMLL))

CCSSSS

Bin son : Nguyn Minh Thnh

Tp.HCM, 2010

Mc Lc

Bi 1 TNG QUAN V THIT K WEB ................................................................. 7

1.1. Cc khi nim c bn: ........................................................................................ 7

1.1.1. Web Tnh ................................................................................................. 7

1.1.2. Web ng ................................................................................................ 7

1.1.3. Mng Internet ........................................................................................... 8

1.1.4. Cc dch v c bn trn Internet .............................................................. 8

1.1.5. HTTP Hyper Text Transfer Protocol .................................................... 8

1.1.6. HTML Hyper Text Markup Language ................................................. 8

1.1.7. Webpage trang web .............................................................................. 8

1.1.8. Website .................................................................................................... 9

1.1.9. Homepage ................................................................................................ 9

1.1.10. Web Server .............................................................................................. 9

1.1.11. Tn min Domain Name Web Server Name ..................................... 9

1.1.12. Hosting ..................................................................................................... 9

1.1.13. URL Uniform Resource Location ...................................................... 10

1.1.14. Browser .................................................................................................. 10

1.2. Son Tho Trang Web ..................................................................................... 10

1.2.1. Chng trnh son tho .......................................................................... 10

1.2.2. t tn, lu & m tp tin ....................................................................... 10

1.2.3. Xem trang web sau khi son tho .......................................................... 11

Bi 2 GII THIU V HTML - XHML .................................................................. 12

2.1. nh ngha v HTML ....................................................................................... 12

2.2. Cu trc c bn ca mt trang Web ................................................................. 12

2.2.1. Doctype .................................................................................................. 12

2.2.2. Cy vn bn HTML ............................................................................... 15

2.2.3. Thit lp thuc tnh cho phn t ............................................................ 16

2.2.4. S khc nhau gia HTML v XHTML ................................................. 17

2.3. Cc k t c bit ............................................................................................. 18

Bi 3 HEAD ELEMENTS - CC PHN T U TRANG WEB ........................ 19

3.1. head .................................................................................................................. 19

3.2. base................................................................................................................... 19

3.3. link ................................................................................................................... 20

3.4. meta .................................................................................................................. 21

3.5. script ................................................................................................................. 22

3.6. style .................................................................................................................. 23

3.7. title ................................................................................................................... 24

Bi 4 CC PHN T CU TRC .......................................................................... 25

4.1. html .................................................................................................................. 25

4.2. body .................................................................................................................. 25

4.3. h1, h2, h3, h4, h5, h6 ........................................................................................ 26

4.4. p ........................................................................................................................ 26

4.5. blockquote ........................................................................................................ 27

4.6. br ...................................................................................................................... 28

4.7. hr ...................................................................................................................... 29

4.8. div ..................................................................................................................... 30

Bi 5 CC PHN T NH DNG K T - VN BN ...................................... 31

5.1. b ........................................................................................................................ 31

5.2. i ......................................................................................................................... 31

5.3. u ........................................................................................................................ 31

5.4. font ................................................................................................................... 31

5.5. big ..................................................................................................................... 32

5.6. strong ................................................................................................................ 32

5.7. small ................................................................................................................. 32

5.8. em ..................................................................................................................... 32

5.9. tt ....................................................................................................................... 33

5.10. abbr ............................................................................................................... 33

5.11. acronym ........................................................................................................ 33

5.12. basefont ......................................................................................................... 33

5.13. bdo ................................................................................................................ 33

5.14. blink .............................................................................................................. 34

5.15. center ............................................................................................................ 34

5.16. address .......................................................................................................... 34

5.17. cite................................................................................................................. 34

5.18. code ............................................................................................................... 34

5.19. var ................................................................................................................. 34

5.20. plaintext ........................................................................................................ 34

5.21. comment ....................................................................................................... 34

5.22. nobr ............................................................................................................... 35

5.23. strike ............................................................................................................. 35

5.24. sup ................................................................................................................. 35

5.25. sub ................................................................................................................. 35

5.26. dfn ................................................................................................................. 35

5.27. kbd ................................................................................................................ 35

5.28. pre ................................................................................................................. 36

5.29. marquee ........................................................................................................ 36

5.30. span ............................................................................................................... 37

Bi 6 TO DANH SCH ......................................................................................... 38

6.1. ul, li .................................................................................................................. 38

6.2. ol, li .................................................................................................................. 38

6.3. dl, dt, dd ........................................................................................................... 39

6.4. Danh sch lng ................................................................................................. 40

Bi 7 CHN HNH NH, MEDIA V LIN KT ................................................. 41

7.1. img ................................................................................................................... 41

7.2. embed ............................................................................................................... 41

7.3. object ................................................................................................................ 41

7.4. bgsound ............................................................................................................ 42

7.5. applet ................................................................................................................ 42

7.6. area ................................................................................................................... 43

7.7. a ........................................................................................................................ 43

Bi 8 CHN BNG .................................................................................................. 44

8.1. table, caption, th, tr, td ..................................................................................... 44

Bi 9 TO BIU MU - FORM .............................................................................. 46

9.1. Gii thiu ......................................................................................................... 46

9.2. nh ngha Form .............................................................................................. 46

9.3. Cc thnh phn trn Form ................................................................................ 46

9.3.1. Textbox hp vn bn .......................................................................... 46

9.3.2. Hidden thng tin n ............................................................................ 47

9.3.3. Password hp mt khu ...................................................................... 47

9.3.4. Checkbox hp kim ............................................................................ 47

9.3.5. Radio Button nt chn ........................................................................ 47

9.3.6. File Upload hp ti file ....................................................................... 47

9.3.7. Button - Nt lnh ................................................................................... 47

9.3.8. Combobox - hp danh sch 1 ................................................................ 48

9.3.9. Listbox hp danh sch nhiu .............................................................. 48

9.3.10. Textarea khung vn bn ...................................................................... 48

9.3.11. Submit Button nt gi d liu ............................................................ 48

9.3.12. Reset Button nt phc hi d liu ...................................................... 48

9.3.13. Mt vi v d .......................................................................................... 49

Bi 10 TO KHUNG - FRAME ............................................................................. 53

10.1. Thit k Frame .............................................................................................. 53

10.2. frameset ........................................................................................................ 53

10.3. frame ............................................................................................................. 53

10.4. noframe ......................................................................................................... 54

10.5. V d ............................................................................................................. 54

Bi 11 CHN B CC & T CHC WEBSITE .................................................. 56

11.1. T chc website ............................................................................................ 56

11.1.1. Cc tp tin HTML ca 1 Website .......................................................... 56

11.1.2. Trang ch ca 1 Website ....................................................................... 56

11.1.3. T chc lu tr 1 Website ..................................................................... 56

11.1.4. a ch tng i & a ch tuyt i. .................................................. 57

11.2. Chn b cc cho trang web .......................................................................... 57

11.2.1. phn gii mn hnh ........................................................................... 57

11.2.2. Ch mu ............................................................................................ 58

11.3. B cc cho trang web ................................................................................... 58

Bi 12 GII THIU V CSS (Cascading Style Sheet) ........................................... 60

12.1. Gii thiu ...................................................................................................... 60

12.2. Cc cch thit k CSS ................................................................................... 60

12.2.1. Thit k chung trong phn t ................................................................. 60

12.2.2. Nhng Style ........................................................................................... 60

12.2.3. Lin kt n file CSS ............................................................................. 61

12.3. Cc nh ngha CSS ...................................................................................... 61

12.4. Cc thuc tnh ............................................................................................... 64

12.4.1. Thuc tnh kch thc ............................................................................ 64

12.4.2. Thuc tnh l .......................................................................................... 64

12.4.3. Thuc tnh khung vin ........................................................................... 64

12.4.4. Thuc tnh b cc .................................................................................. 65

12.4.5. Thuc tnh danh sch ............................................................................. 65

12.4.6. Thuc tnh bng ..................................................................................... 66

12.4.7. Thuc tnh v mu sc v nn ................................................................ 66

12.4.8. Thuc tnh nh dng k t - vn bn ..................................................... 66

12.4.9. Thuc tnh v giao din ngi dng ...................................................... 67

12.4.10. Thuc tnh phn trang ......................................................................... 67

12.4.11. Thuc tnh ging ring cho FireFox ................................................... 67

12.4.12. Thuc tnh ging ring cho IE ............................................................ 67

12.5. M hnh nh dng phn t trong CSS ......................................................... 67

12.5.1. M hnh hp (box) ................................................................................. 67

12.5.2. Margin Collapsing (thu hp l) .............................................................. 68

12.5.3. Thit lp v tr ........................................................................................ 69

12.5.4. Thit lp hp ni (float box) .................................................................. 70

12.6. S dng hnh nh nn ................................................................................... 71

12.6.1. S dng nh nn c bn ......................................................................... 71

12.6.2. Box vin bo trn gc c nh kch thc ............................................... 72

12.6.3. Box vin bo trn gc c chiu cao thay i........................................... 72

12.6.4. Box vin bo trn gc c chiu rng v cao thay i ............................. 73

12.6.5. To bng cho khung nh ........................................................................ 74

12.6.6. To lin kt vi k thut rollover ........................................................... 75

12.6.7. To lin kt vi k thut pixy ................................................................. 75

12.6.8. To thanh menu dc vi k thut pixy ................................................... 76

12.6.9. To thanh menu ngang ........................................................................... 77

12.6.10. Layout 2 ct ........................................................................................ 78

12.6.11. Layout 3 ct ........................................................................................ 80

12.6.12. Layout 3 ct vi k thut Faux ........................................................... 81

Gio trnh HTML

Bin son Nguyn Minh Thnh 7

Bi 1 TNG QUAN V THIT K WEB

1.1. Cc khi nim c bn:

1.1.1. Web Tnh

Thng c xy dng bng cc ngn ng HTML, DHTML dng thit k cc

trang web c ni dung t cn thay i v cp nht. Thch hp vi c nhn, t chc,

doanh nghip va v nh mi lm quen vi mi trng Internet.

o u im:

Thit k ho p: Trnh by n tng v v phn m thut chng ta c th hon ton t do trnh by cc tng trn ton din tch trang.

Tc truy cp nhanh v khng mt thi gian trong vic truy vn c s d liu nh cc trang web ng.

Chi ph u t thp: Chi ph xy dng website tnh thp hn nhiu so vi website ng v khng phi xy dng cc c s d liu, lp trnh v chi

ph cho vic thu Hosting. . .

o Nhc im c bn:

Kh khn trong vic thay i v cp nht thng tin: Mun thay i v cp nht ni dung thng tin phi bit v ngn ng html, s dng c

cc chng trnh thit k ho, thit k web, cp nht file ln server.

Thng tin khng c tnh linh hot: Do ni dung trn trang web tnh c thit k c nh nn khi nhu cu v thng tin ca ngi truy cp tng cao

th thng tin trn website tnh s khng p ng c.

Kh tch hp, nng cp, m rng: Khi mun m rng, nng cp mt website tnh hu nh l phi lm mi li website.

1.1.2. Web ng

Web ng l thut ng c dng ch nhng website c c s d liu v c

h tr bi cc phn mm pht trin web.

o Vi web ng, thng tin hin th c gi ra t 1 c s d liu khi ngi dng truy vn ti mt trang web. Chng hn ng dng thng mi in t

(mt ca hng trc tuyn) trng by catalogue sn phm trn website hay

theo di kho hng, khi mt mt hng c giao, ngay lp tc nhng trang c

lin quan n sn phm phn nh s thay i ny.

o Web ng thng c pht trin bng cc ngn ng lp trnh tin tin nh PHP, ASP, ASP.NET, Java, CGI, Perl, v s dng cc c s d liu quan h

mnh nh Access, My SQL, MS SQL, Oracle

Gio trnh HTML


o Thng tin trn web ng lun lun mi v n d dng c thng xuyn cp nht thng qua vic s dng cc cng c cp nht ca cc phn mm

qun tr web . Thng tin lun c cp nht trong mt c s d liu v ngi

dng Internet c th xem nhng chnh sa ngay lp tc. V vy website

c h tr bi c s d liu l phng tin trao i thng tin nhanh nht

vi ngi dng Internet. iu d nhn thy l nhng website thng xuyn

c cp nht s thu ht nhiu khch hng ti thm hn.

o Tt c cc website Thng mi in t, cc mng thng tin ln, cc website ca cc t chc, doanh nghip hot ng chuyn nghip trn Net u s dng

cng ngh web ng. C th ni web ng l website ca gii chuyn nghip

hot ng trn mi trng Internet.

1.1.3. Mng Internet

Mng my tnh ton cu H thng mng ca cc mng. Tin thn ban u l

mng ARPANET(T chc Advanced Research Projects Agency) ca M sng lp

1969. Phc v trao i d liu gia cc trng i hc & B quc phng.

1.1.4. Cc dch v c bn trn Internet

WWW-Wold Wide Web: Dch v trao i,tm kim truy cp thng tin trn mng theo giao thc HTTP. c s dng thng qua trnh duyt Web

Email Eletronic Mail-Th in t: Dch v trao i cc thng ip cho nhau SMTP(Smple mail tranfer protocol) Pop3 (Post office protocol 3) c

qun l bi cc Mail server nh: [email protected] ,

[email protected] , [email protected]

FTP File transferprotocol Truyn ti tp tin : Dch v trao i tp tin gia cc my trn Internet thng c dng Download & Upload cc trang

web t ngi thit k n cc my ch thng qua cc chng trnh FTP nh

FTP Explorer, FlashFXP.

Chat Tn : Dch v cho php ngi dng trao i trc tuyn vi nhau qua mng internet bng vn bn, m thanh, hinh nh.Nh : AOL, Yahoo

messenger

1.1.5. HTTP Hyper Text Transfer Protocol

Giao thc dng giao tip vi cc trang Web.

1.1.6. HTML Hyper Text Markup Language

Ngn ng nh du siu vn bn dng thit k trang Web.

1.1.7. Webpage trang web

L mt tp tin vn bn son tho theo ngn ng HTML c phn m rng l

HTML hoc HTM.

mailto:[email protected]:[email protected]:[email protected]

Gio trnh HTML


1.1.8. Website

Chuyn khu Web tp hp cc trang web thuc 1 ch .

1.1.9. Homepage

Trang u tin-Trang ch ca 1 Website(Index.html, Index.htm, Default.htm . . .)

1.1.10. Web Server

My ch web-My tnh cu hnh mnh, lu tr cc trang Web kt ni thng

xuyn vi mng cho php cc my khc truy cp thng tin.Tn min Domain Name

Web Server Name

phn bit mi Web Server c mt a ch IP v c nh x bi 1 tn

(VD:www.vietnamnet.vn). c xem nh tn giao dch ca cng ty, t chc trn

Internet.

Tn min cp 1: Bao gm m quc gia nh :Vit Nam: .VN, Anh: .UK, M:

.US, Nht:.JP...) v 1 s lnh vc.

.com : Thng mi

.edu : T chc gio dc

.net : Cc mng thng tin

.info : Cc mng thng tin

.int : T chc quc t

.org : Cc t chc khc

.gov : T chc chnh ph

.mil : T chc qun s

Tn min cp 2: C th kt hp lnh vc vi m quc gia hnh thnh tn

min cp 2 nh www.tuoitre.com.vn . s hu 1 tn min phi tr chi ph hng

nm thng qua cc cng ty y quyn bn tn min.

1.1.12. Hosting

Khi hon tt website phi c ghi lu vo 1 webserver no th mi truy cp

c thng thng l cc server ca ISP (Nh cung cp dch v Internet hay n v

chuyn dng) . Ty theo dung lng, bng thng v mt s h tr m chi ph khc

nhau.

http://www.tuoitre.com.vn/

Gio trnh HTML


1.1.13. URL Uniform Resource Location

a ch truy cp ca trang Web, 1 tp tin trong Website

http://Webservername//File.html

Trang ch mc nh khng cn khai bo

VD: http://www.tuoitre.com.vn

Tc l: http://www.tuoitre.com.vn/Index.htm

1.1.14. Browser

Trnh duyt Web dng c v hin th cc trang Web. Ph bin:

InternetExplorer,Netscape,FireFox.

1.2. Son Tho Trang Web

1.2.1. Chng trnh son tho

Trang web l 1 tp tin vn bn khng nh dng, cha cc th (Tag). Vit bng

m ngun HTML trn chng trnh son tho vn bn khng nh dng nh:

NotePad. Ngoi ra, ngy nay c rt nhiu phn mm h tr thit k web, cho php

ngi thit k va thit k bng m HTML, va thit k vi giao din ha nh :

Microsoft Word, MS FrontPage, Dreamwaver, Visual Studio

Khi ng : Start/Program/Accessories/NotePad

Ghi ch: Nu s dng ch c du, th phi

Thit lp bng m Unicode cho trnh g VietKey, Unikey,

Chn Font Unicode trong trnh son tho (Format / Font Arial ,

Tahoma, . . .)

1.2.2. t tn, lu & m tp tin

Tp tin lu tr c phn m rng l: .htm hoc .html

http://www.tuoitre.com.vn/http://www.tuoitre.com.vn/Index.htm

Gio trnh HTML


Lu tp tin: Ti ca s son tho: File/SaveFilename: Tn.html (VD:

VD01.html)

Save as type: AllFilesEncoding: UTF-8 (Nu ni dung c du) Save

Lu li vi tn khc: Ti ca s son tho File/Save As

M tp tin son tho: Ti ca s son tho: File/Open

Chn tp tin cn m

Open

1.2.3. Xem trang web sau khi son tho

Cch 1: M th mc lu tr Double Click tp tin .htm

Cch 2: Khi ng trnh duyt (IE) File/Open

Chn Browser tm tp tin cn m Ok

Kt qu hin th

Gio trnh HTML


Bi 2 GII THIU V HTML - XHML

2.1. nh ngha v HTML

HTML l mt b cc m lnh logic (m lnh nh du) c t trong cc u

ngoc(< >), cc m lnh ny cu to nn s trnh by mt vn bn web v cc thng

tin cha trong n.

Vb : vn bn ny s c in m trong trnh duyt web

Nhng m HTML ny lun c t trong cp du nh hn () v

khng phn bit hoa thng. Tuy nhin, cc m s d c nhn ra trong trnh duyt

nu cc m c vit dng ch thng.

Cc phn t HTML lun c mt th (tag) m v mt th ng, phn bit nhau

bi du / bn trong du ngoc

Gio trnh HTML


ra phn t doctype v cho php bn chn trong mt ca s dialog loi vn bn m

bn mun to. Tuy nhin, nu bn khng s dng trnh bin son ca hng

WYSIWYG, bn c th tham kho danh sch cc loi doctype c trnh by bi

.. .

Phn t doctype c trnh by trong trang web theo mu sau:

Page title

Trong v d trn, doctype ch nh loi vn bn c trnh by da theo quy

tc ca m lnh HTML 4.01. Tuy nhin, bn cng c th thy loi XHTML 1.0 v 1.1

c ch nh tng t nh mu trn. C mt cht khc bit v c php gi hai chun

HTML v XHTML, cc bn c th xem xt chng .

Doctype Miu t

HTML 4.01 Strict bao gm cc

m nh u cu trc v ng

ngha, nhng khng cha cc m

th hin v i lp nh font,

framesets.

HTML 4.01 Transitional bao gm

cc m cu trc, ng ngha v th

hin (nh font) v c i lp

trong trong Strict, nhng khng

cha m Framesets.

HTML 4.01 Framesets tng t

HTML 4.01 Transitional nhng

cho php m framesets.

Gio trnh HTML


//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/

xhtml1-strict.dtd">

HTML 4.01 Strict, nhng cc m

HTML c vit theo dng XML.

XHTML 1.0 Transitional tng

t HTML 4.01 Transitional,

nhng cc m HTML c vit

theo dng XML.

XHTML 1.0 Frameset tng t

HTML 4.01 Frameset, nhng cc

m HTML c vit theo dng

XML.

XHTML 1.1 c nh dng li

trn chun XHTML 1.0 Strict,

nh vy cc lut cng theo

XHTML 1.0 Strict, tuy nhin cho

php module ha, tc l c th

thm cc module (v d, cung cp

Ruby h tr ngn ng Chinese,

Japan, Korea)

HTML 3.2 l mt doctype c,

khong cn c khuyn co s

dng.



dng.



dng.

Gio trnh HTML


2.2.2. Cy vn bn HTML

Mt trang web c th c xem nh l mt cy vn bn c th cha nhiu

nhnh trong . Sau khi khai bo loi ti liu (DOCTYPE), th ni dung mt vn bn

web c th hin di dng mt cy vn bn nh v d sau :

Nhn vo v d trn ta thy, html l th chnh cha hai th con l head v

body. Th head c hai nhnh con l meta v title. Th body l th cha cc th con

th hin ni dung cho trang web nh cc u (heading), cc on vn (paragraph)

v cc khi vn bn(blockquote).

Cu trc & ngha ca cc thnh t trong cy vn bn HTML :

phn u ca trang web, nh ngha cc ni dung sau :

Tiu cho vn bn web. Tiu ny c xut hin pha

trn thanh tiu ca trnh duyt web, hay tiu s c hin th

nu trang web c lu li trong mc Favorite hoc danh sch

Bookmark.

thit lp a ch gc cho vn bn web. a ch ny c th

c s dng gii quyt cc a ch khc c lin quan trong vn

bn.

ch nh mi quan h gia vn bn ny vi cc i tng

khc trong trang web.

cung cp cc thng tin nh t kha v miu t ca trang

web, dng cho cc b my tm kim ra trang web

chn cc on m lnh Javascript hoc VBScript

Gio trnh HTML


cha cc thng tin c nh ngha bng CSS

Cha cc phn t HTML miu t ni dung cho trang web.

2.2.3. Thit lp thuc tnh cho phn t

Mi phn t HTML u c cc thuc tnh thay i cch th hin ca n trn

trang web, thit lp thuc tnh cho mt phn t (nh trnh by trong phn gii

thiu), pha sau tn ca phn t trong th m, ta g tn thuc tnh, du bng v gi tr

ca thuc tnh theo sau.

V d : thit lp mu nn cho trang web, ta s thit lp mu cho thuc tnh

bgclolor trong th body (th body th hin ni dung trnh by cho trang web) nh sau:

M mu trong trang web s dng m RGB v th hin di dng s hexa (thp

luc phn). Di y l bng mt s m mu thng dng :

Mu M hexa

Trng #FFFFFF

en #000000

#FF0000

Xanh l #00FF00

Xanh dng #0000FF

ta #FF00FF

Lc lam #00FFFF

Vng #FFFF00

Xanh bin #70DB93

S c la #5C3317

Tm #9F5F9F

ng thau #B5A642

ng #B87333

Hng #FF6EC7

Cam #FF7F00

Gio trnh HTML


2.2.4. S khc nhau gia HTML v XHTML

XHTML l s b sung y hn cho HTML vi nhiu ty chn tt hn cho

vic th hin. Tuy nhin, vn c nhiu ngi s dng ngn ng HTML (mi nht l

HTML 5) v vn cho rng HTML l d s dng hn XHTML. V vy, ta cn xc nh

nhng im khc nhau chnh gia 2 chun ngn ng ny thun tin cho vic chn

la khi thit k :

XHTML kh hn HTML, trong XHTML c nhiu phn t hn trong ngn

ng HTML (nu s dng HTML 4 tr xung). V trong XHTML, cc

phn t bt buc phi c mt th m v mt th ng. V d : vn

bn trong XHTML , nhng trong HTML c th ch cn vn bn

trong HTML (ko cn th ng).

Trong XHTML, i vi nhng th trng (nhng th khng c ni dung

hay tham chiu n mt ngun ti nguyn no ), nh : img, link,

meta, th trong th phi c u gch ng /. V d : .

XHTML cho php chng ta s dng mt s nh nhng phn t trng, v

d nh ta c th s dng mt paragraph trng . iu ny khng th

lm c trong HTML.

Trong XHTML, cc th v cc thuc tnh phi c vit bng k t

thng. Trong HTML, ta c th s dng k t in hoa.

Tt c cc gi tr ca cc thuc tnh phi c du nhy kp "gi tr"

hoc nhy n 'gi tr'. V d : . Trong HTML, ta c th s dng nh

Trong XHTML, tt c cc thuc tnh u phi c th hin di dng

biu thc thuc tnh = "gi tr". Tuy nhin, trong HTML c mt s

thuc tnh khng cn gi.

V d : (HTML)

(XHTML)

Trong XHTML, ti th m phi c thuc tnh xmlns (XML

Namespace) nh sau : .

Tuy nhin, nu trong th html khng c thuc tnh xmlns, b my xc

nhn ca W3C cng khng bo li.

Trong XHTML, ta c th s dng cc k t c bit. V d, ta c th s

dng k t & trong XHTML, nhng trong HTML ta phi s dng phn t

"&"

Trong XHTML, cc ngn ng s dng trong vn bn phi c khai bo

bi thuc tnh xml:lang thay v lang nh trong HTML.

Gio trnh HTML


Ngoi nhng im trn, XHTML cn khc HTML trong vic bt cc s kin

trong vn bn cng nh mt s script nh sau :

Document.write() v document.writeln() khng cn s dng trong

XHTML.

Thuc tnh innerHTML cng b b qua.

Cc s kin trong XHTML c th hin nh sau : onClick, onSubmit

thay v onclick v onsubmit nh trong HTML.

2.3. Cc k t c bit

Vn bn web cng tng t vn bn in, c mt s k t c bit khng c trn

bn phm hoc khng c th hin trn trang web nu g k t thng, v vy, ta

phi dng cc m c bit chn.

K t M tn M s

TM

" " "

Khong trng

& &

*

> >

< <

Gio trnh HTML


Bi 3 HEAD ELEMENTS - CC PHN

T U TRANG WEB

3.1. head

Chc nng

- Phn t head c dng chn cc phn t thng tin u trang web.

Thuc tnh

- profile : thuc tnh dng ch nh file, hay thng tin lut l b my

phn tch da vo phn tch cy html. Tuy nhin, thuc tnh ny

thng c b qua, do cc b my thng da vo cc chun ca W3C

phn tch tran web.

3.2. base

Chc nng

- Phn t base c chc trong th head (phn u ca trang web) dng

nh ngha URL ngun cho tt c cc lin kt v qun trnh chuyn d liu

trn form trong mt trang.

- Vi d : thit lp a ch http://www.saoviet.edu.vn l a ch ngun cho tt

c cc a ch trong vn bn.

- Cc a ch khc trong vn bn ch cn s dng a ch ng nh sau : Trang ch

y :

Trang ch

Thuc tnh

- href : thit lp a ch nn

href = "uri"

- target : thit lp ca s ch, frame ch m a ch.

Target = "_blank | frame name | _parent | _seft | _top"

_blank : m ca s mi

http://www.saoviet.edu.vn/http://www.saoviet.edu.vn/

Gio trnh HTML


frame name : ti frame c ch nh

_parent : ti ca s / frame cha ca s / frame hin ti

_seft : ti ca s / frame hin ti

_top : ti ca s hin ti

3.3. link

Chc nng :

- Phn t link c dng to lin kt gia vn bn ang tham chiu vi

mt ngun ti nguyn bn ngoi.

vd :

- Phn t link thng c s dng to lin kt vi cc file CSS cho vn

bn nh v d trn, hoc ch nh quan h gia cc trang web.

- Th link c t trong th head v khng gii hn s lng.

Thuc tnh

- href : ch nh v tr ca ti nguyn c lin kt.

href = "uri"

- charset : ch nh ngn ng c s dng trong vn bn hay ti nguyn

c lin kt trong thuc tnh href.

charset = "character encode scheme"

vd : ch nh vn bn ti nguyn c lin kt trnh by bng ting Nht

- media : ch nh loi thit b s dng. Ti nguyn c lin kt ch c

hin th khi trang web c m bng thit b ch nh.

media=" { all | aural | braille | embossed | handheld

| print | projection | screen | tty | tv } " Vd :

- rel : ch nh mi quan h gia ti nguyn c nh km vi trang web.

rel=" { alternate | bookmark | chapter | contents |

copyright | glossary | help | index | next | prev |

section | start | stylesheet | subsection | icon |

alternate | license | other } "

- title : tiu cho cc style.

title = tn style

Gio trnh HTML


vd1 : lin kt stylesheet cho trang web

vd2 : to icon cho trang web

Cc style s xut hin trn trnh duyt khi m trang web nh vd 1 :

3.4. meta

Chc nng :

- Phn t meta c dng cung cp thng tin v ni dung trong vn bn

web, thng tin ny s gip cho trnh duyt th hin trong muc favorite

hoc gip cho ngi dng tm kim c website ca bn thng qua cc

t kha (keyword) v cc miu t (discription) trong phn t meta.

Thuc tnh :

- Content : ni dung ca phn t meta ang nh ngha. Gi tr ca thuc

tnh Content khng c nh, ty vo gi tr m ngi thit k mun gn

nh : tm tt ca vn bn, cc t kha, tn ngi, hoc cc chui k t

- Http-equiv : thuc tnh dng cu hnh mt s tu chn cho trang web

v gi nhng cu hnh ti webserver. Thng thng, thuc tnh ny

thng c dng qun l b nh cache, thi gian refresh trang web,

mc an ton cho ni dung trang web.

Cc gi tr ca thuc tnh http-equiv :

Gio trnh HTML


Content-type

Content-length

Description

Expires

Keywords

Pic-label

Refresh

Reply-to

Last-Modified

Location

Set-Cookie

WWW-

Autheticate

Date

- Name : thuc tnh name l mt bn tm tt tht n gin nhng ni dung

trong content. Khi thuc tnh name c s dng th s khng c thuc

tnh http-equiv trong phn t meta.

vd : thit lp t kha, miu t ni dung cho trang web :

vd : thit lp thi gian refresh trang web :

vd : thit lp b m ha k t cho trang web la UTF-8

3.5. script

Chc nng :

- Phn t script c s dng nhng cc on m lnh c thc thi

pha client. Nhng on m lnh ny c th c vit bng ngn ng

JavaScript hoc VbScript (ch trong IE). y l nhng on m lnh c

thi pha client nn thi gian thc thi s nhanh hn nhng on m lnh

thc thi pha server.

- Thng thng cc on m lnh c trong 2 th ,

tuy nhin cng c trng hp cc on m lnh c vit bn ngoi v

lu di dng file .js, sau s c nhng vo trong trang web.

Thuc tnh :

- Charset : thit lp b m ha k t trong script.

charset="character encoding scheme"

vd :

- Language : thit lp ngn ng c vit trong script.

Language = "string"

Gio trnh HTML


Vd:

Cc gi tr ca thuc tnh language :

javascript, javascript 1.x, jscript

vbscript, vbs, vb

c#, php

- src : ch nh file .js ben ngoi c nhng vo trong trang web

scr = "uri"

vd:

- type : ch nh loi MIME (gi tin m rng) cho on script.

Type = "MIME type"

Cc gi tr thng dng :

type/javascript : ch nh loi MIME l vn bn th bao gm cc

m javascript.

application/javascript : ch nh loi MIME l cc ng dng bng

ngn ng javascript.

3.6. style

Chc nng :

- Phn t stye c dng nh ngha cc kiu nh dng xut (style) cho

cc phn t khc, nh nh dng mu sc, font ch,

Thuc tnh :

- Media : ch nh loi thit b c dng nh dng xut.

media=" { all | aural | braille | embossed | handheld

| print | projection | screen | tty | tv } "

vd : nh ngha 2 kiu style cho 2 loi thit b khc nhau

#nav {background:#006; padding:2em;}

#nav {display:none}

- Type : nh ngha kiu MIME(tng t script)

Type = "MIME type"

Gio trnh HTML


Cc gi tr thng dng :

Text/css : ch nh kiu gi tin l l cc vn bn th cha m css

3.7. title

Chc nng :

- Phn t title dng nh ngha tiu cho trang web, tiu ny s xut

hin trn thanh tiu ca trnh duyt web, hoc trong mc favourite khi

trang web c lu li.

vd :

101 ways to skin a cat - the tutorial!

Gio trnh HTML


Bi 4 CC PHN T CU TRC

4.1. html

Chc nng :

- Phn t html dng cha cc phn t thit k ni dung cho trang web.

Phn t ny c 1 thuc tnh xmlns duy nht (theo chun xhtml), tuy nhin

thuc tnh ny c th b qua.

4.2. body

Chc nng :

- Phn t body dng cha ni dung cho trang web. Cc phn t thit k

ni dung cho trang web c trnh by bn trong phn t ny.

vd :

101 Ways to make a paper aeroplane

Let's start with the basics

Thuc tnh :

- marginheight : thit lp khong cch trn v di ca vn bn vi ca s

trnh duyt.

- marginwidth : thit lp khong cch tri v phi ca vn bn vi ca s

trnh duyt.

- topmargin / bottommargin : thit lp khong cch trn / di ca vn

bn vi ca s trnh duyt.

- leftmargin / rightmargin : thit lp khong cch tri / phi ca vn bn

vi ca s trnh duyt.

- alink : thit lp mu cho lin kt ang active ( khi ngi dng click vo

lin kt)

- link : thit lp mu cho cc lin kt cha c click.

- vlink : thit lp mu cho cc lin kt c click.

vd :

- text : thit lp mu cho tt c cc vn bn trong trang web.

http://www.w3.org/1999/xhtml

Gio trnh HTML


vd :

- bgcolor : thit lp mu nn cho trang web.

vd :

- background : thit lp nh nn cho trang web.

vd :

4.3. h1, h2, h3, h4, h5, h6

Chc nng :

- Phn t hx (heading) dng nh dang xut cho vn bn dng lm tiu

hoc nhng ni dung vn bn quan trng. Cc vn bn c t trong

cc phn t ny s c in m v c ch ln ty theo tng mc. C 6

mc khc nhau, trong mc cao nht l h1 v gim dn xung h6.

Thuc tnh :

- align : thit lp cn l. Cc gi tr ca align : left, right, center, justify.

vd :

Our amazing

range of services

4.4. p

Chc nng :

- Phn t p c dng xy dng mt khi vn bn, mt on vn.

vd :

Gio trnh HTML


So, having failed miserably to manage something as

simple as "order a breakfast and pay for it," we set

about our next task: submitting a visa application for

our impending visit to Thailand. Heaven help us! We're

not normally scatty like this,so we really must have

needed that breakfast!

Thuc tnh :

- align : cn l cho on vn. Cc gi tr : left, right, center, justify.

Starter: Fruit Salad

4.5. blockquote

Chc nng :

- Phn t blockquote dng nh du mt on vn c trch dn t mt

ngi, mt vn bn hay mt ngun no khc. on vn c t trong

phn t blockquote s c trnh by tht vo mt khong cch.

vd :

It's missing alt text, so it's difficult to

determine what it's supposed to mean. Presumably "oooh,

there's been a global ecological catastrophe and weve

got the last four leaves in the world and we've

patented the DNA". Or they're rubbing ganja leaves

together to extract the resin, but are too stupid to

recognise Marijuana so are trying it with willow or

silver birch.

Vn bn c xut ln trnh duyt :

Thuc tnh :

- cite : ch nh a ch ngun ca on vn c trch dn. Tuy nhin thuc

tnh ny thng t c s dng.

Gio trnh HTML


4.6. br

Chc nng :

- Phn t br c dng to ra mt ngt xung dng.

vd :

Vn bn c th hin trong trnh duyt :

Thuc tnh :

- clear : dng xa cc canh l trc , v cho ni dung bn di phn

t br nm di phn t c canh l trc . Cc gi tr : all, left, right,

none.

vd :

Th hin trn trnh duyt

Gio trnh HTML


4.7. hr

Chc nng :

- Phn t hr to ra mt ngt xung dng v th hin mt ng k ngang

ngay vi tr ngt.

Thuc tnh :

- color : thit lp mu cho ng k ngt.

color = "color"

vd :

- noshade : thit lp b hiu ng bng cho ng k ngt.

noshade = "noshade"

vd :

- size : thit lp kch thc cho ng k ngt.

Gio trnh HTML


size = "number"

vd :

- width : thit lp chiu di cho ng k ngt.

width = "number | percentage"

vd :

4.8. div

Chc nng :

- Phn t div l phn t cp khi. Phn t ny khng c ngh v ni

dung (khng ging nh phn t p c ngha l mt on vn

paragraph). Phn t div c dng ch nh mt phn vn bn c cu

trc v gn ln phn vn bn nhng nh dng xut s dng CSS.

Thuc tnh :

- align : thit lp canh l. Cc gi tr : left, right, center, justify.

Gio trnh HTML


Bi 5 CC PHN T NH DNG K

T - VN BN

5.1. b

Chc nng :

- Phn t b (bold) c dng to vn bn c in m. Phn t ny

khng c thuc tnh.

5.2. i

Chc nng :

- Phn t i (italic) c dng to vn bn c in nghing. Phn t ny

khng c thuc tnh.

5.3. u

Chc nng :

- Phn t u (underline) c dng to ng gch di cho on vn

bn. Phn t ny khng c thuc tnh.

5.4. font

Gio trnh HTML


Chc nng :

- Phn t font c dng thit lp kiu ch cho vn bn c t trong

phn t ny.

Thuc tnh :

- face : thit lp b font cho vn bn, u tin theo th t t tri sang phi.

- size : thit lp kch thc cho vn bn.

5.5. big

Chc nng

- Phn t big c dng tng kch thc ca vn bn ln 1 n v (mc

nh c 7 n v kch thc).

5.6. strong

Chc nng :

- Phn t strong c dng in m vn bn (tng t nh phn t b)

5.7. small

Chc nng

- Dng gim kch thc ca vn bn xung 1 n v.

5.8. em

Gio trnh HTML


Chc nng :

- To vn bn c in nghing (kiu nhn mnh) tng t phn t i.

5.9. tt

Chc nng :

- To vn bn kiu ch my in tn (teletype)

5.10. abbr

Chc nng :

- To tooltip cho cc on vn bn

5.11. acronym

Chc nng :

- To tooltip cho cc on vn bn (tng t abbr).

5.12. basefont

Chc nng :

- Thit lp kch thc ch chung cho vn bn web.

Thuc tnh :

- Size : chn kch thc cho vn bn.

5.13. bdo

Chc nng :

- nh hng xut cho vn bn t tri qua phi hay ngc li.

Thuc tnh :

- dir : hng xut (ltr left to right, rtl right to left)

Gio trnh HTML


5.14. blink

Chc nng :

- To hiu ng ch nhp nhy.

5.15. center

Chc nng :

- Canh gia cho mt on vn bn.

5.16. address

Chc nng :

- To on vn bn a ch (vn bn c in nghing theo kiu a ch).

5.17. cite

Chc nng :

- To on vn bn c tham chiu n ngun ti nguyn bn ngoi (vn

bn c in nghing theo kiu ch thch).

5.18. code

Chc nng :

- To cc on vn bn trch dn m lnh lp trnh.

5.19. var

Chc nng :

- To cc on vn bn trch dn cc bin d liu, cc gi tr.

5.20. plaintext

Chc nng :

- Vn bn c hin th b qua tt c cc nh dng trong HTML.

5.21. comment

Chc nng :

Gio trnh HTML


- To cc on vn bn ch thch khng xut ln web (thng phn t ny

t c s dng, c th s dng mt phn t khc )

5.22. nobr

Chc nng :

- Gi cc on vn bn nm trn 1 dng, vn bn s b che khut khi chiu

rng ca trnh duyt khng & hin 2 thanh cun.

5.23. strike

Chc nng :

- To mt ng k ngang qua on vn bn

5.24. sup

Chc nng :

- To hiu ng ch s trn cho vn bn.

vd :

5.25. sub

Chc nng :

- To hiu ng ch s di cho vn bn.

5.26. dfn

Chc nng :

- To mt on vn bn mang tnh cht l mt nh ngha (on vn bn

c in nghing).

5.27. kbd

Gio trnh HTML


Chc nng :

- To mt on vn bn kiu nh my ch.

5.28. pre

Chc nng :

- Gi cc khong trng quan trng trong on vn bn (mc nh trnh

duyt ch th hin khong trng u tin).

5.29. marquee

Chc nng :

- To hiu ng chuyn ng.

Thuc tnh :

- align : canh l

- behaviour : kiu chuyn ng

- direction : hng chuyn ng (ginh cho chuyn ng scroll)

- loop : s ln lp li

- bgcolor : mu nn

- height : chiu cao

- width : chiu rng

- hspace : khong cch t bin n ni dung theo chiu ngang

- vspace : khong cch t bin n ni dung theo chiu cao

- scrollamount : s ln cun

- scrolldelay : thi gian tr

Gio trnh HTML


5.30. span

Chc nng :

- Phn t span c dng bao mt on vn bn v p dng cc nh

dng cn thit cho on vn bn . Phn t span kh ging vi div,

nhng div c dng cp ln hn, span thng c dng cho

1on vn bn nh.

Gio trnh HTML


Bi 6 TO DANH SCH

6.1. ul, li

Chc nng

- To danh sch ch mc khng c th t.

Thuc tnh

- : thay i kiu dng ch mc cho tt c cc mc.

- : thay i kiu dng ch mc cho 1 mc c ch

nh.

- Cc gi tr ca type : circle, disc, square.

6.2. ol, li

Chc nng

- To danh sch ch mc c th t.

Thuc tnh

- : thay i kiu dng ch mc cho tt c cc mc.

Gio trnh HTML


- : thay i kiu dng ch mc cho 1 mc c ch

nh.

- Cc gi tr ca type : 1, a, A, I, i.

- : gi tr khi u

- : gi tr ca ch mc ch nh v cc mc sau .

6.3. dl, dt, dd

(khi to danh sch)

(nh ngha mc chnh)

(miu t mc chnh)

Chc nng

- To danh sch ch mc t nh ngha.

Gio trnh HTML


6.4. Danh sch lng

Ta c th k hp cc th ol, ul, li to ra mt danh sch cc ch mc lng

nhau.

vd :

Gio trnh HTML


Bi 7 CHN HNH NH, MEDIA V

LIN KT

7.1. img

Chc nng

- Chn hnh nh vo vn bn web

Thuc tnh

- alt : ni dung thay th khi hnh nh khng th load ln web.

- height : nh chiu cao cho hnh khi xut ln web.

- Width : nh chiu rng cho hnh khi xut ln web.

- src : ng dn hnh nh.

- align : canh l cho hnh nh.

- border : thit lp khung vin cho hnh nh.

- hspace, vspace : khong cch chiu ngang v chiu rng.

7.2. embed

Chc nng

- Chn cc tp tin media vo vn bn web

Thuc tnh

- hidden : n / hin tp tin.

- pluginspage : a ch ngun plugin c dng c tp tin.

vd :

7.3. object

Chc nng

Gio trnh HTML


- Chn cc tp tin media vo vn bn web (tng t embed)

vd : nhng hnh nh :

vd : nhng file flash :

Hoc

vd : nhng file word :

7.4. bgsound

Chc nng

- Chn m thanh nn cho trang web.

Thuc tnh

- balance : ch cn bng m thanh hai bn.

- volumn : m lng khi pht

7.5. applet

Gio trnh HTML


Chc nng

- Nhng cc ng dng java.

7.6. area

Chc nng

- To ra mt vng nng (hotspots) da vo cc ta .

7.7. a

Chc nng

- To ra cc lin kt trn trang web.

- Cc loi lin kt :

o Lin kt trong trang

vd :

lin h

o Lin kt trong cng 1 webserver

vd :

lin h

o Lin kt khc webserver

vd :

Tui tr

o Lin kt a ch mail

vd :

Lin h

- Dng nh lm lin kt

- Lin kt n 1 tp tin download :

vd :

download file nhac

Gio trnh HTML


Bi 8 CHN BNG

8.1. table, caption, th, tr, td

tiu bng

(khi to 1 dng)

tiu ct

ni dung ct

Thuc tnh

- bgcolor : mu nn

- background : hnh nn

- align : canh l theo chiu ngang

- valign : canh l theo chiu dc

- rowspan : c cao n dng

- colspan : c rng n ct

- width : chiu rng

- height : chiu cao

- border : ln ca khung vin

- bordercolor : mu khung vin

- cellpadding : khong cch t ni dung n khung vin

- cellspacing : khong cch gia cc

- rules : thit lp khung vin bn trong bng, cc gi tr (rows, cols, all,

none, groups)

vd :

Work Contact Points

Name

Email

Phone

Floor/Block

Gio trnh HTML


Bill

[email protected]

345678

3/C

Jane

[email protected]

777444

Alison

alison@megacorp

888652

Kt qu :

Gio trnh HTML


Bi 9 TO BIU MU - FORM

9.1. Gii thiu

Form Biu mu l mt k thut cho php ch trang web giao tip vi ngi

truy cp. Trn trang web ngi dng c th c yu cu tr li mt cu hi, cho 1

kin, chn mt mc trong danh sch nh trc . . . ch trang web s tip nhn v x l

thng tin y.

Cu trc tng qut

Ni dung biu mu

Nt gi d liu

9.2. nh ngha Form

Dng 1: Ch trnh by khng gi d liu

Cc i tng trong Form

Dng 2: Thng tin t Form chuyn cho a ch Mail

Cc i tng trong Form

Dng 3: Thng tin t Form chuyn ln Webserver

Cc i tng trong Form

9.3. Cc thnh phn trn Form

9.3.1. Textbox hp vn bn

Thuc tnh :

- size : kch thc ca textbox, mc nh l 20 k t

- maxlenght : xc nh kch thc ti a textbox c th nhp

- name : tn textbox

Gio trnh HTML


- value : gi tr (ni dung) trong textbox.

9.3.2. Hidden thng tin n

Thuc tnh :

- name : tn textbox

- value : gi tr (ni dung) trong textbox.

9.3.3. Password hp mt khu

Thuc tnh : (tng t textbox)

9.3.4. Checkbox hp kim

Thuc tnh :

- name : tn checkbox

- value : gi tr ca checkbox (true, false)

- checked : thit lp gi tr chn cho checkbox.

9.3.5. Radio Button nt chn

Thuc tnh :

- name : tn radio, cc radio cng 1 tn s thuc cng 1 group nhng cc

value s khc nhau

- value : gi tr ca radio (text hoc number)

- checked : thit lp gi tr chn cho checkbox.

9.3.6. File Upload hp ti file

Thuc tnh :

- name : tn hp ti.

- value : ng dn ca file c chn.

9.3.7. Button - Nt lnh

Thuc tnh :

- value : tiu trn nt lnh.

Gio trnh HTML


9.3.8. Combobox - hp danh sch 1

ty chn 1

ty chn 1

ty chn 1

Thuc tnh :

- size : ch nh s ty chn c hin th (mc nh l 1)

- value : gi tr ca tng ty chn

9.3.9. Listbox hp danh sch nhiu

ty chn 1

ty chn 1

ty chn 1

Thuc tnh :

- size : ch nh s ty chn c hin th (n : mt gi tr nguyn)

- value : gi tr ca tng ty chn

- multiple : cho php chn nhiu gi tr

9.3.10. Textarea khung vn bn

Thuc tnh :

- rows : s dng

- cols : s ct

- wrap : thit lp bao bc vn bn. Cc gi tr : off, hard, physical, virtual.

9.3.11. Submit Button nt gi d liu

Thuc tnh :


9.3.12. Reset Button nt phc hi d liu

Thuc tnh :


Gio trnh HTML


9.3.13. Mt vi v d

Form ng nhp

NG NHP DIN N

Tn ng nhp:

Mt khu:

Form tm kim

Gio trnh HTML


NG GP KIN

H v tn:

Ni dung gp :N

Nhng mc bn thng quan tm trn Internet :

Gii

tr

Gio trnh HTML


Gio trnh HTML


Trang web thm d kin

PHIU THM D KIN

Tn ng nhp:

Gii tnh :

Nam

N

Mt khu:

S thch ca bn

Truy cp Internet c sch bo

Xem Tivi Tham quan du lch

Do ph & Shopping

Nhng mc bn thng quan tm trn Internet

Tin tc

Gii tr

Gc hc tp

Cc mc khc

Ni dung gp website tt hn

Gio trnh HTML


Bi 10 TO KHUNG - FRAME

10.1. Thit k Frame

L 1 k thut chia trang web thnh nhiu khung, mi khung hin th 1 trang

HTML.

Khng s dng th Body khi thit k khung.

. . . . . . . . . . . . .

Tr cc ct, Tr cc dng:

+ Kch thuc tuyt i tnh theo pixel

+ % kch thc tng i theo ca s trnh duyt.

url: a ch tp tin hin th trong khung.

Ghi ch : Cho php thit k khung lng nhau

10.2. frameset

Chc nng

- Khi to b khung

Thuc tnh

- rows : s dng

- cols : s ct

- frameborder : gi tr yes/no, ch nh frame c vin hay khng.

- framespacing : khong cch gia cc khung.

- border : ln ca khung vin.

- bordercolor : mu khung vin.

10.3. frame

Chc nng

- Gn ni dung cho tng khung

Thuc tnh

- src : ngun d liu cho khung

- name : tn khung

- marginwidth : l ngang cho khung

Gio trnh HTML


- heightwidth : l dc cho khung

- scrolling : hin th thanh cun

- noresize : khng cho php thay i kch thc khung

10.4. noframe

Chc nng

- Khng hin th ni dung ln khung.

10.5. V d

To frame 2 khung :

Gio trnh HTML


To frame 3 khung

Gio trnh HTML


Bi 11 CHN B CC & T CHC

WEBSITE

11.1. T chc website

11.1.1. Cc tp tin HTML ca 1 Website1 Website bao gm rt nhiu trang

Web (tp tin HTML).

Khi lu tr phi t chc c cu trc thun tin trong qun l, iu

chnh v sau.

Khi a Website ln WebServer c cp 1 a ch (Domain Name) v 1

th mc.

11.1.2. Trang ch ca 1 Website

Trang ch (Home page) l c np khi truy cp m khng r tp tin no

(Ch nhp URL ca 1 Website)

Thng qui nh l: index.htm,default.htm,home.htm

VD: Truy cp: http://www.tuoitre.com.vn

Ngha l: http://www.tuoitre.com.vn/Index.htm

11.1.3. T chc lu tr 1 WebsiteT chc Site 1 th mcTt c cc tp tin

HTML v cc tp tin khc u t trong cng 1 th mc.

Thun li cho Website nh, t tp tin, khng cn quan tm n ng

dn.

T chc Site th mc theo chc nng

Bn trong th mc chnh, t chc cc th mc con cha cc tp tin c

ni dung lin quan vi nhau.

Ti th mc chnh ch cha tp tin ch mc v cc hnh nh cn thit.(th

mc chnh cha trang ch, mi th mc con l 1 hoc 1 nhm cc trang

con)

T chc Site th mc theo kiu tp tin

Bn trong th mc chnh, t chc cc th mc con cha cc tp tin cng

kiu.

+ Th mc chnh cha trang ch,

+ 1 th mc con cha cc trang HTML,

+ 1 th mc con cha cc tp tin hnh nh.

+ 1 th mc con ch cc tp tin m thanh . . . .)

Thun li s dng chung tp tin, d thay th b sung cc tp tin vo site.

T chc Site hn hp

http://www.ngoisao.net/http://www.tuoitre.com.vn/Index.htm

Gio trnh HTML


Kt hp Cch t chc Site theo th mc chc nng v Cch t chc Site

theo kiu tp tin.

11.1.4. a ch tng i & a ch tuyt i.

a ch tuyt i

- Khi tham chiu n 1 tp tin phi ghi y a ch URL.

- http://ServerName/ng dn/ Tn tp tin

VD: http://vietnamnet.vn/Tinkinhte/quocte/tin07.html

a ch tng i.

- Khi tham chiu n 1 tp tin cng th mc tp tin chnh: Tn tp tin

- Khi tham chiu n 1 tp tin khc th mc tp tin chnh: ng

dn/Tn tp tin

Ghi ch: S dng ../ ch th mc cp trn th mc cha tp tin chnh:

VD:

S ghi: ../../Images/Logo.jpg

11.2. Chn b cc cho trang web

11.2.1. phn gii mn hnh

- phn gii ca mn hnh quyt nh rt nhiu n vic hin th trang

web ln trnh duyt.

- Khi thit k trang web, chng ta phi

chn mt kch thc chun cho trang

web ca mnh. Hin nay, a s cc mn

hnh u hin th phn gii

1024x768.. Tuy nhin, cng cn mt s

mn hnh nh vn th hin phn

gii 800x600. V vy, chng ta phi

chn mt phn gii thch hp nht

cho trang web ca mnh, v c a s

ngi dng s dng.

Tp tin HTML

Tp tin hnh nh tham

chiu: Logo.jpg

http://vietnamnet.vn/Tinkinhte/quocte/tin07.html

Gio trnh HTML


11.2.2. Ch mu

- Vic chn hnh nh theo cc ch mu khc nhau quyt nh n vic

th hin trang web nhanh hay chm. Mt hnh nh c th th hin nhiu

ch mu khc nhau, tuy nhin, khi ch mu cao hnh nh s rt

p nhng km theo l dung lng s ln v vic th hin n cng chm

nh, v ng li, mt hnh nh ch mu thp th hnh nh s ko c

r nt, tuy nhin dung lng ca hnh s nh v tc hin th cng s

nhanh hn.

- Cc ch mu :

16 mu

256 mu

16 bits

24 bits

32 bits

11.3. B cc cho trang web

Mt trang web c bt u t gc trn bn tri, ko di qua phi v xung di

khng gii hn, C ngha l mt trang web c chiu di v chiu rng khng xc nh.

Cc iu khin di chuyn trang nn t pha trn bn tri v pha di bn phi

ca trang d di chuyn. Hoc ta cng c th to mt menu iu khin pha bn tri

hoc phi. Cc menu di chuyn phi d s dng, v ch nn click 3 n 5 ln l n

c trang cn thit. Cc di chuyn cng d dng s to cho ngi dng cm gic d

s dng.

Khng nn ngi xem phi di chuyn cun trang web theo chiu ngang

xem, chnh v vy kch thc ca trang web nn l 800 hoc 1024 l hp l (va vi

phn gii ph bin nht ca cc mn hnh).

S dng bng hoc div iu khin b cc cho trang web, cc b tr trn web.

Nn to mt bng hoc 1 div vi kch thc ln nht lm khung cho trang web. Trong

ta s c cc b tr cho cc iu khin bng cc table hay div pha trong. Khung

trang web c th c t pha bn tri hoc ngay gia trang.

Gio trnh HTML


Nn c cc khong trng gia cc khung vin. gip cho ngi dng d c.

Kch thc chun cho vn bn trong trang web l 10 (ngoi tr cc tiu & cc mc

c bit). Tuy nhin, ta cng nn c cc kch thc khc nhau cho vn bn trnh

nhm chn.

Hiu ng nhp nhy ch nn ng dng vo cc on vn bn m ni dung thay

i tun t. Vn bn nn c s dng hp l gia ch hoa v ch thng, mt vn

bn qu nhiu ch in hoa s rt kh c.

Khi quyt nh chn hnh nn cho trang web, ta chn hnh nn va vi kch

thc ca trang web, v hnh nn trang web s c lp li cho ht khung hnh ca

trnh duyt.

Trn trang web nn c thng tin v c nhn hoc n v s dng ngi c c

th lin lc. Thng tin lin lc c th ty tng a phng, hoc theo nh dng quc

t.

Gio trnh HTML


Bi 12 GII THIU V CSS (Cascading

Style Sheet)

12.1. Gii thiu

CSS l mt tnh nng cng thm cho HTML. Ngi thit k trang web c th to

ra nhiu ty chn hn cho vic th hin trang web v qun l cc mu thit k tt hn.

M hnh CSS :

12.2. Cc cch thit k CSS

C 3 cch thit k mt trang web :

o Thit k chung trong phn t

o Nhng Style

o Lin kt n file CSS

12.2.1. Thit k chung trong phn t

y l phng thc thit k u tin cho trang web. Ta s s dng thuc tnh

Style trong cc phn t HTML nh dng style cho cc phn t.

vd : vn bn

12.2.2. Nhng Style

Khi thit k trang web, ta s dng phn t style nh ngha cc mu.

element{color : value;}

Gio trnh HTML


12.2.3. Lin kt n file CSS

nh ngha cc style mt file ring bit v c lu li di dng file *.css, file

ny s c lin kt vo trang web qua phn t link.

file style.css

element{

property : value;.

}

file index.html

Style Sample

Hoc

Style Sample

@import url(style.css);

12.3. Cc nh ngha CSS

nh ngha cho tt c cc phn t HTML.

*{

property : value;

}

nh ngha cho 1 phn t HTML

Element{

property : value;

}

Gio trnh HTML


Nu bn mun to ra cc nh dng khc nhau cho cng mt phn t, hay mun

chia s mt nh dng cho nhiu phn t khc nhau, ta s nh ngha cc style di

dng class (lp nh dng ring). Sau , nhng cc nh dng vo trong trang web

qua thuc tnh class ca cc phn t.

o nh ngha mt class :

.class1{

property : value;

}

o Nhng class

nh ngha class cho mt phn t

Element.class{

property : value;

}

nh ngha class cho mt phn t, c mt thuc tnh c gi tr c ch nh

Element.class[property^=value] {

property : value;

}

Cc php so snh = (equal), ^=(begin with), ~= (contain space-separated),

*=(contain) , |= (begin with), $= (file what)

Ngoi ra, nu ta mun nh dang ring cho element c id ring no , ta s nh

ngha style di dng id ring, v trong trong web, phn t no mun c nh dng ta

s t id cho phn t tng t id ca style.

o nh ngha mt id :

#id1{

property : value;

}

o Nhng class

nh ngha id cho mt phn t

Element#id{

property : value;

Gio trnh HTML


}

Nhm nh ngha

Element1, Element2 {

property : value;

}

Class# Element1, Class#Element2 {

property : value;

}

nh ngha cho cc phn t con

Element1 Element2 {

property : value;

}

nh ngha cho cc phn t con ngay sau

Element1>Element2 {

property : value;

}

nh ngha cho mt phn t k ngay sau

Element1+Element2 {

property : value;

}

nh ngha cho cc phn t k ngay sau

Element1~Element2 {

property : value;

}

nh ngha lp gi (Pseudo class),

Element:pseudo-class {

property : value;

Gio trnh HTML


}

Cc lp gi :link, :visited, :active, :hover, :focus, :active, :lang, :first-child, :first-

line, :first-letter.

12.4. Cc thuc tnh

12.4.1. Thuc tnh kch thc

height : {length | percentage | auto | inherit}

min-height : {length | percentage | inherit}

min-height : {length | percentage | inherit | none}

width : {length | percentage | auto | inherit}

min- width : {length | percentage | inherit}

min- width : {length | percentage | inherit | none}

12.4.2. Thuc tnh l

margin-top : {length | percentage | auto | inherit}

margin-right : {length | percentage | auto | inherit}

margin-bottom : {length | percentage | auto | inherit}

margin-left : {length | percentage | auto | inherit}

margin : {[length | percentage | auto]1 to 4 values | inherit}

padding-top : {length | percentage | auto | inherit}

padding -right : {length | percentage | auto | inherit}

padding -bottom : {length | percentage | auto | inherit}

padding -left : {length | percentage | auto | inherit}

padding : {[length | percentage | auto]1 to 4 values | inherit}

12.4.3. Thuc tnh khung vin

border-top-color : {color | transparent | inherit}

border-top-color-style : {none | hidden | dotted | dashed | solid | double |

groove | ridge | inset | outset | inherit}

border-top-color-width : {thin | medium | thick | length | inherit}

border-top : {border-width | border-style | border-color | inherit}

border-right-color : {color | transparent | inherit}

border-right-color-style : {none | hidden | dotted | dashed | solid | double

| groove | ridge | inset | outset | inherit}

border-right-color-width : {thin | medium | thick | length | inherit}

border-right : {border-width | border-style | border-color | inherit}

border-left-color : {color | transparent | inherit}

border-left-color-style : {none | hidden | dotted | dashed | solid | double |


Gio trnh HTML


border-left-color-width : {thin | medium | thick | length | inherit}

border-left : {border-width | border-style | border-color | inherit}

border-bottom-color : {color | transparent | inherit}

border-bottom-color-style : {none | hidden | dotted | dashed | solid |

double | groove | ridge | inset | outset | inherit}

border-bottom-color-width : {thin | medium | thick | length | inherit}

border-bottom: {border-width | border-style | border-color | inherit}

border-color : {color | transparent | inherit}

border-color-style : {none | hidden | dotted | dashed | solid | double |


border-color-width : {thin | medium | thick | length | inherit}

border: {border-width | border-style | border-color | inherit}

outline-color : {color | invert | inherit}

outline-style : {none | hidden | dotted | dashed | solid | double | groove |

ridge | inset | outset | inherit}

outline-width : {thin | medium | thick | length | inherit}

outline : {outline-width | outlint-style | outline-color | inherit}

12.4.4. Thuc tnh b cc

display : {block | inline | inline-block | inline-table | list-item | run-in |

table | table-caption | table-cell | table-column | table-column-

group | table-footer-group | table-header-group | table-row |

table-row-group | none | inherit}

position : {absolute | fixed | relative | static | inherit}

float : {left | right | none | inherit}

clear : {none | left | right | both | inherit}

visibility : {visible | hidden | collapse | inherit}

top : {length | percentage | auto | inherit}

right : {length | percentage | auto | inherit}

bottom : {length | percentage | auto | inherit}

left : {length | percentage | auto | inherit}

z-index : {integer | auto | inherit}

overflow : {auto | hidden | scroll | visible | inherit}

clip : {shape | auto | inherit}

12.4.5. Thuc tnh danh sch

list-style-type : {circle | disc | square | armenian | decimal | decimal-

leading-zero | georgian | lower-alpha | lower-greek | lower-

latin | lower-roman | upper-alpha | upper-latin | upper-roman |

none | inherit}

list-style-position : {inside | outside | inherit}

Gio trnh HTML


list-style-image : {uri | none | inherit}

list-style : { list-style-type | list-style-position | list-style-image}

12.4.6. Thuc tnh bng

table-layout : {auto | fixed | inherit}

border-collapse : {collapse | separate | inherit}

border-spacing : {length [length] | inherit}

empty-cells : {hide | show | inherit}

caption-side : {bottom | top | inherit}

12.4.7. Thuc tnh v mu sc v nn

background-color : {color | transparent | inherit}

background-image : {uri | none | inherit}

background-repeat : {repeat | repeat-x | repeat-y | no-repeat | inherit}

background-position : {{percentage | length | left | right}1 or 2 values |

inherit }

background-attachment : {scroll | fixed | inherit}

background : {background-color background-image background-repeat

background-attachment background-position |

inherit}

color : {color | inherit}

12.4.8. Thuc tnh nh dng k t - vn bn

font-family : {family name, | inherit}

font-size : {absolute-size | relative-size | length | percentage | inherit}

font-weight : {100900 | bold | bolder | lighter | normal | inherit}

font-style : {italic | normal | oblique | inherit}

font-variant : {normal | small-caps | inherit}

font : {[font-style] [font-variant] [font weight] font-size [line-height]

font-family | caption | icon | menu | message-box | small-caption |

status-bar | inherit}

letter-spacing : {length | normal | inherit}

word-spacing : {length | normal | inherit}

line-weight : {length | number | percentage | normal | inherit}

text-align : {center | justify | left | right | inherit}

text-decoration : {blink | line-throught | overline | underline | none |

inherit}

text-indent : {length | percentage | inherit}

text-transform : {capitalize | lowercase | none | uppercase | inherit}

text-shadow : {shahow, | none | inherit}

Gio trnh HTML


vertical-align : {length | percentage | baseline | bottom | middle | sub |

super | text-bottom | text-top | top | inherit}

white-space : {normal | nowrap | pre | pre-line | pre-wrap | inherit}

direction : {ltr | trl | inherit}

unicode-bidi : {bidi-override | embed | normal | inherit}

12.4.9. Thuc tnh v giao din ngi dng

cursor : {[uri] | auto | crosshair | default | e-resize | help | move | n-resize

| ne-resize | nw-resize | pointer | progress | s-resize | se-resize |

sw-resize | text | w-resize | wait | inherit}

12.4.10. Thuc tnh phn trang

page-break-before : {always | auto | avoid | left | right | inherit}

page-break-after : {always | auto | avoid | left | right | inherit}

12.4.11. Thuc tnh ging ring cho FireFox

-moz-border-radius : {length | percentage | inherit}

-moz-box-sizing : {content-box | border-box | padding-box}

12.4.12. Thuc tnh ging ring cho IE

zoom : {number | percentage | normal}

filter : {filter}

behaviour : uri

12.5. M hnh nh dng phn t trong CSS

12.5.1. M hnh hp (box)

Cc phn t HTML c th hin trn web theo m hnh hp (box). M hnh

hp ca mt phn t bao gm : content (ni dung), padding, border, margin.

M hnh hp trong CSS

Gio trnh HTML


Kch thc ca phn ni dung c xc nh bi thuc tnh width, cng thm

kch thc ca padding, border v margin s ra tng kch thc ca box.

Vd : mt class c nh ngha nh sau :

#myBox {

margin: 10px;

padding: 5px;

width: 70px;

}

12.5.2. Margin Collapsing (thu hp l)

Khi mt phn t nm trn mt phn t khc, l trn ca phn t di s b hp

Khi mt phn t c cha trong mt phn t khc, khng c border hay

padding phn cch, th l trn/di ca phn t trong s b thu hp.

Gio trnh HTML


Khi mt phn t khng cha ni dung no (phn t trng), cng khng c

padding hay border, th l di ca phn t b thu hp, ch cn lai l trn.

Tng t, khi hai phn t trng nm gn nhau, th khi s ch cn li l trn

ca phn t trn.

Tng qut, cc phn t s c thu hp l khi c sp xp gn nhau nh sau :

12.5.3. Thit lp v tr

Thit lp v tr tng i : cc box c thit lp v tr tng i (relative) s c

v tr c tnh ton theo cc box xung quanh.

#myBox {

position: relative;

left: 20px;

top: 20px;

Gio trnh HTML


}

Thit lp v tr tuyt i : cc box c thit lp v tr tuyt i (absolute) s c v

tr c tnh ton tuyt i da vo trnh duyt.

Thit lp v tr c nh : cc box c thit lp v tr c nh (fixed) s c v tr

lun xut hin trn mn hnh vi v tr xc nh.

Mt v d v v tr c nh (fixed positioning)

12.5.4. Thit lp hp ni (float box)

Cc box khi khng c thit lp ch float s c xut ln trang web ln lt

t trn xung. Tuy nhin, khi c thit lp ch float, cc box s c th hin ni

ln trn cc phn t khng c thit lp v c th y phn t ni qua tri hoc qua

phi.

Gio trnh HTML


Box 1 c ni v y qua phi

box 1 c y qua tri v ln box 2

Tt c cc box c y qua tri

Cc box c ni c y qua tri khi chiu di khng kch thc

v vi cao bng v khc nhau

12.6. S dng hnh nh nn

12.6.1. S dng nh nn c bn

S dng nh nn cho c trang web :

body { background: #ccc url(gradient.gif) repeat-x; }

Gio trnh HTML


S dng nh l bullet

h1 {

padding-left: 30px;

background: url(/images/bullet.gif) no-repeat left center;

}

12.6.2. Box vin bo trn gc c nh kch thc

S dng 2 nh nn nh sau :

Cc class c thit lp :

.box {

width: 418px;

background: #effce7 url(images/bottom.gif) no-repeat left bottom;

/* mu nn ca box trng vi mu ca 2 nh nn */

}

.box h2 {

background: url(images/top.gif) no-repeat left top;

}

Code s dng :

Headline

Content

12.6.3. Box vin bo trn gc c chiu cao thay i

S dng 3 nh nn nh sau :


.box {

width: 424px;

background: url(images/bg-tile.gif) repeat-y;

}

Gio trnh HTML


.box h2 {

background: url(images/bg-top.gif) no-repeat left top;

padding-top: 20px;

}

.box .last {

background: url(images/bg-bottom.gif) no-repeat left bottom;

padding-bottom: 20px;

}

.box h2, .box p {

padding-left: 20px;

padding-right: 20px;

}

Code s dng :

Headline

Content

12.6.4. Box vin bo trn gc c chiu rng v cao thay i

S dng 4 nh nn sau :

Cc class c thit lp

.box2 {

width: 50em;

background: #e4dede url(images/bottom_left.gif) no-repeat left bottom;

/* mu nn l mu ca nh bottom-left */

}

.box2-outer {

background: url(images/bottom_right.gif) no-repeat right bottom;

padding-bottom: 5%;

}

.box2-inner {

background: url(images/top_left.gif) no-repeat left top;

}

.box2 h2 {

Gio trnh HTML


background: url(images/top_right.gif) no-repeat right top;

padding-top: 5%;

}

.box2 h2, .box2 p {

padding-left: 5%;

padding-right: 5%;

}

Code s dng :

Headline

Content

12.6.5. To bng cho khung nh

S dng nh bng kch thc 800x800 :


.img-wrapper {

background: url(images/shadow.gif) no-repeat bottom right;

clear: right;

float: left;

position: relative;

}

.img-wrapper img {

background-color: #fff;

border: 1px solid #a9a9a9;

padding: 4px;

display: block;

margin: -5px 5px 5px -5px;

Gio trnh HTML


position: relative;

}

Code s dng:

12.6.6. To lin kt vi k thut rollover

S dng 2 nh cho link (vi kch thc 200x40) :

Cc class s dng :

a:link, a:visited {

display: block;

width: 200px;

height: 40px;

line-height: 40px;

color: #000;

text-decoration: none;

background: #94B8E9 url(images/button.gif) no-repeat left top;

text-indent: 50px;

}

a:hover {

background: #369 url(images/button-hover.gif) no-repeat left top;

color: #fff;

}

12.6.7. To lin kt vi k thut pixy

S dng 1 nh lin kt sau (kch thc 400x40):

Cc class thit lp :

a.pixy:link, a.pixy:visited {

display: block;

Gio trnh HTML


width: 200px;

height: 40px;

line-height: 40px;

color: #000;


background: #94B8E9 url(images/pixy.gif) no-repeat left top;

text-indent: 50px;

}

a.pixy:hover {

background-color: #369;

background-position: right top;

color: #fff;

}

Code s dng :

Test link style

12.6.8. To thanh menu dc vi k thut pixy

S dng nh nn nh k thut pixy.


ul.ver{

list-style:none;

}

ul.ver a {

display: block;

width: 200px;

height: 39px;

line-height: 39px;

color: #000;


background: #94B8E9 url(images/pixy-navigate.gif) no-repeat left top;

text-indent: 50px;

}

ul.ver li.first a {

height: 40px;

line-height: 40px;

}

ul.ver a:hover, .selected a {

background-position: right top;

color: #fff;

}

Gio trnh HTML


Code s dng :

Home

About

Our Services

Our Work

News

Contact

Kt qu :

12.6.9. To thanh menu ngang

S dng mt nh nn nh (6x25) :

V 1 nh lm du phn cch (2x25):


ul.horizon {

margin: 0;

padding: 0;

list-style: none;

width: 700px;

float: left;

background: #FAA819 url(images/nav_bar.gif) repeat-x;

}

ul.horizon a {

display: block;

float: left;

Gio trnh HTML


padding: 0 1.5em;

line-height: 29px;

background: url(images/nav_bar_divider.gif) no-repeat right top;


color: #fff;

}

ul.horizon li.first a {

background: none;

}

ul.horizon a:hover {

color: #333;

}

Code s dng :

Home

About

Our Services

Our Work

News

Contact

Kt qu :

12.6.10. Layout 2 ct

M hnh :

Gio trnh HTML


Code CSS :

#wrapper{

width:720px;

margin: 0 auto;

}

hoc

#wrapper {

width: 720px;

position: relative;

left: 50%;

margin: 0 0 0 -360px;

}

#content {

width: 520px;

float: right;

}

#mainNav {

width: 180px;

float: left;

padding-top: 20px;

padding-bottom: 20px;

}

#mainNav li {

padding-left: 20px;


}

#footer {

clear: both;

}

#content h1, #content h2, #content p {


}

Code s dng :

...

...

Gio trnh HTML


...

...

Kt qu

12.6.11. Layout 3 ct

M hnh :

Code CSS c thm vo

#mainContent {

width: 320px;

float: left;

}

#secondaryContent {

width: 180px;

float: right;

Gio trnh HTML


}

#secondaryContent h1, #secondaryContent h2,

#secondaryContent p {

padding-left: 20px;


}

Kt qu :

12.6.12. Layout 3 ct vi k thut Faux

S dng nh nn 3 ct :

Code CSS :

#wrapper {

background: #fff url(images/nav-bg.gif) repeat-y left top;

}

Kt qu :

Documents

Giao Trinh HTML