Module 1 - Introduction

By Prof. Devyani Sarate

Concept of Website
A website is a collection of publicly accessible, interlinked Web pages that share a single domain name.
Websites can be created and maintained by an individual, group, business or organization to serve a
variety of purposes.
Together, all publicly accessible websites constitute the World Wide Web.
Websites come in a nearly endless variety, including educational sites, news sites, forums, social media
sites, e-commerce sites, and so on. The pages within a website are usually a mix of text and other media.
Thats said, there are no rules dictating the form of a website.
Eg. A person could create a website of nothing but black and white photos of roses, or the word "cat"
linked to another Web page with the word "mouse."
Pattern of websites
Many sites follow a standard pattern of a homepage that links off to other categories and
content within the website.
The homepage (or simply “home”) represents the main page of the site itself.
Frequently, the homepage is a sort of “hub” from which all other pages can be accessed.
An internal web page to which several other pages are linked in a coherent structure
(such as a specific category of topics) is instead called a “parent page.”
Every page is a single HTML document, and all of them are connected through hyperlinks
(or simply “link”) which can be combined in a navigation bar for ease of use.
The navigation bar is displayed on every page rather than just the homepage, and allows
the user to quickly move across the main website’s structure.
Pattern of Website
Another important section of most websites is the footer, which is another recurring section that is found
at the bottom of every page.
Usually the footer contains external links pointing to similar websites and other external resources,
together with other vital info such as disclaimers, links to the terms of service, privacy policy and contact
pages, as well as the physical address of the company that owns the site.
How to access a website?
●Websites are hosted on servers, and require a web browser such as
Chrome, Firefox, or Internet Explorer to be visited (either on a computer or
mobile device).
●A website can be accessed directly by entering its URL address or by
searching it on a search engine such as Google or Bing.
●The first website was created in 1990 by Tim Berners-Lee, a British
physicist at CERN. 3 years later, in 1993, CERN announced that everyone
could access and use the World Wide Web for free.
.Extn
Originally, websites were categorized by their top-level domains. Some examples include:
Government agency websites = .gov
Educational institutions’ websites = .edu
Nonprofit organizations’ websites = .org
Commercial websites = .com
Information sites = .info
Although these top-level domains extensions still exist, they say little about a website's actual content. In
modern days’ internet, the ".com" extension is by far the most popular domain, together with many other
country-specific extensions (.it, .de, .co.uk, .fr, etc.).
Need of website
Without a website, people may question your legitimacy as a business.
Having a website is an opportunity to make a great first impression and
give people comfort that you're a real business.
Showcasing your brand to your prospective customers is one of the most
important things that you can do.
Need of a website:
Website Adds To Company’s Credibility
If you want to show the world that you take your business seriously, then it is
time to invest in a professional website.
In an age when more than 50% of smartphone users discover a new company or
product while searching on their smartphones, not having a website can damage
your credibility.
According to a study, 75% of online users accepted to judge a company’s
credibility based on its website’s design.
In the end, people are likely to engage with a company they can trust, and the
website is the stepping stone towards building that relationship.
Purpose of Website
Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce,
entertainment, or social networking.
Expand Your Working Hours
Having a website means that your content is available to users anytime during the day, at their
convenience.
So whether someone visits your website in the dead of the night or during the day, in some way you’re
always interacting with them, and can say goodbye to that ‘closed for business’ sign.
Being accessible at all times supports marketing and increases sales dramatically, and this is especially
true for e-commerce companies.
It also is a step towards effective customer service and relationship building, especially if you have AI-
powered chatbots enabled on your website that can solve the basic problems of your customers when
they need it the most.
Can you list more purposes of website?
What is a Web Browser?

A web browser is a software program used to access the world wide web, often known as the Internet.
It serves as a bridge between ourselves and the information on the internet. This content might be
images, audio, movies, or other items on our displays via a web page. The web browser is a client
application since it seeks information from the web server. Google, Internet Explorer, Safari, Netscape
Navigator, Mozilla Firefox, and other popular browsers are listed here.

How does a Web browser work?

