HTML2

CHNG 2
Ngn ng HTML
Gii thiu
HTML=HyperText
Markup Language
Ngn ng nh du siu vn bn
Ngn ng vit cc trang web.
Do Tim Berner Lee pht minh v c
W3C (World Wide Web Consortium) a
thnh chun nm 1994.
c im
HTML
s dng cc th (tags) nh
dng d liu
HTML khng phn bit ch hoa, ch
thng
Cc trnh duyt thng khng bo li c
php HTML. Nu vit sai c php ch
dn n kt qu hin th khng ng vi
d nh.
Th (tag)
C nhiu th, mi th c 1 tn v mang

ngha khc nhau.
C 2 loi th: th ng v th m
Cch vit th:
Th m: <tn_th>
V d: <u>, <p>, <img>
Th ng tng ng: </tn_th>
V d: </u>, </p>
Ch : lun c th m nhng c th khng c th
ng tng ng. V d: <img> khng c th ng
Thuc tnh (property) ca th
Mt th c th c cc thuc tnh nhm b sung tc

dng cho th
Mi thuc tnh c tn thuc tnh (tn_TT)
Vit th c thuc tnh:
<tn_th tn_TT1=gi_tr1 tn_TT2=gi_tr2>
Ch :
C th thay i th t, s lng cc thuc tnh m khng gy

ra li c php
S h tr cc th, thuc tnh mi trnh duyt l khc nhau.

Ch ging nhau cc th, thuc tnh c bn.
Th ng ca th c thuc tnh vn vit bnh thng

(</tn_th>)
5
Trang web u tin
Trang HTML c phn m rng (ui) l .HTM

hoc .HTML
C th to trang HTML bng bt c trnh son
tho vn bn thun no (Notepad, EditPlus,
Turbo Pascal,)
C nhiu trnh son tho HTML cho php NSD
son tho trc quan, kt qu sinh ra HTML
tng ng nh:
Microsoft FrontPage
Macromedia Dreamweaver
Trang web u tin (tt)
Son tho:
M trnh son tho vn bn thun (VD Notepad) g ND di

Ghi li vi tn CHAO.HTM
<html>
<html>
<head>
<head>
<title>Chao
<title>Chao hoi</title>
hoi</title>
</head>
</head>
<body>
<body>
Chao
Chao mung
mung ban
ban den
den voi
voi <U>HTML</U>!
<U>HTML</U>!
</body>
</body>
</html>
</html>
nh dng font ch cho trang web

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Ta trang Web</title>
</head>
<body>
<p><i><font color="#FF0000">Cho cc bn n vi lp
trnh Web</font></i></p>
</body>
</html>
8
Trang web u tin (tt)
Th nghim:
Thay i:
M trnh duyt web (IE)

Vo File/Open, chn file
CHAO.HTM va ghi
Nhn OK C kt qu nh
hnh bn
Quay li Notepad, sa li ni
dung trang web ri ghi li
Chuyn sang IE, nhn nt
Refresh (F5) thy kt qu
mi
Ghi ch: Cc th c nu
tip theo mc nh t
trong phn <body>
</body>
Son tho vn bn
Vn bn c son tho nh bnh thng trong cc

file HTML
Lu :
Mi khong trng, du xung dng trong HTML c th

hin trn trang web l 1 khong trng duy nht
g mt s k t c bit ta phi s dng m:
Khong trng (trong trng hp mun c nhiu hn 1 k t

trng):
Du nh hn (<) v ln hn (>): <
>
Du ngoc kp (): "
K hiu : ©
Ghi ch trong HTML:

10
Th nh dng k t
m, nghing, gch chn: <b></b>, <i>

</i>, <u></u>
Ch s trn:<sup></sup>
Ch s di: <sub></sub>
Font ch: <font></font>
Thuc tnh:
face=tn font ch
size=kch thc
color=mu
Vit bng tn ting Anh (red, blue,)

Vit dng #RRGGBB, RR, GG, BB dng hexa. V d:
#FFFFFF: Trng, #FF0000: ,
11
V d tag FONT
M HTML
<HTML>
<HEAD><TITLE>To chuc</TITLE></HEAD>
<BODY>
<FONT FACE = "VNI-Litthos,VNI-Times",bold>
<H1>Giam oc</H1> </FONT>
<FONT FACE = "VNI-Times",bold>
<H2>Pho giam oc</H2></FONT>
<FONT FACE = "VNICentur,VNITimes",bold><H3>Nhan
vien</H3>
</FONT>
</BODY>
</HTML>
12
V d v ch m
M HTML
<HTML>
<HEAD><TITLE>Thong tin</TITLE></HEAD>
<BODY>
<H1>Lop cu nhan</H1>
<FONT FACE ="VNI-Times" SIZE ="3" COLOR ="red">
<B>chao cac ban en vi chng trnh ao tao
</B></FONT>
</BODY>
</HTML>
13
Kt qu
Lop cu nhan
Cho cc bn n vi chng trnh o to
14
V d v ch s di v trn
M HTML
<HTLM>
<HEAD><TITLE> Dinh dang chi
so</TITLE></HEAD>
<FONT SIZE= "3">
AX<SUP>2</SUP> + BX+C = 0
<BR>
C + O<SUB>2 </SUB>= CO<SUB>2</SUB>
</FONT>
</HTLM>
Kt qu hin th trn trnh duyt
15
Tiu , on vn, ngt dng
Tiu : vi kch thc nh dn
<h1></h1>
<h6></h6>
Sau mi tiu , vn bn t ng xung dng
Thuc tnh:
align=cch cn chnh l: left, right, center, justify
on vn: <p></p>
Thuc tnh:
align tng t <h>
Ngt dng: <br>

16
V d
M HTML
<HTML>
<HEAD><TITLE>To chuc</TITLE></HEAD>
<BODY>

<H1>Giam doc</H1>
<H2>Pho giam doc</H2>
<H3>Nhan vien</H3>
</BODY>
</HTML>
17
Kt qu hin th
18
V d v tag phn on
<HTLM>
<HEAD><TITLE> Dinh dang chi so</TITLE></HEAD>
<FONT SIZE= "3">
<P ALIGN = "center" >
AX<SUP>2</SUP> + BX+C = 0
<P ALIGN ="left">
C + O<SUB>2 </SUB>= CO<SUB>2</SUB></FONT>
</HTLM>
19
Chn nh
Th <img>, khng c th ng
Cc thuc tnh:
src=a ch nh: Nu chn nh trong cng web site th

nn s dng ng dn tng i.
alt=ch thch cho nh: s c hin th khi trnh duyt

khng hin nh hoc nh li hoc khi di chuyn chut
ln nh
width=rng, height=cao: rng v cao ca nh:
n: (n l s) Quy nh rng, cao l n pixels

n%: Quy nh rng, cao l n% rng, cao ca i
tng cha nh.
border=n: n l s: kch thc ng vin nh. =0: nh

khng c ng vin
align=cn chnh nh: left, right, middle, top
20
Thm ch xung quanh hnh nh
Mun thm ch xung quanh hnh nh ta thm

thuc tnh ALIGN vo tag <IMG>.
C php:<IMG SRC = tn file ALIGN=
direction>ni dung mun chn</IMG>
Trong direction mang 1 trong 3 gi tr sau
ALIGN = top :v tr vn bn nm pha trn hnh nh.

ALIGN = middle : v tr vn bn nm gia hnh nh.
ALIGN = bottom : v tr vn bn nm pha bn di
hnh nh.
21
V d
M HTML
<HTML>
<HEAD> <TITLE>hien thi hinh anh</TITLE></HEAD>
<BODY>
<H1>hien thi hinh anh qua 3 cach</H1>
<H2>tren</H2>
<IMG SRC="..\\002.jpg" BORDER=1 ALIGN = top> van ban o phia tren.
<H3>giua </H3>
<IMG SRC="..\\002.jpg" BORDER=2 ALIGN = middle> van ban o giua.
<h4>duoi</h4>
<IMG SRC="..\\002.jpg" BORDER= 3 ALIGN = bottom> van ban o phia
duoi.
</BODY></HTML>
22
Kt qu
23
Danh sch
Dng lit k cc phn t

C 2 loi: Danh sch c th t 1,2,3,
(Ordered List) v khng c th t (Unordered
List).
Mt danh sch gm c nhiu phn t
To danh sch:
C th t: <OL>Cc phn t</OL>

Khng c th t: <UL>Cc phn t</UL>
To 1 phn t: <LI>Tiu phn t</LI>

Mt phn t c th l 1 danh sch con.
24
Siu lin kt (Hyperlink)

L
kh nng cho php to lin kt gia 1

