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)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học 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). 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. Các thẻ định dạng cơ bản

a) Định dạng đề mục:

Sử dụng các thẻ từ <h1> đến <h6> để hiển thị tiêu đề theo cấp độ, với <h1> là lớn nhất.

b) Định dạng phông chữ:

Dùng thẻ <font> để chỉnh kiểu chữ, cỡ chữ và màu sắc (lưu ý: thẻ này không còn hỗ trợ trong HTML5).

c) Định dạng văn bản:

- Một số thẻ phổ biến gồm:
+ <strong>: chữ đậm,
+ <em>: chữ nghiêng,
+ <u>: gạch chân,
+ <center>: căn giữa.
- Ký tự đặc biệt: Dùng các mã HTML như <, >,   để hiển thị ký tự đặc biệt.

2. Thẻ tạo siêu liên kết

- Sử dụng thẻ <a> với thuộc tính:
+ href: địa chỉ liên kết,
+ target: cách mở liên kết (_self, _blank).
- Có thể liên kết đến:
+ Trang web ngoài,
+ Tệp nội bộ,
+ Email,
+ Vị trí trong cùng trang (bằng thuộc tính id).

3. Thẻ tạo danh sách

a) Danh sách không có thứ tự:

- Dùng thẻ <ul> kết hợp <li> để tạo danh sách với ký hiệu đầu dòng.

b) Danh sách có thứ tự:

- Dùng thẻ <ol> kết hợp <li>, có thể thiết lập:
+ type: kiểu ký hiệu (1, A, a, I, i),
+ start: vị trí bắt đầu.
- Danh sách lồng nhau: Danh sách con được đặt trong thẻ <li> của danh sách cha, có thể kết hợp <ul> và <ol>.

THỰC HÀNH

Nhiệm vụ. Tạo và định dạng trang web
- Tạo 3 trang web:
+ thanhvienlop.html (trang chính),
+ loptruong.html (giới thiệu lớp trưởng),
+ loppho.html (giới thiệu lớp phó).
- Tạo liên kết từ trang chính đến 2 trang còn lại.

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)

1. Giới thiệu ngôn ngữ HTML

- HTML (HyperText Markup Language) là ngôn ngữ dùng để tạo và định dạng siêu văn bản hiển thị trong trình duyệt web.
- Mỗi trang web là một siêu văn bản chứa văn bản, hình ảnh, video, âm thanh và siêu liên kết, được xây dựng bằng HTML.
- Phiên bản phổ biến hiện nay là HTML5, hỗ trợ tốt cho các thiết bị thông minh và tính tương tác cao.
- Trình duyệt web (Chrome, Edge, Firefox...) sẽ tải và kết xuất mã HTML để hiển thị nội dung trang web cho người dùng.

2. Cấu trúc, nội dung trang web và các phần tử HTML

- Mỗi phần tử HTML gồm thẻ và có thể kèm thuộc tính.
- Thẻ HTML thường có cặp mở <tag> và đóng </tag>, một số thẻ tự đóng như <br>, <hr>, <img>.
- Trang HTML cơ bản gồm các phần:
+ : khai báo HTML5.
+ <html>...</html>: chứa toàn bộ nội dung trang.
+ <head>...</head>: chứa thông tin trang (tiêu đề, mã hóa...).
+ <body>...</body>: chứa nội dung hiển thị chính.
- Khi viết lồng thẻ, cần đóng thẻ trong trước, ngoài sau.
- Một số ví dụ minh họa:
+ <h1>: tiêu đề lớn nhất.
+ <p>: đoạn văn bản.
+ <strong>: chữ in đậm.
+ Thuộc tính bgcolor đặt màu nền; type và name dùng trong thẻ <input> để định dạng khung nhập liệu.

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)

THỰC HÀNH

Nhiệm vụ. Xuất bản trang web
- Kiểm tra thiết lập trước khi xuất bản:
+ Bật hiển thị thời gian cập nhật gần nhất và các liên kết neo để dễ truy cập các mục trên trang.
+ Thiết lập thông báo (banner) gồm màu nền, nội dung, liên kết, và phạm vi hiển thị (trang chủ hoặc tất cả trang).
- Xuất bản trang web:
+ Đặt tên web là “vietfruit”.
+ Thiết lập quyền xem cho mọi người.
+ Tùy chọn chặn công cụ tìm kiếm nếu không muốn trang hiển thị công khai.
+ Sau khi xuất bản, sao chép liên kết và chia sẻ với 2 bạn trong lớp.
- Hiệu chỉnh sau xuất bản:
+ Tạm dừng trang “vietfruit” bằng cách chọn lệnh “Unpublish”.
+ Đổi tên trang web thành “traicayviet”.
+ Di chuyển trang “Tin tức” xuống dưới “Sự kiện”.
+ Dùng tính năng “Review changes and publish” để xem trước và xuất bản lại.
+ Truy cập trang mới tại địa chỉ: https://sites.google.com/view/traicayviet.

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, FORM VÀ CÁC THIẾT LẬP TRANG WEB (CTST - ICT)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học này thuộc định hướng Tin học ứng dụng (ICT). 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. Công cụ Map

- Dùng để chèn bản đồ Google Maps vào trang web.
- Có hai lựa chọn: nhập địa chỉ cần chèn hoặc chọn từ bản đồ đã lưu (My Maps).
- Không thể thay đổi bản đồ đã chèn, cần xóa rồi chèn lại.
- Có thể xem bản đồ ở tab mới.

2. Công cụ Forms

- Dùng để chèn biểu mẫu Google Forms đã tạo sẵn vào trang web.
- Chọn biểu mẫu từ danh sách và chèn.
- Không thể chỉnh sửa trực tiếp trên trang, chỉ thay đổi bằng cách xóa và chèn biểu mẫu khác.
- Có thể mở biểu mẫu ở tab mới.

3. Chia sẻ và cộng tác

- Cho phép chia sẻ quyền truy cập vào trang web với người khác để xem hoặc chỉnh sửa.
- Chia sẻ bằng email, tùy chọn cấp quyền: xem nội dung đã phát hành (Published Viewer) hoặc chỉnh sửa (Editor).

4. Xem lịch sử thay đổi trang web

- Sử dụng công cụ “Version history” để xem và khôi phục các phiên bản trước.
- Cho phép đặt tên, tạo bản sao hoặc khôi phục phiên bản.

5. Tạo bản sao cho trang web

- Giúp lưu trữ và thử nghiệm thiết kế khác mà không làm ảnh hưởng đến bản gốc.
- Có thể tạo bản sao toàn bộ trang hoặc chọn trang cụ thể.

THỰC HÀNH

Nhiệm vụ. Sử dụng các công cụ Map, Forms
- Trang Liên hệ gồm:
+ Tiêu đề: “LIÊN HỆ VỚI CHÚNG TÔI”.
+ Cột 1: chèn bản đồ vị trí.
+ Cột 2: chèn biểu mẫu liên hệ với các trường: họ và tên, số điện thoại, email, nội dung liên hệ.
- Biểu mẫu cần được tạo trước bằng Google Forms.

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)

THỰC HÀNH

Nhiệm vụ 1. Sử dụng công cụ YouTube, Calendar, Drive và Collapsible group
- Trang Sự kiện gồm:
+ Phần 1 – Google Calendar: Nhúng lịch biểu sự kiện bằng công cụ Calendar. Có thể tùy chỉnh hiển thị tiêu đề, ngày, múi giờ, chế độ xem như Tuần (Week).
+ Phần 2 – YouTube: Nhúng 2 video từ YouTube bằng công cụ YouTube. Có thể tìm kiếm video hoặc nhập URL. Tùy chỉnh điều khiển, màu thanh tiến trình, chế độ toàn màn hình.
+ Phần 3 – Collapsible group: Dùng để tạo nhóm nội dung câu hỏi – trả lời dạng thu gọn. Nhập tiêu đề hiển thị và nội dung cần ẩn/hiện theo nhu cầu.
- Hoàn thành xong trang Sự kiện bằng các công cụ: Calendar, YouTube và Collapsible group.
Nhiệm vụ 2. Sử dụng công cụ Drive
- Trang Chính sách gồm:
+ Phần 1 – Chính sách mua hàng: Nhúng tài liệu từ Google Drive, tiêu đề “CHÍNH SÁCH MUA HÀNG”.
+ Phần 2 – Chính sách bảo mật thông tin: Nhúng tiếp tài liệu khác từ Drive, tiêu đề “CHÍNH SÁCH BẢO MẬT THÔNG TIN”.
- Ngoài công cụ Drive còn có thể chèn tài liệu từ Docs, Slides, Sheets và Charts.
- Lưu ý: Tài liệu nhúng từ Drive cần được chia sẻ ở chế độ cho phép xem.

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)