The entire information collecting procedure begins with the user entering the URL of the chosen website
into the address bar. The browser is a component of the client-server concept that serves as the client.
It communicates with the web server using HTTP (hypertext transfer protocol).
What is a Web Server?

A web server is a software component and hardware that responds to client requests
over the World Wide Web using HTTP and other protocols. A web server’s primary
function is to show website content by storing, processing, and distributing web pages to
users. Web servers also offer SMTP (Simple Mail Transmission Protocol) and FTP, which
are used for email, file transfer, and storage, in addition to HTTP.

How does a Web Server work?

The web server software is accessible via domain names and guarantees that the site’s
content is delivered to the requesting user. The software side comprises several
components, including at least a Web Server. The HTTP server can understand HTTP
and URLs.
Web Browser Web Server

A web browser is a software program that shows a web page. It normally A web server is a computer or software that provides services to other
connects to the internet to access the document. applications known as clients.

The web browser requests online pages and services from the server. The Web server acknowledges, approves, and answers a web browser’s
request for web content or service.

A web browser is software that searches the internet for information using The web server is in charge of linking. websites and web browsers.
web pages.

The web browser is a conduit between the server and the client, displaying A web server is a piece of software, or a system that manages web
web content to the client. applications, creates responses and takes input from clients.

A controller, a client application, and interpreters are the components of web Hardware, operating system software and web server software are the
browser architecture. components of web server architecture.

The web browser sends an HTTP. request and receive an HTTP response. The web server receives HTTP requests and responds with HTTP answers.

There is no processing model for web browsers. Web servers have three processing models: process-based, thread-based,
and hybrids.

The client’s machine has a web browser installed. The web server can be a remote machine on the other side of your system
or even on the other side of the world, or it might be your home computer.

Mozilla, Chrome Browser, and Internet Explorer are examples of web Apache Server is an example of a Web Server.
browsers.
Static and Dynamic website
When it comes to creating a website, knowing which type of
website works best for you, and specifically for the functionality
of your site may affect how you choose to build it.
Most websites can be defined as static or dynamic, with
increasing numbers of websites being termed hybrids—meaning
they are made up of a mixture of static and dynamic web pages.
 What is a static website?
A static website is made up of webpages created using HTML, CSS and Javascript
Each page on a static website is stored as a single HTML file , which is delivered directly from the server
to the webpage exactly as is.
This content essentially becomes a part of the design on your page, and won’t change unless the original
HTML file is edited at a code level.
Changes to a static website can be done manually, and will only be made page by page, HTML file by
HTML file.
For example, edits made to the HTML file of a homepage will only be reflected on the homepage.
This is true even for elements that are identical across the whole site, such as the footer. If you’re using a
website builder, changes to static pages will be made automatically every time you use the website
editor.
A good candidate for a static site is a resume website.
This is a type of site with set content for each page, and doesn't require many
changes to individual pages, or real-time updates based on user behavior.
Other examples of common static website types include personal websites,
nonprofit websites and purely informative websites

Advantages of a static website

Faster page loading speed results in better browsing experience.
Quick creation – Easy get Live
Potential for enhanced security- more difficult to hack
Disadvantages of a static website
Limited scalability
static website
● Static websites are the websites that doesn’t change the
content or layout dynamically with every request to the web
server.
● Static websites display exactly the same information
whenever anyone visits it.
● User sees the updated content of Static Website only when a
web author manually updates them with a text editor or any
web editing tool used for creating websites.
● Static webpages do not have to be simple plain text.
● They can feature multiple design and even videos.
Features of Static Websites:
● Static websites are the simplest kind of website that you can build.
● Every viewer will see the exactly same text, multimedia design or video every time he/she visits the website until you alter that
page’s source code.
● Static websites are written with the help of HTML and CSS.
● The only form of interactively on a static website is hyperlink.
● Static website can be used for the information that doesn’t change substantially over months or even years.
● Static pages are easy and simple to understand, secure, less prone to technology errors and breakdown and easily visible by
search engines.
● HTML was the first tool with which people had begun to create static web pages.
● Static websites provide flexibility.
● Lightweight .
● Static websites perform faster and well than dynamic ones.
Advantages of Static Websites:
● Static websites are highly cost-effective for publishing.
● They require less coding and technical knowledge.
● Static websites are easier to make.
● Static websites are quick to develop.
● Static websites are cheap to host.
● A static website contains data which is immutable.
● Static websites are beginner level. A programmer with knowledge of HTML, CSS,
and JavaScript can build static websites.
● It’s easy to create and host online.
● Static websites provide security.
Disadvantages of Static Websites:

● Requires web development expertise to update site.

● Site not as useful for the user.
● Content can get stagnant.
● Send the same response for every request.
● Dynamic functionality works only on the client side.
●Limited scalability
●One of the largest disadvantages of a static website only comes into play with larger, content-heavy
designs. While it’s possible to build hundreds of pages with a static website, it will always be a slow and
long process.
●Every page on a static website has to be built as a separate entity. For a site with multiple pages, you
would need to create each page individually.
Less efficient management
●Static websites may be quicker to create, but they can be more time consuming to manage. Edits to a
static website need to be made page by page, and as websites are loaded with more content, or rapidly
changing content, this becomes much more challenging—and in some cases, near impossible—task.
What is a dynamic website?
●Built using server side language and technology, dynamic websites allow for the
content of each page to be delivered and displayed dynamically, or on-the-fly,
according to user behavior or from user-generated content.
●With a dynamic website all of your data and content are organized in a database or
backend Content Management System (CMS), which connects to your website
pages. The way this information is arranged and connected to your site’s design
controls how and when its content is revealed on a page.
●What does all of this mean? Well, dynamic websites give you the ability to
customize and personalize website content for a specific user. It also allows you to
make changes to many pages at the same time, since modifications made to one
dynamic page can be automatically made across thousands.
Dynamic Website is a website containing data that can be mutable or changeable.
It uses client-side or server scripting to generate mutable content. Like a static
website, it also contains HTML data.
Dynamic websites are those websites that changes the content or layout with every
request to the webserver. These websites have the capability of producing different
content for different visitors from the same source code file. There are two kinds of
dynamic web pages i.e. client side scripting and server side scripting. The client-side
web pages changes according to your activity on the web page. On the server-side,
web pages are changed whenever a web page is loaded.
Example: login & signup pages, application & submission forms, inquiry and
shopping cart pages.
A Typical Architecture of dynamic website
There are different languages used to create dynamic web pages like
PHP, ASP, .NET and JSP. Whenever a dynamic page loads in browser,
it requests the database to give information depending upon user’s
input. On receiving information from the database, the resulting web
page is applied to the user after applying the styling codes.
Features of dynamic webpage:

● These websites are very flexible.

