1. Bài 5 – Quản trị bài viết Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 1
BÀI 5 – WEBSITE QUẢN TRỊ BÀI VIẾT
Mục tiêu bài học
- Tìm hiểu phần tử khối
- Tìm hiểu phần tử nội tuyến
- Tìm hiểu về thẻ <span>
- Tìm hiểu về class và cách sử dụng
- Vận dụng kiến thức thực hành dự án quản trị, cập nhật các bài viết tuyển dụng của Teky
Trong HTML, hầu hết các phần tử được phân thành 2 loại đó là: phần tử khối (block element) và phần từ
nội tuyến (inline element). Vậy 2 dạng phần tử này nó có ý nghĩa và tác dụng như thế nào và những thẻ nào
thuộc dạng phần tử khối và thẻ nào thuộc phần tử nội tuyến? Bài học này chúng ta cùng đi tìm hiểu rõ hơn về
phần tử khối và phần tử nội tuyến trong HTML nhé.
1. Phần tử khối (Block Element) là gì?
Phần tử khối (Block Element) đúng như tên gọi của nó với chức năng tạo thành 1 khối với các đặc điểm như
sau:
Luôn bắt đầu trên 1 hàng mới
Phần tử phía sau nó cũng cũng được bắt đầu trên 1 hàng mới dù đó có là phần tử khối hay là phần tử
nội tuyến.
Chiều rộng không phụ thuộc vào nội dung bên trong mà nó chiếm toàn bộ chiều rộng của phần tử chứa
nó.
Ví dụ minh họa về phần tử khối:
Một số thẻ thuộc loại phần tử khối:
<div>
<p>
<h1>, <h2>,…, <h6>
<ul>, <li>
<table>
….
2. Phần tử nội tuyến (Inline Element) là gì?
Phần tử nội tuyến (Inline Element) là phần tử có thể nằm chung dòng với các phần tử nội tuyến khác và nó có
các đặc điểm như sau:
Không bắt đầu trên 1 hàng mới ngoại trừ trường hợp trước nó là 1 phần tử khối.
Chiều rộng phụ thuộc vào phần nội dung bên trong nó
Ví dụ minh họa về phần tử nội tuyến:
2. Bài 5 – Quản trị bài viết Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 2
Một số thẻ thuộc loại phần tử nội tuyến:
span>
<a>
<img>
….
3. Thẻ <div> trong HTML
Thẻ <div> là 1 thẻ tiêu biểu của phần tử khối nó dùng để tạo block, tạo vùng chứa các phần tử khác. Thẻ <div>
nó không có định dạng gì đặc biệt nên nó thường phải dùng CSS để định dạng cho nó.
Ví dụ
<p>Đoạn văn bản 1</p>
<div align="center">
Đoạn văn bản 2
<p>Đoạn văn bản 3</p>
<p>Đoạn văn bản 4</p>
</div>
<p>Đoạn văn bản 5</p>
<div align="right">
<p>Đoạn văn bản 6</p>
<p>Đoạn văn bản 7</p>
</div>
4. Thẻ <span> trong HTML
Thẻ <span> trong HTML là 1 thẻ nội tuyến tiêu biểu, nó thường dùng để định dạng cho văn bản mà không
làm cho văn bản bị ngắt dòng. Bạn có thể xem ví dụ như sau:
Ví dụ
<p>Trong đoạn văn bản, <span style="background-color:green; font-size: 25px;">các chữ nằm
trong thẻ span</span> được định dạng khác</p>
Gợi ý: Để kiểm tra 1 phần tử nào đó xem nó thuộc phần tử khối hay phần tử nội tuyến, ta chỉ cần
thêm style=”border:1px solid black” vào thẻ mở để xem kích thước của phần tử. Ví dụ <div style=”border:1px
solid black”>Xin chào!</div>
5. Thuộc tính Class trong HTML
Thuộc tính CLASS dùng để đặt tên cho 1 hoặc nhiều phần tử HTML khi bạn muốn chúng có cùng định dạng.
Thông thường sẽ sử dụng cho nhiều phần tử HTML chứ nếu có 1 phần tử thì không nên lạm dụng thuộc tính
CLASS. Ngoài ra, 1 phần tử có thể sử dụng nhiều class và mỗi class cách nhau bằng 1 khoảng trống (khoảng
cách). Để khai báo class trong HTML chúng ta dùng cú pháp: class=ten-class”
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.id {
background: #50e5fc;
padding: 10px;
}
.class {
border: 2px solid #78b43d;
font-size: 12px;
}
.thuoc-tinh-id {
background-color: red;
color: black;
font-size: 15px;
}
3. Bài 5 – Quản trị bài viết Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 3
.thuoc-tinh-class {
background-color: blue;
color: #fff;
font-size: 30px;
}
</style>
</head>
<body>
<div class="id class">
<p class="thuoc-tinh-id">Thuộc tính ID</p>
<p class="thuoc-tinh-class">Thuộc tính CLASS</p>
<p class="thuoc-tinh-id">Thuộc tính ID</p>
<p class="thuoc-tinh-class">Thuộc tính CLASS</p>
</div>
</body>
</html>
Trong ví dụ trên, bạn có thể thấy 1 class chúng ta dùng cho 2 phần tử hoặc có thể nhiều hơn tùy ý. Và 1 phần
tử chúng ta có thể sử dụng 2 class hoặc nhiều hơn. Ở đây bạn có thể thấy thẻ <div> mình dùng 2 class là
class=”id class”.
Lưu ý
Chỉ được phép sử dụng các chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( – ) để đặt tên cho
CLASS.
Tên CLASS không nên bắt đầu bằng chữ số vì nó sẽ không hoạt động trên một số trình duyệt.
4. Bài 5 – Quản trị bài viết Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 4
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:
