KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB
1. TRANG WEB VÀ HTML
HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, dùng để tạo nên cấu trúc và nội dung của trang web. Một tệp HTML là một tệp văn bản thường có đuôi là .html hoặc .htm.
a) Thẻ đánh dấu HTML
Khái niệm:
Là các từ khóa nằm trong cặp dấu ngoặc nhọn < > dùng để định dạng nội dung.
Đặc điểm:
- Thường đi theo cặp: Thẻ bắt đầu <tên thẻ> và thẻ kết thúc </tên thẻ>.
- Một số ít là thẻ đơn (chỉ có thẻ bắt đầu).
- Có thể thêm các thuộc tính bên trong thẻ bắt đầu để tùy chỉnh.
- Không phân biệt chữ hoa, chữ thường (nhưng nên viết chữ thường).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Ngôn ngữ HTML sử dụng các thẻ đánh dấu để tạo nên cấu trúc và định dạng nội dung cho trang web. Theo định nghĩa cơ bản, thẻ đánh dấu HTML là những từ khóa được đặt bên trong loại dấu ngoặc nào dưới đây?
Câu 2: Mặc dù ngôn ngữ HTML có những quy định riêng về cú pháp, nhưng đối với việc viết hoa hay viết thường tên của các thẻ đánh dấu, nguyên tắc nào sau đây phản ánh đúng nhất tính chất của ngôn ngữ này?
Câu 3: Khi tạo một trang web, bạn muốn thêm một số tùy chỉnh cho một đoạn văn bản như đổi màu chữ hoặc căn lề. Theo quy tắc cú pháp của HTML, bạn sẽ phải đặt các thuộc tính tùy chỉnh này vào vị trí nào?
b) Phần tử HTML
Khái niệm:
Bao gồm thẻ bắt đầu, nội dung bên trong và thẻ kết thúc (đối với thẻ đôi). Thẻ đơn và nội dung của nó cũng là một phần tử.
Cấu trúc cây:
Các phần tử có thể lồng nhau (phần tử con nằm trong phần tử cha) tạo nên cấu trúc phân cấp.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 4: Trong cấu trúc của một trang web HTML, một phần tử (element) cơ bản đối với loại thẻ đôi được định nghĩa đầy đủ là sự kết hợp của những thành phần cốt lõi nào theo chuẩn ngôn ngữ đánh dấu siêu văn bản?
Câu 5: Cấu trúc tổng thể của một trang HTML được tổ chức theo hình thức phân cấp rất chặt chẽ. Mối quan hệ lồng nhau giữa các phần tử (phần tử con nằm trong phần tử cha) giúp tạo nên cấu trúc gì cho trang web?
Câu 6: Giả sử bạn đang viết mã HTML và cần đặt một đoạn văn bản in đậm bên trong một khối giao diện. Dựa vào cấu trúc lồng nhau của phần tử HTML, bạn phải sắp xếp các thẻ như thế nào cho đúng quy tắc?
2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML
Cấu trúc trang web giống như một cái cây (cây thông tin), với phần tử gốc là <html> bao trùm tất cả.
Khai báo kiểu tệp:
Dòng đầu tiên luôn là <!DOCTYPE html> để trình duyệt hiểu đây là tệp HTML.
Phần tử <html>:
Là phần tử gốc, chứa toàn bộ nội dung trang web. Thường chia làm 2 phần chính:
1. Phần tử <head>: Chứa thông tin khai báo, cấu hình (không hiển thị nội dung trực tiếp trên trang).
- Chứa <title>: Tên trang web hiển thị trên tab trình duyệt.
- Chứa <meta>: Khai báo bảng mã (ví dụ UTF-8 để gõ tiếng Việt).
2. Phần tử <body>: Chứa toàn bộ nội dung mà người dùng nhìn thấy trên màn hình (văn bản, hình ảnh, video...).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 7: Mọi tệp HTML chuẩn đều phải tuân thủ một cấu trúc chung với các thẻ nền tảng. Theo quy định, phần tử gốc đóng vai trò bao trùm tất cả các phần tử khác trong một tài liệu HTML là phần tử nào?
Câu 8: Trong cấu trúc của trang web, phần tử <head> và phần tử <body> thực hiện những nhiệm vụ hoàn toàn khác biệt nhau. Chức năng chính của phần tử <body> trong một tệp HTML chuẩn được mô tả như thế nào?
Câu 9: Khi tạo một trang web mới, bạn muốn tên của trang web (ví dụ: "Trang chủ") hiển thị rõ ràng trên tab của trình duyệt web. Để thực hiện điều này, bạn phải viết thẻ <title> nằm bên trong phần tử nào?
3. PHẦN MỀM SOẠN THẢO HTML
a) Phần mềm Notepad
Là phần mềm soạn thảo văn bản thô sơ, có sẵn trên Windows (hoặc TextEdit trên MacOS). Không hỗ trợ tô màu từ khóa hay gợi ý mã.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 10: Để soạn thảo mã nguồn HTML trên hệ điều hành Windows mà không cần cài đặt thêm bất kỳ ứng dụng nào, người dùng có thể sử dụng ngay một phần mềm soạn thảo văn bản thô sơ có sẵn nào dưới đây?
Câu 11: Phần mềm Notepad là một công cụ đơn giản để tạo trang web, nhưng nó có những giới hạn nhất định so với các công cụ lập trình hiện đại. Hạn chế lớn nhất của Notepad khi dùng để viết mã HTML là gì?
Câu 12: Bạn đang dùng máy tính sử dụng hệ điều hành MacOS và muốn thực hành viết một đoạn mã HTML đơn giản nhưng máy chưa cài các công cụ lập trình chuyên dụng. Trong trường hợp này, bạn nên mở phần mềm nào?
b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở
Các phần mềm chuyên dụng như Notepad++ hoặc Sublime Text. Hỗ trợ tô màu mã lệnh, gợi ý thẻ, đánh số dòng giúp lập trình dễ dàng và ít lỗi hơn.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 13: Trong quá trình học và làm việc với HTML, thay vì dùng phần mềm thô sơ, người dùng thường tải các công cụ chuyên dụng nguồn mở. Tên của hai phần mềm soạn thảo HTML chuyên nghiệp được nhắc đến là gì?
Câu 14: Việc chuyển từ phần mềm soạn thảo văn bản thô sơ sang các phần mềm soạn thảo HTML chuyên nghiệp mang lại rất nhiều lợi ích cho lập trình viên. Những phần mềm chuyên dụng này cung cấp các tính năng hỗ trợ nào?
Câu 15: Bạn mới bắt đầu học HTML và thường xuyên quên cách viết đúng tên của các thẻ đóng, dẫn đến trang web hiển thị bị lỗi. Để khắc phục nhanh chóng tình trạng trên, việc cài đặt phần mềm chuyên nghiệp giúp ích gì?
c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến
Soạn thảo trực tiếp trên trình duyệt web (như w3schools.com, tutorialspoint.com). Màn hình chia làm 2 phần: một bên gõ mã, một bên hiện kết quả ngay lập tức khi bấm nút "Run".
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 16: Bên cạnh việc dùng phần mềm cài đặt trên máy tính, người học còn có thể soạn thảo HTML trực tuyến trên trình duyệt. Tên của hai trang web hỗ trợ soạn thảo HTML trực tuyến phổ biến được giới thiệu là gì?
Câu 17: Các trang web hỗ trợ soạn thảo HTML trực tuyến được thiết kế với giao diện vô cùng tiện lợi cho người học. Màn hình của các trang web này thường được chia làm hai phần riêng biệt với chức năng chính là gì?
Câu 18: Khi sử dụng trang web w3schools.com để thực hành viết một đoạn mã HTML mới, sau khi gõ xong mã ở khung bên trái, bạn cần phải thực hiện thao tác nào để ngay lập tức nhìn thấy trang web hiển thị ở khung bên phải?