1. Công cụ Image carousel

- Image carousel dùng để trình chiếu hình ảnh dưới dạng băng chuyền trên trang web.

a) Tạo mới băng chuyền hình ảnh:

- Chọn Insert → Image carousel, thêm hình ảnh từ máy hoặc thư viện, có thể thêm chú thích hoặc xóa ảnh.

b) Hiệu chỉnh băng chuyền hình ảnh:

- Nhấp vào hình ảnh để sửa, thêm, xóa, hoặc cài đặt các tùy chọn như:
+ Hiển thị dấu chấm (Show dots)
+ Hiển thị chú thích (Show captions)
+ Tự động chạy (Auto start)
+ Tốc độ chuyển ảnh (Transition speed)

2. Công cụ Embed

- Embed dùng để nhúng liên kết hoặc mã HTML từ các trang web vào trang web của mình.

a) Nhúng vào trang web:

Chọn Insert → Embed, có thể nhúng bằng URL hoặc mã nhúng.

b) Thay đổi các tùy chọn nhúng:

Có thể bật/tắt hình ảnh, tiêu đề và mô tả ngắn cho liên kết được nhúng.

THỰC HÀNH

Nhiệm vụ 1. Tạo băng chuyển hình ảnh bằng công cụ Image carousel
- Thiết kế trang “Sản phẩm” với:
+ Hình nền mới cho phần đầu trang.
+ Băng chuyền hình ảnh sản phẩm bán chạy.
+ Lưới hiển thị 9 sản phẩm (3 hàng x 3 cột), mỗi sản phẩm có tên, giá và nút “Xem thêm”.
Nhiệm vụ 2. Sử dụng công cụ Embed để nhúng mã
- Thiết kế trang “Tin tức”:
+ Nhúng 2 trang web có hình ảnh, tiêu đề và mô tả ngắn về trái cây đặc sản.
+ Thực hiện qua công cụ Embed bằng URL, căn chỉnh hiển thị phù hợp.

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 E4. SỬ DỤNG CONTENT BLOCKS, BUTTON, DIVIDER (CTST - ICT)

BÀI E4. SỬ DỤNG CONTENT BLOCKS, BUTTON, DIVIDER (ctst - ICT)

1. Công cụ Content Blocks

- Content Blocks cung cấp các mẫu chia nội dung thành các cột để chèn dữ liệu như văn bản, hình ảnh, Drive, YouTube, Calendar và Map.
- Có thể chèn nội dung bằng cách chọn biểu tượng chèn và chọn nguồn dữ liệu phù hợp.
- Người dùng có thể thay đổi bố cục trình bày bằng cách kéo thả các đối tượng giữa các cột.
- Công cụ này cho phép hiệu chỉnh mẫu thiết kế sẵn linh hoạt để trình bày thông tin theo nhu cầu.

2. Công cụ Divider

- Dùng để tạo đường phân chia giữa các nội dung trên trang web.
- Được chèn thông qua Insert → Divider.
- Màu của Divider phụ thuộc vào màu giao diện trang web và không chỉnh màu riêng biệt được.

3. Công cụ Button

- Dùng để tạo nút liên kết đến các trang web khác.
- Insert → Button → nhập tên nút và liên kết.
- Có thể chỉnh định dạng nút như kiểu tô nền, đường viền, văn bản; căn chỉnh; hiệu chỉnh nội dung; sao chép hoặc xóa nút.

