VIỆN ĐẠI HỌC MỞ HÀ NỘI

KHOA CÔNG NGHỆ ĐIỆN TỬ - VIÊN THÔNG
-----------------------------------------------JVjff Ạ

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
ĐÈ TÀI: “THIẾT KÉ VÀ XÂY DỤNG WEBSITE
BÁN HÀNG MỸ PHÁM

THS.
THỊdẫn
HẠNH
GiáoQUÁCH
viên hướng
NGUYÊN
Sinh viên THỊ
thựcLOAN
hiện
K16A
Lóp
2013-2017
Khóa
ĐẠI
Hệ HỌC CHÍNH QUY

Hà Nội, Tháng 5 năm 2017


MỞ ĐÀU
Internet là một trong những sản phẩm có giá trị het sức lớn lao và ngày

càng

trớ

thành một công cụ khơng thể thiếu, là nền tàng chính cho sự truyền tải, trao
đồi

thơng

tin trên tồn cầu. Giờ đây, mọi việc liên quan đến thông tin trờ nên thật dễ
dàng

cho

người sử dụng: chi cần có một máy tính kết nối internet và một dịng dữ liệu
truy

tỉm

thì gần như lập tức... câ thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có
đầy

đú

thơng tin, hình ánh ...
Cùng với đó khi cơng nghệ ngày càng phát triền con người có trong tay
công

cụ


hữu hiệu làm tăng năng suất lao động và hiệu q cơng việc chính vì vậy
thương

mại

điện tứ một trong những cơng cụ đó. Bill Gate đã từng nói: “Năm 2015, bạn có
2

lựa

chọn: một là kinh doanh cùng internet, 2 là bạn không kinh doanh nữa”.
Thương

mại

điện tứ đã trở thành một phương tiện giao dịch quen thuộc của các công ty
thương

mại

lớn trên thế giới. Nó đang có tốc độ phát triến rat mạnh. Và hầu hết các công
ty

bán

hàng hiện nay đều là các công ty thương mại điện tử và mua sắm qua mạng đà
trớ
thành thói quen hàng ngày của nhiều người.
Giờ đây, thương mại điện tử đã khăng định được vai trò xúc tiến và thúc
đấy


sự

phát triến cùa doanh nghiệp. Đối với một cửa hàng hay một công ty, việc
quảng

bá

và


giới thiệu đến khách hàng các sàn phấm mới đáp ứng được nhu cầu của khách
hàng

sẽ

là cần thiết. Vậy phải quảng bá thế nào đó là xây dựng được một Website cho
cừa
hàng của mình quãng bá tất cà các sán phẩm của mình bán.
Đế hiểu kỹ hơn về một website thương mại điện tứ nên em chọn đề tài:
“THIẾT
KẾ VÀ XÂY DỤNG WEBSITE BÁN HÀNG MỸ PHẦM”. Sử dụng ngôn
ngữ

PHP,

HTML, MYSQL,CSS, JAVASCRIPT và cơng cụ hỗ trợ lập trình
Dreamweaver
phan mền Xampp.
Nội dung bao đồ án gồm có 4 chương:

Chương 1: Cơ sở lý thuyết
Chương 2: Phân tích các chức năng của website
Chương 3: Thiết kế website
Chương 4: Tổng kết

và


LỜI CẢM ƠN
Lời đầu tiên em xin chân thành kính gửi đến cô Ths.Quách Thị Hạnh lời cảm
ơn
chân thành và sâu sắc nhất. Em cảm ơn cô vi đã nhiệt tình, tận tinh chi bão,
hướng

dần

em trong suốt quá trình làm báo cáo thực tập.
Em xin chân thành gửi lời cảm ơn đến tồn thể các thầy cơ giáo trong Khoa
Điện
tử - Thông tin Trường Viện Đại Học Mớ Hà Nội đã cung cấp cho em đầy đù
các

kiến

thức về chuyên môn cũng như các kinh nghiệm trong cuộc sống hàng ngày
trong

suốt

thời gian qua.

Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn
cùa

em

còn nhiều hạn chế nên em khơng thể tránh khói những thiếu xót và cũng như
chưa

phát

huy hết những ý tưởng, khả năng hỗ trợ của ngơn ngữ và kỹ thuật lập trình vào
đề

tài.

Trong q trình xây dựng website, khơng thế tranh khỏi những sai xót. Vi thế,
em

rất

mong nhận được sự góp ý của các thầy cô và các bạn đe đề tài cùa em được
hồn
chình hơn.
Một lần nữa em xin chân thành cảm ơn!


SINH VIÊN THỤC HIỆN

Nguyền Thị Loan



MỤC LỤC
DANH MỤC BẢNG
DANH MỤC HÌNH
DANH SÁCH CÁC THUẬT NGŨ VIÉT TẤT
CHƯƠNG 1: CO SỎ LÝ THUYẾT......................................................................1
I. GIỚI THIỆU CHUNG....................................................................................... 1

