Giáo trình về môn thiết kế web

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.84 MB, 133 trang )

CHƯƠNG

1
I.

GIỚI THIỆU VỀ INTERNET

Lịch sử:

Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Ky
khởi xướng vào năm 1969. ARPA là viết tắt của cụm từ Advanced Research
Projects Agency – Cơ quan các Dự án Nghiên cứu Cao cấp, một bộ phận trực thuộc
bộ Quốc phòng Hoa Ky phụ trách việc cấp phát tiền tài trợ. Mạng ARPANET khởi
đầu là mạng kết nối giữa Bộ Quốc phòng Hoa Ky với các nhà thầu nghiên cứu khoa
học và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hành
các nghiên cứu khoa học được tài trợ.
Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi một
phần của nó bị phá hủy. Nếu một trong những liên kết mạng bị phá hủy do chiến
tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên
kết khác.
ARPANET thành công vang dội và mọi trường đại học tại Hoa Ky đều muốn
gia nhập vào mạng này. Với việc mở rộng đối tượng tham gia vào mạng,
ARPANET bắt đầu trở nên khó quản lý hơn. Do đó nó đã được chia làm hai mạng:
MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn,
dành cho các mục đích phi quân sự. Tuy vậy, hai mạng này vẫn có thể liên lạc với
nhau qua một giao thức gọi là giao thức Internet (IP: Internet Protocol).
ARPANET nhanh chóng trở nên ọp ẹp do sự phát triển của số lượng các máy
tính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi. Hội
đồng Khoa học Quốc gia Hoa Ky (NSF) đã lập nên mạng NSFNET, một mạng
riêng và nhanh hơn nhiều của mình. NSF đã thiết lập một chuỗi các mạng khu vực
nhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nối

các mạng khu vực này với NSFNET. NSFNET đã dần thay thế cho ARPANET.
Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độc
lập với nhau kết nối vào nó, các mạng này có thể truyền thông với nhau thông qua
phương thức truyền gói dữ liệu (packet switching) và qua kiến trúc mạng mở (openarchitecture networking). Kiến trúc mạng mở nghĩa là các mạng con có thể có giao
diện, cấu trúc của riêng nó; điều này giải thích tại sao ngày nay chúng ta đều có thể
kết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì.
Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà phát
triển nhận thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọi
đối tượng người dùng. Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thống
menu đơn giản để truy cập đến các tập tin.

Trang 1

Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mới
trong việc sử dụng Internet. Tim Berners-Lee là người đã phát triển các giao thức
nền tảng cho World Wide Web (WWW) vào năm 1992. Ông cũng chính là người đã
tạo ra ngôn ngữ đánh dấu siêu văn bản (HTML: Hypertext Markup Language) –
ngôn ngữ để viết nên các trang Web. Từ đây, với dịch vụ World Wide Web,
Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người dùng
máy tính – từ người mới bắt đầu làm quen với máy tính đến những người dùng có
trình độ tin học cao.
Về mặt vật lý, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễn
thông hiện có. Về mặt kỹ thuật, Internet sử
dụng tập giao thức nền tảng gọi là TCP/IP Backbone Network Service (BNS)
(Transmission Control Protocol / Internet Một BNS là một tập hợp các đường
cáp rất dài kết nối các máy tính lại
Protocol). Một đặc điểm lý thú của TCP với nhau. Very high-speed
là trước đây, khi định nghĩa về Internet, IP Backbone
Network

Service
không phải là một bộ phận trong thiết kế. (vBNS) đóng vai trò là đường kết
Trong quá trình phát triển, Denny Cohen ở nối chính cho hệ thống Internet mà
USC cho rằng các chức năng hướng kết chúng ta biết ngày nay. Đường trục
này liên kết các trung tâm siêu máy
nối của TCP là không cần thiết đối với tính trên khắp thế giới lại với nhau.
một số kiểu truyền dữ liệu và chúng tạo ra vBNS có băng thông lên đến 2.4
phí tổn phát sinh. Ông đề nghị tách TCP ra Gbps.
để thỏa mãn yêu cầu “đúng giờ hơn là
chính xác”. Điều cần thiết là tìm cách lấy dữ liệu nhanh chóng để chuyển sang hệ
thống khác. Như vậy, TCP trở thành TCP và IP.
Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trên
thế giới. Internet, cùng với những mặt tốt hoặc xấu của nó mà người ta đang sử
dụng hoặc phải đối mặt, đã trở thành một phần quan trọng của đời sống con người.
II.
Những khái niệm nền tảng liên quan đến mạng Internet:
1. Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language) :
Là ngôn ngữ cơ bản để tạo ra các trang web. Ngôn ngữ HTML định nghĩa các
thẻ để người dùng định dạng hiển thị trang web lên trình duyệt cũng như cách thức
kết nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, …).
Văn bản HTML là các tập tin có phần mở rộng “HTML” hay “HTM”. Ta có
thể tạo các file HTML bằng bất ky bộ xử lý văn bản nào.
Sẽ có một phần riêng nói về HTML.
2. Giao thức truyền siêu văn bản (HyperText Transfer Protocol - HTTP):
Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên
World Wide Web. Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi
và nhận các trang HTML. Giao thức này cung cấp cách thức để xử lý các yêu cầu

