Thiết kế và lập trình Web bằng ngôn ngữ ASP - Phần 2: HTML và Javascript

 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 
 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ả. 
 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… 
 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… 
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 
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… 
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….. 
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….. 
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 
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,… 
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 
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 
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ế. 
 % 
 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 
 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   
  Ví dụ 2: thẻ table và các thuộc tính: 
 My first page 
<table border="3" cellspacing="1" cellpadding="2" 
width="400" height="300"> 
 Orange 
 Apple 
 Banana 
 Cat 
 Dog 
 Turtle 
  Ví dụ 3: thẻ table và thuộc tính “colspan”: 
 My first page 
<table border="3" cellspacing="1" cellpadding="0" 
width="300"> 
 Animals 
 Cat 
 Dog 
 Turtle 
  Ví dụ 4: thẻ table và thuộc tính “rowspan”: 
 My first page 
<table border="3" cellspacing="1" cellpadding="0" 
width="300"> 
 Animals 
 Dog 
 Cat 
 Lion 
 Thẻ 
 Thẻ 
Thẻ 
 Thẻ 
 Thẻ 
 Thẻ 
Thẻ 
 Thẻ 
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ế 
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. 
 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ổ. 
 b. Thẻ : 
  Ví dụ: 
 My first page 
 <form action="form_action.asp" 
 method="get"> 
 First name: <input type="text" 
 name="fname" value="Mickey" /> 
 Last name: <input type="text" 
 name="lname" value="Mouse" /> 
 If you click the "Submit" button, you will 
 send your input to a new page called 
 form_action.asp. 
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). 
  Ví dụ: sử dụng các thẻ label, text, textarea 
 My first page 
 <form action="form_action.asp" 
 method="get"> 
 Name: 
 <input type="text" name="fname" 
 value="Mickey" size="40"> 
 Notes: 
 Notes 
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ó. 
  Ví dụ: sử dụng các thẻ Radio, Checkbox 
 My first page 
 <input type="radio" name="animal" id="dog" 
checked="check"/> 
 Dog 
 Cat 
 Bike:<input type="checkbox" name="vehicle" 
value="Bike" /> 
 Car: <input type="checkbox" name="vehicle" 
value="Car" /> 
 Airplane: <input type="checkbox" 
name="vehicle" value="Airplane" checked="check" 
/> 
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. 
  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 
  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 
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. 
  Ví dụ: sử dụng các thẻ 
 My first page 
 Thông tin: 
 Click Me!   
 Ohhh.. 
 <input type="submit" name="bSubmit" 
id="bSubmit" value="Submit"> 
 <input type="reset" name="bClear" 
id="idClear" value="Clear" /> 
 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 
…