Bài giảng Thiết kế lập trình WEB 2 - Ôn tập về 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.
Tóm tắt nội dung Bài giảng Thiết kế lập trình WEB 2 - Ôn tập về HTML, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
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 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 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 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 Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Danh sách - List © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Hình ảnh - Image © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Ví dụ © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML myimage.gif © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng - Table © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng – Table (tt) © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bảng – Table (tt) © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN 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 Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML LiênLiên kkếếtt –– HyperlinkHyperlink Cú pháp : Linked content 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 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 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 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) Text đạidiện ………………… ………………… ………………… ………………… ………………… 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 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) Vi tri bat dau Text đạidiện .………………… .………………… ………………… 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 .………………… 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 ………………… ………………… Liên hệ Admin © 2007 Khoa CNTT – ĐH KHTN 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 Linked content Đị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 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: liên kết đếnB 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 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: liên kết đếnC 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 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: liên kết đếnD 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 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: liên kết đếnF 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 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: liên kết đếnE 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 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: liên kết đến A tai vi tri B URL = ../../../file A.htm#positionB © 2007 Khoa CNTT – ĐH KHTN Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML Bài tập © 2007 Khoa CNTT – ĐH KHTN 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 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 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
File đính kèm:
Bài giảng Thiết kế lập trình WEB 2 - Ôn tập về HTML.pdf
