Giáo trình Thiết kế web (Ngành/Nghề: Công nghệ thông tin – Trình độ: Trung cấp) - Trường CĐ Kinh tế - Kỹ thuật Vinatex TP. HCM

TẬP ĐOÀN DỆT MAY VIỆT NAM
TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT VINATEX TPHCM

GIÁO TRÌNH
MƠN HỌC/MƠ ĐUN: THIẾT KẾ WEB
NGÀNH/NGHỀ: CƠNG NGHỆ THƠNG TIN
TRÌNH ĐỘ: 12/12

Ban hành kèm theo Quyết định số:
/QĐ-... ngày ………tháng.... năm……
...........……… của ……………………

Tháng 08 năm 2019


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 biên soạn để phục vụ cho công tác giảng dạy
và học tập của giảng viên, học sinh, sinh viên chuyên ngành Công nghệ thông tin, và
là tài liệu tham khảo cho các lập trình web tại các doanh nghiệp. Cấu trúc của giáo
trình gồm 10 chương:
Chương 1 : Giới thiệu về web
Chương 2 : Hyperlink – hình ảnh
Chương 3 : Danh sách
Chương 4 : Bảng và trình bày trang

Chương 5 : Form
Chương 6 : Casscading style sheet
Chương 7 : Giới thiệu Dreamweaver
Chương 8 : CSS
Chương 9 : Hình Ảnh và Hyperlink trong DW
Chương 10 : Bảng và trình bày trang trong DW
Trong q trình biên soạn, mặc dù đã có nhiều cố gắng nhưng khơng tránh khỏi
những hạn chế và thiếu sót nhất định, tác giả rất mong nhận được những ý kiến đóng
góp của q đọc giả để giáo trình này ngày càng hoàn thiện hơn.
Xin chân thành cảm ơn.
Tp. HCM, ngày……tháng……năm………
Biên soạn
BỘ MÔN TIN HỌC


MỤC LỤC
Tên môn học: Thiết kế Web ............................................................................................. 6
CHƯƠNG 1: GIỚI THIỆU VỀ WEB ........................................................................... 11
I.

CÁC KHÁI NIỆM CƠ BẢN .............................................................................................. 11

II.

GIỚI THIỆU KHÁI QUÁT VỀ WEB ................................................................................ 12

III. TAG HTML ........................................................................................................................ 12
IV. CẤU TRÚC CƠ BẢN CỦA TRANG WEB ....................................................................... 13
1. Cấu trúc trang web: ................................................................................................................... 13
2. Hiển thị trang web: .................................................................................................................... 13

V. CÁC TAG HTML CƠ BẢN ............................................................................................... 13
VI. MỘT SỐ THẺ ĐẶC BIỆT (THAM KHẢO) ...................................................................... 18
1. Thẻ <meta> ................................................................................................................................. 18
3. Thẻ <style>.................................................................................................................................. 19
4. Thẻ <link> ................................................................................................................................... 19
5. Thẻ <script> ................................................................................................................................ 19
VII. MỘT SỐ THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT (THAM KHẢO) .................. 20

CHƯƠNG 2: HYPERLINK – HÌNH ẢNH .................................................................. 21
I.

GIỚI THIỆU HYPERLINK ................................................................................................ 21

II.

TẠO HYPERLINK ............................................................................................................. 21

III. HÌNH ẢNH TRÊN TRANG WEB ..................................................................................... 23

CHƯƠNG 3: DANH SÁCH ........................................................................................... 25
I.

DANH SÁCH KHƠNG CĨ THỨ TỰ (UNORDER LIST-UL)......................................... 25

II.

DANH SÁCH CÓ THỨ TỰ (OrderList-OL) ..................................................................... 26

III. DANH SÁCH ĐỊNH NGHĨA ............................................................................................. 27

CHƯƠNG 4: BẢNG VÀ TRÌNH BÀY TRANG.......................................................... 29
I.

BẢNG 29

II.

CÁC THUỘC TÍNH ........................................................................................................... 30

1. Thuộc tính của bảng .................................................................................................................. 30
2. Thuộc tính của cột ..................................................................................................................... 31
III. TRÌNH BÀY TRANG ........................................................................................................ 33

CHƯƠNG 5: FORM ....................................................................................................... 35
I.

GIỚI THIỆU FORM ........................................................................................................... 35

1. Sử dụng Form ............................................................................................................................ 35
2. Cách tạo ..................................................................................................................................... 35
II. CÁC PHẦN TỬ CỦA FORM ............................................................................................ 35
1.
2.
3.
4.
5.
6.

Input boxes ................................................................................................................................ 35
Selection List: ............................................................................................................................ 39

TextArea: Hộp văn bản cho phép nhập nhiều dòng .................................................................. 41
Nhãn: dùng để tạo nhãn liên kết với thành phần đi kèm ........................................................... 42
Fieldset: Nhóm các đối tượng giống nhau vào một phần logic ................................................. 42
Điều khiển các phần tử trên form: ............................................................................................. 44

CHƯƠNG 6: CASCADING STYLE SHEET-CSS...................................................... 45
I.

GIỚI THIỆU VỀ CSS ......................................................................................................... 45


II.

CÁCH TẠO......................................................................................................................... 45

III. ĐỊNH BẢNG MẪU CHO LỚP (CLASS) .......................................................................... 47
1.
2.
3.
4.
5.
6.
7.
8.

Định các tag riêng biệt: ............................................................................................................. 48
Tạo các tag chung ...................................................................................................................... 49
Tạo tag cấp khối tùy ý ............................................................................................................... 49
Tạo các tag trong hàng tùy ý: .................................................................................................... 50
Các thuộc tính định dạng văn bản: ............................................................................................ 50

Định dạng danh sách ................................................................................................................. 50
Định dạng màu nền: .................................................................................................................. 51
Định dạng Hypertext link .......................................................................................................... 51

CHƯƠNG 7: GIỚI THIỆU DREAMWEAVER.......................................................... 52
I.

GIỚI THIỆU ....................................................................................................................... 52

II.

CÀI ĐẶT ............................................................................................................................. 52

III. MÀN HÌNH DREAMWEAVER: ....................................................................................... 55
IV. KẾ HOẠCH THIẾT KẾ MỘT WEBSITE ......................................................................... 57
1.
2.
3.
4.

Các yêu cầu cơ bản khi thiết kế website ................................................................................... 57
Thao tác tạo bộ Web cơ bản: ..................................................................................................... 57
Thiết kế các trang Web đơn ...................................................................................................... 60
Tạo liên kết các trang Web đơn thành một Website ................................................................. 60

CHƯƠNG 8 : ĐỊNH DẠNG VĂN BẢN - SỬ DỤNG CSS .......................................... 63
I.

ĐỊNH DẠNG VĂN BẢN ................................................................................................... 63

