bài tập lớn thiết kế web và triển khai hệ thống phần mềm đề tài thiết kế wed và điều hành

Ví dụ: "example.com" là một tên miền.- Web Server Name: Tên của máy chủ web, thường là tên của công ty hoặc tổ chức cung cấpdịch vụ hosting.- Homepage: Trang chính của một website, thườn

Các khái niệm cơ bản

- Thiết kế web là quá trình tạo ra giao diện người dùng (UI) và trải nghiệm người dùng (UX) cho một trang web hoặc ứng dụng web.

- Nó bao gồm việc xác định cấu trúc của trang, bố cục, màu sắc, hình ảnh và các yếu tố khác để tạo ra một giao diện trực quan, dễ sử dụng và hấp dẫn cho người dùng.

- Thiết kế web thường bắt đầu từ việc tạo các mockup hoặc wireframe để biểu diễn ý tưởng và cấu trúc, sau đó chuyển sang thiết kế đồ họa và cuối cùng là mã hóa trang web bằng các ngôn ngữ và công nghệ như HTML, CSS và JavaScript. b) Triển khai hệ thống phần mềm:

- Triển khai hệ thống phần mềm là quá trình triển khai và vận hành một ứng dụng phần mềm hoặc hệ thống phức tạp.

- Nó bao gồm các bước như triển khai mã nguồn, cài đặt và cấu hình cơ sở dữ liệu, cấu hình môi trường lưu trữ và máy chủ, kiểm thử tích hợp, và cuối cùng là triển khai ứng dụng cho người dùng cuối.

Quá trình triển khai hệ thống bao gồm các hoạt động quản lý, bảo trì, nâng cấp phần mềm và xử lý những sự cố xảy ra trong quá trình vận hành Các hoạt động này có vai trò quan trọng trong việc duy trì sự ổn định và hiệu quả của hệ thống, đảm bảo đáp ứng nhu cầu của người dùng và đạt được các mục tiêu đề ra.

Phân biệt Web tĩnh, Web động

- Website tĩnh là loại website mà nội dung của nó không thay đổi dựa trên hành động của người dùng.

- Trang web tĩnh được tạo ra bằng cách sử dụng các tập tin HTML, CSS và JavaScript cố định Mỗi trang và nội dung của nó được xác định trước và không thay đổi trong quá trình thực thi - Các trang web tĩnh thích hợp cho những trang thông tin cố định như trang giới thiệu, trang liên hệ, hoặc các trang web không yêu cầu tương tác người dùng phức tạp. b) Wed động:

- Website động là loại website mà nội dung của nó có thể thay đổi theo thời gian hoặc dựa trên hành động của người dùng.

- Trang web động thường được tạo ra bằng cách sử dụng các ngôn ngữ lập trình như PHP, Python, Ruby, Java, hoặc ASP.NET Thông qua các ngôn ngữ này, dữ liệu được tạo ra và hiển thị theo yêu cầu, có thể được truy xuất từ cơ sở dữ liệu hoặc các nguồn dữ liệu khác.

- Các trang web động thích hợp cho các ứng dụng web nơi cần có tương tác người dùng phức tạp như các trang thương mại điện tử, trang tin tức, diễn đàn, và các ứng dụng web có chức năng đăng nhập và quản lý tài khoản.

Một số thuật ngữ (Hosting, Tên miền-Domain Name-Web Server Name, HomePage,

Web Site, WebServer, URL-Uniform Resource Location, Browser, …):

- Hosting: Dịch vụ cung cấp không gian lưu trữ trên máy chủ để lưu trữ các tập tin và dữ liệu của một trang web, giúp website có thể truy cập được trên internet.

- Tên miền (Domain Name): Địa chỉ định danh dùng để xác định một trang web trên internet Ví dụ: "example.com" là một tên miền.

- Web Server Name: Tên của máy chủ web, thường là tên của công ty hoặc tổ chức cung cấp dịch vụ hosting.

- Homepage: Trang chính của một website, thường là trang đầu tiên mà người dùng truy cập khi vào website.

- Website: Một bộ sưu tập các trang web liên quan với nhau, thường có cùng một tên miền và nội dung liên quan.

- Web Server: Một máy chủ chạy các ứng dụng phần mềm để phục vụ và quản lý các yêu cầu từ trình duyệt web của người dùng, như Apache, Nginx, hoặc Microsoft IIS.

- URL (Uniform Resource Locator): Địa chỉ web đầy đủ của một tài nguyên trên internet, bao gồm giao thức (ví dụ: "http://" hoặc "https://"), tên miền, đường dẫn và tên tệp (nếu có).

