Thầy Cải - Quốc Thái

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 106 sách ict, trang 73 sách cs)

Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng thẻ nào trong số các thẻ sau: <h1>, <h2>, <p>, <hr>?

Gợi ý trả lời

- Dòng tiêu đề lớn: dùng <h1>
- Dòng tiêu đề nhỏ hơn: dùng <h2>
- Dòng văn bản thông thường: dùng <p>
- Dòng kẻ ngang phân cách: dùng <hr>

(trang 108 sách ict, trang 75 sách cs)

1. Theo em, trong HTML có những thẻ nào dùng để định dạng để mục?
2. Cho mã lệnh:

Em hãy cho biết nội dung được kết xuất trên trang web.

Gợi ý trả lời

1. Các thẻ định dạng đề mục từ <h1> đến <h6>: tiêu đề từ lớn đến nhỏ.
2. Nội dung được kết xuất trên trang web là:

X² + Y² = 1

(trang 110 sách ict, trang 77 sách cs)

1. Thẻ <a> có thể tạo được liên kết đến những loại tài nguyên nào?
2. Nếu thẻ <a> không được khai báo thuộc tính href thì người dùng có thể nháy chuột vào nội dung bên trong thẻ <a> này không? Tại sao?

Gợi ý trả lời

1. Thẻ <a> có thể liên kết đến:
- Trang web khác (URL)
- Tệp tin (PDF, hình ảnh...)
- Địa chỉ email (mailto:)
- Vị trí trong cùng trang (liên kết neo)
- Trang khác trong cùng thư mục
2. Người dùng không thể nháy chuột như một liên kết thực sự. Vì khi thiếu href, thẻ <a> không có đích đến, nên không tạo được liên kết chức năng.

(trang 112 sách ict, trang 79 sách cs)

Chọn đáp án đúng cho câu hỏi dưới đây.
Thẻ nào được sử dụng để tạo danh sách có thứ tự?
A<li>. B. <h1>. C. <ol>. D. <p>.

Gợi ý trả lời

Chọn đáp án C. <ol>

(trang 112 sách ict, trang 79 sách cs)

1. Tác dụng của các thẻ <h1>, <h2>,..., <h6> là gì?
2. Em hãy trình bày các bước tạo siêu liên kết chuyển đến trang web trong cửa sổ khác.
3. Trong đoạn mã HTML ở Ví dụ 7, nếu thay cặp thẻ <ul></ul> thành <ol></ol> và hai cặp thẻ <ol></ol> thành <ul></ul> thì trang web hiển thị trong trình duyệt sẽ như thế nào?

Gợi ý trả lời

1. Là các thẻ tiêu đề, dùng để đánh dấu tiêu đề và phân cấp nội dung:
- <h1>: Tiêu đề lớn nhất.
- <h6>: Tiêu đề nhỏ nhất.
⇒ Giúp bố cục trang web rõ ràng và hỗ trợ SEO.
2. Các bước tạo siêu liên kết mở trang trong cửa sổ mới:
Sử dụng thuộc tính target="_blank":
<a href="https://example.com" target="_blank">Truy cập trang</a>
3. Kết quả hiển thị trên trình duyệt sẽ thay đổi như sau:
- Danh sách không thứ tự (<ul>) sẽ trở thành danh sách có thứ tự (<ol>): các dấu chấm đầu dòng sẽ được thay bằng số thứ tự (1., 2., 3.,…).
- Danh sách có thứ tự (<ol>) sẽ trở thành danh sách không thứ tự (<ul>): các số thứ tự sẽ được thay bằng dấu chấm hoặc ký hiệu khác tuỳ theo trình duyệt.

(trang 113 sách ict, trang 80 sách cs)

1. Em hãy bổ sung tên các bạn trong lớp vào ngay sau phần Thành viên lớp của trang web thanhvienlop.html ở THỰC HÀNH. Sau đó, tạo liên kết từ tên của mình trong trang web thanhvienlop.html đến trang web portfolio.html.
2. Em hãy bổ sung Sở thích và Các hoạt động đã tham gia cho trang web portfolio.html, sử dụng các thẻ tạo danh sách và các thẻ định dạng văn bản đơn giản đã học. Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Gợi ý trả lời

1. Bổ sung tên các bạn vào thanhvienlop.html và tạo liên kết đến portfolio.html:
Ví dụ:

2. Bổ sung “Sở thích” và “Các hoạt động” trong portfolio.html:
Ví dụ:

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài F1. HTML và trang web
Bài F2. Tạo và định dạng trang web với các thẻ HTML
Bài F3. Tạo bảng và khung trong trang web với HTML
Bài F4. Thêm dữ liệu đa phương tiện vào trang web
Bài F5. Tạo biểu mẫu trong trang web
Bài F6. Dự án tạo trang web
Bài F7. Giới thiệu CSS
Bài F8. Một số thuộc tính cơ bản của CSS
Bài F9. Một số thuộc tính định kiểu bằng vùng chọn trong CSS
Bài F10. Định kiểu CSS cho siêu liên kết và danh sách
Bài F11. Định kiểu CSS cho bảng và phần tử div
Bài F12. Định kiểu CSS cho biểu mẫu
Bài F13. Dự án tạo trang web (tiếp theo)
Bài F14(cs). Học máy
Bài F15(cs). Khoa học dữ liệu
Bài F16(cs). Máy tính, thuật toán và Khoa học dữ liệu
Bài F17(cs). Hoạt động trải nghiệm về Khoa học dữ liệu
Bài F18(cs). Kĩ thuật mô phỏng
Bài F19(cs). Sử dụng phần mềm mô phỏng

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài G1. Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Bài G2. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài G3. Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Chân trời sáng tạo
☞ Lý thuyết tin học 12 - Chân trời sáng tạo
☞ Thực hành tin học 12 - Chân trời sáng tạo
☞ Gợi ý trả lời tin học 12 - Chân trời sáng tạo
☞ Trắc nghiệm tin học 12 - Chân trời sáng tạo
☞ Bài giảng điện tử tin học 12 - Chân trời sáng tạo

BÀI F1 - HTML VÀ TRANG WEB (CTST - CS & ICT)

(trang 100 sách ict, trang 67 sách cs)

Em hãy chỉ ra những thành phần chính của trang web trong Hình 1.

Gợi ý trả lời

Những thành phần chính của trang web trong Hình 1. gồm:
- Tiêu đề trang (header): Chứa tên trang, menu chính.
- Thanh điều hướng (navigation bar): Liên kết đến các phần/trang khác.
- Nội dung chính (main content): Nơi hiển thị thông tin chính.
- Thanh bên (sidebar): Có thể chứa menu phụ, liên kết, quảng cáo.
- Chân trang (footer): Chứa thông tin bản quyền, liên hệ, liên kết mạng xã hội.

(trang 101 sách ict, trang 68 sách cs)

1. Em hãy kể tên một ngôn ngữ đánh dấu dùng để tạo ra trang web và cho biết phiên bản hiện nay của ngôn ngữ này.
2. Các trình duyệt khác nhau có thể kết xuất một trang web tương tự nhau không?

Gợi ý trả lời

1. Ngôn ngữ đánh dấu và phiên bản hiện nay:
- Ngôn ngữ: HTML (HyperText Markup Language).
- Phiên bản hiện nay: HTML5.
2. Không hoàn toàn giống nhau. Các trình duyệt như Chrome, Firefox, Edge, Safari có thể hiển thị khác nhau đôi chút do cách diễn giải mã HTML và CSS khác nhau. Vì vậy, cần kiểm tra tính tương thích.

(trang 104+105 sách ict, trang 71+72 sách cs)

1. Em hãy truy cập trang web https://chantroisangtao.vn, quan sát và nhận xét về bố cục trình bày của trang web này.
2. Chọn đáp án đúng cho câu hỏi dưới đây.
Phần nội dung hiển thị trên thanh tiêu đề của cửa sổ trình duyệt được đặt trong cặp thẻ HTML nào?
A. <head></head>. B. <html></html>.
C. <title></title>. D. <body></body>.
3. Cách viết thẻ HTML có nhiều thuộc tính sau đây đúng hay sai?
<font face="Arial"; size="10px"; color="green">Xin chào</font>

Gợi ý trả lời

1. Bố cục rõ ràng, có các phần:
- Header với logo và thanh menu.
- Phần nội dung chính chia thành các mục: bài viết, hình ảnh.
- Sidebar (nếu có) với tin nổi bật hoặc liên kết nhanh.
- Footer chứa thông tin liên hệ và bản quyền.
2. Chọn đáp án đúng cho câu hỏi dưới đây.
Phần nội dung hiển thị trên thanh tiêu đề của cửa sổ trình duyệt được đặt trong cặp thẻ HTML nào?
Đáp án đúng: C. <title></title>
3. Sai.
- Dấu chấm phẩy (;) không dùng để phân cách thuộc tính trong HTML.
- Viết đúng phải là:
<font face="Arial" size="10px" color="green">Xin chào</font>

(trang 105 sách ict, trang 72 sách cs)

