Bài giảng HTML - Bài 3: Liên kết, Bảng - Lê Quang Lợi

Nội dung text: Bài giảng HTML - Bài 3: Liên kết, Bảng - Lê Quang Lợi

1. Lê Quang Lợi
2. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
3. 3.1 Liên kết » 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
4. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
5. 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= “http:// /Danhtr.vn” » URL thư mục gốc: URL=“ /” Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
6. 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: » 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ụ: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
7. 3.2 Làm việc với liên kết trong HTML » Liên kết đến trang khác: » 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: » Liên kết theo Email: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
8. 3.3 Làm việc với liên kết trong HTML » 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 Cột 01 Cột 02 Cột 03 Ô 11 Ô 12 Ô 13 » Th: tạo cột trong bảng Ô 21 Ô 22 Ô 23 » 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
9. 3.3.1 Tạo Bảng Month Savings January $100 Month Savings Thể hiện dòng: tr January Thể hiện ô dữ liệu $100 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
10. 3.3.2 Thao tác Bảng » 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
11. 3.3.2 Thao tác Bảng Hai ô liên tiếp   ba ô Khung 04 ô cùng cột 1 1   ô     Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
12. 3.3.2 Thao tác Bảng STT Máy tính Giá bán USD 01 Server 10.000 02 Laptop 500 03 PC IBM 300 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY