Lập trình Web với HTML

hĩa các thuộc tính 
 trong bảng: dòng, cột,… 
1. Thẻ 
- Cặp thẻ dùng để khai báo 1 bảng 
- Các thuộc tính: 
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px 
+ height: Chiều cao bảng 
+ bgcolor: Định màu nền của bảng 
+ background: Định ảnh nền của bảng 
+ border: Độ lớn đường viền của bảng 
+ bordercolor: Màu của đường viền 
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center 
+ cellspacing: Định độ dày của khung 
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng 
 Bài 4. Tạo bảng trong HTML 
- Ví dụ: 
… 
2. Thẻ : table row 
- Xác định dòng trong bảng, nằm bên trong cặp thẻ 
Ví dụ: 
Bao nhiêu cặp thẻ ứng với từng đó dòng trong 1 bảng 
- Một số thuộc tính trong thẻ 
+ height: Khai báo chiều cao của dòng( độ lớn dòng) 
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải), 
 center( giữa) 
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới) 
Bài 4. Tạo bảng trong HTML 
3. Thẻ : table data 
- Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data) 
- Cặp thẻ nằm bên trong cặp thẻ 
Ví dụ:  
- Một số thuộc tính: 
+ width: Độ rộng của cột 
+ height: Chiều cao của cột 
Bài 4. Tạo bảng trong HTML 
+ align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải), 
 center( giữa) 
+ valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới) 
4. Một số thẻ khác 
- ( table heading) Tương tự cặp thẻ tuy nhiên dùng trong 
 trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in 
 đậm và căn giữa tự động. Ví dụ:  
- : Bên trong cặp thẻ dùng để nhóm các nhóm dữ liệu với nhau 
 Bài 4. Tạo bảng trong HTML 
Một số lưu ý: 
- Số cặp thẻ ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của 
 bảng 
- Đối với ô trống( không có nội dung) nên sử dụng thẻ hoặc   thay cho 
 khoảng trống 
5. Gộp cột, dòng trong bảng 
- Là việc tùy biến bảng 
 bằng việc gộp các cột 
hay dòng lại với nhau 
 - colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan 
 - rowspan=“y”: Gộp y hàng tính từ hàng đang xét 
 Lưu ý: Sau khi gộp phải loại bỏ số dòng( hoặc cột) để cân đối bảng 
 Xem ví dụ:  đã loại bỏ 1 cột ở dòng thứ 2. Vì dòng 1 
 đã có 2 dòng được gộp. 
 Bài 4. Tạo bảng trong HTML 
 - Ví dụ:  
Video tham khảo:  
Bài tập 
-Tạo 1 bảng như hình 1 ( baitap/2-btap1.jpg) 
- Tạo 1 website như hình 1 và 2 (baitap/2-btap2-1.png và baitap/2-btap2-2.png) 
- Tạo 1 website như hình 1 ( baitap/2-btap3.png) 
Mặc dù hiện nay không sử dụng table để dựng bố cục trang nhưng nó vẫn là 1 thành 
phần quan trọng và cũng để các bạn thấy được khó khăn khi sử dụng table nên tôi 
đưa bài tập dựng bố cục trang sử dụng table 
Bài 5. Danh sách ( list) 
- Trong HTML có 3 loại danh sách 
+ ol: ordered list: Danh sách có đánh trật tự 
+ ul: unordered list: Danh sách không đánh trật tự 
+ dl: definition list: Danh sách định nghĩa 
- Ngoài để tạo danh sách các thẻ trên còn sử dụng để xây dựng hệ thống Menu 
 của website 
- Bên trong các cặp thẻ , và là các cặp thẻ 
 hay và 
1. Danh sách có trật tự 
- Tạo nên danh sách có đánh thứ tự 1, 2, 3,…bên trong là các cặp thẻ định nghĩa 
 danh sách 
 Bài 5. Danh sách ( list) 
- Có thể thay đổi cách hiển thị khi sử dụng bằng cách sử dụng thuộc tính 
 type. 
+ a: Hiển thị theo kiểu ký tự thường a, b, c… 
+ A: Hiển thị theo dạng ký tự hoa A, B, C.. 
+ i: Hiển thị dạng La Mã thường i, ii, iii, iv,.. 
+ I: Hiển thị dang La Mã I, II, III, IV,.. 
+ square: Hình ô vuông 
+ circle: Hình tròn màu rỗng ( màu trắng) 
+ disc: Hình tròn đặc( chấm tròn màu đen) 
- Để bắt đầu với 1 giá trị khác 1 chúng ta sử dụng thuộc tính start=“n” với n là 
 giá trị bắt đầu của danh sách 