Trang 2

và kết quả phản hồi giữa máy khách (client) và máy chủ (server). Giữa máy khách
và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway.
Secure HyperText Transfer Protocol (HTTPS hoặc Secure-HTTP) là một
phiên bản an toàn hơn của HTTP và giao thức này chỉ cho phép truyền một thông
điệp vào một thời điểm. HTTPS vẫn được coi là an toàn vào thời điểm hiện nay.
3. Trình duyệt (Web Browser):
Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng.
Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web. Thông qua trình
duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web. Máy chủ dịch vụ web sẽ
gửi kết quả trả về trình duyệt để hiển thị cho người dùng.
Các trình duyệt thông dụng hiện nay:
 Microsoft Internet Explorer.
 Mozilla Firefox.
 Opera.
 Netscape.
 Safari.

Hình 1: Trình duyệt Mozilla Firefox

4. Địa chỉ IP (IP Address):
a. Khái niệm:
Bất ky máy tính nào kết nối Internet, từ nhỏ nhất đến lớn nhất đều được coi là
các máy chủ (host). Một số máy chủ là các mainframe hoặc những server cung cấp
dịch vụ cho nhiều nghìn người sử dụng. Một số khác là các trạm làm việc hoặc các
máy tính cá nhân chỉ có một người sử dụng. Theo quan điểm của Internet, tất cả
được gọi chung là máy chủ (host).
Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin
trên Internet. Khi người dùng gửi 1 yêu cầu đến máy chủ Web, địa chỉ IP của người

Trang 3

dùng đó sẽ được gửi kèm cùng các gói tin chứa yêu cầu đó đến địa chỉ IP của máy
chủ Web đó. Máy chủ Web sẽ gửi kết quả của việc đáp ứng yêu cầu về địa chỉ IP
được gửi kèm đó.
Để làm cho địa chỉ IP dễ nhớ hơn, nó được chia thành 4 nhóm 8 bit và rồi mỗi
nhóm được chuyển thành số thập phân tương đương. Các nhóm sẽ được phân cách
nhau bằng các dấu chấm (.).
Chẳng hạn địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu
thành 140.186.81.1
b. Phân lớp địa chỉ IP:
Địa chỉ IP được chia làm hai phần, phần mô tả địa chỉ mạng mà máy tính có
địa chỉ IP đó thuộc về và phần mô tả máy.
Địa chỉ IP tự thân nó không chỉ rõ phần nào sẽ mô tả địa chỉ mạng, phần nào
mô tả địa chỉ máy. Thành phần subnet mask được chỉ định cùng lúc khi thiết lập địa
chỉ IP sẽ giúp xác định điều này. Subnet mask cũng là 4 nhóm số nhị phân 8 bit như
địa chỉ IP, nhưng có điểm khác với địa chỉ IP là subnet mask thường gồm một dãy
liên tục các bit 1 và sau đó là một dãy liên tục các bit 0 đặt liên tiếp tiếp nhau tính từ
trái sang.
Các địa chỉ IP được phân thành 3 lớp A, B, C theo quy tắc như sau:
 Lớp A: 1 byte đầu tiên là địa chỉ mạng
 Lớp B: 2 byte đầu tiên là địa chỉ mạng
 Lớp C: 3 byte đầu tiên là địa chỉ mạng
Thể hiện địa chỉ theo từng bit:
 Lớp A: 0-7 bit địa chỉ mạng-24 bit địa chỉ host
 Lớp B: 10-14 bit địa chỉ mạng-16 bit địa chỉ host
 Lớp C: 110-21 bit địa chỉ mạng-8 bit địa chỉ host
Các số được in đậm là những bit đầu tiên trong địa chỉ IP.
Thể hiện địa chỉ theo hệ thập phân:

 Lớp A: 1-125.host.host.host
 Lớp B: 128-191.network.host.host
 Lớp C: 192-223.network.network.host
Có thể tổng hợp những điều trên trong bảng sau:
Available Network
Default Subnet
Class
# of Networks # of Hosts
Address
Mask
A
1-125
126
16.7 triệu
255.0.0.0
B
128-191
16,384
65,536
255.255.0.0
C
192-223
2,097,152
256
255.255.255.0
c. Cấp phát địa chỉ IP:

Trang 4

Số lượng địa chỉ IP có thể cấp phát được dễ nhận thấy là có giới hạn. Việc cấp
phát địa chỉ IP trên Internet (thường được gọi là địa chỉ IP thực) vì thế cần được
quản lý chặt chẽ. Trên thế giới, tổ chức quốc tế được trao nhiệm vụ quản lý việc cấp
phát địa chỉ IP là ICANN.
Đặt trường hợp một công ty có một Website và cần đưa nó lên 1 máy chủ để
mọi người trên Internet đều có thể truy cập được. Nếu máy chủ này đặt ngay tại
công ty đó, nó phải được cấp phát một địa chỉ IP thực. Trường hợp công ty đó
không có máy chủ nào có địa chỉ IP thực, họ sẽ phải thuê chỗ đặt website từ những
công ty chuyên cung cấp dịch vụ hosting. Những vấn đề cụ thể liên quan đến web
hosting sẽ được đề cập ở phụ lục 2.
Trường hợp ta đang thiết lập một mạng cục bộ (LAN), ta hoàn toàn có thể thiết
lập cấu hình địa chỉ IP tùy ý cho những máy tính cũng như những thiết bị cần có địa
chỉ IP trong mạng đó. Tuy nhiên địa chỉ đó chỉ có ý nghĩa trong mạng cục bộ đó mà
thôi.

Hình 2: Cấu hình địa chỉ IP

5. Tên miền (Domain Name) và URL (Uniform Resource Locator):
Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việc
truy cập đến các tài nguyên trên mạng.
Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System) để
khắc phục trở ngại này. Domain Name System lưu trữ cơ sở dữ liệu các tên miền
(domain name) để giúp người sử dụng dễ dàng hơn trong việc tìm kiếm một địa chỉ
trang web cụ thể hơn là dùng hệ thống địa chỉ IP.
Khi sử dụng Domain Name System, người dùng có thể sử dụng một tập hợp
các ký tự hay các từ dễ nhớ hơn thay vì gõ địa chỉ IP để truy cập đến một Web site
nào đó. Những từ/cụm từ đó được gọi là Uniform Resource Locator, hoặc viết tắt
là URL. Dịch vụ tên miền (Domain Name Service) tìm kiếm địa chỉ IP tương ứng

Trang 5

với URL mà người sử dụng nhập vào và sử dụng địa chỉ IP đó để tìm đến trang web
mà người sử dụng mong muốn.
Những máy chủ chạy dịch vụ tên miền được gọi là máy chủ tên miền (Domain
Name Server).
a. Các quy định liên quan dến tên miền (Domain Name):
Phân cấp tên miền :
Root
Root

gov

mil

com

net

product

Top level domain

Second level domain

amd

news

edu

contact

Sub domain

Các dạng tên miền cấp 1 dùng chung:
 COM (commercial): thương mại.
 EDU (education): liên quan đến giáo dục.
 GOV (government): các tổ chức chính phủ.
 ORG (organization): các tổ chức khác.
 NET (network): các mạng.
 INT (International treaty organizations): các tổ chức quốc tế (hiện chủ
yếu gồm NATO).
 MIL (US military organizations): các tổ chức quân sự.
 Tên miền quốc gia (us, vn, uk, …).
Hệ thống tên miền cấp 1 này không phải là bất biến. Hiện nay ngày càng có
thêm nhiều tên miền cấp 1 được thông qua và cho phép sử dụng.
b. Các quy định liên quan dến URL:
Cấu trúc của URL:
protocol://host_name[:port_num][/path][/file_name]
Trong đó:
Protocol: một trong các giao thức trên Internet, chẳng hạn http, ftp, …
Host name: tên máy chủ
Port num: cổng giao tiếp. Mặc nhiên với dịch vụ WWW là cổng 80.
Path và filename: đường dẫn đến tập tin.
6. Các tổ chức trên Internet:
a. Internet Society (ISOC):

Trang 6

ISOC là tổ chức quốc tế vô chính phủ có mục tiêu đẩy mạnh sự hợp tác toàn
cầu và phối hợp Internet với các công nghệ và ứng dụng làm việc trên Internet.
Web site của ISOC ở điạ chỉ .
b. Internet Architecture Board (IAB):
IAB là ban cố vấn kỹ thuật của ISOC. Nhiệm vụ của họ là đề cử cho các
cương vị của IETF và các ứng cử viên IESG.
Web site của IAB là ở />c. Internet Engineering Task Force (IETF):
Là tổ chức chịu trách nhiệm sưu liệu và lập nên các chuẩn và giao thức trên
Internet.
Mọi người có đề xuất hoặc ý tưởng liên quan đến quy trình hoạt động hay các
giao thức trên Internet đều có quyền đề đạt một Request For Comments, gọi tắt là
RFC lên IETF. Người ta gọi nó là Request for Comments vì khi RFC này được đưa
lên, mọi người đều có quyền trao đổi, tranh luận về đề tài này. Mỗi RFC sẽ được
đánh một số định danh riêng biệt, và sau đó sẽ được quyết định có triển khai thực
hiện hay không. Một vài RFC rất nổi tiếng hoặc tốt đến mức chúng đã trở thành
chuẩn được công nhận và góp phần quy định cách thức Internet vận hành.
Website của IETF: .
d. Internet Engineering Steering Group (IESG):
IESG được ủy quyền bởi ISOC để điều hành kỹ thuật cho các hoạt động IETF
và các quá trình tiêu chuẩn hoá Internet.
Web site của IESG là />e. Internet Network Information Center (InterNIC):
InterNIC là kết quả của sự hợp tác giữa NSF (National Science Foundation),
công ty AT&T và công ty Network Solutions, Inc. Tổ chức này cung cấp việc đăng
ký tên miền trên Internet.
Web site của InterNIC : .
f. World Wide Web Consortium (W3C):
World Wide Web có một tổ chức làm công việc bảo đảm rằng mọi thứ vẫn
đang diễn ra trôi chảy và các chuẩn vẫn đang được tôn trọng. Tổ chức này được gọi
là World Wide Web Consortium, gọi tắt là W3C. Tổ chức này ban đầu được dẫn dắt

bởi Phòng thí nghiệm về công nghệ máy tính MIT của Tim Berners-Lee (người phát
minh ra World Wide Web) và Al Vezza. Họ là những người chịu trách nhiệm phát
triển các giao thức chung cho việc cải tiến World Wide Web.
Web site:
g. Internet Corporation of Assigned Names and Numbers (ICANN):

Trang 7

Được Joe Postel sáng lập năm 1998, ICANN là một tổ chức phi lợi nhuận quản
lý tên miền Internet và địa chỉ IP.
III.

Một số khái niệm khác:
1. Internet Access Provider (IAP):

Nhà cung cấp cổng truy cập Internet (IAP) quản lý đường truyền và các cổng
truy cập Internet và cho các ISP thuê đường truyền này. Tại Việt Nam, tập đoàn
Bưu chính Viễn thông là đơn vị được giao làm IAP.
2. Internet Service Provider (ISP):
Một nhà cung cấp dịch vụ Internet (ISP) quản lý một phân vùng trên Internet
và bán kết nối Internet cho khách hàng. Họ cũng cấp cho khách hàng một địa chỉ
email. Nói cách khác, họ cung cấp cho khách hàng những dịch vụ Internet cơ bản
nhất.
Một số ISP tại Việt Nam:
 Công ty tin học Bưu điện:
 FPT: .
 Viettel: .
3. Internet Content Provider (ICP):
Nhà cung cấp thông tin lên Internet (ICP) là tổ chức/cá nhân được cấp phép

