d. Để tạo hiệu ứng khi di chuột vào, thì biên màu đỏ và độ dày gấp đôi, sử dụng đoạn mã lệnh CSS như sau:

div:hover {

border: 2px solid #FF0000;

}

c. Để định dạng biên của khối, màu nền đỏ và màu chữ trắng của văn bản trong khối, cần bổ sung thêm mã lệnh CSS sau đây.

div {

border-radius: 8px;

border: 1px solid #999999;

text-align: center;

}

p {

background-color: #FF0000;

color: #FFFFFF;

}

b. Đoạn lệnh HTML sau đây sẽ hiển thị thông tin của một khối đầu tiên theo đúng định dạng yêu cầu.

<div>

<img src="camnguocchieu.jpg" alt="Cấm đi ngược chiều",

<p>Cấm đi ngược chiều</p>

</div>

a. Sử dụng thẻ <div> để xác định các khối thông tin.

d. Để bo tròn hình ảnh mà không cần sử dụng các phần mềm chỉnh sửa ảnh, sử dụng mã lệnh CSS sau:

img {image-border: ellipse;}

c. Để định dạng các liên kết không có gạch chân và khi di chuột vào mới xuất hiện gạch chân thì sử dụng mã lệnh CSS sau:

a:link {text-decoration: none;}

a:hover {text-decoration: underline;}

b. Đoạn mã lệnh HTML sau đây sẽ hiển thị danh sách các câu lạc bộ theo yêu cầu.

<ul>

<a href="bongda.html"><li>Bóng đá</li></a>

<a href="bongchuyen.html"><li>Bóng chuyền</li></a>

<a href="bongro.html"><li>Bóng rổ</li></a>

</ul>

a. Sử dụng thẻ danh sách <ul> để liệt kê các câu lạc bộ.

d. Để định dạng màu sắc, độ rộng biên của bảng, sử dụng mã lệnh CSS như sau:

td, th {border: 1px solid #ddd;}

c. Để định dạng màu sắc các dòng của bảng, sử dụng mã lệnh CSS như sau:

tr {background-color: #F2F2F2;}

th {

text-align: center;

background-color: #04AA6D;

color: #FFFFFF;

}

b. Mã lệnh sau đây sẽ cho phép tạo ra bảng có số dòng, số cột như yêu cầu:

<table>

<tr><th>{Ô 1}</th><th>{Ô 2}</th><th>{Ô 3}</th></tr>

<tr><td>{Ô 4}</td><td>{Ô 5}</td><td>{Ô 6}</td></tr>

<tr><td>{Ô 7}</td><td>{Ô 8}</td><td>{Ô 9}</td></tr>

<tr><td>{Ô 10}</td><td>{Ô 11}</td><td>{Ô 12}</td></tr>

<tr><td>{Ô 13}</td><td>{Ô 14}</td><td>{Ô 15}</td></tr>

</table>

a. Để định nghĩa font chữ cho toàn bộ trang web, có thể định nghĩa giá trị cho thuộc tính lệnh CSS như sau:

body {font: Arial;}

d. Để tạo hai nút "Đăng ký" và "Thoát", sử dụng đoạn mã lệnh HTML sau trong dòng 5:

<td colspan="2" style="text-align:center">

<input type="submit" value="Đăng ký".

<input type="submit" value="Thoát">

</td>

c. Để lựa chọn thành phần giới tính, sử dụng đoạn mã lệnh HTML sau trong dòng 3:

<tr>

<td> Giới tính</td>

<td>

<input type="radio" name="Nam" checked> Nam

<input type="radio" name="Nu"> Nữ

<input type="radio" name="Khac"> Khác

</td>

</tr>

b. Để xây dựng cấu trúc biểu mẫu trên, có thể sử dụng mã lệnh HTML để tạo ra một bảng có cấu trúc như sau:

a. Sử dụng thẻ input với giá trị thuộc tính type="radio" cho việc lựa chọn giới tính và type="checkbox" cho việc lựa chọn câu lạc bộ.

d. Đoạn mã lệnh HTML sau đây sẽ cho phép tạo ra một bảng có cấu trúc như câu b.

<table>

<tr> <td>{ô 1}</td> </tr>

<tr> <td>{ô 2}</td> <td>{ô 3}</td><td>{ô 4}</td> </tr>

<tr> <td>{ô 5}</td> <td>{ô 6}</td> </tr>

<table>

c. Để hiển thị nội dung trên, có thể sử dụng mã lệnh HTML để tạo ra hai bảng lồng nhau có cấu trúc như sau:

b. Để hiển thị nội dung trên, sử dụng mã lệnh HTML để tạo ra một bảng bao gồm 6 ô có cấu trúc như sau:

a. Sử dụng thẻ <icon> để chèn các biểu tượng vào website.

d. Danh sách thực đơn NƯỚC ÉP được đặt trong ô 3, sử dụng đoạn mã lệnh HTML như sau:

<td> <b>NƯỚC ÉP</b>

<ol type="circle">

<li> Chanh leo: 50K

<li> Nước dứa: 50K

<li> Nước cam: 49K

</ol>

</td>

c. Danh sách đồ uống CAFÉ được đặt trong ô 2, sử dụng đoạn mã lệnh HTML như sau:

<td> <b>CAFÉ</b>

<ul type="square">

<li>Capuchino: 50K

<li>Socola: 40K

<li>Matcha: 50K

</ul>

</td>

b. Hình ảnh từ file cafe.jpg được đặt trong ô 1, sử dụng đoạn mã lệnh HTML như sau:

<td width="300px"> <img src="cafe.jpg"> </td>

a. Để hiển thị nội dung thực đơn trên, cần sử dụng một bảng không có biên bao gồm 4 ô có cấu trúc như sau:

<table>

<tr><td>{Nội dung ô 1}</td><td>{Nội dung ô 2}</td></tr>

<tr><td>{Nội dung ô 3}</td><td>{Nội_dung ô 4}</td></tr>

</table>

d. Để hiển thị nội dung như dòng cuối cùng, sử dụng mã lệnh HTML như sau:

<center><a href="chitiet.html">Xem cấu hình chi tiết </a></center>

c. Để tạo bảng có các ô có màu nền như thiết kế, sử dụng mã lệnh HTML như sau:

</table>

<tr style="background-color:#999999"> <td></td> <td></td> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> <td></td> <td></td> </tr>\/alb

</table>

b. Đoạn mã lệnh HTML sau cho phép tạo bảng có 2 dòng và 4 cột

<table>

<tr><td></td> <td></td> <td></td> <td></td> </tr>

<tr><td></td> <td></td> <td></td> <td></td> </tr>

</table>

a. Sử dụng thẻ <th> để hiển thị nội dung phần tiêu đề bảng như dòng 1

     d. Để hiển thị nội dung trên, cần một bảng bao gồm các ô có cấu trúc như sau:

<table>

<tr>

<td rowspan="4"> {Nội dung ô 1} </td><td>{Nội dung ô 2}</td> </tr>

<tr><td> {Nội dung ô 3} </td></tr>

<tr><td> {Nội dung ô 4} </td></tr>

<tr><td> {Nội dung ô 5} </td></tr>

</table>

     c. Nội dung văn bản sẽ được đặt trong ô 2 với đoạn mã lệnh sau:

<td>

<a href="https://code4fun.vn/detail.html">TUYỂN THÀNH VIÊN CLB CODE4FUN </a>

<i>Phòng 589, Nhà K1</i>

Số lượng: <p style="color:grey; font-weight:bold">2 người</p>

Thời gian: <p style="color:grey; font-weight: bold"> 14^h, 26/3/2024 </p>

Website: <a href="https://code4fun.vn"> https://code4fun.vn </a></td>

     b. Hình ảnh sẽ được đặt trong ô 1 với đoạn mã lệnh sau:

<td><img src="vanphong.jpg"></td>