Bài giảng Thiết kế Web - Bài 2: HTML cơ bản

TRƯỜNG CĐCĐ KONTUM 
KHOA TIN HỌC _ NGOẠI NGỮ &TV 
1 
THIẾT KẾ WEB 
TRƯỜNG CĐCĐ KONTUM 
KHOA TIN HỌC _ NGOẠI NGỮ &TV 
2 
Bài 2: HTML cơ bản 
1. Giới thiệu ngôn ngữ HTML 
2. Các thành phần trong trang HTML 
3. Các tag cơ bản 
4. Sử dụng định dạng 
5. Hình ảnh - Image 
6. Danh sách - List 
7. Liên kết - Link 
8. Bảng - Table 
Bài 2: HTML cơ bản 
3 
1. Giới thiệu ngôn ngữ HTML 
 HTML (HyperText Markup Language) là 
một ngôn ngữ đánh dấu siêu văn bản 
 Sử dụng tập ký hiệu đánh dấu gọi là tag 
để thiết kế trang web, các tag này còn 
được gọi là Element 
 Là một chuẩn Internet do tổ chức W3C 
(World Wide Web Consortium) duy trì 
Bài 2: HTML cơ bản 
4 
2. Các thành phần trong trang HTML 
 Cấu trúc của trang HTML 
 Cú pháp chung của tag 
 Ví dụ 
Bài 2: HTML cơ bản 
5 
Cấu trúc của trang HTML 
 ... 
 Nội dung của trang web 
Đầu trang 
Thân trang 
Bài 2: HTML cơ bản 
6 
Cấu trúc của trang HTML 
 : xác định phần bắt đầu và 
kết thúc của trang HTML (HTML 
Document) 
 : chứa các thông tin tổng 
quát về trang web (meta-information). 
 : nội dung chính của trang 
web, được thể hiện trong màn hình của 
trình duyệt 
Bài 2: HTML cơ bản 
7 
Cú pháp chung của tag 
 Tag không có nội dung gọi là tag rỗng 
(empty tag) và có cú pháp như sau: 
 Nội dung 
Bài 2: HTML cơ bản 
8 
Cú pháp chung của tag 
 Các đặc điểm: 
– Tên tag không phân biệt chữ HOA/thường 
– Trình duyệt chỉ nhận 1 khoảng trắng trong Nội 
dung và bỏ qua dấu ngắt xuống dòng 
Bài 2: HTML cơ bản 
9 
Cú pháp chung của tag 
 Ví dụ: 
 <div align="center" style="font-style:italic; 
 background-color:#FFFFCC; color:#0000FF"> 
 Công cha như núi Thái sơn 
 Nghĩa mẹ như nước trong nguồn chảy ra 
Bài 2: HTML cơ bản 
10 
3. Các tag cơ bản 
 Định nghĩa cấu trúc trang HTML 
 Các tag tiêu đề – Headings 
 Phân đoạn – Paragraphs 
 Ngắt dòng – Line Break 
 Tag – Horizontal rule 
Bài 2: HTML cơ bản 
11 
Các tag tiêu đề - Headings 
 Dùng để định dạng khổ chữ có dạng tiêu 
đề (giống chức năng Style của MS Word) 
 Gồm các tag , , , , 
 và 
 HTML sẽ tự động thêm một dòng trống 
vào trước và sau dòng định dạng là 
heading 
Bài 2: HTML cơ bản 
12 
Các tag tiêu đề - Headings 
 Ví dụ: 
 Đây là dòng heading 1 
 Đây là dòng heading 2 
 Đây là dòng heading 3 
 Đây là dòng heading 4 
 Đây là dòng heading 5 
 Đây là dòng heading 6 
Bài 2: HTML cơ bản 
13 
Phân đoạn - Paragraphs 
 Sử dụng tag để phân biệt các đoạn 
văn bản 
 HTML sẽ tự động thêm một dòng trắng 
trước và sau đoạn văn bản 
Bài 2: HTML cơ bản 
14 
Phân đoạn - Paragraphs 
 Ví dụ: 
 Một nhóm các nhà khoa học Australia tin rằng quá ít axit béo 
omega-3, có trong cá và hải sản, và quá nhiều axit béo omega-6, có trong dầu 
chế biến và quả hạch, sẽ gia tăng nguy cơ bị trầm cảm ở lứa tuổi dậy thì. 
 Gần 1.000 dân Sydney tuổi từ 14 đến 17 sẽ được chiêu mộ để 
