HTML và CSS là hai ngôn ngữ cơ bản và quan trọng trong việc xây dựng trang web. Đối với những người mới học, việc thực hành và làm các bài tập là một cách tuyệt vời để nắm vững kiến thức và kỹ năng của mình. Trong bài viết này, chúng ta sẽ tổng hợp một số bài tập html và CSS dành cho người mới bắt đầu, kèm theo lời giải cho mỗi bài tập.
1. Tổng quan về HTML
1.1. Định nghĩa HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn để tạo nên trang web. HTML sử dụng các thẻ để đánh dấu nội dung, và các trình duyệt web hiển thị nội dung dựa trên các thẻ này.
1.2. Cấu trúc cơ bản của một trang HTML5
Một trang HTML5 cơ bản thường bao gồm các phần sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> </head> <body> <!-- Nội dung trang web --> <h1>Đây là tiêu đề</h1> <p>Đây là đoạn văn bản.</p> </body> </html>-
<!DOCTYPE html>: Định nghĩa phiên bản HTML. -
<html>: Thẻ mở đầu cho một tài liệu HTML. -
<head>: Chứa thông tin về tài liệu như tiêu đề, meta, và các liên kết tới các tập tin CSS, JavaScript. -
<meta charset="UTF-8">: Đặt bộ mã hóa ký tự UTF-8 cho tài liệu. -
<title>: Tiêu đề của trang web. -
<body>: Nội dung chính của trang web.
1.3. Các thẻ và thuộc tính cơ bản
- Thẻ tiêu đề:
<h1>Đây là tiêu đề lớn nhất</h1> <h2>Đây là tiêu đề lớn hơn</h2>- Đoạn văn bản:
<p>Đây là đoạn văn bản.</p>- Liên kết:
<a href="https://www.example.com">Đây là liên kết</a>- Hình ảnh:
<img src="duong-dan-den-anh.jpg" alt="Mô tả ảnh">- Biểu mẫu:
<form action="/submit" method="post"> <label for="name">Tên:</label> <input type="text" id="name" name="name"> <input type="submit" value="Gửi"> </form>2. Bài tập HTML & HTML5 cơ bản
2.1. Đề bài: Tạo một trang HTML đơn giản với đoạn tiêu đề nhấn mạnh các yếu tố mạnh mẽ và hình ảnh
Trong bài tập này, bạn sẽ tạo một trang HTML đơn giản có các thẻ tiêu đề, tiêu đề, đoạn văn, strong, list, image.
Yêu cầu: Hình ảnh được đặt ở đầu trang có tại [đường dẫn đến hình ảnh](https://dl.dropbox.com/s/u8rql8nlfsf4xkm/demo-image.png. Hình ảnh được đặt ở cuối trang được đặt tại đường dẫn đến hình ảnh, đường dẫn đến hình ảnh và đường dẫn đến hình ảnh. Tất cả các siêu liên kết đều trỏ đến http://example.com.
Lời giải:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the first HTML-CSS exercise</title> </head> <body> <img src="https://nanado.edu.vn/uploads/images/blog/admin/2024/01/10/tong-hop-bo-bai-tap-html-css-loi-giai-cho-nguoi-moi-bat-dau-1704862244.webp" alt="demo image for html-css exercise"> <h1>FIFA World Cup 2014 News</h1> <p>The biggest scoreline in the history of the <strong>FIFA World Cup</strong> qualifiers - and indeed in the history of international football - was recorded on 11 April 2001, when Australia beat American Samoa 31-0.</p> <p>This legendary match also brought global renown for <em>Archie Thompson</em>, whose 13-goal haul set a new world record, which stands to this day, for an individual player in a single international match.</p> <p>And though the defeat earned American Samoa ignominy, so inspiring has their subsequent recovery been that it is now the subject of an acclaimed documentary, <em>‘Next Goal Wins'</em>, showing across the world.</p> <h2>Destinations</h2> <ul> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=771/index.html">BELO HORIZONTE, STADIUM : Estadio Mineirao</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5002284/index.html">BRASILIA, STADIUM : Estadio Nacional</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025112/index.html">CUIABA, STADIUM : Arena Pantanal</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025132/index.html">CURITIBA, STADIUM : Arena da Baixada</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025114/index.html">FORTALEZA, STADIUM : Estadio Castelao</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5007289/index.html">MANAUS, STADIUM : Arena Amazonia</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025116/index.html">NATAL, STADIUM : Estadio das Dunas</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5002148/index.html">PORTO ALEGRE, STADIUM : Estadio Beira-Rio</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025134/index.html">RECIFE, STADIUM : Arena Pernambuco</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=214/index.html">RIO DE JANEIRO, STADIUM : Maracanã - Estádio Jornalista Mário Filho</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5002308/index.html">SALVADOR, STADIUM : Arena Fonte Nova</a></li> <li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=5025136/index.html">SAO PAULO, STADIUM : Arena de Sao Paulo</a></li> </ul> <ul> <li><a href="http://feeds.feedburner.com/W3resource"><img src="https://nanado.edu.vn/uploads/images/blog/admin/2024/01/10/tong-hop-bo-bai-tap-html-css-loi-giai-cho-nguoi-moi-bat-dau-1704862244.webp" alt="RSS Feed"></a> <a href="http://in.linkedin.com/in/w3resource"><img src="https://nanado.edu.vn/uploads/images/blog/admin/2024/01/10/tong-hop-bo-bai-tap-html-css-loi-giai-cho-nguoi-moi-bat-dau-1704862243.webp" alt="LinkedIn"></a> <a href="http://www.twitter.com/w3resource"><img src="https://nanado.edu.vn/uploads/images/blog/admin/2024/01/10/tong-hop-bo-bai-tap-html-css-loi-giai-cho-nguoi-moi-bat-dau-1704862244.webp" alt="follow w3resource on twitter"></a></li> </ul> </body> </html>2.2. Đề bài: Tạo bảng HTML phức tạp
Lời giải:
<table border="1"> <tr> <td>Quick</td> <td colspan="2">brown fox</td> <td>jumps</td> </tr> <tr> <td rowspan="3">over the</td> <td>lazy</td> <td>dog</td> <td>and</td> </tr> <tr> <td>then</td> <td>it</td> <td>fall</td> </tr> <tr> <td colspan="3">prey to a hunter</td> </tr> </table>2.3. Đề bài: Tạo Biểu mẫu HTML đơn giản bao gồm các thành phần biểu mẫu chính
Trong bài tập này bạn sẽ tạo một biểu mẫu HTML đơn giản.
Khi hoàn thành, trang sẽ có dạng như sau:
Lời giải:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>HTML CSS Form exercise</title> </head> <body> <div class="container"> <h1>Travel reservation form</h1> <h3>* denotes mandotory</h3> <form id="registration_form" method="POST"> <label>Full name*:</label><br> <input type="text" name="full_name" placeholder="FirstName LastName" autofocus="autofocus" value=""><br> <label>Email address*:</label><br> <input type="text" name="email_addr" value=""><br> <label>Select Tour Package* :</label><br> <select name="package"> <option value="Goa" >Goa</options> <option value="Kashmir" >Kashmir</options> <option value="Rajasthan" >Rajasthan</options> </select><br> <label>Arrival date*:</label><br> <input type="text" name="arv_dt" placeholder="m/d/y" value=""><br> <label>Number of persons*:</label><br> <input type="text" name="persons" value=""><s><br> <label>What would you want to avail?*</label> <br> Boarding<input type="checkbox" name="facilities[]" value="boarding" ><br> Fooding<input type="checkbox" name="facilities[]" value="fooding" ><br> Sight seeing<input type="checkbox" name="facilities[]" value="sightseeing" ><br> <label>Discount Coupon code:</label><br> <input type="text" name="dis_code" value=""><br> <label>Terms and conditions*</label><br> <input type="radio" name="tnc" value="agree" checked>I agree</input><br> <input type="radio" name="tnc" value="disagree" >I disagree<br> <button type="submit" class="btn btn-large btn-primary" name="submit">Complete reservation</button> </form> </div> </body> </html>2.4. Đề bài: Nhúng âm thanh và video vào trang HTML
Tệp cần nhúng được lấy từ: đường dẫn đến tệp âm thanh và đường dẫn đến tệp video
Lời giải:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>HTML CSS Audio/Video exercise</title> </head> <body> <video controls> <source src="big_buck_bunny.mp4" type="video/ogv"> <source src="big_buck_bunny.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video> </body> </html>2.5. Đề bài: Sử dụng code HTML để code lại nội dung dưới đây
Code giải:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học web chuẩn</title> </head> <body> <section class="furniture"> <h2>Learn more about beautiful furniture web design combinations</h2> <p class="photo"><img src="/exercises/images/img_700x400.png" alt=""></p> <h3>Today we will teach you how to find professional materials for your furniture web design.</h3> <p class="description">Cras malesuada lacus sed eros egestas iaculis. In malesuada ligula justo, eu ornare felis fermentum non. Nunc porta aliquet eros sed varius. Duis feugiat, risus eget tincidunt cursus.</p> <p class="more"><a href="./">Read More</a></p> </section> </body> </html>2.6. Đề bài: Sử dụng CSS để lập trình lại nội dung dưới đây
Lời giải:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học web chuẩn</title> </head> <body> <section class="news"> <div class="image-news"> <img src="/exercises/images/img_300x400.png" alt=""> </div> <div class="info-news"> <h2>Vestibulum ullamcorper ut leo quis</h2> <div class="inner"> <p>Aenean facilisis lectus ante, ut rutrum eros convallis et.<br> Vestibulum ullamcorper ut leo quis tristique. Donec in erat commodo, pharetra purus ac, consectetur lacus. Suspendisse odio sapien, egestas at ex sit amet, molestie sagittis est.</p> <p>In id purus imperdiet nisl accumsan scelerisque. Donec nec justo sed enim dapibus rhoncus. Morbi sed elit vitae metus ullamcorper efficitur.</p> <p>Fusce aliquam magna id ipsum ultricies interdum. Maecenas nibh risus.</p> </div> <p class="detail"><a href="./">DETAIL</a></p> </div> </section> </body> </html>3. Một số dạng bài tập CSS cơ bản
3.1. Đề bài: Sử dụng CSS để lập trình lại bản thiết kế dưới đây
Lời giải:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học web chu