- Ví dụ:  
Bài 5. Danh sách ( list) 
2. Danh sách không trật tự 
- Là kiểu danh sách đánh thứ tự các list mặc định là các hình tròn đặc ( chấm tròn 
 đen) 
- Có thể tùy biến sang các kiểu khác: đánh trật tự, ô vuông, hình tròn rỗng,.. 
 Tương tự như đối với 
- Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và “ul” chúng ta sử dụng thuộc 
 tính type với giá trị là none. 
Ví dụ:  
 -Ngoài ra có thể sử dụng CSS để tùy biến danh sách trong HTML 
 ( Sẽ tìm hiểu ở phần CSS) 
 Bài 5. Danh sách ( list) 
3. Danh sách định nghĩa 
- Khác với “ol” và “ul”, cặp thẻ được dùng để định nghĩa 1 đối tượng nào 
 đó 
- Bên trong cặp thẻ “dl” chứa các cặp thẻ 
+ “dd” (Definition Description): Thẻ mô tả định nghĩa 
+ “dt” ( Definition term): Thẻ định nghĩa 1 thuật ngữ nào đó. 
Ví dụ: Webmaster( chủ website): Là những người có quản lý 1 hoặc 1 số website 
 nào đó 
 Bài Tập: 
 -Thiết kế website như: Hình 1 ( baitap/3-btap1.jpg) 
 - Tạo menu dọc như: File 1 ( baitap/3-btap2.html) 
Bài 6. Biểu mẫu( form) 
- Biểu mẫu ( form) là một thành phần thường gặp và quan trọng trong mỗi website, 
 form tạo nên tính tương tác giữa website và người dùng qua những phần nhập, truy 
 xuất dữ liệu cũng như gửi dữ liệu. Như: form đăng ký, đăng nhập, tìm kiếm, gửi email 
 liên hệ,… 
1. HTML Form 
- Cú pháp: 
- Một số thuộc tính 
+ name: Tên của form, đặt tùy ý sao cho dễ nhớ, có mối tương quan với đối tượng form 
+ action: Link xử lý dữ liệu 
+ method: Phương thức truyền dữ liệu, có 2 giá trị là GET và POST 
( Sẽ tìm hiểu ở phần PHP) 
Ví dụ:  
 Bài 6. Biểu mẫu( form) 
2. Các đối tượng trong Form 
2.1. Thẻ input 
a) Textbox 
- Tạo nên đối tượng cho phép nhập dữ liệu văn bản 
- Cú pháp: 
+ name: Tên của textbox, đặt tùy ý, được kết hợp với PHP hay Javascript để tạo tính 
 tương tác trên website ( Tìm hiểu ở những phần sau) 
+ value: Giá trị ban đầu của textbox, hiển thị như dòng “Nhập từ khóa” ( Hình vẽ) 
+ size: Độ rộng của textbox 
Nếu thẻ input không sử dụng thuộc tính type=“text” thì trình duyệt tự hiểu dạng Textbox 
b) Password 
- Đối với các form như đăng nhập chúng ta dùng loại này để ẩn đối tượng password 
- Cú pháp: 
- Các thuộc tính value, name, size tương tự như Textbox 
 Bài 6. Biểu mẫu( form) 
c) Checkbox 
- Cú pháp: 
+ name: Tên của checkbox, sử dụng kết hợp PHP hay Javascript( JS) 
+ value: Giá trị của checkbox, sử dụng kết hợp PHP hay JS, gửi kết quả lên server và 
 ngược lại 
+ Có thể sử dụng thêm thuộc tính checked để chọn mặc định cho đối tượng 
Lưu ý: Đối với các đối tượng cùng nhóm thì name phải đặt giống nhau 
 Bài 6. Biểu mẫu( form) 
d) Radio 
- Tạo chức năng chọn dạng núm Radio 
- Cú pháp: 
- Các thuộc tính name, value và checked sử dụng tương tự như Checkbox 
 e) Upload 
 -Tạo chức năng duyệt file từ máy tính 
 - Cú pháp: 
 + name: Tên của đối tượng file 
Bài 6. Biểu mẫu( form) 
f) Submit 
- Tạo nút gửi dữ liệu tới file xử lý ( Tới link khai báo ở thuộc tính Action) 
- Cú pháp: <input type=“submit” name=“tên submit” value=“giá trị ban đầu, hiển thị 
 ở nút submit” /> 
