TRUNG TAM TIN HOC - AI HOC KHOA HOC T NHIEN TP.

HCM
227 Nguyen Van C Quan 5 Tp. Ho Ch Minh
Tel: 8351056 Fax 8324466 Email: ttth@hcmuns.edu.vn

BI TP
CHUYN
--NGN NG HTML
V CSS

Bai tap
1. Bi 1

ngha:
To trang web c ni dung l bi tp S dng cc tag c bn.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: S dng cc tag c bn

Ni dung
trang web

S dng cc tag c bn to trang web trn, trong :

Dng u tin: Canh gia
an vn bn Trung Tm ... ngn ng HTML: Canh gia

Chuyn HTML v CSS

1/19

Bai tap

2. Bi 2

ngha:
To trang web c ni dung l bi tp S dng cc tag c bn, c t mu cho cc on vn bn.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: S dng cc tag c bn

Ni dung
trang web

S dng cc tag c bn v thuc tnh ca cc tag nh

dng:

Hng s
mu

Dng du tin: canh gia, mu xanh l m

#006600

Dng 2: mu xanh dng

#0000FF

Dng 4 - ta M!: ch m c mu hng m v nn

mu hng nht

#FF3399,
#FECFFD

3 an th: in nghing, c 3 mu ch khc nhau

Mi an cch nhau bi 1 cy thc ngang
Ton b bi th c mu nn l mu vng nht.

Chuyn HTML v CSS

#FFFFCC

2/19

Bai tap

3. Bi 3: Trang nh dng trang web

ngha:
To trang web c ni dung l bi vit v Vn L Trng Thnh, c nh dng trang web.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: nh dng trang web

Ni dung
trang web

S dng cc tag v thuc tnh ca tag nh dng

trang web:

Hng s mu

nh dng chung:
+

Nn: Mu nu t

#A06D21

Ch: Mu trng

#FFFFFF

Hnh nn: t gia trang v khng di chuyn khi

cun trang.

Dng du tin: Canh gia, mu vng m

Chuyn HTML v CSS

#FFCC00

3/19

Bai tap

4. Bi 4: Trang nh dng trang web (bi lm thm)

ngha:
To trang web c ni dung l bi vit v Lu i g Pattaya, c nh dng trang web.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: nh dng trang web

Ni dung
trang web

S dng cc tag v thuc tnh ca tag nh dng

trang web:

Hng s mu

nh dng chung:
+

Nn: T y trang bng hnh nh

Ch: Mu xanh ve chai m

#008888

Dng du tin: Kh ch ln v canh gia

an vn bn th hai: nn mu xanh ve chai, ch trng
in m v nghing

#339999,#FFFFFF

5. Bi 5

Chuyn HTML v CSS

4/19

Bai tap
ngha:
To trang web c ni dung c nh dng theo nhiu hnh thc.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: nh dng vn bn

Ni dung
trang web

S dng cc tag nh dng vn bn to trang web:

Hng s mu

nh dng nh hnh trn

Dng cng thc ha hc v biu thc phng trnh bc
hai, c ch mu

#FF0000

on code vng lp For: ch mu xanh dng m, nn

mu xm, c nh dng canh l

#0000CC,
#CCCCCC

6. Bi 6

ngha:
To trang web c ni dung l bi vit v Thng Hi, c nh dng theo nhiu hnh thc.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: nh dng vn bn

Ni dung
trang web

S dng cc tag nh dng vn bn v cc thuc tnh nh dng to

trang web:

Chuyn HTML v CSS

5/19

Bai tap
nh dng nh hnh trn
an vn u: canh l tri
Dng Bn Thng Hi: canh l phi, size=20px
an vn cui: canh l phi

7. Bi 7

ngha:
To trang web c ni dung l thng tin v Cng ty Hoa ti Nhn i, c nh dng theo nhiu hnh
thc.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: K t c bit, chn hnh nh, to danh sch v lin kt

Ni dung
trang web

S dng cc tag nh dng v cc thuc tnh nh dng to trang web:

nh dng nh hnh trn
Khi nhn chut vo dng Trung Tm Tin Hc ... : M trang web ca TTTH
http://www.csc.hcmuns.edu.vn

8. Bi 8: Trang To bng

Chuyn HTML v CSS

6/19

Bai tap

ngha:
To trang web c ni dung l danh sch cc mn n ngon ca H Ni.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: To bng

Ni dung
trang web

Nn mu v ht g

Hng s mu

#FFEDCA

Hnh nh: Canh tri

Bng biu:
+

Dng tiu : Nn mu nu t v ch mu trng

#CC6600, #FFFFFF

Mu nn xen k gia cc dng l mu trng v

mu v ht g

#FFFFFF, #FFEDCA

9. Bi 9: Trang To bng, trn dng v ct

ngha:
To trang web c ni dung l chng trnh hc ca ngnh Lp trnh.

Yu cu thit k:

Chuyn HTML v CSS

7/19

Bai tap
Stt

i tng

Yu cu

Trang web

Tiu ca s: To bng, trn dng v ct

Ni dung
trang web

Font ch l Tahoma v c kch thc l 12px

Hng s mu

Bng biu: gm 11 dng v 4 ct

+

Dng tiu : nn mu bm, ch trng

Trnh by bng biu nh hnh trn

#CC0033;#FFFFFF

10. Bi 10: Trang To bng, trn dng v ct (bi lm thm)

ngha:
To trang web c ni dung l bi vit qung co chng trnh khuyn mi du gi Double Rich.

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: To bng, trn dng v ct

Ni dung
trang web

Bng biu: Gm 4 dng, 4 ct.

Hng s mu

Dng u: Nn m, ch trng, c hnh nh

#FF0000, #FFFFFF

Dng 3: Nn nht, ch m

#FFBBBB, #FF0000

nh dng ni dung trong bng biu nh hnh trn

11. Bi 11: Trang To form v cc iu khin trn form

Chuyn HTML v CSS

8/19

Bai tap

ngha:
To trang web ng nhp

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: To form v cc iu khin trn form

Ni dung
trang web

To form
To table trong form
To 2 iu khin (.k) Text Fields v nt Button
To .k nhn dng xut ni dung M ngi dng

Yu cu x l:
Stt

i tng

Nt ng

Yu cu x l chc nng
Khi chn: Xut ni dung M ngi dng ra iu khin nhn

12. Bi 12

ngha

Chuyn HTML v CSS

9/19

Bai tap
To trang web cho php ngi dng in thng tin vo Phiu ng k tham gia trng trnh khuyn
mi

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: To form v cc iu khin

Ni dung
trang web

To form
To table trong form
To cc iu khin Text Fields, Radio, Drop-down box v nt Button

.k Ngh nghip c danh sch nh sau:

To iu khin nhn dng in cu thng bo Bn ng k thnh

cng!!!

Yu cu x l:
Stt

i tng

Nt ng

Yu cu x l chc nng
Khi chn: Xut ni dung cu thng bo

13. Bi 13

ngha
To trang web cho php ngi dng in thng tin vo phiu ng k du lch

Yu cu thit k:

Chuyn HTML v CSS

10/19

Bai tap
Stt

i tng

Yu cu

Trang web

Tiu ca s: To form v cc iu khin

Ni dung
trang web

To form
To table trong form
To cc iu khin Text Fields, Checkbox, Radio, Drop-down box, OptionGroup,
Textarea v nt Button
iu khin Chn tour c danh sch nh sau:

To iu khin nhn dng in cu thng bo Bn ng k thnh cng!!!

Yu cu x l:
Stt

i tng

Nt ng

Yu cu x l chc nng
Khi chn: Xut ni dung cu thng bo

14. Bi 14: Trang To frame

To trang tiu : Tieude.html

Yu cu thit k:
Stt
1

i tng
Ni dung
trang web

Yu cu

Hng s mu

Nn mu xanh dng m

#003399

Ch mu trng

#FFFFFF

To trang thc n: Thucdon.html

Chuyn HTML v CSS

11/19

Bai tap

Yu cu thit k:
Stt
1

i tng
Ni dung
trang web

Yu cu

Hng s mu

Trang web: Nn mu xanh da tri

#DEF0FA

To mt danh sch l tiu cc bi tp, mi dng

lin kt n trang web bi tp tng ng

To trang ch:

ngha:
To trang web xem ni dung cc bi tp v ngn ng HTML

Yu cu thit k:
Stt
1

i tng
Trang web

Chuyn HTML v CSS

Yu cu
Tiu ca s: To frame

12/19

Bai tap
2

Ni dung
trang web

To 3 frame, trong :
+

Frame u: Cha trang Tieude.html

Frame bn tri: Cha trang Thucdon.html

Frame bn phi: Th hin ni dung trang tng ng vi thc n c

chn. Mc nh l trang Bai 1.html

15. Bi 15: Trang To iframe trong trang web

ngha
To trang web xem ni dung cc bi tp v ngn ng HTML

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: To iframe

Ni dung
trang web

To 1 table cha ni dung trn, trong :

+

u: Cha ni dung tiu

bn tri: Cha thc n bi tp, mi dng lin kt n trang web

bi tp tng ng

bn phi: Th hin ni dung cc trang tng ng vi thc n

c chn. Mc nh l trang Bai 1.html

Yu cu x l:
Stt
1

i tng
Thc n
bi tp

Yu cu
Khi chn: Th hin ni dung trang web tng ng trong bn phi

16. Bi 16: Trang Bi tng hp

Chuyn HTML v CSS

