Html vnn canban

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 dng � báo cho trình duy�t Web (Web browser) bi�t cách � hin 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 �on mã � trình duy�t Web bi�t cách � thông d�ch và hin 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 �on mã ��c bi�t � bi�t cách hin th� file HTML �ó.

Ví d�: Khi trong file HTML có �on

<h3> C�u trúc c�a file HTML </h3>

thì s� hin th� �on "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).

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, hin th� �nh...

Trong ví d� trên ta th�y sau tag <h3> và �on 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 vy 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, ti �ây bn có th nh�p vào các �on v�n b�n cùng các th� khác quy ��nh v� ��nh dng 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 .

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>

.....



.....

</body>

</html>.

B�n quy�n Công ty Phát trin Ph�n m�m (VASC) E-mail: [email protected]

2. T�o file HTML ��u tiên.

Sau khi �ã ��c ph�n trên, bn �ã 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 to ra file HTML ��u tiên.

1. M� Notepad c�a Windows hay b�t k m�t trình son th�o v�n b�n nào có th to ra nh�ng v�n b�n tr!n (plain text). N�u bn dùng Microsoft Word thì ph�i l�u tr� � dng ASCII.

2. Bn 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 bn �ã tham gia chuyên m�c Chân tr�i tri th�c c�a tp chí Công ngh� Thông tin Internet Today. Trong ph�n này bn s� ��c h�c nh�ng ki�n th�c c! b�n v� HTML, công c� � to ra các trang Web. Sau khi �ã h�c xong v� HTML bn có th to 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 ý: Bn nên to m�t Folder riêng � ch�a các t�p tin mà bn s� to ra trong su#t th�i gian h�c HTML.

4. Kh�i ��ng IE ho�c Nescape. Ch�n File / Open. S$ d�ng h�p thoi � m� file HTML bn v"a to.

5. Bn 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 bn �ã tham gia chuyên m�c Chân tr�i tri th�c c�a tp chí Công ngh� Thông tin Internet Today. Trong ph�n này bn s� ��c h�c nh�ng ki�n th�c c! b�n v� HTML, công c� � to ra các trang Web. Sau khi �ã h�c xong v� HTML bn có th to ra nh�ng trang Web ��y �n t��ng v i v�n b�n, hình �nh, âm thanh..." mà bn �ã vi�t trong ph�n body


3. Hi�n th� v�n b�n � d�ng �m, nghiêng, g�ch chân...

3.1.Bài h�c

Khi trình bày m�t trang Web, có lúc c�n nh�n mnh, hay � to s� khác bi�t, bn c�n ph�i hin th� v�n b�n � các dng ��m, nghiêng, gch chân... HTML có các tag ��nh dng kiu ch� � giúp bn.

HTML K�t qu�

<u>Ðây là tag gch chân</u> Ðây là tag gch 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 strikeline

Bn 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 bn có th áp d�ng các tag v i tiêu ��

<h2> <i> .... </i> <h2>

3.2.Thc hành

áp d�ng vào file HTML c�a bn.

1. To m�t file HTML m i

2. Thêm các tag ��nh dng kiu ch�. Lúc này file HTML c�a bn trong ph�n body có dng nh� sau.

<h3><b><i>Chú ý khi to file HTML</i></b></h3>

N�u bn dùng các ch�!ng trình son th�o v�n b�n<b><u> khác NotePad c�a Windows </u></b>thì bn ph�i nh l�u k�t qu� � dng v�n b�n tr!n (ASCII)

3. L�u công vi�c c�a bn.

4. Dùng trình duy�t m� và so sánh v i ví d� m'u.


4. Sáu m�c tiêu ��

4.1. Bài h�c

Khi trình bày m�t trang Web, �ôi khi bn 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.

