### 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 ****)