CHƯƠNG 3 : THIẾT KẾ TRANG WEB
2. Một số tag cơ bản của HTML
2.1. Định dạng trang
Định dạng trang thông thường bao gồm các thông tin về tiêu đề
trang, bảng mã kí tự được dùng, màu nền, ảnh nền, từ khóa.
Để đặt tiêu đề cho trang web, ta dùng tag <TITLE>, ví dụ muốn
có tiêu đề của trang web thiết kế là “Chào mừng các bạn đến với trang web này”, ta dùng: <TITLE> Chào mừng các bạn đến với
trang web này</TITLE>
Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập các
thơng số cho tag <META>. Ví dụ thiết lập sau: <META HTTP-
EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
cho biết trang web sẽ dùng bảng mã Unicode-UTF-8.
Ta có thể đặt màu nền, ảnh nền cũng như màu chữ cho toàn bộ trang web bằng cách đặt các thuộc tính BGCOLOR, BACKGROUND và TEXT tương ứng trong tag <BODY>. Ví dụ sau đặt màu nền cho trang web là màu đỏ, màu chữ là màu trắng: <BODY BGCOLOR="#FF0000" TEXT="#FFFFFF">.
Ví dụ sau minh họa một trang web có các định dạng trang đã trình bày ở trên:
<HTML> <HEAD>
<META HTTP-EQUIV="Content-Language" CONTENT="en-us"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Chào mừng các bạn đến với trang web này</TITLE> </HEAD>
<BODY BGCOLOR="#FF0000" TEXT="#FFFFFF"> </BODY>
</HTML>
2.2. Định dạng văn bản
2.2.1. Định dạng phân đoạn
Tag <P> được dùng để định dạng phân đoạn (paragraph).
Thuộc tính thường gặp là ALIGN dùng để canh chỉnh dữ liệu trong phân đoạn là LEFT (trái), RIGHT (phải) CENTER (canh giữa) hoặc JUSTIFY (canh đều hai bên). Ví dụ sau minh họa việc hiển thị khi
đặt các thuộc tính canh chỉnh cho tag <P> bằng cách lần lượt gán
thuộc tính ALIGN trong tag này các giá trị “LEFT”, “CENTER”, “RIGHT”:
<P ALIGN="LEFT">This is webpage</P> <P ALIGN="CENTER">This is webpage</P> <P ALIGN="RIGHT">This is webpage</P>
Hình 3.1 – Các thuộc tính canh chỉnh của tag <P>
Trong một phân đoạn, việc ngắt dịng trong lúc soạn thảo khơng
ảnh hưởng gì đến việc hiển thị. Trình duyệt chỉ hiểu ngắt dịng trong
một phân đoạn thơng qua tag <BR>. Ví dụ: <P>
Họ tên: Lê Đình Duy Nghề nghiệp: Giảng viên
Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên </P>
Hình 3.2 – Khơng thể xuống dòng như thiết kế
Để hiển thị mỗi mục trên mỗi dòng, ta phải chỉnh lại đoạn mã
HTML trên bằng cách thêm vào cuối mỗi mục tag <BR> như sau: <P>
Họ tên: Lê Đình Duy <BR> Nghề nghiệp: Giảng viên <BR>
Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên <BR>
</P>
Hình 3.3 – Dùng tag <BR> khi muốn xuống dịng
Ngồi ra, ta cũng có thể dùng đường kẻ ngang với tag <HR> để tạo sự phân cách giữa các thành phần trong trang web. Thuộc tính thường gặp là ALIGN (dùng để canh chỉnh vị trí của đường này) và COLOR (màu sắc).
Nội dung của trang web <HR COLOR="#0000FF">
Cập nhật năm 2003. Mọi ý kiến, góp ý xin liên hệ Webmaster.
Hình 3.4 – Phân cách bằng tag <HR>
2.2.2. Định dạng chữ
Tag <FONT> để định dạng font chữ, màu sắc, kích thước, ...
của văn bản. Các thuộc tính của tag này thường là: FACE: loại font chữ, SIZE: kích thước, COLOR: màu chữ. Ngồi ra, để định dạng
chữ in đậm ta dùng tag <B>, in nghiêng dùng tag <I>, gạch dưới
dùng tag <U>.
Thuộc tính COLOR dùng trong các tag thường được định nghĩa bằng tên qui ước (ví dụ như RED: màu đỏ, BLUE: màu xanh da trời, ...) hoặc mã RGB dưới dạng 3 chữ số hệ 16 bắt đầu bằng dấu # (ví dụ như #FF0000).
Ví dụ sau định dạng đoạn văn bản với font Tahoma, in đậm, kích thước +2 (10pt)
<B><FONT FACE="Tahoma" SIZE="2">Thuật xử thế của người xưa</FONT></B>
Để có kết quả hiển thị là: Thuật xử thế của người xưa
2.3. Định dạng hình ảnh
Tag <IMG> được dùng để chèn một ảnh hoặc một video clip vào
trong một trang web. Các định dạng tập tin ảnh và video sau được hỗ trợ trên Internet Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, *.mov, *.mpg, *.mpeg, *.png, *.wmf, ...
Đối với trang web khơng chứa hình ảnh, thì nội dung văn bản sẽ được hiển thị sau này nằm toàn bộ trong trang web. Tuy nhiên với
trang web có chứa hình ảnh, hình ảnh sẽ là một tập tin độc lập với tập tin chứa trang web. Tag <IMG> dùng trong trang web để thơng báo cho trình duyệt đọc tập tin ảnh và hiển thị tại vị trí đặt tag này. Ví dụ, một trang web muốn hiển thị hình ảnh linh vật biểu tượng Seagames 22 sau đoạn văn bản “Linh vật Seagames 22”, phải bao gồm hai tập tin; Một tập tin hình ảnh về linh vật, ví dụ linhvat.gif. Tập tin còn lại chứa đoạn văn bản “Linh vật Seagames 22” và tag <IMG SRC=”linhvat.gif”> như sau:
<P><B><FONT FACE="Tahoma" SIZE="2"> Linh vật Seagames 22</FONT></B></P>
<IMG BORDER="0" SRC="linhvat.gif" WIDTH="512" HEIGHT="18"> Các thuộc tính chính bao gồm: SRC (tên tập tin hình ảnh), WIDTH, HEIGHT (kích thước ảnh), BORDER (đường viền khung
quanh ảnh), ALT (văn bản thay thế dùng khi không hiển thị), ALIGN
(canh chỉnh), ... Thuộc tính ALT cũng được dùng khi ta muốn đưa
chuột đến hình ảnh và có dịng chữ như tooltip hiển thị bên dưới.
2.4. Định dạng hyperlink (siêu liên kết)
Tag <A> được dùng để đặt một hyperlink. Đoạn văn bản (hay
hình ảnh, ...) nằm giữa các tag <A> và </A> sẽ đóng vai trị như là
“dấu hiệu” (anchor) hyperlink. Thông thường, con trỏ chuột sẽ thay
đổi hình dạng (thường là hình bàn tay) khi di chuyển ngang qua đoạn văn bản này.
Một hyperlink cho phép liên kết tới một vị trí khác ngay bên trong trang web chứa hyperlink (liên kết nội) hoặc tới một trang web khác (liên kết ngoại).
Để tạo một liên kết nội, ta cần thực hiện hai bước. Bước 1 là đánh dấu vị trí (bookmark) của nơi cần liên kết bằng thuộc tính
NAME. Bước 2 là tạo hyperlink đến vị trí vừa được đánh dấu. Ví dụ sau minh họa việc tạo liên kết nội để khi người dùng nhấn vào
hyperlink “Go to Chapter 1” thì trình duyệt sẽ chuyển đến vị trí của Chapter 1 trong cùng trang web
Mã HTML Hiển thị trên trình duyệt
<A HREF="#Chapter1"> Go to Chaper 2</A>
... ...
<A NAME="Chapter1"> Chapter 1</A>
Go to chapter 1
Chapter 1 Dấu # trong mục HREF là dấu hiệu của liên kết nội.
Để liên kết tới các trang web khác, điền địa chỉ URL của trang
web vào mục HREF. Xem các ví dụ sau:
Mã HTML Ý nghĩa
<A
HREF=”http://www.intel.com”> Intel Home Page</A>
Liên kết đến trang ở máy chủ khác
<A HREF="home.htm">
Home</A> Liên kết đến trang khác trong cùng thư mục <A
HREF="javascript:window.open()" > Click here</A>
Gọi một hàm JavaScript <A HREF="FlashGet.zip">
Download</A> Hiển thị cửa sổ tải tập tin về.
Mã HTML Ý nghĩa
<A
HREF="ftp://ftp.microsoft.com/mo use.zip"> Download</A>
Hiển thị cửa sổ tải tập tin theo giao thức FTP. <A HREF="mailto:duyld@yahoo.com" > Email me</A> Gửi email <A HREF="Forum.htm"
TARGET=_blank> Forum</A> Mở tập tin trong cửa sổ định nghĩa bởi TARGET Một số giá trị có thể được dùng để gán cho thuộc tính TARGET
của tag <A> là:
Giá trị của TARGET Ý nghĩa
Name Nạp trang web trong cửa sổ hoặc FRAME có
tên là name
_blank Nạp trang web vào một cửa sổ trống mới.
Cửa sổ mới này khơng có tên.
_parent Nạp trang web vào cửa sổ cha gần nhất
của trang web hiện hành.
_self Nạp trang web vào cùng cửa sổ với trang
web hiện hành. Ðây là giá trị mặc định của hyperlink.
_top Nạp trang web vào cửa sổ cao nhât
(topmost).
2.5. Định dạng một số kí tự đặc biệt
HTML sử dụng các kí tự đặc biệt (ví dụ như “<” và “>” để đánh dấu các tag, ...), do đó để hiển thị các kí tự đặc biệt này, ta phải
dùng các nhóm kí tự thay thế sau: Kí tự cần hiển thị Mã thay thế < < > > & & “ " khoảng trắng
Â, #, Ơ ¢, £, ¥
1/2 , 1/3, 3 /4 ¼, ½, ¾
÷, ° ÷, °
đ, â ®, ©
2.6. Chuyển hướng trang tự động (Automatic redirect)
Để định nghĩa một trang sẽ tự động chuyển sang một địa chỉ
khác sau một khoảng thời gian định trước, ta chèn ngay sau tag <HTML> một tag như sau: <META HTTP-EQUIV="Refresh"
CONTENT="3;url=http://domain/directory/file.html">
Trang web chứa tag trên sẽ tự động chuyển sang trang mới
http://domain/directory/file.html sau khoảng thời gian là 3 giây.