Ð to 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í d� cho các c( c�a tiêu ��.

Tiêu �� c� 1 

Tiêu �� c� 2

Tiêu �� c� 3

Tiêu �� c� 4

Tiêu �� c� 5

Tiêu �� c� 6.

4.2.Thc hành

Thêm các tiêu �� vào trang Web c�a b�n.

1. M� li file HTML mà bn �ã to ra � bài h�c tr� c b�ng trình son th�o v�n b�n mà bn �ã dùng � to ra nó.

2. Thêm �on sau vào file HTML. Bn c�n l�u ý �on thêm vào ph�i n�m gi�a <body> và </body>

<h1>G i thi�u chung</h1>

vào tr� c �on "Chào m"ng bn �ã tham gia chuyên m�c Chân tr�i tri th�c c�a tp chí Công ngh� Thông tin Internet Today. Trong ph�n này bn s� ��c h�c nh�ng ki�n th�c c! b�n v� HTML, công c� � to ra các trang Web. Sau khi �ã h�c xong v� HTML bn có th to 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 bn v"a làm.

4. Dùng trình duy�t Web � m� file HTML bn v"a to và so sánh v i ví d� m'u, n�u bn th�y khác bn có th ph�i xem li nh�ng gì mình �ã to trong file HTML.

5. Chia v�n b�n thành nhi�u �on

Tr� c h�t bn li m� file HTML mà bn �ã to t" các bài h�c tr� c b�ng trình son th�o v�n b�n, thay vì � v�n b�n nh� c�, bây gi� � cu#i m*i dòng bn có th gõ Enter vài l�n, khi �ó �on v�n b�n c�a bn trông có v� nh� sau :


L�u công vi�c bn v"a làm và m� nó trên trình duy�t c�a bn. Khi �ó bn s� trông th�y k�t qu� trên trình duy�t nh� sau :

Bn 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 bn gõ Enter và b+ qua các dòng tr#ng nên bn th�y �on v�n b�n mà bn v"a nh�p dù có Enter � xu#ng dòng nh�ng v'n li�n v i nhau.

Ð chia �on HTML dùng tag <p>

C�ng l�u ý r�ng tag <hx> g�n li�n v i s� chia �on nên bn 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 son th�o v�n b�n � m� tile HTML mà bn �ã to t" tr� c.

2. Chúng ta thêm �on m i vào v�n b�n, sau �on ��u

Tp chí Internet Today là m�t tp chí �i�n t$ chuyên v� Công ngh� thông tin. Chúng tôi s� giúp các bn tìm hiu và khám phá nh�ng bí ,n c�a HTML � bn có th t� to ra các trang Web cho riêng mình

3. Ð�a con tr+ son th�o ��n cu#i �on ��u, thêm tag <p>. Lúc này �on v�n b�n trông gi#ng nh� sau.


<p>

Tp chí Internet Today là m�t tp chí �i�n t$ chuyên v� Công ngh� thông tin. Chúng tôi s� giúp các bn tìm hiu và khám phá nh�ng bí ,n c�a HTML � bn có th t� to ra các trang Web cho riêng mình

4. L�u li công vi�c c�a bn.

5. Dùng trình duy�t m� li file HTML c�a bn và so sánh v i ví d� m'u.

Nh� bn th�y, các �on 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 bn, 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 bn m�t dòng tr#ng nh� tag <p>. Bn có th s$ d�ng tag này khi to 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ó �on sau gi�a tag<body> và </body>

<hr>

Câu lc b� Tin h�c VNN1<br>

Câu lc b� V�n hoá VNN3<br>

Tp chí Internet Today<br>

<hr>

Thì k�t qu� nh� sau :


5. Preformatled text

5.1.Bài h�c

Ph�n này trình bày v� cách hin th� các �on v�n trong �ó có c� các kho�ng tr�ng và d�u xu#ng dòng.

Nh� bn �ã 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 son th�o. Tuy nhiên bn v'n có th hin th� ��c v�n b�n nh� lúc bn nh�p vào b�ng cách s$ d�ng tag <pre>

Ví d�

<pre>

Khi bn mu#n trình duy�t Web hin th� �úng nh� bn son th�o, bn nh dùng tag <pre>

Bn có th xu#ng dòng.

Bn có th dùng d�u cách tho�i mái....

</pre>

S� ��c hin th� nh� sau:


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 �on trích d'n, m�t l�i khuyên... và làm cho trang Web c�a bn trình bày ��c �/p h!n, chúng ta s$ d�ng tag <blockquote>

Ðon v�n b�n n�m trong c�p tag <blockquote> và </bockquote> s� ��c trình bày th�t vào so v i ph�n thân v�n b�n.

Ví d� � nhìn th�y �on v�n b�n nh� sau:

Bn ph�i vi�t nh� sau:

Khi c�n trình bày m�t �on v�n b�n lùi sâu vào bên trong so v i toàn b� v�n b�n � �on v�n b�n ��c n.i b�t h!n, ví d� bn c�n hin th� m�t chú ý, khi �ó bn hãy dùng tag <blockquote >

<blockquote>

<hr>

Trình bày �on v�n b�n b�ng tag <blockquote > s� làm cho �on v�n b�n c�a bn n.i b�t h!n, và trang Web c�a bn trông c�ng s� chuyên nghi�p h!n. Bn hãy th$ xem

</hr>

</blockquote>

6.2.Thc hành

V i nh�ng ki�n th�c �ã h�c ��c, bn hãy xây d�ng cho mình m�t trang Web ch-ng hn 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>


7. S� d ng các ký t� ��c bi�t

7.1.Bài h�c

Ðôi khi trong trang Web c�a bn có các ký t� ��c bi�t, ch-ng hn nh� ký t� không ph�i là ti�ng Anh, m�t d�u nh�n... HTML quy ��nh vi�c hin th� các ký t� �ó nh� sau

&XXXX;

trong �ó XXXX là tên mã cho các ký t� ��c bi�t �ó. Bn có th xem Danh sách các ký t� ��c bi�t này � bi�t thêm chi ti�t.

Ví d� n�u trong ph�n body có �on nh� sau:

<h2 align=center>>>>ÆñÞóßÿ </h2>

Thì k�t qu� trên trình duy�t là:

Trong trang Web c�a bn nhi�u lúc ph�i hin 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. Ð hin th� các ký t� này, HTML cung c�p cho ta các ký hi�u thay th� nh� sau:

< thay cho <

> thay cho >

& thay cho &

Ví d�: Ð hin th� 700 > 400 ta vi�t nh� sau:

700 > 400

Qua các bài h�c tr� c bn �ã 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, bn mu#n chèn kho�ng tr�ng vào trong trang Web, ví d� bn 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 �on v�n b�n... Mu#n chèn kho�ng tr�ng ta dùng ký hi�u

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

© thay cho â

® thay cho �

Ví d�

7.2. Thc hành

1.To m�t file HTML sau �ó thêm ph�n sau vào trong ph�n body

HTML có th hin th� ��c các ký t� ��c bi�t nh�:

<ul>

<li>Các kýt�latin:>>>ÆñÞóßÿ

<li>Các d�u l n h!n, nh+ h!n, d�u và : > < &

<li>Các d�u Copyright và Trademark : © &reg

</ul>

2.L�u công vi�c c�a bn và so sánh v i ví d� m'u:

Chú ý: Ð hin th� �úng các d�u Copyright và Trademark n�u bn dùng font Ti�ng Vi�t thì bn 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�, bn hãy Click vào �ây � xem b�ng.


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 bn 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à bn �ã t"ng xem qua.

Bình t0nh �i bn , Sau khi h�c bài này, bn s� có th ��a hình �nh vào trang Web c�a mình và bn 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 bn 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 bn.

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

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 bn hãy tìm hiu thêm qua bài th�c hành.

8.2.Thc hành

Tr� c khi ��a hình �nh vào trong trang Web c�a bn m�i bn download m�t s# hình �nh � làm ví d�

1 To 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 bn ��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">

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 bn ��c np nhanh h!n, bn 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 �on 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.

y là kho�ng cách vùng tr#ng trên �)nh và �áy c�a b�c �nh.

Bn s� ��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 hin th�.


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, bn th�y r�ng trang Web c�a bn ch) ��c c�n l� bên trái, và bn 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 �on v�n b�n vào gi�a trang, HTML có nhi�u cách giúp bn th�c hi�n �i�u này.

