Ch

ng 2

ươ

HTML VÀ CÁC THẺ CƠ BẢN

I. GI

I THI U V HTML

Ớ

Ệ

Ề

ự ữ ể ứ ộ

ả

ị ư ế c hình thành t ệ ữ ả

ấ ộ

cách th c m t trang HTML là ngôn ng đ xây d ng trang web, nó mô t ả tài 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 t ng quát SGML (Standard li u, đ ngôn ng mô t ệ ổ ừ ượ năm 1960. HTML không ng t Generalized Markup Language) do hãng IBM đ x ừ ề ướ ph i là m t ngôn ng l p trình, nó cung c p các ạ đ ph c v cho ch th đ nh d ng ị ể ụ ụ ị ỉ ng khác nh hình nh, video, các plug-in... vi c trình bày văn b n và các đ i t ả ư ữ ậ ả ố ượ ả ệ

Đ tham kh o t ẻ ủ

ấ ượ ả ấ ả ẩ t c các th c a phiên b n HTML 4.01, là phiên b n ả ả ị c chu n hóa vào năm 1999 b i W3C, có th tìm trong hai đ a ể ở

ể HTML m i nh t đ ớ 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/ ủ ổ ứ

ấ ấ ả ể

ng d n t ế ế t c các i web site này ta có th tìm th y t ạ t k web đ a trên n n t ng c a HTML, xHTML, XML ự ề ả ủ

Trang Web c a W3Schools, t ủ h h c v thi ẫ ự ọ ề ướ và WAP: http://www.w3schools.com/html/

ể ế ữ ủ ề ầ

ữ ữ ộ

c u trúc d li u ả ấ

ự ụ ộ

ữ mô t ủ ữ ẻ ổ ữ ệ ữ ứ ổ ứ ụ

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. ủ i s d ng ữ ệ trên Web, cho phép ng XML là m t ngôn 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 đ ộ ệ li u HTML đ ế ằ t b ng ngôn ng HTML, t p tin t ữ ệ

ủ ư ệ ộ

ả c g i là ọ ượ ở ộ ầ ở ộ ầ ắ ộ

ả

vi ư ệ code) c a m t web page. T p tin t li u HTML có ph n m r ng (Các webserver dùng h đi u hành UNIX b t bu c ph n m r ng t ph i là .html) ệ 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. . Phiên b n HTML hi n nay là HTML 4.01 do W3C xây d ng đ c t ệ ộ ệ ệ ề ả ẻ ộ ượ c mã ngu nồ (source .htm hay .html li u HTML ư ệ ặ ả , ự ử ụ

II.1. Th HTML ẻ

ượ ọ ẻ ẻ

ề

Các l nh c a HTML đ ủ ầ ầ ử ặ ạ ặ

ả ẻ th ch a ể ế ằ ủ

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 ể ệ ẻ ứ (container tag)và các ph n t th r ng ặ hoa ho c t b ng ký t ự th ng đ u đ c. ệ ệ ả đ t trong c p d u < và >. Có hai lo i th : ấ ẻ ỗ (empty tag). Các l nh c a HTML có th vi ệ ườ ề ượ

10

II.1.1. Th ch a ứ

ẻ

ộ ầ ử ẻ ở ầ ử ẻ

ằ ấ

G m m t ph n t ộ ồ ẻ ở ắ ầ ộ ộ th m (openning tag) và m t ph n t ẻ ẻ ẻ ộ ng t ươ ữ ệ ấ ắ ấ ằ ỏ ỗ ỉ

ữ ấ ủ ượ ẻ ọ

th đóng (closing c ượ ư nh ượ c c khai i trong c p d u nháy kép ("). Cú pháp ộ ặ ẻ ấ ượ ạ ộ

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ách nhau b ng m t kh ang tr ng và cu i cùng là d u >. Th đóng t ự ố 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 đ ẻ ở ằ đ 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 bao l báo trong th m và thu c tính đ ẻ ở t ng quát nh sau: ư ổ

>N i dung

ị  thu ctính2=giátr 2...

ộ

ị

ộ

ẻ

1) Trang Web đ u tay

ầ

Các ví dụ :

ữ ệ ẻ ầ

Th m là , d li u là ằ ẻ ở ẻ ệ ể ộ</p> <p>2) <FONT color=”blue” face=".Vn3DH" size="2">Khoa Tin hoc</FONT></p> <p>, th đóng là , 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. Trang Web đ u tay ẻ ề ủ ử ổ ầ

ộ ẻ ở ị ượ ộ

c khai báo bên trong th m là : thu c tính Th m là , các thu c tính và giá tr đ ẻ ở ộ

color và giá tr ị blue, thu c tính ẻ ộ ẻ

c gán cho m i thu c tính ỗ size Khoa Tin h cọ ; th đóng là . Th này báo cho trình ươ ng ớ ữ ệ ị ọ ở

đ ượ và giá tr ị 2; d li u là duy t hi n th dòng Khoa Tin h c trên trang web v i font “.Vn3DH”, c 2 (t ệ 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. ẻ ở ẻ ỉ ẻ

1)

, th này báo cho trình duy t hi n th m t đ

Các ví dụ :

ẻ ệ ể ộ ị ườ ng k ngang ẻ

2) , th này ng vi n c 1pt,

