Hôm nay chúng ta cùng nhau tìm hiểu một số bài tập ứng dụng trong HTML
 |
| HTML, CSS, JS, Ajax |
1. Di chuyển chuột vào phần tử.
Yêu cầu: Tạo một liên kết
đến trang http://www.html.edu.vn bằng
thẻ H2. Có màu nền là xanh, màu chữ là trắng. Khi chuột di chuyển đến thì đổi
màu nền thành màu đỏ.
Hướng dẫn: Để đổi màu nền
thành đỏ đối với thẻ H2 (hoặc thẻ bất kỳ) bạn viết:
document.all.LienKet.style.backgroundColor
= ‘red’
Trong đó LienKet là giá
trị của thuộc tính ID .
J Câu lệnh JavaScript này đặt ở đâu ?
@ Theo như yêu cầu đầu bài là : “Khi chuột di chuyển …”. Do vậy câu
lệnh này sẽ được đặt trong sự kiện di chuyển chuột đến (có tên là onMouseMove)
Minh hoạ:
<HTML>
<HEAD>
<TITLE>Hiệu
ứng di chuyển chuột</TITLE>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=utf-8">
</HEAD>
<BODY>
<h2 ID= "LienKet"
STYLE="background-color:blue; color:white"
onMouseMove="document.all.LienKet.style.backgroundColor
= 'red'">
Trang dạy JavaScript http://www.w3schools.com
</h2>
</BODY>
</HTML>
|
% Nhắc lại: Các thuộc tính trong bảng tra cứu “danh sách thuộc tính” nếu có
chứa dấu gạch nối (ví dụ : background-color) thì khi viết trong JavaScript, bạn
phải chuyển ký tự đứng ngay sau dấu gạch nối đó thành chữ hoa và bỏ dấu gạch
nối đi. (Ví dụ từ background-color à
backgroundColor)
2. Di chuyển chuột vào và ra khỏi một phần tử.
Yêu cầu: Như bài tập 1, và
thêm yêu cầu sau: Khi người dùng di chuyển chuột ra khỏi phần tử H2 đó thì đặt
lại màu nền là màu xanh.
Hướng dẫn: Viết lệnh thay
đổi màu nền thành xanh trong sự kiện di chuột ra ngoài.
Minh hoạ:
<HTML>
<HEAD>
<TITLE>Hiệu
ứng di chuyển chuột Version 2</TITLE>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=utf-8">
</HEAD>
<BODY>
<H2 ID= "LienKet"
STYLE="background-color:blue; color:white"
onMouseMove
= "document.all.LienKet.style.backgroundColor
= 'red' "
onMouseOut
= "document.all.LienKet.style.backgroundColor
= 'blue' ">
Trang dạy JavaScript http://www.w3schools.com
</H2>
</BODY>
</HTML>
|
3. Tạo một liên kết hoàn chỉnh đến một trang web.
Yêu cầu: Như bài số 2
nhưng khi người dùng click chuột thì mở trang http://www.html.edu.vn Và chuột có hình
bàn tay.
Hướng dẫn: Để mở trang web
bất kỳ bạn viết: window.open(‘Địa chỉ URL’). Lệnh mở này được đặt trong sự kiện
Click chuột (Vì theo yêu cầu: khi người dùng click chuột thì mới mở).
Minh hoạ:
<HTML>
<HEAD>
<TITLE>Hiệu
ứng di chuyển chuột Version 2</TITLE>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=utf-8">
</HEAD>
<BODY>
<H2 ID="LienKet" STYLE="background-color:blue; color:white; cursor:hand"
onMouseMove
= "document.all.LienKet.style.backgroundColor
= 'red';"
onMouseOut = "document.all.LienKet.style.backgroundColor = 'blue';"
onClick =
"window.open('http://www.w3schools.com');" >
Trang dạy JavaScript http://www.w3schools.com
</H2>
</BODY>
</HTML>
|
Với 3 bài tập về phần di chuyển các phần tử trong HTML trên các bạn sẽ có thể hiểu rõ hơn về nội dung này. Qua đó có thể hiểu rõ hơn về HTML.
Để tìm hiểu kỹ hơn về HTML cũng như HTML 5 các bạn có thể tham khảo nội dung khóa học sau: Tạo web với HTML 5& CSS 3
Mọi thông tin chi tiết các bạn có thể liên hệ vào số: 0904 936 399
