›

Bài giảng Lập trình và thiết kế Web 1 - Bài 3: Thiết kế trang Web - HTML căn bản - Lương Vĩ Minh

pptx 58 trang huongle 3100
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình và thiết kế Web 1 - Bài 3: Thiết kế trang Web - HTML căn bản - Lương Vĩ Minh", để 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:

  • pptxbai_giang_lap_trinh_va_thiet_ke_web_1_bai_3_thiet_ke_trang_w.pptx

Nội dung text: Bài giảng Lập trình và thiết kế Web 1 - Bài 3: Thiết kế trang Web - HTML căn bản - Lương Vĩ Minh

  1. Lập trình và Thiết kế Web 1 Bài 3 Thiết kế trang Web – HTML Căn bản Lương Vĩ Minh KhoaKhoa CNTTCNTT –– ĐH.KHTNĐH.KHTN © 2007 Khoa Công nghệ thông tin
  2. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  3. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  4. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản 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. © 2007 Khoa CNTT - ĐHKHTN
  5. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Trình duyệt, trình soạn thảo Trình duyệt web (Browser) Trình soạn thảo (Editor) © 2007 Khoa CNTT - ĐHKHTN
  6. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Thẻ (Tag) HTML Welcome to HTML My first HTML document Hiển thị ví dụ trong IE © 2007 Khoa CNTT - ĐHKHTN
  7. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Thẻ (Tag) HTML Dòng chữ này được in đậm § Dữ liệu § Tên Tag luôn mang tính gợi nhớ – Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph § Đôi khi không cần Tag đóng , § Cú pháp chung Dữ liệu – Ví dụ : – Thuong mai Dien tu 1 – Thuong mai Dien tu 2 © 2007 Khoa CNTT - ĐHKHTN
  8. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp Mã HTML Hiển thị Đây là một dòng được in Đậm Đây là một dòng được in Đậm Mức chữ ở tiêu đề 3 Mức chữ ở tiêu đề 3 Mã HTML Hiển thị Hello Hello Lưu ý : • Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép • Không phân biệt chữ HOA và thường • Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng © 2007 Khoa CNTT - ĐHKHTN
  9. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp § Lưu ý: Các Tag nên lồng nhau tuyệt đối © 2007 Khoa CNTT - ĐHKHTN
  10. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Giới thiệu về HTML – Thẻ (Tag) HTML.Ví dụ Welcome to HTML My first HTML document © 2007 Khoa CNTT - ĐHKHTN
  11. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  12. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Cấu trúc 1 tài liệu HTML Phần đầu Tiêu đề trang HTML Bắt đầu và Kết thúc của trang HTML Nội dung 1 Nội dung Nội dung 2 trang HTML Nội dung 3 © 2007 Khoa CNTT - ĐHKHTN
  13. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Cấu trúc 1 tài liệu HTML § : Định nghĩa phạm vi của văn bản HTML § : Định nghĩa các mô tả về trang HTML. Thông tin trong tag này không được hiển thị trên trang web § : Mô tả tiêu đề trang web § : Xác định vùng thân của trang web, nơi chứa các thông tin © 2007 Khoa CNTT - ĐHKHTN
  14. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Cấu trúc 1 tài liệu HTML – Ví dụ Welcome to HTML My first HTML document © 2007 Khoa CNTT - ĐHKHTN
  15. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  16. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các Tag Cơ bản § Các Tag xử lý văn bản § Tag hình ảnh § Tag âm thanh © 2007 Khoa CNTT - ĐHKHTN
  17. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Khối, chuổi văn bản § Các thẻ định dạng khối văn bản – Tiêu đề (Heading) : , , , , , – Đoạn văn bản (Paragraph): – Danh sách (List Items): – Đường kẻ ngang (Horizontal Rules): § Các thẻ định dạng chuổi văn bản – Định dạng chữ : , , và – Tạo siêu liên kết : – Xuống dòng : © 2007 Khoa CNTT - ĐHKHTN
  18. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ví dụ về Heading § HEADING Introduction to HTML Introduction to HTML - H1 Introduction to HTML - H2 Introduction to HTML - H3 Introduction to HTML - H4 Introduction to HTML - H5 Introduction to HTML - H6 © 2007 Khoa CNTT - ĐHKHTN
  19. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ví dụ về Paragraph § PARAGRAPH - Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element © 2007 Khoa CNTT - ĐHKHTN
  20. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ví dụ về Paragraph § HORIZONTAL RULES § – Thuộc tính : • align : Canh hàng đường kẻ ngang so với trang web • width : Chiều dài đường kẻ ngang • size : Bề rộng của đường kẻ ngang • noshade : Không có bóng § § © 2007 Khoa CNTT - ĐHKHTN
  21. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ví dụ tag Định dạng chữ § Định dạng This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This text contains a 2 This text contains x 2 = a x a © 2007 Khoa CNTT - ĐHKHTN
  22. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ví dụ tag Định dạng chữ § Định dạng Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences © 2007 Khoa CNTT - ĐHKHTN
  23. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – WYSIWYG với tag § Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag, ) Ví dụ: Ban co the xuong dong va cach khoang trang thoai mai © 2007 Khoa CNTT - ĐHKHTN
  24. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Ký tự đặc biệt § Làm sao hiển thị các ký hiệu đặc biệt ? § Dấu , & § Dấu nháy kép “ § Các ký tự đặc biệt : @ © ® § © 2007 Khoa CNTT - ĐHKHTN
  25. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag xử lý văn bản – Danh sách Ký tự đặc biệt Result Description Entity Name Entity Number " quotation mark " " & ampersand & & greater-than > > Để hiện thị được "Khoa hoc tu nhien" thì mã HTML tương ứng là : <Khoa hoa tu nhien>     "Khoa hoc tu nhien" © 2007 Khoa CNTT - ĐHKHTN
  26. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag hình ảnh § : Không có thẻ đóng § Các thuộc tính của tag : – SRC : Đường dẫn đến file hình ảnh – ALT : Chú thích cho hình ảnh – Position: Top, Bottom, Middle – Border : Độ dày nét viền quanh ảnh (default=0) § Đặt ảnh nền cho trang web – Sử dụng thẻ © 2007 Khoa CNTT - ĐHKHTN
  27. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag âm thanh § : Không có tag đóng § Thuộc tính của tag – SRC : Đường dẫn đến file âm thanh – Loop : Số lần lặp (bằng -1 : Lặp vô hạn) – Thường đặt trong tag của trang web. § Ví dụ: © 2007 Khoa CNTT - ĐHKHTN
  28. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  29. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag Danh sách Kiểu danh sách Thẻ Phần tử trong DS Danh sách có thứ tự Danh sách không có thứ tự Danh sách tự định nghĩa , © 2007 Khoa CNTT - ĐHKHTN
  30. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag Danh sách – Danh sách có thứ tự © 2007 Khoa CNTT - ĐHKHTN
  31. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag Danh sách – Danh sách có thứ tự © 2007 Khoa CNTT - ĐHKHTN
  32. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag Danh sách – Danh sách không có thứ tự © 2007 Khoa CNTT - ĐHKHTN
  33. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Các tag Danh sách – Danh sách tự định nghĩa © 2007 Khoa CNTT - ĐHKHTN
  34. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  35. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang - URL § protocol://site address/directory/filename § Các dạng địa chỉ HTTP: TH1: Ví dụ: TH2: Ví dụ: TH3: Ví dụ: TH4: Ví dụ: Dominoes.exe © 2007 Khoa CNTT - ĐHKHTN
  36. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang - URL TH5: Ví dụ : Puzzle TH6: Ví dụ : TH7: Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
  37. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang – Tag § 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ụ : © 2007 Khoa CNTT - ĐHKHTN
  38. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản 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) © 2007 Khoa CNTT - ĐHKHTN
  39. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang – Liên kết ngoại (External Link) Click chuột Bài học 2 Trang có địa chỉ xác định từ URL Trang hiện tại baihoc2.htm baihoc1.htm © 2007 Khoa CNTT - ĐHKHTN
  40. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang – Liên kết nội (Internal Link) . . Text đại diện Nội Click Nội dung Text đại diệ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 01234567 . kết . . . © 2007 Khoa CNTT - ĐHKHTN .
  41. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag liên kết trang – Liên kết Email Click chuột MICROSOFT OUTLOOK 2007 Liên hệ Admin © 2007 Khoa CNTT - ĐHKHTN
  42. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản 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. § Một số ký hiệu đường dẫn đặc biệt: Ký hiệu Ý nghĩa / Trở về thư mục gốc của website ./ Thư mục hiện tại của trang web sử dụng link (mặc định) / Quay ra thư mục cha / đi ngược lại 1 cấp thư mục © 2007 Khoa CNTT - ĐHKHTN
  43. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file A có link đến file B, vậy trong file 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 - ĐHKHTN
  44. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file B có link đến file C, vậy trong file 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 - ĐHKHTN
  45. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file C có link đến file D, vậy trong file 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 - ĐHKHTN
  46. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file D có link đến file F, vậy trong file 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 - ĐHKHTN
  47. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file F có link đến file E, vậy trong file 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 - ĐHKHTN
  48. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Ví dụ # 127.0.0.1/demo file E có link đến file A ở vị trí xác định, vậy trong file A có HTML element: URL = / / /file A.htm#positionB © 2007 Khoa CNTT - ĐHKHTN
  49. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Bài tập © 2007 Khoa CNTT - ĐHKHTN
  50. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Nội dung § Giới thiệu về HTML § Cấu trúc của 1 tài liệu HTML § Các Tag cơ bản § Các Tag danh sách § Tag liên kết trang § Tag kẻ bảng © 2007 Khoa CNTT - ĐHKHTN
  51. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag kẻ bảng - Table © 2007 Khoa CNTT - ĐHKHTN
  52. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag kẻ bảng – Table (tt) © 2007 Khoa CNTT - ĐHKHTN
  53. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Tag kẻ bảng – Table (tt) © 2007 Khoa CNTT - ĐHKHTN
  54. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản © 2007 Khoa CNTT - ĐHKHTN
  55. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản © 2007 Khoa CNTT - ĐHKHTN
  56. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản © 2007 Khoa CNTT - ĐHKHTN
  57. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản Topleft.png Top.png Topright.png left.png right.png bottomleft.png Bottom.png bottomright.png © 2007 Khoa CNTT - ĐHKHTN
  58. Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản © 2007 Khoa CNTT - ĐHKHTN