II.

SỬ DỤNG CSS (CASCADING STYLE SHEETS) ........................................................... 64

CHƯƠNG 9: HÌNH ẢNH VÀ HYPERLINK TRONG DW ....................................... 67
I.
1.
2.
3.
4.
5.
6.

CHÈN HÌNH ẢNH TRONG TRANG WEB ...................................................................... 67

Chèn ảnh vào trang .................................................................................................................... 67
Hiệu chỉnh thuộc tính của ảnh ................................................................................................... 67
Chèn khung ảnh ......................................................................................................................... 67
Insert Rellover Image:Chèn ảnh khi rê chuột vào ..................................................................... 68
Chèn Flash ................................................................................................................................. 68
Ảnh nền trang ............................................................................................................................ 69
II. LIÊN KẾT TRANG TRONG DREAMWEAVER ............................................................. 69

CHƯƠNG 10: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW ................................ 74
I.

TABLE ................................................................................................................................ 74

1. Kẻ bảng ..................................................................................................................................... 74
2. Hiệu chỉnh bảng ........................................................................................................................ 74

3. Thuộc tính của bảng .................................................................................................................. 75
II. TRÌNH BÀY TRANG ........................................................................................................ 75
1. Layout Table và layout cell ....................................................................................................... 75
2. Thuộc tính của Layout Table và Layout cell:............................................................................ 76
3. Các lớp Layer ............................................................................................................................ 77
III. TEMPLATE ........................................................................................................................ 78
1. Tạo mới một Template: ............................................................................................................. 78
2. Hiệu chỉnh Template: ................................................................................................................ 79

Tài liệu tham khảo .......................................................................................................... 81


GIÁO TRÌNH MƠN HỌC/MƠ ĐUN
Tên mơn học: Thiết kế Web
Mã môn học: MH 18
Thời gian thực hiện môn học: 45 giờ; (Lý thuyết: 15 giờ; Thực hành, thí nghiệm,
thảo luận, bài tập: 27 giờ; Kiểm tra: 3 giờ)
I. Vị trí, tính chất của mơn học:
Vị trí: học sau mơn Đồ hoạ ứng dụng và các môn học cơ sở bắt buộc.
Tính chất: mơn học chun mơn bắt buộc.
II. Mục tiêu môn học:
Về kiến thức:
+ Nhận biết các khái niệm thường sử dụng trong lĩnh vực internet và web.
+ Trình bày được các giai đoạn phát triển website, đặc biệt là qui trình thiết
kế layout cho website.
+ Trình bày được cấu trúc cơ bản của trang HTML và cách dùng các tag cơ
bản.
+ Trình bày được cách kết hợp ngơn ngữ HTML và CSS để thiết kế trang
web, các loại bảng kiểu CSS và các selector, properties cơ bản trong CSS.
+ Trình bày được cách làm việc với các cơng cụ trên Dreamweaver

Về kỹ năng:
+ Triển khai được các bước trong qui trình thiết kế layout.
+ Xây dựng được website tĩnh với HTML và CSS
+ Sử dụng thành thạo phần mềm thiết kế layout Dreamweaver.
Về năng lực tự chủ và trách nhiệm:
+ Rèn luyện tính tỉ mỉ, siêng năng, ham học hỏi, …
+ Hình thành tinh thần tự giác trong cơng việc.
+ Tư duy tự học, học nhóm,…
III. Nội dung mơn học:
1. Nội dung tổng quát và phân bổ thời gian:
Thời gian (giờ)
Thực hành,
Số
Tên chương, mục
Tổng
Lý
thí nghiệm, Kiểm
TT
số
thuyết thảo luận,
tra
bài tập
1 Chương 1: Giới thiệu về web
6
2
4
2 Chương 2: Hyperlink – hình ảnh
3
1
2

3 Chương 3: Danh sách
3
1
2
4 Chương 4: Bảng và trình bày trang
4
1
3
5 Chương 5: Form
3
1
2
6 Chương 6: Cascading style sheet
5
2
2
1
7 Chương 7: Giới thiệu Dreamweaver
3
1
2
8 Chương 8: CSS
6
2
4
9 Chương 9: Hình Ảnh và Hyperlink trong DW
3
1
2
10 Chương 10: Bảng và trình bày trang trong DW

9
3
4
2
Cộng
45
15
27
3
2. Nội dung chi tiết:


Chương 1: Giới thiệu về web
Thời gian: 6 giờ
1. Mục tiêu:
Trình bày được các cú pháp cơ bản trong HTML.
Tạo được trang web với các tag cơ bản đúng cú pháp.
2. Nội dung chương:
2.1. Các khái niệm cơ bản
Thời gian: 1 giờ
2.2. Giới thiệu khái quát về web
Thời gian: 1 giờ
2.3. Tag html
Thời gian: 1 giờ
2.4. Cấu trúc cơ bản của trang web
Thời gian: 1 giờ
2.5. Các tag html cơ bản
Thời gian: 2 giờ
Chương 2: Hyperlink – hình ảnh
Thời gian: 3 giờ

1. Mục tiêu:
Trình bày được cách tạo Hyperlink.
Chèn được các Hyperlink vào trang web.
Sử dụng được hình ảnh để chèn Hyperlink.
2. Nội dung chương:
2.1. Giới thiệu hyperlink
2.2. Tạo hyperlink
2.3. Hình ảnh trên trang web
Chương 3: Danh sách
Thời gian: 3 giờ
1. Mục tiêu:
Trình bày được cách tạo các dạng danh sách.
Tạo và sử dụng được các loại danh sach trong HTML.
2. Nội dung chương:
2.1. Danh sách khơng có thứ tự
2.2. Danh sách có thứ tự
2.3. Danh sách định nghĩa
Chương 4: Bảng và trình bày trang
Thời gian: 4 giờ
1. Mục tiêu:
Nêu được cách tạo bảng,
Tạo được bảng trong trang web và thực hiện thay đổi các thuộc tính của bảng.
2. Nội dung chương:
2.1. Bảng
2.2. Các thuộc tính
2.3. Trình bày trang
Chương 5: Form
Thời gian: 3 giờ
1. Mục tiêu:
Nêu được cách tạo form và chèn các phần tử của form vào trang web.

Tạo được form vào trang web và chèn được các phần tử của form vào web.
2. Nội dung chương:
2.1. Giới thiệu form
2.2. Các phần tử của form