- Browser (Trình duyệt): Phần mềm được sử dụng để truy cập và xem các trang web trên internet, ví dụ như Google Chrome, Mozilla Firefox, hoặc Microsoft Edge.

Một số công cụ dùng thiết kế Web (Visual Studio code, Adobe Dreamweaver, …)

Visual Studio Code là một trình biên tập mã nguồn mở miễn phí do Microsoft phát triển Nó cung cấp các tính năng mạnh mẽ cho quá trình phát triển web, bao gồm hỗ trợ nhiều ngôn ngữ lập trình, tích hợp Git và khả năng mở rộng thông qua các tiện ích mở rộng Điều này làm cho Visual Studio Code trở thành một công cụ linh hoạt và tùy biến, đáp ứng các nhu cầu khác nhau của các nhà phát triển web.

- Adobe Dreamweaver: Dreamweaver là một công cụ phát triển web được phát triển bởi Adobe Systems Nó cung cấp một giao diện đồ họa và các tính năng kéo và thả cho phép người dùng thiết kế và xây dựng trang web một cách dễ dàng mà không cần phải viết mã HTML hoặc CSS.

Sublime Text là trình biên tập mã nguồn mở đa nền tảng, được cộng đồng phát triển web yêu thích nhờ giao diện trực quan, hiệu suất mạnh mẽ Trình biên tập này cho phép tùy chỉnh cao, giúp các nhà phát triển có thể mở rộng chức năng và nâng cao trải nghiệm sử dụng.

Atom là một trình biên tập mã nguồn mở được phát triển bởi GitHub, nổi bật với tính năng tùy chỉnh cao Nó hỗ trợ đa ngôn ngữ lập trình và tích hợp Git, mang đến một môi trường phát triển linh hoạt và thuận tiện cho các lập trình viên.

- Brackets: Brackets là một trình biên tập mã nguồn mở và miễn phí được phát triển bởi Adobe Systems Nó được thiết kế đặc biệt cho phát triển web và cung cấp các tính năng như Live Preview, hỗ trợ CSS preprocessors, và tích hợp Git.

- Webflow: Webflow là một nền tảng trực quan cho việc thiết kế và xây dựng trang web mà không cần viết mã Nó cung cấp một giao diện kéo và thả cho phép người dùng tạo ra các trang web tương tác và đáp ứng một cách dễ dàng.

Thiết kế web là quá trình tạo ra giao diện người dùng và trải nghiệm người dùng cho một trang web hoặc ứng dụng web Nó bao gồm việc xác định cấu trúc của trang, bố cục, màu sắc, hình ảnh và các yếu tố khác để tạo ra một giao diện trực quan, dễ sử dụng và hấp dẫn cho người dùng Quá trình thiết kế web thường bắt đầu từ việc tạo mockup hoặc wireframe để biểu diễn ý tưởng và cấu trúc, sau đó chuyển sang thiết kế đồ họa và cuối cùng là mã hóa trang web bằng các ngôn ngữ và công nghệ như HTML, CSS và JavaScript.

Triển khai hệ thống phần mềm là quá trình triển khai ứng dụng phần mềm hoặc hệ thống phức tạp, bao gồm triển khai mã nguồn, cài đặt cơ sở dữ liệu, cấu hình lưu trữ và máy chủ, kiểm thử tích hợp và triển khai ứng dụng cho người dùng cuối Quá trình này cũng liên quan đến quản lý, duy trì hệ thống, bảo dưỡng, nâng cấp phần mềm và xử lý sự cố trong quá trình vận hành.

HTML & HTML5

Tổng quan về HTML

Cấu trúc cơ bản của HTML bao gồm các thẻ mở và đóng, xác định bố cục của trang web Các thẻ này có tên cụ thể và có thể chứa thuộc tính và nội dung.

- Thẻ: HTML sử dụng các thẻ để xác định cấu trúc của trang web Một số thẻ phổ biến bao gồm , , , , ,

, , , và đến .

- Thuộc tính: Một số thẻ có thể chứa các thuộc tính để cung cấp thông tin bổ sung về các phần tử đó Ví dụ, thuộc tính href trong thẻ được sử dụng để chỉ định URL mà liên kết sẽ dẫn đến.

- Cấu trúc tài liệu: Một tài liệu HTML thông thường bao gồm một phần head (đầu trang) và một phần body (thân trang) Phần head thường chứa các thông tin không hiển thị trực tiếp trên trang như tiêu đề, phần mô tả và các tập tin CSS hoặc JavaScript Phần body chứa nội dung mà người dùng thấy trên trang web.

- Phiên bản và Tiêu chuẩn: HTML tiếp tục phát triển và có nhiều phiên bản khác nhau, mỗi phiên bản cung cấp các tính năng mới và cải tiến Phiên bản HTML5 là phiên bản mới nhất và được sử dụng rộng rãi hiện nay.

Cấu trúc tổng quát trang HTML

- Khai báo DOCTYPE: Đây là phần đầu tiên của một tài liệu HTML, dùng để xác định phiên bản HTML mà trang web sử dụng.

- Thẻ html: Thẻ này bao bọc toàn bộ nội dung của trang web và thông báo rằng nội dung này là một tài liệu HTML.

- Phần Đầu (Head): Chứa các thông tin về trang web như tiêu đề, các siêu dữ liệu(metadata), các liên kết tới các tệp CSS hoặc JavaScript.

- Phần Thân (Body): Chứa nội dung hiển thị trên trang web, bao gồm văn bản, hình ảnh,video, liên kết, biểu mẫu, và các phần tử khác.

Các thẻ HTML thông dụng

- Các thẻ xử lý văn bản

: Được sử dụng để định dạng đoạn văn bản.

đến : Được sử dụng để tạo tiêu đề với cấp độ khác nhau.

và : Được sử dụng để làm đậm văn bản.

và : Được sử dụng để làm nghiêng văn bản Html

: Được sử dụng để gạch chân văn bản.

: Được sử dụng để tạo dòng mới.

: Được sử dụng để tạo đường ngang.

: Được sử dụng để tạo liên kết.

và
: Được sử dụng để tạo danh sách không có thứ tự và có thứ tự.

: Thẻ này được sử dụng để bắt đầu một bảng.

: Được sử dụng để tạo một hàng trong bảng.

: Được sử dụng để tạo một ô tiêu đề (header) trong bảng Thông thường được sử dụng cho các ô tiêu đề hàng hoặc cột.

: Được sử dụng để tạo một ô dữ liệu (cell) trong bảng.

- Thẻ liên kết : thuộc tính này xác định URL của tài nguyên mà liên kết sẽ đưa người dùng đến khi được nhấp vào

: đây là phần văn bản sẽ được hiển thị trên trình duyệt làm liên kết.

: xác định cửa sổ hoặc tab trình duyệt mà liên kết sẽ mở Giá trị _blank mở liên kết trong một tab mới.

: cung cấp một tiêu đề khi di chuột qua liên kết.

- Các thẻ đa phương tiện

: Được sử dụng để nhúng hình ảnh vào trang web.

: Được sử dụng để nhúng video vào trang web Các thuộc tính như controls, autoplay, và loop có thể được sử dụng để điều khiển hành vi của video.

: Được sử dụng để nhúng âm thanh vào trang web Cũng giống như thẻ ,bạn có thể sử dụng các thuộc tính như controls, autoplay, và loop.

: Được sử dụng để nhúng một trang web khác vào trang web hiện tại dưới dạng một khung Điều này thường được sử dụng để nhúng bản đồ, trình phát video từ các dịch vụ bên thứ ba, v.v.

: Được sử dụng để nhúng nhiều loại nội dung đa phương tiện, như video, âm thanh, hoặc Flash, vào trang web.

: Một thẻ phổ biến khác được sử dụng để nhúng nhiều loại nội dung đa phương tiện, như video, âm thanh, hoặc Flash, vào trang web.

Thẻ dùng để tạo vùng chứa (khung) trên trang web nhằm chứa nội dung Các khung này có thể được tạo và tùy chỉnh bằng CSS để cung cấp bố cục cho trang web

: Phần tử này cho phép bạn nhúng một trang web hoặc một tài liệu HTML vào trong trang web hiện tại Điều này cho phép bạn hiển thị nội dung từ một nguồn khác trên trang web của mình.

Các thẻ tạo biểu mẫu (form)

: Phần tử này được sử dụng để tạo ra một biểu mẫu Tất cả các phần tử nhập liệu bên trong

sẽ được gửi đi khi người dùng nhấn nút gửi.

: Xác định URL hoặc đường dẫn của trang xử lý biểu mẫu

: Xác định phương thức gửi dữ liệu, có thể là "post" hoặc "get".

và : Được sử dụng để tạo các trường dropdown trong biểu mẫu.

: Phần tử này tạo ra một ô văn bản lớn cho phép người dùng nhập nhiều dòng văn bản.

