Lý thuyết Tin học 12 Bài 6 (Cánh diều): Tạo biểu mẫu cho trang web và xuất bản website

Lý thuyết Tin học 12 Bài 6: Tạo biểu mẫu cho trang web và xuất bản website

1. Biểu mẫu trên trang web

Ngoài nhiệm vụ cung cấp nội dung, các trang web còn xử lý yêu cầu của người dùng thông qua biểu mẫu (form). Biểu mẫu thu nhận thông tin từ người dùng, bao gồm các ô nhập văn bản (như tên, địa chỉ email, số điện thoại) và các nút lệnh, vùng nhập văn bản, ô lựa chọn (như giới tính, quê quán).

2. Chế độ xem trước

Các phần mềm tạo website, bao gồm Mobirise, cung cấp chức năng xem trước trang web với nhiều chế độ khác nhau. Mobirise có chế độ xem trước trên điện thoại (Mobile View) để giả lập kết quả hiển thị trên thiết bị di động. Để chuyển từ chế độ xem desktop sang mobile, chọn Mobile View trên thanh công cụ khi trang web đang được chỉnh sửa.( hình 2)

Chế độ desktop trong phần mềm tạo website là chế độ xem giả lập trên máy tính, cho phép xem trước cách hiển thị trang web trên thiết bị máy tính. Để chuyển từ chế độ xem mobile sang desktop, chọn Desktop View trên thanh công cụ khi trang web đang được chỉnh sửa.(Hình 3)

Chế độ xem trực tiếp trên trình duyệt là chế độ cho phép xem trước trang web trên

trình duyệt bằng cách chọn Preview in Browser ® (Hình 2).

3. Xuất bản website

Phần mềm Mobirise cung cấp các tuỳ chọn xuất bản website qua các chế độ sau:

- mobirisesite.com: Xuất bản trang web trên mạng Internet với tên miền con của mobirisesite.com.

- Local drive folder: Xuất bản dưới dạng các tệp tin HTML và lưu trữ trên máy tính.

- FTP: Xuất bản và tải lên một máy chủ web có sẵn trên Internet.( Hình 4)

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.

Hướng dẫn thực hiện:

Bước 1. Thêm khối biểu mẫu trên trang web

Chọn Add Block to Page – phía góc phải dưới màn hình.

Chọn Form (Hình 5), chọn một khối biểu mẫu có sẵn để thêm vào phía dưới cùng của trang web hoặc nhấn giữ chuột và kéo thả vào vị trí thích hợp trên trang web.

Bước 2. Điều chỉnh thông số bố cục và định dạng:

- Mở bảng thông số bằng cách di chuột lên trên biểu mẫu và chọn Block Parameters để tuỳ chỉnh các thông số tương tự như khối bài viết.( Hình 6)

Bước 3. Chỉnh sửa các đối tượng thu nhận dữ liệu trong biểu mẫu:

- Ẩn hoặc hiển thị các ô nhập văn bản bằng cách tắt/bật các nút chức năng.

- Thay đổi nội dung gợi ý trong ô nhập văn bản và thông báo gửi biểu mẫu thành công.

- Nhập địa chỉ email nhận dữ liệu vào ô Notification Email or Action URL, xác nhận qua email nhận được để kích hoạt chức năng nhận dữ liệu.

- Chọn Save để hoàn tất thiết lập biểu mẫu.

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

Yêu cầu: Chọn hai trong ba cách xuất bản website mà Mobirise cung cấp để xuất bản website Phần mềm học tập.

Hướng dẫn thực hiện:

1. Xuất bản với tên miền con của mobirisesite.com:

Bước 1: Chọn mobirisesite.com.

Bước 2: Nhập tên miền con phù hợp, ví dụ: tinhoc12.

Bước 3: Chọn PUBLISH để xuất bản.

Bước 4: Chọn OK để hoàn tất hoặc VIEW SITE để xem trang web trên Internet với tên miền con đã nhập, ví dụ: tinhoc12.mobirisesite.com.( Hình 7)

2. Xuất bản dưới dạng các tệp tin.html:

Bước 1: Chọn Local drive folder trong giao diện lựa chọn chế độ xuất bản.( Hình 8)

Bước 2 - Chọn BROWSE để truy cập đến thư mục mong muốn.- Chọn Select Folder.

Bước 3: - Chọn PUBLISH.

Kết quả xuất tệp tin gồm:

- Một tệp dự án project.mobirise để lưu trữ và tiếp tục chỉnh sửa.

- Một thư mục assets chứa các tài nguyên định dạng trang web.

- Các tệp tin .html tương ứng với các trang web trong dự án, ví dụ: phanmemdohoa.html, ngonngulaptrinh.html.

3. Xuất bản website và tải lên máy chủ web có sẵn trên internet :

Bước 1: Chọn FTP trong giao diện lựa chọn chế độ xuất bản ( Hình 9)