● In these websites the content can be quickly changed on the user’s computer without new page
request to the web browser.
● In these websites the owner have the ability to simply update and add new content to the site.
● These websites are featured with content management system, e-commerce system and intranet
or extranet facilities.
● Most of the dynamic web content, is assembled on the web using server-scripting languages.
Advantages of dynamic website:
It provides more functional websites.
It is very easy to update.
It helps in the search engines because new content brings people back to the site.
These are interactive websites because these can be customized.
These websites can work as a system to allow staff or users to collaborate.
It’s easy to modify or update data.
It provides a user-friendly interactive interface for users.
proves smooth navigation.
provide interactive user interface
It provides a better user experience.
It provides real-time data.
Disadvantages of dynamic webpages:
● These types of websites are complex.
● These are more expensive to develop.
● Hosting of these websites is also costlier.
● It requires a rapid, high-end web server.
● high production costs.
● Slow to load content.
● Client will require a skilled programmer to build a dynamic website.
● Hosting a website is costly as compared to a dynamic website.
● Low speed compared to a static website
Other examples of well-know dynamic
websites include:
●Instagram: as a social media site, dependent on user-generated content, Instagram relies on a dynamic
website.
●CNN: media outlets use dynamic websites to update their content, either in response to breaking news
or as stories age.
●Disney Plus: as a large streaming site, this dynamic entertainment website's dynamic nature allows its
content to be chosen and displayed according to a user's location, subscription and preferences.
Advantages of a dynamic website
●Easily updated
●Starting a business and building a brand online requires continually updated content. You need to stay
current with trends, updates and changes within your business, as well as within your industry. A
dynamic website is the most effective way to do this.
●With a dynamic website, a content change on one page can be automatically duplicated on other pages
without needing to alter the design. This is particularly relevant to sites with a large number of pages,
since it makes maintaining a website more efficient.
●One of the main advantages in terms of updating a dynamic website is that it makes maintenance
easier and faster.
●Dynamic pages also allow for scalability, since you can manage thousands of pages quickly and easily.
Even if you don’t plan for a large website from day one, a dynamic website gives you the option to grow
when it becomes necessary.
HTML
●HTML stands for HyperText Markup Language.
●It is used to design web pages using a markup language.
●HTML is the combination of Hypertext and Markup language.
●Hypertext defines the link between the web pages.
●A markup language is used to define the text document within tag which defines the structure of web
pages.
XML
●The Extensible Markup Language (XML) is a simple text-based format for representing structured
information: documents, data, configuration, books, transactions, invoices, and much more.
●It was derived from an older standard format called SGML (ISO 8879), in order to be more suitable for
Web use.
●Web publishing: With XML, users can create and customize interactive web pages. ...
●Web tasks: XML may be used for web searching and automating tasks. ...
●General applications: All kinds of applications can benefit from XML as it offers a streamlined method
of accessing information.
JSON
●JSON stands for JavaScript Object Notation. JSON is a lightweight format for storing and transporting
data. JSON is often used when data is sent from a server to a web page.
●JSON is "self-describing" and easy to understand.
●It is a text-based way of representing JavaScript object literals, arrays, and scalar data.
●JSON is relatively easy to read and write, while also easy for software to parse and generate.
●It is often used for serializing structured data and exchanging it over a network, typically between a
server and web applications.
uniform resource locator

Resource Name
 Web Programming Languages
1. Hypertext Markup Language (HTML)
HyperText Markup Language and Cascading Scripting Sheets are some of the most preferred languages
by website developers. The language is one of the most sorted languages used by web developers
these days. HTML helps in defining the basic structure of the websites, whereas, with the use of CSS,
the look and feel of a website can be managed. With the help of CSS, which has built-in libraries it, the
website’s aesthetics can be taken to their best level to help attract high traffic on the website.
2. PHP
Personal Home Page is one of the most commonly used languages for web development and
programming purposes. It is one of the most commonly used languages for web development and is
open source in nature. It is a server-based language and is executed over the servers only. It is mostly
used for creating dynamic and attractive web page content. It is one of the most operational systems-
friendly languages and can be used on almost every system. It is one of the easiest languages to learn
and also provides seamless opportunities for developers.
Web Programming Languages
3. C++
Broadly useful, all around incorporated and around since 1979, C++ is situated, specialized. Very
ground-breaking and with broad libraries, this is one of the foundation dialects of back end
improvement. Particularly valuable for elite projects and format overwhelming projects, this stalwart
isn’t going anyplace at this time. On the off chance that you definitely know C (or in the event that you’ve
learned C++ and need to turn your hand to C), you’re now almost there.
4. C
Like C++, C is an old-fashioned language, effectively gathered and broadly useful. It’s the most generally
utilized programming stage that offers building components for different dialects like C++, Python, and
Java. Truth be told, a large number of these dialects depend on C. An incredible choice for full stack
designers and the individuals who need to add another measurement to their range of abilities (or an
allegorical power drill to their programming tool kit). It’s best utilized for composing framework
programming and applications, so it is likewise a helpful language for back-end designers to become
acclimated to.
Web Programming Languages
●5. Structured Query Language (SQL)
For full-stack and server-side engineers, SQL (Structured Query Language) is the cherry on the cake of
your creating toolbox. An essential piece of web advancement, SQL makes getting explicit information
from enormous, complex databases a breeze. SQL is popular among enormous organizations like
Microsoft, so this is a smart decision for any engineer with high desire and an unquestionable
requirement on the off chance that you work with databases on the ordinary.
●6. Ruby
Adaptable, basic, and overly quick, Ruby and Ruby on Rails is a fantasy group couple that offers a full-
stack language and structure to construct full projects and web applications quickly. It’s most loved
among business people and new businesses and hosts a wide determination of third-get-together
‘diamonds’ (additional items) that can cause it to do essentially whatever you need it to. Twitter and
Basecamp utilize Ruby, so it must be great, isn’t that so? As one of the most esteemed and attractive
abilities out there, there’s no mischief in learning this one.
Web Programming Languages
●7. Java Script
●A front-end language is utilized for making and creating sites, work area applications, and games.
JavaScript runs on all programs and can be worked with on programs that are not electronic. It
underpins both useful and object arranged programming styles and is essentially your go-to for making
excellent UIs and sites/applications/games that look overly cool. Understanding JavaScript is
significant regardless of whether your heart is determined to server-side advancement; the parts,
information structures, and calculations apply to pretty much every other language.
●8. Java
●Created during the 1990s and still the most sought-after language, Java is the highest quality level in
web improvement everywhere throughout the world, in each territory. It’s an article situated, the class
put together, and works with respect to any stage, making it incredibly adaptable. In the event that you
need to make your sheltered employable to practically every tech organization on the planet, this is the
best approach. Fun actuality: Java was initially planned for intelligent TV, yet its makers before long
acknowledged it was excessively a long way comparatively radical for that specific industry. The rest is
history.
Web Programming Languages
●9. Python
●A newcomer contrasted with some different dialects in this rundown, Python, is incredibly simple to
learn and is a dynamic, universally handy language. Albeit progressively well known as a back-end
language, it can do practically anything you need it to. Structured with the objective of being meaningful,
straightforward, and above all fun, this is another most loved of designers in every aspect of the
business and is the main ‘novice’ language to learn. It’s adaptable and incredibly amazing and has a
brilliant future.
Web Standards
●Sadly, not all Web browser makers choose to interpret the format in the same way. For users, this
means that a website can look and function differently. Creating consistency between browsers, so that
any user can enjoy the internet, regardless of the browser they choose, is called web standards.
●Web Standards is defined as a formal set of standards and technical specifications used to define
aspects of the world wide web. These are best-practice standards used by organizations to build web
sites and web applications.
●Web standards consist of the following: Recommendations published by the World Wide Web
Consortium (W3C), such as HTML/XHTML, Cascading Style Sheets (CSS), image formats such as
Portable Network Graphics (PNG) and Scalable Vector Graphics (SVG), as well as accessibility
technologies like WAI-ARIA.
Three-Tier Architecture
●Three-tier architecture, which separates applications into three logical and physical computing tiers, is
the predominant software architecture for traditional client-server applications.
●
The chief benefit of three-tier architecture is that because each tier runs on its own infrastructure, each
tier can be developed simultaneously by a separate development team, and can be updated or scaled as
needed without impacting the other tiers.
Three-tier application in web
development
●In web development, the tiers have different names but perform similar functions:
●The web server is the presentation tier and provides the user interface. This is usually a web page or
web site, such as an ecommerce site where the user adds products to the shopping cart, adds payment
details or creates an account. The content can be static or dynamic, and is usually developed using
HTML, CSS and Javascript .
●The application server corresponds to the middle tier, housing the business logic used to process user
inputs. To continue the ecommerce example, this is the tier that queries the inventory database to return
product availability, or adds details to a customer's profile. This layer often developed using Python,
Ruby or PHP and runs a framework such as e Django, Rails, Symphony or ASP.NET, for example.
●The database server is the data or backend tier of a web application. It runs on database management
software, such as MySQL, Oracle, DB2 or PostgreSQL, for example.
 Client Server architecture
●Two-tier architecture
●Two-tier architecture is the original client-server architecture, consisting of a presentation tier and a
data tier; the business logic lives in the presentation tier, the data tier or both. In two-tier architecture the
presentation tier - and consequently the end user - has direct access to the data tier, and the business
logic is often limited. A simple contact management application, where users can enter and retrieve
contact data, is an example of a two-tier application.
2 tier – client server