You are on page 1of 64

Phn I. K nng c bn 1.1 HTML l g?

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.

1.2 Cu trc ca mt file HTML


1.2.1. Th (tag) HTML l g. Khi trnh duyt Web c mt file HTML, n s tm trong file cc tag hay nhng on m c bit bit cch hin th file HTML . V d: Khi trong file HTML c on <h3> Cu trc ca file HTML </h3> th s hin th on "Cu trc ca file HTML" ln trn mn hnh vi mc tiu thc 3 (s ni k phn sau).

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>.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

2. To file HTML u tin.


Sau khi c phn trn, bn bit th no l th HTML v cu trc chung ca mt file HTML. Sau y chng ta s cng to ra file HTML u tin. 1. M Notepad ca Windows hay bt k mt trnh son tho vn bn no c th to ra nhng vn bn trn (plain text). Nu bn dng Microsoft Word th phi lu tr dng ASCII. 2. Bn hy nhp nhng dng vn bn sau <html> <head> <title>Chn tri tri thc - Internet today </title> </head> <body> 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... </body> </html> 3. Lu file vi phn m rng l htm. V d Bai1.htm.

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

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

3. Hin th vn bn dng m, nghing, gch chn...


3.1.Bi hc Khi trnh by mt trang Web, c lc cn nhn mnh, hay to s khc bit, bn cn phi hin th vn bn cc dng m, nghing, gch chn... HTML c cc tag nh dng kiu ch gip bn. HTML <u>y l tag gch chn</u> <i>y l tag nghing </i> Kt qu y l tag gch chn y l tag nghing

<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

y l tag m y l tag Strong y l tag Strong y l tag strikeline

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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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 1 <!-- H1 c 36 -->


Tiu c 2
Tiu c 3

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>

Tp ch Internet Today<br> <hr> Th kt qu nh sau :

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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 c th xung dng. Bn c th dng du cch thoi mi.... </pre> S c hin th nh sau:

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

6. Thm mt kiu trnh by cho trang Web ca bn


6.1.Bi hc lm cho mt khi vn bn ni hn, v d mt on trch dn, mt li khuyn... v lm cho trang Web ca bn trnh by c p hn, chng ta s dng tag <blockquote> on vn bn nm trong cp tag <blockquote> v </bockquote> s c trnh by tht vo so vi phn thn vn bn. V d nhn thy on vn bn nh sau:

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 &lt;blockquote &gt; <blockquote> <hr> Trnh by on vn bn bng tag &lt;blockquote &gt; 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>

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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>&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml; </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: &lt; thay cho < &gt; thay cho > &amp; thay cho &

V d: hin th 700 > 400 ta vit nh sau: 700 &gt; 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 &nbsp; Ngoi cc k hiu m t trn, HTML cn cung cp thm cho chng ta mt s k hiu c bit na, l: &copy; thay cho &reg; 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:&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml; <li>Cc du ln hn, nh hn, du v : &gt;&nbsp;&lt;&nbsp;&amp; <li>Cc du Copyright v Trademark : &copy;&nbsp;&reg

</ul> 2.Lu cng vic ca bn v so snh vi v d mu:

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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

8. a hnh nh vo mt trang Web


8.1.Bi hc Sau khi hc cc bi trc chc bn vn cn thc mc, sao trang Web ca mnh xu t, khng ging cc trang trn Internet m bn tng xem qua. Bnh tnh i bn , Sau khi hc bi ny, bn s c th a hnh nh vo trang Web ca mnh v bn s cm thy trang Web ca mnh cng tht hp dn. t mt hnh nh vo trong trang Web ca mnh bn dng tag sau <img src = "Tn nh">

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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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:

so vi khng c thuc tnh align:

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 c thm tag <br clear = all>

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>

So vi khi khng c cc thuc tnh vspace v hspace

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>

<div align = right> ... </div>

<div align = center> ... </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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

10. To cc siu lin kt


