Ôn tập về HTML

Bài giảng môn học Thiết kế & Lập trình WEB 2 ÔN TẬP VỀ HTML Khoa Công nghệ thông tin Trường Đại học Khoa học Tự nhiên Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Giới thiệu về HTML ƒ HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) ƒ Là một ngôn ngữ dùng để xây dựng một trang Web. ƒ Chứa các thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị một trang Web. ƒ Một trang web thông thường gồm có 2 thành phần chính: – Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...) – Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt. Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Cấu trúc trang HTML Bắt đầu và Kết thúc của trang HTML Phần đầu trang HTML Nội dung trang HTML Tiêu đề Nội dung 1 Nội dung 2 Nội dung 3 Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Cấu trúc 1 tài liệu HTML – Ví dụ Welcome to HTML My first HTML document Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Danh sách - List Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Hình ảnh - Image Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN ƒ myimage.gif Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Bảng - Table Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Bảng – Table (tt) Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Bảng – Table (tt) Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Topleft.png Topright.png bottomleft.png bottomright.png Top.png left.png right.png Bottom.png Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Liên kết – Hyperlink ƒ Cú pháp : Linked content ƒ Thuộc tính target của tag – name: tải trang web vào frame có tên NAME – _blank: tải trang web vào cửa sổ mới – _parent: tải trang web vào cửa sổ cha của nó – _self: tải trang web vào chính cửa sổ hiện hành – _top: tải trang web vào cửa số cao nhất ƒ Ví dụ : Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ Tag Liên kết trang ƒ Thuộc tính TARGET ƒ Kết hợp Liên kết và Hình ảnh ƒ Liên kết download tài liệu Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Tag liên kết trang – Phân loại liên kết ƒ Phân loại : – Liên kết ngoại (external link) – Liên kết nội (internal link) – Liên kết email (email link) Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Tag liên kết trang – Liên kết ngoại (External Link) ………………… ………………… ………………… Bài học 2 ………………… ………………… Trang hiện tại baihoc1.htm ………………… ………………… ………………… ………………… ………………… ………………… Trang có địa chỉ xác định từ URL baihoc2.htm Click chuột Text đại diện Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Tag liên kết trang – Liên kết nội (Internal Link) Vi tri bat dau Text đại diện ………………… ………………… Text đại diện ………………… ………………… ………………… ………………… Vi tri bat dau .…abcdefgh… ...01234567… .………………… Nội dung trang khi chưa liên kết .………………… .………………… Text đại diện ………………… ………………… ………………… ………………… Vi tri bat dau .…abcdefgh… ...01234567… .………………… .………………… .………………… .………………… .………………… Nội dung trang khi bấm liên kết Click chuột Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Tag liên kết trang – Liên kết Email ………………… ………………… ………………… Liên hệ Admin ………………… ………………… Click chuột Liên hệ Admin Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Tag liên kết trang – Phân loại địa chỉ URL ƒ Địa chỉ URL phân làm 2 loại : – Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với Mạng Internet – Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang chứ liên kết. Linked content ƒ Một số ký hiệu đường dẫn đặc biệt: Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file A có link đến file B, vậy trong file A có HTML element: liên kết đến B muc 1/file B.htm URL = /demo/Thu muc 1/file B.htm # 127.0.0.1/demo Thu muc 1/file B.htm ./Thu muc 1/file B.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file B có link đến file C, vậy trong file B có HTML element: liên kết đến C muc 1/ Thu muc 1_1/file C.htm URL = /demo/Thu muc 1/Thu muc 1_1/file C.htm # 127.0.0.1/demo Thu muc 1_1/file C.htm ./Thu muc 1_1/file C.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file C có link đến file D, vậy trong file D có HTML element: liên kết đến D muc 1/ Thu muc 1_2/file D.htm URL = /demo/Thu muc 1/Thu muc 1_2/file D.htm # 127.0.0.1/demo ../Thu muc 1_2/file D.htm ./../Thu muc 1_2/file D.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file D có link đến file F, vậy trong file F có HTML element: liên kết đến F muc 2/file F.htm URL = /demo/Thu muc 2/file F.htm # 127.0.0.1/demo ../../Thu muc 2/file F.htm ./../../Thu muc 2/file F.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file F có link đến file E, vậy trong file F có HTML element: liên kết đến E muc 1/ Thu muc 1_2/Thu muc 1_2_1/file E.htm URL = /demo/Thu muc 1/Thu muc 1_2/ Thu muc 1_2_1/file E.htm # 127.0.0.1/demo ../Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/ file E.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Ví dụ file E có link đến file A ở vị trí xác định, vậy trong file A có HTML element: liên kết đến A tai vi tri B URL = # 127.0.0.1/demo ../../../file A.htm#positionB Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Bài tập Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Nội dung trang “Gioi thieu sach/index.htm” liên kết đến những trang index trong các thư mục con: Am nhac, Tin hoc, ... Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Nội dung trang “Gioi thieu sach/Am nhac/index.htm” liên kết đến vị trí chính xác của nội dung giới thiệu quyển sách tương ứng trong file details.htm Thiết kế & Lập trình WEB 2 – Ôn tập HTML © 2007 Khoa CNTT – ĐH KHTN Nội dung trang “Gioi thieu sach/Am nhac/details.htm”