---
# System prepended metadata

title: 'Bài tập 1: Cắt giao diện'

---

### Bài tập 1: Cắt giao diện
Cắt giao diện trang web theo design sau: 
![prowebcap](https://hackmd.io/_uploads/HJOH9DE56.gif)
Một số lưu ý:
 - Khi hover vào các link bên menu trái phải đổi màu
 - Xử lý chữ `Web Design` không sử dụng hình ảnh.
 - Khi bấm vào các trang con, tạo ra trang mới với nội dung tiêu đề khác. 
     - Ví dụ: Khi bấm vào Basic Html Tutorial => Chữ `Web Design` sẽ chuyển thành `Basic HTML Tutorial`, nội dung trên trang thay đổi nhưng phần menu không đổi
     - Các link khác như: `Table Tutor`, `Form Tutor`, `Frames Tutor` tương tự (Tạo mỗi link một trang HTML riêng, phần Menu giữ nguyên còn phần content thay đổi)

### Bài tập 2: Tạo form đăng ký
![image](https://hackmd.io/_uploads/rkv4kdV9a.png)
Yêu cầu: 
- Tất cả các trường password phải đươc ẩn
- Trường email phải tuân theo pattern email : `[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$`
- Các trường đánh dấu * phải được bắt buộc điền
- Kiểm tra mật khẩu và mật khẩu xác nhận là trùng nhau thì mới cho nhập.
- Sau khi nhập liệu xong, tạo ra bảng dữ liệu sau (Trên cùng một trang) - Ví dụ:

| Tên đầy đủ   | Ngày sinh   | Giới tính   | Nơi sống       | Tên truy cập   | Địa chỉ Email    | Mật khẩu   |
|:-------------|:------------|:------------|:---------------|:---------------|:-----------------|:-----------|
| Nguyễn Văn A | 20/4/2010   | Nam         | Hà Nội         | nguyenvana     | vana@gmail.com   | ******     |
| Trần Thị B   | 15/5/2008   | Nữ          | TP Hồ Chí Minh | tranb          | btran@yahoo.com  | ******     |
| Lê Văn C     | 8/8/2009    | Nam         | Đà Nẵng        | levanc         | vanc@hotmail.com | ******     |

- Dữ liệu mật khẩu được chuyển hết về  dấu \*. Khi click vào ô mật khẩu thì hiển thị được mật khẩu.
- Khi tải lại trang, không bị mất dữ liệu (Sử dụng LocalStorage ****)