(horizontal line) trên trang web

ớ ườ ạ ọ ẻ ở ủ ệ ề ẵ

báo cho trình duy t hi n th logo c a Đ i h c Đà N ng, v i đ ể chi u cao nh 133pt, chi u r ng nh 147pt. ị ề ộ ề ả ả

II.2. C u trúc m t t li u HTML ộ ư ệ ấ

li u HTML sau đây ( trích trang ch c a m ng EDU.NET, ộ ư ệ ủ ủ ạ

Education and Training Network ....

Xem xét m t t ạ B Giáo d c&Đào t o ) ụ ộ

11

....

ế li u HTML hay m t trang Web, b t đ u b ng th và k t ắ ầ ẻ ằ ộ

ng có hai ph n: ộ ư ệ thúc b ng th , th ẻ M t t ằ ườ ầ

ầ ữ ồ

ẻ ẻ

ặ ặ li u HTML Ph n đ u (head) bao g m nh ng n i dung trong c p th và ộ . Ph n thân (body) bao g m nh ng n i dung trong c p th và ữ ồ . D i đây là c u trúc c b n c a m t t ơ ả ủ ấ ộ ộ ư ệ ầ ầ ướ

li u HTML

ẻ ị ẻ

ẻ

li u HHTM ộ

ẻ ầ ệ

<-- Th đ nh nghĩa m t t ộ ư ệ <-- Th báo hi u b t đ u ph n đ u ệ ắ ầ ầ ầ li u HTML <-- Th báo hi u b t đ u ph n thân ầ ệ ắ ầ ẻ li u HTML <-- Th k t thúc m t t ế ộ ư ệ ẻ ẻ ế

Đ ghi chú trong t ể ặ

ệ li u HTML ta đ n i dung ghi chú trong c p ký hi u . Trình duy t s b qua mà ể ộ ệ ệ ẽ ỏ ử

ư ệ . Ví d : ụ 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

ẻ

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 ẻ</h4> <p></p> <p>ề ủ ư ệ</p> <p>Đây là lo i th ch a, dùng đ thi ể ẻ ứ ề ẽ t l p tiêu đ c a t ệ ạ ị ộ ể</p> <p>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.</p> <p>ạ ọ</p> <p>ẵ</p> <p><HEAD> <TITLE> Đ i h c Đà N ng ....

Ví d : ụ

III.1.2. Th ẻ

ạ ỗ ợ ệ ẻ ỗ ề

ẻ ẻ ự ặ ộ

Đây là lo i th r ng, h tr vi c b sung thông tin v trang web, th này ổ do đ t nhi u thông tin vào li u HTML. Các thu c tính c a th này ủ ệ ợ ng h p, li u HTML, trong nhi u tr ườ ớ ư ệ ề ộ ặ name/value k t h p v i t cho phép ta t xác đ nh m t c 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: ở ế ụ ụ ệ ữ ụ

