Giáo trình HTML - Chương 1: Giới thiệu khóa học

Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap 1 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Đề cương khoá học GIỚI THIỆU MÔN HỌC TỔNG QUAN VỀ WEB & INTERNET NGUYÊN TẮC KHI THIẾT KẾ WEBSITE 1 2 3 HTML CĂN BẢN & BÀI TẬP4 TỔNG QUAN CSS & BÀI TẬP JAVASCRIPT & JQUERY - BÀI TẬP BOOTSTRAP & RESPONSIVE 5 6 7 ĐỒ ÁN: THIẾT KẾ WEBSITE BÁN HÀNG THỜI TRANG8 2 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Đề cương chi tiết Chương 1: GIỚI THIỆU KHOÁ HỌC TỔNG QUAN VỀ WEB & INTERNET / CÁC BƯỚC XÂY DỰNG WEBSITE UI và UX TRONG THIẾT KẾ WEBSITE1 2 3 ! Mục tiêu khoá học ! Phần mềm sử dụng ! Tài liệu tham khảo ! Các khái niệm cơ bản ! Các dịch vụ và tài nguyên ! UI và UX là gì ? ! Bố cục và Định hướng website ! Giao diện website HTML CĂN BẢN & BÀI TẬP4 ! HTML là gì ? ! Cấu trúc HTML ! Các tag cơ bản ! BÀI TẬP 3! Các bước xây dựng website Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Đề cương chi tiết (tiếp theo) JAVASCRIPT & JQUERY - BÀI TẬP BOOTSTRAP & RESPONSIVE 6 7 ! Giới thiệu, Phân loại ! CSS Layout ! BÀI TẬP ! Javascript ! Jquery ! BÀI TẬP ! Các khái niệm ! Cách chia bố cục ! BÀI TẬP TỔNG QUAN CSS & BÀI TẬP5 4Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| ĐỒ  ÁN  CUỐI  KHOÁ " WEBSITE BÁN HÀNG ♂ ♂ ♂ ♂ ♂ ♂ ♂ ♂ ♂ ♂ ♂ XÂY DỰNG TRANG CHỦ TỔNG KẾT XÂY DỰNG TRANG LIÊN HỆ XÂY DỰNG TRANG SẢN PHẨM $  & ' 5Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CHƯƠNG 1: GIỚI THIỆU KHÓA HỌC 6 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CHƯƠNG 1: GIỚI THIỆU MÔN HỌC ! Mục tiêu khoá học 7 Nắm vững kiến thức về xây dựng Website Các kiến thức nền tảng về HTML Các kiến thức về CSS Các kiến thức nền tảng về Javascript & Jquery Các nguyên tắc khi xây dựng website, UI, UX Các khái niệm về Responsive web Cách thức xây dựng website sử dụng Bootstrap Thiết kế một website từ dự án thực tiễn Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CHƯƠNG 1: GIỚI THIỆU MÔN HỌC (tt) ! Phần mềm sử dụng 8 Notepad++ Adobe Dreamweaver ! Tài liệu tham khảo Trang web Trang web Don't Make Me Think (Steve Krug) Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| CHƯƠNG 2: TỔNG QUAN VỀ WEB & INTERNET / CÁC BƯỚC XÂY DỰNG WEBSITE 9 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET ! Internet 10 Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế giới. Tập các giao thức được dùng gọi chung là TCP/IP. ! Intranet Mạng cục bộ có kiến trúc tương tự mạng Internet. CÁC KHÁI NIỆM Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 11 ! IAP (Internet Access Provider) Nhà cung cấp đương truyền Internet CÁC KHÁI NIỆMCác khái niệm !  IAP (Internet Access Provider) !  Nhà cung cấp đường truyền Internet. !  ISP (Internet Service Provider) !  Nhà cung cấp dịch vụ Internet. Một số ISP hiện nay ở Việt Nam: VDC, FPT, SPT, NetNam, Viettel, 7 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 12 CÁC KHÁI NIỆM Các khái niệm !  IAP (Internet Access Provider) !  Nhà cung cấp đường truyền Internet. !  ISP (Internet Service Provider) !  Nhà cung cấp dịch vụ Internet. Một số ISP hiện nay ở Việt Nam: VDC, FPT, SPT, NetNam, Viettel, 7 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 13 CÁC KHÁI NIỆMCác khái niệm !  Webpage !  Trang web. Có thể hiển thị các thông tin dưới dạng văn bản, hình ảnh, âm thanh, liên kết đến các trang web khác ... !  Website !  Tập hợp các trang web có mối quan hệ liên quan đến một tổ chức hay cá nhân... !  Homepage !  Trang chủ. Thường là trang đầu tiên (mặc định) khi truy cập một website 8 c khái niệm   . ó thể hiển thị các thông tin dưới dạng , ì ảnh, â thanh, liên kết đến các trang ...   c trang web có mối quan hệ liên quan t t c hay cá nhân...   rang chủ. h ng là trang đầu tiên (mặc định) khi truy cập ột ebsite 8 Các khái niệm   e   r eb. Có thể hiển thị các thông tin dưới dạng ản, hình ảnh, âm thanh, liên kết đến ác trang khác . it   hợp các trang web có mối quan hệ liên quan đến ột tổ chức hay cá nhân...   e age !  Trang chủ. Thường là trang đầu tiên (mặc định) khi truy cập một website 8 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 14 CÁCH THỨC HOẠT ĐỘNG CỦA WEB Web hoạt động như thế nào? 10 Users (clients) Browse Internet (WWW) WWW Servers Authors write HTML "" resources (HTML files) Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 15 Giao thức kết nối TCP/IP và Web Server ! Giao thức là gì ? ! Webserver là gì ? Web Server !  Thiết lập kết nối TCP/IP & nhận yêu cầu tài nguyên từ Web Client !  Xác định “Virtual host” mà client yêu cầu !  Xác định loại tài nguyên !  File # gửi file về cho client !  Program # thực thi chương trình và gửi kết quả về cho client !  Đóng kết nối TCP/IP 38 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 16 Địa chỉ IP (IP Address) ! Địa chỉ IP IP Address ! Địa chỉ IP ! Là 1 con số 32 bit ! Thường được biểu diễn dưới dạng 4 số 8 bit "  Vd: 203.162.33.44 ! Gồm 2 phần: network address + host address ! Xác định đối tượng nhận và gởi thông tin trên Internet 18 IP Address ! Địa chỉ IP ! Là 1 con số 32 bit  Thường được biểu diễn dưới dạng 4 số 8 bit "  Vd: 203.162.33.44 ! Gồm 2 phần: network address + host address ! Xác định đối tượng nhận và gởi thông tin trên Internet 18 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 17 Domain Name & DNS Domain Name & DNS !  Tên miền – Domain name !  Là tên giao dịch của công ty hay tổ chức trên Internet. !  Ví dụ: www.intel.com : "  Là địa chỉ của 1 máy chủ thuộc tổ chức (công ty) INTEL "  Có địa chỉ IP là 125.252.224.74, có tên máy chủ là WWW "  Là tên miền cấp 1 (.com, org, .edu,. biz, .net,) !  Ánh xạ giữa tên miền và địa chỉ IP !  Do DNS server – Domain name system (service) đảm trách 20 www.fit.hcmuns.edu.vn domain name sub-sub domain machine name sub domain 172.29.64.238 i !  Tên miền – Domain name !  Là tên giao dịch của công ty hay tổ chức trên Internet. !  Ví dụ: www.intel.com : "  Là địa chỉ của 1 máy chủ thuộc tổ chức (công ty) INTEL "  Có địa chỉ IP là 125.252.224.74, có tên máy chủ là WWW "  Là tên miền cấp 1 (.com, org, .edu,. biz, .net,) !  Ánh xạ giữa tên miền và địa chỉ IP !  Do DNS server – Domain name system (service) đảm trách 20 www.fit.hcmuns.edu.vn domain name sub-sub domain machine name sub domain 172.29.64.238 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 18 Các thao tác chuẩn trên web Các giao tác chuẩn trên web 24 Web Client (Browser) DNS server URL Web server 1. DNS lookup 2. TCP connection, port 80 3. HTTP request 4. HTTP response 5. TCP connection closed Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 19 Trình duyệt webWeb Client - Browser !  Chức năng chính !  Thiết lập kết nối TCP/IP và Gửi yêu cầu đến Web Server !  Nhận dữ liệu trả về từ Web Server và hiển thị lên trình duyệt !  Các trình duyệt khác nhau có khả năng hiển thị webpage khác nhau !  Các chức năng khác: save, print, plug-in, cache 25 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 20 Trình duyệt web (ví dụ)Các trình duyệt 26 Avant Browser Konqueror (KDE 4.2) Text browser Maxthon Flock Epiphany (Gnome) K-Meleon AOL Explorer Google Chrome Apple Safari Opera Netscape Mozilla Firefox Internet Explorer Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 21 URL protocol server name port directory/file name on the server URL !  URL là định danh duy nhất cho các tài nguyên Internet !  Chỉ ra: !  Cách truy cập !  Vị trí tài nguyên !  Cú pháp chung: !  protocol://host_name[:port_num][/path][/file_name] 31 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 22 HTML (Hypertext Makup Language) HTML Welcome to HTML My first HTML document 37 Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| TỔNG QUAN VỀ WEB & INTERNET (tt) 23 Web ServerWeb Server !  Thiết lập kết nối TCP/IP & nhận yêu cầu tài nguyên từ Web Client !  Xác định “Virtual host” mà client yêu cầu !  Xác định loại tài nguyên !  File # gửi file về cho client !  Program # thực thi chương trình và gửi kết quả về cho client !  Đóng kết nối TCP/IP 38 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Chương 2 - Các bước xây dựng website 24 Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Các bước xây dựng website ! Bước 1: Xác định yêu cầu website cần xây dựng 25 ! Bước 2: Chọn và mua tên miền Học lập trình trực tuyến tại itclass.vn ! Bước 3: Thuê chỗ Hosting ! Bước 4: Thiết kế website ! Bước 5: Triển khai website ! Bước 6: Cập nhật thông tin, bảo trì website Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 1: Xác định yêu cầu website ! Các yêu cầu và mục tiêu của website 26 ! Đối tượng khách hàng Học lập trình trực tuyến tại itclass.vn ! Website thuộc loại nào Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 2: Chọn và mua tên miền ! Tên miền và thương hiệu 27 Dễ nhớ Ngắn Không nhầm lẫn Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 3: Thuê chỗ hosting ! Loại hosting & ngôn ngữ xây dựng web 28 ! Băng thông & Dung lượng Học lập trình trực tuyến tại itclass.vn ! Cơ sở dữ liệu ! Email server Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 4: Thiết kế website ! Các thành phần của website : trang, hmtl, css, hình ảnh. 29 ! Cấu trúc của website Học lập trình trực tuyến tại itclass.vn 24 Xác định cấu trúc WebSite : Phân cấp Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 5: Triển khai website ! Upload các nội dung website lên hosting 30 ! Trỏ tên miền về hosting Học lập trình trực tuyến tại itclass.vn Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Bước 6: Duy trì và cập nhật nội dung ! Cập nhật nội dung website 31 ! Các liên kết trang Học lập trình trực tuyến tại itclass.vn ! Các trang thông tin Download miễn phí gì cũng có tại ilook.asia TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||