Giáo Trình Thiết Kế Web

CHƯƠNG 1: GIỚI THIỆU KHÁI QUÁT VỀ TRANG WEB

1.1 Các khái niệm cơ bản

 Internet là một mạng máy tính toàn cầu trong đó các máy truyền thông với nhau theo một
ngôn ngữ chung là TCP/IP.
 Intranet đó là mạng cục bộ không nối vào Internet và cách truyền thông của chúng cũng theo
ngôn ngữ chung là TCP/IP.
 Mô hình Client-Server: đó là mô hình khách-chủ. Server chứa tài nguyên dùng chung cho
nhiều máy khác(Client) như các tập tin, tài liệu, máy in… Ưu điểm của mô hình này là tiết
kiệm về thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt động của mô hình này là máy
Server ở trang thái hoạt động(24/24) và chờ yêu cầu từ phía Client. Khi Client yêu cầu thì máy
Server đáp ứng yêu cầu đó.
 Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP
Server…)
 Internet Service Provider(ISP): Là nơi cung cấp các dịch vụ Internet cho khách hàng. Mỗi
ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
 Internet Protocol : Các máy sử dụng trong mạng Internet liên lạc với nhau theo một tiêu
chuẩn truyền thông gọi là Internet Protocol (IP). IP Address-địa chỉ IP: để việc trao đổi thông
tin trong mạng Internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân
biệt với các máy khác. Theo Internet Protocol mỗi máy tính trong mạng được định danh bằng
một nhóm các số được gọi là địa chỉ IP. Địa chỉ IP gồm 4 số thập phân có giá từ 0 đến 255 và
được phân cách nhau bởi dấu chấm. Ví dụ 192.168.0.1 Địa chỉ IP này có giá trị trong toàn
mạng Internet. Uy ban phân phối địa chỉ IP của thế giới sẽ phân chia các nhóm địa chỉ IP cho
các quốc gia khác nhau. Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện
quản lý và phân phối lại cho các ISP. Một máy tính khi thâm nhập vào mạng Internet cần có
một địa chỉ IP. Địa chỉ IP có thể cấp tạp thời hoặc cấp vĩnh viễn. Thông thường các máy
Client kết nối vào mạng Internet thông qua một ISP bằng đường điện thoại. Khi kết nối , ISP
sẽ cấp tạm thời một IP cho máy Client.
 Phương thức truyền thông tin trong Internet: Khi một máy tính có địa chỉ IP là x(máy X)
gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như
sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp.
Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy
trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y. Máy trung gian này
gọi là Gateway.
 World Wide Web(WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet. Dịch vụ này
đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa.
Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser.
 Web Browser(trình duyệt): là trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web
Server. Các trình duyệt thông thường hiện nay là Internet Explorer và Netscape Navigator.
 Home page: là trang web đầu tiên trong web site, khi vào một web site nào đó thì trang đầu
tiên sẽ là trang này.
 Hosting provider: là công ty hoặc tổ chức đưa các trang của bạn lên web
 Hyperlink : tên khác của hypertextlink
 Publish: làm cho trang web chạy được trên mạng
 URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên
mạng.
Trang 1
Giáo Trình Thiết Kế Web

 Web server là một chương trình đáp ứng lại các yêu cầu truy xuất tài nguyên từ trình duyệt.
Người ta thường sử dụnng cụm từ này để chỉ máy chạy chương trình server

1.2 Giới Thiệu Khái Quát Về Web

Web là một ứng dụng chạy trên mạng(Client-Server), là một ứng dụng thông thường như bao ứng
dụng khác, chỉ có điểm khác biệt là nó được chia sẻ khắp toàn cầu.
Trang web là một file văn bản đơn giản được lưu với đuôi .html hoặc htm. Trong file văn bản
đó có những tag hoặc những đọan mã đặc biệt mà trình duyệt web (Web browser)có thể hiểu và thông
dịch được.
Có hai trình duyệt thông dụng là : Internet Explorer và Netscape
Trong chương trình này ta sử dụng trình duyệt IE
HTML Là Gì?
HTML là chữ viết tắt của cụm từ Hypertext makeup language. Nó là hàng loạt các đoạn mã
chuẩn được quy ước để thiết kế Web và được hiển thị bởi một trình duyệt Web (Web
Browser)
Hypertext là từ nói tắt của Hypertext link , là một từ hay một cụm từ biệt mà khi ta click vào
đó trình duyệt web sẽ đưa ta đến một trang khác hay một vị trí khác trong trang web
Mark up: là cách định dạng văn bản để trình duyệt hiểu và thông dịch được.
Ví dụ ta có thể đánh văn bản trong đó ta có sử dụng những đọan code làm cho
 Tô đậm,in nghiêng, gạch dưới dòng văn bản
 Tạo một danh sách các nút
 Chèn hình ảnh vào trang web…
 Chúng ta có thể làm gì với file có đuôi này
Language: đây không hẳn là ngôn ngữ lập trình, đây chỉ là tập nhỏ những quy luật để ta định
dạng văn bản.
Trình duyệt(Browser) và trình soạn thảo(editor) trang web
Trình duyệt: là trình dùng để hiển thị trang web, nó là một ứbg dụng dược cài trên máy người
dùng, có có nhiệm vụ tải các trang web từ các web site thông qua địa chỉ của các trang web và
hiển thị chúng. Hiện nay có rất nhiều trình duyệt hai trong số các trình duyệt khá phổ biến là:
Netscape và Internet Explorer.
Trình soạn thảo trang web :giúp ta tạo, thiết kế các trang web. Các trình soạn thảo phổ biến
hiện nay là: Notepad, FrontPage và Dreaweaver.
Tag HTML là gì?
Các lệnh HTML được gọi là TAG, nó được dùng để định dạng các văn bản trên trang web, có 2 dạng
TAG. Dạng chung của một tag HTML là:
<tagName ListProperties> Object </tagName>
Trong đó <tagName> là tên một thẻ HTML nào đó còn Object là đối tượng chúng ta cần định dạng
trong trang Web, ListPropeties là danh sách thuộc tính của một Tag. Thuộc tính là những đặc điểm bổ
sung vào cho một tag, thứ tự các thuộc tính trong một tag thì không quan trọng. Nếu có từ 2 thuộc
tính trở lên thì mỗi thuộc tính ngăn cách nhau bởi khoảng trắng. Chúng ta cần nhớ rằng thuộc tính
không bao giờ viết ở đầu của một tag khi đó thuộc tính này trở thành tên tag :
<TagName propety1=’value1’ propety2=’value2’>Object</TagName>
Giá trị của thuộc tính chúng ta có thể bao bọc trong nháy đơn ‘ hoặc nháy đôi “ thậm chí ta có thể
không bao bọc gì.
<TagName>gọi là tag mở và </tagName> gọi là tag đóng. Thông thường thì các tag đều có tag đóng.
Nếu như tag đó không có tag đóng mà ta viết có tag đóng cũng không sao. Chúng ta cần nhớ rằng

Trang 2
Giáo Trình Thiết Kế Web

trong tag đóng ta dùng ký tự ‘/’ . Ký tự này báo cho Web browser biết là hiệu ứng của tag được kết
thúc tại đây. Nếu bạn quên đi ‘/’ thì hiệu ứng của tag này còn ảnh hưởng đến các đối tượng phía sau.
Ví dụ
<body BGCOLOR=”RED”>
trong ví dụ trên
BODY là TAGNAME
BGCOLOR là property
RED là value.
<B> Dòng chữ in đậm</B> khi trình duyệt gặp đoạn mã này nó sẽ xuất ra trang web Dòng chữ in
đậm .
Chúng ta có thể lồng các tag vào nhau nhưng có đều phải theo đúng thứ tự chứa nó
<Tag1><Tag2>Object</Tag2></Tag1>
hoặc
<Tag1>Object1<Tag2>Object2 Object3</Tag2></Tag1>
Ví dụ <B><U>In đậm và gạch dưới</U></B> thì trình duyệt sẽ hiện thị In đậm và gạch dưới
Lưu ý: một Web browser không quan tâm đến tới việc chúng ta sử dụng chữ hoa hay chữ
thường trong việc viết tag
Ví dụ như <B>Dòng chữ in đậm </B> thì cũng giống như <b>Dòng chữ in đậm </b> hoặc
<B>Dòng chữ in đậm </b>.
Không giống như việc lập trình, nếu như bạn có một lỗi trong trang HTML thì trình duyệt sẽ
bỏ qua và vẫn hiện thị nội dung trang Web của bạn lên. Một điều cần lưu ý là nếu bạn viết một
tag sai thì nội dung bên trong Tag đó không làm gì cả (nghĩa là trình duyệt không hiểu tag này
do đó nó sẽ không định dạng).
Khi bạn viết một tag thì khi mở < ta phải viết ngay tên tag liền nếu như sau < có khoảng trắng
thì tag này nó sẽ không hiểu
< B>Dòng chữ in đậm </B> : thì tag này viết sai do trước tag B có khoảng trắng.
Ta Có Thể Làm Gì Trên File HTML
Định dạng văn bản
Tạo danh sách
Chèn hình ảnh
Tạo link liên kết đến file khác
Tạo, chỉnh sửa bảng
Tạo form nhập dữ liệu
Cấu trúc cơ bản của trang Web
Một trang Web thông thường gồm có 2 phần
+ Phần đầu(<Head></Head>): đây là phần chứa thông tin của trang Web, những gì viết trong
phần này sẽ không hiển thị lên trang.
+ Phần thân (<Body></Body>): đây là phần chứa nội dung của trang Web những gì ta muốn
thể hiện trên trang thì được viết trong cặp tag này.
Ngoài ra để cho các trình duyệt hiểu đây là tài liệu HTML thì phần đầu và phần thân sẽ bao
bọc bởi cặp tag <HTML></HTML>
Như vậy cấu trúc của một file html được hình thành như sau:
<HTML>
<HEAD>
</HEAD>
<BODY>
Nội dung cần hiển thị được trình bày trong đây
</BODY>
</HTML>
Trang 3
Giáo Trình Thiết Kế Web

Các TAG căn bản trong HTML

các TAG căn bản trong HTML được chia làm 2 loại:
Phần tử mức khối – Đây là các phần tử xuất hiện ở phần thân văn bản. Các phần tử mức khối
được sử dụng để kết cấu tài liệu của bạn. Các phần tử này có thể chứa các phần tử trong dòng
hoặc mức văn bản và các phần tử mức khối khác (ngoại trừ phần tử địa chỉ (ADDRESS)). Khi
các phần tử mức khối bắt đầu ở một hàng mới, bạn không cần ghi thẻ kết thúc.
Một số phần tử mức khối thông thường:
Phần tiêu đề (H1 đến H6)
Đoạn văn bản (P)
Hạng mục danh sách (LI)
Đường nằm ngang (HR)
Phần tử mức văn bản hay trong dòng – Đây là những phần tử chứa dữ liệu. Các phần tử
này cũng có thể bao gồm các phần tử trong dòng khác và không đứng đầu dòng mới.
Một số phần tử mức văn bản thông thường bao gồm:
EM, I, B và FONT (nhấn mạnh ký tự)
A (liên kết đa văn bản)
BR (ngắt dòng)
APPLET (đối tượng được nhúng)
IMG (ảnh)
Tiêu đề
Phần tử này được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang
Web. Tất cả các phần tử tiêu đề phải có thẻ kết thúc. Nó bắt đầu bằng <H> và kết thúc
bằng </H> (Trong đó X là một số nguyên từ 1-6).
Phần tiêu đề được hiển thị to và đậm hơn để phân biệt chúng với phần còn lại của văn
bản. Bạn có thể hiển thị tiêu đề một trong sáu kích thước từ H1 đến H6. Tất cả những
gì bạn cần làm là chỉ rõ kích thước, H1, H2…Trình duyệt chú trọng đến cách hiển thị.

<H1>Tieu de1</H1>
<H2> Tieu de2 </H2>
<H3> Tieu de3 </H3>
<H4> Tieu de4 </H4>
<H5> Tieu de5 </H5>
<H6> Tieu de 6</H6>

Đoạn văn bản

Khi bạn viết một bài báo hay một bài luận, bạn nhóm nội dung vào một loạt các đoạn.
Mục đích là nhóm các ý tưởng logic lại với nhau và định dạng nội dung. Trong tài liệu
HTML, các phần tử mức văn bản có thể được nhóm thành các đoạn. Thẻ đoạn <P> được
sử dụng để đánh dấu sự bắt đầu của một đoạn mới.
Trang 4
Giáo Trình Thiết Kế Web

<HTML>
<HEAD>
<TITLE> xin chào </TITLE>
<BODY BGCOLOR = lavender>
<P>đây là doạn văn thứ 1. đây là doạn văn thứ 1

<P> đây là doạn văn thứ 2

</BODY>
</HTML>
Thẻ kết thúc đoạn </P> là không bắt buộc. Thẻ <P> kế tiếp sẽ tự động bắt đầu một
đoạn mới.
Các thẻ ngắt
Phần tử <BR> được sử dụng để chỉ ngắt dòng trong tài liệu HTML. Thẻ <BR> bổ sung ký tự
xuống dòng (và về đầu dòng) tại vị trí của thẻ.
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<P>This is going to be real fun
<H2>Use another heading</H2>
<BR>
<H1>This is should surprise you</H1>
<P> Another paragraph element
</BODY>
</HTML>
Thẻ đường ngang
Thẻ kẻ đường ngang <HR> được sử dụng để kẻ một đường ngang trên một trang. Các
thuộc tính sau đây giúp điều khiển các đường ngang. Nó có một thẻ bắt đầu, không có
thể kết thúc và không chứa nội dung.
Thuộc tính Mô tả

Align Chỉ vị trí của đường ngang. Bạn có thể canh lề nằm giữa phải
trái. Ví dụ, canh lề = nằm giữa.
width Chỉ độ dài của dòng. Nó có thể được xác định bằng các điểm
Trang 5
Giáo Trình Thiết Kế Web

hoặc tính theo phần trăm. Mặc định là 100%, nghĩa là toàn bộ
bề ngang của tài liệu.
size Chỉ độ dày của đường ngang và được xác định bằng các điểm.
noshade Chỉ đường được hiển thị bằng màu đặc thay vì có bóng.
<HTML>
<HEAD>
<TITLE>Welcome to HTML </TITLE>
<BODY>
<H3> My first HTML document</H3>
<HR noshade size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<HR>
<P> This is going to be real fun
</BODY>
</HTML>
Sử dụng Font
Thẻ <FONT> được sử dụng để điều khiển cách hiển thị văn bản trên trang Web. Bạn có thể
xác định các thuộc tính như kích thước, màu sắc, kiểu…
Bạn có thể đặt các thuộc tính FONT cho cả tài liệu bằng cách đặt phần tử trong thẻ
BODY. Ngoài ra, thuộc tính FONT có thể cụ thể cho từng từ, từng phần, và từng
phần tử trong trang.
Mô tả
Thuộc tính
COLOR Được sử dụng để chỉ màu của FONT. Bạn có thể sử dụng tên
màu hoặc xác định giá trị thập lục phân.
SIZE Được sử dụng để chỉ kích thước của font. Bạn có thể chỉ ra
một loạt các kích thước của FONT từ 1 đến 7. Kích thước lớn
nhất là 7 và nhỏ nhất là 1. Bạn có thể sử dụng một kích thước
chính và chỉ ra những kích thước tiếp theo liên quan đến kích
thước chính. Ví dụ, nếu kích thước chính là 3, thì
KÍCH THƯỚC = +4 sẽ tăng lên 7
KÍCH THƯỚC = -1 sẽ giảm xuống 2
FACE Được sử dụng để chỉ kiểu của font
Bạn có thể kết hợp các thuộc tính của FONT trong cùng một thẻ.
<HTML>
<HEAD>
Trang 6
Giáo Trình Thiết Kế Web

<TITLE>Welcome to HTML</TITLE>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>My first HTML
document</FONT></H3>
<P> This is <FONT COLOR = BLUE SIZE = 6>going </FONT>to be real fun
</BODY>
</HTML>
Thêm màu
Bạn có thể thêm màu vào trang và vào các phần tử trong trang. Màu là thuộc tính có thể được
sử dụng với nhiều phần tử. Bạn cũng có thể thêm màu vào thẻ BODY, thẻ FONT, các liên
kết… Ví dụ
<HTML>
<HEAD>
<TITLE> Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<H2><FONT COLOR = LIMEGRREN>Welcome to HTML</FONT></H2>
<P><FONT COLOR = RED> This is good fun</FONT></P>
</BODY>
</HTML>
Có 3 màu chính là đỏ, xanh lá cây và xanh da trời. Mỗi màu chính được xem như một bộ hai
số của hệ số 16.
#RRGGBB
Số thập lục phân 00 chỉ 0% của màu trong khi đó số thập lục phân FF chỉ 100% của màu. Giá
trị cuối cùng là một mã sáu số chỉ màu.

Mã thập lục phân Màu

#FF0000 RED
#00FF00 GREEN
#0000FF BLUE
#000000 BLACK
#FFFFFF WHITE
Chọn canh lề

Trang 7
Giáo Trình Thiết Kế Web

Thuộc tính canh lề được sử dụng để canh lề các phần tử HTML trong trang Web. Bạn có thể
canh lề văn bản, đối tượng, ảnh, đoạn văn bản, phân đoạn. Sau đây, bạn sẽ học cách căn lề
văn bản.
Thuộc tính canh lề chấp nhận các giá trị sau:
Giá trị Mô tả
Left Văn bản dược hiển thị bên trái.
Center Văn bản được canh giữa 2 lề
Right Văn bản được hiển thị bên phải.
Justify Văn bản được canh đều giữa 2 lề
Mặc định phụ thuộc vào canh lề chính của văn bản. Nếu canh lề văn bản từ trái sang phải thì
mặc định là trái.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<H2 align = center><FONT COLOR = LIMEGREEN> Welcome to HTML</FONT></H2>
<P align = right><FONT COLOR = RED> This is good fun</FONT></P>
</BODY>
</HTML>
Định dạng
HTML có nhiều thẻ có thể được sử dụng để định dạng nội dung của tài liêu HTML. Thẻ có
thể được phân thành:
 Thẻ định dạng mức vật lý.
 Thẻ định dạng mức logic.
Thẻ định dạng mức vật lý
Thẻ định dạng mức vật lý là thẻ xác định hoặc thay đổi đặc điểm của văn bản mà bạn áp
dụng thẻ.
Thẻ Mô tả Ví dụ
<B> … </B> Đậm <HTML>
<HEAD>
<TITLE>Learning
HTML</TITLE>

Trang 8
Giáo Trình Thiết Kế Web

</HEAD>
<BODY>
<P><B> This is good
fun</B></P>
</BODY>
</HTML>
<I>…</I> Nghiêng <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><I>This is good
fun</I></P>
</BODY>
</HTML>
<U>…</U> Gạch chân <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><U>This is good
fun</U></P>
</BODY>
</HTML>
<BIG>…</BIG> Gõ kích thước lớn <HTML>
hơn bình thường. Nó <HEAD>
được sử dụng để
hiển thị một từ, một <TITLE>Learning HTML
ký tự, hoặc một cụm </TITLE>
từ với font lớn hơn
so với phần còn lại </HEAD>
của văn bản. <BODY>
Trang 9
Giáo Trình Thiết Kế Web

<P><BIG>This is
good</BIG>
fun</P>
</BODY>
</HTML>
<SMALL>…</SMALL> Gõ kích thước nhỏ <HTML>
hơn bình thường. Nó <HEAD>
được sử dụng để
hiển thị một từ, một <TITLE>Learning HTML
ký tự, hoặc một cụm </TITLE>
từ với font nhỏ hơn
so với phần còn lại </HEAD>
của văn bản. <BODY>
<P><SMALL>This is
good</SMALL>
fun</P>
</BODY>
</HTML>
<STRIKE> Hiển thị dấu gạch <HTML>
ngang cả văn bản <HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><STRIKE>This is
good</STRIKE>
fun</P>
</BODY>
</HTML>
<SUP>…</SUP> Chỉ số trên <HTML>
<HEAD>
<TITLE>Mathematical
Formula
</TITLE>
</HEAD>
<BODY>
Trang 10
Giáo Trình Thiết Kế Web

<P>pi*r <SUP>2
</SUP></P>
</BODY>
</HTML>
<SUB>…</SUB> Chỉ số dưới <HTML>
<HEAD>
<TITLE>Chemical Formula
</TITLE>
</HEAD>
<BODY>
<P>H <SUB>2
</SUB>0</P>
</BODY>
</HTML>
<CENTER>…</CENTER> Canh giữa văn bản <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><CENTER>This is
good</CENTER>
fun</P>
</BODY>
</HTML>
Thẻ định dạng mức logic
Thẻ định dạng mức logic mô tả “hiệu ứng cần thiết” của văn bản. Hiển thị thật sự do trình
duyệt điều khiển.
Thẻ định dạng mức vât lý được tất cả các trình duyệt hiểu như nhau. Thẻ mức logic được hiểu
theo trình duyệt trong đó tài liệu HTML được hiển thị.
Thẻ định dạng mức logic Mô tả Ví dụ
<EM>…</EM> Văn bản được nhấn <HTML>
mạnh <HEAD>
Trang 11
Giáo Trình Thiết Kế Web

<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><EM>This is good
fun</EM></P>
</BODY>
</HTML>
<STRONG>…</STRONG> Văn bản kiểu chữ <HTML>
đậm <HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><STRONG>This is good
fun</STRONG></P>
</BODY>
</HTML>
<DFN>…</DFN> Được sử dụng cho <HTML>
định nghĩa <HEAD>
<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><DFN>Aqua</DFN> is
typically known as water</P>
</BODY>
</HTML>
<CODE>…</CODE> Được sử dụng trong <HTML>
các phần trích của <HEAD>
mã chương trình
<TITLE>Learning HTML
</TITLE>
</HEAD>
Trang 12
Giáo Trình Thiết Kế Web

<BODY>
<P><CODE>x = X + 1
<BR>
Y = Y + 1</CODE>
</BODY>
</HTML>
<KBD>…</KBD> Được sử dụng trong <HTML>
định dạng thuần tuý <HEAD>

<TITLE>Learning HTML
</TITLE>
</HEAD>
<BODY>
<P><KBD>This is good
fun</KBD></P>
</BODY>
</HTML>
<BLINK>…</BLINK> được sử dụng để <HTML>
nhấp nháy văn bản <HEAD>
(xem trong trình
duyệt netscape) <TITLE>Learning HTML
</TITLE>
<BODY>
<P>This is good
<BLINK>fun</BLINK>
</BODY>
</HTML>

 Mỗi trình duyệt có cách thực hiện các phần tử INS và DEL riêng. Netscape không thực
hiện các phần tử này.
 Phần tử BLINK không tương thích trong Internet Explorer.
Sử dụng các ký tự đặc biệt
Bạn có thể chèn các ký tự đặc biệt vào văn bản của tài liệu HTML. Để bảo đảm trình duyệt
không nhầm chúng với thẻ HTML, bạn phải thêm mã thoát cho các ký tự đặc biệt này. Định
dạng là:

Trang 13
Giáo Trình Thiết Kế Web

&code
Các ký tự đặc biệt Mã thoát Ví dụ
Lớn hơn (>) &gt <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
<BODY>
<CODE>If A &gt; B
Then <BG>
A=A+1
</CODE>
<P> The above statement used special chararacters
</BODY>
</HTML>
Nhỏ hơn (<) &lt <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
<BODY>
<CODE>If A &lt; B
Then <BG>
A=A+1
</CODE>
<P> The above statement used special chararacters
</BODY>
</HTML>
Trích dẫn &quot; <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
<BODY>
&quot; To be or not to be? &quot; That is the
Trang 14
Giáo Trình Thiết Kế Web

question
</BODY>
</HTML>
Ký tự “và” & &amp <HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<P> William &amp; Graham went to the fair
</BODY>
</HTML>
Kết cấu văn bản
Sử dụng trích dẫn
Bạn có thể chỉ một văn bản được trích dẫn trong tài liệu bằng cách sử dụng phần tử Q và
BLOCKQUOTE. BLOCKQUOTE được sử dụng đối với các phần trích dẫn dài và được hiển
thị như một đoạn văn bản thụt vào ở hàng đầu tiên. Nếu phần trích dẫn ngắn và không cần
ngắt đoạn, thì sử dụng phần tử Q. Khi sử dụng phần tử Q, bạn phải ghi rõ dấu ngoặc kép
không giới hạn.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<P> The blockquote element is used to format the content in block of text.
<BLOCKQUOTE><FONT color = hotpink>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the King’s horses
And all the King’s men
Could not put Humpty Dumty together again
</FONT>
</BLOCKQUOTE>
<P> If you notice the content is rendered as a block of text.
</BODY>
</HTML>
Trang 15
Giáo Trình Thiết Kế Web

Khi được hiển thị trong trình duyệt:

Văn bản trước khi được định dạng
Nếu bạn muốn văn bản được hiển thị với định dạng được xác định trước, thì sử dụng phần tử
PRE. Phần tử này được sử dụng để xác định định dạng cho văn bản. Khi văn bản được hiển
thị trong trình duyệt, nó tuân theo tất cả các mã định dạng được xác định trong tài liệu nguồn
HTML. Ví dụ,
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<PRE> Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the King’s horses
And all the King’s men
Could not put Humpty Dumty together again
</PRE>
</BODY>
</HTML>
Văn bản được hiển thị trong trình duyệt
Nhóm các phần tử
Có những trường hợp bạn muốn chia văn bản trong một trang Web thành những khối thông
tin logic. Bạn cũng có thể muốn áp dụng các thuộc tính thông thường cho toàn bộ khối. Các
phần tử DIV và SPAN được sử dụng để nhóm nội dung. Phần tử DIV chia tài liệu thành các
phần có liên quan với nhau. Phần tử SPAN được sử dụng để chỉ một khảng trống của ký tự.
Phần tử SPAN chỉ nội dung trong dòng còn phần tử DIV chỉ nội dung mức khối.
<HTML>
<HEAD>
<TITLE> Learning HTML</TITLE>
<BODY>
<DIV>
Division 1
<P> The DIV element is used to group elements.
<P>Typically, DIV is used for block level elements
</DIV>

Trang 16
Giáo Trình Thiết Kế Web

<DIV align = right><FONT size = 4 color = hotpink face = Arial>

Division 2
<P>
This is a second division
<BG>
<H2>Are you having fun?</H2>
</FONT>
</DIV>
<P> The second division is right aligned.
<SPAN STYLE = “FONT-SIZE:25; Color:BLUE”>Common formatting
</SPAN> is applied to all the elements in the division
</BODY>
</HTML>

1.3 Hiển thị trang web

Muốn hiển thị trang web ta làm như sau:
 Mở trình duyệt IE
 Chọn menu file,open, dùng browse tìm tập tin html mới tạo
Hoặc trong cửa sổ Explorer bạn double Click vào tập tin htm(l) mà bạn muốn hiển thị.
Lưu ý: trong hai cách hiển thị trang Web trên bạn không thể chạy được nếu trang chứa mã
Code viết cho kịch bản phía Server. Để chạy được trang loại này ta phải vào WebServer hoặc
mở trình duyệt rồi từ dòng Address ta gõ http://địa chỉ trang
Một số thao tác trong cửa sổ trình duyệt
- Để load lại trang Web ta nhấn biểu tượng Refresh (F5) trên thanh công cụ.
- Để chỉnh sửa kích thước chữ hiển thị trên trang ta vào Menu View->Text size->chọn tùy
chọn
- Để chỉnh lại font chữ ta vào Menu View->EnCoding->Chọn tùy chọn
- Trong trường hợp trang Web không hiển thị được Font tiếng Việt bạn hãy vào menu Tool
chọn Internet Options->Tab Fonts rồi chọn Font tiếng Việt(trong trường hợp chọn rồi mà
không hiển thị được font tiếng Việt bạn vào Menu View->EnCoding rồi chọn font như
User defined,Vietnamese….)

Trang 17
Giáo Trình Thiết Kế Web

- Ngoài ra Internet Option (trong menu Tool) chúng ta có thể thiết lập tùy chọn khác cho
trang Web như không Load hình xuống, định dạng liên kết,…

Hình 1 Hình 2
Trong tab General(Hình 1) ta có thể thiết lập các tùy chọn cho trình duyệt như Click vào nút
Use Current nghĩa là ta chọn trang hiện tại để load lên mỗi lần khởi động IE , chọn Use
Default thì ta gõ vào ô Address địa chỉ trang Web mặc định mỗi khi mở trình duyệt nó sẽ load
lên. Ví dụ mỗi khi mở IE thì nó tự động hiển thị trang Web Yahoo thì ta gõ vào ô Address
http://yahoo.com , còn chọn Use Blank thì là trang trang không có gì .
Mỗi lần chúng ta xem qua những trang Web nào thì đối tượng History nó đều lưu lại tại máy
Client, cũng như thông tin đăng nhập của user hiện hành… Muốn cho không còn dấu vết
những trang Web ta đã xem qua thì bạn hãy nhấn vào Delete Cookies và Delete Files. Chúng
ta cũng có thể thiết lập khoảng thời gian lưu trữ trang trong đối tượng History bằng cách thay
đổi giá trị trong ô “Days to keep pages in history” . Còn muốn xoá đối tượng này thì nhấn
Clear history.
Trong tab Advance(Hình 2) chúng ta có thể chọn các tùy chọn khác như việc ngăn chặn không
cho tải hình xuống trang web, màu liên kết, cách thể hiện liên kết trên trang… thì ta chọn hoặc
bỏ chọn trong các ô tương ứng. Chúng ta cứ dựa vào ý nghĩa từng mục để quyết định.
- Copy hình ảnh từ trang Web: Click phải vào hình ảnh cần sao chép rồi chọn Save picture
as, hoặc Save background as,…
- Trong trường hợp muốn load về trang Web bao gồm các hiệu ứng, script, hình ảnh… chứa
trên trang thì bạn hãy vào Menu File chọn Save As rồi chọn nơi cần chứa-> Save.
- Hiệu chỉnh trang Web: Bạn có thể click phải chuột vào trang Web muốn hiệu chỉnh sau đó
chọn View source->hiệu chỉnh sau đó vào File chọn Save để lưu lại những gì vừa thay đổi.
Trở lại trình duyệt ta nhấn F5 nó sẽ cập nhật lại nội dung trang(ta cũng có thể vào Menu
View ->Source-> hiệu chỉnh…). Lưu ý trong trường hợp trang Web tải xuống từ
WebServer thì 2 cách hiệu chỉnh này không có ý nghĩa. Muốn hiệu chỉnh ta phải mở tập
tin từ thư mục thật lưu trữ để hiệu chỉnh.
Một số Tag thông dụng
-Tag <Body></Body> chứa nội dung trang.
Các thuộc tính của <Body>
+ bgColor thiết lập màu nền cho trang
<Body bgColor=Color> : Color có thể là tên màu bằng tiếng anh (Red, green, blue, pink,..)
hoặc là bảng màu thập lục phân gồm #xxxxxx trong đó x là các ký tự từ 0->9 và a->f . Như
vậy khi nói đến một thuộc tính nhận giá trị màu thì chúng ta có hai cách viết như trên.
Trang 18
Giáo Trình Thiết Kế Web

+ Text thiết lập màu chữ cho trang (màu toàn cục) thuộc tính này nếu văn bản nàu không có
định dạng màu thì nó lấy giá trị của màu chứa trong Text
<Body bgColor=#336699 Text=#9f66ee>
+ Link màu sắc của một mục siêu liên kết
+ Vlink màu sắc của một mục siêu liên kết đã xem qua
+ Background : dùng để load một hình ảnh làm nền cho trang
<Body Background=”file anh”> trong trường hợp ta muốn hình ảnh làm nền không bi trôi
theo bởi thanh cuộn ta bổ sung thêm thuộc tính bgproperties=fixed.
- Tag <Img> dùng để chèn một hình ảnh vào trang Web
<Img src=”File anh” alt=”Text” width=value height=value border=value>
+Thuộc tính src xác định đường dẫn tập tin cần load. Chúng ta cần chỉ ra đường dẫn tương đối
chứ không dùng đường dẫn tuyệt đối. Ví dụ theo cấu trúc lưu trữ trên thì muốn load h1.gif vào
trang Web ta dùng
<Img src=”../images/h1.gif”> .
+ Thuộc tính alt chứa nội dung văn bản thay thế cho hình ảnh trong trường hợp hình không
load về được, còn trong trường hợp load về được thì nó sẽ xuất hiện trong textbox mỗi khi
người dùng đưa chuột tới hình.
+ Thuộc tính Width, Height dùng để xác định chế độ phóng to thu nhỏ hình ảnh.
- Thẻ <BgSound> dùng để chèn một âm thanh(bài hát) vào trangWeb. Am thanh này sẽ khởi
động mỗi khi người sử dụng mở lên trang Web.
<BgSound src=”filenhac” Loop=value>
+ Src chứa file nhạc, file này có phần mở rộng .mp3 , mdi, …
+ Loop xác định chế độ lập đi lập lại của bài hát nếu value< 0 thì lập vô hạn , value=n thì
lập lại n lần rồi tự động tắt.
- Thẻ <Marquee></Marquee> dùng để điểu khiển đối tượng chạy một cách tự động trên trang
Web
<Marquee >Object</Marquee>
Các thuộc tính Marquee : direction =up, down , left , right dùng để điều khiển hướng chạy.
Nếu ta thiết lập thuộc tính behavior=alternate thì đối tượng chạy từ lề này rồi chạy ngược lại lề
kia của trang.
Ví dụ:
<Marquee direction=up>Đối tượng chạy lên </Marquee>
- Thẻ chú thích: những gì viết trong thẻ này trình duyệt sẽ không thấy và không hiển thị trong
trang Web theo cú pháp sau:
<!—Lời chú thích cho chương trình -->

Trang 19
Giáo Trình Thiết Kế Web

CHƯƠNG 2: SIÊU LIÊN KẾT

2.1 Giới thiệu siêu liên kết

Khả năng chính của HTML là hỗ trợ các siêu liên kết. Một siêu liên kết hay nói ngắn gọn là
một liên kết, là sự nối kết với một tài liệu hoặc file khác (đồ hoạ, âm thanh, video) hoặc ngay
cả đến một phần khác của cùng một tài liệu. Khi người dùng nhấp vào siêu liên kết, người đó
được dẫn đến URL mà bạn đã xác định trong liên kết.
Bạn có thể đặt liên kết đến:
 Một phần khác của cùng một tài liệu.
 Một tài liệu khác
 Một phần khác của một tài liệu khác
 Các file khác - ảnh, âm thanh, trích đoạn video
 Một vị trí hoặc máy chủ khác

2.2 Các loại liên kết

Các liên kết được tạo ra có thể là liên kết trong hoặc liên kết ngoài:
 Liên kết trong là các liên kết với các phần trong cùng một tài liệu hoặc cùng một web site.
 Liên kết ngoài là các liên kết với các trang trên web site khác hoặc máy chủ khác.

2.3 Tạo siêu liên kết

Để tạo siêu liên kết, bạn phải xác định hai thành phần:
1. Địa chỉ đầy đủ hoặc URL của file được nối kết.
2. Điểm nóng sẽ cung cấp liên kết. Điểm nóng có thể là một dòng của văn bản hoặc thậm
chí một ảnh.
Khi người dùng nhấp vào điểm nóng, trình duyệt đọc địa chỉ được xác định trong URL và
“nhảy” đến vị trí mới.
Địa chỉ
Mỗi nguồn trên web có duy nhất một địa chỉ. Ví dụ, 207.46.130.149 là địa chỉ của Microsoft
web site. Giờ đây, nhớ các con số này rất khó và dễ nhầm lẫn. Vì vậy, người ta sử dụng các
Uniform Resource Locator (URL). URL là một chuỗi cung cấp địa chỉ Internet của một web
site hoặc nguồn trên World Wide Web. Định dạng đặc trưng là:
www.nameofsite.typeofsite.countrycode
Ví dụ, 207.46.130.149 có thể được biểu diễn trong URL là www.microsoft.com

Trang 20
Giáo Trình Thiết Kế Web

URL cũng nhận biết giao thức mà site hoặc nguồn được truy cập. Dạng URL thông thường
nhất là “http”, nó cung cấp cho Internet địa chỉ của một trang web. Một vài dạng URL khác là
“gopher”, cung cấp địa chỉ Internet của một thư mục Gopher, và “ftp”, cung cấp vị trí mạng
của một nguồn FTP.
URL có thể chỉ đến một trang cụ thể trong một web site. Ví dụ, www.microsoft.com/ms.htm
sẽ dẫn bạn đến trang chủ của Microsoft.
URL cũng có thể đề cập một vị trí trong một nguồn. Ví dụ, bạn có thể tạo một liên kết với một
đề tài trong cùng một tài liệu. Trong trường hợp đó, định danh phân mảnh được sử dụng ở
cuối URL. Định dạng là:
Protocol:nameofsite / main document#fragment identifier
Có hai dạng URL:
 URL tuyệt đối – là địa chỉ Internet đầy đủ của một trang hoặc file, bao gồm giao thức, vị
trí mạng, đường dẫn tuỳ chọn và tên file. Ví dụ, http:// www.microsoft.com/ms.htm là một
URL tuyệt đối.
 URL tương đối - là một URL với một hoặc nhiều phần bị thiếu. Trình duyệt lấy thông tin
bị mất từ trang chứa URL. Ví dụ, nếu giao thức bị thiếu, thì trình duyệt sẽ sử dụng giao
thức của trang hiện thời.
Bookmark
Thẻ <A> được sử dụng để xác định văn bản hoặc ảnh được xem như là siêu liên kết trong tài
liệu HTML. Tham số HREF (tham chiếu siêu văn bản) được sử dụng để chỉ địa chỉ hoặc URL
của tài liệu hoặc file được liên kết. Cú pháp là:
<A HREF= “URL">Hypertext</A>
Cú pháp của HREF là:
<A HREF = “protocol://host.domain:port/path/filename”>Hypertext</A>
 Giao thức – Đây là một dạng giao thức. Một số giao thức thường dùng:
 http – giao thức truyền siêu văn bản
 telnet - mở một phần telnet
 gopher – tìm một file
 ftp – giao thức truyền file
 mailto - gửi e-mail
 Host.domain – Đây là địa chỉ Internet của máy chủ.
 Cổng – Đây là số cổng của máy chủ đích.
 Siêu văn bản – Đây là văn bản hoặc ảnh mà người dùng phải nhấp vào để kích hoạt
liên kết.
Liên kết với các tài liệu khác
Giả sử có hai tài liệu HTML trên đĩa cứng cục bộ, Doc1.htm và Doc2.htm. Để tạo một liên
kết từ Doc1.htm đến Doc2.htm. Trang doc. Htm như sau:
Trang 21
Giáo Trình Thiết Kế Web

<HTML>
<HEAD>
<TITLE> Using links</TITLE>
</HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING
LINKS</FONT><CENTER></H1>
<BR>
<BR>
<P>
Đoạn dưới đây đề cập đến việc tạo liên kết với các tài liệu.
<A HREF = “Doc2.htm”>Click here to view document 2</A>
</BODY>
</HTML>
Khi người dùng có thể “nhảy” đến một tài liệu khác, bạn có thể cung cấp cách để trở về trang
chủ hoặc điều hướng đến một file khác.
<HTML>
<HEAD>
<TITLE> Document 2</TITLE>
</HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING
LINKS</FONT><CENTER></H1>
<BR>
<BR>
<P>
Đây là tài liệu 2. Trang này sẽ hiển thị khi bạn nhấp vào siêu liên kết trong tài liệu 1.
<BR>
<BR>
<A HREF= “Doc1.htm”>Back Home</A>
</BODY>
</HTML>

Trang 22
Giáo Trình Thiết Kế Web

Nếu để ý, bạn sẽ thấy rằng các liên kết được gạch chân. Trình duyệt làm việc đó cho bạn. Nó
cũng sẽ đổi hình dáng con trỏ khi người dùng di chuyển chuột qua liên kết.
Ở ví dụ trên, các file nằm trong cùng một thư mục và vì vậy chỉ ra tên file trong thông số
HREF là đủ. Tuy nhiên, các liên kết đến các file trong các thư mục khác cũng có thể được
cung cấp. Cần được xác định tên đường dẫn tuyệt đối và tương đối .
 Tên đường dẫn tuyệt đối chỉ đường dẫn đầy đủ từ file đến thư mục gốc. Ví dụ, C:\
mydirectory\html examples\Doc2.htm.
 Tên đường dẫn tương đối chỉ vị trí của file liên quan đến vị trí của file hiện thời. Ví dụ,
nếu thư mục hiện thời là mydirectory, thì tên đường dẫn sẽ là <A HREF= “…\
Doc3.htm”>Next page</A>
<HTML>
<HEAD>
<TITLE> Document 2</TITLE>
</HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING
LINKS</FONT><CENTER></H1>
<BR>
<BR>
<P>
Đây là tài liệu 2. Trang này sẽ hiển thị khi bạn nhấp vào siêu liên kết trong tài liệu 1.
<BR>
<BR>
<A HREF= “C:\Doc1.htm”>Back Home</A>
<BR>
<BR>
<A HREF= “..\Doc3.htm”>Next page</A>
</BODY>
</HTML>
Vì vậy, nếu bạn muốn liên kết với các tài liệu không có liên quan với nhau, thì tên đường dẫn
tuyệt đối sẽ phục vụ cho mục đích này. Tuy nhiên, nếu bạn có một nhóm tài liệu có liên quan
với nhau, chẳng hạn như trình trợ giáo trong HTML, bạn có thể sử dụng tên đường dẫn tương
đối đối với các tài liệu trong nhóm và tên đường dẫn tuyệt đối đối với các tài liệu không liên
quan trực tiếp đến đề tài. Người dùng có thể cài đặt trình trợ giáo này trong thư mục mà
người đó tự chọn và nó sẽ vẫn hoạt động.

Trang 23
Giáo Trình Thiết Kế Web

Liên kết với các phần của cùng một tài liệu
Bạn cũng có thể sử dụng thẻ neo cho phép người dùng “nhảy” đến các phần khác nhau của
một tài liệu. Ví dụ, bạn có thể hiển thị nội dung của trang web như một loạt các liên kết. Khi
người dùng nhấp vào một đề tài nào đó, các chi tiết nằm trong một phần khác của tài liệu sẽ
được hiển thị.
Loại neo này được gọi là một neo được đặt tên vì thuộc tính HTML NAME được sử dụng để
tạo các liên kết này.
<A NAME= “marker”>Topic name</A>
Bạn không phải sử dụng bất kỳ văn bản nào để đánh dấu điểm neo.
Để thực hiện chuyển giao, hãy sử dụng vạch dấu trong tham số HREF.
<A HREF= “#marker”>Topic name</A>
# được hiển thị trước tên của siêu liên kết để báo với trình duyệt rằng liên kết là một điểm
được đặt tên trong một tài liệu. Vì vậy, nếu không có tài liệu nào nằm trước biểu tượng # thì
trình duyệt biết rằng liên kết nằm trong cùng tài liệu.
<HTML>
<HEAD>
<TITLE> Using htm links</TITLE>
</HEAD>
<BODY>
<A HREF = “#Internet”>Internet</A>
<BR>
<BR>
<A HREF = “#HTML”>Introduction to HTML</A>
<BR>
<BR>
<A HREF = “#Consistency”>Unity and Variety</A>
<BR>
<BR>
<A name = “Internet”>Internet</A>
<BR>
<P>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính được liên kết với các mạng
khác, nối các nước và ngày nay là toàn cầu. Giao thức truyền TCP/IP cung cấp liên kết với tất
cả các máy tính trên thế giới.

Trang 24
Giáo Trình Thiết Kế Web

</P>
<A name = “HTML”>Introduction to HTML</A>
<BR>
<P>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng để tạo và nhận ra tài
liệu. Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML),
ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML. SGML là một phương pháp
trình bày các ngôn ngữ định dạng tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo
tài liệu HTML. Các hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong trình
duyệt.
</P>
<A name = “Consistency”>Unity and Variety</A>
<BR>
<P>
Nguyên tắc cơ bản là thống nhất và đa dạng. Nghĩa là, mọi thứ nên phù hợp với nhau như
trong một chỉnh thể, nhưng đồng thời phải đa dạng để tạo sự thú vị. Tính nhất quán tạo ra và
củng cố tính đặc trưng của một site. Màu, font, trình bày cột và các phần tử thiết kế khác nên
nhất quán trong các phần của site. Bạn sẽ không muốn sau một hồi người đọc thấy lúng túng
về site mà họ đang đứng.
</P>
</BODY>
</HTML>
Liên kết với một điểm cụ thể ở một tài liệu khác
Bây giờ, bạn biết cách sử dụng dấu hiệu trong cùng một tài liệu, hãy thử “nhảy” đến một điểm
cụ thể ở một tài liệu khác.
Để “nhảy” đến một điểm cụ thể ở một tài liệu khác, bạn phải xác định tên của tài liệu khi bạn
tạo dấu hiệu. Trước tiên trình duyệt đọc tên tài liệu và mở tài liệu đó. Nó sẽ đọc dấu hiệu và
chuyển đến một điểm cụ thể.
Đây là main.htm
<HTML>
<HEAD>
<TITLE> Main document</TITLE>
</HEAD>
<BODY>
<A HREF = “C:\Doc1.htm#Internet”>Internet</A>
<BR>
Trang 25
Giáo Trình Thiết Kế Web

<BR>
<A HREF = “C:\Doc1.htm#HTML”>Introduction to HTML</A>
<BR>
<BR>
<A HREF = “C:\Doc1.htm#Consistency”>Unity and Variety</A>
</BODY>
</HTML>
Đây là Doc1.htm
<HTML>
<HEAD>
<TITLE>Using Links</TITLE>
</HEAD>
<BODY>
<A name = “Internet”>Internet</A>
<BR>
<P>
Internet là một mạng của các mạng. Nghĩa là, mạng máy tính được liên kết với các mạng
khác, nối với các nước và ngày nay là toàn cầu. Giao thức truyền TCP/IP cung cấp liên kết
với tất cả các máy tính trên thế giới.
</P>
<A name = “HTML”>Introduction to HTML</A>
<BR>
<P>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng để tạo và nhận ra tài
liệu. Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML),
ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML. SGML là một phương pháp
trình bày các ngôn ngữ định dạng tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo
tài liệu HTML. Các hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong trình
duyệt.
</P>
<A name = “Consistency”>Unity and Variety</A>
<BR>
<P>

Trang 26
Giáo Trình Thiết Kế Web

Nguyên tắc cơ bản là thống nhất và đa dạng. Nghĩa là, mọi thứ nên phù hợp với nhau như
trong một chỉnh thể, nhưng đồng thời phải đa dạng để tạo sự thú vị. Tính nhất quán tạo ra và
củng cố tính đặc trưng của một site. Màu, font, trình bày cột và các phần tử thiết kế khác nên
nhất quán trong các phần của site. Bạn sẽ không muốn sau một hồi người đọc thấy lúng túng
về site mà họ đang đứng.
</P>
</BODY>
</HTML>
Sử dụng e-mail
Nếu bạn muốn người dùng gửi e-mail cho bạn, bạn có thể đưa một đặc tính vào trong trang
web cho phép họ gửi e-mail từ trình duyệt. Tất cả những gì bạn cần làm là chèn giá trị mailto
vào thẻ liên kết.
<A HREF= ‘mailto:[email protected]”>
Nếu bạn muốn đặt liên kết e-mail ở cuối trang, hãy sử dụng thẻ <ADDRESS> để siêu liên kết
được hiển thị cuối trang Web.
<HTML>
<HEAD>
<TITLE> Main document</TITLE>
</HEAD>
<BODY>
<A HREF = “c:\Doc1.htm#Internet”>Internet</A>
<BR>
<BR>
<A HREF = “c:\Doc1.htm#HTML”>Introduction to HTML</A>
<BR>
<BR>
<A HREF = “c:\Doc1.htm#Consistency”>Unity and Variety</A>
<BR>
<BR>
<BR>
<ADDRESS>
<A HREF= mailto:[email protected]>Send your queries to John Greene</A>
</ADDRESS>
</BODY>
</HTML>
Trang 27
Giáo Trình Thiết Kế Web

Trang 28
Giáo Trình Thiết Kế Web

CHƯƠNG 3 : DANH SÁCH

3.1 Danh sách không có thứ tự:

hiện ra danh sách không có số thứ tự xuất hiện kèm theo
Cấu trúc của danh sách không có thứ tự:
<ul>
<li>
<li>
……
</ul>
Trình duyệt tự động đặt một dấu phía trước mỗi mục của danh sách
Ta có thể thay đổi dấu trước mỗi mục danh sách bằng cách thêm thuộc tính type vào tag :<ul>
để ảnh hưởng đến tất cả các danh sách
<li> để ảnh hưởng một mục nhất định
type =circle
type=square
type= disc
Thuộc tính Thẻ Ví dụ
Bulleted <UL> và <LI> <HTML>
<HEAD>
<TITLE>Learning
HTML</TITLE>
<BODY>
<UL>
<LI>Monday
<UL>
<LI>Introduction to HTML
<LI>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting Images
</UL>
<LI>Wednesday
<LI>Thursday

Trang 29
Giáo Trình Thiết Kế Web

<LI>Friday
</UL>
</BODY>
</HTML>
Các bullet được <LI TYPE = <HTML>
tuỳ chỉnh SQUARE> <HEAD>
Các bullet vuông <TITLE>Learning
<LI TYPE = DISC> HTML</TITLE>
Các bullet hình cầu <BODY>
<LI TYPE = CIRCLE> <UL>
Các bullet hình tròn <LI>Monday
<UL>
<LI>Monday
</UL>
<LI TYPE =
DISC>Introduction to HTML
<LI TYPE =
DISC>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI TYPE =
SQUARE>Creating Tables
<LI TYPE =
SQUARE>Inserting Images
</UL>
<LI>Wednesday
<UL>
<LI TYPE =
CIRCLE> Creating Forms
<LI TYPE =
CIRCLE>Working with
Frames
</UL>
Trang 30
Giáo Trình Thiết Kế Web

<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>

3.2 Danh sách có thứ tự:

có số thứ tự xuất hiện các phần tử kèm theo
Cấu trúc của danh sách không có thứ tự:
<ol>
<li>
<li>
……
</ol>

c. Danh sách lồng nhau(linh động đổi ví dụ như danh mục các sản phẩm)
ví dụ1: danh sách không thứ tự lồng nhau
<html>
<body>
<ul style="font-family=vni-times">
<li>Phần tử đầu tiên
<li>Phần tử thứ hai
<ul>
<li>Phần tử con1 của phần tử thứ nhất
<ul>
<li>Phần tử con1 của phần tử con thứ nhất
<li> Phần tử con2 của phần tử con thứ nhất
</ul>
<li> Phần tử con2 của phần tử thứ nhất
<li> Phần tử con3 của phần tử thứ nhất
</ul>
<li> Phần tử thứ ba
</ul>
</body>
</html>
Ví dụ 2: danh sách có thứ tự và không thứ tự lồng nhau
<ol >
<li><font face=vni-times >Dưa</font>
<li><font face=vni-times >Cà</font>
<ul>
<li><font face=vni-times >Cà pháo</font>
<ol>
Trang 31
Giáo Trình Thiết Kế Web

<li><font face=vni-times >Cà pháo loại 1</font>

<li><font face=vni-times >Cà pháo loại 2</font>
<li><font face=vni-times >Cà pháo loại 3</font>
</ol>
<li><font face=vni-times >Cà chua</font>
<li><font face=vni-times >Cà tím</font>
</ul>
<li><font face=vni-times >Mắm</font>
<li><font face=vni-times >Muối</font>
</ol>

Đánh Thứ Tự Cho Danh Sách Có Thứ Tự

Ta có thể thay đổi cách đánh số thứ tự trong danh sách có thứ tự như sau:
Thêm vào tag <ol> thuộc tính type
<ol type=x start=y>
Bạn có thể đặt thuộc tính để xác định hệ thống số được tạo ra cho các mục danh sách.
Thuộc tính Thẻ
Upper Roman <LI TYPE = I>
Lower Roman <LI TYPE = i>
Upper case <LI TYPE = A>
Lower case <LI TYPE = a>
bắt đầu vớib số lớn hơn “1” <OL START = n>
Thuộc tính START xác định số bắt đầu của danh sách.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<OL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = A>Creating Tables
<LI TYPE = A>Inserting Images
Trang 32
Giáo Trình Thiết Kế Web

</OL>
<LI>Wednesday
<OL START = 5>
<LI >Creating Forms
<LI >Working with Frames
</OL>
<LI>Thursday
<LI>Friday
</OL>
</BODY>
</HTML>

3.3 Danh Sách Mô Tả

<dl>
<dt>
<dd>
<dt>
<dd>
</dl>
Tag <dl>……</dl> : chỉ danh sách mô tả
Tag <dt>: nơi đặt tiêu đề mô tả
Tag <dd>: nơi đặt phần mô tả
Ví dụ
<dl>
<dt>Tieu de mieu ta1
<dd>Mieu ta 1
<dt>Tieu de mieu ta2
<dd>Mieu ta 2
:
:
<dt> Tieu de mieu taN
<dd>Mieu ta N
</dl>

Bạn có thể lồng các danh sách được sắp xếp như trong danh sách không dduwocj sắp xếp. Bạn có thể
lồng danh sách được sắp xếp trong danh sách không được sắp xếp và ngược lại.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
Trang 33
Giáo Trình Thiết Kế Web

<UL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = A>Creating Tables
<LI TYPE = A>Inserting Images
</OL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>

3.4 Danh sách định nghĩa

Danh sách định nghĩa được sử dụng để tạo một danh sách các thuật ngữ và định nghĩa của các
thuật ngữ đó. Danh sách định nghĩa nằm trong thẻ <DL>…</DL>. Thẻ <DT> được sử dụng
để chỉ thuật ngữ, còn thẻ <DD> chỉ định nghĩa.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<DL>
<DT>Sunday
<DD> The first day of the week
<DT>HTML
<DD>Hypertext Markup Language
<DT>Internet
<DD> A netưork of networks
Trang 34
Giáo Trình Thiết Kế Web

<DT>TCP / IP
<DD>Transmission Điều khiển Protocol / Internet Protocol
</DL>
</BODY>
</HTML>

CH Ư ƠNG 4 : BẢNG VÀ HÌNH ẢNH

4.1 Bảng
Bảng(Tabale) là cách thức phân ô,vùng(Cell) trên trang Web. Nó được cấu tạo bởi những dòng
và các cột. Mỗi ô trong bảng có thể chứa bất kỳ dữ liệu nào cho trang Web.
Tag <Table></Table> dùng để chứa các thành phần cần thiết để tạo ra bảng. Giữa cặp tag
<Table></Table> chúng ta dùng tag <Tr></Tr> để tạo ra dòng, sau đó dùng tag <Td></Td> để
tạo ra cột, giao điểm của các dòng và cột gọi là Cell. Những gì chứa bên trong cặp tag <Td>
</Td> gọi là dữ liệu.
Cấu trúc cơ bản của bảng được trình bày như sau:
<table border="1" >
<tr>
<td >11 </td>
<td >12</td>
<td >13</td>
</tr>
<tr> 11 12 13
<td > 21</td> 21 22 23
<td >22</td> 31 32 33
<td >23</td>
</tr>
<tr>
<td >31</td>
<td > 32</td>
<td >33</td>
</tr>
</table>
Tag table chỉ thị một bảng
Tag Table Row là <tr>……</tr> xác định một hàng của bảng
Tag Table data là <td>……</td> nằm trong tag Table Row, và là một phần tử của tag này
Trong mỗi tag <td>……</td> có thể có thể chứa bất kỳ lọai tag nào của html -định kiểu, tiêu
đề, liên kết siêu văn bản, hình ảnh……
Ngòai ra bạn còn có thể sử dụng một vài thuộc tính để điều khiển sự chỉnh lề của các thông tin
trong phần tử đó.
Tạo tựa đề cho bảng:
Tag <Caption></Caption> dùng để tạo tiêu đề cho bảng gồm có thuộc tính Align để định vị tiêu
đề nằm trên hay ở dưới bảng (Align=Top | Bottom)
<Table>
<Caption align=top> Tiêu đề cho bảng</Caption>
Trang 35
Giáo Trình Thiết Kế Web

<Tr>
<Td>Data</Td>
….
</Tr>
….
</Table>
Các thuộc tính bảng
1. Xác lập chiều cao và chiều rộng cho bảng
Xác lập chiều cao :<table height=x|x%>….</table>
Xác lập chiều cao :<table width=x|x%>…..</table>
2. Chỉnh lề theo chiều ngang
<table align=left>: canh bảng về bên trái
<table align=right>: canh bảng về bên phải
<table align=center>: canh bảng vào giữa
3. Thuộc tính cellspacing và cellpadding
Thuộc tính Cellpadding cho biết khỏang cách giữa khối bên trong cell và vách ngăn-
trị Y càng lớn làm cho các cell càng lớn hơn
Thuộc tính cellspacing cho biết khỏang cách(tính bằng pixel ) của những đường bên
trong bảng để phân chia các cell.
4. Thuộc tính viền nếu có của bảng
Kích cỡ viền: <table border=n >….</table>
n<>0: bảng có đường viền
Màu của viền : <table border=1 bordercolor=#mau >….</table>
5. Nền của bảng
Ta có thể thêm màu cho nền hoặc thêm hình ảnh cho nền
Thêm màu cho nền: <table bgcolor=#mau >……</table>
Dùng hình ảnh làm nền cho bảng: <table background=”file ảnh”>……</table>

Thuộc tính các cột:<td></td>,<th></th>

a. Các thuộc tính canh chỉnh theo chiều ngang
<td align=left>: sắp xếp tất cả các thành phần về bên trái của cell(đây là thuộc tính
mặc định)
<td align=right>: sắp xếp tất cả các thành phần về bên phải của cell
<td align=right>: sắp xếp tất cả các thành phần vào giữa cell
b. các thuộc tính canh chỉnh theo chiều dọc
<td valign=left>: sắp xếp tất cả các thành phần từ đỉnh cell xuống dưới định)
<td valign=bottom>: sắp xếp tất cả các thành phần từ dưới cell lên trên
<td valign=middle>: sắp xếp tất cả các thành phần ở giữa cell(đây là thuộc tính
mặc định)
Ta có thể kết hợp các thuộc tính này lại với nhau:
<td align=left valign=bottom>
c. Mở rộng hàng cột trong bảng
Dùng để gom hai hàng(cột) thành một
<td colspan=n>: gom n cột lại với nhau
<td rowspan=n>: gom n hàng lại với nhau

Ví dụ 1:(mergcell trong frontpage)

Trang 36
Giáo Trình Thiết Kế Web

<table border="1" >

<tr>
<td > 11</td>
<td align= center colspan="2"> 12-13</td>
<!—cell thứ hai được mở rộng ra thành hai cột-->
</tr>
<tr>
<td > 21</td>
<td >22</td> 12-13
11
<td >2 3</td>
21 22 23
</tr>
31 32 33
<tr>
<td > 31</td>
<td >32</td>
<td >33</td>
</tr>
</table>
Ví duï 2: môû roäng haøng
<table border="1" >
<tr>
<td width="33%">11</td>
<td width="33%">12</td>
<td width="34%">13</td>
</tr>
<tr>
<td width="33%" rowspan="2">21-31</td> 11 12 13
<td width="33%">22</td> 22 23
<td width="34%">23</td> 21-31 32 33
</tr>

<tr>
<td width="33%">32</td>
<td width="34%">33</td>
</tr>
</table>

d. Xác lập chiều cao chiều rộng cho cell

Tương tự như cho bảng
e. Thêm màu nền, ảnh nền, màu đường viền cho cell
<td bordercolor=mau bgcolor=mau background=filehinh>

Ví dụ: Tạo một bảng dữ liệu

Bước 1:Giả sử ta có một file html như sau:

<html>
<head>
<title>Volumes of some well</title>
</head>

<body>
<table >
<tr>
<th >Eruption</th>
Trang 37
Giáo Trình Thiết Kế Web

<th >Date</th>
<th >volum in km³</font></th>
</tr>
<tr>
<td >Paricutin,Mexico</td>
<td align="center">1943</td>
<td align="center">1.3</td>
</tr>
<tr>
<td >Mt . Vesuvius</td>
<td align="center">79 A.D</td>
<td align="center">3</td>
</tr>
<tr>
<td >Mount St. Helens<br> Washington</td>
<td align="center">1980</td>
<td align="center">4</td>
</tr>
<tr>
<td >Krakatoa, Indonesia</td>
<td align="center">1883</td>
<td align="center">18</td>
</tr>
<tr>
<td >Long Valley, Valifornia</td>
<td align="center">pre-historic</td>
<td align="center">450&amp;&lt;700</td>
</tr>
<tr>
<td >Yellowstone, Wyoming</td>
<td align="center">pre-historic</td>
<td align="center">400</td>
</tr>
</table>
</body>
</html>
Tag Table header <th>……</th> cho kết quả giống như tag <td>……</td> ngọai trừ là mọi
văn bản trong đó đều được in đậm và tất cả các thành phần của nó đều tự động được canh giữa.
Ta sửa file lại như sau:
Bước 2:Thêm thuộc tính cho table
<table border=X cellpadding=Y cellspacing=X>
Trong đó:
X: chiều rộng(tính bằng pixel) đường viền bên ngòai của bảng
Ta sửa tag <table> thành:
<table border="3" cellpadding="3" cellspacing="4" >
Bước 3:Thêm tiêu đề cho bảng
Sử dụng tag <caption> để thêm tiêu đề cho bảng như sau:
<table border="3" cellpadding="3" cellspacing="4" >
<caption>
Trang 38
Giáo Trình Thiết Kế Web

<b><font size=+1>
Volumes of some well-known Volcanic Eruptions</font></b></caption>
Chú ý : tag <caption>……</caption>: phải luôn được nằm trong tag <table>……</table>
Bước 4 Tô màu cho đọan văn bản nằm trong tag <th>……</th>
<tr>
<th ><font color=#EE8844>Eruption</font></th>
<th ><font color=#EE8844>Date</font></th>
<th ><font color=#EE8844>volum in km³</font></th>
</tr>
Bước 5: Di chuyển bảng vào giữa trang
Dùng tag <center>……</center> bao quanh tag <table>
Bước 6: Gom nhó
Gom nhóm các núi lửa phun trong lịch sử(4 hàng đầu tiên) và các núi lửa thời tiền sử(hai
dòng cuối) ta làm như sau:
Thêm một phần tử rổng bằng cách thêm tag <th>……</th> vào hàng đầu tiên
<tr>
<th>…..</th>
<th ><font color=#EE8844>Eruption</font></th>
<th ><font color=#EE8844>Date</font></th>
<th ><font color=#EE8844>volum in km³</font></th>
</tr>
Đến hàng tiếp theo thêm phần tử đầu tiên và mở rộng ra làm 4 hàng:
<tr>
<td rowspan=4>
<font color=#ee8844>
<i>eruption<br>
observed<br>
by human</i>
</font>
</td>
<td >Paricutin,Mexico</td>
<td align="center">1943</td>
<td align="center">1.3</td>
</tr
Trong hàng thứ 5 thêm một phần tử mà nó được mở rộng trong hai hàng:
<tr>
<td rowspan=2>
<font color=#ee8844>
<i>inferred<br>
by study<br>
of deposits</i></font>
</td>
<td >Long Valley, Valifornia</td>
<td align="center">pre-historic</td>
<td align="center">450<700</td>
</tr>
Khi người dùng cuộn bảng, phần đầu và cuối không cuộn theo phần thân bảng. Thông tin ở
phần đầu và cuối có thể được in trên mỗi trang chứa dữ liệu trong bảng.
Trang 39
Giáo Trình Thiết Kế Web

 Phần tử THEAD được sử dụng để chỉ phần đầu của bảng.

 Phần tử TBODY được sử dụng để chỉ phần thân bảng. Nếu bảng chỉ chứa phần thân,
không chứa phần đầu và cuối thì bạn có thể bỏ thẻ khởi động TBODY.
 Phần tử TFOOD được sử dụng để chỉ phần cuối của bảng.
Các phần THEAD, TFOOD, và TBODY phải có số cột bằng nhau.
<TABLE>
<THEAD>
<TR> …header information…
<TBODY>
<TR> … first row of block one data…
<TR> … second row of block one data…
<TBODY>
<TR> …. first row of block two data ….
<TR> … second row of block two data…
<TFOOD>
<TR> … footer information …
</TABLE>
An example
<HTML>
<HEAD>
<TITLE>Using Headers and Footers</TITLE>
</HEAD>
<TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2
CELLPADDING = 6>
<CAPTION>Creating a table</CAPTION>
<THEAD>
<TR>
<TH></TH>
<TH></TH>
<TH>NUTS</TH>
<TH>BOLTS</TH>
<TH>Hammers</TH>

Trang 40
Giáo Trình Thiết Kế Web

</THEAD>
<TBODY>
<TR>
<TD ROWSPAN = 3>Quarter 1</TD>
<TD>Jan</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>Fed</TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
<TD> March</TD>
<TD>3200</TD>
<TD>1000</TD>
<TD>2400</TD>
</TBODY>
<BODY>
<TR>
<TD ROWSPAN = 3>Quarter 2</TD>
<TD>April</TD>
<TD>300</TD>
<TD>1000</TD>
<TD>2000</TD>
<TR>
<TD>May</TD>
<TD>2010</TD>
<TD>250</TD>
<TD>4000</TD>
<TR>

Trang 41
Giáo Trình Thiết Kế Web

<TD>June</TD>
<TD>1000</TD>
<TD>3600</TD>
<TD>2400</TD>
</TBODY>
<TFOOD>
<TR> My company Limited
</TFOOD>
</TABLE>
</HTML>
Các Bảng Lồng Nhau
Trong trường hợp một ô ta có thể tách ra làm nhiều dòng, nhiều cột thì ta chèn vào trong
ô đó cặp tag <Table> </Table> như thế ta sẽ có các bảng lồng nhau. Trong cặp tag
<Table></Table> này ta thêm các tag <tr></tr>,<td></td> để tạo ra bảng con.
<Table>
<Tr>
<Td>
<Table>
<Tr><Td>Data</Td></Tr>
</Table>
</Td>
……..
</Tr>
………
</Table>
Ví dụ

<html>
<head>
<title>BANG TIN</title>
</head>

Trang 42
Giáo Trình Thiết Kế Web

<body>

<table border="1" width="100%" bordercolor="#000000" height="109">

<tr>
<td width="100%" colspan="2" height="26">
<p align="center"><b><font size="5">BANG TIN</font></b></td>
</tr>
<tr>
<td width="30%" valign="top" height="71">
<table border="1" width="100%" bordercolor="#0000FF">
<tr>
<td width="50%">Data11</td>
<td width="50%">Data12</td>
</tr>
<tr>
<td width="50%">Data21</td>
<td width="50%">Data22</td>
</tr>
<tr>
<td width="50%">Data31</td>
<td width="50%">Data32</td>
</tr>
</table>
</td>
<td width="70%" align="center" height="71"><img border="0" src="../images/h7.jpg" width="136" height="87"></td>
</tr>
</table>

</body>

</html>
Chúng ta cần nhớ là cho dù bảng của chúng ta chỉ có duy nhất 1 ô nhưng chúng ta cũng phải có đủ tag
cặp <Tr></Tr> và <Td></Td>
Ví dụ:
<Table width=100%> Data1
<Tr><Td align=center> Data1</Td></Tr> Data2
<Tr><Td align=center>Data2</Td></Tr>
</Table>
Ví duï
<Table width=100%>
<Tr>
<Td align=center> Data1</Td>
Data1 Data2
<Td align=center>Data2</Td>
</Tr>
</Table>
Tag <Table> là phần tử quan trọng trong quá trình thiết kế Web. Hầu như mọi trang Web đều sử dụng
đến cặp tag này. Dựa vào nó để ta bố trí dữ liệu trên trang

4.2 Hình ảnh

“Một ảnh giá trị bằng một ngàn chữ”. Chắc chắn điều này có thể áp dụng cho một trang web.
Các hình ảnh được chèn vào trong trang Web được gọi là ảnh nội tuyến. Ảnh có thể là các
biểu tượng, bullet, ảnh, logo công ty và nhiều cái khác.

Trang 43
Giáo Trình Thiết Kế Web

Ngày nay, có nhiều định dạng đồ hoạ đang được sử dụng. Tuy nhiên, trên Web có khác đôi
chút. Ba định dạng đồ hoạ thông thường được hiển thị trên hầu hết các trình duyệt là:
 GIF (Graphics Interchange Format) images (GIF)
GIF là định dạng thông thường nhất được sử dụng trong các tài liệu HTML. Các file GIF
được định dạng không phụ thuộc phần nền và hỗ trợ đến 256 màu. Ưu điểm của các file GIF
là khá dễ để chuyển tải, ngay cả các kết nối sử dụng MODEM tốc độ chậm.
Có hai tiêu chuẩn cho các file .gif – 87a và 89a (hỗ trợ trong suốt)
Định dạng GIF xen kẽ
Một file ảnh GIF thông thường hiển thị ảnh một lần một dòng. Mặc dù các ảnh xen kẽ được
hiển thị một lần một dòng, nhưng thứ tự đã có thay đổi.
Ảnh GIF trong suốt
Một điểm có thể trong suốt hoặc mờ. Ảnh GIF trong suốt là ảnh trong đó nền của ảnh cùng
màu với trang Web. Ví dụ, các biểu tượng và bullet có nền trong suốt vì vậy chúng hợp với
màu nền của tài liệu.
 JPEG (Joint Photographic Expert Group) images (.JPEG)
Nén JPEG là một lược đồ nén mất thông tin. Điều này có nghĩa là ảnh sau khi bị nén không
giống như ảnh gốc. Tuy nhiên, trong quá trình phát lại thì ảnh cũng tốt gần như ảnh gốc. Khi
bạn lưu một file với định dạng JPEG, bạn có thể định tỉ lệ nén. Tỉ lệ càng cao thì ảnh càng ít
giống ảnh gốc.
JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực.
Cả các file dạng JPEG (đuôi mở rộng là .jpg) và các dạng GIF đều nén ảnh để bảo đảm tốc độ
chuyển tải qua Internet được nhanh hơn. Ảnh JPEG có thể được nén nhiều hơn nhưng chậm
hơn trong quá trình hiển thị so với ảnh .GIF. Có lẽ đó là lý do tại sao ảnh .GIF phổ biến trong
tài liệu HTML.
 PNG (Portable Network Graphics)
Định dạng cho một file PNG là không bị mất (lossless). Trong nén “lossless”, dữ liệu ảnh
được nén mà không bỏ chi tiết. Các file PNG hỗ trợ ảnh màu thực và dải màu xám. Các file
PNG cũng có thể được nén để chuyển qua mạng.
Khi quyết định định dạng đồ hoạ, chúng ta nên nhớ một vài yếu tố:
 Chất lượng của ảnh – Chất lượng của ảnh có quan trọng trong quá trình hiển thị
không?
 Độ lớn dữ liệu – File càng lớn thì thời gian truyền càng lâu.
 Các yêu cầu hiển thị - Ảnh hỗ trợ trong suốt, hiển thị tuần tự hay xen kẽ.
 Các kỹ thuật nén được phân biệt dựa vào việc chúng có bỏ bớt các chi tiết và màu khỏi
ảnh hay không, nghĩa là kỹ thuật nén “bị mất” hay “không mất”.
3.4. Chèn ảnh
Thẻ IMG được sử dụng để chèn ảnh vào tài liệu HTML.
Trang 44
Giáo Trình Thiết Kế Web

Thẻ IMG
Thẻ IMG được sử dụng để chèn ảnh vào tài liệu HTML. Bạn có thể đặt thẻ IMG tại vị trí ảnh
được hiển thị. Thẻ IMG không có nội dung, nó hiển thị nội dung được ghi trong thuộc tính
src.Cú pháp là:
<IMG SRC = “URL">
trong đó, SRC (nguồn) là thuộc tính và giá trị là URL, chỉ vị trí chính xác của file ảnh.
<HTML>
<HEAD>
<BODY>
<IMG SRC= “C:\windows\clouds.gif”>
</BODY>
</HEAD>
</HTML>
Đôi khi, chỉ hình ảnh không thể nói lên tất cả. Bạn cần phải cung cấp cho người dùng một vài
đầu mối về mục đích của hình ảnh. Bạn có thể canh lề ảnh với văn bản.
Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để chỉnh canh lề của ảnh với văn bản
xung quanh.
<IMG ALIGN=position SRC= “PICTURE.GIF”>
trong đó, vị trí của ảnh có thể là trên, dưới, ở giữa, trái hoặc phải.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<H1><CENTER><FONT SIZE=3 COLOR=FORESTGREEN>
<B>Inserting an Image</B>
</CENTER></FONT></H1>
<HR>
<BODY>
<IMG ALIGN=BOTTOM SRC= “C:\circles.gif”>Aligned at the bottom</P>
<P>
<IMG ALIGN=TOP SRC= “C:\circles.gif”>Aligned at the top</P>
<P>
<IMG ALIGN=MIDDLE SRC= “C:\circles.gif”> Alligned in the middle</P>
</BODY>

Trang 45
Giáo Trình Thiết Kế Web

</HEAD>
</HTML>
Có thể chúng ta sẽ ngạc nhiên khi biết rằng một số trình duyệt không hiển thị các hình ảnh.
Trong trường hợp đó, bạn cần xác định một dòng chú thích thay thế trong tài liệu HTML.
Thông số ALT được sử dụng để chỉ nội dung ảnh của bạn.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B><I>Inserting an Image</I></B>
</FONT></H1>
<HR>
<BODY>
<IMG SRC= “C:\circles.gif” ALT= “Going round in Circles”>
</BODY>
</HEAD>
</HTML>
Nền của trang cũng quan trọng như văn bản. Bạn cần chú ý đến nền. Trong hầu hết các trang
người ta sử dụng nền màu, với mục đích là làm nổi nội dung trang đó. Bạn cũng có thể sử
dụng ảnh để làm nền.
Để làm điều đó, bạn cần sử dụng thuộc tính BACKGROUND của thẻ BODY.
<BODY BACKGROUND= “bgimage.gif”> (chỉ URL hoàn chỉnh của ảnh).
Nếu ảnh nhỏ hơn phạm vi hiển thị của tài liệu, thì ảnh được xếp kề nhau để lấp toàn bộ vùng
hiển thị.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<BODY BACKGROUND= “c:\windows\clouds.gif”>
<P>Using an image in the background.
</BODY>
</HEAD>
</HTML>
 Cuộn

Trang 46
Giáo Trình Thiết Kế Web

Ảnh thường cuộn với văn bản khi người dùng cuộn trang trong trình duyệt. Nếu bạn không
muốn như vậy và thay vì thế tạo ra một hiệu ứng hình mờ, nghĩa là văn bản cuộn nhưng ảnh
vẫn đứng yên, thì những gì bạn cần làm là đặt thuộc tính BGPROPERTIES của thẻ BODY cố
định.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<BODY BACKGROUND= “c:\windows\clouds.gif”>
BGPROPERTIES=FIXED>
<P>Enter a whole lot of text…
…
…
</P>
</BODY>
</HEAD>
</HTML>
 Siêu ảnh
Các ảnh bạn chèn vào tài liệu HTML có thể phục vụ như các siêu liên kết. Những ảnh như thế
được gọi là siêu ảnh. Khi người dùng nhấp vào ảnh, tài liệu hoặc file được ghi trong URL sẽ
hiển thị.
Để làm điều này, bạn cần lồng ảnh trong thẻ neo.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B><I>Inserting an Image</I></B>
</FONT></H1>
<HR>
<BODY>
<A HREF= “c:/Doc1.htm”>
<IMG SRC= “C:\Clouds.gif” border = 0 ALT=”Link to Document1”>
</A>
</BODY>
</HEAD>
Trang 47
Giáo Trình Thiết Kế Web

</HTML>
Bản đồ ảnh
Bạn có thể sử dụng ảnh trong trang Web để tạo bản đồ ảnh. Một bản đồ ảnh có các vùng hoạt
động mà bạn có thể gán các liên kết với chúng. Các vùng này gọi là các “điểm nóng”. Khi
người dùng nhấp vào các “điểm nóng”, thì các liên kết được kích hoạt.
Toạ độ của điểm nóng được xác định bằng cách sử dụng vùng (có thể có hình dáng khác
nhau)Bạn phải xác định hình dạng và toạ độ của vùng nóng.
Hình dạng Mô tả
Default chỉ toàn bộ vùng. Đây là mặc định.
Rect chỉ vùng hình chữ nhật
Circle chỉ vùng hình tròn
Poly chỉ vùng hình đa giác
Toạ độ được xác định dựa vào góc trên và trái của đối tượng.
Toạ độ Phối hợp
Rect Trái-x, trên-y, phải-x, dưới-y
Circle giữa-x, giữa-y, bán kính
Poly x1, y1, x2, y2, …xN, yN
Các loại bản đồ ảnh
Có hai loại bản đồ ảnh:
 Bản đồ ảnhphía máy chủ được chương trình dựa vào máy chủ diễn dịch. Khi người
dùng nhấp vào bản đồ ảnh, trình duyệt gửi toạ độ điểm đến chương trình trên máy chủ.
Chương trình này diễn dịch toạ độ và thực hiện các hành động cần thiết.
 Bản đồ ảnhphía client có thể được trữ trong các file HTML và được chèn vào trong
