UNIT - 1

1. INTRODUCTION TO WEB DEVELOPMENT

The term "web" typically refers to the World Wide Web, which is an interconnected network of
digital documents and resources accessed via the internet

The World Wide Web is the key tool used by billions of people to distribute information, read and
create it, and connect with others over the internet.

It was created by Tim Berners-Lee in 1989 as a way for scientists to share information more Easily.

1.1 Evolution of the Web

The development of the web is often classified into three stages: Web 1.0, Web 2.0, and Web 3.0.

Web 1.0(1990-2000)
• Web 1.0, also known as the "static web" or "read-only web," refers to the early days of the World
Wide Web when websites were primarily one-way information sources, and there was limited
interactivity between users and websites
Example websites: early versions of Yahoo, AOL, and Amazon.

Web 2.0(2000-2010)
• Web 2.0 refers to the second generation of the World Wide Web that emphasizes user-generated
content, collaboration, and social networking. It is a term that describes a shift in the way people
interact with the web and the technologies that support it.

Example websites: Facebook, Wikipedia, YouTube, and Twitter.

Web 3.0(2010-onward)
• Web 3.0, also known as the "Semantic Web" or "Intelligent Web," is the next evolution of the
World Wide Web beyond Web 2.0. It refers to a more intelligent, connected, and efficient web
that uses artificial intelligence, machine learning, and other advanced technologies to provide
more personalized and intelligent services to users.
Example websites: Siri, Google Now, and Wolfram Alpha.

Summary

• In summary, the term "web" typically refers to the World Wide Web, which is an interconnected
network of digital documents and resources accessed via the internet.
• These digital documents, also known as web pages, can contain a variety of media types and are
accessed through web browsers by clicking on hyperlinks.

• The web has become an essential part of modern life, providing access to information,
entertainment, communication, and commerce on a global scale.

Activity

• Explore more examples on – Web 1.0, Web 2.0, Web 3.0

• Which is your favorite website and then identify in which category it belongs?
 1.2 Fundamentals of Web Development

What is Web Development?

• Web development includes web designing, development, and maintenance of a website.

• It focuses on building web pages.

• We develop websites by writing codes using various programming languages.

https://www.sesamestreet.org/

Fundamentals of Web Development

• Three technologies that we use in web development are:

HTML CSS JAVASCRIPT

HTML, CSS & JavaScript

JavaScript
1. JavaScript helps us to give the functionality to the website.
2. JavaScript is used to write programs that interact with other computers and web pages, and
access codes.

HTML
1. HTML is hypertext markup language.
 2. It is used to write codes that make up a webpage.
3. HTML uses tags to build a web page such as images, text, tables etc.

CSS
1. CSS stands for Cascading Style Sheets.
2. CSS is used to format text, images, videos, and other elements on a web page.

Types of Web Development

Front-end development involves building user interfaces and elements that are responsive to the
needs of visitors on the browser.

Back-end development Also known as service-side

It is the process of building and maintaining a website’s back-end functions- such as content
management, account creation, database management etc.

When the website is developed by a single developer with both front-end and back-end, it is called
Full-stack development.

Web Development Tool- Visual Studio Code

• Visual Studio Code is one of the most popular and powerful text editors used by software
engineers today.

• Visual Studio Code is a set of tools to build, debug, test, and maintain websites.
Let’s Try
Create a webpage using Visual Studio Code on the topic- “Importance of Coding”.
Points to Remember:
1. Add the suitable headings
2. Using paragraph tag to add the content
3. Do the styling for your webpage

1.3 Static and Dynamic Web Pages

Static Web page

• A static web page remains the same for every user and is created using HTML and CSS.
• The content of the static web page remains fixed.
• Example – Company websites, Personal blogs or Simple landing pages.

Dynamic Webpage
• It is a webpage that can change its content based on user interaction or input.
• These webpages are typically created using server-side scripting languages such as PHP or
Python or Javascript.
• Example – Social media platforms, Online market places etc.
 1.4 Content management

What is Content Management System (CMS)

A Content Management System (CMS) is any computer program which manages the content of a
website or an enterprise.Here content could refer to text, images, video, documents, digital copy of
print media etc.

• Content management refers to the end-to-end process of sourcing, creating, managing, and
delivering content.

• Content management refers to the creation, storage, access, delivery, and optimization of
digital media on one central platform.

Main features of content management

• The first important feature is the ability to create content. And you need the ability to make
changes to that content and update it as needs arise. Content can’t be static.

• You also need a set of processes and capabilities to deliver the content. If it’s digital content
you intend to house on a website, you need a way to translate the content into HTML code.
• it’s content that needs to show up on a mobile device, you need a way to adjust the content to
fit the screen.

WHY do we need CMS ?

• The ability to add/update/delete content any time in a user friendly way

• The ability to change content fast
• The ability to have a centralized control on content change
• The ability to categorize content and ability to assign it to different personnel
• No deep technical knowledge and infrastructure details need to know
• Low dependency on IT department

1.5 Single Page Vs Multipage Application

Multiple page application

An MPA is a web application that includes more than one page and needs to reload the entire page
(even for loading a small icon on a web page).

Multi-Page Applications work in a traditional way. They are extremely large out of necessity. MPAs
usually consist of a big amount of content so they generally have many levels and various links. They
may also include many micro-websites and subsections inside.

Finally, most of the frameworks available for MPA have been tested over time, which makes them
more secure.

Single Page Applications

A single page application is a website or web application that dynamically rewrites a current web
page with new data from the web server, instead of the default method of a web browser loading
entire new pages.
Such apps let users stay in one cozy web space where content is reflected in a workable and
convenient form.

The development process of Single-Page Applications is friendly and simple. No need to write code
to render pages on the server.
They perform fast, as most resources are only loaded once throughout the lifespan of the application.

Summary & Activity

Summary:
When you browse the web you will come across both single page application and multi page
applications however it depends on your need of which type of applications fits best for you since
each of them have their benefits and drawbacks.

Activity:
Research a list 5 of websites that are single page application and those that are multi page
applications.