đưa thông tin lên Internet. Những báo điện tử được cấp phép tại Việt Nam chính là
các ICP.
4. Webpage:
Là một trang web. Có thể hiển thị thông tin lên trình duyệt web.
5. Website:
Một Web site là một tập hợp các trang web và hình ảnh đồ họa được liên kết
với nhau thông qua hyperlink.
Web sites cũng có thể chứa các nội dung multimedia, scripts, và database.
6. Web server:
Máy chủ trên Internet lưu trữ trang web cũng như những thông tin động khác.
Chạy phần mềm máy chủ web như Apache, IIS (Internet Information Services), …
Đáp ứng yêu cầu (request) từ các máy tính trên mạng Internet.
7. Search engine:
Cơ chế tìm kiếm. Là những site trên Internet hỗ trợ người sử dụng tìm kiếm
các trang web theo từ khóa.
IV.

Một số dịch vụ trên Internet:
1. World Wide Web:

Trang 8

Đây là dịch vụ thông dụng nhất trên Internet. Cho phép người dùng truy cập và
xem thông tin trên các website. Người dũng phải có trình duyệt web và biết địa chỉ
của website muốn truy cập.

Hình 3: Trang chủ của công ty Microsoft

2. Email

Email, gọi đầy đủ là Electronic mail, là một dịch vụ có từ rất lâu trên mạng
máy tính toàn cầu. Đây là dịch vụ cho phép người dùng gửi thông điệp điện tử cho
nhau thông qua mạng viễn thông.
Để có thể sử dụng email, người dùng phải có địa chỉ email. Địa chỉ này có
dạng name@domainname.

Hình 4 : Yahoo Mail

Trang 9

Hình 5: Gmail

Hình 6: Outlook Express

3. Dịch vụ truyền file (FTP)
FTP, gọi đầy đủ là File Transfer Protocol, là một dịch vụ cho phép truyền tải
file giữa những máy tính trên Internet với nhau. Người dùng sử dụng trình duyệt
hoặc các chương trình chuyên biệt để kết nối vào FTP server.
Một số chương trình thường dùng:
WS_FTP ()
CuteFTP ()
FTP Explorer ()
4. Chat

Trang 10

Chat là dịch vụ cho phép người dùng hội thoại trực tiếp trên Internet. Sau
nhiều năm phát triển, chat đã có thể truyền tải cả văn bản lẫn âm thanh, video, giúp

việc kết nối giữa con người với nhau càng trở nên dễ dàng hơn.
Một số chương trình chat thông dụng:
AOL Instant Messenger ()
Yahoo Messenger ()

Hình 7: Yahoo Messenger for Windows Vista

5. Blog
Xuất hiện năm 1997, blog là một dạng nhật ký điện tử do từng cá nhân lập nên
trên mạng. Chủ blog viết các blog entry và những người dùng khác comment, chia
sẻ. Các blogger đang tạo thành các cộng đồng xã hội có tầm ảnh hướng lớn trên
mạng.
Một số trang web cho phép tạo blog:
Yahoo 3600: />
/> /> />
Trang 11

Hình 8: Một trang blog trên Blogger.com

Hình 9: Một trang blog trên

Trang 12

CHƯƠNG

2
I.

NGÔN NGỮ HTML

Giới thiệu:

HTML, viết đầy đủ là Hyper Text Markup Language – Ngôn ngữ đánh dấu
siêu vă bản, là ngôn ngữ nền tảng của Web.
HTML được thiết kế bởi các nhà vật lý học tại viện CERN. Cùng với trình
duyệt Mosaic và World Wide Web, HTML đã giúp mang đến một bộ mặt mới cho
Internet. Internet đã trở nên dễ sử dụng hơn và có thể đến với đông đảo người dùng
trên toàn thế giới thông qua các trang web.
HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập
ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML”. Khi một trang web được tải
về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển
thị.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE></HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>

II.
Các khái niệm chung:
1. Tài liệu HTML:
Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu
là .htm hoặc .html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web
biết cách hiển thị nội dung đó.
Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn

giản như Notepad hay TextPad.
2. Cấu trúc của một tài liệu HTML:
Tài liệu HTML được chia làm 3 phần, cụ thể như sau:
a. HTML section
Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML>
Cặp tag này định nghĩa phạm vi của văn bản HTML.
b. Header section
Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD>

Trang 13

Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web,
các từ khóa dùng để tìm kiếm và nhận diện trang web, …. Những thông tin này
không được hiển thị trên trang web.
c. Body section
Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY>
Phần này chứa nội dung của trang web và các tag quy định định dạng của nội
dung đó.
3. Thành phần HTML (HTML elements):
Hầu hết các thành phần HTML đều có tag bắt đầu và tag kết thúc tương ứng.
Dưới đây là cấu trúc chung của một thành phần HTML:
<tag_name>string of text</tag_name>
Trong đó <tag_name> là tag bắt đầu, string of text là nội dung của thành phần
HTML và </tag_name> là tag kết thúc.
Các tag HTML có thể được nhập liệu không phân biệt chữ hoa hoặc chữ
thường. Tuy nhiên, cũng cần lưu ý là tổ chức W3C đề nghị dùng chữ thường trong
phiên bản HTML 4, và XHTML (HTML thế hệ kế tiếp) bắt buộc phải dùng chữ
thường cho tag.
4. Thuộc tính của tag HTML

Các thẻ HTML có thể có thuộc tính. Thuộc tính cung cấp thêm thông tin cho
một thành phần HTML.
Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table>. Với một thuộc
tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung :
<table border="0">
Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value".
Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML.
Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ
thường.
Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy. Thông thường
người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận.
III.
Các tag HTML cơ bản:
1. Heading:
Các cấp heading được định nghĩa với các thẻ từ

đến

.

định
nghĩa heading lớn nhất.

định nghĩa heading nhỏ nhất.
HTML tự động thêm vào các dòng trống trên và dưới heading.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>

Trang 14

</HEAD>
<BODY>
<H1>Introduction
<H2>Introduction
<H3>Introduction

<H4>Introduction
<H5>Introduction
<H6>Introduction
</BODY>
</HTML>

to
to
to
to
to
to

HTML</H1>
HTML</H2>
HTML</H3>
HTML</H4>
HTML</H5>
HTML</H6>

2. Paragraph:
Đoạn văn bản được định nghĩa bởi thẻ

.
HTML tự động thêm vào các dòng trống trên và dưới đoạn.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>

This is a paragraph

This is another paragraph

</BODY>
</HTML>

3. Ngắt dòng (line break):
Thẻ
được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt
đầu một đoạn mới. Thẻ
sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML.

là một thẻ rỗng. Nó không có thẻ đóng.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY>

This
is a para
graph with line breaks

</BODY>
</HTML>

4. Đường kẻ ngang (Horizontal Rule):
Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web.
Trong HTML, thẻ <hr> không có thẻ đóng.
Dưới đây là những thuộc tính của thẻ này:
Thuộc tính
Giá trị
Ý nghĩa
align
center
Chỉ định trạng thái canh lề đường kẻ
left
ngang.
right

Trang 15

Thuộc tính
noshade

Giá trị
noshade

size

pixels
%
pixels
%

width

Ý nghĩa
Khi được set, thuộc tính này quy định
đường kẻ ngang sẽ được vẽ bằng 1 màu
duy nhất. Khi không được set, đường kẻ
ngang sẽ được phối bằng 2 màu
Chiều cao của đường kẻ ngang
Độ rộng của đường kẻ ngang

Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>

<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>

50%>
<HR size = 15 align = left width = 80%>
<P>This is going to be real fun
<H2>Using another heading</H2>
<P ALIGN=center> Another paragraph element
</BODY>
</HTML>

5. Chú thích trong HTML
Chúng ta dùng thẻ comment để thêm các đoạn chú thích vào HTML source
code. Trình duyệt web sẽ bỏ qua dòng chú thích này.
Cú pháp:

6. Một số lưu ý
Khi viết văn bản HTML, chúng ta không thể đoan chắc văn bản đó sẽ được
hiển thị thế nào trong một trình duyệt khác. Mặt khác, văn bản sẽ được định dạng
lại mỗi khi người dùng thay đổi kích thước cửa sổ trình duyệt. Đừng định dạng văn
bản bằng cách thêm vào các khoảng trắng hoặc những dòng trống vào văn bản web.
HTML sẽ xóa bớt những khoảng trắng được nó coi là dư. Một dãy khoảng
trắng liên tiếp bất ky sẽ được coi là một khoảng trắng duy nhất. Ngoài ra, trong
HTML, một dòng mới sẽ được coi là một khoảng trắng.
Việc sử dụng các thẻ

để thêm vào các dòng trống cũng là một thói quen
xấu. Thay vào đó, hãy dùng thẻ
.
Thẻ

có thể được sử dụng mà không có thẻ kết thúc