một tài liệu HTML cùng với các phần tử HTML khác. Khi người dùng nhấp vào “ điểm
nóng” trong một bản đồ ảnhphía client, trình duyệt diễn dịch toạ độ điểm và thực hiện các
hành động cần thiết.
Khi tạo bản đồ ảnh, hãy nhớ các trình duyệt không sử dụng đồ hoạ. Bạn cũng nên cung cấp
các phương pháp điều hướng luân phiên khi sử dụng bản đồ ảnh trong một trang Web.
Tạo bản đồ ảnh phía client
Để tạo một bản đồ ảnh phía client, bạn phải sử dụng các phần tử MAP, AREA và usemap.
Phần tử AREA được sử dụng để tạo vùng “điểm nóng”. Phần tử MAP được dùng để chuyển
các vùng ảnh với các URL tương ứng. Thuộc tính usemap liên kết một phần tử với bản đồ ảnh
của nó.
Để tạo một bản đồ ảnh:
1. Tạo một file ảnh và lưu nó với đuôi là .GIF hoặc .JPEG

Trang 48
Giáo Trình Thiết Kế Web

2. Tạo một tài liệu .htm.

3. Thêm cú pháp sau:
<HTML>
<BODY>
<A HREF = “ ”>
<CENTER>
<IMG SRC=c:/windows/clouds.gif WIDTH=176 HEIGHT=163 BORDER=1 usemap=
“#map1”>
</A>
</center>
<MAP name= “map1”>
<AREA href= “filel.html”
alt= “Contents”
shape= “rect”
cords= “0, 0, 80, 80”>
<AREA href= “file2.html”
alt= “Search"
shape= “rect”
cords= “0, 80, 80, 163”>
<AREA href= “file3.html”
alt= “Back”
shape= “circle”
cords= “163, 175, 60”>
<AREA href= “file4.html”
alt= “Purchase order”
shape= “poly”
coords= “163, 0, 175, 28, 50, 50, 163, 0”>
</MAP>
</BODY>
</HTML>
Thêm âm thanh
Âm thanh là cái người ta muốn nghe. Trang Web tương tác hấp dẫn một phần nhờ thỉnh
thoảng có tiếng bíp bíp khi người dùng tương tác với trang đó. MIDI là định dạng chuẩn của
Trang 49
Giáo Trình Thiết Kế Web

các file âm nhạc được sử dụng trong tài liệu HTML. Các file MIDI trữ các nốt nhạc và các
nhạc cụ cho các bảng tổng phổ nhạc. Nhạc cụ điện tử tạo ra nhiều âm thanh khác nhau trong
card âm thanh mô phỏng âm nhạc. Mặt khác, các file .wav (wave) và .au giữ độ chính xác của
âm thanh.
Nhằm thêm âm thanh vào trang Web của bạn, những gì bạn cần làm là tham chiếu đến file âm
thanh (.wav hoặc .midi) trên hệ thống của bạn.
Ví dụ,
<BGSOUND SRC= “path\sound filename”>
Nếu bạn không xác định đường dẫn thì trình duyệt sẽ tìm file tại nơi có chứa trang Web đó.
Như đã đề cập, âm nhạc MIDI chỉ là âm nhạc tổng hợp. Tuy nhiên, nếu bạn muốn thêm file
nhạc riêng của mình, hãy nói một tiếng hoặc hát một bài nào đó. Khi trang Web được hoàn
trả, có thể bạn cần phải sử dụng file âm thanh kỹ thuật số.
Một file âm thanh kỹ thuật số chứa thông tin để mô phỏng chính xác file âm thanh gốc. Tần
số lấy mẫu âm thanh quyết định chất lượng của file âm thanh. Tần số càng cao thì chất lượng
âm thanh càng tốt. Bất lợi là ở chỗ nó sẽ tăng độ lớn của file. Các file âm thanh kỹ thuật số có
thể được lưu với một trong hai định dạng .au hoặc .wav (wave files).
Định dạng file .wav bắt đầu với Windows. Tỉ lệ nén chậm và độ lớn file lớn. Định dạng
file .au bắt đầu với các máy Unix. Trữ âm thanh kỹ thuật số thì tốt hơn. Nó có tỉ lệ nén cao
hơn so với các file .wav.
<HTML>
<BODY>
<BGSOUND src= “batman.mid”>
<A id= “ImageLink” HREF = “ ”>
<CENTER>
<IMG SRC=c:\win98\clouds.gif WIDTH=176 HEIGHT=163 BORDER=1 usemap=
“#map1”>
</A>
</center>
<MAP name= “map1”>
<AREA href= “filel.html”
alt= “Truy cập Guide”
shape= “rect”
cords= “0, 0, 80, 80”>
<AREA href= “file2.html”
alt= “Search"
shape= “rect”
Trang 50
Giáo Trình Thiết Kế Web

coords= “0, 80, 80, 163”>

<AREA href= “file3.html”
alt= “Back”
shape= “circle”
coords= “163, 175, 60”>
<AREA href= “file4.html”
alt= “Contents”
shape= “poly”
coords= “163, 0, 175, 28, 50, 50, 163, 0”>
</MAP>
</BODY>
</HTML>

Trang 51
Giáo Trình Thiết Kế Web

CH ƯƠNG 5: FRAME

5.1 Khái quát về frame

Khung chia cửa sổ của trình duyệt web thành các vùng riêng biệt, mỗi vùng hiển thị một trang
riêng biệt có thể cuốn được. Mỗi khung là một cửa sổ duy nhất trong cửa sổ chính. Ví dụ, bạn
có thể sử dụng 3 khung trong trang Web. Một khung có biểu ngữ, một khung cho menu điều
hướng và một khung để hiển thị dữ liệu. Mỗi khung có thể được tạo, thay đổi và cuốn độc lập
với nhau.
Một tài liệu HTML chuẩn có phần tiêu đề và thân. Một tài liệu HTML có khung thì có phần
tiêu đề và phần FRAMESET. Phần FRAMESET xác định cách trình bày trong cửa sổ của
người dùng.
chuù yù: Bạn không thể sử dụng phần tử đặt BODY và FRAMESET cùng với nhau.
Trình duyệt nhận phần tử đầu tiên xuất hiện trong tài liệu và lờ đi các phần tử sau.
Nghĩa là, nếu bạn sử dụng phần tử BODY, thì phần tử FAMESET sau đó sẽ bị lờ đi
và ngược lại.
Khung được tạo ra bằng cách sử dụng FRAMESET. Các thuộc tính như sau:
Thuộc tính Mô tả
Rows Xác định cách trình bày khung ngang dưới dạng điểm, phần
trăm và chiều dài tương đối. Giá trị mặc định là 100%, nghĩa là
một dòng.
Cols Xác định cách trình bày khung dọc dưới dạng điểm, phần trăm
và chiều dài tương đối. Giá trị mặc định là 100%. Nó xác định
chỉ một cột.
Phần tử FRAME xác định hình thức và nội dung của một khung đơn với một FRAMESET. Ví
dụ, tài liệu sau tạo ra 2 khung hình chữ nhật bằng nhau và lấp kín cửa sổ chính.
<HTML>
<HEAD><TITLE>Two equal Frames</TITLE>
</HEAD>
<FRAMESET COLS= “50%, *”>
<FRAME SRC= x.htm>
<FRAME SRC=y.htm>
</FRAMSET>
</HTML>
Các thuộc tính của phần tử FRAME bao gồm:
Mô tả
Thuộc tính

Trang 52
Giáo Trình Thiết Kế Web

Name Thuộc tính này gán tên cho khung hiện thời.
Src Thuộc tính này xác định vị trí của tài liệu đầu tiên nằm trong
khung.
Noresite Đây là một thuộc tính logic. Nó quy định cửa sổ khung
không được đổi kích thước.
Scrolling Thuộc tính này xác định các kiểu cuộn cho cửa sổ khung. Các
giá trị có thể:
Auto – Cung cấp cuộn cho cửa sổ khung khi cần thiết. Đây
là giá trị mặc định.
Yes – Luôn cung cấp cho cửa sổ khung các thiết bị cuộn.
No – Đây là các thiết bị không cuộn cho cửa sổ khung.
Frameborder Xác định viền khung. Các giá trị có thể là:
1 – Là giá trị mặc định. Bộ phân cách được vẽ giữa các
khung hiện thời và mỗi khung nối liền.
0 - Giữa khung hiện thời và mỗi khung nối liền không có bộ
phân cách nào. Tuy nhiên, bộ phân cách của các khung nối
liền sẽ được hiển thị nếu được đặt.
Marginwidth Xác định khoảng trống được hiển thị giữa nội dung của
khung và lề phải và trái của khung.
Giá trị phải lớn hơn một điểm.
Marginheight Xác định vị trí được hiển thị giữa nội dung của khung và lề
trên dưới của khung.
Giá trị phải lớn hơn một điểm.
<HTML>
<HEAD><TITLE>SCROLLING Test</TITLE></HEAD>
<FRAMESET ROWS= “*,* ”>
<FRAME SRC= “SCROLL1.HTM” SCROLLING= “no”>
<FRAME SRC= “SCROLL2.HTM” SCROLLING= “yes”>
</FRAMSET>
</HTML>

<HTML>
<HEAD>
<TITLE>Using frames</TITLE>

Trang 53
Giáo Trình Thiết Kế Web

</HEAD>
<FRAMESET cols= “20%, 80%>
<FRAMESET rows= “100, 200”>
<FRAME src= “scroll1.htm” noresize>
<FRAME src= “x.htm”>
</FRAMSET>
<FRAME src= “c:\win98\clouds.gif”>
</FRAMESET>
</HTML>
Mã sau tạo ra 3 cột: cột 2 có độ rộng cố định là 250 điểm, cột 1 chiếm 25% khoảng trống còn
lại và cột 3 chiếm 75% khoảng trống còn lại.
<HTML>
<HEAD>
<TITLE>Using frames</TITLE>
</HEAD>
<FRAMESET cols= “1*, 250, 3* “>
<FRAME src = “x.htm” frameborder = 0>
<FRAME src= “scroll2.htm” >frameborder = 0 marginwidth=25>
<FRAME src= “y.htm”>
</FRAMSET>
</HTML>

5.2 Các khung lồng nhau

Bạn có thể tạo các khung lồng ở bất cứ mức nào.
<HTML>
<HEAD>
<TITLE>Nested Frames</TITLE>
</HEAD>
<FRAMESET cols= “33%, 33%, 34%“>
<FRAME src = “scroll1.htm” >
<FRAME rows= “40%, 50%” >
<FRAME src= “x.htm”>

Trang 54
Giáo Trình Thiết Kế Web

<FRAME src= “y.htm”>

</FRAMESET>
<FRAME src = “c:\win98\clouds.gif”>
</FRAMESET>
</HTML>

5.3 Liên kết với khung

Khi tạo liên kết trong trang web bạn có thể tạo một khung như là mục tiêu của liên kết. Trước
khi bạn tạo liên kết, hãy nhìn qua hướng dẫn mà trình duyệt tuân theo:
 Nếu bạn xác định một khung trong thuộc tính đích của một phần tử, thì tài liệu được
phần tử xác định sẽ được tải vào trong khung khi phần tử hoạt động.
 Nếu thuộc tính target không được đặt, thì thuộc tính target của phần tử BASE sẽ được
sử dụng để xác định khung.
 Nếu cả phần tử và phần tử BASE đều không đề cập đến target, thì tài liệu được tải vào
khung có chứa phần tử.
 Nếu không tìm thấy khung, trình duyệt sẽ tạo một cửa sổ và khung mới và tải tài liệu
vào khung mới đó.
Thuộc tính target được sử dụng để chỉ tên của khung trong đó tài liệu nên được mở.
Khi tạo khung, bạn phải đặt thuộc tính tên. Tên này được sử dụng khi tạo liên kết.
Sau khi bạn thay đổi nội dung của một khung thì định nghĩa frameset ban đầu bị mất đi.
Nếu bạn có nhiều liên kết chỉ cùng một target, bạn có thể đặt một target mặc định trong phần
tử BASE. Sau đó, việc xác định thuộc tính target trong mỗi phần tử sẽ không cần thiết nữa.
Main.htm
<HTML>
<FRAMESET COLS= “40%, 60%,” >
<FRAME SRC = “IMAGES.HTM” NAME= “Images” SCROLLING= “yes” >
<FRAMESET ROWS= “60, * ” >
<FRAME SRC= “LOGO.HTM” NAME= “Logo” SCROLLING= “no”
FRAMEBORDER= “no”>
<FRAME SRC= “IMAGE1.HTM” NAME= “Main”>
</FRAMESET>
</FRAMESET>
</HTML>

Trang 55
Giáo Trình Thiết Kế Web

Images.htm
<HTML>
<BODY>
<BASE TARGET= “Main”>
<A HREF= “IMAGE1.HTM”><IMG SRC= “c:\merlin.gif”></A><P>
<A HREF= “IMAGE2.HTM”><IMG SRC= “c:\circles.gif”></A><P>
<A HREF= “IMAGE3.HTM”><IMG SRC= “c:\happy.bmp”></A><P>
</BODY>
</HTML>
Image1.htm
<HTML>
<H1><I><FONT SIZE =5 COLOR = HOTPINK>I am a Magician<I></H1>
</FONT>
</BODY>
</HTML>
Image2.htm
<HTML>
<H1><I><FONT SIZE =3 COLOR = LIMEGREEN>Going around in circles<I></H1>
</FONT>
</HTML>

Image3.htm
<HTML>
<H1><I><FONT SIZE = 3 COLOR = MAROON>Laughter is the best medicine</I></H1>
</FONT>
</HTML>
Logo.htm
<HTML>
<H1><CENTER><FONT SIZE = 5 COLOR = RED>Welcome to Aptech
International</CENTER></H1>
</FONT>
</HTML>

5.4 Phần tử NOFRAMES

Trang 56
Giáo Trình Thiết Kế Web

Nếu trình duyệt không hỗ trợ khung, với tư cách là người phát triển, bạn nên cung cấp nội
dung thay thế để hiển thị.
Phần tử NOFRAMES được sử dụng để chỉ nội dung thay thế. Nó chỉ hoạt động khi trình
duyệt không hỗ trợ khung.
<HTML>
<FRAMESET COLS= “40%, 60%”>
<FRAME SRC= “IMAGES.HTM” NAME= “Images” SCROLLING= “Yes”>
<FRAMESET ROWS= “60,* “>
<FRAME SRC= “LOGO.HTM” NAME= “Logo” SCROLLING= “no”
FRAMEBORDER= “no”>
<FRAME SRC= “IMAGE1.HTM” NAME= “Main”>
<NOFRAMES>
Khung không được hiển thị. Nhấp vào <A href= “main.htm”> để có một phiên bản không có
khung.</A>
</NOFRAMES>
</FRAMESET>
</FRAMESET>
</HTML>
Khung trong dòng: phần tử IFRAME
Phần tử IFRAME được sử dụng để chỉ khung nổi hoặc khung trong dòng. Bạn có thể tạo,
chèn một khung vào một khối văn bản. Khi trình duyệt không hỗ trợ khung thì các nội dung
nằm trong thẻ IFRAME sẽ bị trả lại. Khung trong dòng không thể thay đổi kích thước. Các
thuộc tính là:
Mô tả
Thuộc tính
Name Gán tên cho khung hiện thời
Width Chỉ độ rộng của khung trong dòng
Height Chỉ chiều cao của khung trong dòng
<HTML>
<P>
Bạn đang học về khung.
<BR>
<BR>
<IFRAME Src= “scroll2.htm” width= “100” height= “150”
scrolling= “auto” frameborder= “1”>

Trang 57
Giáo Trình Thiết Kế Web

[The browser does not support frames or is currently configured not display frames. The <A
href= “scroll1.htm”>related</A>]
</IFRAME>
<BR>
<P><FONT color = hotpink>The above is an inline frame
</HTML>
Không thể thay đổi kích thước khung trong dòng.

Trang 58
Giáo Trình Thiết Kế Web

CHƯƠNG 6 :FORM

6.1 Giới thiệu các FORM(biểu mẫu)

Một biểu mẫu HTML là một phần của tài liệu chứa các phần tử đặc biệt gọi là các điều khiển
(control). Các điều khiển được sử dụng để nhận thông tin vào từ người dùng và cung cấp một
tương tác nào đó. Dữ liệu do người dùng nhập vào có thể có hiệu lực nhờ ngôn ngữ script
phía máy khách và được chuyển đến máy chủ để xử lý thêm.
Sử dụng các FORM
Các biểu mẫu trên World Wide Web khá nhiều và phát triển liên tục. Sau đây là một số cách
sử dụng biểu mẫu thông thường:
 Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để đăng ký cho
người dùng vào một dịch vụ hoặc sự kiện.
 Tập hợp thông tin để mua một mặt hàng nào đó. Ví dụ, nếu bạn muốn mua một quyển
sách thông qua Internet, bạn cần phải điền tên, địa chỉ gửi thư bưu điện, phương thức
thanh toán và các thông tin liên quan khác.
 Thu thập thông tin phản hồi về một Web site. Hầu hết các site cung cấp dịch vụ đều
khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng mối quan hệ với
khách hàng, đây còn là một nguồn thông tin để trao đổi hoặc cải tiến.
 Cung cấp công cụ tìm kiếm cho web site. Các site cung cấp thông tin khác nhau thường
cung cấp cho người dùng một hộp tìm kiếm để cho phép họ định vị thông tin nhanh hơn.
Phần tử FORM
Phần tử <FORM> được sử dụng để tạo vùng trên trang mà sẽ được xem như một biểu mẫu.
Nó chỉ cách trình bày biểu mẫu. Các thuộc tính bao gồm:
Thuộc tính Mô tả
ACCEPT
Thuộc tính này xác định danh sách các kiểu MIME được
máy chủ nhận ra, trong đó có chứa script để xử lý biểu mẫu.
Cú pháp là:ACCEPT = “Internet media type"
ACTION Thuộc tính này xác định vị trí của script sẽ xử lý biểu mẫu
đã hoàn chỉnh và đã được nhận. Cú pháp là ACTION =
“URL”.
METHOD Thuộc tính này xác định phương thức dữ liệu được gửi đến
máy chủ. Nó cũng xác định giao thức được sử dụng khi
khách hàng gửi dữ liệu đến máy chủ. Nếu giá trị là GET thì
trình duyệt sẽ tạo một câu hỏi chứa trang URL, một dấu hỏi
và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ đổi script
của câu hỏi thành kiểu được xác định trong URL để xử lý.
Nếu bạn xác định POST, dữ liệu trên biểu mẫu sẽ được gửi

Trang 59
Giáo Trình Thiết Kế Web

đến script như một khối dữ liệu. Người ta không sử dụng

chuỗi câu hỏi. Cú pháp là : METHOD = (GET POST).
Ví dụ, để đưa một biểu mẫu đến chương trình “xử lý biểu
mẫu” bạn hãy sử dụng phương pháp POST:
<FORM>
action= http://mysite.com/processformmethod= “post”>
…form contents
</FORM>

6.2 Các phần tử nhập của HTML

Khi bạn tạo biểu mẫu, bạn có thể đặt các điều khiển lên biểu mẫu để nhận dữ liệu vào từ
người dùng. Các điều khiển này thường được sử dụng với phần tử <FORM>. Tuy nhiên, bạn
cũng có thể sử dụng chúng ngoài biểu mẫu để tạo các giao diện người dùng.
Phần tử INPUT
Phần tử <INPUT> xác định loại và hình thức của điều khiển được hiển thị trên biểu mẫu. Các
thuộc tính của phần tử là:

Mô tả
Thuộc tính
TYPE
Thuộc tính này chỉ loại phần tử. Bạn có thể chọn TEXT,
PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE,
HIDDEN và BUTTON. Mặc định là TEXT.
NAME Thuộc tính này chỉ tên của điều khiển. Ví dụ, nếu bạn có nhiều
hộp văn bản trên một biểu mẫu, bạn có thể xác định chúng bằng
cách đặt tên – TEXT1, TEXT2, hoặc bất kỳ tên nào mà bạn chọn.
Phạm vi hoạt động của thuộc tính tên nằm trong phần tử FORM.
VALUE Đây là một thuộc tính tuỳ chọn xác định giá trị đầu tiên của điều
khiển. Tuy nhiên, nếu TYPE là RADIO thì bạn bắt buộc phải
xác định một giá trị.

Trang 60
Giáo Trình Thiết Kế Web

SIZE
Thuộc tính này chỉ độ rộng ban đầu của điều khiển. Nếu TYPE là
“text” hoặc “password” thì kích thước được xác định bằng các ký
tự. Đối với các loại nhập khác, độ rộng được xác định bằng điểm.
MAXLENGT
Thuộc tính này được sử dụng để chỉ số ký tự lớn nhất có thể nằm
H
trong phần tử “text” hoặc “password”. Mặc định là không giới
hạn.
CHECKED
Đây là thuộc tính logic chỉ nút đang bật. Thuộc tính này được sử
dụng khi dữ liệu nhập là “radio” hoặc “checkbox”.
SRC
SRC= “URL”. Thuộc tính này được sử dụng khi bạn nhập vào
một ảnh. Thuộc tính xác định vị trí của ảnh.
Các loại dữ liệu nhập
Phần này bàn về các loại phần tử nhập cùng với một số đặc tính và sự kiện thường được sử
dụng.
 Nút bấm
Nút bấm tạo điều khiển bấm.
Tên Mô tả
Name Đặt hoặc truy xuất tên của điều khiển
Size Đặt hoặc truy xuất kích thước của điều khiển
Type Truy xuất loại điều khiển bên trong được biểu trưng bởi <INPUT
type=button>.
value Đặt hoặc truy xuất giá trị của<INPUT type=button>
Cú pháp:
<INPUT TYPE=button VALUE= “click” NAME= “b1”>
 Văn bản
Loại này tạo ra điều khiển nhập văn bản dòng đơn. Thuộc tính SIZE xác định số ký tự có thể
được hiển thị trong phần tử Text. Thuộc tính MAXLENGTH chỉ số ký tự tối đa có thể được
nhập vào phần tử Text.
<INPUT TYPE=text VALUE= “ “ NAME= “textbox” SIZE=20>
Ở đây, phần tử Value hiển thị chuỗi văn bản đầu tiên và truy xuất văn bản được xác định khi
biểu mẫu được nhận.
 Hộp kiểm (Checkbox)
Tạo checkbox. Người dùng có thể chọn hơn một checkbox. Khi chọn phần tử checkbox, cặp
tên / giá trị được nhận với biểu mẫu. Giá trị mặc định của checkbox là bật. Phần tử checkbox
là một phần tử nội tuyến và không cần thẻ kết thúc.
Đặc tính

Trang 61
Giáo Trình Thiết Kế Web

Tên Mô tả
Checked Đặt hoặc truy xuất trạng thái của checkbox.
Name Đặt hoặc truy xuất tên của checkbox.
Size Đặt hoặc truy xuất kích thước của checkbox.
Status Đặt hoặc truy xuất xem checkbox có được chọn hay không.
Type Truy xuất loại điều khiển bên trong được biểu trưng bởi
<INPUT type=checkbox>
value Đặt hoặc truy xuất giá trị của <INPUT type=checkbox>
 Radio
Tạo điều khiển kiểu nút radio. Điều khiển nút radio được sử dụng đối với các tập giá trị loại
trừ lẫn nhau. Các điều khiển nút tuỳ chọn trong nhóm nên có cùng tên. Người dùng chỉ có thể
chọn một chọn lựa vào một thời điểm nào đó. Chỉ có nút tuỳ chọn được chọn trong nhóm mới
tạo nên cặp tên / giá trị trong dữ liệu được nhận. Các nút tuỳ chọn cần một thuộc tính giá trị
hiện.
Các đặc tính
Tên Mô tả
Checked Đặt hoặc truy xuất trạng thái của nút radio.
Name Đặt hoặc truy xuất tên của điều khiển.
Size Đặt hoặc truy xuất kích thước của điều khiển.
Status Đặt hoặc truy xuất xem nút radio có được chọn hay không.
type Truy xuất loại điều khiển bên trong được biểu trưng bởi INPUT
type=radio>.
value Đặt hoặc truy xuất giá trị của <INPUT type=radio>.
Cú pháp:
<INPUT TYPE=radio NAME= “sex” VALUE= “male”>Male
 Submit
Tạo nút submit. Khi người dùng nhấp vào nút Submit, biểu mẫu được nhận vào vị trí được
xác định trong thuộc tính action. Cặp tên / giá trị của nút submit hoạt động được nhận cùng
với biểu mẫu.
Cú pháp:
<INPUT TYPE=submit VALUE= “click” NAME= “b1”.
 Ảnh

Trang 62
Giáo Trình Thiết Kế Web

Tạo nút nhận dạng ảnh. Giá trị của thuộc tính src xác định URL của ảnh được đặt trong nút
này. Khi người dùng nhấp vào điều khiển ảnh, biểu mẫu sẽ được nhận để xử lý. Toạ độ x và y
(được đo bằng điểm) của vị trí nhấp chuột được chuyển đến máy chủ với định dạng sau.
Name.x = valueofx
Name.y = valueofy
Ở đây, tên là tên của điều khiển.
Nếu các script khác nhau được kích hoạt phụ thuộc vào vị trí nhấp chuột, điều này có thể gây
ngậc nhiên cho người dùng của các trình duyệt không hỗ trợ giao diện đồ hoạ. Vì vậy, bạn có
thể sử dụng nhiều nút nhận với các ảnh khác nhau thay vì một nút nhận đồ hoạ đơn lẻ. Nếu
cần trình bày có nhiều tranh ảnh, bạn có thể sử dụng các bản đồ ảnh.
Cú pháp:
<INPUT TYPE= “image” SRC=usamap.gif” NAME= “name”>
 RESET
Tạo nút reset. Khi người dùng nhấp vào nút này, các giá trị của tất cả các điều khiển được tái
thiết lập trở về giá trị ban đầu được xác định trong các thuộc tính giá trị của chúng.
Các phần tử nhập khác
Các phần tử nhập khác có thể được sử dụng trên một biểu mẫu hoặc tạo một giao diện người
dùng. Mỗi phần tử có thể được thay đổi thông qua các đặc tính, phương pháp và sự kiện.
 Phần tử vùng văn bản
Phần tử này tạo điều khiển nhập văn bản nhiều dòng so với hộp văn bản một dòng. Bạn phải
xác định kích thước của vùng văn bản. Bạn cũng xác định số dòng và cột trong vùng văn bản.
Tuy nhiên, bạn phải kết thúc phần tử với thẻ kết thúc </TEXTAREA>
Các Đặc tính
Tên Mô tả
Cols Truy xuất độ rộng của vùng văn bản.
Rows Đặt hoặc truy xuất số hàng ngang trong <TEXTAREA>.
Size Đặt hoặc truy xuất kích thước của điều khiển.
Type Truy xuất loại điều khiển bên trong được biểu trưng bởi
<TEXTAREA>.
Value Đặt hoặc truy xuất giá trị của <TEXTAREA>.
<HTML>
<P>
<TEXTAREA NAME= “text1” COLS=20 ROWS=5> <TEXTAREA>
</HTML>
 Phần tử nút bấm (BUTTON)

Trang 63
Giáo Trình Thiết Kế Web

Tạo điều khiển nút bấm. Khi người dùng nhấp vào nút, biểu mẫu sẽ được nhận để xử lý. Cặp
tên / giá trị của nút được nhận cùng với biểu mẫu.
Đặc tính
Đặc tính Mô tả
Name Gán tên cho nút.
Value Gán giá trị cho nút.
Type Xác định loại nút. Các giá trị có thể là:
Submit - Tạo nút nhận biểu mẫu khi được nhấp vào.
Button - Tạo nút kích hoạt một script khi nó được nhấp vào.
Reset - Tạo nút tái thiết lập biểu mẫu và các giá trị của điều khiển
trên biểu mẫu.
Một nút bấm dạng submit giống một phần tử INPUT của loại nút. Sự khác nhau là ở chỗ khi
phần tử BUTTON được nhấp vào thì cặp tên / giá trị được nhận cùng với biểu mẫu.
Một nút bấm dạng submit cũng chứa một ảnh và giống một phần tử INPUT có loại là ảnh. Sự
khác nhau là ở chỗ phần tử INPUT được trả lại như là một ảnh “phẳng” trong khi phần tử
BUTTON được hiển thị như một nút chuyển động lên / xuống. Xem mã được đưa ra dưới đây
trên Internet Explorer.
<HTML>
<HEAD>
<TITLE>Using Buttons</TITLE>
</HEAD>
<BODY>
<H2><CENTER><FONT size = 5 color = hotpink face = arial>Personal
Information</FONT></CENTER></H2>
<HR align = center>
<FORM action= “http: // somesite.com” method= “post”>
<P>
First name: <INPUT type= “text” name= “first anme”>
<BR><BR>
Last anme: <INPUT type= “text” name=
<“last name”><BR><BR>
<INPUT type= “radio” name= “sex” value= “Male”> Male
<INPUT type= “radio” name= “sex” value= “Female”>
Female<BR><BR><BR>
Trang 64
Giáo Trình Thiết Kế Web

<BUTTON type= “submit” name= “submit” value= “submit”>

Send<IMG src= “c: /happy.bmp” alt= “wow”></BUTTON>
<BUTTON type= “reset” name= “reset”>
Reset<IMG src= “c: /delete.bmp” alt= “delete”></BUTTON>
</P>
</FORM>
</BODY>
</HTML>
 Chọn lựa
Phần tử SELECT được sử dụng để hiển thị một danh sách các tuỳ chọn cho người dùng. Mỗi
chọn lựa được biểu trưng bởi một phần tử OPTION. Một phần tử SELECT phải chứa ít nhất
một phần tử OPTION. Tuỳ chọn mà người dùng chọn được biểu trưng bởi một khối nổi bật.
Đặc tính
Đặc tính Mô tả
Name Gán tên cho phần tử. Khi biểu mẫu được nhận, thuộc tính tên
được ghép với giá trị được chọn.
Size Nếu có nhiều tuỳ chọn để người dùng cuộn qua, kích thước xác
định số hàng trong danh sách nên được hiển thị cùng một lúc.
Multiple Là thuộc tính logic cho phép người dùng chọn nhiều hơn một tuỳ
chọn.
Mỗi tuỳ chọn trong hộp chọn được hiệu lực hoá để kiểm tra sự mô tả văn bản của nó và xem
thử nó có được chọn hay không.
Mảng Options cung cấp một danh mục vào danh sách các tuỳ chọn trong phần tử nhập
SELECT. Mỗi tuỳ chọn có một đặc tính Selected và Text cho phép chúng ta kiểm tra tuỳ chọn
đó được chọn hay không và truy xuất văn bản của tuỳ chọn. Vì vậy, bạn có thể kiểm tra mỗi
mục nhập trong mảng và làm cho nó có hiệu lực.
<HTML>
<HEAD>
<TITLE>Using selections</TITLE>
</HEAD>
<BODY>
<H3><CENTER><FONT color = blue>Job Description</FONT><CENTER></H3>
<FORM action= “http: // somesite.com / processform”
method = “post”>
<P>
Trang 65
Giáo Trình Thiết Kế Web

Job Description
<SELECT NAME= “Job” SIZE= “1”>
<OPTION VALUE= “1”>Web Developer
<OPTION VALUE= “2”>Web Designer
<OPTION VALUE= “3” SELECTED>Web Administrator
</SELECT>
<BR>
<BR>
Experience
<SELECT NAME= “Experience” SIZE= “3”>
<OPTION VALUE= “1” SELECTED>1 year
<OPTION VALUE= “2”>1 – 3 years
<OPTION VALUE= “3”>None
</SELECTED>
<BR><BR>
<INPUT type= “submit” value= “Send”><INPUT type= “reset”>
</P>
</FORM>
</HTML>
Khi biểu mẫu được nhận, chọn lựa được chọn cho “Job Description” sẽ được ghép với tên
“Job” và chọn lựa được chọn “Experience” sẽ được ghép với tên “Experience”.
Phần tử OPTGROUP được sử dụng để nhóm các chọn lựa thành các cấp bậc. Ví dụ, bảng nội
dung có thể có tên chương. Đề tài và đề tài nhỏ trong chương có thể được nhóm trong tên
chương.
Đặc tính
Đặc tính Mô tả
Selected Đây là thuộc tính logic được sử dụng để chọn trước một tuỳ
chọn.
Value Xác định giá trị được nhận vào cho tuỳ chọn được chọn. Giá trị
này được ghép với tên của phần tử SELECT. Nội dung của
phần tử OPTION là giá trị mặc định.
Lable Xác định văn bản được hiển thị cho tuỳ chọn.
<HTML>
<Head>
Trang 66
Giáo Trình Thiết Kế Web

<Title>Using the Option Group</Title>

</head>
<body>
<FORM action= “htpp: // somesite.com / processform”
method= “post”>
<P>
<SELECT name= “course”>
<OPTGROUP>
<OPTION value= “Internetintro”>Introduction to the Internet
<OPTION value= “Introhtml”>Introduction to HTML
<OPTION value= “Introweb”>Introduction to the web page designing
</OPTGROUP>
<OPTGROUP>
<OPTION value= “vbintro”>Visual Basic – An Introduction
<OPTION value= “vbdev”>Visual Basic – Application Development
</OPTGROUP>
</SELECT>
</FORM>
</body>
</html>
 Phần tử LABEL
Phần tử LABEL được sử dụng để gắn thông tin vào các phần tử điều khiển. Ví dụ, phần tử
TEXT không có nhãn tường minh. Bạn có thể gắn nhãn vào phần tử văn bản khi trang đó
được hiển thị. Bạn phải xác định thuộc tính id của điều khiển đang được kết hợp.
<HTML>
<HEAD>
<TITLE>Using Labels</TITLE>
</HEAD>
<BODY>
<H2><CENTER><FONT size = 5 color = hotpink face = arial>Personal Information
</FONT></CENTER></H2>
<HR align = center>
<FORM action= “http: // somesite.com” method = “post”>

Trang 67
Giáo Trình Thiết Kế Web

<P>
<LABEL for= “firstname”: </LABEL>
<INPUT type= “text” id= “firstname”><BR><BR>
<LABEL for= “lastname”>Last name: </LABEL>
<INPUT type= “text” id= “lastname”><BR><BR>
<INPUT type= “radio” name= “sex” value= “Female”>
Female<BR><BR><BR>
<INPUT type= “submit” name= “submit value= “submit”>
<INPUT type= “reset” name= “reset” name= “reset” value= “reset”>
</P>
</FORM>
</HTML>

6.3 Tạo form

Bạn đã học về phần tử <FORM> và các điều khiển có thể được thêm vào biểu mẫu để nhận
dữ liệu nhập vào từ người dùng. Trong phần này, bạn sẽ tạo một biểu mẫu nhận thông tin về
một người xin việc. Các nút RESET và SUBMIT thực hiện các công việc cần thiết.
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR>
<BR>
<FORM action= “http: // somesite.com / processform” method = “post”>
<P>
<LABEL for= “firstname”>Name: </LABEL>
<INPUT type= “text” id= “firstname”><BR>
<P>Area of Interest
<BR><BR>
<INPUT TYPE=RADIO NAME= “ĐIềU KHIểN 1” VALUE= “0” CHECKED> Web
designer
Trang 68
Giáo Trình Thiết Kế Web

<INPUT TYPE=RADIO NAME= “ĐIềU KHIểN 1” VALUE= “1” > Web Administrator
<INPUT TYPE=RADIO NAME= “ĐIềU KHIểN 1” VALUE= “2” > Web Developer
<P>Experience
<SELECT NAME= “ĐIềU KHIểN2”>
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years </OPTION>
</SELECT>
<BR>
</P>Comments
<BR>
<TEXTAREA NAME= “ĐIềU KHIểN3” COLS= “30” ROWS= “5”> Type your comments
here.</TEXTAREA>
<BR>
<P><INPUT NAME= “ĐIềU KHIểN4” TYPE=CHECKBOX CHECKED>Send
acknowledgement
<BR>
<P><INPUT TYPE= “SUBMIT” VALUE= “OK”>
<INPUT TYPE= “RESET” VALUE= “RESET”>
</FORM>
</BODY>
</HTML>
Điều khiển các phần tử
Khi có nhiều phần tử trên một form, thì cần phải điều khiển chúng.
 Đặt tiêu điểm (focus)
Một phần tử hoạt động khi nó nhận tiêu điểm. Ví dụ, để vào văn bản trong phần tử TEXT,
tiêu điểm phải nằm trên phần tử. Khi phần tử mất tiêu điểm, nó sẽ không hoạt động nữa.
Cách đơn giản nhất để đặt tiêu điểm trên phần tử là dùng thiết bị trỏ để nhấp nó hoặc dùng
bàn phím để truy cập.
 Thứ tự tab
Thuộc tính tabindex của một phần tử xác định trình tự phần tử nhận tiêu điểm thông qua bàn
phím. Ở đây bao gồm các phần tử được lồng trong các phần tử khác. Giá trị có thể là bất cứ số
nào giữa 0 và 32767. Điều hướng bắt đầu với phần tử có giá trị tabindex thấp nhất. Nếu bạn
Trang 69
Giáo Trình Thiết Kế Web

gán cùng một giá trị tabindex cho hơn một phần tử, thì phần tử sẽ nhận tiêu điểm theo thứ tự
nó xuất hiện trong tài liệu.
Nếu phần tử không hỗ trợ thuộc tính tabindex, nó sẽ là phần tử cuối cùng nhận tiêu điểm. Nếu
bạn vô hiệu hoá một phần tử, nó sẽ không được liệt kê vào thứ tự tab.
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR>
<BR>
<FORM action= “http: // somesite.com / processform” method = “post”>
<P>
<LABEL for= “firstname”>Name: </LABEL>
<INPUT tabindex = “1” type= “text” id= “firstname”><BR>
<P>Area of Interest
<BR><BR>
<INPUT tabindex = “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “0”
CHECKED> Web designer
<INPUT tabindex “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “1” > Web
Administrator
<INPUT tabindex “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “2” > Web
Developer
<P>Experience
<SELECT tabindex= “3” NAME=“ĐIềU KHIểN2”>
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years </OPTION>
</SELECT>
<BR>
</P>Comments

Trang 70
Giáo Trình Thiết Kế Web

<BR>
<TEXTAREA tabindex “4” NAME= “ĐIềU KHIểN3” COLS= “30” ROWS= “5”> Type your
comments here.</TEXTAREA>
<BR>
<P><INPUT tabindex= “5” NAME= “ĐIềU KHIểN4” TYPE=CHECKBOX
CHECKED>Send acknowledgement
<BR>
<P><INPUT tabindex = “6” TYPE= “SUBMIT” VALUE= “OK”d isable= “colorcwccwc”>
<INPUT TYPE= “RESET” VALUE= “RESET”>
</FORM>
</BODY>
< /HTML>
 Các phím truy cập
Thuộc tính phím truy cập được sử dụng để gán một phím truy cập với một phần tử. Phím truy
cập là một ký tự đơn trong bộ ký tự tài liệu và thường được sử dụng cùng với phím Alt. Khi
người dùng nhấn phím truy cập, phần tử được xác định nhận tiêu điểm và bắt đầu hoạt động.
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR>
<BR>
<FORM action= “http: // somesite.com / processform” method = “post”>
<P>
<LABEL for= “firstname”>Name: </LABEL>
<INPUT truy cậpkey = “N” tabindex = “1” type= “text” id= “firstname”><BR>
<P>Area of Interest
<BR><BR>
<INPUT tabindex = “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “0”
CHECKED> Web designer

Trang 71
Giáo Trình Thiết Kế Web

<INPUT tabindex “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “1” > Web
Administrator
<INPUT tabindex “2” TYPE=RADIO NAME= “ĐIềU KHIểN1” VALUE= “2” > Web
Developer
<P>Experience
<SELECT tabindex= “3” NAME=“ĐIềU KHIểN2”>
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years </OPTION>
</SELECT>
<BR>
</P>Comments
<BR>
<TEXTAREA truy cậpkey = “C” tabindex = “4” NAME= “ĐIềU KHIểN3” COLS= “30”
ROWS= “5”> Type your comments here.</TEXTAREA>
<BR>
<P><INPUT truy cậpkey = “A” tabindex = “5” NAME= “ĐIềU KHIểN4”
TYPE=CHECKBOX CHECKED>Send acknowledgement
<BR>
<P><INPUT truy cập key = “O” tabindex = “6” TYPE= “SUBMIT” VALUE= “OK”>
<INPUT truy cập key = “R” TYPE= “RESET” VALUE= “RESET”>
</FORM>
</BODY>
</HTML>
 Các phần tử vô hiệu hoá
Nếu bạn làm việc với trình soạn thảo văn bản, bạn sẽ thấy rằng nếu không mở tài liệu nào thì
các tuỳ chọn lưu và định dạng sẽ bị vô hiệu hoá. Trong thế giới các trang web, bạn có thể vô
hiệu hoá các phần tử hoặc để ở trạng thái chỉ đọc được nếu bạn không muốn người dùng truy
cập chúng. Ví dụ, khi bạn hiển thị một biểu mẫu, bạn có thể vô hiệu hoá “Submit” cho đến khi
người dùng nhập dữ liệu vào.
Thuộc tính bị vô hiệu hoá được sử dụng để điều khiển truy cập một phần tử. Khi một điều
khiển bị vô hiệu hoá, nó không được liệt kê trong thứ tự tab, điều khiển không nhận được tiêu
điểm và cuối cùng các giá trị của điều khiển bị vô hiệu hoá không được nhận cùng với biểu
mẫu. Một điều khiển bị vô hiệu hoá có thể được kích hoạt nhờ các script lúc thực hiện.

Trang 72
Giáo Trình Thiết Kế Web

Thuộc tính read-only xác định xem người dùng có thay đổi nội dung của phần tử hay không.
Phần tử có thuộc tính read-only hoạt động được liệt kê trong thứ tự tab và nhận tiêu điểm
nhưng người dùng không thể thay đổi nội dung của phần tử.Thuộc tính read-only có thể được
thay đổi nhờ các script lúc thực hiện.
 Cấu trúc biểu mẫu
Bạn có thể nhóm các điều khiển giống nhau của một biểu mẫu vào các phần logic bằng cách
dùng phần tử FIELDSET. Ví dụ, tất cả các phần tử INPUT có loại là văn bản được nhóm vào
với nhau.
Phần tử LEGEND được sử dụng để gán chú thích vào phần tử FIELDSET. Thuộc tính canh lề
được sử dụng để xác định vị trí của phần chú giải đối với fieldset. Các giá trị có thể cho
thuộc tính canh lề là:
Mô tả
Giá trị
Top Chú giải nằm trên đầu fieldset. Đây là giá trị mặc định.
Bottom Chú giải nằm cuối fieldset.
Left Chú giải nằm bên trái của fieldset.
Right Chú giải nằm bên phải fieldset.
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR>
<BR>
<FORM action= “http: // somesite.com / processform” method = “post”>
<P>
<FIELDSET>
<LEGEND>Position</LEGEND>
Application for the post of: <INPUT name= “name” type= “text” tabindex= “1”>
</FIELDSET>
<FIELDSET>
<LEGEND> Personal Information</LEGEND>
Name: <INPUT name = “name” type= “text” tabindex= “2”><BR>

Trang 73
Giáo Trình Thiết Kế Web

<TEXTAREA name = “address” rows= “5” cols = “30” tabindex = “3”>Enter

address</TEXTAREA>
</FIELDSET>
<FIELDSET>
<LEGEND>Sex</LEGEND>
<INPUT name= “sex”
type= “radio”
value= “Male” tabindex “4” >Male
<INPUT name= “sex”
type= “radio”
value= “Female” tabindex “4”> Female
</FIELDSET>
<FIELDSET>
<LEGEND>Educational Qualifications</LEGEND>
<INPUT name= “qualif”
type=”radio”
value= “grad” tabindex= “5”> Graduate
<INPUT name= “qualif”
type=”radio”
value= “postgrad” tabindex= “5”> Postgraduate
</FIELDSET>
<FIELDSET>
<LEGEND>Language known</LEGEND>
<INPUT name= “lang” type=”checkbox” value= “english” tabindex= “6”>
English
<INPUT name= “lang” type=”checkbox” value= “french” tabindex= “7”>
French
<INPUT name= “lang” type=”checkbox” value= “german” tabindex= “8”> German
</FIELDSET>
</FORM>
</BODY>
</HTML>

Trang 74
Giáo Trình Thiết Kế Web

CHƯƠNG 7: STYLE SHEET

7.1 Giới thiệu

Các bảng kiểu là một thuộc tính quan trọng có thể sử dụng được trong HTML Động.
Mặc dù trang web không nhất thiết cần đến bảng kiểu nhưng việc sử dụng bảng kiểu
cũng có những ích lợi của nó. Trong bài học này, bạn có thể tìm hiểu về các bảng kiểu
như là một thuật ngữ và cách sử dụng nó nhằm nhằm nâng cao xây dựng thiết kế và
phát triển trang web.
Các kiểu có sẵn:
Một thuộc tính quan trọng của HTML Động là thuộc tính các kiểu động. Nghĩa là bạn
có thể thay đổi kiểu của những phần tử HTML khác nhau trên trang sau khi nó hiển
thị lên trang ấy. Sự thay đổi này có thể đáp ứng đối với sự tương tác người sử dụng
hoặc thậm chí đối với sự thay đổi tình trạng giống như việc thay đổi kích thước.
Có hai phương thức để thay đổi kiểu trên trang của chúng ta:

 Thay đổi kiểu có sẵn

 Viết các kịch bản (script) để thay đổi kiểu

Khi sử dụng các kiểu các sẵn, bạn có thể tạo ra các kiểu động mà không thêm bất cứ
kịch bản nào vào trang của chúng ta.
Một “kiểu có sẵn” là kiểu được gán cho một phần tử nào đó. Kiểu này không áp dụng
vào tất cả các phần tử thuộc một loại hay một lớp nào đó. Một kiểu có sẵn được xác
định khi sử dụng thuộc tính (STYLE) đối với thẻ (tag) của phần tử đó. Chẳng hạn như,
nếu bạn muốn đặt màu của <H1> (Heading 1) thành màu đỏ, thì bạn sẽ phải đặt thuộc
tính (STYLE) của thẻ H1.
<H1 STYLE= “color:red”>
Nếu bạn muốn sử dụng kịch bản thay đổi kiểu có sẵn vào bất cứ lúc nào, thì lúc ấy bạn
phải sử dụng đến Kiểu Đối Tượng ( Style). Đối Tượng Style hỗ trợ mọi tính chất mà
CSS hỗ trợ đối với các kiểu. Để sử dụng được tính chất trong thao tác kịch bản:

- Bỏ dấu gạch nối ra khỏi tên của kiểu CSS

- Thay đổi chữ cái đầu tiên của từ sau dấu gạch nối thành từ viết hoa.
Chẳng hạn như, font-weight của CSS trở thành fontweight trong DHTML. Hoặc text-align
thành textAlign và v.v.
Chúng ta hãy lấy một ví dụ để chứng minh rõ hơn. Chúng ta sẽ sử dụng các kiểu có sẵn
để đặt vào những tính chất của phần tử <P>. hãy nhìn vào mã code này trong Internet
explorer.

<HTML>
<HEAD>
<TITLE>Setting Properties</TITLE>
</HEAD>
Trang 75
Giáo Trình Thiết Kế Web

<BODY>
<P style = “color;aqua; font- Style:italc: text- Align:center;”> This paragraph has an
inline style applied to it
<BR>
<P> This paragraph is displayed in the default style.
<BR>
<P> Can you see the <SPAN style = color:red>difference </SPAN> inthis line
</BODY>
</HTML>

7.2 Giới thiệu các bảng STYLE:

Bảng kiểu là nơi mà bạn có thể xử lý và kiểm soát các kiểu. Bảng kiểu thường mô tả
diện mạo và cách trình bày của tài liệu HTML vì nó sẽ được thể hiện lên màn hình, hoăc thậm
chí khi in ấn. Thật vậy, bạn có thể xem nó như là một mẫu mà làm cơ sở các tài liệu HTML
của chúng ta. Bạn còn có thể định vị và xác định chính xác diện mạo của các phần tử trên một
trang và tạo ra các hiệu quả đặc biệt. Chẳng hạn như, bạn có thể tạo ra một bảng kiểu mà xác
định được kiểu đối với <H1> đậm và nghiêng và có màu vàng chanh hoặc là hiển thị phần tử
<P> màu đỏ khi sử dụng font Arial và v.v.
Bạn có thể xác định được thông tin kiểu mà bạn muốn có ở một vị trí nhất định- bảng
kiểu. Lúc ấy bảng kiểu có thể liên kết với tất cả các trang trong một website để tạo ra diện
mạo đồng bộ và phù hợp trên toàn bộ một site. Bạn có thể xác định hơn một bảng kiểu và nối
chúng với một tập hợp những trang web giống nhau cho phép tính linh hoạt lớn hơn trong khi
tạo ra các trang web.
Giờ đây một trang web thậmchí không có một bảng kiểu nào. Về điều này không có một
quy luật cứng nhắc cho vấn đề này. Nếu không xác định được bảng kiểu nào thì lúc ấy trình
duyệt chủ thường sử dụng những quy ước riêng của nó. Chẳng hạn như, một heading <H1>
luôn luôn được hiển thị theo cách thức này. Các đoạn và lề trang cũng vậy. Tuy nhiên sử dụng
một bảng kiểu, bạn có thể xác định cách thức mà theo đó Heading <H1> hiện thị lên trình
duyệt.
Về mặt lý thuyết, bạn có thể sử dụng bất cứ thuật ngữ bảng kiểu nào với HTML. Tuy
nhiên, về thực tiễn, chỉ có công nghệ bảng kiểu phân cấp (cascading Style Sheets = CSS)
được người ta tán thành. Chính nhờ vậy, các bảng kiểu phân cấp là những tiêu chuẩn tiến bộ
đã được Tập Đoàn Liên Doanh phát triển (thông thường có tên gọi là “W3C”) cho việc sử
dụng vào những bộ trình duyệt Web.
Bảng 1 ở cuối chương này liệt kê được một số thuộc tính CSS mà bạn có thể sử dụng trong
HTML Động. Khi được sử dụng trong phạm vi các Script dấu gạch nối được bỏ đi và chữ cái
đầu tiên của từ sau dấu gạch nối phải được viết hoa. Chẳng hạn như, font-size được chuyển
thành fontSize.

Các bảng kiểu trong JavaScript:

Trình duyệt Netscape hỗ trợ các bảng kiểu phân cấp. Nó còn hỗ trợ các bảng kiểu được
viết bằng JavaScript và các bảng kiểu này thường sử dụng mô hình đối tượng tài liệu. Khi
chúng ta xác định một bảng kiểu thì ta phải khai báo loại kiểu như:

Trang 76
Giáo Trình Thiết Kế Web

“text/CSS” - - Trong trường hợp này nó cần đến cú pháp của CSS

“text/Javascipt” - - trong trường hợp này nó cần đến cú pháp bảng kiểu của Javascript

Khi sử dụng cú pháp JavaScript bên trong phần tử <STYLE>, bạn phải xác định thuộc
tính của các thẻ của đối tượng document. Trong mô hình đối tượng tài liệu, các phần tử
HTML được xem là các đối tượng. Một đối tượng có những thuộc tính có thể được truy cập
vào để xác định diện mạo và kiểu của phần tử. Một thuộc tính có thể đóng chức năng như là
một đối tượng với tập hợp các thuộc tính. Chẳng hạn như, một trang web được xem là một
đối tượng tài liệu. Đối tượng tài liệu có thuộc tính của các thẻ. Thuộc tính các thẻ có một đối
tượng H2. Đối tượng H2 có một thuộc tính gọi là màu (color) mà ta có thể truy cập và thay
đổi được khi cần thiết:

Document. Tags. H2.color = “limegreen”

<HTML>
<HEAD>
<STYLE STYLE = “text/css”>
</HEAD>
<BODY>
<H2> This is an H2 element</H2>
<BR>
</BODY>
</HTML>

7.3 Hệ thống thuật ngữ về bảng kiểu

Một bảng kiểu phân cấp xác định các kiểu có thể được áp dụng vào các trang hoặc các phần tử
trang.
1. Một luật kiểu - - Một bảng kiểu phân cấp là một tập hợp các luật. Một luật xác định
được kiểu của tài liệu. Chẳng hạn, bạn có thể tạo ra một luật kiểu để xác định rằng tất
cả những Heading <H2> xuất hiện ở màu vàng xanh.
2. Một bảng kiểu là một danh mục gồm cấc kiểu. Có thể gắn nó vào tài liệu HTML.
Trong trường hợp đó, nó được gọi là bảng kiểu được gắn sẵn.. Còn còn thể tạo ra được
một bảng kiểu như là file bên ngoài và được liên kết với tài liệu HTML.
3. Các luật kiểu có thể được áp dụng vào các phần được chọn lọc của trang Web. Chẳng
hạn, bạn có thể xác định rằng một đoạn nào đó hiển thị đậm, nghiêng trên trang . Điều
này được gọi là Khai báo kiểu có sẵn mà nhờ đó các kiểu được áp dụng vaò các phần
tử HTML đơn đổc tên một trang Web.
4. Các luật- Một bảng kiểu có thể có một hay nhiều luật. Phần đầu của luật này được gọi
là Selector. Mỗi bộ chọn có các tính chất hoặc các giá trị liên quan đến nó.

A RuleSelector{Declarationsproperty: value;
Property: value; ...
Trang 77
Giáo Trình Thiết Kế Web

}
Phần của luật được kèm theo trong phạm vi các dấu móc được gọi là khai báo. Khai
báo có hai phần, phần trước dấu hai chấm (:) là Tính chất và nằm sau dấu hai chấm (:)
là Giá trị (Value) của Tính chất đó.
Các khai báo được phân cách bởi dấu chấm phẩy (;) Bạn không cần đặt dấu chấm phẩy
sau lần khai báo cuối cùng. Đó là cách thực hành hay.
H1 {color: blue}
H1 là Bộ chọn, color: xanh là Khai báo
Trong phạm vi khai báo:
{Property: value}
Color là Tính chãt, blue là Giá trị

Bạn có thể đặt mỗi luật tách rời nhau trong phạm vi các thẻ KIỂU (STYLE). Trong
trường hợp đó các tiêu đề (header) của bạn sẽ tiếp tục cho đến cùng.

<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1 { color: limegreen}
H1 { font-family: Arial }
H2 { color: limegreen }
H2 { font-family: Arial }
</STYLE>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in the browser</H3>
</HTML>

Thayvào đó bạn có thể nhóm các luật lại. Mỗi khai báo được tách ra bởi một dấu chấm phẩy.

<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1, H2{ color: limegreen; font-family: Arial;
}
</STYLE>
</HEAD>

<H1>This is the H1 element</H1>

<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in the browser</H3>
</HTML>

Trang 78
Giáo Trình Thiết Kế Web

Các bộ chọn
Bộ chọn có thể định nghĩa là “một chuỗi xác định những phần tử nào được luật tương ứng áp
dụng”

Có hai loại Bộ chọn cơ bản:

Bộ chọn đơn:
 Bộ chọn phần tử HTML
 Bộ chọn lớp
 Bô chọn ID
Bộ chọn theo ngữ cảnh:
a) Các bộ chọn đơn:
Đay là những bộ chọn dễ sử dụng nhất. Nó mô tả một phần tử lần lược theo phần tử của nó
trong cấu trúc tài liệu. Bộ nhận dạng heading H1 là một bộ chọn đơn điển hình.

H1{ color: blue}

 Bộ chọn HTML
Bộ chọn này sử dụng các phần tử HTMl. Sự khác biệt duy nhất là bạn bỏ dấu móc. Vì vậy, thẻ
<P> HTML trở thành P. Trong ví dụ sau đây, trong lúac xác định kiểu, phần tử P không có
dấu móc. Đó là vì phần tử HTML được xem là một Bộ chọn.

<HTML>
<HEAD>
<STYLE TYPE= “text/css”>
P{font-style:italic; font-weight: bold; color:limegreen}
</STYLE>
</HEAD>

Ở đây những nội dung của P đang được xác định. Phần tử P được xem là ýeu tố HTML.

<P>These selectors use the names of HTML electors. The only difference is that you remove
the brackets. </P>
</BODY>
</HTML>

 Bộ chọn CLASS
Nhữnh bộ chọn này sử dung thuộc tính LỚP (CLASS) của các phần tử HTML. Mọi
phần tử, có thể hiển thị rõ, có thuộc tính CLASS được sử dụng để gán vào một bộ
nhận dạng. Bạn có thể gán một tên lớp duy nhất vào mọi phần tử khác nhau.Thay vào
đó, bạn có thể gán một bộ nhận dạng lớp vào một số phần tử thuộc một loại mà thôi
khi bạn muốn hiển thị các biến thiên từ hàm chuẩn norm. Chẳng hạn như, có thể bạn
muốn <H2> xuất hiện trong một số màu sắc cố định khác nhau. Trong trường hợp dó
bạn sẽ dùng đến nhận dạng lớp cho <H2>
Bộ chọn CLASS có dấu chấm (.) đứng trước gọi là một ký tự cờ, theo sau là một tên
lớp do chúng ta chọn. Tốt hơn nên chọn những tên lớp theo mục đích của chúng chứ
không nên chọn một tên mô tả màu sắc hay kiểu của chúng. Chẳng hạn như, bạn có thê

Trang 79
Giáo Trình Thiết Kế Web

muốn đoạn A hiển thị chữ nghiêng, những đoạn khác thì hiển thị theo kiểu khác.Trong
trường hợp đó có thể có bộ nhận dạng lớp.slant.

<STYLE TYPE=”text/css”>
. water { color: blue }
. danger { color: red }
</style>
<P class=”water”>test water
<P Class=”danger”>test danger
<P> no style
<BR>
<EM class=”danger”> italic</ EM>

<HTML>
<HEAD>
<STYLE TYPE= “text/javascript”>
classes.water.all.color = “blue”
classess.danger.all.color = “red”
</STYLE>
</HEAD>
<P class=”water”>test water
<P class=”danger”>test danger
<BR>
<EM clas=”danger”>italic</EM>
</BODY>
</HTML>

Khi sử dụng cú pháp JavaScript, bạn không thể dùng các dấu gạch nối bên trong các
tên lớp. Đó là vì ngôn ngữ JavaScript hiểu dấu gạch nối là một dấu trừ (-) là một toán
tử JavaScript. Các tên lớp không thể có bất kỳ một toán tử JavaScript nào.
Khi xác định một lớp kiểu:
 Bạn có thể xác định được những phần tử HTML nào có thể sử dụng kiểu này.
 Bạn có thể sử dụng ntất cả từ khoá để tất cả những phần tử đều dùng nó.

