ACN COLLEGE OF ENGINEERING & MANEGMENT

STUDIES
(ALIGARH-202127)

Dr. A.P.J. Abdul Kalam Technical University - [AKTU],

Lucknow - Affiliated Colleges
PROJECT NAME – NEWS Website
site
MADE BY

NAME - NITISH KUMAR SINGH

Roll No- 2103390100013
NAME - RAO HADER AMMAR
Roll No- 2103390100016
COURSE- B.TECH
BRANCH - COMPUTER SCIENCE
Semester – 5th
YEAR- 3RD
SESSION- 2023
2023-24
ACN COLLEGE OF ENGINEERING & MANEGMENT STUDIES
(ALIGARH-202127)

ACKNOWLEDGEMENT
I would like to express my sincere thanks
to Mr. RAVENDRA PAL SINGH SINGH,, for his valuable
guidance and support in completing my project. I
would also like to express my gratitude towards our
Director Dr. M WASI BAIG BILAL for giving me this
great opportunity to do a project on NEWS Website.
Without their support and suggestions, this project
would not have been completed.
Student Names
NITISH KUMAR SINGH
RAO HADER AMMAR

DATE - 02/10/2023

Signature
 ACN COLLEGE OF ENGINEERING & MANEGMENT STUDIES
(ALIGARH-202127)

CERTIFICATE
This to certify that the report of the Project titled
Web Application for NEWS WEBSITE submitted by Nitish
Kumar Singh (Roll No.:2103390100013), ), Rao Hader
Ammar (Roll No.:2103390
No.:2103390100016)) of B.TECH 5th
Semester of 2023 has been prepared under my
supervision for the partial fulfillment of the
requirements for B.TECH degree in ACN COLLEGE OF
ENGINEERING & MANEGMENT STUDIES (ALIGARH (ALIGARH-
202127) .The
The report is hereby forwarded.

Signature
 Web Development

Web development refers to the creating,

building, and maintaining
of websites. It includes
aspects such as web
design, web publishing,
web programming, and
database management. It is the creation of
an application that works over the internet
i.e. websites.
Web: It refers to websites, web pages or
anything that works over the internet.
Development: It refers to building the
application from scratch.
Web Development can be classified into
Two ways:
Frontend Development

Backend Development
 Frontend Development
The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client
side’ of the application
Roadmap.

Frontend Libraries and Frameworks

HTML CSS JAVA SCRIPT
Popular Frontend Technologies

Introduction of HTML: HTML stands for

Hypertext Markup Language. It is used
to design the front end portion of web
pages using markup language. It acts
as a skeleton for a website since it is
used to make the structure of a
website.
Introduction of CSS: Cascading
Style Sheets fondly referred to as
CSS is a simply designed language
intended to simplify the process of
making web pages presentable. It is
used to style our website.

Introduction of JavaScript
JavaScript: is a
scripting lang
language
uage used to develop web
pages. Developed in Netscape, JS allows
developers to create a dynamic and
interactive web page to interact with
visitors and execute complex actions.
 Backend Development

Backend is the server side of a website. It is part

of the website that users cannot see and interact
with. It is the portion of software that does not
come in direct contact with the users. It is used to
store and arrange data.

Back End Frameworks and Technology:

PHP CSS Java
Popular Back
Backend
end Technologies

Introduction of PHP: PHP is a server-

server
side scripting language designed
specifically for web development.

Introduction of Java: Java is one of

the most popular and widely used
programming languages. It is highly
scalable.

Introduction of Python:: Python is a

programming language that lets you
work quickly and integrate systems
more efficiently.

Introduction of Node.js:: Node.js is an

open source and cross cross-platform
runtime environment or executing
JavaScript code outside a browser.
What is API?
Application Programming Interface (API) is a software
interface that allows two applications to interact with
each other without any user intervention. API is a
collection of software functions and procedures. In
simple terms, API means a software code that can be
accessed or executed. API is defined as a code that
helps two different software’s to communicate and
exchange data with each oth
other.

Here are some important features of API:

It offers a valuable service (data, function, audience,.).
It helps you to plan a business model.
Simple, flexible, quickly adopted.
Why would we need an API?
Here, are some reasons for using API:
 Application Programming Interface acronym API
helps two different software’s to communicate
and exchange data with each other.
 It helps you to embed content from any site or
application more efficiently.
 It allows the user or a company to customize the
content and services which they use the most.
 Software needs to change over time, and APIs help
to anticipate changes.

Types of API:
Open APIs: These types of APIs are publicly available to use
like OAuth APIs from Google. It has also not given any
restriction to use them. So, they are also known as Public
APIs.
Partner APIs: Specific rights or licenses to access this type of
API because they are not available to the public.
Internal APIs: Internal or private. These APIs are developed
by companies to use in their internal systems. It helps you to
enhance the productivity of your teams.
Composite APIs: This type of API combines different data and
service APIs.
 Our Project
Project Overview:
The project involves the development and launch of a
dynamic and user
user-friendly
friendly news website that aims to
provide timely, reliable, and engaging news content to
its audience. The website will serve as a digital
platform for delivering news articles, videos, and
multimedia content across various categories, catering
to a diverse range of readers and interests.

Project Objectives:
 Inform and Educate: The primary goal of the news
website is to inform the public about current events,
breaking news, and important stories from around
the world. It will provide accurate and ba
balanced
lanced news
reporting to promote informed decision decision-making
among its readers.
 User-Friendly
Friendly Experience: The website will be
designed with a useruser-centric
centric approach, ensuring an
intuitive and visually appealing interface. This
includes responsive design for mo mobile
bile and desktop
users, easy navigation, and accessibility features.
 Multimedia Integration: The website will leverage
multimedia elements, including videos, images, info
graphics, and interactive charts, to enhance the
storytelling and provide a comprehensive news
experience.
 Reliability and Credibility: Uphold high journalistic
standards by ensuring the accuracy and reliability of
news sources. Implement fact-checking mechanisms
and editorial oversight to maintain credibility.
 Social Impact: The project should consider its social
responsibility and role in promoting quality
journalism, media literacy, and the public's
understanding of current events.
 Scalability: Design the website infrastructure with

scalability in mind, anticipating potential growth in

traffic and content over time.
 Project Details
INTRODUCTION……………………………………………………….10

Project Components………………………………………….10

Website Design and Development……………………..11

MAKING OF WEBSITE USING CSS & HTML…………….....11

HTML CODE…………………………………………………………......12

CSS CODE………………………………………………………………….14

OUTPUT………………………………………………………………......18

Project Milestones………………………………………………..21

Project Risks…………………………………………………..21

CONCLUSION……………………………………………………….....22
 INTRODUCTION
The “News Website Development" project aims to create
a functional and informative online platform tailored to
the needs of a college or university community. This
website will serve as a hub for delivering news, updates,
and relevant information to students, facult
faculty,
y, staff, and
other stakeholders within the college environment. This
project details document provides a comprehensive
outline of the key components, tasks, and milestones
required for the successful development and launch of
the college news website.

PROJECT
OJECT COMPONENTS
Project Initiation:
 Define the project scope, objectives, and target
audience (e.g., students, faculty, staff).
 Form a project team with roles and responsibilities.
 Establish project timelines and budgets.
 Conduct a needs assessment within the college
community.
Content Strategy:
 Develop a content plan and editorial calendar.
 Identify key content categories (e.g., campus news,
student life, academic updates).
  Appoint student reporters, writers, and editors.
Define guidelines for content creation and sourcing

WEBSITE DESIGN AND DEVELOPMENT

 Design the website's user interface (UI) and user
experience (UX).
 Develop the website using appropriate web
technologies (e.g., HTML, CSS, and JavaScript).
 Ensure responsive design for various devices (desktop,
mobile, tablet).
 Implement content management system (CMS) for easy
content updates.
 Customize the website to reflect the college's branding

and identity.

MAKING OF WEBSITE USING CSS & HTML

From this slide we are going to make a website using
HTML and CSS to give you the demo how to make a
website using HTML and CSS
The things which are going to use in this miniproject are
given below:-
HTML Language
CSS Language
Visual studio (platform where we write our codes)
Google chrome
 HTML CODE
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
8">

<meta name="viewport" content="width=device

content="width=device-width,
width, initial-
initial
scale=1.0">

<title>News Website</title>

<link rel="stylesheet" href="styles.css"> <!

<!-- Link to your CSS file -->

</head>

<body>

<header>

<h1>News Website</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Politics</a></li>

<li><a href="#">Business</a></li>

<li><a href="#">Entertainment</a></li>

<li><a href="#">Sports</a></li>

</ul>

</nav>
 </header>

<main>

<section class="news-article">

<h2>Breaking News</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

<a href="#">Read more</a>

</section>

<section class="news-article">

<h2>Politics</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

<a href="#">Read more</a>

</section>

<!-- More sections for different news categories -->

</main>

<footer>

<p>&copy; 2023 News Website. All rights reserved.</p>

</footer>

</body>

</html>
 JAVA SCRIPT CODE
// Sample news data (replace with real data or API calls)

const newsData = [

title: 'Breaking News 1',

content: 'Lorem ipsum dolor sit amet, consectetur adipiscing

elit.',

link: '#'

},

title: 'Political News',

content: 'Lorem ipsum dolor sit amet, consectetur adipiscing

elit.',

link: '#'

},