iu thc s lm cho Web ni tri l kh nng to ra cc mi lin kt n cc thng tin lin quan. Nhng thng tin ny c th nm trong chnh trang Web hay nm cc trang Web khc bao gm hnh nh, m thanh, on phim...

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

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

11. Thm a ch, lin kt E-mail vo trang Web ca bn


11.1. Bi hc Nh bn vn thng thy trong cc trang Web trn Internet, phn cui mi trang thng c cc thng tin v trang Web, chng hn nh: Tiu hay ch ca trang hin thi Ngy cp nht gn y nht Bn quyn Tn v E-mail ca tc gi ca trang Web

... 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>

2.Lu cng vic ca bn v so snh vi v d mu:

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

Phn 2. Nng cao


12. To cc danh sch
12.1. Bi hc Danh sch c dng trnh by thng tin thnh mt dng d c hn. Chng hn to ra cc bng ch mc, ni dung ca mt dy cc ti liu hay cc chng. HTML c hai kiu danh sch, danh sch c th t (ordered) v danh sch khng c th t (unorder). Danh sch khng c th t. Danh sch khng c th t c cc mc bt u bng cc "butllet" hoc cc k hiu nh du trc. to ra danh sch khng c th t ta dng cc tag sau:

<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:

c trang web trn, bn phi nh on m sau: <h3>V d v danh sch nh ngha<h3>

<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>

Ta c danh sch nh sau :

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

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

13. Trang tr cho vn bn


13.1.Bi hc Qua cc bi hc trc bn bit cch thm mu sc cho nn v vn bn thng qua vic thit lp cc thuc tnh cho tag <body>. Trong bi ny bn s hc cch thay i mu sc, kch thc, font ch ca phn vn bn trong trang Web ca bn. 13.1.a.C font Khi mun thay i c font th dng <font size = X> ... </font> Trong X l c font c gi tr t 1 (nh nht) n 7 (ln nht) V d:
C font 1

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.

V d: c NH4, ta phi vit NH<sub>4</sub> c x2 ta phi vit x<sup>2</sup>

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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

14. Thm mu sc cho trang Web ca bn


14.1.Bi hc

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 .

Sau y l mt s mu c bn v k hiu tng ng Color


xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx

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:

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

15.Thm mt cht v siu lin kt bng hnh nh


15.1.Bi hc Trong cc bi hc trc, bn hc c cch to cc siu lin kt bng hnh nh. Bi ny s cung cp cho bn to ra nhiu siu lin kt t cng mt hnh nh bng cch chia hnh nh thnh cc vng, mi vng lin kt ti mt trang Web khc nhau. Trc ht mi bn xem v d sau : - Vi hnh nh nh sau :

- 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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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>.

16.1.d. Thm u vo bng (caption)

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>

</tr> </table> </div>

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.

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

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.

Text Blocks : <textarea rows="" cols="" name=""> Text... </textarea>


Trong cols l chiu rng ca vng vn bn tnh theo k t. rows : chiu cao vng vn bn tnh theo hng. Name l thuc tnh nhn dng, s dng trong Script. Cc bn lu l Text Blocks khng bt u bng tag INPUT.

Text Boxes : <input type="text" name="" maxlength="" size="" value="">


Trong size ch chiu di ca Text Boxes. Maxlength, minlength ch s k t ti a hay ti thiu c th nhp vo. value l gi tr kiu xu c hin th. Xin hy cho bit tn ca bn :

Password Boxes : <input type="password" minlength="" name="" size="">


Xin hy cho bit mt m : Cc thuc tnh u ging vi Text Boxes. Ch khc l khi bn nhp d liu th cc k t khng c hin th.

Radio Buttons : <input type="radio" name="" checked value="">La chn


value cha d liu s gi n Server khi Radio Button checked. la chn 1 la chn 2

Check Boxes : <input type="checkbox" name="" value="" checked>La chn


Hp Check Boxes c cc thuc tnh thnh phn ging nh Radio Button. thuc tnh la chn l phn vn bn ghi pha sau nt check box. la chn 1 la chn 2

