Giáo trình Thiết kết web cơ bản (Ngành: Thiết kết và quản lý website-Trung cấp) - CĐ Kinh tế Kỹ thuật TP.HCM

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH
TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH


GIÁO TRÌNH
MƠ ĐUN: THIẾT KẾ WEB CƠ BẢN
NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE
TRÌNH ĐỘ: TRUNG CẤP

Thành phố Hồ Chí Minh, năm 2020


ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH
TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH


GIÁO TRÌNH

MƠ ĐUN: THIẾT KẾ WEB CƠ BẢN
NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE
TRÌNH ĐỘ: TRUNG CẤP

THƠNG TIN CHỦ NHIỆM ĐỀ TÀI
Họ tên: Lê Thị Thu Thảo
Học vị: Thạc sĩ
Đơn vị: Khoa Cơng nghệ thơng tin
Email:

TRƢỞNG KHOA

TỔ TRƢỞNG
BỘ MƠN

CHỦ NHIỆM
ĐỀ TÀI

Lê Thị Thu Thảo
HIỆU TRƢỞNG
DUYỆT

Thành phố Hồ Chí Minh, năm 2020


TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể được
phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham
khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh
doanh thiếu lành mạnh sẽ bị nghiêm cấm.


LỜI GIỚI THIỆU
Giáo trình “Thiết kế web cơ bản” được biên soạn nhằm phục vụ cho việc
học tập môn học “Thiết kế web cơ bản” đang được giảng dạy tại khoa Công nghệ
thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM.
Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn
học “Thiết kế web cơ bản” và dựa theo các tiêu chuẩn thiết kế web hiện hành.
Mục đích của giáo trình là cung cấp cho sinh viên các kiến thức cơ bản về
ngôn ngữ HTML, CSS, JavaScript, sử dụng phần mềm DreamWeaver để áp

dụng vào việc thiết kế web.
Xin chân thành cảm ơn các ý kiến đóng góp từ các đồng nghiệp đã giúp tơi
hồn thành giáo trình này.
TP.HCM, ngày……tháng 08 năm 2020

Lê Thị Thu Thảo


MỤC LỤC
BÀI 1 - PHÁC THẢO WEBSITE ...................................................................................1
1.1. Các khái niệm ....................................................................................................1
1.1.1. Internet và Word Wide Web .......................................................................1
1.1.2. Web server, web browser và webpage ........................................................1
1.1.3. Search Engine ..............................................................................................2
1.1.4. Xuất bản web ...............................................................................................2
1.2. Lập kế hoạch thiết kế website ............................................................................3
1.3. Thiết kế bố cục trang web ..................................................................................4
1.4. Bài tập áp dụng ..................................................................................................5
BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML .............................................................6
2.1. Tạo trang web đầu tiên .......................................................................................6
2.1.1. Khái niệm HTML ........................................................................................6
2.1.2. Các thẻ của tập tin HTML ...........................................................................6
2.1.3. Tạo trang web ..............................................................................................7
2.1.4. Các thẻ định cấu trúc tài liệu HTML ........................................................10
2.2. Làm việc với văn bản trên trang web ...............................................................12
2.2.1. Thẻ <b> .....................................................................................................12
2.2.2. Thẻ <strong> .............................................................................................12
2.2.3. Thẻ <i> ......................................................................................................12
2.2.4. Thẻ <em> ..................................................................................................13
2.2.5. Thẻ <u> .....................................................................................................13

2.2.6. Thẻ <sup>..................................................................................................13
2.2.7. Thẻ <sub>..................................................................................................13
2.2.8. Thẻ

 ..................................................................................................14
2.2.9. Thẻ 
 .....................................................................................................14
2.2.10.

Thẻ 
 đến 
 ...............................................................................15

2.2.11.

Thẻ 
 ...............................................................................................16

2.2.12.