1. Thảo luận với bạn và trình bày những hiểu biết của em về ngôn ngữ HTML.
2. Em hãy trình bày cấu trúc của một trang web cơ bản bằng cách liệt kê tên và công dụng của các thẻ.
3. Chọn đáp án đúng cho các câu hỏi dưới đây.
a) Phần tử HTML nào sau đây chỉ có thẻ mở?
A. <h1>. B. <p>. C. <hr>. D. <div>.
b) Phần tử HTML nào sau đây có đủ thẻ mở và thẻ đóng?
A. <img>. B. <br>. C. <strong>. D. <input>.

Gợi ý trả lời

1. Hiểu biết của em về ngôn ngữ HTML.
HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo cấu trúc cơ bản cho trang web. Nó gồm các thẻ (tag) để định nghĩa nội dung như tiêu đề, đoạn văn, hình ảnh, liên kết,...
2. Cấu trúc cơ bản của một trang web:
1. <!DOCTYPE html>
Công dụng: Khai báo kiểu tài liệu, cho trình duyệt biết đây là trang web HTML5.
2. <html> – Thẻ khai báo tài liệu HTML
- Công dụng: Bao bọc toàn bộ nội dung của trang web.
- Ghi chú: Đây là thẻ gốc (gốc cây DOM), tất cả các thẻ khác đều nằm bên trong thẻ này.
3. <head> – Phần đầu trang
- Công dụng: Chứa các thông tin "ẩn" như tiêu đề trang, mô tả, liên kết CSS, mã JavaScript, bộ ký tự,...
- Ví dụ các thẻ thường dùng trong <head>:
+ <title>: Tiêu đề của trang hiển thị trên tab trình duyệt.
+ <meta>: Khai báo thông tin bổ sung như charset (bảng mã), mô tả, từ khóa,...
+ <link>: Liên kết đến file CSS hoặc icon trang.
+ <style>: Viết CSS trực tiếp trong HTML.
+ <script>: Nhúng mã JavaScript.
4. <body> – Phần thân trang
- Công dụng: Chứa toàn bộ nội dung hiển thị ra màn hình (văn bản, hình ảnh, video, liên kết, bảng,...)
5. Các thẻ nội dung chính trong <body>:
5.1. <h1> đến <h6> – Tiêu đề (heading)
- Công dụng: Tiêu đề từ lớn đến nhỏ (h1 là lớn nhất).
- Thường dùng để phân chia các phần nội dung.
5.2. <p> – Đoạn văn (paragraph)
- Công dụng: Hiển thị đoạn văn bản.
5.3. <a> – Liên kết (anchor)
- Công dụng: Tạo liên kết đến trang khác hoặc nơi khác trên cùng trang.
- Thuộc tính thường dùng: href="URL".
5.4. <img> – Hình ảnh
- Công dụng: Chèn hình ảnh vào trang.
- Thuộc tính thường dùng: src="đường_dẫn" và alt="mô tả".
5.5. <ul>, <ol>, <li> – Danh sách
- Công dụng:
+ <ul>: Danh sách không thứ tự (dấu chấm).
+ <ol>: Danh sách có thứ tự (số).
+ <li>: Mỗi mục trong danh sách.
5.6. <div> – Khối (division)
- Công dụng: Tạo khối bao quanh nội dung, dùng để nhóm và bố cục trang.
- Thường kết hợp với CSS để định dạng.
5.7. <span> – Gắn thẻ cho nội dung trong dòng
- Công dụng: Nhóm chữ hoặc phần tử trong một dòng để định dạng (giống như <div> nhưng là inline).
6. Các thẻ hỗ trợ khác:
6.1. <br/> – Xuống dòng
- Công dụng: Ngắt dòng trong đoạn văn.
6.2. <hr> – Gạch ngang
- Công dụng: Tạo một đường kẻ ngang chia cách nội dung.
6.3. <table>, <tr>, <td>, <th> – Bảng
- Công dụng:
+ <table>: Tạo bảng.
+ <tr>: Tạo dòng trong bảng.
+ <td>: Tạo ô dữ liệu.
+ <th>: Tạo ô tiêu đề.
3. Chọn đáp án đúng cho các câu hỏi dưới đây.
a) Phần tử HTML nào sau đây chỉ có thẻ mở?
Đáp án đúng: C. <hr>
b) Phần tử HTML nào sau đây có đủ thẻ mở và thẻ đóng?
Đáp án đúng: C. <strong>

(trang 105 sách ict, trang 72 sách cs)

1. Thực hiện hiệu chỉnh trang web portfolio.html trong các ví dụ của bài học để giới thiệu vài thông tin của bản thân. Trong đó, sử dụng các thẻ <h1> và <p>. Hình 8 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

2. Em hãy sử dụng Visual Studio Code để tạo trang web index.html giới thiệu ngắn về lớp em, trong đó sử dụng những thẻ đã học để định dạng cho phần nội dung văn bản.
3. Em hãy tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
4. Ngoài thẻ <meta> và <title>, hãy kể tên vài thẻ khác có thể có trong cặp thẻ <head></head>.

