Các văn nằm cặp thẻ hiểu đoạn văn bản, đoạn văn xuống dòng cách với tỷ lệ định Bài tập 2: a Các thẻ định dạng chữ viết BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Một số định dạng chữ viết văn như: In đậm, nghiên, gạch chân hay gạch ngang Hãy sử dụng thẻ định dạng chữ viết để thực đoạn văn bên Gợi ý số thẻ định dạng: • • • • • • • • : In đậm chữ viết : In nghiêng viết : Gạch chân chữ viết : Gạch ngang chữ viết : Nhấn mạnh câu : Định dạng cho đoạn mã : Thước kẻ ngang tài liệu : Tô sáng chữ viết b Thẻ trích dẫn Sử dụng cặp thẻ trích dẫn thẻ để thể câu nói câu trích dẫn định dạng thêm tên người trích dẫn cách chuyên nghiệp Hãy sử dụng cặp thẻ để định dạng đoạn văn c Thẻ định dạng sẵn Thẻ thường dùng để đăng câu đối thoại in đoạn mã dễ phân biệt với văn thông thường BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Một số thể định dạng khác d Ảnh HTML Sử dụng thẻ HTML để load ảnh, số thuộc tính có thẻ • Src: Đường dẫn đến file ảnh (lưu ý website phải dùng đường dẫn TƯƠNG ĐỐI) • Width: độ rộng ảnh • Height: độ cao ảnh • Alt: thuộc tính ủy quyền, hình ảnh khơng hiển thị, xác định văn thay cho hình ảnh • Title: hover tới ảnh, hiển thị mơ tả ảnh Lưu ý: ü Khi thiết lập người ta set chiều thôi, điều giúp ảnh ko bị bễ ü Các trình duyệt khơng để border mặc định có nghĩa khơng xuất hiện, IE lại mặc định có, nên để đồng truyền duyệt nên chủ động set border=0 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT e Sử dụng thẻ thẻ , , để xây dựng bảng sau: • Bảng đơn giản • Bảng có tiêu đề bảng • Bảng có thuộc tính cellpadding cellspacing • Bảng có sử dụng thuộc tính colspan rowspan BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT • Bảng có sử dụng thuộc tính màu () • Bảng có sử dụng thuộc tính màu border with, heigh khung f Danh sách HTML Nhắc lại kiến thức:
- - Một danh sách khơng có thứ tự Nó xếp cách sử dụng bullet thường
- - Một danh sách qua xếp Nó sử dụng lược đồ số để liệt kê danh sách - Danh sách định nghĩa HTML Sắp xếp danh sách theo cách tương tự chúng xếp từ điển • Danh sách KHƠNG CĨ thứ tự BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT • Thay đổi kiểu bullet danh sách (mặc định “chấm trịn”) • Danh sách qua xếp BÀI TẬP THỰC HÀNH MÔN: LẬP TRÌNH WEB PHÍA CLIENT • Hãy thử sử dụng thuộc tính type cho
- theo gợi ý bên để xem danh sách có thay đổi
- - Giá Giá Giá Chữ Chữ trị trị trị cái mặc định số La Mã dạng chữ hoa sơ La Mã dạng chữ thường thường hoa • Hãy sử dụng thuộc tính start cho thẻ
- để xác định điểm bắt đầu cho dãy số bạn muốn
- - Dãy Dãy Dãy Dãy Dãy số số số số số bắt bắt bắt bắt bắt đầu đầu đầu đầu đầu từ từ từ từ từ IV iv d D g Thuộc tính màu HTML • Nhắc lại mã màu Trong thiết kế web người ta sử dụng dạng màu cho việc sử dụng i Sử dụng 16 màu tiêu chuẩn W3C ii Sử dụng mã thập lục phân BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT iii Sử dụng RGB • Sử dụng màu để tạo cho webstie theo hình bên • Sử dụng ảnh làm để tạo cho webstie theo hình bên 10 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Lab (Thời lượng: tiết) Mục tiêu: @ Biết cách sử dụng loại chèn CSS vào trang web @ Biết cách dụng số thuộc tính CSS cho việt định nghĩa đối tượng Bài tập 1: Thực lại code kết theo hình bên cách viết CSS (External Style, Interanl Style, inline Style) Bài tập 2: Định nghĩa màu mầu chữ 12 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Bài tập 3: khung viền (border) màu kết hợp Bài tập 4: Kết hợp border với margin Bài tập 5: Kết hợp border với padding 13 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT 14 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Lab (Thời lượng: tiết) Mục tiêu: @ Biết cách dụng số thuộc tính CSS cho thiết kế giao diện v Width, height, Float, clear, Postion, z-index, Margin, padding, Box-sizing @ Biết xây dựng số dạng layout @ Sử dụng chức photoshop việc xử lý giao diện @ Hiện thực giao diện website từ file hình cho trước @ Hiện thực giao diện Responsive đơn giản NỘI DUNG Bài tập 1: Sử dụng CSS HTML để thiết kế mẫu layout sau (Lưu ý: tạo file CSS riêng từ bên ngoài) Độ rộng layout web 900px, thành phần lại bên thí sinh tự cho theo tỉ lệ hình 15 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT • Bài tập 2: Sử dụng CSS HTML để thiết kế mẫu layout sau (Lưu ý: tạo file CSS riêng từ bên ngoài) Độ rộng layout web 900px, khoảng cách hở thành phần 15px, thành phần lại bên thí sinh tự cho theo tỉ lệ hình • Bài tập 3: Sử dụng CSS HTML để thiết kế mẫu layout sau (Lưu ý: tạo file CSS riêng từ bên ngoài) Độ rộng layout web 900px, thành phần lại bên thí sinh tự cho theo tỉ lệ hình 16 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Bài tập 6: Cho Đoạn HTML mẫu hình bên trái, sử dụng CSS để xây dựng lên giao diện hình bên phải 17 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT 18 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Bài tập 4: Xây dựng Layout template theo mẫu cho bên Hình: Layout gợi ý 19 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Hình: Template u cầu Bài tập 5: CSS nâng cao, responsive (Với kích thước hình lớn 800 px) 20 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT (Với kích thước hình nhỏ 800px) 21 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT (Với kích thước hình 600 px) 22 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT Lab (Thời lượng: tiết) Yêu cầu: ü Làm quen với gói giao diện AdminLTE ü Xây dựng số trang HTML,CSS theo yêu cầu NỘI DUNG Download gói giao diện AdminLTE 2.x link sau: https://github.com/mmdsharifi/AdminLTE-RTL Hãy tạo trang có nội dung sau a Trang đăng nhập (login): login.html b Trang thông tin chung: dashboard.html 23 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT c Trang danh sách sản phẩm: list.html d Trang thêm sản phẩm mới: add.html Sử dụng file HTML cho trước để xây dựng website có nội dung hình bên 24 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT 25 BÀI TẬP THỰC HÀNH MƠN: LẬP TRÌNH WEB PHÍA CLIENT 26