1. Khái niệm Website................................................................................................ 1
2. Tên mien (Domain).............................................................................................. 1
3. Hosting................................................................................................................. 3
4. Mã nguồn (source code)....................................................................................... 5
5. Phân loại Website................................................................................................. 5
II. TÌM HIÉU VÈ CÁC NGƠN NGŨ LẬP TRÌNH WEB................................... 7
ỉ. Tìm hiểu về HTML.............................................................................................. 7
2. Tìm hiểu về css.......................................................................................16
3. Tìm hiếu về Javascrip........................................................................................ 17
4. Tìm hiếu về ngơn ngữ lập trình PHP................................................................ 31
III. HỆ CO SỞ DŨ LIỆU MYSQL................................................................. 41
1. Các khái niệm cơ bản........................................................................................ 41
2. Các kiêu dữ liệu................................................................................................. 41
3. Các lệnh thao tác với CSDL.............................................................................. 43
4. Các câu lệnh truy vẩn dữ liệu........................................................................... 45
5. Kết họp PHP và MYSQL trong ứng dụng website............................................ 45
IV.
QUY TRÌNH THIÉT KẾ MỌT WEBSITE......................................... 46
/. Quy trình thiết kế website.................................................................................. 46
2. Cách thức xuất bản website............................................................................... 47
3. Lựa chọn và mua tên miền................................................................................ 47
4. Lựa chọn và thiết lập web server....................................................................... 48

5. Upload website................................................................................................... 48
6. Cập nhật và chỉnh sửa website.......................................................................... 48
7. Quáng bá............................................................................................................ 48


GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYÊN THỊ LOAN

8. Báo trì................................................................................................................ 49
CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB............................50
I. GIỚI THIỆU CHUNGVÈ WEBSITE....................................................................50

1. Mục tiêu............................................................................................................. 50
2. Yêu cầu.............................................................................................................. 50
II.
CHÚC NÀNG WEBSITE..........................................................................51
ĩ. Những chức năng cơ hán của website.................................................................. 51
2. Sơ đồ phân cấp các chức năng............................................................... 52
CHƯƠNG 3: THIẾT KÉ WEBSITE..................................................................58

I. CƠNG CỤ HỊ TRỌ THIẾT KÉ WEBSITE....................................................................... 58
II. THIÉTKẾCƠSƠDŨ LIỆU................................................................................................... 59
7. Tạo cơ sở dữ liệu................................................................................................... 59
2. Thiết kế giao diện.................................................................................................. 61
CHƯƠNG 4: TÓNG KẾT..................................................................................70
TÀI LIỆU THAM KHẢO...................................................................................71


DANH MỤC BẢNG

Bảng 1: các the nhóm inline..................................................................................................13
Bảng 2: thuộc tính của the <frameset>...............................................................................14
Bãng 3: thuộc tính của thẻ <frame>....................................................................................15
Bảng 4: thuộc tính của thẻ <table>......................................................................................15
Bảng 5: thuộc tính của thẻ <tr>...........................................................................................16
Bảng 6: thuộc tính của thẻ <td>...........................................................................................16
Bảng 7: các ký tự đặc biệt và ý nghĩa củatrong javascript..............................................20
Băng 8: các thuộc tính của mảng.........................................................................................26
Bảng 9: các thuộc tính của đối tượng math.......................................................................28
Bảng 10: các phưong thức của đối tượng math.................................................................28
Bảng 11: các phưong thức của đối tượng string................................................................30
Bảng 12: các nhóm phưong thức của đốitượng date........................................................30
Bảng 13: các kiểu dữ liệu số của mysql...............................................................................42
Bảng 14: các kiểu dữ liệu string cua mysql........................................................................43
Bảng 15: các kiểu dữ liệu ngày tháng của mysql..............................................................43
Bảng 16: các thuộc tính của the cột trong mysql..............................................................44


DANH MỤC HÌNH
Hình 1: cây phân cấp đối tưọTig.........................................................................................27
Hình 2: q trình thơng dịch trang php.............................................................................31
Hình 3: sơ đồ luồng dữ liệu ngữ cảnh.................................................................................52
Hình 4: sơ đồ phân cấp chức năng cho khách

hàng....................................................53

Hình 5: SO’ đồ phân cấp chức năng của cho quảntrị viên..............................................55
Hình 6: kết nối các bảng trong cơ sở dữ liệu.....................................................................59
Hình 7: bảng danh mục săn phẩm.......................................................................................59
Hình 8: bảng sản phấm.........................................................................................................60

Hình 9: bảng thơng tin và nội dung lien hệ cua khách hàng gửi tói cửa hàng............60
Hình 10: bảng tin tức.............................................................................................................60
Hình 11: bảng đon hàng........................................................................................................61
Hình 12: bảng thơng tin đăng kí của thành viên...............................................................61
Hình 13: trang chủ................................................................................................................62
Hình 14: khi trang chủ cuộn lên..........................................................................................62
Hình 15: trang sản phẩm.....................................................................................................63
Hình 16: trang chi tiết sản phẩm.........................................................................................64
Hình 17: trang giỏ hàng........................................................................................................64
Hình 18: trang đặt hàng........................................................................................................65


DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT
WWW...............................World Wide Web
HTTP............................... HyperText

Transfer Protocol

HTTPS................................. Hypertext Transfer Protocol Secure
HTML.............................. HyperText

Markup Language

DHTML.................................Dynamic HyperText Markup Language
ASP.....................................Active Server Pages Perl
CMS.................................. Content Management System
CGI.................................Common Gateway Interface
XHTML..........................Extensible Hypertext Markup Language
URL..................................Unform Resource Locator
DNS................................Domain Name System

PHP.................................Hypertext Preprocessor
CSDL....................................Cơ Sớ Dừ Liệu
CSS.......................................Cascading Style Sheets
SQL......................................Structured Query Language


CHƯƠNG 1: CO SÒ LÝ THUYẾT
I. GIỚI THIỆU CHUNG
1. Khái niệm Website
Website là một tập hợp các trang web bao gồm văn bán, hình ảnh, video, .... mà
thơng thường nó chi nằm trong một tên miền hoặc tên miền phụ được quán lý trên
World Wide Wcb(WWW) cùa internet. Một trang wcb bao gồm nhều tệp tin HTML
hoặc XHTML có thể truy nhập bằng giao thức HTTP, HTTPS.
Website có the được xây dựng từ các tệp tin HTML( trang mạng tĩnh) hoặc vận
hành bằng các CMS chạy trên máy chú(trang mạng động). Website có thế được xây
dựng bằng nhiều ngơn ngữ khác nhau (PHP,.NET, Java, Ruby and Rails,...).
Hiện nay, đế một Website có thể vận hành trên mơi trường WWW,cần bắt buộc
phải có 3 phần chính:
-

Tên miền (Domain)

-

Hosting

-

Mã nguồn (Source code)
2.


Tên mien (Domain)

Tên miền chính là địa chi website, là một chuỗi các ký tự trong bảng Alphabet
được sắp xếp giống như tên riêng và có hoặc khơng có ý nghĩa.
2.1. Cấu tạo của tên miền
Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bời dấu (.).
Ví dụ: abc.com.vn
-

Thành phan thứ nhất “abc” là tên miền cùa máy chủ
-

Thành phần thứ 2 “com” thường gọi là tên miền thứ 2(second domain name
level) đối với các quốc gia noi chung tên miền mức 2 này do tổ chức quản lý
của quốc gia đó định nghĩa, có thê định nghĩa khác đi nhiều hay ít.

-

Thành phần cuối cùng “vn” là tên miền ở múc cao nhất (top level domain ) bao
gồm các mã quốc gia của nước tham gia internet được quy định bàng 2 chữ cái
theo tiêu chuẩn ISO-3166 như Viêt Nam là VN, Mỹ là us,... và các linh vực
dùng chung.

4- Dùng chung
-

COM: thương mại(COMmercial)



-

NET: Mạng lưới (NETwork)

-

ORG : Các tổ chức(ORGnizations)

-

INFO: Thông tin(INFOmation)

-

EDU: Giáo dục(EDUcation)

-

M0B1: Điện thoại di động

4-

Dùng ớ Mỹ

-

MIL: Quân Sự (MILitary)

-


GOV: Nhà nước (Government)
2.2.

Tính chất cơ bản của một tên miền

-

Tên miền là duy nhất và được cấp phát cho một chủ thổ nào đăng ký trước.

-

Tên miền bắt buộc phái có phần tên và phần đi.

-

Tên miền khơng được vượt quá 63 (ký tự bao gồm cã phan đuôi).
-

Tên miền chi bao gồm các ký tự trong bảng chữ cái (a-z) các số(0-9) và dấu(-).
Khoáng trắng và các ký tự đặc biệt khác đêu không hợp lệ.

-

Không bắt đầu hoặc kết thúc tên miền bàng dấu (-).

-

Tên miền không cần bắt đầu bằng http:// hoặc WWW hay http://www.
2.3.


MỘÍ số khái niệm khác liên quan đến tên miền

2.3.1.

URL

URL ( Unform Resource Locator ) được dùng đê tham chiểu tới tài nguyên trên
Internet. URL tạo nên khả năng siêu liên kết cho Website. Mồi tài nguyên khác nhau
lưu trữ trên internet được tham chiếu tới bàng địa chỉ, đó chính là URL.
■

Một URL gồm nhiều phần được liên kết với nhau:
■

URL scheme là tên giao thức ( ví dụ:http,ftp,...).

■

Tèn miền ( abc.com.vn)

■

Chi định thêm cổng ví dụ: 80,8080,443,..(có thể khơng cần)

■

Đường dẫn tuyệt đối

■


Các truy vấn (có thể khơng cần)

■

Chi định mục con(có thể khơng cần)

