Bài tập ngành Lập trình - Chuyên đề: Lập trình web với HTML5, CSS3 và jQuery

$('#ketqua').css('color','black').html(kq); 
8.3. Viết lại xử lý chức năng Tìm kiếm 
 Mục tiêu: 
- Sử dụng cú pháp jQuery để viết các tham chiếu 
 Yêu cầu xử lý: 
- Viết lại các xử lý cho chức năng Tìm kiếm 
Stt Đối tượng Yêu cầu 
1 Điều khiển nhập giá trị tìm Xem bài 7.1 
2 Nút Xem bài 7.1 
8.4. Cài đặt các jQuery Plugin cho TrangChu.html 
 Mục tiêu: 
- Sử dụng jQuery Plugin 
 Yêu cầu xử lý: 
- Cài đặt các jQuery sau cho TrangChu.html : 
 Cài jQuery cho Menu 
Hình 1: jQuery Menu 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 35/44 
 Cài jQuery cho các hình ảnh quảng cáo về công ty: Chuyển tiếp giữa các hình trong 
khoảng từ 3 đến 5 giây (khoảng 10 hình) 
Hình 2: jQuery nivo Slider 
 Cài jQuery cho Sản phẩm hot 
Hình 3: jQuery carousels 
 Ghi chú: Học viên có thể thay thế jQuery khác nếu có khả năng tự cài đặt được 
 Hướng dẫn: 
- jQuery menu:  
- jQuery nivo Slider:  
- jQuery carousels (phiên bản mới):  
8.5. Bài mở rộng 
 Mục tiêu: 
- Sử dụng jQuery Plugin 
 Yêu cầu xử lý: 
- Cài đặt jQuery custom-scrollbar cho SanPhamMoi.html : 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 36/44 
Hình 1: jQuery custom-scrollbar 
 Hướng dẫn: 
- jQuery custom-scrollbar:  
8.6. Tạo trang ChiTietSP.html (bài mở rộng) 
 Mục tiêu: 
- Tổng hợp các kiến thức, sử dụng jQuery khó. Dành cho HV giỏi 
 Yêu cầu thiết kế: 
- Thiết kế giao diện trang web như sau: 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 37/44 
Hình 1: Trang xem chi tiết một sản phẩm 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 38/44 
- Cài đặt jQuery Fancy Box vào mục Sản phẩm cùng loại: 
 Click vào hình thì sẽ phóng to hình lên giữa trang web 
Hình 2: Khi click vào hình 
- Cài đặt jQuery connected-carousels trong khung xem chi tiết sản phẩm 
Hình 3: Giao diện của jQuery connected-carousels 
 Hướng dẫn: 
- jQuery Fancy Box:  
- jQuery connected-carousels:  
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 39/44 
BÀI 9: Hoàn chỉnh trang web với các kỹ 
thuật nâng cao 
- Cài đặt các kỹ thuật nâng cao trong HTML5 và CSS3 
9.1. Tùy biến Layout của website 
 Mục tiêu: 
- Sử dụng Media Queries 
 Yêu cầu xử lý: 
- Tùy biến giao diện các trang web theo yêu cầu sau: 
 Nếu kích thước cửa sổ trình duyệt nhỏ hơn 800px thì che đi sidebar1 và sidebar2 
 Ngược lại thì hiển thị 2 sidebar này 
9.2. Gắn một clip vào TrangChu.html 
 Mục tiêu: 
- Sử dụng tag media của HTML5 
 Yêu cầu xử lý: 
- Cài đặt một file media (mp4, wav,  ) vào Trangchu.html, đặt sau mục Thống kê 
Hình 1: Clip được gắn vào TrangChu.html 
9.3. Tạo animation cho 4 khẩu hiệu trong trang GioiThieu.html 
 Mục tiêu: 
 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 40/44 
- Sử dụng CSS3 animation 
 Yêu cầu xử lý: 
Hình 1: Khẩu hiệu 2 và 4 bắt đầu di chuyển, còn 1 và 3 bắt đầu chuyển màu 
Hình 2: animation đã làm thay đổi khác đi 
Hình 2: Kết thúc của animation, trước khi bắt đầu trở lại 
Stt Đối tượng Yêu cầu 
1 Khẩu hiểu 1  Trong vòng 5 giây, thay đổi: 
 Màu chữ: từ màu xanh e  trắng 
 Màu nền: từ màu trắng  xanh e 
2 Khẩu hiệu 3  Trong vòng 5 giây, thay đổi: 
 Màu chữ: từ màu xanh lá cây  trắng 
 Màu nền: từ màu trắng  xanh lá cây 
3 Khẩu hiệu 2  Sau 20 giây sẽ thực hiện animation sau trong vòng 5 giây: 
 Di chuyển từ vị trí left của khẩu hiệu 1 sang vị trí left ban đầu 
của nó 
4 Khẩu hiệu 4  Sau 20 giây sẽ thực hiện animation sau trong vòng 5 giây: 
 Di chuyển từ vị trí left của khẩu hiệu 3 sang vị trí left ban đầu 
của nó 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 41/44 
 Hướng dẫn: 
Stt Đối tượng Yêu cầu 
1 Khẩu hiệu 1 #kh1{ /* code giao diện trước đây */ 
 /*=== Bổ sung ====*/ 
 animation:changeKhauhieu1 5s infinite; 
 -webkit-animation:changeKhauhieu1 5s infinite; 
} 
@keyframes changeKhauhieu1 
{ 
 from {background-color: #FFFFFF;color:#14e6f9;} 
 to {background-color: #14e6f9;color:#FFFFFF;} 
} 
2 Khẩu hiệu 3 Tương tự khẩu hiệu 1 
3 Khẩu hiệu 2 #kh2{ 
 /* code giao diện trước đây */ 
 /*=== Bổ sung ====*/ 
 position:relative; 
 animation:changeKhauhieu2 5s ease 20s infinite; 
 -webkit-animation:changeKhauhieu2 5s ease 20s infinite; 
} 
@keyframes changeKhauhieu2 
{ 
 from {left:-120px} 
 to {left:0px} 
} 
4 Khẩu hiệu 4 Tương tự khẩu hiệu 2 
9.4. Publish website lên free host 
 Mục tiêu: 
- Sử dụng tên miền miễn phí và host miễn phí 
 Yêu cầu: 
- HV đưa website của mình lên một free host 
- Có thể xin một tên miền miễn phí 
 Hướng dẫn: 
- Các website cung cấp host miễn phí: somee.com, byehost.com, ... 
- Các website cung cấp tên miền miễn phí: my.dot.tk , uni.me, ... 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 42/44 
Website tham khảo hệ thống bài tập 
 Phần căn bản: Từ bài 1 đến bài 4 
-  
-  
-  
 Phần nâng cao với CSS3: Từ bài 5 đến bài 7 
-  
-  
-  
 Phần nâng cao với jQuery: Từ bài 8 đến bài 9 
-  
-  
-  
-  
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 43/44 
MỤC LỤC 
BÀI 1: Tổng quan về lập trình web ......................................................................................1 
1.1. Hướng dẫn học viên làm quen với các môi trường cài đặt ngôn ngữ HTML, CSS và JavaScript:
 1 
BÀI 2: Tạo web page với ngôn ngữ HTML............................................................................2 
2.1. Tạo layout cho TrangChu.html ......................................................................................... 2 
2.2. Hiệu chỉnh nội dung cơ bản của TrangChu.html................................................................. 5 
2.3. Định dạng chung cho TrangChu.html................................................................................ 6 
2.4. Hiệu chỉnh TrangChu.html ............................................................................................... 6 
2.5. Tạo Thực đơn và hiệu chỉnh phần Sidebar trong Trangchu.html.......................................... 9 
2.6. Bổ sung mục ”Thời trang nam” vào trang Trangchu.html ................................................. 11 
2.7. Tạo trang SanPhamMoi.html, HoTroOnline.html, ThongKe.html ........................................ 12 
2.8. Bổ sung chức năng Tìm kiếm và Mua hàng vào TrangChu.html......................................... 14 
BÀI 3: Tạo web page với ngôn ngữ HTML5 .......................................................................16 
3.1. Thay thế các tag ngữ nghĩa cho TrangChu.html .............................................................. 16 
BÀI 4: Hoàn chỉnh giao diện web với CSS..........................................................................18 
4.1. Tạo tập tin Default.css .................................................................................................. 18 
4.2. Sử dụng các style trong tập tin Default.css ..................................................................... 19 
4.3. Tạo trang DangKy.html (bài làm ở nhà).......................................................................... 20 
BÀI 5: Tùy biến giao diện web với CSS3 ............................................................................23 
5.1. Hiệu chỉnh tập tin Default.css ........................................................................................ 23 
5.2. Tạo trang GioiThieu.html............................................................................................... 25 
BÀI 6: Xử lý web page với ngôn ngữ Javascript................................................................27 
6.1. Tạo và viết xử lý cho thành phần Đăng nhập .................................................................. 27 
6.2. Tạo tập tin Thuvien.js ................................................................................................... 28 
BÀI 7: Xử lý nâng cao với các đối tượng trong Javascript ................................................29 
7.1. Xử lý chức năng Tìm kiếm ............................................................................................. 29 
7.2. Xử lý chức năng Đăng ký............................................................................................... 30 
BÀI 8: Tạo giao diện chuyên nghiệp bằng jQuery .............................................................32 
8.1. Viết lại xử lý trong trang Header.html ............................................................................. 32 
8.2. Viết lại xử lý trong trang Dangky.html ............................................................................ 32 
8.3. Viết lại xử lý chức năng Tìm kiếm................................................................................... 34 
8.4. Cài đặt các jQuery Plugin cho TrangChu.html .................................................................. 34 
8.5. Bài mở rộng ................................................................................................................. 35 
8.6. Tạo trang ChiTietSP.html (bài mở rộng).......................................................................... 36 
Baøi taäp 
Lập trình Web với HTML5, CSS3 và jQuery Trang 44/44 
BÀI 9: Hoàn chỉnh trang web với các kỹ thuật nâng cao ................................................. 39 
9.1. Tùy biến Layout của website.......................................................................................... 39 
9.2. Gắn một clip vào TrangChu.html .................................................................................... 39 
9.3. Tạo animation cho 4 khẩu hiệu trong trang GioiThieu.html............................................. 39 
9.4. Publish website lên free host.......................................................................................... 41 
Website tham khảo hệ thống bài tập................................................................................. 42 
MỤC LỤC.............................................................................................................................. 43