Bài giảng Thiết kế và lập trình Web bằng ngôn ngữ ASP - Phần 2: HTML và JavaScript - Dương Khai Phong

Nội dung text: Bài giảng Thiết kế và lập trình Web bằng ngôn ngữ ASP - Phần 2: HTML và JavaScript - Dương Khai Phong

1. Lý thuyết: 45 tiết Thực hành: 30 tiết • GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website:
2. 1/ Giới thiệu tổng quan Web 2/ HTML và JavaScript 3/ Các đối tượng trong ASP.Net 4/ ADO.Net (kết nối cơ sở dữ liệu) 5/ Triển khai ứng dụng Web + Ôn tập
3. PHẦN 2:
4. 1. Giới thiệu 2. Cấu trúc HTML 3. Các thẻ cơ bản trong HTML 4. Tạo bảng trong HTML 5. Biểu mẫu và thông tin người dùng 6. HTML nâng cao
5. a. HTML là gì? HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản) do nhà khoa học Mỹ - Tim Berners Lee định nghĩa ra năm 1989. . HyperText – Văn bản có thể kết nối đến văn bản khác . Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định được cách biểu diễn trang web đến người sử dụng. Một tập tin HTML là một tập tin văn bản trong đó có chứa các thẻ định dạng (các thẻ này sẽ giúp trình duyệt Web xác định cách trình bày trang Web). Một tập tin HTML phải có đuôi mở rộng là htm hoặc html. Một tập tin HTML có thể được viết trên một trình soạn thảo văn bản đơn giản.
6. b. Các thẻ HTML: Các thẻ HTML được xác định nằm trong cặp ngoặc góc nhọn „ ‟. Các thẻ HTML thường đi theo một cặp: . Thẻ mở (thẻ bắt đầu): . Thẻ đóng (thẻ kết thúc): Ví dụ: cặp thẻ định dạng chữ đậm Xin chào Các thẻ HTML không phân biệt chữ thường hay chữ hoa.
7. c. Các thuộc tính của thẻ HTML: Thuộc tính dùng mô tả chi tiết của một thẻ. Thông thường có dạng: Tên_thuộc_tính=“Giá trị” Các thuộc tính được đặt trong thẻ như sau: Một thẻ có thể có nhiều thuộc tính: Thẻ đóng không có thuộc tính
8. Thẻ Mô tả Khai báo một tài liệu HTML. Khai báo phần thân cho tài liệu. Khai báo header 1 đến header 6 Chèn một ký tự kết thúc dòng. Khai báo một đoạn. Kẻ một đường nằm ngang. Chú thích.
9. a. Thẻ HTML:  Công dụng: thẻ này sẽ cho trình duyệt biết rằng đây là một tài liệu HTML.  Cú pháp: Nội dung b. Thẻ BODY:  Công dụng: thẻ này khai báo phần nội dung của tài liệu.  Cú pháp: Nội dung .
10.  Các thuộc tính cơ bản của thẻ BODY: Thuộc tính Giá trị Mô tả background file_name Một hình ảnh dùng làm hình nền. Thường dùng style để thay thế. bgcolor rgb(x,x,x) Màu nền của tài liệu. Thường dùng style để #xxxxxx thay thế. colorname text rgb(x,x,x) Màu chữ trong tài liệu. Thường dùng style #xxxxxx để thay thế. colorname
11.  Ví dụ 1: thẻ html và thẻ body: My first HTML page Đây là nội dung website đầu tiên của tôi  Các bước thực hiện: • Mở notepad và lưu lại với tên hello.html (phần encoding: UTF-8) • Đánh lại nội dung trên vào notepad. • Mở trình duyệt IE và chọn file hello.html để xem kết quả.
12.  Ví dụ 2: thẻ body và thuộc tính màu nền: My first HTML page Đây là nội dung website đầu tiên của tôi
13.  Ví dụ 3: thẻ body và thuộc tính hình nền: My first HTML page Đây là nội dung website đầu tiên của tôi
14. c. Thẻ Headings – các thẻ từ đến :  Công dụng: dùng định dạng kích thước của chữ. (thẻ này sẽ tự động thêm một dòng trống trước và sau mỗi dòng có thẻ heading) . : heading lớn nhất . : heading nhỏ nhất  Ví dụ: h1 : This is a heading h2 : This is a heading h3 : This is a heading h4 : This is a heading h5: This is a heading h6 : This is a heading
15. d. Thẻ :  Công dụng: dùng để ngắt một dòng trong đoạn văn. . Thẻ không có thẻ đóng  Ví dụ: Đây là nội dung website đầu tiên của tôi
16. e. Thẻ :  Công dụng: dùng để xác định một đoạn văn trong tài liệu. (HTML sẽ tự động thêm một dòng trống trước và sau thẻ .  Ví dụ: Đây là nội dung website đầu tiên của tôi Xin chào tất cả các bạn
17. f. Thẻ :  Công dụng: dùng để kẻ một đường ngang trong tài liệu. (không có thẻ đóng). g. Thẻ :  Công dụng: dùng để thực hiện ghi chú mã lệnh trong tài liệu. Đây là nội dung website đầu tiên của tôi Xin chào tất cả các bạn
18. a. Các loại thẻ sử dụng với bảng: Thẻ Mô tả Tạo một bảng Khai báo phần header cho bảng Tạo một hàng Tạo một ô Tạo một tiêu đề cho bảng Tạo nhóm các cột Khai báo các giá trị thuộc tính cho một hay nhiều cột trong bảng Định nghĩa phần đầu bảng Định nghĩa phần thân của bảng Định nghĩa phần cuối của bảng
19. b. Thẻ :  Công dụng: dùng để khai báo tạo cấu trúc của một bảng. . Một bảng được chia thành các hàng (bằng cách dùng thẻ ), và mỗi hàng được chia thành các ô dữ liệu (bằng cách dùng thẻ ). . td là chữ viết tắt của "table data" tức là nội dung của ô dữ liệu. . Một ô dữ liệu có thể chứa văn bản, các hình ảnh, danh sách, các đoạn, biểu mẫu, bảng,
20. b. Thẻ :  Các thuộc tính : Thuộc tính Giá trị Mô tả align left Canh lề trong bảng. Thường dùng style để thay thế. center right bgcolor rgb(x,x,x) Định dạng màu nền cho bảng. Thường dùng style để thay #xxxxxx thế. colorname border pixels Quy định độ rộng của đường viền. Lưu ý: Thiết đặt border=“0” để hiển thị bảng không có đường viền! cellpadding pixels Quy định khoảng cách từ thành bảng đến nội dung trong % bảng. cellspacing pixels Quy định khoảng cách giữa các ô. % width % Quy định bề rộng của bảng. pixels
21. c. Thẻ :  Công dụng: tạo một hàng trong bảng  Các thuộc tính: Thuộc tính Giá trị Mô tả align right Định dạng khoảng cách giữa các dòng trong left ô. center justify char bgcolor rgb(x,x,x) Quy định màu nền của ô. Thường dùng style #xxxxxx để thay thế. colorname valign top Quy định khoảng cách cho văn bản trong ô middle theo chiều dọc. bottom baseline
22. d. Thẻ :  Công dụng: tạo một ô trong bảng  Các thuộc tính: Thuộc tính Giá trị Mô tả align left Quy định khoảng cách cho nội dung trong ô theo chiều dọc. right center bgcolor rgb(x,x,x) Quy định màu nền của ô. Thường dùng style để thay thế. #xxxxxx colorname colspan number Chỉ ra số cột mà ô này nên nối height pixels Quy định chiều cao của ô. Thường dùng style để thay thế. rowspan number Chỉ ra số hàng mà ô này nên nối. valign top Quy định khoảng cách dọc cho nội dung trong ô. middle bottom baseline width pixels Quy định bề rộng của ô. Thường dùng style để thay thế. %
23.  Ví dụ 1: thẻ table: My first HTML page row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
24.  Các lưu ý khi tạo bảng: . Các ô trong bảng nếu không có nội dung thì sẽ hiển thị không đúng trong hầu hết các trình duyệt như: mất đường viền (ngoại trừ Mozilla Firefox thì có hiển thị). => Khắc phục: thêm vào các ô dữ liệu rỗng  
25.  Ví dụ 2: thẻ table và các thuộc tính: My first page Orange Apple Banana Cat Dog Turtle
26.  Ví dụ 3: thẻ table và thuộc tính “colspan”: My first page Animals Cat Dog Turtle
27.  Ví dụ 4: thẻ table và thuộc tính “rowspan”: My first page Animals Dog Cat Lion
28. Thẻ Thẻ Thẻ Thẻ Thẻ Thẻ Thẻ Thẻ
29. a. Các loại thẻ sử dụng với biểu mẫu (form): Thẻ Mô tả Tạo một biểu mẫu để người dùng nhập dữ liệu Tạo một trường nhập dữ liệu Tạo một vùng văn bản (cho phép nhập nhiều dòng văn bản) Tạo một nhãn cho một điều khiển Tạo một fieldset Tạo nhãn cho fieldset Tạo danh sách các mục chọn (một danh sách xổ xuống) Tạo một nhóm các tuỳ chọn Tạo một tuỳ chọn trong danh sách các mục chọn Tạo một nút Ít dùng. Thường dùng để thay thế
30. b. Thẻ :  Công dụng: dùng để tạo ra một biểu mẫu cho phép người dùng nhập vào dữ liệu. . Một biểu mẫu có thể chứa vùng văn bản (textfield), các hộp kiểm (checkbox), các nút radio (radio-button) và các thành phần khác. . Form được dùng để chuyển dữ liệu của người dùng đến một URL xác định.
31. b. Thẻ :  Các thuộc tính chức năng: Thuộc Giá trị Mô tả tính method get Phương thức HTTP để gởi dữ liệu đến địa chỉ URL xác post định. Mặc định là get. • method="get": phương thức này gởi nội dung của form theo địa chỉ URL: URL?name=value&name=value. • method="post": phương thức này gởi nội dung của form theo phần thân của yêu cầu name form_name Khai báo một tên riêng cho form target _blank Vị trí sẽ mở URL đích URL. _self • _blank : URL đích sẽ mở trong một cửa sổ mới _parent • _self : URL đích sẽ mở trong chính frame mà tại đó ta _top kích chọn. • _parent : URL đích sẽ mở trong frame chính. • _top : URL đích sẽ mở trong toàn bộ phần thân của cửa sổ.
32. b. Thẻ :  Ví dụ: My first page First name: Last name: If you click the "Submit" button, you will send your input to a new page called form_action.asp.
33. c. Thẻ :  Công dụng: dùng để khai báo một nhãn cho một điều khiển. d. Thẻ :  Công dụng: dùng để tạo một trường nhập dữ liệu mà người dùng có thể đưa thông tin dữ liệu vào. . Nên sử dụng phần tử để khai báo một nhãn cho một điều khiển trong form. e. Thẻ :  Công dụng: dùng để tạo một vùng văn bản (một điều khiển nhập liệu trên nhiều dòng).
34.  Ví dụ: sử dụng các thẻ label, text, textarea My first page Name: Notes: Notes
35. f. Thẻ :  Công dụng: dùng để tạo một trường nhập dữ liệu mà người dùng chỉ được phép chọn lựa một trong các tùy chọn sẵn có.  Cú pháp: Chọn lựa 1 Chọn lựa 2 .  Lưu ý: . Thuộc tính name trong các khai báo trên phải cùng tên. g. Thẻ :  Công dụng: dùng để tạo một trường nhập dữ liệu mà người dùng được phép chọn lựa một hay nhiều các tùy chọn trong các tùy chọn sẵn có.
36.  Ví dụ: sử dụng các thẻ Radio, Checkbox My first page Dog Cat Bike: Car: Airplane:
37. i. Thẻ và :  Công dụng: dùng để tạo ra một danh sách đổ xuống, thường dùng chung với thẻ . j. Thẻ :  Công dụng: dùng để định nghĩa một mục chọn trong danh sách đổ xuống (nên sử dụng chung với thuộc tính value). k. Thẻ :  Công dụng: định nghĩa một nhóm các mục chọn trong danh sách đổ xuống.
38.  Ví dụ: sử dụng các thẻ Select, Option My first page Nokia N80 Nokia 6600 Nokia 6210 Samsung 8500 Samsung 5700 Samsung 7330
39.  Ví dụ: sử dụng các thẻ Select, Option, Optgroup My first page Nokia N80 Nokia 6600 Nokia 6210 Samsung 8500 Samsung 5700 Samsung 7330
40. m. Thẻ :  Công dụng: dùng để tạo ra một nút bấm.  Cú pháp: có 3 dạng nút bấm Nội dung hiển thị trong nút  Ý nghĩa: • : dùng tạo nút bấm có thể chứa nội dung hoặc hình ảnh bên trong nút. • : nút bấm đặc biệt dùng để xác nhận thông tin gởi đi từ một form. • : nút bấm đặc biệt dùng xóa các thông tin của một form.
41.  Ví dụ: sử dụng các thẻ My first page Thông tin: Click Me!    Ohhh
42. Thẻ Mô tả Thẻ anchor dùng thiết lập kết nối đến một tài liệu khác Thẻ image dùng để chèn hình ảnh trong tài liệu Thẻ tạo đề mục có đánh số thứ tự Thẻ tạo đề mục không có đánh số thứ tự Thẻ tạo đề mục con Thẻ định dạng đường gạch dưới như thẻ Thẻ định dạng đường gạch bỏ dòng chữ Thẻ định dạng chỉ số dưới H20 Thẻ định dạng chỉ số dưới m2 Thẻ định dạng chữ in đậm Thẻ tạo nhiều trang web trên một cửa sổ trình duyệt Thẻ tạo dòng chữ chạy trên màn hình