2.3.2.

DNS

DNS(Domain Name System) là một hệ thống cho phép thiết lập tưomg ứng giữa
địa chỉ IP và tên miền trên Internet. Tức là khi gõ tên miền trên trình duyệt, một tên


miền sẽ được cùa nó chuyền đến một địa chỉ
1P và sẽ báo cho máy tính biết và tìm đến
website.
3.

Hosting
Hosting ( hay Web hosting) là không gian trên máy chú dùng đế chứa file, dữ liệu,
nội dung cùa một website. Đế hoat động, website cần được lưu trữ trên một máy
chũ(Server) kết nối mạng Internet và hoạt động 24/2411 mỗi ngày.
Có 3 loại hình web hosting thường được dùng :
-

Windows hosting: dựa và nền tảng hệ điều hành window của Microsoft

-


Linux hosting : dựa vào nền tàng hệ điều hành linux.

-

Email hosting

-

.1. Các loại hosting
■ Shared hosting (chia sẻ)

Là một dịch vụ lưu trữ rất nhiều trang web trên một máy chú kết nối Internet. Mỗi
trang wcb được lưu trữ ở một phân vùng riêng của mình.
■ Free web hosting
Là dịch vụ lưu trừ miễn phí. Thường được quáng cáo hồ trợ. Free web hosting
service thường sc cung cap một ten mien phụ hoặc một thư mục phụ. Ngược lại, dịch
vụ này sẽ cung cấp một tên miền cấp thứ 2 cùng với các máy chủ. Nhiều máy chủ
miễn phí sẽ không cho phép sử dụng nhiều tên miền riêng.
■ Reseller hosting
Là một hình thức lưu trữ cúa máy chù web mà chủ sở hữu tài khốn có khải năng
sử dụng tài khốn của mình để phân bố lại ồ cứng lưu trừ và băng thông để lưu trữ các
trang web này.
■ Email hosting
Là dịch vụ thư điện tử đặc biệt khác với dịch vụ email miễn phí hồ trợ email hay
webmail miền phí. Email hosting cho phép tùy chinh cấu hình và số lượng lớn tài
khoản.
■ Video hosting
Là dich vụ lưu trữ cho phép các cá nhân tài lên các video vào một trang web. Sau đó
sẽ lưu trữ video trên máy chú cho phép người khác có the xem video.
■ Image hosting



Là dich vụ lưu trữ cho phép các cá nhân tải lên các hình ảnh vào một trang web. Sau
đó sẽ lưu trừ hình ánh đó trên máy chủ cho phép người khác có thế xem hình ánh.
■ File hosting
Là dịch vụ lưu trữ tập tin trực tuyến, đế lưu trữ các nội dung tĩnh. Cho phép truy cập
qua giao thức FPT được tối ưu hóa phụ vụ cho nhiều người sử dụng.
■ Windows hosting
Là dịch vụ lưu trữ rất nhiều các trang wcb trên một máy chủ chạy hệ điều hành
Window server kết nối internet. Mồi trang web có phân vùng riêng của minh thường
sứ dụng các phần mem chia hosting như hosting controller, plesk.
■ Linux hosting
Là dịch vụ lưu trữ rất nhiều các trang web trên một máy chú chạy hệ điều hành
Linux kết nối Internet. Mồi trang web có phân vùng riêng của mình thường sử dụng
các phần men chia hosting như Cpanel, Direct Admin.
■ VPS hosting (Virtual Private Server - máy chủ riêng áo)
Là một phương pháp phân vùng một máy chủ vậy lý thành máy tính nhiều máy
chú áo, trên mỗi máy ào được cài một hệ điều hành như một máy chú thật.
■ Dedicated server (máy chủ riêng)
Là máy chủ vật lý dành riêng cho việc lưu trừ website.
■ Adult hosting
-

.2.Cắc tính năng của hosting
- Tốc độ: một máy chủ chạy dich vụ web cần phải có cấu hình đủ lớn đế đám bảo
sử lý thông suốt, phục vụ cho so lượng lớn người truy cập. phải có đường
truyền kết nối tốc độ cao đe đảm bảo không bị nghẽn mạch dữ liệu.
- Dung lượng: Dung lượng của hosting là khoảng không gian bạn được phép lưu
trừ dữ liệu trên ổ cứng của máy chủ. Đe lưu trừ được đầy đú các thông tin, dữ
liệu, hình ảnh,., cùa website Hosting cần phải có dung lượng đú lớn (một vài

GB).
- Băng thông: Băng thông của hosting là lượng dữ liệu trao đối giữa web với
người dùng trong 1 tháng. Nó phái đú lớn để phục vụ các hoạt động giao dịch,
trao đổi thông tin giữa web với người sử dụng.

-

Phải hồ trợ truy xuất máy chủ bang giao túc FTP đề truy cập thông tin.