View this code in Netscape navigator.

<HTML>
<HEAD>
<STYLE type=”text/css”>
all.hotpink {color: blue; font-weight:bold;}
P. BLUE {colorr:red; font-weight:bold;}
</STYLE>
</HEAD>
Trang 80
Giáo Trình Thiết Kế Web

<BODY bgColor = lavender>

<P CLASS=BLUE>This paragraph is blue.</P>
<P>This paragraph does not use the class BLUE.</P>
<H5 CLASS=red1>This is an H5 element that tried to use the red1 class</H5>
<P CLASS=hotpink>This is an H5 element that has been allowed to use hotpink
style.</H5>
</BODY>
</HTMl>

 Bộ chọn ID

Một bộ chọn ID sử dụng thuộc tính ID của một phần tử HTML. Một bộ chọn ID được
dùng để áp dụng một kiểu vào một phần tử đơn độc trên trang web. Chẳng hạn như,
bạn có thể dùng bộ chọn ID để áp dụng một kiểu đặc biệt nào đó vào heading <H2> .
Điều này không có nghĩa là một kiểu giống như thế sẽ được áp dụng vào một biến thể
khác của phần tử< H2> trên cùng một trang nếu không được xác định. Tương tự với
việc sử dụng một kiểu có sẵn mà nhờ đó có thể áp dụng một kiểu vào một phần tử đơn
độc. Một bộ chọn ID được mở đầu bằng một dấu thăng (#). Khi sử dụng cú pháp
JavaScript thì bạn phải dùng tính chất ids.
Sử dụng các Bộ chọn ID

<HTML>
<HEAD>
<TITLE> ID Selectors</TITLE>
</HEAD>
<BODY>
<STYLE TYPE=”text/css’>
#control { color: red }
</STYLE>
<P id=”control”>Fire is this color<H2>
<BR>
<P>This paragraph has no style applied
</BODY>
</THML>

Kết hợp ID và các bộ chọn lớp.

<HTML>
<HEAD>
<TITLE> combining ID and class Selector</TITLE>
</HEAD>
<BODY>
<STYLE TYPE=”text/css”>
.forest { color: green }
Trang 81
Giáo Trình Thiết Kế Web

.danger { color: red }

#control { color: blue }
</STYLE>
<P class=”forest”>green things
<P class=”danger”>fire hazards
</P>
<EM class=”forest”> more green things</EM>
<BR>
<EM class=”danger”>more fire hazards</EM>
<UL>
<LI class-“danger.”>things that burn
<LI class=”forest”things that don’t burn
</UL>
<P id=”control”> water </P>
</BODY>
</HTML>

View this code in Netscape Navigator

<HTML>
<HEAD>
<TITLE> Combining ID and Class SelectorsM/TITLE>
</HEAD>
<BODY>
<STYLE TYPE=”text/javascript’>
with (classes.forest.all) {
color = “green”;
}
with (classes.danger.all) {
color = “red”;
}
ids.control.color = “blue”;
</STYLE>
<P class=”forest”>green things
<P class=”danger”>fire hazards
</P>
<EM class=”forest”>more green things</EM>
<BR>
<P class=”danger”>more fire hazards</EM>
<UL>
<LI class=”danger”>things that burn
<LI class=”forest”>things that don’t burn
</UL>
Trang 82
Giáo Trình Thiết Kế Web

<P id=”control”>water </P>

</BODY>
</HTML>
b) Các bộ chọn ngữ cảnh
Bộ chọn theo ngữ cảnh ám chỉ đến ngữ cảnh của các phần tử. Để thực hiện thao tác
được rõ ràng hơn, đôi khi bạn cần có hai phần tử có cùng giá trị. Phần tử chính hay
phần tử mẹ đều có phần tử con bao gồm hoặc có chứa bên trong nó. Trong trường hợp
đó, để thay đổi kiểu của phần tử con, bạn phải sử dụng bộ chọn theo ngữ cảnh.
Điều này dựa trên khái niệm thừa kế mà ở đó phần tử con thừa hưởng được kiểu đã gán
cho phần tử mẹ.

Một ví dụ điển hình là phần tử <BODY>. Khi bạn thêm một phần tử vào phần tử
<BODY,thì mỗi phần tử có chứa đựng bên sẽ thừa kế các kiểu của <BODY>.

<HTML>
<HTML>
<HEAD>
<TITLE>Contextual Selectors</TITLE>
</HEAD
<p> ...>b> ... </b> ... </p>
P là mẹ và B là con
Bây giờ làm thế nào để kiểm soát được phần tử này? Suy cho cùng bạn có thể không
muốn tất cả các phần tử có trên trang Web xuất hiện theo một kiểu như thế. Vì vậy,
bạn phải ghi đè sự thừa kế đó.. Trong trường hợp đó bạn phải thay đổi đặc biệt kiểu
của phần tử con. Hãy xem đoạn mã này trong Internet Explorer.

<HTML>
<HTML>
<HEAD>
<TITLE>Contextual Selectors</TITLE>
</HEAD>
<STYLE TYPE=”text/css”>
BODY {color;blue;
Background:lavender;
Font-family:Arial;
}
UL {color:red }
</STYLE>
Bộ chọn UL trong bảng kiểu xác định đượclà các danh sách không theo thứ tự nên ở
màu đỏ, vì thế cho nên tất cả các phần tử LI sẽ thực hiện màu sắc đã được xác định trừ
khi nó bị ghi đè lên bởi sự kế thừa .

<UL>
<LI> mangoes
Trang 83
Giáo Trình Thiết Kế Web

<LI> oranges
<LI> apples
</UL>
Bộ chọn UL trong bảng kiểu được xác định rằng các hạng mục (items) nên thể hiện ở
màu đỏ. Chúng thưà hưởng font Arial từ Khai Báo BODY , Màu đỏ là từ Khai Báo
UL. Nếu bạn xác định Font-family trong khai báo UL thì nó sẽ nạp chồng lên Khai
Báo của bộ chọn BODY. Không có Bộ chọn OL trong bảng kiểu, vì thế Danh sách OL
thừa kế các thuộc tính của nó từ bộ chọn BODY.

<OL>
<LI> mangoes
<LI> oranges
<LI> apples
</OL>
</BODY>
</HTML>

Các phần tử không nằm trong bảng kiểu vì các bộ chọn sẽ thừa hưởng được các thuộc
tính của phần tử bố mẹ. Ở ví dụ dưới đây, các phần tử Bvà I đang thừa hưởng các
thuộc tính của bộ chọn P.
<HTML>
<HEAD>
<TITLE>Contextual Selectors</TITLE>
</HEAD>
<STYLE TYPE=”text/css”>
BODY {color;blue;
Background:lavender;
Font-family:Arial;
}
P {colorr:hotpink}
<STYLE>
<BODY>
<P>
<B>I am having fun</B><BR>
<I>This is fun too</I><BR>

Để mở được các thuộc tính của bộ chọn P, hãy đóng nó lại

<P>
I am having fun
<BR>
This is fun too
</BODY>
</HTML>
Trang 84
Giáo Trình Thiết Kế Web

Thay đổi các luật:

Bạn đã học cách sửa đổi kiểu của một phần tử riêng. Có thể có nhiều minh hoạ đối với
các trang Website khi bạn muốn thực hiện trên quy mô toàn cầCó thể bạn muốn thay
đổi kiểu đã được xác định bởi một bảng kiểu được xem là một lớp hay là một kiểu
chung. Khi bạn làm công việc này, sự cải tiến này sẽ có hiệu ứng ripple. Nghĩa là, kiểu
của tất cả các phần tử trên trang dễ thay đổi theo một bảng kiểu nào đó.
Ví dụ, bạn định nghĩa được bảng kiểu để xác định cho hai kiểu:

 Một kiểu chung (global style) áp dụng cho toàn bộ phần tử <H2> (green, Arial
font, family, normal size)
 Một lớp kiểu mang những đặc điểm chung có tên gọi là warning (red, bold,
italic) sẽ áp dụng cho bất kỳ phần tử nào sử dụng lớp đó.
Hai ví dụ sau đây chứng minh cách sử dụng bảng kiểu có tên gọi Sheet1.css được
kết nối với 1.htm trước rồi mới đến 2.htm
Sheet1.css có mã sau đây;
H2 {colorr;blue; font-style:italic;)
.warning {color:red; font-weight;bold; font-style:italic;)

Hãy sao chép mã code này trong Notepad/Frontpage và lưu lại thành “Sheet1.css”
1.htm

<HTML>
<HEAD>
<TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<H2> Changing the rules is fun</H2>
<BR>
<P class=”warning”> Changing the rules may not be such fun
<H2>The H2 element again<P>
</THML.

2.htm
<HTML>
<HEAD>
<TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<H2> This document ues the sheet1 style sheet</H2>
<BR>
<P class=”warning”>Selecting this option could delete all your files
<H2>The H2 element again<P>
</THML.
Trang 85
Giáo Trình Thiết Kế Web

7.4 Những chú thích về các bảng kiểu

Những chú thích (comment) là một thuộc tính mà hầu hết các ngôn ngữ phát triển đều
hỗ trợ. Bạn có thể thêm các chú thích (comment) vào bảng kiểu nhằm giúp đỡ chúng ta
theo dõi các bảng kiểu được áp dụng trên toàn bộ trang. Các chú thích được kem theo
bên trong dấu /*. Tuy nhiên, những chú thích này không không thuộc loại chú thích ẩn.
 Đối với các bảng kiểu phân cấp thì cú pháp là:
H1 {color:blue;} /* H1 elements will be blue */
Tags.H1.color = “blue”; /* H1 elements will be blue */

 Đối với các bảng kiểu JavaScript cú pháp sẽ là:

Tags.H1.color = “blue”; // H1 elements Will be blue

7.5 Lợi ích của các bảng kiểu

Nếu bạn muốn thực hiện kiểm soát lớn hơn đối với cấc trang Web thì bạn nên làm nó
theo dạng kiểu. Bạn còn có thể sử dụng các bảng kiểu để:
 Thực hiện ghi đè trình duyệt:
Mỗi trình duyệt đều có thể làm hiển thị các trang Web theo cách riêng của nó. Trước
đây, các nhà phát triển đãkhông kiểm soát được các trang Web hiển thị trong trình
duyệt. Suy cho cùng bạn không biết trình duyệt nào mà một người cách nửa vòng trái
đất vẫn có thể sử dụng được. Nhờ có các bảng kiểu bạn có thể ghi đè những quy ước
của trình duyệt và đặt theo cách riêng của chúng ta. Chẳng hạn, bạn có thể xác định
kiểu mà trong đó một phần tử <H1> cần hiển thị:

<H1><FONT SIZE=3 COLOR=AQUA>

<B><I>Overridingthe browser</I></B>
</FONT></H1>
 Bố trí trang (page layout)
Các bảng kiểu có thể được sử dụng để làm hiển thị font, thay đổi màu (color) và v. v.
mà không làm thay đổi cấu trúc của trang Web. Điều nàu có nghĩa là Với tư cách là
một nhà thiết kế bây giờ bạn có thể tách biệt những yêu cầu về thiết kế hình ảnh trực
quan (visual design) với cấu trúc logic của trang web và địa chỉ là hai chuyện hoàn
toàn khác nhau.
Khi sử dụng các biện pháp liên quan trong bảng kiểu của bạn. thi bạn có thể trình diện
các tài liệu của bạn sao cho đẹp mắt trên bất kỳ màn hình nào và theo bất kỳ phân giải
nào.

 Có thể sử dụng lại các bảng kiểu:

Một khi bạn xác định thông tin kiểu bạn có thể nhúngbảng kỉeu bên trong tài
liệuHTMl. Lần lượt thay thế, bạn có thể kết nối tất cả các trang trên website vào bảng
Trang 86
Giáo Trình Thiết Kế Web

kiểu. Điều nàu chắc chắn rằng các trang web của chúng ta đều có diện mạo thông tin
khi được hiển thị. Vì vậy bạn có thể có được nền thông thườngcủa trang như lôgô của
công ty và một số thông tin làm mẫu có trong một bảng kiểu. Điều này sẽ bảo đảm
được cách nhìn và cảm nhận thông dụng về trang website. Cứ hình dung xem thử có
vài trăm trang web và bạn phải xác dịnh kiểu của mỗi trang một một cách độc lập.

 Chỉ cần làm một lần thật tốt:

Bạn có thể tạo ra một bảng kiểu và kết nối vài tài liệu vào nó. Tất cả các tài liệu sẽ có
diện mạo giống nhau. Tuy nhiên quan trọng nhất là khi bạn thực hiện thay đổi bảng
kiểu, thì tất cả các tài liệu được kết nối vào bảng kiểu sẽ phản ánh lại sự thay đổi đó

7.6 Kết hợp một bảng kiểu với HTML

Có một số cách ta có thể kết hợp các bảng kiểu với HTML:
 Phần tử STYLE
 Thuộc tính Style
 Yếu tố link.

Các phần tử STYLE được chèn vào phần tử <HEAD> của một tài liệu với tất cả các
luật được thay thế giữa lúc mở và đóng các thẻ. Khi hiển thi các trang, thì chỉ có tài
liệu mà trong đó STYLE được nhúng sẽ bị tác động. Thẻ thường STYLE có một tham
số --
TYPE. Tham số này xác định được loại Internet Media như là “text/css.” Hãy xem
đoạn mã trong Netscape Navigator.
Sử dụng phần tử STYLE .

<HTML>
<style Type = “text/css”>
H1 {color:maroon;}
P [color:hotpink;
Font- family:Arial:
}
</Style>
<BODY bgcolor = “lavender”>
<H1>I am having fun</H1>
<P>This is all about having fun with style sheets</P>
</BODY>
</HTML>

Thuộc tính STYLE.

Trang 87
Giáo Trình Thiết Kế Web

Thuộc tính STYLE được sử dụng dể áp dụng cho các bảng kiểu vào các phần tử riêng.
Một bảng kiểu có thể nhỏ chỉ bằng một luật. Khi sử dụng Thuộc tính STYLE bạn có
thể bỏ qua Phần tử STYLE và đặt phần Khai Báo vào các thẻ start riêng.
<H2 style=”color:green;
font-family:Arial”>
</H2>
Rõ ràng là bạn chỉ dùng điều này mà thôi nếu bạn đang thay đổi kiểu của một phần tử
đặc biệt nào đó. Nếu bạn có dự dịnh áp dụng cùng loại kiêutreen khắp tài liệu thi lúc ấy
điều nàu không phải rõ ràng là một cách đúng để thực hiện.

 Hãy nhớ rằng nếu bạn sử dụng Thuộc tính style thì bạn sẽ phải thực hiện thay đổi đối
với mỗi trường hợp nếu bạn muốn thay đổi kiểu của tài liệu về sau.

<HTML>
<P STYLE=”color:blue; font-style:italic”>
This line will be blue and italicized.
<P>
This line will not be blue or in italics.
</HTML>

Phần tử LINK.

Nếu bạn muốn sử dụng phần tử link, thì lúc ấy Bảng kiểu sẽ là một tài liệu tách rời.
Vậy địa chỉ Web đối với bảng kiểu có thể được thêm vào.

<LINK REL = stylesheet

HREF = “stylesmine.css”
Type = “text/css”
>
Bạn phải gộp luôn thuộc tính”rel=stylesheet” hay trình duyệt sẽ không tải bảng kiểu.

Sheet1.css
H2 [colorr:blue; font-style;italic;]
P {color: yellow;}
File The .htm
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE=”text/javascript”
HREF=”sheet1.css”>
</HEAD>
<BODY>
<H2>This is an H2 element</H2>
<BR>
Trang 88
Giáo Trình Thiết Kế Web

<P>This is a paragraph
</BODY>
</HTML>
Nếu bạn đang dùng cú pháp JavaScript:
Sheet1.css
tags.h2.color=”blue”;
tags.H2.fontStyle=”Italics”;

tags.P.color=”yellow”;
File The .htm
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE=”text/javascript”
HREF=”sheet1,css”>
</HEAD>
<BODY>
<H2>This is an H2 element</H2>
<BR>
<P>This is a paragraph
</BODY>
</HTML>

Phân cấp
Khi bạn sử dụng một số kỹ thuật để áp dụng (liên kết hoặc nhúng) kiểu vào trang
Web, thì không có cách nào để cho trình duyệt quyết định kiểu nào cần áp dụng
vào.Trình duyệt phân cấp thông qua tất cả các luật đã được xác định và chọn lọc kiểu
phù hợp nhất.Các bảng kiểu cục bộ được ưu tiên nhất. Các bảng kiểu cục bộ nằm kế
tiếp với những bảng kiểu kết nối ở cuối bậc thang.
Ví dụ, nếu một luồng nằm trên trang Web xác định <P> là màu đỏ thông qua một bảng
kiểu được liên kết, thì tất cả các đoạn sẽ hiển thị màu đỏ ngoạt trừ đối với <P> ở trên,
mà sẽ là màu vàng chanh.
<HTML>
<LINK REL =stylesheet
HREF= “sheet1.css”
Type= “text/css”
<P STYLE=”color: limegreen”>
This line will be limegreen.
</HTML>

Trang 89
Giáo Trình Thiết Kế Web

MỤC LỤC

PHẦN 1

CHƯƠNG 1: GIỚI THIỆU KHÁI QUÁT VỀ TRANG WEB...............................................................1

1.1 Các khái niệm cơ bản....................................................................................................................1
1.2 Giới Thiệu Khái Quát Về Web......................................................................................................2
1.3 Hiển thị trang web.......................................................................................................................17
CHƯƠNG 2: SIÊU LIÊN KẾT.............................................................................................................20
2.1 Giới thiệu siêu liên kết.................................................................................................................20
2.2 Các loại liên kết...........................................................................................................................20
2.3 Tạo siêu liên kết...........................................................................................................................20
CHƯƠNG 3 : DANH SÁCH................................................................................................................29
3.1 Danh sách không có thứ tự:........................................................................................................29
3.2 Danh sách có thứ tự:....................................................................................................................31
3.3 Danh Sách Mô Tả........................................................................................................................33
3.4 Danh sách định nghĩa..................................................................................................................34
CH Ư ƠNG 4 : BẢNG VÀ HÌNH ẢNH...............................................................................................35
4.1 Bảng.............................................................................................................................................35
4.2 Hình ảnh......................................................................................................................................43
CH ƯƠNG 5: FRAME..........................................................................................................................52
5.1 Khái quát về frame......................................................................................................................52
5.2 Các khung lồng nhau...................................................................................................................54
5.3 Liên kết với khung.......................................................................................................................55
5.4 Phần tử NOFRAMES..................................................................................................................56
CHƯƠNG 6 :FORM.............................................................................................................................59
6.1 Giới thiệu các FORM(biểu mẫu).................................................................................................59
6.2 Các phần tử nhập của HTML......................................................................................................60
6.3 Tạo form......................................................................................................................................68
CHƯƠNG 7: STYLE SHEET...............................................................................................................75
7.1 Giới thiệu.....................................................................................................................................75
7.2 Giới thiệu các bảng STYLE:.......................................................................................................76
7.3 Hệ thống thuật ngữ về bảng kiểu.................................................................................................77
7.4 Những chú thích về các bảng kiểu...............................................................................................86
7.5 Lợi ích của các bảng kiểu............................................................................................................86
7.6 Kết hợp một bảng kiểu với HTML..............................................................................................87
MQTT

Trang 90