›
›

Bài giảng Lập trình Web - Chương 2: Tạo trang web với HTML - Trần Phước Tuấn

pdf 72 trang cucquyet12 2700
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Chương 2: Tạo trang web với HTML - Trần Phước Tuấn", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuong_2_tao_trang_web_voi_html_tran.pdf

Nội dung text: Bài giảng Lập trình Web - Chương 2: Tạo trang web với HTML - Trần Phước Tuấn

  1. TTạạoo trangtrang webweb vvớớii HTMLHTML Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com
  2. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Ví dụ đầu tiên về trang web 2. Giới thiệu chung về HTML 3. Đặc điểm của HTML 4. Trình bày văn bản trong HTML 5. Multimedia 6. Form trên trang web 7. Frame 7/24/2009 Lập trình Web - Trần Phước Tuấn 2
  3. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Ví dụ đầu tiên về trang web – Cấu trúc LậLậpp trìnhtrình webweb ChàoChào mmừừngng bbạạnn đếđếnn vvớớii HTML ! HTML ! 7/24/2009 Lập trình Web - Trần Phước Tuấn 3
  4. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Ví dụ đầu tiên về trang web – Cấu trúc § Thử nghiệm: –Mở trình duyệt web (IE) – Vào File/Open, chọn file CHAO.HTM vừa ghi – Nhấn OK → Có kết quả như hình bên § Thay đổi: – Quay lại Notepad, sửa lại nội dung trang web rồi ghi lại – Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết quả mới 7/24/2009 Lập trình Web - Trần Phước Tuấn 4
  5. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Giới thiệu chung về HTML § HTML = HyperText Markup Language ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ dùng để viết trang web. § Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. 7/24/2009 Lập trình Web - Trần Phước Tuấn 5
  6. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Đặc điểm của HTML §§ HTMLHTML sử dụng các thẻ (tagstags) để đđịịnhnh ddạạngng dữ liệu §§ HTMLHTML không phân biệt chữ hoa, chữ thường § Các trình duyệt thường không báo lỗi cú pháp HTML. § Khi viết sai cú pháp thì trình duyệt sẽ hiển thị không đúng với dự định. § Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau. 7/24/2009 Lập trình Web - Trần Phước Tuấn 6
  7. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Đặc điểm của HTML § Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ § Mỗi thuộc tính có tên thuộc tính (tên_TT) § Viết thẻ có thuộc tính: § Chú ý: – Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp –Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ bản. – Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường ( ) 7/24/2009 Lập trình Web - Trần Phước Tuấn 7
  8. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Đặc điểm của HTML § Có 2 loại thẻ: thẻ đóng và thẻ mở § Cách viết thẻ: – Thẻ mở: Ví dụ: , , – Thẻ đóng tương ứng: Ví dụ: , Chú ý: • Luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ: không có thẻ đóng • Các thẻ có thể lồng nhau, nhưng không đan xen lẫn nhau. 7/24/2009 Lập trình Web - Trần Phước Tuấn 8
  9. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Đặc điểm của HTML § Tập tin HTMLHTML có phần mở rộng (đuôi) là .HTM hoặc .HTML là tập tin thuần văn bản (plain text) § Có thể soạn thảo file HTML bằng bất cứ trình soạn thảo “văvănn bbảảnn thuthuầầnn” nào (Notepad, EditPlus, Notepad++, ) § Trình hỗ trợ soạn thảo HTML (trực quan, code): – Microsoft FrontPage – Macromedia Dreamweaver – 7/24/2009 Lập trình Web - Trần Phước Tuấn 9
  10. 4.4. TRÌNHTRÌNH BBÀÀYY TTÀÀII LILIỆỆUU TRONGTRONG HTMLHTML
  11. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Thẻ thể hiện cấu trúc tài liệu 2. Thẻ META 3. Thẻ định dạng khối 4. Thẻ định dạng danh sách 5. Thẻ định dạng ký tự 6. Liên kết 7. Bảng 8. Một số lưu ý 7/24/2009 Lập trình Web - Trần Phước Tuấn 11
  12. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. Thẻ thể hiện cấu trúc tài liệu 7/24/2009 Lập trình Web - Trần Phước Tuấn 12
  13. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. Thẻ thể hiện cấu trúc tài liệu § : Định nghĩa phạm vi của văn bản HTML § : Định nghĩa các mô tả về trang HTML. Thông tin trong tag này không được hiển thị trên trang web § : Mô tả tiêu đề trang web § : Xác định vùng thân của trang web, nơi chứa các thông tin 7/24/2009 Lập trình Web - Trần Phước Tuấn 13
  14. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. Thẻ thể hiện cấu trúc tài liệu ThuThuộộcc ttíínhnh ccủủaa BodyBody Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước BACKGROUND ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh. Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá BGCOLOR trị thì trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên. Xác định màu chữ của văn bản, kể cả các đề TEXT mục. Xác định màu sắc cho các siêu liên kết trong văn ALINK bản. Tương ứng, alink (active link) là liên kết VLINK đang được kích hoạt - tức là khi đã được kích LINK chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt; 7/24/2009 Lập trình Web - Trần Phước Tuấn 14
  15. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.2. Thẻ META § Đặt ở giữa § Thường dùng quy định thuộc tính cho trang web § Có tác dụng lớn với SearchSearch EngineEngine § Có 2 cách viết thẻ : 7/24/2009 Lập trình Web - Trần Phước Tuấn 15
  16. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.2. Thẻ META MMộộtt ssốố ththẻẻ MetaMeta thôngthông ddụụngng § § § § § § 7/24/2009 Lập trình Web - Trần Phước Tuấn 16
  17. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.2. Thẻ META Tự động chuyển hướng trang web § Tự động chuyển hướng trang web sang trang web khác (URL) sau một khoảng thời gian t (tính theo giây) § Cú pháp 7/24/2009 Lập trình Web - Trần Phước Tuấn 17
  18. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.3. Thẻ định dạng khối tài liệu Thẻ được sử dụng để DIV đóng khối văn bản. Thẻ được sử dụng để định P dạng một đoạn văn bản. Xác định 1 trong 6 cấp của tựa H1,H2,H3, ,H6 đề (heading) BR Ngắt dòng Văn bản nằm trong thẻ này sẽ PRE được trình bày như nguyên thủy của nó khi gõ vào. 7/24/2009 Lập trình Web - Trần Phước Tuấn 18
  19. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.4. Thẻ định dạng danh sách § OL – Danh sách được sắp xếp thứ tự Mục 1 Mục 2 –Hỗ trợ thuộc tính start cho Mục 3 phép chọn giá trị khởi đầu § UL – Danh sách không sắp xếp – Thẻ có thuộc tính TYPE có các giá trị Mục 1 • disc (chấm tròn đậm); Mục 2 • circle (vòng tròn); Mục 3 • square (hình vuông) 7/24/2009 Lập trình Web - Trần Phước Tuấn 19
  20. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.4. Thẻ định dạng danh sách 7/24/2009 Lập trình Web - Trần Phước Tuấn 20
  21. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.4. Thẻ định dạng danh sách 7/24/2009 Lập trình Web - Trần Phước Tuấn 21
  22. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.5. Thẻ định dạng ký tự In chữ đậm In chữ nghiêng In chữ gạch chân In chữ bị gạch ngang. In chữ lớn hơn kích thước font hiện thời lên một. Các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần. Đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ sẽ không có ý nghĩa. In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Tương tự như thẻ BIG Định dạng chỉ số trên (SuperScript) Định dạng chỉ số dưới (SubScript) Chọn font chữ, size hoặc color, kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4 ) so với font chữ hiện tại. 7/24/2009 Lập trình Web - Trần Phước Tuấn 22
  23. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.6. Liên kết § Thuộc tính: – href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường dẫn tương đối. – target=“tên cửa sổ đích”, tên cửa sổ phân biệt chữ hoa/thường • name: tải trang web vào frame có tên name •_blank: tải trang web vào cửa sổ mới •_parent: tải trang web vào cửa sổ cha của nó •_self: tải trang web vào chính cửa sổ hiện hành •_top: tải trang web vào cửa số cao nhất 7/24/2009 Lập trình Web - Trần Phước Tuấn 23
  24. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.6. Liên kết § Lưu ý: – Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail” – Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh” § Liên kết đến trang khác – Thuộc tính href=“url của trang khác” – Khi click vào liên kết sẽ chuyển đến trang khác § Liên kết trong cùng một trang – Thuộc tính href=“#id của thẻ trong trang” – Khi click và liên kết sẽ chuyến đến thẻ có “id” được ghi trong thuộc tính id của thẻ. 7/24/2009 Lập trình Web - Trần Phước Tuấn 24
  25. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.6. Liên kết § Địa chỉ URL phân làm 2 loại : – Địa chỉ tuyệt đối: Là vị trí tuyệt đối so với Mạng Internet – Địa chỉ tương đối: Là vị trí tương đối so với trang web hiện hành đang chứ liên kết. 7/24/2009 Lập trình Web - Trần Phước Tuấn 25
  26. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng 7/24/2009 Lập trình Web - Trần Phước Tuấn 26
  27. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng 7/24/2009 Lập trình Web - Trần Phước Tuấn 27
  28. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng 7/24/2009 Lập trình Web - Trần Phước Tuấn 28
  29. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng § HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ liệu của bảng. § Các thẻ: –Tạo bảng: : Mỗi bảng chỉ có 1 cặp thẻ này. –Tạo dòng: : Bảng có bao nhiêu dòng thì có bấy nhiêu cặp thẻ này –Tạo ô: • Ô tiêu đề của bảng: • Ô dữ liệu: Tổng số thẻ và bằng số ô của bảng. Dòng có bao nhiêu ô thì có bấy nhiêu thẻ và/hoặc nằm trong cặp thẻ tương ứng • Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là:   7/24/2009 Lập trình Web - Trần Phước Tuấn 29
  30. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng § tham số – border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không có đường viền. – width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể đặt theo 2 cách: • n: (n là số) Quy định độ rộng, cao là n pixels • n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa bảng. – cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp – cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô – bgcolor=“màu”: màu nền của bảng – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường dẫn tương đối nếu có thể. 7/24/2009 Lập trình Web - Trần Phước Tuấn 30
  31. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.7. Bảng § , – bgcolor=“màu”: màu nền của ô – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. Nên sử dụng đường dẫn tương đối nếu có thể. – width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt theo 2 cách: • n: (n là số) Quy định độ rộng, cao là n pixels • n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng. – align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: left, right, center, justify. – valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều đứng: top, middle, bottom. – colspan=“số”: số cột mà ô này chiếm (mặc định là 1) – rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1) – nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng 7/24/2009 Lập trình Web - Trần Phước Tuấn 31
  32. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.8. Một số lưu ý § Lưu ý: –Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1 khoảng trống duy nhất – Để gõ một số ký tự đặc biệt ta phải sử dụng mã: • Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):   •Dấu nhỏ hơn ( ): < > •Dấu ngoặc kép (“): " • Ký hiệu Ó: © • § Ghi chú trong HTML: 7/24/2009 Lập trình Web - Trần Phước Tuấn 32
  33. 5.5. MultimediaMultimedia
  34. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Hình ảnh 2. Âm thanh 3. Video 4. Flash 5. Applet 7/24/2009 Lập trình Web - Trần Phước Tuấn 34
  35. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5.1. Hình ảnh § : Không có thẻ đóng § Các thuộc tính của tag : – Align: left, right, center – SRC : Đường dẫn đến file hình ảnh – ALT : Chú thích cho hình ảnh – Position: Top, Bottom, Middle – Border : Độ dày nét viền quanh ảnh (default=0) – Width: độ rộng – Height: độ cao § Đặt ảnh nền cho trang web – 7/24/2009 Lập trình Web - Trần Phước Tuấn 35
  36. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5.2. Âm thanh § : Không có tag đóng § Thuộc tính của tag – SRC : Đường dẫn đến file âm thanh – Loop : Số lần lặp (bằng -1 : Lặp vô hạn) § thường đặt trong tag của trang web. § Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 36
  37. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5.3. Video § Thẻ không có thẻ đóng § Thuộc tính – Width: rộng – Height: cao – src: địa chỉ của tập tin video § 7/24/2009 Lập trình Web - Trần Phước Tuấn 37
  38. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5.3. Flash § Thẻ không có thẻ đóng § Thuộc tính – Width: rộng – Height: cao – src: địa chỉ của tập tin flash § 7/24/2009 Lập trình Web - Trần Phước Tuấn 38
  39. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5.3. Applet 7/24/2009 Lập trình Web - Trần Phước Tuấn 39
  40. 6.6. FORMFORM TRONGTRONG TRANGTRANG WEBWEB
  41. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Giới thiệu về Form(GT, tag, Vd) 2. Các thành phần của Form 3. Một số thuộc tính của form và input 4. Gởi dữ liệu bằng phương thức POST/GET 5. Thẻ 7/24/2009 Lập trình Web - Trần Phước Tuấn 41
  42. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.1. Giới thiệu về Form § Được dùng để nhận dữ liệu từ phía người dùng § Giúp gởi yêu cầu của người dùng đến trang xử lý trong ứng dụng web § Tag dùng để chứa các thành phần khác của form § Những thành phần nhập liệu được gọi là Form Field – text field – password field – multiple-line text field – 7/24/2009 Lập trình Web - Trần Phước Tuấn 42
  43. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.1. Giới thiệu về Form § Là container chứa các thành phần nhập liệu khác. § Các thuộc tính của – NAME: tên FORM – ACTION: chỉ định trang web nhận xử lý dữ liệu từ FORM này khi có sự kiện click của button SUBMIT. – METHOD: Xác định phương thức chuyển dữ liệu (POST,GET) 7/24/2009 Lập trình Web - Trần Phước Tuấn 43
  44. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.1. Giới thiệu về Form Dangnhap.html 7/24/2009 Lập trình Web - Trần Phước Tuấn 44
  45. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Nội dung § Text field § Password field § Multiple-line text field § Hidden Text field § Pull-down menu (Combo box, List box) § Check box § Radio button § File Form Control § Submit Button, Reset Button, Generalized Button § Label § Field Set § Tiện ích form 7/24/2009 Lập trình Web - Trần Phước Tuấn 45
  46. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Text field § Dùng để nhập một dòng văn bản § Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 46
  47. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Password field § Dùng để nhập mật khẩu § Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 47
  48. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Multiline text § Dùng để nhập văn bản nhiều dòng § Ví dụ: This is a text on multiline. 7/24/2009 Lập trình Web - Trần Phước Tuấn 48
  49. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Hidden text § Dùng để truyền 1 giá trị của thuộc tính value khi form được submit § Không hiển thị ra trên màn hình 7/24/2009 Lập trình Web - Trần Phước Tuấn 49
  50. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Pull-down XemXem codecode ởở slideslide titiếếpp 7/24/2009 Lập trình Web - Trần Phước Tuấn 50
  51. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Combo box ListList boxbox:: combo box: multiple> Window Media 10 Jet Audio 9 Windows XP Windows XP SP2 Windows Vista Office 2007 7/24/2009 Lập trình Web - Trần Phước Tuấn 51
  52. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Checkbox Check box group: Anh văn: Hoa: Nhật: 7/24/2009 Lập trình Web - Trần Phước Tuấn 52
  53. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Radio Lưu ý: trường hợp hai radio không cùng tên. Radio Button Group : Nam: Nu: 7/24/2009 Lập trình Web - Trần Phước Tuấn 53
  54. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – File § Sử dụng để upload file lên server 7/24/2009 Lập trình Web - Trần Phước Tuấn 54
  55. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Submit § Nút phát lệnh và gởi dữ liệu của form đến trang xử lý. § Mỗi form chỉ có một nút submit và nút này được viền đậm 7/24/2009 Lập trình Web - Trần Phước Tuấn 55
  56. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Reset § Dùng để trả lại giá trị mặc định cho các control khác trong form 7/24/2009 Lập trình Web - Trần Phước Tuấn 56
  57. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Button 7/24/2009 Lập trình Web - Trần Phước Tuấn 57
  58. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – LABEL 7/24/2009 Lập trình Web - Trần Phước Tuấn 58
  59. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.2. Các thành phần của Form – Fieldset Subject English Mathematics Graph Theory 7/24/2009 Lập trình Web - Trần Phước Tuấn 59
  60. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.3. Các tiện ích của form và input § Accesskey=char –Tạo phím nóng cho form fields. – Áp dụng cho tất cả form fields. – Cách nhấn Alt + char – Tránh các phím tắt của browser. § Title = string –Tạo tooltip cho form fields. – Áp dụng cho tất cả form fields. § Autocomplete = ON/OFF –Gợi ý tự động khi nhập liệu. – Áp dụng cho tất cả tag form, input. 7/24/2009 Lập trình Web - Trần Phước Tuấn 60
  61. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.3. Các tiện ích của form và input §Để sử dụng tính năng AutoComplete thì phải mở nó lên trong trình duyệt web. §Cách mở: –Tool à Internet Options –Chọn tab Content –Chọn settings trong ô AutoComplete 7/24/2009 Lập trình Web - Trần Phước Tuấn 61
  62. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.4. Gởi dữ liệu bằng phương thức POST/GET § Các đối số của Form được ghi kèm theo vào đường dẫn URL của thuộc tính Action trong tag § Khối lượng dữ liệu đối số được truyền đi của Form bị giới hạn bởi chiều dài tối đa của một URL trên Address bar. § Chiều dài tối đa của một URL là 20482048 bytesbytes GETGET 7/24/2009 Lập trình Web - Trần Phước Tuấn 62
  63. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.4. Gởi dữ liệu bằng phương thức POST/GET Anh văn: Hoa: Nhật: GET GET 7/24/2009 Lập trình Web - Trần Phước Tuấn 63
  64. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.4. Gởi dữ liệu bằng phương thức POST/GET § Các đối số của Form được truyền “ngầm” bên dưới § Khối lượng dữ liệu đối số được truyền đi của Form không phụ thuộc vào URL à Không bị giới hạn § Chỉ sử dụng được phương thức truyền POST khi Action chỉ định đến trang web thuộc dạng xử lý trên Server POSTPOST 7/24/2009 Lập trình Web - Trần Phước Tuấn 64
  65. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.4. Gởi dữ liệu bằng phương thức POST/GET POSTPOST 7/24/2009 Lập trình Web - Trần Phước Tuấn 65
  66. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 6.5. Thẻ § Dùng để tạo hiệu ứng chữ chạy trên màn hình trình duyệt 7/24/2009 Lập trình Web - Trần Phước Tuấn 66
  67. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 7. Khung (Frame) § Cho phép chia một trang web làm nhiều phần, mỗi phần chứa nội dung của 1 trang web khác § Trình duyệt có thể không hỗ trợ khung 7/24/2009 Lập trình Web - Trần Phước Tuấn 67
  68. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 7. Khung (Frame) § Tạo trang web chứa các khung: – Thay thẻ bằng: các khung nội dung trong trường hợp trình duyệt không hỗ trợ khung 7/24/2009 Lập trình Web - Trần Phước Tuấn 68
  69. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 7. Khung (Frame) § Một số thuộc tính của – rows = “n1, n2, n k” hoặc cols = “n1, n2, nk”: Quy định có k dòng (hoặc cột), độ rộng dòng (cột) thứ i là ni. ni là số, có thể thay bằng *: phần còn lại – frameborder = yes hoặc no – framespacing = “n”: Khoảng cách giữa 2 khung 7/24/2009 Lập trình Web - Trần Phước Tuấn 69
  70. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 7. Khung (Frame) § Tạo 1 khung có nội dung là 1 trang web nào đó: – Thuộc tính: • src=“Địa chỉ của trang chứa nội dung” • name=“tên khung” • noresize: Không được thay đổi kích thước § Thẻ mặc định – Thuộc tính • target=“Cửa sổ mặc định” • href=“Địa chỉ gốc mặc định” 7/24/2009 Lập trình Web - Trần Phước Tuấn 70
  71. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5. HTML – thẻ § Chức năng –Xác định khối văn bản –Chia tài liệu thành những khối riêng biệt. –Hỗ trợ canh lề, định dạng style § Thuộc tính align, class, dir, id, lang, nowrap, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, title 7/24/2009 Lập trình Web - Trần Phước Tuấn 72