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

BÀI 14 - ĐỊNH DẠNG VĂN BẢN BẰNG CSS (KNTT - CS & ICT)

Bài 14 - Định dạng văn bản bằng CSS (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. 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.

TÓM TẮT NỘI DUNG:
1. Định dạng văn bản bằng CSS
a) CSS định dạng phông chữ
b) CSS định dạng màu chữ
c) CSS định dạng dòng văn bản
2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS
a) Tính kế thừa của CSS
b) Thứ tự ưu tiên khi áp dụng mẫu CSS
c) Sử dụng kí hiệu * và !important
3. Thực hành

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

a) CSS định dạng phông chữ

CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), chọn cỡ chữ (font-size), chọn kiểu chữ (font-style), độ dày nét chữ (font-weight) và nhiều thuộc tính khác.

• font-family: CSS cho phép thiết lập mẫu định dạng chọn phông sử dụng thuộc tính (font-family). Trên máy tính có thể cài đặt nhiều phông chữ khác nhau, mỗi phông chữ có một tên riêng. Tuy nhiên, các phông chữ có thể được chia làm năm loại sau: serif (chữ có chân); sans-serif (chữ không chân); monospace (chữ có chiều rộng đều nhau); cursive (chữ viết tay); fantasy (chữ trừu tượng).

Ví dụ: Mẫu CSS sau cho biết cách thiết lập phông chữ cho các thẻ h1, lựa chọn các phông ưu tiên theo thứ tự Times, Times New Romans, Tahoma, cuối cùng là một phông loại có chân bất kì.

Trong ví dụ trên, sau thuộc tính font-family là một hay một danh sách các tên phông chữ. Nếu tên phông chữ có chứa dấu cách thì cần đặt trong hai dấu nháy kép (hoặc nháy đơn). Danh sách các phông chữ này thường cùng loại và tên của loại phông đó ở vị trí cuối cùng. Nếu đưa ra một danh sách các phông chữ, trình duyệt sẽ lần lượt tìm các phông trong danh sách từ trái sang phải để chọn thể hiện văn bản. Nếu không tìm thấy phông chữ nào trong danh sách thì sẽ chọn phông cùng loại bất kì.

• font-size: Thuộc tính này sẽ thiết lập cỡ chữ. Cú pháp của mẫu định dạng như sau:

Cỡ chữ có thể là một trong những dạng sau:
- Cỡ chữ theo đơn vị đo chính xác tuyệt đối, ví dụ: cm (centimét), mm (milimét), in (inch=2,54cm), px (pixel=1/96inch), pt (point=1/72inch).
- Cỡ chữ theo các đơn vị đo tương đối: em (so với cỡ chữ hiện thời của trình duyệt), ex (so với chiều cao chữ x của cỡ chữ hiện thời), rem (so với cỡ chữ của phần tử gốc html của tệp HTML).
- Cỡ chữ theo tỷ lệ phần trăm (%), cỡ chữ của phần tử cha.
- Cỡ chữ theo các mức xx-smal, x-smal, smal, medium, large, x-large, xx-large. Cỡ chữ mặc định là medium.

Ví dụ:

• font-style: Thuộc tính này thiết lập kiểu chữ thường hay chữ nghiêng của văn bản. Thuộc tính này có hai giá trị là normal (thường) và italics (nghiêng).
• font-weight: Thuộc tính này thiết lập kiểu chữ đậm. Giá trị của thuộc tính này có thể đặt bằng chữ là normal (bình thường), bold (đậm) hoặc đặt bằng các giá trị 100, 200,… 900, trong đó các mức độ viết đậm từ 500 trở lên.
Ví dụ: Mẫu sau thiết lập các thẻ strong và em với kiểu chữ nghiêng và đậm khác nhau.

b) CSS định dạng màu chữ

Thuộc tính color sẽ thiết lập màu chữ. Một số giá trị màu cơ bản cho thuộc tính này như sau: black (đen), white (trắng), purple (tím), blue (xanh dương), orange (cam), red (đỏ), green (xanh lá cây), yellow (vàng).
Một số ví dụ thiết lập thuộc tính màu chữ.

Bộ chọn với ký tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen.

c) CSS định dạng dòng văn bản

Các mẫu định dạng loại này sẽ thiết lập các thuộc tính liên quan đến các dòng văn bản khi thể hiện trên trình duyệt. Để hiểu cách định dạng này cần biết đường cơ sở (baseline) và chiều cao dòng văn bản (line-height).
Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó. Chiều cao dòng văn bản là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. CSS sẽ mặc định coi chiều cao = 2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. Hình 14.3 cho chúng ta hình dung đường cơ sở (baseline) và chiều cao dòng (line-height).

• line-height. Thuộc tính này dùng để thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối như sau:

• text-align. Thuộc tính này thiết lập căn lề cho các phần tử được chọn. Các kiểu căn hàng bao gồm: left, center, right, justify. Ví dụ:

• text-decoration. Thuộc tính này thiết lập tính chất “trang trí” dòng văn bản bằng các đường kẻ ngang trên, dưới hay giữa dòng. Thuộc tính này sẽ thay thế và mở rộng cho thẻ u của HTML. Thuộc tính này có bốn giá trị thường sử dụng là none (mặc định không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ) như minh họa ở Hình 14.4.
Lưu ý: Thuộc tính này không có tính kế thừa.

• text-indent. Thuộc tính định dạng thụt lề dòng đầu tiên. Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent).

Ví dụ:

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

a) Tính kế thừa của CSS

Một tính chất rất quan trọng của CSS là tính kế thừa. Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng). Ví dụ CSS sau định dạng chữ màu xanh dương cho thẻ body:

Trong Hình 14.5 chỉ riêng thẻ h1 có chữ màu đỏ do được định dạng theo mẫu CSS còn các phần tử h2 và p đều kế thừa từ phần tử cha body có chữ màu xanh dương.

b) Thứ tự ưu tiên khi áp dụng mẫu CSS

Do được phép có nhiều mẫu định dạng CSS nên có thể xảy ra trường hợp nhiều mẫu cùng áp dụng cho một phần tử HTML, khi đó câu hỏi đặt ra là trình duyệt sẽ chọn các mẫu định dạng theo thứ tự ưu tiên nào để áp dụng?
Khi đó trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng. Đây chính là tính chất “cascading” của CSS. Trong ví dụ mẫu CSS sau có hai định dạng cùng được áp dụng cho h1, mẫu đầu quy định căn giữa, mẫu sau quy định căn trái.

Khi áp dụng cho ví dụ sau, phần tử h1 được căn trái theo mẫu cuối cùng của CSS:

c) Sử dụng kí hiệu * và !important

CSS còn cho phép sử dụng ký hiệu * và !important với ý nghĩa như sau:
• Kí hiệu * dùng trong bộ chọn sẽ có ý nghĩa là phần tử bất kì. Nếu có một mẫu định dạng chứa ký tự * thì định dạng này sẽ được áp dụng cho mỗi phần tử mà chưa có trong bất cứ mẫu định dạng nào khác của CSS. Mức độ ưu tiên của * là thấp nhất.
• Kí tự !important important nếu được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS. Chú ý ký hiệu !important cần được viết ngay sau thuộc tính cần đánh dấu ưu tiên. Chỉ thuộc tính này của bộ chọn có thứ tự ưu tiên cao nhất.

Ví dụ: Mẫu CSS có hai mẫu định dạng với cùng bộ chọn là h1. Mẫu đầu tiên có !important với thuộc tính “text-align : center;” nên thuộc tính này sẽ được ưu tiên cao nhất. Mẫu thứ hai của h1 có dạng “text-align : left; color : red;” thì thuộc tính màu sắc sẽ được ưu tiên áp dụng. Mẫu cuối cùng có ký hiệu * sẽ có mức ưu tiên thấp nhất mặc dù nó được viết ở vị trí cuối cùng. Kết quả áp dụng CSS trên cho tệp HTML như Hình 14.7.

3. THỰC HÀNH

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 25. Làm quen với Học máy
Bài 26. Làm quen với Khoa học dữ liệu
Bài 27. Máy tính và Khoa học dữ liệu
Bài 28. Thực hành trải nghiệm trích rút thông tin và tri thức
Bài 29. Mô phỏng trong giải quyết vấn đề
Bài 30. Ứng dụng mô phỏng trong giáo dục

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

