Ngôn ng

HTML
ào Vi t C ng Khoa CNTT- HSP Hà N i CNTTdvc102@yahoo.com | cuongdv@hnue.edu.vn http://user.hnue.edu.vn/~cuongdv/

Gi i thi u 
HTML=HyperText Markup Language ± Ngôn ng ánh d u siêu v n b n ± Ngôn ng vi t các trang web.  Do Tim Berner Lee phát minh và c W3C (World Wide Web Consortium) a thành chu n n m 1994.

c i m 
HTML s d ng các th (tags) d ng d li u  HTML không phân bi t ch th ng nh

hoa, ch 

Các trình duy t th ng không báo l i cú pháp HTML. N u vi t sai cú pháp ch d n n k t qu hi n th không úng v i d nh.

<img>« ± Th óng t ng ng: </tên_th > óng Ví d : </u>. <p>.  Có 2 lo i th : th  Cách vi t th : ± Th m : <tên_th > Ví d : <u>. </p> Chú ý: luôn có th m nh ng có th không có th t ng ng. Ví d : <img> không có th óng óng và th m .Th (tag)  Có nhi u th . m i th có 1 tên và mang ý ngh a khác nhau.

thu c tính m i trình duy t là khác nhau. thu c tính c b n.Thu c tính (property) c a th  M t th có th có các thu c tính nh m b sung tác d ng cho th  M i thu c tính có tên thu c tính (tên_TT)  Vi t th có thu c tính: <tên_th tên_TT1=³giá_tr 1´ tên_TT2=³giá_tr 2´«>  Chú ý: ± Có th thay i th t . Ch gi ng nhau các th . ± Th óng c a th có thu c tính v n vi t bình th (</tên_th >) ng . s l không gây ra l i cú pháp ng các thu c tính mà ± S h tr các th .

