Đồ Án Môn Học: Xây Dựng Website Bán Giày Online - Đại Học Kiến Trúc Hà Nội

Đồ án môn học xây dựng website bán giày chuyên nghiệp. Tìm hiểu quy trình, thiết kế, và phát triển web bán giày hiệu quả, tối ưu SEO. Tải ngay!

Trường đại học

Trường Đại Học Kiến Trúc Hà Nội

Chuyên ngành

Công Nghệ Thông Tin

Người đăng

Ẩn danh

Thể loại

Đồ án môn học

2023

Phí lưu trữ

30 Point

Mục lục chi tiết

LỜI CẢM ƠN

1. GIỚI THIỆU VỀ ĐỀ TÀI

1.1. Giới thiệu về HTML

1.2. Hướng dẫn tạo một tệp HTML cơ bản

1.3. Hướng dẫn cú pháp và các phần tử HTML cơ bản

1.3.1. Các phần tử chính của phần tử như sau

1.3.2. Các phần tử có thể có các thuộc tính giống như sau

1.3.3. Phần tử trống

1.3.4. Giải phẫu tài liệu HTML

1.4. Tạo trang Web với tiêu đề, đoạn văn bản, hình ảnh và siêu liên kết

2. Cơ bản về CSS

2.1. CSS – Thêm kiểu cho web

2.2. Tạo các lớp và áp dụng kiểu bằng cách sử dụng lựa chọn

2.3. Thử nghiệm với các thuộc tính CSS cơ bản như font chữ, màu sắc, độ rộng và chiều cao

2.3.1. Độ rộng và chiều cao

3. Giới thiệu cú pháp JavaScript cơ bản

3.1. Tạo biến, hàm và sử dụng sự kiện JavaScript

3.2. Sử dụng sự kiện (Event)

3.3. Tạo ví dụ đơn giản như hiển thị thông báo khi nhấn nút

4. HTML Forms và Input Elements

4.1. Tạo biểu mẫu HTML

4.2. Phần tử

4.2.1. Các trường nhập liệu kiểu dáng (Styling Input Fields)

4.3. Sử dụng JavaScript

4.3.1. Xác thực biểu mẫu JavaScript

4.3.2. Xác thực biểu mẫu HTML tự động

4.3.3. Xác thực dữ liệu

4.3.4. Xác thực ràng buộc HTML

4.3.5. Xác thực ràng buộc thuộc tính đầu vào HTML

4.3.6. Xác thực ràng buộc bộ chọn giả CSS

5. Quy trình phát triển Web

5.1. Quản lý tiến độ phát triển website

5.2. Quy trình phát triển website

5.2.1. Thu thập thông tin, tiếp nhận yêu cầu của khách hàng

5.2.2. Lập kế hoạch

5.2.3. Lựa chọn tên miền website và hosting

5.2.4. Thiết kế giao diện

5.2.5. Xây dựng tính năng và nội dung website

5.2.6. Kiểm tra và chỉnh sửa

5.2.7. Bàn giao và hướng dẫn sử dụng

6. NGHIÊN CỨU TỔNG QUAN

6.1. Giới thiệu tài liệu

6.2. Lý do chọn đề tài

7. TRIỂN KHAI XÂY DỰNG HỆ THỐNG WEBSITE

7.1. Chiến lược dự án

7.2. Kế hoạch dự án

7.3. Phạm vi dữ liệu

7.4. Kết quả của hệ thống

8. PHÂN TÍCH, THIẾT KẾ HỆ THỐNG WEBSITE

MỞ ĐẦU

Tóm tắt

I. Tổng Quan Đề Tài Website Bán Giày Online Cho Đồ Án CNTT

