Đồ á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ÔNG 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 hiện Võ Thành Khải MSSV 2100008932[.]

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ÔNG 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 hiện : Võ Thành Khải

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ÔNG 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 hiện : Võ Thành Khải

Khóa: 2021

Tp.HCM, tháng Tám 2022

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong cuộc sống Máy tính không còn là thứ phương tiện lạ lẫm đối với mọi người mà nó dần trở thành một công cụ làm việc và giải trí thông dụng và hữu ích của chúng ta, không chỉ có ở công sở mà ngày cả trong gia đình.

Trong nền kinh tế hiện nay, với thế toàn cầu hóa nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi hàng hóa của người tiêu dùng ngày càng tăng cả về số lượng và chất lượng Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp như sản phẩm nhằm cho phép tiến hành thương mại hóa Internet Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử Với những thao tác đơn giản trên máy tính có kết nối mạng Internet bạn sẽ có tận tay những gì mình cần mà không mất qua nhiều thời gian Bạn chỉ cần vào các trang thương mại điện tử, làm theo hướng dẫn và Click những gì bạn cần Các dịch vụ sẽ được 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 và ghi rõ họ tên)

Mục lục

Lời cảm ơn ………1

Lời mở đầu……….2

Nhận xét của giáo viên giảng dạy……….3

Mục lục ………4

Danh mục các bảng biểu ……….5

Danh mục các bảng hình………6

Danh mục các từ biết tắt……….7

Mô tả đồ án

Chương 1: Lý thuyết và tài liệu quá 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

● Là một hệ thống thông tin toàn cầu có thể được truy nhập công khai, gồmcác mạng máy tính được liên kết với nhau Hệ thống này cho phép truyền thông tintheo kiểu “nối chuyển gói dữ liệu” (packet switching) dựa trên giao thức liên mạng

đã được chuẩn hóa có tên: “giao thức IP”

● Có thể nói, Internet là mạng máy tính khổng lồ, được tạo thành dựa trên

sự gia nhập của rất nhiều mạng máy tính của các doanh nghiệp, các viện nghiên cứu, các trường đại học, các tổ chức, chính phủ và của cả các cá nhân (người dùng)trên toàn thế giới

2 Lịch sử phát triển

● Thuật ngữ "Internet" xuất hiện lần đầu vào khoảng năm 1974 (tại thời điểm này, tên gọi chính thức vẫn được gọi là ARPANET) Cho đến năm 1983, giaothức TCP/IP chính thức được coi như một tiêu chuẩn đối với ngành quân sự Mỹ,

và tất cả các máy tính thực hiện kết nối với ARPANET đều bắt buộc phải sử dụng chuẩn mới này

● Giao thức TCP/IP ngày càng thể hiện những ưu điểm của nó, và quan trọng nhất là khả năng liên kết các hệ thống mạng khác nhau một cách dễ dàng Chính điều này cùng với các chính sách mở cửa đã cho phép các hệ thống mạng dùng cho mục đích nghiên cứu và thương mại có thể kết nối được với ARPANET

● Internet được sử dụng trong mọi lĩnh vực, từ Thương mại, Chính trị, Quân sự, cho đến Nghiên cứu, Giáo dục, Văn hoá, Xã hội Chính vì thế, các dịch

vụ trên Internet không ngừng phát triển, tạo ra cho nhân loại một thời kỳ mới: kỷ nguyên thương mại điện tử

3 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,

4 World Wide Web

● World Wide Web còn được gọi tắt là Web(hay WWW), được xem là “không gian thông tin toàn cầu” mà mọi người có thể truy cập qua các máy tính có kết nối với mạng Internet

● Web được phát minh và đưa vào sử dụng vào khoảng năm 1990, 1991 bởi viện

sĩ Viện Hàn lâm Anh Tim Berners Lee và Robert Cailliau (Bỉ) tại CERN, Geneva,Switzerland

5 HTML – Ngôn ngữ trình bày dữ liệu Web

● HTML (HyperText Markup Language) là một ngôn ngữ trình bày dữ liệu dựatrên nguyên tắc “đánh dấu”, được thiết kế ra để tạo nên các trang web với các mẫuthông tin trình bày trên World Wide Web

● HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web

