CHÈN TỆP VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

Thẻ <img>; <video>; <audio> dùng để chèn các tệp đa phương tiện vào trang web.

Chèn Hình ảnh vào trang web.

Thẻ <img>.

• Sử dụng thẻ <img> với thuộc tính src để chỉ định đường dẫn đến file ảnh.
• Cú pháp:

<img src=”Đường dẫn tới tệp”>

​

​

Ví dụ minh hoạ.

<img src=”conga.png”>

<img src="img_girl.jpg" width="500" height="600">

Chèn âm thanh vào trang web.

Thẻ <audio>.

Sử dụng thẻ <audio> với thuộc tính src và các thuộc tính điều khiển control, autoplay.

Cú pháp:

<audio control>

<source src=”Đường dẫn tới tệp” type=”audio/mpeg>

</audio>

​

​

Ví dụ minh hoạ.

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

</audio>

Chèn Video vào trang web.

Thẻ <video>.

• Sử dụng thẻ <video> với thuộc tính src và các thuộc tính điều khiển như controls, autoplay, loop.

​

Ví dụ minh hoạ.

<video controls>

<source src="movie.mp4" type="audio/mp4">

</videp>

Tạo khung (Frame) trong trang web.

Thẻ <iframe>.

Sử dụng thẻ <iframe> để nhúng một trang web khác hoặc một tài nguyên web vào trang web của bạn.

Cú pháp:

<iframe src="url" title="description"> </iframe>

Ví dụ minh hoạ.

<iframe src="https://www.cungnhauhoctinhoc.org" height="200" width="300" title="Iframe Example">

</iframe>

Một số vấn đề cần lưu ý khi chèn tệp tin đa phương tiện.

• Kích thước tệp tin: Ảnh hưởng đến tốc độ tải trang web.
• Định dạng tệp tin: Trình duyệt chỉ hỗ trợ một số định dạng nhất định.
• Bản quyền: Cần tôn trọng bản quyền khi sử dụng tệp tin của người khác.

Luyện tập

Câu 1: Thiết kế trang website giới thiệu về CLB Thể thao của trường.

An được giao nhiệm vụ thiết kế trang web giới thiệu về CLB Thể thao của trường. An muốn trang web hiển thị thông tin về lịch hoạt động và hình ảnh hoạt động của CLB. An đã tạo một tệp HTML để hiển thị lịch hoạt động và một tệp HTML khác để hiển thị hình ảnh. Để người dùng có thể xem được cả hai nội dung này, An cần tạo liên kết giữa hai tệp HTML. An tham khảo sách giáo khoa Tin học 12 và tìm hiểu về cách tạo liên kết trong HTML.

Hãy phân tích và cho biết các nhận xét sau đây là ĐÚNG hay Sai?

Luyện tập

Câu 1: Các nhận xét.

a) An có thể dùng thẻ để tạo liên kết đến tệp HTML hiển thị hình ảnh hoạt động.

b) An cần phải đặt cả hai tệp HTML vào cùng một thư mục trên máy chủ web thì mới tạo được liên kết.

c) An có thể sử dụng thuộc tính **href** của thẻ để chỉ định đường dẫn tương đối đến tệp HTML chứa hình ảnh.

d) Nếu An muốn liên kết đến một website khác trên Internet, An cần phải sử dụng đường dẫn tuyệt đối trong thuộc tính href.

Luyện tập

Câu 2: Thiết kế website giới thiệu về du lịch Việt Nam.

Minh đang xây dựng một website giới thiệu về du lịch Việt Nam. Minh muốn chèn một video giới thiệu về danh lam thắng cảnh của đất nước vào trang web. Sau khi tìm hiểu, Minh biết có thể sử dụng thẻ <iframe> để nhúng video từ YouTube vào trang web.

Hãy phân tích và cho biết các nhận xét sau đây là ĐÚNG hay Sai?

Luyện tập

Câu 2: Các nhận xét.

a) Minh có thể sử dụng thẻ <video> để nhúng video từ YouTube.

b) Thẻ <iframe> cho phép nhúng nội dung từ trang web khác vào trang web hiện tại.

c) Minh cần phải tải video từ YouTube về máy tính rồi mới chèn vào trang web.

d) Minh có thể điều chỉnh kích thước khung hiển thị video bằng cách thay đổi giá trị của các thuộc tính width và height của thẻ <iframe>.

XIN CẢM ƠN!

Bạn sẽ giới thiệu cuốn sách này chứ?�Viết đánh giá của bạn tại đây.

TẠO BIỂU MẪU

Một biểu mẫu được sử dụng để thu thập thông tin đầu vào của người dùng. Đầu vào của người dùng thường được gửi đến máy chủ để xử lý.

Hình ảnh biểu mẫu.

Giới thiệu về biểu mẫu (form).

Nó dùng để làm gì?

-Biểu mẫu được dùng để thu thập thông tin từ người dùng.

Nó gồm các thành phần nào?

• Ô nhập liệu văn bản: Cho phép người dùng nhập văn bản, ví dụ như tên, địa chỉ email, v.v.
• Ô nhập liệu mật khẩu: Cho phép người dùng nhập mật khẩu một cách bảo mật.
• Nút radio: Cho phép người dùng chọn một trong nhiều lựa chọn.
• Ô chọn: Cho phép người dùng chọn một hoặc nhiều lựa chọn từ danh sách.
• Nút: Cho phép người dùng thực hiện một hành động, ví dụ như gửi biểu mẫu.

Tạo biểu mẫu trong HTML.

Để tạo biểu mẫu trong HTML, bạn có thể sử dụng thẻ <form>. Bên trong thẻ <form>, bạn có thể sử dụng các thẻ khác để tạo các thành phần của biểu mẫu.

​

Sử dụng thẻ <input> để tạo các trường nhập liệu.

Nó được sử dụng để làm gì?

-Thẻ <input> được dùng để tạo các trường nhập liệu trong biểu mẫu

Các thuộc tính quan trọng của thẻ <input>:

○type: Xác định loại trường nhập liệu, ví dụ như:

• text: Ô nhập liệu văn bản.
• password: Ô nhập liệu mật khẩu.
• radio: Nút radio cho phép chọn một trong nhiều lựa chọn.
• submit: Nút gửi biểu mẫu.

○name: Xác định tên của trường nhập liệu, được dùng để xác định dữ liệu gửi đi từ biểu mẫu.

○value: Xác định giá trị mặc định của trường nhập liệu.

Luyện tập

Câu 1: Thiết kế trang website bán hàng trực tuyến.

Một trang web bán hàng trực tuyến muốn tạo biểu mẫu thanh toán cho khách hàng. Biểu mẫu yêu cầu khách hàng nhập thông tin thẻ tín dụng bao gồm: số thẻ, tên chủ thẻ, ngày hết hạn và mã bảo mật (CVV).

Hãy phân tích và cho biết các nhận xét sau đây là ĐÚNG hay Sai?

Luyện tập

Câu 1: Các nhận xét.

a) Thuộc tính method của thẻ <form> nên được đặt là "GET" để đảm bảo an toàn thông tin thẻ tín dụng.

b) Nên sử dụng trường nhập liệu type="password" cho trường nhập liệu "Số thẻ" để ẩn thông tin nhạy cảm.

c) Nên sử dụng trường nhập liệu type="date" cho trường nhập liệu "Ngày hết hạn".

d) Nên sử dụng trường nhập liệu type="number" cho trường nhập liệu "Mã bảo mật (CVV)".

Xin cảm ơn!

Để biết thêm thông tin chi tiết về cách tạo biểu mẫu trong HTML, bạn có thể tham khảo các nguồn tài liệu trực tuyến hoặc sách giáo khoa về lập trình web.

KHÁI NIỆM VAI TRÒ CỦA CSS

Bây giờ, hãy cùng nhau "trang điểm" cho trang web thêm phần sinh động và chuyên nghiệp nhé!

KHỞI ĐỘNG

An vừa mới học về thiết kế website và muốn tự thiết kế một trang web cá nhân. An đã viết xong mã HTML cho trang web, nhưng trang web hiện lên rất đơn giản, chỉ là chữ đen trắng và chưa có bố cục rõ ràng.

Câu hỏi thảo luận:

1.An nên làm gì để trang web hiển thị đẹp mắt và chuyên nghiệp hơn?

2.CSS có thể giúp gì cho An trong trường hợp này?

3.An có thể sử dụng những thuộc tính CSS nào để định dạng phông chữ, màu sắc, kích thước, vị trí của các phần tử HTML?

4.Em hãy thử đưa ra một ví dụ đơn giản để An hình dung cách CSS hoạt động.

-GIA SƯ CHO BẠN AN

1.Để trang web hiển thị đẹp mắt và chuyên nghiệp hơn, An có thể:

• Sử dụng CSS để tạo bố cục cho trang web, sắp xếp các thành phần nội dung một cách hợp lý và dễ nhìn.
• Chọn lựa phông chữ, màu sắc, và hình ảnh phù hợp với chủ đề và phong cách của trang web.
• Thêm các hiệu ứng động, chuyển cảnh mượt mà để tăng tính tương tác cho trang web.
• Đảm bảo trang web hiển thị tốt trên các thiết bị khác nhau (responsive design).

-GIA SƯ CHO BẠN AN

3.An có thể sử dụng các thuộc tính CSS sau để định dạng:

• Phông chữ: font-family, font-size, font-weight, font-style, color.
• Màu sắc: color (cho chữ), background-color (cho nền).
• Kích thước: width, height, padding, margin.
• Vị trí: position, top, right, bottom, left, float, display.

KHỞI ĐỘNG

An muốn tạo một trang web giới thiệu bản thân với các thông tin cá nhân được trình bày rõ ràng và đẹp mắt. An muốn sử dụng CSS để định dạng cho trang web.

Các nhận xét sau đây là đúng hay sai:

a) CSS là ngôn ngữ được sử dụng để khai báo kiểu hiển thị của trang web.

b) Khai báo kiểu định dạng CSS có thể được đặt trực tiếp trong thẻ HTML.

c) An chỉ có thể sử dụng CSS để định dạng cho văn bản.

d) An có thể sử dụng nhiều tệp CSS cho một trang web.

TÓM TẮT

• CSS (Cascading Style Sheets): Là ngôn ngữ được sử dụng để mô tả cách các phần tử HTML được hiển thị trên trang web. CSS cho phép tách biệt nội dung (HTML) và cách trình bày (CSS), giúp việc bảo trì và phát triển trang web trở nên dễ dàng hơn.
• Cascading: Thể hiện tính kế thừa trong CSS, tức là các thuộc tính CSS có thể được áp dụng cho nhiều phần tử HTML cùng một lúc và các thuộc tính được định nghĩa sau sẽ ghi đè lên các thuộc tính được định nghĩa trước.

Ưu điểm của CSS:

• Kiểm soát bố cục trang web: CSS cung cấp nhiều cách để định dạng bố cục cho trang web, bao gồm vị trí, kích thước, màu sắc, phông chữ, đường viền, ... của các phần tử HTML.
• Dễ dàng bảo trì: Thay vì phải sửa từng phần tử HTML một, bạn chỉ cần thay đổi CSS một lần để cập nhật định dạng cho toàn bộ trang web.
• Tăng tốc độ tải trang: Việc tách biệt nội dung và cách trình bày giúp giảm dung lượng mã HTML, từ đó trang web sẽ tải nhanh hơn.
• Tăng tính nhất quán: CSS giúp bạn tạo ra một giao diện thống nhất cho toàn bộ trang web, giúp trang web chuyên nghiệp hơn.

​

Cách sử dụng CSS

Cách thức hoạt động:

Trình duyệt web sẽ đọc mã HTML và CSS, sau đó kết hợp chúng để hiển thị trang web.

HTML: <p>Đây là trang web của tôi.</p>

CSS: p { color: blue; text-align: center; }

KẾT QUẢ: đoạn văn bản "Đây là trang web của tôi." sẽ được hiển thị với màu xanh và nằm ở giữa trang.

Cách sử dụng CSS

• CSS nội tuyến (inline): Được áp dụng trực tiếp cho một phần tử HTML cụ thể bằng thuộc tính style.
• CSS nhúng (internal): Được định nghĩa trong phần <head> của trang HTML bằng thẻ <style>.
• CSS ngoài (external): Được lưu trữ trong một tệp CSS riêng biệt và được liên kết với trang HTML bằng thẻ <link>

Luyện tập

Câu 1: Lịch sử phát triển HTML

Một trang web giới thiệu về lịch sử phát triển HTML có sử dụng mã nguồn như hình dưới:

<html>

<head>

<title> LỊCH SỬ PHÁT TRIỂN HTML</title>

<style>

h1 {color: red; }

p {text-indent: 15px;}

</style>

</head>

<body>

<h1>Đây là dòng tiêu đề</h1>

<p> Lịch sử phát triển HTML</p>

<p> Ý tưởng của CSS do Hakon Wium Lie đưa ra năm 1994 trong khi làm việc với Tim Berners-Lee tại viện hạt nhân CERN</p>

</body>

</html>

Các nhận xét:

a) Đoạn mã trên sử dụng CSS dạng nhúng để định dạng cho trang web.

b) Thẻ <h1> sẽ hiển thị chữ màu đỏ, lùi vào đầu dòng 15px.

c) Thẻ <p> sẽ hiển thị chữ màu đen, lùi vào đầu dòng 15px.

d) CSS dạng nhúng có thể được áp dụng cho nhiều trang web khác nhau.

​

XIN CẢM ƠN!

Vai trò của CSS: Giúp trang web hiển thị đẹp mắt, chuyên nghiệp và dễ sử dụng hơn.

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

CSS là một công cụ mạnh mẽ để định dạng trang web. Bằng cách sử dụng CSS, bạn có thể tạo ra các trang web đẹp, chuyên nghiệp và có thể truy cập được bởi nhiều người dùng.

Một số mẫu CSS để định dạng văn bản trang Web.

/* Định dạng phông chữ cho thẻ h1 */

h1 {

font-family: Times New Roman, Tahoma, serif; /* Chọn họ phông chữ */

font-size: 24px; /* Kích thước phông chữ */

font-style: italic; /* Kiểu chữ nghiêng */

color: red; /* Màu chữ */

text-align: center; /* Căn giữa văn bản */ }

Một số mẫu CSS để định dạng văn bản trang Web.

/* Định dạng cho thẻ p */

p {

line-height: 1.5; /* Khoảng cách dòng */

text-indent: 2em; /* Thụt đầu dòng */

text-align: justify; /* Căn đều hai bên */

text-decoration: underline; /* Gạch chân */

}

Ví dụ về khai báo CSS:

​

<style>

p { color: red;

}

h1, h2 { color: blue;

}

</style>

XIN CẢM ƠN!

Bạn có thể tham khảo các tài liệu CSS trực tuyến để tìm hiểu thêm về các thuộc tính CSS

TẠO MÀU CHO CHỮ VÀ NỀN

Để tạo màu cho chữ và nền trong CSS, bạn có thể sử dụng các thuộc tính color cho màu chữ và background-color cho màu nền.

Tóm tắt

Để tạo màu cho chữ và nền trong CSS, bạn có thể sử dụng các thuộc tính color cho màu chữ và background-color cho màu nền.

●color: dùng để định dạng màu chữ, được khai báo như sau:

●Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown... hoặc mã màu.

●background-color: dùng để định dạng màu nền, áp dụng cho tất cả phần tử, được khai báo như sau:

Dưới đây là một số ví dụ minh họa:

-CSS để định dạng thẻ <p> có màu đỏ, thẻ <h1> và <h2> có màu xanh dương.

<style>

p { color: red;

}

h1, h2 { color: blue;

}

</style>

CSS để định dạng màu nền cho thẻ <body>

<style>

body {

background-color: cyan;

}

</style>

XIN CẢM ƠN!

Bạn có thể sử dụng mô hình màu RGB để xác định màu sắc bằng cách kết hợp ba màu cơ bản: đỏ (Red), xanh lục (Green) và xanh lam (Blue)