Bước 2: Chọn EDIT và chỉnh sửa ( Hình 10

Bước 3: Chọn SAVE để lưu thông tin máy chủ., Nhập thư mục gốc của máy chủ web vào ô root folder, ví dụ: /htdocs/ hoặc /public_html/.

Bước 4: Chọn PUBLISH để xuất bản website và tải lên máy chủ web.

Trắc nghiệm: Tạo biểu mẫu cho trang web và xuất bản website

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Biểu mẫu trên trang web chủ yếu được sử dụng để:

A. Cung cấp nội dung văn bản cho người dùng.

B. Thu thập thông tin từ người dùng như tên và địa chỉ email.

C. Thiết lập màu nền của trang web.

D. Thay đổi kích thước của các hình ảnh.

Câu 2: Để xem trước trang web trên thiết bị di động trong Mobirise, bạn cần:

A. Chọn chế độ Mobile View trên thanh công cụ.

B. Chọn chế độ Desktop View trên thanh công cụ.

C. Sử dụng tính năng Preview in Browser.

D. Chọn chế độ Full Screen.

Câu 3: Để xuất bản website dưới dạng các tệp tin HTML trên máy tính, bạn nên:

A. Chọn Local drive folder và chọn BROWSE để truy cập đến thư mục mong muốn.

B. Nhập tên miền con vào ô Notification Email.

C. Chọn mobirisesite.com để xuất bản trang web.

D. Sử dụng chế độ xem trực tiếp trên trình duyệt.

Câu 4: Để xem trước trang web trên trình duyệt, bạn nên:

A. Chọn Preview in Browser.

B. Chọn chế độ Mobile View.

C. Sử dụng chế độ Desktop View.

D. Chọn chế độ Full Screen.

Câu 5: Để thêm một biểu mẫu vào trang web, bạn cần thực hiện bước nào đầu tiên?

A. Chọn Form từ Add Block to Page và kéo thả vào trang web.

B. Chỉnh sửa các đối tượng trong biểu mẫu.

C. Nhập địa chỉ email vào ô Notification Email.

D. Thay đổi nội dung gợi ý trong ô nhập văn bản.

Câu 6: Để xuất bản trang web với tên miền con của mobirisesite.com, bạn cần:

A. Nhập tên miền con vào ô phù hợp và chọn PUBLISH.

B. Chọn Local drive folder và chọn BROWSE.

C. Chọn FTP và nhập thông tin máy chủ web.

D. Chọn chế độ Preview in Browser.

Câu 7: Để xuất bản website và tải lên máy chủ web có sẵn trên Internet, bạn nên:

A. Chọn FTP trong giao diện lựa chọn chế độ xuất bản và nhập thông tin máy chủ web.

B. Chọn Local drive folder và lưu các tệp tin HTML.

C. Chọn mobirisesite.com và nhập tên miền con.

D. Xem trước trang web bằng cách chọn Preview in Browser.

Câu 8: Để chỉnh sửa các đối tượng thu nhận dữ liệu trong biểu mẫu, bạn cần:

A. Mở bảng thông số bằng cách chọn Block Parameters.

B. Thay đổi nội dung gợi ý trong ô nhập văn bản và thông báo gửi biểu mẫu thành công.

C. Chọn chế độ Mobile View để xem trước.

D. Nhập thông tin FTP vào ô root folder.

Câu 9: Để xem trước trang web trong chế độ desktop, bạn cần:

A. Chọn chế độ Desktop View trên thanh công cụ.

B. Chọn chế độ Mobile View.

C. Sử dụng chế độ Preview in Browser.

D. Chọn Local drive folder để lưu trữ.

Câu 10: Khi xuất bản website và chọn Local drive folder, kết quả xuất tệp tin bao gồm:

A. Tệp dự án .mobirise và thư mục assets chứa tài nguyên trang web.

B. Một tên miền con của mobirisesite.com.

C. Thông tin máy chủ web và thư mục gốc.

D. Một tệp tin HTML tương ứng với trang web.

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đây đúng hay sai về biểu mẫu trên trang web:

a) Biểu mẫu chỉ dùng để cung cấp nội dung văn bản cho người dùng.

b) Biểu mẫu thu nhận thông tin từ người dùng như tên, địa chỉ email và số điện thoại.

c) Biểu mẫu không có các ô nhập văn bản, chỉ chứa các nút lệnh và ô lựa chọn.

d) Các ô nhập văn bản trong biểu mẫu có thể là tên, địa chỉ email và số điện thoại.

Câu 2: Phát biểu sau đây đúng hay sai về chế độ xem trước và xuất bản website:

a) Để xem trước trang web trên thiết bị di động trong Mobirise, bạn cần chọn Mobile View trên thanh công cụ.

b) Để xuất bản website dưới dạng các tệp tin HTML trên máy tính, bạn cần chọn FTP trong giao diện lựa chọn chế độ xuất bản.

c) Để xem trước trang web trong chế độ desktop, bạn cần chọn Desktop View trên thanh công cụ.

d) Để xuất bản trang web với tên miền con của mobirisesite.com, bạn cần chọn Local drive folder trong giao diện xuất bản.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Biểu mẫu trên trang web thường thu nhận thông tin gì từ người dùng?

Câu 2: Để xem trước trang web trên thiết bị di động trong phần mềm Mobirise, bạn nên chọn chế độ gì?

Câu 3: Trong Mobirise, cách nào không phải là tùy chọn để xuất bản website?