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

BÀI 4. TẠO NỘI DUNG VĂN BẢN CHO TRANG WEB (CÁNH DIỀU - ICT)

Bài 4 - Tạo nội dung văn bản cho trang web (Cánh diều - ict)

Đây là bài soạn lý thuyết tin học 12 - sách Cánh diều. Bài học này thuộc định hướng Tin học ứng dụng (ICT). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

1. Giới thiệu bài viết trên trang web

- Bài viết là nội dung chính của trang web, có thể chứa văn bản, hình ảnh, video minh họa.
- Người dùng có thể nhập nội dung trực tiếp hoặc sử dụng các khối mẫu để trình bày bài viết.
- Việc sắp xếp và trình bày nội dung ảnh hưởng đến chất lượng của trang web.

2. Giới thiệu chân trang (Footer)

- Chân trang là phần nằm ở cuối trang web, thường chứa thông tin liên hệ, bản quyền, liên kết mạng xã hội,…
- Chỉ có một chân trang duy nhất cho toàn bộ website.
- Có thể sử dụng các khối mẫu để thiết kế và tùy chỉnh chân trang theo nhu cầu.

3. Thực hành

Nhiệm vụ 1: Thêm bài viết vào trang web

Yêu cầu:
Trong website “Giới thiệu trường em”, hãy tạo bài viết giới thiệu một số thông tin chi tiết về trường em như: địa chỉ, lịch sử thành lập và các thành tích nổi bật của nhà trường.
Các bước thực hiện:
- Thêm khối bài viết bằng cách chọn Add Block to Page và chọn mẫu phù hợp.
- Điều chỉnh thông số định dạng (độ rộng, tiêu đề, màu nền,…).
- Chỉnh sửa nội dung văn bản và hình ảnh theo yêu cầu.

Nhiệm vụ 2: Thêm phần chân trang cho trang web

Yêu cầu:
Trong website “Giới thiệu trường em”, hãy tạo phần chân trang chứa các thông tin ngắn gọn về địa chỉ và thông tin liên lạc của nhà trường.
Các bước thực hiện:
- Thêm khối chân trang bằng Add Block to Page và chọn mẫu phù hợp.
- Có thể áp dụng chân trang cho toàn bộ website.
- Chỉnh sửa nội dung, liên kết và thông tin trong chân trang.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và tạo siêu liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường

Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)

Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết bị mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)

Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

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

BÀI 3. TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB (CÁNH DIỀU - ICT)

Bài 3 - Tạo thanh điều hướng cho trang web (Cánh diều - ict)

1. Giới thiệu thanh điều hướng

- Thanh điều hướng (Navigation Bar) giúp người dùng di chuyển giữa các trang web dễ dàng.
- Thường được đặt ngay dưới phần đầu trang web hoặc gộp chung với tiêu đề website.

- Các đặc điểm quan trọng của thanh điều hướng:
+ Màu sắc & thiết kế đồng bộ với giao diện website.

+ Hiển thị dạng một dòng, nếu quá nhiều mục thì dùng menu thả xuống (dropdown menu).

+ Chứa liên kết đến các trang web khác hoặc các phần trong trang web hiện tại.
+ Tích hợp biểu tượng (icon), nút tìm kiếm, đăng nhập,…

2. Thực hành

Yêu cầu:
Em hãy tạo một thanh điều hướng chứa các đường liên kết tới tất cả các trang web trong website “Giới thiệu trường em” mà em đã thực hiện ở Bài 2.
Các bước thực hiện:
Bước 1: Thêm thanh điều hướng vào trang web
+ Chọn "Add Block to Page" → Chọn Menu.
+ Chọn mẫu thanh điều hướng rồi kéo thả vào vị trí phù hợp trên trang web.
+ Khi có thông báo “Thêm thanh điều hướng vào tất cả các trang?”, chọn OK.
Lưu ý: Thanh điều hướng sẽ hiển thị trên tất cả các trang web trong website.
Bước 2: Điều chỉnh thanh điều hướng
- Mở bảng thiết lập: Di chuột lên thanh điều hướng → Chọn Block Parameters.
- Các tùy chỉnh chính:
+ Full Width → Hiển thị thanh điều hướng toàn màn hình.
+ Logo → Hiển thị logo website.
+ Brand Name → Hiển thị tên website.
+ Sticky → Cố định menu khi cuộn trang.
+ Collapsed → Thu gọn menu khi hiển thị trên điện thoại/màn hình nhỏ.
+ Color → Chỉnh màu nền của thanh điều hướng.
Bước 3: Chỉnh sửa & tạo liên kết
- Đổi tên mục nội dung: Nhấp vào từng mục trên menu → Nhập nội dung mới.
- Thêm liên kết
+ Nhấp vào mục nội dung cần liên kết → Chọn Link.
+ Liên kết đến một trang web khác → Nhập URL vào Web Address.
+ Liên kết đến trang trong website → Chọn Site Pages → Chọn trang cần liên kết.
- Thêm biểu tượng (icon)
+ Chọn Insert Icon → Chọn biểu tượng từ danh sách có sẵn.
+ Tùy chỉnh màu sắc, kích thước icon theo ý muốn.
- Tạo menu thả xuống (submenu)
+ Chọn Add Submenu → Nhập nội dung danh mục con.
+ Tạo liên kết, chỉnh màu sắc, chèn biểu tượng như menu chính.
- Xóa thanh điều hướng: Chọn Remove Block → Xác nhận OK để xóa.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