Trong bối cảnh cuộc cách mạng công nghiệp 4.0, thương mại điện tử (e-commerce) đã trở thành một lĩnh vực không thể thiếu, biến đổi sâu sắc cách thức kinh doanh và tiêu dùng. Internet không còn là công cụ tìm kiếm thông tin đơn thuần mà đã trở thành một nền tảng kết nối toàn cầu, thúc đẩy các hoạt động kinh tế, xã hội. Nhu cầu mua sắm trực tuyến ngày càng tăng cao, đòi hỏi các doanh nghiệp, từ lớn đến nhỏ, phải xây dựng sự hiện diện trên không gian mạng. Chính vì vậy, việc lựa chọn đề tài 'Xây dựng website bán giày online' cho một đồ án môn học CNTT không chỉ mang tính thực tiễn cao mà còn giúp sinh viên áp dụng trực tiếp kiến thức đã học vào một e-commerce project cụ thể. Đề tài này bao quát nhiều mảng kiến thức cốt lõi của ngành công nghệ thông tin, từ thiết kế web, lập trình frontend, backend, cho đến cơ sở dữ liệu và quản trị hệ thống. Việc thực hiện một đồ án mẫu như vậy giúp sinh viên có cái nhìn tổng thể về quy trình phát triển ứng dụng web hoàn chỉnh, từ khâu lên ý tưởng, phân tích yêu cầu, thiết kế, lập trình, kiểm thử và triển khai. Đây là cơ hội để rèn luyện kỹ năng làm việc với các công nghệ phổ biến như Java Spring, SQL Server và các ngôn ngữ nền tảng như HTML, CSS, JavaScript, tạo ra một sản phẩm hữu ích, có thể làm nền tảng cho các đồ án tốt nghiệp CNTT sau này. Mục tiêu của đồ án không chỉ dừng lại ở việc tạo ra một shop giày online hoạt động, mà còn là xây dựng một hệ thống dễ dàng quản lý, bảo mật và có khả năng mở rộng trong tương lai.

1.1. Lý do và tính cấp thiết của đề tài website bán giày

Việc lựa chọn đề tài được thúc đẩy bởi nhu cầu thực tế của thị trường. Theo tài liệu gốc, "Nhu cầu mua sắm trực tuyến thanh toán qua mạng ngày càng phổ biến rộng rãi để khách hàng luôn có được sự lựa chọn tốt nhất ngay tại nhà". Việc phát triển một shop giày online giải quyết bài toán tiếp cận khách hàng, quảng bá sản phẩm và mở rộng quy mô kinh doanh một cách hiệu quả. Đối với sinh viên, đây là một đề tài website bán giày lý tưởng để thực hành các kỹ thuật hướng đối tượng và áp dụng kiến thức về mô hình MVC, hai trong số những khái niệm nền tảng trong phát triển phần mềm hiện đại.

1.2. Mục tiêu chính và phạm vi nghiên cứu của đồ án

Mục tiêu cốt lõi của đồ án là "Xây dựng 1 Website hoàn chỉnh về việc cung cấp thông tin bổ ích về dịch vụ, sản phẩm của cửa hàng". Cụ thể hơn, hệ thống cần đáp ứng các yêu cầu về chức năng cho cả người dùng và quản trị viên, bao gồm: hiển thị sản phẩm, tìm kiếm, giỏ hàng, đăng ký/đăng nhập, và một admin panel để quản lý. Phạm vi của đồ án tập trung vào việc phục vụ khách hàng có nhu cầu đặt hàng qua mạng và người quản trị hệ thống. Các công nghệ được xác định sử dụng là ngôn ngữ lập trình Java Spring và hệ quản trị cơ sở dữ liệu SQL Server, đảm bảo một hệ thống ổn định và bảo mật.

II. Quy Trình 7 Bước Phát Triển Một Website Bán Giày Toàn Diện

Việc xây dựng một hệ thống thương mại điện tử thành công không chỉ nằm ở việc viết mã nguồn. Nó đòi hỏi một quy trình phát triển bài bản và khoa học. Tài liệu nghiên cứu đã đề xuất một quy trình phát triển website gồm 7 bước cốt lõi, đảm bảo dự án đi đúng hướng, đáp ứng yêu cầu và hoàn thành đúng thời hạn. Quy trình này bắt đầu từ giai đoạn nền tảng nhất là thu thập thông tin và kết thúc bằng việc bảo trì hệ thống sau khi triển khai. Bước đầu tiên, thu thập yêu cầu, là giai đoạn mang tính quyết định, nơi đội ngũ phát triển làm việc với khách hàng để xác định rõ lĩnh vực hoạt động, đối tượng mục tiêu và các yêu cầu kỹ thuật. Tiếp theo là lập kế hoạch, nơi một sitemap (sơ đồ website) được phác thảo để định hình cấu trúc và luồng điều hướng. Giai đoạn này cũng xác định các công nghệ sẽ sử dụng, ví dụ như lựa chọn giữa PHP, Laravel, NodeJS hay ASP.NET. Sau khi có kế hoạch chi tiết, việc thiết kế giao diện người dùng và tối ưu trải nghiệm người dùng (UI/UX) được tiến hành. Một giao diện đẹp, trực quan và dễ sử dụng là yếu tố then chốt để giữ chân khách hàng. Bước quan trọng nhất là xây dựng tính năng và nội dung, nơi các lập trình viên hiện thực hóa bản thiết kế thành một sản phẩm hoạt động, từ trang chủ, trang sản phẩm, đến chức năng giỏ hàng và thanh toán online. Cuối cùng, các bước kiểm thử, bàn giao và bảo trì đảm bảo website hoạt động ổn định, không lỗi và được hỗ trợ lâu dài. Quy trình này là kim chỉ nam cho mọi đồ án môn học CNTT về phát triển ứng dụng web.

2.1. Phân tích yêu cầu và lập kế hoạch sitemap dự án

Giai đoạn này là nền tảng của toàn bộ dự án. Theo tài liệu, việc "phân tích yêu cầu và thông tin của khách hàng" là bước đi đầu tiên. Cần xác định rõ các tính năng thiết yếu như quản lý tài khoản, quản lý giỏ hàng, mã giảm giá và định vị khách hàng. Sau đó, việc "phác thảo sơ đồ (sitemap) website" được xem là "xương sống", giúp định hình cấu trúc và phân chia công việc một cách khoa học. Một sitemap tốt sẽ đảm bảo luồng thông tin logic, giúp người dùng dễ dàng tìm kiếm và điều hướng trên shop giày online.

2.2. Thiết kế giao diện UI và trải nghiệm người dùng UX

Thiết kế giao diện không chỉ là về thẩm mỹ mà còn về tính khả dụng. Tài liệu nhấn mạnh tầm quan trọng của việc lựa chọn tông màu phù hợp với bộ nhận diện thương hiệu và đối tượng khách hàng. Đặc biệt, xu hướng responsive web design được đề cập như một yêu cầu bắt buộc, nhằm "giúp website hiển thị và hoạt động ổn định trên các thiết bị có kích cỡ màn hình khác nhau". Một trải nghiệm người dùng tốt sẽ tăng tỷ lệ chuyển đổi và tạo sự tin tưởng cho khách hàng khi thực hiện thanh toán online.

2.3. Kiểm thử bàn giao và bảo trì hệ thống website

Giai đoạn cuối cùng nhưng không kém phần quan trọng là kiểm tra và chỉnh sửa. Tài liệu khẳng định rằng "Không thể chắc chắn được rằng website của bạn không có bất kỳ lỗi nào trong quá trình thiết kế". Việc kiểm tra toàn diện các chức năng, tối ưu hóa cho di động và đảm bảo an ninh là bắt buộc trước khi bàn giao. Sau khi bàn giao, giai đoạn bảo trì bắt đầu, bao gồm việc cập nhật, sửa lỗi và hỗ trợ kỹ thuật, đảm bảo hệ thống shop giày online hoạt động liên tục và hiệu quả.

III. Hướng Dẫn Thiết Kế Cơ Sở Dữ Liệu Cho Website Bán Giày