g) Button 
- Tương tự như Submit tuy nhiên khi sử dụng Button dữ liệu sẽ không được gửi tới 
 file xử lý( Khai báo phần action) mà thường kết hợp với JS để tạo tương tác 
- Cú pháp: <input type=“button” name=“tên submit” value=“giá trị ban đầu, hiển thị 
 ở nút submit” /> 
h) Reset 
- Trả lại giá trị ban đầu khi chưa nhập liệu cho tất cả các đối tượng trong form 
- Cú pháp: <input type=“reset” name=“tên reset” value=“giá trị ban đầu, hiển thị ở 
 nút reset” 
Tạo 1 form như sau: 
 Bài 6. Biểu mẫu( form) 
2.2. Select tags 
a) Tạo danh sách sổ xuống 
- Cú pháp 
 Hà Nội 
 TP. HCM 
 Hải Phòng 
 Thái Nguyên 
+ Cặp thẻ khai báo 1 phiên làm việc với kiểu danh sách 
+ Cặp thẻ bên trong cặp thẻ 
 - Thuộc tính value: Giá trị của lựa chọn( Sử dụng kết hợp với JS hoặc PHP) 
 - Các thuộc tính khác: label, selected, disabled 
b) Tạo danh sách chọn 
- Tương tự như danh sách sổ xuống tuy nhiên dạng này 
Cho phép người dùng chọn nhiều lựa chọn bằng 
Việc sử dụng Ctrl 
 Bài 6. Biểu mẫu( form) 
- Cú pháp trong danh sách chọn tương tự dạng sổ xuống, chỉ việc thêm thuộc tính 
 multiple vào thẻ mở 
- Ví dụ: 
2.3. Hộp thoại soạn thảo 
- Để tạo 1 hộp thoại cho phép soạn thảo( dạng bình luận) chúng ta sử dụng thẻ 
textarea 
- Cú pháp: 
Nội dung 
Tìm hiểu thêm các thuộc tính khác tại: 
Bài 6. Biểu mẫu( form) 
Video tham khảo:  
Bài tập: Thiết kế 1 form bình luận như hình bên dưới 
Bài 7. Các thẻ đặc biệt 
1. Meta tags 
- Mọi thẻ meta đều đặt trong cặp thẻ 
- Cung cấp thông tin về website cho trình duyệt và các Search Engine 
a) Keyword 
- Tạo từ khóa cho website, cung cấp cho các search engine 
- Cú pháp: <meta name=“keywords” content=“các từ khóa cách nhau bởi dấu 
 phảy” /> 
b) Description 
- Thẻ mô tả về website, cung cấp thông tin về web 
- Cú pháp 
 Demo: 
Bài 7. Các thẻ đặc biệt 
c) Refresh 
- Tự động tải lại trang trong 1 khoảng thời gian được định nghĩa 
- Cú pháp 
Với: 
+ time: Là thời gian tự động reload, đơn vị giây 
Ví dụ: Code chuyển trang, khi vào vietsource.net tự động chuyển qua 
 vietsource.net/forum 
d) Author 
- Cung cấp thông tin về tác giả website 
- Ví dụ: <meta name=“author” content=“Vũ Công Tịnh, VietSource.Net, ĐH CNTT 
 TT Thái Nguyên” 
e) Charset 
- Xác định kiểu charset mà website sử dụng 
- Cú pháp: 
Bài 7. Các thẻ đặc biệt 
- Chuẩn HTML 5: 
Tham khảo các thẻ khác:  
2. Style tag 
- Cặp thẻ được đặt trong cặp thẻ 
- Xác định thông tin định dạng website. Trong 1 tài liệu HTML có thể sử dụng nhiều 
 cặp thẻ 
- Ví dụ: 
p { 
color:red 
} 
3. Script tag 
- Bên trong cặp thẻ , chứa các thông tin về mã kịch bản Javascript 
- Ví dụ: document.write(“Xin chào”); 
Bài 7. Các thẻ đặc biệt 
4. !DOCTYPE 
- Là “thẻ” duy nhất nằm bên ngoại cặp thẻ 
- Thực chất !doctype không phải là 1 thẻ mà nó cung cấp cho trình duyệt biết phiên 
 bản HTML được sử dụng trong website 
- Ví dụ: 1 doctype trong XHTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 ""> 
 VietSource.Net 
 Nội dung website 
- Trong HTML 5: 
Tham khảo: