thuanld@actvn.edu.

vn
PHÁT TRIỂN ỨNG DỤNG WEB
BÀI TẬP THỰC HÀNH HTML + CSS
Bài 1: Thực hành cơ bản
Thực hành các thẻ của HTMT, từ các thẻ cơ bản tới các thẻ input
Căn chỉnh theo CSS (màu, margin, padding, border, …)
Bài 2: Thực hành trung bình
Xay dung website gom cac trang sau (folder ảnh tự tạo với các ảnh khác):
• Home.html
• Contact.html
• Introduction.html
• Register.html
• Help.html
Trong moi trang, khi click vao lien ket ben trai, se mo trang tuong ung.
Home.html:
thuanld@actvn.edu.vn
Register.html:

Trang Contact.html:
thuanld@actvn.edu.vn
Trang Help.html:

Trang Introduction.html:

Thiet ke website hoan chinh, su dung html, css

Quy trinh:
1. Tao cau truc website gom:
a. Folder chua anh, video, san pham…
b. Cac page can thiet
2. Cac page dien hinh
thuanld@actvn.edu.vn
3. Phan chia kien truc tong the cua website: Vi du: Top/(left/center/right)/Footer
4. Tao file CSS cho muc trong website theo kien truc tong the da chia
5. Tao Template (khung chinh): xay dung 1 page lam khung chinh cho website
6. Code chi tiet cac page thanh phan: = template + phan thay doi => Chi thiet ke phan
thay doi
a. Bo sung CSS cho cac phan nay
b. Ap dung CSS cho phan thay doi

Bài 3:Thực hành Nâng cao HTML + CSS

Trang web được chia thành:
Header: Chứa ảnh hoặc slogan của công ty
Navigation: Tạo menu ngang, dọc cho web (menu đến cấp thứ 3). Nếu
menu ngang thì nằm ngay dưới header
Content: Nội dung của website gồm có 3 cột.
- Cột bên trái (aside_left): Chứa menu dọc (hoặc ảnh hoặc login
hoặc nội dung gì đó) có màu nền khác.
- Cột giữa (content) và cột bên phải (aside_right): phần thay đổi
được theo nội dung click ở menu. Aside_right chứa ảnh quảng cáo.
- Footer: nằm cuối cùng chứa các thông tin liên hệ.

Nguồn tham khảo: slide + code hướng dẫn + video trên teams.
https://actvneduvn-my.sharepoint.com/:f:/g/personal/thuanld_actvn_edu_vn/Ej-
MGUMt5hhCksAkxsTv1-wBE4ekzLyMZUjucNE359uktg?e=ATDWNm