Cách th� nh�t: Bn ��t �on 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>

9.1.b.S�p x�p t�ng ��i gi�a v�n b�n và hình �nh

Khi mu#n có v�n b�n ph� xung quanh hình �nh, bn 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:

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à bn mu#n �,y v�n b�n k� ti�p xu#ng bên d� i hình �nh, bn hãy s$ d�ng tag <br> v i thu�c tính clear:

<br clear = left>

<br clear = right>

<br clear = all>

tag <br> v i thu�c tính clear s� xoá �i t�t c� cách s�p x�p có trong tag <img>

Ví d�:

Khi ch�a có tag <br clear = >

Khi có thêm tag <br clear = all>

Khi 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

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à bn �ã 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>

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

9.2. Thc hành

Bây gi� bn hãy to m�t trang Web hin th� m�t tin nào �ó, nh� các trang tin c�a VNN ch-ng hn, 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 �on v�n b�n.


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

Ði�u th�c s� làm cho Web n.i tr�i là kh� n�ng to 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, �on phim...

10.1. Liên k�t t�i m�t file c�c b�.

Bây gi� bn b�t ��u to m�t liên k�t t" trang Web c�a bn ��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 bn to m�t file HTML th� hai và ��t nó cùng folder v i trang mà bn �ã to � các bài tr� c.