i tng vi mt phn ni dung. Khi ta
kch chut vo i tng th phn ni
dung s c hin ra.
Ta gi:
i tng s dng kch chut vo l: i
tng lin kt. i tng c th l: vn bn,

hnh nh, mt phn ca nh.
a ch ni dung s c hin ra l ch lin
kt
25
Siu lin kt (tt)
Th to lin kt:
<a>i tng lin kt</a>
Thuc tnh:
href=ch lin kt: Nu trong cng web nn s dng ng

dn tng i.
target=tn ca s ch. Tn CS phn bit ch hoa/thng. C

mt s tn c bit:
_self: ca s hin ti
_blank: ca s mi
Ch :
Lin kt vi a ch e-mail th t href=mailto:a_ch_e-mail

Thc hin lnh JavaScript khi kch chut vo th t
href=javascript:lnh
26
Bng biu
HTML coi mt bng gm nhiu dng, mt dng

gm nhiu , v ch c mi cha d liu ca
bng.
Cc th:
To bng: <table></table>: Mi bng ch c 1 cp

th ny.
To dng: <tr></tr>: Bng c bao nhiu dng th
c by nhiu cp th ny
To :
tiu ca bng: <th></th>

d liu: <td></td>
Tng s th <td> v <th> bng s ca bng. Dng
c bao nhiu th c by nhiu th <td> v/hoc <th>
nm trong cp th <tr></tr> tng ng
Ch : c c mt trng trong bng ( khng c
d liu) th cn t ni dung l:
27
Bng biu -Thuc tnh ca cc th
<table>
border=s: kch thc ng vin. t bng 0 (mc

nh): khng c ng vin.
width=rng, height=cao: rng v cao ca bng.

C th t theo 2 cch:

n%: Quy nh rng, cao l n% rng, cao ca i tng
cha bng.
cellspacing=s: Khong cch gia 2 lin tip

cellpadding=s: Khong cch t gc n ni dung
bgcolor=mu: mu nn ca bng
background=a_ch_nh: a ch ca file nh lm nn
cho bng. Nn s dng ng dn tng i nu c th.
28
Bng biu -Thuc tnh ca cc th (tt)
<td>,<th>
bgcolor=mu: mu nn ca
background=a_ch_nh: a ch ca file nh lm nn cho
. Nn s dng ng dn tng i nu c th.
width=rng, height=cao: rng v cao ca . C th
t theo 2 cch:

n%: Quy nh rng, cao l n% rng, cao ca bng.
align=cn_l: cch cn chnh d liu trong theo chiu

ngang: left, right, center, justify.
valign=cn l ng: cch cn chnh d liu trong theo
chiu ng: top, middle, bottom.
colspan=s: s ct m ny chim (mc nh l 1)
rowspan=s: s dng m ny chim (mc nh l 1)
nowrap: nu c s lm cho d liu trong khng t xung
29
dng
Form trn trang web
Cho php ngi s dng nhp d liu trn trang web.

D liu ny c th c gi v server x l.
Ngi s dng nhp d liu thng qua cc iu khin

(controls). C nhiu loi control:
1.Textbox
2.Checkbox
3.Radio Button
4.Button
5.Combo box (drop-down menu)
6.Listbox
7.Hp nhp vn bn nhiu dng (TextArea)
8.
30
Cc i tng nhp d liu (tt)

Tt
c cc iu khin u c tn c
quy nh qua thuc tnh name. Tuy nhin
c mt s iu khin th name khng
quan trng (cc iu khin m sau ny
khng cn ly d liu)
Cc iu khin t s 2. n s 5 c
nh ngha nh th <input> v thuc
tnh type s xc nh l iu khin no
s c to ra.
31
Form
S dng cha mi i tng khc

Khng nhn thy khi trang web c hin th
Quy nh mt s thuc tnh quan trng nh method,
action.
Th to form:
<form></form>
Cc thuc tnh:
name=tn_form: Khng quan trng lm

action=a ch nhn d liu: Nn s dng ng dn
tng i nu nm trong cng 1 web
method=phng thc gi d liu. Ch c 2 gi tr:
GET (mc nh)

POST
32
Hp nhp vn bn 1 dng (Textbox)
S dng nhp cc vn bn
ngn (trn 1 dng) hoc mt
khu
Th: <input>
Thuc tnh:
name=tn_t: quan trng

