Lập trình web - Bìa 2: Ngôn ngữ HTML

11 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL 22 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Mục tiêu • Tạo trang HTML • Các định dạng trang web • Sử dụng hình ảnh trong trang web • Tạo form và các điều khiển trong form trên trang web 33 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Nội dung 1. Giới thiệu ngôn ngữ HTML 1. Giới thiệu ngôn ngữ HT LM 2. Các thành phần Trong trang HTML 2. Các thành phần Trong trang HT LM 3. Các tag cơ bản3. Các tag cơ bản 4. Định dạng trang HTML 4. Định dạng trang HT LM 5. Định dạng văn bản 5. Định dạng văn bản 6. Hiển thị các ký tự đặc biệt 6. Hiển thị các ký tự đặc biệt 7. Hình ảnh-Image7. Hình ảnh-I agem 8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links 10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các điều khiển 11. For vm à các điều khiển 44 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL  HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn  Sử dụng tập ký hiệu đánh dấu gọi là tag để thiết kế trang web, các tag này còn được gọi là Element  Là một chuẩn Internet do tổ chức W3C (World Wide Web Consortium) duy trì  Trang HTML được lưu với phần mở rộng là .htm hoặc .html  Để tạo các trang HTML, bạn có thể sử dụng bất kỳ chương trình sọan thảo văn bản nào, như Notepad, MS FrontPage hoặc Dreamweaver, Bài 2: Ngôn ngữ HTML Giới thiệu ngôn ngữ HTML 55 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Các thành phần trong trang HTML • Cấu trúc của trang HTML • Cú pháp chung của tag • Ví dụ    66 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Cấu trúc của trang HTML Bài 2: Ngôn ngữ HTML Các thành phần trong trang HTML ... Nội dung của trang web Đầu trang Thân trang 77 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Cú pháp chung của tag  Tag không có nội dung gọi là tag rỗng (empty tag) và có cú pháp như sau: Bài 2: Ngôn ngữ HTML Các thành phần trong trang HTML Nội dung 88 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Cú pháp chung của tag  Các đặc điểm: • Tên tag không phân biệt chữ HOA/thường • Trình duyệt chỉ nhận 1 khoảng trắng trong Nội dung và bỏ qua dấu ngắt xuống dòng Bài 2: Ngôn ngữ HTML Các thành phần trong trang HTML Ví dụ: <div alig ="center" style="font-style:italic; background-color:#FFFFCC; color:#0000FF"> Công cha như núi Thái sơn Nghĩa mẹ như nước trong nguồn chảy ra 99 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Các tag cơ bản • Định nghĩa cấu trúc trang HTML • Các tag tiêu đề - Headings • Phân đoạn - Paragraphs • Ngắt dòng – Line Break • Tag - Division • Tag - Horizontal rule • Tag - Comment        1010 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định nghĩa cấu trúc trang HTML  : xác định phần bắt đầu và kết thúc của trang HTML (HTML Document)  : chứa các thông tin tổng quát về trang web (meta-information) và không thể hiện trên cửa sổ trình duyệt.  : nội dung chính của trang web, được thể hiện trong màn hình của trình duyệt Bài 2: Ngôn ngữ HTML Các tag cơ bản 1111 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các tag tiêu đề - Headings  Dùng để định dạng khổ chữ có dạng tiêu đề (giống chức năng Style của MS Word)  Gồm các tag , , , , và  HTML sẽ tự động thêm một dòng trống vào trước và sau dòng định dạng là heading Bài 2: Ngôn ngữ HTML Các tag cơ bản 1212 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các tag tiêu đề - Headings Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Đây là dòng heading 1 Đây là dòng heading 2 Đây là dòng heading 3 Đây là dòng heading 4 Đây là dòng heading 5 Đây là dòng heading 6 1313 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Phân đoạn - Paragraphs  Sử dụng tag để phân biệt các đọan văn bản  HTML sẽ tự động thêm một dòng trắng trước và sau đoạn văn bản Bài 2: Ngôn ngữ HTML Các tag cơ bản 1414 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Phân đoạn - Paragraphs Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Một nhóm các nhà khoa học Australia tin rằng quá ít axit béo omega-3, có trong cá và hải sản, và quá nhiều axit béo omega-6, có trong dầu chế biến và quả hạch, sẽ gia tăng nguy cơ bị trầm cảm ở lứa tuổi dậy thì. Gần 1.000 dân Sydney tuổi từ 14 đến 17 sẽ được chiêu mộ để tham gia cuộc nghiên cứu tìm hiểu tác động của thức ăn đối với tâm trạng. Việc ăn ít hải sản cũng đã được xác định có liên quan tới sự gia tăng khả năng trầm cảm ở người lớn. Nghiên cứu sẽ nhằm khẳng định nó tác động tới thiếu niên theo cách tương tự hay không. ... 1515 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Ngắt dòng – Line Break  Sử dụng tag để chuyển sang một dòng mới nhưng không kết thúc đọan văn bản  Tag không cần tag đóng Bài 2: Ngôn ngữ HTML Các tag cơ bản 1616 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Ngắt dòng – Line Break Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Ai ơi bưng bát cơm đầy Dẻo thơm một hạt đắng cay muôn phần Ăn quả nhớ kẻ trồng cây Ăn khoai nhớ kẻ cho dây mà trồng 1717 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tag - Division  Dùng để định nghĩa một section riêng trong trang web  Có thể chứa các tag khác như tag đến , , ... Bài 2: Ngôn ngữ HTML Các tag cơ bản 1818 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tag - Division Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Trung Tâm Tin Học Đại Học Khoa Học Tự Nhiên Tp.HCM 1919 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tag - Horizontal rule  Dùng để tạo ra một đường kẻ ngang  Thuộc tính size và width dùng để thay đổi độ rộng và chiều dài đường kẻ Bài 2: Ngôn ngữ HTML Các tag cơ bản 2020 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tag - Horizontal rule Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Trung Tâm Tin Học Đại Học Khoa Học Tự Nhiên Tp.HCM 2121 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tag - Comment  Dùng để ghi chú trong trang HTML, nội dung trong phần ghi chú không được thể hiện trên trình duyệt Bài 2: Ngôn ngữ HTML Các tag cơ bản Ví dụ: Trung Tâm Tin Học Đại Học Khoa Học Tự Nhiên Tp.HCM 2222 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Định dạng trang HTML • Màu nền, màu chữ • Hình ảnh nền   2323 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL  Sử dụng các thuộc tính của tag để định dạng chung cho trang web. Phần định dạng gồm có: • Màu nền, màu chữ • Hình ảnh làm nền cho trang web Bài 2: Ngôn ngữ HTML Định dạng trang HTML 2424 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Màu nền, màu chữ  Thuộc tính bgcolor : tô màu nền  Thuộc tính text : tô màu chữ Bài 2: Ngôn ngữ HTML Định dạng trang HTML Ví dụ: Sunday 2525 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Hình ảnh nền  Thuộc tính background Bài 2: Ngôn ngữ HTML Định dạng trang HTML Ví dụ: TUỔI THƠ CỦA BÉ ... 2626 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Hình ảnh nền  Thuộc tính Style kết hợp với các thông tin chi tiết, gồm: • background-image: khai báo tập tin hình ảnh • background-repeat: dạng lặp lại hình ảnh nền (no-repeat / repeat / repeat-x / repeat-y ) • background-attachment: hình ảnh cuộn theo nội dung trang web hay ở vị trí cố định (scroll / fixed) • background-position: xác định vị trí xuất hiện hình ảnh (bottom / center / left / right / top) Bài 2: Ngôn ngữ HTML Định dạng trang HTML Minh họa 2727 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Định dạng văn bản • Các tag định dạng • Thuộc tính style   2828 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các tag định dạng  - bold : in đậm  - italic : in nghiêng  - underline : gạch dưới Bài 2: Ngôn ngữ HTML Định dạng văn bản Ví dụ: Dòng in đậm Dòng in nghiêng Dòng gạch dưới 2929 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các tag định dạng  - subscript : chữ dưới  - superscript : chữ trên  - preformatted: giữ nguyên định dạng trong trang HTML Bài 2: Ngôn ngữ HTML Định dạng văn bản Ví dụ: ax2 + bx + c hoặc H2O 3030 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thuộc tính style  font-size : khổ chữ  font-style : kiểu chữ  font-family : tên font chữ  font-weight : nét chữ ( đậm hoặc chọn kích thước)  color : màu chữ  text-decoration: gạch dưới, gạch trên, gạch bỏ hoặc bỏ hết các định dạng  background-color: màu nền  border-color : màu đường viền  border-style : kiểu đường viền Bài 2: Ngôn ngữ HTML Định dạng văn bản Minh họa 3131 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Hiển thị các ký tự đặc biệt  Các ký tự đặc biệt: , &, , , ...  HTML cung cấp các giá trị đặc biệt tương ứng với các ký tự này  Có 3 thành phần để tạo ra ký tự đặc biệt Ví dụ: © hoặc ©    Tên đại diện phân biệt chữ HOA/thường Dấu & Tên đại diện Dấu ; 3232 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Hình ảnh - Images • Chèn hình ảnh vào trang web • Định dạng hình ảnh   3333 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Chèn hình ảnh vào trang web  Dùng tag và thuộc tính src để khai báo URL chứa tập tin hình ảnh  Thuộc tính alt : xuất câu thông báo nếu tập tin hình không tồn tại Bài 2: Ngôn ngữ HTML Hình ảnh - Images Ví dụ: Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế biến xong món tôm rất ngon này. 3434 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định dạng hình ảnh  width, height: độ rộng và chiều cao hình, tính bằng pixel (mặc định) hoặc %.  align: định vị trí xuất hiện của hình so với đọan văn bản một cách tương đối (left, right, ) Bài 2: Ngôn ngữ HTML Hình ảnh - Images Ví dụ: <img src="tomcang.jpg" alt="Hình con tôm càng“align="right" width="100" height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế biến xong món tôm rất ngon này. 3535 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Danh sách - Lists • Tạo danh sách có thứ tự - Ordered Lists • Tạo danh sách không có thứ tự - Unordered List • Thay đổi ký hiệu đầu dòng trong danh sách    3636 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo danh sách có thứ tự - Ordered Lists  Dùng tag kết hợp với tag , cú pháp như sau: Bài 2: Ngôn ngữ HTML Danh sách - Lists ..... ..... ... Ví dụ: Thực đơn giải khát Cafe đá Coca cola Chanh muối 3737 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo d.sách không có thứ tự - UnOrdered Lists  Dùng tag kết hợp với tag , cú pháp như sau: Bài 2: Ngôn ngữ HTML Danh sách - Lists ..... ..... ... Ví dụ: Thực đơn giải khát Cafe đá Coca cola Chanh muối 3838 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thay đổi ký hiệu đầu dòng trong danh sách  Thuộc tính type của tag và , bảng giá trị như sau: Bài 2: Ngôn ngữ HTML Danh sách - Lists 3939 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Liên kết - Links • Liên kết đến một trang web • Liên kết trong cùng một trang • Liên kết đến địa chỉ email    4040 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Liên kết đến một trang  tag kết hợp với thuộc tính href (Hyperlink Reference) Bài 2: Ngôn ngữ HTML Liên kết - Links Nội dung tag Ví dụ: Click vào đây để chuyển đến trang Tự học web 4141 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Liên kết trong cùng một trang  Đánh dấu vị trí cần chuyển đến: dùng thuộc tính name  Dùng tag và thuộc tính href để tạo liên kết đến Bài 2: Ngôn ngữ HTML Liên kết - Links "> Nội dung tag Ví dụ: Phần đầu trang .... Nội dung trang web .... Về đầu trang 4242 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Liên kết đến địa chỉ email Bài 2: Ngôn ngữ HTML Liên kết - Links Nội dung tag Ví dụ: Liên hệ 4343 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Bảng biểu - Tables • Tạo bảng biểu • Trộn dòng, cột trong Table • Định dạng Table    4444 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo bảng biểu  Bộ tag , (table row) và (table data) Bài 2: Ngôn ngữ HTML Bảng biểu - Tables nội dung nội dung nội dung nội dung 4545 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo bảng biểu Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Ví dụ: Dòng 1, cột 1 Dòng 1, cột 2 Dòng 2, cột 1 Dòng 2, cột 2 4646 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo bảng biểu Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Ví dụ: Dòng 1, cột 1 Dòng 1, cột 2 Dòng 2, cột 1Dòng 2, cột 2 4747 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Trộn dòng, cột trong Table  colspan: kết hợp nhiều cột thành một cột  rowspan: kết hợp nhiều dòng thành một dòng  width : độ rộng của dòng, cột  height : chiều cao của dòng, cột Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Ví dụ: trộn cột Tên Phạm Ngọc Thiên Thanh 4848 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Trộn dòng, cột trong Table Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Ví dụ: trộn dòng Tên Điện thoại Phạm Ngọc Thiên Thanh 8351056 0909039999 4949 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định dạng Table Sử dụng các thuộc tính của tag  Tạo khoảng cách giữa các cell • cellpadding: khoảng cách từ biên của cell tới nội dung trong cell • cellspacing: khoảng cách giữa các cell Bài 2: Ngôn ngữ HTML Bảng biểu - Tables 5050 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định dạng Table Sử dụng các thuộc tính của tag  Tạo khoảng cách giữa các cell Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Dòng 1, cột 2 Dòng 1, cột 3Dòng 1, cột 1 Cellsapcing Cellpadding 5151 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định dạng Table Sử dụng các thuộc tính của tag  Tạo tiêu đề, canh lề và tô màu nền cho table • Tag : tạo tiêu đề, phải đặt ngay sau tag • align : canh lề cho table • bgcolor : tô màu nền • background : hình làm nền Bài 2: Ngôn ngữ HTML Bảng biểu - Tables 5252 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Định dạng Table Sử dụng các thuộc tính của tag  Tạo đường viền • border : độ rộng của đường viền • bordercolor : màu đường viền Bài 2: Ngôn ngữ HTML Bảng biểu - Tables Ví dụ: <table align="center" cellspacing="5" cellpadding="15" border="5" width="500" bgcolor="#DFFDC4" bordercolor="#0E721F"> Thông tin cá nhân Tên Điện thoại Phạm Ngọc Thiên Thanh 8351056 0909039999 5353 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Form và các điều khiển trên form • Tạo form • Các điều khiển cơ bản – Tag • Một số điều khiển khác • Các sự kiện cơ bản • Xử lý hiển thị kết quả lên trang web      5454 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Tạo form  Dùng bộ tag sau: Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form ... Các tag tạo ra điều khiển trên form 5555 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các điều khiển cơ bản  Tag : tạo các điều khiển TextFields, Button, • type : xác định loại điều khiển Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form <input type=“loại điều khiển” name=“tên điều khiền” value=“giá trị” id=”định danh”> 5656 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các điều khiển cơ bản Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Ví dụ: Mã đăng nhập Mật khẩu 5757 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Một số điều khiển khác  Vùng nhập liệu – tag : giống Text fields nhưng cho phép nhập trên nhiều dòng • Cols : xác định số ký tự trên 1 dòng • Rows: xác định số dòng nhìn thấy trên điều khiển Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Ví dụ: Lý lịch: 5858 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Một số điều khiển khác  Nhãn – tag : có khả năng liên quan đến một điều khiển khác (tag ) • for : liên kết với điều khiển khác Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Ví dụ: Nhấn chuột vào "Nam" hoặc "Nữ" để chọn giới tính Nam Nữ 5959 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Một số điều khiển khác  Drop-down List – tag : có dạng ComboBox hoặc ListBox Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Mục chọn 1 Mục chọn 2 Mục chọn 3 6060 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Một số điều khiển khác  Drop-down List – tag : có dạng ComboBox hoặc ListBox Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Ví dụ: tạo điều khiển dạng ComboBox Lập trình web1 Lập trình web2 Đồ án thực tế 6161 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Một số điều khiển khác  Drop-down List – tag : có dạng ComboBox hoặc ListBox Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form Ví dụ: tạo điều khiển dạng ListBox Hãy chọn phim mà bạn yêu thích, được phép chọn nhiều phim Anh hùng xạ điêu Thập diện mai phục Báu vật hoàng cung Anh em nhà bác sĩ Ông bà Smith Mùa đu đủ xanh 6262 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các sự kiện cơ bản  onload: xảy ra khi trang HTML được load, áp dụng cho tag và  onclick: xảy ra khi nhấn chuột lên điều khiển, thường áp dụng cho các nút nhấn  onchange: xảy ra khi thay đổi giá trị của điều khiển, thường áp dụng cho điều khiển Drop-down List. Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form 6363 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Xử lý hiển thị kết quả lên trang web  Thường dùng tag hoặc , có 2 thuộc tính cơ bản dùng để hiển thị kết quả: • innerText : không nhận dạng chuỗi tag HTML có trong nội dung xuất ra Lưu ý: FireFox không hiểu thuộc tính innerText • innerHTML: nhận dạng chuỗi tag HTML Ví dụ: dùng i t <input type="button" name="kt" value="Kết thúc" onClick="cauchao.innerText='Chúc mừng các bạn đã kết thúc bài học về form' "> Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form 6464 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Xử lý hiển thị kết quả lên trang web  Thường dùng tag hoặc , có 2 thuộc tính cơ bản dùng để hiển thị kết quả: Ví dụ: dùng innerHTML <input type="button" name="kt" value="Kết thúc" onClick="cauchao.innerHTML='Chúc mừng các bạn đã kết thúc bài học về form' "> Bài 2: Ngôn ngữ HTML Form và các điều khiển trên form 6565 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Bài 2: Ngôn ngữ HTML HẾT