CMS Content Management System Hệ thống quản lý nội dung cho phép người dùng tạo, chỉnh sửa và quản lý nộidung trên website mà không cần kiến thức lập trình ví dụ: WordPress, Joomla.SEO S
Các khái niệm cơ bản
-Thiết kế web là quá trình lập kế hoạch và tạo ra giao diện cho các trang web Nó bao gồm các khía cạnh như bố cục, màu sắc, hình ảnh, phông chữ và các yếu tố tương tác Mục tiêu chính của thiết kế web là tạo ra trải nghiệm người dùng tốt, giúp người dùng dễ dàng tìm kiếm thông tin và tương tác với trang web.
- Website (hay còn gọi là trang web) là một tập hợp các trang web liên kết với nhau và được lưu trữ trên một máy chủ Mỗi trang web có thể chứa văn bản, hình ảnh, video và các yếu tố tương tác khác, phục vụ cho nhiều mục đích khác nhau như thông tin, giải trí, thương mại điện tử, giáo dục, và nhiều lĩnh vực khác.
Phân biệt Web tĩnh, Web động
-Website tĩnh Định nghĩa: Website tĩnh là những trang web có nội dung cố định, không thay đổi theo thời gian hoặc dựa trên hành động của người dùng Mỗi trang web được lưu trữ dưới dạng tệp HTML và được phục vụ trực tiếp từ máy chủ. Đặc điểm:
Nội dung không thay đổi: Nội dung được lập trình trước và không thay đổi trừ khi có sự can thiệp của lập trình viên.
Tốc độ tải nhanh: Do không cần truy xuất từ cơ sở dữ liệu, nên tốc độ tải trang thường nhanh hơn.
Dễ dàng triển khai: Không cần các công nghệ phức tạp để xây dựng và quản lý.
Ví dụ: Trang giới thiệu công ty, trang cá nhân, hay trang thông tin không thay đổi thường xuyên.
2 Website động Định nghĩa: Website động là những trang web có nội dung thay đổi dựa trên tương tác của người dùng hoặc dữ liệu từ cơ sở dữ liệu Nội dung của trang có thể được tạo ra hoặc thay đổi một cách tự động khi người dùng truy cập. Đặc điểm:
Nội dung thay đổi: Có thể cập nhật và thay đổi theo thời gian thực, phù hợp với nhu cầu của người dùng.
Tương tác cao: Cho phép người dùng tương tác thông qua các biểu mẫu, giỏ hàng, hay tính năng đăng nhập.
Cần cơ sở dữ liệu: Thường sử dụng cơ sở dữ liệu để lưu trữ và quản lý nội dung.
Ví dụ: Các trang thương mại điện tử, mạng xã hội, hoặc các trang web tin tức.
Một số thuật ngữ
Ngôn ngữ đánh dấu chính được sử dụng để tạo cấu trúc cho các trang web HTML xác định các phần tử như tiêu đề, đoạn văn, liên kết, và hình ảnh.
Ngôn ngữ dùng để định dạng và thiết kế giao diện của trang web CSS giúp điều chỉnh bố cục, màu sắc, phông chữ và các yếu tố hình ảnh khác.
Ngôn ngữ lập trình dùng để tạo ra các tương tác động trên trang web JavaScript cho phép thực hiện các tác vụ như xác thực biểu mẫu, thay đổi nội dung mà không cần tải lại trang, và tạo các hiệu ứng động.
Phương pháp thiết kế web giúp website tự động điều chỉnh và hiển thị tốt trên nhiều kích thước màn hình và thiết bị khác nhau.
Hệ thống quản lý nội dung cho phép người dùng tạo, chỉnh sửa và quản lý nội dung trên website mà không cần kiến thức lập trình (ví dụ: WordPress, Joomla). SEO (Search Engine Optimization)
Quá trình tối ưu hóa website để cải thiện khả năng hiển thị trên các công cụ tìm kiếm như Google Mục tiêu là tăng lưu lượng truy cập từ người dùng tìm kiếm thông tin liên quan.
Tổng thể trải nghiệm của người dùng khi tương tác với website hoặc ứng dụng.
UX tập trung vào sự hài lòng, hiệu quả và dễ sử dụng của sản phẩm.
Giao diện người dùng, tức là cách mà người dùng tương tác với website hoặc ứng dụng UI bao gồm các thành phần như nút, menu, và biểu mẫu.
Giao diện lập trình ứng dụng, cho phép các phần mềm khác nhau giao tiếp và tương tác với nhau API thường được sử dụng để kết nối giữa frontend và backend của ứng dụng.
Một tập hợp các công cụ và thư viện lập trình giúp lập trình viên phát triển ứng dụng nhanh hơn và hiệu quả hơn Ví dụ: React, Angular, hoặc Laravel.
(Hosting, Tên miền-Domain Name-Web Server Name, HomePage,
Web Site, WebServer, URL-Uniform Resource Location, Browser, …)
Một số công cụ dùng thiết kế Web
Visual Studio Code: Một trình soạn thảo mã nguồn miễn phí, mạnh mẽ với nhiều tiện ích mở rộng hỗ trợ phát triển web.
Sublime Text: Trình soạn thảo nhẹ, nhanh và dễ sử dụng với nhiều tính năng hữu ích cho lập trình viên.
Bootstrap: Một framework CSS phổ biến giúp xây dựng giao diện responsive nhanh chóng với các thành phần có sẵn.
Foundation: Một framework CSS khác cho phép tạo ra các thiết kế linh hoạt và mạnh mẽ.
3 Thiết kế giao diện (UI Design Tools)
Figma: Công cụ thiết kế giao diện mạnh mẽ, cho phép nhiều người cùng làm việc trên một dự án.
Adobe XD: Công cụ thiết kế và tạo prototype cho giao diện người dùng, hỗ trợ làm việc nhóm và chia sẻ dễ dàng.
4 Hệ thống quản lý nội dung (CMS)
WordPress: Nền tảng phổ biến nhất cho việc xây dựng website, dễ sử dụng và có nhiều plugin mở rộng.
Joomla: CMS mạnh mẽ với khả năng tùy biến cao, phù hợp cho các website phức tạp.
5 Công cụ kiểm tra và tối ưu hóa
Google PageSpeed Insights: Công cụ phân tích hiệu suất website, cung cấp đề xuất để cải thiện tốc độ tải trang.
GTmetrix: Giúp theo dõi và tối ưu hóa tốc độ tải trang của website.
6 Công cụ quản lý mã nguồn
Git: Hệ thống quản lý phiên bản giúp theo dõi và quản lý các thay đổi trong mã nguồn.
GitHub: Nền tảng lưu trữ mã nguồn dựa trên Git, cho phép cộng tác và chia sẻ dự án dễ dàng.
7 Công cụ phát triển Frontend
React: Thư viện JavaScript dùng để xây dựng giao diện người dùng động và tương tác.
Angular: Framework JavaScript mạnh mẽ cho phát triển ứng dụng web một trang (SPA).
Selenium: Công cụ tự động hóa thử nghiệm web, giúp kiểm tra chức năng và hiệu suất của ứng dụng.
Postman: Công cụ hỗ trợ thử nghiệm API, giúp kiểm tra và phát triển các dịch vụ web.
(Visual Studio code, Adobe Dreamweaver, …)
HTML & HTML5 (Hyper Text Markup Language)
Tổng quan về HTML (chung)
-HTML (HyperText Markup Language) là ngôn ngữ đánh dấu chính được sử dụng để xây dựng cấu trúc cho các trang web HTML cho phép nhà phát triển xác định các phần tử khác nhau trên trang như tiêu đề, đoạn văn, hình ảnh, liên kết và các yếu tố tương tác khác.
-Các thẻ HTML cơ bản
,
, , , , : Xác định các tiêu đề từ lớn đến nhỏ.
: Dùng để tạo đoạn văn.
: Tạo liên kết đến trang khác.
: Chèn hình ảnh vào trang.
- : Danh sách không thứ tự.
- : Phần tử trong danh sách.
HTML5 là phiên bản mới nhất của HTML, được phát triển để đáp ứng nhu cầu của các ứng dụng web hiện đại Nó bổ sung nhiều thẻ và tính năng mới giúp cải thiện khả năng tương tác và đa phương tiện.
-Các tính năng nổi bật của HTML5:
Thẻ video và âm thanh:
: Dùng để chèn video.
: Dùng để chèn âm thanh.
: Dùng để vẽ đồ họa 2D và 3D trực tiếp trên trình duyệt.
HTML5 cung cấp nhiều kiểu input mới như date, email, url, range, giúp tăng cường khả năng thu thập dữ liệu từ người dùng.
Web Storage: Cung cấp hai loại lưu trữ là localStorage và sessionStorage cho phép lưu trữ dữ liệu phía client.
Cấu trúc tổng quát trang HTML (chung)
-Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang
(local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,
Các thẻ HTML thông dụng
- Các thẻ xử lý văn bản
HTML cung cấp nhiều thẻ để định dạng và xử lý văn bản, giúp tạo ra các đoạn văn, tiêu đề và các định dạng khác Dưới đây là một số thẻ phổ biến để xử lý văn bản:
đến : Dùng để tạo các tiêu đề từ lớn đến nhỏ. html
: Dùng để tạo đoạn văn. html
Đây là một đoạn văn mô tả nội dung.
: Đánh dấu nội dung quan trọng, thường hiển thị bằng chữ đậm. html
Đây là nội dung quan trọng.
: Đánh dấu nội dung cần nhấn mạnh, thường hiển thị bằng chữ nghiêng. html
Đây là nội dung cần nhấn mạnh.
: Định dạng văn bản thành chữ đậm nhưng không có ý nghĩa ngữ nghĩa như
Văn bản này đậm nhưng không quan trọng.
: Định dạng văn bản thành chữ nghiêng nhưng không có ý nghĩa ngữ nghĩa như
Văn bản này nghiêng nhưng không cần nhấn mạnh.
: Đánh dấu văn bản bằng cách gạch dưới. html
Văn bản này được gạch dưới.
- : Danh sách không thứ tự. html
- : Phần tử trong danh sách.
: Tạo liên kết đến một trang hoặc tài nguyên khác. html
Truy cập trang web khác
: Dùng để trích dẫn một đoạn văn bản dài. html
"Đây là một trích dẫn nổi tiếng."
: Dùng để tham chiếu đến một nguồn gốc hoặc tác giả. html
Tác giả: Tên Tác Giả
: Tạo một đường kẻ ngang để phân tách nội dung. html
HTML cung cấp một số thẻ để tạo và định dạng bảng, giúp tổ chức dữ liệu một cách có hệ thống và dễ đọc Dưới đây là các thẻ cơ bản để tạo bảng:
Thẻ gốc để tạo bảng. html
Thẻ dùng để tạo một hàng trong bảng. html
Thẻ dùng để tạo ô tiêu đề trong bảng Nội dung trong thẻ thường được hiển thị đậm và canh giữa. html
Thẻ dùng để tạo ô dữ liệu trong bảng. html
Cấu trúc hoàn chỉnh của một bảng
Dưới đây là ví dụ về cấu trúc một bảng hoàn chỉnh: html
Bảng Thông Tin Sinh Viên
Giải thích cấu trúc bảng:
: Bắt đầu bảng Có thể thêm thuộc tính như border để tạo đường viền cho bảng.
: Tạo tiêu đề cho bảng.
: Tạo hàng cho bảng.
: Tạo ô tiêu đề cho các cột.
: Tạo ô chứa dữ liệu cho các hàng.
Các thuộc tính bổ sung cho bảng border: Xác định độ dày của đường viền bảng. cellpadding: Khoảng cách giữa nội dung ô và đường viền của ô. cellspacing: Khoảng cách giữa các ô. colspan: Xác định số cột mà một ô nên chiếm. rowspan: Xác định số hàng mà một ô nên chiếm.
Thẻ liên kết trong HTML, được định nghĩa bằng thẻ , được sử dụng để tạo các liên kết đến trang web khác, tài liệu hoặc các phần khác trong cùng một trang. Dưới đây là các khía cạnh quan trọng của thẻ liên kết:
1 Cấu trúc cơ bản của thẻ html
Nội dung liên kết
href: Thuộc tính bắt buộc, xác định địa chỉ URL mà liên kết sẽ dẫn đến.
Nội dung liên kết: Văn bản hoặc nội dung mà người dùng có thể nhấp vào.
2 Ví dụ sử dụng thẻ
Liên kết đến một trang web khác: html
Truy cập Example
Liên kết đến một địa chỉ email: html
Gửi email
Liên kết đến một số điện thoại: html
Gọi số điện thoại này
Liên kết nội bộ (đến một phần trong cùng một trang): html
Đi đến phần 1
3 Các thuộc tính mở rộng của thẻ
target: Xác định cách mở liên kết Một số giá trị phổ biến: o _blank: Mở liên kết trong một tab hoặc cửa sổ mới. o _self: Mở liên kết trong cùng một khung (mặc định). o _parent: Mở liên kết trong khung cha. o _top: Mở liên kết trong toàn bộ cửa sổ. html
Mở trong tab mới
title: Cung cấp thông tin bổ sung về liên kết, hiển thị khi di chuột qua liên kết. html
Example
rel: Xác định mối quan hệ giữa tài nguyên hiện tại và tài nguyên được liên kết Ví dụ: o noopener: Bảo vệ thông tin từ trang hiện tại khi mở trong tab mới. o noreferrer: Ngăn trình duyệt gửi thông tin nguồn gốc. html
Mở trong tab mới
Có thể sử dụng thẻ để tạo liên kết cho hình ảnh: html
-Thẻ liên kết trong HTML
Thẻ liên kết trong HTML, được biểu thị bằng thẻ , cho phép tạo ra các liên kết đến trang web khác, tài liệu, hoặc các phần khác trong cùng một trang Đây là một trong những thẻ quan trọng nhất trong HTML, giúp kết nối thông tin và tạo ra trải nghiệm người dùng mượt mà.
1 Cấu trúc cơ bản của thẻ html
Nội dung liên kết
href: Thuộc tính bắt buộc, xác định địa chỉ URL mà liên kết sẽ dẫn đến.
Nội dung liên kết: Văn bản hoặc nội dung mà người dùng có thể nhấp vào.
2 Ví dụ sử dụng thẻ
Liên kết đến một trang web khác: html
Truy cập trang Example
Liên kết đến một địa chỉ email: html
Gửi email
Liên kết đến một số điện thoại: html
Gọi số điện thoại này
Liên kết nội bộ (đến một phần trong cùng một trang): html
Đi đến phần 1
3 Các thuộc tính mở rộng của thẻ
target: Xác định cách mở liên kết. o _blank: Mở liên kết trong một tab hoặc cửa sổ mới. o _self: Mở liên kết trong cùng một khung (mặc định). o _parent: Mở liên kết trong khung cha. o _top: Mở liên kết trong toàn bộ cửa sổ. html
Mở trong tab mới
title: Cung cấp thông tin bổ sung về liên kết, hiển thị khi di chuột qua liên kết. html
Example
rel: Xác định mối quan hệ giữa tài nguyên hiện tại và tài nguyên được liên kết Một số giá trị phổ biến: o noopener: Bảo vệ thông tin từ trang hiện tại khi mở trong tab mới. o noreferrer: Ngăn trình duyệt gửi thông tin nguồn gốc. html
Mở trong tab mới
Thẻ có thể bao gồm hình ảnh, tạo ra liên kết cho hình ảnh: html
- Các thẻ đa phương tiện
Các thẻ đa phương tiện trong HTML
HTML hỗ trợ nhiều thẻ để nhúng các nội dung đa phương tiện như hình ảnh, âm thanh và video Dưới đây là một số thẻ quan trọng để làm việc với các loại nội dung này:
Thẻ dùng để chèn hình ảnh vào trang web.
src: Đường dẫn đến hình ảnh. alt: Mô tả hình ảnh, hiển thị khi hình ảnh không thể tải. width và height: Kích thước hình ảnh (có thể bỏ qua).
Thẻ dùng để nhúng video vào trang web.
Trình duyệt của bạn không hỗ trợ video.
controls: Thêm các điều khiển phát, tạm dừng, điều chỉnh âm lượng, v.v.
: Chỉ định nguồn video và định dạng. width và height: Kích thước video (có thể bỏ qua).
Thẻ dùng để nhúng âm thanh vào trang web.
Trình duyệt của bạn không hỗ trợ âm thanh.
controls: Thêm các điều khiển phát, tạm dừng, điều chỉnh âm lượng.
: Chỉ định nguồn âm thanh và định dạng.
Thẻ dùng để nhúng nội dung từ trang web khác vào trang hiện tại.
src: Địa chỉ URL của nội dung cần nhúng. width và height: Kích thước iframe. frameborder: Xác định có hiển thị đường viền hay không (có thể bỏ qua trong HTML5).
Thẻ cho phép vẽ đồ họa động thông qua JavaScript.
id: Định danh cho thẻ canvas để truy cập qua JavaScript. width và height: Kích thước của canvas.
Trong HTML, thẻ dùng để tạo khung (frame) là , cho phép nhúng một trang web khác vào trang hiện tại Dưới đây là chi tiết về cách sử dụng thẻ này:
Thẻ được sử dụng để nhúng một tài liệu HTML khác trong trang hiện tại, cho phép hiển thị nội dung từ một nguồn khác mà không cần chuyển hướng người dùng.
Cú pháp cơ bản: html
src: Địa chỉ URL của tài liệu hoặc trang web mà bạn muốn nhúng. width: Độ rộng của khung (có thể chỉ định bằng pixel hoặc phần trăm). height: Chiều cao của khung (có thể chỉ định bằng pixel hoặc phần trăm). frameborder: Xác định xem có hiển thị đường viền quanh khung hay không Giá trị
HTML5
Khai báo DOCTYPE trong HTML5
CSS và CSS3 (Cascading Style Sheets)
Selectors (chia)
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)
CSS3
THIẾT KẾ WEBISTE THEO ĐỀ TÀI BẠN CHỌN
Ý tưởng của Website
- Lý do chọn đề bài
- Cấu trúc chung (vắn tắt):
+ Chia theo nhóm người dùng
Thiết kế trang Web bằng HTML và CSS
- Ý tưởng thiết kế (có thể dùng Paint hoặc phần mềm nào đó) để vẽ hình dung ra cấu trúc trang web
- Thiết kế chi tiết: Mô tả thành phần và ví dụ thiết:
+ VD mô tả về header (tiêu đề): bao gồm logo, menu, button đăng nhập, đăng ký, tìm kiếm
Kết quả đạt được
- Ảnh chụp kết trang web:
+ Ảnh chi tiết từng trang (kết quả, code)
- : Danh sách có thứ tự. html
- : Phần tử trong danh sách.
- : Danh sách có thứ tự.