Trái tim của mọi ứng dụng web động, đặc biệt là một website bán giày online, chính là hệ thống cơ sở dữ liệu. Một cấu trúc CSDL được thiết kế tốt không chỉ đảm bảo tính toàn vẹn dữ liệu mà còn giúp hệ thống hoạt động hiệu quả, dễ dàng truy vấn và mở rộng. Trong khuôn khổ một đồ án môn học CNTT, việc thiết kế CSDL là một kỹ năng cơ bản nhưng cực kỳ quan trọng. Quá trình này bắt đầu bằng việc phân tích và xác định các thực thể (entities) cốt lõi của hệ thống. Đối với một shop giày online, các thực thể không thể thiếu bao gồm: Người Dùng (Users), Sản Phẩm (Products), Danh Mục (Categories), Đơn Hàng (Orders), và Chi Tiết Đơn Hàng (Order_Details). Mỗi thực thể sẽ trở thành một bảng trong CSDL, chứa các thuộc tính (attributes) mô tả thông tin chi tiết. Ví dụ, bảng Sản Phẩm sẽ có các cột như ID, tên sản phẩm, mô tả, giá, hình ảnh, số lượng tồn kho. Sau khi xác định các thực thể và thuộc tính, bước tiếp theo là xây dựng Sơ đồ Quan hệ Thực thể (ERD - Entity-Relationship Diagram). ERD giúp trực quan hóa mối quan hệ giữa các bảng, chẳng hạn như mối quan hệ một-nhiều giữa Danh Mục và Sản Phẩm, hay mối quan hệ nhiều-nhiều giữa Đơn Hàng và Sản Phẩm (thông qua bảng Chi Tiết Đơn Hàng). Việc lựa chọn hệ quản trị CSDL như MySQL hay SQL Server cũng cần được cân nhắc dựa trên yêu cầu của dự án và công nghệ backend được sử dụng. Một thiết kế CSDL chuẩn mực sẽ là nền tảng vững chắc cho việc phát triển các tính năng phức tạp như quản lý sản phẩm hay theo dõi đơn hàng.

3.1. Phân tích các thực thể chính Sản phẩm Đơn hàng Người dùng

Việc xác định các thực thể là bước đầu tiên trong thiết kế CSDL. Bảng Người Dùng (Users) sẽ lưu trữ thông tin đăng nhập và thông tin cá nhân. Bảng Sản Phẩm (Products) chứa toàn bộ chi tiết về giày, liên kết với bảng Danh Mục (Categories) để phân loại. Quan trọng nhất là bảng Đơn Hàng (Orders), ghi lại thông tin giao dịch của khách hàng, và bảng Chi Tiết Đơn Hàng (Order_Details) để lưu trữ những sản phẩm cụ thể trong mỗi đơn hàng. Đây là cấu trúc cơ bản cho mọi code web bán giày.

3.2. Sơ đồ quan hệ thực thể ERD cho code web bán giày

Sơ đồ ERD là bản thiết kế chi tiết cho cơ sở dữ liệu. Nó mô tả các bảng, các trường trong mỗi bảng và các khóa (khóa chính, khóa ngoại) để liên kết chúng. Ví dụ, user_id trong bảng Đơn Hàng sẽ là khóa ngoại tham chiếu đến khóa chính trong bảng Người Dùng. Tương tự, product_id trong bảng Chi Tiết Đơn Hàng sẽ liên kết đến bảng Sản Phẩm. Một ERD rõ ràng giúp việc viết source code website bán giày trở nên logic và giảm thiểu lỗi trong quá trình truy vấn dữ liệu.

IV. Xây Dựng Các Tính Năng Cốt Lõi Của Một E commerce Project

Sau khi đã có một cấu trúc cơ sở dữ liệu vững chắc, giai đoạn tiếp theo là hiện thực hóa các chức năng của website bán giày online. Đây là phần việc đòi hỏi kỹ năng lập trình cao, kết hợp cả frontend và backend để tạo ra một trải nghiệm người dùng mượt mà. Một e-commerce project hoàn chỉnh phải có đầy đủ các tính năng cơ bản. Chức năng quản lý sản phẩm là yêu cầu tiên quyết, cho phép quản trị viên thêm, sửa, xóa sản phẩm, cập nhật giá và số lượng tồn kho thông qua một admin panel chuyên dụng. Về phía người dùng, chức năng tìm kiếm và bộ lọc sản phẩm theo danh mục, giá, kích cỡ là cực kỳ quan trọng để họ có thể nhanh chóng tìm thấy món đồ mong muốn. Module giỏ hàng là một thành phần phức tạp, yêu cầu xử lý logic để thêm sản phẩm, cập nhật số lượng, và tính toán tổng tiền. Quy trình thanh toán là điểm chạm cuối cùng, cần được thiết kế đơn giản, an toàn và hỗ trợ nhiều phương thức thanh toán online. Toàn bộ các chức năng này cần được kết nối với nhau thông qua các API (Application Programming Interface), giúp frontend (ví dụ, xây dựng bằng ReactJS) có thể giao tiếp và trao đổi dữ liệu với backend (xây dựng bằng Laravel hoặc Java Spring). Việc áp dụng mô hình MVC (Model-View-Controller) giúp tổ chức code web bán giày một cách khoa học, tách biệt giữa logic xử lý, dữ liệu và giao diện, làm cho dự án dễ bảo trì và phát triển hơn. Đây là những kỹ năng thiết yếu mà sinh viên cần nắm vững khi thực hiện đề tài website bán giày.