Turbo Pascal.Trang web u tiên  Trang HTML có ph n m r ng ( uôi) là .«)  Có nhi u trình so n th o HTML cho phép NSD so n th o tr c quan. k t qu sinh ra HTML t ng ng nh : ± Microsoft FrontPage ± Macromedia Dreamweaver ± « . EditPlus.HTM ho c .HTML  Có th t o trang HTML b ng b t c trình so n th o ³v n b n thu n´ nào (Notepad.

Trang web  So n th o: u tiên (tt) i ± M trình so n th o v n b n thu n (VD Notepad) gõ ND d ± Ghi l i v i tên ³CHAO.HTM´ <html> <head> <title>Chao hoi</title> </head> <body> Chao mung ban den voi <U>HTML</U>! </body> </html> .

s a l i n i dung trang web r i ghi l i ± Chuy n sang IE. nh n nút Refresh (F5) th y k t qu m i  Ghi chú: Các th c nêu ti p theo m c nh t trong ph n <body>«</body> .Trang web  Th nghi m: ± M trình duy t web (IE) ± Vào File/Open.HTM v a ghi ± Nh n OK Có k t qu nh hình bên u tiên (tt)  Thay i: ± Quay l i Notepad. ch n file CHAO.

‡ «  Ghi chú trong HTML: <!-.So n th o v n b n V nb n c so n th o nh các file HTML  L u ý: bình th ng trong ± M i kho ng tr ng. ‡ D u ngo c kép (³): &quot. &gt. ‡ Ký hi u •: &copy. ‡ D u nh h n (<) và l n h n (>): &lt.Ghi chú --> . d u xu ng dòng trong HTML hi n trên trang web là 1 kho ng tr ng duy nh t ± gõ m t s ký t c bi t ta ph i s d ng mã: c th ‡ Kho ng tr ng (trong tr ng h p mu n có nhi u h n 1 ký t tr ng): &nbsp.

BB #FFFFFF: Tr ng.« d ng hexa. GG.Th  nh d ng ký t m. RR. g ch chân: <b>«</b>. nghiêng. Ví d : c´ . #FF0000: . <u>«</u> i: <sub>«</sub>  Ch s trên:<sup>«</sup>  Ch s d  Font ch : <font>«</font> ± Thu c tính: ‡ face=³tên font ch ´ ‡ size=³kích th ‡ color=³màu´ ± Vi t b ng tên ti ng Anh (red. <i>«</i>. blue.«) ± Vi t d ng #RRGGBB.

ng t dòng c nh d n : v i kích th ± <h1>«</h1> . o n v n. justify  o n v n: <p>«</p> ± Thu c tính: ‡ align t ng t <h>  Ng t dòng: <br> . right.Tiêu  Tiêu ± « ± <h6>«</h6> Sau m i tiêu ± Thu c tính: .v nb nt ng xu ng dòng ‡ align=³cách c n ch nh l ´: left. center.

.2.Danh sách  Dùng li t kê các ph n t  Có 2 lo i: Danh sách có th t 1.  M t danh sách g m có nhi u ph n t  T o danh sách: ± Có th t : <OL>Các ph n t </OL> ± Không có th t : <UL>Các ph n t </UL>  T o 1 ph n t : <LI>Tiêu  M t ph n t ph n t </LI> có th là 1 danh sách con.« (Ordered List) và không có th t (Unordered List).3.

không có th ± Các thu c tính: ‡ src=³ a ch nh´: N u chèn nh trong cùng web site thì nên s d ng ng d n t ng i. nh r ng. cao c a ‡ border=³n´: n là s : kích th không có ng vi n c ng vi n nh. cao là n% óng r ng và cao c a nh: it ng r ng. ‡ alt=³chú thích cho nh´: s c hi n th khi trình duy t không hi n nh ho c nh l i ho c khi di chuy n chu t lên nh ‡ width=³r ng´. height=³cao´: ± n: (n là s ) Quy ± n%: Quy nh ch a nh. =0: nh ‡ align=³c n ch nh nh´: left. right. top. texttop.« .Chèn nh  Th <img>. middle. cao là n pixels r ng.

Khi ta kích chu t vào i t ng thì ph n n i dung s c hi n ra.  Ta g i: ± i t ng s d ng kích chu t vào là: i t ng liên k t. a ch n i dung s k t c hi n ra là ích liên ± .Siêu liên k t (Hyperlink)  Là kh n ng cho phép t o liên k t gi a 1 i t ng v i m t ph n n i dung. m t ph n c a nh. i t ng có th là: v n b n. hình nh.

Có m t s tên c bi t: ± _self: c a s hi n t i ± _blank: c a s m i ± Chú ý: ‡ Liên k t v i a ch e-mail thì t href=³mailto: a_ch _e-mail´ ‡ Th c hi n l nh JavaScript khi kích chu t vào thì href=³javascript:l nh´ t . ‡ target=³tên c a s ích´. Tên CS phân bi t ch hoa/th ng.Siêu liên k t (tt)  Th t o liên k t: <a> it ng liên k t</a> d ng ± Thu c tính: ‡ href=³ ích liên k t´: N u trong cùng web nên s ng d n t ng i.

m t dòng g m nhi u ô. ± T o dòng: <tr>«</tr>: B ng có bao nhiêu dòng thì có b y nhiêu c p th này ± T o ô: ‡ Ô tiêu c a b ng: <th>«</th> ‡ Ô d li u: <td>«</td> T ng s th <td> và <th> b ng s ô c a b ng. và ch có ô m i ch a d li u c a b ng.  Các th : ± T o b ng: <table>«</table>: M i b ng ch có 1 c p th này. Dòng có bao nhiêu ô thì có b y nhiêu th <td> và/ho c <th> n m trong c p th <tr>«</tr> t ng ng ‡ Chú ý: có c m t ô tr ng trong b ng (ô không có d li u) thì c n t n i dung ô là: &nbsp. .B ng bi u  HTML coi m t b ng g m nhi u dòng.

góc ô n n i dung ô . nh nh r ng. Có r ng. cao là n pixels r ng. t b ng 0 (m c nh): ± width=³r ng´. cao c a it ng ch a ± cellspacing=³s ´: Kho ng cách gi a 2 ô liên ti p ± cellpadding=³s ´: Kho ng cách t ± bgcolor=³màu´: màu n n c a b ng ± background=³ a_ch _ nh´: a ch c a file nh làm n n cho b ng. c ng vi n. height=³cao´: th t theo 2 cách: ‡ n: (n là s ) Quy ‡ n%: Quy b ng.B ng bi u -Thu c tính c a các th  <table> ± border=³s ´: kích th không có ng vi n. Nên s d ng ng d n t ng i n u có th . cao là n% r ng và cao c a b ng.

± valign=³c n l ng´: cách c n ch nh d li u trong ô theo chi u ng: top. ± colspan=³s ´: s c t mà ô này chi m (m c nh là 1) ± rowspan=³s ´: s dòng mà ô này chi m (m c nh là 1) ± nowrap: n u có s làm cho d li u trong ô không t xu ng dòng . cao là n% r ng. middle.B ng bi u -Thu c tính c a các th (tt)  <td>. Nên s d ng ng d n t ng i n u có th . height=³cao´: r ng và cao c a ô. ± align=³c n_l ´: cách c n ch nh d li u trong ô theo chi u ngang: left. bottom. justify. ± width=³r ng´. cao c a b ng. right. center. Có th t theo 2 cách: ‡ n: (n là s ) Quy nh r ng. cao là n pixels ‡ n%: Quy nh r ng.<th> ± bgcolor=³màu´: màu n n c a ô ± background=³ a_ch _ nh´: a ch c a file nh làm n n cho ô.

Form trên trang web .

 Ng i s d ng nh p d li u thông qua các i u khi n (controls). Radio Button 5. Oneline Textbox 3. Có nhi u lo i control: 1. D li u này có th c g i v server x lý. H p nh p v n b n nhi u dòng (TextArea) 9. Button 6. Checkbox 4. Form 2.Các it ng nh p d li u  Cho phép ng i s d ng nh p d li u trên trang web. Combo box (drop-down menu) 7. Listbox 8. « .

ns 5 c ngh a nh th <input> và thu c tính type s xác nh là i u khi n nào s c t o ra.Các it ng nh p d li u (tt)  T t c các i u khi n u có tên c quy nh qua thu c tính name. nh . Tuy nhiên có m ts i u khi n thì name không quan tr ng (các i u khi n mà sau này không c n l y d li u)  Các i u khi n t s 2.

action. Ch có 2 giá tr : ‡ GET (m c ‡ POST nh) .Form  S d ng ch a m i i t ng khác  Không nhìn th y khi trang web c hi n th  Quy nh m t s thu c tính quan tr ng nh method.  Th t o form: <form>«</form>  Các thu c tính: ± name=³tên_form´: Không quan tr ng l m ± action=³ a ch nh n d li u´: Nên s d ng ng d n t ng i n u n m trong cùng 1 web ± method=³ph ng th c g i d li u´.

H p nh p v n b n 1 dòng (Oneline Textbox)  S d ng nh p các v n b n ng n (trên 1 dòng) ho c m t kh u  Th : <input>  Thu c tính: ± name=³tên_ t´: quan tr ng ± type=³text´:Ô nh p v n b n th ± value=³giá tr m c nh´ ng ± type=³password´: ô nh p m t kh u .

± checked: n u có thì nút này m c c ch n nh a .  Th : <input>: m i ô nh p c n 1 th  Thu c tính: ± name=³tên_ t´: quan tr ng ± type=³checkbox´ ± value=³giá tr ´: ây là giá tr ch ng trình s nh n c n u NSD ch n ô này.Checkbox  Cho phép ch n nhi u l a ch n trong m t nhóm l a ch n c ra b ng cách ánh d u (³tích´).

 Th : <input>: M i ô c n 1 th  Thu c tính: ± name=³tên_ t´: quan tr ng. Các cùng tên thì thu c cùng nhóm.Option Button (Radio Button)  Cho phép ch n m t l a ch n trong m t nhóm l a ch n c a ra. ± checked: n u có thì nút này m c c ch n nh it ng . ± type=³radio´ ± value=³giá tr ´: ây là giá tr ch ng trình s nh n c n u NSD ch n ô này.  Trên 1 form có th có nhi u nhóm l a ch n ki u này.

± value=³tiêu nút´ ng (normal).Nút l nh (Button)  S d ng NSD ra l nh th c hi n công vi c. . ng ra l nh g i d i l p trình t x lý li u nh  Trên web có 3 lo i nút: ± submit: T ± reset: ± normal: ng am id li u v tr ng thái m c  Th : <input>  Thu c tính: ± name=³tên_ T´: th ng không quan tr ng ± type=³submit´: nút submit ± type=³reset´: nút reset ± type=³button´: nút thông th it s d ng.

T i m t th i i m ch có 1 ph n t c ch n  NSD có th ch n 1 ph n t trong danh sách x xu ng b ng cách kích vào m i tên bên ph i h p danh sách.Combo Box (Drop-down menu) (Drop Bao g m m t danh sách có nhi u ph n t .  Th t o h p danh sách: <select>Danh sách ph n t </select>  Thu c tính: ± name=³tên_ T´: quan tr ng  Th t o 1 ph n t trong danh sách: <option>Tiêu ph n t </option>  Thu c tính: ± value=³giá tr ´: giá tr ch ng trình nh n n u ph n t c ch n ± selected: n u có thì ph n t này m c nh ch n c c .

có th l a ch n nhi u ph n t  Th : <select>«</select>  Thu c tính: t ng t c a combo tuy nhiên có 2 thu c tính khác: ± size=³s dòng´ ± multiple: cho phép l a ch n nhi u ph n t cùng lúc  Th <option>«</option> t c a combo box ng t . tuy nhiên có th nhìn th y nhi u ph n t cùng lúc.Listbox  T ng t nh Combo box.

H p nh p v n b n nhi u dòng (TextArea)  Cho phép nh p v n b n dài trên nhi u dòng.  Th : <textarea> N i dung m c nh </textarea>  Thu c tính: ± name=³tên_ T´: quan tr ng ± rows=³s dòng´ ± cols=³s c t´ rows tính theo s dòng v n b n. . cols tính theo s ký t chu n trên dòng.

Khung (Frame)  Cho phép chia m t trang web làm nhi u ph n. m i ph n ch a n i dung c a 1 trang web khác  Trình duy t có th không h tr khung .

Khung (tt)  T o trang web ch a các khung: ± Thay th <body>«</body> b ng: <frameset> các khung </frameset> <noframes> n i dung trong tr ng h p trình duy t không h tr khung </noframes> .

ni là s .Khung (tt)  M t s thu c tính c a <frameset> ± rows = ³n1. n2. n2. có th thay b ng *: ph n còn l i ± frameborder = yes ho c no ± framespacing = ³n´: Kho ng cách gi a 2 khung . r ng dòng (c t) th i là ni. « nk´ ho c cols = ³n1. « nk´: Quy nh có k dòng (ho c c t).

Khung (tt)  T o 1 khung có n i dung là 1 trang web nào ó: <frame> ± Thu c tính: ‡ src=³ a ch ch a n i dung´ c thay i kích th c ‡ name=³tên khung´ ‡ noresize: Không  Th <base> m c ± Thu c tính ‡ target=³C a s ‡ href=³ a ch nh m c nh´ nh´ g c m c .

-1: m c ng ti n nh: mãi mãi.a ph  Âm thanh n n: <bgsound> ± Thu c tính: ‡ src=³ a ch file âm thanh´ ‡ loop=³n´: s l n l p. .

a ph  Video trên IE s Player ng ti n (tt) d ng Windows Media <object classid="clsid:22D6F312-B0F6-11D0-94AB0080C74C7E95³ id="MediaPlayer1³ width=³r ng´ height=³cao´> <param name="FileName" value=³ a ch file"> </object> .

0.com/pub/shock wave/cabs/flash/swflash.29.swf" quality="high" pluginspage="http://www.macromedia.0" width=³s " height=³s "> <param name="movie" value="ten_file.cab#version=6.swf"> <param name="quality" value="high"> <embed src="ten_file.macromedia.com/go/getflash player" type="application/x-shockwave-flash" width="s " height="s "></embed> </object> .Flash <object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" codebase="http://download.

Applet <applet code="ten_fle.class" width=³S " height="S "> </applet> .

M t s th meta thông d ng  Th <meta>: ± t gi a <head>«</head> nh thu c tính cho trang ± Th ng dùng quy web ± Có tác d ng l n v i Search Engine ± 2 cách vi t th <meta>: <META NAME="name" CONTENT="content"> <META HTTP-EQUIV="name" CONTENT="content"> .

charset=utf-8"> .url=new url">  <META HTTP-EQUIV="expires" CONTENT="date">  <META HTTP-EQUIV="Content-Type" CONTENT="text/html.M t s th meta thông d ng (tt)  <META NAME="description" content="">  <META NAME="keywords" content="">  <META NAME="author" CONTENT="author's name">  <META HTTP-EQUIV="refresh" CONTENT="delay.