Chương 6: Cascading style sheet
Thời gian: 5 giờ
1. Mục tiêu:
Nêu được cách tạo và chèn các loại CSS vào trang web.
Tạo được các loại CSS trong chế độ code.
Chèn được các CSS đã tạo vào trang web.
2. Nội dung chương:
2.1. Giới thiệu
2.2. Cách tạo
2.3. Định bảng mẫu cho lớp
Kiểm tra
Chương 7: Giới thiệu Dreamweaver
Thời gian: 3 giờ
1. Mục tiêu:
Mở Dreamweaver và sử dụng trên nền design.
Nêu được kế hoạch thiết kế website.
2. Nội dung chương:
2.1. Giới thiệu
2.2. Cài đặt
2.3. Màn hình DW
2.4. Kế hoạch thiết kế một website
Chương 8: CSS
Thời gian: 6 giờ
1. Mục tiêu:

Nêu được cách tạo CSS.
Tạo và chèn được các loại CSS vào trang web.
2. Nội dung chương:
2.1. Định dạng văn bản
Thời gian: 2 giờ
2.2. Sử dụng css
Thời gian: 4 giờ
Chương 9: Hình Ảnh và Hyperlink trong DW
Thời gian: 3 giờ
1. Mục tiêu:
Nêu được cách chèn hình ảnh trong trang web.
Chèn được hình ảnh vào trang web.
Nêu và thực hiện chèn liên kết trang trong Dreamweaver.
2. Nội dung chương:
2.1. Chèn hình ảnh trong trang web
2.2. Liên kết trang trong dw
Chương 10: Bảng và trình bày trang trong DW
Thời gian: 9 giờ
1. Mục tiêu:
Tạo và sử dụng bảng trong Dreamweaver.
Tạo và sử dụng Template trong Dreamweaver.
2. Nội dung chương:
2.1. Table
Thời gian: 2 giờ
2.2. Trình bày trang
Thời gian: 2 giờ
2.3. Template
Thời gian: 3 giờ
Kiểm tra
Thời gian: 2 giờ

IV. Điều kiện thực hiện mơn học:
1. Phịng học chun mơn hóa/nhà xưởng: phịng lab tin học.
2. Trang thiết bị máy móc: máy vi tính có phần mềm Dreamweaver.
3. Học liệu, dụng cụ, ngun vật liệu: sách, tập, máy tính có phần mềm chuyên dụng.
4. Các điều kiện khác: không.


V. Nội dung và phương pháp đánh giá:
1. Nội dung:
Kiến thức:
+ Nêu được các khái niệm thường sử dụng trong lĩnh vực internet và web.
+ Trình bày được các giai đoạn phát triển website, đặc biệt là qui trình thiết kế
layout cho website.
+ Trình bày được cấu trúc của trang HTML và cách dùng các tag cơ bản.
+ Trình bày được cách kết hợp ngôn ngữ HTML và CSS để thiết kế trang web,
các loại bảng kiểu CSS và các selector, properties cơ bản trong CSS.
Kỹ năng:
+ Xác định được các bước trong qui trình thiết kế layout.
+ Sử dụng HTML và CSS để xây dựng được website tĩnh.
+ Sử dụng thành thạo phần mềm thiết kế layout Dreamweaver.
Năng lực tự chủ và trách nhiệm:
+ Tích cực tham gia tự học, tham gia xây dựng bài, làm việc nhóm
2. Phương pháp:
Các kiến thức và kỹ năng trên sẽ được đánh giá qua các nội dung tự nghiên cứu,
ý thức thực hiện môn học, kiểm tra thường xuyên, kiểm tra định kỳ và kiểm tra kết
thúc môn học:
- Điểm môn học bao gồm điểm trung bình các điểm kiểm tra: tự nghiên cứu, điểm
kiểm tra thường xuyên, kiểm tra định kỳ có trọng số 0,4 và điểm thi kết thúc mơn
học có trọng số 0,6.
- Điểm trung bình các điểm kiểm tra là trung bình cộng của các điểm kiểm tra

thường xuyên, điểm kiểm tra định kỳ và tự nghiên cứu theo hệ số của từng loại
điểm. Trong đó, điểm kiểm tra thường xuyên và điểm tự nghiên cứu được tính hệ
số 1, điểm kiểm tra định kỳ tính hệ số 2.
- Hình thức thi: tiểu luận (10 ngày) (được thơng báo vào đầu mỗi học kỳ).
VI. Hướng dẫn thực hiện mơn học:
1. Phạm vi áp dụng mơn học: Chương trình mơn học được sử dụng để giảng dạy cho
trình độ Cao đẳng.
2. Hướng dẫn về phương pháp giảng dạy, học tập môn học:
- Đối với giảng viên:
Trước khi giảng dạy cần phải căn cứ vào nội dung của từng bài học chuẩn bị đầy
đủ các điều kiện cần thiết để đảm bảo chất lượng giảng dạy.
Khi thực hiện chương trình môn học cần xác định những điểm kiến thức cơ bản,
xác định rõ các yêu cầu về kiến thức, kỹ năng ở từng nội dung.
Cần liên hệ kiến thức với thực tế sản xuất và đời sống, đặc biệt là các phần mềm
thực tế sử dụng mạng Internet có hiệu quả.
- Đối với người học:
Chủ động, tích cực tiếp thu kiến thức, tự nghiên cứu, chuẩn bị bài theo nội dung
giảng viên hướng dẫn, yêu cầu trước khi đến lớp.
Cần thực hiện tất cả các bài tập và tự nghiên cứu các bài tốn thực tế về mơn học
đã có sẵn nhằm mục đích củng cố, ghi nhớ, khắc sâu kiến thức đã học.
Xây dựng kế hoạch tự học, tự nghiên cứu cho cá nhân.
Tham dự ít nhất 70% thời gian học lý thuyết và đầy đủ các bài học tích hợp, bài
học thực hành, thực tập và các yêu cầu của mơn học được quy định trong
chương trình mơn học.
3. Những trọng tâm cần lưu ý:


Hyperlink – hình ảnh.
Danh sách.
Bảng và trình bày trang.

Form.
Cascading style sheet.
Giới thiệu Dreamweaver.
CSS.
Hình Ảnh và Hyperlink trong DW.
Bảng và trình bày trang trong DW.
4. Tài liệu tham khảo:
[1]. Giáo trình Thiết Kế Web, Nhà xuất bản thống kê
[2]. Đề cương bài giảng Thiết Kế Web, Trường CĐ KT-KT VINATEX TP.HCM
[3]. Giáo trình thiết kế web, Chu Văn Hồnh
[4]. Tự học thiết kế trang Web, Nhà xuất bản thống kê
[5]. Thực hành thiết kế Web, Nhà xuất bản ĐH Quốc Gia
[6]. Thiết kế và xuất bảng trang Web, Nhà xuất bản thống kê


CHƯƠNG 1: GIỚI THIỆU VỀ WEB
I.

CÁC KHÁI NIỆM CƠ BẢN