4.1. Lập trình module quản lý sản phẩm và danh mục

Module này là trung tâm của trang quản trị. Nó cho phép người quản trị thực hiện các thao tác CRUD (Create, Read, Update, Delete) đối với sản phẩm và danh mục. Giao diện cần trực quan, với các form nhập liệu rõ ràng và có xác thực dữ liệu đầu vào. Việc sử dụng các framework như Laravel hay ASP.NET sẽ giúp đẩy nhanh quá trình xây dựng module quản lý sản phẩm này nhờ các tính năng có sẵn.

4.2. Triển khai chức năng giỏ hàng và quy trình thanh toán

Chức năng giỏ hàng thường được quản lý bằng session phía server hoặc local storage phía client. Logic cần xử lý chính xác việc thêm/xóa sản phẩm và cập nhật tổng giá trị đơn hàng. Quy trình thanh toán phải được chia thành các bước rõ ràng: nhập thông tin giao hàng, chọn phương thức vận chuyển, và cuối cùng là chọn phương thức thanh toán online. Việc tích hợp các cổng thanh toán qua API là một phần nâng cao nhưng rất giá trị cho một đồ án môn học CNTT.

4.3. Thiết kế Admin Panel để quản lý toàn bộ shop giày online

Một admin panel hiệu quả là công cụ đắc lực cho người quản trị. Ngoài quản lý sản phẩm, nó cần có các chức năng quản lý đơn hàng, quản lý khách hàng, và xem các báo cáo, thống kê doanh thu cơ bản. Việc thiết kế một bảng điều khiển (dashboard) tổng quan với các biểu đồ trực quan sẽ giúp người quản trị nắm bắt nhanh tình hình kinh doanh của shop giày online.

V. Chia Sẻ Source Code Website Bán Giày Cách Viết Báo Cáo

Một trong những mục tiêu quan trọng khi hoàn thành một đồ án môn học CNTT là tạo ra một sản phẩm hoàn chỉnh và tài liệu hóa nó một cách chuyên nghiệp. Việc tìm kiếm và tham khảo các source code website bán giày có sẵn là một phương pháp học tập hiệu quả, giúp sinh viên hình dung rõ hơn về cấu trúc của một dự án thực tế. Các đồ án mẫu thường được chia sẻ trên các nền tảng như Github, cung cấp một cái nhìn sâu sắc về cách các lập trình viên khác áp dụng các công nghệ như PHP, NodeJS hay Java Spring vào việc xây dựng một shop giày online. Tuy nhiên, việc tham khảo cần đi đôi với sự hiểu biết, tránh sao chép máy móc. Song song với việc hoàn thiện sản phẩm, kỹ năng viết báo cáo đồ án website bán hàng cũng quan trọng không kém. Một bản báo cáo tốt không chỉ trình bày kết quả đạt được mà còn thể hiện toàn bộ quá trình tư duy, từ việc phân tích vấn đề, lựa chọn giải pháp công nghệ, thiết kế hệ thống, cho đến kết quả kiểm thử và hướng phát triển trong tương lai. Cấu trúc báo cáo cần logic, rõ ràng, với các chương mục được phân chia hợp lý như: Mở đầu, Tổng quan cơ sở lý thuyết, Phân tích và thiết kế hệ thống, Triển khai chương trình, và Kết luận. Việc trình bày chi tiết về thiết kế cơ sở dữ liệu với sơ đồ ERD, thiết kế giao diện người dùng, và mô tả các chức năng chính sẽ giúp hội đồng đánh giá cao nỗ lực và kiến thức của người thực hiện. Đây là bước cuối cùng để tổng kết và bảo vệ thành công đề tài website bán giày.

5.1. Tham khảo đồ án mẫu sử dụng Java Spring và SQL Server

