Bài 7. HTML và cấu trúc trang web
Nội dung lý thuyết
1. Trang web và HTML
HTML là viết tắt của cụm từ Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản), là một bộ quy tắc để thiết lập cấu trúc và hiển thị nội dung trang web.
Trang web được thiết lập từ các tệp văn bản có phần đuôi mở rộng là .html hoặc .htm được gọi là trang html.
Nội dung trên trang html gồm phần văn bản (text) và các kí tự đánh dấu đặc biệt gọi là thẻ đánh dấu HTML (thẻ HTML hay tag).
a) Thẻ đánh dấu HTML
Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ đánh dấu siêu văn bản. Các thẻ được viết trong cặp dấu <, >.
Mỗi loại có tên riêng và ý nghĩa nhất định trong định dạng nội dung của trang web.
Thông thường mỗi thẻ bao gồm thẻ bắt đầu và thẻ kết thúc, chỉ ra phạm vi tác dụng của thẻ.
Ví dụ:
| Thẻ | Ý nghĩa thẻ | HTML code | Hiển thị trên trình duyệt |
p | Đoạn văn bản | <p>Xin chào.</p> | Xin chào. |
h1 | Tiêu đề của văn bản | <h1>Tiêu đề 1</h1> | Tiêu đề 1 |
Lưu ý khi sử dụng thẻ HTML:
- Tên thẻ không phân biệt chữ hoa, chữ thường nhưng mặc định tên thẻ được viết chữ thường.
- Có thể lồng các thẻ vào bên trong nhau hoặc độc lập.
- Có thể thay đổi định dạng của nội dung thông qua thay đổi thuộc tính của thẻ.
- Một số thẻ cần có cặp thẻ đóng và mở, số khác thì không.
- HTML chỉ ghi nhận một dấu cách và dấu xuống dòng.
b. Phần tử HTML
Phần tử HTML (element) là khái niệm cơ bản của trang html. Thông thường được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa.
Ví dụ: <p>Xin chào</p> có:
- Thẻ bắt đầu là
<p>. - Thẻ kết thúc là
</p>. - Nội dung là
Xin chào.
Vai trò của phần tử HTML là tạo nên cấu trúc và nội dung của trang web.
2. Cấu trúc cơ bản của một tệp HTML
<!DOCTYPE html>, không được coi là phần tử HTML và mang ý nghĩa đặc biệt, thông báo cho trình duyệt biết đây là tệp có định dạng html. Có thể coi là dòng khai báo html của tệp văn bản.
<html> là phần tử bắt buộc, đây là phần tử gốc và chứa tất cả các phần tử HTML còn lại của trang web. Phần tử <html> thường chứa hai phần tử con <head> và <body>.
<head> chứa các phần tử có liên quan chung đến toàn bộ trang web. Trong <head> thường có phần tử <title>. Một số phần tử khác thường có trong <head> bao gồm <meta>, <style> và <script>.