TÀI LIỆU ÔN THI WED201C – LẬP TRÌNH HTML
Được tổng hợp bởi team Minthep
1. HTML là gì?
HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để xây dựng cấu trúc và nội dung của một trang web.
HTML không phải là ngôn ngữ lập trình mà chỉ là ngôn ngữ đánh dấu, giúp định dạng và tổ chức nội dung trên trang web.
HTML bao gồm nhiều phần tử (elements), được quy định bằng cặp thẻ mở và thẻ đóng, ví dụ:
<html></html>
Empty elements (thẻ rỗng) là các thẻ không cần đóng, chẳng hạn như:
<img> - Chèn hình ảnh.
<br> - Xuống dòng.
<hr> - Tạo đường kẻ ngang.
<input> - Nhập liệu.
<meta> - Định nghĩa metadata.
<link> - Kết nối tài nguyên bên ngoài.
Tips: Khi sử dụng các thẻ này, không cần thêm thẻ đóng, giúp giảm lỗi và viết code nhanh hơn.
2. Cú pháp HTML
Một trang HTML cơ bản sẽ có cấu trúc như sau:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Giải thích từng thẻ:
<!DOCTYPE html>
Khai báo cho trình duyệt biết đây là tài liệu HTML5.
Nếu không có, trình duyệt sẽ chuyển sang quirks mode, khiến trang hiển thị không nhất quán.
<html>
Là thẻ cha chứa tất cả nội dung trang web.
<head>
Chứa thông tin meta, liên kết CSS, và tiêu đề trang.
Nội dung trong thẻ <head> không hiển thị trực tiếp trên trang web.
<title>
Xác định tiêu đề hiển thị trên tab trình duyệt.
<body>
Chứa toàn bộ nội dung mà người dùng có thể nhìn thấy (text, hình ảnh, video, nút bấm...).
<h1> và <p>
<h1>: Tiêu đề lớn.
<p>: Đoạn văn bản.
3. Định dạng văn bản
3.1 Các thẻ định dạng phổ biến
<b> – In đậm văn bản.
<i> – In nghiêng văn bản.
<u> – Gạch chân văn bản.
<strong> – Văn bản quan trọng (đậm).
<em> – Văn bản nhấn mạnh (nghiêng).
<mark> – Đánh dấu đoạn văn bản.
<small> – Văn bản nhỏ hơn.
Ví dụ:
<p>
<b>This is bold</b> and <i>this is italic</i>.
</p>
3.2 Semantic HTML
Semantic HTML sử dụng các thẻ mang ý nghĩa cụ thể giúp:
Tối ưu hóa SEO và cải thiện thứ hạng trên công cụ tìm kiếm.
Hỗ trợ người dùng sử dụng trình đọc màn hình.
Dễ bảo trì và nâng cấp mã nguồn.
Ví dụ:
<article> - Nội dung chính
<section> - Phân chia nội dung thành phần
<nav> - Menu điều hướng
<footer> - Chân trang
<header> - Phần đầu trang
4. Links – Hyperlinks
4.1. Cú pháp liên kết
<a href="url">link text</a>
Ví dụ:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
4.2. Thuộc tính target
_self (mặc định): Mở trang trong cùng tab.
_blank: Mở trang trong tab hoặc cửa sổ mới.
_parent: Mở trang trong khung cha.
_top: Mở trang trong toàn bộ cửa sổ trình duyệt.
Ví dụ:
<a href="https://google.com" target="_blank">Open Google in new tab</a>
5. Hình ảnh trong HTML
5.1. Cú pháp thẻ <img>
<img src="image.jpg" alt="Alternative text" title="Hover text">
src: Đường dẫn hình ảnh.
alt: Văn bản thay thế hiển thị khi hình ảnh không tải được.
title: Văn bản hiển thị khi di chuột vào ảnh.
Ví dụ:
<img src="pic.jpg" alt="Sunset" title="Beautiful sunset">
6. Danh sách trong HTML
6.1. Danh sách không có thứ tự
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách sử dụng thẻ <ul> với các mục con là <li>.
6.2. Danh sách có thứ tự
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách có thứ tự dùng thẻ <ol>, các mục con là <li>, hiển thị theo thứ tự tăng dần.
7. Thẻ div và span
<div>: Gom nhóm các phần tử thành một block (chiếm toàn bộ chiều ngang).
<div>
<h2>Title</h2>
<p>This is a paragraph.</p>
</div>
<span>: Gom nhóm phần tử inline (trên cùng một dòng).
<p>This is <span style="color: red;">important</span> text.</p>
8. Biểu mẫu (Forms)
8.1. Thẻ <form>
<form action="submit.php" method="POST">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<br>
<input type="submit" value="Submit">
</form>
action: URL xử lý dữ liệu form.
method: GET hoặc POST.
8.2. Thẻ <input> cái quỷ này có đợt ra thi xong sinh viên đợt nó dưới 7 hết
Các loại input phổ biến:
text – Nhập văn bản.
password – Nhập mật khẩu.
checkbox – Chọn nhiều lựa chọn.
radio – Chọn một lựa chọn.
submit – Nút gửi dữ liệu.
file – Tải tệp lên.
8.3. Thẻ <label>
Thẻ <label> giúp liên kết nhãn với phần tử input để cải thiện trải nghiệm người dùng.
<form>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</form>
- DO NOT clear this line and author -> Minthep
9. Bố cục HTML (Layout)
9.1. Thẻ phổ biến để tạo bố cục
<header>: Phần đầu trang.
<nav>: Menu điều hướng.
<section>: Phân chia nội dung.
<article>: Nội dung chính.
<aside>: Nội dung phụ.
<footer>: Phần cuối trang.
Ví dụ:
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
<section>
<article>
<h2>Main Content</h2>
<p>This is an article.</p>
</article>
<aside>
<p>Related Links</p>
</aside>
</section>
<footer>
<p>Copyright 2025</p>
</footer>
10. Một số câu hỏi hay gặp về HTML
10.1. Tại sao phải có DOCTYPE?
Nếu không có DOCTYPE, trình duyệt sẽ vào quirks mode, dẫn đến hiển thị không đồng nhất giữa các trình duyệt.
10.2. Tại sao head quan trọng?
Không có <head>, bạn không thể:
Thêm CSS.
Tối ưu hóa SEO.
Thêm favicon cho trang.
10.3. Có thể đặt <title> trong <body> không?
Trình duyệt sẽ tự động di chuyển <title> vào <head> và cảnh báo lỗi.
10.4. Tại sao cần alt cho thẻ <img>?
SEO: Công cụ tìm kiếm cần alt để hiểu nội dung hình ảnh.
Accessibility: Người khiếm thị sử dụng trình đọc màn hình cần alt để hiểu nội dung.
11. HTML5 và các cải tiến
HTML5 bổ sung nhiều thẻ và chức năng mới:
<audio> và <video>: Phát đa phương tiện.
<canvas>: Vẽ đồ họa động.
<section>, <article>, <aside>, <nav>: Cải thiện cấu trúc semantic.
Ví dụ:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
12. Tối ưu hóa SEO với HTML
Sử dụng thẻ semantic (<header>, <nav>, <article>, <footer>).
Thêm meta tags phù hợp.
Tối ưu hóa alt text cho hình ảnh.
Đặt title và meta description chi tiết.
Tài liệu này đã tổng hợp toàn bộ kiến thức cơ bản về HTML giúp bạn nắm vững cú pháp, định dạng và quản lý cấu trúc website. Chúc bạn ôn thi WED201c thành công!
AUTHOR: Minthep
Được tổng hợp bởi team Minthep
1. HTML là gì?
HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để xây dựng cấu trúc và nội dung của một trang web.
HTML không phải là ngôn ngữ lập trình mà chỉ là ngôn ngữ đánh dấu, giúp định dạng và tổ chức nội dung trên trang web.
HTML bao gồm nhiều phần tử (elements), được quy định bằng cặp thẻ mở và thẻ đóng, ví dụ:
<html></html>
Empty elements (thẻ rỗng) là các thẻ không cần đóng, chẳng hạn như:
<img> - Chèn hình ảnh.
<br> - Xuống dòng.
<hr> - Tạo đường kẻ ngang.
<input> - Nhập liệu.
<meta> - Định nghĩa metadata.
<link> - Kết nối tài nguyên bên ngoài.
Tips: Khi sử dụng các thẻ này, không cần thêm thẻ đóng, giúp giảm lỗi và viết code nhanh hơn.
2. Cú pháp HTML
Một trang HTML cơ bản sẽ có cấu trúc như sau:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Giải thích từng thẻ:
<!DOCTYPE html>
Khai báo cho trình duyệt biết đây là tài liệu HTML5.
Nếu không có, trình duyệt sẽ chuyển sang quirks mode, khiến trang hiển thị không nhất quán.
<html>
Là thẻ cha chứa tất cả nội dung trang web.
<head>
Chứa thông tin meta, liên kết CSS, và tiêu đề trang.
Nội dung trong thẻ <head> không hiển thị trực tiếp trên trang web.
<title>
Xác định tiêu đề hiển thị trên tab trình duyệt.
<body>
Chứa toàn bộ nội dung mà người dùng có thể nhìn thấy (text, hình ảnh, video, nút bấm...).
<h1> và <p>
<h1>: Tiêu đề lớn.
<p>: Đoạn văn bản.
3. Định dạng văn bản
3.1 Các thẻ định dạng phổ biến
<b> – In đậm văn bản.
<i> – In nghiêng văn bản.
<u> – Gạch chân văn bản.
<strong> – Văn bản quan trọng (đậm).
<em> – Văn bản nhấn mạnh (nghiêng).
<mark> – Đánh dấu đoạn văn bản.
<small> – Văn bản nhỏ hơn.
Ví dụ:
<p>
<b>This is bold</b> and <i>this is italic</i>.
</p>
3.2 Semantic HTML
Semantic HTML sử dụng các thẻ mang ý nghĩa cụ thể giúp:
Tối ưu hóa SEO và cải thiện thứ hạng trên công cụ tìm kiếm.
Hỗ trợ người dùng sử dụng trình đọc màn hình.
Dễ bảo trì và nâng cấp mã nguồn.
Ví dụ:
<article> - Nội dung chính
<section> - Phân chia nội dung thành phần
<nav> - Menu điều hướng
<footer> - Chân trang
<header> - Phần đầu trang
4. Links – Hyperlinks
4.1. Cú pháp liên kết
<a href="url">link text</a>
Ví dụ:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
4.2. Thuộc tính target
_self (mặc định): Mở trang trong cùng tab.
_blank: Mở trang trong tab hoặc cửa sổ mới.
_parent: Mở trang trong khung cha.
_top: Mở trang trong toàn bộ cửa sổ trình duyệt.
Ví dụ:
<a href="https://google.com" target="_blank">Open Google in new tab</a>
5. Hình ảnh trong HTML
5.1. Cú pháp thẻ <img>
<img src="image.jpg" alt="Alternative text" title="Hover text">
src: Đường dẫn hình ảnh.
alt: Văn bản thay thế hiển thị khi hình ảnh không tải được.
title: Văn bản hiển thị khi di chuột vào ảnh.
Ví dụ:
<img src="pic.jpg" alt="Sunset" title="Beautiful sunset">
6. Danh sách trong HTML
6.1. Danh sách không có thứ tự
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách sử dụng thẻ <ul> với các mục con là <li>.
6.2. Danh sách có thứ tự
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách có thứ tự dùng thẻ <ol>, các mục con là <li>, hiển thị theo thứ tự tăng dần.
7. Thẻ div và span
<div>: Gom nhóm các phần tử thành một block (chiếm toàn bộ chiều ngang).
<div>
<h2>Title</h2>
<p>This is a paragraph.</p>
</div>
<span>: Gom nhóm phần tử inline (trên cùng một dòng).
<p>This is <span style="color: red;">important</span> text.</p>
8. Biểu mẫu (Forms)
8.1. Thẻ <form>
<form action="submit.php" method="POST">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<br>
<input type="submit" value="Submit">
</form>
action: URL xử lý dữ liệu form.
method: GET hoặc POST.
8.2. Thẻ <input> cái quỷ này có đợt ra thi xong sinh viên đợt nó dưới 7 hết
Các loại input phổ biến:
text – Nhập văn bản.
password – Nhập mật khẩu.
checkbox – Chọn nhiều lựa chọn.
radio – Chọn một lựa chọn.
submit – Nút gửi dữ liệu.
file – Tải tệp lên.
8.3. Thẻ <label>
Thẻ <label> giúp liên kết nhãn với phần tử input để cải thiện trải nghiệm người dùng.
<form>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</form>
- DO NOT clear this line and author -> Minthep
9. Bố cục HTML (Layout)
9.1. Thẻ phổ biến để tạo bố cục
<header>: Phần đầu trang.
<nav>: Menu điều hướng.
<section>: Phân chia nội dung.
<article>: Nội dung chính.
<aside>: Nội dung phụ.
<footer>: Phần cuối trang.
Ví dụ:
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
<section>
<article>
<h2>Main Content</h2>
<p>This is an article.</p>
</article>
<aside>
<p>Related Links</p>
</aside>
</section>
<footer>
<p>Copyright 2025</p>
</footer>
10. Một số câu hỏi hay gặp về HTML
10.1. Tại sao phải có DOCTYPE?
Nếu không có DOCTYPE, trình duyệt sẽ vào quirks mode, dẫn đến hiển thị không đồng nhất giữa các trình duyệt.
10.2. Tại sao head quan trọng?
Không có <head>, bạn không thể:
Thêm CSS.
Tối ưu hóa SEO.
Thêm favicon cho trang.
10.3. Có thể đặt <title> trong <body> không?
Trình duyệt sẽ tự động di chuyển <title> vào <head> và cảnh báo lỗi.
10.4. Tại sao cần alt cho thẻ <img>?
SEO: Công cụ tìm kiếm cần alt để hiểu nội dung hình ảnh.
Accessibility: Người khiếm thị sử dụng trình đọc màn hình cần alt để hiểu nội dung.
11. HTML5 và các cải tiến
HTML5 bổ sung nhiều thẻ và chức năng mới:
<audio> và <video>: Phát đa phương tiện.
<canvas>: Vẽ đồ họa động.
<section>, <article>, <aside>, <nav>: Cải thiện cấu trúc semantic.
Ví dụ:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
12. Tối ưu hóa SEO với HTML
Sử dụng thẻ semantic (<header>, <nav>, <article>, <footer>).
Thêm meta tags phù hợp.
Tối ưu hóa alt text cho hình ảnh.
Đặt title và meta description chi tiết.
Tài liệu này đã tổng hợp toàn bộ kiến thức cơ bản về HTML giúp bạn nắm vững cú pháp, định dạng và quản lý cấu trúc website. Chúc bạn ôn thi WED201c thành công!
AUTHOR: Minthep