tham gia cuộc nghiên cứu tìm hiểu tác động của thức ăn đối với tâm trạng. Việc 
ăn ít hải sản cũng đã được xác định có liên quan tới sự gia tăng khả năng trầm 
cảm ở người lớn. Nghiên cứu sẽ nhằm khẳng định nó tác động tới thiếu niên 
theo cách tương tự hay không. 
Bài 2: HTML cơ bản 
15 
Phân đoạn - Paragraphs 
Bài 2: HTML cơ bản 
16 
Ngắt dòng – Line Break 
 Sử dụng tag để chuyển sang một 
dòng mới nhưng không kết thúc đọan văn 
bản 
 Tag không cần tag đóng 
Bài 2: HTML cơ bản 
17 
Ngắt dòng – Line Break 
 Ví dụ: 
 Ai ơi bưng bát cơm đầy 
 Dẻo thơm một hạt đắng cay muôn phần 
 Ăn quả nhớ kẻ trồng cây 
 Ăn khoai nhớ kẻ cho dây mà trồng 
Bài 2: HTML cơ bản 
18 
Tag - Horizontal rule 
 Dùng để tạo ra một đường kẻ ngang 
 Thuộc tính size và width dùng để thay đổi 
độ rộng và chiều dài đường kẻ 
Bài 2: HTML cơ bản 
19 
Tag - Horizontal rule 
 Ví dụ: 
 Trường CĐSP KonTum 
 Khoa Tin Học - Ngoại ngữ 
Bài 2: HTML cơ bản 
20 
4. Sử dụng định dạng 
 Mục đích 
 Các cách sử dụng định dạng 
Bài 2: HTML cơ bản 
21 
4. Sử dụng định dạng 
 Mục đích: Dùng để định dạng nội dung 
trong trang HTML: văn bản, hình ảnh, 
khung 
LÀM SAO ĐỂ ĐỊNH 
DẠNG TRANG 
WEB? 
CÓ BAO 
NHIÊU CÁCH 
ĐỂ ĐỊNH 
DẠNG TRANG 
WEB? 
Bài 2: HTML cơ bản 
22 
4. Sử dụng định dạng 
 Các cách sử dụng định dạng 
– Cách 1: Dùng các tag định dạng 
– Cách 2: Chèn thuộc tính định dạng vào thẻ 
– Cách 3: Dùng thuộc tính style của tag (style inline) 
– Cách 4: Định dạng bằng CSS internal và external 
(mở rộng từ style của tag) 
Bài 2: HTML cơ bản 
23 
Cách 1: Dùng các tag định dạng 
 - bold : in đậm 
 - italic : in nghiêng 
 - underline : gạch dưới 
 Ví dụ: 
 Dòng in đậm 
 Dòng in nghiêng 
 Dòng gạch dưới 
Bài 2: HTML cơ bản 
24 
Cách 2: Chèn thuộc tính định dạng vào thẻ 
 Thuộc tính dùng bổ sung thông tin, định dạng cho thẻ 
 Tất cả các thẻ đều có thể bổ sung các thuộc tính riêng 
 Thuộc tính luôn được đặt ở thẻ mở 
 Thuộc tính luôn theo cú pháp: 
 Tên thuộc tính = “Giá trị thuộc tính” 
– Ví dụ: 
 Định dạng của thẻ h2 
 Bổ sung thuộc tính của thẻ 
Thuộc tính Giá trị của 
thuộc tính 
Bài 2: HTML cơ bản 
25 
Cách 2: Chèn thuộc tính định dạng vào thẻ 
 Mỗi thẻ có các thuộc tính riêng: 
– VÍ dụ 1: 
– Ví dụ 2: thêm thuộc tính color cho thẻ: 
 A. Bổ sung thuộc tính color cho thẻ h2 thẻ 
 B. Bổ sung thuộc tính color cho thẻ font 
Cho nhận xét về màu sắc chữ hai dòng A và B? Kết 
luận gì về thuộc tính color? 
TRẢ LỜI: THUỘC TÍNH COLOR CHỈ HIỆU LỰC Ở THẺ , KHÔNG CÓ 
HIỆU LỰC Ở THẺ H2 
 B. Bổ sung thuộc tính color 
cho thẻ font 
Bài 2: HTML cơ bản 
Cách 2: Chèn thuộc tính định dạng vào thẻ 
 Một số thuộc tính gắn thẻ thường dùng: 
 Sử dụng cho chú thích tại 
chỗ (tool tip) 
 
 
 (trang 22) 
 w3schools.. 
26 
Bài 2: HTML cơ bản 
27 
3. Dùng thuộc tính style của tag (style inline) 
 Style là thuộc tính dùng để tập hợp các thuộc 
tính khác cho tag 
 Cú pháp: 
 style=‘ tên_thuộc_tính_1: giá_trị 1; 
tên_thuộc_tính_2: giá_trị 2; ‘ 
Chú ý: Sử dụng style tương tự như sử dụng 
thuộc tính 
Giá trị của style là các cặp thuộc tính và 
cách nhau bằng dấu ; 
VD: 
Dùng Style 
Bài 2: HTML cơ bản 
28 
Dùng thuộc tính style của tag (style inline) 
 Ví dụ một số thuộc tính trong style: 
– font-size : khổ chữ 
– font-style : kiểu chữ (nghiêng hoặc thường) 
– font-weight : nét chữ(đậm hoặc chọn kích thước) 
– color : màu chữ 
– background-color : màu nền 
– border : đường viền 
– text-decoration : gạch dưới, gạch trên, gạch bỏ 
hoặc bỏ hết các định dạng 
– text-align : canh lề trái, giữa hoặc phải. 
– width : chiều rộng 
– height : chiều cao 
Bài 2: HTML cơ bản 
29 
Dùng thuộc tính style của tag (style inline) 
Thuộc tính của thẻ và thuộc tính của tt style có giống 
nhau không? 
TRẢ LỜI: CÓ THỂ GIỐNG HOẶC KHÁC TÊN THUỘC TÍNH. 
ĐỊNH DẠNG CỦA THẺ H2 
 ĐỊNH DẠNG CỦA THẺ 
FONT 
ĐỊNH DẠNG CỦA 
THẺ H2 DÙNG STYLE 
Bài 2: HTML cơ bản 
30 
Thẻ div và span 
 Ta thường các dùng thẻ div và span kết 
hợp với thuộc tính style để định dạng văn 
bản 
– div dùng để định dạng cả đoạn văn. 
– span dùng để định dạng các từ trong đoạn 
văn. 
Bài 2: HTML cơ bản 
31 
Thẻ div và span 
 Ví dụ: 
Bài 2: HTML cơ bản 
32 
Thẻ div và span 
 Ví dụ: 
 MẸ ! 
 Mẹ là cả một trời 
thương 
Mẹ là cả một thiên 
đường trần gian 
Công ơn cha mẹ tựa 
biển trời 
Làm sao báo hiếu hỡi người ơi? 
Nếu chưa báo hiếu đừng bất hiếu 
Bất hiếu làm ta khổ muôn đời. 
Bài 2: HTML cơ bản 
33 
5. Hình ảnh – tag img 
 Chèn hình ảnh vào trang web 
 Định dạng hình ảnh 
Bài 2: HTML cơ bản 
34 
Chèn hình ảnh vào trang web 
 Dùng tag và thuộc tính src để khai 
báo URL chứa tập tin hình ảnh 
 Thuộc tính alt : xuất câu thông báo nếu 
tập tin hình không tồn tại 
 Ví dụ: 
 Tôm là món hải sản 
có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế 
biến xong món tôm rất ngon này. 
Bài 2: HTML cơ bản 
35 
Định dạng hình ảnh 
 width, height: độ rộng và chiều cao hình, tính 
bằng pixel (mặc định) hoặc %. 
 align: định vị trí xuất hiện của hình so với đọan 
văn bản một cách tương đối (left, right,  ) 
Ví dụ: 
<img src="tomcang.jpg" alt="Hình con tôm càng“align="right" width="100" 
height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần 
mươi phút là có thể chế biến xong món tôm rất ngon này. 
Bài 2: HTML cơ bản 
36 
6. Danh sách – tag ul, ol 
 Tạo danh sách có thứ tự - tag ol 
 Tạo danh sách không có thứ tự - tag ul 
 Thay đổi ký hiệu đầu dòng trong danh sách 
Bài 2: HTML cơ bản 
37 
Tạo danh sách có thứ tự - tag ol 
 Dùng tag kết hợp với tag , cú 
pháp như sau: 
 ..... 
 ..... 
 ... 
 Ví dụ: 
 Thực đơn giải khát 
 Cafe đá 
 Coca cola 
 Chanh muối 
Bài 2: HTML cơ bản 
38 
Tạo danh sách không có thứ tự - tag ul 
 Dùng tag kết hợp với tag , cú 
