phát triỂn Ứng dỤng web · pdf filephát triỂn Ứng dỤng web. nội...
TRANSCRIPT
![Page 1: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/1.jpg)
Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính
Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN
E-mail: [email protected], [email protected]: 0987.257.504
Bài giảng
PHÁT TRIỂN ỨNG DỤNG WEB
![Page 2: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/2.jpg)
Nội dung webBài 3
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 3: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/3.jpg)
Nội dung
• HTML • CSS• JavaScript• DOM• Sự phát triển: HTML5, CSS3
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 4: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/4.jpg)
Web Browser
Mã nguồn trang web được thểhiện bằngHTML, CSSjavascript Web Browser
Do Web Servergửi tới.
Trình diễn trêngiao diện
người dùng
•Gửi yêu cầu và nhận nội dung (mã nguồn HTML, CSS, javascript) trang web từ Web Server.•Thông dịch mã nguồn trang web và trình diễn kết quả trên giao diện người dùng.
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 5: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/5.jpg)
Nội dung web
• Một trang web bao gồm một tập các đối tượng tài liệu được
– khai báo bằng HTML– tổ chức lưu trữ theo cấu trúc DOM– định dạng hiển thị bởi CSS– quản lý bởi javascript
Quan tr ngọ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 6: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/6.jpg)
HTML: HyperText Markup Language
• Ngôn ngữ đánh dấu siêu văn bản.• Dùng để khai báo các đối tượng tài liệu
– Các đối tượng nội dung: Input text, text area, radio button, check box, list box, button, submit, hidden, hyperlink, text, image, …
– Các đối tượng định dạng: font, italic, bold, …
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 7: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/7.jpg)
Các thẻ HTML• Các đối tượng tài liệu được khai báo bởi
các thẻ HTML• Thẻ đôi: <tenThe thuoctinh1=“giatri1”
thuoctinh2=“giatri2” …> Các đối tượng bên trong/con</tenThe>.
• Thẻ đơn: <tenThe thuoctinh1=“giatri1” thuoctinh2=“giatri2” …/>.
• Ví dụ:– <p> text text text </p>– <img src=“pic.png" />
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 8: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/8.jpg)
Cấu trúc trang HTML
<!DOCTYPE html> <html>
<head><title> Tiêu đề </title><meta …><link …><script …>
</head><body>
Các đối tượng tài liệu được khai báo bởi các thẻ HTML <!-- Chú thích trong HTML -->
</body>
</html>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 9: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/9.jpg)
Đặt bảng mã ký tự cho trang
<head> …<meta http-equiv="content-type"
content="text/html; charset=utf-8">
…</head>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 10: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/10.jpg)
Đặt logo trên thanh địa chỉ trình duyệt
<head> …<link rel="Shortcut Icon“ href =
“logo.ico" /> …</head>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 11: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/11.jpg)
Các thẻ định dạng văn bản
• Tạo đầu mục • Làm đậm, nghiêng, gạch chân, gạch
ngang• Thay đổi font chữ• Xuống dòng• Ngắt đoạn• Mũ trên, mũ dưới• Dấu cách• Ký tự đặc biệt
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 12: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/12.jpg)
Tạo đầu mục: <hi> </hi>, i = 1, 2, …
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 13: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/13.jpg)
Làm đậm: <b> </b>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 14: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/14.jpg)
Làm nghiêng: <i> </i>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 15: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/15.jpg)
Kết hợp nhiều thẻ: Thẻ lồng nhau
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 16: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/16.jpg)
Gạch chân: <u> </u>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 17: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/17.jpg)
Gạch ngang: <s> </s>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 18: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/18.jpg)
Mũ trên <sup> </sup>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 19: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/19.jpg)
Mũ dưới: <sub> </sub>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 20: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/20.jpg)
Thay đổi font: <font> </font>
Kích thước font: -7, …, 7Màu chữ theo tên: red, green, blue, yellow, …
Màu chữ theo RGB: #rrggbb
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 21: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/21.jpg)
Ngắt dòng: <br>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 22: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/22.jpg)
Tạo đoạn văn: <p> </p>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 23: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/23.jpg)
Ký tự đặc biệt: &name; &#code
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 24: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/24.jpg)
Ký tự đặc biệt: &name; &#codeKý tự Mã chữ Mã số
 < < <> > >& & &¢ ¢ ¢£ £ £¥ ¥ ¥€ € €§ § §© © ©® ® ®