type=text: nhp vn bn thng
type=password: nhp mt khu
value=gi tr mc nh
33
Checkbox
Cho php chn nhiu la chn trong mt

nhm la chn c a ra bng cch nh
du (tch).
Th: <input>: mi nhp cn 1 th
Thuc tnh:
name=tn_t: quan trng
checked: nu c th nt ny mc nh c chn
type=checkbox
value=gi tr: y l gi tr chng trnh s nhn
c nu NSD chn ny.
34
Option Button (Radio Button)
Cho php chn mt la chn trong mt nhm la chn

c a ra.
Trn 1 form c th c nhiu nhm la chn kiu ny.
Th: <input>: Mi cn 1 th
Thuc tnh:
name=tn_t: quan trng. Cc i tng cng tn th

thuc cng nhm.
type=radio
checked: nu c th nt ny mc nh c chn
value=gi tr: y l gi tr chng trnh s nhn c

nu NSD chn ny.
35
Nt lnh (Button)
S dng NSD ra lnh thc hin cng vic.
Trn web c 3 loi nt:
submit: T ng ra lnh gi d liu

reset: a mi d liu v trng thi mc nh
normal: ngi lp trnh t x l
Th: <input>
Thuc tnh:
name=tn_T: thng khng quan trng
value=tiu nt
type=submit: nt submit
type=reset: nt reset
type=button: nt thng thng (normal), it
s dng.
36
Combo Box (Drop-down menu)
Bao gm mt danh sch c nhiu phn t. Ti

mt thi im ch c 1 phn t c chn
NSD c th chn 1 phn t trong danh sch x
xung bng cch kch vo mi tn bn phi hp
danh sch.
Th to hp danh sch:
<select>Danh sch phn t</select>
Thuc tnh:
name=tn_T: quan trng
Th to 1 phn t trong danh sch:

<option>Tiu phn t</option>
Thuc tnh:
value=gi tr: gi tr chng trnh nhn c nu

phn t c chn
selected: nu c th phn t ny mc nh c chn
37
Listbox
Tng t nh Combo box, tuy nhin

c th nhn thy nhiu phn t cng
lc, c th la chn nhiu phn t
Th: <select></select>
Thuc tnh: tng t ca combo tuy
nhin c 2 thuc tnh khc:
size=s dng
multiple: cho php la chn nhiu phn t
cng lc
Th <option></option> tng t
ca combo box
38
Hp nhp vn bn nhiu dng (TextArea)
Cho php nhp vn bn di trn

nhiu dng.
Th:
<textarea>
Ni dung mc nh
</textarea>
Thuc tnh:
name=tn_T: quan trng

rows=s dng
cols=s ct
rows tnh theo s dng vn bn, cols
tnh theo s k t chun trn dng.
39
Khung (Frame)
Cho
php chia mt trang web lm nhiu

phn, mi phn cha ni dung ca 1
trang web khc
Trnh duyt c th khng h tr khung
40
Khung (tt)
To
trang web cha cc khung:
Thay th <body></body> bng:

<frameset>
cc khung
</frameset>
<noframes>
ni dung trong trng hp trnh
duyt khng h tr khung
</noframes>
41
Khung (tt)
Mt
s thuc tnh ca <frameset>
rows
= n1, n2, nk
hoc cols = n1, n2, nk: Quy nh c
k dng (hoc ct), rng dng (ct) th i l
ni. ni l s, c th thay bng *: phn cn li
frameborder = yes hoc no

framespacing = n: Khong cch gia 2
khung
42
Khung (tt)
To
1 khung c ni dung l 1 trang web

no : <frame>
Thuc tnh:
src=a ch cha ni dung

name=tn khung
noresize: Khng c thay i kch thc
Th
<base> mc nh
Thuc tnh
target=Ca s mc nh
href=a ch gc mc nh
43
a phng tin
m
thanh nn: <bgsound>
Thuc tnh:
src=a ch file m thanh

loop=n: s ln lp. -1: mc nh: mi mi.
44
a phng tin (tt)

Video
trn IE s dng Windows Media