Tài liệu gốc đã lựa chọn stack công nghệ Java Spring và SQL Server. Sinh viên có thể tìm kiếm các đồ án mẫu sử dụng công nghệ tương tự để học hỏi cách cấu hình dự án, xây dựng các lớp Entity, Repository, Service và Controller theo mô hình MVC. Việc phân tích một source code website bán giày chất lượng sẽ giúp rút ngắn thời gian học tập và tránh được các lỗi phổ biến trong quá trình phát triển ứng dụng web.

5.2. Cấu trúc chuẩn cho một báo cáo đồ án website bán hàng

Một báo cáo đồ án website bán hàng chuyên nghiệp cần bao gồm các phần chính: Giới thiệu (lý do chọn đề tài, mục tiêu), Phân tích yêu cầu (yêu cầu chức năng và phi chức năng), Thiết kế hệ thống (sơ đồ ERD, thiết kế kiến trúc, thiết kế giao diện), Hiện thực chương trình (công nghệ sử dụng, mô tả các module chính), và Kết luận (kết quả đạt được, hạn chế, hướng phát triển). Việc chuẩn bị một bản báo cáo chỉn chu thể hiện sự nghiêm túc và chuyên nghiệp của sinh viên.

11/09/2025

Bạn đang xem trước tài liệu:

Đồ án môn học xây dựng website bán giày

Tải đầy đủ

Trích đoạn nội dung tài liệu

mở đầu bắt buộc. Khi HTML mới xuất hiên (1991-1992), Doctype có nghĩa là hoạt động như các liên kết đến một tập hợp các quy tắc mà trang HTML phải tuân theo để được coi là HTML tốt, có thể kiểm tra lỗi tự động và những hữu ích khác. Tuy nhiên, ngày nay chúng không làm được những điều gì và về cơ bản chỉ cần thiết để đảm bảo tài liệu của bạn hoạt động chính xác. <html></html>(The <html> element) Phần tử này bao bọc hết tất cả nội dung trên toàn bộ trang và đôi khi gọi là phần tử gốc.

Nó cũng bao gồm thuộc tính, thiết lập ngôn ngữ chính xác của tài liệu. <head></head>(The <head> element): Phần tử này hoạt động như một vùng chứa cho tất cả nội dung bạn muốn đưa vào trang HTML không phải alf nội dung bạn đang hiển thị cho người xem trang của mình. Điều này bao gồm những thứ như keyword và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS để tạo ra kiểu cho nội dung, khai báo bộ ký tự và hơn thế nữa. <meta charset=“utf-8”>: Phần tử này đặt bộ ký tự mà tài liệu của bạn nên sự dụng thành UTF-8, bao gồm gần hết các ký tự từ phần lớn các ngôn ngữ viết.

Theo cùng một cách mà một cuốn sách có tiêu đề chính, tiêu đề chương và phụ đề, một tài liệu HTML cũng có thể. HTML chứa 6 cấp độ tiêu đề, từ <h1> đến <h6>, mặc dù bạn thường chỉ sử dụng tối đa 3 đến 4.7 Các thẻ tiêu đề HTML Đoạn văn bản: Các phần tử <p> là để chứa các đoạn văn bản. Bạn sẽ xử dụng chúng thường xuyên khi đánh dấu nội dung văn bản thông thường.8 Thẻ p trong HTML 13 Danh sách: Rất nhiều nội dung của web là danh sách và HTML các yếu tố đặc biệt cho những điều này. Danh sách đánh dấu luôn bao gồm ít nhất 2 yếu tố.

Các loại danh sách phổ biến nhất là danh sách thứ tự và không có thứ tự o Danh sách không có thứ tự dành cho các danh sách mà thứ tự của các mặt hàng không quan trọng, chẳng hạn như danh sách mua sắm. Chúng được bọc trong một thẻ <ul>. o Danh sách có thứ tự dành cho các danh sách mà thứ tự của các mặt hàng quan trọng, chẳng hạn như công thức. Chúng được bọc trong thẻ <ol>.

Mỗi mục bên trong danh sách được đặt bên trong thẻ <li>. Ví dụ: chúng ta muốn biến một phần của đoạn văn sau thành một danh sách Chúng ta có thể sửa đổi đánh dấu thành điều này: Hình 1.9 Thẻ danh sách không có thứ tự Liên kết: Liên kết rất quan trọng, chúng là những gì làm cho web trở thành một trang web! Để thêm một liên kết, chúng ta cần sử dụng một thẻ đơn giản <a>. “a” là viết tắt của “anchor”. Để đặt văn bản trong đoạn văn của bạn thành một liên kết, hãy làm như sau: 14 o Chọn một số văn bản.

