HTML thường được sử dụng để xây dựng nền tảng cấu trúc cho một trang web và là một kỹ năng cần thiết cho lập trình viên có định hướng về phát triển web. Nếu bạn muốn sử dụng HTML thành thạo và tạo được một website thì có thể thực hành các bài tập HTML từ cơ bản đến nâng cao để rèn luyện kỹ năng của bản thân.
Cùng đọc bài viết dưới đây để nhận được:
- Tổng hợp chi tiết các bài tập HTML từ cơ bản đến nâng cao
- Nâng cao khả năng thực hành và ứng dụng HTML qua các dự án thực tế
Tại sao nên học HTML?
Nắm vững HTML là một kỹ năng nền tảng cho bất kỳ ai có định hướng hoặc đam mê về lập trình và phát triển website. HTML vẫn rất hữu ích ngay cả khi bạn không có định hướng theo lập trình, khi làm việc với các nền tảng website dựng sẵn, bạn có thể sử dụng HTML để giải quyết các vấn đề cơ bản và tùy chỉnh website cho mình.
Một số lợi ích khi học HTML có thể kể đến như:
- Xây dựng cấu trúc web: HTML cung cấp bộ khung cơ bản cho mọi trang web, cho phép trình duyệt biết cách hiển thị văn bản, hình ảnh, liên kết, video,…
- Dễ sử dụng: Các thẻ và cú pháp của HTML khá đơn giản, dễ học và sử dụng với cả những người mới bắt đầu.
- Ứng dụng đa dạng: HTML thường được sử dụng cho lập trình trang web, mẫu email, bản tin,…
- Nền tảng phát triển web: Nắm vững HTML là bước đầu tiên để tìm hiểu các công nghệ phức tạp hơn như CSS và JavaScript.
Tổng hợp bài tập HTML & CSS cơ bản cho người mới bắt đầu
HTML Form (Biểu mẫu)
Về cơ bản, biểu mẫu được sử dụng để thu thập dữ liệu người dùng và gửi đến máy chủ để được xử lý, bao gồm các thông tin đầu vào như họ tên, email, tuổi,… Biểu mẫu chứa các thành phần được khai báo trong thẻ <form> và các thẻ nhập liệu như <input>, <select>, <checkbox>,….cùng một số label khác.
Bên cạnh đó, mỗi biểu mẫu có một nút gửi được định dạng với thuộc tính type=submit giúp người dùng gửi dữ liệu đã nhập đến máy chủ.
Bài tập 1: Hãy tạo một trang web với login form HTML theo mẫu sau:
Trả lời Bài tập 1:
<form action=""> <label for="username">Username:</label> <input type="text" name="username" id="username" /> <label for="password">Password:</label> <input type="password" name="password" id="password" /><br> <input type="radio" name="gender" value="male" />Male<br> <input type="radio" name="gender" value="female" />Female<br> <input type="radio" name="gender" value="other" />Other<br> <input list="Options" /> <datalist id="Options"> <option value="Thành viên Bạc"></option> <option value="Thành viên Vàng"></option> <option value="Thành viên Kim Cương"></option> </datalist> <input type="color" /> <input type="checkbox" name="correct" value="correct" />Correct <input type="submit" value="Submit" /> </form>
HTML Image (Hình ảnh)
Để chèn hình ảnh vào trình duyệt, bạn có thể sử dụng phần tử <img> cùng các thuộc tính src để căn chỉnh hình ảnh.
Bài tập 2: Thực hành bài tập HTML chèn hình ảnh như sau:
Trả lời Bài tập 2:
<!DOCTYPE html> <html lang="en"> <head> <title>Img Align Attribute</title> <style> img { background-color: black; } </style> </head> <body> <img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="itviecblog"/> </body> </html>
Với bài tập trên, có thể thấy được:
- Thuộc tính <style>: Giúp định dạng màu nền cho hình ảnh được chèn, background-color:black sẽ định dạng màu nền là màu đen.
- Thuộc tính src: Dẫn nguồn hình ảnh bạn muốn hiển thị, hình ảnh sẽ không xuất hiện nếu không có thuộc tính src.
HTML5 Audio (Âm thanh)
Trước HTML5, các tệp âm thanh được phát trong trình duyệt bằng trình cắm như Adobe Flash. Sau này chúng có thể được thêm vào trình duyệt dưới định dạng tutorial.ogg hoặc tutorial.mp3, các phần tử sẽ chỉ ra các tệp âm thanh thay thế mà trình duyệt có thể chọn.
Bài tập 3: Thực hiện chèn một đoạn âm thanh vào trang web:
Trả lời Bài tập 3:
<audio controls> <source src="tutorial.ogg" type="audio/ogg" /> <source src="tutorial.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> <audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>
Với bài tập trên, ta có thể thấy:
- <control>: Bao gồm các điều khiển âm thanh như phát, tạm dừng hoặc tăng giảm âm lượng. Nếu bạn không sử dụng thuộc tính này, sẽ không có âm thanh nào được hiển thị trên trình duyệt.
- <source>: Cho phép bạn chỉ ra các tệp âm thanh thay thế mà trình duyệt có thể chọn, trình duyệt sẽ sử dụng định dạng được định dạng đầu tiên.
- <autoplay>: Phát tự động tệp âm thanh khi vừa truy cập trang web.
- <loop>: Phát tệp âm thanh theo vòng lặp liên tục nếu được sử dụng trong đoạn mã.
HTML5 Video
Tương tự với chèn âm thanh, video cũng được đặt trực tiếp vào trang trong cập nhật mới nhất của HTML5. Để nhúng tệp video vào trang web, bạn chỉ cần thay đổi src của tệp âm thanh.
Bài tập 4: Thực hành chèn một đoạn video vào trang web theo hình như sau:
Trả lời Bài tập 4:
<video controls> <source src="tutorial.ogg" type="video/ogg" /> <source src="tutorial.mp4" type="video/mp4" /> </video> <video autoplay> <source src="video.mp4" type="video/mp4" /> </video> <video poster="poster.png"> <source src="video.mp4" type="video/mp4" /> </video> <video controls> <source src="video.mp4" type="video/mp4" /> </video>
Để thực hiện bài tập HTML chèn video vào trang web, bạn có thể tiến hành như sau:
- Sử dụng thuộc tính control: Để điều chỉnh và định dạng video, tương tự với điều chỉnh âm lượng của âm thanh. Nhận dạng video bạn có thể dùng là mp4, webM và ogg, được hỗ trợ rộng rãi trong các trình duyệt như Chrome, Firefox và Opera.
- Tự động phát (autoplay): Cho phép bạn cài đặt chức năng tự động chạy video khi vừa truy cập vào trang web, tính năng này có thể gây khó chịu cho một số người dùng nên bạn có thể cân nhắc khi sử dụng thuộc tính này. Ngoài ra, trình duyệt di động như Safari của iOS không tương thích với thuộc tính này.
- Hình ảnh (poster): Thuộc tính hiển thị hình ảnh trên video cho đến khi người dùng nhấn vào.
Table HTML
Chức năng của bảng (table) giúp bạn thể hiện dữ liệu hoặc thông tin từ đơn giản đến phức tạp theo cách hoàn chỉnh và dễ dàng theo dõi. Bảng thường được sử dụng thẻ <table> cùng các cặp thẻ thành phần như <td>, <tr>, <th>, <thead>, <tbody>, <tfoot>,… để lập trình một cấu trúc bảng hoàn chỉnh.
Bài tập 5: Thực hành tạo một bảng tính cơ bản với thành phần như sau (hình tham khảo bên dưới)
- Định dạng bảng: Tất cả đường viền trong bảng có dạng ngắt quãng và màu xanh dương.
- Tiêu đề: Tổng hợp các bài viết về HTML trên ITviec Blog.
- Cột: STT, Tên bài viết, Link.
- Hàng: 3 hàng với bài viết tự chọn.
Trả lời Bài tập 5:
<!DOCTYPE html> <html> <style> th, td { Border-style: dotted; border-radius: 10px; border-color: #96D4D4; } </style> <body> <h2>Tổng hợp các bài viết về HTML trên ITviec Blog</h2> <table style="width:100%"> <tr> <th>STT</th> <th>Bài viết</th> <th>Link</th> </tr> <tr> <td>1</td> <td>Giải đáp "tất tần tật" về HTML</td> <td>https://itviec.com/blog/html-la-gi/</td> </tr> <tr> <td>2</td> <td>Table HTML: Hướng dẫn cách tạo bảng trong HTML chi tiết từ A – Z</td> <td>https://itviec.com/blog/table-html/</td> </tr> <tr> <td>3</td> <td>Tổng hợp 70+ thẻ HTML thông dụng</td> <td>https://itviec.com/blog/cac-the-trong-html//</td> </tr> </table> </body> </html>
Theo bài tập trên, có thể thấy:
- Thuộc tính <style> được sử dụng để thiết lập màu sắc cho <td> với <th> theo giá trị là border-style:dotted (đường viền đứt quãng) và border-color: #96D4D4 (màu xanh dương).
- Với các giá trị hàng và cột, bạn sẽ sử dụng lần lượt các thẻ <td>, <tr> và <th> để định dạng thành phần chính của bảng.
Danh sách HTML
Danh sách (List) thường được sử dụng nhiều trong lập trình để liệt kê thông tin theo dạng danh sách (Bullet point) theo một cách ngắn gọn nhưng vẫn đầy đủ ý nghĩa và dễ tiếp cận với người dùng. Để sử dụng định dạng danh sách, bạn cần sử dụng đến thẻ <li> và các giá trị khác như <ul>, <ol>, <dl>, <dt>,…
Bài tập 6: Thực hành lập trình một cấu trúc web cơ bản với thành phần dạng danh sách gồm những thông tin như sau:
- ITviec Blog.
- Dạng list: Việc làm IT, Chuyên môn IT, Sự nghiệp IT.
Trả lời Bài tập 6:
<!doctype html> <html lang="vn"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>ITviec Blog</title> </head> <body> <h2>ITviec Blog</h2> <ul> <li>Việc làm IT</li> <li>Sự nghiệp IT</li> <li>Chuyên môn IT</li> </ul> </body> </html>
Kết quả hiển thị Bài tập 6:
Theo bài tập trên, có thể thấy:
- Sử dụng thẻ <ul> để định dạng danh sách không có thứ tự. Đối với các loại danh sách có thứ tự, bạn hãy sử dụng <ol>.
Đổi màu nền trang web
Để đổi màu nền cho trang web, bạn có thể sử dụng thuộc tính của CSS là “background-color” được đặt trong thẻ cần định dạng. Với giá trị của màu có thể là tên màu HTML (chẳng hạn như green, blue, red,…) hoặc giá trị thập lục phân của mã HEX (như #00FF00, #FF0000, #0000FF).
Bài tập 7: Bạn hãy định dạng màu nền (tùy chọn) cho cụm từ “ITviec Blog”.
Trả lời Bài tập 7:
<html> <head> <title>Đổi màu nền trang web</title> </head> <body> <h1 style="background-color:#FF00FF;">ITviec Blog</h1> </body> </html>
Kết quả hiển thị Bài tập 7:
Căn chỉnh văn bản
Để căn chỉnh văn bản, bạn có thể sử dụng thuộc tính của CSS là text-align để dễ dàng điều chỉnh văn bản sang trái, phải, giữa hoặc căn đều. Trước đây, bạn có thể sử dụng thẻ <div align=”left”> của HTML để căn chỉnh văn bản nhưng hiện nay thẻ này không còn được hỗ trợ ở phiên bản mới nhất của HTML là HTML5.
Bài tập 8: Thực hiện căn chỉnh các câu sau theo thứ tự lần lượt: căn giữa, căn phải, căn trái và căn bằng hai lề.
- Tổng hợp từ A-Z các bài tập HTML cơ bản đến nâng cao.
- Một số khóa học HTML online uy tín và chất lượng cho developers.
- Các dạng bài tập HTML cơ bản dành cho người mới bắt đầu.
- Dự án bài tập HTML nâng cao.
Trả lời Bài tập 8:
<html> <head> <title>ITviec Blog</title> </head> <body> <p style="text-align:center;">Tổng hợp từ A-Z các bài tập HTML cơ bản đến nâng cao</p> <p style="text-align:right;">Một số khóa học HTML online uy tín và chất lượng cho developers</p> <p style="text-align:left;">Các dạng bài tập HTML cơ bản dành cho người mới bắt đầu</p> <p style="text-align:justify;">Dự án bài tập HTML nâng cao </p> </body> </html>
Kết quả hiển thị Bài tập 8:
Font chữ
Với font chữ, bạn có thể tùy chỉnh một số yếu tố cơ bản như kiểu chữ, màu sắc, màu nền, kích thước,… bằng các thuộc tính font-family, font-style, font-size, font-weight. Bạn có thể thực hiện tùy chỉnh font chữ qua bài tập bên dưới.
Bài tập 9: Thực hiện chỉnh sửa màu chữ (hình minh họa) bằng cách sử dụng HTML.
- ITviec Blog (heading 1)
- Trang thông tin phát triển sự nghiệp IT của bạn (font Monospace)
- Cách đổi màu chữ bằng cách sử dụng HTML (kích thước 30px)
- ITviec Blog (đoạn văn, chỉnh hai màu chữ khác nhau)
Trả lời Bài tập 9:
<html> <body> <h1 style="color:Tomato;">ITviec blog</h1> <p style="font-family:Monospace;">Trang thông tin phát triển sự nghiệp IT của bạn</p> <p style="font-size:30px;">Cách đổi màu chữ bằng cách sử dụng HTML</p> <p style=”color:#00FF00">ITviec blog</p> <p style=”color:"rgb(189,255,100)">ITviec Blog</p> </body> </html>
Kết quả hiển thị Bài tập 9:
Theo bài tập trên, có thể thấy:
- Đổi màu chữ: Bạn sử dụng thuộc tính color=“” để tùy chỉnh màu chữ mình mong muốn. Có thể sử dụng bảng màu HTML như HEX, RGB, HSL hoặc tên màu HTML.
- Kích thước: Thuộc tính font-size sẽ giúp bạn tùy chỉnh kích thước như mong muốn.
- Kiểu chữ: Thuộc tính font-family giúp thay đổi font chữ trong HTML, bạn chỉ cần chèn tên font bạn muốn đổi ngay sau thuộc tính.
Các bài tập lập trình web bằng HTML và CSS nâng cao
Để có thể nâng cao kỹ năng của bản thân, bạn có thể tiến hành tạo một dự án website đơn giản để thực hành các kỹ thuật về HTML cũng như CSS. Đồng thời, bạn cũng dễ dàng kiểm tra cách HTML và CSS phối hợp với nhau để tạo nên một ứng dụng giao diện người dùng đẹp mắt, ấn tượng. Một số dự án cơ bản bạn có thể tham khảo qua như sau:
Trang web với form khảo sát
Biểu mẫu luôn là một phần thiết yếu của các dự án và bạn sẽ làm việc rất nhiều với biểu mẫu trong lập trình web. Biểu mẫu sẽ giúp bạn dễ dàng làm quen với các trường nhập liệu như văn bản, hộp kiểm, nút radio, ngày tháng hay các thành phần khác trong HTML cơ bản. Đồng thời, bạn sẽ biết cách tạo cấu trúc trang web phù hợp bằng cách sử dụng thêm CSS để giúp dự án thêm phần ấn tượng.
Bài tập 10: Thực hành tạo một trang web cơ bản với form khảo sát về ITviec Blog theo mẫu sau:
Trả lời Bài tập 10:
Đối với bài tập này, bạn sẽ cần sử dụng các khái niệm cơ bản về HTML và CSS như font chữ, trường văn bản, hộp kiểm, nút radio,… để thiết lập các thành phần cho trang web.
Đầu tiên, mở file HTML bằng các trình soạn thảo quen thuộc (VSCode, Sublime Text,…) và dựng khung sườn của trang web. Bên cạnh đó định dạng các thành phần của trang web bằng thuộc tính của CSS, cụ thể như sau:
<!DOCTYPE html> <html lang="vn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Thiết lập biểu mẫu bằng HTML & CSS</title> <style> body { background-color: #05c46b; font-family: Verdana; text-align: center; } form { background-color: #fff; max-width: 500px; margin: 50px auto; padding: 30px 20px; box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5); } .form-control { text-align: left; margin-bottom: 25px; } .form-control label { display: block; margin-bottom: 10px; } .form-control input, .form-control select, .form-control textarea { border: 1px solid #777; border-radius: 2px; font-family: inherit; padding: 10px; display: block; width: 95%; } .form-control input[type="radio"], .form-control input[type="checkbox"] { display: inline-block; width: auto; } button { background-color: #05c46b; border: 1px solid #777; border-radius: 2px; font-family: inherit; font-size: 21px; display: block; width: 100%; margin-top: 50px; margin-bottom: 20px; } </style> </head> <body> <!-- nội dung của trang web --> </body> </html>
Tiếp theo, đối với phần body bạn sẽ nhập lần lượt các thông tin thành phần có trong biểu mẫu như trường nhập văn bản, lựa chọn danh sách, chọn hộp kiểm và radio.
Cuối cùng là tạo nút Submit cho biểu mẫu cùng định dạng CSS như sau:
<body> <h1>Biểu mẫu khảo sát ITviec</h1> <form id="form"> <div class="form-control"> <label for="name" id="label-name">Họ tên</label> <input type="text" id="name" placeholder="Nhập tên của bạn"/> </div> <div class="form-control"> <label for="email" id="label-email">Email</label> <input type="email" id="email" placeholder="Nhập email của bạn" /> </div> <div class="form-control"> <label for="age" id="label-age">Tuổi</label> <input type="text" id="age" placeholder="Nhập tuổi" /> </div> <div class="form-control"> <label for="role" id="label-role">Hiện tại bạn đang là?</label> <select name="role" id="role"> <option value="student">Học sinh/Sinh viên</option> <option value="intern">Thực tập</option> <option value="professional">Nhân viên</option> <option value="other">Khác</option> </select> </div> <div class="form-control"> <label>Bạn sẽ giới thiệu ITviec với bạn bè chứ?</label> <label for="recommed-1"> <input type="radio" id="recommed-1" name="recommed" value="yes">Có</input> </label> <label for="recommed-2"> <input type="radio" id="recommed-2" name="recommed" value="no">Không</input> </label> <label for="recommed-3"> <input type="radio" id="recommed-3" name="recommed" value="maybe">Có thể</input> </label> </div> <div class="form-control"> <label>Ngôn ngữ lập trình và Framework bạn đã biết? <small>(Có thể chọn nhiều đáp án)</small> </label> <label for="inp-1"> <input type="checkbox" name="inp" value="c">C</input> </label> <label for="inp-2"> <input type="checkbox" name="inp" value="c++">C++</input> </label> <label for="inp-3"> <input type="checkbox" name="inp" value="c#">C#</input></label> </div> <div class="form-control"> <label for="comment">Bạn có câu hỏi gì cho ITviec không?</label> <textarea name="comment" id="comment"placeholder="Enter your comment here"></textarea> </div> <button type="submit" value="submit">Submit</button> </form> </body>
Trang web nhà hàng
Khi lập trình một trang web nhà hàng sẽ đòi hỏi sự phức tạp nhiều hơn một chút so với các dự án khác, bởi bạn sẽ phải căn chỉnh các mặt hàng thực phẩm và đồ uống bằng cách sử dụng bố cục CSS. Bên cạnh đó, các thành phần như giá, hình ảnh bạn cũng cần phải thiết kế cho chúng một giao diện đẹp mắt với sự kết hợp giữa màu sắc, font chữ và bố cục. Bạn có thể thêm các thư viện hình ảnh kết hợp chuyển động trượt cho các sản phẩm hay liên kết để chuyển hướng đến các trang nội bộ khác.
Bài tập 11: Thực hiện tạo một trang web cho nhà hàng ẩm thực theo yêu cầu sau:
Trả lời Bài tập 11:
Tương tự với bài tập trên, bước đầu tiên bạn tạo phần header cho trang web theo cấu trúc:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> header { font-family: Fantasy; text-align: center; } button { background-color: #FFFFFF; border: 1px solid #777; border-radius: 2px; font-family: monospace; font-size: 15px; display: block; width: 20%; margin-top: 50px; margin-bottom: 20px; } </style> </head>
Tiếp theo, bạn thực hiện phần body cho trang web bao gồm các thành phần như thanh menu, nút button,…
<body> <header> <h1 id="top">Online</h1> <h1 id="top1">FoodShop</h1> </header> <hr> <nav id="navbar"> <img src="5.jpeg"> <ul id="navcontent"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Menu</a></li> <li><a href="contact.html">ContactUs</a></li> </ul> </nav> <div id="container1"> <div id="row1"> Welcome to Online FoodShop </div> <button class="btn">ORDER NOW</button> <div id="container3"> <div id="row2"> <button class="btn">Prices</button> </div> <div id="row3"> <button class="btn">Specials</button> </div> </div> </div> <hr> <h1 id="top3">Featured Products</h1> <div id="container4"> <div id="row4"> <button type="order now" value="order now">Order Now</button </div> </div>
Cuối cùng là tạo phần chân trang, thường là các thông tin liên hệ với nhà hàng, bản quyền hoặc địa chỉ,…
<footer>Copyright © 2020-2021 OnlineFoodShop. All Rights are reserved</footer> </body> </html>
Portfolio
Bạn có thể sử dụng HTML và CSS để tạo ra trang web chứa portfolio của mình, thể hiện các công việc và kỹ năng của mình. Ở phần tiêu đề của trang web, bạn có thể thiết kế một số đầu mục như giới thiệu, liên hệ và dịch vụ bạn cung cấp; phần body chèn các dự án đã thực hiện của bản thân. Cuối cùng là thông tin liên hệ ở phần chân trang.
Bài tập 12: Thực hiện một trang web portfolio trình bày các sản phẩm bài viết của bản thân theo mẫu như sau:
Trả lời Bài tập 12:
Đầu tiên, bạn tiến hành định dạng cho trang web bằng cách sử dụng các thuộc tính CSS.
<!DOCTYPE html> <html> <head> <title> Create a Portfolio Gallery using HTML and CSS </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* wildcard styling */ * { box-sizing: border-box; } /* padding cho toàn bộ body */ body { padding: 15px; } /* tạo kiểu cho body */ .container { max-width: 1200px; margin: auto; } h1 { color: green; } /* trang trí anchor tag */ a { text-decoration: none; color: #5673C8; } a:hover { color: lightblue; } /* trang trí paragraph tag */ p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* trang trí hàng và cột */ .row { margin: 0px -18px; padding: 8px; } .row>.column { padding: 6px; } .column { float: left; width: 25%; } .row:after { content: ""; display: table; clear: both; } /* trang trí nội dung */ .content { background-color: white; padding: 10px; border: 1px solid gray;} /* set window size chiều ngang 850 */ @media screen and (max-width: 850px) { .column { width: 50%; } } /* set window size chiều ngang 400 */ @media screen and (max-width: 400px) { .column { width: 100%; } } </style> </head>
Sau khi đã hoàn thành dựng khung của trang web, bạn bắt đầu tiến hành lập trình cho phần nội dung. Đây là phần để bạn trình bày những dự án đã thực hiện.
<body> <div class="container"> <h1>ITviec Blog</h1> <h3>Ý tưởng phát triển sự nghiệp IT của bạn</h3> <hr> <h2>Portfolio</h2> <div class="row"> <div class="column"> <div class="content"> <img src= "https://itviec.com/blog/wp-content/uploads/2024/03/html-la-gi-blog-thumbnail-vippro.jpg" alt="" style="width:100%"> <h3> <a href="#">Giải đáp A - Z điều cần biết về HTML</a> </h3> <p>HTML (Hypertext Markup Language) hay còn được gọi là ngôn ngữ đánh dấu siêu văn bản được thiết kế để tạo nên các trang web trên World Wide Web (www).</p> </div> </div> <div class="column"> <div class="content"> <img src= "https://itviec.com/blog/wp-content/uploads/2024/03/table-html-blog-thumbnail-vippro.jpg" alt="" style="width:100%"> <h3> <a href="#">Hướng dẫn cách tạo bảng trong HTML</a> </h3> <p>Bảng (Table) là phần tử HTML thể hiện dữ liệu được sắp xếp theo hàng và cột tương tự như một bảng tính. Trong HTML, cấu trúc bảng có thể giúp bạn dễ dàng sắp xếp các thành phần từ đơn giản đến phức tạp theo một cách hoàn chỉnh với đầy đủ về tiêu đề hàng, cột, tiêu đề hợp nhất,… </p> </div> </div> <div class="column"> <div class="content"> <img src="https://itviec.com/blog/wp-content/uploads/2024/03/bang-mau-html-blog-thumbnail-vippro.png" alt="" style="width:100%"> <h3> <a href="#">Tổng hợp đầy đủ nhất về Bảng màu HTML</a> </h3> <p>Mã màu HTML là việc biểu diễn các màu sắc thông qua tập hợp số và chữ cái theo một quy tắc. Khi lập trình trang web, bảng mã màu HTML sẽ giúp máy tính diễn giải và hiển thị thông tin theo đúng màu sắc mà bạn đã cài đặt.</p> </div> </div> <div class="column"> <div class="content"> <img src= "https://itviec.com/blog/wp-content/uploads/2024/03/cac-the-trong-html-blog-thumbnail-vippro.png" alt="" style="width:100%"> <h3> <a href="#">Tổng hợp 70+ thẻ trong HTML thông dụng</a> </h3> <p>Thẻ HTML (HTML tags) là những từ khóa được sử dụng để định dạng cấu trúc khác nhau trên trang web. Cú pháp của một thẻ HTML đều có hai phần được gọi là thẻ mở và thẻ đóng, được đặt trong dấu ngoặc nhọn và có thêm dấu gạch chéo (/) ở nội dung thẻ đóng.</p> </div> </div> </div> </div>
Cuối cùng là phần chân trang cho trang web với những thông tin liên hệ hoặc bản quyền web,…
<footer>Copyright © 2024 Geekforgreeks. All Rights are reserved</footer> </body> </html>
Câu hỏi thường gặp
Có thể tạo một trang web hoàn chỉnh chỉ với HTML?
Bạn có thể xây dựng một trang web cơ bản chỉ bằng HTML nhưng nó sẽ rất cơ bản. Để tạo được một trang web có thể tương tác và ấn tượng, bạn sẽ cần sử dụng đến CSS (để định dạng) với JavaScript (để tạo các phần tử động) cho trang web.
Đồng thời, bạn có thể xem xét đến hệ thống quản lý nội dung (CMS) cho các trang web lớn và phức tạp hơn.
HTML & HTML5 có gì khác biệt?
HTML5 là phiên bản mới nhất của HTML được cập nhật các thành phần, thuộc tính và API giúp nâng cao khả năng phát triển web. Bên cạnh đó, HTML5 còn mang đến các tính năng mới như hỗ trợ chèn video và âm thanh, xử lý biểu mẫu được cải thiện và ngữ nghĩa nâng cao. Bạn nên học và thực hành bài tập HTML5 để được cập nhật các phương pháp phát triển web mới nhất.
Tổng kết
Học HTML là một quá trình của sự kiên trì và luyện tập thường xuyên. Việc thực hành các bài tập HTML sẽ là một cách hiệu quả để bạn củng cố kiến thức và kỹ năng đã học. Bài viết đã cung cấp những nguồn tài liệu bài tập HTML phong phú và đa dạng, phù hợp với mọi trình độ khác nhau.
Hy vọng những thông tin trong bài viết sẽ giúp ích cho các lập trình viên trong quá trình trở thành một Front-End Developer chuyên nghiệp.
Xem thêm: Front-End Developer là gì: Làm gì, lộ trình học tập và công việc cụ thể
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!