1. Trang web và ngôn ngữ HTML
Trang web là tài liệu dạng siêu văn bản, có thể chứa văn bản, hình ảnh, âm thanh, video và các liên kết đến tài liệu khác, được hiển thị trên Internet thông qua trình duyệt web.
HTML (viết tắt của HyperText Markup Language, tức ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ dùng để mô tả cấu trúc và nội dung của trang web bằng các thẻ.
HTML không có biến, cấu trúc rẽ nhánh, vòng lặp hay hàm như các ngôn ngữ lập trình. Nhiệm vụ của HTML là đánh dấu: cho trình duyệt biết đâu là tiêu đề, đâu là đoạn văn, đâu là liên kết, từ đó trình bày nội dung đúng ý người thiết kế.
1.1 Cú pháp thẻ
Mỗi thẻ HTML thường gồm thẻ mở, nội dung và thẻ đóng:
<tên_thẻ thuộc_tính="giá_trị"> nội dung </tên_thẻ>
- Thẻ đóng được viết lại tên thẻ, đặt trong cặp
</...>. Ví dụ:<p>Xin chào</p>. - Thuộc tính: cặp dạng
tên="giá_trị"đặt trong thẻ mở, bổ sung thông tin cho thẻ. Ví dụ:<a href="https://vi.wikipedia.org">Wikipedia</a>. - Một số thẻ không có nội dung, chỉ ghi thẻ mở, gọi là thẻ rỗng. Ví dụ:
<br>ngắt dòng;<img src="anh.jpg" alt="ảnh minh hoạ">chèn ảnh.
2. Cấu trúc chung của tài liệu HTML
Một tài liệu HTML gồm hai phần chính: phần đầu khai báo thông tin về trang và phần thân chứa nội dung hiển thị.
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Tieu de trang</title> </head> <body> Noi dung hien thi tren trang </body> </html>
<!DOCTYPE html>: khai báo tài liệu tuân theo chuẩn HTML5.<html lang="vi">: thẻ gốc, bao toàn bộ tài liệu; thuộc tínhlang="vi"cho biết trang viết bằng tiếng Việt.<head>: chứa thông tin về trang, không hiển thị trực tiếp trong cửa sổ trình duyệt.<meta charset="utf-8">: khai báo bảng mã UTF-8, giúp hiển thị đúng tiếng Việt có dấu.<title>: tiêu đề hiển thị trên thanh tiêu đề hoặc thẻ của trình duyệt.<body>: chứa toàn bộ nội dung mà người dùng nhìn thấy.
3. Một số thẻ thường dùng
| Nhóm thẻ | Ý nghĩa |
|---|---|
| Thẻ tiêu đề | <h1> đến <h6> tạo các cấp tiêu đề; <h1> lớn nhất, <h6> nhỏ nhất. |
| Đoạn văn và ngắt dòng | <p> tạo đoạn văn; <br> ngắt dòng trong đoạn văn. |
| In đậm, in nghiêng | <b> in đậm; <i> in nghiêng. |
| Liên kết | <a href="...">chữ liên kết</a> tạo liên kết đến địa chỉ cho trước. |
| Ảnh | <img src="..." alt="..."> chèn ảnh; src cho đường dẫn, alt cho mô tả khi ảnh không hiển thị. |
| Danh sách | <ul> kết hợp <li> cho danh sách không thứ tự; <ol> kết hợp <li> cho danh sách có thứ tự. |
| Bảng | <table>, <tr>, <th>, <td> lần lượt tạo bảng, hàng, ô tiêu đề và ô dữ liệu. |
- 1.Mở trình soạn thảo văn bản thuần túy, gõ mã HTML.
- 2.Lưu tệp với phần mở rộng
.htmlvà kiểu mã hoá UTF-8. - 3.Mở tệp vừa lưu bằng trình duyệt web để xem kết quả.
4. Ví dụ minh hoạ
Viết đoạn mã HTML tạo trang giới thiệu bản thân đơn giản, gồm tiêu đề, đoạn văn có chữ in đậm, danh sách sở thích và một liên kết.
Lời giải · 2 bước
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Gioi thieu ban than</title>
</head>
<body>
<h1>Xin chao!</h1>
<p>Minh la <b>Nam</b>, hoc sinh lop 12.</p>
<h2>So thich</h2>
<ul>
<li>Doc sach</li>
<li>Choi the thao</li>
</ul>
<p>Tham khao tai:
<a href="https://vi.wikipedia.org">Wikipedia</a>.</p>
</body>
</html>Bước 2
Trong đoạn mã trên: <h1> tạo tiêu đề lớn nhất; <p> tạo đoạn văn; <b> in đậm tên; <ul> kết hợp <li> tạo danh sách không thứ tự; <a href="..."> tạo liên kết đến địa chỉ chỉ định.
Viết đoạn mã hiển thị một bảng gồm hai môn học và điểm tương ứng.
Lời giải · 2 bước
Phần bảng được đặt trong <body>, cú pháp như sau:
<h2>Bang diem</h2>
<table>
<tr>
<th>Mon hoc</th>
<th>Diem</th>
</tr>
<tr>
<td>Toan</td>
<td>8</td>
</tr>
<tr>
<td>Tin</td>
<td>9</td>
</tr>
</table>Bước 2
Ở đây mỗi <tr> là một hàng; hàng đầu dùng <th> để tạo ô tiêu đề, các hàng sau dùng <td> để điền dữ liệu. Đường viền cho bảng nên tạo bằng CSS (thuộc tính border của thẻ <table> đã lỗi thời trong HTML5).
5. Lưu ý và lỗi hay gặp
- Quên thẻ
<meta charset="utf-8">hoặc lưu tệp không đúng kiểu UTF-8 sẽ làm tiếng Việt hiển thị lỗi kí tự. - Quên thẻ đóng hoặc để thẻ lồng chéo nhau, ví dụ
<p><b>Chào</p></b>, khiến trình duyệt hiển thị không như mong muốn. - Dùng
<a>thiếu thuộc tínhhrefhoặc<img>thiếusrcthì liên kết và ảnh không hoạt động. - Không nên lấy thẻ
<h1>chỉ để chữ to; thẻ tiêu đề còn cho biết hệ thống phân cấp của trang.
6. Ôn tập
HTML là gì? Nêu một điểm khác biệt cơ bản giữa HTML và ngôn ngữ lập trình.
Gợi ý trả lời
HTML là ngôn ngữ đánh dấu siêu văn bản, dùng các thẻ để mô tả cấu trúc và nội dung trang web. Khác với ngôn ngữ lập trình, HTML không có biến, vòng lặp, rẽ nhánh hay hàm mà chỉ đánh dấu nội dung để trình duyệt hiển thị.
Trình bày cấu trúc chung của một tài liệu HTML và nêu nhiệm vụ của hai thẻ <head> và <body>.
Gợi ý trả lời
Tài liệu HTML gồm: <!DOCTYPE html>, <html>, bên trong có <head> và <body>. <head> chứa thông tin về trang như bảng mã, tiêu đề trang; <body> chứa nội dung hiển thị cho người dùng.
Viết đoạn mã tạo một cấp tiêu đề <h2> có nội dung “Tin học 12” và một đoạn văn bên dưới có liên kết đến trang của trường.
Gợi ý trả lời
Dùng <h2>Tin hoc 12</h2>; sau đó dùng <p> chứa <a href="dia_chi_trang_truong">chữ liên kết</a>; nhớ khai báo <meta charset="utf-8"> trong <head>.