Consortium (W3C) duy trì Phiên bản chính thức của HTML là HTML 4.01 được công bố vào năm 1999

6 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)

TUẦN II HTML NGÔN NGỮ TRÌNH BÀY DỮ LIỆU GIAO DIỆN TRÌNH BÀY THÔNG TIN

1.Hyper Text Markup Language

- HTML là thuật ngữ được viết tắt bởi Hyper Text Markup Language

- HTML là ngôn ngữ dùng để mô tả những thông tin cần trình bày trong mộttrang web

- HTML không phải là một ngôn ngữ lập trình, HTML chỉ đơn thuần là

một“ngôn ngữ đánh dấu” (Markup Language)

- Các tập tin được tạo bởi HTML có thể mở để hiển thị, trình bày nội dung thông qua các trình duyệt web

- Để tạo một tập tin HTML, người ta có thể sử dụng bất cứ phần mềm soạn thảo văn bản nào để biên tập nội dung theo cú pháp trình bày của ngôn ngữ HTML

2 Cấu trúc một tài liệu HTML

Luôn tồn tại trong 1 “cặp thẻ” <html> </html>

● Head: là phần sử dụng cho mục đích khai báo thông tin về trang html:

• Tiêu đề, Loại dữ liệu hiển thị trong trang, các thành phần hỗ trợ cho định dạng, các script (kịch bản),

● Body: là phần thể hiện nội dung của trang html(người dùng có thể thấy được thông tin của phần này) Thường bao gồm:

3 Cấu trúc một tài liệu HTML

• Khai báo tài liệu (DOCTYPE)

• Nội dung tài liệu (Html Content)

Phần đầu trang (head): <title>, <base>, <link>, <meta>,<script>, <style>,

<p> Đoạn văn muốn trình bày </p>

- Các thẻ html hoàn toàn có thể sử dụng lồng nhau (Nested tags)

- Để tăng khả năng nhận biết cũng như trình bày dữ liệu, có thể sử dụng thuộc tính (attributes) cho Tags

5 Một số nguyên tắc cơ bản

▪ Luôn luôn sử dụng thẻ định dạng theo từng cặp, tức là có thẻ mở thì phải chắc chắn có thẻ đóng

▪ Để tăng khả năng trình bày cho các thẻ html, Có thể sử dụng Attribute

▪ Nhớ rằng thuộc tính sử dụng trong thẻ lệnh, luôn tồn tại theo từng cặp ở dạng key=value

▪ Chỉ nên sử dụng chữ thường đối với tên của tag, không sử dụng chữ in hoa

▪ Chỉ sử dụng ký tự hoặc ký số để đặt tên cho tập tin html, không sử dụng dấu tiếng việt và các ký tự đặc biệt khác

6.Trình bày & định dạng văn bản

- Sử dụng cho tiêu đề (Headings): <H1>, <H2>, <H6>

- Mô tả đoạn văn <p>, <br/>

- Mô tả một phần văn bản <span>

- Giữ nguyên nội dung <pre>

- Tạo đường kẻ ngang <hr/>

- Dùng cho định dạng: <b>, <i>, <u>, <sub>, <sup>

▪ _seft: Mở liên kết ngay trong cửa sổ hiện hành

▪ _blank: Mở liên kết trong cửa sổ tài liệu mới của trình duyệt

8 Audio tag – Âm thanh

9 Iframe tag

10 Danh sách, bảng dữ liệu

11 Table

12 Order – Unorder list

13 Form – Data inputs

- Ngoài khả năng trình bày dữ liệu trên web thông qua các Tag đã được học trongnhững phần trước HTML còn cung cấp các tag cho phép tạo ra những trang phục

vụ cho việc thu thập thông tin từ phía người dùng (Client) để gửi về chương trình tại máy chủ web (Web server)

- Những Tag thuộc dạng này sẽ cho phép bạn tạo ra giao diện web để người dùng

có thể nhập dữ liệu dưới dạng: Text Box (Ô nhập dữ liệu), Radio Button (Nút chọn), Check Box (Ô đánh dấu), Drop down list (Danh sách mục chọn), Button

(Nút lệnh), rất phong phú và đa dạng Tất cả các thành phần này, khi sử dụng đều phải được giới hạn bởi một thẻ html đặc biệt, được gọi là form tag