Player
<object
classid="clsid:22D6F312-B0F6-11D094AB-0080C74C7E95
id="MediaPlayer1
width=rng height=cao>
<param name="FileName" value=a ch
file">
</object>
45
Flash
<object classid="clsid:D27CDB6E-AE6D-11cf96B8-444553540000"
codebase="http://download.macromedia.com/pub
/shockwave/cabs/flash/swflash.cab#version=6,
0,29,0" width=s" height=s">
<param name="movie" value="ten_file.swf">
<param name="quality" value="high">
<embed src="ten_file.swf" quality="high"
pluginspage="http://www.macromedia.com/go/ge
tflashplayer" type="application/x-shockwaveflash" width="s " height="s "></embed>
</object>
46
Applet
<applet code="ten_fle.class"
width=S" height="S">
</applet>
47
Mt s th meta thng dng

Th
<meta>:
t gia <head></head>
Thng dng quy nh thuc tnh cho trang
web
C tc dng ln vi Search Engine
2 cch vit th <meta>:
<META NAME="name" CONTENT="content">

<META HTTP-EQUIV="name" CONTENT="content">
48
Mt s th meta thng dng (tt)
<META NAME="description" content="">

<META NAME="keywords" content="">
<META NAME="author" CONTENT="author's
name">
<META HTTP-EQUIV="refresh"
CONTENT="delay;url=new url">
<META HTTP-EQUIV="expires" CONTENT="date">
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=utf-8">
49

HTML2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML2

Uploaded by

Copyright:

Available Formats

CHNG 2

C nhiu th, mi th c 1 tn v mang

Thuc tnh (property) ca th

Mt th c th c cc thuc tnh nhm b sung tc

Mi thuc tnh c tn thuc tnh (tn_TT)

Vit th c thuc tnh:

<tn_th tn_TT1=gi_tr1 tn_TT2=gi_tr2>

C th thay i th t, s lng cc thuc tnh m khng gy

S h tr cc th, thuc tnh mi trnh duyt l khc nhau.

Th ng ca th c thuc tnh vn vit bnh thng

Trang web u tin

Trang HTML c phn m rng (ui) l .HTM

Trang web u tin (tt)

M trnh son tho vn bn thun (VD Notepad) g ND di

nh dng font ch cho trang web

Trang web u tin (tt)

M trnh duyt web (IE)

Vn bn c son tho nh bnh thng trong cc

Mi khong trng, du xung dng trong HTML c th

Khong trng (trong trng hp mun c nhiu hn 1 k t

Ghi ch trong HTML:

m, nghing, gch chn: <b></b>, <i>

Vit bng tn ting Anh (red, blue,)

Tiu , on vn, ngt dng

Tiu : vi kch thc nh dn

align=cch cn chnh l: left, right, center, justify

align tng t <h>

Ngt dng: <br>

src=a ch nh: Nu chn nh trong cng web site th

alt=ch thch cho nh: s c hin th khi trnh duyt

width=rng, height=cao: rng v cao ca nh:

n: (n l s) Quy nh rng, cao l n pixels

border=n: n l s: kch thc ng vin nh. =0: nh

align=cn chnh nh: left, right, middle, top

Thm ch xung quanh hnh nh

Mun thm ch xung quanh hnh nh ta thm

ALIGN = top :v tr vn bn nm pha trn hnh nh.

Dng lit k cc phn t

C th t: <OL>Cc phn t</OL>

To 1 phn t: <LI>Tiu phn t</LI>

Siu lin kt (Hyperlink)

kh nng cho php to lin kt gia 1

i tng s dng kch chut vo l: i

tng lin kt. i tng c th l: vn bn,

Siu lin kt (tt)

href=ch lin kt: Nu trong cng web nn s dng ng

target=tn ca s ch. Tn CS phn bit ch hoa/thng. C

Lin kt vi a ch e-mail th t href=mailto:a_ch_e-mail

HTML coi mt bng gm nhiu dng, mt dng

To bng: <table></table>: Mi bng ch c 1 cp

tiu ca bng: <th></th>

Bng biu -Thuc tnh ca cc th

border=s: kch thc ng vin. t bng 0 (mc

width=rng, height=cao: rng v cao ca bng.

n: (n l s) Quy nh rng, cao l n pixels

cellspacing=s: Khong cch gia 2 lin tip

Bng biu -Thuc tnh ca cc th (tt)

n: (n l s) Quy nh rng, cao l n pixels

align=cn_l: cch cn chnh d liu trong theo chiu

Form trn trang web

Cho php ngi s dng nhp d liu trn trang web.

Ngi s dng nhp d liu thng qua cc iu khin

Cc i tng nhp d liu (tt)