Thẻ <hr> ................................................................................................ 16

 
2.3. Làm việc với danh sách trên trang web ...........................................................16
2.3.1. Danh sách khơng có thứ tự ........................................................................16
2.3.2. Danh sách có thứ tự ...................................................................................17
2.4. Làm việc với các đối tượng media trên trang web...........................................19
2.4.1. Thẻ <img> .................................................................................................19
2.4.2. Thẻ <audio> ..............................................................................................20
2.4.3. Thẻ <video> ..............................................................................................21
2.4.4. Thẻ <object> .............................................................................................22
2.5. Làm việc với liên kết trên trang web ...............................................................23
2.5.1. Tạo liên kết đến tài liệu khác ....................................................................24
2.5.2. Tạo liên kết đến các phần trong cùng một tài liệu ....................................25
2.6. Làm việc với bảng biểu trên trang web ...........................................................26
2.6.1. Tạo bảng đơn giản .....................................................................................26

2.6.2. Tạo bảng có gộp ơ .....................................................................................28
2.7. Làm việc với biểu mẫu trên trang web ............................................................29
2.7.1. Khái quát về Form .....................................................................................29
2.7.2. Thẻ <form> ...............................................................................................30
2.7.3. Thẻ <input> ...............................................................................................32
2.7.4. Thẻ <select> ..............................................................................................36
2.7.5. Thẻ <textarea> ..........................................................................................37
2.7.6. Thẻ <label> ...............................................................................................39
2.7.7. Thẻ <fieldset> ...........................................................................................40
2.8. Tạo Bố cục trang ..............................................................................................42
2.8.1. Thẻ <header> ............................................................................................43
2.8.2. Thẻ <footer>..............................................................................................43
2.8.3. Thẻ <main> ...............................................................................................43
2.8.4. Thẻ <nav> .................................................................................................43
2.8.5. Thẻ <section> ............................................................................................44
2.8.6. Thẻ <article> .............................................................................................44
2.8.7. Thẻ <aside> ...............................................................................................44

 
2.8.8. Thẻ <div> ..................................................................................................44
2.8.9. Thẻ <span> ................................................................................................ 45
2.9. Bài tập áp dụng ................................................................................................ 45
BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER.......................................47
3.1. Tạo và quản lý website ....................................................................................47
3.1.1. Tạo một website ........................................................................................47
3.1.2. Quản lý website .........................................................................................50
3.1.3. Đưa website lên internet ............................................................................51
3.1.4. Kiểm tra và sửa lỗi trang web ...................................................................51
3.2. Tạo và định dạng các đối tượng trên trang web ...............................................53
3.2.1. Môi trường làm việc của Dreamweaver ....................................................53

3.2.2. Các thao tác cơ bản ...................................................................................54
3.2.3. Làm việc với văn bản ................................................................................55
3.2.4. Làm việc với hình ảnh ...............................................................................57
3.2.5. Làm việc với multimedia ..........................................................................58
3.2.6. Liên kết trang ............................................................................................58
3.2.7. Làm việc với bảng .....................................................................................59
3.2.8. Làm việc với form .....................................................................................63
3.2.9. CSS ............................................................................................................68
3.3. Bài tập áp dụng ................................................................................................ 76
BÀI 4 - ĐỊNH DẠNG TRANG WEB VỚI CSS ..........................................................77
4.1. Tạo css cho trang web ......................................................................................77
4.1.1. Khái niệm ..................................................................................................77
4.1.2. Cú pháp CSS .............................................................................................77
4.1.3. Đơn vị đo trong CSS .................................................................................79
4.1.4. Phân loại CSS ............................................................................................80
4.1.5. Tạo và sử dụng Internal style sheet ...........................................................80
4.1.6. Tạo và sử dụng External style sheet ..........................................................82
4.1.7. Tạo và sử dụng Inline style .......................................................................83
4.1.8. Lớp (Class) ................................................................................................ 84

 
4.1.9. Định danh (ID) ..........................................................................................86
4.2. Định dạng văn bản bằng css.............................................................................87
4.2.1. Thuộc tính font ..........................................................................................87
4.2.2. Thuộc tính text ..........................................................................................90
4.3. Định dạng danh sách bằng css .........................................................................93
4.3.1. Thuộc tính list-style-type: .........................................................................93
4.3.2. Thuộc tính list-style-image: ......................................................................94
4.3.3. Thuộc tính list-style-position: ...................................................................94
4.4. Định dạng thành phần ......................................................................................95

