Bài giảng Thiết kế & Lập trình WEB 2 – Ôn tập HTML

pdf 36 trang phuongnguyen 4671
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế & Lập trình WEB 2 – Ôn tập HTML", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_lap_trinh_web_2_on_tap_html.pdf

Nội dung text: Bài giảng Thiết kế & Lập trình WEB 2 – Ôn tập HTML

  1. Bài giảng môn học ÔNÔN TTẬẬPP VVỀỀ HTMLHTML Khoa Công nghệ thông tin Trường ĐạihọcKhoahọcTự nhiên ThiThiếếtt kkếế && LLậậpp trtrììnhnh WEBWEB 22
  2. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Giớithiệuvề HTML ƒ HTML (Hyper Text Markup Language - Ngôn ngữđánh dấu siêu vănbả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ệtWeb biết cách để hiểnthị mộttrangWeb. ƒ Một trang web thông thường gồmcó2 thànhphầnchính: – Dữ liệucủa trang web (vănbản, âm thanh, hình ảnh ) – Các thẻ (tag) HTML dùng để định dạng mô tả cách thứccácdữ liệutrênhiểnthị trên trình duyệt. © 2007 Khoa CNTT – ĐH KHTN
  3. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Cấu trúc trang HTML Phần đầu Tiêu đề trang HTML Bắt đầuvà Kếtthúccủa trang HTML Nộidung 1 Nộidung Nộidung 2 trang HTML Nộidung 3 © 2007 Khoa CNTT – ĐH KHTN
  4. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML CCấấuu trtrúúcc 11 ttààii liliệệuu HTMLHTML –– VVíí ddụụ Welcome to HTML My first HTML document © 2007 Khoa CNTT – ĐH KHTN
  5. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Danh sách - List © 2007 Khoa CNTT – ĐH KHTN
  6. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  7. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Hình ảnh - Image © 2007 Khoa CNTT – ĐH KHTN
  8. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Ví dụ © 2007 Khoa CNTT – ĐH KHTN
  9. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML ƒ myimage.gif © 2007 Khoa CNTT – ĐH KHTN
  10. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng - Table © 2007 Khoa CNTT – ĐH KHTN
  11. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng – Table (tt) © 2007 Khoa CNTT – ĐH KHTN
  12. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng – Table (tt) © 2007 Khoa CNTT – ĐH KHTN
  13. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  14. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  15. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  16. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  17. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  18. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Topleft.png Top.png Topright.png left.png right.png bottomleft.png Bottom.png bottomright.png © 2007 Khoa CNTT – ĐH KHTN
  19. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN
  20. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML LiênLiên kkếếtt –– HyperlinkHyperlink ƒ Cú pháp : ƒ Thuộctínhtarget củatag – name: tải trang web vào frame có tên NAME – _blank: tải trang web vào cửasổ mới – _parent: tải trang web vào cửasổ cha củanó – _self: tải trang web vào chính cửasổ hiện hành – _top: tải trang web vào cửasố cao nhất ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  21. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Ví dụ Tag Liên kết trang ƒ Thuộc tính TARGET ƒ KếthợpLiênkếtvàHìnhảnh ƒ Liên kết download tài liệu © 2007 Khoa CNTT – ĐH KHTN
  22. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML TagTag liênliên kkếếtt trangtrang –– PhânPhân loloạạii liênliên kkếếtt ƒ Phân loại: – Liên kết ngoại (external link) – Liên kếtnội (internal link) – Liên kết email (email link) © 2007 Khoa CNTT – ĐH KHTN
  23. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML TagTag liênliên kkếếtt trangtrang –– LiênLiên kkếếtt ngongoạạii (External(External Link)Link) Click chuột Bài học2 Trang có địachỉ xác định từ URL Trang hiệntại baihoc2.htm baihoc1.htm © 2007 Khoa CNTT – ĐH KHTN
  24. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML TagTag liênliên kkếếtt trangtrang –– LiênLiên kkếếtt nnộộii (Internal(Internal Link)Link) . . Text đạidiện Nội Click Nội dung Text đạidiện dung chuột trang trang khi Vi tri bat dau khi chưa . abcdefgh bấm liên Vi tri bat dau 01234567 liên . kết . abcdefgh k t 01234567 . ế . . . © 2007 Khoa CNTT – ĐH KHTN .
  25. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML TagTag liênliên kkếếtt trangtrang –– LiênLiên kkếếtt EmailEmail Click chu t ộ Liên hệ Admin © 2007 Khoa CNTT – ĐH KHTN
  26. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML TagTag liênliên kkếếtt trangtrang –– PhânPhân loloạạii đđịịaa chchỉỉ URLURL ƒ Địachỉ URL phân làm 2 loại: – Địachỉ tuyệt đối: Làvị trí tuyệt đốiso vớiMạng Internet – Địachỉ tương đối: Làvị trí tương đốiso với trang web hiện hành đang chứ liên kết. ƒ Mộtsố ký hiệu đường dẫn đặcbiệt: © 2007 Khoa CNTT – ĐH KHTN
  27. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file A có link đếnfile B, vậytrongfile A có HTML element: URL = muc 1/file B.htm /demo/Thu muc 1/file B.htm ./Thu muc 1/file B.htm Thu muc 1/file B.htm © 2007 Khoa CNTT – ĐH KHTN
  28. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file B có link đếnfile C, vậytrongfile B có HTML element: URL = muc 1/ Thu muc 1_1/file C.htm /demo/Thu muc 1/Thu muc 1_1/file C.htm ./Thu muc 1_1/file C.htm Thu muc 1_1/file C.htm © 2007 Khoa CNTT – ĐH KHTN
  29. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file C có link đếnfile D, vậytrongfile D có HTML element: URL = muc 1/ Thu muc 1_2/file D.htm /demo/Thu muc 1/Thu muc 1_2/file D.htm ./ /Thu muc 1_2/file D.htm /Thu muc 1_2/file D.htm © 2007 Khoa CNTT – ĐH KHTN
  30. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file D có link đếnfile F, vậytrongfile F có HTML element: URL = muc 2/file F.htm /demo/Thu muc 2/file F.htm ./ / /Thu muc 2/file F.htm / /Thu muc 2/file F.htm © 2007 Khoa CNTT – ĐH KHTN
  31. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file F có link đếnfile E, vậytrongfile F có HTML element: URL = muc 1/ Thu muc 1_2/Thu muc 1_2_1/file E.htm /demo/Thu muc 1/Thu muc 1_2/ Thu muc 1_2_1/file E.htm /Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/ file E.htm © 2007 Khoa CNTT – ĐH KHTN
  32. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML VVíí ddụụ # 127.0.0.1/demo file E có link đếnfile A ở vị trí xác định, vậy trong file A có HTML element: URL = / / /file A.htm#positionB © 2007 Khoa CNTT – ĐH KHTN
  33. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bài tập © 2007 Khoa CNTT – ĐH KHTN
  34. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Nội dung trang “Gioi thieu sach/index.htm” liên kết đếnnhững trang index trong các thư mục con: Am nhac, Tin hoc, © 2007 Khoa CNTT – ĐH KHTN
  35. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Nội dung trang “Gioi thieu sach/Am nhac/index.htm” liên kết đếnvị trí chính xác củanội dung giớithiệu quyểnsáchtương ứng trong file details.htm © 2007 Khoa CNTT – ĐH KHTN
  36. Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Nội dung trang “Gioi thieu sach/Am nhac/details.htm” © 2007 Khoa CNTT – ĐH KHTN