Gợi ý trả lời

1. Hiệu chỉnh trang portfolio.html
- Mở file portfolio.html
- Chèn nội dung như sau:

2. Tạo trang index.html giới thiệu lớp học.
Ví dụ:

3. Tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
1. background-color
- Chức năng: Thay đổi màu nền của phần tử (ví dụ: trang web hoặc khối văn bản).
- Cách dùng với thẻ <body>:
<body style="background-color: lightblue;">
- Giải thích: Toàn bộ trang web sẽ có nền màu xanh nhạt.
2. text-decoration
- Chức năng: Trang trí chữ, thường dùng để gạch chân, gạch ngang, hoặc bỏ gạch chân.
- Giá trị phổ biến:
+ none – không có trang trí
+ underline – gạch chân
+ line-through – gạch ngang chữ
+ overline – gạch trên đầu chữ
- Ví dụ dùng trong phần tử con của <body>:
<p style="text-decoration: underline;">Văn bản được gạch chân</p>
<a href="#" style="text-decoration: none;">Liên kết không gạch chân</a>
Lưu ý: text-decoration thường áp dụng cho các thẻ văn bản như <p>, <a>, không dùng trực tiếp cho <body>.
3. margin-left
- Chức năng: Tạo khoảng cách bên trái giữa phần tử và cạnh trình duyệt hoặc phần tử cha.
- Đơn vị thường dùng: px, em, %, rem
- Ví dụ:
<body style="margin-left: 50px;">
- Giải thích: Toàn bộ nội dung trong trang sẽ lùi vào 50px từ mép trái của trình duyệt.
4. margin-top
- Chức năng: Tạo khoảng cách từ phía trên xuống cho phần tử.
- Ví dụ:
<body style="margin-top: 30px;">
- Giải thích: Nội dung sẽ được đẩy xuống cách mép trên của trình duyệt 30px.
4. Một số thẻ khác có trong <head> ngoài <meta> và <title>:
- <link>: liên kết tới tệp CSS.
- <style>: chèn CSS trực tiếp.
- <script>: nhúng mã JavaScript.
- <base>: xác định URL cơ sở cho các liên kết tương đối.

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI E8 - HOÀN THIỆN VÀ XUẤT BẢN TRANG WEB (CTST - ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này thuộc định hướng: Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 99 sách ict)

1. Có thể chuyển Google Sites về tên miền riêng hay không?
2. Sau khi xuất bản trang web, em có thể thay đổi và hiệu chỉnh lại trang web đó hay không?

Gợi ý trả lời

1. Có thể. Người dùng có thể sử dụng một tên miền riêng (ví dụ: www.tenmiencuatui.com) để thay thế địa chỉ mặc định do Google Sites cung cấp (thường là sites.google.com/view/...). Tuy nhiên, để thực hiện điều này cần:
- Sở hữu một tên miền riêng thông qua các nhà cung cấp tên miền.
- Thực hiện cấu hình liên kết giữa tên miền và trang web trong phần cài đặt của Google Sites.
2. Có thể. Sau khi xuất bản, người dùng vẫn có thể:
- Thay đổi nội dung trang web.
- Sắp xếp lại bố cục, thêm trang mới, chỉnh sửa nội dung văn bản, hình ảnh...
- Những thay đổi này cần được xuất bản lại thì mới hiển thị đến người truy cập.

(trang 99 sách ict)

Sử dụng bài tập VẬN DỤNG từ Bài E1 đến Bài E7 với nội dung du lịch quảng bá danh lam thắng cảnh ở quê hương em. Em hãy thực hiện xuất bản và chia sẻ đường liên kết trang đã xuất bản cho ít nhất 1 bạn trong lớp. Gồm các yêu cầu như sau:
Thiết lập một số tuỳ chỉnh trước khi xuất bản: Hiển thị thông tin lần cập nhật mới nhất của trang, không hiển thị đường liên kết neo và thiết lập hiển thị nội dung “Trang web đang xây dựng” có hiển thị nút chọn và liên kết đến trang chủ.
Thực hiện xuất bản trang: Đặt tên trang tuỳ chọn phù hợp với chủ đề thiết kế và thiết lập mọi người có thể xem trang.
Chia sẻ liên kết: Sao chép liên kết và chia sẻ cho ít nhất 1 bạn trong lớp.
Hiệu chỉnh sau xuất bản:
Tạm dừng hoạt động trang web đã tạo ở trên.
Đổi tên trang web thành “dulich”, thay đổi vị trí hiển thị trang bất kì trong thanh điều hướng và xuất bản lại trang web.

Gợi ý cách thực hiện:

1. Thiết lập một số tuỳ chỉnh trước khi xuất bản:
- Nháy vào Cài đặt → Điều hướng → Ẩn liên kết neo
- Tích chọn: Không hiển thị khi đang xây dựng
2. Thực hiện xuất bản trang:
- Nháy Xuất bản (trên cùng bên phải)
- Đặt tên liên kết: chuathienmu-hue
- Nhấn Xuất bản
3. Chia sẻ liên kết:
- Nháy vào Mũi tên bên cạnh “Xuất bản” → Xem trang đã xuất bản
- Sao chép đường link, gửi cho bạn trong lớp
4. Hiệu chỉnh sau xuất bản:
- Đổi tên trang web thành dulich
- Nháy và kéo các mục trong thanh điều hướng để thay đổi vị trí
- Xuất bản lại

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI E7 - SỬ DỤNG MAP, FORMS VÀ CÁC THIẾT LẬP TRANG WEB
(CTST - ICT)

BÀI E7 - SỬ DỤNG MAP, FORMS VÀ CÁC THIẾT LẬP TRANG WEB (CTST - ICT)

(trang 90 sách ict)

Theo em, công dụng của bản đồ và biểu mẫu trên trang web là gi? Tương tự như cách chèn các công cụ đã học ở bài trước, em hãy nêu cách chèn bản đồ (map) vào trang web.

Gợi ý trả lời

- Công dụng của bản đồ và biểu mẫu trên trang web:
+ Bản đồ (Map): Giúp hiển thị vị trí thực tế, hỗ trợ người xem xác định địa điểm, chỉ đường.
+ Biểu mẫu (Form): Thu thập thông tin từ người truy cập như phản hồi, đăng ký, liên hệ...
- Cách chèn bản đồ vào trang web:
+ Vào Insert → Map trong Google Sites.
+ Nhập địa chỉ vào thanh tìm kiếm.
+ Chọn đúng vị trí → nhấn “Select” để chèn bản đồ vào trang.

(trang 91 sách ict)

Có bao nhiêu tuỳ chọn chèn bản đồ vào trang web? Em hãy kể tên các tuỳ chọn đó.

Gợi ý trả lời

Có 3 tùy chọn hiển thị bản đồ trên trang web:
1. Default (Mặc định)
2. Satellite (Vệ tinh)
3. Terrain (Địa hình)
Người dùng có thể chọn kiểu hiển thị phù hợp với nội dung website.

(trang 92 sách ict)

Để thay đổi một biểu mẫu trên trang web, em thực hiện thế nào?

Gợi ý trả lời

Để thay đổi một biểu mẫu trên trang web, thực hiện theo các bước sau:
- Nháy vào biểu mẫu đã chèn → nháy biểu tượng "Mở trong Google Forms".
- Sau đó thực hiện chỉnh sửa như thêm/xóa câu hỏi, chỉnh lại nội dung.
- Mọi thay đổi sẽ tự động đồng bộ với trang web.

(trang 92 sách ict)

Có bao nhiêu tùy chọn quyền chia sẻ trang web? Em hãy kể tên các tùy chọn đó.

Gợi ý trả lời

Có 2 nhóm quyền chia sẻ chính trong Google Sites:
1. Publish settings (Công khai):
- Chia sẻ trang web với mọi người (ai có link đều xem được).
- Chỉ những người cụ thể xem được.
2. Editor rights (Chỉnh sửa):
- Can edit (Có thể chỉnh sửa).
- Viewer (Chỉ xem).

(trang 93 sách ict)

Khi cấp quyền chỉnh sửa nội dung trang web với nhiều người, em làm cách nào để nhận biết người đã thay đổi nội dung trên trang web?

Gợi ý trả lời

- Vào menu ba chấm (⋮) trên trang → chọn "Version history" (Lịch sử phiên bản).
- Tại đây sẽ hiển thị:
+ Tên người chỉnh sửa.
+ Thời gian chỉnh sửa.
+ Có thể khôi phục lại phiên bản trước nếu cần.

(trang 94 sách ict)

Theo em, tại sao phải tạo bản sao cho trang web?

Gợi ý trả lời

Cần tạo bản sao cho trang web là vì các mục đích sau:
- Lưu trữ dự phòng.
- Chia sẻ một phần nội dung.
- Tạo phiên bản mới từ bản cũ để chỉnh sửa mà không ảnh hưởng bản gốc.
- Thử nghiệm thiết kế mới hoặc khi bị lỗi.

(trang 94 sách ict)