pháp như sau: 
 ..... 
 ..... 
 ... 
 Ví dụ: 
 Thực đơn giải khát 
 Cafe đá 
 Coca cola 
 Chanh muối 
Bài 2: HTML cơ bản 
39 
Thay đổi ký hiệu đầu dòng trong danh sách 
 Thuộc tính type của tag và , 
bảng giá trị như sau: 
Bài 2: HTML cơ bản 
40 
 Tạo các danh sách lồng vào nhau 
Bài 2: Ngôn ngữ HTML 
Danh sách - Lists 
Ví dụ: 
Thực đơn 
 Buổi sáng 
 Bánh canh cua 
 Bún bò Huế 
 Hủ tíếu Nam vang 
 Buổi trưa 
 Cá lóc kho 
 Thịt kho trứng 
 Mục xào sa tế 
 Chiều tối 
 Mì gói 
 Bánh ướt 
Bài 2: HTML cơ bản 
41 
7. Liên kết – tag a 
 Cú pháp: tag kết hợp với thuộc tính 
href 
 Ví dụ 1: 
 Click vào đây để chuyển đến trang 
 Tự học web 
 Nội dung tag 
Bài 2: HTML cơ bản 
Tag liên kết trang – Tag (anchor) 
 Giải thích: 
 Nội dung tag 
 Thuộc tính target của tag 
– name: tải trang web vào frame có tên NAME 
– _blank: tải trang web vào cửa sổ mới 
– _parent: tải trang web vào cửa sổ cha của nó 
– _self: tải trang web vào chính cửa sổ hiện hành 
– _top: tải trang web vào cửa số cao nhất 
 Ví dụ 2: 
Bài 2: HTML cơ bản 
Tag liên kết trang – Phân loại liên kết 
 Phân loại : 
– Liên kết ngoại (external link) 
– Liên kết nội (internal link) 
– Liên kết email (email link) 
Bài 2: HTML cơ bản 
Tag liên kết trang – Liên kết ngoại 
(External Link) 
Bài học 2 
Trang hiện tại 
baihoc1.htm 
Trang có địa chỉ 
xác định từ URL 
baihoc2.htm 
Click 
chuột 
 Text đại diện 
Bài 2: HTML cơ bản 
Tag liên kết trang – Liên kết nội 
(Internal Link) 
 Vi tri bat dau 
 Text đại diện 
Text đại diện 
Vi tri bat dau 
.abcdefgh 
...01234567 
. 
Nội 
dung 
trang 
khi 
chưa 
liên 
kết 
. 
. 
Text đại diện 
Vi tri bat dau 
.abcdefgh 
...01234567 
. 
. 
. 
. 
. 
Nội 
dung 
trang 
khi 
bấm 
liên 
kết 
Click 
chuột 
Bài 2: HTML cơ bản 
Tag liên kết trang – Liên kết Email 
Liên hệ Admin 
Click 
chuột 
Liên hệ Admin 
Bài 2: HTML cơ bản 
Tag liên kết trang – Phân loại địa chỉ 
URL 
 Địa chỉ URL phân làm 2 loại : 
– Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với 
Mạng Internet 
– Địa chỉ tương đối : Là vị trí tương đối so với 
trang web hiện hành đang chứ liên kết. 
 Linked content 
Ký hiệu Ý nghĩa 
/ Trở về thư mục gốc của website 
./ Thư mục hiện tại của trang web sử dụng link (mặc định) 
../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục 
 Một số ký hiệu đường dẫn đặc biệt: 
Bài 2: HTML cơ bản 
Ví dụ 
file A có link đến file B, vậy trong file A 
có HTML element: 
liên kết đến B 
 muc 1/file B.htm 
URL = 
/demo/Thu muc 1/file B.htm 
# 127.0.0.1/demo 
Thu muc 1/file B.htm 
./Thu muc 1/file B.htm 
Bài 2: HTML cơ bản 
Ví dụ 
file B có link đến file C, vậy trong file 
B có HTML element: 
liên kết đến C 
 muc 1/ 
 Thu muc 1_1/file C.htm 
URL = 
/demo/Thu muc 1/Thu muc 1_1/file C.htm 
# 127.0.0.1/demo 
Thu muc 1_1/file C.htm 
./Thu muc 1_1/file C.htm 
Bài 2: HTML cơ bản 
Ví dụ 
file C có link đến file D, vậy trong file 
D có HTML element: 
liên kết đến D 
 muc 1/ 
 Thu muc 1_2/file D.htm 
URL = 
/demo/Thu muc 1/Thu muc 1_2/file D.htm 
# 127.0.0.1/demo 
../Thu muc 1_2/file D.htm 
./../Thu muc 1_2/file D.htm 
Bài 2: HTML cơ bản 
Ví dụ 
file D có link đến file F, vậy trong file F 
có HTML element: 
liên kết đến F 
 muc 2/file F.htm 
URL = 
/demo/Thu muc 2/file F.htm 
# 127.0.0.1/demo 
../../Thu muc 2/file F.htm 
./../../Thu muc 2/file F.htm 
Bài 2: HTML cơ bản 
Ví dụ 
file F có link đến file E, vậy trong file F 
có HTML element: 
liên kết đến E 
 muc 1/ Thu muc 
 1_2/Thu muc 1_2_1/file E.htm 
URL = 
/demo/Thu muc 1/Thu muc 1_2/ 
 Thu muc 1_2_1/file E.htm 
# 127.0.0.1/demo 
../Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/ 
 file E.htm 
Bài 2: HTML cơ bản 
Ví dụ 
file E có link đến file A ở vị trí xác 
định, vậy trong file A có HTML 
element: 
liên kết đến A tai vi 
tri B 
URL = 
# 127.0.0.1/demo 
../../../file A.htm#positionB 
Bài 2: HTML cơ bản 
54 
8. Bảng - Table 
 Tạo Table 
 Trộn dòng, cột trong Table 
 Định dạng Table 
Bài 2: HTML cơ bản 
55 
Tạo Table 
 Cú pháp: 
 nội dung nội dung 
 nội dung nội dung 
Bài 2: HTML cơ bản 
Tag kẻ bảng - Table 
 Giải thích: 
Bài 2: HTML cơ bản 
Tag kẻ bảng – Table (tt) 
Bài 2: HTML cơ bản 
Tag kẻ bảng – Table (tt) 
Bài 2: HTML cơ bản 
59 
Tạo Table 
 Ví dụ: 
 Dòng 1, cột 1 
 Dòng 1, cột 2 
 Dòng 2, cột 1 
 Dòng 2, cột 2 
Bài 2: HTML cơ bản 
60 
Tạo Table 
 Ví dụ: 
 Dòng 1, cột 1 
 Dòng 1, cột 2 
 Dòng 2, cột 1Dòng 2, cột 2 
Bài 2: HTML cơ bản 
61 
Trộn dòng, cột trong Table 
 colspan: kết hợp nhiều cột thành một cột 
 rowspan: kết hợp nhiều dòng thành một 
dòng 
 width : độ rộng của dòng, cột 
 height : chiều cao của dòng, cột 
Bài 2: HTML cơ bản 
62 
Trộn dòng, cột trong Table 
 Ví dụ: trộn cột 
 Tên 
 Phạm Ngọc Thiên Thanh 
Bài 2: HTML cơ bản 
63 
Trộn dòng, cột trong Table 
 Ví dụ: trộn dòng 
 Tên Điện thoại 
 Phạm Ngọc Thiên Thanh 
 8351056 0909039999 
Bài 2: HTML cơ bản 
64 
Định dạng Table 
 Tạo khoảng cách giữa các cell 
– cellpadding: khoảng cách từ biên của 
cell tới nội dung trong cell 
– cellspacing: khoảng cách giữa các cell 
Bài 2: HTML cơ bản 
65 
Định dạng Table 
 Tạo khoảng cách giữa các cell 
 Dòng 1, cột 1 Dòng 1, cột 2 Dòng 1, cột 3 
Cellspacing 
Cellpadding 
Bài 2: HTML cơ bản 
66 
Định dạng Table 
 Tạo tiêu đề, canh lề và tô màu nền 
cho table 
– Tag : tạo tiêu đề, phải đặt 
ngay sau tag 
– align : canh lề cho table 
– bgcolor : tô màu nền 
– background : hình làm nền 
Bài 2: HTML cơ bản 
67 
Định dạng Table 
 Tạo đường viền 
– border : độ rộng của đường viền 
– bordercolor : màu đường viền 
 Ví dụ: 
 <table align="center" cellspacing="5" cellpadding="15" border="5" 
width="500" bgcolor="#DFFDC4" bordercolor="#0E721F"> 
 Thông tin cá 
nhân 
 Tên 
 Điện thoại 
 Phạm Ngọc Thiên Thanh 
 8351056 
 0909039999 
Bài 2: HTML cơ bản 
68