− Internet là một mạng máy tính tồn cầu trong đó các máy truyền thông với nhau
theo một ngôn ngữ chung là TCP/IP.
− Intranet đó là mạng cục bộ khơng nối vào Internet và cách truyền của chúng cũng
theo ngôn ngữ chung là TCP/IP.
− Mơ hình Client-Server: là mơ hình khách-chủ, Server chứa tài nguyên dùng chung
cho nhiều máy khách (Client) như các tập tin, tài liệu, máy in... Ưu điểm của mơ
hình này là tiết kiệm về thời gian, tài chính, dễ quản trị hệ thống... Cách hoạt động
của mơ hình này là máy Server ở trạng thái hoạt động (24/24) và chờ yêu cầu từ
phía Client. Khi Client yêu cầu thì Server đáp ứng u cầu đó.
− Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server,

FTP Server...)
− Internet Service Provider (ISP): là nơi cung cấp các dịch vụ Internet cho khách hàng.
Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
− Internet Protocol: Các máy sử dụng trong mạng internet liên lạc với nhau theo một
tiêu chuẩn truyền thông gọi là Internet Protocol (IP). IP Address-địa chỉ IP: để việc
trao đổi thông tin trong mạng internet thực hiện được thì mỗi máy trong mạng cần
phải định danh để phân biệt với các máy khác. Mỗi máy tính trong mạng được định
danh bằng một nhóm các số được gọi là địa chỉ IP.Địa chỉ IP gồm 4 số thập phân có
giá trị từ 0 đến 255 và được phân cách nhau bởi dấu chấm. Ví dụ 192.168.0.1 Địa
chỉ IP này có giá trị trong tồn mạng Internet. Ủy ban phân phối địa chỉ IP của thế
giới sẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau. Thông thường
địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý và phân phối lại cho
các ISP. Một máy tính khi thâm nhập vào mạng Internet cần có một địa chỉ IP. Địa
chỉ IP có thể cấp tạm thời hoặc vĩnh viễn. Thơng thường các máy Client kết nối vào
mạng Internet thông qua một ISP bằng đường điện thoại. Khi kết nối, ISP sẽ cấp
tạm thời một IP cho máy Client.
− Phương thức truyền thơng tin trong Internet: Khi một máy tính có địa chỉ IP là x(máy
x) gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản
diễn ra như sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thơng tin sẽ
được gửi đi trực tiếp. Cịn máy X và Y khơng cùng nằm trong mạng con thì thơng
tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi
mới chuyển tới máy Y. Máy trung gian này gọi là Gateway
− World Wide Web (WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet.
Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông
qua các giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cần có một chương
trình gọi là Web Browser.
− Web Brower(trình duyệt): là trình duyệt web. Dùng để truy xuất các tài liệu trên các
Web Server. Các trình duyệt hiện nay là Internet Explorer, Nestcape
− Home page: là trang web đầu tiên trong web site
− Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên web

− Hyperlink: tên khác của hyperlink
− Publish: làm cho trang web chạy trên mạng
− URL (Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn
tài nguyên mạng.


▪ Mỗi nguồn trên web có duy nhất một địa chỉ rất khó nhớ. Vì vậy, người ta sử
dụng URL là một chuỗi cung cấp địa chỉ internet của một web site hoặc nguồn
trên World Wide Web. Định dạng đặc trưng là:
www.nameofsite.typeofsite.countrycode
VD : 207.46.130.149 được biểu diễn trong URL là www.microsoft.com

▪ URL cũng nhận biết giao thức của site hoặc nguồn được truy cấp. Giao thức thông
thường nhất là “http”, một vài dạng URL khác là “gopher”, cung cấp địa chỉ
internet của một thư mục Gopher, và “ftp”, cung cấp vị trí mạng của nguồn FTP.
▪ Có hai dạng URL:
✓ URL tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc file, bao gồm
giao thức, vị trí mạng, đường dẫn tùy chọn và tên file.
Ví dụ : />
✓ URL tương đối: mô tả ngắn gọn địa chỉ tập tin kết nối có cùng đường dẫn với
tập tin hiện hành, URL tương đối đơn giản bảo gồm tên và phần mở rộng của
tập tin
Ví dụ: index.html

− Web server là một chương trình đáp ứng lại các yêu cầu truy xuất tài nguyên từ trình
duyệt.

II. GIỚI THIỆU KHÁI QUÁT VỀ WEB
− Web là một ứng dụng chạy trên mạng(Client-Server), được chia sẻ khắp toàn cầu.
− Trang web là một file văn bản chứa những tap HTML hoặc những đoạn mã đặc biệt

mà trình duyệt web (Web browser) có thể hiểu và thông dịch được, file được lưu
với phần mở rộng là .html hoặc htm.
− HTML (HyperText Markup Language), gồm các đoạn mã chuẩn được quy ước để
thiết kế Web và được hiển thị bởi trình duyệt Web (Web Browser)
▪ Hypertext (Hypertext link): là một từ hay một cụm từ đặc biệt dùng để tạo liên
kết giữa các trang web.
▪ Markup : là cách định dạng văn bản để trình duyệt hiểu và thông dịch được.
▪ Language: đây không là ngôn ngữ lập trình, mà chỉ là tập nhỏ những quy luật để
định dạng văn bản trên trang web.
− Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản
nào. Các trình soạn thảo phổ biến hiện nay là: Notepad, FontPage hoặc
Dreamweaver.

III. TAG HTML
− Tap HTML là những câu lệnh nằm giữa cặp tag “<” và “>” dùng để định dạng các
văn bản trên trang web. Dạng chung của một tap HTML là:
<tagName ListProperties> Object </tagName>
Trong đó:

▪ Tage Name: là tên một tag HTML, viết liền với dấu “<”, khơng có khoảng trắng.
▪ Object: là đối tượng cần định dạng trong trang web
▪ ListPropeties: là danh sách các thuộc tính của tap, là những đặc điểm bổ sung vào
cho một tap, thứ tự các thuộc tính trong một tag là tùy ý. Nếu có từ 2 thuộc tính
trở lên thì mỗi thuộc tính cách nhau bở khoảng trắng.
<tagName property1=’value1’ property2=“value2”… > Object </tagName>

− Giá trị của thuộc tính được đặt trong nháy đơn ‘ hoặc nháy “. (có thể bỏ qua).
− <TagName>: gọi là tag mở
− </TagName>: gọi là tag đóng. Thơng thường thì các tag đều có tag đóng. Tuy nhiên
có một số tag khơng có tag đóng

Ví dụ : <body BGCOLOR=’blue’>nội dung </body>
Tag mở Property
tag đóng

− Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag nào mở trước thì tag đó đóng
sau
Ví dụ :
<Tag1><Tag2>Object</Tag2></Tag1>
<B>Object1<I>Object2</I></B>

− Trong trang HTMT, nếu một tag bị sai thì nội dung bên trong Tag đó khơng hiển thị
trên trình duyệt.

IV. CẤU TRÚC CƠ BẢN CỦA TRANG WEB
1.
−
−
−

CẤU TRÚC TRANG WEB:
Phần đầu (<Head></Head>): là phần chứa thông tin của trang Web
Phần thân (<Body></Body>): là phần chứa nội dung của trang Web
Phần đầu và phần thân được đặt trong cặp tag <HTML></HTML>
<HTML>
<Head>Nội dung thông tin của trang web.
</Head>
<Body>
Nội dung hiển thị của trình duyệt.

</Body>
</HTML>

2. HIỂN THỊ TRANG WEB:
− Cách 1:
•
•

Khởi động trình duyệt web
Chọn đường dẫn đến file html vừa tạo

− Cách 2:
Trong giao diện dreamweaver, ta click vào

V. CÁC TAG HTML CƠ BẢN
1.

<Title>: hiển thị nội dung tiêu đề của trang web, được đặt trong phần head

− Cú pháp: <TITLE>nội dung tiêu đề</TITLE>
2.

<Hn>: tạo header gồm 6 cấp được đặt trong phần body

− Cú pháp: <Hn Align=”Direction”>nội dung của Header</Hn>
− Trong đó : Direction : gồm các giá trị left, right, center, dùng để canh lề cho
Header, mặc định là canh trái.
− Ví dụ :
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>

<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>


3.

<P>: dùng để ngắt đoạn và bắt đầu đoạn mới.

− Cú pháp: <P Align=’Direction’>Nội dung của đoạn</P>
− Tag

không bắt buộc
− Tag

kết tiếp sẽ tự động bắt đầu bằng một đoạn mới.
4.

<BR>: Ngắt dịng tại vị trí của tag.

− Ví dụ :

Mary had a little lamb

It’s fleece was white as snow

5.

<HR>:dùng để kẻ đường ngang trang, khơng có tag đóng

− Cú pháp:
− Trong đó:
• Direction: gồm các giá trị left, right, center
• Width: độ dài đường kẻ, tính bằng Pixel hoặc %

• Size: độ dày của đường kẻ, tính bằng pixel
• Color: màu đường kẻ, có thể dùng tên màu hoặc dùng mã #rrggbb
− Ví dụ :
<HTML>
<HEAD><TITLE>Welcome to HTML</TITLE></HEAD>
<BODY>
<H3> May first HTML document </H3>
<HR size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80% >
<P> This is going to be real fun
</BODY>
</HTML>
<FONT>: dùng để định dạng font chữ.

6.

−
−
−
−

Dùng định dạng font chữ
Định dạng Font chữ cho cả tài liệu thì đặt tag <Font> trong phần <Body>
Định dạng từng phần hoặc từng từ thì đặt vị trí muốn định dạng.
Cú pháp:
<font Face=’fontname1, fontname2,…’ Size=’value’ Color=#rrggbb>
Nội dung hiển thị
</font>

− Ví dụ:

7.

<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>
My first HTML document </FONT>
<P>This is<FONT COLOR=BLUE SIZE=6>going
</FONT> to be real fun
</BODY>
</HTML>
<BODY>: Chứa nội dung của trang web.

− Cú pháp:


<Body>
Nội dung chính của trang web.
</Body>

− Các thuộc tính của <Body>
• BgColor: thiết lập màu nền của trang
• Text: thiết lập màu chữ
• Link: màu của siêu liên kết
• Vlink: màu của siêu liên kết đã xem qua
• Background: dùng load một hình làm nền cho trang
• LeftMargin: Canh lề trái

• TopMargin: Canh lề trên của trang
− Ví dụ:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD>
<BODY BGCOLOR=“#0000FF“ text =“yellow“>
<FONT COLOR = LIMEGREEN> Welcome to HTML</FONT>
</BODY>
</HTML>

− Màu sắc:
• Internet Explorer có thể xác lập 16 màu theo tên như sau: Black, Silver,
Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive Yellow,
Navy, Blue, Teal, Aqua.
• Một số mã thập lục phân của màu: #RRGGBB
Mã thập lục phân
Màu

8.

#FF0000

RED

#0000FF

BLUE

#000000

BLACK

#FFFFFF

WHITE

<IMG>: dùng để chèn hình ảnh vào trang web.
<IMG src=’URL’ alt=’Text’ width=’value’ height=’value’ border=’value’></IMG>

− Src: xác định đường dẫn tập tin cần load, sử dụng đường dẫn tương đối
<Img src=“../images/h1.gif>
− Alt: chứa nội dung văn bản thay thế cho hình ảnh khi hình khơng load về được,
nếu load về được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng
đưa chuột tới hình.
− Width, Height: dùng để xác định chế độ phóng to thu nhỏ hình ảnh.
− Align:“left/right/top/bottom“: so hàng giữa hình ảnh và text.
9.

<BgSound>:

− Dùng để chèn một âm thanh vào trang web. Âm thanh này sẽ được phát mỗi khi
người sử dụng mở trang Web
− Cú pháp:
<BgSound src=“file nhac“ loop = value>
• Src chứa địa chỉ file nhạc, file này có phần mở rộng .mp3, mdi...


• Loop xác định chế độ lập đi lập lại của bài hát, nếu value<0 thì lập vơ
hạn, value=n thì lập lại n lần rồi tự động tắt.
10. <EMBED>

− Cho phép đưa âm thanh trực tiếp vào web
− Cú pháp:
<EMBED SRC=“URL“>
− Ví dụ:
<EMBED SRC=“clouds.mid“ WIDTH=“145“ HEIGHT=“61“>
11. <Marquee></Marquee>:

− Dùng để điều khiển đối tượng chạy một cách tự động trên trang Web
− Cú pháp:
<Marquee> Object</Marquee>
− Các thuộc tính của Marquee:
• Direction=up/down/left/right dùng để điều khiển hướng chạy.
• Behavior=alternate: đối tượng chạy từ lề này sang lề kia và ngược lại.
− Ví dụ:
<Marquee direction=up> đối tượng chạy lên</Marquee>
12. <!—ghi chú-->: Nội dung trong cặp tag này không hiển thị trong trang.

− Cú pháp: <!--Nội dung lời chú thích-->
13. <B>: định dạng chữ đâm

− Cú pháp:
<B> Nội dung chữ đâm</B>

− Ví dụ :
<P><B> This is good fun</B></P>
14. Tag <I>: Định dạng chữ nghiêng

− Cú pháp: <I>Nội dung chữ nghiêng</I>
15. Tag<U> : gạch chân văn bản

− Cú pháp: <U> nội dung chữ gạch chân </U>
− Ví dụ: Định dạng khối văn bản vừa đâm, nghiêng và gạch chân
<B><I><U>Trường Cao đẳng Vinatex</U></I></B>
16. Tag <BIG> và <SMALL>:

− Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh
− Cú pháp:
<BIG>Nội dung chữ to</BIG>
<SMALL>Nội dung chữ nhỏ</SMALL>
17. Tag <SUP> và <SUB>:

− Đưa chữ lên cao hoặc xuống thấp so với văn bản bình thường
− Cú pháp:
<SUP>Nội dung chữ đưa lên cao</SUP>
<SUB>Nội dung chữ đưa xuống thấp</SUB>
Ví dụ: a2 và H2O
a<SUP>2</SUP>
H<SUB>2</Sub>O
18. <STRIKE>:

− Gạch ngang văn bản
− Cú pháp: <STRIKE> Nội dung văn bản bị gạch ngang</STRIKE>
19. <CODE>…<CODE>:


− Dùng để nhập một dịng mã có định dạng ký tự riêng. Dịng mã này khơng được
thực hiện mà được hiển thị dưới dạng văn bản bình thường
− Cú pháp:
<CODE>
Nội dung văn bản muốn định dạng

</CODE>
Ví dụ:
<CODE>
If(x>0>

x = x + 1 (br>
else

y=y+1
</CODE>
20. <EM>: Văn bản được nhấn mạnh (giống tag <I>)

− Cú pháp: <EM>Văn bản được nhấn mạnh</EM>
21. <STRONG>: Định dạng chữ đậm (giống <B>)

− Cú pháp: <STRONG>Văn bản được nhấn mạnh</STRONG>
22. <PRE>

− Giữ nguyên các định dạng như: Ngắt dịng, khoảng cách, thích hợp với việc tạo
bảng
− Cú pháp:
<PRE>
Nội dung văn bản cần định dạng trước với tất cả định dạng khoảng
cách, xuống dòng và ngắt hàng.
</PRE>
− Ví dụ:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<PRE>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall

All the King’s horses
And all the King’s men
Could not put Humpty Dumty together again
</PRE>
</BODY>
</HTML>

23. <DIV></DIV>: Chia văn bản thành từng khối bắt đầu từ một dòng mới

− Cú pháp: <DIV>Nội dung của khối băt đầu từ một dịng mới </DIV>
24. <SPAN></SPAN>: Tách khối nhưng khơng bắt đầu từ một dòng mới


− Cú pháp: <SPAN>Nội dung của khối trong 1 dòng</SPAN>
− Ví dụ:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<DIV>Division1
<P>The DIV element is used to group elements
<P>Typically, DIV is used for block level elements
</DIV>
<DIV align=right>
<FONT size=4 color=hotpink face = Arial>Division2
<P>This is a second division

<H2> Are you having fun?</H2>
</FONT>
</DIV>
<P> The second division is right aligned
<SPAN STYLE =“FONT-SIZE:25; color: BLUE“>Common

formating
</SPAN>is applied to all the elements in the division
</BODY>
</HTML>
25. Các ký tự đặc biệt:
•
Dấu > : >
•
Dấu < : <
•
Cập “”: "
•
Ký tự &: &
•
Ký tự khoảng trắng:  

VI. MỘT SỐ THẺ ĐẶC BIỆT (THAM KHẢO)
1. THẺ <META>
Thẻ <meta> được khái báo trong cặp thẻ <head>, thẻ <meta> thường được sử dụng để
khái báo loại font sử dụng, tìm kiếm, xóa cache, chuyển trang…
a. Thẻ <meta> với font
Để sử dụng font Unicode đặc biệt Unicode tiếng việt trên trang web, chúng ta phải khai
báo thẻ <meta> trong thẻ <head>.
<meta http-equiv = “Content-Type” content = “text/html; charset = UTF-8”>
b. Thẻ <meta> cho phép người dùng tìm kiếm.
Khi bạn đưa trang web của bạn lên internet, để người dùng có thể tìm thấy web site của
bạn qua các công cụ trên như: Google, Yahoo …, khi đó chúng ta khai báo thẻ <meta> như
sau
<meta http-equiv = “Content-Type” content = “text/html; charset = UTF-8”>
<META NAME = “author” CONTENT = “ />Bạn có thể khái báo các thông tin khác của trang web để khi người dùng có thể tìm kiếm

thơng qua các thơng tin này.
….. ”>
Các từ khóa này sẽ được đem so sánh với các từ khóa người dùng gõ và tìm kiếm trên
Internet, nếu từ khóa người dùng tìm kiếm thuộc một trong số từ khóa của bạn đã khai báo
trong thẻ này, web site của bạn sẽ được xuất hiện trong danh sách tìm kiếm được.
c. Thẻ <meta> dạng tự động chuyển đến URL
Để tự động chuyển đến địa chỉ URL hay UNC kế tiếp sau khi trang web nạp lên với thời
gian nhất định, bạn có thể khái báo trong thẻ JavaScript.
Ví dụ:


<html>
<head>
<title>Welcome to PHP and MySQL</title>
<META http-equiv=refresh content="8; URL=">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
Trang này tự động chuyển đến trang <b>www.saigoninfotech.com</b> sau 8 giây
</body>
</html>
d. Thẻ <meta> dùng xóa cache
Thơng thường sau khi nạp trang web nào đó lên trình duyệt web, nội dung của trang
web đó có thẻ lưu vào trong bộ nhớ truy cập nhanh (cache).
Điều này có nghĩa là sau khi duyệt một vòng các trang web khác, bạn quay về gọi trang
web đã truy cập trước đó, trình duyệt web nạp rất nhanh, do chúng đã lưu trang trong bộ nhớ
cache.
Tuy nhiên, khi bạn là người phát triển ứng dụng web, có những trang web bạn phải xóa
cache mỗi khi người dùng gọi nó. Nghĩa là, trang web này thường có thay đổi cấu trúc cho

mỗi lần gọi, bạn cần khai báo thẻ <meta> như ví dụ sau:
Ví dụ:
<html>
<head>
<title>Welcome to PHP and MySQL</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
</head>
<body bgcolor="#ffffff"> Xoa Cache
</body>
</html>
3. THẺ <STYLE>
Thẻ <style> cho phép bạn định dạng tất cả nội dung trình bày trên trang web theo một
kiểu nhất định. Điều này có nghĩa là mọi thẻ trên trang web có khai báo sử dụng một phần tử
nào đó được khái báo thẻ <style>, chúng sẽ có kiểu định dạng như bạn định nghĩa.
Bạn khái báo thẻ <style> trong thẻ <head>.
Ví dụ: Định dạng style, chèn ảnh nền và đặt hình nền khơng lặp.
<style>
background-image: url(“hinhnen.gif”);
background-repeat: no-repeat;
</style>
4. THẺ <LINK>
Khi khai báo các phần tử trong trang style.css, bạn có thể khái báo chúng trong một
trang web bằng thẻ <link>. Để sử dụng bạn cũng khái báo như trường hợp sử dụng phần tử
trong ví dụ sau:
Ví dụ: Chèn tyle.css vào trong tài liệu html
<link href="tyle.css" type="text/css" rel="stylesheet" />
5. THẺ <SCRIPT>
Trong trang web, bạn muốn kiểm soát tất cả các hành động của người dùng, bạn cần

khái báo vá sử dụng một số phương thức và thuộc tính của Client Script hay các phương thức
do bạn định nghĩa.
Để có thể khái báo kịch bản trên trang web, bạn sử dụng thẻ <script> với tên ngôn ngữ
chỉ định JavaScript hay VBScript.


Cú pháp:
<script language = “javascript”>
// mã javascript
<script>
<script language = “vbscript”>
// mã vbscript
<script>
Ngồi ra trong trường hợp có nhiều phương thức do bạn định nghĩa được sử dụng chung
trong nhiều trang web, bạn cũng có thể khai báo chúng trong một tập tin có tên mở rộng .js
hay .vb. Sau đó bạn có thẻ chèn tập tin này và sử dụng như cách chèn trực tiếp.

VII. MỘT SỐ THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT (THAM
KHẢO)
−
−
−
−
−

Cách load lại trang Web: Click biểu tượng Refresh(F5) trên thanh công cụ.
Chỉnh sửa size chữ hiển thị trên trang: Chọn Menu View-> Text size
Chỉnh lại font chữ: Chọn Menu View-> Encoding
Trong trường hợp trang Web không hiển thị được Font Tiếng Việt:
Nếu chọn rồi mà khơng hiển thị được font tiếng việt thì chọn Menu: View→Encoding→

chọn các font như User defined, Vietnamese...
− Các tùy chọn khác cho trang Web: Tools→ Internet option: Khơng load hình xuống định
dạng liên kết...
− Chọn trang web mặc định khi mở trình duyệt.


CHƯƠNG 2: HYPERLINK – HÌNH ẢNH
I. GIỚI THIỆU HYPERLINK
1. Hyperlink: Khả năng chính của HTML là hỗ trợ các siêu liên kết. Một siêu liên kết
cho phép người truy cập có thể đi từ trang web này đến trang web khác. Một liên kết
gồm 3 phần:
– Nguồn: Chứa nội dung hiển thị khi dùng truy cập đến, có thể là một trang web khác,
video clip, hình ảnh hoặc một hộp thoại để gửi mail...
– Nhãn: có thể là dịng văn bản hoặc hình ảnh để người dùng click vào khi muốn truy
cập đến liên kết, nếu nhãn là văn bản thì thường được gạch dưới.
– Đích đến (target): xác định vị trí để nguồn hiển thị
2. Các lọai Hyperlink:
– Internal Hyperlink (liên kết trong): là các liên kết với các phần trong cùng một tài
liệu hoặc liên kết các trang trong cùng 1website.
– External Hyperlink (liên kết ngoài): là các liên kết với các trang trên website khác.

II. TẠO HYPERLINK
Cú pháp:
<A HREF=”URL”> Nhãn </A>
− Dùng URL tương đối liên kết đến các trang trong cùng 1 website.
Ví dụ:
<HTML>
<HEAD><TITLE>Using links</TITLE></HEAD>
<BODY>
<A href=”index.htm”> Click here to view homepage</A>

</BODY>
</HTML>

− Dùng URL tuyệt đối để liên kết đến các trang trong website khác
Ví dụ:
<A href=””> liên kết đến Google </A>

1. Liên kết với các phần trong cùng một trang web

− Nếu nội dung của trang quá dài thì nên tạo các Bookmark để nhảy đến một phần cụ
thể nào đó trên chính trang web hiện hành.
− Cách tạo liên kết đến các phần trong cùng trang: gồm 2 bước
▪ Tạo Bookmark: <A name=”Tên Bookmark”>Nhãn</A> Nội dung
▪ Tạo liên kết đến Bookmark: <A href=”#tên Bookmark”>Nhãn của text liên kết
</A>
Ví dụ:
<HTML>
<HEAD><TITLE>Using htm links</TITLE></HEAD>
<BODY>
<A HREF=”#Internet”>Internet</A><BR>
<A HREF=”#HTML”>Introduction to HTML</A><BR>


<A name = “Internet”>Internet</A>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính
được liên kết với các mạng khác, nối các nước và ngày nay là toàn
cầu giao thức truyền thông là TCP/IP cung cấp liên kết với tất cả
các máy tính trên thế giới.
<A name = “HTML”>Introduction to HTML</A><BR>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử

dụng để tạo và nhận ra tài liệu. Mặc dù không phải là một tập con
của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngơn ngữ
đánh dấu siêu văn bản cũng có liên quan với SGML. SGML lần
một phương pháp trình bày các ngơn ngữ định dạng tài liệu. HTML
là ngôn ngữ đánh dấu được sử dụng để tạo tài liệu HTML. Các
hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong
trình duyệt.
</BODY>
</HTML> → Kết quả trình duyệt

2. Liên kết với một Bookmark ở một trang web khác:
Cú pháp:
<A href=” Bookmark”>
Ví dụ:
– Trang main.htm
<HTML>
<HEAD><TITLE>Main document</TITLE></HEAD>
<BODY>
<A HREF= “C:\Doc1.htm#Internet”>Internet</A>

HREF=
“C:\Doc1.htm#HTML”>Introduction
to
HTMT</A>

</BODY>
</HTML>
– Trang Doc1.htm
<HTML>
<HEAD><TITLE>Using Links</TITLE></HEAD>
<BODY>

<A name = “Internet”>Internet</A><BR>
Internet là một mạng của các mạng. Nghĩa là, mạng máy tính
được liên kết với các mạng khác, nối với các nước và ngày nay
là toàn cầu. Giao thức truyền TCP/IP cung cấp liên kết với tất
cả các máy tính trên thế giới.


<A name = “HTML”> Introduction to HTML</A><BR>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web
sử dụng để tạo và nhận ra tài liệu. Mặc dù không phải là một
tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quá (SGML),
ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML.
SGML là một phương pháp trình bày các ngơn ngữ định dạng
tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo tài
liệu HTML.
</BODY>
</HTML>

3. Liên kết đến hộp thư E-mail
Cú pháp:
<A href=”mailto: địa chỉ Email”> Nhãn </A>
Nếu liên kết đặt ở cuối trang thì dùng tag <ADDRESS>
Cú pháp:
<Address><A href=”mailto: địa chỉ Email”> Nhãn </A></Address>

III. HÌNH ẢNH TRÊN TRANG WEB
1. Các loại ảnh

− Ảnh.Gif (Graphics Interchange Format): được sử dụng phổ biến nhất trong các
tài liệu HTML, dễ chuyển tải, ngay cả các kết nối sử dụng MODEM tốc độ

chậm, hổ trợ 256 màu GIF. Các file GIF được định dạng không phụ thuộc phần
nền.
− Ảnh JPEG (Joint PhotoGraphic Expert Group) có phần mở rộng .JPG, là loại
ảnh nén mất thông tin, nghĩa là ảnh sau khi bị nén không giống như ảnh gốc.
Tuy nhiên, trong quá trình phát lại thì ảnh cũng tốt gần như ảnh gốc. JPEG hỗ
trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực.
− Ảnh PNG (Portable Network Graphics) nén không mất dữ liệu.
2. Chèn hình ảnh
Cú pháp: <IMG Src=URL Border=n Alt=Nội dung thay thế” Properties=”value”>

•
•
•

URL: Địa chỉ của tập tin hình ảnh, thường sử dụng địa chỉ tương đối, ví
dụ: <img src=”../image/hinh.gif”> khơng phụ thuộc vị trí của tập tin
ảnh trên đĩa
n : độ dày của đường viền, tính bằng pixel
Alt: Nội dung thay thế sẽ hiển thị khi hình khơng load được, hoặc khi
đưa chuột ngang hình.

3. Các thuộc tính:

a. Dàn văn bản quanh hình ảnh:
<IMG SRC=URL Align=left>Nội dung văn bản quanh hình ảnh
<IMG SRC=URL Align=Right>Nội dung văn bản quanh hình ảnh
Ví dụ:


b. Kích thước ảnh:

<IMG width = value height = value>
Ví dụ:
<html>
<head><title>Image</title></head>
<body>
<img src=”../image/bluehill.jpg” width=”150” height=”150”>
<body>
</html>

c. Chặn văn bản bao quanh hình:
− Canh lề khi dàn văn bản xung quanh một ảnh sẽ tác động đến tất cả các văn bản
sau đó nếu khơng chèn vào một dịng kẻ đặc biệt. Thuộc tính CLEAR trong tag
BR làm cho văn bản khơng bắt đầu nếu lề cụ thể khơng bị xóa đi (nghĩa là tại
cạnh dưới của ảnh).
− Cú pháp:
<BR CLEAR=Right>: Ngăn chặn văn bản dàn bên lề phải của ảnh
<BR CLEAR=Left>: Ngăn chặn văn bản dàn bên lề trái của ảnh
<BR CLEAR=Alt>: Ngăn chặn văn bản dàn hai bên lề của ảnh

d. Thêm khoảng trống xung quanh ảnh
− Nếu không muốn văn bản dàn xung quanh lề trái của ảnh thì ta có thể thêm
khoảng trắng xung quanh ảnh.
− Cú pháp:
<IMG SRC=URL HSPACE=n VSPACE=m>
Trong đó:

▪ HSPACE=n: Khoảng trắng được tính bằng pixel sẽ thêm vào cả bên phải và
bên trái của ảnh.
▪ VSPACE=m: Khoảng trắng được tính bằng pixel sẽ thêm vào cả bên trên và
bên dưới của ảnh.

e. Canh lề cho ảnh
− Có thể canh lề cho ảnh so với một dòng văn bản trong một đoạn.
− Cú pháp:
<IMG SRC=URL ALIGN=”Direction”>Văn bản muốn canh lề so với ảnh
Direction: gồm các giá trị: top, bottom, middle, texttop
4. Dùng hình ảnh làm liên kết

− Có thể dùng hình ảnh để tạo một liên kết đến một trang khác, hoặc nếu có một
ảnh lớn, bạn có thể tạo ảnh nhỏ hơn hoặc một biểu tượng cho nó để nó có thể
hiển thị nhanh chóng trên trang web, sau đó tạo liên kết để đưa người truy cập
đến ảnh có kích thước thật.
− Cú pháp:
<A href = “địa chỉ trang liên kết”><img src = URL Alt = “Nội dung thay thế”> Nhãn
</A>
Ví dụ:
<A href = “”>kiếm”> Nhãn </A>
5. Bản đồ ảnh

− Bản đồ ảnh là một ảnh trong trang web được chia ra làm nhiều vùn, mỗi vùng
khi click vào sẽ liên kết đến một địa chỉ URL
− Cách tạo: Trước hết phải chèn vào trang một ảnh và đặt nhãn vào cho ảnh.
<img Usemap = “label”>


<Map Name = “label”>
<Area Shape = “type” coords = “x1,y1,x2,y2,…” href = URL>
</Map>
Trong đó:

▪ Label: tên của bản đồ ảnh
▪ Type: hình dạng của các vùng trên ảnh, gồm các loại:
+ Rect: Vùng hình chữ nhật
+ Circle: Vùng hình trịn
+ Poly: Vùng hình đa giác
▪ Coords: tọa độ các đỉnh của hình
▪ Rect: (x1,y1,x2,y2) là tọa độ 2 đỉnh chéo của vùng hình CN
▪ Circle: (x,y,r) lần lượt là tọa độ tâm và bán kính của vùng hình trịn
▪ Poly: (x1,y1,x2,y2,x3,y3,...) là các đỉnh của vùng hình đa giác
Ví dụ:
<html>
<head>
<title>Image</title>
</head>
<body>
src=”../image1.jpg”
width=”150”
height=”150”
border=”0”
usemap=”#Map1”>
<map name=”Map1”>
<area shape=”rect” coords=”73,3,149,60” href=”B1.htm”>
<area shape=”poly” coords=”152,81,71,75,62,109,97,123” href=”B3.htm”>
<area shape=”circle” coords=”37,32,27” href=”b2.htm”>
</map>
</body>
</html>
6. Hình nền

− Trong hầu hết các trang web thường sử dụng nền màu, với mục đích là làm nổi
bật nội dung trang đó. Tuy nhiên cũng có thể sử dụng hình ảnh để làm nền bằng
thuộc tính BACKGROUND của thẻ BODY.
<BODY Background=”bgimage.gif”>
Sử dụng trực tiếp tag body

− Ví dụ:
<BODY Background=”picture/AnhNen.gif”>

CHƯƠNG 3: DANH SÁCH
I. DANH SÁCH KHƠNG CĨ THỨ TỰ (UNORDER LIST-UL)
− Cú pháp:
<UL Type = Shape1>
<LI Type = Shape2> Nội dung 1
<LI Type = Shape2> Nội dung 2
….
</UL>

−
−
−
−

Shape1, Shape2 là loại bullet tự động đặt ở đầu dòng trong danh sách
Shape1 : ảnh hưởng đến toàn bộ danh sách
Shape2: ảnh hưởng đến một mục trong danh sách
Các loại shape:
•

Circle: Bullet tròn, rỗng