Html can ban by maximus12

VIEWS: 87 PAGES: 67

									www.nhipsongcongnghe.net

www.nhipsongcongnghe.net

HTML Cơ B n
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

www.nhipsongcongnghe.net

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

www.nhipsongcongnghe.net
<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>

www.nhipsongcongnghe.net
<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> 3. Lưu file v i ph n m r ng là htm. Ví d Bai1.htm. Lu ý: B n nên t o m t Folder riêng su t th i gian h c HTML. ch a các t p tin mà b n s t o ra trong

4. Kh i ng IE ho c Nescape. Ch n File / Open. S d ng h p tho i HTML b n v a t o.

m file

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 tri th c - 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. 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..." 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.vnn.vn

www.nhipsongcongnghe.net

3. Hi n th văn b n
3.1.Bài h c

d ng

m, nghiêng, g ch chân...

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 n c n ph i hi n th văn b n các d ng m, nghiêng, g ch chân... HTML có các tag nh d ng ki u ch giúp b n. 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

B 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 t cá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 i 2. Thêm các tag nh d ng ki u ch . Lúc này file HTML c a b n trong ph n body có d ng như sau. <h3><b><i>Chú ý khi t o file HTML</i></b></h3>

www.nhipsongcongnghe.net
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. 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 m u.

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

4. Sáu m c tiêu
4.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ích c , 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 <hx> Tên tiêu chúng ta dùng <hx>

www.nhipsongcongnghe.net
Trong ó x là m t s có giá tr t 1 cho các c c a tiêu . n 6 ch kích c tiêu . Sau ây là ví d

Tiêu
Tiêu
Tiêu
Tiêu
Tiêu
Tiêu

c 1 <!-- H1 c 36 -->
c 2
c 3

c 4
c 5
c 6.

4.2.Th c hành Thêm các tiêu vào trang Web c a b n. bài h c trư c b ng trình so n th o văn

1. M l i file HTML mà b n ã t o ra b 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 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... 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 m u, 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.

www.nhipsongcongnghe.net

5. Chia văn b n thành nhi u o n 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, 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ô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... 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 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. Ð chia o n HTML dùng tag <p>

www.nhipsongcongnghe.net
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>. 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. u t

2. Chúng ta thêm o n m i vào văn b n, 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 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. Ðưa con tr so n th o b n trông gi ng như sau. n cu i o n u, thêm tag <p>. Lúc này o n vă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. 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... <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 n có th t t o ra các trang Web cho riêng mình 4. 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 m u.

www.nhipsongcongnghe.net
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ùng chia 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ông chè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 ng tag 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> 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.vn

www.nhipsongcongnghe.net

5. Preformatled text
5.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. 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 u hi u xu ng dòng khi ta so n th o. Tuy nhiên b n v n có th hi n th ư c văn b n như lúc b n nh p vào b ng cách s d ng tag <pre> Ví d <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 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, b n nh dùng

www.nhipsongcongnghe.net

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

6. Thêm m t ki u trình bày cho trang Web c a b n
6.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 d n, 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> Ð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. 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:

www.nhipsongcongnghe.net
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 n văn b n ư c n i b t hơn, ví d b n c n hi n th m t chú ý, khi ó b n hã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 n c 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ành V i nh ng ki n th c ã h c ư c, 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, siêu liên k t và các ghi chú dùng tag <blockquote>

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

7. S d ng các ký t
7.1.Bài h c

c bi t

Ðôi khi trong trang Web c a b n có các ký t c bi t, ch ng h n như ký t khô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ách các ký t c bi t này bi t thêm chi ti t.

www.nhipsongcongnghe.net
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 tag. Ð hi n th các ký t này, HTML cung c p cho ta các ký hi u thay th như sau: &lt; thay cho < &gt; thay cho > &amp; thay cho & Ví d : Ð hi n th 700 > 400 ta vi t như sau: 700 &gt; 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. Tuy nhiên trình bày trang Web cho p, b n mu n chèn kho ng tr ng vào trong trang Web, 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, chèn kho ng tr ng vào u m i o n văn b 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 t s ký hi u c bi t n a, ó là: &copy; thay cho â &reg; thay cho

www.nhipsongcongnghe.net
Ví d

7.2. Th c hành 1.T o m t file HTML sau ó thêm ph n sau vào trong ph n body HTML có th hi n th <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 m u: ư c các ký t c bi t như:

www.nhipsongcongnghe.net
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. 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 b ng. xem

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

8. Ða hình nh vào m t trang Web
8.1.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, sao trang Web c a mình x u t , không gi ng các trang trên Internet mà b n ã t ng xem qua. Bình tĩnh i b n , Sau khi h c bài này, 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. Ð 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">

www.nhipsongcongnghe.net

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 = top 2. align = middle 3. align = bottom Ví d

www.nhipsongcongnghe.net

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ành Trư 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í d 1 T o m t file HTML m i và s d ng các tag thêm nh vào trong trang Web

2.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.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 c trình bày hình nh ti t ki m th i gian download, 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ó. Ví d <img src = "../Pictures/Dowload.jpg" align = top alt = "Download Software">

www.nhipsongcongnghe.net

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 ư c thô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. nh và áy c a b c nh.

y là kho ng cách vùng tr ng trên 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

www.nhipsongcongnghe.net

9. Căn ch nh l
9.1.Bài h c 9.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 ư c căn l bê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 p x 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à center Ví d : <p align = "center"> Xin chuc mung ban <p>

www.nhipsongcongnghe.net

9.1.b.S p x p tng

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

www.nhipsongcongnghe.net

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

www.nhipsongcongnghe.net

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

www.nhipsongcongnghe.net

9.1.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, HTML còn cho chúng ta thêm m t tag căn ch nh văn b n n a, ó là <div> ... </div>. 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. <div align = left> ... </div>

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

www.nhipsongcongnghe.net

<div align = center> ... </div>

9.2. 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, 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.vn

10. T o các siêu liên k t

www.nhipsongcongnghe.net
Ð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. 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, â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 Web th 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 m trê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à trang 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 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. Th c hành

1.T o m t trang Web khác gi s là vidu.htm và lưu vào cùng Folder v i trang Web 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 t như 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ăn b n Xem ví d ư c t o thành siêu liên k t, 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.htm

www.nhipsongcongnghe.net

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 ng m 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 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. 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ày

Và b n mu n liên k t t i I-today.gif, khi ó trang tag <a href ..> b n s a l i như sau <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ơn Ví d : |--Pictures1 |--My Web | |--Pictures | | |--i-today.gif | |--Trang web c a b 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, khi ó b n c n s a l i tag như sau: <a href = "../pictures1/.."> </a>

www.nhipsongcongnghe.net
m i l n xu t hi n "../" báo cáo cho trình duy t tìm ki m hơn. Th c hành 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. 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 p nh 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 i tên m t folder có c p cao

Ð cho trang Web c a b n có v chuyên nghi p hơn, bây gi b n hãy thà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 http: //www.vnn.vn/i-today/ Th c ra khi ó trình duy t s c file

a ch c a trình duy t

http: //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 t i. Ví d v các URL http://www.hut.edu.vn http:// www.vnn.vn http://www.vnn.vn/i-today mailto:hung_nd@vol.vnn.vn Th c hành 1.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

www.nhipsongcongnghe.net
<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 Internet Today</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 t và xem thông báo thanh tr ng thái c a trình duy t, thanh tr ng thái s hi n th URL 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 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, 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 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

www.nhipsongcongnghe.net
<a href = "vol1.htm#name> Text </a> <a href = "URL#name> Text </a> Ví d :Click vào ây v u trang

10.4. 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, 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 tr nên h p d n. 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, 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ác siêu liên k t bao quanh nh Lu ý: Vi c ưa m t hình nh l n vào trong trang Web làm cho ngư i m t th i gian ch t i vì v y b n nên s d ng m t s m o sau: c ph i

1. Ð phòng ngư i c t t ch hi n th hình nh c a trình duy t, b n nên thêm thu c tính alt = "..." vào tag <img...> ngư i c d nh hư ng 2. 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 gian download 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 c l 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 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. Trông gi ng như sau

www.nhipsongcongnghe.net

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

11. Thêm
11.1. Bài h c

a ch , 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, ph n cu i m i trang thư 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

www.nhipsongcongnghe.net
© ... Ph n này g i là footer c a trang Web. Ð thêm footer vào trang Web, HTML cung 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, 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. 11.2.Th c hành 1.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> Tên và E-mail c a tác gi c a trang Web

www.nhipsongcongnghe.net
</address> 2.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.vnn.vn

Ph n 2. Nâng cao
12. T o các danh sách
12.1. 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. Ch ng h 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ác chương. HTML có hai ki u danh sách, danh sách có th t (ordered) và danh sách không có th t (unorder).

www.nhipsongcongnghe.net
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ư 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 :

www.nhipsongcongnghe.net

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 , 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 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 <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 h c HTML</h3> ch thay tag <ul>

www.nhipsongcongnghe.net
</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. 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 nghĩa trong sách giáo khoa v y. Ví d :

có trang web trên, b n ph i ánh o n mã sau:

www.nhipsongcongnghe.net
<h3>Ví d v danh sách <dl> <dt>Ð nh nghĩa 1</dt> <dd>gi i thích nh nghĩa 1.</dd> nh nghĩa<h3>

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

www.nhipsongcongnghe.net
</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 n 1. M m t file HTML m i, 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ươ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>

www.nhipsongcongnghe.net
<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 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

www.nhipsongcongnghe.net

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

13. Trang trí cho văn b n
13.1.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>. Trong bài này b n s h c cách thay i màu s c, kích thư c, font ch c a ph n văn b n trong trang Web c a b n. 13.1.a.C font Khi 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) Ví d :
C font 1

n 7 (l n nh t)

C font 2

C font 3 ...

C font 7
Ngoài ra HTML còn cho chúng ta m t cách khác font, thay i tương i th c hi n vi c thay ic

www.nhipsongcongnghe.net
<font size = + X> ... </font> <font size = - X> ... </font> Trong ó +X, -X là dùng cùng v i tag d ch chuy n so v i c font hi n t i. 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, nó có tác d ng cho m 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 ng nhi 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 Web. Mu n thêm màu s c cho ch , ta thêm thu c tính color vào tag font Ví d : <font face = "Arial" color = "#FFFFFF"> ... </font> < font face = ".Vn3DH" color = "#EEBBBB">...</font> c trang

www.nhipsongcongnghe.net

13.1.c.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> ... </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>

www.nhipsongcongnghe.net
13.2. Th c hành B n thân m n, b n ã h c ư c khá nhi u ki n th c v lòng v HTML, 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, các lo i font ch khác nhau, các hình nh và siêu liên k t...Khi ã làm nhi u trang Web b n s có nhi u kinh nghi m trong vi c ch n font ch , ch n màu s c ... t ó b n m i có th xây d ng ư c nh ng trang Web p ư c.

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

14. Thêm màu s c cho trang Web c a b n
14.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 sao trang Web c a mình l i ch có hai màu en và tr ng, trong khi các trang Web mì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úp b n gi i quy t th c m c ó. 14.1.a.C b n v màu s c Trong m t trình duy t Web, b n có th s d ng 256 màu trang trí cho văn b n và n n. M i màu ư c xác nh b i b ba Red-Green-Blue (RGB), các giá tr c a R, G, B t 0 n 255 th hi n cư ng c a nó. Ví d khi c ba có giá tr nh 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ác nhau 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.

www.nhipsongcongnghe.net
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ư ng 14.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à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, ch màu vàng, siêu liên k t màu xanh dương sáng, siêu liên k t ã xem màu .

www.nhipsongcongnghe.net

Sau ây là m t s màu cơ b n và ký hi u tương ng Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx

Hex Code
FFCCCC 33FF66 663300 000077 EEEEEE 444444

Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx

Hex Code
3300FF AA0000 9900FF FFFF00 888888 000000

Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx

Name
aqua blue gray lime navy purple silver white

Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx

Name
black fuchsia green maroon olive red teal yellow

14.1.c.Trang trí n n b ng hình nh

www.nhipsongcongnghe.net
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 t file nh nh trang trí cho n n. Khi ó, 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. Ð dùng hình nh làm n n cho 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. 14.2.Th c hành 1.T o m t file HTML và chu n b m t hình nh là strawb.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.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 m u:

www.nhipsongcongnghe.net

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

15.Thêm m t chút v siêu liên k t b ng hình nh
15.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 ng hì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 t hì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 t trang 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 ư c liê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 ng thu c tính usemap như sau : <img src = "lienket.jpg" usemap = "map_name"> trong ó map_name là ph n mà b n các siêu liên k t. 2.Ð 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

www.nhipsongcongnghe.net
<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 nghĩa m t vùng có hình là thu c giá tr c a thu c tính shape = "", có to là giá tr c a thu c tính coords = "", 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,y1 to 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 c tí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ành Bâ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 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. 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

16. B ng

www.nhipsongcongnghe.net

16.1. 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. 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 p theo xây d ng các ô c a hàng u tiên, sau ó chuy n xu ng hàng th hai, xây d 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>

www.nhipsongcongnghe.net

Trong tag <table> ta th y thu c tính border có giá tr là 1, i u này nghĩa là v 1 ư ng vi n quanh b ng v i dày là 1 i m. M i hàng ư c xác M iô ư c nh b i <tr> và </tr> vi t t t c a table row.

nh nghĩa 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 a

16.1.b. Các hàng và c t B ng mà b n t o nhau. trên m i ch là b ng ơn gi n v i ba hàng và ba c t u

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

B ng 2

B ng 3

www.nhipsongcongnghe.net

Ð 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

www.nhipsongcongnghe.net

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  ng vi n t o ra b ng Mu 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 ng Y: "Kho ng tr ng" gi a d li u bên trong ô và vách ngăn c a ô

www.nhipsongcongnghe.net
Z: Ð r ng c a nh ng ư ng bên trong b ng Ví d b ng sau có tag <table> như sau: <table border=3 cellpadding=4 cellspacing=8> chia các ô

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ùng b 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 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.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>

www.nhipsongcongnghe.net
</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ào cá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àu Ví d Khi chưa tô màu c b ng

www.nhipsongcongnghe.net

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à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, ví d danh sách l p. 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. 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 ng cho p.

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

www.nhipsongcongnghe.net

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ó ư c dù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 i CGI 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 o form, 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 hai tag BODY trong ó 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 trong Form nh p li u). Còn v i GET thì ch ư c s d ng trong Form v n tin. Còn ACTION ch ra v trí c a CGI Script trên Server s ư c th c hi n. Các tag trong Form 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 b n tính theo ký t . rows : chi u cao vùng văn b n tính theo hàng. Name là thu c tính nh n d ng, s d ng trong Script. Các b n lưu ý là Text Blocks không b t u b ng tag INPUT.
Ví d? v? kh?i văn b?n. Có th? ch?a u?c nhi?u dòng. và d? li?u ki?u s? 12 3 2 12 32...

www.nhipsongcongnghe.net

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. Maxlength, minlength ch s ký t t i a hay t i thi u có th nh p vào. value là giá tr ki u xâu ư c hi n th .

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 .

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. 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. thu c tính l a ch n là ph n văn b n ghi phía sau nút check box.

l a ch n 1

www.nhipsongcongnghe.net
l a ch n 2

Menus : <select size="" multiple><option selected value="">Text...</option> </select>
Cũng gi ng như Text Blocks, Menu không b t u t INPUT mà là SELECT. 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. M i l a ch n c a b n ư c mô t b ng các tag OPTION, và b n có th ng m nh là nó ư c ch n b ng thu c tính selected. có multiple
Công ti vi?n thông Công ti thuong m?i qu?c t? Công ti ph?n m?m

không có multiple
CPU

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 khi nh 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 tin bá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 Button value="Reset Button"> Thu c tính value ch a ph n text hi n th Reset Button trên nút b m. 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.

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 ó, 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 n và thêm nó vào m t form m i như là m t hidden element, 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. 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ó.

www.nhipsongcongnghe.net
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òn value 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 d n 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 a chu 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 c tì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ên URL. 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 tin và sau ó thông báo l i cho ngư i s d ng. 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. Ð t o m t liên k t n CGI Script b n hãy dùng tag <a href="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 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.

o n mã này là script t o ra m t trang HTML, nó l y ngày trên server và chèn vào trang HTML

#!/bin/sh echo "Content-type:text/html"

b n hãy copy toàn b o n mã trong text block này vào trang web là có th l y ngày gi .

<html> <head><title>L?y ngày h? th?ng</title> </head> <body>

17.2. Th c hành.

www.nhipsongcongnghe.net
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ác như b ng dư i ây. Trong ó form H tên, nơi dùng text box, form m t kh u dù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.vn

18. Multimedia - N u b n có loa, hãy v n to lên...

www.nhipsongcongnghe.net
Các b n thân m n, 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. 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. Nhưng có m t v n là như b n ã bi t, kích thư c c a các file media r t l n. 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. 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, 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. 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, 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 file video 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 t c 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 web

Bài h c.

Sound.
Ð s d ng m t file nh c làm âm thanh n n ta dùng tag <bgsound src="sound.ext" Loop="">. Tag này không có tag k t thúc. Thu c tính src ch ra ư ng d n n file âm thanh sound.ext trên server ; Còn thu c tính Loop cho phé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 -1 thì 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" file sound.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 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. Ta s s d ng tag sau : <a href src="sound.ext"> text liên k t </a>. Ví d b n hãy Click và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ơi nh c.

Video.
Tương t , ta cũng dùng tag <a href src="video.ext"> liên k t </a>. V i video.ext là tên file hình nh trên server, ví d "http://www.windows.com/LocalName/flower.avi" ch ng h n.

www.nhipsongcongnghe.net
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úc nà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 i không b n.

Ð n ây b n có th làm cho trang web c a b n sinh thành công .

ng hơn r i

y. Chúc b n

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

20.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 v n ng im, không b di chuy 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 y nhiê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 :

www.nhipsongcongnghe.net
<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 ngang hay 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à trăm...,ví d r ng c a các frame, b n có th cho giá tr là i m, ph n

<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 t frame 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 nghĩa m t frame. 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> ... </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, ví d <noframes> Sorry ! Trình duy t c a b n không h tr frame </noframes>

www.nhipsongcongnghe.net
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 web browser that can display frames </NOFRAMES> </html> Thông thư ng, m t trang Web ư c trình bày như sau :

www.nhipsongcongnghe.net
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. 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, làm ư c i u ó, trong file HTML c a frame 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êm thu 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 t mì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 ng khi n th c cơ b n nh t v HTML. 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, 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.

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


								
To top