• Cấu trúc của một trang tài liệu HTML– Một tài liệu HTML là 1 file văn bản chứa các thẻ đánh dấu – Một tài liệu HTML phải có đuôi phần mở rộng: .html 4.1 HTML VÀ CẤU TRÚC... 4.2 MỘT
Trang 1NỘI DUNG4.1 HTML và cấu trúc
Trang 24.1 HTML VÀ CẤU TRÚC
• Giới thiệu HTML
– HTML (Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ chuẩn để tạo trang web – HTML dùng các thẻ (tags) để định dạng dữ liệu
– Tạo khung/bảng cho trang web
Trang 34.1 HTML VÀ CẤU TRÚC
Trang 4• Cấu trúc của một trang tài liệu HTML
– Một tài liệu HTML là 1 file văn bản chứa các thẻ đánh dấu
– Một tài liệu HTML phải có đuôi ( phần mở rộng): html
4.1 HTML VÀ CẤU TRÚC
Trang 5• Cấu trúc cơ bản của một trang web
4.1 HTML VÀ CẤU TRÚC
Trang 6• Cấu trúc của một trang tài liệu HTML
4.1 HTML VÀ CẤU TRÚC
Trang 8• Các thành phần cơ bản
– Phần tử (element): có thể bao gồm thẻ mở, thẻ đóng và nội dung bên trong cặp thẻ mở, đóng.Cấu trúc của một phần tử:
<tên_thẻ thuộc_tính=“giá_trị”>Nội dung</tên_thẻ>
Ví dụ: <font color=“red”> Chữ này sẽ có màu đỏ </font>
4.1 HTML VÀ CẤU TRÚC
Trang 9• Có thể có nhiều thuộc tính trong một thẻ, các thuộc tính phân cách nhau khoảng trắng
• Nếu giá trị là chuỗi ký tự có khoảng trắng bên trong, bắt buộc phải dùng “ ” hay ‘ ’ để bao chuỗi lại
Trang 104.2 MỘT SỐ THẺ CƠ BẢN
Trang 12• Thẻ <body>
– Một số thuộc tính của thẻ <body>
4.2 MỘT SỐ THẺ CƠ BẢN
Trang 13– Là thẻ xác định tiêu đề (khác với thẻ title) cho các chuyên mục, danh mục, bài viết,…
4.2 MỘT SỐ THẺ CƠ BẢN
Trang 154.2 MỘT SỐ THẺ CƠ BẢN
• Thẻ định dạng văn bản
Trang 164.2 MỘT SỐ THẺ CƠ BẢN
• Thẻ định dạng văn bản
Trang 174.2 MỘT SỐ THẺ CƠ BẢN
Trang 184.2 MỘT SỐ THẺ CƠ BẢN
• Một số thẻ khác
– Thẻ <div>:
Là 1 thẻ quan trọng trong HTML, được sử dụng để phân chia các lớp trong website thay cho việc dùng bảng (table) như trước đây (Sẽ nghiên cứu thêm ở phần CSS)
– Thẻ <hr />: tạo ra 1 đường kẻ ngang trên website của bạn
• Thuộc tính:
– size: Độ lớn của đường kẻ (độ dày) Đơn vị Pixel – width: Độ lớn chiều ngang của đường kẻ (Pixel) – color: Màu của đường kẻ
– align: Căn chỉnh vị trí của đường kẻ Center (giữa website), left (trái), right (phải)
• Ví dụ: <hr size=“7” width=“300” color=“green” align=“right” />
Trang 194.3 HÌNH ẢNH VÀ LIÊN KẾT
• Thẻ hình ảnh <img />
– Cú pháp:
<img src=“Đường_dẫn_ảnh” />
– Thuộc tính:
+ src=“url”: Đường dẫn của ảnh cần hiển thị
+ border=“giá_trị”: Đường viền của ảnh Ví dụ border=“0”
+ width=“giá_trị”: Độ rộng của ảnh, đơn vị pixel
+ height=“giá_trị”: Độ cao của ảnh, đơn vị pixel
+ alt=“”: Nội dung hiển thị thay thế khi ảnh không được hiển thị (Do sai đường dẫn, ảnh không được tải về,… )
Trang 204.3 HÌNH ẢNH VÀ LIÊN KẾT
+ hspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài (Theo chiều ngang)
Trang 214.3 HÌNH ẢNH VÀ LIÊN KẾT
• Thẻ hình ảnh <img />
– Lưu ý: Khi sử dụng thẻ <img /> nên đặt thuộc tính alt
và title trong mọi trường hợp 2 thuộc tính này có tác dụng SEO cho website, đồng thời chuẩn web mà w3c đưa ra yêu cầu mọi ảnh phải có
– Ví dụ:
<img src="http://vietnamnet.net/banner.png" border="2" alt="Nội dung khi ảnh không hiển thị" title="Tiêu đề của ảnh" />
Trang 224.3 HÌNH ẢNH VÀ LIÊN KẾT
sổ mới), _parent (mở với frame), _top (khác với _parent,
_top mở với cả trang)
+ title: Tiêu đề của liên kết
– Ví dụ:
<a href=“ https://portal.ptit.edu.vn/” target=“_blank” title=“PTIT”> Trang chủ Học viện Công nghệ Bưu chính Viễn thông</a>
Trang 234.3 HÌNH ẢNH VÀ LIÊN KẾT
• Thẻ liên kết
– Liên kết hình ảnh: Trong trường hợp liên kết là 1 hình ảnh, chúng ta có thể thay “Nội dung” bằng cú pháp hình ảnh
Trang 244.3 HÌNH ẢNH VÀ LIÊN KẾT
• Thẻ liên kết
– Bản đồ ảnh: Là một ảnh trong trang web được chia ra làm nhiều vùng, mỗi vùng khi click vào sẽ liên kết đến một địa chỉ URL
(SV tự tìm hiểu)
Trang 254.3 HÌNH ẢNH VÀ LIÊN KẾT
• Thẻ liên kết
– Đánh dấu nội trang: Là phương pháp đánh dấu 1 vị trí bất kỳ trên website, cho phép chúng ta liên kết tới vị trí đó
Trang 264.3 HÌNH ẢNH VÀ LIÊN KẾT
Trang 274.3 HÌNH ẢNH VÀ LIÊN KẾT
Trang 28+ 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
Trang 29+ cellspacing: Định độ dày của khung
+cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
Trang 30+ 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)
Trang 314.4 TẠO BẢNG
• Thẻ <td></td>
– Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng, cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
– Một số thuộc tính:
+ width: Độ rộng của cột
+ height: Chiều cao của cột
+ 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)
Trang 324.4 TẠO BẢNG
• Thẻ <th></th>
– Tương tự cặp thẻ <td></td> tuy nhiên <th> 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
• Thẻ <tbbody>:
– Bên trong cặp thẻ <table> dùng để nhóm các nhóm dữ liệu với nhau
Trang 334.4 TẠO BẢNG
• Một số lưu ý:
– Số cặp thẻ <td> (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ẻ <br> hoặc thay cho khoảng trống
Trang 34– 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
Trang 354.4 TẠO BẢNG
• Ví dụ
Trang 364.5 DANH SÁCH
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
Trang 374.5 DANH SÁCH
• Danh sách có trật tự <ol></ol>:
– 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 <li></li>
– Một số thuộc tính:
+ 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,
+ start=“n” với n là giá trị bắt đầu của danh sách để bắt đầu với 1 giá trị khác 1
Trang 384.5 DANH SÁCH
• Danh sách có trật tự <ol></ol>:
– Ví dụ
Trang 394.5 DANH SÁCH
• Danh sách có trật tự <ol></ol>:
– Ví dụ
Trang 404.5 DANH SÁCH
• Danh sách không trật tự <ul></ul>:
– 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,
– Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và
“ul”: type=“none”
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)
Trang 414.5 DANH SÁCH
• Danh sách không trật tự <ul></ul>:
– Ví dụ:
Trang 424.5 DANH SÁCH
• Danh sách định nghĩa <dl></dl>:
– Khác với “ol” và “ul”, cặp thẻ <dl></dl> đượ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 đó
Trang 434.5 DANH SÁCH
• Danh sách định nghĩa <dl></dl>:
– Ví dụ:
Trang 444.6 FORM
• 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ệ,…
Trang 454.6 FORM
4.6.1 HTML Form
• Cú pháp:
<form name=“tên form” action=“script.url” method=“post/get”></form>
– Name: tên của form
– Action: địa chỉ script sẽ thực hiện khi form được submit
– Method: xác định phương thức đưa dữ liệu lên máy chủ, có 2 giá trị là POST và GET
Trang 46<input type=“text” name=“” value=“” size=“” />
+ 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
+ value: Giá trị ban đầu của textbox
+ 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
Trang 484.6 FORM
4.6.2 Các đối tượng trong form
a) Thẻ input:
• Ví dụ:
Trang 54JS để tạo tương tác
– Cú pháp:
<input type=“button” name=“” value=“” />
Trang 564.6 FORM
4.6.2 Các đối tượng trong form
a) Thẻ input:
• Ví dụ:
Trang 594.6 FORM
4.6.2 Các đối tượng trong form
a) Hộp thoại soạn thảo:
• Để tạo một hộp thoại cho phép soạn thảo (dạng
Trang 604.6 FORM
4.6.2 Các đối tượng trong form
a) Hộp thoại soạn thảo:
• Ví dụ
Trang 614.7 CÁC THẺ ĐẶC BIỆT
4.7.1 Meta tags
• Mọi thẻ meta đều đặt trong cặp thẻ <head></head>
• Cung cấp thông tin về website cho trình duyệt và các Search Engine
Trang 62• 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 <meta name=“description” content=“mô
tả ngắn gọn về website” />
Trang 634.7 CÁC THẺ ĐẶC BIỆT4.7.1 Meta tags
c) Refresh
• Tự động tải lại trang trong 1 khoảng thời gian được định nghĩa
• C ú p h á p : < m e t a h t t p - e q u i v = “ r e f r e s h ” content=“time” />
d) Author
• Cung cấp thông tin về tác giả website
• C ú p h á p : < m e t a n a m e = “ d e s c r i p t i o n ” content=“Văn bản sẽ xuất hiện trong kết quả tìm kiếm” />
Trang 654.7 CÁC THẺ ĐẶC BIỆT
4.7.2 Style tags
• Cặp thẻ <style></style> được đặt trong cặp thẻ <head></head>
• 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ẻ <style></style>
Trang 66</script>
Trang 67• Ví dụ:
<!DOCTYPE html