™ ™ ™Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 25: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/25.jpg)
Ví dụ trang văn bản
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 26: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/26.jpg)
Hiển thị ảnh: <img src = …>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 27: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/27.jpg)
Hiển thị audio/video: <embed>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 28: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/28.jpg)
Tạo đường kẻ ngang: <hr>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 29: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/29.jpg)
Danh sách có thứ tự <ol>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 30: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/30.jpg)
Danh sách không thứ tự <ul>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 31: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/31.jpg)
Danh sách định nghĩa <dl>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 32: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/32.jpg)
Tạo siêu liên kết: <a href=…></a>
<a href = "Default.htm"> Về trang đầu </a>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 33: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/33.jpg)
Tạo siêu liên kết: <a href = …></a>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 34: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/34.jpg)
Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>
• Tạo điểm đánh dấu<a name=“bookmark1”><a>
• Tạo liên kết đến điểm đánh dấu<a href=“#name”>Chuyển đến điểm
đánh dấu</a>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 35: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/35.jpg)
Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>
• Tạo điểm đánh dấu ở Trangmoi.htm<a name=“bookmark1”><a>
• Tạo liên kết đến điểm đánh dấu<a href=“trangmoi.htm#name”>Sang
trang mới và chuyển đến điểm đánh dấu trên trang mới</a>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 36: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/36.jpg)
Tạo bảng: <table>…</table>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 37: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/37.jpg)
Tạo bảng: Đường viền
Lê Đình Thanh, Bài giảng Lập trình web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 38: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/38.jpg)
Tạo bảng: Đường viền 1 nét
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 39: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/39.jpg)
Tạo bảng: Tô màu
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 40: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/40.jpg)
Tạo bảng: Căn lề chữ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 41: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/41.jpg)
Tạo bảng: Trộn cột
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 42: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/42.jpg)
Tạo bảng: Trộn cột
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 43: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/43.jpg)
Tạo bảng: Trộn cột
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 44: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/44.jpg)
Tạo bảng: Trộn hàng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 45: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/45.jpg)
Tạo bảng: Bảng hoàn chỉnh
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 46: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/46.jpg)
Tạo bảng: Cách chữ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 47: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/47.jpg)
Tạo điều khiển nút bấm
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 48: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/48.jpg)
Tạo điều khiển nút kiểm
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 49: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/49.jpg)
Tạo điều khiển radio
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 50: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/50.jpg)
Tạo điều khiển ô chữ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 51: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/51.jpg)
Tạo điều khiển ô mật khẩu
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 52: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/52.jpg)
Tạo điều khiển ô văn bản
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 53: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/53.jpg)
Tạo điều khiển danh sách (đơn chọn)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 54: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/54.jpg)
Tạo điều khiển danh sách (đa chọn)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 55: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/55.jpg)
Tạo điều khiển nhãn
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 56: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/56.jpg)
Tạo điều khiển upload tệp
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 57: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/57.jpg)
Tạo điều khiển phân đoạn
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 58: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/58.jpg)
Khoanh vùng có nhãn
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 59: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/59.jpg)
Tạo điều khiển ẩn
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 60: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/60.jpg)
Khung nội tại <iframe>
• Khung nội tại (iframe) cho phép nhúng các trang (con) trong trang (cha)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 61: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/61.jpg)
Khung nội tại <iframe>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 62: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/62.jpg)
Tạo tập khung (frameset)
• Frameset (tập khung) được sử dụng để chia màn hình client thành nhiều vùng khác nhau, mỗi vùng cho hiển thị một trang riêng.
• Ví dụ: Chia màn hình thành 2 frames theo chiều ngang
<frameset rows="80,*" frameborder="NO" border="0" framespacing="0"> <frame src=“Defaut.htm"
name="topFrame" scrolling="NO" noresize >
<frame src=“Trang2.htm" name="mainFrame">
</frameset>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 63: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/63.jpg)
Tạo tập khung
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 64: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/64.jpg)
Ví dụ: Sử dụng frameset để xây dựng cấu trúc trang
Banner trang web
Nội dung bản quyền
Các mụcchọn(menu)
Trang nội dung
Một cấu trúc trang điển hình
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 65: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/65.jpg)
Sử dụng frameset để xây dựng cấu trúc trang
Banner trang web
Nội dung bản quyền
Các mụcchọn(menu)
Trang nội dung
Trước hết, chia màn hình thành 3 frames theo chiều ngang
<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src="" name="topFrame" scrolling="NO" noresize> <frame src="" name="mainFrame">
<frame src="" name=“bottomFrame"></frameset>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 66: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/66.jpg)
Sử dụng frameset để xây dựng cấu trúc trang
Banner trang web
Nội dung bản quyền
Các mụcchọn(menu)
Trang nội dung
Tiếp theo, chia frame thứ 2 (giữa) thành hai frames theo chiều dọc
Lê Đình Thanh, Bài giảng Lập trình web.
<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src="" name="topFrame" scrolling="NO" noresize> <frameset cols = “200, *” border = “0”>
<frame src = “” name = “menu”><frame scr = “” name = “noidung”>
</frameset><frame src="" name=“bottomFrame">
</frameset>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 67: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/67.jpg)
Sử dụng frameset để xây dựng cấu trúc trang
Banner trang web
Nội dung bản quyền
Các mụcchọn(menu)
Trang nội dung
Cuối cùng, đặt các trang vào các frames (thuộc tính src của frame)
Lê Đình Thanh, Bài giảng Lập trình web.
<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src=“Top.htm" name="topFrame" scrolling="NO" noresize> <frameset cols = “200, *” border = “0”>
<frame src = “Menu.htm” name = “menu”><frame scr = “Noidung.htm” name = “noidung”>
</frameset><frame src=“Bottom.htm" name=“bottomFrame">
</frameset>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 68: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/68.jpg)
Tạo Form
• Một Form là một phân đoạn của trang web được sử dụng để quản lý các điều khiển web (các đối tượng tài liệu).
• Client muốn gửi các giá trị do người dùng nhập vào các điều khiển phải để các điều khiển này vào Form và đệ trình (submit) Form lên Server.
• Khi một Form được đệ trình lên Server, tất cả các điều khiển trên Form đó đều được đệ trình.
• Một trang web có thể có nhiều form khác nhau (thông thường chỉ cần sử dụng 1 form/trang)
– (:- Form giống như một con thuyền chở khách qua sông, bên bờ này là client, bên bờ kia là server. Các điều khiển là hành khách, muốn sang sông phải lên thuyền. Tất cả hành khách trên cùng chuyến thuyền sẽ được chở sang bờ server cùng lúc).
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 69: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/69.jpg)
Tạo Form
Các thuộc tính của Form:- id: Định danh của form- Request method: GET/POST- Action: Trang được yêu cầu
khi đệ trình form- Các điều khiển trên form.
Sử dụng nút submit để đệ trình form
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 70: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/70.jpg)
Tạo Form
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 71: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/71.jpg)
Tạo Form
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 72: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/72.jpg)
Tạo Form
file:///D:/Web_Vidu/Default.htm?hoten=Ho%C3%A0ng+B%C3%A1+Th%C3%A0nh&ngaysinh=12%2F10%2F1984>=on
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 73: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/73.jpg)
Tạo Form
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 74: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/74.jpg)
Tạo Form
Nhắc lại: Với phương thức POST, các tham số + giá trịđược đệ trình nhưng không được nối vào URL
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 75: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/75.jpg)
Bảng định dạngCSS: Cascade Style Sheet
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 76: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/76.jpg)
Lý do sử dụng CSS
• Nguyên lý Nhất quán trong thiết kế giao diện– Nhiều đối tượng cần được định dạng theo một kiểu thống nhất. Ví dụ,
tất cả các bảng có cùng một kiểu, tất cả các siêu liên kết có cùng một kiểu. Nhiều trang cần được dàn trang một cách thống nhất
• Nguyên lý W1U
n
– Kiểu định dạng cần được định nghĩa một lần và sử dụng nhiều lần, nhiều nơi.
• Nguyên lý tách biệt nội dung và trình diễn– Dùng HTML khai báo các đối tượng tài liệu (nội dung)– Dùng CSS để xác định cách trình diễn các đối tượng tài liệu
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 77: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/77.jpg)
Bảng định dạng (Style Sheet - SS)
• Bộ chọn {thuộc tính: giá trị; thuộc tính: giá trị; …}– Bộ chọn theo kiểu phần tử HTML: tenLopHTML
● Chọn các đối tượng được khai báo bằng thẻ tenLopHTML – Bộ chọn theo định danh: #tenBochon
● Chọn đối tượng có id=“tenBochon”– Bộ chọn theo lớp: .tenBochon
● Chọn các đối tượng có class=“tenBochon”– Bộ chọn theo thuộc tính:[thuoctinh], [thuoctinh=giatri],
[thuoctinh~=giatri], [thuoctinh|=giatri]● Chọn các đối tượng có thuộc tính thuoctinh
– Bộ chọn không tên (nội tuyến): {}● Đặt thuộc tính style = {} của đối tượng tài liệu
– Khác
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 78: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/78.jpg)
SS: Bộ chọn theo kiểu phần tử HTML
• HTML {} – Chọn đối tượng html• BODY {} – Chọn đối tượng body• TD {} – Chọn các đối tượng td• TEXTAREA {} – Chọn các đối tượng textarea• LABEL {} – Chọn các đối tượng span• INPUT {} – Chọn các đối tượng input• SELECT {} – Chọn các đối tượng select• A {} – Chọn các đối tượng liên kết <a>• UL{} – Chọn các đối tượng danh sách không sắp xếp• OL{} – Chọn các đối tượng danh sách sắp xếp• DL{} – Chọn các đối tượng danh sách định nghĩa• UL LI {} – Chọn các đối tượng mục trong danh sách không thứ tự• OL LI {} – Chọn các đối tượng mục trong danh sách không thứ tự• DL DT/DD - Chọn các đối tượng mục trong danh sách định nghĩa
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 79: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/79.jpg)
SS: Bộ chọn theo kiểu phần tử HTML
• Ví dụ:<style type=“text/css”>
span{color: #ff0000;}
</style><span>This is a styled text.</span><p>This is a normal text.</p>This is another normal text.
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 80: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/80.jpg)
SS: Bộ chọn theo định danh
• Chọn đối tượng tài liệu có id=“tenBochon”• Ví dụ:
<style type=“text/css”> #note1{color: #ff0000;}
</style><span id=“note1”>This is a styled text.</span><span id=“note2”>This is a normal text.</span><span>This is another normal text.</span>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 81: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/81.jpg)
SS: Bộ chọn theo lớp
• Chọn các đối tượng có class=“tenBochon”
• Ví dụ:<style type=“text/css”>
.note{color: #ff0000;}
</style><span class=“note”>This is a styled
text.</span><span>This is a normal text. </span>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 82: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/82.jpg)
SS: Bộ chọn theo thuộc tính
• Chọn các đối tượng có thuộc tính thỏa
– [thuoctinh]– [thuoctinh = giatri]– [thuoctinh ~= giatri] (chứa giá trị)– [thuoctinh |= giatri] (bắt đầu bằng giá
trị)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 83: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/83.jpg)
SS: Một số bộ chọn khác
• *: Chọn tất cả các đối tượng• container e: Chọn đối tượng được chọn bởi e
ở bên trong đối tượng được chọn bởi container
• parent>e: Chọn đối tượng được chọn bởi e có cha được chọn bởi parent
• prev-sibling + e: Chọn đối tượng được chọn bởi e có đối tượng liền trước được chọn bởi prev-sibling
• …
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 84: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/84.jpg)
Bộ chọn giả
selector:pseudo-class {} selector.class:pseudo-class {}
:hover – Đưa chuột vào:focus – Được đặt tâm điểm:link – Liên kết thường:visited – Liên kết đã được thăm:active – Liên kết đang được thăm:first-child – Nút con đầu tiên
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 85: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/85.jpg)
Phần tử giả
selector:pseudo-element {} selector.class:pseudo-element {}
:first-letter – Ký tự đầu tiên:first-line – Dòng đầu tiên:before – Phía sau:after – Phía trước:lang(language) – Ngôn ngữ (thuộc tính
lang)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 86: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/86.jpg)
Bộ chọn lồng nhau
• Đối tượng tài liệu áp dụng CSS phải được chọn bởi tất cả các bộ chọn
S1 S2 … Sn {attribute1: value1;attribute2: value2;…
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 87: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/87.jpg)
Nhóm các bộ chọn
• Nhiều bảng CSS có cùng nội dung/thân
S1, S2, …, Sn {attribute1: value1;attribute2: value2;…
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 88: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/88.jpg)
Chú thích
/*Chú thích trong CSS*/
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 89: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/89.jpg)
Khai báo CSS trong
<head><style type=“text/css”>#note {color:sienna;}.menuItem {background-image:url("images/back40.gif");}</style></head><body><span class=“menuItem”>Trang nhất </span><span id=“note”>Hãy chọn thực đơn </span></body>
• Nếu CSS không cần dùng ở các trang khác
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 90: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/90.jpg)
Khai báo CSS ngoài
• Các bảng kiểu được định nghĩa và lưu trong tệp có đuôi .css.
• Bao hàm tệp .css trong tệp HTML.
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 91: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/91.jpg)
Tạo CSS ngoài: style.css
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 92: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/92.jpg)
Bao hàm CSS ngoài
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 93: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/93.jpg)
Nối các bảng định dạng
• Khi có nhiều bảng định dạng cùng chọn một đối tượng HTML, đối tượng HTML sẽ được định dạng bởi VSS (như một bảng định dạng ảo được tạo bằng cách nối các bảng định dạng):
– VSS = Các thuộc tính của SS nội tuyến– VSS += Các thuộc tính của SS trong không có trong VSS– VSS += Các thuộc tính của SS ngoài không có trong VSS– VSS += Các thuộc tính mặc định của trình duyệt không có
trong VSS
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 94: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/94.jpg)
Hiển thị đối tượng tài liệu – Box model
• Mỗi đối tượng tài liệu được hiển thị trong một vùng hình chữ nhật (box model)
padding-right
height
border-right
margin-right
padding-left
border-left
margin-left
margin-bottomborder-bottompadding-bottom
margin-top border-top padding-top
width
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 95: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/95.jpg)
Hiển thị đối tượng tài liệu – Box model - Vùng hiển thị nội dung
• Chiều cao và chiều rộng vùng hiển thị nội dung của đối tượng tài liệu thường được tính toán tự động để toàn bộ nội dung được nhìn thấy
• nhưng có thể ấn định bằng các thuộc tính– width, height– max-width, max-height, min-width, min-heightvới giá trị được xác định bằng độ dài (pixel, pt, …) hoặc phần
trăm so với đối tượng chứaVí dụ width:50%; height:10px;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 96: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/96.jpg)
Hiển thị đối tượng tài liệu – Box model - Vùng đệm
• Vùng đệm là vùng trống nằm giữa vùng hiển thị nội dung và đường viền, được xác định bởi các thuộc tínhpadding-toppadding-bottompadding-rightpadding-left
với giá trị tính theo chiều dài hoặc phần trăm.
• Viết tắt:padding: top right bottom leftpadding: top right(left) bottompadding: top(bottom) right(left) padding: top(right, bottom, left)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 97: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/97.jpg)
Hiển thị đối tượng tài liệu – Box model - Viền
• border-[side-]style: none/solid/dashed/dotted/double/groove/ridge/inset/outset/hidden
• border- [side-]width: thin/medium/thick/#px
• border- [side-]color: color-value• border[-side]: style width color
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 98: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/98.jpg)
Hiển thị đối tượng tài liệu: Box model - Lề
• Lề là khoảng trống bao bên ngoài• margin[-side]: auto/inherit/#
%/#length
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 99: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/99.jpg)
Hiển thị đối tượng tài liệu: Tính chất
• Kiểu hiển thị– display: none/inline/block;
• Khả năng nhìn thấy– visibility: hidden;
• Độ trong suốt– opacity: 0.4;
inlineinline
Block
Các đối tượng có thể đứng cạnh nhau
Đối tượng không thể đứngcạnh đối tượng khác
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 100: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/100.jpg)
Vị trí hiển thị đối tượng• position:static
– Các đối tượng liên tiếp nhau được hiển thị theo luồng bình thường (normal flow), tức là cạnh nhau từ trái sang phải rồi từ trên xuống dưới (đối tượng có kiểu hiển thị block không thể hiển thị bên cạnh (liền trái, liền phải) các đối tượng khác)
obj1 obj2 obj3 obj4
obj7
obj5
obj8
obj6
obj9
obj10 obj11 obj12 obj13
obj16
obj14
obj17
obj15
obj18 obj19
Dòng 1
Dòng 2
Dòng 3
Dòng 4
Dòng 5
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 101: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/101.jpg)
Vị trí hiển thị đối tượng• position:relative
– Vị trí hiển thị đối tượng có thể được di rời trái (left), phải (right), lên trên (top), xuống dưới (bottom) so với vị trí tĩnh/trong luồng của nó.
– Vùng hiển thị trong luồng vẫn được giữ chỗ– Đối tượng di rời có thể hiển thị chồng lên các đối tượng khác
obj1 obj2 obj3 obj4
obj7
obj5
obj8
obj6
obj9
obj10 obj11 obj12 obj13
obj16
obj14
obj17
obj15
obj18 obj19
Dòng 1
Dòng 2
Dòng 3
Dòng 4
Dòng 5
obj13
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 102: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/102.jpg)
Vị trí hiển thị đối tượng• position:fixed
– Vị trí hiển thị đối tượng được xác định tương đối so với vị trí cửa sổ, không thay đổi khi cửa sổ được cuộn
– Đối tượng hiển thị cố định có thể hiển thị chồng lên các đối tượng khác
obj1 obj2 obj3 obj4
obj7
obj5
obj8
obj6
obj9
obj10 obj11 obj12 obj13
obj16
obj14
obj17
obj15
obj18 obj19
Dòng 1
Dòng 2
Dòng 3
Dòng 4
Dòng 5
obj20
windowtop
right
bottom
left
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 103: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/103.jpg)
Vị trí hiển thị đối tượng
• position: absolute;– Vị trí hiển thị của đối tượng được xác định
tương đối so với vị trí của đối tượng tổ tiên gần nhất không theo dòng, được xác định bằng độ dời
● top, right, bottom, left– Có thể hiển thị chồng lên các đối tượng
khác● z-index
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 104: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/104.jpg)
Vị trí hiển thị đối tượng bên trong
Nút
Nút con 1
Nút con 2 nút con 3
Nút con 4
Nút con 5
Nút con 6 Nút con 7
Nút con 8
Nút cha
Nút trước
Nút sau
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 105: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/105.jpg)
Vị trí hiển thị đối tượng: Đặt trôi
• float: left/right;• Đối tượng được đặt trôi sẽ trôi về một
phía (trái/phải) xa nhất có thể• Các đối tượng sau đối tượng đặt trôi
chảy theo đối tượng được đặt trôi. Sử dụng
• clear: left/right/both;• để xóa dừng trôi.
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 106: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/106.jpg)
Giá trị màu
• Tên: “red”, …• RGB: “rgb(255, 0, 0)”, …• Hexa: “#ff0000”
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 107: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/107.jpg)
Định dạng nền
• background-color: #6495ed;• background-image:url('paper.gif'); • background-repeat:repeat-x; • background-attachment:fixed;• background-position:right top;
• background:#ffffff url('img_tree.png') no-repeat right top;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 108: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/108.jpg)
Định dạng văn bản
• color:#00ff00;• text-align:center/left/right/justify;• vertical-align:bottom/top/middle;• text-decoration:none/underline/ line-
through/ overline/blink;• text-transform:uppercase/ lowercase/
capitalize;• text-indent:50px;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 109: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/109.jpg)
Định dạng font chữ
• font-family:"Times New Roman", Times, serif;
• font-size:40px;• font-style:normal/italic/bold;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 110: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/110.jpg)
Định dạng danh sách
• list-style-type: none/ circle/ square/ upper-roman/ lower-alpha/…;
• list-style-image: url('sqpurple.gif');
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 111: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/111.jpg)
Địng dạng bảng
• border-collapse:collapse;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 112: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/112.jpg)
Hiển thị một miếng ảnh
• background:url(img_navsprites.gif) 0 0;
• width:46px;• height:44px;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 113: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/113.jpg)
Ví dụ: Dàn trang
• Sử dụng div (nên dùng)• Sử dụng table
top
left right
bottom
center
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 114: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/114.jpg)
Ví dụ: Dàn trang sử dụng div
#container
#top
#left#right
#bottom
#center
#container
#middle
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 115: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/115.jpg)
Ví dụ: Dàn trang sử dụng div
HTML
<div id="container"><div id="top"></div><div id="middle"><div id="left"></div><div id="center"></div><div id="right"></div><div class = "spacer"> </div></div><div id="bottom"></div>
</div>
CSS
#left, #right, #center {display: inline;float:left;
}.spacer {clear:both;}
Lê Đình Thanh, Bài giảng Lập trình web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 116: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/116.jpg)
Ví dụ: Dàn trang sử dụng table
#container
#top
#left#righ
t
#bottom
#center
#container
#child
#middle
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 117: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/117.jpg)
Ví dụ: Dàn trang sử dụng table
<table id=“container”><tr id=“top”><td></td></tr><tr id=“middle”>
<td><table id=“child”>
<tr><td id=“left”></td><td id=“center”></td><td id=“right”></td>
</tr></table>
</td>
</tr><tr id=“bottom”><td></td></tr>
</table>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 118: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/118.jpg)
Ví dụ: Thực đơn
• Single vertical• Single horizontal• Dropdown• Flyout• Dropline
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 119: PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối](https://reader034.vdocuments.mx/reader034/viewer/2022052319/5a741a0c7f8b9aea3e8ba20a/html5/thumbnails/119.jpg)
Tiếp theoDOM + javascript + jQuery
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.