4.4.1. Thuộc tính background .............................................................................96
4.4.2. Thuộc tính border ......................................................................................99
4.4.3. Thuộc tính box-shadow ...........................................................................102
4.4.4. Thuộc tính margin ...................................................................................102
4.4.5. Thuộc tính padding .................................................................................105
4.4.6. Thuộc tính height và width .....................................................................107
4.5. Định dạng hình ảnh bằng css .........................................................................110
4.6. Tạo bố cục trang web bằng mơ hình hộp .......................................................113
4.7. Tạo thanh điều hướng cho trang web.............................................................120
4.7.1. Pseudo-classes cho liên kết .....................................................................120
4.7.2. Tạo thanh điều hướng dọc .......................................................................122
4.7.3. Tạo thanh điều hướng ngang ...................................................................123
4.8. Định dạng bảng biểu bằng css .......................................................................125
4.9. Định dạng biểu mẫu bằng css ........................................................................127
4.10.

Bài tập áp dụng ...........................................................................................131

BÀI 5 - Ngôn ngữ JavaScript ......................................................................................132
5.1. Giới thiệu về JavaScript .................................................................................132
5.2. Nhúng JavaScript vào trang web ...................................................................132
5.2.1. Đặt mã lệnh JavaScript trực tiếp vào trang web .....................................133
5.2.2. Đặt mã lệnh JavaScript bên trong một tập tin .js ....................................134
5.3. Tạo tương tác cơ bản với trang web ..............................................................134

 
5.3.1. Hiển thị dữ liệu ra màn hình trong JavaScript ........................................134
5.3.2. Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript .............137
5.3.3. Sử dụng câu lệnh điều kiện trong JavaScript ..........................................138
5.3.4. Sử dụng câu lệnh lặp trong JavaScript ....................................................140

5.3.5. Sử dụng hàm, mảng trong JavaScript .....................................................142
5.3.6. Sử dụng các đối tượng cơ bản trong JavaScript ......................................144
5.3.7. DOM........................................................................................................147
5.4. Làm việc với web form ..................................................................................149
5.4.1. Xử lý sự kiện ...........................................................................................149
5.4.2. Kiểm tra tính hợp lệ của dữ liệu trong form bằng JavaScript .................152
5.5. Bài tập áp dụng ..............................................................................................153
TÀI LIỆU THAM KHẢO ...........................................................................................154
PHỤ LỤC ....................................................................................................................155
DANH MỤC HÌNH ....................................................................................................156
DANH MỤC BẢNG ...................................................................................................160

 
GIÁO TRÌNH MƠ ĐUN
Tên mơ đun: THIẾT KẾ WEB CƠ BẢN
Mã mơ đun: MĐ2101411
Vị trí, tính chất của mơ đun:
- Vị trí: là mơ đun được bố trí ở học kỳ II (THCS), học kỳ I (THPT).
- Tính chất: là mơ đun tích hợp thuộc nhóm mơ đun chun ngành.
Mục tiêu của mơ đun:
Về kiến thức:
-

Trình bày được các bước lập kế hoạch thiết kế website.

-

Trình bày được cú pháp các thẻ lệnh HTML, cú pháp CSS.

-


Trình bày được các thuộc tính thường dùng trong CSS để định dạng trang
web.

-

Trình bày được các đối tượng cơ bản trong JavaScript.

Về kỹ năng:
-

Lập được kế hoạch thiết kế của một website.

-

Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách,
hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web.

-

Tạo và quản lý được website bằng Dreamweaver.

-

Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang
web.

-

Tạo và sử dụng được các kiểu CSS.


-