BÀI 2. TẠO WEBSITE BẰNG PHẦN MỀM (CÁNH DIỀU - ICT)

Bài 2 - Tạo website bằng phần mềm (Cánh diều - ict)

1. Cấu trúc cơ bản của một website

- Website gồm nhiều trang web (.html) liên kết với nhau.
- Ba loại trang web chính:
+ Trang chủ: Trang đầu tiên, hiển thị nội dung quan trọng.
+ Trang chuyên mục: Nhóm các nội dung cùng chủ đề.
+ Trang chi tiết: Hiển thị nội dung cụ thể.
- Các Thành phần chính của một trang web:
➀ Phần đầu trang (Header): Logo, thanh tìm kiếm, ngôn ngữ, hotline.
➁ Thanh điều hướng (Navigation): Liên kết giữa các trang trong website.
➂ Phần nội dung (Content): Văn bản, hình ảnh, video, liên kết, biểu mẫu.
➃ Phần chân trang (Footer): Bản quyền, liên kết mạng xã hội, danh mục.

2. Các bước tạo website bằng phần mềm

Thay vì lập trình, có thể sử dụng phần mềm thiết kế website theo 5 bước:
Bước 1: Phác thảo cấu trúc website
- Xác định số lượng trang, nội dung từng trang.
Bước 2: Chuẩn bị nội dung
- Hình ảnh, văn bản, video cần đưa vào website.
Bước 3: Tạo website trong phần mềm
- Tạo trang chủ và các trang web theo chủ đề có sẵn hoặc trang trắng.
Bước 4: Chỉnh sửa & thiết kế website
- Thêm nội dung, hình ảnh, video, biểu mẫu, menu điều hướng.
Bước 5: Xem trước & xuất bản website
- Kiểm tra hiển thị trên trình duyệt, chỉnh sửa nếu cần trước khi công bố.
Lưu ý: Cần phác thảo cấu trúc website trước khi sử dụng phần mềm.

3. Thực hành

Yêu cầu:
Em hãy tạo một dự án website “Giới thiệu trường em” gồm những trang web mà em đã phác thảo ở hoạt động trên.
Các bước thực hiện:
- Bước 1: Tạo dự án website
+ Vào Sites → Create New Site
+ Đặt tên dự án, chọn Blank Page hoặc chủ đề có sẵn (Company, Portfolio,…).
- Bước 2: Tạo trang web trong website
+ Vào Pages → Create New Page
+ Chọn Blank Page hoặc mẫu trang web có sẵn.
+ Đặt tên trang (Trang chủ, Giới thiệu, Hoạt động,…).

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

BÀI 1. GIỚI THIỆU PHẦN MỀM TẠO WEBSITE (CÁNH DIỀU - ICT)

Bài 1 - Giới thiệu phần mềm tạo website (Cánh diều - ict)

1. Phần mềm tạo website

- Trước đây, website cần lập trình viên để tạo lập.
- Hiện nay, có nhiều phần mềm kéo-thả giúp tạo website đơn giản.
* Phân loại phần mềm tạo website:
- Phần mềm trực tuyến (không cần cài đặt, dùng qua Internet): Ví dụ: Google Sites, Wix, Weebly.
- Phần mềm ngoại tuyến (cần cài đặt, không cần mạng): Ví dụ: Mobirise, Adobe Dreamweaver, Nicepage.
* Các chức năng chính của phần mềm tạo website:
- Tạo trang web (web page).
- Cung cấp các mẫu trang web (templates và thêm)
- Chèn nội dung văn bản (article, textblock)
- Chèn hình ảnh, video.
- Chèn liên kết (hyperlink).
- Chèn các biểu mẫu (form).
- Tùy chỉnh giao diện (responsive).
- Xuất bản website (publish)

2. Giới thiệu phần mềm Mobirise

- Mobirise là phần mềm ngoại tuyến miễn phí trên Windows, MacOS, Linux.
- Cung cấp nhiều mẫu website đẹp theo từng chủ đề.

- Sử dụng dễ dàng với thao tác kéo thả khối nội dung.
* Giao diện Mobirise gồm:
➀ Thanh công cụ: Chứa các tùy chọn lưu, xuất bản, xem trước website.
➁ Vùng làm việc chính: Hiển thị nội dung trang web.
➂ Nút "Add Block to Page": Thêm các khối nội dung (text, ảnh, video, menu).

- Ví dụ: Chỉ cần kéo-thả khối "Features" để thêm nội dung vào trang web.

3. Thực hành

Yêu cầu:
Em hãy mở một mẫu trang web trên phần mềm Mobirise và sửa nội dung văn bản, hình ảnh trên trang web đó.
Các bước thực hiện:
- Bước 1: Mở Mobirise, giao diện sẽ tạo ra một mẫu trang web.
- Bước 2: Chỉnh sửa nội dung văn bản bằng cách chọn và nhập nội dung mới.
- Bước 3: Thay đổi hình ảnh bằng cách chọn Media Image → Browse Computer → Chọn ảnh.
- Bước 4: Xem trước website bằng cách chọn Preview in Browser.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo