Tin học 12 Bài 1F - PDF

## CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH: TẠO TRANG WEB ### BÀI 1: LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN **Học xong bài này, em sẽ:** * Nhận biết được một số khái niệm chính của ngôn ngữ đánh dấu siêu văn bản: phần tử, thẻ mở, thẻ đóng. * Trình bày được cấu trúc của văn bản HTML. * Tạo được một trang web đơn giản bằng ngôn ngữ đánh dấu siêu văn bản. **Theo em, có ngôn ngữ chuyên dụng dùng để tạo trang web không?** ### 1. Ngôn ngữ đánh dấu siêu văn bản Thông thường, một website (như minh họa ở Hình 1) gồm một số trang web tĩnh và một số trang web động. Trang web tĩnh có nội dung không thay đổi mỗi khi người dùng truy cập. Ngược lại, nội dung trang web động có thể thay đổi tuỳ theo yêu cầu của người dùng. Tìm hiểu xong chủ đề này, em sẽ tạo được các trang web tĩnh. **Hình 1. Trang chủ của website https://moet.gov.vn ngày 21/9/2023** * Mô tả hình: Hình ảnh trang chủ website của Bộ Giáo dục và Đào tạo với nhiều mục khác nhau như giới thiệu, tin tức, văn bản, thống kê, bộ GD&ĐT với nhân dân, quản lý điều hành, tin tức - sự kiện, hệ thống nghiệp vụ, CSDL ngành giáo dục, hỗ trợ dạy học trực tuyến, hành chính, đổi mới sáng tạo trong quản lý, giảng dạy và học tập, quyết tâm thực hiện thắng lợi nghị quyết số 29-NQ/TW về đổi mới căn bản toàn diện giáo dục và đào tạo. **Có nhiều cách để tạo trang web. Bên cạnh cách sử dụng phần mềm có sẵn như: Dreamweaver, Mobirise,..., em có thể tạo trang web bằng ngôn ngữ chuyên dụng. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) là ngôn ngữ chuyên dụng dùng để tạo trang web. ** **Em hãy cho biết các thành phần trong trang chủ của website minh họa ở Hình 1.** Thông qua các phần tử của mình, HTML cho phép khai báo các thành phần của trang web như tiêu đề mục, đoạn văn, bảng biểu, hình ảnh, âm thanh và các siêu liên kết,... ### 2. Cấu trúc của một văn bản HTML Cấu trúc của một văn bản viết bằng HTML (văn bản HTML) được minh họa ở Hình 4a. Toàn bộ cấu trúc và nội dung trang web được viết trong cặp thẻ mở `<html>` và thẻ đóng `</html>`. Nội dung trang web thường được chia thành hai phần: phần đầu (head) và phận thân (body). **Hình 4a. Một văn bản HTML** * Mô tả hình: Hình ảnh minh họa cấu trúc cơ bản của một trang web HTML. * Phần đầu `<head>`: `<html>`, `<head>`, `<title>`, `<meta charset="utf-8">`, `</head>`. * Phần thân `<body>`: `<body>`, `Chủ đề F: Tạo trang web`, `</body>`, `</html>`. **Hình 4b. Kết quả khi mở văn bản HTML trong Hình 4a bằng trình duyệt web** * Mô tả hình: Hình ảnh minh họa kết quả khi mở một trang web HTML đơn giản bằng trình duyệt web. **Phần đầu của văn bản được xác định thông qua phần tử head. Nội dung phần tử head được viết trong cặp thẻ mở `<head>` và thẻ đóng `</head>`, dùng để khai báo tiêu đề trang web, các siêu dữ liệu mô tả thông tin về trang web. Siêu dữ liệu có thể gồm bảng mã kí tự, từ khoá tìm kiếm và các liên kết đến tài nguyên khác nhằm chỉ dẫn trình duyệt web trong việc phân tích và hiển thị kết quả. Tiêu đề trang web được viết trong cặp thẻ mở `<title>` và thẻ đóng `</title>` và sẽ được hiển thị trên tiêu đề của cửa sổ trình duyệt web. Các thông tin khác không hiển thị trong màn hình cửa sổ trình duyệt web.** **Phần thân của văn bản được xác định thông qua phần tử body. Nội dung của phần tử body được viết trong cặp thẻ mở `<body>` và thẻ đóng `</body>` sẽ được hiển thị trong màn hình của cửa sổ trình duyệt web như minh họa ở Hình 4b.** **Thông thường, dòng đầu tiên của văn bản HTML là một chỉ dẫn cung cấp thông tin phiên bản HTML được sử dụng.** ### 3. Thực hành tạo trang web đơn giản Sử dụng phần mềm *Sublime Text* soạn văn bản HTML thuận tiện hơn so với việc dùng các phần mềm soạn văn bản được cài sẵn trên máy tính. Phần mềm *Sublime Text* cung cấp một số tính năng như: sử dụng màu sắc để phân biệt các phần tử, tự động điền thẻ đóng cho phần tử được khai báo, đánh số dòng văn bản HTML,... **Yêu cầu 1: Cài đặt phần mềm Sublime Text.** **Hướng dẫn thực hiện:** 1. Truy cập trang web https://sublimetext.com, chọn mục *Download*. 2. Chọn phiên bản phù hợp với hệ điều hành đang sử dụng và tải về máy tính. 3. Nháy đúp chuột vào tên tệp đã được tải về ở Bước 2. Khi trên màn hình xuất hiện cửa sổ với thông báo “Completing the Sublime Text Setup Wizard”, việc cài đặt *Sublime Text* đã kết thúc thành công. **Yêu cầu 2: Sử dụng phần mềm Sublime Text để soạn một văn bản HTML sao cho khi mở văn bản bằng trình duyệt web, trên màn hình hiển thị dòng chữ: “Chủ đề F: Tạo trang web".** **Hướng dẫn thực hiện:** 1. Khởi động *Sublime Text* bằng cách nháy đúp chuột vào biểu tượng phần mềm (Hình 5). 2. Trong màn hình làm việc, soạn thảo nội dung văn bản HTML như ở Hình 6. 3. Chọn *File/Save*, ghi lưu tệp với tên “trangwebdautien.html". 4. Mở tệp bằng trình duyệt web, xem kết quả. **Hình 5. Biểu tượng phần mềm Sublime Text** * Mô tả hình: Hình ảnh biểu tượng của phần mềm Sublime Text **Hình 6. Một màn hình làm việc của Sublime Text** * Mô tả hình: Hình ảnh chụp một màn hình làm việc của *Sublime Text* với một văn bản html đơn giản gồm các thẻ: `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta charset="utf-8">`, `</head>`, `<body>`, `Chủ đề F: Tạo trang web`, `</body>`, `</html>`. **Hãy truy cập website trường em và cho biết cấu trúc văn bản HTML của trang chủ website này.** **Câu 1. Trong các khai báo cấu trúc văn bản HTML sau, khai báo nào đúng cú pháp?** A. <html><head><title></title></head><body></body></html> B. ><head></head><body><title></title></body></html> C. <html><head><title><body></body></title></head></html> D. <html><body><title><head></head></title></body></html> **Câu 2. Mỗi phát biểu sau đây về mục đích sử dụng của các phần tử là đúng hay sai?** a) Phần tử body dùng để khai báo phần nội dung sẽ hiển thị trên màn hình cửa sổ trình duyệt web. b) Phần tử head dùng để khai báo thông tin về cấu trúc của trang web. c) Phần tử title dùng để khai báo tiêu đề và thông tin tác giả soạn trang web. d) Phần tử html để khai báo cấu trúc và nội dung của trang web. **Câu 3. Dưới đây là văn bản HTML do bạn Thiên Phúc soạn để tạo trang web nhưng có một số thẻ bị viết sai cú pháp. Em hãy tìm các lỗi cú pháp giúp Thiên Phúc.** ```html <!DOCTYPE html> <html> <head> <meta charset = "utf-8"></meta> <title> Trang web của Thiên Phúc </head> <body> Thiên Phúc học tạo trang web. <body/> </html> ``` ### Tóm tắt bài học Văn bản HTML định nghĩa các phần tử để xác định nội dung và cấu trúc của trang web. Phần tử thường được khai báo bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng. Các phần tử html, head, body là các thành phần cơ bản của văn bản HTML. Văn bản HTML dễ dàng được tạo bằng các phần mềm hỗ trợ soạn thảo văn bản.

Tin học 12 Bài 1F - PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue