›
›

Giáo trình Lập trình Web - Chương 1: Giới thiệu về Web và HTML

pdf 67 trang huongle 2590
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Lập trình Web - Chương 1: Giới thiệu về Web và 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:

  • pdfgiao_trinh_lap_trinh_web_chuong_1_gioi_thieu_ve_web_va_html.pdf

Nội dung text: Giáo trình Lập trình Web - Chương 1: Giới thiệu về Web và HTML

  1. Chương I GIỚI THIỆU VỀ WEB VÀ HTML HTHT – Lập trình Web
  2. 1.1. Web tĩnh HTHT – Lập trình Web 2
  3. 1.1.1. Định nghĩa và đặc điểm Web tĩnh HTHT – Lập trình Web 3
  4. Web tĩnh là gì? Website là gì? Website là một “show-room” (là một tập các trang web) trên mạng Internet – nơi trưng bày và giới thiệu thông tin, hình ảnh về Doanh nghiệp và sản phẩm/dịch vụ của Doanh nghiệp HTHT – Lập trình Web 4
  5. Để thiết lập và đưa vào hoạt động một website phải đáp ứng tối thiểu ba yếu tố cơ bản sau:  Tên website (hay còn gọi là tên miền ảo – Domain name)  Web Hosting : là nơi lưu trữ trên máy chủ Internet  Các trang web: nơi chứa đựng và truyền tải các thông tin của website. HTHT – Lập trình Web 5
  6. Ưu điểm cơ bản của web tĩnh và website tĩnh  Thiết kế đồ hoạ đẹp:  Tốc độ truy cập nhanh:  Thân thiện hơn với các máy tìm kiếm (search engine):  Chi phí đầu tư thấp: HTHT – Lập trình Web 6
  7. Nhược điểm cơ bản:  Khó khăn trong việc thay đổi và cập nhật thông tin:  Thông tin không có tính linh hoạt, không thân thiện với người dùng:  Khó tích hợp, nâng cấp, mở rộng: HTHT – Lập trình Web 7
  8. Công cụ soạn thảo  Notepad,  Wordpad  Prontpage (trình tự sinh mã) của Windows hay  Dreamweaver  PageMill (được cung cấp miễn phí trên mạng)  Jcreator  HTHT – Lập trình Web 8
  9. 1.1.2. Cấu trúc trang HTML HTHT – Lập trình Web 9
  10. a) Khái niệm về các thẻ trong HTML: Các thẻ HTML là những lệnh được viết giữa các ký hiệu “ ” chúng xác định phương thức hiển thị văn bản của trình duyệt. Thẻ đóng và mở đều sử dụng cùng một lệnh, nhưng thẻ đóng sẽ nằm sau ký hiệu gạch chéo (/) HTHT – Lập trình Web 10
  11. HTHT – Lập trình Web 11
  12. Lưu ý: Ngoài ra các thẻ này có thể lồng nhau chào mọi người Hoặc có những thẻ không có thẻ đóng thẻ ngắt dòng, thẻ tạo một đường kẻ ngang HTHT – Lập trình Web 12
  13. Thuộc tính của thẻ: Nhiều thẻ có những thuộc tính đặc biệt để đưa ra những tùy chọn khác nhau cho nội dung văn bản. Các thuộc tính của thẻ được đặt phía trong thẻ mở và đặt trong 2 dấu nháy kép “ ”. Nếu không có các thuộc tính này trình duỵệt sẽ bỏ qua khi duyệt trang. HTHT – Lập trình Web 13
  14. Vd: chào mọi người chào mọi người HTHT – Lập trình Web 14
  15. b)Cấu trúc trang Web tĩnh Phần lớn các trang Web đều được chia thành 2 phần: - Phần đầu (HEAD): - Phần thân (BODY): HTHT – Lập trình Web 15
  16. HTHT – Lập trình Web 16
  17. Vd: đoạn mã để tạo một tiêu đề ở phần đầu trang web thu nghiem đoạn mã để tạo một đoạn mã kịch bản của JavaScript alert("Chuc cac ban thanh cong voi JavaScript"); HTHT – Lập trình Web 17
  18. * Lưu trang WEB Việc lưu trữ trang WEB giống như lưu trữ một trang văn bản thông thường, Gán đuôi mở rộng là .HTM hoặc .HTML cho tệp (điều này rất quan trọng cho việc duyệt trang) HTHT – Lập trình Web 18
  19. * Hiển thị trang trong trình duyệt - Kích kép vào file HTML HTHT – Lập trình Web 19
  20. 1.2. Các thẻ cơ bản HTHT – Lập trình Web 20
  21. 1.2.1. Các thẻ định dạng văn bản HTHT – Lập trình Web 21
  22. + văn bản tác động : dùng để thay đổi phông chữ cho đoạn văn bản được tác động. Các thuộc tính của thẻ - face =“font” -color=“màu” Vd: color="#66FFCC“ HOẶC tên màu red, color, -size=n: n=1 7 tương ứng 8pt 36pt (mức lớn nhất là 36pt) HTHT – Lập trình Web 22
  23. VD: chào mọi người chào mọi người chào mọi người chào mọi người HTHT – Lập trình Web 23
  24. + : (n chỉ nhận giá trị từ 1 đến 7) thẻ này thường đặt trong phần đầu của thân trang tức sau VD: + đoạn văn bản : hiển thị văn bản theo chữ đậm + đoạn văn bản : hiển thị văn bản theo chữ nghiêng + đoạn văn bản : hiển thị văn bản theo chũ gạch chân HTHT – Lập trình Web 24
  25. + tạo ngắt dòng: + đoạn văn bản tạo đoạn văn bản mới (align có thể có các giá trị left, right,center, justify) + đoạn văn bản : đặt văn bản hay đối tượng vào giữa trang + tham khảo www.w3schools.com HTHT – Lập trình Web 25
  26. 1.2.2. Thẻ tạo bảng HTHT – Lập trình Web 26
  27. Bảng là gì ? Các thuộc tính : - BGColor: - Border: - BorderColor: - BorderColorDark: - BorderColorLight: HTHT – Lập trình Web 27
  28. Để tạo các dòng và cột trong bảng chúng ta cần sử dụng 2 nhóm thẻ sau: : Tạo một dòng mới trong bảng nội dung tạo một ô mới trong dòng Lưu ý: nằm trong nằm trong HTHT – Lập trình Web 28
  29. Họ tên Ngày sinh Mai Văn Râu 01/01/2001 HTHT – Lập trình Web 29
  30. 1.2.3. Tạo liên kết và Anchor HTHT – Lập trình Web 30
  31. Tạo liên kết ? - trang cần liên kết: - nhãn định danh: HTHT – Lập trình Web 31
  32. vd: HTHT – Lập trình Web 32
  33. Lưu ý: HTHT – Lập trình Web 33
  34. Tạo kết nối Anchor ? Để làm được điều này bạn phải lập trình qua hai bước: đầu tiên là đánh dấu, sau đó là tạo liên kết . + Để tạo anchor (đánh dấu vị trí): B1: Đặt con trỏ vào vị trí mà bạn muốn truy nhập tới trên trang web B2: gõ HTHT – Lập trình Web 34
  35. VD: NOI DUNG MON LAP TRINH WEB Chuong 1: Web tinh va HTML Chuong 2: Javascript Chuong 3: web dong voi asp Day la noi dung cua chuong 1 Day la noi dung cua chuong 1 chuong 2 chuong 2 noi dung cua chuong 3 noi dung cua chuong 3 HTHT – Lập trình Web 35
  36. HTHT – Lập trình Web 36
  37. 1.2.4. Thêm hiệu ứng âm thanh và hình ảnh HTHT – Lập trình Web 37
  38. a) Chèn âm thanh vào trang -tên file âm thanh : wav, av, midi, mp3, -Width: -Height: -Autostart: HTHT – Lập trình Web 38
  39. VD: HTHT – Lập trình Web 39
  40. b) Chèn hình ảnh vào trang tên tệp ảnh chèn: n: Width: Height: HTHT – Lập trình Web 40
  41. VD: HTHT – Lập trình Web 41
  42. HTHT – Lập trình Web 42
  43. 1.2.5. Tạo các Form HTHT – Lập trình Web 43
  44. Form - mẫu biểu ? các_loại_form các_thuộc_tính -action : -method: các_loại_form HTHT – Lập trình Web 44
  45. a) hộp văn bản ? - name_text: - value_text: - n: HTHT – Lập trình Web 45
  46. VD 1: Nhập mã số: VD 2: Nhập mã số: HTHT – Lập trình Web 46
  47. b) hộp mật khẩu ? các thuộc tính giống hộp văn bản HTHT – Lập trình Web 47
  48. VD: Mat khau: HTHT – Lập trình Web 48
  49. c) HỘP văn bản lớn ? gõ nội dung mặc định (nếu có) . name_area: . n: (mặc định là 4) . m: (mặc định là 40) . Wrap: HTHT – Lập trình Web 49
  50. VD: Hay nhap ghi chu HTHT – Lập trình Web 50
  51. d) Nút radio ? văn bản đại diện name_radio: Data: CHECKED: HTHT – Lập trình Web 51
  52. VD: bộ nhớ trong gồm: A. rom B. ram C. C A) và B) D. tất c đều sai HTHT – Lập trình Web 52
  53. e) tạo hộp kiểm ? văn bản đại diện HTHT – Lập trình Web 53
  54. Cac loai dich vu: Tra truoc Tra sau Co internet VinaText HTHT – Lập trình Web 54
  55. f) Tạo danh sách lựa chọn ? văn bản hiển thị đại diện 1 văn bản hiển thị đại diện 2 văn bản hiển thị đại diện n Name: MULTIPLE: value_option i: HTHT – Lập trình Web 55
  56. Vd 1: DANH SACH MON HOC LAP TRINH WEB CO SO DU LIEU LAP TRINH C HTHT – Lập trình Web 56
  57. Vd 2: DANH SACH MON HOC LAP TRINH WEB CO SO DU LIEU LAP TRINH C HTHT – Lập trình Web 57
  58. g) Trường ẩn ? VD Truong an o day: HTHT – Lập trình Web 58
  59. h) nút đệ trình ? VD: HTHT – Lập trình Web 59
  60. i) Nút khởi tạo lại giá trị ? Lưu ý: chỉ có nghĩa khi đặt trong thẻ form HTHT – Lập trình Web 60
  61. VD : Tạo nút reset trên form nhập dữ liệu Ho ten: Ngay sinh: Gioi tinh: Trước khi kích nút reset Sau khi kích nút reset HTHT – Lập trình Web 61
  62. j) Nút button ? HTHT – Lập trình Web 62
  63. VD: HTHT – Lập trình Web 63
  64. k) Nút tìm file ? VD: HTHT – Lập trình Web 64
  65. -Các bạn sinh viên về tìm hiểu thêm các thẻ HTML khác liên quan: + Frame + CSS + Style + Thẻ chèn media + Trên www.w3schools.com hoặc một số website khác HTHT – Lập trình Web 65
  66. Hãy viết trang html để xây dựng trang web dưới đây BÀI KIỂM TRA TỔNG KẾT CHƯƠNG I HTHT – Lập trình Web 66
  67. THE END OF CHAPTER I HTHT – Lập trình Web 67