THỰC HÀNH

Nhiệm vụ: Dùng các công cụ đã học để thiết kế phần giữa trang chủ dựa trên trang web bán hàng đã tạo ở Bài E3.
Hướng dẫn thực hiện gồm 4 bước:
- Chèn Divider: Dùng Insert → Divider để tạo đường phân chia đầu tiên.
- Thiết kế phần thứ hai:
+ Dùng Content Blocks để tạo bố cục hai cột.
+ Chèn hình ảnh vào cột trái, văn bản vào cột phải.
+ Có thể di chuyển vị trí hình ảnh, chỉnh màu nền (Style 3).
- Thiết kế phần thứ ba:
+ Tạo bản sao phần thứ hai, chỉnh sửa nội dung, hình ảnh, màu nền (Style 1), di chuyển hình ảnh sang trái.
- Tạo nút “Xem thêm”:
+ Dùng Insert → Button, nhập tên nút và liên kết đến trang sản phẩm.
+ Di chuyển nút đặt dưới phần văn bản.
Kết quả: Hoàn thành nội dung giữa của trang chủ, sử dụng kết hợp hình ảnh và văn bản để tăng tính chuyên nghiệp.

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 E3. TẠO VĂN BẢN, CHÈN HÌNH ẢNH VÀ TẠO CHÂN TRANG (CTST - ICT)

1. Công cụ thiết kế Text box, Images

- Text box: dùng để nhập văn bản như tiêu đề, mô tả, có thể định dạng kiểu chữ (Title, Heading, Subheading,...), phông chữ, màu sắc, căn lề, tạo danh sách,...
- Images: dùng để chèn ảnh từ nhiều nguồn (máy tính, Google Drive, Google Images,...). Có thể cắt, thay đổi, thêm liên kết, văn bản thay thế và chú thích.

2. Công cụ Social links

- Dùng để chèn liên kết mạng xã hội (Facebook, Zalo, Instagram,...).
- Có thể thêm hình đại diện, liên kết, thêm/xoá link.

3. Các tuỳ chỉnh Section (mục)

- Mỗi nội dung là một Section riêng có thể:
+ Đổi màu/nền: chọn giữa các kiểu màu có sẵn hoặc dùng ảnh nền.
+ Duplicate section: tạo bản sao section.
+ Delete section: xoá section không cần thiết.

THỰC HÀNH

Nhiệm vụ: Thiết kế chân trang
- Dựa trên trang web bán hàng từ Bài E2, thiết kế chân trang gồm 3 cột:
+ Cột 1: logo, tên trang “VIETFRUIT”, địa chỉ, điện thoại, email, liên kết mạng xã hội.
+ Cột 2: tiêu đề “VỀ CHÚNG TÔI” và các liên kết: Trang chủ, Sản phẩm, Tin tức, Liên hệ.
+ Cột 3: tiêu đề “CHÍNH SÁCH” và các liên kết: Chính sách mua hàng, bảo mật, điều khoản dịch vụ, giao nhận.
- Các bước:
+ Thêm chân trang → Chèn logo và văn bản thông tin.
+ Dùng Text box để tạo tiêu đề và các mục.
+ Dùng Social links để chèn biểu tượng mạng xã hội có liên kết.
+ Điều chỉnh kích thước, vị trí, căn lề các nội dung theo 3 cột.
+ Tô màu nền chân trang bằng Style 3 trong Section colors.
+ Dùng Edit footer để chỉnh sửa hoặc ẩn chân trang khỏi một trang cụ thể.
- Kết quả: phần chân trang sẽ hiển thị ở cuối mỗi trang trên toàn bộ website và có thể dùng để điều hướng.

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, FORM 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)

BÀI E4. SỬ DỤNG CONTENT BLOCKS, BUTTON, DIVIDER (CTST - ICT)

BÀI E3. TẠO VĂN BẢN, CHÈN HÌNH ẢNH VÀ TẠO CHÂN TRANG (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