Unicode Ti ng vi t trong trang Web Th này quy đ nh b mã ký t ị ẻ ộ ự ế ệ

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 Charset Expires : text/html : utf-8 : 31 Dec 05

khóa cho các Search Engin tìm th y trang web, tuy nhiên ấ

Th này cung c p các t nhi u Search Engin có c ch tìm ki m khác, không ph thu c vào keywords. ừ ơ ế ấ ộ ẻ ề ụ ế

ẻ ế ả ỉ

ế ự ể ặ ệ ẽ ộ ị ế ự ọ ị

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

i trang web l Th này báo cho trình d yêt c 10 giây thì làm t ụ ứ ẻ ươ ạ i m t l n ộ ầ

III.1.3. Th ẻ

Đâ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 ỉ ố ể ỉ ơ ả ế ố ỉ ị ị ị

”http://www.ud.edu.vn/scripts”> c p các đ a ch khác. Ví d

ị ỉ ộ ử ổ ể ạ ặ

ng liên k t, các giá tr c a thu c tính TARGET: tên c a s do ng ử ổ ộ

TARGET : ch đ nh các frame m c nhiên, hay m t c a s đ n p các đ i ố ườ ử ụ i s d ng _blank , _self, _top và _parent. (Chúng ta s nghiên ẽ

ng II) t ị ủ ế ượ đ nh nghĩa (hay tên frame), ị c u k cách s d ng thu c tính này trong ch ứ ỹ ử ụ ươ ộ

Ví d : , 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

// 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 ... ệ ủ

III.2. Các th trong ph n thân c a t li u HTML ủ ư ệ ẻ ầ

II.2.1. Th ẻ

Đâ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 ả ị

ơ ồ ụ ộ ị ị

ộ c s d ng, ta dùng k thu t CSS đ thay th ỹ ể ậ ế

 BACKGROUND : xác đ nh nh n n c a trang web

trong vi c đ nh d ng trang web hi u qu h n. Hai thu c tính trên ít khi đ ệ ị ượ ử ụ ả ơ ệ ạ

 TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, BOTTOMMARGIN :

ề ủ ị ả

xác đ nh l ị ề ủ c a trang Web, đ n v tính là pixel ơ ị

ẻ

Ví d :ụ

III.2.2. Các th HEADING

ẻ

ẻ ứ ể

ộ ớ ộ ớ ề ấ ả

ng t ự ươ ầ ừ 1 ng ng v i sáu th

,

,

,

,

và
, thu c tính ộ ươ ứ ẻ ớ

ng 1

ươ

Đây là th ch a, dùng đ xác đ nh tiêu đ dòng trong trang web, t ị nh các Heading trong Microsoft Word. Có 6 c p đ v i đ l n gi m d n t ư đ n 6 t ế ALIGN có các giá tr ị left, center, right và justify; m c nhiên là left. ặ

Ví d : ụ

I. Ch

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

: S d ng c p th

và

đ ch a m t đ an văn b n. Khi ẻ ể ứ ộ ọ ử ụ ẻ ả ặ

g p ặ

14

ệ ẽ ạ ộ ớ ệ ằ t hai đ an liên ti p b ng ế ọ

th này trình duy t s t o ra m t dòng m i và tách bi m t dòng tr ng. ẻ ộ ố

Thu c tính c a th

: ALIGN, các giá tr : "left", "right", "center" và ủ ẻ ộ ị

"justify"

Th
ẻ : đây là th r ng đ ng t dòng (break line) ể ắ ẻ ỗ

Hello world!

Cac the ngat doan

Paragraph 1 ....

Paragraph 2 ....

Su dung the BR


Ví d :ụ

ả

ị

ẵ

III.2.4. Các đo n văn b n đ ạ Th PRE

: đây là th ch a, nh m hi n th m t đ an văn b n mà ng ẻ

c đ nh d ng s n ạ ượ ẻ

ị ộ ứ ể ằ ả ọ ườ i

ử ụ ữ ả ố ố

ể ị ố ẻ

ị

ạ

ẻ