. Tuy nhiên, phiên
bản HTML kế tiếp sẽ không cho phép bỏ qua bất ky thẻ kết thúc nào.
IV. Các tag HTML định dạng:
1. Các tag định dạng văn bản:

Tag
<b>

Ý nghĩa
Tô đậm văn bản
Trang 16

Tag
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
<s>
<strike>
<u>
Ví dụ :

Ý nghĩa
Định nghĩa văn bản có size lớn hơn bình thường
Định nghĩa văn bản được nhấn mạnh (emphasized)
Làm cho văn bản nghiêng
Định nghĩa văn bản có size nhỏ hơn bình thường
Tô đậm văn bản
Định nghĩa chỉ số dưới

Định nghĩa chỉ số trên
Định nghĩa văn bản được “thêm vào”
Định nghĩa văn bản đã bị xóa
Định nghĩa văn bản đã bị xóa. Nên dùng <del> thay cho tag này.
Định nghĩa văn bản đã bị xóa. Nên dùng <del> thay cho tag này.
Gạch dưới văn bản

<html>
<body>
<b>This text is bold</b>

<strong>This text is strong</strong>

<big>This text is big</big>

<em>This text is emphasized</em>

<i>This text is italic</i>

<small>This text is small</small>

This text contains<sub>subscript</sub>

This text contains<sup>superscript</sup>

This text contains <ins>inserted</ins>
text

This text contains <del>deleted</del>
text

This text contains <s>deleted</s> text

This text contains <strike>deleted</strike>
text

This text contains <u>underlined</u>
text

</body>
</html>

Kết quả:

2. Một số tag khác:
Tag


<blockquote>
<q>
Ví dụ:

Ý nghĩa
Định nghĩa văn bản được định dạng sẵn
Tạo vùng chú thích dài
Tạo vùng chú thích ngắn

<html><body>

This is
preformatted text.
It preserves
both spaces
and line breaks.
</pre>
The pre tag is good for displaying
computer code:


for i = 1 to 10
print i
next i
</pre></body></html>

Ví dụ:

Trang 17

Kết quả:


<html>
<body>

Kết quả:

Here comes a long quotation:
<blockquote>
This is a long quotation. This is a
long quotation. This is a long
quotation. This is a long quotation.
This is a long quotation.
</blockquote>
Here comes a short quotation:
<q>
This is a short quotation
</q>

With the block quote element, the
browser inserts line breaks and
margins, but the q element does not
render as anything special.

</body>
</html>


V.

Các ký tự đặc biệt:

Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn (<)
cho biết điểm bắt đầu của một thẻ HTML. Phần dưới đây trình bày cách chèn những
ký tự này vào nội dung trang web như những ký tự thông thường khác.
Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand (&), phần tên
thực thể được quy định trước hoặc dấu # và số hiệu thực thể (cũng được quy định
trước), và cuối cùng là dấu chấm phẩy (;).
Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong
văn bản HTML.
Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường.
Result Description
Entity Name
Entity Number
non-breaking space
 
 
<
less than
<
<
>
greater than
>
>
&
ampersand
&

&
"
quotation mark
"
"
'
apostrophe
' (does not work in IE)
'
¢
cent
¢
¢
£
pound
£
£
¥
yen
¥
¥
§
section
§
§
©
copyright
©
©
®

registered trademark ®
®
×
multiplication
×
×
÷
division
÷
÷
VI.

Siêu liên kết (hyperlink):
Trang 18


Siêu liên kết thường được dùng để liên kết đến một tài liệu khác trên web.
Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này
1. Cú pháp:
<a href="url">Text to be displayed</a>
Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tính
href được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bản
nằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = “lavender”>

</HTML>

2. Thuộc tính target:
Thuộc tính target xác định liên kết sẽ được mở ra ở đâu. Ví dụ sau đây sẽ mở
trang Vietnamnet trong một cửa sổ trình duyệt mới
<a href=" target="_blank">Visit Vietnamnet!</a>

