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

BÀI F10. ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (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. Định kiểu CSS cho siêu liên kết

Siêu liên kết được tạo bằng thẻ <a> và có thể định kiểu cho 5 trạng thái bằng các lớp giả trong CSS:

a) Trạng thái bình thường:

Sử dụng vùng chọn a để định kiểu màu sắc, bỏ gạch chân.

b) Trạng thái lướt qua (hover):

Sử dụng a:hover để thay đổi màu hoặc hiệu ứng khi rê chuột vào liên kết.

c) Trạng thái kích hoạt (active):

Sử dụng a:active để định kiểu khi liên kết đang được nhấn giữ.

d) Trạng thái đã truy cập (visited):

Sử dụng a:visited để định kiểu cho các liên kết đã được truy cập.

e) Trạng thái tập trung (focus):

Sử dụng a:focus để định kiểu khi liên kết được chọn bằng bàn phím, thường có viền hoặc hiệu ứng nổi bật.
Tất cả các trạng thái này được định kiểu bằng cách khai báo vùng chọn kết hợp thẻ <a> với lớp giả tương ứng.

2. Định kiểu CSS cho danh sách.

CSS hỗ trợ định kiểu dấu đầu dòng hoặc số thứ tự của danh sách bằng ba thuộc tính:

a) Đánh số hoặc dấu đầu dòng theo kiểu có sẵn:

Sử dụng list-style-type để chọn các kiểu như circle, square, decimal, …

b) Đánh dấu đầu dòng bằng hình ảnh:

Dùng list-style-image kết hợp hàm url() để đặt hình ảnh thay cho dấu đầu dòng.

c) Vị trí hiển thị dấu đầu dòng:

Sử dụng list-style-position với giá trị inside (bên trong nội dung) hoặc outside (bên ngoài nội dung).

THỰC HÀNH

Nhiệm vụ: Định kiểu CSS cho siêu liên kết và danh sách
Yêu cầu: Tạo thanh trình đơn ngang ở đầu trang chủ của trang index.html gồm 3 siêu liên kết.
Cách thực hiện:
- Tạo danh sách chứa 3 siêu liên kết, đặt trong thẻ <div class="nav">.
- Định kiểu cho div.nav bằng CSS trong thẻ <style>.
- Dùng vùng chọn .nav li để sắp xếp các mục theo chiều ngang.
- Dùng .nav li a để định kiểu văn bản, màu chữ và vùng đệm cho các liên kết.
- Thêm hiệu ứng hover để thay đổi màu nền và chữ khi rê chuột.
- Mở tệp HTML để kiểm tra kết quả.

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 F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

1. Khái niệm vùng chọn CSS

Vùng chọn (selector) trong CSS là mẫu dùng để xác định phần tử HTML sẽ được định kiểu. Có thể chọn phần tử bằng:
- Tên phần tử (vd: p)
- ID (vd: #my-id)
- Class (vd: .my-class)
Vùng chọn giúp áp dụng một kiểu CSS cho nhiều phần tử, tăng tính nhất quán, dễ bảo trì và tái sử dụng.

2. Những kĩ thuật định kiểu cơ bản bằng vùng chọn

a) Định kiểu cho các phần tử cùng loại

Sử dụng tên thẻ HTML làm vùng chọn để định kiểu chung.
Ví dụ: định kiểu tất cả <div> thành chữ màu xanh.

b) Định kiểu cho các phần tử khác loại

Dùng class để định kiểu cho các phần tử khác nhau nhưng có cùng class.
Ví dụ: cả <div> và <p> có class my-class sẽ được định kiểu giống nhau.
Một phần tử có thể có nhiều class để kết hợp nhiều kiểu định dạng.

c) Định kiểu cho riêng một phần tử xác định

Sử dụng ID duy nhất cho từng phần tử.
Ví dụ: phần tử có id="my-id" sẽ được định kiểu riêng, như màu chữ đỏ.
Tóm lại: có ba kỹ thuật vùng chọn chính:
- Tên thẻ: định kiểu cho phần tử cùng loại.
- Tên lớp (class): định kiểu cho phần tử cùng hoặc khác loại.
- ID: định kiểu riêng cho một phần tử duy nhất.

THỰC HÀNH