s ử các kho ng cách, xu ng dòng nh mong mu n (không s d ng ký d ng mu n gi ư ụ t ạ   và th
). Ngoài ra, ta có th s d ng các th khác đ đ nh d ng ể ử ụ ẻ ự trang web.

Ví dụ: 

 Đ nh d ng b i th  PRE 

ở
HTML
Welcome!

: s d ng gi ng nh th 

, nh ng có s  khác bi ẻ ử ụ ư ệ ố


Th  

ư ẻ
Các th  HTML khác không có hi u l c trong paragraph n m trong c p th
ệ ự
ẻ t :
ặ ự
ằ ẻ</p>
<p><XMP></p>
<p>ể ệ</p>
<p>ả
ạ ẻ ố</p>
<p>Trình duy t hi n th  văn b n theo font m c đinh
ặ
ị
Th  đóng  không t o xu ng dòng
Không s  d ng cho table ử ụ


15


Ta th ườ ẻ ẻ ọ ộ


ệ


ng dùng th  
 trong vi c minh h a n i dung các th  HTML
 
t, các ti n ích t o source HTML
ạ
ệ
 
i s  d ng copy các đ an mã HTML và paste
ọ ệ
 đ c bi
ự ặ
ườ ử ụ ậ</p>
<p>trong trang Web mà không dùng các ký t
dùng k  thu t này đ  cho phép ng
ể
ỹ
 li u HTML c a mình.
vào t
ủ
ư ệ</p>
<p>Ví dụ:</p>
<h4><H3>Structure of HTML Document</H3>
<!- Minh hoa hieu luc cua the <XMP> -->
<XMP>
<HTML>
<HEAD> 
<TITLE>Tieu de </TITLE>
 </HEAD>
<BODY></h4>
<h4><!- Phan than trang web --></h4>
<h4></BODY>
</HTML>

III.2.5. Th

ẻ

Đây là th r ng, dùng đ v m t đ ả ng th ng phân cách các đ an văn b n ẳ ọ

ẻ ỗ ộ ể ẽ ộ ườ ẻ ủ

ộ ằ

ẻ ng k , tính b ng pixel hay % đ v i nhau. Các thu c tính c a th

: ớ Size = "n" : xác đ nh đ dày c a đ ị ủ ườ Width ="n": xác đ nh chi u dài c a đ ủ ị ề ng k , tính b ng pixel ườ ẻ ằ ộ

r ng màn hình. ộ

Align = "left" | "center" | "right" : căn l NoShade : Không đ bóng m

c a đ ề ủ ườ ng k . ẻ

ủ

ữ

ậ

ổ ờ

Ví dụ :

Minh hoa tac dung cua the HR

Hypertext Markup Language
HTML là t p con c a ngôn ng SGLM ...

III.2.6. Các th đ nh d ng khác ẻ ị

ạ

ữ ẻ ể ạ ư ấ

Ngôn ng HTML cung c p các th đ d ng cho m t trang Web nh các ộ i đây là th ch a và không có thu c ọ ẻ ướ ộ ứ ẻ ả ả

trình s an th o văn b n khác. Các th d tính.

Tên thẻ Tác d ngụ Ch đ m (Bold) ữ ậ Ch nghiêng (Italic) ữ

16

i (Underline)

ướ ướ ớ c nh h n ỏ ơ c l n h n ơ

i

ữ

ơ

ọ

Ch g ch d ướ ữ ạ Ch g ch gi a ữ ạ ữ Ch có kích th ữ Ch có kích th ữ Ch s d ỉ ố ướ Ch s trên ỉ ố Văn b n nh n m nh và ch nghiêng ấ ả ạ Văn b n nh n m nh h n và ch đ m ấ ữ ậ ạ ả Đ an trích d n , ch nghiêng ữ ẫ Căn gi a các đ an văn b n ả ọ ữ

III.2.7. Danh sách

M t trong nh ng tính năng h u ích c a HTML là kh năng t o các danh ữ ủ ữ ạ ả ộ

sách (list) đ t ch c thông tin. Có 3 lo i danh sách ể ổ ứ

(unordered lists )

(ordered lists) ứ ự

ạ