Ch ng 2ươ
HTML VÀ CÁC THẺ CƠ BẢN
I. GI I THI U V HTMLỚ Ệ Ề
HTML là ngôn ng đ xây d ng trang web, nó mô t cách th c m t trangữ ể ự ả ứ ộ
web hi n th nh th nào trong m t trình duy t. HTML là m t ngôn ng mô t tàiể ị ư ế ộ ệ ộ ữ ả
li u, đ c hình thành t ngôn ng mô t tài li u t ng quát SGML (Standardệ ượ ừ ữ ả ệ ổ
Generalized Markup Language) do hãng IBM đ x ng t năm 1960. HTML khôngề ướ ừ
ph i là m t ngôn ng l p trình, nó cung c p các ả ộ ữ ậ ấ ch th đ nh d ngỉ ị ị ạ đ ph c v choể ụ ụ
vi c trình bày văn b n và các đ i t ng khác nh hình nh, video, các plug-in...ệ ả ố ượ ư ả
Đ tham kh o t t c các th c a phiên b n HTML 4.01, là phiên b nể ả ấ ả ẻ ủ ả ả
HTML m i nh t đ c chu n hóa vào năm 1999 b i W3C, có th tìm trong hai đ aớ ấ ượ ẩ ở ể ị
ch có uy tín sau :ỉ
Trang World Wide Web Consortium HTML Specifications (đ c t ngôn ngặ ả ữ
HTML c a t ch c W3C): ủ ổ ứ http://www.w3.org/TR/html401/
Trang Web c a W3Schools, t i web site này ta có th tìm th y t t c cácủ ạ ể ấ ấ ả
h ng d n t h c v thi t k web đ a trên n n t ng c a HTML, xHTML, XMLướ ẫ ự ọ ề ế ế ự ề ả ủ
và WAP: http://www.w3schools.com/html/
Xu th phát tri n c a các ngôn ng trên Web đang d n nghiêng v ngônế ể ủ ữ ầ ề
ng XML (eXtensible Markup Language), cũng là m t ngôn ng con c a SGML.ữ ộ ữ ủ
XML là m t ngôn ng ộ ữ mô t c u trúc d li uả ấ ữ ệ trên Web, cho phép ng i s d ngườ ử ụ
xây d ng các th riêng c a mình, m t trong nh ng ng d ng quan tr ng c a XMLự ẻ ủ ộ ữ ứ ụ ọ ủ
là chuy n đ i d li u gi a các ng d ng đ trao đ i thông tin trên n n c a Web,ể ổ ữ ệ ữ ứ ụ ể ổ ề ủ
khác v i HTML là ngôn ng ớ ữ trình bày d li uữ ệ trên Web.
II. C U TRÚC M T T LI U HTMLẤ Ộ Ư Ệ
T li u HTML ư ệ (HTML Document) là m t t p tin văn b n mã ASCII đ cộ ệ ả ượ
vi t b ng ngôn ng HTML, t p tin t li u HTML đ c g i là ế ằ ữ ệ ư ệ ượ ọ mã ngu nồ (source
code) c a m t web page. T p tin t li u HTML có ph n m r ng ủ ộ ệ ư ệ ầ ở ộ .htm hay .html
(Các webserver dùng h đi u hành UNIX b t bu c ph n m r ng t li u HTMLệ ề ắ ộ ầ ở ộ ư ệ
ph i là .html)ả. Phiên b n HTML hi n nay là HTML 4.01 do W3C xây d ng đ c t ,ả ệ ự ặ ả
tuy nhiên có m t vài th m t trong hai trình duy t IE và NN không s d ng.ộ ẻ ộ ệ ử ụ
II.1. Th HTML ẻ
Các l nh c a HTML đ c g i là các th (tag), các th báo cho trình duy tệ ủ ượ ọ ẻ ẻ ệ
web c n ph i làm đi u gì ngoài vi c th hi n văn b n lên màn hình. Các th g mầ ả ề ệ ể ệ ả ẻ ồ
các ph n t đ t trong c p d u < và >. Có hai lo i th : ầ ử ặ ặ ấ ạ ẻ th ch a ẻ ứ (container tag)và
th r ngẻ ỗ (empty tag). Các l nh c a HTML có th vi t b ng ký t hoa ho cệ ủ ể ế ằ ự ặ
th ng đ u đ c.ườ ề ượ
10
II.1.1. Th ch aẻ ứ
G m m t ph n t th m (openning tag) và m t ph n t th đóng (closingồ ộ ầ ử ẻ ở ộ ầ ử ẻ
tag). Th m b t đ u b ng d u < và ti p ngay sau là tên th , các thu c tính đ cẻ ở ắ ầ ằ ấ ế ẻ ộ ượ
cách nhau b ng m t kh ang tr ng và cu i cùng là d u >. Th đóng t ng t nhằ ộ ỏ ắ ố ấ ẻ ươ ự ư
th m ch khác m t ch có d u / n m gi a d u < và tên th . Các d li u đ cẻ ở ỉ ộ ỗ ấ ằ ữ ấ ẻ ữ ệ ượ
đ t gi a th m và th đóng. Các thu c tính c a m t th là tùy ch n, đ c khaiặ ữ ẻ ở ẻ ộ ủ ộ ẻ ọ ượ
báo trong th m và thu c tính đ c bao l i trong c p d u nháy kép ("). Cú phápẻ ở ộ ượ ạ ặ ấ
t ng quát nh sau:ổ ư
<tên_th ẻthu ctính1=giátr 1ộ ị thu ctính2=giátr 2...ộ ị >N i dung </tên_th >ộ ẻ
Các ví dụ :
1) <TITLE> Trang Web đ u tay </TITLE>ầ
Th m là <TITLE>, d li u là ẻ ở ữ ệ Trang Web đ u tayầ, th đóng là </TITLE>,ẻ
chú ý r ng th TITLE không có thu c tính. Th này báo cho trình duy t hi n thằ ẻ ộ ẻ ệ ể ị
dòng Trang Web đ u tayầ trên thanh tiêu đ c a c a s trang web.ề ủ ử ổ
2) <FONT color=”blue” face=".Vn3DH" size="2">Khoa Tin hoc</FONT>
Th m là <FONT>, các thu c tính và giá tr đ c gán cho m i thu c tínhẻ ở ộ ị ượ ỗ ộ
đ c khai báo bên trong th m là : thu c tính ượ ẻ ở ộ color và giá tr ịblue, thu c tính ộsize
và giá tr ị2; d li u là ữ ệ Khoa Tin h cọ; th đóng là </FONT>. Th này báo cho trìnhẻ ẻ
duy t hi n th dòng Khoa Tin h c trên trang web v i font “.Vn3DH”, c 2 (t ngệ ể ị ọ ớ ở ươ
đ ng v i font size 10pt), màu xanh.ươ ớ
II.1.1. Th r ngẻ ỗ
Th r ngẻ ỗ là th ch có th m mà không có th đóng.ẻ ỉ ẻ ở ẻ
Các ví dụ :
1) <HR>, th này báo cho trình duy t hi n th m t đ ng k ngangẻ ệ ể ị ộ ườ ẻ
(horizontal line) trên trang web
2) <IMG border="1" src="udlogo.gif" width="147" height="133">, th nàyẻ
báo cho trình duy t hi n th logo c a Đ i h c Đà N ng, v i đ ng vi n c 1pt,ệ ể ị ủ ạ ọ ẵ ớ ườ ề ở
chi u cao nh 133pt, chi u r ng nh 147pt.ề ả ề ộ ả
II.2. C u trúc m t t li u HTML ấ ộ ư ệ
Xem xét m t t li u HTML sau đây ( trích trang ch c a m ng EDU.NET,ộ ư ệ ủ ủ ạ
B Giáo d c&Đào t o )ộ ụ ạ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN">
<HTML>
<HEAD>
<TITLE>Education and Training Network</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
....
</HEAD>
<BODY bottomMargin=0 bgColor=#ffffff rightMargin=0>
11
....
</BODY>
</HTML
M t t li u HTML hay m t trang Web, b t đ u b ng th <HTML> và k tộ ư ệ ộ ắ ầ ằ ẻ ế
thúc b ng th </HTML>, th ng có hai ph n:ằ ẻ ườ ầ
Ph n đ u (head) bao g m nh ng n i dung trong c p th <HEAD> vàầ ầ ồ ữ ộ ặ ẻ
</HEAD>. Ph n thân (body) bao g m nh ng n i dung trong c p th <BODY> vàầ ồ ữ ộ ặ ẻ
</BODY>. D i đây là c u trúc c b n c a m t t li u HTMLướ ấ ơ ả ủ ộ ư ệ
<HTML> <-- Th đ nh nghĩa m t t li u HTMLẻ ị ộ ư ệ
<HEAD> <-- Th báo hi u b t đ u ph n đ uẻ ệ ắ ầ ầ ầ
<!- Các th khác thu c v ph n đ u c a t li u HTMLẻ ộ ề ầ ầ ủ ư ệ
</HEAD> <-- Th k t thúc ph n đ u t li u HTML ẻ ế ầ ầ ư ệ
<BODY> <-- Th báo hi u b t đ u ph n thân ẻ ệ ắ ầ ầ
<!- N i dung trang Web và các th ph n thân c a t li u HHTMộ ẻ ầ ủ ư ệ
</BODY> <-- Th báo hi u k t thúc ph n thânẻ ệ ế ầ
<HTML> <-- Th k t thúc m t t li u HTML ẻ ế ộ ư ệ
Đ ghi chú trong t li u HTML ta đ n i dung ghi chú trong c p ký hi uể ư ệ ể ộ ặ ệ
<!- và -->. Ví d : ụ<!- Đây là trang web th nghi m -->ử ệ . Trình duy t s b qua màệ ẽ ỏ
không thông d ch n i dung này.ị ộ
III. M T S TH C B NỘ Ố Ẻ Ơ Ả
III.1. Các th trong ph n đ u c a t li u HTMLẻ ầ ầ ủ ư ệ
III.1.1. Th <!DOCTYPE>ẻ
Th này dùng đ ghi thông tin v phiên b n HTML đ c áp d ng trongẻ ể ề ả ượ ụ
trang Web, th ng đây là dòng đ u tiên c a t li u HTML.ườ ầ ủ ư ệ
III.1.2. Th <TITLE>ẻ
Đây là lo i th ch a, dùng đ thi t l p tiêu đ c a t li u HTML, khi trìnhạ ẻ ứ ể ế ậ ề ủ ư ệ
duy t hi n th m t trang web, tiêu đ s xu t hi n trên Title bar c a c a s trangệ ể ị ộ ề ẽ ấ ệ ủ ử ổ
web.
Ví d : ụ<HTML>
<HEAD> <TITLE> Đ i h c Đà N ng </TITLE></HEAD>ạ ọ ẵ
....
</HTML>
III.1.2. Th <META>ẻ
Đây là lo i th r ng, h tr vi c b sung thông tin v trang web, th nàyạ ẻ ỗ ỗ ợ ệ ổ ề ẻ
cho phép ta t do đ t nhi u thông tin vào li u HTML. Các thu c tính c a th nàyự ặ ề ệ ộ ủ ẻ
xác đ nh m t c p ị ộ ặ name/value k t h p v i t li u HTML, trong nhi u tr ng h p,ế ợ ớ ư ệ ề ườ ợ
12
các giá tr này ph c v cho web server dùng trong vi c xác đ nh ki u n i dung đị ụ ụ ệ ị ể ộ ể
g i đ n trình duy t. Sau đây là nh ng cách dùng thông d ng:ở ế ệ ữ ụ
<META http-equiv=”content-type” content=”text/html; charset=utf-8”>
Th này quy đ nh b mã ký t Unicode Ti ng vi t trong trang Webẻ ị ộ ự ế ệ
<META http-equiv=”expires” content= ”31 Dec 05”>
Th này xác đ nh th i gian h t hi u l c c a trang web là ngày 31.12.2005ẻ ị ờ ế ệ ự ủ
V i hai th này, web server s g i đ n browser ph n ớ ẻ ẽ ở ế ầ HTTP header có n iộ
dung bao g m các thông tin:ồ
Content-type : text/html
Charset : utf-8
Expires : 31 Dec 05
<META name=”keywords” content=”VDC’s HomePage, New, Magazine”>
Th này cung c p các t khóa cho các Search Engin tìm th y trang web, tuy nhiênẻ ấ ừ ấ
nhi u Search Engin có c ch tìm ki m khác, không ph thu c vào keywords.ề ơ ế ế ụ ộ
<META http-equiv=”refresh” content= ”5 ; URL=http://www.ud.edu.vn ”>
Th này cho phép ta đ t liên k t tr c ti p đ n m t đ a ch khác, sau kho ng th iẻ ặ ế ự ế ế ộ ị ỉ ả ờ
gian 5 giây trình duy t s chuy n sang đ c tr c ti p trang web có đ a ch n mệ ẽ ể ọ ự ế ị ỉ ằ
trong tham s URL.ố
<META http-equiv=”refresh” content= ”10”>
Th này báo cho trình d yêt c 10 giây thì làm t i trang web l i m t l nẻ ụ ứ ươ ạ ộ ầ
III.1.3. Th <BASE>ẻ
Đây là th r ng, g m các thu c tính:ẻ ỗ ồ ộ
HREF : ch đ nh đ a ch c b n cho các m i liên k t là đ a ch g c đ truy ỉ ị ị ỉ ơ ả ố ế ị ỉ ố ể
c p các đ a ch khác. Ví d <BASE HREF = ậ ị ỉ ụ ”http://www.ud.edu.vn/scripts”>
TARGET : ch đ nh các frame m c nhiên, hay m t c a s đ n p các đ iỉ ị ặ ộ ử ổ ể ạ ố
t ng liên k t, các giá tr c a thu c tính TARGET: tên c a s do ng i s d ngượ ế ị ủ ộ ử ổ ườ ử ụ
đ nh nghĩa (hay tên frame), ị_blank , _self, _top và _parent. (Chúng ta s nghiênẽ
c u k cách s d ng thu c tính này trong ch ng II)ứ ỹ ử ụ ộ ươ
Ví d : <BASE TARGET=_blank> , th n y ch đ nh m i đ i t ng liên k tụ ẻ ầ ỉ ị ọ ố ượ ế
đ c n p trong m t c a s m i.ượ ạ ộ ử ổ ớ
III.1.4. Th <SCRIPT>ẻ
Đây là th ch a, dùng đ ch a các hàm vi t b ng ngôn ng k ch b nẻ ứ ể ứ ế ằ ữ ị ả
JavaScript, Jscript hay Vbscript. Thu c tính này có thu c tính LANGUAGE ch raộ ộ ỉ
ngôn ng k ch b n đ c s d ng trang trang web. ữ ị ả ượ ử ụ Ví d :ụ
13
<SCRIPT LANGUAGE = "JavaScript 1.5">
// Khai báo các bi n dùng chung, h ng sế ằ ố
...
function Banner(url,pic,pos) {
// Các l nh c a hàm ...ệ ủ
}
// Hàm khác
...
</SCRIPT>
III.2. Các th trong ph n thân c a t li u HTMLẻ ầ ủ ư ệ
II.2.1. Th <BODY>ẻ
Đây là th ch a, dùng đ bao hàm các th khác trong ph n thân c a t li uẻ ứ ể ẻ ầ ủ ư ệ
HTML. Các thu c tính:ộ
BGCOLOR : xác đ nh màu n n c a trang web, màu n n có th dùng tênị ề ủ ề ể
màu hay m t giá tr hexa xác đ nh màu trong s đ RGB. Ví d "BLUE" hayộ ị ị ơ ồ ụ
"#0000FF".
TEXT : xác đ nh màu văn b nị ả
Hai thu c tính trên ít khi đ c s d ng, ta dùng k thu t CSS đ thay thộ ượ ử ụ ỹ ậ ể ế
trong vi c đ nh d ng trang web hi u qu h n.ệ ị ạ ệ ả ơ
BACKGROUND : xác đ nh nh n n c a trang web ị ả ề ủ
TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, BOTTOMMARGIN :
xác đ nh l c a trang Web, đ n v tính là pixelị ề ủ ơ ị
Ví d :ụ
<BODY BACKGROUND="udlogo.gif" TEXT="yellow" TOPMARGIN="12"
LEFTMARGIN="6">
<!- Các th khác -->ẻ
</BODY>
III.2.2. Các th HEADINGẻ
Đây là th ch a, dùng đ xác đ nh tiêu đ dòng trong trang web, t ng tẻ ứ ể ị ề ươ ự
nh các Heading trong Microsoft Word. Có 6 c p đ v i đ l n gi m d n t 1ư ấ ộ ớ ộ ớ ả ầ ừ
đ n 6 t ng ng v i sáu th <H1>, <H2>, <H3>, <H4>, <H5> và<H6>, thu c tínhế ươ ứ ớ ẻ ộ
ALIGN có các giá tr ịleft, center, right và justify; m c nhiên là left.ặ
Ví d : ụ<H1 ALIGN="right"> I. Ch ng 1 </H1>ươ
III.2.3. Các th ng t đo nẻ ắ ạ
Đ trang web đ c d d c, trình bày h p lý c n có các ng t đ an đ phânể ượ ễ ọ ợ ầ ắ ọ ể
bi t các đ an văn b n (paragraph) khác nhau.ệ ọ ả
Th <P> : ẻS d ng c p th <P> và </P> đ ch a m t đ an văn b n. Khiử ụ ặ ẻ ể ứ ộ ọ ả
g p ặ
14