Bài giảng HTML-DHTML-Javascript - Bài 03: Liên kết-Bảng - Lê Quang Lợi

Lê Quang Lợi 
Bài 03: Liên kết – Bảng 
Nội dung 
» Xiêu liên kết 
» Bảng dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
3.1 Liên kết 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Xiêu liên kết (HyperLink): thể hiện vị trí của tài liệu trên nền 
Internet trong tài liệu HTML thông qua URL 
» Thẻ : chứa vị trí cần đi tới của trang (Chuyển trang) 
» Tài liệu:file(html, doc, video, img, data ) hoặc thư mục 
» URL: thể hiện vị trí của tài liệu trên internet 
» URL với các thành phần: giao thức, IP, Port, thư mục file 
HTML-DHTML-Javascript 
ftp://www.kumquat.com/planting/special/README.txt 
3.1.1 URL 
» Host: máy chứa tài nguyên 
» Giao thức: cách thức truyền dữ liệu (http, ftp, smtp) 
» Port: cổng giao tiếp dữ liệu 
» Thư mục con: vị trí thư mục trong máy 
» File: tài liệu 
» Truy vấn: cách thức truyền đối cho hàm theo giao thức 
Ví dụ: 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY 
3.2 URL 
» Các ký hiệu dùng trong URL: “?”, “#”, “/”, “../” 
» Website chỉ ra bởi URL: 
 URL= “Danhtr.vn” 
» URL tuyệt đối: chứa đầy đủ các thành phần 
 URL= “” 
» URL tương đối: chứa các thành phần vị trí tương đối 
 URL= “” 
» URL thư mục gốc: URL=“../” 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
3.2 Làm việc với liên kết trong HTML 
» Thẻ a: đại diện cho một liên kết cần chuyển bằng nội dung 
» Cú pháp: Nội dung 
» Path thể hiện vị trí tài nguyên trên nền mạng( URL) 
» Nội dung: hiển thị giao diện để lựa chọn chuyển tớ tài nguyên 
Ví dụ: Dantri 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
3.2 Làm việc với liên kết trong HTML 
» Liên kết đến trang khác: 
 Vtc 
 Sản phẩm 
» Liên kết theo điểm neo: nhảy đến vị trí chính xác của tài liệu 
• Tạo điểm neo: 
• Tạo liên kết: 
 điểm 01 
» Liên kết theo Email: 
 Gửi mai 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
3.3 Làm việc với liên kết trong HTML 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Thẻ Table định nghĩa một bảng (hàng/cột) 
» Table: bảng dữ liệu với width và height 
» Thead: phần đầu của bảng 
» Th: tạo cột trong bảng 
» Tr: tạo ra dòng (hàng) 
» Td: tạo ra một ô thuộc một hàng 
» Tbody: thân bảng 
» Tfoot: chân bảng 
Cột 01 Cột 02 Cột 03 
Ô 11 Ô 12 Ô 13 
Ô 21 Ô 22 Ô 23 
3.3.1 Tạo Bảng 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
Month Savings 
January $100 
 Month 
 Savings 
 January 
 $100 
Thể hiện ô dữ liệu 
Thể hiện dòng: tr 
3.3.2 Thao tác Bảng 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Các thuộc tính: 
• width (Độ rộng), Border (đường viền) 
• Align (căn lề cho nội dung văn bản), 
• VAlign(căn lề theo phương dọc) 
• Cellpadding: chỉ ra khoảng cách nội dung và đường viền 
• CellSpacing: Khoảng cách giữa các ô 
» Các thao tác: trên thẻ TD chỉ ra các thao tác hòa nhập 
• Hòa nhập các ô cùng hàng: Colspan=“số ô” 
• Hòa nhập các ô cùng cột: Rowspan=”số ô” 
• Hòa nhập các ô trong hình chữ nhật: Colspan, Rowspan 
3.3.2 Thao tác Bảng 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
 Hai ô liên tiếp 
 ba ô 
cùng cột 
 Khung 04 ô 
   
 1 1 
   
 <td colspan="2“ 
 rowspan="3“ > ô 
   
   
3.3.2 Thao tác Bảng 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
STT Máy tính Giá bán USD 
01 Server 10.000 
02 Laptop 500 
03 PC IBM 300