- HỖ trợ các ngôn ngừ lập trinh, cơ sở dừ liệu hoặc các cơng cụ có sẵn đế phục
các hoạt động trên web.
- Có giao diện quản lý để dề dàng quàn lý, cac tài khoăn FTP, Email,...
- Phải thường xuyên được chăm sóc, báo dưỡng nhằm tránh các rủi ro và khắc
phục kịp thời.
4. Mã nguồn (source code)
Website cần được lập trình đế hiện thị hoặc xứ lý thơng tin cho người dùng. Việc
lập trình sẽ sử dụng các câu lệnh, truy xuất CSDL, xử lý và hiến thị cho người dùng
trên trinh duyệt. Tập hợp những câu lệnh này được gọi là mã nguồn (source code).
Có rất nhiều ngơn ngữ lập trình được sử dụng đe lập trình website. Phố biến nhất
mà chúng ta thường gặp là: HTML/CSS, PHP, ASP, ASP.NET. Trong đó HTML/CSS
là 2 ngơn ngữ cơ bàn tạo nên giao diện của một website, nó có thế tạo ra các trang web
tĩnh. Các ngơn ngừ cịn lại thường dùng đế lập trình kết nối CSDL và xử lý các yêu
cầu cao hơn; cần phải kết hợp với HTML/CSS, và thường đi kèm cả với Javascript đế
tạo ra giao diện người dùng (frontend).
Từ các ngôn ngữ lập trình cơ bản trên, hình thành các Framework với nhiều thư viên
được xây dựng sằn. Các Frameword giúp người lập trinh tiết kiệm nhiều thời gian
trong việc xây dựng website. Các PHP Framework phố biến gồm: Codeigniter,
CakePHP, Yii Framework, Zend Framework,...
5.


Phân loại Website
Có 2 loại website : - Website tĩnh
- Website động
5.1. Website tĩnh
Website tĩnh là những web chi bao gồm các trang web tĩnh và khơng có cơ sở dữ
liệu đi kèm. Tức là người dùng khơng có khả năng tương tác, không thế chinh sửa
hoặc thay đổi dữ liệu được.
-

Web tĩnh thường được xây dựng từ css, HTML, Javascript(DHTML Dynamic HTML),..

-

Dùng đế thiết kế các trang web có nội dung ít cần thay đổi và cập nhật.

-

Nó chi bao gồm các trang wcb tĩnh và khơng có cơ sở dữ liệu đi kèm.


-

Web tình thích hợp với cá nhân, tồ chức, doanh nghiệp vừa và nhở mới làm
quen với môi trường internet.

4- ưu điếm:
-

Thiết kế đồ họa đẹp:


-

Tốc độ truy cập nhanh:

-

Thân thiện hơn với máy tim kiếm

-

Chi phí đầu tư thấp:

4- Nhược điềm:
-

Khó khăn trong việc thay đối và cập nhật thơng tin

-

Khó nâng cấp báo tri

-

Mỗi khi thay đổi phải vào file HTML,css hoặc Javascrip để chỉnh sửa.

5.2. Website động
Website động là web có cơ sở dữ liệu và được hồ trợ bởi các phần mềm phát triền
web. thống qhuán lý nội dung nên người dùng có thể chinh sứa hoặc thay đổi nội
dung được.

Thông tin hiến thị ớ web động được gọi là một cơ sở dừ liệu khi người dùng truy
vấn tới một trang wcb.
Web động được phát triến bằng các ngơn ngữ lập trình PHP, ASP, ASP.NET, Java,
CGI, Perl, và sử dụng các cơ sở dừ liệu như Access, My SQL, MS SQL, Oracle, DB2.

4- Ưu điếm:
-

Dễ dàng quàn lý nội dung

-

Dễ dàng nàng cấp và báo trì

-

Tương tác với người sữ dụng cao

-

Có thể xây dựng được web lớn

-

Hiện nay vần SEO tốt bới ta có thế sử dụng chúc năng Rewrite URL đề chuyên
URL thân thiện.

4- Nhược điềm:
-


Chi phí xây dựng cao.

-

Khi web lớn cần nhiều người để quàn lý.

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYÊN THỊ LOAN


11. TÌM HIẾU VÈ CÁC NGƠN NGŨ LẬP TRÌNH WEB
Website thương mại là một trang web động với mã nguồn được viết bằng các
ngơn ngữ PHP,ASP.NET, HTML,....và trang web đó có kết nối hệ cơ sờ dữ liệu, có
thế cập nhật dừ liệu, truy xuất dừ liệu thường xuyên.
Đề thiết kế một website hồn chinh nó được hình thành bời :
-

HTML: Xây dựng cấu trúc và định dạng siêu văn bản.
-

CSS: Định dạng các siêu văn bản được tạo ra từ HTML ở dạng thơ thành một
bố cục website, có màu sắc có ãnh, ....

-

Javascript: Tạo ra các sự kiện tương tác với hành vi của người dùng
-

PHP: Ngôn ngữ lập trình đế xử lý và trao đối dữ liệu giữa máy chủ đến trinh

duyệt. Là ngơn ngữ lập trình được dùng phố biến ngồi ra cịn một số ngơn ngữ
như ASP, ASP.NET, Java, CGI, Perl, ....

-

MySQL: Hệ quản trị cơ sờ dữ liệu truy vấn có cấu trúc.
1.

Tìm hiểu về HTML

HTML( Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bán được
thiết kế ra để tạo nên các trang wcb. Dùng đế định dạng bố cục, các thuộc tính liên
quan đến cách hiến thị của một trang. Là một tập hợp các thẻ đánh dấu.
Các lênh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dung
và hình thúc trinh bày cùa tài liệu HTML. Đe bắt đầu một câu lênh ta dùng thè mớ
“o” và kết thúc câu lệnh dùng thẻ đóng “</>”.
Thẻ HTML gồm:
<element attribute =value>
Với :
-

element: đe nhận dạng thẻ.

-

Attribute : để mô tả thè.

-

Value : giá trị được thiết lập cho thuộc tính

1.1. Các thuộc tính của the HTML
Thuộc tính của tác động lên nội dung của văn bàn. Được sử dụng để xác định đặc
trưng cũa một phần tứ HTML.

-

Một phần tử HTML có thế khơng có hoặc có nhiều thuộc tính.


-

Thuộc tính ln ln được chi định trong thẻ mờ.

-

Thuộc tính của một phan tử HTML gồm 2 thành phần:
•

Tên: là tên cúa thuộc tính

•

Giá trị: là những gi mà bạn muốn gán cho thuộc tính và được đặt trong
các trích dẫn.

Tên và giá trị của thuộc tính khơng phân biệt chừ hoa hay chữ thường.
- Quy tắc viết thuộc tính:
<tên thẻ tên thuộc tính=“giá trị”> Nội dung </tên thẻ>
Các thuộc tính cơ bản có thể sử dụng trong bất kì phần tử nào của HTML:


4- Thuộc tính id
Quy định một định dạng duy nhất cho một the HTML. Phải tn theo luật:
•

Phải chứa ít nhất 1 kí tự

•

Khơng có khoảng trắng

•

Khơng phân biệt chữ hoa và chữ thường.

Cú pháp: <tên thẻ id= “tên id”> </tên thẻ>

4- Thuộc tính title
Thuộc tính title chỉ định thơng tin thêm về thẻ, thường được hiến thị khi di chuyến qua
phần tử đó, nó thường hiến thị dưới dạng tooktip text.
Cú pháp: <tên thẻ title= “thơng tin thêm”>

4- Thuộc tính style
Đế trang trí nội dung hiển thị ngay trên thẻ. các tên các class.
Cú pháp :

<tên thẻ style= “ định nghĩa các kiểu trang trí”>

4- Thuộc tính class
Thuộc tính class cho phép sừ dụng một hay nhiều class trên một thẻ. Sử dụng dấu cách
đế phân cách giữa các tên các class. Phái tuân theo luật:

•

Bắt đau với kí tự chừ khơng phân biệt hoa hay thường.

•

Bao gồm ký tự(a-z,A-Z), số(0-9), gạch ngang (-) và gạch
dưới(_)-

Cú pháp:

<tên thẻ class= “tên>


1.2.

Cấu trúc cơ bàn cùa HTML

Cấu trúc của HTML có dạng như sau, gồm 3 phần:
-

<!Doctype>: phàn khai báo chuân của html.

-

<hcad></hcad>: phần đầu cùa html, khai báo về meta, title, css, javascript,..

-

<body></body>: phần thân chứa nội dung cúa trang web.

1.3.

Các thẻ định dạng cấu trúc tài liệu

4- Thẻ html
Một tài liệu HTML luôn được bắt đau bằng thè mở <html> và kết thúc bang thè
</html>. Toàn bộ nội dung cúa tài liệu sẽ được đặt giữa cặp thẻ này.
Có cú pháp như sau:
<html>
Tồn bộ nội dung của tài liệu
</html>
Trình duyệt sẽ xem các tài liệu không sừ dụng cặp thè này như một tệp văn bàn binh
thường.

4-

Thẻ head
Thé head được dùng đe xác định cho phần mờ đầu của tài liệu.
Có cú pháp như sau:
<head>
Phần mỏ' đầu của tài liệu
</head>

5-

Thé title
Cập thẻ này chi được sử dụng trong phần mờ đầu của tài liệu, là tên của trang web
được hiến thị phai trên cùng của menubar.
Có cú pháp như sau:
<head>

<title> Tiêu đề cùa tài liệu</title>
</head>

6-

Thè body
Thẻ body hay chính là phần thân của tài liệu, trong phần thân có the chứa các
thông tin định dạng nhất định đổ đặt ảnh cho tài liệu màu nền, màu văn bán siêu
GVHD: THS. QUÁCH THỊ HẠNH

- - ------—----------( ’ H

SVTH: NGUYÊN THỊ LOAN


liên kết, đặt lề cho trang tài liệu ... những thơng tin này được đặt trong phần tham
số cùa thẻ.
Có cú pháp như sau: <body>
Phần thân của văn bản
</body>
Như vậy, cấu trúc cơ bàn của html là:
<!Doctype>
<html>
<head>
<title> Tiêu đề của tài liệu</title>
</head>
<body>
Phần nội dung của tài liệu
</body>
</html>

1.4. Nhóm các thẻ block

Các thẻ block là các thẻ dùng để sắp xếp bố cục cho trang web.

4- ThéP
Thè

dùng đế định dạng một đoạn văn bản. Thè này giúp trình duyệt xác định
đoạn văn bản trong trang HTML.

Nội dụng đoạn văn bản

4- Các thé định dạng tiêu đề
-

Thường được sứ dụng đế thể hiện cho tiêu đề cúa bài viết, bản tin hay các muc
cần nhấn mạnh.
Bao gồm các thẻ từ <h 1 > đến

-

Font chữ của nội dung trong các thè giảm từ <hl> đến

.

<

hl> Tiêu đề 1 </hl>

<

h2> Tiêu đề 2

<


h3> Tiêu đề 3

<

h4> Tiêu đề 4

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYÊN THỊ LOAN

(

10

)

Tiêu đề 5

<

hó> Tiêu đề 6

4- Thé div (division - phân chia)
Thẻ div đế phân chia khu vực hay vùng, giúp cho trình duyệt hiêu rõ những vùng được
bố cục trên trang wcb.
<div> </div>

4-

The xác định danh sách

Sứ dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sứ dụng
cho danh sách khơng có phần nội dung mơ tá. gồm có 3 thẻ:

-

<dl></dl>: (definition list) có nghĩa là xác định danh sách.

-

<dtx/dt>: (defines an item) có nghĩa là xác định một mục.
-

<dd></dd>: (defines describe an item) có nghĩa là xác định một mô tả của một
mục.

3

thẻ nay phái luôn tồn tại cùng nhau khơng thề thiếu 1 trong 3 thẻ.

Có cấu trúc như sau:
<dl>
<dt>c/dt>
<ddx/dd>
</dl>

4

- Thè danh sách có thứ tự và khơng có thứ tự
• Danh sách có thứ tự
Dùng 2 cặp thẻ:

* <olx/ol>: (ordered list) là danh sách có thứ tự.
■ <lix/li>: (list item) là các mục cùa danh sách.
Cấu trúc : <ol>
<lix/Ii>
</ol>
• Danh sách khơng có thứ tự
Dùng 2 cặp thé:
■

<ulx/ul>: (unordcrcd list) là danh sách khơng có thứ tự.


■
Cấu trúc:

<li></li>: (list item) là các mục của danh sách .
<ul>
<li></li>
</uI>

1.5.

Nhóm các thẻ inline
• Nhóm các thẻ inline chi chứa nội dung cho text hoặc các thẻ inline khác, đế
hiển thị nội dung của văn bàn.
•

Nhóm thẻ inline nên được bao ngồi bời nhóm các thẻ block.

•


Những thẻ trong nhóm này có thế được lồng vào nhau.

•

Khơng được sir dụng các thè khác bên trong các thẻ inline.

Thẻ

Mô tá

<a></a>

Thê dùng đế tạo một liên kết từ tràn wcb này sang trang
web khác, tìr vị trí này sang vị trí khác hay dùng đế mờ
một Project nào đó như word, Excel,... có một thuộc tính
bắt buộc : href được dùng đe chi địa chi hay URL cúa tài
liệu hoặc file liên kết.Cú pháp:
<a href = “link liên kết”> Hypertext</a>

<img/>

Dùng đế nhúng một ánh thơng qua thuộc tính src, thè có 2
thuộc tính bắt buộc :
- src: chứa đường dẫn tham chiếu tới image
-alt được sử dụng như một văn bán thay thẻ khi image
khơng hiển thị

<b></b>


In đậm

<big></big>

Tăng kích cỡ phơng chữ

<code></code>

Dùng để định dạng chữ hiện giống như mã cùa máy tính

<font></font>

Quy định giao diện, kích cỡ, màu sắc cho chữ

<sX/s>

Dùng đế gạch bỏ một đoạn văn bản

<small></small>

Hiển thị một đoạn text nhỏ


<strong></strong>

Nhấn mạnh

<textarea></textarea>

Dừng để nhập nhiều dịng văn bàn


<var></var>

Định nghía một biến

<abbr></abbr>

Dùng đế mô tã mộ cum từ viết tắt

<basefont></basefont>

Định dạng kích cỡ màu sắc font cho toan bộ text trong văn
bản




Xuống dòng trong một đoạn văn

<dfn></dfn>

Dùng đế mơ tả một thuật ngữ

<em></em>

Nhấn mạnh theo kiểu chữ nghiêng



Hiến thị text lệch bên dưới




Hiển thị text lệch bên trên

<span></span>

Dùng đề nhóm một hay nhiều thẻ thuộc nhóm inline khác
nhau, nó khơng có ý nghĩa về mặt hiến thị, chi hồ trợ định
dạng các inline thơng qua css và javascript.

<citex/cite>

Dùng đế trích dẫn một câu nào đó

<dclx/dcl>

Xác định vă bán bị gạch ngang

<inputx/input>

Dùng cho người nhập thơng tin hay chon thơng tin, có các
thuộc tính như text, checkbox, password,...

<ix/i>

Kiếu chữ in nghiêng

<tt></tt>

Xác định văn bán kiểu máy


<labelx/label>

Định nghĩa cho thẻ <input>

<qx/q>

Định nghĩa một đoạn trích dần ngan

<sampx/samp>

Định nghía văn bán ngơn ngữ lập trình mẫu

<selectx/select>

Tạo một danh sách lựa chọn

<bdo></bdo>

dùng đế ghi đè lên dịng chữ hiện tại, có thuộc tính dir

<acronymx/acronym>

Để chi một tên lược danh
Bảng 1: Các thẻ nhóm Inline

1.6. Thc <forin >
Thé form dùng để tạo một form trong HTML. Đố thu thập thông tin từ người sử
dụng như email, tên ,tuổi,....



CÚ pháp: <form action= “Script URL’’ method= “GET|POST”>
Các phan tứ font, như input,textarea,...
</fonn>

4-

Các thuộc tính

-

Action: ứng dụng quản trị backend sằn sàng sử lý từ dữ liệu người dùng.

-

Method: phương thức truyền tài dừ liệu.thường sử dụng GET và POST.
-

Accept: Thuộc tính này xác định danh sách các kicu MIME được máy chú nhận
ra, trong đó có chứa kịch bản (script) đế xử lý biểu mầu.
Cú pháp: ACCEPT = ‘internet media type”

1.7. Frame
Trong HTML được sử dụng đế phân chia cứa sổ trình duyệt thành các khu vực
khác nhau, mồi khu vực tái một tài liệu HTML riêng. Một tập hợp các Frame trong
cứa số trinh duyệt được biết đen như là một Frameset.
Thè <frameset> xác định cách chia cứa số thành các Framct thay thế cho thẽ cho
body. Thuộc tính rows trong thẻ này xác định chiều ngang của Frame, thuộc tính cols
xác định chiều dọc của Frame. Mỗi Frame được chi dần bời một thé <frameset> và nó
xác định tài liệu nào sẽ được mở trong Frame.


4-

Thuộc tính cúa thẻ <frameset>
Thuộc tính

Mơ tà

Cols

Xác định số cột được chứa trong frameset và kích cỡ mồi cột

Rows

Xác định số hàng được chứa trong frameset và kích cỡ mỗi
hàng

Border(đường

Xác định độ rộng border của mồi frame

viền)
Frameborder

Xác định border có được hiến thị giữa các frame hay không

Framespacing

Xác định khoảng cách giữa các frame trong frameset
Báng 2: thuộc tính của thẻ <frameset>


4- Thuộc tính của thé <frame>
Thuộc
tính
Src

Mơ tả
File dược tài lên

GVHD: THS. QUÁCH THỊ HẠNH
SVTH: NGUYÊN THỊ LOAN


Name

Tên của frame

Marginwidt
h

xác định độ rộng của khoảng cách giữa bên trái và phải của Border

Marginheigh
t

xác định chiều cao của khoảng cách giữa trên và dưới của Border

Noresize

ngăn cản người sử dụng đặt lại kích cờ.


Scrolling

điều khiến sự xuất hiện cùa thanh cuốn xuất hiện trên Frame. Nó nhận

Frame với nội dung trong Frame. Giá trị là pixel.

Frame và nội dung cùa nó. Giá trị là pixel.

giá trị "yes", "no", hoặc "auto".
Longdesc

cho phép cung cấp một đường link tới trang web khác chứa một sự
miêu tả dài trong nội dung cúa Frame.
Bang 3: Thuộc tính của thẻ <frame>

1.8.

Thẻ <table>
Thẻ <table> dùng đề tạo bảng. Thẻ <tr> được sử dụng đề tạo các hàng và thẻ

<td> được sử dụng để tạo các ơ.
1.8.1.

Thuộc tính của thẻ<table>

Thuộc tính

Mơ tả


Bgcolor

Định màu nề trên bảng

Border

Định màu cho đường viền

Bordercolordar
k
Bordercolorligh
t
Cellpadding

Định màu sẫm cho phần bóng của đường viền

Frame

Hienr thị đường viền ngoài

Height

Xác định chiều cao của báng

Rules

Hiền thị đường viền trong bảng

Width


Xác định chiều rộng cùa băng

Định màu sẫm cho phần sáng hơn của đường viền
Định rõ khoảng cách giữa nội dung và đường viền.

Báng 4: Thuộc tính của thẻ <table>