Ph n I. K n ng c b n 1.1 HTML là gì?

HTML (Hyper Text Markup Language - Ngôn ng ánh d u siêu v n b n) là m t s nh d ng báo cho trình duy t Web (Web browser) bi t cách hi n th m t trang Web. Các trang Web th c ra không có gì khác ngoài v n b n cùng v i các th (tag) HTML c s p x p úng cách ho c các o n mã trình duy t Web bi t cách thông d ch và hi n th chúng lên trên màn hình.

1.2 C u trúc c a m t file HTML
1.2.1. Th (tag) HTML là gì. Khi trình duy t Web c m t file HTML, nó s tìm trong file ó các tag hay nh ng o n mã c bi t bi t cách hi n th file HTML ó. Ví d : Khi trong file HTML có o n <h3> C u trúc c a file HTML </h3> thì s hi n th o n "C u trúc c a file HTML" lên trên màn hình v i m c th c 3 (s nói k ph n sau). tiêu

Các tag HTML báo cho trình duy t bi t cách khi nào thì in m m t dòng v n b n, in nghiêng, bi n dòng v n b n thành m t siêu liên k t t i các trang Web khác, hi n th nh... Trong ví d trên ta th y sau tag <h3> và o n v n b n là tag </h3>. Trong tag </h3> ta th y có d u / , d u / n m trong 1 tag báo hi u cho trình duy t bi t là hi u ng c a tag ó ã k t thúc. Nh v y vi c s d ng m t tag HTML nh sau: ng </tên tag>. ng nên vi c

<tên tag> vùng v n b n ch u tác

Chú ý: Trình duy t không quan tâm tên tag là ch hoa hay ch th vi t <h3> và <H3> là nh nhau. 1.2.2. C u trúc c a m t file HTML.

File HTML bao gi c ng b t u b ng th <html> và k t thúc b ng th </html>. C p th này báo cho trình duy t Web bi t r ng nó ang c m t file có ch a các mã HTML, còn th </html> có tác d ng nh k t thúc file HTML. Bên trong c p th <html> ... </html> là các c p th <head> ... </head> và <body> ... </body> là ph n thân, t i ây b n có th nh p vào các o n v n b n cùng các th khác quy nh v nh d ng c a trang. Ngoài ra ghi chú thích, ti n cho vi c xem tag HTML ho c c p nh t m t trang Web, ta c n t chú thích vào gi a <!-- và -->. Tóm l i c u trúc c b n c a m t file HTML là <html> <head> <title> Tên trang </title> </head> <body> ..... <!-- V n b n và các th HTML --> .....

</body> </html>.

B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn

2. T o file HTML

u tiên.

Sau khi ã c ph n trên, b n ã bi t th nào là th HTML và c u trúc chung c a m t file HTML. Sau ây chúng ta s cùng t o ra file HTML u tiên. 1. M Notepad c a Windows hay b t k m t trình so n th o v n b n nào có th t o ra nh ng v n b n tr n (plain text). N u b n dùng Microsoft Word thì ph i l u tr d ng ASCII. 2. B n hãy nh p nh ng dòng v n b n sau <html> <head> <title>Chân tr i tri th c - Internet today </title> </head> <body> Chào m ng b n ã tham gia chuyên m c Chân tr i tri th c c a t p chí Công ngh Thông tin Internet Today. Trong ph n này b n s c h c nh ng ki n th c c b n v HTML, công c t o ra các trang Web. Sau khi ã h c xong v HTML b n có th t o ra nh ng trang Web y n t ng v i v n b n, hình nh, âm thanh... </body> </html>

L u ý: B n nên t o m t Folder riêng su t th i gian h c HTML. công c t o ra các trang Web..3.Internet today" và trong trang d i là "Chào m ng b n ã tham gia chuyên m c Chân tr i tri th c c a t p chí Công ngh Thông tin Internet Today.. nghiêng.htm.. Hi n th v n b n 3. Kh i ng IE ho c Nescape. hình nh. Sau khi ã h c xong v HTML b n có th t o ra nh ng trang Web y n t ng v i v n b n. Ch n File / Open." mà b n ã vi t trong ph n body B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. L u file v i ph n m r ng là htm. ch a các t p tin mà b n s t o ra trong m file 4.vnn. B n s nhìn th y trên tranh tiêu c a trình duy t là dòng ch "Chân tr i tri th c .vn 3. S d ng h p tho i HTML b n v a t o.1.Bài h c d ng m.. . Trong ph n này b n s c h c nh ng ki n th c c b n v HTML. Ví d Bai1. g ch chân. âm thanh. 5.

HTML <u>Ðây là tag g ch chân</u> <i>Ðây là tag nghiêng </i> <tt>Ðây là tag ch ánh máy</tt> <b>Ðây là tag m </b> <em>Ðây là tag </em> <strong>Ðây là tag strong</strong> <strike>Ðây là tag strong</strike> K t qu Ðây là tag g ch chân Ðây là tag nghiêng Ðây là tag ch ánh máy Ðây là tag m Ðây là tag Strong Ðây là tag Strong Ðây là tag strikeline c l ng vào nhau m t B n có th k t h p các tag này v i nhau. Lúc này file HTML c a b n trong ph n body có d ng nh sau. nghiêng.2. HTML có các tag nh d ng ki u ch giúp b n.. H n n a b n có th áp d ng các tag v i tiêu <h2> <i> .. <h3><b><i>Chú ý khi t o file HTML</i></b></h3> N u b n dùng các ch ng trình so n th o v n b n<b><u> khác NotePad c a Windows </u></b>thì b n ph i nh l u k t qu d ng v n b n tr n (ASCII) 3. 1. Ví d : <b> <i> .Khi trình bày m t trang Web. mi n là chúng cách chính xác. 4. b n c n ph i hi n th v n b n các d ng m.. </i> </b> Tag in nghiêng ph i n m trong tag in m. </i> <h2> 3. L u công vi c c a b n. có lúc c n nh n m nh. hay t o s khác bi t. Dùng trình duy t m và so sánh v i ví d m u..... . T o m t file HTML m i 2.. g ch chân. Thêm các tag nh d ng ki u ch .Th c hành áp d ng vào file HTML c a b n.

vnn. Tiêu Tiêu c 1 <!-.vn 4. HTML có các tag th c hi n vi c này. Bài h c Khi trình bày m t trang Web. ôi khi b n ph i c n n các tiêu theo các kích c . phông ch khác nhau.B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.H1 c 36 --> c 2 .1. Ð t o m t tiêu <hx> Tên tiêu chúng ta dùng <hx> n 6 ch kích c tiêu . Sáu m c tiêu 4. Sau ây là ví d Trong ó x là m t s có giá tr t 1 cho các c c a tiêu .

2. 4. 4. âm thanh.Th c hành Thêm các tiêu vào trang Web c a b n. Sau khi ã h c xong v HTML b n có th t o ra nh ng trang Web y n t ng v i v n b n.Tiêu Tiêu Tiêu Tiêu c 3 c 4 c 5 c 6. B n c n l u ý o n thêm vào ph i n m gi a <body> và </body> <h1>G i thi u chung</h1> vào tr c o n "Chào m ng b n ã tham gia chuyên m c Chân tr i tri th c c a t p chí Công ngh Thông tin Internet Today. công c t o ra các trang Web. Thêm o n sau vào file HTML. hình nh.2. 3. L u công vi c b n v a làm. n u b n th y khác b n có th ph i xem l i nh ng gì mình ã t o trong file HTML. Chia v n b n thành nhi u o n . Dùng trình duy t Web m file HTML b n v a t o và so sánh v i ví d m u... M l i file HTML mà b n ã t o ra b n mà b n ã dùng t o ra nó. Trong ph n này b n s ch c nh ng ki n th c c b n v HTML. 5. bài h c tr c b ng trình so n th o v n 1.

