Đồ án môn học môn học thiết kế web html ngôn ngữ trình bày dữ liệu giao diện trình bày thông tin

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔN G TIN ĐỒ ÁN MƠN HỌC Mơn học: Thiết Kế WEB Giảng viên giảng dạy: Nguyễn Mai Huy Sinh viên thực : Võ Thành Khải MSSV: 2100008932 LỚP : 21DTH2B Khóa: 2021 Tp.HCM, tháng Tám 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔN G TIN ĐỒ ÁN MƠN HỌC Mơn học: Thiết Kế WEB Giảng viên giảng dạy: Nguyễn Mai Huy Sinh viên thực : Võ Thành Khải MSSV: 2100008932 LỚP : 21DTH2B Khóa: 2021 Tp.HCM, tháng Tám 2022 LỜI CẢM ƠN Để có kết ngày hơm nay, em xin gửi lời cảm ơn chân thành đến quý thầy cô khoa CNTT Trường Đại Học Nguyễn Tất Thành người dìu dắt em truyền đạt kiến thức quý báu suốt thời gian em học tập trường Và hết em xin gửi lời cảm ơn sâu sắc tới: Xin cảm ơn thầy Nguyễn Mai Huy tận tình hướng dẫn giúp đỡ em q trình nghiên cứu hồn thành báo cáo Trong trình nghiên cứu thực đề tài, với vốn kiến thức hạn hẹp khơng tránh thiếu sót cần phải bổ sung hồn thiện tốt Rất mong góp ý thầy cô LỜI MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ công nghệ thông tin ứng dụng sống Máy tính khơng cịn thứ phương tiện lạ lẫm người mà dần trở thành cơng cụ làm việc giải trí thơng dụng hữu ích chúng ta, khơng có cơng sở mà ngày gia đình Trong kinh tế nay, với tồn cầu hóa kinh tế giới, mặt đời sống xã hội ngày nâng cao, đặc biệt nhu cầu trao đổi hàng hóa người tiêu dùng ngày tăng số lượng chất lượng Hiện công ty tin học hàng đầu giới không ngừng đầu tư cải thiện giải pháp sản phẩm nhằm cho phép tiến hành thương mại hóa Internet Thông qua sản phẩm công nghệ này, dễ dàng nhận tầm quan trọng tính tất yếu thương mại điện tử Với thao tác đơn giản máy tính có kết nối mạng Internet bạn có tận tay cần mà không qua nhiều thời gian Bạn cần vào trang thương mại điện tử, làm theo hướng dẫn Click bạn cần Các dịch vụ mang đến tận nhà cho bạn NHẬN XÉT CỦA GIẢNG VIÊN GIẢNG DẠY Tp.HCM, Ngày tháng năm Giảng viên giảng dạy (Ký tên ghi rõ họ tên) Mục lục Lời cảm ơn ……………………………………………………………………1 Lời mở đầu…………………………………………………………………….2 Nhận xét giáo viên giảng dạy…………………………………………….3 Mục lục ………………………………………………………………………4 Danh mục bảng biểu …………………………………………………….5 Danh mục bảng hình………………………………………………………6 Danh mục từ biết tắt……………………………………………………….7 Mô tả đồ án Chương 1: Lý thuyết tài liệu trình học tập Tuần 1: TỔNG QUAN VỀ INTERNET & WORLD WIDE WED Tuần 2: HTML NGƠN NGỮ TRÌNH BÀY DỮ LIỆU GIAO DIỆN TRÌNH BÀY THƠNG TIN Tuần 3: STYLESHEET ĐỊNH DẠNG DỮ LIỆU WEB Tuần 4-5: BOOTSTRAP-RESPONSIVE-DESIGN Tuần 6-7: JAVASCRIPT-JQUERY Tuần 8: TRIỂN KHAI GIAO DIỆN Chương II: BÀI BÁO CÁO WEB TUẦN I TỔNG QUAN VỀ INTERNET & WORLD WIDE WED Internet ● Là hệ thống thông tin tồn cầu truy nhập cơng khai, gồm mạng máy tính liên kết với Hệ thống cho phép truyền thông tin theo kiểu “nối chuyển gói liệu” (packet switching) dựa giao thức liên mạng chuẩn hóa có tên: “giao thức IP” ● Có thể nói, Internet mạng máy tính khổng lồ, tạo thành dựa gia nhập nhiều mạng máy tính doanh nghiệp, viện nghiên cứu, trường đại học, tổ chức, phủ cá nhân (người dùng) toàn giới Lịch sử phát triển ● Thuật ngữ "Internet" xuất lần đầu vào khoảng năm 1974 (tại thời điểm này, tên gọi thức gọi ARPANET) Cho đến năm 1983, giao thức TCP/IP thức coi tiêu chuẩn ngành quân Mỹ, tất máy tính thực kết nối với ARPANET bắt buộc phải sử dụng chuẩn ● Giao thức TCP/IP ngày thể ưu điểm nó, quan trọng khả liên kết hệ thống mạng khác cách dễ dàng Chính điều với sách mở cửa cho phép hệ thống mạng dùng cho mục đích nghiên cứu thương mại kết nối với ARPANET ● Internet sử dụng lĩnh vực, từ Thương mại, Chính trị, Quân sự, Nghiên cứu, Giáo dục, Văn hoá, Xã hội Chính thế, dịch vụ Internet khơng ngừng phát triển, tạo cho nhân loại thời kỳ mới: kỷ nguyên thương mại điện tử Một số khái niệm ISP (Internet Service Provider) - IP Address - Domain name - Hosting: Web hosting, Email hosting, File hosting, - Web page – Website - Web Browser: Google Chrome, Safari, Firefox, Opera, Internet Explorer, - Search Engine: Google, Bing, Yahoo search, - Social network: Facebook, Google +, Twitter, pinterest, World Wide Web ● World Wide Web gọi tắt Web(hay WWW), xem “khơng gian thơng tin tồn cầu” mà người truy cập qua máy tính có kết nối với mạng Internet ● Web phát minh đưa vào sử dụng vào khoảng năm 1990, 1991 viện sĩ Viện Hàn lâm Anh Tim Berners Lee Robert Cailliau (Bỉ) CERN, Geneva, Switzerland HTML – Ngơn ngữ trình bày liệu Web ● HTML (HyperText Markup Language) ngơn ngữ trình bày liệu dựa nguyên tắc “đánh dấu”, thiết kế để tạo nên trang web với mẫu thơng tin trình bày World Wide Web ● HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 công bố vào năm 1999 Dịch vụ phổ biến - Internet ● World Wide Web ● Email - email client: Microsoft Outlook Express, Eudora, - Webmail: Yahoo mail, Hotmail, Gmail, outlook, ● Chat Online: Google Talk, Skype, Yahoo! Messenger, Apple Messages, ● DNS (Domain Name System) ● Telnet ● Internet Archive: thư viện kỹ thuật số thành lập Brewster Kahle ● vào năm 1996 ● FTP (File Transfer Protocol) ❖ Selector Khái niệm Selector – Khái niệm Selector • Selector khái niệm quan trọng sử dụng phổ biến đoạn mã định dạng CSS dành cho trang web Mục đích selector giúp người lập trình xác thành phần HTML chịu ảnh hưởng • Có thể hiểu cách đơn giản Selector cơng cụ, phục vụ cho việc nhận dạng đối tượng tài liệu HTML – Lập nhóm, dùng chung • Universal selector: selector đặc biệt, cho phép khai báo để dùng chung mã định dạng tất thành phần tài liệu selector có ký hiệu dấu “*” • Group selector: việc nhóm selector nhằm phục vụ cho việc áp dụng chung định dạng lúc nhiều thành phần trang web Sử dụng dấu “,” để liệt kê thành phần 3- Phân loại Selector • Selector theo đối tượng HTML (DOM selectors) • Selector theo quy luật xuất hiện, trạng thái thể (Pseudo selectors) • Selector tập hợp thành phần có quan hệ với (Combinator selectors) Selector theo đối tượng HTML Thuộc tính phổ biến – Ảnh hưởng tới chữ viết • font-family • font-size • font-style • font-weight • @font-face • text-decoration • text-transform • text-shadow – Ảnh hưởng đoạn văn • line-height • text-align • text-indent – Phạm vi, vị trí vùng chứa • width, min-width, max-width • height, min-height, max-height • background • border • padding • margin • box-shadow • left, top, bottom, right • position • z-index • overflow • display – Một số thuộc tính khác • Cursor • Float • Clear • list-style • Transition • Transform • animation TUẦN IV BOOTSTRAP-RESPONSIVE-DESIGN ❖ Bootstrap framework Giới thiệu Bootstrap Bootstrap phát triển Mark Otto Jacob Thornton Twitter phát hành dạng sản phẩm mã nguồn mở vào tháng 2011 GitHub Vào tháng năm 2014 Bootstrap dự án số GitHub! Bootstrap gì? ⮚ Bootstrap miễn phí front-end framework nhanh dễ dàng ⮚ Bootstrap includes HTML and CSS based bao gồm mẫu thiết kế cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh nhiều loại khác, JavaScript tùy chọn bổ sung ⮚ Bootstrap cung cấp cho bạn khả dễ dàng tạo responsive designs Responsive Web đáp ứng ? Responsive Web đáp ứng việc tạo trang web tự động điều chỉnh để có giao diện đẹp tất thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn Ưu điểm Bootstrap ⮚ Dễ sử dụng: Bất kỳ có kiến thức HTML CSS bắt đầu sử dụng Bootstrap ⮚ Tính đáp ứng: CSS đáp ứng Bootstrap điều chỉnh để điện thoại, máy tính bảng máy tính để bàn ⮚ Phương pháp ưu tiên thiết bị di động: Trong Bootstrap 3, kiểu ưu tiên thiết bị di động phần khuôn khổ cốt lõi ⮚ Khả tương thích trình duyệt: Bootstrap tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Edge, Safari Opera) Cách sử dụng Bootstrap ? ⮚ Download Bootstrap from getbootstrap.com ⮚ Include Bootstrap from a CDN (Content Delivery Network) Lợi việc sử dụng Bootstrap CDN ⮚ Nhiều người dùng tải xuống Bootstrap từ MaxCDN truy cập trang web khác Do đó, tải từ nhớ cache họ truy cập trang web bạn, dẫn đến tải nhanh thời gian Ngoài ra, hầu hết CDN đảm bảo người dùng yêu cầu tệp từ nó, phân phát từ máy chủ gần họ nhất, điều dẫn đến thời gian tải nhanh Tạo trang web với Bootstrap Add the HTML5 doctype Bootstrap is mobile-first Containers Bootstrap Grids ⮚ Hệ thống lưới Bootstrap cho phép tối đa 12 cột tồn trang Nếu bạn khơng muốn sử dụng tất 12 cột riêng lẻ, bạn nhóm cột lại với để tạo cột ⮚ Hệ thống lưới Bootstrap đáp ứng cột tự động xếp lại tùy thuộc vào kích thước hình ⮚ Hệ thống lưới Bootstrap có bốn lớp: ▪ xs (dành cho điện thoại - hình rộng 768px) ▪ sm (dành cho máy tính bảng - hình rộng lớn 768px) ▪ md (dành cho máy tính xách tay nhỏ - hình rộng lớn 992px) ▪ lg (dành cho máy tính xách tay máy tính để bàn - hình rộng lớn 1200px) Các lớp kết hợp để tạo động bố cục linh hoạt Bootstrap Glyphicons ⮚ Bootstrap cung cấp 260 glyphicons từ Glyphicons Halflings Glyphicons sử dụng văn bản, nút, công cụ, điều hướng, biểu mẫu, v.v ❖ HTML Elements in Bootstrap 1.Bootstrap Text/Typography ⮚ Cài đặt mặc định củaBootstrap - Kích thước phơng chữ mặc định tồn cầu Bootstrap 14px, với chiều cao dịng 1.428 - Điều áp dụng cho phần tử tất đoạn (

) - Ngoài ra, tất phần tử

có lề nửa dịng tính tốn chúng- chiều cao (10px theo mặc định) ⮚ Bootstrap định kiểu tiêu đề HTML ( thành ) theo cách sau: Bootstrap Typography Classes Bootstrap Images Bootstrap List Groups Bootstrap Dropdowns ⮚ Menu dropdowns menu chuyển đổi cho phép người dùng chọn giá trị từ danh sách xác định trước: ⮚ Lớp dropdown menu thả xuống Để mở menu thả xuống, sử dụng nút liên kết với lớp dropdown-toggle thuộc tính data-toggle = "dropdown" Lớp caret tạo biểu tượng mũi tên dấu mũ (), cho biết nút trình đơn thả xuống Thêm lớp dropdown-menu vào

để thực tạo menu thả xuống Bootstrap Tables ⮚ Một bảng Bootstrap có lớp đệm nhẹ có đường chia ngang Lớp table thêm kiểu vào bảng: .table-striped table-bordered table-hover ⮚ Các lớp ngữ cảnh sử dụng để tơ màu hàng bảng () ô bảng (): Bootstrap Responsive Tables ⮚ Lớp table-responsive tạo bảng đáp ứng Bảng sau cuộn theo chiều ngang thiết bị nhỏ (dưới 768px) Khi xem thứ lớn rộng 768px, khơng có khác biệt: Bootstrap Forms Các điều khiển biểu mẫu tự động nhận số kiểu chung với Bootstrap: Tất phần tử văn ,