Chương 1. Cơ sở lí thuyết về thiết kế Web 1.1 HTML HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu cơ bản sử dụng để xây dựng trang web. Nó giúp em tạo nên các thành phần trên trang web, từ văn bản đến hình ảnh, liên kết và bảng. Dưới đây, chúng em sẽ tìm hiểu về một số khái niệm cơ bản của HTML và cách sử dụng chúng.
❖ Ưu điểm: - HTML dễ học và sử dụng, ngay cả người mới bắt đầu cũng có thể nắm bắt nhanh chóng cách tạo và định dạng nội dung trên trang web. - Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn. - Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay. - HTML là chuẩn web được vận hành bởi W3C.
- HTML sử dụng hệ thống đánh dấu (emgs) để xác định loại nội dung trên trang, ví dụ: <p> cho đoạn văn bản, <img> cho hình ảnh, <a> cho liên kết. - HTML là một tiêu chuẩn công nghiệp và hoạt động trên hầu hết các trình duyệt web. Điều này đảm bảo rằng trang web em xây dựng có thể được truy cập từ hầu hết các thiết bị và trình duyệt. - HTML cho phép em nhúng các phương tiện đa dạng như hình ảnh, video, âm thanh và ứng dụng.
❖ Nhược Điểm: - Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP). - Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer. - Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được emg mới.
Do đó, dù trong HTML document có sử dụng các emg này thì trình duyệt cũng không đọc được). - Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML. 6 Downloaded by ANH LE (bachvan14@gmail.com) lOMoARcPSD|39108650 ❖ Sử Dụng HTML: HTML sử dụng cú pháp đơn giản gồm các thẻ và thuộc tính để đánh dấu và cấu trúc nội dung trang web. Dưới đây là một ví dụ đơn giản về HTML: <!DOCTYPE html> <html> <head> <title>Trang Web Mẫu</title> </head> <body> <h1>Chào mừng bạn đến với trang web mẫu!</h1> <p>Đây là một ví dụ về cách sử dụng HTML để tạo cấu trúc trang web.</p> <a href="https://example.com">Liên kết đến trang web mẫu</a> </body> </html> 1.
CSS CSS (Cascading Style Sheets) là một phần quan trọng trong việc thiết kế trang web. Nó cung cấp các quy tắc và khung cơ bản để kiểm soát cách trang web của em được hiển thị trên các trình duyệt. Dưới đây là một số điểm quan trọng về CSS: ❖ Ưu điểm - Khả năng tiết kiệm thời gian: CSS khi sử dụng có thể viết lần đầu, đồng thời sử dụng lại trong các trang HTML tiếp theo. Không chỉ vậy, chúng em hoàn toàn có thể xác định được một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiều trang web khác khi cần thiết.
- Tách Biệt Nội Dung và Giao Diện: CSS cho phép em tách biệt nội dung (HTML) và giao diện (CSS). Điều này có nghĩa là em có thể thay đổi giao diện mà không cần thay đổi nội dung, và ngược lại. Điều này tạo điều kiện thuận lợi cho việc bảo trì và quản lý trang web. - Khả năng tải trang nhanh chóng: Đăc trưng của CSS khi sử dụng là ít mã hơn.
Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiết kiêm thời gian đáng kể. Khi viết được một quy tắc CSS của một thẻ cụ thể và lúc này chúng em có thể áp dụng nó cho mọi lần xuất hiện tiếp theo của thẻ đó, 7 Downloaded by ANH LE (bachvan14@gmail.com) lOMoARcPSD|39108650 đồng thời hoàn toàn không cần tiến hành thay đổi thuộc tính của thẻ HTML. - Dễ dàng khi thực hiện bảo trì: Khi cần chúng em chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ câp nhật hoàn toàn tự động. - Khả năng tương thích tốt: Khả năng tương thích với nhiều thiết bị cũng là ưu điểm của CSS.
❖ Nhược điểm - Khá khó khăn cho người mới: CSS đa dạng và phức tạp, đặc biệt khó đối với người mới học lập trình. Điều này làm cho việc tìm hiểu và sử dụng CSS trở nên khó khăn, đặc biệt với những cấp độ phức tạp. - Định dạng web có khả năng gặp rủi ro: CSS là hệ thống mở dựa trên văn bản, làm cho việc truy cập và chỉnh sửa dễ dàng. Điều này tạo khả năng rủi ro cho định dạng tổng thể của web, đặc biệt khi có hành động hoặc sự cố xảy ra, cần phải xem xét và khắc phục lại các thay đổi.
❖ Sử Dụng CSS: Để sử dụng CSS, em cần định rõ các quy tắc CSS bằng cách xác định các thuộc tính và giá trị trong một tệp riêng biệt hoặc nhúng trực tiếp vào tệp HTML. Ví dụ: h1 { color: blue; font-size: 24px; } /* Nhúng CSS trực tiếp vào HTML */ <style> h1 { color: blue; font-size: 24px; } </style> 8 Downloaded by ANH LE (bachvan14@gmail.com) lOMoARcPSD|39108650 CSS đóng vai trò quan trọng trong việc tạo ra giao diện thú vị và chuyên nghiệp cho trang web của em. Nó cung cấp sự linh hoạt trong việc tạo ra các trang web độc đáo và phù hợp với nhiều loại dự án. JAVASCRIPT JavaScript (JS) là một ngôn ngữ lập trình phía client-side (mặt khách hàng) được sử dụng để tạo tính tương tác cho trang web.
Dưới đây là một số điểm quan trọng về JavaScript: ❖ Ưu điểm: - Tính Tương Tác: JavaScript cho phép bạn thêm tính năng tương tác vào trang web. Bạn có thể kiểm soát sự kiện như nhấn nút, di chuột, hoặc gửi biểu mẫu. - Giao Diện Người Dùng Đa Dạng: JavaScript kết hợp với HTML và CSS để tạo ra giao diện đa dạng và phong cách. Điều này cho phép bạn tạo ra các trang web động và thú vị.
- Xử Lý Dữ Liệu: JavaScript cho phép bạn xử lý dữ liệu trên trang web, từ việc lấy dữ liệu từ nguồn khác đến kiểm tra dữ liệu và hiển thị nó cho người dùng. - Thư Viện và Framework: JavaScript có nhiều thư viện và framework mạnh mẽ như React, Angular, và Vue.js giúp bạn phát triển ứng dụng phức tạp một cách nhanh chóng. ❖ Nhược điểm: - Bảo Mật: JavaScript chạy trên máy tính của người dùng, và do đó có thể dễ dàng bị lợi dụng để thực hiện các cuộc tấn công. Điều này đòi hỏi các biện pháp bảo mật cẩn thận.
- Phụ Thuộc vào Trình Duyệt: Một số tính năng JavaScript có thể hoạt động khác nhau trên các trình duyệt khác nhau, đòi hỏi thử nghiệm và kiểm tra kỹ lưỡng. 9 Downloaded by ANH LE (bachvan14@gmail.com) lOMoARcPSD|39108650 - Tải Trang Web Chậm Hơn: JavaScript có thể làm tải trang web chậm hơn nếu không được quản lý cẩn thận. Điều này có thể ảnh hưởng đến trải nghiệm người dùng. ❖ Sử Dụng: JavaScript có thể được sử dụng trực tiếp trong mã nguồn HTML hoặc nhúng từ các tệp ngoài.
Dưới đây là một ví dụ về việc sử dụng JavaScript để thực hiện một hộp thoại cảnh báo: <!DOCTYPE html> <html> <head> <title>Ví dụ JavaScript</title> </head> <body> <button onclick="alert('Xin chào, đây là ví dụ JavaScript!')">Nhấn vào tôi</button> </body> </html> JavaScript giúp bạn tạo ra các chức năng phức tạp hơn như kiểm tra biểu mẫu, tạo đối tượng động, và giao tiếp với máy chủ để cập nhật dữ liệu trang web mà không cần tải lại trang. BOOTSTRAP Bootstrap là một framework front-end mã nguồn mở phổ biến được sử dụng để phát triển giao diện web hiện đại, thân thiện với thiết bị di động và trình duyệt. Bootstrap được tạo bởi Twitter và hiện nay được duy trì bởi cộng đồng lập trình. ❖ Ưu điểm: - Thiết Kế Đáp Ứng: Bootstrap cung cấp một lưới thiết kế đáp ứng (responsive grid system) giúp tạo ra các trang web hiển thị đẹp trên cả máy tính và thiết bị di động.
- Thư Viện CSS: Bootstrap đi kèm với một bộ CSS đã được thiết kế sẵn, cho phép bạn tùy chỉnh giao diện của trang web một cách dễ dàng 10 Downloaded by ANH LE (bachvan14@gmail.com) lOMoARcPSD|39108650 - Thư Viện JavaScript: Bootstrap cung cấp các plugin JavaScript như carousel, modal, và tooltip để tạo các tính năng tương tác trên trang web. - Tích hợp dễ dàng: Bootstrap có thể dễ dàng tích hợp với các framework và thư viện khác như React, Angular, và Vue. - Cộng đồng lớn: Với một cộng đồng phát triển lớn và tài liệu hỗ trợ chi tiết, việc học và sử dụng Bootstrap trở nên dễ dàng hơn. ❖ Nhược điểm: - Giao Diện Trung Tính: Do Bootstrap được sử dụng phổ biến, một số trang web có thể có giao diện trung tính hoặc giống nhau.
- Dung Lượng Lớn: Bootstrap có kích thước tương đối lớn, điều này có thể ảnh hưởng đến tốc độ tải trang web nếu không được quản lý cẩn thận. ❖ Sử dụng: Bootstrap cung cấp một loạt các class CSS và component để giúp bạn tạo giao diện web nhanh chóng. Dưới đây là ví dụ sử dụng Bootstrap để tạo một nút (button) có kiểu (class) nút màu xanh: <!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.css"> </head> <body> <button class="btn btn-primary">Nút Màu Xanh</button> </body> </html> Các class CSS như btn và btn-primary được cung cấp bởi Bootstrap để tạo ra giao diện thân thiện với người dùng. Bootstrap giúp bạn tạo giao diện trực quan và hấp dẫn mà không cần viết mã CSS tùy chỉnh nhiều.
11 Downloaded by ANH LE (bachvan14@gmail. JQUERY jQuery là một thư viện JavaScript phổ biến được sử dụng rộng rãi để giúp quản lý và tương tác với các thành phần trên trang web một cách hiệu quả. Với jQuery, việc thao tác với DOM (Document Object Model) và xử lý sự kiện trở nên dễ dàng và ngắn gọn hơn, mang lại trải nghiệm người dùng tốt hơn. ❖ Ưu điểm - Dễ Sử Dụng: jQuery được thiết kế để dễ tiếp cận và sử dụng.
Người dùng với kiến thức cơ bản về HTML và CSS có thể nhanh chóng làm quen và tận dụng jQuery. - Tương Thích Trình Duyệt: jQuery làm việc tốt trên hầu hết các trình duyệt hiện đại như Chrome, Firefox, Internet Explorer, Edge, Safari và Opera. - Tương Tác Hiệu Quả: jQuery giúp tạo ra các hiệu ứng tương tác như hiển thị, ẩn, thay đổi nội dung một cách mượt mà và thuận tiện. - Xử Lý Sự Kiện Tốt: jQuery cung cấp một cú pháp đơn giản và mạnh mẽ để xử lý sự kiện, giúp tăng tốc độ phát triển ứng dụng web.
❖ Nhược điểm - Kích thước và tốc độ: JQuery có thể có kích thước lớn đối với các ứng dụng web đơn giản, và việc tải nhanh có thể trở thành vấn đề đối với các dự án cần tối ưu về hiệu suất.