Bài 23. Chuẩn bị xây dựng trang web
Bài 24. Xây dựng phần đầu trang web
Bài 25. Xây dựng phần thân và chân trang web
Bài 26. Liên kết và thanh điều hướng
Bài 27. Biểu mẫu trên trang web
Bài 28. Thực hành tổng hợp

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

☞ Kiểm tra tin học 12 - Kết nối tri thức
☞ Lý thuyết tin học 12 - Kết nối tri thức
☞ Thực hành tin học 12 - Kết nối tri thức
☞ Gợi ý trả lời tin học 12 - Kết nối tri thức
☞ Trắc nghiệm tin học 12 - Kết nối tri thức
☞ Bài giảng điện tử tin học 12 - Kết nối tri thức

BÀI 13 - KHÁI NIỆM, VAI TRÒ CỦA CSS (KNTT - CS & ICT)

Bài 13 - Khái niệm, vai trò của CSS (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. 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.

TÓM TẮT NỘI DUNG:
1. Khái niệm mẫu định dạng CSS
2. Cấu trúc CSS
a) Cách thiết lập CSS trong
b) Cách thiết lập CSS ngoài
c) Cách thiết lập CSS nội tuyến
3. Vai trò, ý nghĩa của CSS

1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS

Trong đoạn mã nguồn ở Hình 13.2, các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheet và viết tắt là CSS.

CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web.
Trong Hình 13.3, ba mẫu định dạng tương ứng với ba dòng được ghi trong thẻ <style>...</style> (trong phần tử head): Mẫu thứ nhất thiết lập màu chữ đỏ cho các phần tử <h1>. Mẫu thứ hai thiết lập khung viền màu xanh có độ dày 2 pixel (mỗi pixel = 2,54/96 cm) cũng được áp dụng cho các phần tử <h1>. Mẫu thứ ba thiết lập dòng đầu thụt vào 15 pixel cho tất cả các phần tử <p>.
Như vậy CSS có thể hiểu là tập hợp các mẫu định dạng viết độc lập với mã nguồn html của trang web và dùng để định dạng cho các phần tử HTML tương ứng. CSS có cách viết riêng (ngôn ngữ CSS), độc lập với ngôn ngữ HTML. Chỉ cần viết mẫu định dạng một lần và được áp dụng đồng thời cho tất cả các phần tử, ví dụ <h1> và <p> trong trang web trên.

2. CẤU TRÚC CSS

Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declaration block). Vùng mô tả bao gồm một hay nhiều quy định có dạng {thuộc tính : giá trị;}, các quy định được viết cách nhau bởi dấu “;”. Bộ chọn sẽ quy định những thẻ HTML nào được chọn để áp dụng định dạng này.
Cấu trúc CSS có thể ở dạng đơn giản, trong đó vùng mô tả chỉ có một quy định:

hoặc nhiều quy định ở vùng mô tả như sau:

Ví dụ 1: Mẫu CSS thiết lập màu chữ đỏ cho bộ chọn là tất cả các thẻ h1.

Ví dụ 2: Mẫu CSS gồm hai quy định, thụt lề dòng đầu và chữ màu xanh áp dụng cho bộ chọn là tất cả các thẻ p.

Bộ chọn có thể là một thẻ để áp dụng như hai ví dụ trên hoặc đồng thời nhiều thẻ. Cách viết này giúp cho CSS dễ thiết lập và áp dụng.
Ví dụ 3: Mẫu CSS sau thiết lập định dạng chữ đỏ cho đồng thời các thẻ h1, h2, h3. Các thẻ này được viết cách nhau bởi dấu phẩy.

Có ba cách thiết lập CSS là CSS trong (internal CSS), CSS ngoài (external CSS) và CSS nội tuyến (inline CSS).

a) Cách thiết lập CSS trong

Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ <style> và đặt trong phần tử head của tệp HTML. Với cách thiết lập này các định dạng sẽ áp dụng cho tất cả các phần tử HTML của trang web phù hợp với mô tả bộ chọn của CSS. Với cách thiết lập CSS trong, các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện thời. Cách thiết lập CSS trong ví dụ ở Hoạt động 1 là thiết lập CSS trong.

b) Cách thiết lập CSS ngoài

Các mẫu định dạng CSS được viết trong một tệp css, bên ngoài tệp HTML. Tệp css này sẽ bao gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS. Sau đó, cần thực hiện thao tác kết nối, liên kết tệp HTML với tệp định dạng css.
Tệp style.css sau là ví dụ cách thiết lập tệp css ngoài. Các dòng chú thích dưới dạng /*……*/ và có thể trên nhiều dòng.

Cách kết nối tệp HTML với CSS như sau:
Cách 1: Sử dụng thẻ link đặt trong vùng head của trang web, ví dụ:

Cách 2: Sử dụng lệnh @import đặt trong phần tử style và nằm trong phần tử head của trang web, ví dụ:

Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tệp định dạng css.

b) Cách thiết lập CSS nội tuyến

Có thể định dạng CSS trực tiếp bên trong thẻ của phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style. Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh. Các lợi ích khác của cách thiết lập CSS nội tuyến sẽ được trình bày trong phần sau.

3. VAI TRÒ, Ý NGHĨA CỦA CSS

Nếu không dùng CSS thì khi định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML. Nếu có nhiều trang web và có nhiều phần tử HTML thì công việc này mất nhiều thời gian và có thể không thống nhất. CSS ra đời để phục vụ việc định dạng nội dung trang web một cách thống nhất, nhanh chóng và thuận tiện.

• CSS sẽ giúp tách việc nhập nội dung trang web bằng thẻ HTML và việc định dạng thành hai công việc độc lập với nhau. Điều này sẽ làm giảm nhẹ công việc nhập nội dung, tăng tính chuyên nghiệp của việc định dạng.
• Các mẫu định dạng của CSS có thể được viết ngay trong phần head của trang html, chỉ cần viết một lần và áp dụng cho tất cả các phần tử trong bộ chọn. Như vậy, các định dạng này được thiết lập một lần và được dùng nhiều lần.
• Các mẫu định dạng có thể viết trong tệp CSS ngoài và kết nối vào bất kỳ trang web nào. Tính năng này cho phép định dạng một lần và áp dụng cho nhiều trang web, thậm chí cả một website. Một ý nghĩa khác là nếu một website (hay trang web) cần thay đổi định dạng thì có thể chỉ cần chỉnh sửa một lần.

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

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

BÀI 12 - TẠO BIỂU MẪU (KNTT - CS & ICT)

Bài 12 - Tạo biểu mẫu (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. 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.

TÓM TẮT NỘI DUNG:
1. Biểu mẫu web
2. Thực hành tạo biểu mẫu

1. BIỂU MẪU WEB

Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu. Dữ liệu được người dùng nhập vào form và xử lý tại chỗ hoặc gửi về máy chủ. Ta thường xuyên gặp các biểu mẫu (form) khi đăng ký tài khoản, mua hàng, tìm kiếm thông tin,...

Biểu mẫu web đầy đủ có hai thành phần:
• Thành phần thứ nhất là biểu mẫu hiển thị trên web được tạo thành bởi các đoạn mã HTML. Được sử dụng để người dùng nhập và gửi thông tin.
• Thành phần thứ hai là các ứng dụng hoặc script xử lý dữ liệu, thường nằm trên máy chủ. Thành phần này không thuộc phạm vi ngôn ngữ HTML, nên ta không đề cập ở đây.
Biểu mẫu web được tạo bởi thẻ <form> có cấu trúc chung như sau:

Các phần tử của biểu mẫu thường dùng là input, label, select, textarea; ngoài ra còn có các phần tử khác như fieldset, legend, datalist,…
• Phần tử level định nghĩa nhãn có cấu trúc như sau:

Về mặt hiển thị của nhãn không có gì đặc biệt, tuy nhiên khi nháy chuột vào Tên_nhãn, con trỏ chuột sẽ được đưa vào vùng của phần tử input được xác định bởi thuộc tính for tương ứng.
• Phần tử input xác định vùng nhập dữ liệu. input xác định bởi thẻ đơn, không cần thẻ kết thúc. Phần tử input có cấu trúc như sau:

Trong đó:
- Thuộc tính name được sử dụng cho input khi thực hiện xử lý. Nghĩa là, tên_input được sử dụng để tham chiếu tới dữ liệu đã nhập khi thực hiện tính toán hay gửi tới máy chủ.
- Thuộc tính type xác định loại dữ liệu mà phần tử input chứa. Bảng 12.1 mô tả một số loại dữ liệu (type) thông dụng. Nội dung ví dụ nằm trong thẻ input sau mã định danh và trước thuộc tính name.
Lưu ý: Phần tử input chỉ dùng để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label.

• Phần tử select có tác dụng cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. Phần tử select chứa nhiều thẻ option, mỗi cặp định nghĩa một lựa chọn trong danh sách. Cấu trúc phân tử select như sau:

• Phần tử textarea xác định một vùng nhập văn bản có nhiều dòng và cột. Cấu trúc của phần tử textarea như sau:

Lưu ý: Phần Nội_dung được hiển thị trong vùng nhập, nếu không để Nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.

• Phần tử fieldset được dùng để nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một hình chữ nhật bao quanh các phần tử đặt trong cặp thẻ <fieldset>...</fieldset>. Ta có thể thêm tên cho nhóm phần tử bằng cách đặt phần tử legend trong phần tử fieldset tương ứng.

2. THỰC HÀNH TẠO BIỂU MẪU

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

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

BÀI 11 - CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB (KNTT - CS & ICT)

Bài 11 - Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. 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.

TÓM TẮT NỘI DUNG:
1. Chèn tệp ảnh vào trang web
2. Chèn âm thanh và video vào trang web
3. Tạo khung nội tuyến trong trang web
4. Thực hành chèn tệp đa phương tiện và khung nội tuyến

1. CHÈN TỆP ẢNH VÀO TRANG WEB

Hình ảnh giúp cho các trang web sinh động hơn. Có thể nhúng hình ảnh trực tiếp trong nội dung của trang hoặc dưới dạng hình nền. Trong bài này, chúng ta sẽ tìm hiểu cách chèn ảnh vào nội dung trang web bằng thẻ <img>.
Để có thể hiển thị trên web, các tệp ảnh cần được định dạng là một trong những loại được trình duyệt web hỗ trợ. Các định dạng phổ biến như PNG, JPEG hoặc GIF và một số định dạng mới, phổ biến cho web như JPEG-XR hay WebP. Các ảnh có định dạng khác như TIFF, EPS,… cần được chuyển đổi sang định dạng được hỗ trợ ở trên.
Thẻ <img> là thẻ đơn, dùng để thêm ảnh vào trang web. Khi gặp thẻ <img>, trình duyệt hiểu là “cần đặt một hình ảnh vào đây”. Hình ảnh có thể được chèn ngay trong dòng văn bản mà không tạo ra ngắt dòng (Hình 11.1):

Với thẻ <img>, trình duyệt sẽ phải tải ảnh lên trước khi hiển thị trên trang web. Do vậy, khi chèn hình ảnh vào trang web, ta cần quan tâm tới dung lượng của tệp hình ảnh vì dung lượng lớn sẽ làm việc hiển thị hình ảnh trên trang web gặp khó khăn nếu tốc độ của mạng chậm.
Trong các thuộc tính của thẻ <img>, thuộc tính src là bắt buộc, để chỉ đường dẫn tới tệp ảnh. Ngoài ra, thuộc tính quan trọng khác là alt nên được sử dụng kèm để cung cấp văn bản thay thế khi việc hiển thị ảnh bị lỗi. Văn bản thay thế cần có tác dụng giúp người đọc hình dung ra nội dung bức ảnh. Đoạn mã để chèn ảnh có thể như sau:

Ví dụ, ta tạo một liên kết từ ảnh pdffiles.png trong thư mục images tới một tệp có đường dẫn tai_lieu/bieu_mau.pdf có nội dung là biểu mẫu xin nhập học bằng đoạn mã html sau:

Hình 11.2a thể hiện kết quả khi có tệp pdffiles.png trong thư mục images và hình 11.2b trong trường hợp không có.

Để thiết lập kích thước cho ảnh ta sử dụng các thuộc tính width, height hay cho thẻ img. Thuộc tính width, height cho biết kích thước hiển thị ảnh bằng pixel. Khi sử dụng các thuộc tính này, trình duyệt sẽ giữ đúng không gian trong bố cục khi hình ảnh đang tải giúp hiển thị trang nhanh hơn. Nếu chỉ sử dụng một trong hai thuộc tính (width hoặc height), chiều còn lại sẽ được tính toán để hiển thị theo tỷ lệ của ảnh gốc.
Ví dụ, Hình 11.3 thể hiện kết quả khi chèn ảnh hình trái tim heart.png có chiều rộng 262 pixel, chiều dài 257 pixel với các giá trị thuộc tính khác nhau.

Lưu ý: Khi chèn ảnh, nên chèn bằng đường dẫn tương đối để tránh trường hợp xảy ra lỗi khi ảnh trên mạng bị thay đổi.

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

Để chèn video hoặc âm thanh vào trang web, ta sử dụng thẻ <video> và <audio>. Hai thẻ này được hỗ trợ trong hầu hết các trình duyệt, tuy nhiên định dạng của các tệp tin đa phương tiện có thể sử dụng vẫn phụ thuộc vào trình duyệt.

• Hai định dạng tệp video phổ biến nhất là mp4 và webm. Mp4 chạy được trực tiếp trên hầu hết các trình duyệt.
• Ba định dạng tệp âm thanh phổ biến được hỗ trợ bởi hầu hết trình duyệt hiện nay là mp3, wav và ogg.

Để chèn tệp video hay âm thanh vào trang web, ta sử dụng thẻ <video> hoặc <audio>:

Tương tự như thẻ <img> thẻ <video> cũng có các thuộc tính cơ bản như <src, <width, <height. Ngoài ra còn có các thuộc tính khác như:

• controls: là thuộc tính boolean, không cần có giá trị, để trình duyệt hiển thị các thành phần điều khiển như nút phát/ tạm dừng, điều khiển âm lượng,… Thuộc tính này nên được sử dụng để có thể điều khiển trong quá trình phát tệp tin đa phương tiện.
• autoplay: là thuộc tính boolean, không cần có giá trị, cho phép trình duyệt chạy video ngay khi hiển thị. Tuy nhiên, một số trình duyệt như Google Chrome thường không cho video chạy ngay khi hiển thị hoặc có thể chạy ngay khi hiển thị nếu có thuộc tính muted - không phát tiếng.
• poster: cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video. Thẻ <audio> không có thuộc tính width, height và poster.

Trong trường hợp có nhiều video hoặc nhiều tệp âm thanh tương ứng với các định dạng khác nhau, ta có thể sử dụng thẻ <source> trong cặp thẻ <video> hay <audio> để chỉ định các loại định dạng khác nhau. Trình duyệt sẽ tự động tìm và hiển thị tệp tin với định dạng mà nó hỗ trợ.
Ví dụ:

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web hiện tại. Để tạo khung nội tuyến ta sử dụng thẻ <iframe> (viết tắt của inline frame - khung nội tuyến). Ví dụ, khi cần chèn nội dung từ YouTube hoặc bản đồ từ Google Maps vào trang web của mình, các nền tảng đều cung cấp cho ta một đoạn mã sử dụng iframe để ta sao chép và dán vào trang web, iframe cũng là công cụ tiêu chuẩn để chèn các nội dung quảng cáo.

Các thuộc tính thường dùng của thẻ <iframe> là:
• src: đường dẫn tới nội dung hiển thị trong khung nội tuyến.
• width, height: chiều rộng và chiều cao của khung nội tuyến.

Ví dụ, tạo một trang web có tên iframe.html và chèn vào một khung nội tuyến có kích thước 600 x 400 pixel. Trong khung nội tuyến ta hiển thị nội dung của trang web CLB.html.
Đoạn mã để thực hiện việc này trong tệp iframe.html là:

Khi đó trình duyệt sẽ hiển thị trang web iframe.html như Hình 11.4.

Lưu ý: Các phần tử iframe thường dùng kết hợp với thẻ <a> để tạo liên kết và hiển thị nội dung bằng cách thêm thuộc tính target cho thẻ <a> để chỉ định nơi mở tài liệu được liên kết.