Sử dụng với tệp portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
- Định kiểu cho các tiêu đề <h1>:
+ Màu chữ trắng, cỡ 20, phông Arial.
+ Nền xanh, rộng nửa trang, bo tròn góc phải.
+ Căn phải văn bản, vùng đệm 10px.
Cách làm: Tạo tệp style.css, khai báo vùng chọn là h1, dùng các thuộc tính: color, font-size, font-family, background-color, width, border-radius, text-align, padding.
Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp
- Căn giữa ảnh, đặt trong nền tối, bo góc, chỉnh kích thước vừa phải.
- Các ảnh được đặt trong <div class="image-style">.
Cách làm:
- Dùng vùng chọn .image-style để căn giữa và tạo nền.
- Dùng vùng chọn .image-style img để chỉnh kích thước ảnh nằm trong khối div đó.

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 F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

1. Những thuộc tính định kiểu cho màu sắc và phông chữ

Hình thức trình bày văn bản như màu sắc và phông chữ ảnh hưởng đến cảm nhận của người xem. CSS hỗ trợ các thuộc tính:
- font-family: tên phông chữ
- font-size: cỡ chữ
- font-style: kiểu chữ (như nghiêng)
- font-weight: độ đậm nhạt
- color: màu chữ (có thể dùng tên màu, mã màu, hoặc hàm màu như rgba)
Ví dụ: sử dụng thẻ <span> để định kiểu một phần văn bản, như từ “Vô địch” bằng phông Georgia, cỡ lớn, nghiêng và đậm.

2. Những thuộc tính định kiểu cho văn bản

CSS cung cấp nhiều cách định dạng văn bản:
- text-align: căn ngang (trái, phải, giữa, đều hàng)
- vertical-align: căn dọc (trên, dưới, giữa, chỉ số trên/dưới)
- Các thuộc tính khác: letter-spacing (khoảng cách ký tự), word-spacing (khoảng cách từ), text-shadow (đổ bóng),...
Ví dụ: bổ sung căn giữa cho tiêu đề bằng text-align: center.

3. Những thuộc tính định kiểu cho nền

Nền của phần tử HTML có thể được định dạng bằng:
- background-color: màu nền
- background-image: ảnh nền (dùng hàm url())
- background: thuộc tính tổng hợp
- Các thuộc tính khác: opacity, background-repeat,...
Ví dụ: tạo nền chuyển sắc cho phần nội dung bằng cách đặt mã CSS trong thẻ <div>.

4. Những thuộc tính định kiểu cho đường viền, lề và vùng đệm

- border: định kiểu viền (độ dày, kiểu nét, màu)
- margin: khoảng cách ngoài viền (lề)
- padding: khoảng cách bên trong viền (vùng đệm)
Ví dụ: trong một <div>, đặt border: 1px solid gray, margin: 20px 50px 50px 250px, padding: 20px, border-radius để bo tròn góc.

THỰC HÀNH

Áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho văn bản và nền
- Căn phải phần thông tin cá nhân.
- Dùng ảnh hinhnen.jpg làm nền phủ toàn bộ chiều ngang.
- Dùng text-align: right, background-image, background-size: cover, color: #ffffff, padding để tăng tính thẩm mỹ và dễ đọc.
Nhiệm vụ 2. Định kiểu CSS cho đường viền, lề và vùng đệm
- Mỗi mục Sở thích nằm trong một <div> có:
+ Viền 1px xám, nền trắng.
+ Chiều cao 30px, độ rộng 50% trang web.
+ Góc bo tròn.
+ Lề và vùng đệm đều 20px.

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 F7. GIỚI THIỆU CSS (CTST - CS & ICT)

1. Khái niệm CSS

CSS (Cascading Style Sheets) là ngôn ngữ định kiểu cho các phần tử HTML, hỗ trợ thiết kế bố cục, màu sắc, phông chữ, hiệu ứng như đổ bóng, chuyển sắc, hoạt hình,... CSS tách biệt nội dung (HTML) và hình thức (CSS), mang lại các lợi ích:
- Linh hoạt về bố cục: Hỗ trợ thiết kế tương thích nhiều thiết bị.
- Nhất quán về hình thức: Định kiểu đồng nhất trên nhiều trang.
- Dễ bảo trì và nâng cấp: Thay đổi hình thức không ảnh hưởng nội dung.
- Có thể tái sử dụng: CSS có thể dùng lại cho nhiều phần tử hoặc trang khác.

2. Các cách bổ sung mã lệnh CSS trong trang web

- Cách 1: Chèn trực tiếp CSS vào thẻ HTML bằng thuộc tính style. Dễ áp dụng nhưng khó bảo trì, không tái sử dụng được.
- Cách 2: Đặt mã CSS trong cặp thẻ <style> trong phần <head>. Cho phép định kiểu toàn cục.
- Cách 3: Tạo tệp CSS riêng (vd: style.css) và liên kết bằng thẻ <link>. Cách này hỗ trợ cộng tác, bảo trì và tái sử dụng mã hiệu quả hơn.
Lưu ý: Khi có nhiều cách định kiểu đồng thời, trình duyệt ưu tiên theo thứ tự: Cách 1 → Cách 2 → Cách 3.

THỰC HÀNH

Áp dụng cho tệp portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho các phần tử <h1>
- Phông chữ: Arial, 32pt, in đậm.
- Màu chữ: Xanh dương, có đổ bóng.
- Giãn cách kí tự: 4px.
Hướng dẫn: Viết mã CSS trong thẻ <style> ở phần <head>, sử dụng các thuộc tính: font-family, font-size, font-weight, color, text-shadow, letter-spacing.
Nhiệm vụ 2. Định kiểu CSS cho bảng
- Bảng rộng 75% trang web, viền nét liền xanh dày 2px.
- Hàng tiêu đề: cao 32px, căn giữa, in hoa toàn bộ.
- Các hàng còn lại: cao 48px, căn trái và giữa, tô màu xen kẽ.
Hướng dẫn: Sử dụng style trực tiếp trong các thẻ HTML. Dùng các thuộc tính như: width, border, height, text-align, vertical-align, text-transform, background-color,... để tạo hiệu ứng và bố cục theo yêu cầ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 F6. DỰ ÁN TẠO TRANG WEB (CTST - CS & ICT)

THỰC HÀNH

Nhiệm vụ. Tạo trang web kỉ yếu lớp 12A với các thẻ HTML đã học
Yêu cầu:
- Tạo ít nhất 3 trang web:
+ index.html (Trang chủ),
+ hoatdong.html (Hoạt động),
+ thanhvienlop.html (Thành viên lớp).
- Thực hiện theo nhóm từ 3–5 học sinh.
- Thời gian thực hiện: 2 tuần, có 2 tiết học trên lớp để trình bày.
Tiêu chí đánh giá:
- Nội dung: đầy đủ thông tin về thành viên và hoạt động của lớp, có văn bản và hình ảnh.
- Hình thức: bố cục rõ ràng, có tiêu đề, thanh điều hướng, nội dung, và sử dụng đúng các phần tử HTML đã học.
Hướng dẫn thực hiện dự án:
- Giai đoạn chuẩn bị:
+ Thu thập thông tin kỉ yếu, tổ chức tệp.
+ Phác thảo bố cục, chức năng các trang.
+ Lập kế hoạch công việc và phân công nhiệm vụ.
+ Thống nhất phương pháp và thời gian làm việc.
- Giai đoạn thực hiện:
+ Các thành viên làm việc theo phân công.
+ Thảo luận, góp ý, sửa lỗi và hoàn thiện sản phẩm.
- Giai đoạn báo cáo kết quả:
+ Soạn báo cáo kết quả thực hiện.
+ Trình bày sản phẩm trước lớp, nhận nhận xét từ bạn và giáo viên.

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 F5. TẠO BIỂU MẪU TRONG TRANG WEB (CTST - CS & ICT)

1. Giới thiệu biểu mẫu trong trang web

- Biểu mẫu (form) là nơi để người dùng nhập dữ liệu và tương tác với trang web (ví dụ: điền thông tin, chọn phương án, nhấn nút…).
- Biểu mẫu thường được sử dụng trong các trang mua sắm, đăng ký, góp ý…

2. Tạo một số thành phần trong biểu mẫu

- Thẻ <form>: Tạo vùng biểu mẫu, có hai thuộc tính chính:
+ action: địa chỉ xử lý dữ liệu,
+ method: phương thức gửi dữ liệu (GET, POST).
- Thẻ <input>:
+ Với type="text": tạo ô nhập văn bản 1 dòng,
+ Với type="radio": tạo nút tròn chọn 1 trong nhiều,
+ Với type="checkbox": tạo hộp kiểm để chọn nhiều mục.
- Thẻ <label>: Gắn nhãn cho ô nhập, dùng thuộc tính for trùng với id của thẻ nhập liệu tương ứng.
- Thẻ <textarea>: Nhập văn bản nhiều dòng, có thuộc tính rows, cols.
- Thẻ <button>:
+ type="submit": gửi biểu mẫu,
+ type="reset": xóa dữ liệu trong biểu mẫu,
+ type="button": nút thông thường để chạy lệnh JavaScript.

THỰC HÀNH