: Phần tử này được sử dụng để tạo nút trong biểu mẫu, cho phép người dùng gửi dữ liệu.

Một số thẻ HTML đặc biệt

: Khai báo kiểu tài liệu HTML và phiên bản.

: Định nghĩa một tài liệu HTML.

: Chứa các siêu dữ liệu, định nghĩa tiêu đề, kết nối CSS và JavaScript.

: Liên kết tài liệu với một tài nguyên bên ngoài, thường là một tệp CSS.

: Định nghĩa mã JavaScript hoặc liên kết đến một tệp JavaScript.

: Chứa toàn bộ nội dung hiển thị của trang web.

: Nhận xét trong mã HTML.

: Định nghĩa kiểu CSS trực tiếp trong tài liệu HTML html

HTML5

- HTML5 là phiên bản tiếp theo của ngôn ngữ đánh dấu siêu văn bản (HTML), được phát triển bởi World Wide Web Consortium (W3C) và Internet Engineering Task Force (IETF).

HTML5 mang lại nhiều cải tiến so với các phiên bản trước đó và là một tiêu chuẩn mới cho việc phát triển và thiết kế các trang web và ứng dụng web

Các tính năng chính của HTML5 bao gồm:

+ Hỗ trợ đa phương tiện: HTML5 cung cấp hỗ trợ tích hợp cho video và audio, giúp người phát triển dễ dàng nhúng các đối tượng đa phương tiện vào trang web mà không cần sử dụng các plugin bên ngoài như Flash

+ Canvas và SVG: HTML5 cung cấp các phần tử Canvas và SVG (Scalable Vector Graphics) cho phép vẽ đồ họa và hình ảnh vector trực tiếp trong trình duyệt mà không cần sử dụng công nghệ bên ngoài

API cải tiến đóng góp đáng kể vào khả năng tương tác và tính năng của trang web và ứng dụng web HTML5 cung cấp một loạt các API mới, chẳng hạn như Geolocation API, Web Storage API, Web Workers API và Drag and Drop API, giúp nâng cao đáng kể chức năng của ứng dụng web.

+ Hỗ trợ cho thiết bị di động: HTML5 được thiết kế để hỗ trợ tốt trên các thiết bị di động, với khả năng tương thích và hiển thị linh hoạt trên các loại màn hình khác nhau

+ Cải tiến về hiệu suất: HTML5 cung cấp các cải tiến về hiệu suất và tăng cường tính năng của trang web, bao gồm việc tối ưu hóa các thẻ và thuộc tính mới.

- Cú pháp HTML5 Thẻ : Đây là thẻ bao bọc toàn bộ nội dung của trang web.

Thẻ : Chứa các thông tin siêu dữ liệu, định nghĩa tiêu đề của trang, các tập tin CSS và JavaScript, và các thẻ meta.

Thẻ : Xác định tiêu đề của trang web, hiển thị trên thanh tiêu đề của trình duyệt.

Thẻ : Chứa toàn bộ nội dung hiển thị của trang web.

Thẻ mới: HTML5 bao gồm nhiều thẻ mới như , , , ,

, , , và nhiều thẻ khác, giúp cải thiện cấu trúc và semantica của trang web.

- Khai báo DOCTYPE trong HTML5 cần sử dụng thẻ DOCTYPE (Document Type Definition) xác định kiểu của tài liệu HTML và thông báo cho trình duyệt về phiên bản của HTML mà trang web sử dụng

- Thẻ ngữ nghĩa Phần tử : Phần tử này thường được sử dụng để tạo các khu vực (khung) trên trang web, và bạn có thể sử dụng nó để thử nghiệm các phần của trang web bằng cách áp dụng CSS và JavaScript.

Phần tử

: Phần tử định dạng đoạn văn bản và thường được sử dụng để hiển thị nội dung thử nghiệm.

Phần tử cho phép chèn hình ảnh vào trang web, tạo điều kiện thử nghiệm hiệu quả hiển thị hình ảnh.

Phần tử : Phần tử này được sử dụng để tạo liên kết, bạn có thể sử dụng nó để thử nghiệm các liên kết trên trang web của bạn.

Phần tử : Phần tử này được sử dụng để tạo các trường nhập liệu, bạn có thể sử dụng nó để thử nghiệm các biểu mẫu và các trường nhập liệu trên trang web của bạn.

- Web form (biểu mẫu web) là một phần quan trọng trong việc tương tác với người dùng trên trang web Đây là một phần tử của HTML được sử dụng để thu thập thông tin từ người dùng thông qua các trường nhập liệu, nút gửi và các phần tử khác.