13/19

Bai tap

Chuyn HTML v CSS

14/19

Bai tap

ngha:
To trang web c ni dung l cc chuyn mc thc mc Ai? Ci gi? u?

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: Bi tp tng hp

Ni dung
trang web

To 1 table cha ni dung trn, trong :

+

Dng u: Cha ni dung tiu v hnh nh

bn tri: Cha thc n cc chuyn mc, mi dng lin kt n mc

tng ng vi cc bn phi

bn phi: Th hin cc ni dung chi tit ca tng chuyn mc.

Yu cu x l:
Stt

i tng

Thc n cc
chuyn mc

Khi chn, di chuyn n mc tng ng trong bn phi

V u trang

Khi chn, di chuyn v u trang web

Chuyn HTML v CSS

Yu cu

15/19

Bai tap

17. Bi 17: Trang m thc Nam B

Hnh 1: Khi m trang

Hnh 2: Khi r chut vo hnh nh

ngha
To trang web c ni dung l bi vit v m thc Nam b, c hiu ng vn bn v ng vin

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: S dng DHTML vi CSS

Ni dung
trang web

S dng CSS :

Chuyn HTML v CSS

To lp c v tr tng i v 1 lp c v tr tuyt i,

Tn lp CSS

.binhthuong v

16/19

Bai tap
kt hp 2 lp ny to ta c bng ca ch.

.bong

To lp nh dng Dropcap

.dropcap

To lp nh dng kiu v mu ng vin, nn v

mu ch, khng th hin ra mn hnh v c v tr tuyt
i. Dng nh dng cho khung Hng v min Nam

.khung

nh dng li tag <li>: To hnh nh u danh sch

S dng cc tag hc, kt hp vi cc lp CSS trn

to trang web

Yu cu chc nng (phn m rng ca bi hc)

Stt
1

i tng
Hnh nh

Yu cu x l chc nng
Khi r chut vo hnh nh:

Xut hin khung Hng v min Nam (hnh 2)

Khi r chut ra khi hnh nh:

Tr v trng thi ban u (hnh 1)

18. Bi 18: Trang Bi vit v Mi n

Hnh 1: Khi m trang

Hnh 2: Khi r chut vo hnh th xut hin ta ca bi vit

Chuyn HTML v CSS

17/19

Bai tap

Hnh 3: Khi click chut vo hnh th xut hin ni dung bi vit

ngha:
To trang web c ni dung l bi vit v Mi N, c hiu ng hnh nh, vn bn v chut

Yu cu thit k:
Stt

i tng

Yu cu

Trang web

Tiu ca s: S dng CSS

Ni dung
trang web

S dng CSS :

To lp nh dng ni dung bi vit cho tag <div>

(hnh 3)

Thay i biu tng chut khi r vo hnh nh

Tn lp CSS

.baiviet

S dng cc tag hc, kt hp vi cc lp CSS trn to

trang web

Yu cu chc nng (phn m rng ca bi hc)

Stt
1

i tng
Hnh nh

Yu cu x l chc nng
Khi r chut vo hnh nh:

Xut hin ta Mi N Huyn b v quyn r (hnh 2)

Thay i biu tng chut

Khi r chut ra khi hnh nh:

Mt i ta

Khi nhn chut vo hnh th xut hin ni dung bi vit pha bn phi ca
hnh (hnh 3)
2

Trang web

Chuyn HTML v CSS

Khi nhn chut vo trang web th mt i ni dung bi vit

18/19

Bai tap

MC LC
1.

Bi 1 ................................................................................................................................................ 1

2.

Bi 2 ................................................................................................................................................ 2

3.

Bi 3: Trang nh dng trang web ............................................................................................... 3

4.

Bi 4: Trang nh dng trang web (bi lm thm) ..................................................................... 4

5.

Bi 5 ................................................................................................................................................ 4

6.

Bi 6 ................................................................................................................................................ 5

7.

Bi 7 ................................................................................................................................................ 6

8.

Bi 8: Trang To bng ................................................................................................................... 6

9.

Bi 9: Trang To bng, trn dng v ct ..................................................................................... 7

10.

Bi 10: Trang To bng, trn dng v ct (bi lm thm) .................................................... 8

11.

Bi 11: Trang To form v cc iu khin trn form .............................................................. 8

12.

Bi 12 .......................................................................................................................................... 9

13.

Bi 13 .........................................................................................................................................10

14.

Bi 14: Trang To frame ..........................................................................................................11

15.

Bi 15: Trang To iframe trong trang web .............................................................................13

16.

Bi 16: Trang Bi tng hp ......................................................................................................13

17.

Bi 17: Trang m thc Nam B ...............................................................................................16

18.

Bi 18: Trang Bi vit v Mi n ..............................................................................................17

Chuyn HTML v CSS

19/19