CHỦ ĐỀ F. BÀI 1. LÀM QUEN VỚI NGÔN NGỮ SIÊU VĂN BẢN
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 1. LÀM QUEN VỚI NGÔN NGỮ SIÊU VĂN BẢN
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
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.
Khởi động
Khởi động
Khởi động
Theo em, có ngôn ngữ chuyên dụng dùng để tạo trang web không?
Ảnh
1. Ngôn ngữ đánh dấu siêu văn bản
Tìm hiểu
1. Ngôn ngữ đánh dấu siêu văn bản
Ảnh
Thông thường, một website (như minh hoạ ở 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.
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.
Tiếp (Tìm hiểu)
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,... Mỗi phần tử đều được đặt tên, tên thường là các kí tự viết tắt hoặc các từ tiếng Anh cho biết cấu trúc hoặc kiểu nội dung của phần tử. Ví dụ: Phần tử p (viết tắt của paragraph) dùng để tạo đoạn văn bản, phần tử audio dùng để chèn âm thanh vào trang web. Tên của mỗi phần tử được viết trong cặp kí hiệu dấu “<>”, tạo nên các thẻ (tag). Nhờ các thẻ có tác dụng đánh dấu, trình duyệt web hiển thị được cấu trúc và nội dung trang web khi mở văn bản HTML. Thông thường, một phần tử được khai báo bắt đầu bằng thẻ mở (<>), sau đó đến phần nội dung và kết thúc bằng thẻ đóng () (Hình 2). Một số phần tử không sử dụng thẻ đóng để kết thúc khai báo như: , ,
Ảnh
Tiếp (Tìm hiểu)
Để cung cấp thông tin bổ sung, một số phần tử cho phép khai báo thêm một hoặc nhiều thuộc tính. Tuy nhiên, việc khai báo thuộc tính là không bắt buộc. Thuộc tính được viết trong thẻ mở theo cú pháp tên thuộc tính — “giá trị” như minh hoạ ở Hình 3. Kể từ phiên bản đầu tiên được đề xuất bởi Tim Berners-Lee năm 1991, ngôn ngữ HTML đã được cập nhật, hoàn thiện thêm một số phiên bản giúp cho việc tạo trang web trở nên dễ dàng hơn. Trong quyển sách này, phiên bản HTML5 được sử dụng để minh hoạ cho việc tạo trang web.
Ảnh
2. Cấu trúc của một văn bản HTML
Tìm hiểu
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 hoạ ở Hình 4a. Toàn bộ cấu trúc và nội dung trang web được viết trong cặp thẻ mở . Nội dung trang web thường được chia thành hai phần: phần đầu (head) và phần thân (body). 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ở và thẻ đóng , 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ở 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.
Tiếp (Tìm hiểu)
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ở và thẻ đóng sẽ được hiển thị trong màn hình của cửa sổ trình duyệt web như minh hoạ ở Hình 4. 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.
Ảnh
Ảnh
3. Thực hành tạo trang web đơn giản
Tìm hiểu
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
Yêu cầu 1: Cài đặt phần mềm Sublime Text. Hướng dẫn thực hiện: Bước 1. Truy cập trang web https://sublimetext.com, chọn mục Download. Bước 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. Bước 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: Bước 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).
Ảnh
Tiếp (Yêu cầu)
Bước 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.
Ảnh
Tiếp (Yêu cầu)
Bước 3. Chọn File\Save, ghi lưu tệp với tên “trangwebdautien.html”. Bước 4. Mở tệp bằng trình duyệt web, xem kết quả.
Luyện tập
Luyện tập
Luyện tập
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.
Vân dụng
Vận dụng
Vận dụng
Bài tập trắc nghiệm
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?


Câu 2 (Vận dụng)
Bài tập trắc nghiệm
Côu 2. Mỗi phát biểu sau đâu về mục đích sử dụng của cóc phần tử là đúng hay sai?
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.
Phần tử head dùng để khai báo thông tin về cấu trúc của trang web.
Phần tử title dùng để khai báo tiêu đề và thông tin tác giả soạn trang web.
Phần tử html dùng để khai báo cấu trúc và nội dung của trang web.
Câu 3
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.
Ảnh
Câu hỏi tự kiểm tra
Câu hỏi
Câu hỏi tự kiểm tra
Câu 1: Giao tiếp qua không gian mạng mang lại những tiện lợi gì? Câu 2: Giao tiếp qua không gian mạng có nhược điểm gì? Về lâu dài có thể gây ra những vấn đề gì? Câu 3: Tính nhân văn thể hiện ở những điều gì? Câu 4: Nêu ví dụ về ứng xử nhân văn trên không gian mạng.
Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
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ử híml, 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.
Kết thúc bài hoc
Ảnh