Bài tập CSS HTMT có lời giải

Tài liệu này sẽ mang tới cho người đọc những kinh nghiệm, kỹ năng để làm các bài tập scss và html đơn giản nhất. Giúp người mới học về Css và HTML có thể tự học và tự xây dựng nên những ứng dụng cho riêng mình dựa vào những ví dụ sẵn có.

Bài tập CSS va ̀ HTML Bài 1: Tạo trang Web có nội dung có nội dung sử dụng các tag cơ bản, có tô màu cho đoạn văn bản

Yêu cầu thiết kế: - Tiêu đề cửa sổ sử dụng tag cơ bản

- Tựa đề “Mẹ!” : chữ đậm có màu hồng đậm và nền màu hồng nhạt #FF3399 và #FECFFD

- 3 đoạn thơ: In nghiêng, có 3 màu chữ khác nhau

- Mỗi đoạn cách nhau bởi một dòng kẻ ngang

- Toàn bộ bài thơ có màu nền là vàng nhạt #FFFFCC

margin-bottom: 10px;

}

#page3{

color:green ; text-align: center;

<hr style="width: 300px">

<div id="page2">

Làm sao báo hiếu hỡi người ơi?</br>

Nếu chưa báo hiếu đừng bất hiếu</br>

Bất hiếu làm ta khổ muôn đời.</br>

</div>

<hr style="width: 300px">

<div id="page3">

Một đời vốn liếng mẹ trao</br>

Mẹ cho tất cả mẹ nào giữ riêng</br>

Mẹ hiền như một bà tiên</br>

Mẹ theo con suốt hành trình con đi</br>

Bài 2: Tạo trang Web có nội dung được định dạng theo hình thức:

Yêu cầu thiết kế: - Tiêu đề cửa sổ: Định dạng văn bản

- Dạng công thúc hóa học và biểu thức phương trình bậc 2 có màu đỏ (#FF0000)

- Đoạn code vòng lặp for: chữ màu xanh dương đậm, nền màu xám, có định dạng căn lề (#0000CC, #CCCCCC)

text-align: left;

margin-left: 100px;

} ce{

Bài 3 Tạo trang web có nội dung là danh sách các món ăn ngon của Hà Nội

Yêu cầu thiết kế:

}

table,th,td{

border:1px solid gray;

border-collapse: collapse; }

}

tr:nth-child(even){

background-color: #FFFFFF; }

</style>

</head>

</form>

</body>

</html>

Bài 4: Tạo Web có nội dung là chương trình học của ngành lập trình

Yêu cầu thiết kế:

- Font chữ là Tahoma và có kích thước là 12px

- Biểu bảng: gồm 11 dòng và 4 cột

- Dòng tiêu đề: nền mầu đỏ đậm, chữ mà trắng (#CC0033;#FFFFFF)

<form style="border: 1px solid red; width: 600px; margin-left: 80px " >

<tr >

<h1 align="center" style="color: red; font: Tahoma">Chương trình học - ngành lập trình</h1>

</tr>

<table width="550" border="1px" bordercolor="red" align="center"

style="color: black; font: Tahoma; font-weight: 12px; border-collapse: collapse;">

<tr align="center" bgcolor="#CC0033" style="color: #FFFFFF; font:

Tahoma; font-weight: 12px; border-collapse: collapse;">

<tr><td>Tạo bài trình diễn với MS PowerPoint</td><td

Bài 5 Tạo trang web đăng nhập

Yêu câu:

- Tạo form Đăng nhập: Chữ đậm màu đỏ (#FF000)

- Tạo table trong form, có chữ màu đen nền màu xanh lơ (

<h2 align="center" style="color: red">Đăng nhập</h2>

<table border="1" bgcolor="#00FFFF" align="center" style="

document.getElementById("demo").innerHTML = document.getElementById("ma").value;

Bài 6: tạo web cho phép người dùng điền thông tin vào phiếu đăng ký tham gia chương trình khuyến mãi

Yêu câu: - Tạo Table trong form

- Tạo các điều khiển kiểu Text Fields, radio, drop-down box và nút button

- Nghề nghiệp: Giáo viên, bác sỹ, kỹ sư, khác

- Tạo điều khiển nhãn dùng để in ra thông báo “bạn đã đăng ký thành công!!!” khi nhấn nút đồng ý Chữ màu hồng thẫm (#FF1493)

- Màu nền xanh nước biển, chữ màu lục vàng (# 7FFFD4,

<table border="1" width="500" bgcolor="#7FFFD4" align="center"

width="400" style="border-collapse: collapse;">

<tr>

<td style="color: #9ACD32"> Họ và tên</td>

<td><input type="text" name=""></td>

<td style="color: #9ACD32">Điện thoại</td>

<td><input type="text" name=""></td>

<td>

<select size="4">

<option value="1"

style="background: blue; color:white"> Kem đánh răng</option>

<option value="2">Bột giặt</option>

<option value="3"

style="background: blue; color:white">Dầu gội đầu</option>

<option value="3">Sữa tắm</option>

- Tạo các điều khiển text fields, checkbox, radio, Drop-down box, optionGroup, textarea và nút button

- Điều khiển chọn tour có danh sách:

+ Miền Bắc: Hà Nội – Hạ Long – Sapa; Hà Nội – Chùa Hương – Ninh Bình; Hà Nội – Cát Bà – Tuần Châu

+ Miền Trung: Huế - Bạch Mã – Đà Nẵng; Nha Trang – Đà Lạt; Buôn mê thuật – Giai lai – Kontum

+ Miền Nam: TP.HCM – Cần Thơ – Cà Mau; TP.HCM – Mỹ Tho

- Tạo điều khiển nhãn dùng để in thông báo ”Bạn đã đăng ký thành công!!” Khi bạn nhấn vào nút đồng ý Chữ màu hồng thẫm (#FF1493)

- Màu nền là vàng nhạt, chữ màu xanh #FFFFCC; #0000FF

<fieldset style="border :1px solid black; width: 400px">

<h2 align="center" style="color: blue">Đăng ký du lịch</h2>

<table border="1" width="450" bgcolor="#FFFFCC" align="center"

style="border-collapse: collapse; border-color: #01DF01">

</tr>

<tr>

<td style="color: #0000FF">Địa chỉ</td>

<td>

<input type="text" name=""

placeholder="227 Nguyễn Văn Cừ">

<input type="Radio" name="" value="1"> Máy bay

<input type="Radio" name="" value="2">

<legend><a style=" color:

orange">Số lượng đoàn khách</a></legend>

<a style=" color: #0000FF;">Người lớn</a>

<input type="text" name="">

Bài 8 Tạo trang web cho phép người dùng điền thông tin vào phiếu Đăng ký thành viên

Yêu câu: - Tạo Table trong form

- Tạo các điều khiển kiểu Text Fields, radio, drop-down box và nút button

- Ngày sinh từ năm 2015- 2010

</style>

</head>

<body>

<form style="border: 1px solid black;width: 420px; margin-left: 480px" >

<table border="1" align="center" style="width: 420px">

<tr>

<td colspan="2"><b><center>ĐĂNG KÝ</center></b></td>

<option >Ngày 22</option> <option >Ngày 23</option> <option >Ngày 24</option> <option >Ngày 25</option> <option >Ngày 26</option> <option >Ngày 27</option> <option >Ngày 28</option> <option >Ngày 29</option> <option >Ngày 30</option> <option >Ngày 31</option>

</select>

<select name="Tháng">

<option >Tháng 1</option> <option >Tháng 2</option> <option >Tháng 3</option> <option >Tháng 4</option> <option >Tháng 5</option> <option >Tháng 6</option> <option >Tháng 7</option> <option >Tháng 8</option> <option >Tháng 9</option> <option >Tháng 10</option> <option >Tháng 11</option> <option >Tháng 12</option>

</select>

<select name="Năm">

<option >Năm 2015</option>

<option >Năm 2014</option>

<option >Năm 2013</option>

<option >Năm 2012</option>

<option >Năm 2011</option>

<option >Năm 2010</option>

</select>

</td>

</tr>