Menus : <select size="" multiple><option selected value="">Text...</option> </select>


Cng ging nh Text Blocks, Menu khng bt u t INPUT m l SELECT. Thuc tnh multiple cho php bn chn nhiu mc, nu khng c thuc tnh ny th n s l mt menu y xung. Mi la chn ca bn c m t bng cc tag OPTION, v bn c th ngm nh l c multiple khng c multiple

n c chn bng thuc tnh selected.

Submit and Reset Buttons :


Nt Submit l nt server c th ly thng tin t ngi s dng. Sau khi nhp liu song, ngi dng n vo Submit th mi thng tin s gi n server. Nu c thng tin sai quy nh th lp tc server s gi tr li km vi thng tin bo li. Cn nt Reset s khi to li ton b cc gi tr ca form bng cc gi tr mc nh. <Input type="submit" name="" value="Submit Button"> <Input type="reset" name="" value="Reset Button"> Thuc tnh value cha phn text hin th trn nt bm. Bn cm lu nt Reset ch khi ng li cc gi tr trong cng mt form m thi.

Hidden Elements : <Input type="hidden" name="" value="">


Hidden Elements c bn s dng lu tr thng tin thu c t form trc , do n c th kt hp vi d liu ca form hin ti. V d : nu form trc ban ngh cho bit tn, bn c th lu li bi mt bin v thm n vo mt form mi nh l mt hidden element, sau name s c lin kt thng tin mi thu c m khng cn ngi dng nhp li tn nhiu ln. Cc Hidden Elements khng bao gi hin trn mi browser ng vi ci tn ca n. Tag ny c hai thuc tnh, thuc tnh name l tn ca thng tin c lu tr, cn value thng tin m bn thn n c lu li.

Active Images : <input type="image" src="" name="">


Thuc tnh cha trong src ch ra ng dn ti file nh trn server. Thuc tnh name cho mt tn. Khi ngi dng click vo nh th to x v y ca chut hin hnh s c b sung vo trng name ny v gi n server. V D : Gi s my ch mun bit bn t ni no n, n cho bn mt bn th gii. Bn ch vic click ln bn , gi s bn sinh ra Vit nam th ch vic tm ng nc Vit nam v click ln .

CGI Script : (A Common Gateway Interface Script)


L mt chng trnh c kch hot bi ngi s dng bng cch click ln URL. N c th c vit bng ngn ng my tnh nh C hay Pascal, hoc

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.

on m ny l script to ra mt trang HTML, n ly ngy trn server v chn vo trang HTML

bn hy copy ton b on m trong text block ny vo trang web l c th ly ngy gi.

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.

Chc bn thnh cng.

Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: i-today@vasc.vnn.vn

18. Multimedia - Nu bn c loa, hy vn to ln...


Cc bn thn mn, mt trong nhng yu t khng th thiu lm trang web ca bn sinh ng hn v hon ho hn l m thanh v hnh nh ng. Hin nay cc trnh duyt web c th nhn dng c rt nhiu loi m thanh v hnh nh khc nhau. Nhng c mt vn l nh bn bit, kch thc ca cc file media rt ln. mt file m thanh cht lng tt c thi gian 10 giy th kch thc ca n c 200K v ti xung phi mt t nht l mt pht. Phi ngi ch n mt pht trn my ch c gng c nghe nhc th qu l khng th chp nhn c, hn na sau khi ti xung bi ht khng hay th li cng bc mnh hn. V l do nh vy chng ti khuyn cc bn nn la chn cc kiu file thch hp, c kch thc cng nh cng tt. V d nh cc file m thanh midi (*.mid) hay file ra (*.ra) m hin nay c s dng ch yu trn mng, v cc file video avi (*.avi)...

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.

a m thanh vo trang web ca bn Xem Video trn trang web

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.

n y bn c th lm cho trang web ca bn sinh ng hn ri y. Chc bn thnh cng .

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.

Chc bn thnh cng

Bn quyn Cng ty Pht trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn

You might also like