Trường nhập liệu là các thành phần trên giao diện người dùng cho phép người dùng nhập dữ liệu vào biểu mẫu Có nhiều loại trường nhập liệu gồm text, password, email, number, date, checkbox, radio, vv.

+Trường văn bản (Text Area): Là một trường lớn cho phép người dùng nhập văn bản dài hơn.

+ Nút gửi (Submit Button): Là một nút cho phép người dùng gửi biểu mẫu khi đã nhập xong.

+ Nhãn (Labels): Là các phần tử được sử dụng để mô tả mục đích của mỗi trường nhập liệu.

+Tùy chọn (Options): Được sử dụng trong các trường như dropdown menu, radio buttons hoặc checkboxes.

+Nhóm (Fieldset): Là một phần tử được sử dụng để nhóm các trường nhập liệu liên quan lại với nhau.

HTML và HTML5 đóng vai trò cực kỳ quan trọng trong việc phát triển trang web và ứng dụng web hiện đại Dưới đây là một số kết luận chính về HTML và HTML5:

Ngôn ngữ đánh dấu siêu văn bản cơ bản: HTML là ngôn ngữ đánh dấu cơ bản cho trang web, cho phép bạn xây dựng cấu trúc và định dạng nội dung của trang

Tiêu chuẩn web: HTML tuân thủ các tiêu chuẩn của W3C, đảm bảo tính nhất quán và tương thích trên nhiều trình duyệt và thiết bị

Phát triển web tiên tiến: HTML5 mang lại nhiều cải tiến so với các phiên bản trước, bao gồm hỗ trợ đa phương tiện tích hợp, đồ họa và API tiên tiến, giúp tạo ra các trang web và ứng dụng web phong phú và tương tác hơn

CSS và CSS3

Áp dụng CSS vào trang HTML

3.4.1 Universal selector 3.4.2 Type selector 3.4.3 Identity selector 3.4.4 Class selector 3.4.5 Descendant selector 3.4.6 Child selector 3.4.7 Adjacent sibling selector 3.4.8 Attribute selector

3.4.9 Pseudo class selector 3.4.10 Group selector 3.5 Đơn vị đo lường CSS 3.6 Kế thừa thuộc tính 3.7 Các nhóm thuộc tính trong CSS

- Thuộc tính định dạng font chữ, văn bản (font, text) - Thuộc tính định dạng nền (background)

- Mô hình hộp (box model)- Các thuộc tính định margin, padding, border- Thuộc tính định dạng cách hiển thị (display)- Thuộc tính xác định vị trí (position)

Selectors

3.4.1 Universal selector3.4.2 Type selector3.4.3 Identity selector3.4.4 Class selector3.4.5 Descendant selector3.4.6 Child selector3.4.7 Adjacent sibling selector3.4.8 Attribute selector

Đơn vị đo lường CSS

- Thuộc tính định dạng font chữ, văn bản (font, text) - Thuộc tính định dạng nền (background)

- Mô hình hộp (box model)- Các thuộc tính định margin, padding, border- Thuộc tính định dạng cách hiển thị (display)- Thuộc tính xác định vị trí (position)

Kế thừa thuộc tính

- Thuộc tính định dạng font chữ, văn bản (font, text) - Thuộc tính định dạng nền (background)

- Mô hình hộp (box model)- Các thuộc tính định margin, padding, border- Thuộc tính định dạng cách hiển thị (display)- Thuộc tính xác định vị trí (position)

Các nhóm thuộc tính trong CSS

- Thuộc tính định dạng font chữ, văn bản (font, text) - Thuộc tính định dạng nền (background)

- Mô hình hộp (box model)- Các thuộc tính định margin, padding, border- Thuộc tính định dạng cách hiển thị (display)- Thuộc tính xác định vị trí (position)

Float & Clear

- CSS3 Selectors - CSS3 Rounded Corners - CSS3 Border Images - CSS3 Backgrounds - CSS Gradients - CSS3 Shadows

- CSS3 Fonts - CSS3 2D Transforms - CSS3 3D Transforms - CSS3 Transitions - CSS3 Multiple Columns - CSS3 Animations

3.12 SCSS3.13 SASSKết luận chương 3

CSS3

- CSS3 Selectors - CSS3 Rounded Corners - CSS3 Border Images - CSS3 Backgrounds - CSS Gradients - CSS3 Shadows

- CSS3 Fonts- CSS3 2D Transforms- CSS3 3D Transforms- CSS3 Transitions- CSS3 Multiple Columns- CSS3 Animations