Mu#n to 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�t c� �on 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 gch d� i.

Th�c hành

1.To 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 bn.

2.Trong trang Web mà bn c�n to siêu liên k�t t i bn thêm tag to siêu liên k�t nh� sau :

<a href = "vidu.htm">Xem ví d� 1</a>

3.L�u li công vi�c c�a bn và m� trên trình duy�t. Khi �ó bn s� th�y �on v�n b�n Xem ví d� ��c to thành siêu liên k�t, nó ��c �.i thành màu xanh và khi bn ��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 bn b�m chu�t thì s� ��c ��a t i trang có tên là vidu.htm

Bn 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 bn li 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 bn xem ti�p ph�n sau �ây.

Gi� s$ c�u trúc folder c�a bn có dng

|--My Web

| |--Pictures

| | |--i-today.gif

| |--Trang web c�a b�n � v� trí này

Và bn mu#n liên k�t t i I-today.gif, khi �ó trang tag <a href ..> bn s$a li nh� sau

<a href = "Pictures/i-today.gif"> ... </a>

Còn trong tr��ng h�p file bn c�n to 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à bn 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 bn, khi �ó bn c�n s$a li tag nh� sau:

<a href = "../pictures1/.."> </a>

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 cao h!n.

Th�c hành

Bây gi� bn 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 tho các cách liên k�t, khi xây d�ng trang Web bn 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

Ð cho trang Web c�a bn có v� chuyên nghi�p h!n, bây gi� bn hãy �.i tên thành index.htm. Ði�u này ��c lý gi�i nh� sau:

Ví d� khi bn vào trang I-today bn s� gõ vào dòng ��a ch) c�a trình duy�t

http: //www.vnn.vn/i-today/

Th�c ra khi �ó trình duy�t s� ��c file

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 ��a ch) mà bn mu#n liên k�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:[email protected]

Th�c hành

1.To m�t file HTML và thêm �on sau vào trong ph�n body

<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">Tp chí Công ngh� Thông tin Internet Today</a>