Vận dụng được CSS để định dạng các đối tượng văn bản, hình ảnh, liên kết,
bảng biểu, biểu mẫu trên trang web.

-

Tạo được bố cục trang web bằng mơ hình hộp.

-

Tạo được thanh định hướng cho trang web.

-

Nhúng được đoạn mã JavaScript vào trang web.

-

Tạo được tương tác cơ bản với trang web bằng JavaScript.

-

Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web.

Về năng lực tự chủ và trách nhiệm:

 
-


u thích định dạng web bằng ngơn ngữ css
Làm việc một cách tỉ mỉ và cẩn thận trong ngôn ngữ HTML
Rèn luyện khả năng tự học, tư duy sáng tạo
Phối hợp làm việc theo nhóm.

 
Bài 1 - Phác thảo website

BÀI 1 - PHÁC THẢO WEBSITE
Giới thiệu:
Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản
về internet và web. Bài học này cũng đồng thời giúp người học có cái nhìn tổng
quan về q trình thiết kế một website.
Mục tiêu:
-

Trình bày được các bước lập kế hoạch thiết kế website

-

Lập được kế hoạch thiết kế của một website

-

Thiết kế được bố cục của trang web

1.1. CÁC KHÁI NIỆM
1.1.1.


Internet và Word Wide Web

-

Internet: Internet là một hệ thống thông tin tồn cầu có thể được truy nhập
cơng cộng gồm các mạng máy tính được liên kết với nhau.

-

World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu
văn bản, được truy cập trên internet thông qua trình duyệt web và được cung
cấp bởi web server.

1.1.2.
-

Web server, web browser và webpage
Web server đơn giản là một máy tính nối vào Internet và chạy các phần
mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML.
Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời.
Thơng qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu
đến máy dịch vụ.

-

Web Browser: Web browser cịn được gọi là trình duyệt web - là một phần
mềm được dùng để xem, quản lý và truy cập vào các trang web. Mỗi trình
duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị
trên các trình duyệt khác nhau là khơng hồn tồn giống nhau. Các trình
duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox,

Apple Safari, Google Chrome, Opera.

-

Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc
những đoạn mã mà trình duyệt web có thể hiểu và thơng dịch được lưu với
phần mở rộng là .html hoặc .htm.

KHOA CÔNG NGHỆ THÔNG TIN

Trang 1

 
Bài 1 - Phác thảo website
-

Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1
chủ đề nào đó.

-

Home page: trang chủ của 1 website

-

Hyperlink: 1 liên kết chỉ đến trang web khác

-

URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên

Internet.
Có dạng: protocol://domain_name/path
 Protocol: tên giao thức http, ftp, file,…
 Domain name: tên miền - là tên giao dịch của cơng ty hay tổ chức

trên Internet. Thường có dạng: yourcompany.com
 Các tên miền cấp 1:
.com

Các tổ chức thương mại, doanh nghiệp (commercial)

.edu

Các tổ chức giáo dục (education)

.int

Các tổ chức Quốc tế (international organizations)

.net

mạng không thuộc các loại phân vùng khác (Network)

-

Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để
cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử
dụng tương tác, cập nhật dữ liệu trên trang web.

-


Trang web động: trang web có khả năng tương tác với người sử dụng.
Trang web có kết hợp HTML và mã lệnh. Mã được thực thi trực tiếp trên
server, gửi kết quả là HTML về người sử dụng.

1.1.3.

Search Engine

-

Là cơng cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung
theo yêu cầu người dùng dựa vào các thông tin mà chúng có.

-

Một số cơng cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com,
Yahoo.com, Altavista.com,…

1.1.4.

Xuất bản web

Xuất bản trên web (cịn gọi là xuất bản trực tuyến) là q trình xuất bản
nội dung trên Internet.
Nội dung xuất bản web bao gồm văn bản, video, hình ảnh, âm thanh,…và
các hình thức truyền thơng khác.
Quy trình xuất bản web gồm:
+ Xây dựng website
KHOA CÔNG NGHỆ THÔNG TIN