14 HTML input tag

Đây là tag được sử dụng chủ yếu cho mục tiêu thu thập dữ liệu Tag này có thể tạođược đối tượng cho phép nhập dữ liệu trên giao diện của trang HTML theo một trong các hình thức:

-textbox: Cho phép nhập thông tin ở dạng ngôn ngữ, chữ viết

-radio button: Thể hiện danh sách các chọn lựa mang tính loại trừ

-checkbox: Ô đánh dấu, có thể mang 2 trạng thái: (checked – unchecked)

-password field: Giống như textbox, (Bảo mật, chỉ người nhập biết dữ liệu đã gõ)

-button: Nút lệnh cho phép thực thi các hành động trên giao diện

-submit: cũng tương tự như button

-reset: giống như button

15 Entity & Symbol

● Trong quá trình soạn thảo văn bản nội dung trang HTML, đôi khi chúng

ta cần phải sử dụng các ký hiệu đặc biệt để biểu diễn thông tin Các ký tự <,>,’.”,

…hoắc các ký hiệu không thể gõ bằng bàn phím như ☯ ,- 亗 -, , - ×͜×, … và trongtình huống này, chúng ta không thể thực hiện theo cách thông thường do có nguy

cơ bị lỗi cú pháp (các dấu <, >, …) hoặc không thể thực hiện do bàn phím không

có phím đại diện ký tương ứng

● Để giải quyết vấn đề này HTML cung cấp 2 loại đối tượng dữ liệu đặc biệt thường được gọi là Entity & Symbol

16 Meta data

17 Comment

TUẦN III STYLESHEET ĐỊNH DẠNG DỮ LIỆU WEB

❖ C ascading S tyle S heet

1.Tổng quan

- Bản chất của HTML chính là việc mô tả các thành phần cần trình bày trên tài liệu, dựa trên nguyên tắc giới hạn phạm vi (Thông qua start tag và end tag) Cách làm này hoàn toàn tường minh, rõ ràng đồng thời lại rất đơn giản (đối với người tạo HTML) Trong đó các tag HTML vừa làm nhiệm vụ mô tả các thành phần trên tài liệu muốn thể hiện (Các tags <p>, <img>, <a>, <table>, ), vừa làm nhiệm vụ định dạng (Tags <b>, <i>, <u>, ) để trình bày dữ liệu

- Một nhược điểm lớn nhất mà người lập trình web thường gặp, khi sử dụng mã HTML để định dạng trang web, chính là mã lệnh có nguy cơ trở nên rắm rối, phức tạp khi nội dung mã HTML của trang web quá lớn, và hậu quả là rất khó khăn cho công tác bảo trì, sửa đổi mã nguồn ban đầu

- Hơn nữa việc thiên về sử dụng mã HTML cho mục đích định dạng, lại gần nhưkhông thể đem lại đặc tính tái sử dụng đối với mã nguồn trong lập trình web, vàtrong một số tình huống đặc biệt khác, khi cần phải thể hiện trang web theo cácmục tiêu phức tạp của thiết kế đồ hoạ (art design), cũng như cần phải tương tácmột cách thân thiện với người dùng (user interactive), thì việc đơn thuần chỉ sửdụng mã HTML, lại không thể đáp ứng

2.Ưu điểm của CSS

• Khả năng tái sử dụng mã định dạng ở nhiều nơi, điều này làm giảm đáng kể công sức của người lập trình

• Việc tách biệt giữa mã định dạng (CSS) và HTML thể hiện tính chuyên nghiệp hoá trong việc quản lý và xây dựng mã nguồn

• Cung cấp khả năng đồng bộ trong việc thể hiện dữ liệu theo tổng thể chương trình

3 Làm sao để làm chủ CSS

• Nắm vững khái niệm về Selector

• Hiểu rõ các hình thức tham chiếu CSS và mức độ ưu tiên

• Đơn vị đo (Kích thước, màu sắc, )

• Ý nghĩa và cách áp dụng các thuộc tính phục vụ cho việc định dạng

4.Các hình thức tham chiếu CSS

External CSS

Ưu điểm của External CSS:

● Khả năng tái sử dụng mã định dạng ở nhiều nơi, điều này làm giảm đáng kể công sức của người lập trình.

● Việc tách biệt giữa mã định dạng (CSS) và HTML thể hiện tính chuyên nghiệp hoá trong việc quản lý và xây dựng mã nguồn.

● Cung cấp khả năng đồng bộ trong việc thể hiện dữ liệu theo tổng thể chương

Mức độ ưu tiên:

❖ Selector

Khái niệm Selector

1 – Khái niệm về Selector

• Selector là một khái niệm rất quan trọng và được sử dụng khá phổ biến trong các đoạn mã định dạng CSS dành cho các trang web Mục đích chính của selector là giúp người lập trình chỉ ra chính xác những thành phần HTML sẽ chịu ảnh hưởng

• Có thể hiểu một cách đơn giản rằng Selector chính là bộ công cụ, phục vụ cho việc nhận dạng đối tượng trên một tài liệu HTML

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ể hiện (Pseudo selectors)

• Selector tập hợp các thành phần có quan hệ với nhau (Combinator selectors)

Selector theo đối tượng HTML

• text-indent

3 – Phạm vi, vị trí đối với vùng chứa

• width, min-width, max-width

• height, min-height, max-height

TUẦN IV BOOTSTRAP-RESPONSIVE-DESIGN

1 Giới thiệu về Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton

tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng8

2011 trên GitHub

Vào tháng 6 năm 2014 Bootstrap là dự án số 1 trên GitHub!

2 Bootstrap là gì?

Bootstrap miễn phí front-end framework nhanh hơn và dễ dàng hơn

Bootstrap includes HTML and CSS based bao gồm các 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 và nhiều loại khác, cũng như JavaScript tùy chọn bổ sung

Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo responsive designs

3 Responsive Web đáp ứng gì ?

Responsive Web đáp ứng là về việc tạo ra các trang web tự động điều chỉnh

để có giao diện đẹp trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính đểbàn lớn

4 Ưu điểm của Bootstrap

Dễ sử dụng: Bất kỳ ai chỉ có kiến thức cơ bản về HTML và CSS cóthể bắt đầu sử dụng Bootstrap

Tính năng đáp ứng: CSS đáp ứng của Bootstrap điều chỉnh để điện thoại, máy tính bảng và 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 là một phần của khuôn khổ cốt lõi

Khả năng tương thích của trình duyệt: Bootstrap tương thích với tất

cả các trình duyệt (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)

5 Cách sử dụng Bootstrap ?

Download Bootstrap from getbootstrap.com

Include Bootstrap from a CDN (Content Delivery Network)

6 Lợi thế của việc sử dụng Bootstrap CDN

Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập trang web khác Do đó, nó sẽ được tải từ bộ nhớ cache khi họ truy cập trang web của bạn, dẫn đến tải nhanh hơn thời gian Ngoài ra, hầu hết các CDN sẽ đảmbảo rằng một khi người dùng yêu cầu một tệp từ nó, nó sẽ được phân phát

từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn

7 Tạo trang web với Bootstrap

Hệ thống lưới của Bootstrap đáp ứng và các cột sẽ tự động sắp xếp lại tùythuộc vào kích thước màn hình

Hệ thống lưới Bootstrap có bốn lớp:

▪ xs (dành cho điện thoại - màn hình rộng dưới 768px)

▪ sm (dành cho máy tính bảng - màn hình rộng bằng hoặc lớn hơn 768px)

▪ md (dành cho máy tính xách tay nhỏ - màn hình rộng bằng hoặc lớn hơn 992px)

▪ lg (dành cho máy tính xách tay và máy tính để bàn - màn hình rộngbằng hoặc lớn hơn 1200px)

Các lớp trên có thể được kết hợp để tạo ra năng động hơn và bố cục linhhoạt

14px, với chiều cao dòng là 1.428

- Điều này được áp dụng cho phần tử <body> và tất cả các đoạn(<p>)

- Ngoài ra, tất cả các phần tử <p> đều có lề dưới bằng một nửa dòng tính toán của chúng- chiều cao (10px theo mặc định)

Bootstrap sẽ định kiểu các tiêu đề HTML (<h1> thành <h6>) trongtheo cách sau:

2 Bootstrap Typography Classes