3. Thuộc tính name:
Thuộc tính name được sử dụng để tạo một điểm dừng trong trang web. Khi sử
dụng điểm dừng chúng ta có thể nhảy tới một vị trí cụ thể trên trang web thay vì để
người dùng phải cuộn trang và tìm nội dung mình muốn xem.
Dưới đây là cú pháp để tạo nên một điểm dừng:
<a name="label">Text to be displayed</a>
Với label là tên của điểm dừng muốn tạo. Điểm dừng sẽ được tạo tại vị trí đặt
tag <a>.
Chẳng hạn, để tạo một điểm dừng có tên là Chapter1, ta thực hiện như sau:
<A NAME=“Chapter1”> Chapter 1</A>
Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau:
Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa
điểm dừng:
<A HREF=“#Chapter1”> Go to Chapter 1</A>
Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang
web chứa điểm dừng:
<A HREF=“URL#Chapter1”> Go to Chapter 1</A>
Với URL là địa chỉ của trang web chứa điểm dừng.
4. Liên kết đến địa chỉ email:
Ví dụ:

Trang 19

This is a mail link:
<a href="mailto:?subject=Hello%20again">
Send Mail</a>

<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.

</body>
</html>

Ví dụ:
<html>
<body>

This is another mailto link:
Send mail!</a>

<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.

</body>

</html>

VII. Bảng biểu:
1. Quy định chung:
Bảng trong HTML được định nghĩa bởi thẻ <table>. Một bảng được chia thành
các dòng (với thẻ <tr>), và mỗi dòng lại được chia thành các data cell (được định
nghĩa bởi thẻ <td>). Chữ td thay thế cho cụm từ "table data". Một data cell có thể
chứa text, image, list, paragraph, form, horizontal rule, table, …
Ví dụ:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

2. Một số thuộc tính của bảng:

Trang 20

-

BORDER=“x” : kích thước viền
BGCOLOR: màu nền
ALIGN: canh chỉnh

WIDTH, HEIGHT : kích thước
CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô
CELLSPACING: khoảng cách giữa các ô trong bảng
ROWSPAN, COLSPAN: trộn các dòng hoặc cột
<TR>: dòng, <TD> cột, <TH>: heading
<CAPTION>: tiêu đề mô tả bảng

Hình 4: Biểu diễn thuộc tính của table

VIII. Tạo danh sách:

Ví dụ:
<H3>Những kiến thức căn bản về HTML</H3>
<OL>
<LI>Cấu trúc tập tin HTML</LI>
<UL>
<LI>Cấu trúc tập tin HTML</LI>
<LI>Các Tag HTML</LI>
</UL>
<LI>Các Tag cơ bản</LI>

Trang 21

<UL>
<LI>Định dạng văn bản</LI>
<LI>Định dạng hình ảnh</LI>
<LI>Định dạng liên kết</LI>
</UL>
<LI>Ví dụ </LI>

<UL>
<LI>Code</LI>
<LI>Minh họa</LI>
</UL>
</OL>

Dưới đây là kết quả của đoạn code trên:

IX. Chèn hình ảnh:
1. Quy định chung:
Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>.
Thẻ <img> là một thẻ rỗng. Điều này có nghĩa là thẻ <img> chỉ chứa các thuộc
tính và không có thẻ kết thúc.
Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src. Src là
viết tắt của chữ "source". Giá trị của thuộc tính src là URL của hình ảnh chúng ta
muốn hiển thị trên trang.
Cú pháp chung như sau:
<img src="url">
2. Thuộc tính ALT:
Thuộc tính "alt" báo cho người đọc trang web biết nội dung của hình ảnh trong
trường hợp trình duyệt không thể hiển thị hình ảnh đó. Trình duyệt sẽ hiển thị
“alternate text” tha vì hiển thị hình ảnh.

Trang 22

Cú pháp chung:
<img src="url" alt=”alternate text”>
3. Ví dụ:
Ví dụ 1:

<html>
<body>

Kết quả:

An image from another folder:
width="33" height="32">

An image from W3Schools:
src=" />

</body>
</html>

Ví dụ 2:
<html>
background="background.jpg">

Kết quả:

Look: A background image!

Both gif and jpg files can
be used as HTML
backgrounds.

If the image is smaller

than the page, the image will
repeat itself.

</body>
</html>

Ví dụ 3:
<html>
<body>

You can also use an image as a link:
<a href="lastpage.htm">
width="65" height="38">
</a>

</body>
</html>

Ví dụ 4:
<html>
<body>

Click on one of the planets to watch it closer:

Trang 23

Kết quả:

<b>Note:</b> The "usemap" attribute in the img element refers to the "id" or
"name" (browser dependant) attribute in
the map element, therefore we have added both the "id" and "name" attributes to
the map element.