1. Để thay đổi bản đồ đã chèn vào trang web, em thực hiện thế nào?
2. Trong quá trình thiết kế trang web của nhóm gồm 3 – 4 người cùng làm việc thông qua tính năng Share with others của Google Sites phát hiện có một trang thiết kế không đúng với những gì đã thảo luận trong nhóm. Làm thế nào để nhận biết ai là người thiết kế nội dung trang đó?
3. Chọn câu trả lời đúng cho câu hỏi dưới đây.
Để tạo bản sao cho trang web, tuỳ chọn nào sau đây đúng
A. Copy. B. Make a copy. C. Copy site. D. Entire site.

Gợi ý trả lời

1. Để thay đổi bản đồ đã chèn vào trang web, thực hiện như sau:
- Click vào bản đồ đã chèn → chọn “Edit” (Chỉnh sửa).
- Có thể đổi vị trí, thay đổi kiểu hiển thị (map/satellite/terrain).
2. Nhận biết ai là người thiết kế nội dung trang web trong Google Sites:
- Truy cập “Version history” của Google Sites.
- Danh sách thay đổi sẽ hiển thị tên người dùng và thời điểm chỉnh sửa.
3. Chọn câu trả lời đúng cho câu hỏi dưới đây.
Để tạo bản sao cho trang web, tuỳ chọn nào sau đây đúng
Đáp án đúng: B. Make a copy.
Lệnh “Make a copy” được dùng trong Google Sites để tạo bản sao trang web.

(trang 95 sách ict)

1. Thiết kế nội dung trang Liên hệ cho trang web chủ đề danh lam thắng cảnh ở quê hương em, thông tin trang chứa bản đồ và biểu mẫu. Trang thiết kế gồm các yêu cầu như sau: Tạo tiêu đề văn bản “Liên hệ với chúng tôi”.
Nội dung thứ nhất hiển thị bản đồ địa điểm du lịch mà em chọn.
Nội dung thứ hai chèn biểu mẫu chứa các thông tin: họ tên, số điện thoại, địa chỉ email, nội dung liên hệ.
2. Em hãy thực hiện chia sẻ quyền chỉnh sửa trang web cho 1 – 2 bạn trong lớp.
Sau đó kiểm tra lịch sử xem ai đã thay đổi hay hiệu chỉnh nội dung trang.
3. Em hãy tạo bản sao cho trang web, bản sao này chỉ chứa trang Liên hệ vừa thực hành ở trên.

Gợi ý cách thực hiện:

1. Nháy vào “Liên hệ”
2. Tiêu đề: “Liên hệ với chúng tôi”
3. Phần 1:
- Nháy “+” → Bản đồ → Gõ “Chùa Thiên Mụ – Huế” → Chèn bản đồ
4. Phần 2:
- Nháy “+” → Biểu mẫu → Chèn form Google Forms gồm:
+ Họ tên
+ Số điện thoại
+ Email
+ Nội dung cần liên hệ
5. Thêm thành viên chỉnh sửa:
- Nháy Chia sẻ (trên cùng) → Mời 1–2 bạn trong lớp với quyền “Biên tập viên”
6. Kiểm tra: Nháy vào biểu tượng đồng hồ “Lịch sử phiên bản” để xem các lần chỉnh sửa.
7. Tạo bản sao trang:
- Nháy vào Tệp → Tạo bản sao → Đặt tên khác (ví dụ: ban-sao-khong-lien-he)

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI E6 - CHÈN YOUTUBE, CALENDAR, DRIVE VÀ COLLAPSIBLE GROUP (CTST - ICT)

(trang 89 sách ict)

1. Em hãy kể tên công cụ dùng để tạo nội dung có thể thu gọn được.
2. Khi chèn các tệp từ Google Drive vào trang web, em cần lưu ý điều gì?

Gợi ý trả lời

1. Công cụ dùng để tạo nội dung có thể thu gọn được là Collapsible Group. Cho phép tạo khối nội dung có thể mở/thu gọn, thường dùng cho phần hỏi đáp, danh sách thông tin cần che bớt để giao diện gọn gàng.
2. Khi chèn các tệp từ Google Drive vào trang web, cần lưu ý các điều sau:
- Cần thiết lập quyền truy cập (chế độ chia sẻ) phù hợp, như:
+ Cho phép mọi người có liên kết được xem hoặc tải.
+ Tránh để chế độ “Chỉ mình tôi” nếu muốn hiển thị công khai.
- Nên sắp xếp file theo thư mục trong Drive để dễ quản lý.
- Chọn đúng loại nội dung (tài liệu, trang tính, video, PDF...) khi chèn vào Google Sites.

(trang 89 sách ict)

