CHƯƠNG 3: THIẾT KẾ TRANG WEB
2. Một số tag cơ bản của HTML
Đị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ế
Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org
Để 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
Ngoà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ữ. Ngoà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
Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org
(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 ¼, ½, ¾
÷, ° ÷, °
®, © ®, ©
Lê Đình Duy - ĐH KHTN Tp. HCM Email: ledduy@ieee.org
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.