1. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 1
BÀI 3 – WEBSITE GIỚI THIỆU MÔN HỌC (tt)
Mục tiêu bài học
- Chèn ảnh vào trang HTML
- Tìm hiểu về thẻ div và cách sử dụng
- Tìm hiểu thuộc tính margin, padding, border và box sizing
1. Thẻ <img> là gì? Cách sử dụng như thế nào?
Thẻ <img> trong HTML (HyperText Markup Language) là một thẻ được sử dụng để chèn hình ảnh vào trang
web.
Cú pháp của thẻ <img> như sau:
Trong đó:
src: Thuộc tính này chỉ định đường dẫn (URL) đến tập tin hình ảnh. Đây có thể là một đường dẫn
tương đối (nếu hình ảnh nằm trong cùng thư mục với trang HTML) hoặc một đường dẫn tuyệt đối (nếu
hình ảnh nằm ở nơi khác).
alt: Thuộc tính này cung cấp mô tả về hình ảnh cho người dùng nếu hình ảnh không thể hiển thị hoặc
nếu họ sử dụng các trình duyệt không hỗ trợ hình ảnh. Nó cũng hữu ích cho việc tăng khả năng tiếp
cận của trang web cho người dùng khuyết tật.
width (tùy chọn): Thuộc tính này xác định chiều rộng của hình ảnh (dưới đơn vị pixel).
height (tùy chọn): Thuộc tính này xác định chiều cao của hình ảnh (dưới đơn vị pixel).
Ví dụ Trong ví dụ này, chúng ta có một trang web cơ bản với một tiêu đề và một hình ảnh.
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ img</title>
</head>
<body>
<h1>Chèn hình ảnh bằng thẻ img</h1>
<img src="hinh_anh.jpg" alt="Mô tả hình ảnh" width="300" height="200">
</body>
</html>
2. Thẻ <div> là gì? Cách sử dụng như thế nào?
Thẻ <div> trong HTML là một thẻ dùng để tạo ra một container hoặc một khối chứa các phần tử HTML khác.
Nó không mang lại bất kỳ ý nghĩa ngữ nghĩa nào mà chỉ định cấu trúc và tổ chức của trang web.
Thẻ <div> rất hữu ích khi bạn muốn nhóm các phần tử HTML lại với nhau để áp dụng các thuộc tính CSS
hoặc JavaScript.
Cú pháp của thẻ <div> như sau:
<img src="đường_dẫn_ảnh" alt="mô_tả_ảnh" width="chiều_rộng"
height="chiều_cao">
<div>
<!-- Nội dung bên trong div --
>
</div>
2. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 2
Ví dụ 1
hãy tưởng tượng bạn muốn tạo một trang web đơn giản có tiêu đề, một đoạn văn bản và một
hình ảnh:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ sử dụng thẻ div</title>
</head>
<body>
<div>
<h1>Tiêu đề trang</h1>
<p>Đây là một đoạn văn bản.</p>
<img src="hinh_anh.jpg" alt="Hình ảnh mô tả">
</div>
</body>
</html>
Ví dụ 2 một ví dụ sử dụng thẻ <div> để chia trang thành các phần bố cục khác nhau
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ sử dụng thẻ div</title>
<style>
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
}
.footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Tiêu đề trang</h1>
</div>
<div class="content">
<h2>Phần nội dung</h2>
<p>Đây là một đoạn văn bản.</p>
3. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 3
<img src="hinh_anh.jpg" alt="Hình ảnh mô tả">
</div>
<div class="footer">
<p>Chân trang</p>
</div>
</body>
</html>
3. Tìm hiểu về thuộc tính padding
Padding là một thuộc tính dùng để thiết lập khoảng cách giữa nội dung của một phần tử và viền của nó. Nó
cũng ảnh hưởng đến kích thước của phần tử.
Có bốn loại padding:
padding-top: Thiết lập khoảng cách giữa phần tử và viền phía trên.
padding-right: Thiết lập khoảng cách giữa phần tử và viền phía bên phải.
padding-bottom: Thiết lập khoảng cách giữa phần tử và viền phía dưới.
padding-left: Thiết lập khoảng cách giữa phần tử và viền phía bên trái.
Tất cả các thuộc tính đệm có thể có các giá trị sau:
chiều dài - chỉ định phần padding bằng px, pt, cm, v.v.
% - chỉ định một phần padding tính bằng% chiều rộng của phần tử chứa
inherit - chỉ định rằng phần padding phải được kế thừa từ phần tử cha
📝 Ghi chú: Giá trị âm không được phép sử dụng trong padding.
Cú pháp sử dụng padding như thế nào?
Giá trị của value có thể là số nguyên (px, em, %) hoặc các giá trị khác như auto.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Padding</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #ccc;
}
</style>
element {
padding-top: value;
padding-right: value;
padding-bottom:
value;
padding-left: value;
}
4. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 4
</head>
<body>
<div>
Nội dung bên trong hộp box nè :v
</div>
</body>
</html>
4. Tìm hiểu về thuộc tính margin
Thuộc tính margin được sử dụng để định nghĩa khoảng cách giữa các phần tử HTML với các phần tử xung
quanh.
Có 4 loại margin chính:
Margin top (trên): Khoảng cách giữa phần tử và phần tử phía trên nó.
Margin right (phải): Khoảng cách giữa phần tử và phần tử phía bên phải nó.
Margin bottom (dưới): Khoảng cách giữa phần tử và phần tử phía dưới nó.
Margin left (trái): Khoảng cách giữa phần tử và phần tử phía bên trái nó.
Bạn có thể sử dụng giá trị đơn (px, em, %) hoặc giá trị tỷ lệ phần trăm để xác định margin.
⚠️ Về cách sử dụng và cú pháp thì tương tự như padding bạn có thể xem lại phía trên nhé!
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Margin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Nội dung trong thẻ div</p>
</div>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
5. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 5
div {
background-color: #f0f0f0;
padding: 20px;
margin: 30px;
}
5. Tìm hiểu về thuộc tính border
border là một thuộc tính dùng để định nghĩa viền (hoặc biên) của một phần tử HTML. Viền này bao quanh
phần tử và giúp tạo ra hiệu ứng hình dạng, màu sắc và kích thước khác nhau.
Có nhiều thuộc tính có thể được sử dụng để tùy chỉnh viền, bao gồm:
border-style: Xác định kiểu của viền (ví dụ: solid, dashed, dotted, double, none, ...).
border-width: Xác định độ rộng của viền.
border-color: Định nghĩa màu sắc của viền.
border-radius: một thuộc tính trong CSS dùng để bo tròn các góc của một phần tử.
Có thể kết hợp các thuộc tính này để tùy chỉnh viền theo ý muốn. Dưới đây là một ví dụ:
Ví dụ
/* Định nghĩa viền cho một phần tử */
div {
border-style: solid;
border-width: 2px;
border-color: red;
border-radius: 10px;
}
Ngoài ra, còn có một cách gộp chung các thuộc tính này thành thuộc tính border, ví dụ:
Ví dụ
/* Sử dụng thuộc tính border */
div {
border: 2px solid red;
}
Bảng kiểu viền border:
Giá trị Ví dụ Mô tả Hiển thị
none border: none; Xác định thành phần sẽ không có đường viền. Đường viền hiển thị
hidden border: hidden; Giống như giá trị none, nhưng được dùng cho table. Đường viền hiển thị
dotted border: dotted;
Xác định đường viền cho thành phần là dấu chấm
(dotted).
Đường viền hiển thị
dashed border: dashed;
Xác định đường viền cho thành phần là gạch ngang
(dashed).
Đường viền hiển thị
solid border: solid;
Xác định đường viền cho thành phần là đường
thẳng nét (solid).
Đường viền hiển thị
6. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 6
double border: double;
Xác định đường viền cho thành phần là 2 đường
thẳng nét (double).
Đường viền hiển thị
groove border: groove;
Xác định đường viền cho thành phần là đường rãnh
(groove).
Đường viền hiển thị
ridge border: ridge;
Xác định đường viền cho thành phần là đường chóp
(ridge).
Đường viền hiển thị
inset border: inset;
Xác định đường viền cho thành phần là đường bóng
bên trong (inset).
Đường viền hiển thị
outset border: outset;
Xác định đường viền cho thành phần là đường bóng
bên ngoài (outset).
Đường viền hiển thị
inherit border: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha
(thành phần bao ngoài).
Đường viền hiển thị
6. Tìm hiểu về thuộc tính box-sizing
box-sizing trong CSS là một thuộc tính được sử dụng để quy định cách tính toán kích thước của một phần tử,
bao gồm cả kích thước của các phần tử bên trong và padding và border.
Có hai giá trị chính cho box-sizing:
content-box: Đây là giá trị mặc định. Khi sử dụng giá trị này, kích thước của phần tử chỉ tính từ nội
dung bên trong, bao gồm cả padding và border.
border-box: Kích thước của phần tử sẽ bao gồm cả padding và border. Điều này có nghĩa là kích thước
nội dung bên trong sẽ được tính toán dựa trên kích thước đã chứa cả padding và border.
Ví dụ 1
Trong trường hợp này, kích thước tổng cộng của phần tử sẽ là:
width: 200px
padding (trên/dưới và trái/phải): 40px (20px + 20px)
border (trên/dưới và trái/phải): 10px (5px + 5px)
Kích thước của nội dung bên trong sẽ là 200px (kích thước đã chỉ định) - 40px (padding) -
10px (border) = 150px.
/* Sử dụng box-sizing: content-box */
.element {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
Ví dụ 2
Trong trường hợp này, kích thước tổng cộng của phần tử sẽ là:
width: 200px
7. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 7
padding (trên/dưới và trái/phải): 20px (đã bao gồm trong kích thước đã chỉ định)
border (trên/dưới và trái/phải): 10px (đã bao gồm trong kích thước đã chỉ định)
Kích thước của nội dung bên trong sẽ là 200px - 20px (padding) = 180px.
/* Sử dụng box-sizing: border-box */
.element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
Sử dụng box-sizing có thể giúp quản lý kích thước và vị trí của các phần tử trong trang web một cách linh
hoạt hơn.
THỰC HÀNH
Sử dụng các kiến thức đã học ở trên và dự án đã thực hiện ở bài trước, hãy thực hiện trang web như sau:
8. Bài 3 – Web Giới Thiệu Môn Học (tt) Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 8