1. Thiết kế nội dung trang Hoạt động cho chủ đề danh lam thắng cảnh ở quê hương em, thông tin gồm lịch biểu các hoạt động sắp diễn ra, video giới thiệu các địa điểm tham quan, món ăn đặc sản. Trang thiết kế gồm các yêu cầu như sau:
Phần nội dung thứ nhất hiển thị lịch biểu các hoạt động sắp diễn ra, lịch biểu này được lấy trực tiếp từ Google Calendar, phía trên có tiêu đề văn bản “Timeline các hoạt động”. Phần nội dung thứ hai hiển thị ít nhất 2 video giới thiệu về địa điểm tham quan hoặc món ăn đặc sản tại địa điểm tham quan đó, phía trên có tiêu đề văn bản “Video trải nghiệm”. Phần nội dung thứ ba hiển thị từ 4 – 6 câu hỏi và trả lời liên quan đến du lịch, phía trên có tiêu đề văn bản “Hỏi đáp”.
2. Thiết kế nội dung trang Khám phá cho danh lam thắng cảnh ở quê hương em, thông tin hiển thị gồm các cẩm nang du lịch an toàn, danh sách địa điểm ẩm thực. Trang thiết kế gồm các yêu cầu như sau:
Phần nội dung thứ nhất hiển thị cẩm nang du lịch an toàn, nội dung này hiển thị dạng tệp chèn từ Google Drive, phía trên có tiêu đề văn bản “Cẩm nang du lịch an toàn”.
Phần nội dung thứ hai hiển thị danh sách địa điểm ẩm thực, nội dung này hiển thị dạng tệp trang tính chứa nội dung các địa điểm ăn uống uy tín kèm món ăn và giá cả, phía trên có tiêu đề văn bản “Danh sách địa điểm ẩm thực”.

Gợi ý cách thực hiện:

1. Trang “Hoạt động”:
- Phần 1:
+ Nháy “+” → Lịch → Chọn lịch “Chùa Thiên Mụ” từ Google Calendar
+ Thêm tiêu đề “Timeline các hoạt động”
- Phần 2:
+ Nháy “+” → Video YouTube → Dán link video về chùa hoặc ẩm thực Huế
+ Thêm tiêu đề “Video trải nghiệm”
- Phần 3:
+ Nháy “+” → Văn bản → Gõ danh sách 5–6 câu hỏi và câu trả lời
+ Tiêu đề: “Hỏi đáp”
2. Trang “Khám phá”:
- Phần 1:
+ Nháy “+” → Drive → Chèn file PDF cẩm nang du lịch an toàn
+ Thêm tiêu đề “Cẩm nang du lịch an toàn”
- Phần 2:
+ Nhập danh sách quán chay + giá, địa chỉ
+ Tiêu đề “Danh sách địa điểm ẩm thực”

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI E5 - NHÚNG MÃ VÀ TẠO BĂNG CHUYỀN HÌNH ẢNH (CTST - ICT)

(trang 78 sách ict)

Theo em, mục đích của việc tạo các hình ảnh chuyển động trong trang web để làm gi? Trong Google Sites có công cụ nào thực hiện được việc này không?

Gợi ý trả lời

- Mục đích của việc tạo hình ảnh chuyển động (băng chuyền) giúp:
+ Làm trang web trực quan, sinh động hơn.
+ Thu hút sự chú ý của người truy cập.
+ Giới thiệu nhiều nội dung trong cùng một không gian hiển thị.
- Google Sites sử dụng công cụ Image Carousel để tạo băng chuyền.

(trang 79 sách ict)

Để tạo chuyển động băng chuyển hình ảnh, em cần sử dụng ít nhất bao nhiêu hình ảnh?

Gợi ý trả lời

- Ít nhất 2 hình ảnh để kích hoạt chế độ chuyển động.
- Với 1 ảnh, carousel vẫn hiển thị nhưng không có chuyển động.

(trang 81 sách ict)

Em hãy kể tên những thay đổi tuỳ chọn hiển thị khi nhúng một liên kết trang web hoặc nhúng mã web vào trang web.

Gợi ý trả lời

Khi nhúng liên kết hoặc mã, người dùng có thể điều chỉnh:
- Hiển thị hình ảnh đại diện của liên kết.
- Hiển thị tiêu đề (Show title).
- Hiển thị mô tả ngắn (Show description).
- Thay đổi kích thước khung nhúng.
- Xem trước liên kết đã nhúng.

(trang 81 sách ict)

Chọn câu trả lời đúng cho các câu hỏi dưới đây.
1. Để hiển thị phần chú thích cho ảnh (tên ảnh) của băng chuyền hình ảnh, lựa chọn nào sau đây được chọn?
A. Show dots. B. Show captions.
C. Auto start. D. Transition speed.
2. Sau khi nhúng một trang web, để hiển thị mô tả của trang web được nhúng, lựa chọn nào sau đây được chọn?
A. Show image. B. Show captions.
C. Show title. D. Show description.