Chọn văn bản “ Ngôn ngữ lập trình phổ biến”. o Ngắt dòng văn bản trong phần tử <a> như hình dưới đây: Hình 1.10 Thẻ a trong HTML o Cung cấp cho phần tử <a> một thuộc tính: Hình 1.11 thuộc tính trong thẻ a o Điền giá trị của thuộc tính này bằng địa chỉ web mà bạn muốn liên kết đến: Hình 1.12 Gắn địa chỉ vào thẻ a 15 Bạn có thể nhận được kết quả không mong muốn nếu bạn bỏ qua giao thức, ở đầu địa chỉ web. Sau khi tạo liên kết, hãy nhấp vào liên kết đó để đảm bảo rằng nó đang gửi cho bạn nơi bạn muốn.2 Cơ bản về CSS 1.1 CSS – Thêm kiểu cho web CSS (Cascading Style Sheets) : Là công nghệ đầu tiên bạn nên bắt đầu học sau HTML. Trong khi HTML được sử dụng để xác định cấu trúc và ngữ nghĩa của nội dung thì CSS được sử dụng để tạo kiểu và bố trí nó.

Ví dụ: bạn có thể sử dụng CSS để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, chia nó thành nhiều cột hoặc thêm đoạn ảnh và các tính năng trang trí khác. 1) Inline CSS (CSS trực tiếp trong phần tử HTML – Nội tuyến) Phương pháp này, bạn thêm kiểu CSS trực tiếp vào một phần tử HTML cụ thể bằng thuộc tính `style`. Điều này hữu ích khi bạn muốn tùy chỉnh một phần tử duy nhất. Thuộc tính style có thể chứa bất kì thuộc tính CSS nào.1 CSS Nội tuyến Tránh sử dụng CSS theo cách này, khi có thể.

Nó trái ngược với một thực tiễn tốt nhất. Đầu tiên, nó là việc triển khai CSS kém hiệu quả nhất để bảo trì. Một thay đổi kiểu dáng có thể yêu cầu nhiều chỉnh sửa trong một trang Web. Thứ hai, CSS nội tuyến cũng kết hợp mã trình bày (CSS) với HTML và nội dung, làm cho mọi thứ khó đọc và hiểu hơn.

Tách mã và nội dung giúp bảo trì dễ dàng hơn cho tất cả những người làm việc trên trang Web. Có một vài trường hợp mà kiểu nội tuyến phổ biến hơn. Bạn có thể phải sử dựng các kiểu nội tuyến nếu môi trường làm việc của bạn rất hạn chế. 2) Internal CSS (CSS trong tệp HTML – Nội bộ) Phương pháp này, bạn đặt mã CSS trực tiếp trong thẻ `<style>` của tệp HTML.

Điều này thích hợp cho việc tạo kiểu cho một trang Web cụ thể mà bạn không muốn chia sẻ kiểu đó với các trang khác. 17 HTML cho kiểu nội bộ có thể trông như thế này: Hình 2.2 CSS nội bộ Trong một số trường hợp, kiểu nội bộ có thể hữu ích. Ví Dụ: có lẽ bạn đang làm việc với một hệ thống quản lý nội dung nơi bạn bị chặn sửa đổi các tệp CSS bên ngoài. Nhưng đối với các trang Web có nhiều hơn một trang, kiểu nội bộ trở thành một các làm việc kém hiệu quả hơn.

Để áp dụng kiểu CSS thống nhất cho nhiều trang bằng cách sử dụng kiểu nội bộ, bạn phải có một kiểu nội bộ trong mỗi trang web. Với CSS trong kiểu nội bộ, có nguy cơ ngay cả một thay đổi kiểu đơn giản cũng có thể yêu cầu chính sửa nhiều trang Web. 3) External CSS (CSS bên ngoài) Trong phương pháp này, bạn tạo một tệp CSS riêng biệt (Ví dụ: `style.css`) chứa tất cả các kiểu của bạn và sau đó liên kết tệp CSS này với trang web của bạn bằng thẻ `<link>` trong phần `<head>` của tệp HTML. Tham chiếu một kiểu CSS bên ngoài từ thẻ HTML `<linik>` : 18 Hình 2.3 CSS bên ngoại Tệp biểu định kiểu CSS có thể trông như này: Hình 2.4 tệp biểu định kiểu CSS Thuộc tính của thẻ <link> cần thamn chiếu đến một tệo trên hệ thống của bạn.