<li><a href="mailto:[email protected]">G$i th� cho Tr�n Vi�t Hùng</a>

</ul>

2. L�u công vi�c c�a bn, sau �ó m� trình duy�t và so sánh v i ví d�. Bn 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 trng thái c�a trình duy�t, thanh trng thái s� hin th� URL mà bn 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 bn to 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 bn ho�c trên Internet, mà còn cho phép bn 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 bn ph�i ��t tên cho ph�n c�n 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 bn ��t ra

Sau �ó n�u bn c�n liên k�t t i ph�n �ã ��t tên bn 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

<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� bn 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 �on 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 bn cách to các siêu liên k�t b�ng hình �nh:

Vi�c ��u tiên là bn ch�n 1 �nh n�m cùng th� m�c /folder v i trang Web c�a bn, gi� s$ �ó là graph.jpg. Khi �ó bn s$ d�ng các Tag nh� sau

<a href = "file.htm"> <img ser = "graph.jpg"></a>

Bn 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 ��c ph�i m�t th�i gian ch� t�i vì v�y bn nên s$ d�ng m�t s# m/o sau:

1. Ð �� phòng ng��i ��c t�t ch� �� hin th� hình �nh c�a trình duy�t, bn 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, bn nên to 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 bn, ví d� bn hãy Click chu�t vào �nh sau :

Th�c hành

Bây gi� bn hãy to m�t file HTML mà ph�n ��u ��c trình bày theo kiu 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� li ��u tài li�u. Trông gi#ng nh� sau


11. Thêm ��a ch�, liên k�t E-mail vào trang Web c�a b�n

11.1. Bài h�c

Nh� bn 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 hn 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

� 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, HTML cung c�p cho chúng ta tag <address> và cách s$ d�ng nh� sau

<address>

...



...

</address>

T�t c� v�n b�n n�m trong tag <address> ��c in b�ng kiu ch� nghiêng, tuy nhiên bn có th thay �.i cách hin th� c�a chúng b�ng cách s$ d�ng các tag �ã h�c.

11.2.Thc hành

1.To m�t file HTML, sau khi thêm các ph�n thông tin cho trang Web, bn thêm �on sau vào cu#i ph�n body

<address>

<hr>

<p align = "center">

Chuyên m�c Chân tr�i tri th�c - Tp 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:[email protected]">[email protected]<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:[email protected]>[email protected]</a>

</p>

</address>

2.L�u công vi�c c�a bn và so sánh v i ví d� m'u:


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 dng d% ��c h!n. Ch-ng hn � to 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 kiu danh sách, danh sách có th� t� (ordered) và danh sách không có th� t� (unorder).

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. Ð to 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 bn có �on 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 mng

</ul>

Thì trên trình duy�t danh sách ��c hin th� nh� sau :

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". Ð to 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ó �on

<h3>Các b� c chu,n b� � h�c HTML</h3>

<ol>

<li>Ch�!ng trình son 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 tp chí Internet Today

</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áo khoa v�y.

Ví d�:

� có trang web trên, bn ph�i �ánh �on mã sau:

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


<dd>gi�i thích ��nh ngh0a 2</dd>


<dd>gi�i thích ��nh ngh0a 3.</dd>

</dl>

Trong trang Web � to ra các m�c thông tin có c�u trúc logic h!n bn 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>



</ol>


</ul>

<li> Ch) m�c con

</ol>

Ta có danh sách nh� sau :

12.2.Thc hành

Ð�a danh sách vào trang Web c�a bn

1. M� m�t file HTML m i, trong ph�n body bn to 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>

<li>Các tag thông d�ng

<ul>

<li>Tag ��nh dng 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 bn. M� trên trình duy�t và so sánh v i ví d� m'u


13. Trang trí cho v�n b�n

13.1.Bài h�c

Qua các bài h�c tr� c bn �ã 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 bn 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 bn.

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) ��n 7 (l n nh�t)

Ví d�:

C( font 1

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 � th�c hi�n vi�c thay �.i c( font, thay �.i t�!ng �#i

<font size = + X> ... </font>

<font size = - X> ... </font>

Trong �ó +X, -X là �� d�ch chuyn so v i c( font hi�n ti. Chúng th��ng ��c dùng cùng v i tag

<basefont size = X>

X: C( font mu#n ��c m�c ��nh

Chú ý: Tag <basefont> không có tag �óng li, nó có tác d�ng cho ��n khi g�p m�t tag <basefont> khác.

13.1.b.Ki�u font

Ð làm cho trang Web thêm sinh ��ng, nhi�u khi bn mu#n trình bày nó b�ng nhi�u kiu font khác nhau, bn 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 trang 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>

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

13.2. Thc hành

Bn thân m�n, bn �ã h�c ��c khá nhi�u ki�n th�c v( lòng v� HTML, bây gi� bn hãy áp d�ng nh�ng ki�n th�c �ã h�c � to cho mình m�t trang Web v i màn hình n�n có màu s�c, các loi font ch� khác nhau, các hình �nh và siêu liên k�t...Khi �ã làm nhi�u trang Web bn s� có nhi�u kinh nghi�m trong vi�c ch�n font ch�, ch�n màu s�c ... t" �ó bn m i có th xây d�ng ��c nh�ng trang Web �/p ��c.


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 bn th�c m�c: "Ti sao trang Web c�a mình li 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 bn hãy yên tâm, bài này s� giúp bn 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, bn 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, bn ph�i biu di%n chúng � dng h� 16.

Ví d�:

Màu tr�ng �ng v i R=255, G=255, B=255 ��c biu di%n là FFFFFF.

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, bn 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 ��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 qua

còn XXXXXX là ký hi�u màu � dng 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êu liên k�t �ã xem màu �+.

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 yellow

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

N�u bn mu#n màu n�n c�a trang Web c�a bn �/p h!n, bn có th dùng m�t file �nh nh+ � trang trí cho n�n. Khi �ó, HTML s� to 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à bn dùng làm n�n.

14.2.Thc hành

1.To m�t file HTML và chu,n b� m�t hình �nh � làm n�n, ví d� �nh sau có tên là strawb.jpg

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 bn, m� trên trình duy�t và so sánh v i ví d� m'u:


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, bn �ã h�c ��c cách to các siêu liên k�t b�ng hình �nh. Bài này s� cung c�p cho bn to 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 bn xem ví d� sau :

- V i hình �nh nh� sau :

- Sau khi ��c khoanh vùng và to 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, bn hãy th$ click vào các tên t�!ng �ng trên �nh và xem k�t qu�.

Ð to 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 � to 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> bn s$ d�ng thu�c tính usemap nh� sau :

<img src = "lienket.jpg" usemap = "map_name">

trong �ó map_name là ph�n mà bn ��nh ngh0a các vùng c�a �nh � t" �ó to các siêu liên k�t.

2.Ð�nh ngh0a các vùng � to siêu liên k�t : Ð to các vùng ta s$ d�ng tag <map> nh� sau :

<map name = "map_name">

<area shape = "rect" coords = "x1,y1,x2,y2" href = "URL">

<area shape = "rect" coords = "x4,y4,x5,y5" href = "URL">

....

</map>

Trong �ó tag <area> ��nh ngh0a 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 to 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 = ""

Ðon 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.Thc hành

Bây gi� bn hãy chu,n b� m�t hình �nh và dùng tag <map>, và th$ to 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 bn thành công.


16. B�ng

16.1. Bài h�c

Vi�c trình bày trang Web theo dng b�ng s� làm cho trang Web c�a bn chuyên nghi�p h!n. V i dng b�ng bn có th chia trang Web thành nhi�u ph�n, bn 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, bn 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 �ó chuyn 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 hiu 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>



</tr>

<tr>




</tr>

</table>

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

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 ô, bn 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à bn to � trên m i ch) là b�ng �!n gi�n v i ba hàng và ba c�t ��u nhau.

Bn hãy chú ý các b�ng sau.

B�ng 1

B�ng 2

B�ng 3

Ð to ��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 � m� 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)

Ngay sau tag <table>, bn gõ vào tag <catpion> t�a �� c�a b�ng, và k�t thúc b�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> bn th�y có thu�c tính valign="top", ngh0a là to 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 to 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 ô

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ùng b�ng dng 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 bn 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"> Mng 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">Mng c�a B� th�!ng mi</a></td> </tr> </table>

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

Khi tô màu c� b�ng b�ng cách thêm thu�c tính bgcolor vào tag <table>

16.2.Thc hành

Bn 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, bn có th thêm màu s�c vào b�ng cho �/p.


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 bn 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 to form b�ng các tag �!n c�a HTML. Khi to form, ta c�n l�u ý nh�t hai ph�n �ó là tên nh�n dng (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 : To 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 hin th� các ký

t�. • Radio Buttons : Các nút l�a ch�n m�t. • Check Boxes : H�p Check Boxes. • Menus : To ra h�p Menu �,y xu#ng. • Submit and Reset Buttons : Các Button � nh�n thông tin và kh�i to li

thông tin trên form. • Hidden Elements : Các y�u t# ,n. • Active Images :To b�c �nh kích hot. • 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 dng, s$ d�ng trong Script. Các bn 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...

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

value="">

Trong �ó size ch) chi�u dài c�a Text Boxes. Maxlength, minlength ch) s# ký t� t#i �a hay t#i thiu có th nh�p vào. value là giá tr� kiu xâu ��c hin th�.

Xin hãy cho bi�t tên c�a bn :

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

size="">

Các thu�c tính ��u gi#ng v i Text Boxes. Ch) khác là khi bn nh�p d� li�u thì các ký t� không ��c hin th�.

Xin hãy cho bi�t m�t mã :

Radio Buttons : <input type="radio" name="" checked value="">La ch�n

value ch�a d� li�u s� g$i ��n Server khi Radio Button checked.

l�a ch�n 1

l�a ch�n 2

Check Boxes : <input type="checkbox" name="" value="" checked>La 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

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 bn 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 bn ��c mô t� b�ng các tag OPTION, và bn 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� li kèm v i thông tin báo l*i. Còn nút Reset s� kh�i to li 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="" value="Reset Button"> Thu�c tính value ch�a ph�n text hin th� trên nút b�m. Bn c�m l�u ý nút Reset ch) kh�i ��ng li các giá tr� trong cùng m�t form mà thôi.

Submit Button

Reset Button

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

Hidden Elements ��c bn 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 ti. Ví d� : n�u � form tr� c ban �� ngh� cho bi�t tên, bn có th l�u li 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 li 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ó.

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

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ì to �� 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 bn t" n!i nào ��n, nó cho bn m�t b�n �& th� gi i. Bn ch) vi�c click lên b�n �&, gi� s$ bn 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 hot 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 hot môt ch�!ng trình trên server, l�y thông tin và sau �ó thông báo li cho ng��i s� d�ng. Ví d� bn 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. Ð to m�t liên k�t ��n CGI Script bn 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.

�on mã này là script to 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"

bn hãy copy toàn b� �on 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.

Sau khi h�c lý thuy�t song, bn hãy th�c t�p � nh li các ki�n th�c �ã h�c.

Bn hãy to 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�, bn 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 bn thành công.

Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: [email protected]

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

Các bn thân m�n, m�t trong nh�ng y�u t# không th thi�u � làm trang web c�a bn 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 dng ��c r�t nhi�u loi âm thanh và hình �nh khác nhau. Nh�ng có m�t v�n �� là nh� bn �ã 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 nhc 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ì li càng b�c mình h!n. Vì lý do nh� v�y chúng tôi khuyên các bn nên l�a ch�n các kiu 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 mng, và các file video avi (*.avi)...

Trong bài h�c này các bn s� h�c cách g�i m�t file âm thanh và m�t hot c�nh video vào trang web c�a các bn.

• Ð�a âm thanh vào trang web c�a bn

• Xem Video trên trang web

Bài h�c.

Sound.

Ð s$ d�ng m�t file nhc 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 li 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ô hn. Tag này ��c ��t gi�a hai tag <head> và </head>

Ngay sau khi ��c truy c�p, trang web c�a bn s� ngay l�p t�c "ch!i" file sound.ext.

Bây gi� ta s� to m�t liên k�t � có th ch!i nhc. 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 nhc 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� bn hãy Click vào �ây � b�t ��u nghe nhc.

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

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

V i cách s$ d�ng tag trên, bn ph�i nghe nhc b�ng trình nghe nhc c�a h� �i�u hành. Ð có th tích h�p và �i�u khin quá trình nghe và xem bn hãy s$ d�ng tag : <embed src="file.ext">. V i tag này, bn có th nghe nhc b�t c� lúc nào, mu#n l�p li ho�c �i�u khin ��n �on nhc nào tu bn. Th�t là ti�n ph�i không bn.

Ð�n �ây bn có th làm cho trang web c�a bn sinh ��ng h!n r&i ��y. Chúc bn thành công .

Copyright @ by Value Adder Service Center (VASC). All Rights Reserved. E-mail: [email protected]

20.1.Bài h�c

Tr� c khi vào bài h�c, bn hãy � ý k� m�t chút trang này, khi bn 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 chuyn.

Trang Web ��c trình bày theo kiu chia thành các ph�n ��c l�p v i nhau g�i là frame. Bn có th chia trang Web thành nhi�u ph�n tu thích, ví d� :

Khi bn chia trang Web c�a mình ra bao nhiêu frame thì bn ph�i to ra b�y nhiêu file HTML � m*i frame hin th� m�t file HTML.

Thông th��ng �on mã c�a m�t file HTML ��c chia thành các frame nh� sau :

<html> <head> <title>Tiêu �� trang Web c�a bn</title> </head> <frameset rows/cols = "X,Y,..,Z"> <frame name = "frame_name1" src = "URL1"> <frame name = "frame_name2" src = "URL2"> ........ <frame name = "frame_namen" src = "URLn"> </frameset> <noframes> Sorry ! Trình duy�t c�a bn 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 bn ��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, bn có th cho giá tr� là �im, ph�n tr�m...,ví d�

<frameset cols = "170,530">

<frameset cols = "15%,85%">

<frameset cols = "170,*">

trong ví d� cu#i cùng bn 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 li dành h�t cho frame còn li.

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á tr� c�a thu�c tính name = "" và hin th� file HTML có tên là giá tr� c�a thu�c tính src =""

Tag <noframes> ... </noframes> dùng � hin 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 bn không h* tr� frame </noframes>

Ví d� khi mu#n chia m�t trang Web nh� sau :

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

trong �ó gi� s$ frame làm menu có tên là menu và frame hin 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 bn ��a thêm tag <base> vào ngay sau tag <body>

...

<body>

<base target = "display">

...

Khi bn không mu#n hin th� border c�a frame, bn 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 bn không mu#n thay �.i kích th� c c�a frame, bn 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.Thc hành

Bn �ã h�c xong cách chia trang Web thành các frame, bây gi� bn 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 bn thân m�n, qua các bài h�c, các bn �ã n�m ��c khá v�ng nh�ng khi�n th�c c! b�n nh�t v� HTML. Gi� �ây bn 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à bn th�y trên mng, ví d� nh� xây d�ng trang web v� gia �ình bn hay m�t nhóm bn bè thân thi�t c�a bn ch-ng hn.

Chúc bn thành công

Documents

Html vnn canban