Chuong 2 - HTML và các thẻ cơ bản docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (397.52 KB, 17 trang )
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
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ẻ
10
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.
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" 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
<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>
12
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, 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= ”>
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) {
// 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>
14
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.
Ví dụ:
<PRE>
<H3> Định dạng bởi thẻ PRE </H3>
HTML
<I>Welcome! </I>
<HR width="60" align="left">
</PRE>
Thẻ <XMP> : sử dụng giống như thẻ <PRE>, nhưng có sự khác biệt :
15
Các thẻ HTML khác không có hiệu lực trong paragraph nằm trong cặp thẻ
<XMP>
Trình duyệt hiển thị văn bản theo font mặc đinh
Thẻ đóng </XMP> không tạo xuống dòng
Không sử dụng cho table
Ta thường dùng thẻ <XMP> trong việc minh họa nội dung các thẻ HTML
trong trang Web mà không dùng các ký tự đặc biệt, các tiện ích tạo source HTML
dùng kỹ thuật này để cho phép người sử dụng copy các đọan mã HTML và paste
vào tư liệu HTML của mình.
Ví dụ:
<H3>Structure of HTML Document</H3>
<!- Minh hoa hieu luc cua the <XMP> >
<XMP>
<HTML>
<HEAD>
<TITLE>Tieu de </TITLE>
</HEAD>
<BODY>
<!- Phan than trang web >
</BODY>
</HTML>
</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
<STRONG> Văn bản nhấn mạnh hơn và chữ đậm
<CITE> Đọan trích dẫn , chữ nghiêng
<CENTRE> 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
<UL> : danh sách không có thứ tự (unordered lists )
<OL> : danh sách có thứ tự (ordered lists)
<DL> : danh sách định nghĩa (definition lists )
Thẻ <UL> và <OL> : Các thuộc tính là TYPE để quy định cách hiển thị của
danh sách, các giá trị của thuộc tính TYPE :
"a" : đánh dấu thứ tự bằng chữ thường
"A" : đánh dấu thứ tự bằng chữ in hoa
"i" : đánh dấu thứ tự bằng chữ i, ii, iii,
"I" : đánh dấu thứ tự bằng chữ I, II, III,
"Circle" : đánh dấu thứ tự bằng ký hiệu
"Disc" : đánh dấu thứ tự bằng ký hiệu
"Square" : đánh dấu thứ tự bằng ký hiệu
Mỗi đề mục của danh sách được đánh dấu bởi thẻ <LI>, sử dụng thẻ </LI>
là tùy chọn.
Ví dụ :
<UL type="I">
<LI> Chuong I
<LI> Chuong II
<OL type="square">
<LI> De muc II.1
<LI> De muc II.2
</OL>
</UL>
Thẻ <DL> : dùng tạo một danh sách định nghĩa hay danh sách từ điển chú
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.
BORDER = "n", quy định đường kẻ bao quanh hình ảnh, giá trị từ 0-6.
ALIGN ="left" | "right" | "center".
Ví dụ :
<P align="justify">
<IMG SRC = "icannlogo.gif" BORDER = "1"
WIDTH = "100" HEIGHT = "60" HSPACE="12" VSPACE="12"
ALIGN="left" ALT="ICANN LOGO">
Chèo lái guồng máy điều hành
18
</P>
Tạo và quản lý hyperlink
Điểm neo (Anchor, trong FrontPage gọi là Bookmark) xác định một vị trí
trong trang web hoặc một một vị trí trong trang web khác mà người sử dụng có thể
tham chiếu đến.
Để định nghĩa một điểm neo ta sử dụng thẻ <A> với cú pháp như sau:
<A NAME = "#anchor_name"> văn bản </a>, phần nội dung giữa cặp thẻ
<a> và </a> trong trường hợp này là không nhất thiết
Tạo một hyperlink để tham chiếu đến một tài nguyên trên web, ta sử dụng
thẻ <A> với cú pháp :
<A HREF = URL hay URL#anchor_name> Link_text </A>
Thuộc tính: TARGET ="Window_name","_blank", "_self", "_top" và
"_parent" chỉ nơi hiển thị của trang web chỉ định. Thẻ <A> không tạo sự xuống
dòng.
Ví dụ : Giả sử ta có tệp sub.htm
<!- sub.htm >
<BODY>
<A NAME="#top"></A> <!- Tạo anchor có tên top >
<!- Nội dung trang web >
<A HREF="top"> Về đầu trang </A> <BR> <!- Liên kết đến anchor top >
<A HREF ="index.htm"> Về trang chủ </A> <!- Liên kết đến trang chủ >
<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"
CORDS= " 90, 104, 25 ">
<AREA HREF="sgGuide.htm" ALT="Du lich tp HCM"
SHAPE="polygone"
CORDS= "51,177,144,176,113,210,132,
222,71,222,74,215 ">
</MAP>
</BODY>
Một bản đồ ảnh là một hình đồ họa có chứa các liên kết đến các URL khác
nhau, nơi mà người sử dụng click lên bản đồ ảnh (gọi là hotspot) sẽ xác định liên
kết nào được kích họat. Bản đồ ảnh gồm hai thành phần chính: IMG và MAP.
Phần tử IMG là một thẻ với thuộc tính USEMAP để tham chiếu đến phần
tử MAP sẽ được dùng.
Phần tử MAP chứa các phần tử AREA, mỗi phần tử AREA này giúp xác
định vị trí trên bản đồ ảnh (dùng thuộc tính SHAPE, CORDS) và một liên kết đến
một URL.
Thuộc tính SHAPE có giá trị là "rect", "circle" hay "polygone" tương ứng
với một vùng hình chữ nhật, hình tròn, đa giác trên bản đồ.
20
Thuộc tính COORDS có các giá trị tùy thuộc
vào giá trị của thuộc tính SHAPE
Đối với hình đa giác thì các giá trị là tọa độ
các đỉnh
Đối với vòng tròn thì các giá trị là tọa độ tâm
và bán kính.
Việc xác định tọa độ này khá khó khăn nếu
thực hiện không có trợ giúp bằng một trình sọan
thảo web trực quan. FrontPage và Dreamwever đều
có công cụ tạo bản đồ ảnh rất tốt.
Hình bên cạnh minh họa việc tạo một bản đồ
ảnh với phần mềm FrontPage 2000.
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
ấn nút Stop.
Riêng các tệp media thuộc có phần mở rộng
.RM có một vài sự khác biệt, nếu sử dụng
RealOnePlayer, thẻ EMBED có cú pháp cơ bản:
<EMBED scr=”mediafile.rm”
TYPE=”audio/x-pr-realaudio-plugin” >
Nếu bạn sử dụng RealPlayer ,thì việc nhúng tệp
media vào trang web có kỹ thuật tương đối đặc biệt. Xem thêm thông tin về các
phương thức truy cập đến các tệp media (dạng streaming và non-streaming) tại địa
chỉ:
www.real.com/devzone/library/stream/
hay “Ngôn ngữ HTML 4.0 cho web” , nxb Thống Kê, 2004, trang 242
III.2.9. Chèn các đối tượng ActiveX và Applet
ActiveX Control là một kỹ thuật đặc trưng của Microsoft, cho phép người
sử dụng một plug-in để mở một đối tượng nhúng tương thích với công nghệ của
Windows, nếu plug-in đó chưa được cài đặt trên client thì nó cho phép người sử
dụng download từ web site được chỉ định. Để nhúng một ActiveX Control vào
trang web, ta sử dụng thẻ <OBJECT> với cú pháp cơ bản:
<OBJECT CLASSID="clsid: nnnn”
CODEBASE=URL
<PARAM name=”value”
<EMBED src=”filename”
</EMBED>
</OBJECT>
Ví dụ : để nhúng một tệp video dưới định dạng .swf (shockware file) vào
trang web ta có đọan mã:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" />swflash.cab#version=6,0,29,0"
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">
<param name="delay" value="5">
<param name="jumpsize" value="2">
value="Sliding Tree Menu, Copyright (c) 2000,
OpenCube Inc.">
<param name="subindent1" value="10"
</APPLET>
Để xây dựng các applet, có thể tham khảo trong tài liệu "Lập trình Web với
ngôn ngữ Java" của Trần Văn Lăng, nxb Thống kê, 2002.
Một trong những kỹ thuật thiết kế web đang được quan tâm hiện nay hiện
nay là kỹ thuật tạo các file Flash với tính đơn giản, dễ xây dựng, tương thích với
các trình duyệt IE, NN hơn là viết các applet.
III.2.10. Tạo Marquee
Marquee là một dòng chữ chạy, ta sử dụng thẻ <MARQUEE>, thẻ này vốn
là một thẻ độc quyền của IE, nhưng hiện nay được hỗ trợ bởi FireFox 1.0 và
Netscape 8.0. Cú pháp cơ bản như sau:
23
<MARQUEE>
behavior=type
direction= left | right | up | dowm
nội dung
</MARQUEE>
Các thuộc tính:
- Behavior = "scroll" | "slide" | "alternate" ,Kiểu scroll nếu muốn dòng chữ bắt
đầu ở cạnh này và biến mất ở cạnh kia của màn hình, kiểu slide nếu muốn bắt đầu ở
cạnh này và dừng lại khi dòng chữ chạm vào cạnh kia của màn hình, kiểu alternate
nếu dòng chữ bắt đầu ở cạnh này và trượt trở lại khi dòng chữ chạm vào cạnh kia
của màn hình.
- Direction =" left" | "right" | "up" | "down", Chỉ định phía dòng chữ sẽ hiện ra.
Hai giá trị "up" và "down" thích hợp cho việc tạo ra các marque trôi từ dưới lên
đượ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
trôi dần từ dưới lên trên.
6. Nghiên cứu một trong hai giáo trình điện tử của Trường Đại học Sư phạm Đà
Nẵng : Lịch sử địa phương hay Địa lý địa phương, cho biết kỹ thuật tạo menu điều
hướng của bộ giáo trình này.
7. Cho biết đặc điểm và cách sử dụng của hai thẻ EMBED và OBJECT trong mỗi
loại trình duyệt IE và NN
8. Cho biết kỹ thuật và lĩnh vực ứng dụng của WEBGIS
9. Sử dụng một trong những trình sọan thảo HTML: EditPlus, HTMLKit v.v. để sọan
thảo các tệp tin tư liệu HTML. So sánh hiệu quả sử dụng với các trình sọan thảo
web trực quan như FrontPage, Dreamwever.
10. Xét một phần tử trên trang web: <a href="new.htm">Tin mới</a>. Thuộc tính href
là chữ viết tắt của từ nào?
11. Xem xét home page của BKAV (Bách khoa AntiVirus), có liên kết : DownLoad
Bkav, (giả sử trình phòng, diệt virus có tên bkavHome.exe), hãy viết thẻ HTML để
khi người sử dụng click vào liên kết sẽ cho phép download tệp chương trình về
lưu trữ ở máy client.
12. Xem xét trang web sau đây có tên myfirstpage.html, bạn cần phải đưa lên server
những file nào để đảm bảo trang web hiển thị đúng như mong muốn:
<HTML><HEAD><TITLE> My First Page </TITLE> </HEAD>
<BODY background="joy.gif">
<H1> My Web page</H1>
<P> On happy joy I have a page on the web! </P>
<A href="otherpage.html"> Click here for other page </A>
</BODY></HTML>
13. Tạo một trang web liên kết đến các website các trường đại học trong cả nước.
1. Nhóm tác giả ELICOM; Ngôn ngữ HTML 4.0; Nxb Thống kê, Hà Nội, 2004
2. Nguyễn Đình Hóa, HTML và Thiết kế trang web, Viện CNTT Đại học quốc gia Hà
Nôi, 2001
3. Dave Raggett, Arnaud Le Hord; HTML 4.01 Specification; W3C, 2004
4. Aptech Wordwide; HTML, DHTML and JavaScript; 2004
5. last updated April, 2005
25
26
