Báo cáo Bài tập lớn: Thiết kế website tin tức bóng đá - ĐH Công nghệ Đông Á

Báo cáo bài tập lớn thiết kế web đề tài website tin tức bóng đá. Phân tích quy trình, công nghệ HTML, CSS và các chức năng của một trang web tin tức.

• Tác giả: Nguyễn Trọng Đạo
• Trường học: Trường Đại học Công nghệ Đông Á
• Chuyên ngành: Thiết kế Web
• Đề tài: Thiết kế website cập nhật tin tức bóng đá
• Loại tài liệu: Bài tập lớn
• Năm xuất bản: 2023
• Địa điểm: Bắc Ninh

Tóm tắt

I. Khái niệm và tầm quan trọng của bài tập lớn thiết kế website tin tức bóng đá

Bài tập lớn thiết kế website tin tức bóng đá là một dự án học tập thực tế, giúp sinh viên áp dụng kiến thức về HTML, CSS và các công nghệ web hiện đại. Dự án này không chỉ đơn thuần là một bài tập học phần mà còn là cơ hội để các bạn sinh viên phát triển kỹ năng lập trình web chuyên nghiệp. Trong thời đại công nghệ 4.0, nhu cầu tìm kiếm thông tin giải trí qua internet ngày càng tăng. Website tin tức bóng đá chính là giải pháp tối ưu để cung cấp các bản tin nóng hổi, cập nhật liên tục về các trận đấu, kết quả và những khoảnh khắc ấn tượng nhất. Thông qua dự án này, sinh viên hiểu rõ hơn quy trình thiết kế giao diện, tổ chức nội dung và tạo trải nghiệm người dùng tốt nhất.

1.1. Mục tiêu học tập của bài tập lớn

Mục tiêu chính là giúp sinh viên nắm vững HTML, CSS và các kỹ thuật thiết kế web cơ bản. Thông qua dự án website tin tức bóng đá, các bạn sẽ học cách xây dựng cấu trúc trang web hợp lý, tạo giao diện đẹp mắt và responsive. Sinh viên cũng sẽ làm quen với quy trình làm việc nhóm, quản lý dự án và kiểm thử chức năng trang web. Đây là những kỹ năng thiết yếu cho một nhà phát triển web chuyên nghiệp.

1.2. Ý nghĩa thực tiễn của website bóng đá

Website tin tức bóng đá là nhu cầu thực tế của thị trường kỹ thuật số. Với sự phát triển của bóng đá chuyên nghiệp, người hâm mộ cần một nền tảng để cập nhật thông tin nhanh chóng, xem highlight và theo dõi bảng xếp hạng. Website này giúp người dùng tiếp cận tin tức mới nhất mọi lúc, mọi nơi, vượt qua giới hạn của báo giấy truyền thống.

II. Các công nghệ sử dụng trong thiết kế website tin tức bóng đá

Để xây dựng một website tin tức bóng đá chuyên nghiệp, dự án sử dụng các công nghệ hiện đại và phổ biến. HTML là nền tảng cấu trúc, CSS dùng để tạo giao diện đẹp, còn JavaScript giúp tạo các tính năng tương tác. Ngoài ra, nhóm còn sử dụng Visual Studio Code - một trình soạn thảo mã mạnh mẽ, và Bootstrap để tối ưu hóa CSS và đảm bảo giao diện responsive trên tất cả các thiết bị. Công cụ draw.io được dùng để thiết kế mô hình trang web trước khi bắt đầu code. Sự kết hợp hài hòa giữa các công nghệ này tạo nên một website bóng đá chất lượng cao, dễ bảo trì và mở rộng trong tương lai.

2.1. HTML Xương sống của website

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu cơ bản để tạo nội dung trang web. Nó xác định cấu trúc của website tin tức bóng đá, từ header chứa logo, navigation menu, cho đến các section hiển thị tin tức, video highlight và bảng xếp hạng. HTML5 giúp tổ chức nội dung một cách semantic, thuận lợi cho SEO và khả năng tiếp cận (accessibility).

2.2. CSS và Bootstrap Làm đẹp giao diện

CSS (Cascading Style Sheets) chịu trách nhiệm thiết kế thị giác, màu sắc, bố cục và hiệu ứng của website. Bootstrap là framework CSS giúp việc thiết kế responsive nhanh chóng, đảm bảo website bóng đá hiển thị tốt trên desktop, tablet và smartphone. Kết hợp CSS tùy chỉnh với Bootstrap cho phép tạo giao diện độc đáo nhưng vẫn chuyên nghiệp.

2.3. JavaScript Tính năng tương tác

JavaScript thêm tính năng động cho website, như menu dropdown, carousel highlight, lọc tin tức theo danh mục. Các tính năng này nâng cao trải nghiệm người dùng, khiến website tin tức bóng đá trở nên thu hút và dễ sử dụng hơn.

III. Quy trình thiết kế giao diện website tin tức bóng đá

Quy trình thiết kế website tin tức bóng đá được chia thành các bước rõ ràng và khoa học. Bước đầu tiên là lập kế hoạch và phân tích yêu cầu, xác định tính năng chính như hiển thị tin tức mới nhất, video highlight, bảng xếp hạng và tìm kiếm. Tiếp theo, nhóm sử dụng draw.io để vẽ wireframe, thiết kế layout trang chủ, trang tin tức chi tiết và các trang con. Sau đó, bắt đầu code với HTML, CSS trên Visual Studio Code, xây dựng cấu trúc và giao diện. Bootstrap được tích hợp để tối ưu responsive design. JavaScript được thêm vào để tạo các tính năng tương tác. Cuối cùng, nhóm tiến hành kiểm thử (testing) trên các trình duyệt khác nhau, kiểm tra tốc độ tải trang, SEO và sửa lỗi. Quy trình này đảm bảo website bóng đá chất lượng cao, đáp ứng nhu cầu người dùng.

3.1. Giai đoạn phân tích và lập kế hoạch

Nhóm thảo luận và xác định nhu cầu của website tin tức bóng đá: hiển thị tin tức mới, video highlight, bảng xếp hạng, chuyên mục theo ligue (Ngoại hạng Anh, La Liga, Serie A, Ligue 1, V-League). Sau đó, vẽ sơ đồ cấu trúc (sitemap) và phân chia công việc cho từng thành viên: trang chủ, trang tin tức chi tiết, trang danh mục, trang about. Bước này đảm bảo toàn bộ nhóm cùng hướng mục tiêu.

3.2. Thiết kế wireframe và mockup

Sử dụng draw.io, nhóm vẽ wireframe cho trang chủ, xác định vị trí header, navigation, hero image, tin tức featured, footer. Sau đó thiết kế mockup chi tiết hơn với màu sắc, typography, hình ảnh, tạo cảm nhận trực quan về website bóng đá cuối cùng. Bước này giúp tránh thay đổi thiết kế sau khi code.

3.3. Phát triển và kiểm thử

Code HTML, CSS trên Visual Studio Code, tích hợp Bootstrap cho responsive. Thêm JavaScript cho tính năng tương tác. Test trên Firefox, Chrome, Safari, thiết bị mobile. Kiểm tra tốc độ tải, SEO (meta tags, structured data), form contact. Sửa lỗi và tối ưu hóa đến khi website tin tức bóng đá hoạt động trơn tru.

IV. Kết quả đạt được và hướng phát triển của dự án

Sau quá trình làm việc khối lượng lớn, nhóm đã thành công xây dựng một website tin tức bóng đá hoàn chỉnh, có giao diện đẹp mắt, chức năng đầy đủ và responsive trên tất cả thiết bị. Website bóng đá bao gồm trang chủ với các tin tức nổi bật, carousel highlight, trang danh mục theo ligue, trang chi tiết tin tức, chức năng tìm kiếm và liên hệ. Các thành viên đã học được các kỹ thuật thiết kế web chuyên nghiệp, cách làm việc nhóm hiệu quả, quản lý dự án. Tuy nhiên, website tin tức bóng đá vẫn còn nhiều hướng phát triển: thêm backend với cơ sở dữ liệu để quản lý tin tức động, tích hợp API để lấy dữ liệu bóng đá real-time, thêm tính năng user authentication, bình luận, yêu thích tin tức. Đây sẽ là nền tảng vững chắc để nhóm tiếp tục cải tiến và phát triển website bóng đá thành một ứng dụng web thực thụ.

4.1. Các tính năng chính đã hoàn thành

Website tin tức bóng đá bao gồm: giao diện trang chủ modern với navigation menu, hero image, tin tức nổi bật, carousel video highlight, footer với liên kết mạng xã hội. Trang danh mục tin tức theo ligue với hình ảnh và mô tả ngắn. Trang chi tiết tin tức hiển thị nội dung đầy đủ, ảnh lớn, ngày đăng. Chức năng tìm kiếm tin tức, form liên hệ. Toàn bộ website bóng đá responsive, tối ưu cho mobile.

4.2. Bài học kinh nghiệm và hướng phát triển tương lai

Nhóm nhận thấy tầm quan trọng của thiết kế wireframe trước khi code, giúp tiết kiệm thời gian và tránh thay đổi lớn. Ngoài ra, cần sớm tích hợp backend, cơ sở dữ liệu, API lấy dữ liệu real-time để website tin tức bóng đá trở nên thực dụng hơn. Tương lai sẽ thêm tính năng user account, yêu thích, bình luận, đẩy thông báo tin tức qua email. Điều này biến website bóng đá từ dự án học tập thành ứng dụng web chuyên nghiệp.

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1Ngôn ngữ sử dụng trong thiết kế website: Ngôn ngữ HTML : Nếu trang web của bạn muốn hiển thị nội dung cho người truy cập thì sẽ phải cần đến HTML. HTML cho phép trang web của bạn có thể lưu trữ âm thanh, video, văn bản và một số ứng dụng khác. HTML được dùng để tạo nội dung cho trang web Thiết kế giao diện cho trang web HTML5 hiện đang là phiên bản HTML mới nhất với những cải tiến rõ rệt so với các phiên bản trước. Bởi vậy hiện nay, mọi người thường sử dụng HTML5 để thiết kế giao diện website.

Tuy nhiên, bạn chỉ có thể dùng HTML để tạo bộ khung sườn cho trang web mà thôi. Để thiết kế hoàn thiện một trang web, bạn cần sử dụng đến CSS để chỉnh sửa màu sắc, kích thước, vị trí của các biểu tượng và một số vấn đề phức tạp khác. Bên cạnh đó, bạn còn cần phải có kiến thức chuyên môn về lập trình. Lập trình tương tác cho trang web 7 Thông qua HTML, bạn có thể lập trình tương tác giữa người dùng với trang web.

Để làm được điều này, bạn cần dùng code JavaScript. JavaScript sẽ tạo ra những hiệu ứng khi người dùng nhấp và di chuyển chuột trên website. HTML được dùng để lập trình tương tác cho trang web Cấu trúc HTML <html></html>: định nghĩa phạm vi của văn bản html <head></head>: định nghĩa các mô tả về trang html. Thông tin trong thẻ này không được hiển thị trên trang web <title></title>: mô tả tiêu đề trang web <body></body>: xác định vùng thân của trang web nơi chứa các thông tin hiển thị trên trang.

Tag xử lý văn bản Các tag định dạng văn bản Tiêu đề(Heading): <h1>, < h2>, < h3>, < h4>, <h5>, < h6> Đoạn văn bản(Paragraph): <p> 8 + Đường kẻ ngang(Horizontal Rules): <hr/> + Các tag định dạng chuỗi + Định dạng chữ: <em>, <i>, <b>, <font> + Tạo siêu liên kết: <a> thẻ này ta sẽ tìm hiểu ở phần riêng + Xuống dòng: <br/>. Các tag trình diễn văn bản + Định dạng kiểu chữ :  <b> : Bold text  <strong> :Important text  <i> : Italic text  <em> : Emplasized text  <mark> : Marked text  <small> : Smaller text  <del> : Deleted text  <ins> : Inserted text  <sub> : Subscript text  <sup> : Superscript text Các tag trình diễn văn bản + Tag<pre>: hiển thị đúng dạng văn bản đã soạn thảo(khoảng trắng, xuống dòng) + Một số tag khác  <blockquote>: phát hiện trích dẫn từ 1 nguồn khác  <q>: biểu diễn dấu nháy kép  <abbr>: thẻ đánh dấu cum từ viết tắt(sẽ hiển thị thông tin đầy đủ cum từ viết tắt khi ta dê truột qua chúng)  <address>: biểu diễn thông tin liên hệ của chủ tác giả tài liệu, bài viết. Thường thêm ngắt dòng trước và sau thẻ này và thông tin trong thẻ được viết in nghiêng  <bdo>  <cite>. 9 HTML style + Trong các HTML Tag ta có thể thêm các thuộc tính cho chúng.

Chẳng hạn như màu sắc, font chữ kích thước… + Cú pháp để thêm các thuộc tính cho các HTML Tag <tag_name style="property:value;"> + Một số thuộc tính của các Tag HTML  Màu nền: background-color  Màu chữ văn bản: color  Font chữ văn bản: font-family  Kích cỡ font chữ văn bản: font-size  Căn lề cho văn bản: text-align HTML color + Màu tông html được biểu diễn với tên của màu xác định trước, hoặc các giá trị RGB, HEX, HSL, RGBA hoặc HSLA  RGB: sử dụng 3 màu chính(Đỏ, Xanh lục, Xanh lam viết tắt là RGB) sử dụng tổ hợp với nhau theo nhiều phương thức để tạo thành các màu khác nhau  HEX: là cách thể hiện màu từ nhiều mô hình màu khác nhau thông qua các giá trị thập lục phân. Mỗi giá trị màu HEX tuân theo định dạng #RRGGBB(Đỏ, Xanh lục, Xanh lam). Các số nguyên thập lục phân có thể nằm trong phạm vi 00-FF để chỉ định cường độ màu sắc + Cách lấy giá trị trong thuộc tính mầu của html  RGB: style=“background-color: rgb(value1, value2, value3)”  HEX: style=“background-color: #ff…”  HSL: style=“background-color: hsl(value,%,%)”  RGBA:style=“background-color:rgba(value1,value2, value3,value4)”  HSLA: style=“background-color:rgb(value1, %,%, value2)” 10 HTML Link + Liên kết được sử dụng hầu hết trong các trang web. Cho phép người dung chuyển từ trang web này sang một trang khác bằng cách nhấp vào link được cung cấp bởi một Tag liên kết trang <a> hay còn gọi là (anchor-mỏ neo).

+ Cú pháp: <a href=“url” target=“…”> Link text</a>. Ta sẽ tìm hiểu các giá trị truyền vào với href và target + Các dạng url: url có dạng được viết như sau + protocol://site address/dierectory/filename. + Các giá trị được truyền vào thuộc tính target:  _blank: tải trang web vào cửa sổ mới  _parent: tải trang web vào cửa sổ cha của nó  _self: tải trang web vào chính cửa sổ hiện hành  _top: tải trang web vào cửa sổ cao nhất + Phân loại liên kết trang  Liên kết ngoại(external link): khi click vào link sẽ cho phép ta chuyển sang trang mới thông qua “url” của thuộc tính href của tag <a>  <a href = “url”>Text đại diện</a>  Liên kết bookmark: khi click vào link cho phép ta chuyển đến frame(chỉ mục) nào đó trong cục bộ của trang web đó thông qua thuộc tính id của frame đó  Liên kết Email  url: có 2 loại địa chỉ  Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng internet  Địa chỉ tương đối: là vị trí tương đối so với trang web hiện hành đang chứa liên kết  Một số ký hiệu đường dẫn HTML List: Trong HTML có thể tạo được danh sách Không Theo Thứ Tự (Unordered list), danh sách Theo Thứ Tự (Ordered list) và danh sách Miêu Tả (Description list) 11 HTML Table: dùng để trình bày dữ liệu có cấu trúc theo định dạng: dòng(thẻ lệnh tr), cột(thẻ lệnh td). HTML div  Tag <div></div> viết tắt của division nghĩa là phân chia vùng hay khu vực.

Giúp trình duyệt web hiểu rõ các vùng được bố cục trên trang web  Tag <div></div> cùng với 1 số tag như <span></span>, <section></section>, … là các phần tử khối(tìm hiểu HTML block và Inline)  Chứa được hầu hết các tag trong html  Một số tag không được chứa bên trong tag <divv></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, < link ></link>  Một số thẻ không nên chứa bên trong tag <div></div>: <style> </style>, <script></script > HTML span  Tag <span></span>: thuộc nhóm phần tử Inline(nội dòng)  Tag <span></span>: thường được sử dụng để gộp nhóm các phần tử mà không làm ảnh hưởng đến các văn bản chung của một hang  Tag <span></span> không có thuộc tính bắt buộc nhưng kiểu lớp và id là phổ biến sử dụng cùng với css để tạo style cho văn bản HTML class  Class là một thuộc tính của các phần tử trong HTML dùng để chỉ địn một lớp cho phần tử(tag) HTML  Nhiều phần tử HTML có thể cùng chia sẻ một class  Sử dụng thuộc tính class: được sử dụng để trỏ đến một tên class. Chúng thường được sử dụng cùng với CSS và javascript để truy cập và thao tác các phần tử với tên lớp cụ thể HTML id Thuộc tính id của phần tử HTML dùng để chỉ định một id duy nhất cho một phần tử HTML 12 Không thể có nhiều phần tử HTML có cùng id Thuộc tính id của các phần tử HTML được dùng với css và javascript để truy cập, thao tác với các phần tử HTML Tag hình ảnh <img>: không có thẻ đóng scr: đường dẫn đến file hình ảnh(forder chứa image hoặc dường link đến một địa chỉ server/website nào đó có các image cần lấy) alt: chú thích cho hình ảnh trong trường hợp không có hình ảnh Ảnh nền cho trang web Sử dụng thuộc tính cho thẻ body đặt ảnh nền cho trang web <body background=“Image Path"> Image Map: Thẻ HTML <map> định nghĩa một bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp truột được. Các khu vực được xác định bằng một hoặc nhiều thẻ <area>.

shape=“rect”, shape=“circle”… : thuộc tính khoanh vùng được chọn, vùng có thể dạng hình chữ nhật hoặc hình tròn coords: phối hợp với thuộc tính shape xác định vị trí vùng trọn Animated Image: chèn các ảnh động Floating Image : Sử dụng thuộc tính Float CSS căn trái, phải cho images Image as a Link: chèn ảnh vào một link Tag video <video> <video [control]> <source src=“path" type=“format"> <source src=" path" type=“format"> </video> [control]: Các tham số điều khiển video controls(có thể pause, play,…) 13 autoplay(tự động chạy) path: Đường dẫn đến file video(có thể là thư mục chứa file video hoặc một link có đường dẫn tuyệt đối đến file video của một trang web nào đó) format: định dạng file video mà các trình duyệt hỗ trợ( tùy từng trình duyệt có thể hỗ trợ các định dạng như: .mp4, avi, ogg…) Tag audio <audio>  <video [control]> <source src=“path" type=“format"> <source src=" path" type=“format">  </video> [control]: Các tham số điều khiển video controls(có thể pause, play,…) autoplay(tự động chạy) path: Đường dẫn đến file audio(có thể là thư mục chứa file audio hoặc một link có đường dẫn tuyệt đối đến file audio của một trang web nào đó) format: định dạng file audio như (mp3…) Tag Iframe <iframe>  Iframe được sử dụng như một khung để cho phép hiển thị nội dung của một trang web bên trong nó  Cú pháp: <iframe src="url" title="description"></iframe>  Một số thuộc tính của iframe src: đường dẫn địa chỉ của trang web cần đưa vào khung iframe width, height: độ rộng, chiều cao của iframe border: viền cho iframe. Nếu muốn bỏ viền ta sẽ style giá trị như sau:[style=“border:none;”].