Trước khi tìm hiểu chi tiết về các thẻ HTML và ứng dụng của nó. Chúng ta sẽ đi tìm hiểu về cấu trúc, thuộc tinh của một thẻ HTML.
1. Thẻ HTML
1.1. Khai báo thẻ HTML
Thẻ HTML được bắt đầu với thẻ mở, kết thúc với thẻ đóng cùng tên, phần nội dung nằm ở giữa 2 thẻ
<tên thẻ>Nội dung cần trình bày</tên thẻ>
Ví dụ: <p>Khoa CNTT - Đại học Thành Đô</p>
Thẻ mở
|
Nội dung thẻ
|
Thẻ đóng
|
<h1>
|
Hello World !
|
</h1>
|
<p>
|
Khoa CNTT - Đại học Thành Đô
|
</p>
|
<br>
|
1.2. Thẻ HTML lồng nhau
<!DOCTYPE html>
<html>
<body>
<h1>Xin chào các bạn</h1>
<p>Khoa CNTT - Đại học Thành Đô</p>
</body>
</html>
Giải thích ý nghĩa các thẻ HTML:
- Thẻ <html> định nghĩa sử dụng html trong toàn trang, thẻ mở <html>, thẻ đóng </html>. Bên trong chứa toàn bộ các thẻ HTML khác.
- Thẻ <body> chứa nội dung chính của trang HTML. Thẻ body có thẻ mở <body> và thẻ đóng </body>.
- Thẻ <h1> xác định kích thước tiêu đề của văn bản
- Thẻ <p> chứa nội dung của từng đoạn văn bản.
1.3. Thẻ HTML trống
Các thẻ HTML không chứa nội dung được gọi là thẻ HTML trống
Ví dụ: Thẻ <br> không chứa nội dung. Thẻ này có chức năng xuống dòng, khi viết văn bản
Thông thường, hay sử dụng thẻ <br> với một thẻ như sau: <br />
2. Thuộc tính của thẻ HTML
- Các thẻ HTML có thể có hoặc không có thuộc tính
- Các thuộc tính cung cấp các thông tin chi tiết của thẻ.
- Các thuộc tính thường được định nghĩa ở trong thẻ mở của cặp thẻ HTML
- Thuộc tính có một tên và đi kèm một giá trị xác định cụ thể: name = value;
Cú pháp: <tên thẻ thuộc tính 1=giá trị 1 thuộc tính 2=giá trị 2> Nội dung văn bản</tên thẻ>
Ví dụ:
<img src="hienminh.jpg/" alt="Learn Design Web">
2.1. Một số ví dụ về thẻ HTML và thuộc tính:
- Thẻ html và thuộc tính lang: Khai báo ngôn ngữ sử dụng trong trang HTML
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Thiết kế website</h1>
<p>Khoa CNTT - Đại học Thành Đô</p>
</body>
</html>
- Thẻ a và thuộc tính href: Khai báo liên kết giữa các trang web
<a href="http://minhhienict.blogspot.com/">This is a link</a>
- Thẻ img và thuộc tính alt: Dùng để hiển thị một ảnh và ghi chú về ảnh đó khi di chuột lên ảnh.
<img src="minhhien.jpg/" alt="Học lập trình" width="100" height="90">
2.2. Một số thuộc tính thường dùng trong HTML
Thuộc tính
|
Mô tả
|
alt
|
Chỉ định một văn bản thay thế cho hình ảnh
|
disable
|
Chỉ định vô hiệu hóa một đối tượng điều khiển
|
href
|
Chỉ định một đường dẫn liên kết
|
id
|
Chỉ định một định danh duy nhất cho một thẻ
|
src
|
Chỉ định một đường dẫn cho một ảnh
|
0 on: "[HTML] Bài 3: Thẻ HTML và thuộc tính của thẻ"