Nhiệm vụ. Tạo biểu mẫu trong trang web
- Yêu cầu: Tạo trang login.html với:
+ Hai ô nhập: tên người dùng (type="text"), mật khẩu (type="password"),
+ Nút "Đăng nhập" (type="submit"),
+ Dữ liệu được gửi đi khi nhấn nút.
- Thực hiện:
+ Dùng thuộc tính required để bắt buộc nhập,
+ Có thể gán giá trị mặc định với value.

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 F4. THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB (CTST - CS & ICT)

1. Thêm tệp ảnh vào trang web

- Sử dụng thẻ <img> để chèn hình ảnh vào trang web.
- Thuộc tính quan trọng:
+ src: đường dẫn đến tệp ảnh,
+ alt: văn bản thay thế khi ảnh không hiển thị,
+ width, height: xác định kích thước hiển thị ảnh.
- Thẻ <img> là thẻ đơn, không có thẻ đóng.

2. Thêm tệp video và âm thanh vào trang web

- Sử dụng thẻ <video> và <audio> để chèn video, âm thanh.
- Một số thuộc tính dùng chung:
+ src: đường dẫn tệp,
+ controls: hiển thị điều khiển phát,
+ autoplay: tự động phát khi tải trang,
+ loop: phát lặp lại,
+ muted: tắt âm thanh khi phát.
- Thẻ <video> còn có width, height để điều chỉnh kích thước.
- Khuyến nghị nên lưu tệp đa phương tiện cùng thư mục với tệp HTML thay vì dùng liên kết trực tuyến để tránh lỗi nếu nguồn thay đổi.

THỰC HÀNH

Nhiệm vụ 1. Thêm tệp ảnh vào trang web
- Thêm 4 ảnh vào trang portfolio.html theo bố cục bảng:
+ Sử dụng <table>, hai hàng <tr>, mỗi hàng hai ô <td> chứa ảnh.
+ Chèn ảnh từ thư mục Images và từ liên kết trên Internet.
Nhiệm vụ 2. Thêm tệp video vào trang web
- Thêm 2 video vào cùng trang portfolio.html.
+ Một video từ thư mục Videos,
+ Một video từ liên kết bên ngoài.
- Kiểm tra kết quả hiển thị bằng cách mở tệp HTML trong trình duyệt.

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 F3. TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML (CTST - CS & ICT)

1. Tạo bảng

- Dùng các thẻ HTML:
+ <table>: tạo bảng,
+ <tr>: tạo hàng,
+ <th>: tạo ô tiêu đề,
+ <td>: tạo ô dữ liệu.
- Có thể sử dụng thuộc tính border để hiển thị đường viền.
- Ứng dụng bảng để tạo bố cục trang web: ví dụ chia trang thành phần tiêu đề, nội dung hai cột, và phần chân trang.
- Thuộc tính width có thể dùng đơn vị phần trăm để tự động co giãn theo độ rộng trình duyệt.

1. Tạo khung

- Sử dụng thẻ <iframe> để nhúng một trang web khác vào trong trang hiện tại.
- Thuộc tính src: chỉ định đường dẫn của trang nhúng.
- Thuộc tính width, height: thiết lập kích thước hiển thị của khung nhúng.
- Ví dụ: nhúng trang chantroisangtao.vn với chiều rộng 80% và chiều cao 500px.

THỰC HÀNH

Nhiệm vụ 1. Tạo bảng trong trang web
- Tạo trang tkb.html trình bày thời khóa biểu lớp 12A gồm 8 dòng, 7 cột.
- Sử dụng Visual Studio Code để nhập mã HTML, hiển thị nội dung bảng từ tiết 1 đến tiết 3, rồi bổ sung các tiết còn lại.
Nhiệm vụ 2. Tạo khung trong trang web
- Tạo trang kiyeu.html có hai cột:
+ Cột bên trái chứa danh sách thành viên.
+ Khi nhấp vào tên, nội dung tương ứng hiển thị ở cột bên phải thông qua khung <iframe>.
+ Cần tạo thêm các tệp HTML tương ứng như loptruong.html, loppho.html, thanhvienlop.html và đặt trong cùng thư mục.

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 F10. ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (CTST - CS & ICT)

BÀI F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

BÀI F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

BÀI F7. GIỚI THIỆU CSS (CTST - CS & ICT)

BÀI F6. DỰ ÁN TẠO TRANG WEB (CTST - CS & ICT)

BÀI F5. TẠO BIỂU MẪU TRONG TRANG WEB (CTST - CS & ICT)

BÀI F4. THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB (CTST - CS & ICT)

BÀI F3. TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML (CTST - CS & 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