Tr c h t b n l i m file HTML mà b n ã t o t các bài h c tr c b ng trình so n th o v n b n. Ð a con tr so n th o b n trông gi ng nh sau. Chèn các d u chia o n vào file HTML c a b n. Ð chia o n HTML dùng tag <p> C ng l u ý r ng tag <hx> g n li n v i s chia o n nên b n không c n ph i <p> tr c <hx>. sau o n T p chí Internet Today là m t t p chí i n t chuyên v Công ngh thông tin. Chúng ta thêm o n m i vào v n b n. Sau khi ã h c xong v HTML b n có th t o ra nh ng trang Web y n t ng v i v n b n. thay vì v n b n nh c . t 2. n cu i o n u.. L u công vi c b n v a làm và m nó trên trình duy t c a b n. thêm tag <p>. Khi ó b n s trông th y k t qu trên trình duy t nh sau : B n c m th y có i u gì không úng ph i không? B i vì HTML b qua d u hi u xu ng dòng khi b n gõ Enter và b qua các dòng tr ng nên b n th y o n v n b n mà b n v a nh p dù có Enter xu ng dòng nh ng v n li n v i nhau.. hình nh. công c t o ra các trang Web. khi ó o n v n b n c a b n trông có v nh sau : Chào m ng b n ã tham gia chuyên m c Chân tr i tri th c c a t p chí Công ngh Thông tin Internet Today. Chúng tôi s giúp các b n tìm hi u và khám phá nh ng bí n c a HTML b n có th t t o ra các trang Web cho riêng mình 3. bây gi cu i m i dòng b n có th gõ Enter vài l n. âm thanh. 1. Lúc này o n v n . Trong ph n này b n s c h c nh ng ki n th c c b n v HTML. D ng trình so n th o v n b n m tile HTML mà b n ã t o t tr u c.

5. B n có th s d ng tag này khi t o m t danh sách. Dùng trình duy t m l i file HTML c a b n và so sánh v i ví d m u. Chúng tôi s giúp các b n tìm hi u và khám phá nh ng bí n c a HTML b n có th t t o ra các trang Web cho riêng mình 4.. âm thanh. Ví d : N u trong file HTML có o n sau gi a tag<body> và </body> <hr> Câu l c b Tin h c VNN1<br> . các o n v n b n ã Thêm m t s tag phân o n c tách nhau do tác d ng c a tag <p> <hr> Chèn m t ng th ng vào trang Web c a b n. ng dùng <br> Ð y v n b n xu ng m t dòng m i. tag này khác tag <p> ch nó không chèn thêm vào trang c a b n m t dòng tr ng nh tag <p>.. L u l i công vi c c a b n. Trong ph n này b n s c h c nh ng ki n th c c b n v HTML. hình nh. công c t o ra các trang Web. vi t các dòng c a m t bài th . Sau khi ã h c xong v HTML b n có th t o ra nh ng trang Web y n t ng v i v n b n.Chào m ng b n ã tham gia chuyên m c Chân tr i tri th c c a t p chí Công ngh Thông tin Internet Today. Nh b n th y. tag này th chia nh ng ph n chính c a trang Web. <p> T p chí Internet Today là m t t p chí i n t chuyên v Công ngh thông tin.

vn 5. trình duy t b qua các dòng tr ng.vnn.1.Bài h c Ph n này trình bày v cách hi n th các o n v n trong ó có c các kho ng tr ng và d u xu ng dòng.Câu l c b V n hoá VNN3<br> T p chí Internet Today<br> <hr> Thì k t qu nh sau : B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. Tuy nhiên b n v n có th hi n th cv n b n nh lúc b n nh p vào b ng cách s d ng tag <pre> Ví d . d u hi u xu ng dòng khi ta so n th o. Preformatled text 5. Nh b n ã bi t trong các ph n tr c.

1.. chúng ta s d ng tag <blockquote> . và làm cho trang Web c a b n trình bày c p h n.. ví d m t o n trích d n.vnn..vn 6. b n nh dùng B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.. Thêm m t ki u trình bày cho trang Web c a b n 6. B n có th dùng d u cách tho i mái. </pre> S c hi n th nh sau: úng nh b n so n th o.<pre> Khi b n mu n trình duy t Web hi n th tag <pre> B n có th xu ng dòng..Bài h c Ð làm cho m t kh i v n b n n i h n. m t l i khuyên.

2. Ví d nhìn th y o n v n b n nh sau: c trình B n ph i vi t nh sau: Khi c n trình bày m t o n v n b n lùi sâu vào bên trong so v i toàn b v n b n o nv nb n c n i b t h n. b n hãy xây d ng cho mình m t trang Web ch ng h n nh m t trang Web h ng d n h c ti ng Anh v i các hình nh. <blockquote> <hr> Trình bày o n v n b n b ng tag &lt. s làm cho o n v n b n c a b n n i b t h n.Th c hành V i nh ng ki n th c ã h c c. khi ó b n hãy dùng tag &lt. ví d b n c n hi n th m t chú ý. B n hãy th xem </hr> </blockquote> 6.blockquote &gt.blockquote &gt. và trang Web c a b n trông c ng s chuyên nghi p h n.Ðo n v n b n n m trong c p tag <blockquote> và </bockquote> s bày th t vào so v i ph n thân v n b n. siêu liên k t và các ghi chú dùng tag <blockquote> .

trong ó XXXX là tên mã cho các ký t c bi t ó. d u và (&)..&gt.&AElig..B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. mà các ký t này trùng v i ký hi u c a m t . Ví d n u trong ph n body có o n nh sau: <h2 align=center>&gt. ch ng h n nh ký t không ph i là ti ng Anh.vn 7.&ntilde.Bài h c c bi t Ðôi khi trong trang Web c a b n có các ký t c bi t. HTML quy nh vi c hi n th các ký t ó nh sau &XXXX.1. S d ng các ký t 7. </h2> Thì k t qu trên trình duy t là: Trong trang Web c a b n nhi u lúc ph i hi n th các ký t nh d u l n h n (>) ho c d u nh h n (<).&yuml. B n có th xem Danh sách các ký t c bi t này bi t thêm chi ti t.vnn.. m t d u nh n.&oacute..&gt..&THORN.&szlig.

ó là: &copy... thay cho â &reg. Mu n chèn kho ng tr ng ta dùng ký hi u &nbsp. HTML còn cung c p thêm cho chúng ta m t s ký hi u c bi t n a. Tuy nhiên trình bày trang Web cho p. ví d b n mu n m t kho ng tr ng sau d u ch m câu hay sau d u ph y. Th c hành 1. 400 Qua các bài h c tr c b n ã bi t r ng trình duy t Web b qua t t c các kho ng tr ng trong file HTML. thay cho Ví d 7. Ð hi n th các ký t này. Ngoài các ký hi u ã mô t trên.2. chèn kho ng tr ng vào u m i o n v n b n. thay cho < &gt. b n mu n chèn kho ng tr ng vào trong trang Web. thay cho > &amp. thay cho & Ví d : Ð hi n th 700 > 400 ta vi t nh sau: 700 &gt.T o m t file HTML sau ó thêm ph n sau vào trong ph n body HTML có th hi n th c các ký t c bi t nh : .tag. HTML cung c p cho ta các ký hi u thay th nh sau: &lt.

b n hãy Click vào ây xem B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. <li>Các d u Copyright và Trademark : &copy. nh h n. Ð a hình nh vào m t trang Web .&oacute. Cu i cùng chúng tôi b ng. a ra m t b ng các ký t .&reg </ul> 2.&THORN.&amp.&lt.&ntilde.&AElig.&yuml.&gt.&nbsp.&gt.&szlig.vnn. d u và : &gt. <li>Các d u l n h n.&nbsp.&nbsp.vn 8.L u công vi c c a b n và so sánh v i ví d m u: Chú ý: Ð hi n th úng các d u Copyright và Trademark n u b n dùng font Ti ng Vi t thì b n ph i i các d u sang font Ti ng Anh.<ul> <li>Các kýt latin:&gt.

align = middle 3.jpg ta làm nh sau <img src = "anh1. b n s có th a hình nh vào trang Web c a mình và b n s c m th y trang Web c a mình c ng th t h p d n. sao trang Web c a mình x u t .8. Bình t nh i b n .> còn có th có thêm các thu c tính hi n th v n b n so v i hình nh.1. Ví d : Ð chèn m t nh có tên là anh1.. không gi ng các trang trên Internet mà b n ã t ng xem qua. align = top 2.jpg"> tag <img. Ð t m t hình nh vào trong trang Web c a mình b n dùng tag sau <img src = "Tên nh"> Trong ó "Tên nh" là tên c a m t file nh cùng folder v i file HTML c a b n. Sau khi h c bài này.. Thu c tính align v i các giá tr khác nhau s cho ta các hi u ng nh sau. 1. align = bottom Ví d .Bài h c Sau khi h c các bài tr c ch c b n v n còn th c m c.

Các b n hãy tìm hi u thêm qua bài th c hành. Thu c tính alt = " ". Ví d <img src = ".2.Thêm m t s thu c tính c a tag <img.3.Ngoài ra thu c tính này còn có m t s giá tr khác nh : TextTop.. 8.. Khi trang Web c a b n c xem b ng trình duy t mà ng i s d ng t t vi c trình bày hình nh ti t ki m th i gian download..Th c hành Tr c khi hình nh a hình nh vào trong trang Web c a b n m i b n download m t s làm ví d thêm nh vào trong trang Web 1 T o m t file HTML m i và s d ng các tag 2.jpg" align = top alt = "Download Software"> .Th thêm các thu c tính align = vào trong tag img và so sánh v i k t qu c a bài h c 8./Pictures/Dowload. AbsBottom và Baseline. AbsMiddle. thu c tính alt = "" cho phép thay th vào v trí hình nh m t chu i v n b n mô t nó.> 1.

nh và áy c a b c nh. Thu c tính t o vùng quanh nh.vnn. Thu c tính này làm cho kho ng cách gi a b c nh và các o n v n b n c thông thoáng. n u không ng tính chúng tr c khi hi n th . Thu c tính chi u cao và chi u r ng. Ð cho trang Web c a b n c n p nhanh h n. d nhìn và p m t h n. a thêm vào tà img thì trình duy t t Ð i v i các thu c tính này. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. b n nên a kích th c c a nh (tính b ng pixel) vào tag <img>.y là chi u r ng và chi u cao c a nh. 2. Cách s d ng các thu c tính này là: <img src = "" width = x.C m t Download Software ã thay th cho hình nh. vspace = y> x là kho ng cách vùng tr ng hai m t trái và ph i c a b c nh. Hai thu c tính có tên là HSPACE và VSPACE: <img src = "" hspace = x. y là kho ng cách vùng tr ng trên B ns ch ck h n bài h c l n sau.vn . height = y> x. 3.

Bài h c 9.9. b n th y r ng trang Web c a b n ch cc nl bên trái. Cách th nh t: B n t o n v n b n c n s p x p vào gi a trang n m gi a tag <center> và </center> Ví d : <center> Xin chuc mung ban </center> s cho k t qu nh sau: Cách th 2: Ð t thu c tính align c a tag <p> có giá tr là center Ví d : <p align = "center"> Xin chuc mung ban <p> . HTML có nhi u cách giúp b n th c hi n i u này. C n ch nh l 9.1. và b n mu n trình bày trang Web c a mình p h n b ng cách s p x p các o n v n b n vào gi a trang.a.1.S p x p v n b n vào gi a trang Trong các bài h c tr c.

S p x p t ng i gi a v n b n và hình nh Khi mu n có v n b n ph xung quanh hình nh.1. b n ch vi c thêm thu c tính align vào tag <img> Ví d : <img src = "filename" align = "right"> s cho k t qu : so v i không có thu c tính align: .9.b.

b n hãy s d ng tag <br> v i thu c tính clear: <br clear = left> <br clear = right> <br clear = all> tag <br> v i thu c tính clear s xoá i t t c cách s p x p có trong tag <img> Ví d : Khi ch a có tag <br clear = > Khi có thêm tag <br clear = all> .Khi v n b n ho c nh ng m c khác c s p cùng v i hình nh khá ng n và b n mu n y v n b n k ti p xu ng bên d i hình nh.

jpg" align = left vspace = 10 hspace = 20> So v i khi không có các thu c tính vspace và hspace . Ví d : <img src = "anh1. Trong ó vspace là kho ng cách gi a bên trên hay bên d i c a hình nh và v n b n còn space là kho ng cách gi a bên ph i hay bên trái c a hình nh và v n b n.Khi c n trình bày v n b n ph quanh hình nh v i m t kho ng cách nh t nh ta dùng thêm các thu c tính vspace và hspace trong tag <img>.

1. </div> .c. Ch nh l và s p x p v n b n Ngoài các cách s p x p v n b n mà b n ã bi t. <div align = left> ...9.. </div>.. </div> <div align = right> . Vùng v n b n ch u nh h ng c a tag này d a vào thu c tính align. ó là <div> . HTML còn cho chúng ta thêm m t tag c n ch nh v n b n n a...

s d ng tag<div> canh l cho o n v n b n.. trong ó có s d ng các hình nh minh ho cho tin.vnn..2. T o các siêu liên k t .vn 10. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.<div align = center> . </div> 9. Yêu c u s d ng thu c tính vspace và hspace c n ch nh kho ng cách gi a v n b n và hình nh cho p. Th c hành Bây gi b n hãy t o m t trang Web hi n th m t tin nào ó. nh các trang tin c a VNN ch ng h n.

Ð n gi n tr c h t b n t o m t file HTML th hai và trang mà b n ã t o các bài tr c.L u l i công vi c c a b n và m trên trình duy t.. Mu n t o m t siêu liên k t ta dùng <a href = "filename.htm và l u vào cùng Folder v i trang Web c a b n. Th c hành 1. nó c i thành màu xanh và khi b n a chu t vào vùng v n b n này thì chu t b i thành hình bàn tay và n u b n b m chu t thì s c a t i trang có tên là vidu. Bây gi b n b t u t o m t liên k t t trang Web c a b n n m t trang Web th hai.Ði u th c s làm cho Web n i tr i là kh n ng t o ra các m i liên k t n các thông tin liên quan. 10. âm thanh.Trong trang Web mà b n c n t o siêu liên k t t i b n thêm tag t o siêu liên k t nh sau : <a href = "vidu. Khi ó b n s th y o n v n b n Xem ví d c t o thành siêu liên k t.htm"> V n b n B tc o n v n b n nào n m gi a u là m t siêu v n b n liên k t t i các trang Web khác và i di n cho m i liên k t </a> t nó cùng folder v i <a href = " " > và </a> nó c g ch d i.htm">Xem ví d 1</a> 3..T o m t trang Web khác gi s là vidu. Nh ng thông tin này có th n m trong chính trang Web hay n m các trang Web khác bao g m hình nh. o n phim.htm . Liên k t t i m t file c c b .1. 2. Liên k t này c g i là c c b b i vì trang Web th hai c ng cùng n m trên m t máy v i trang Web u.

gif | |--Trang web c a b n v trí này Và b n mu n liên k t t i I-today.> b n s a l i nh sau <a href = "Pictures/i-today.. Ví d : <a href = "logo. khi ó b n c n s a l i tag nh sau: <a href = ".gif | |--Trang web c a b n ng h p file b n c n t o liên k t có c u trúc folder cao h n v trí này và b n c n liên k t t i nh trong Folder Pictures1 có c p cao h n th m c ch a trang Web c a b n."> </a> ./pictures1/.gif"> . </a> Còn trong tr Ví d : |--Pictures1 |--My Web | |--Pictures | | |--i-today.gif.. Gi s c u trúc folder c a b n có d ng |--My Web | |--Pictures | | |--i-today. khi ó trang tag <a href ..htm b ng m t file nh.B n c ng có th liên k t t i m t hình nh b ng cách thay tên filename.gif"> Text </a> T i ây ch c b n l i có th c m c... mu n liên k t t i th m c khác ho c th m c cao h n thì làm th nào? Ð th c hi n i u ó m i b n xem ti p ph n sau ây.