Trang 2

 
Bài 1 - Phác thảo website
+ Tải website lên internet
+ Cập nhật các trang web và đăng các nội dung trực tuyến.
1.2. LẬP KẾ HOẠCH THIẾT KẾ WEBSITE
Các bước lập kế hoạch thiết kế website:
Bƣớc 1: Xác định mục đích của website
-

Xác định mục tiêu cơ bản của website: mục tiêu đề ra phải khái quát,
ngắn gọn, rõ ràng. Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch
phát triển. Đây chính là cơng cụ hữu hiệu để đánh giá sự thành công của
một website.

-

Xác định đối tượng phục vụ: để có thể thiết kế cấu trúc website phù hợp
với nhu cầu, mong muốn của người dùng thì cần phải xác định loại
người dùng chính của website. Cần tìm hiểu về sự hiểu biết, trình độ, sở
thích, kinh nghiệm duyệt web, lứa tuổi…của người dùng. Một hệ thống
được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người
dùng.

-

Xác định thể loại website: việc xác định thể loại website giúp định
hướng cho nhà thiết kế. Các thể loại website thường gặp: giáo dục, huấn

luyện (online trainning), tin tức, giải trí, diễn đàn, trao đổi thảo luận,
mua bán, quản lý….

Bƣớc 2: Xác định sơ đồ của website (sitemap)
-

Việc xác định sơ đồ website giúp có cái nhìn tổng qt về thơng tin của
website và các mối liên kết giữa các trang trên website.

-

Sơ đồ website thường được phác thảo dưới dạng cấu trúc cây.

Hình 1.1. Sơ đồ website

KHOA CÔNG NGHỆ THÔNG TIN

Trang 3

 
Bài 1 - Phác thảo website
Bƣớc 3: Chuẩn bị nội dung website
-

Chuẩn bị nội dung cho từng trang: nội dung phải viết ngắn gọn, súc tích,
sử dụng từ ngữ dễ hiểu, đúng chính tả. Nên đưa những thơng tin mới, có
ích cho người xem.

-


Hình ảnh đẹp, rõ, sắc nét. Phải lựa chọn hình ảnh phù hợp với nội dung.

Bƣớc 4: Bố cục cho trang web
-

Lựa chọn bố cục phù hợp cho trang chủ và các trang con.

Bƣớc 5: Lựa chọn màu sắc cho trang web
-

Màu sắc nên lựa chọn dựa theo nội dung trang web, nên sử dụng màu sắc
tương phản để làm nổi bật nội dung cần thể hiện. Không nên sử dụng
quá nhiều màu sắc.

Bƣớc 6: Chi tiết hóa trang web
-

Phác thảo chi tiết cụ thể giao diện cho từng trang web

1.3. THIẾT KẾ BỐ CỤC TRANG WEB
•

Bố cục phổ biến của một trang web
HEADER
NAVIGATION

SIDEBAR

CONTENT


FOOTER

Hình 1.2. Bố cục thông thƣờng của một trang web

-

Header: là thành phần nằm ở vị trí đầu trên trang web, thường chứa tên
cơng ty, logo, câu khẩu hiệu, hình ảnh tiêu biểu…

-

Navigation (điều hƣớng):là hệ thống menu liên kết giúp người dùng có
thể duyệt toàn bộ các trang trong một Website. Tùy từng bố cục, có thể
đặt menu này dạng ngang hoặc đứng.

-

Content: là phần hiển thị nội dung chính của trang web.
Sidebar: là phần hiển thị nội dung phụ của trang web như các menu phụ,
các bài viết liên quan, quảng cáo,… Tùy theo bố cục mà một website có
thể có một hoặc nhiều hơn một sidebar.

KHOA CÔNG NGHỆ THÔNG TIN

Trang 4

 
Bài 1 - Phác thảo website
-


Footer: là thành phần nằm ở vị trí cuối trên trang web và được hiển thị ở
tất cả các trang trong website, thường chứa các thông tin về Website: bản
quyền, điều khoản sử dụng, tác giả, địa chỉ liên hệ,… Ngồi ra, Footer
cịn được dùng như một menu liên kết cuối trang để tạo sự tiện lợi cho
người dùng.

