CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1Tổng quan về HTML(HyperText markup Language) 1.1 Khái niệm HTML (HyperText Markup Language) là ngôn ngữ đánh dấu được sử dụng để xây dựng cấu trúc và bố cục của các trang web. HTML không phải là ngôn ngữ lập trình mà là ngôn ngữ đánh dấu, giúp trình duyệt hiểu và hiển thị nội dung trang web một cách chính xác. Mỗi trang HTML bao gồm các thẻ (tags), thường được viết dưới dạng cặp thẻ mở và thẻ đóng (vd: <html>.2 Lịch sử hình thành HTML được phát triển lần đầu tiên bởi Tim Berners-Lee vào năm 1991, với phiên bản đầu tiên là HTML 1. Qua nhiều giai đoạn phát triển, HTML đã được cải tiến và bổ sung thêm nhiều tính năng, với các phiên bản nổi bật như: HTML 2.0 (1995): Bổ sung các khả năng cơ bản để xây dựng các trang web tĩnh.01 (1999): Cung cấp khả năng hỗ trợ CSS, cải thiện tính tương tác.
HTML5 (2014): Phiên bản hiện tại với các tính năng nâng cao hỗ trợ âm thanh, video, đồ họa, và cải thiện trải nghiệm người dùng trên các thiết bị khác nhau.3 Cấu trúc cơ bản của HTML Mỗi tệp HTML thường được tổ chức theo cấu trúc chuẩn như sau: Hình 1 Cấu trúc của HTML 17 Trong đó: - <!DOCTYPE html>: Khai báo loại tài liệu, giúp trình duyệt nhận biết phiên bản HTML - <html>: Thẻ gốc bao bọc toàn bộ nội dung của trang web. - <head>: Chứa các thông tin về trang web như tiêu đề, liên kết tới CSS hoặc JavaScript. - <body>: Chứa nội dung chính hiển thị cho người dùng.4 Các thành phần chính của HTML - Thẻ (Tags): Xác định các phần tử trên trang web, ví dụ <h1>, <p>, <div>. - Thuộc tính (Attributes): Cung cấp thông tin bổ sung cho các thẻ.
- Nội dung (Content): Là dữ liệu hiển thị giữa thẻ mở và thẻ đóng.5 Điểm nổi bật của HTML HTML là một ngôn ngữ đánh dấu mạnh mẽ, dễ sử dụng và đóng vai trò không thể thiếu trong việc phát triển website. Dưới đây là những đặc điểm nổi bật của HTML: Tính dễ sử dụng: Cú pháp của HTML rất đơn giản, phù hợp cho cả những người mới bắt đầu học lập trình web. Các thẻ HTML có cấu trúc dễ hiểu và tên gọi thường phản ánh đúng chức năng, ví dụ <p> để viết đoạn văn, <img> để chèn hình ảnh. Tính tương thích cao: HTML là một chuẩn ngôn ngữ được hầu hết các trình duyệt (Chrome, Firefox, Safari, Edge) hỗ trợ.
Dù công nghệ phát triển, HTML vẫn giữ vai trò trung tâm trong việc xây dựng website, đảm bảo mọi website có thể hoạt động tốt trên mọi trình duyệt và thiết bị. Khả năng mở rộng: HTML dễ dàng kết hợp với các công nghệ web khác như CSS (để định dạng giao diện) và JavaScript (để tạo tính năng tương tác). Hơn nữa, HTML còn hỗ trợ tích hợp các API và thư viện, giúp website thêm phong phú và tiện dụng. Hỗ trợ đa phương tiện: Với HTML5, bạn có thể dễ dàng nhúng 18 các loại nội dung đa phương tiện như video, âm thanh mà không cần dùng đến plugin bên ngoài như Flash.
Ví dụ, thẻ <video> hoặc <audio> giúp việc phát nhạc, xem video trực tiếp trên website trở nên thuận tiện hơn. Khả năng đáp ứng mọi thiết bị: HTML kết hợp với CSS có thể giúp website hiển thị đẹp trên mọi loại màn hình, từ máy tính để bàn đến điện thoại thông minh. Điều này cực kỳ quan trọng trong kỷ nguyên công nghệ hiện đại, khi người dùng truy cập web chủ yếu qua thiết bị di động. Hỗ trợ các tiêu chuẩn hiện đại: HTML5 cung cấp nhiều tính năng mới, như các thẻ ngữ nghĩa (<header>, <footer>, <article>), giúp mã nguồn trở nên dễ đọc và có ý nghĩa hơn với cả con người lẫn công cụ tìm kiếm.
Điều này không chỉ giúp tối ưu hóa SEO mà còn cải thiện khả năng tiếp cận của website.6 Vai trò của HTML website HTML cung cấp một khung sườn để sắp xếp các thành phần của website, bao gồm: Trang chủ (Homepage): Hiển thị các sản phẩm nổi bật, ưu đãi đặc biệt, và điều hướng đến các danh mục sản phẩm. Danh mục sản phẩm (Product Categories): HTML giúp tổ chức sản phẩm thành danh mục, ví dụ: quần áo nam, nữ, trẻ em. Trang sản phẩm chi tiết: Sử dụng HTML để trình bày thông tin sản phẩm chi tiết, bao gồm tên, giá, mô tả và hình ảnh. Giỏ hàng và thanh toán: HTML định nghĩa giao diện giỏ hàng để người dùng xem, chỉnh sửa đơn hàng và thực hiện thanh toán.
Sử dụng hình ảnh: Thẻ <img> trong HTML giúp hiển thị hình ảnh sản phẩm, làm nổi bật các chi tiết như màu sắc, chất liệu. Trình bày thông tin: HTML sử dụng các thẻ tiêu đề (<h1>, <h2>) để nhấn mạnh tên sản phẩm, thẻ đoạn văn (<p>) để mô tả đặc điểm và lợi ích, và thẻ danh sách (<ul>/<ol>) để trình bày các tính năng. Tích hợp biểu mẫu (forms) là thành phần quan trọng trong 19 website bán quần áo. HTML hỗ trợ tạo biểu mẫu để: Thu thập thông tin khách hàng khi đăng ký tài khoản hoặc đặt hàng.
Thu nhận đánh giá, phản hồi từ khách hàng. HTML hỗ trợ cấu trúc ngữ nghĩa tốt, giúp website dễ dàng được công cụ tìm kiếm (Google, Bing) nhận diện và xếp hạng cao hơn. Điều này rất quan trọng để tăng lượng truy cập vào website bán quần áo. Ví dụ: Sử dụng thẻ <title> để đặt tiêu đề trang.
Thêm các thẻ meta (<meta>) để mô tả nội dung trang và từ khóa liên quan.2 Tổng quan về ngôn ngữ CSS CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả cách trình bày và định dạng của tài liệu HTML. CSS là một phần quan trọng trong phát triển web, giúp tạo ra giao diện đẹp mắt, chuyên nghiệp và mang lại trải nghiệm người dùng tốt hơn. Dưới đây là một tổng quan chi tiết về CSS: 1. Định nghĩa và vai trò của CSS CSS được phát triển để tách biệt nội dung (HTML) và cách trình bày (CSS), giúp mã nguồn trở nên dễ bảo trì và tối ưu hóa hơn.
CSS cung cấp một cách để định nghĩa các kiểu dáng cho toàn bộ trang web hoặc từng phần cụ thể mà không cần thay đổi cấu trúc HTML. Tăng tính linh hoạt: CSS cho phép thay đổi giao diện trang web mà không cần chỉnh sửa mã HTML. Ví dụ: bạn có thể thay đổi màu sắc, font chữ hoặc bố cục chỉ với vài dòng mã CSS. Tăng hiệu quả: Thay vì viết lại các quy tắc định dạng nhiều lần, CSS giúp áp dụng chung một quy tắc cho nhiều phần tử HTML thông qua các selector.
Cải thiện trải nghiệm người dùng (UX): CSS hỗ trợ thiết kế giao diện tương thích trên nhiều thiết bị, màn hình và trình duyệt khác nhau. Lịch sử phát triển của CSS 20 CSS được W3C giới thiệu lần đầu vào năm 1996. Từ đó đến nay, CSS đã trải qua nhiều phiên bản: CSS1 (1996): Phiên bản đầu tiên với các chức năng cơ bản như định dạng chữ, màu sắc, và căn chỉnh. CSS2 (1998): Bổ sung các tính năng như media queries, z-index và hỗ trợ tốt hơn cho in ấn.
CSS3 (2011): Mang đến sự đột phá với các module như flexbox, grid layout, transitions, animations và media queries mạnh mẽ hơn. CSS4 (đang phát triển): Tập trung cải thiện hiệu suất và hỗ trợ các tính năng hiện đại hơn. Cách hoạt động của CSS Khi một trình duyệt web (browser) hiển thị một tài liệu, nó phải kết hợp nội dung cùng với kiểu trình bày thông tin của tài liệu đó. Trình duyệt sẽ xử lý tài liệu theo một số giai đoạn.
Tuy nhiên, hãy nhớ rằng đây là một phiên bản rất đơn giản của một chuỗi những gì sẽ xảy ra khi một trình duyệt tải một trang web, và các trình duyệt khác nhau sẽ xử lý quá trình này theo những cách khác nhau. Và đây là những gì sẽ xảy ra: [4] 1. Trình duyệt sẽ tải HTML (ví dụ như: tải nó từ mạng) 2. Trình duyệt chuyển đổi HTML thành DOM (Mô hình đối tượng tài liệu).
DOM đại diện cho tài liệu trong bộ nhớ của máy tính. Sau đó, trình duyệt sẽ tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh và video được nhúng. và CSS được liên kết! JavaScript được xử lý sau trong quá trình này. Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại của chúng thành các "nhóm" khác nhau, ví dụ: phần tử, lớp, ID, v.
Dựa trên các bộ chọn mà nó tìm thấy, trình duyệt sẽ tìm ra các quy tắc nên được áp dụng cho các nodes trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất). Cây kết xuất được bố trí trong cấu trúc mà nó sẽ xuất hiện sau 21 khi các quy tắc đã được áp dụng cho nó. Sau tất cả, hiển thị trực quan của trang sẽ được hiển thị trên màn hình (giai đoạn này được gọi là painting). Hình 2 Hoạt động của css 1.
Các thành phần cơ bản trong CSS 1. Selectors Selectors là cách CSS chọn các phần tử HTML để áp dụng các quy tắc định dạng. Một số loại selector phổ biến: Selector cơ bản: Chọn phần tử theo tên thẻ (ví dụ: p, h1). Selector lớp (class): Sử dụng dấu chấm để chọn các phần tử có cùng class (ví dụ:.
Selector id: Sử dụng dấu # để chọn phần tử duy nhất (ví dụ: #header). Selector nhóm: Gộp nhiều selector để áp dụng cùng một quy tắc (ví dụ: h1, h2, h3). Thuộc tính và giá trị (Properties and Values) CSS cung cấp hàng trăm thuộc tính để định nghĩa giao diện, ví dụ: Text styling: color, font-size, text-align. Bố cục: margin, padding, border, width, height.
Hiệu ứng: transition, animation, transform. Units (Đơn vị đo lường) CSS hỗ trợ nhiều loại đơn vị, ví dụ: Đơn vị tuyệt đối: px, cm, mm. 22 Đơn vị tương đối: %, em, rem, vw, vh. Media Queries Media queries giúp CSS tùy chỉnh giao diện dựa trên kích thước màn hình hoặc loại thiết bị, làm cho trang web trở nên responsive.5 Ưu điểm Khả năng tiết kiệm thời gian: Cho phép bạn viết lần đầu và sử dụng lại nó trong các trang HTML tiếp theo.
Ngoài ra, bạn hoàn toàn có thể định nghĩa phong cách của từng phần tử HTML và áp dụng nó cho nhiều trang web khác nếu cần. Giúp khả năng tải trang nhanh chóng: Đặc điểm của CSS khi sử dụng là ít mã code hơn. Do đó, thời gian tải xuống nhanh chóng và tiết kiệm rất nhiều thời gian.