World wide web - Chương 2 doc

HTML là ngôn ng dùng xây d ng trang Web.

Trang 2

HTML là ngôn ng dùng xây d ng trang Web

Nó mô t cách th c mà d li u hi n th thông qua

< >

Ví d : <HTML>, </BODY>, <IMG> là các tag HTML

ph n chính ó là : d li u c a trang (ví d : v n b n,

th

Trang 3

Khi m t trang web c t i v trình duy t, trình

d li u là dòng v n b n This is webpage Tuy

nhiên n u có thêm nh d ng c a tag <b> thì d li u

Trang 4

C u trúc c b n

M t document HTML luôn b t u b ng <html> và

k t thúc b ng </html> (trong ó b n c ng có th vi t

nh ho c vi t hoa <html> và </html>) Nh có c p TAG này mà Browser bi t c ó là HTML -

document trình duy t Nh ng ch ó ch dành riêng cho Browser, ng i c ch nh n c nh ng

gì vi t gi a c p TAG <body> và </body>

Trang 5

1 Gi i thi u v HTML

C u trúc c b n

Nh v y m t trang web vi t b ng html s có c u trúc nh sau:

Trang 6

1 Gi i thi u v HTML

C u trúc c b n

<HTML> </HTML> : nh ngh a ph m vi c a v n b n HTML

/HEAD> : nh ngh a các mô t v trang HTML

Các thông tin này s không hi n th d i d ng

n i dung c a v n b n

<TITLE> </TITLE> : mô t tiêu c a trang

êu c a trang web th ng c hi n th

là tiêu c a c a s hi n th trang web

<BODY> </BODY> : xác nh vùng thân c a trang web.

y là ph n mà các d li u cùng v i các tag HTML s c dùng nh d ng n i dung

c a trang web

Trang 8

Trong quá trình c trang web hi n th , trình duy t

s b qua các kho ng tr ng th a, các d u ng t dòng

gi a v n b n d li u và các tag, các chú thích

Trang 10

2 M t s TAG c b n c a HTML

nh d ng trang

n n, t khóa,

t tiêu cho trang web, ta dùng tag <TITLE>

vd : <TITLE> Chào m ng các b n n v i trang web này </TITLE>

êu c a trang web thi t k là Chào m ng các b n n v i trang web này

t b ng mã cho trang web, ta s d ng các thi t l p các thông s cho tag <META>

vd : <META HTTP-EQUIV= Content-Type CONTENT= text/html ;

charset=utf-8 >

Cho bi t trang web s dùng b ng mã Unicode UTF-8

Trang 11

nh d ng trang

t màu n n, nh n n c ng nh màu ch cho toàn b

vd : <BODY BGCOLOR= #FF0000 TEXT= #FFFFFF

<! Ph n b n c n trình bày Ví d m t l i v n>

</BODY>

tr ng

Trang 12

<h1>Tiêu c a trang web</h1><br>

<h2>Welcome to my Homepage!</h2><br>

</font>

</center>

</body>

</html>

ta ph i dùng thêm m t c p TAG n a : <center></center>,

<h1></h1> là to nh t và <h6></h6> là nh nh t

Trang 13

nh d ng phân o n

phân o n là LEFT (trái), RIGHT (ph i) CENTER (gi a)

vd : <p align= left > ây là trang web </p>

<p align= right > ây là trang web </p>

<p align= center > ây là trang web </p>

Trang 16

nh d ng phân o n

Ngoài ra, ta c ng có th dùng ng k ngang v i tag <HR> t o

s phân cách gi a các thành ph n trong trang web Thu c tính

th ng g p là ALIGN (dùng canh ch nh v trí c a ng này) và COLOR (màu s c)

Trang 17

nh d ng font

Tag <FONT> nh d ng font ch , màu s c, kích th c, C a

v n b n Các thu c tính c a tag này th ng là : FACE (lo i font

ch >, SIZE (kích th c), COLOR (màu ch ) Ngoài ra, nh

d ng ch in m ta dùng tag <B>, in nghiêng ta dùng tag <I>, g ch

Trang 18

nh d ng hình nh

Tag <IMG> dùng chèn m t nh, ho c m t video clip vào trong m t trang web Các nh d ng t p tin nh và video sau

c h tr trên Internet Eplorer : *.avi, *.bmp, *.emf, *.gif,

*.jpg, *.jpeg, *.mov, *.mpg, *.mpeg, *.png, *.wmf,

i v i trang web có ch a hình nh, hình nh s là m t t p tin c l p v i t p tin ch a trang web Tag <IMG> dùng trong trang web thông báo cho trình duy t c t p tin nh và

hi n th t i v trí t tag này

Các thu c tính tinh ch nh bao g m : SRC (tên t p tin hình

nh), WIDTH, HEIGHT (kích th c nh), BORDER ( ng

vi n khung quanh nh), ALT (v n b n thay th dùng khi hình

nh không hi n th ), ALIGN (canh l )

Trang 19

<img src="d:\baigiang_congcuweb\h_clinton.gif" width="50"

height="80" align="left" border="1" alt="Không có hình">

</body>

Trang 20

Dùng tranh n h làm n n ch o t r a n g w e b

Trong ph n tr c, chúng ta ã nói n màu s c

c a n n trang web B ng cách thay i thông s

Trang 21

Trang 22

nh d ng hyperlink (siêu liên k t)

Tag <A> c dùng t m t hyperlink

o n v n b n (hay hình nh, ) n m gi a tag <A> và </A>

s óng vai trò nh m t d u hi u (anchor) hyperlink Thông

th ng con tr chu t s thay i hình d ng (th ng là hình bàn tay) khi di chuy n ngang qua o n v n này

M t hyperlink cho phép liên k t t i m t v trí khác ngay bên trong trang web ch a hyperlink (liên k t n i) ho c t i m t

trang web khác (liên k t ngo i)

Trang 23

t o m t liên k t n i, ta c n th c hi n hai b c B c 1 là ánh d u v trí (Bookmark) c a n i c n liên k t b ng thu c tính NAME B c 2 là t o hyperlink n v trí v a c ánh

Trang 24

liên k t t i các trang web khác, i n a ch URL c a trang web vào m c HREF Xem các ví d sau :

Hi n th c a s t i t p tin v theo giao th c FTP

<A

HREF= ftp://ftp.micosoft.com/mouse.zip

> Download </A>

Hi n th c a s t i t p tin v

<A HREF= FlashGet.zip> Download </A>

G i m t hàm javascript

Click here </A>

Liên k t n trang web máy ch khác

Microsoft page </A>

Ý ngh a

Mã HTML

Trang 26

N p trang web vào c a s cao nh t (topmost) _top

N p trang web vào cùng c a s v i trang web

hi n hành ây là giá tr m c nh c a hyperlink _self

N p trang web vào m t c a s cha g n nh t c a trang web hi n hành

_parent

N p trang web vào m t c a s tr ng m i C a

s này không có tên _blank

N p trang web trong c a s ho c Frame có tên

là Name Name

Ý ngh a Giá tr c a Target

M t s giá tr có th c dùng gán cho thu c tính Target

c a Tag <A> là :

Trang 28

Chuy n h ng trang t ng

nh ngh a m t trang s t ng chuy n sang m t a ch khác sau m t kho ng th i gian nh tr c, ta chèn ngay sau tag <HTML> m t tag nh sau :

<META HTTP-EQUIV= Refresh CONTENT= 3;

url=http://domain/directory/file.html >

Trang web ch a tag trên s t ng chuy n sang trang m i

http://domain/directory/file.html sau kho ng th i gian là 3

giây

Trang 29

3 nh d ng b ng bi u

c dùng nh d ng b ng cùng v i các tag

<TR>, <TD> nh d ng các dòng, c t (th ng c g i là cell)

Các thu c tính th ng dùng là :

d ng pixel b ng cách ch n radio button in pixels.

n v n b n trong m t cell.

- Canh ch nh trong m i cell properties Ch nh border c a

t ng cell : vào Cell properties/Style/Border

Trang 30

3 nh d ng b ng bi u

o n mã HTML sau minh h a m t b ng d li u g m 2 dòng, 2 c t, kích th c là 300 pixels, kho ng cách gi a n i dung và ng biên c a cell là 5 :

<TR>

</TR>

<TR>

</TR>

</TABLE>

Trang 31

3 nh d ng b ng bi u

hình 3.1 Minh h a m t b ng n gi n

Trang 34

4 Form và các thành ph n c a form

ng c dùng nh m t công c h tr nh p li u cho các ng d ng trên web Ho t ng c a form thông

th ng là : ng d ng hi n th form yêu c u nh n thông tin

Trang 35

i dùng nh p d li u cho form thông qua các ô nh p

li u (th ng g i là các controls) nh textbox, checkbox, radio button, push button, dropdown listbox, Các ô nh p li u này

c t trong thành ph n bao quanh b i c p tag <FORM>

</FORM> Khi form c submit, d li u mà ng i dùng

nh p vào các ô nh p li u s c chuy n n ch ng trình

x lý form theo d ng <tên ô nh p li u>=<giá tr > Chính vì

v y mà thu c tính NAME là thu c tính r t quan tr ng khi khai báo các ô nh p li u này

Khi m t form c submit, các d li u s c chuy n

n cho ch ng trình x lý form theo d ng <tên control>=

<giá tr d li u nh p vào> Ng i ta dùng d u & ng n

cách d li u c a 2 control khác nhau

Trang 36

t o các ô nh p li u d ng h p v n b n, nút nh n,

checkbox, radio button, ta dùng tag <INPUT> và t giá tr

t ng ng v i các lo i ô nh p li u cho thu c tính TYPE

<INPUT TYPE="TEXT" SIZE="30" MAXLENGTH= 128

NAME= USERNAME VALUE= Kim Thy >

4.1 H p v n b n (Textbox)

Trang 37

Thu c tính SIZE dùng ch s ký t hi n th trong ô nh p

li u ( ây c ng chính là chi u r ng c a ô nh p li u) Thu c

tính MAXLENGTH dùng ch s ký t t i a có th c

nh p

Khi mu n ch nh d li u nh p vào control d i d ng m t

kh u (ngh a là các ký t nh p vào s không c hi n th mà thay vào ó là các d u *) thì ta ch nh thu c tính

TYPE= PASSWORD Ví d :

<INPUT TYPE= PASSWORD NAME= USERPASSWORD

VALUE= MATKHAU SIZE= 20 >

4.1 H p v n b n (Textbox)

Trang 38

Khi ch nh thu c tính TYPE= BUTTON trong tag

<INPUT> ta s t o c m t nút nh n nói chung

ông th ng có hai lo i nút nh n c bi t ó

là nút nh n SUBMIT và nút nh n RESET Nút RESET là nút

nh n mà khi ng i dùng nh n chu t vào, các d li u c a các

ô nh p li u u c t v giá tr m c nh lúc kh i t o

t o nút này ta ch nh thu c tính TYPE= RESET trong tag

<INPUT> Trong khi ó nút SUBMIT là nút nh n c dùng

k t thúc nh p li u t o nút này ta ch nh thu c tính TYPE= SUBMIT trong tag <INPUT>

Giá tr gán cho thu c tính VALUE chính là nhãn c a nút

nh n

4.2 Nút nh n (Button)

Trang 39

Ví d sau minh h a vi c t o hai nút nh n SUBMIT và RESET

4.2 Nút nh n (Button)

Trang 40

c submit, d li u c a radio button c ch n (giá tr gán cho thu c tính VALUE) s c chuy n i cùng

v i tên c a radio button này

t m t radio button là m c nh, ta thêm vào thu c tính CHECKED

4.3 Radio Button

Trang 42

4.4 Checkbox

Dùng ch n m t ho c nhi u trong t p các l a ch n c ngh

Khi ta ch nh thu c tính TYPE= CHECKBOX trong tag

<INPUT> s t o ra m t ô nh p li u ki u checkbox T ng t

nh radio button, khi m t checkbox c check, giá tr tr v

c a nó t ng ng v i giá tr c a thu c tính VALUE

t m t checkbox là ON, ta thêm vào thu c tính CHECKED

Trang 43

4.4 Checkbox

Ví d sau minh h a m t nhóm các checkbox dùng l y thông tin v các ngôn ng c ch n :

Language: <INPUT TYPE= CHECKBOX NAME= ENGLANG

VALUE= ENG CHECKED> English

<INPUT TYPE= CHECKBOX NAME= FRLANG VALUE= FR > French

<INPUT TYPE= CHECKBOX NAME= JPLANG VALUE= JP > Japanese

Trang 44

</SELECT>

Trang 45

4.5 Dropdown listbox

t m t m c ch n trong dropdown listbox là m c nh,

ta thêm vào thu c tính SELECTED

t o m t multi-select listbox ta t thêm thu c tính SIZE

và MULTIPLE vào trong tag <SELECT>

c submit, d li u t ng ng v i m c ch n trong dropdown listbox s c chuy n i cùng v i tên c a dropdown listbox này

Ví d :

<option value="Viet">Viet

<option value="Engl"> Anh

<option value="Deutsch"> Duc

</select>

Trang 46

4.6 Ô d li u n

Dùng l u tr các thông tin c a form c n thi t cho

ch ng trình x lý sau này nh ng l i không hi n th d i

d ng m t control nào Thông tin này s c chuy n i m i khi form submit

t o m t ô nh p li u có ki u là HIDDEN, ta ch nh thu c tính TYPE= HIDDEN trong tag INPUT

Trang 47

4.7 Vùng v n b n (TextArea)

t o m t ô nh p li u d ng nhi u dòng chúng ta dùng tag TextArea D li u n m gi a c p tag <TextArea> và

</TextArea> chính là giá tr tr v c a control d ng này.

Trang 48

Ví d sau minh h a m t form nh p li u có y các ô

nh p li u ã k trên :

Dùng form này, b n có th ghi vào s l u bút, g i ý ki n t i

ng i ch website Ð có c form nh trên, b n ph i vi t HTML Code sau:

Trang 49

<td><input type="radio" value="f" name="sex" checked>nam

n </td>

</tr>

Trang 50

<option value="USA"> USA

<option value="De"> Germany </select></td>

<option value="Engl"> Anh

</tr>

Trang 52

C p TAG <FORM></FORM> khai báo v i browser m t form,

gi a c p TAG này là các (c p) TAG khác c a form.

M t form có 2 ph ng th c (method): post và get, ví d này

ta c p n ph ng th c post.

<action=""> quy t nh cho hành ng c a form khi nút send

c nh n Trong ví d này là g i e-mail t i a ch

thynlk@yahoo.com.vn

<input type = "text" name="ten" size="30"> t o ra m t

control cho phép b n nh p tên vào form Control này có tên là

"ten", kích c là "30" Tên và kích c b n có th tu ch n.

Trang 53

<input type = "text" name="thu" size="30"> t o ra m t

control cho phép b n nh p e-mail vào form Control này có tên

là "e-mail", kích c là "30" Tên và kích c b n có th tu ch n.

<input type="radio" value="f" name="sex" checked> n và

<input type="radio" value="m" name="sex"> nam: cho phép

b n ch n gi i tính Trong control th nh t, b n th y ch checked

và ng th i form, gi i tính n c ng c ch n s n.

<select name="land"><option value="VN">Vietnam <option value="USA"> USA <option value="De"> Germany</select> cho phép b n ch n n c t m t list có s n.

<select name="language" size="2"><option value="Viet">Viet

Duc</select> cho phép b n ch n ti ng t m t list có s n nh ng

ây size="2" có ngh a là list này có 2 dòng (b n th y c Viet

và Anh)

Định dạng
Số trang	80
Dung lượng	1,35 MB