Html vnn canban
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html vnn canban

on

  • 534 views

 

Statistics

Views

Total Views
534
Views on SlideShare
534
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html vnn canban Document Transcript

  • 1. Ph n I. K n ng c b n1.1 HTML là gì?HTML (Hyper Text Markup Language - Ngôn ng ánh d u siêu v n b n) là m ts nh d ng báo cho trình duy t Web (Web browser) bi t cách hi n thm 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 HTML1.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 tiêu th c 3 (s nói k ph n sau).
  • 2. 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 nb 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 Webkhá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:<tên tag> vùng v n b n ch u tác ng </tên tag>.Chú ý: Trình duy t không quan tâm tên tag là ch hoa hay ch th ng nên vi cvi 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ácmã 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 ncù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 trangWeb, 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 -->.....
  • 3. </body></html>. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn2. 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 chungc 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ó tht o ra nh ng v n b n tr!n (plain text). N u b n dùng Microsoft Word thì ph i l utr 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ôngngh Thông tin Internet Today. Trong ph n này b n s c h c nh ng ki nth c c! b n v HTML, công c t o ra các trang Web. Sau khi ã h c xong vHTML 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>
  • 4. 3. L u file v i ph n m r ng là htm. Ví d Bai1.htm.L u ý: B n nên t o m t Folder riêng ch a các t p tin mà b n s t o ra trongsu#t th i gian h c HTML.4. Kh i ng IE ho c Nescape. Ch n File / Open. S$ d ng h p tho i m fileHTML b n v"a t o.5. 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 trith c - Internet today" và trong trang d i là "Chào m"ng b n ã tham giachuyê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 ct o ra các trang Web. Sau khi ã h c xong v HTML b n có th t o ra nh ngtrang Web y n t ng v i v n b n, hình nh, âm thanh..." mà b n ã vi ttrong ph n body B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn3. Hi n th v n b n d ng m, nghiêng, g ch chân...3.1.Bài h c
  • 5. Khi trình bày m t trang Web, có lúc c n nh n m nh, hay t o s khác bi t, b nc n ph i hi n th v n b n các d ng m, nghiêng, g ch chân... HTML có cáctag nh d ng ki u ch giúp b n. HTML K t qu <u>Ðây là tag g ch chân</u> Ðây là tag g ch chân <i>Ðây là tag nghiêng </i> Ðây là tag nghiêng <tt>Ðây là tag ch ánh máy</tt> Ðây là tag ch ánh máy <b>Ðây là tag m </b> Ðây là tag m <em>Ðây là tag </em> Ðây là tag Strong <strong>Ðây là tag strong</strong> Ðây là tag Strong <strike>Ðây là tag strong</strike> Ðây là tag strikelineB n có th k t h p các tag này v i nhau, mi%n là chúng c l&ng vào nhau m tcách chính xác. Ví d :<b> <i> .... </i> </b>Tag in nghiêng ph i n m trong tag in m.H!n n a b n có th áp d ng các tag v i tiêu<h2> <i> .... </i> <h2>3.2.Th c hànháp d ng vào file HTML c a b n.1. T o m t file HTML m i2. Thêm các tag nh d ng ki u ch . Lúc này file HTML c a b n trong ph nbody có d ng nh sau.<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 aWindows </u></b>thì b n ph i nh l u k t qu d ng v n b n tr!n (ASCII)3. L u công vi c c a b n.4. Dùng trình duy t m và so sánh v i ví d mu.
  • 6. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn4. Sáu m c tiêu4.1. 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íchc(, phông ch khác nhau. HTML có các tag th c hi n vi c này.Ð t o m t tiêu chúng ta dùng<hx> Tên tiêu <hx>Trong ó x là m t s# có giá tr t" 1 n 6 ch) kích c( tiêu . Sau ây là ví dcho các c( c a tiêu .Tiêu c 1 <!-- H1 c 36 -->Tiêu c 2
  • 7. Tiêu c 3Tiêu c 4Tiêu c 5Tiêu c 6.4.2.Th c hànhThêm các tiêu vào trang Web c a b n.1. M l i file HTML mà b n ã t o ra bài h c tr c b ng trình so n th o v nb n mà b n ã dùng t o ra nó.2. Thêm o n sau vào file HTML. 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 at p chí Công ngh Thông tin Internet Today. Trong ph n này b n s ch cnh 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 nb n, hình nh, âm thanh...3. L u công vi c b n v"a làm.4. Dùng trình duy t Web m file HTML b n v"a t o và so sánh v i ví d mu,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.5. Chia v n b n thành nhi u o n
  • 8. 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ìnhso n th o v n b n, thay vì v n b n nh c , bây gi cu#i m*i dòng b n cóth gõ Enter vài l n, 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ôngngh Thông tin Internet Today. Trong ph n này b n s c h c nh ng ki nth c c! b n v HTML, công c t o ra các trang Web. Sau khi ã h c xong vHTML 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...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. Khi ó b n strô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 uxu#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 nb n mà b n v"a nh p dù có Enter xu#ng dòng nh ng vn li n v i nhau.Ð 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 t<p> tr c <hx>.Chèn các d u chia o n vào file HTML c a b n.1. D ng trình so n th o v n b n m tile HTML mà b n ã t o t" tr c.2. Chúng ta thêm o n m i vào v n b n, sau o n uT p chí Internet Today là m t t p chí i n t$ chuyên v Công ngh thông tin.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 ncó th t t o ra các trang Web cho riêng mình3. Ð a con tr+ so n th o n cu#i o n u, thêm tag <p>. Lúc này o n v nb n trông gi#ng nh sau.
  • 9. 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ôngngh Thông tin Internet Today. Trong ph n này b n s c h c nh ng ki nth c c! b n v HTML, công c t o ra các trang Web. Sau khi ã h c xong vHTML 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...<p>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 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 ncó th t t o ra các trang Web cho riêng mình4. L u l i công vi c c a b n.5. Dùng trình duy t m l i file HTML c a b n và so sánh v i ví d mu.Nh b n th y, các o n v n b n ã c tách nhau do tác d ng c a tag <p>Thêm m t s tag phân o n<hr> Chèn m t ng th-ng vào trang Web c a b n, tag này th ng dùngchia nh ng ph n chính c a trang Web.<br> Ð,y v n b n xu#ng m t dòng m i, tag này khác tag <p> ch* nó khôngchèn thêm vào trang c a b n m t dòng tr#ng nh tag <p>. B n có th s$ d ngtag này khi t o m t danh sách, vi t các dòng c a m t bài th!.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>
  • 10. 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.vnn.vn5. Preformatled text5.1.Bài h cPh 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 ngtr ng và d u xu#ng dòng.Nh b n ã bi t trong các ph n tr c, trình duy t b+ qua các dòng tr ng, d uhi u xu#ng dòng khi ta so n th o. Tuy nhiên b n vn có th hi n th cv nb n nh lúc b n nh p vào b ng cách s$ d ng tag <pre>Ví d
  • 11. <pre>Khi b n mu#n trình duy t Web hi n th úng nh b n so n th o, b n nh dùngtag <pre>B n có th xu#ng dòng.B n có th dùng d u cách tho i mái....</pre>S c hi n th nh sau: B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn6. Thêm m t ki u trình bày cho trang Web c a b n6.1.Bài h cÐ làm cho m t kh#i v n b n n.i h!n, ví d m t o n trích dn, m t l i khuyên...và làm cho trang Web c a b n trình bày c /p h!n, chúng ta s$ d ng tag<blockquote>
  • 12. Ðo n v n b n n m trong c p tag <blockquote> và </bockquote> s c trìnhbày th t vào so v i ph n thân v n b n.Ví d nhìn th y o n v n b n nh sau: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, ví d b n c n hi n th m t chú ý, khi ó b nhãy dùng tag &lt;blockquote &gt; <blockquote> <hr>Trình bày o n v n b n b ng tag &lt;blockquote &gt; s làm cho o n v n b nc a b n n.i b t h!n, và trang Web c a b n trông c ng s chuyên nghi p h!n.B n hãy th$ xem </hr> </blockquote>6.2.Th c hànhV i nh ng ki n th c ã h c c, b n hãy xây d ng cho mình m t trang Webch-ng h n nh m t trang Web h ng dn h c ti ng Anh v i các hình nh, siêuliên k t và các ghi chú dùng tag <blockquote>
  • 13. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn7. S d ng các ký t c bi t7.1.Bài h cÐôi khi trong trang Web c a b n có các ký t c bi t, ch-ng h n nh ký tkhông ph i là ti ng Anh, m t d u nh n... HTML quy nh vi c hi n th các ký t ó nh sau &XXXX;trong ó XXXX là tên mã cho các ký t c bi t ó. B n có th xem Danh sáchcác ký t c bi t này bi t thêm chi ti t.Ví d n u trong ph n body có o n nh sau:<h2 align=center>&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml;</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 (<), d u và (&)..., mà các ký t này trùng v i ký hi u c a m t
  • 14. tag. Ð hi n th các ký t này, HTML cung c p cho ta các ký hi u thay th nhsau: &lt; thay cho < &gt; thay cho > &amp; thay cho &Ví d : Ð hi n th 700 > 400 ta vi t nh sau: 700 &gt; 400Qua 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áckho ng tr ng trong file HTML. Tuy nhiên trình bày trang Web cho /p, b nmu#n chèn kho ng tr ng vào trong trang Web, ví d b n mu#n m t kho ng tr ngsau d u ch m câu hay sau d u ph y, chèn kho ng tr ng vào u m*i o n v nb n... Mu#n chèn kho ng tr ng ta dùng ký hi u &nbsp;Ngoài các ký hi u ã mô t trên, HTML còn cung c p thêm cho chúng ta m ts# ký hi u c bi t n a, ó là: &copy; thay cho â &reg; thay choVí d7.2. Th c hành1.T o m t file HTML sau ó thêm ph n sau vào trong ph n bodyHTML có th hi n th c các ký t c bi t nh :
  • 15. <ul><li>Các kýt latin:&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml;<li>Các d u l n h!n, nh+ h!n, d u và : &gt;&nbsp;&lt;&nbsp;&amp;<li>Các d u Copyright và Trademark : &copy;&nbsp;&reg</ul>2.L u công vi c c a b n và so sánh v i ví d mu:Chú ý: Ð hi n th úng các d u Copyright và Trademark n u b n dùng fontTi ng Vi t thì b n ph i .i các d u sang font Ti ng Anh.Cu#i cùng chúng tôi a ra m t b ng các ký t , b n hãy Click vào ây xemb ng. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn8. Ð a hình nh vào m t trang Web
  • 16. 8.1.Bài h cSau khi h c các bài tr c ch c b n vn còn th c m c, sao trang Web c a mìnhx u t , không gi#ng các trang trên Internet mà b n ã t"ng xem qua.Bình t0nh i b n , Sau khi h c bài này, b n s có th a hình nh vào trangWeb c a mình và b n s c m th y trang Web c a mình c ng th t h p dn.Ð 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.Ví d : Ð chèn m t nh có tên là anh1.jpg ta làm nh sau<img src = "anh1.jpg">tag <img...> 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. 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 = top2. align = middle3. align = bottomVí d
  • 17. Ngoài ra thu c tính này còn có m t s# giá tr khác nh : TextTop, AbsMiddle,AbsBottom và Baseline. Các b n hãy tìm hi u thêm qua bài th c hành.8.2.Th c hànhTr c khi a hình nh vào trong trang Web c a b n m i b n download m t s#hình nh làm ví d1 T o m t file HTML m i và s$ d ng các tag thêm nh vào trong trang Web2.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 abài h c8.3.Thêm m t s thu c tính c a tag <img...>1. Thu c tính alt = " ".Khi trang Web c a b n c xem b ng trình duy t mà ng i s$ d ng t t vi ctrình bày hình nh ti t ki m th i gian download, thu c tính alt = "" cho phépthay th vào v trí hình nh m t chu*i v n b n mô t nó.Ví d<img src = "../Pictures/Dowload.jpg" align = top alt = "Download Software">
  • 18. C m t" Download Software ã thay th cho hình nh.2. 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, b n nên a kích th c c a nh (tính b ng pixel) vào tag <img>. Cách s$ d ng các thu c tính này là:<img src = "" width = x, height = y>x,y là chi u r ng và chi u cao c a nh.3. Thu c tính t o vùng quanh nh.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 cthông thoáng, d% nhìn và /p m t h!n. Hai thu c tính có tên là HSPACE vàVSPACE:<img src = "" hspace = x, 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.y là kho ng cách vùng tr#ng trên )nh và áy c a b c nh.B ns c h c k h!n bài h c l n sau.Ð#i v i các thu c tính này, n u không a thêm vào tà img thì trình duy t t ng tính chúng tr c khi hi n th . B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn
  • 19. 9. C n ch nh l9.1.Bài h c9.1.a.S p x p v n b n vào gi a trang Trong các bài h c tr c, b n th y r ng trang Web c a b n ch) cc nlbên trái, và b n mu#n trình bày trang Web c a mình /p h!n b ng cách s px p các o n v n b n vào gi a trang, HTML có nhi u cách giúp b n th c hi n i u này.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à centerVí d : <p align = "center"> Xin chuc mung ban <p>
  • 20. 9.1.b.S p x p t ng i gi a v n b n và hình nhKhi mu#n có v n b n ph xung quanh hình nh, b n ch) vi c thêm thu c tínhalign 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:
  • 21. 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 nmu#n ,y v n b n k ti p xu#ng bên d i hình nh, 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>
  • 22. 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 tadùng thêm các thu c tính vspace và hspace trong tag <img>. 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.Ví d :<img src = "anh1.jpg" align = left vspace = 10 hspace = 20>So v i khi không có các thu c tính vspace và hspace
  • 23. 9.1.c. Ch nh l và s p x p v n b nNgoài các cách s p x p v n b n mà b n ã bi t, HTML còn cho chúng ta thêmm t tag c n ch)nh v n b n n a, ó là <div> ... </div>. Vùng v n b n ch u nhh ng c a tag này d a vào thu c tính align.<div align = left> ... </div><div align = right> ... </div>
  • 24. <div align = center> ... </div>9.2. Th c hànhBâ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 aVNN ch-ng h n, trong ó có s$ d ng các hình nh minh ho cho tin. 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, s$ d ng tag<div> canh l cho o n v n b n. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn10. T o các siêu liên k t
  • 25. Ð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ácthông tin liên quan. Nh ng thông tin này có th n m trong chính trang Web hayn m các trang Web khác bao g&m hình nh, âm thanh, o n phim...10.1. Liên k t t i m t file c c b .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 Webth hai. 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 mtrên m t máy v i trang Web u.Ð !n gi n tr c h t b n t o m t file HTML th hai và t nó cùng folder v itrang mà b n ã t o các bài tr c.Mu#n t o m t siêu liên k t ta dùng<a href = "filename.htm"> V n b n i di n cho m#i liên k t </a>B tc o n v n b n nào n m gi a<a href = " " > và </a> u là m t siêu v n b n liên k t t i các trang Web khác vànó c g ch d i.Th c hành1.T o m t trang Web khác gi s$ là vidu.htm và l u vào cùng Folder v i trangWeb c a b n.2.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 tnh sau :<a href = "vidu.htm">Xem ví d 1</a>3.L u l i công vi c c a b n và m trên trình duy t. Khi ó b n s th y o n v nb n Xem ví d c t o thành siêu liên k t, nó c .i thành màu xanh và khib 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 ub n b m chu t thì s c a t i trang có tên là vidu.htm
  • 26. 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.htm b ngm t file nh. Ví d : <a href = "logo.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 ccao 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.Gi s$ c u trúc folder c a b n có d ng|--My Web| |--Pictures| | |--i-today.gif| |--Trang web c a b n v trí nàyVà b n mu#n liên k t t i I-today.gif, khi ó trang tag <a href ..> b n s$a l i nhsau<a href = "Pictures/i-today.gif"> ... </a>Còn trong tr ng h p file b n c n t o liên k t có c u trúc folder cao h!nVí d :|--Pictures1|--My Web| |--Pictures| | |--i-today.gif| |--Trang web c a b n v trí nàyvà b n c n liên k t t i nh trong Folder Pictures1 có c p cao h!n th m cch a trang Web c a b n, khi ó b n c n s$a l i tag nh sau:<a href = "../pictures1/.."> </a>
  • 27. m*i l n xu t hi n "../" báo cáo cho trình duy t tìm ki m m t folder có c p caoh!n.Th c hànhBâ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 caoh!n. Khi th o các cách liên k t, 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, i u này làm cho vi c thay .i, c pnh t trang Web c thu n ti n h!n.Thêm m t chút v v n siêu liên k tÐ cho trang Web c a b n có v chuyên nghi p h!n, bây gi b n hãy .i tênthành index.htm. Ð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 a ch) c a trình duy thttp: //www.vnn.vn/i-today/Th c ra khi ó trình duy t s c filehttp: //www.vnn.vn/ i-today/ index.htm.10.2. 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 a ch) mà b n mu#n liên k tt i.Ví d v các URLhttp://www.hut.edu.vnhttp:// www.vnn.vnhttp://www.vnn.vn/i-todaymailto:hung_nd@vol.vnn.vnTh c hành1.T o m t file HTML và thêm o n sau vào trong ph n body
  • 28. <ul><li><a href = "http://www.hut.edu.vn">Tr ng Ð i h c Bách khoa Hà n i</a><li><a href = "http://www.vnn.vn/i-today">T p chí Công ngh Thông tin InternetToday</a><li><a href="mailto:hung_nd@vol.vnn.vn">G$i th cho Tr n Vi t Hùng</a></ul> 2. L u công vi c c a b n, sau ó m trình duy t và so sánh v i ví d . 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 tvà xem thông báo thanh tr ng thái c a trình duy t, thanh tr ng thái s hi n thURL mà b n s liên k t t i.10.3. Liên k t t i các ph n trong cùng m t trangHTML không nh ng cho b n t o liên k t n các trang Web khác n m cùngmáy tính v i trang Web c a b n ho c trên Internet, mà còn cho phép b n liên k t n các ph n trong cùng m t trang.Ð liên k t n các ph n c a m t trang tr c h t b n ph i t tên cho ph n c nliê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 raSau ó n u b n c n liên k t t i ph n ã t tên b n ch) c n dùng<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
  • 29. <a href = "vol1.htm#name> Text </a><a href = "URL#name> Text </a>Ví d :Click vào ây v u trang10.4. T o các siêu liên k t b ng hình nhNh b n vn th ng th y trong các trang Web, 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, i u này càng làm cho Web trnên h p dn. 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 ab n, gi s$ ó là graph.jpg. Khi ó b n s$ d ng các Tag nh sau<a href = "file.htm"> <img ser = "graph.jpg"></a>B n l u ý là tag <img..> n m gi a tag <a href ...> và </a>Khi m t nh c dùng làm siêu liên k t, s có m t h p màu có màu c a cácsiêu liên k t bao quanh nhL u ý: Vi c a m t hình nh l n vào trong trang Web làm cho ng i c ph im t th i gian ch t i vì v y b n nên s$ d ng m t s# m/o sau:1. Ð phòng ng i c t t ch hi n th hình nh c a trình duy t, b n nênthêm thu c tính alt = "..." vào tag <img...> ng i c d% nh h ng2. Khi c n gi i thi u m t hình nh l n, 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, nh th ( m t th i giandownload trang Web c a b n, 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 cl c, 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, cu#im*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.Trông gi#ng nh sau
  • 30. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn11. Thêm a ch , liên k t E-mail vào trang Web c a b n11.1. Bài h cNh b n vn th ng th y trong các trang Web trên Internet, ph n cu#i m*i trangth ng có các thông tin v trang Web, 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
  • 31. 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. Ð thêm footer vào trang Web, HTMLcung c p cho chúng ta tag <address> và cách s$ d ng nh sau <address> ... <!-- các thông tin--> ... </address>T t c v n b n n m trong tag <address> c in b ng ki u ch nghiêng, tuynhiê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.11.2.Th c hành1.T o m t file HTML, sau khi thêm các ph n thông tin cho 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 - T p chí Internet Today<br>Copyright @ 2000 by VASC<br>Ð a ch) : 99 Tri u Vi t V !ng - Hà n i<br>E_mail : <a href="mailto:i-today@vasc.vnn.vn">i-today@vasc.vnn.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.vn>hung_nd@vol.vnn.vn</a></p>
  • 32. </address>2.L u công vi c c a b n và so sánh v i ví d mu: B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vnPh n 2. Nâng cao12. T o các danh sách12.1. Bài h cDanh sách c dùng trình bày thông tin thành m t d ng d% c h!n. Ch-ngh n t o ra các b ng ch) m c, n i dung c a m t dãy các tài li u hay cácch !ng.HTML có hai ki u danh sách, danh sách có th t (ordered) và danh sách khôngcó th t (unorder).
  • 33. 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 tagsau:<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 ng Ð i h c Bách khoa Hà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 :
  • 34. Danh sách có th tDanh sách có th t là danh sách mà m*i m c c a danh sách c ánh s#,th ng b t u t" "1". Ð t o ra danh sách có th t ta dùng các tag sau:<ol> <li>Ch) m c th nh t ... <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 ch* thay tag <ul>b ng tag <ol>.Ví d : N u trong ph n body c a file HTML có o n<h3>Các b c chu,n b h c HTML</h3><ol> <li>Ch !ng trình so n th o v n b n tr!n (nh NotePad c a Windows) <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
  • 35. </ol>Danh sách nh ngh a (definition lists)Danh sách nh ngh0a không có các ch) m c u dòng. Sau khi k t thúc tag <dt>,nó t ng xu#ng dòng, vi t th t vào h t nh các nh ngh0a trong sách giáokhoa v y.Ví d : có trang web trên, b n ph i ánh o n mã sau:
  • 36. <h3>Ví d v danh sách nh ngh0a<h3><dl> <dt>Ð nh ngh0a 1</dt> <dd>gi i thích nh ngh0a 1.</dd> <dt>Ð nh ngh0a 2</dt> <dd>gi i thích nh ngh0a 2</dd> <dt>Ð nh ngh0a 3</dt> <dd>gi i thích nh ngh0a 3.</dd></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ó thl&ng các danh sách v i nhau.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
  • 37. </ol>Ta có danh sách nh sau :12.2.Th c hànhÐ a danh sách vào trang Web c a b n1. M m t file HTML m i, trong ph n body b n t o m t danh sách b ng các tagHTML nh sau :<h3>M c l c</h3><ul><li>Ch !ng m t <ol> <li>Gi i thi u chung <li>Nh ng ki n th c v( lòng v HTML </ol><li>Ch !ng hai <ol>
  • 38. <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 !ng ba <ul> <li>Các trang Web mu <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 mu
  • 39. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn13. Trang trí cho v n b n13.1.Bài h cQua 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ôngqua vi c thi t l p các thu c tính cho tag <body>. Trong bài này b n s h c cáchthay .i màu s c, kích th c, font ch c a ph n v n b n trong trang Web c ab n.13.1.a.C fontKhi mu#n thay .i c( font thì dùng<font size = X> ... </font>Trong ó X là c( font có giá tr t" 1 (nh+ nh t) n 7 (l n nh t)Ví d : C( font 1 C( font 2 C( font 3 ... C( font 7Ngoài ra HTML còn cho chúng ta m t cách khác th c hi n vi c thay .i c(font, thay .i t !ng #i
  • 40. <font size = + X> ... </font> <font size = - X> ... </font>Trong ó +X, -X là d ch chuy n so v i c( font hi n t i. Chúng th ng cdùng cùng v i tag <basefont size = X>X: C( font mu#n cm c nhChú ý: Tag <basefont> không có tag óng l i, nó có tác d ng cho n khi g pm t tag <basefont> khác.13.1.b.Ki u fontÐ làm cho trang Web thêm sinh ng, nhi u khi b n mu#n trình bày nó b ngnhi u ki u font khác nhau, 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 face = "fontname"> ... </font>trong ó fontname là tên c a font ch có trên máy tính c a ng i c trangWeb.Mu#n thêm màu s c cho ch , ta thêm thu c tính color vào tag fontVí d : <font face = "Arial" color = "#FFFFFF"> ... </font> < font face = ".Vn3DH" color = "#EEBBBB">...</font>
  • 41. 13.1.c.Hi n th ch s trên và ch s d iKhi 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 cch-ng h n chúng ta s$ d ng các tag <sup> ... </sup> cho ch) s# trên và <sub>... </sub> cho ch) s# d i.Ví d : Ð có NH4, ta ph i vi t NH<sub>4</sub> Ð có x2 ta ph i vi t x<sup>2</sup>
  • 42. 13.2. Th c hànhB n thân m n, b n ã h c c khá nhi u ki n th c v( lòng v HTML, bây gib n hãy áp d ng nh ng ki n th c ã h c t o cho mình m t trang Web v imàn hình n n có màu s c, các lo i font ch khác nhau, các hình nh và siêu liênk t...Khi ã làm nhi u trang Web b n s có nhi u kinh nghi m trong vi c ch nfont ch , ch n màu s c ... t" ó b n m i có th xây d ng c nh ng trangWeb /p c. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn14. Thêm màu s c cho trang Web c a b n14.1.Bài h c T" khi h c bài u tiên n bây gi , ch c nhi u khi b n th c m c: "T i saotrang Web c a mình l i ch) có hai màu en và tr ng, trong khi các trang Webmình nhìn th y u c trang trí r t /p". Xin b n hãy yên tâm, bài này s giúpb n gi i quy t th c m c ó.14.1.a.C b n v màu s cTrong m t trình duy t Web, b n có th s$ d ng 256 màu trang trí cho v nb n và n n. M*i màu c xác nh b i b ba Red-Green-Blue (RGB), các giá trc a R, G, B t" 0 n 255 th hi n c ng c a nó. Ví d khi c ba có giá trnh+ nh t (R=0, G=0, B=0) thì s cho ta màu en và khi c ba có giá tr l n nh t(R=255, G=255, B=255) thì cho ta màu tr ng. B ba RGB v i các giá tr khácnhau s cho ta các màu khác nhau.Trong HTML, khi mu#n s$ d ng m t màu nào ó, thay vì dùng các giá tr c a R,G, B h th p phân, b n ph i bi u di%n chúng d ng h 16.Ví d : Màu tr ng ng v i R=255, G=255, B=255 c bi u di%n là FFFFFF.
  • 43. 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 ng14.1.b.Màu n n c nhÐ 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àotrang tag <body> bgcolor = #XXXXXX text = #XXXXXX link = #XXXXXX vlink = #XXXXXXTrong ó bgcolor = Xác nh màu s c c a n n text = Xác nh màu s c c a v n b n link = Xác nh màu s c c a siêu liên k t vlink = Xác nh màu s c c a siêu liên k t ã xem quacòn XXXXXX là ký hi u màu d ng th p l c phân (có d u # tr c)Ví d :<body bgcolor = #000000 text = # EEEEBB link = #33CCFF vlink = #CC0000>S cho n n màu en, ch màu vàng, siêu liên k t màu xanh d !ng sáng, siêuliên k t ã xem màu +.
  • 44. Sau ây là m t s# màu c! b n và ký hi u t !ng ng Color Hex Code Color Hex Code xx oo xx FFCCCC xx oo xx 3300FF xx oo xx 33FF66 xx oo xx AA0000 xx oo xx 663300 xx oo xx 9900FF xx oo xx 000077 xx oo xx FFFF00 xx oo xx EEEEEE xx oo xx 888888 xx oo xx 444444 xx oo xx 000000 Color Name Color Name xx oo xx aqua xx oo xx black xx oo xx blue xx oo xx fuchsia xx oo xx gray xx oo xx green xx oo xx lime xx oo xx maroon xx oo xx navy xx oo xx olive xx oo xx purple xx oo xx red xx oo xx silver xx oo xx teal xx oo xx white xx oo xx yellow14.1.c.Trang trí n n b ng hình nh
  • 45. N u b n mu#n màu n n c a trang Web c a b n /p h!n, b n có th dùng m tfile nh nh+ trang trí cho n n. Khi ó, HTML s t o các b n sao liên t c c afile nh ph h t n n c a trang Web.Ð dùng hình nh làm n n cho trang Web, ta dùng thu c tính background trongtag <body> <body background = "filename">Trong ó filename là tên file nh mà b n dùng làm n n.14.2.Th c hành1.T o m t file HTML và chu,n b m t hình nh làm n n, ví d nh sau có tênlà strawb.jpgThêm vào tag body thu c tính background nh sau:<body background = "strawb.jpg">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 mu:
  • 46. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn15.Thêm m t chút v siêu liên k t b ng hình nh15.1.Bài h c Trong các bài h c tr c, b n ã h c c cách t o các siêu liên k t b nghình nh. 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 thình nh b ng cách chia hình nh ó thành các vùng, m*i vùng liên k t t i m ttrang Web khác nhau. Tr c h t m i b n xem ví d sau :- V i hình nh nh sau : - Sau khi c khoanh vùng và t o các siêu liên k t, bây gi , nh trên s cliên k t t i nhi u trang Web khác, b n hãy th$ click vào các tên t !ng ng trên nh và xem k t qu .Ð t o ra c m t hình nh v i nhi u liên k t, t i nhi u trang Web khác nhau,HTML cung câp cho chúng ta tag <map>, cách làm nh sau :1.Chu,n b m t hình nh t o các siêu liên k t : Trong ví d trên, nh có tên là: lienket.jpg, khi a hình nh này vào trang Web, trong tag <img> b n s$ d ngthu c tính usemap nh sau : <img src = "lienket.jpg" usemap = "map_name">trong ó map_name là ph n mà b n nh ngh0a các vùng c a nh t" ó t ocác siêu liên k t.2.Ð nh ngh0a các vùng t o siêu liên k t : Ð t o các vùng ta s$ d ng tag<map> nh sau :
  • 47. <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 ngh0a m t vùng có hình là thu c giá tr c a thu c tínhshape = "", có to là giá tr c a thu c tính coords = "", trong ví d trên vùngt 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,y1to góc d i bên ph i là x2,y2 và liên k t t i trang Web là giá tr c a thu ctính href = ""Ðo n mã HTML c a ví d trên 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.Th c hànhBây gi b n hãy chu,n b m t hình nh và dùng tag <map>, và th$ t o m t trangWeb 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. Chúc b nthành công. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn16. B ng
  • 48. 16.1. Bài h cVi c trình bày trang Web theo d ng b ng s làm cho trang Web c a b n chuyênnghi p h!n. V i d ng b ng b n có th chia trang Web thành nhi u ph n, b n cóth áp d ng các ki n th c ã h c trang trí riêng cho t"ng ph n...Khi xây d ng b ng, b n hãy nh quy t c sau: b t u t" ô cao nh t bên trái, ti ptheo xây d ng các ô c a hàng u tiên, sau ó chuy n xu#ng hàng th hai, xâyd ng các ph n t$ c a hàng th 2...--> --> --> --> ---> --> |----------------------------|--> --> --> --> ---> -->16.1.a. 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, tr c h t ta xét ví d sau.<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>
  • 49. Trong tag <table> ta th y thu c tính border có giá tr là 1, i u này ngh0a là v 1 ng vi n quanh b ng v i dày là 1 i m.M*i hàng c xác nh b i <tr> và </tr> vi t t t c a table row.M*i ô c nh ngh0a b i <td> và </td> vi t t t c a table data.Ð c n ch)nh l trong m*i ô, b n thêm các thu c tính sau vào tag <td>.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 a16.1.b. Các hàng và c tB ng mà b n t o trên m i ch) là b ng !n gi n v i ba hàng và ba c t unhau.
  • 50. B n hãy chú ý các b ng sau.B ng 1B ng 2B ng 3
  • 51. Ð 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 1m 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 mr 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)
  • 52. Ngay sau tag <table>, b n gõ vào tag <catpion> t a c a b ng, và k t thúcb ng tag óng </caption><table ><caption align="center" valign="top"><u>T a 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", ngh0a là t o t atrê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 ng vi n t o ra b ngMu#n thay .i thông s# c a các ng t o b ng ta thêm các thu c tính cho tag<table> nh sau: <table border = X cellpadding = Y cellspacing = Z>X: Chi u r ng ng vi n ngoài b ngY: "Kho ng tr ng" gi a d li u bên trong ô và vách ng n c a ô
  • 53. 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. Dùngb ng d ng này s p x p v n b n theo các hàng th-ng ng. Ð#i v i d li utrong b ng b n vn có th áp d ng các tag ã h c nh ví d sau ây chia mànhì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.vn"> Công ty VASC - VNN</a> </td><td ><a href ="http://www.tlnet.com.vn"> M ng Ph !ng nam</a></td></tr><tr><td><a href ="http://www.fpt.vn">Công ty FPT</a></td><td ><a href ="http://www.saigonnet.vn">Sài gòn net</a></td></tr><tr><td><a href ="http://www.netnam.vn"> Công ty Netna@m</a></td><td><a href ="http://www.vinaone.com.vn">M ng c a B th !ng m i</a></td></tr></table>
  • 54. </div>16.1.f.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 !ng ng vàocác tag c a b ng. 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àuVí dKhi ch a tô màu c b ng
  • 55. Khi tô màu c b ng b ng cách thêm thu c tính bgcolor vào tag <table>16.2.Th c hànhB 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, ví ddanh sách l p. Yêu c u b ng có thu c tính border = 0 và m*i tên trong danhsách là m t siêu liên k t n a ch) th i n t$ c a ng i t !ng ng. Sau khi ã xây d ng xong danh sách và siêu liên k t, b n có th thêm màu s c vào b ngcho /p. B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn
  • 56. 17. Forms Form là m t y u t# không th thi u có th giao ti p v i máy ch . Nó cdùng nh p d li u, l a ch n các kho n m c,... Trong quá trình liên k t v iCGI Script, 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. Trong bài h c này ta s cách t o form b ng các tag !n c a HTML. Khi t oform, 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 ó. Ví d : Trong h p text box v i tên là FirstName, ng i s$ d ng gõvào VASC, thì d li u g$i n server là FirstName=VASC.tag : <Form METHOD="" ACTION=""> <...các tag khác...> </form> n m gi a haitag BODYtrong ó thu c tính METHOD có hai giá tr là POST và GET. N u giá tr là POST,nó cho phép g$i d li u t" máy Client n Server (th ng c s$ d ng trongForm nh p li u). Còn v i GET thì ch) c s$ d ng trong Form v n tin. CònACTION ch) ra v trí c a CGI Script trên Server s c th c hi n. Các tag trongForm th ng dùng ch y u là <INPUT>, <SELECT>, <OPTION>.Chúng ta s l n l t xét m t s# Form !n gi n nh sau : • Text Blocks : T o ra vùng v n b n, có th nh p nhi u dòng. • Text Boxes : Ð nh p vào m t dòng !n. • Password Boxes : Form này gi#ng Text Boxes nh ng không hi n th các ký t . • Radio Buttons : Các nút l a ch n m t. • Check Boxes : H p Check Boxes. • Menus : T o ra h p Menu ,y xu#ng. • 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. • Hidden Elements : Các y u t# ,n. • Active Images :T o b c nh kích ho t. • CGI Script :Common Gateway Interface Script.17.1. Bài h c.Text Blocks : <textarea rows="" cols="" name=""> Text... </textarea> Trong ó cols là chi u r ng c a vùng v n Ví d? v? kh?i v n b?n.b n tính theo ký t . rows : chi u cao vùng v n Có th? ch?a u?c nhi?u dòng. và d? li?u ki?u s? 12 3 2 12 32...b n tính theo hàng. Name là thu c tính nh nd ng, s$ d ng trong Script. Các b n l u ý làText Blocks không b t u b ng tag INPUT.
  • 57. 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 aText Boxes. Maxlength, minlength ch)s# ký t t#i a hay t#i thi u có th nh pvào. value là giá tr ki u xâu c hi nth .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 TextBoxes. Ch) khác là khi b n nh p d li uthì các ký t không c hi n th .Radio Buttons : <input type="radio" name="" checked value="">L ach n l a ch n 1value ch a d li u s g$i n Serverkhi Radio Button checked. l a ch n 2Check Boxes : <input type="checkbox" name="" value="" checked>L ach n H p Check Boxes có các thu c tínhthành ph n gi#ng nh Radio Button. l a ch n 1thu c tính l a ch n là ph n v n b n ghiphía sau nút check box.
  • 58. l a ch n 2Menus : <select size="" multiple><option selectedvalue="">Text...</option> </select> C ng gi#ng nh Text Blocks, Menu có multiplekhông b t u t" INPUT mà là Công ti vi?n thôngSELECT. Thu c tính multiple cho phép Công ti thuong m?i qu?c t? Công ti ph?n m?mb 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. M*i l a ch n c a b n c không có multiple CPUmô t b ng các tag OPTION, và b n cóth ng m nh là nó c ch n b ngthu c tính selected.Submit and Reset Buttons : Nút Submit là nút server có th l y thông tin t" ng i s$ d ng. Sau khinh p li u song, ng i dùng n vào Submit thì m i thông tin s g$i n server.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 tinbáo l*i.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.<Input type="submit" name=""value="Submit Button"><Input type="reset" name="" Submit Buttonvalue="Reset Button">Thu c tính value ch a ph n text hi n thtrên nút b m. B n c m l u ý nút Reset Reset Buttonch) kh i ng l i các giá tr trong cùngm t form mà thô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" formtr c ó, do ó nó có th k t h p v i d li u c a form hi n t i.Ví d : n u form tr c ban ngh cho bi t tên, b n có th l u l i b i m t bi nvà thêm nó vào m t form m i nh là m t hidden element, sau ó name s cliê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.Các Hidden Elements không bao gi hi n trên m i browser úng v i cái tên c anó.
  • 59. Tag này có hai thu c tính, thu c tính name là tên c a thông tin c l u tr , cònvalue thông tin mà b n thân nó c l u l i.Active Images : <input type="image" src="" name=""> Thu c tính ch a trong src ch) ra ng dn t i file nh trên server.Thu c tính name cho m t tên. Khi ng i dùng click vào nh thì t o x và y c achu t hi n hành s c b. sung vào tr ng name này và g$i n server.Ví D : Gi s$ máy ch mu#n bi t b n t" n!i nào n, nó cho b n m t b n &th gi i. B n ch) vi c click lên b n &, gi s$ b n sinh ra Vi t nam thì ch) vi ctìm úng n c Vi t nam và click lên ó.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ênURL. Nó có th c vi t b ng ngôn ng máy tính nh C hay Pascal, 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. CGI Script c dùng kích ho t môt ch !ng trình trên server, l y thông tinvà sau ó thông báo l i cho ng i s d ng. Ví d b n có th dùng CGI Scriptg i ch !ng trình ngày trên server và thông báo k t qu trên trang web.Ð t o m t liên k t n CGI Script b n hãy dùng tag <ahref="http://www.site.com/CGI-BIN/path/cgiscript>v n b n liên k t</a>. Trong óhttp://www/site/com là tên c a server ch a CGI Script. CGI-BIN là v trí c a CGIScript trên UNIX server. /path ch) ra ng dn t i cgi-script n u không tìm th ytrong th m c cgi-bin chính. #!/bin/sh o n mã này là script t o ra m ttrang HTML, nó l y ngày trên server echo "Content-type:text/html"và chèn vào trang HTML <html>b n hãy copy toàn b o n mã trong <head><title>L?y ngày h? th?ng</title>text block này vào trang web là có </head> <body>th l y ngày gi .17.2. Th c hành.
  • 60. Sau khi h c lý thuy t song, b n hãy th c t p nh l i các ki n th c ã h c. B n hãy t o m t form nh p h tên, n!i , m t kh,u và m t s# thông tin khácnh b ng d i ây. Trong ó form H tên, n!i dùng text box, form m t kh,udùng password. gi i tính s dùng hai radio button Nam và N , b n nh là ch) c phép ch n m t trong hai mà thôi. Form thành ph# s dùng pop-up menu,có các thành ph# Hà N i, H i Phòng,... c ng ch) c ch n m t n!i duy nh t.Cu#i cùng là text block Thông tin thêm ng i dùng ghi chú thêm n u c n.Sau khi nh p song, click vào Submit g$i thông tin n Server.Chúc b n thành công. Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: i-today@vasc.vnn.vn18. Multimedia - N u b n có loa, hãy v n to lên...
  • 61. Các b n thân m n, m t trong nh ng y u t# không th thi u làm trang webc a b n sinh ng h!n và hoàn h o h!n ó là âm thanh và hình nh ng. Hi nnay 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. Nh ng có m t v n là nh b n ã bi t, kích th c c a các filemedia r t l n. m t file âm thanh ch t l ng t#t có th i gian 10 giây thì kíchth c c a nó c( 200K và t i xu#ng ph i m t ít nh t là m t phút. Ph i ng&ich n m t phút trên máy ch) c# g ng c nghe nh c thì qu là không thch p nh n c, h!n n a sau khi t i xu#ng bài hát không hay thì l i càng b cmình h!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 filethích h p, có kích th c càng nh+ càng t#t. Ví d nh các file âm thanh midi(*.mid) hay file ra (*.ra) mà hi n nay c s$ d ng ch y u trên m ng, và các filevideo avi (*.avi)... 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 tc nh video vào trang web c a các b n. • Ð a âm thanh vào trang web c a b n • Xem Video trên trang webBài h c.Sound. Ð s$ d ng m t file nh c làm âm thanh n n ta dùng tag <bgsoundsrc="sound.ext" Loop="">. Tag này không có tag k t thúc. Thu c tính src ch) ra ng dn n file âm thanh sound.ext trên server ; Còn thu c tính Loop chophép l p l i nhi u l n n u mu#n, giá tr c a nó là m t s# nguyên, và n u b ng -1thì s l p vô h n. Tag này c t gi a hai tag <head> và </head>Ngay sau khi c truy c p, trang web c a b n s ngay l p t c "ch!i" filesound.ext. Bây gi ta s t o m t liên k t có th ch!i nh c. Gi s$ khi ta click lên m thình nh hay m t dòng ch nào ó thì quá trình ch!i nh c m i b t u. Ta s s$d ng tag sau : <a href src="sound.ext"> text liên k t </a>. Ví d b n hãy Clickvào ây b t u nghe nh c.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>. Khi click vào nh thì s b t u ch!inh c.Video. T !ng t , ta c ng dùng tag <a href src="video.ext"> liên k t </a>. V ivideo.ext là tên file hình nh trên server, ví d"http://www.windows.com/LocalName/flower.avi" ch-ng h n.
  • 62. V i cách s$ d ng tag trên, b n ph i nghe nh c b ng trình nghe nh c c a h i u hành. Ð 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.ext">. V i tag này, b n có th nghe nh c b t c lúcnào, mu#n l p l i ho c i u khi n n o n nh c nào tu b n. Th t là ti n ph ikhông b n.Ð n ây b n có th làm cho trang web c a b n sinh ng h!n r&i y. Chúc b nthành công . Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: i-today@vasc.vnn.vn20.1.Bài h c Tr c khi vào bài h c, b n hãy ý k m t chút trang này, khi b n scroll c v n b n thì ph n t hình nh và tên bài h c vn ng im, không b dichuy n.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. B n có th chia trang Web thành nhi u ph n tu thích, 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 ynhiêu file HTML m*i frame hi n th m t file HTML.Thông th ng o n mã c a m t file HTML c chia thành các frame nh sau :
  • 63. <html><head><title>Tiêu trang Web c a b n</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 ! 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 nganghay chi u d c. N u b n nh phân chia theo chi u d c thì dùng tag <frameset>nh sau :<frameset cols = "X,Y,..,Z">V i X,Y,..,Z là r ng c a các frame, b n có th cho giá tr là i m, ph ntr m...,ví d<frameset cols = "170,530"><frameset cols = "15%,85%"><frameset cols = "170,*">trong ví d cu#i cùng b n th y có d u *. D u * cho bi t tr c h t chia cho m tframe r ng là 170, ph n còn l i dành h t cho frame còn l i.Cách làm t !ng t #i v i trang chia theo chi u ngang.Tag <frame> có tác d ng nh ngh0a m t frame. Frame này s có tên là giá trc 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> ... </noframes> dùng hi n th thông báo khi trình duy t c ang i c Web không h* tr frame, ví d<noframes>Sorry ! Trình duy t c a b n không h* tr frame</noframes>
  • 64. 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,*><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 webbrowser that can display frames</NOFRAMES></html>Thông th ng, m t trang Web c trình bày nh sau :
  • 65. trong ó gi s$ frame làm menu có tên là menu và frame hi n th thông tin có tênlà display. Khi click lên các siêu liên k t frame menu thì n i dung c a các trangt !ng ng hi n lên frame display, làm c i u ó, trong file HTML c aframe menu b n a thêm tag <base> vào ngay sau tag <body>...<body><base target = "display">...Khi b n không mu#n hi n th border c a frame, b n thêm thu c tính border = "0"và frameborder = "0" vào tag <frameset><FRAMESET ROWS="45,*,150" BORDER=0 frameborder="0">Trong trình duy t b n không mu#n thay .i kích th c c a frame, b n thêmthu c tính NoResize vào trong tag <frame><FRAME NAME="myfixedframe" border=8 frameborder="1" SRC="fixed.html"NORESIZE>20.2.Th c hành B n ã h c xong cách chia trang Web thành các frame, bây gi b n hãy tmình chia các trang web thành các frame nh trong các hình 1,2,3,4,5,6,8. Các b n thân m n, qua các bài h c, các b n ã n m c khá v ng nh ngkhi n th c c! b n nh t v HTML. Gi ây b n có th xây d ng cho riêng mìnhm t trang web /p m t ch-ng kém gì các trang mà b n th y trên m ng, ví dnh xây d ng trang web v gia ình b n hay m t nhóm b n bè thân thi t c ab n ch-ng h n. 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.vnn.vn