Một trang HTML sẽ không thật sự sống động nếu thiếu giao diện đẹp (CSS) và tương tác thông minh (JavaScript).
Trong bài này, bạn sẽ học cách gắn CSS và JS vào HTML đúng chuẩn, giúp trang web trở nên chuyên nghiệp và dễ quản lý.
1. Kết nối CSS bằng thẻ <link>
Thẻ <link> dùng để liên kết file CSS bên ngoài vào trang HTML.
<link rel="stylesheet" href="style.css">
Giải thích:
rel="stylesheet": chỉ định đây là tệp định kiểu (CSS).href="style.css": đường dẫn tới tệp CSS bạn muốn liên kết.
Vị trí đặt: Trong phần <head> của trang.
<head>
<meta charset="UTF-8">
<title>Trang ví dụ</title>
<link rel="stylesheet" href="style.css">
</head>
2. Gắn CSS trực tiếp bằng thẻ <style>
Trong một số trường hợp nhỏ, bạn có thể viết CSS ngay trong file HTML bằng thẻ <style>:
<style>
body {
background-color: #f0f0f0;
font-family: Arial;
}
</style>
Thẻ <style> cũng được đặt trong phần <head>.
3. Kết nối JavaScript bằng thẻ <script>
a. Gắn tệp JavaScript bên ngoài
<script src="script.js"></script>
Vị trí đặt: Thường được đặt cuối trang, trước thẻ </body>, để đảm bảo HTML tải xong trước khi JavaScript chạy.
<body>
<!-- Nội dung trang -->
<script src="script.js"></script>
</body>
b. Viết mã JavaScript trực tiếp
<script>
alert("Chào bạn đến với trang học HTML!");
</script>
4. So sánh cách nhúng CSS và JS
| Loại | Ưu điểm | Nhược điểm |
|---|---|---|
Tệp ngoài (link, script src) | Dễ tái sử dụng, dễ quản lý | Cần nhiều file hơn |
Nhúng trực tiếp (style, script) | Viết nhanh, gọn trong một file | Khó bảo trì, không tái sử dụng |
5. Ví dụ thực hành
Tạo file index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trang demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Xin chào</h1>
<button onclick="sayHello()">Bấm vào tôi</button>
<script src="script.js"></script>
</body>
</html>
Tạo file style.css:
body {
background-color: #eef;
text-align: center;
padding: 50px;
}
button {
font-size: 18px;
padding: 10px 20px;
}
Tạo file script.js:
function sayHello() {
alert("Bạn vừa bấm nút!");
}
6. Ghi nhớ
| Thẻ | Dùng để | Vị trí đặt |
|---|---|---|
<link> | Gắn file CSS ngoài | Trong <head> |
<style> | Viết CSS trực tiếp | Trong <head> |
<script> | Gắn hoặc viết JS | Cuối <body> |
Thảo luận