Khi th o các cách liên k t..2.vnn. bây gi b n hãy thành index./" báo cáo cho trình duy t tìm ki m h n. c p nh t trang Web c thu n ti n h n. Ði u này c lý gi i nh sau: Ví d khi b n vào trang I-today b n s gõ vào dòng http: //www.edu.vnn. 10.vnn. Th c hành m t folder có c p cao Bây gi b n hãy áp d ng các cách liên k t t i file Folder cùng c p và c p cao h n. Liên k t n các trang Web khác trên Internet Ð liên k t t i m t trang Web khác trên Internet ta dùng tag sau: <a href = "URL"> Text </a> Trong ó URL (Uniform Resource Locator) cho bi t t i.hut.vn Th c hành 1. Ví d v các URL http://www.vn http:// www.vn/ i-today/ index. i u này làm cho vi c thay i.htm.vn http://www.vn/i-today mailto:hung_nd@vol.vn/i-today/ Th c ra khi ó trình duy t s c file a ch c a trình duy t http: //www.m i l n xu t hi n ".vnn. Thêm m t chút v v n siêu liên k t i tên Ð cho trang Web c a b n có v chuyên nghi p h n. khi xây d ng trang Web b n có th t t c các nh trong cùng m t Folder và liên k t t i.T o m t file HTML và thêm o n sau vào trong ph n body a ch mà b n mu n liên k t .htm.vnn.

mà còn cho phép b n liên k t n các ph n trong cùng m t trang.hut.edu.vnn.vn">Tr ng Ð i h c Bách khoa Hà n i</a> <li><a href = "http://www.<ul> <li><a href = "http://www. Ð liên k t n các ph n c a m t trang tr c h t b n ph i liên k t t i. Th t c này c th c hi n b i tag <a name=""> </a> Trong ó name là m t tên do b n t ra t tên b n ch c n dùng t tên cho ph n c n Sau ó n u b n c n liên k t t i ph n ã <a href = "#name"> Text to link </a> T ng t khi liên k t t i các tài li u khác ta có th dùng . sau ó m trình duy t và so sánh v i ví d . L u công vi c c a b n.vnn.3. B n có th kiêm tra các siêu liên k t b ng cách di chu t vào vùng v n b n siêu liên k t và xem thông báo thanh tr ng thái c a trình duy t.vn/i-today">T p chí Công ngh Thông tin Internet Today</a> <li><a href="mailto:hung_nd@vol. Liên k t t i các ph n trong cùng m t trang HTML không nh ng cho b n t o liên k t n các trang Web khác n m cùng máy tính v i trang Web c a b n ho c trên Internet. thanh tr ng thái s hi n th URL mà b n s liên k t t i.vn">G i th cho Tr n Vi t Hùng</a> </ul> 2. 10.

jpg"></a> B n l u ý là tag <img." vào tag <img..<a href = "vol1.. b n nên thêm thu c tính alt = ".> ng i c d nh h ng 2.4. Ð phòng ng i c t t ch hi n th hình nh c a trình duy t. gi s ó là graph. ví d b n hãy Click chu t vào nh sau : Th c hành Bây gi b n hãy t o m t file HTML mà ph n u c trình bày theo ki u m c l c. s có m t h p màu có màu c a các siêu liên k t bao quanh nh L u ý: Vi c a m t hình nh l n vào trong trang Web làm cho ng m t th i gian ch t i vì v y b n nên s d ng m t s m o sau: i c ph i 1. Ph n này gi i thi u cho b n cách t o các siêu liên k t b ng hình nh: Vi c u tiên là b n ch n 1 nh n m cùng th m c /folder v i trang Web c a b n.htm"> <img ser = "graph. b n nên t o m t hình nh thu nh c a nó và a vào trang Web làm siêu liên k t t i nh l n....> và </a> Khi m t nh c dùng làm siêu liên k t. Khi ó b n s d ng các Tag nh sau <a href = "file. Trông gi ng nh sau . các siêu liên k t không ch là các o n v n b n mà còn c b ng hình nh n a.. m i m c liên k t t i ph n n i dung t ng ng trong cùng v n b n. i u này càng làm cho Web tr nên h p d n.. T o các siêu liên k t b ng hình nh Nh b n v n th ng th y trong các trang Web. cu i m i ph n n i dung có m t nh làm siêu liên k t báo quay tr l i u tài li u.htm#name> Text </a> <a href = "URL#name> Text </a> Ví d :Click vào ây v u trang 10. Khi c n gi i thi u m t hình nh l n.jpg. nh th m t th i gian download trang Web c a b n.> n m gi a tag <a href .

ph n cu i m i trang th ng có các thông tin v trang Web. Bài h c a ch .1.vnn. Thêm 11. ch ng h n nh : ¥ Tiêu hay ch c a trang hi n th i ¥ Ngày c p nh t g n ây nh t ¥ B n quy n . liên k t E-mail vào trang Web c a b n Nh b n v n th ng th y trong các trang Web trên Internet.B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vn 11.

</address> T t c v n b n n m trong tag <address> c in b ng ki u ch nghiêng. 11. HTML cung c p cho chúng ta tag <address> và cách s d ng nh sau <address> .vnn. Tên và E-mail c a tác gi c a trang Web Ph n này g i là footer c a trang Web. b n thêm o n sau vào cu i ph n body <address> <hr> <p align = "center"> Chuyên m c Chân tr i tri th c .vn>hung_nd@vol..... Ð thêm footer vào trang Web.vn">i-today@vasc.các thông tin--> .T p chí Internet Today<br> Copyright @ 2000 by VASC<br> Ð a ch : 99 Tri u Vi t V ng .. <!-.¥ ..vn<br></a> M i ý ki n v b sách HTML xin g i v : Tr n Vi t Hùng<br> E_mail :<a href ="mailto:hung_nd@vol.vnn.T o m t file HTML. tuy nhiên b n có th thay i cách hi n th c a chúng b ng cách s d ng các tag ã h c.vn</a> </p> .Hà n i<br> E_mail : <a href="mailto:i-today@vasc.vnn.2. sau khi thêm các ph n thông tin cho trang Web.Th c hành 1.vnn.

T o các danh sách 12.vnn.vn Ph n 2. Bài h c Danh sách c dùng trình bày thông tin thành m t d ng d c h n. Nâng cao 12. n i dung c a m t dãy các tài li u hay các ch ng. Ch ng h n t o ra các b ng ch m c.1.L u công vi c c a b n và so sánh v i ví d m u: B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.</address> 2. danh sách có th t (ordered) và danh sách không có th t (unorder). HTML có hai ki u danh sách. .

Danh sách không có th t . Danh sách không có th t có các m c b t u b ng các "butllet" ho c các ký hi u ánh d u tr c.. Ð t o ra danh sách không có th t ta dùng các tag sau: <ul> <li>Ch m c th nh t . <li>Ch m c cu i </ul> Ví d khi trong ph n body c a file HTML c a b n có o n nh sau: <h3>Các b môn trong khoa Công ngh Thông tin tr n i</h3> <ul> <li>B môn Khoa h c máy tính <li>B môn K thu t máy tính <li>Trung tâm máy tính <li>Phòng thí nghi m Liên m ng </ul> Thì trên trình duy t danh sách c hi n th nh sau : ng Ð i h c Bách khoa Hà ..

Danh sách có th t Danh sách có th t là danh sách mà m i m c c a danh sách c ánh s . <li>Ch m c cu i cùng </ol> Danh sách có th t ch khác danh sách không có th t b ng tag <ol>. Ð t o ra danh sách có th t ta dùng các tag sau: <ol> <li>Ch m c th nh t . Ví d : N u trong ph n body c a file HTML có o n <h3>Các b <ol> <li>Ch ng trình so n th o v n b n tr n (nh NotePad c a Windows) c chu n b h c HTML</h3> ch thay tag <ul> <li>Trình duy t Web(nh Internet Explorer ho c Nescape Navigator) <li>B sách v HTML c a t p chí Internet Today . th ng b t u t "1"...

nó t ng xu ng dòng. b n ph i ánh o n mã sau: . Ví d : có trang web trên. vi t th t vào h t nh các nh ngh a trong sách giáo khoa v y. Sau khi k t thúc tag <dt>.</ol> Danh sách nh ngh a (definition lists) Danh sách nh ngh a không có các ch m c u dòng.

Ví d v tr n danh sách <h3>Ví d v tr n danh sách</h3> <ol> <li> Ch m c 1 <ul> <li> Ch m c con 1 <ol> <li> Ch m c con 1 <li> Ch m c con 2 </ol> <li> Ch m c con 2 </ul> <li> Ch m c con nh ngh a 3.</dd> <dt>Ð nh ngh a 2</dt> <dd>gi i thích nh ngh a 2</dd> <dt>Ð nh ngh a 3</dt> <dd>gi i thích </dl> Trong trang Web t o ra các m c thông tin có c u trúc logic h n b n có th l ng các danh sách v i nhau.</dd> .<h3>Ví d v danh sách <dl> <dt>Ð nh ngh a 1</dt> <dd>gi i thích nh ngh a<h3> nh ngh a 1.

2.</ol> Ta có danh sách nh sau : 12. trong ph n body b n t o m t danh sách b ng các tag HTML nh sau : <h3>M c l c</h3> <ul> <li>Ch <ol> <li>Gi i thi u chung <li>Nh ng ki n th c v lòng v HTML </ol> <li>Ch <ol> ng hai ng m t .Th c hành Ð a danh sách vào trang Web c a b n 1. M m t file HTML m i.

<li>Các tag thông d ng <ul> <li>Tag nh d ng ki u ch <li>Tag chèn nh </ul> <li>Các tag trang trí trang Web </ol> <li>Ch <ul> <li>Các trang Web m u <li>K t thúc </ul> </ul> 2. L u công vi c c a b n. M trên trình duy t và so sánh v i ví d m u ng ba .

a.. kích th c. </font> Trong ó X là c font có giá tr t 1 (nh nh t) Ví d : C font 1 n 7 (l n nh t) C font 2 C font 3 .vnn.1.B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc..1. Trong bài này b n s h c cách thay i màu s c. C font 7 Ngoài ra HTML còn cho chúng ta m t cách khác font.Bài h c Qua các bài h c tr c b n ã bi t cách thêm màu s c cho n n và v n b n thông qua vi c thi t l p các thu c tính cho tag <body>.. Trang trí cho v n b n 13. font ch c a ph n v n b n trong trang Web c a b n.C font Khi mu n thay i c font thì dùng <font size = X> . thay i t ng i th c hi n vi c thay ic . 13..vn 13.

Chúng th ng c <basefont size = X> X: C font mu n cm c nh n khi g p Chú ý: Tag <basefont> không có tag óng l i. i c trang Mu n thêm màu s c cho ch . nhi u khi b n mu n trình bày nó b ng nhi u ki u font khác nhau.X> .Vn3DH" color = "#EEBBBB">.Ki u font Ð làm cho trang Web thêm sinh ng..</font> .. b n hãy s d ng thu c tính face c a tag <font> th c hi n vi c i font ch .. </font> < font face = ". </font> trong ó fontname là tên c a font ch có trên máy tính c a ng Web.. <font face = "fontname"> . ta thêm thu c tính color vào tag font Ví d : <font face = "Arial" color = "#FFFFFF"> ..b.. 13..1..<font size = + X> .. </font> <font size = .. -X là dùng cùng v i tag d ch chuy n so v i c font hi n t i. nó có tác d ng cho m t tag <basefont> khác. </font> Trong ó +X.

</sup> cho ch s trên và <sub> ... </sub> cho ch s d i. ta ph i vi t NH<sub>4</sub> Ð có x2 ta ph i vi t x<sup>2</sup> ..c.. Ví d : Ð có NH4.Hi n th ch s trên và ch s d i Khi c n ph i trình bày ch s trên hay ch s d i. nh các công th c hoá h c ch ng h n chúng ta s d ng các tag <sup> .1.13.

G=. G=255. ch c nhi u khi b n th c m c: "T i sao trang Web c a mình l i ch có hai màu en và tr ng. B h th p phân.1. 14. các giá tr c a R.vnn. thay vì dùng các giá tr c a R. các hình nh và siêu liên k t. khi mu n s d ng m t màu nào ó.1. . b n ã h c c khá nhi u ki n th c v lòng v HTML. Th c hành B n thân m n.Bài h c T khi h c bài u tiên n bây gi . Xin b n hãy yên tâm. B ba RGB v i các giá tr khác nhau s cho ta các màu khác nhau.2. ch n màu s c . Trong HTML.. bài này s giúp b n gi i quy t th c m c ó. b n có th s d ng 256 màu trang trí cho v n b n và n n. B=255) thì cho ta màu tr ng. G=255.. G. M i màu c xác nh b i b ba Red-Green-Blue (RGB). b n ph i bi u di n chúng d ng h 16. trong khi các trang Web mình nhìn th y u c trang trí r t p". Ví d khi c ba có giá tr nh nh t (R=. B=255 c bi u di n là FFFFFF.vn 14. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. t ó b n m i có th xây d ng c nh ng trang Web p c. Ví d : Màu tr ng ng v i R=255. Thêm màu s c cho trang Web c a b n 14.a.Khi ã làm nhi u trang Web b n s có nhi u kinh nghi m trong vi c ch n font ch . B t 0 n 255 th hi n c ng c a nó.. các lo i font ch khác nhau.13.C b n v màu s c Trong m t trình duy t Web. G. bây gi b n hãy áp d ng nh ng ki n th c ã h c t o cho mình m t trang Web v i màn hình n n có màu s c.. B=0) thì s cho ta màu en và khi c ba có giá tr l n nh t (R=255.

siêu liên k t màu xanh d liên k t ã xem màu . ch màu vàng. ng sáng.1.Màu "4520FE" t c là R = 45 (H 16) G = 20 (H 16) B = FE (H 16) t ng ng v i R = 69 (H 10) G = 32 (H 10) B = 254 (H 10) Ví d v m t s màu thông th 14.b.Màu n n c nh ng Ð thêm màu cho trang Web c a mình. b n hãy thêm các thu c tính sau vào trang tag <body> bgcolor = #XXXXXX text = #XXXXXX link = #XXXXXX vlink = #XXXXXX Trong ó bgcolor = Xác text = Xác link = Xác vlink = Xác nh màu s c c a n n nh màu s c c a v n b n nh màu s c c a siêu liên k t nh màu s c c a siêu liên k t ã xem qua d ng th p l c phân (có d u # tr c) còn XXXXXX là ký hi u màu Ví d : <body bgcolor = #000000 text = # EEEEBB link = #33CCFF vlink = #CC0000> S cho n n màu en. siêu .

c.Trang trí n n b ng hình nh .1.Sau ây là m t s màu c b n và ký hi u t Color xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx ng ng 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.

jpg làm n n. ví d nh sau có tên Thêm vào tag body thu c tính background nh sau: <body background = "strawb. 14. Ð dùng hình nh làm n n cho trang Web.Th c hành 1.2.jpg"> 2.L u công vi c c a b n.T o m t file HTML và chu n b m t hình nh là strawb.N u b n mu n màu n n c a trang Web c a b n p h n. m trên trình duy t và so sánh v i ví d m u: . HTML s t o các b n sao liên t c c a file nh ph h t n n c a trang Web. ta dùng thu c tính background trong tag <body> <body background = "filename"> Trong ó filename là tên file nh mà b n dùng làm n n. b n có th dùng m t file nh nh trang trí cho n n. Khi ó.

Thêm m t chút v siêu liên k t b ng hình nh 15. Tr c h t m i b n xem ví d sau : . b n hãy th click vào các tên t ng ng trên nh và xem k t qu .jpg. b n ã h c c cách t o các siêu liên k t b ng hình nh.Bài h c Trong các bài h c tr c.jpg" usemap = "map_name"> trong ó map_name là ph n mà b n các siêu liên k t.B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc. nh có tên là : lienket. bây gi . Ð t o ra c m t hình nh v i nhi u liên k t.vnn.Ð nh ngh a các vùng <map> nh sau : nh ngh a các vùng c a nh t ót o t o siêu liên k t : Ð t o các vùng ta s d ng tag .Chu n b m t hình nh t o các siêu liên k t : Trong ví d trên.Sau khi c khoanh vùng và t o các siêu liên k t. t i nhi u trang Web khác nhau. nh trên s c liên k t t i nhi u trang Web khác. Bài này s cung c p cho b n t o ra nhi u siêu liên k t t cùng m t hình nh b ng cách chia hình nh ó thành các vùng. cách làm nh sau : 1.1. HTML cung câp cho chúng ta tag <map>. m i vùng liên k t t i m t trang Web khác nhau. 2. trong tag <img> b n s d ng thu c tính usemap nh sau : <img src = "lienket. khi a hình nh này vào trang Web.vn 15.V i hình nh nh sau : .

173.vn" shape="rect" coords="33. </map> Trong ó tag <area> nh ngh a m t vùng có hình là thu c giá tr c a thu c tính shape = "".Th c hành Bây gi b n hãy chu n b m t hình nh và dùng tag <map>.<map name = "map_name"> <area shape = "rect" coords = "x1.y4.y5" href = "URL"> .edu. 146. Chúc b n thành công.y1 to góc d i bên ph i là x2.tlnet. 135.hut.com..vnn. trong ví d trên vùng t o siêu liên k t là vùng hình ch nh t (rect) có to góc trên bên trái là x1.y2" href = "URL"> <area shape = "rect" coords = "x4. 34"> <area href="http://www. và th t o m t trang Web có các siêu liên k t xu t phát t m t hình nh nh trong bài h c. có to là giá tr c a thu c tính coords = "". 93.jpg" usemap="FPMap0" width="180"height="162"> 15.. 10.fpt. 132"> <area href="http://www. B ng . 157.x5. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vn" shape="rect" coords="0.vn" shape="rect" coords="71.vnn.y1. 40.2.netnam. 108.vn" shape="rect" coords="13. 77.y2 và liên k t t i trang Web là giá tr c a thu c tính href = "" Ðo n mã HTML c a ví d trên nh sau : <map name="FPMap0"> <area href="http://www.vn 16.vn" shape="rect" coords="53. 158"> </map> <img border="0"src="Image/lienket.. 140. 100"> <area href="http://www. 62"> <area href="http://www.x2.

1.1. .16.a. b n có th áp d ng các ki n th c ã h c trang trí riêng cho t ng ph n. xây d ng các ph n t c a hàng th 2. Nh ng tag c b n c a b ng Ð tìm hi u v các tag c b n c a b ng. --> --> --> --> ---> --> | ---------------------------| --> --> --> --> ---> --> 16.. tr <table border = 1> <tr> <td> Hàng 1 c t 1 </td> <td> Hàng 1 c t 2 </td> <td> Hàng 1 c t 3 </td> </tr> <tr> <td> Hàng 2 c t 1 </td> <td> Hàng 2 c t 2 </td> <td> Hàng 2 c t 3 </td> </tr> </table> c h t ta xét ví d sau... Bài h c Vi c trình bày trang Web theo d ng b ng s làm cho trang Web c a b n chuyên nghi p h n. Khi xây d ng b ng. V i d ng b ng b n có th chia trang Web thành nhi u ph n.. ti p theo xây d ng các ô c a hàng u tiên. b n hãy nh quy t c sau: b t u t ô cao nh t bên trái. sau ó chuy n xu ng hàng th hai.

Ch nh l theo chi u ngang <td align = left> s p x p v bên trái <td align = right> s p x p v bên ph i <td align = center> s p x p vào gi a 16. Các hàng và c t B ng mà b n t o nhau. M i hàng M iô c c xác nh b i <tr> và </tr> vi t t t c a table row. Ð c n ch nh l trong m i ô. i u này ngh a là v 1 ng vi n quanh b ng v i dày là 1 i m.1.b.Trong tag <table> ta th y thu c tính border có giá tr là 1. nh ngh a b i <td> và </td> vi t t t c a table data. b n thêm các thu c tính sau vào tag <td>. trên m i ch là b ng n gi n v i ba hàng và ba c t u .

B n hãy chú ý các b ng sau. B ng 1

B ng 2

B ng 3

Ð t o c nh ng b ng nh trên, chúng ta s d ng các thu c tính colspan và rowspan trong tag <td> ... </td> Thu c tính colspan=x có tác d ng m r ng c t c a b ng, ví d trong b ng 1 m r ng ô th 2 c a hàng 1 ra r ng b ng hai c t bình th ng ta t: <td colspan = 2>Hàng 1 c t 2-3</td> Thu c tính rowspan có tác d ng m r ng hàng c a b ng, trong b ng 2 r ng ô th 2 c a hàng 2 ra r ng b ng 2 hàng bình th ng ta t: <td rowspan = 2>Hàng 2-3 c t 2</td> 16.1.c. Ði u khi n xu ng hàng trong m t ô. Trong m t ô, n u mu n gi dòng v n b n trên m t dòng, t c là không cho nó xu ng hàng thì thêm thu c tính NOWRAP vào trong tag <TD> ho c <TH>. 16.1.d. Thêm u vào b ng (caption) m

Ngay sau tag <table>, b n gõ vào tag <catpion> t a b ng tag óng </caption> <table > <caption align="center" valign="top"><u>T a

c a b ng, và k t thúc

c a b ng</u> </caption >

<tr><td width="50%" align="center">C t 1 - dòng 1</td> <td width="50%">C t 2 - dòng 1</td> </tr> <tr><td width="50%" align="center">C t 1 - dòng 2</td> <td width="50%"><p align="center">C t 2 - dòng 2</td> </tr> </table> </body> Trong tag <caption> b n th y có thu c tính valign="top", ngh a là t o t a trên nh c a b ng. N u valign="bottom" thì t a c a b ng s áy b ng. 16.1.e.Thêm các thông s cho các Mu n thay i thông s c a các <table> nh sau: ng vi n t o ra b ng ng t o b ng ta thêm các thu c tính cho tag

<table border = X cellpadding = Y cellspacing = Z> X: Chi u r ng ng vi n ngoài b ng

Y: "Kho ng tr ng" gi a d li u bên trong ô và vách ng n c a ô

Dùng b ng d ng này s p x p v n b n theo các hàng th ng ng.fpt.vn">Công ty FPT</a></td> <td ><a href ="http://www.Z: Ð r ng c a nh ng ng bên trong b ng chia các ô Ví d b ng sau có tag <table> nh sau: <table border=3 cellpadding=4 cellspacing=8> Khi border = 0 thì ta s có m t b ng không có b t k m t ng vi n nào.com.vinaone.netnam.vn"> Công ty VASC .vn"> Công ty Netna@m</a></td> <td><a href ="http://www.vn">Sài gòn net</a></td> </tr> <tr> <td><a href ="http://www.VNN</a> </td> <td ><a href ="http://www. Ð i v i d li u trong b ng b n v n có th áp d ng các tag ã h c nh ví d sau ây chia màn hình thành hai c t danh sách trong ó m i c t là m t siêu liên k t <div align=center> <h2>Các Website vi t nam</h2> <table border="0" cellpadding =2 cellspacing =20> <tr> <td align=left><a href ="http://www.vnn.saigonnet.com.tlnet.vn"> M ng Ph ng nam</a></td> </tr> <tr> <td><a href ="http://www.vn">M ng c a B th ng m i</a></td> </tr> </table> .

Thêm màu s c cho b ng Ð tô màu cho b ng. ta thêm thu c tính bgcolor v i giá tr màu t các tag c a b ng.</div> 16.1.f. Tô màu n n cho toàn b ng <table bgcolor = #XXXXXX> Tô màu n n cho 1 hàng <tr bgcolor = #XXXXXX> Tô màu n n cho 1 ô <td bgcolor = #XXXXXX> Trong ó XXXXXX là các giá tr màu Ví d Khi ch a tô màu c b ng ng ng vào .

b n có th thêm màu s c vào b ng cho p.vn . Sau khi ã xây d ng xong danh sách và siêu liên k t. ví d danh sách l p.Th c hành B n hãy ng d ng các tag v xây d ng b ng xây d ng m t danh sách. Yêu c u b ng có thu c tính border = 0 và m i tên trong danh sách là m t siêu liên k t n a ch th i n t c a ng i t ng ng.Khi tô màu c b ng b ng cách thêm thu c tính bgcolor vào tag <table> 16.vnn. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.2.

. có th nh p nhi u dòng. forms cho phép b n l a ch n thông tin t ng i dùng và l u tr nó cho l n s d ng sau.. Check Boxes : H p Check Boxes. Trong quá trình liên k t v i CGI Script. Text Blocks : <textarea rows="" cols="" name=""> Text...> </form> n m gi a hai tag BODY trong ó thu c tính METHOD có hai giá tr là POST và GET. Nó c dùng nh p d li u.17. Các tag trong Form th ng dùng ch y u là <INPUT>. Khi t o form.. Submit and Reset Buttons : Các Button nh n thông tin và kh i t o l i thông tin trên form. . <SELECT>. Radio Buttons : Các nút l a ch n m t. rows : chi u cao vùng v n b n tính theo hàng. ki s Trong ó cols là chi u r ng c a vùng v n b n tính theo ký t .1. Còn v i GET thì ch c s d ng trong Form v n tin. Password Boxes : Form này gi ng Text Boxes nh ng không hi n th các ký t ..các tag khác. Menus : T o ra h p Menu y xu ng. Name là thu c tính nh n d ng. N u giá tr là POST. Còn ACTION ch ra v trí c a CGI Script trên Server s c th c hi n. ta c n l u ý nh t hai ph n ó là tên nh n d ng (identifier) và giá tr (value) c a form ó. Chúng ta s l n l y y y y y y y y y y t xét m t s Form n gi n nh sau : Text Blocks : T o ra vùng v n b n. nó cho phép g i d li u t máy Client n Server (th ng c s d ng trong Form nh p li u). s d ng trong Script. Các b n l u ý là Text Blocks không b t u b ng tag INPUT. tag : <Form METHOD="" ACTION=""> <.. </textarea>          ¡ ¡ ¡ ¡   ¢ ¥     ¡ £ ¥ ¡   © ¡£ ¡£ ¨§ ¥ ¦¥ ¢ £ ¢ ¡ ¤ ¡ ¡ ¡  Ví k i t c li c . Active Images :T o b c nh kích ho t.. 17. Trong bài h c này ta s cách t o form b ng các tag n c a HTML.. l a ch n các kho n m c. CGI Script :Common Gateway Interface Script... Forms Form là m t y u t không th thi u có th giao ti p v i máy ch . <OPTION>. Bài h c. i .. thì d li u g i n server là FirstName=VASC. Ví d : Trong h p text box v i tên là FirstName. Hidden Elements : Các y u t n. Text Boxes : Ð nh p vào m t dòng n. ng i s d ng gõ vào VASC.

thu c tính l a ch n là ph n v n b n ghi phía sau nút check box. n Server l a ch n 2 Check Boxes : <input type="checkbox" name="" value="" checked>L a ch n H p Check Boxes có các thu c tính thành ph n gi ng nh Radio Button. minlength ch s ký t t i a hay t i thi u có th nh p vào.Text Boxes : <input type="text" name="" maxlength="" size="" value=""> Xin hãy cho bi t tên c a b n : Trong ó size ch chi u dài c a Text Boxes. Password Boxes : <input type="password" minlength="" name="" size=""> Xin hãy cho bi t m t mã : Các thu c tính u gi ng v i Text Boxes. Ch khác là khi b n nh p d li u thì các ký t không c hi n th . Maxlength. Radio Buttons : <input type="radio" name="" checked value="">L a ch n l a ch n 1 value ch a d li u s g i khi Radio Button checked. value là giá tr ki u xâu c hi n th . l a ch n 1 .

N u có thông tin sai quy nh thì l p t c server s g i tr l i kèm v i thông tin báo l i. Hidden Elements : <Input type="hidden" name="" value=""> Hidden Elements c b n s d ng l u tr thông tin ã thu c t form tr c ó. Sau khi nh p li u song. Thu c tính multiple cho phép b n ch n nhi u m c. n u không có thu c tính này thì nó s là m t menu y xu ng.. do ó nó có th k t h p v i d li u c a form hi n t i. M i l a ch n c a b n c mô t b ng các tag OPTION. Còn nút Reset s kh i t o l i toàn b các giá tr c a form b ng các giá tr m c nh. sau ó name s c liên k t thông tin m i thu c mà không c n ng i dùng nh p l i tên nhi u l n.</option> </select> $ # # %$ # ' # ! & ! $ # " t m i u c t m m k )(  có multiple Submit and Reset Buttons : Nút Submit là nút server có th l y thông tin t ng i s d ng. Các Hidden Elements không bao gi hi n trên m i browser úng v i cái tên c a nó..l a ch n 2 Menus : <select size="" multiple><option selected value="">Text. ng i dùng n vào Submit thì m i thông tin s g i n server. b n có th l u l i b i m t bi n và thêm nó vào m t form m i nh là m t hidden element. B n c m l u ý nút Reset ch kh i ng l i các giá tr trong cùng m t form mà thôi. <Input type="submit" name="" value="Submit Button"> <Input type="reset" name="" Submit Button value="Reset Button"> Thu c tính value ch a ph n text hi n th Res et Button trên nút b m. và b n có th ng m nh là nó c ch n b ng thu c tính selected. có multiple ti i ti t ti p . Menu không b t u t INPUT mà là SELECT. # !  !  !  C ng gi ng nh Text Blocks. Ví d : n u form tr c ban ngh cho bi t tên.

CGI Script c dùng kích ho t môt ch ng trình trên server. l y thông tin và sau ó thông báo l i cho ng i s d ng. nó l y ngày trên server và chèn vào trang HTML 0 !/bin/s h .com/CGI-BIN/path/cgiscript>v n b n liên k t</a>. CGI Script : (A Common Gateway Interface Script) Là m t ch ng trình c kích ho t b i ng i s d ng b ng cách click lên URL. 2 2 2 b n hãy copy toàn b o n mã trong te t block này vào trang web là có th l y ngày gi .Tag này có hai thu c tính. <html> <head><title>L y ngày h th ng</title> </head> <body > 1 o n mã này là script t o ra m t trang HTML. Ví D : Gi s máy ch mu n bi t b n t n i nào n. Ð t o m t liên k t n CGI Script b n hãy dùng tag <a href="http://www. Trong ó http://www/site/com là tên c a server ch a CGI Script. thu c tính name là tên c a thông tin value thông tin mà b n thân nó c l u l i. Khi ng i dùng click vào nh thì t o x và y c a chu t hi n hành s c b sung vào tr ng name này và g i n server. Nó có th c vi t b ng ngôn ng máy tính nh C hay Pascal. B n ch vi c click lên b n . Thu c tính name cho m t tên. ho c c vi t b ng Perl hay m t ch ng trình giao ti p gi a ng i và máy. và có kh n ng th c hi n c l p. c l u tr .site. Th c hành. nó cho b n m t b n th gi i. ec ho "Content-ty pe:te t/html" 17.2. gi s b n sinh ra Vi t nam thì ch vi c tìm úng n c Vi t nam và click lên ó. Ví d b n có th dùng CGI Script g i ch ng trình ngày trên server và thông báo k t qu trên trang web. còn Active Images : <input type="image" src="" name=""> Thu c tính ch a trong src ch ra ng d n t i file nh trên server. CGI-BIN là v trí c a CGI Script trên UNIX server. /path ch ra ng d n t i cgi-script n u không tìm th y trong th m c cgi-bin chính.

hãy v n to lên. B n hãy t o m t form nh p h tên. Sau khi nh p song. click vào Submit g i thông tin n Server. Trong ó form H tên. c ng ch c ch n m t n i duy nh t. H i Phòng. n i dùng text box. gi i tính s dùng hai radio button Nam và N .Sau khi h c lý thuy t song. E-mail: i-today@vasc.N u b n có loa.. b n hãy th c t p nh l i các ki n th c ã h c. Cu i cùng là text block Thông tin thêm ng i dùng ghi chú thêm n u c n. Multimedia .vn 18.. b n nh là ch c phép ch n m t trong hai mà thôi. n i . . form m t kh u dùng password. Chúc b n thành công.vnn.. All Rights Reserved. Form thành ph s dùng pop-up menu. m t kh u và m t s thông tin khác nh b ng d i ây... Copyright @ by Value Adder Service Center (VASC). có các thành ph Hà N i.

ext"> liên k t </a>. và các file video avi (*.ext" Loop="">.windows. Trong bài h c này các b n s h c cách g i m t file âm thanh và m t ho t c nh video vào trang web c a các b n. Vì lý do nh v y chúng tôi khuyên các b n nên l a ch n các ki u file thích h p. Video. Nh ng có m t v n là nh b n ã bi t.Các b n thân m n. B n c ng có th thay ph n text liên k t b ng m t file nh nào ó nh chèn tag <img src=""> vào gi a hai tag <a>và </a>. m t file âm thanh ch t l ng t t có th i gian 10 giây thì kích th c c a nó c 200K và t i xu ng ph i m t ít nh t là m t phút. Gi s khi ta click lên m t hình nh hay m t dòng ch nào ó thì quá trình ch i nh c m i b t u.ext là tên file hình nh trên server. Khi click vào nh thì s b t u ch i nh c. Ví d nh các file âm thanh midi (*. Tag này c t gi a hai tag <head> và </head> Ngay sau khi sound. Thu c tính src ch ra ng d n n file âm thanh sound. ta c ng dùng tag <a href src="video. và n u b ng -1 thì s l p vô h n.avi). Ð s d ng m t file nh c làm âm thanh n n ta dùng tag <bgsound src="sound. trang web c a b n s ngay l p t c "ch i" file Bây gi ta s t o m t liên k t có th ch i nh c. có kích th c càng nh càng t t. V i video. . T ng t . ví d "http://www.ext trên server .. Ph i ng i ch n m t phút trên máy ch c g ng c nghe nh c thì qu là không th ch p nh n c.mid) hay file ra (*. c truy c p. giá tr c a nó là m t s nguyên.ext. Ví d b n hãy Click vào ây b t u nghe nh c. h n n a sau khi t i xu ng bài hát không hay thì l i càng b c mình h n. y y Ð a âm thanh vào trang web c a b n Xem Video trên trang web Bài h c. Sound.com/LocalName/flower. kích th c c a các file media r t l n. Ta s s d ng tag sau : <a href src="sound.. Tag này không có tag k t thúc. Hi n nay các trình duy t web có th nh n d ng c r t nhi u lo i âm thanh và hình nh khác nhau.avi" ch ng h n. Còn thu c tính Loop cho phép l p l i nhi u l n n u mu n.ext"> text liên k t </a>.ra) mà hi n nay c s d ng ch y u trên m ng. m t trong nh ng y u t không th thi u làm trang web c a b n sinh ng h n và hoàn h o h n ó là âm thanh và hình nh ng.

1.V i cách s d ng tag trên. ví d : Khi b n chia trang Web c a mình ra bao nhiêu frame thì b n ph i t o ra b y nhiêu file HTML m i frame hi n th m t file HTML. không b di chuy n.Bài h c Tr c khi vào bài h c. B n có th chia trang Web thành nhi u ph n tu thích. All Rights Reserved. khi b n scroll c v n b n thì ph n t hình nh và tên bài h c v n ng im. E-mail: i-today@vasc. Trang Web c trình bày theo ki u chia thành các ph n c l p v i nhau g i là frame.vn 20. Th t là ti n ph i không b n. mu n l p l i ho c i u khi n n o n nh c nào tu b n. V i tag này.ext">. Ð có th tích h p và i u khi n quá trình nghe và xem b n hãy s d ng tag : <embed src="file. Ð n ây b n có th làm cho trang web c a b n sinh thành công . Thông th ng o n mã c a m t file HTML c chia thành các frame nh sau : . b n hãy ý k m t chút trang này. Chúc b n Copyright @ by Value Adder Service Center (VASC). b n ph i nghe nh c b ng trình nghe nh c c a h i u hành.vnn. b n có th nghe nh c b t c lúc nào. ng h n r i y.

. <frame name = "frame_namen" src = "URLn"> </frameset> <noframes> Sorry ! Trình duy t c a b n không h tr frame </noframes> </html> Trong ó tag <frameset> có tác d ng ch ra cách chia frame theo chi u ngang hay chi u d c..ví d r ng c a các frame. </noframes> dùng hi n th thông báo khi trình duy t c a ng i c Web không h tr frame... N u b n nh phân chia theo chi u d c thì dùng tag <frameset> nh sau : <frameset cols = "X. b n có th cho giá tr là i m..*"> trong ví d cu i cùng b n th y có d u *.Y.Z"> <frame name = "frame_name1" src = "URL1"> <frame name = "frame_name2" src = "URL2"> .. Cách làm t ng t i v i trang chia theo chi u ngang....Y..Y...... ph n <frameset cols = "170. ph n còn l i dành h t cho frame còn l i. Tag <frame> có tác d ng nh ngh a m t frame.....<html> <head> <title>Tiêu trang Web c a b n</title> </head> <frameset rows/cols = "X. Frame này s có tên là giá tr c a thu c tính name = "" và hi n th file HTML có tên là giá tr c a thu c tính src ="" Tag <noframes> .530"> <frameset cols = "15%.. D u * cho bi t tr c h t chia cho m t frame r ng là 170.85%"> <frameset cols = "170.Z là tr m.Z"> V i X.. ví d <noframes> Sorry ! Trình duy t c a b n không h tr frame </noframes> .

Ví d khi mu n chia m t trang Web nh sau : b n ph i làm nh sau : <html> <head> <title>A More Complex Framed Page</title> </head> <FRAMESET ROWS="120.html"> <FRAMESET COLS="75%.*> <FRAME SRC="row1.*> <FRAME SRC="row2col21row1.40%> <FRAME SRC="row2col1row1.html"> <FRAME SRC="row2col1row2.html"> </frameset> </frameset> </frameset> <NOFRAMES> This is what someone would see who does not have a web browser that can display frames </NOFRAMES> </html> Thông th ng. m t trang Web c trình bày nh sau : .25%> <FRAMESET ROWS="60%.html"> </frameset> <FRAMESET ROWS="100.html"> <FRAME SRC="row2col21row2.

. Khi b n không mu n hi n th border c a frame..6. Khi click lên các siêu liên k t frame menu thì n i dung c a các trang t ng ng hi n lên frame display. b n thêm thu c tính border = "0" và frameborder = "0" vào tag <frameset> <FRAMESET ROWS="45. qua các bài h c.2. b n thêm <FRAME NAME="myfixedframe" border=8 frameborder="1" SRC="fixed.3.4.8. làm c i u ó. bây gi b n hãy t mình chia các trang web thành các frame nh trong các hình 1..trong ó gi s frame làm menu có tên là menu và frame hi n th thông tin có tên là display. các b n ã n m c khá v ng nh ng khi n th c c b n nh t v HTML.5.2.*.150" BORDER=0 frameborder="0"> Trong trình duy t b n không mu n thay i kích th thu c tính NoResize vào trong tag <frame> c c a frame. <body> <base target = "display"> . Các b n thân m n. ví d nh xây d ng trang web v gia ình b n hay m t nhóm b n bè thân thi t c a b n ch ng h n..vnn. Gi ây b n có th xây d ng cho riêng mình m t trang web p m t ch ng kém gì các trang mà b n th y trên m ng. Chúc b n thành công B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vn .Th c hành B n ã h c xong cách chia trang Web thành các frame. trong file HTML c a frame menu b n a thêm tag <base> vào ngay sau tag <body> .html" NORESIZE> 20.

Sign up to vote on this title
UsefulNot useful