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

BÀI 6. TẠO BIỂU MẪU CHO TRANG WEB VÀ XUẤT BẢN WEBSITE
(CÁNH DIỀU - ICT)

Bài 6 - Tạo biểu mẫu cho trang web và xuất bản website (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. Biểu mẫu trên trang web

- Biểu mẫu (form) giúp thu thập thông tin từ người dùng (họ tên, email, số điện thoại,…).
- Gồm các trường nhập văn bản, vùng nhập nội dung, nút lệnh (Gửi đi, Nhập lại).
- Dữ liệu nhập có thể được gửi đến email hoặc lưu vào cơ sở dữ liệu.

2. Chế độ xem trước

- Chế độ Mobile: Xem trước trang web trên điện thoại.

- Chế độ Desktop: Xem trước trang web trên máy tính.

- Chế độ trình duyệt: Xem trực tiếp trên trình duyệt bằng Preview in Browser.

3. Xuất bản website

- Xuất bản trên mobirisesite.com: Tạo trang web với tên miền con của mobirisesite.com.
- Xuất bản dưới dạng file HTML: Lưu trang web vào máy tính dưới dạng các file .html.
- Xuất bản qua FTP: Tải trang web lên máy chủ web để truy cập trực tuyến.

- Nháy chuột vào nút PUBLISH để xuất bản website.

4. Thực hành

Nhiệm vụ 1: Thêm biểu mẫu trên trang web

Yêu cầu:
Em hãy thêm một biểu mẫu vào phía cuối một trang web trong website “Giới thiệu trường em” (đã được tạo ở Bài 4) để người dùng ghi thêm tên và lời nhắn.
Các bước thực hiện:
- Chọn Add Block to Page, chọn Form và thêm vào vị trí mong muốn.
- Điều chỉnh thông số (bố cục, trường nhập, nội dung gợi ý,…).
- Nhập email để nhận dữ liệu khi người dùng gửi biểu mẫu.

Nhiệm vụ 2: Xuất bản website

Yêu cầu:
Em hãy chọn hai trong ba cách xuất bản website mà phần mềm Mobirise cung cấp để thực hiện xuất bản website “Phần mềm học tập”.
Các bước thực hiện:
- Chọn phương thức xuất bản (tên miền con, file HTML hoặc FTP).
- Thực hiện các bước theo hướng dẫn để xuất bản website thành cô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. 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 5. TẠO NỘI DUNG HÌNH ẢNH CHO TRANG WEB (CÁNH DIỀU - ICT)

Bài 5 - Tạo nội dung hình ảnh cho trang web (Cánh diều - ict)

1. Hình ảnh, video trên trang web

- Hình ảnh và video giúp trang web hấp dẫn hơn, ngoài nội dung văn bản.
- Các loại hình ảnh phổ biến: ảnh đại diện, ảnh minh họa bài viết, ảnh/video nổi bật.
- Hình ảnh/video nổi bật thường đặt ở đầu trang, có nền đồng nhất và có thể kèm tiêu đề ngắn.

2. Bộ sưu tập và thanh trượt

- Bộ sưu tập (Gallery): Hiển thị nhiều ảnh/video cùng lúc theo dạng lưới hoặc danh sách.
- Thanh trượt (Slider): Hiển thị lần lượt từng ảnh/video, tự động trượt hoặc do người dùng điều khiển. Thanh trượt thường dùng cho quảng cáo, chương trình ưu đãi, giới thiệu sản phẩm.

3. Thực hành

Nhiệm vụ 1: Thêm hình ảnh, video vào trang web

Yêu cầu:
Em hãy thêm một hình ảnh về cảnh quan trường em vào phía dưới bài viết giới thiệu về trường mà em đã thực hiện ở Bài 4.
Các bước thực hiện:
- Chọn Add Block to Page, chọn Image & Video, kéo thả vào vị trí phù hợp.
- Điều chỉnh thông số bố cục (kích thước, khoảng cách, tiêu đề, nền,…).
- Thay đổi hình ảnh bằng cách chọn từ máy tính, thư viện có sẵn hoặc thêm liên kết.
- Thay đổi video bằng cách nhập URL, điều chỉnh tỉ lệ, chế độ tự động phát.

Nhiệm vụ 2: Thêm bộ sưu tập và thanh trượt vào trang web

Yêu cầu:
Hãy thêm một số hình ảnh hoạt động của học sinh dưới dạng thanh trượt vào phía trên bài viết giới thiệu về trường mà em đã thực hiện ở Bài 4.
Các bước thực hiện:
- Chọn Add Block to Page, vào mục Gallery & Slider để thêm bộ sưu tập hoặc thanh trượt.
- Điều chỉnh thông số bố cục và nội dung hình ảnh/video.
Lưu ý: Thanh trượt có thể làm chậm tốc độ tải trang, cần cân nhắc khi sử dụ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 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)

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. 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 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