Bài 9. Trang web và ngôn ngữ HTML
Mọi trang web bạn từng mở qua trình duyệt đều được dựng trên một bộ khung có cấu trúc rõ ràng, viết bằng ngôn ngữ HTML. Bài này giới thiệu trang web và website là gì, cùng cách HTML dùng các thẻ để tạo nên bộ khung ấy.
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bảntr. 35
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bảntr. 35
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F1. HTML và trang webtr. 67
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F1. HTML và trang webtr. 100
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 7. HTML và cấu trúc trang webtr. 39–45
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 7. HTML và cấu trúc trang webtr. 39
Bắt đầu bằng một hình dung
Hãy hình dung bạn được giao dựng một ngôi nhà từ đầu. Trước khi nghĩ đến sơn tường màu gì, lát sàn gỗ hay gạch, hay treo rèm cửa kiểu nào, việc đầu tiên bao giờ cũng là dựng xong phần khung: móng ở đâu, cột chịu lực ở đâu, phòng khách nằm ở vị trí nào, phòng ngủ ở đâu, cửa chính mở về hướng nào. Phần khung ấy chưa đẹp, nhưng nó quyết định ngôi nhà có hình dạng và cấu trúc rõ ràng để sau đó mới trang trí lên trên.
Một trang web cũng được dựng theo đúng tinh thần đó. Trước khi trang có màu sắc bắt mắt, phông chữ dễ nhìn, hay cách sắp xếp gọn gàng (đó là việc của một ngôn ngữ khác, tên CSS, ta sẽ học ở bài sau), trang cần có một bộ khung xác định rõ: đâu là tiêu đề, đâu là đoạn văn bản, đâu là hình ảnh. Ngôn ngữ dùng để dựng bộ khung ấy gọi là HTML - nhân vật chính của bài học này.
Nội dung bài học
- Trang web và website
- HTML - ngôn ngữ đánh dấu, không phải ngôn ngữ lập trình
- Bộ khung cơ bản của một trang HTML
Tóm tắt lý thuyết cần nhớ
- Trang web là một tài liệu được trình duyệt đọc và hiển thị ra màn hình; nhiều trang web liên kết với nhau tạo thành một website.
- HTML (
HyperText Markup Language) là một ngôn ngữ đánh dấu, dùng các thẻ<tên>...</tên>để tạo cấu trúc cho nội dung - KHÔNG phải ngôn ngữ lập trình (không có phép tính, điều kiện, vòng lặp). - Bộ khung cơ bản của một trang HTML gồm bốn phần:
<!DOCTYPE html>(lời khai báo chuẩn),<html>(bao trùm toàn trang),<head>chứa<title>(không hiển thị giữa trang, chỉ hiện trên tab), và<body>(chứa nội dung hiển thị thực sự). - Phần lớn thẻ HTML đi theo cặp mở
<tên>và đóng</tên>; một số thẻ không bao nội dung nên tự đóng, ví dụ<br>,<img>.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| head | hét | phần đầu trang Là phần đầu của trang web, chứa các thông tin cài đặt như tên trang. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
- Một loại virus máy tính lây lan qua thư điện tử và trình duyệt
- Một tài liệu được trình duyệt đọc và hiển thị ra màn hình cho người xem
- Một ngôn ngữ lập trình dùng để tính toán và xử lí dữ liệu
- Một thiết bị phần cứng dùng để kết nối máy tính với Internet
web page) là một tài liệu được trình duyệt đọc và hiển thị lên màn hình cho người dùng xem - có thể gồm chữ, hình ảnh, đường liên kết... Ba phương án còn lại mô tả sai bản chất: đây không phải virus, không phải ngôn ngữ lập trình, cũng không phải một thiết bị phần cứng.HTML là viết tắt của cụm từ nào, và bản chất của nó là gì?HyperText Markup Language- một ngôn ngữ đánh dấu, dùng thẻ để tạo cấu trúc cho nội dungHigh Technology Modern Language- một ngôn ngữ lập trình hiện đại, có đầy đủ vòng lặp và điều kiệnHome Tool Media Layout- một phần mềm dùng để thiết kế giao diệnHyper Transfer Machine Logic- một giao thức dùng để truyền dữ liệu qua mạng
HTML là viết tắt của HyperText Markup Language - một ngôn ngữ đánh dấu (không phải ngôn ngữ lập trình), dùng các thẻ để gắn nhãn, tạo cấu trúc cho nội dung trang web (đâu là tiêu đề, đâu là đoạn văn...). Ba phương án còn lại là tên gọi bịa ra, không đúng với HTML.<head><title><body><!DOCTYPE html>
<body> là phần chứa nội dung thực sự hiển thị lên trang: tiêu đề, đoạn văn, hình ảnh... <head> chỉ chứa thông tin không hiển thị trực tiếp giữa trang; <title> tuy nằm trong <head> và có hiển thị, nhưng chỉ hiện trên tab của trình duyệt chứ không hiện giữa nội dung trang; <!DOCTYPE html> chỉ là lời khai báo chuẩn cho trình duyệt, không phải nội dung của trang.- a)
HTMLlà một ngôn ngữ lập trình có đầy đủ phép tính và vòng lặp giống nhưPython.Sai - b)Thẻ
<title>đặt trong<head>sẽ hiển thị trên tab của trình duyệt, chứ không hiển thị giữa nội dung trang.Đúng - c)Một
websitecó thể gồm nhiều trang web liên kết với nhau.Đúng - d)Mọi thẻ HTML đều bắt buộc phải có thẻ đóng riêng, không có ngoại lệ nào.Sai
- (a) Sai -
HTMLlà ngôn ngữ đánh dấu, dùng thẻ để tạo cấu trúc cho nội dung, không có phép tính hay vòng lặp như một ngôn ngữ lập trình. - (b) Đúng - nội dung trong
<title>(nằm trong<head>) chỉ hiện trên tab trình duyệt, không hiện giữa nội dung trang. - (c) Đúng - nhiều trang liên kết với nhau qua các đường dẫn tạo thành một
website. - (d) Sai - một số thẻ như
<br>hay<img>không bao nội dung nên tự đóng, không cần thẻ đóng riêng.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.