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): />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: />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
2) <IMG border="1" 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">
11
</HEAD>
<BODY bottomMargin=0 bgColor=#ffffff rightMargin=0>
</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
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= ”>
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 = ” />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.
13
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ụ:
<SCRIPT LANGUAGE = "JavaScript 1.5">
// Khai báo các biến dùng chung, hằng số
function Banner(url,pic,pos) {
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
thẻ này trình duyệt sẽ tạo ra một dòng mới và tách biệt hai đọan liên tiếp bằng một
dòng trống.
Thuộc tính của thẻ <P> : ALIGN, các giá trị : "left", "right", "center" và
"justify"
Thẻ <BR> : đây là thẻ rỗng để ngắt dòng (break line)
Ví dụ:
<HTML>
<HEAD> <TITLE> Hello world! </TITLE> </HEAD>
<BODY>
<H3 align="center"> Cac the ngat doan </H3>
<P align="justify">
Paragraph 1
</P>
<P align="justify">
Paragraph 2
</P>
<H2 align="center"> Su dung the BR </H3>
<BR>
<!- Noi dung khac cua trang web >
</BODY>
</HTML>
III.2.4. Các đoạn văn bản được định dạng sẵn
Thẻ PRE : đây là thẻ chứa, nhằm hiển thị một đọan văn bản mà người sử
dụng muốn giữ các khoảng cách, xuống dòng như mong muốn (không sử dụng ký
tự   và thẻ <br>). Ngoài ra, ta có thể sử dụng các thẻ khác để định dạng trang
web.
</XMP>
III.2.5. Thẻ <HR>
Đây là thẻ rỗng, dùng để vẽ một đường thẳng phân cách các đọan văn bản
với nhau. Các thuộc tính của thẻ <HR>:
Size = "n" : xác định độ dày của đường kẻ, tính bằng pixel
Width ="n": xác định chiều dài của đường kẻ, tính bằng pixel hay % độ rộng
màn hình.
Align = "left" | "center" | "right" : căn lề của đường kẻ.
NoShade : Không đổ bóng mờ
Ví dụ :
<BODY>
<H3> Minh hoa tac dung cua the HR </H3>
<CENTER> <B>Hypertext Markup Language </B></CENTER>
<HR size="2" width="50%" align="center">
HTML là tập con của ngôn ngữ SGLM
</BODY>
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
trình sọan thảo văn bản khác. Các thẻ dưới đây là thẻ chứa và không có thuộc tính.
16
Tên thẻ Tác dụng
<B> Chữ đậm (Bold)
<I> Chữ nghiêng (Italic)
<U> Chữ gạch dưới (Underline)
<STRIKE> Chữ gạch giữa
<SMALL> Chữ có kích thước nhỏ hơn
<BIG> Chữ có kích thước lớn hơn
<SUB> Chỉ số dưới
<SUP> Chỉ số trên
<EM> Văn bản nhấn mạnh và chữ nghiêng
17
giải. Phần thuật ngữ được đánh dấu bằng thẻ <DT> và </DT>, phần giải thích được
đánh dấu bằng thẻ <DD> và </DD>
Ví dụ:
<DL>
<DT><B>Thuat ngu 1 </B></DT>
<DD> Cac dinh nghia ca chu giai ve
thuat ngu 1 </DD>
<DT><B>Thuat ngu 2 </B></DT>
<DD> Cac dinh nghia ca chu giai ve
thuat ngu 2 </DD>
<!- Cac thuat ngu khac >
</DL>
III.2.8. Siêu liên kết (Hyperlink) và hình ảnh (Image)
Hyperlink là một lệnh cho phép ta đặt một hotspot (điểm nóng) trên một
hypertext của trang web dùng để đi đến một địa chỉ (địa chỉ này có thể là một
anchor, một tài nguyên trên web) khi click lên hotspot này.
Hình ảnh
Để chèn một hình ảnh vào trang web, ta sử dụng thẻ <IMG>, đây là thẻ
rỗng, thẻ này không tạo sự ngắt dòng.Hầu hết các trình duyệt đều có thể hiển thị
các kiểu tệp tin ảnh thông dụng, chủ yếu ở các dạng GIF, JPG, JPEG. Cú pháp :
<IMG SRC="tên đường dẫn đến tệp tin hình ảnh>
Các thuộc tính khác:
ALT ="Lời chú thích", dùng để chú thích cho hình ảnh hay ứng dụng liên
kết với hình ảnh (giống như screen tip text). Khi hình ảnh này không hiển thị được
trên trang web, thì lời giải thích này sẽ hiển thị bên cạnh ký hiệu màu đỏ (nếu là
IE) hay (nếu là NN).
HEIGHT, WIDTH = "n" tính bằng pixel hay "n%", quy định kích thứớc ảnh
HSPACE, VSPACE ="n" tính bằng pixel, quy định khỏang trống xung
quanh hình ảnh.
<A NAME="bottom"></A> <!- Tạo anchor tên bottom >
<!- Nội dung phần cuối >
</BODY>
và index.htm (trang chủ) như sau:
<!- index.htm >
<BODY>
<!- Nội dung trang chủ >
19
<A HREF="sub.htm#bottom"> Xem phần cuối của trang SUB</A>
</BODY>
Sử dụng hình ảnh để tạo liên kết bằng cách sử dụng thẻ <IMG> :
<P> <B>Web Course </B>
<A HREF="webcourse.htm" TARGET="_self">
<IMG SRC="book.gif" ALT="Giao trinh thiet ke web></A>
</P>
Sử dụng hình ảnh để tạo hyperlink
<!- Các nội dung khác >
Nhận xét : trong ví dụ trên ta thay cho link text là thẻ <IMG> để hiển thị
hình ảnh dùng làm link đến tệp HTML webcourse.htm.
Sử dụng bản đồ ảnh để tạo các liên kết :
Ta sử dụng một bản đồ Việt Nam (vntourism.gì) để tạo các liên kết đến các
trang web hướng dẫn du lịch tại mỗi địa điểm.
<BODY>
<IMG SRC="vntourism.gif" USEMAP="#vnmap">
<MAP name="vnmap">
<AREA HREF="hnGuide.htm" ALT="Du lich Ha Noi"
SHAPE="rect"
CORDS= "28, 18, 138, 64">
<AREA HREF="dnGuide.htm" ALT="Du lich Da Nang"
SHAPE="circle"
Chú ý : khi sử dụng hình ảnh cần chú ý đến
dung lượng tệp tin hình ảnh sẽ ảnh hưởng đến tốc độ
truyền dữ liệu và hiển thị hình ảnh và dạng tệp tin hình ảnh mà web hiện đang hỗ
trợ (GIF, JPG, JPEG ,BMP, DIB, TIFF, TIP và PCX).
III.2.9. Chèn âm thanh và ảnh động vào trang web
Hầu hết các trình duyệt không hỗ trợ trực tiếp các tệp tin multimedia như
các tệp tin âm thanh, họat hình, video. Để xem hoặc chạy các tệp tin này trong môi
trường web cần có các ứng dụng helper. Một số ứng dụng helper như FlashMX của
Macromedia, RealOnePlayer của RealNetworks chỉ yêu cầu phần mềm, các sound
player đòi hỏi cả phần mềm lẫn phần cứng. Sau đây là một số kiểu tệp tin
multimedia mà ta sẽ gặp trên các trang web.
Các kiểu tệp tin âm thanh có phần mở rộng: WAV, AU, MID, AIFF
Các kiểu tệp tin họat hình, phim có phần mở rộng : AVI, MOV, MPG.
Riêng các tệp medie có phần mở rộng .RM, vốn là định dạng của
RealNetworks không được hỗ trợ bởi Windows Media Player.
Tạo âm thanh nền cho trang web: đây là tính năng chỉ có trong Internet
Explorer. Cú pháp : <BGSOUND src=”tên tệp âm thanh”>
Nhúng tệp multimedia và trang web : ta sử dụng thẻ <EMBED>, đây là
loại thẻ rỗng. Thẻ này được IE và NN hỗ trợ.
Cú pháp: <EMBED src=”sound.url”>
Các thuộc tính khác :
* CONTROL = console | smallconsole | playbutton | pausebutton |
stopbutton và volumelever, nhằm xác định form điều khiển tệp media.
* WIDTH =”n”, HEIGHT = “h” tính bằng pixel, xác định kích cở của form
điều khiển.
21
* AUTOSTART= “false” | “true”, để âm thanh không tự động / tự động phát
ra khi truy cập đến trang web được nhúng tệp media.
* LOOP =”n” để xác định tệp media được tự động mở ra n lần
* LOOP =”true” để mở tệp media cho đến khi
width="303" height="305">
<param name="movie" value="Clock.swf">
<embed src="file:///C:/webtest/Clock.swf" quality="high"
pluginspage="
type="application/x-shockwave-flash" width="303" height="305">
</embed>
</object>
22
Nếu client đã cài đặt ứng dụng helper FlashPlayer thì ta có thể sử dụng thẻ
<EMBED> như sau:
<embed width="128" height="128" "Clock.swf">
Lưu ý rằng việc xác định các CLASSID khá phức tạp, chúng ta cần đến một
trình sọan thảo web trực quan như FrontPage hay Dreamwever.
Appelet là những chương trình nhỏ viết bằng ngôn ngữ lập trình Java có
thể chạy trong trình duyệt (với điều kiện trình duyệt hỗ trợ Java; nếu không, ta có
thể download và cài đặt phần mềm Java™ Web Start từ www.sun.com/download/).
Đây là một trong những kỹ thuật web đặt trưng của Sun hiện nay, điểm nổi
bật của nó là tính bảo mật cao. Để chèn một applet vào trang web ta sử dụng thẻ
<APPLET> với cú pháp:
<APPLET code=”applet.class”
WIDTH= "n"
HEIGHT="n"
<param name=" " value=" ">
Your browser does not support Java applets.
</APPLET>
Ví dụ : menu điều khiển trang chủ của web site Đại học Đà Nẵng là một
applet với mã nguồn HTML được trích như sau:
<APPLET code="slidem.class" align="bottom"
height="210" width="150">
<paramname="bgcolor" value="255,255,255">
được viết bằng JavaScript.
- Loop ="n" | "infinite", chỉ số lần dòng chữ chạy qua màn hình.
- ScrollAmount="n", chỉ số khoảng trống tính theo pixel giữa mỗi lần dịch
chuyển của dòng chuyển
- ScrollDelay="n", xác định thời gian (phần nghìn giây) trước khi dòng chữ xuất
hiện trở lại.
Các thuộc tính khác: Height, Width, Hspace, Vspace, Align, Bgcolor cũng được
sử dụng
Ví dụ :
<HTML><HEAD><TITLE>MARQUEE</TITLE></HEAD>
<BODY TEXT="yellow">
<MARQUEE bgcolor="blue" behavior="alternate">Html Welcome !>
</MARQUEE>
</BODY>
</HTML>
1. Cho biết những thẻ HTML độc quyền của mỗi trình duyệt sau đây: Internet
Explorer và Netscape Navigator.
2. Các trang web của báo Tuổi trẻ điện tử () có phần mở
rộng là .tto, tại sao trình duyệt vẫn đọc và hiển thị được ?
3. Cho một tệp tin văn bản có tên khoatin.dhsp có nội dung sau:
<HTML><BODY>
Khoa Tin học Trường Đại học Sư phạm
</BODY></HTML>
Đây có phải là một tư liệu HTML không? và nội dung hiển thị trên cửa sổ trình
duyệt là gì ?
24
4. Cho biết thẻ HTML quan trọng nhất, không có nó thì không thể xây dựng một
website được.
5. Thẻ MARQUEE vốn là một thẻ độc quyền của IE, nhưng đã được NN chấp nhận
từ phiên bản 7.1, hãy sử dụng thẻ này để tạo một đọan quảng cáo gồm các dòng
5. last updated April, 2005
25
26
Copyright: Tài liệu đại học ©