Professional Documents
Culture Documents
HTML (Hyper Text Markup Language - Ngn ng nh du siu vn bn) l mt s nh dng bo cho trnh duyt Web (Web browser) bit cch hin th mt trang Web. Cc trang Web thc ra khng c g khc ngoi vn bn cng vi cc th (tag) HTML c sp xp ng cch hoc cc on m trnh duyt Web bit cch thng dch v hin th chng ln trn mn hnh.
Cc tag HTML bo cho trnh duyt bit cch khi no th in m mt dng vn bn, in nghing, bin dng vn bn thnh mt siu lin kt ti cc trang Web khc, hin th nh... Trong v d trn ta thy sau tag <h3> v on vn bn l tag </h3>. Trong tag </h3> ta thy c du / , du / nm trong 1 tag bo hiu cho trnh duyt bit l hiu ng ca tag kt thc. Nh vy vic s dng mt tag HTML nh sau: <tn tag> vng vn bn chu tc ng </tn tag>. Ch : Trnh duyt khng quan tm tn tag l ch hoa hay ch thng nn vic vit <h3> v <H3> l nh nhau. 1.2.2. Cu trc ca mt file HTML. File HTML bao gi cng bt u bng th <html> v kt thc bng th </html>. Cp th ny bo cho trnh duyt Web bit rng n ang c mt file c cha cc m HTML, cn th </html> c tc dng nh kt thc file HTML. Bn trong cp th <html> ... </html> l cc cp th <head> ... </head> v <body> ... </body> l phn thn, ti y bn c th nhp vo cc on vn bn cng cc th khc quy nh v nh dng ca trang. Ngoi ra ghi ch thch, tin cho vic xem tag HTML hoc cp nht mt trang Web, ta cn t ch thch vo gia <!-- v -->. Tm li cu trc c bn ca mt file HTML l <html> <head> <title> Tn trang </title> </head> <body> ..... <!-- Vn bn v cc th HTML --> .....
</body> </html>.
Lu : Bn nn to mt Folder ring cha cc tp tin m bn s to ra trong sut thi gian hc HTML. 4. Khi ng IE hoc Nescape. Chn File / Open. S dng hp thoi m file HTML bn va to. 5. Bn s nhn thy trn tranh tiu ca trnh duyt l dng ch "Chn tri tri thc - Internet today" v trong trang di l "Cho mng bn tham gia chuyn mc Chn tri tri thc ca tp ch Cng ngh Thng tin Internet Today. Trong phn ny bn s c hc nhng kin thc c bn v HTML, cng c to ra cc trang Web. Sau khi hc xong v HTML bn c th to ra nhng trang Web y n tng vi vn bn, hnh nh, m thanh..." m bn vit trong phn body
<tt>y l tag ch nh my</tt> <b>y l tag m </b> <em>y l tag </em> <strong>y l tag strong</strong> <strike>y l tag strong</strike>
y l tag ch nh my
Bn c th kt hp cc tag ny vi nhau, min l chng c lng vo nhau mt cch chnh xc. V d: <b> <i> .... </i> </b> Tag in nghing phi nm trong tag in m. Hn na bn c th p dng cc tag vi tiu <h2> <i> .... </i> <h2> 3.2.Thc hnh p dng vo file HTML ca bn. 1. To mt file HTML mi 2. Thm cc tag nh dng kiu ch. Lc ny file HTML ca bn trong phn body c dng nh sau. <h3><b><i>Ch khi to file HTML</i></b></h3> Nu bn dng cc chng trnh son tho vn bn<b><u> khc NotePad ca Windows </u></b>th bn phi nh lu kt qu dng vn bn trn (ASCII) 3. Lu cng vic ca bn. 4. Dng trnh duyt m v so snh vi v d mu.
4. Su mc tiu
4.1. Bi hc Khi trnh by mt trang Web, i khi bn phi cn n cc tiu theo cc kch c, phng ch khc nhau. HTML c cc tag thc hin vic ny. to mt tiu chng ta dng <hx> Tn tiu <hx> Trong x l mt s c gi tr t 1 n 6 ch kch c tiu . Sau y l v d cho cc c ca tiu .
Tiu c 4
Tiu c 5
Tiu c 6.
4.2.Thc hnh Thm cc tiu vo trang Web ca bn. 1. M li file HTML m bn to ra bi hc trc bng trnh son tho vn bn m bn dng to ra n. 2. Thm on sau vo file HTML. Bn cn lu on thm vo phi nm gia <body> v </body> <h1>Gi thiu chung</h1> vo trc on "Cho mng bn tham gia chuyn mc Chn tri tri thc ca tp ch Cng ngh Thng tin Internet Today. Trong phn ny bn s c hc nhng kin thc c bn v HTML, cng c to ra cc trang Web. Sau khi hc xong v HTML bn c th to ra nhng trang Web y n tng vi vn bn, hnh nh, m thanh... 3. Lu cng vic bn va lm. 4. Dng trnh duyt Web m file HTML bn va to v so snh vi v d mu, nu bn thy khc bn c th phi xem li nhng g mnh to trong file HTML.
5. Chia vn bn thnh nhiu on Trc ht bn li m file HTML m bn to t cc bi hc trc bng trnh son tho vn bn, thay v vn bn nh c, by gi cui mi dng bn c th g Enter vi ln, khi on vn bn ca bn trng c v nh sau :
Cho mng bn tham gia chuyn mc Chn tri tri thc ca tp ch Cng ngh Thng tin Internet Today. Trong phn ny bn s c hc nhng kin thc c bn v HTML, cng c to ra cc trang Web. Sau khi hc xong v HTML bn c th to ra nhng trang Web y n tng vi vn bn, hnh nh, m thanh... Lu cng vic bn va lm v m n trn trnh duyt ca bn. Khi bn s trng thy kt qu trn trnh duyt nh sau :
Bn cm thy c iu g khng ng phi khng? Bi v HTML b qua du hiu xung dng khi bn g Enter v b qua cc dng trng nn bn thy on vn bn m bn va nhp d c Enter xung dng nhng vn lin vi nhau. chia on HTML dng tag <p> Cng lu rng tag <hx> gn lin vi s chia on nn bn khng cn phi t <p> trc <hx>. Chn cc du chia on vo file HTML ca bn. 1. Dng trnh son tho vn bn m tile HTML m bn to t trc. 2. Chng ta thm on mi vo vn bn, sau on u Tp ch Internet Today l mt tp ch in t chuyn v Cng ngh thng tin. Chng ti s gip cc bn tm hiu v khm ph nhng b n ca HTML bn c th t to ra cc trang Web cho ring mnh 3. a con tr son tho n cui on u, thm tag <p>. Lc ny on vn bn trng ging nh sau. Cho mng bn tham gia chuyn mc Chn tri tri thc ca tp ch Cng ngh Thng tin Internet Today. Trong phn ny bn s c hc nhng kin thc c bn v HTML, cng c to ra cc trang Web. Sau khi hc xong v
HTML bn c th to ra nhng trang Web y n tng vi vn bn, hnh nh, m thanh... <p> Tp ch Internet Today l mt tp ch in t chuyn v Cng ngh thng tin. Chng ti s gip cc bn tm hiu v khm ph nhng b n ca HTML bn c th t to ra cc trang Web cho ring mnh 4. Lu li cng vic ca bn. 5. Dng trnh duyt m li file HTML ca bn v so snh vi v d mu.
Nh bn thy, cc on vn bn c tch nhau do tc dng ca tag <p> Thm mt s tag phn on <hr> Chn mt ng thng vo trang Web ca bn, tag ny thng dng chia nhng phn chnh ca trang Web. <br> y vn bn xung mt dng mi, tag ny khc tag <p> ch n khng chn thm vo trang ca bn mt dng trng nh tag <p>. Bn c th s dng tag ny khi to mt danh sch, vit cc dng ca mt bi th. V d : Nu trong file HTML c on sau gia tag<body> v </body> <hr> Cu lc b Tin hc VNN1<br> Cu lc b Vn ho VNN3<br>
5. Preformatled text
5.1.Bi hc Phn ny trnh by v cch hin th cc on vn trong c c cc khong trng v du xung dng. Nh bn bit trong cc phn trc, trnh duyt b qua cc dng trng, du hiu xung dng khi ta son tho. Tuy nhin bn vn c th hin th c vn bn nh lc bn nhp vo bng cch s dng tag <pre> V d <pre> Khi bn mun trnh duyt Web hin th ng nh bn son tho, bn nh dng tag <pre>
Bn phi vit nh sau: Khi cn trnh by mt on vn bn li su vo bn trong so vi ton b vn bn on vn bn c ni bt hn, v d bn cn hin th mt ch , khi bn hy dng tag <blockquote > <blockquote> <hr> Trnh by on vn bn bng tag <blockquote > s lm cho on vn bn ca bn ni bt hn, v trang Web ca bn trng cng s chuyn nghip hn. Bn hy th xem </hr> </blockquote> 6.2.Thc hnh Vi nhng kin thc hc c, bn hy xy dng cho mnh mt trang Web chng hn nh mt trang Web hng dn hc ting Anh vi cc hnh nh, siu lin kt v cc ghi ch dng tag <blockquote>
7. S dng cc k t c bit
7.1.Bi hc i khi trong trang Web ca bn c cc k t c bit, chng hn nh k t khng phi l ting Anh, mt du nhn... HTML quy nh vic hin th cc k t nh sau &XXXX; trong XXXX l tn m cho cc k t c bit . Bn c th xem Danh sch cc k t c bit ny bit thm chi tit. V d nu trong phn body c on nh sau: <h2 align=center>>>>ÆñÞóßÿ </h2> Th kt qu trn trnh duyt l:
Trong trang Web ca bn nhiu lc phi hin th cc k t nh du ln hn (>) hoc du nh hn (<), du v (&)..., m cc k t ny trng vi k hiu ca mt tag. hin th cc k t ny, HTML cung cp cho ta cc k hiu thay th nh sau: < thay cho < > thay cho > & thay cho &
V d: hin th 700 > 400 ta vit nh sau: 700 > 400 Qua cc bi hc trc bn bit rng trnh duyt Web b qua tt c cc khong trng trong file HTML. Tuy nhin trnh by trang Web cho p, bn mun chn khong trng vo trong trang Web, v d bn mun mt khong trng sau du chm cu hay sau du phy, chn khong trng vo u mi on vn bn... Mun chn khong trng ta dng k hiu Ngoi cc k hiu m t trn, HTML cn cung cp thm cho chng ta mt s k hiu c bit na, l: © thay cho ® thay cho V d
7.2. Thc hnh 1.To mt file HTML sau thm phn sau vo trong phn body HTML c th hin th c cc k t c bit nh: <ul> <li>Cc ktlatin:>>>ÆñÞóßÿ <li>Cc du ln hn, nh hn, du v : > < & <li>Cc du Copyright v Trademark : © ®
Ch : hin th ng cc du Copyright v Trademark nu bn dng font Ting Vit th bn phi i cc du sang font Ting Anh. Cui cng chng ti a ra mt bng cc k t, bn hy Click vo y xem bng.
Trong "Tn nh" l tn ca mt file nh cng folder vi file HTML ca bn. V d : chn mt nh c tn l anh1.jpg ta lm nh sau <img src = "anh1.jpg">
tag <img...> cn c th c thm cc thuc tnh hin th vn bn so vi hnh nh. Thuc tnh align vi cc gi tr khc nhau s cho ta cc hiu ng nh sau. 1. align = top 2. align = middle 3. align = bottom V d
Ngoi ra thuc tnh ny cn c mt s gi tr khc nh: TextTop, AbsMiddle, AbsBottom v Baseline. Cc bn hy tm hiu thm qua bi thc hnh. 8.2.Thc hnh Trc khi a hnh nh vo trong trang Web ca bn mi bn download mt s hnh nh lm v d 1 To mt file HTML mi v s dng cc tag thm nh vo trong trang Web 2.Th thm cc thuc tnh align = vo trong tag img v so snh vi kt qu ca bi hc 8.3.Thm mt s thuc tnh ca tag <img...> 1. Thuc tnh alt = " ". Khi trang Web ca bn c xem bng trnh duyt m ngi s dng tt vic trnh by hnh nh tit kim thi gian download, thuc tnh alt = "" cho php thay th vo v tr hnh nh mt chui vn bn m t n. V d <img src = "../Pictures/Dowload.jpg" align = top alt = "Download Software">
Cm t Download Software thay th cho hnh nh. 2. Thuc tnh chiu cao v chiu rng. cho trang Web ca bn c np nhanh hn, bn nn a kch thc ca nh (tnh bng pixel) vo tag <img>. Cch s dng cc thuc tnh ny l: <img src = "" width = x, height = y> x,y l chiu rng v chiu cao ca nh. 3. Thuc tnh to vng quanh nh. Thuc tnh ny lm cho khong cch gia bc nh v cc on vn bn c thng thong, d nhn v p mt hn. Hai thuc tnh c tn l HSPACE v VSPACE: <img src = "" hspace = x, vspace = y> x l khong cch vng trng hai mt tri v phi ca bc nh. y l khong cch vng trng trn nh v y ca bc nh. Bn s c hc k hn bi hc ln sau. i vi cc thuc tnh ny, nu khng a thm vo t img th trnh duyt t ng tnh chng trc khi hin th.
9. Cn chnh l
9.1.Bi hc 9.1.a.Sp xp vn bn vo gia trang Trong cc bi hc trc, bn thy rng trang Web ca bn ch c cn l bn tri, v bn mun trnh by trang Web ca mnh p hn bng cch sp xp cc on vn bn vo gia trang, HTML c nhiu cch gip bn thc hin iu ny. Cch th nht: Bn t on vn bn cn sp xp vo gia trang nm gia tag <center> v </center> V d: <center> Xin chuc mung ban </center> s cho kt qu nh sau:
Cch th 2: t thuc tnh align ca tag <p> c gi tr l center V d: <p align = "center"> Xin chuc mung ban <p>
9.1.b.Sp xp tng i gia vn bn v hnh nh Khi mun c vn bn ph xung quanh hnh nh, bn ch vic thm thuc tnh align vo tag <img> V d: <img src = "filename" align = "right"> s cho kt qu:
Khi vn bn hoc nhng mc khc c sp cng vi hnh nh kh ngn v bn mun y vn bn k tip xung bn di hnh nh, bn hy s dng tag <br> vi thuc tnh clear: <br clear = left> <br clear = right> <br clear = all> tag <br> vi thuc tnh clear s xo i tt c cch sp xp c trong tag <img> V d: Khi cha c tag <br clear = >
Khi cn trnh by vn bn ph quanh hnh nh vi mt khong cch nht nh ta dng thm cc thuc tnh vspace v hspace trong tag <img>. Trong vspace l khong cch gia bn trn hay bn di ca hnh nh v vn bn cn space l khong cch gia bn phi hay bn tri ca hnh nh v vn bn. V d: <img src = "anh1.jpg" align = left vspace = 10 hspace = 20>
9.1.c. Chnh l v sp xp vn bn Ngoi cc cch sp xp vn bn m bn bit, HTML cn cho chng ta thm mt tag cn chnh vn bn na, l <div> ... </div>. Vng vn bn chu nh hng ca tag ny da vo thuc tnh align. <div align = left> ... </div>
9.2. Thc hnh By gi bn hy to mt trang Web hin th mt tin no , nh cc trang tin ca VNN chng hn, trong c s dng cc hnh nh minh ho cho tin. Yu cu s dng thuc tnh vspace v hspace cn chnh khong cch gia vn bn v hnh nh cho p, s dng tag<div> canh l cho on vn bn.
10.1. Lin kt ti mt file cc b. By gi bn bt u to mt lin kt t trang Web ca bn n mt trang Web th hai. Lin kt ny c gi l cc b bi v trang Web th hai cng cng nm trn mt my vi trang Web u. n gin trc ht bn to mt file HTML th hai v t n cng folder vi trang m bn to cc bi trc. Mun to mt siu lin kt ta dng <a href = "filename.htm"> Vn bn i din cho mi lin kt </a> Bt c on vn bn no nm gia <a href = " " > v </a> u l mt siu vn bn lin kt ti cc trang Web khc v n c gch di. Thc hnh 1.To mt trang Web khc gi s l vidu.htm v lu vo cng Folder vi trang Web ca bn. 2.Trong trang Web m bn cn to siu lin kt ti bn thm tag to siu lin kt nh sau : <a href = "vidu.htm">Xem v d 1</a> 3.Lu li cng vic ca bn v m trn trnh duyt. Khi bn s thy on vn bn Xem v d c to thnh siu lin kt, n c i thnh mu xanh v khi bn a chut vo vng vn bn ny th chut b i thnh hnh bn tay v nu bn bm chut th s c a ti trang c tn l vidu.htm
Bn cng c th lin kt ti mt hnh nh bng cch thay tn filename.htm bng mt file nh. V d: <a href = "logo.gif"> Text </a> Ti y chc bn li c thc mc, mun lin kt ti th mc khc hoc th mc cao hn th lm th no? thc hin iu mi bn xem tip phn sau y. Gi s cu trc folder ca bn c dng |--My Web | |--Pictures | | |--i-today.gif | |--Trang web ca bn v tr ny V bn mun lin kt ti I-today.gif, khi trang tag <a href ..> bn sa li nh sau <a href = "Pictures/i-today.gif"> ... </a> Cn trong trng hp file bn cn to lin kt c cu trc folder cao hn V d: |--Pictures1 |--My Web | |--Pictures | | |--i-today.gif | |--Trang web ca bn v tr ny v bn cn lin kt ti nh trong Folder Pictures1 c cp cao hn th mc cha trang Web ca bn, khi bn cn sa li tag nh sau: <a href = "../pictures1/.."> </a> mi ln xut hin "../" bo co cho trnh duyt tm kim mt folder c cp cao hn. Thc hnh By gi bn hy p dng cc cch lin kt ti file Folder cng cp v cp cao hn. Khi tho cc cch lin kt, khi xy dng trang Web bn c th tt c cc nh trong cng mt Folder v lin kt ti, iu ny lm cho vic thay i, cp nht trang Web c thun tin hn. Thm mt cht v vn siu lin kt
cho trang Web ca bn c v chuyn nghip hn, by gi bn hy i tn thnh index.htm. iu ny c l gii nh sau: V d khi bn vo trang I-today bn s g vo dng a ch ca trnh duyt http: //www.vnn.vn/i-today/ Thc ra khi trnh duyt s c file http: //www.vnn.vn/ i-today/ index.htm. 10.2. Lin kt n cc trang Web khc trn Internet lin kt ti mt trang Web khc trn Internet ta dng tag sau: <a href = "URL"> Text </a> Trong URL (Uniform Resource Locator) cho bit a ch m bn mun lin kt ti. V d v cc URL http://www.hut.edu.vn http:// www.vnn.vn http://www.vnn.vn/i-today mailto:hung_nd@vol.vnn.vn Thc hnh 1.To mt file HTML v thm on sau vo trong phn body <ul> <li><a href = "http://www.hut.edu.vn">Trng i hc Bch khoa H ni</a> <li><a href = "http://www.vnn.vn/i-today">Tp ch Cng ngh Thng tin Internet Today</a> <li><a href="mailto:hung_nd@vol.vnn.vn">Gi th cho Trn Vit Hng</a> </ul>
2. Lu cng vic ca bn, sau m trnh duyt v so snh vi v d. Bn c th kim tra cc siu lin kt bng cch di chut vo vng vn bn siu lin kt v xem thng bo thanh trng thi ca trnh duyt, thanh trng thi s hin th URL m bn s lin kt ti.
10.3. Lin kt ti cc phn trong cng mt trang HTML khng nhng cho bn to lin kt n cc trang Web khc nm cng my tnh vi trang Web ca bn hoc trn Internet, m cn cho php bn lin kt n cc phn trong cng mt trang. lin kt n cc phn ca mt trang trc ht bn phi t tn cho phn cn lin kt ti. Th tc ny c thc hin bi tag <a name=""> </a> Trong name l mt tn do bn t ra Sau nu bn cn lin kt ti phn t tn bn ch cn dng <a href = "#name"> Text to link </a> Tng t khi lin kt ti cc ti liu khc ta c th dng <a href = "vol1.htm#name> Text </a> <a href = "URL#name> Text </a> V d :Click vo y v u trang 10.4. To cc siu lin kt bng hnh nh Nh bn vn thng thy trong cc trang Web, cc siu lin kt khng ch l cc on vn bn m cn c bng hnh nh na, iu ny cng lm cho Web tr
nn hp dn. Phn ny gii thiu cho bn cch to cc siu lin kt bng hnh nh: Vic u tin l bn chn 1 nh nm cng th mc /folder vi trang Web ca bn, gi s l graph.jpg. Khi bn s dng cc Tag nh sau <a href = "file.htm"> <img ser = "graph.jpg"></a> Bn lu l tag <img..> nm gia tag <a href ...> v </a> Khi mt nh c dng lm siu lin kt, s c mt hp mu c mu ca cc siu lin kt bao quanh nh Lu : Vic a mt hnh nh ln vo trong trang Web lm cho ngi c phi mt thi gian ch ti v vy bn nn s dng mt s mo sau: 1. phng ngi c tt ch hin th hnh nh ca trnh duyt, bn nn thm thuc tnh alt = "..." vo tag <img...> ngi c d nh hng 2. Khi cn gii thiu mt hnh nh ln, bn nn to mt hnh nh thu nh ca n v a vo trang Web lm siu lin kt ti nh ln, nh th mt thi gian download trang Web ca bn, v d bn hy Click chut vo nh sau :
Thc hnh By gi bn hy to mt file HTML m phn u c trnh by theo kiu mc lc, mi mc lin kt ti phn ni dung tng ng trong cng vn bn, cui mi phn ni dung c mt nh lm siu lin kt bo quay tr li u ti liu. Trng ging nh sau
... Phn ny gi l footer ca trang Web. thm footer vo trang Web, HTML cung cp cho chng ta tag <address> v cch s dng nh sau <address> ... <!-- cc thng tin--> ... </address> Tt c vn bn nm trong tag <address> c in bng kiu ch nghing, tuy nhin bn c th thay i cch hin th ca chng bng cch s dng cc tag hc. 11.2.Thc hnh 1.To mt file HTML, sau khi thm cc phn thng tin cho trang Web, bn thm on sau vo cui phn body <address> <hr> <p align = "center"> Chuyn mc Chn tri tri thc - Tp ch Internet Today<br> Copyright @ 2000 by VASC<br> a ch : 99 Triu Vit Vng - H ni<br> E_mail : <a href="mailto:i-today@vasc.vnn.vn">i-today@vasc.vnn.vn<br></a> Mi kin v b sch HTML xin gi v: Trn Vit Hng<br> E_mail :<a href ="mailto:hung_nd@vol.vnn.vn>hung_nd@vol.vnn.vn</a> </p> </address>
<ul> <li>Ch mc th nht ... <li>Ch mc cui </ul> V d khi trong phn body ca file HTML ca bn c on nh sau: <h3>Cc b mn trong khoa Cng ngh Thng tin trng i hc Bch khoa H ni</h3> <ul> <li>B mn Khoa hc my tnh <li>B mn K thut my tnh <li>Trung tm my tnh <li>Phng th nghim Lin mng </ul> Th trn trnh duyt danh sch c hin th nh sau :
Danh sch c th t Danh sch c th t l danh sch m mi mc ca danh sch c nh s, thng bt u t "1". to ra danh sch c th t ta dng cc tag sau: <ol> <li>Ch mc th nht ... <li>Ch mc cui cng </ol> Danh sch c th t ch khc danh sch khng c th t ch thay tag <ul> bng tag <ol>. V d : Nu trong phn body ca file HTML c on <h3>Cc bc chun b hc HTML</h3> <ol> <li>Chng trnh son tho vn bn trn (nh NotePad ca Windows) <li>Trnh duyt Web(nh Internet Explorer hoc Nescape Navigator) <li>B sch v HTML ca tp ch Internet Today </ol>
Danh sch nh ngha (definition lists) Danh sch nh ngha khng c cc ch mc u dng. Sau khi kt thc tag <dt>, n t ng xung dng, vit tht vo ht nh cc nh ngha trong sch gio khoa vy. V d:
<dl> <dt>nh ngha 1</dt> <dd>gii thch nh ngha 1.</dd> <dt>nh ngha 2</dt> <dd>gii thch nh ngha 2</dd> <dt>nh ngha 3</dt> <dd>gii thch nh ngha 3.</dd> </dl> Trong trang Web to ra cc mc thng tin c cu trc logic hn bn c th lng cc danh sch vi nhau. V d v trn danh sch <h3>V d v trn danh sch</h3> <ol> <li> Ch mc 1 <ul> <li> Ch mc con 1 <ol> <li> Ch mc con 1 <li> Ch mc con 2 </ol> <li> Ch mc con 2 </ul> <li> Ch mc con </ol>
12.2.Thc hnh a danh sch vo trang Web ca bn 1. M mt file HTML mi, trong phn body bn to mt danh sch bng cc tag HTML nh sau : <h3>Mc lc</h3> <ul> <li>Chng mt <ol> <li>Gii thiu chung <li>Nhng kin thc v lng v HTML </ol> <li>Chng hai <ol> <li>Cc tag thng dng
<ul> <li>Tag nh dng kiu ch <li>Tag chn nh </ul> <li>Cc tag trang tr trang Web </ol> <li>Chng ba <ul> <li>Cc trang Web mu <li>Kt thc </ul> </ul> 2. Lu cng vic ca bn. M trn trnh duyt v so snh vi v d mu
C font 2
C font 3 ...
C font 7
Ngoi ra HTML cn cho chng ta mt cch khc thc hin vic thay i c font, thay i tng i <font size = + X> ... </font> <font size = - X> ... </font> Trong +X, -X l dch chuyn so vi c font hin ti. Chng thng c dng cng vi tag
<basefont size = X> X: C font mun c mc nh Ch : Tag <basefont> khng c tag ng li, n c tc dng cho n khi gp mt tag <basefont> khc. 13.1.b.Kiu font lm cho trang Web thm sinh ng, nhiu khi bn mun trnh by n bng nhiu kiu font khc nhau, bn hy s dng thuc tnh face ca tag <font> thc hin vic i font ch. <font face = "fontname"> ... </font> trong fontname l tn ca font ch c trn my tnh ca ngi c trang Web. Mun thm mu sc cho ch, ta thm thuc tnh color vo tag font V d: <font face = "Arial" color = "#FFFFFF"> ... </font> < font face = ".Vn3DH" color = "#EEBBBB">...</font>
13.1.c.Hin th ch s trn v ch s di Khi cn phi trnh by ch s trn hay ch s di, nh cc cng thc ho hc chng hn chng ta s dng cc tag <sup> ... </sup> cho ch s trn v <sub> ... </sub> cho ch s di.
13.2. Thc hnh Bn thn mn, bn hc c kh nhiu kin thc v lng v HTML, by gi bn hy p dng nhng kin thc hc to cho mnh mt trang Web vi mn hnh nn c mu sc, cc loi font ch khc nhau, cc hnh nh v siu lin kt...Khi lm nhiu trang Web bn s c nhiu kinh nghim trong vic chn font ch, chn mu sc ... t bn mi c th xy dng c nhng trang Web p c.
T khi hc bi u tin n by gi, chc nhiu khi bn thc mc: "Ti sao trang Web ca mnh li ch c hai mu en v trng, trong khi cc trang Web mnh nhn thy u c trang tr rt p". Xin bn hy yn tm, bi ny s gip bn gii quyt thc mc . 14.1.a.C bn v mu sc Trong mt trnh duyt Web, bn c th s dng 256 mu trang tr cho vn bn v nn. Mi mu c xc nh bi b ba Red-Green-Blue (RGB), cc gi tr ca R, G, B t 0 n 255 th hin cng ca n. V d khi c ba c gi tr nh nht (R=0, G=0, B=0) th s cho ta mu en v khi c ba c gi tr ln nht (R=255, G=255, B=255) th cho ta mu trng. B ba RGB vi cc gi tr khc nhau s cho ta cc mu khc nhau. Trong HTML, khi mun s dng mt mu no , thay v dng cc gi tr ca R, G, B h thp phn, bn phi biu din chng dng h 16. V d: Mu trng ng vi R=255, G=255, B=255 c biu din l FFFFFF. Mu "4520FE" tc l R = 45 (H 16) G = 20 (H 16) B = FE (H 16) tng ng vi R = 69 (H 10) G = 32 (H 10) B = 254 (H 10) V d v mt s mu thng thng 14.1.b.Mu nn c nh thm mu cho trang Web ca mnh, bn hy thm cc thuc tnh sau vo trang tag <body> bgcolor = #XXXXXX text = #XXXXXX link = #XXXXXX
vlink = #XXXXXX Trong bgcolor = Xc nh mu sc ca nn text = Xc nh mu sc ca vn bn link = Xc nh mu sc ca siu lin kt vlink = Xc nh mu sc ca siu lin kt xem qua cn XXXXXX l k hiu mu dng thp lc phn (c du # trc) V d: <body bgcolor = #000000 text = # EEEEBB link = #33CCFF vlink = #CC0000> S cho nn mu en, ch mu vng, siu lin kt mu xanh dng sng, siu lin kt xem mu .
Hex Code
FFCCCC 33FF66 663300 000077 EEEEEE 444444
Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx
Hex Code
3300FF AA0000 9900FF FFFF00 888888 000000
Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx
Name
aqua blue gray lime navy purple silver white
Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx
Name
black fuchsia green maroon olive red teal yellow
14.1.c.Trang tr nn bng hnh nh Nu bn mun mu nn ca trang Web ca bn p hn, bn c th dng mt file nh nh trang tr cho nn. Khi , HTML s to cc bn sao lin tc ca file nh ph ht nn ca trang Web. dng hnh nh lm nn cho trang Web, ta dng thuc tnh background trong tag <body> <body background = "filename"> Trong filename l tn file nh m bn dng lm nn. 14.2.Thc hnh 1.To mt file HTML v chun b mt hnh nh lm nn, v d nh sau c tn l strawb.jpg
Thm vo tag body thuc tnh background nh sau: <body background = "strawb.jpg"> 2.Lu cng vic ca bn, m trn trnh duyt v so snh vi v d mu:
- Sau khi c khoanh vng v to cc siu lin kt, by gi, nh trn s c lin kt ti nhiu trang Web khc, bn hy th click vo cc tn tng ng trn nh v xem kt qu.
to ra c mt hnh nh vi nhiu lin kt, ti nhiu trang Web khc nhau, HTML cung cp cho chng ta tag <map>, cch lm nh sau : 1.Chun b mt hnh nh to cc siu lin kt : Trong v d trn, nh c tn l : lienket.jpg, khi a hnh nh ny vo trang Web, trong tag <img> bn s dng thuc tnh usemap nh sau : <img src = "lienket.jpg" usemap = "map_name"> trong map_name l phn m bn nh ngha cc vng ca nh t to cc siu lin kt. 2.nh ngha cc vng to siu lin kt : to cc vng ta s dng tag <map> nh sau : <map name = "map_name"> <area shape = "rect" coords = "x1,y1,x2,y2" href = "URL"> <area shape = "rect" coords = "x4,y4,x5,y5" href = "URL"> .... </map> Trong tag <area> nh ngha mt vng c hnh l thuc gi tr ca thuc tnh shape = "", c to l gi tr ca thuc tnh coords = "", trong v d trn vng to siu lin kt l vng hnh ch nht (rect) c to gc trn bn tri l x1,y1 to gc di bn phi l x2,y2 v lin kt ti trang Web l gi tr ca thuc tnh href = "" on m HTML ca v d trn nh sau : <map name="FPMap0"> <area href="http://www.hut.edu.vn" shape="rect" coords="0, 10, 140, 34"> <area href="http://www.vnn.vn" shape="rect" coords="13, 40, 93, 62"> <area href="http://www.tlnet.com.vn" shape="rect" coords="33, 77, 173, 100"> <area href="http://www.netnam.vn" shape="rect" coords="53, 108, 157, 132"> <area href="http://www.fpt.vn" shape="rect" coords="71, 135, 146, 158"> </map> <img border="0"src="Image/lienket.jpg" usemap="FPMap0" width="180"height="162"> 15.2.Thc hnh
By gi bn hy chun b mt hnh nh v dng tag <map>, v th to mt trang Web c cc siu lin kt xut pht t mt hnh nh nh trong bi hc. Chc bn thnh cng.
16. Bng
16.1. Bi hc Vic trnh by trang Web theo dng bng s lm cho trang Web ca bn chuyn nghip hn. Vi dng bng bn c th chia trang Web thnh nhiu phn, bn c th p dng cc kin thc hc trang tr ring cho tng phn... Khi xy dng bng, bn hy nh quy tc sau: bt u t cao nht bn tri, tip theo xy dng cc ca hng u tin, sau chuyn xung hng th hai, xy dng cc phn t ca hng th 2... --> --> --> --> ---> --> | ---------------------------| --> --> --> --> ---> --> 16.1.a. Nhng tag c bn ca bng tm hiu v cc tag c bn ca bng, trc ht ta xt v d sau. <table border = 1> <tr> <td> Hng 1 ct 1 </td> <td> Hng 1 ct 2 </td> <td> Hng 1 ct 3 </td> </tr>
<tr> <td> Hng 2 ct 1 </td> <td> Hng 2 ct 2 </td> <td> Hng 2 ct 3 </td> </tr> </table>
Trong tag <table> ta thy thuc tnh border c gi tr l 1, iu ny ngha l v 1 ng vin quanh bng vi dy l 1 im. Mi hng c xc nh bi <tr> v </tr> vit tt ca table row. Mi c nh ngha bi <td> v </td> vit tt ca table data. cn chnh l trong mi , bn thm cc thuc tnh sau vo tag <td>. Chnh l theo chiu ngang <td align = left> sp xp v bn tri <td align = right> sp xp v bn phi <td align = center> sp xp vo gia
16.1.b. Cc hng v ct Bng m bn to trn mi ch l bng n gin vi ba hng v ba ct u nhau. Bn hy ch cc bng sau. Bng 1
Bng 2
Bng 3
to c nhng bng nh trn, chng ta s dng cc thuc tnh colspan v rowspan trong tag <td> ... </td> Thuc tnh colspan=x c tc dng m rng ct ca bng, v d trong bng 1 m rng th 2 ca hng 1 ra rng bng hai ct bnh thng ta t: <td colspan = 2>Hng 1 ct 2-3</td> Thuc tnh rowspan c tc dng m rng hng ca bng, trong bng 2 m rng th 2 ca hng 2 ra rng bng 2 hng bnh thng ta t: <td rowspan = 2>Hng 2-3 ct 2</td> 16.1.c. iu khin xung hng trong mt . Trong mt , nu mun gi dng vn bn trn mt dng, tc l khng cho n xung hng th thm thuc tnh NOWRAP vo trong tag <TD> hoc <TH>.
Ngay sau tag <table>, bn g vo tag <catpion> ta ca bng, v kt thc bng tag ng </caption> <table > <caption align="center" valign="top"><u>Ta ca bng</u> </caption > <tr><td width="50%" align="center">Ct 1 - dng 1</td> <td width="50%">Ct 2 - dng 1</td> </tr> <tr><td width="50%" align="center">Ct 1 - dng 2</td> <td width="50%"><p align="center">Ct 2 - dng 2</td> </tr> </table> </body> Trong tag <caption> bn thy c thuc tnh valign="top", ngha l to ta trn nh ca bng. Nu valign="bottom" th ta ca bng s y bng. 16.1.e.Thm cc thng s cho cc ng vin to ra bng Mun thay i thng s ca cc ng to bng ta thm cc thuc tnh cho tag <table> nh sau: <table border = X cellpadding = Y cellspacing = Z> X: Chiu rng ng vin ngoi bng
Y: "Khong trng" gia d liu bn trong v vch ngn ca Z: rng ca nhng ng bn trong bng chia cc V d bng sau c tag <table> nh sau: <table border=3 cellpadding=4 cellspacing=8>
Khi border = 0 th ta s c mt bng khng c bt k mt ng vin no. Dng bng dng ny sp xp vn bn theo cc hng thng ng. i vi d liu trong bng bn vn c th p dng cc tag hc nh v d sau y chia mn hnh thnh hai ct danh sch trong mi ct l mt siu lin kt <div align=center> <h2>Cc Website vit nam</h2> <table border="0" cellpadding =2 cellspacing =20> <tr> <td align=left><a href ="http://www.vnn.vn"> Cng ty VASC - VNN</a> </td> <td ><a href ="http://www.tlnet.com.vn"> Mng Phng nam</a></td> </tr> <tr> <td><a href ="http://www.fpt.vn">Cng ty FPT</a></td> <td ><a href ="http://www.saigonnet.vn">Si gn net</a></td> </tr> <tr> <td><a href ="http://www.netnam.vn"> Cng ty Netna@m</a></td> <td><a href ="http://www.vinaone.com.vn">Mng ca B thng mi</a></td>
16.1.f.Thm mu sc cho bng t mu cho bng, ta thm thuc tnh bgcolor vi gi tr mu tng ng vo cc tag ca bng. T mu nn cho ton bng <table bgcolor = #XXXXXX> T mu nn cho 1 hng <tr bgcolor = #XXXXXX> T mu nn cho 1 <td bgcolor = #XXXXXX> Trong XXXXXX l cc gi tr mu V d Khi cha t mu c bng
Khi t mu c bng bng cch thm thuc tnh bgcolor vo tag <table>
16.2.Thc hnh Bn hy ng dng cc tag v xy dng bng xy dng mt danh sch, v d danh sch lp. Yu cu bng c thuc tnh border = 0 v mi tn trong danh sch l mt siu lin kt n a ch th in t ca ngi tng ng. Sau khi xy dng xong danh sch v siu lin kt, bn c th thm mu sc vo bng cho p.
17. Forms
Form l mt yu t khng th thiu c th giao tip vi my ch. N c dng nhp d liu, la chn cc khon mc,... Trong qu trnh lin kt vi CGI Script, forms cho php bn la chn thng tin t ngi dng v lu tr n cho ln s dng sau. Trong bi hc ny ta s cch to form bng cc tag n ca HTML. Khi to form, ta cn lu nht hai phn l tn nhn dng (identifier) v gi tr (value) ca form . V d : Trong hp text box vi tn l FirstName, ngi s dng g vo VASC, th d liu gi n server l FirstName=VASC. tag : <Form METHOD="" ACTION=""> <...cc tag khc...> </form> nm gia hai tag BODY trong thuc tnh METHOD c hai gi tr l POST v GET. Nu gi tr l POST, n cho php gi d liu t my Client n Server (thng c s dng trong Form nhp liu). Cn vi GET th ch c s dng trong Form vn tin. Cn ACTION ch ra v tr ca CGI Script trn Server s c thc hin. Cc tag trong Form thng dng ch yu l <INPUT>, <SELECT>, <OPTION>. Chng ta s ln lt xt mt s Form n gin nh sau :
Text Blocks : To ra vng vn bn, c th nhp nhiu dng. Text Boxes : nhp vo mt dng n. Password Boxes : Form ny ging Text Boxes nhng khng hin th cc k t. Radio Buttons : Cc nt la chn mt. Check Boxes : Hp Check Boxes. Menus : To ra hp Menu y xung. Submit and Reset Buttons : Cc Button nhn thng tin v khi to li thng tin trn form. Hidden Elements : Cc yu t n. Active Images :To bc nh kch hot. CGI Script :Common Gateway Interface Script.
17.1. Bi hc.
c vit bng Perl hay mt chng trnh giao tip gia ngi v my, v c kh nng thc hin c lp. CGI Script c dng kch hot mt chng trnh trn server, ly thng tin v sau thng bo li cho ngi s dng. V d bn c th dng CGI Script gi chng trnh ngy trn server v thng bo kt qu trn trang web. to mt lin kt n CGI Script bn hy dng tag <a href="http://www.site.com/CGI-BIN/path/cgiscript>vn bn lin kt</a>. Trong http://www/site/com l tn ca server cha CGI Script. CGI-BIN l v tr ca CGI Script trn UNIX server. /path ch ra ng dn ti cgi-script nu khng tm thy trong th mc cgi-bin chnh.
17.2. Thc hnh. Sau khi hc l thuyt song, bn hy thc tp nh li cc kin thc hc. Bn hy to mt form nhp h tn, ni , mt khu v mt s thng tin khc nh bng di y. Trong form H tn, ni dng text box, form mt khu dng password. gii tnh s dng hai radio button Nam v N, bn nh l ch c php chn mt trong hai m thi. Form thnh ph s dng pop-up menu, c cc thnh ph H Ni, Hi Phng,... cng ch c chn mt ni duy nht. Cui cng l text block Thng tin thm ngi dng ghi ch thm nu cn. Sau khi nhp song, click vo Submit gi thng tin n Server.
Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: i-today@vasc.vnn.vn
Trong bi hc ny cc bn s hc cch gi mt file m thanh v mt hot cnh video vo trang web ca cc bn.
Bi hc.
Sound.
s dng mt file nhc lm m thanh nn ta dng tag <bgsound src="sound.ext" Loop="">. Tag ny khng c tag kt thc. Thuc tnh src ch ra ng dn n file m thanh sound.ext trn server ; Cn thuc tnh Loop cho php lp li nhiu ln nu mun, gi tr ca n l mt s nguyn, v nu bng -1 th s lp v hn. Tag ny c t gia hai tag <head> v </head> Ngay sau khi c truy cp, trang web ca bn s ngay lp tc "chi" file sound.ext. By gi ta s to mt lin kt c th chi nhc. Gi s khi ta click ln mt hnh nh hay mt dng ch no th qu trnh chi nhc mi bt u. Ta s s dng tag sau : <a href src="sound.ext"> text lin kt </a>. V d bn hy Click vo y bt u nghe nhc. Bn cng c th thay phn text lin kt bng mt file nh no nh chn tag <img src=""> vo gia hai tag <a>v </a>. Khi click vo nh th s bt u chi nhc.
Video.
Tng t, ta cng dng tag <a href src="video.ext"> lin kt </a>. Vi video.ext l tn file hnh nh trn server, v d "http://www.windows.com/LocalName/flower.avi" chng hn. Vi cch s dng tag trn, bn phi nghe nhc bng trnh nghe nhc ca h iu hnh. c th tch hp v iu khin qu trnh nghe v xem bn hy s dng tag : <embed src="file.ext">. Vi tag ny, bn c th nghe nhc bt c lc no, mun lp li hoc iu khin n on nhc no tu bn. Tht l tin phi khng bn.
Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: i-today@vasc.vnn.vn
20.1.Bi hc Trc khi vo bi hc, bn hy k mt cht trang ny, khi bn scroll c vn bn th phn t hnh nh v tn bi hc vn ng im, khng b di chuyn. Trang Web c trnh by theo kiu chia thnh cc phn c lp vi nhau gi l frame. Bn c th chia trang Web thnh nhiu phn tu thch, v d :
Khi bn chia trang Web ca mnh ra bao nhiu frame th bn phi to ra by nhiu file HTML mi frame hin th mt file HTML. Thng thng on m ca mt file HTML c chia thnh cc frame nh sau : <html> <head> <title>Tiu trang Web ca bn</title> </head> <frameset rows/cols = "X,Y,..,Z"> <frame name = "frame_name1" src = "URL1"> <frame name = "frame_name2" src = "URL2"> ........ <frame name = "frame_namen" src = "URLn"> </frameset> <noframes> Sorry ! Trnh duyt ca bn khng h tr frame </noframes> </html>
Trong tag <frameset> c tc dng ch ra cch chia frame theo chiu ngang hay chiu dc. Nu bn nh phn chia theo chiu dc th dng tag <frameset> nh sau : <frameset cols = "X,Y,..,Z"> Vi X,Y,..,Z l rng ca cc frame, bn c th cho gi tr l im, phn trm...,v d <frameset cols = "170,530"> <frameset cols = "15%,85%"> <frameset cols = "170,*"> trong v d cui cng bn thy c du *. Du * cho bit trc ht chia cho mt frame rng l 170, phn cn li dnh ht cho frame cn li. Cch lm tng t i vi trang chia theo chiu ngang. Tag <frame> c tc dng nh ngha mt frame. Frame ny s c tn l gi tr ca thuc tnh name = "" v hin th file HTML c tn l gi tr ca thuc tnh src ="" Tag <noframes> ... </noframes> dng hin th thng bo khi trnh duyt ca ngi c Web khng h tr frame, v d <noframes> Sorry ! Trnh duyt ca bn khng h tr frame </noframes> V d khi mun chia mt trang Web nh sau :
bn phi lm nh sau : <html> <head> <title>A More Complex Framed Page</title> </head> <FRAMESET ROWS="120,*>
<FRAME SRC="row1.html"> <FRAMESET COLS="75%,25%> <FRAMESET ROWS="60%,40%> <FRAME SRC="row2col1row1.html"> <FRAME SRC="row2col1row2.html"> </frameset> <FRAMESET ROWS="100,*> <FRAME SRC="row2col21row1.html"> <FRAME SRC="row2col21row2.html"> </frameset> </frameset> </frameset> <NOFRAMES> This is what someone would see who does not have a web browser that can display frames </NOFRAMES> </html> Thng thng, mt trang Web c trnh by nh sau :
trong gi s frame lm menu c tn l menu v frame hin th thng tin c tn l display. Khi click ln cc siu lin kt frame menu th ni dung ca cc trang tng ng hin ln frame display, lm c iu , trong file HTML ca frame menu bn a thm tag <base> vo ngay sau tag <body> ... <body> <base target = "display"> ... Khi bn khng mun hin th border ca frame, bn thm thuc tnh border = "0" v frameborder = "0" vo tag <frameset>
<FRAMESET ROWS="45,*,150" BORDER=0 frameborder="0"> Trong trnh duyt bn khng mun thay i kch thc ca frame, bn thm thuc tnh NoResize vo trong tag <frame> <FRAME NAME="myfixedframe" border=8 frameborder="1" SRC="fixed.html" NORESIZE> 20.2.Thc hnh Bn hc xong cch chia trang Web thnh cc frame, by gi bn hy t mnh chia cc trang web thnh cc frame nh trong cc hnh 1,2,3,4,5,6,8. Cc bn thn mn, qua cc bi hc, cc bn nm c kh vng nhng khin thc c bn nht v HTML. Gi y bn c th xy dng cho ring mnh mt trang web p mt chng km g cc trang m bn thy trn mng, v d nh xy dng trang web v gia nh bn hay mt nhm bn b thn thit ca bn chng hn.