Hình 1.3. Trang web có bố cục thông thƣờng

1.4. BÀI TẬP ÁP DỤNG
1. Phác thảo website giới thiệu Khoa Công nghệ thông tin
2. Phác thảo website bán hàng online

KHOA CÔNG NGHỆ THÔNG TIN

Trang 5

 
Bài 2 - Thiết kế trang web với HTML

BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML
Giới thiệu:
Trong bài học này sẽ cung cấp cho người học kiến thức cơ bản về các thẻ
lệnh HTML để tạo và định dạng các đối tượng trên một trang web.
Mục tiêu:
-

Trình bày được cú pháp các thẻ lệnh HTML

-


Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách,
hình ảnh, liên kết, bảng biểu và biểu mẫu trên trang web.

2.1. TẠO TRANG WEB ĐẦU TIÊN
2.1.1.

Khái niệm HTML

-

HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản
được thiết kế để xây dựng các trang web. HTML tồn tại như là các tập tin
văn bản có phần mở rộng là .htm hoặc .html được chứa trên các máy tính
nối vào mạng Internet. Các file này chứa các thành phần định dạng để báo
cho trình duyệt web biết cách để hiển thị một trang web.

-

Một trang web thông thường gồm có 2 thành phần chính:
+ Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)
+ Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu hiển
thị trên trình duyệt.

2.1.2.

Các thẻ của tập tin HTML

 Cấu trúc thẻ
-


Thẻ HTML là 1 tập các ký hiệu được định nghĩa trong HTML, mỗi thẻ html
có ý nghĩa riêng. Các thẻ này dùng để điều khiển nội dung và hình thức trình
bày tài liệu HTML.

-

Cấu trúc thẻ HTML thông thường gồm 2 phần: thẻ mở <tên thẻ> và thẻ
đóng </tên thẻ>
<tên thẻ [thuộc tính]> nội dung </tên thẻ>
+ Tên thẻ và thuộc tính thẻ khơng phân biệt chữ thường và hoa.
Tuy nhiên theo khuyến nghị của W3C để tài liệu chặt chẽ hơn thì tên
thẻ và thuộc tính nên viết bằng chữ thường.

KHOA CƠNG NGHỆ THƠNG TIN

Trang 6

 
Bài 2 - Thiết kế trang web với HTML
+ Mỗi thẻ có thể khơng có hoặc có nhiều thuộc tính, các thuộc tính viết
cách nhau ít nhất một khoảng trắng. Thuộc tính được nhập ngay
trước ngoặc đóng „>‟ của thẻ mở. Giá trị thuộc tính của thẻ đặt trong
dấu nháy đơn hoặc nháy kép.
+ Trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng,
xuống dòng trong phần nội dung.
 Phân loại thẻ
-

Thẻ chứa: gồm thẻ mở và thẻ đóng. Dữ liệu bị tác động nằm giữa thẻ mở và
thẻ đóng.

<tên thẻ [thuộc tính] > nội dung </tên thẻ>

-

Thẻ rỗng: chỉ gồm một thẻ mở, khơng có nội dung. Có thể có thuộc tính.
<tên thẻ [thuộc tính] >

-

Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ đó
đóng sau.
<thẻ 1><thẻ 2> nội dung </thẻ 2></thẻ 1>

Ví dụ:
-

Thẻ chứa
<b> chữ in đậm </b>
 Mức chữ ở tiêu đề 3 


-

Thẻ rỗng


<hr color="#FF0000" size="4">

-

Thẻ lồng
<strong><em> Thiết kế Web </em></strong >


2.1.3.

Tạo trang web

 Cấu trúc tài liệu HTML
Cấu trúc cơ bản của tài liệu HTML thông thường gồm 3 phần:
-

<!DOCTYPE>: Phần khai báo chuẩn phiên bản HTML sử dụng.
Với những phiên bản HTML khác nhau thì sẽ có DOCTYPE khác nhau:
HTML5: <!DOCTYPE html>

-

<head></head>: Phần khai tất cả thông tin của tài liệu HTML như khai báo
về meta, title, css, javascript.

KHOA CÔNG NGHỆ THÔNG TIN

Trang 7

 
Bài 2 - Thiết kế trang web với HTML
-

<body></body>: Phần chứa nội dung của trang web, tất cả nội dung mà
người dùng nhìn thấy sẽ được khai báo ở đây.

Hình 2.1. Cấu trúc của tài liệu html


* Lưu ý:
-

Một số ký tự đặc biệt trong HTML

Hình 2.2. Các ký tự đặc biệt trong HTML

-

Phần chú thích trong trang HTML sẽ khơng được hiển thị trên trình duyệt.
Cú pháp: <!-- Chú thích -->

 Tạo trang web
Để tạo tài liệu html, chỉ cần sử dụng một chương trình soạn thảo văn bản
để soạn thảo và sau đó lưu lại với tên tập tin có phần mở rộng .htm hoặc .html.
Có nhiều chương trình soạn thảo tài liệu html từ đơn giản đến chuyên nghiệp
như: Notepad, Notepad++, EditPlus, FrontPage, Dreamweaver,…
Ví dụ 1: Tạo trang web bằng Notepad++
-

Mở Notepad++ và nhập vào nội dung sau:

KHOA CÔNG NGHỆ THÔNG TIN

Trang 8

 
Bài 2 - Thiết kế trang web với HTML


Hình 2.3. Trình soạn thảo Notepad++
-

Lưu tập tin: chọn File  Save As
+ Save in: chọn thư mục lưu trữ
+ File name: nhập tên file (vidu1)
+ Save As Type: chọn Hyper Text Markup Language file
 Save

Hình 2.4. Hộp thoại Save As
-

Hiển thị trang web trên trình duyệt:
+ Chọn Run  chọn trình duyệt muốn hiển thị trang web

Hình 2.5. Menu lệnh Run
KHOA CÔNG NGHỆ THÔNG TIN

Trang 9

 
Bài 2 - Thiết kế trang web với HTML
+ Hoặc nhấp đúp chuột lên tập tin (vidu.html) hoặc nhấp phải chuột lên
tên tập tin (vidu.html)  chọn Open with chọn tên trình duyệt

Hình 2.6. Kết quả ví dụ 1

2.1.4.

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

Cấu trúc cơ bản của tài liệu HTML gồm:
<!DOCTYPE html>: phần khai báo chuẩn của HTML5
<html></html>: phần khai báo tài liệu HTML
<head></head>: phần mở đầu của tài liệu HTML
<body></body>: phần chứa nội dung của trang web, phần sẽ được hiển
thị trên trình duyệt.

 Thẻ <html>
Thẻ <html> dùng để thơng báo cho trình duyệt biết đây là 1 tài liệu
HTML. Toàn bộ nội dung của tài liệu HTML được đặt giữa cặp thẻ này.
Cú pháp:
<html>
Toàn bộ nội dung của tài liệu HTML
</html>

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <html> như những tập
tin văn bản bình thường.
 Thẻ <head>
Thẻ <head> được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:

KHOA CÔNG NGHỆ THÔNG TIN

Trang 10

 
Bài 2 - Thiết kế trang web với HTML

<head>
Phần mở đầu của tài liệu HTML

</head>

Phần mở đầu giống như phần giới thiệu, các trình duyệt web sử dụng
phần mở đầu này để cung cấp các thông tin như tiêu đề của tài liệu, các tập tin
hỗ trợ, các khai báo,...
Thẻ <head> có thể chứa các thẻ: <title>, <style>, <meta>, <link>,
<script>, <base>,…
 Thẻ <title>
Dùng để thiết lập tiêu đề của trang web, dòng tiêu đề này sẽ hiển thị tại
thanh tiêu đề của cửa sổ trình duyệt.
Thẻ <title> phải được đặt trong cặp thẻ <head>.
-

Cú pháp:
<title>Tiêu đề của tài liệu HTML </title>

 Thẻ <meta>
Dùng để xác định bộ ký tự dùng cho trang web (charset), thông tin về
trang web (description), tác giả (author), từ khóa tìm kiếm (keywords) và
thơng tin dữ liệu khác.
Thẻ <meta> phải được đặt trong cặp thẻ <head>.
-

Cú pháp:
<meta [thuộc tính] >

Ví dụ 2:


charset="UTF-8">
name="keywords" content="HTML, CSS">
name="description" content="The meta trong HTML">
name="author" content="Hotec">

 Thẻ <body>
Thẻ <body> được sử dụng để xác định phần nội dung chính của tài liệu phần thân của tài liệu.
KHOA CÔNG NGHỆ THÔNG TIN

Trang 11

 
Bài 2 - Thiết kế trang web với HTML
-

Cú pháp:

<body [thuộc tính] >
Phần nội dung của tài liệu HTML
</body>

Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title> Welcome to HTML </title>
<meta charset="UTF-8">
</head>

<body>
 My first HTML document 

</body>
</html>

2.2. LÀM VIỆC VỚI VĂN BẢN TRÊN TRANG WEB
Các thẻ dùng định dạng ký tự như: <i>, <u>, <b>, <em>, <strong>,
<sup>, <sub>… dùng phổ biến trong html4, tuy nhiên khuyến cáo sử dụng css
để thay thế.
Thẻ <b>

2.2.1.

Thẻ <b> được sử dụng để định nghĩa văn bản in đậm.
-

Cú pháp:
<b> Nội dung văn bản </b>
Thẻ <strong>

2.2.2.

Thẻ <strong> được sử dụng để định nghĩa văn bản quan trọng.
-

Cú pháp:

<strong> Nội dung văn bản </strong>
Thẻ <i>


2.2.3.

Thẻ <i> được sử dụng để định nghĩa văn bản in nghiêng.
-

Cú pháp:
<i> Nội dung văn bản </i>

KHOA CÔNG NGHỆ THÔNG TIN

Trang 12

 
Bài 2 - Thiết kế trang web với HTML
Thẻ <em>

2.2.4.

Thẻ <em> được sử dụng để định nghĩa văn bản nhấn mạnh.
-

Cú pháp:
<em> Nội dung văn bản </em>
Thẻ <u>

2.2.5.

Thẻ <u> được sử dụng để định nghĩa văn bản có đường gạch chân.
-


Cú pháp:
<u> Nội dung văn bản </u>
Thẻ <sup>

2.2.6.

Thẻ <sup> được sử dụng để định nghĩa chữ chỉ số trên.
-

Cú pháp:
<sup> Nội dung văn bản </sup>
Thẻ <sub>

2.2.7.

Thẻ <sub> được sử dụng để định nghĩa chữ chỉ số dưới.
-

Cú pháp:
<sub> Nội dung văn bản </sub>

Ví dụ 4:

KHOA CƠNG NGHỆ THƠNG TIN

Trang 13

 
Bài 2 - Thiết kế trang web với HTML
Hiển thị trên trình duyệt:


Hình 2.7. Kết quả ví dụ 4

Thẻ 


2.2.8.

Thẻ 
 được dùng khi muốn hiển thị đúng dạng văn bản đã soạn thảo
(khơng bỏ qua khoảng trắng, ngắt dịng).
-

Cú pháp:
 Văn bản đã được định dạng </pre>

Ví dụ 5:

Hiển thị trên trình duyệt:

Hình 2.8. Kết quả ví dụ 5

2.2.9.

Thẻ 

Thẻ 
 được sử dụng để định nghĩa một đoạn văn bản.

Thẻ 
 tự động tạo một khoảng trắng trước và sau nó, khoảng trắng này
tùy trình duyệt sẽ khác nhau.
KHOA CÔNG NGHỆ THÔNG TIN

Trang 14