Trong ví dụ trên, tệp CSS nằm trong vùng thư mục với tài liệu HTML, nhưng bạn có thể đặt nó ở một nơi khác và điều chỉnh đường dẫn. Đây là phương pháp phổ biến và hữu ích nhất để đưa CSS vào tài liệu. bạn có thể liên kết một tệp CSS duy nhất với nhiều trang Web, tạo kiểu cho tất cả chúng bằng cùng một biểu định CSS.2 Tạo các lớp và áp dụng kiểu bằng cách sử dụng lựa chọn  Đầu tiên, trong tệp tin CSS riêng hoặc phần `<style>` của tệp tin HTML, tạo một lớp bằng cách sử dụng dấu chấm "." trước tên lớp của bạn.5 Kiểu của lớp  Sau đó, trong phần tử HTML mà bạn muốn áp dụng kiểu cho, thêm thuộc tính "class" với giá trị là tên lớp mà bạn đã tạo.6 Ví dụ thêm Class để áp dụng CSS  Bây giờ, trong phần CSS có thể sử dụng lựa chọn `.` kết hợp với tên lớp để áp dụng kiểu cho các phần tử có lớp tương ứng.7 Lựa chọn CSS để áp dụng kiểu  Trong ví dụ trên, chúng ta đã tạo một lớp có tên là "my-class" và áp dụng kiểu màu chữ, kích thước chữ, phông chữ và kiểu phông chữ cho mọi phần tử có lớp đó.  Có thể áp dụng một lớp cho nhiều phần tử khác nhau trong tệp HTML bằng cách thêm <p class="my-class">Đây là một đoạn văn bản</p> <h1 class="my-class">Xin chào đây là trang web của tôi</h1> Như vậy, tất cả đoạn văn bản và tiêu đề có lớp "my-class" sẽ được áp dụng vào cả 2 kết quả như sau 1.3 Thử nghiệm với các thuộc tính CSS cơ bản như font chữ, màu sắc, độ rộng và chiều cao Để thử nghiệm các thuộc tính CSS cơ bản như font chữ, màu sắc, độ rộng và chiều cao, bạn có thể làm như sau: 20 1) Font chữ  Sử dụng thuộc tính `font-family` để đặt font chữ cho một phần tử.

Ví dụ: `font-family: Arial, sans-serif;`  Sử dụng thuộc tính `font-size` để đặt kích thước font chữ. Ví dụ: `font- size: 16px; ` 2) Màu sắc  Sử dụng thuộc tính `color` để đặt màu chữ cho một phần tử. Ví dụ:`color: blue;`  Sử dụng thuộc tính `background-color` để đặt màu nền cho một phần tử. Ví dụ: `background-color: yellow;` 3) Độ rộng và chiều cao  Sử dụng thuộc tính `width` để đặt độ rộng cho một phần tử.

Ví dụ: `width: 300px;`  Sử dụng thuộc tính `height` để đặt chiều cao cho một phần tử. Ví dụ: `height: 50px;`  Thử nghiệm các thuộc tính này bằng cách thêm chúng vào phần CSS của trang web của bạn.8 Thử nghiệm các thuộc tính CSS Ngoài ra, CSS có các thuộc tính khác như `padding`, `margin`, `border`, và nhiều thuộc tính khác để tùy chỉnh kiểu cho phần tử trong trang web của bạn `padding`: Được sử dụng để tạo khoảng cách giữa nội dung bên trong phần tử và viền của phần tử. 21 thể đặt giá trị padding cho các cạnh riêng biệt hoặc sử dụng thuộc tính `padding-top`, `padding-right`, `padding-bottom` và `padding-left` để chỉ định giá trị cho từng cạnh một cách riêng lẻ. `margin`: Được sử dụng để tạo khoảng cách giữa các phần tử.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