// Add more news articles here

];

// Function to display news articles

function displayNewsArticles() {

const newsSection = document.querySelector('.news-articles');

newsData.forEach(article => {
 const articleDiv = document.createElement('div');

articleDiv.classList.add('news-article');

const title = document.createElement('h2');

title.textContent = article.title;

const content = document.createElement('p');

content.textContent = article.content;

const readMoreLink = document.createElement('a');

readMoreLink.textContent = 'Read more';

readMoreLink.href = article.link;

articleDiv.appendChild(title);

articleDiv.appendChild(content);

articleDiv.appendChild(readMoreLink);

newsSection.appendChild(articleDiv);

});

// Call the function to display news articles when the page loads

window.addEventListener('load', displayNewsArticles);
OUTPUT
This is the basic overview of our news website.
Project Milestones:
 Project Initiation and Planning
 Website Design and Development
 Content Creation and Curation
 Testing and Quality Assurance
 Launch and Marketing
 User Feedback and Iteration
 Monetization Implementation
 Ongoing Content Management and Editorial
Oversight
 Growth and Audience Engagement
 Continuous Improvement and Innovation

Project Risks:
 Competition from established news outlets.
 Maintaining editorial integrity and credibility.
 Technical issues and security vulnerabilities.
 User retention and engagement challenges.
 Monetization difficulties in a changing digital
media landscape.
dscape.
 Legal and regulatory compliance.
 Success Criteria:
 Growing and engaged user base.
 Positive user feedback and reviews.
 Consistent and quality content production.
 Sustainable revenue generation.
 Recognition as a reliable news source in the
chosen niche(s).

This project context provides a comprehensive

overview of the goals, objectives, stakeholders, and
challenges associated with the development of a news
website. It serves as a foundation for the project's
planning and execution.

CUNCLUSION
In conclusion,
onclusion, the "News Website Development"
project has successfully achieved its goals and
objectives, providing a reliable and engaging news
platform for its audience. It is poised for continued
growth and impact in the world of digital journalism.
We extend
nd our gratitude to all project team members,
stakeholders, and users who have contributed to this
endeavor.