Gợi ý trả lời

1. Để hiển thị phần chú thích cho ảnh (tên ảnh) của băng chuyền hình ảnh, lựa chọn nào sau đây được chọn?
Đáp án đúng: B. Show captions.
“Captions” nghĩa là chú thích ảnh, giúp người dùng hiểu rõ hình ảnh đang xem.
2. Sau khi nhúng một trang web, để hiển thị mô tả của trang web được nhúng, lựa chọn nào sau đây được chọn?
Đáp án đúng: D. Show description.
“Description” là phần mô tả ngắn hiển thị dưới tiêu đề bài viết hoặc liên kết đã nhúng.

(trang 83 sách ict)

1. Thiết kế nội dung trang Điểm đến cho trang web chủ đề danh lam thắng cảnh ở quê hương em, thông tin là các điểm danh lam thắng cảnh đó. Trang thiết kế có thể bố trí thành 2 phần gồm các yêu cầu sau:
Phần thứ nhất hiển thị từ 3 – 5 hình ảnh các điểm danh lam thắng cảnh, các hình ảnh hiển thị dạng băng chuyển, phía trên có tiêu đề văn bản “Các điểm danh lam thắng cảnh”.
Phần thứ hai hiển thị từ 2 – 4 hình ảnh danh lam thắng cảnh, 2 hình ảnh hiển thị trên 1 dòng 2 cột, bên dưới mỗi địa điểm hiển thị tên địa điểm và nút xem thêm. Phía trên phần thiết kế thứ hai có tiêu đề văn bản “Các địa điểm tham quan.
Tải hình ảnh liên quan đến chủ đề từ các trang chia sẻ hình ảnh miễn phí trên Internet.
2. Thiết kế nội dung trang Tin tức cho trang web chủ đề danh lam thắng cảnh, thông tin là trang tin tức thực hiện nhúng bài viết của các trang tin tức danh lam thắng cảnh. Trang thiết kế có thể bố trí thành 2 phần gồm các yêu cầu sau: nhúng 2 trang web liên quan đến chủ đề, hiển thị các thông tin hình ảnh, tiêu đề bài viết và mô tả ngắn của bài viết đó.

Gợi ý cách thực hiện:

1. Trang “Điểm đến”:
- Nháy vào “Điểm đến”
- Phần 1: Thêm trình chiếu hình ảnh:
+ Nháy “+” → Chèn Google Ảnh hoặc Tải lên nhiều hình ảnh → Tự động tạo trình chiếu
+ Thêm tiêu đề: “Các điểm danh lam thắng cảnh”
- Phần 2:
+ Dùng bố cục 2 cột → Chèn 2–4 hình ảnh có nút “Xem thêm”
+ Nháy “+” → Nút → Gõ tên nút: “Xem thêm” → Dẫn link đến bài mô tả hoặc trang con
2. Trang “Tin tức”:
- Nháy vào “Tin tức”
- Dùng bố cục có hình ảnh và văn bản
- Bài viết 1: “Lễ Vu Lan tại chùa Thiên Mụ”
- Bài viết 2: “Bảo tồn di tích chùa cổ Huế”
- Thêm ảnh, tiêu đề, đoạn mô tả

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)

BÀI F1 - HTML VÀ TRANG WEB (CTST - CS & ICT)

BÀI E8 - HOÀN THIỆN VÀ XUẤT BẢN TRANG WEB (CTST - ICT)

BÀI E7 - SỬ DỤNG MAP, FORMS VÀ CÁC THIẾT LẬP TRANG WEB
(CTST - ICT)

BÀI E6 - CHÈN YOUTUBE, CALENDAR, DRIVE VÀ COLLAPSIBLE GROUP (CTST - ICT)

BÀI E5 - NHÚNG MÃ VÀ TẠO BĂNG CHUYỀN HÌNH ẢNH (CTST - ICT)

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML(CTST - CS & ICT)

BÀI F1 - HTML VÀ TRANG WEB (CTST - CS & ICT)

BÀI E8 - HOÀN THIỆN VÀ XUẤT BẢN TRANG WEB (CTST - ICT)

BÀI E7 - SỬ DỤNG MAP, FORMS VÀ CÁC THIẾT LẬP TRANG WEB(CTST - ICT)

BÀI E6 - CHÈN YOUTUBE, CALENDAR, DRIVE VÀ COLLAPSIBLE GROUP (CTST - ICT)

BÀI E5 - NHÚNG MÃ VÀ TẠO BĂNG CHUYỀN HÌNH ẢNH (CTST - ICT)

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)

BÀI E7 - SỬ DỤNG MAP, FORMS VÀ CÁC THIẾT LẬP TRANG WEB
(CTST - ICT)