MALLA REDDY ENGINEERING COLLEGE

(An UGC Autonomous Institution) Main Campus

Maisammaguda, Dhulapally(Post via Kompally), Secunderabad –

500100

Subject: Web Technologies

 WWW Introduction
• The World Wide Web, or Web, consists of a worldwide collection of electronic
documents (Web Pages)
• A Web Page is a collection of normal text picture, Video clip, Audio clip and hyper links.
• It can be designed with HTML, XML, Javascript, etc.
• HTML – Design Structure (Appears)
• Javascript – Validate the field
• XML is advanced version of HTML
• A Web site is a collection of related(interlink) web pages and associated items.
• Website is accessed through URL(address)
• url is a global address of web document on WWW.
• url’s are inique in nature may don’t have copy.
• They are two parts in url
 Protocol
 Resource Name
 Ex: http://www.google.com

Protocol Resource name

• A Web site is categorised to their function.
• Personal website --- we are having personal
• Commercial website ---
• Government website --- aadhar card, Voter ID,
• There are two types of web sites
• Static --- Information site
• Dynamic --- Interactive site
Web application(WebApp)

• A web application is an interactive software application that runs on a web server and is
accessed through web browsers.
• It is created using a combination of server-side and client-side programming, resulting in
a dynamic and responsive user experience.

Example:
•Email services: Gmail, Yahoo Mail, Outlook.com
•Social media platforms: Facebook, Twitter, Instagram, LinkedIn.
•Online collaboration tools: Google Workspace (Docs, Sheets, Slides)
 Protocol

• Protocols define how messages are sent and received.

• A protocol is a set of rules for the exchange of data between a terminal and
computer or between two computers.
• Think of protocol as a sort of recommunication agreement about the form is
which message or data is to be sent and receipt is to be acknowledged.
Types of Protocols

• TCP/IP
• HTTP
• FTP
• SMTP
Secure Connection
Secure connection is a connection that uses encryption protocols to protect the
transferred data. A secure connection protects data from unauthorized users,
identifies and authenticates the recipient of the data, and ensures the data has
not been tampered with.
Method of Connection:
 What is a Web Browser?

• The web browser is an application software to explore www (World Wide Web).
• It provides an interface between the server and the client and it requests to the server
for web documents and services.
• It works as a compiler to render HTML used to design a webpage. Whenever we search
for anything online, the browser loads a web page written in HTML, including text,
links, images, and other items such as style sheets and JavaScript functions.
• Examples:
Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari
 Features of Web Browser

1. Refresh button: Refresh button allows the website to reload the contents of
the web pages. Sometimes, it stops you from seeing the updated information;
in this case, by clicking on the refresh button, you can see the updated
information.
2. Stop button: It is used to cancel the communication of the web browser with
the server and stop loading the page content.
3. Home button: It provides users the option to bring up the predefined home
page of the website.
4. Web address bar: It allows the users to enter a web address in the address
bar and visit the website.
5. Bookmarks: It allows the users to select particular website to save it for the later
What is Server

A server is a computer or system that

provides data, services, resources, or
programs to other computers, called
clients, over a network. Servers can be
network computers, computer programs,
or devices that process requests from
clients.
Types of Servers(choices)

Web Servers: The internet is based on web servers that respond to requests
from clients such as web browsers.
Application Servers:
•A Server that provides services to applications such as a mobile app.
•Includes both hardware and software that provide an environment for
programs to run.
Used for:
• Running web application.
• Hosting a hypervisor that manages virtual machines(VMs)
• Distributing and monitoring software updates.
• Processing data sent from another server.
Why use Application Server?
• Provides processing power and memory to run demanding applications
• Also provides the environment to run specific applications
API - Application Programming Interface

• API stands for Application Programming Interface. It is a specification

intended to be used as an interface by software components to
communicate with each other, including routines, data structure,
object classes, and variables.
• In simple terms, it is a set of functions and procedures that allow
applications to access data and features of other applications, services,
and operating systems.
Database Server

Provides access to a database. It is a server which uses a database

application that provides database services to other computer programs or to
computers.

Examples:
• Microsoft SQL
• MySQL
• MongoDB
• SQLite
 Application and Development Tools

• Web application development refers to the process of creating software

applications that are designed to be accessed and used through web
browsers.
• These applications run on web servers and are delivered to users online.
Web applications can provide various functionalities and services, from
simple web pages to complex, interactive platforms.
 Key aspects of web application development include:

• Client-Side Development: This involves creating the user interface (UI)

components of the web application. Client-side development typically includes
HTML (Hypertext Markup Language) for structuring content, CSS (Cascading Style
Sheets) for styling, and JavaScript for adding interactivity and dynamic behavior.
• Server-Side Development: Server-side development focuses on building the back
end of the web application. This includes designing and implementing the server
logic, database management, user authentication, and business logic. Common
programming languages for server-side development include Python, Ruby, Java,
PHP, and Node.js.
• Database Management: Web applications often require databases to store and
manage data. Developers design and implement database schemas, create queries
to retrieve and manipulate data, and ensure data integrity and security.
• Frameworks and Libraries: Developers use frameworks and libraries to streamline
the development process and ensure best practices. These tools provide pre-built
components, structures, and patterns for routing, authentication, and data handling
tasks.
• Front-End and Back-End Communication: Communication between a web
application’s front-end and back-end components is essential. APIs (Application
Programming Interfaces) enable data exchange and interaction between the client
and server.
Examples of web applications
•social media platforms, e-commerce websites, online banking systems, content
management systems (CMS), project management tools, and more.
•Web application development is a dynamic field continuously evolving with
technological advancements, user expectations, and business requirements.

Web Application Development Process

The web application development process involves several phases, each with its own
set of tasks, activities, and considerations. While the specific steps may vary depending
on the project scope, technology stack, and team structure.
• Requirement Gathering and Analysis:
• Understand the project’s goals, target audience, and business requirements.
• Collaborate with stakeholders to gather detailed project requirements and
expectations.
• Planning:
• Create a project plan that outlines the scope, timeline, budget, resources, and
milestones.
• Determine the technology stack, frameworks, and tools that will be used.
• Plan the application’s architecture, including data models, components, and
interactions.
• Design:
• Design the user interface (UI) and user experience (UX) of the web application.
• Create wireframes, prototypes, and mockups to visualize the layout and
interactions.
• Design database schemas, data flows, and system diagrams.
• Front-End Development:
• Develop the client side of the web application using HTML, CSS, and JavaScript.
• Implement the UI design, including responsive layouts and interactive elements.
• Integrate front-end frameworks and libraries as needed.
• Back-End Development:
• Develop the server-side logic, business logic, and APIs using the chosen
programming language and framework (e.g., Python with Django or Flask,
Node.js with Express, Ruby on Rails, etc.).
• Implement user authentication, authorization, and security measures.
• Create RESTful or GraphQL APIs for communication between the front-end and
back-end.
• Database Development:
• Design and create the database schema based on the application’s data
requirements.
• Choose an appropriate database management system (e.g., MySQL,
PostgreSQL, MongoDB) and set up the database.
• Implement data storage, retrieval, and manipulation operations.
• Integration:
• Integrate third-party services, APIs, and libraries that enhance the application’s
functionality (e.g., payment gateways, social media integration, geolocation
services).
 IP Address

• An Internet Protocol (IP) address is the unique identifying number assigned to every device
connected to the internet.
• An IP address definition is a numeric label assigned to devices that use the internet to
communicate.
Public IP address
•A public IP address, or external-facing IP address, applies to the main device people use to connect
their business or home internet network to their internet service provider (ISP).
•All devices that connect to a router communicate with other IP addresses using the router’s IP
address.
Private IP address
• A private IP address, or internal-facing IP address, is assigned by an office or home intranet
(or local area network) to devices, or by the internet service provider (ISP).
• The home/office router manages the private IP addresses to the devices that connect to it from
within that local network.
• Network devices are thus mapped from their private IP addresses to public IP addresses by the
router.
Static IP address

• All public and private addresses are defined as static or dynamic.

• An IP address that a person manually configures and fixes to their device’s network is referred
to as a static IP address.
• A static IP address cannot be changed automatically.
• An internet service provider may assign a static IP address to a user account.
• The same IP address will be assigned to that user for every session.
 Dynamic IP Address

• A dynamic IP address is a unique identifier that an internet service provider (ISP) temporarily
assigns to a device when it connects to the network.
• Dynamic IP addresses change over time and can be assigned using the Dynamic Host
Configuration Protocol (DHCP).
• For example, an IP address can change when a user reboots their router or system, or when they
connect to their ISP.
• When a dynamic IP address is not in use, it can be automatically assigned to another device.

Example of Dynamic IP Address

If your IP address is 1.1.1.1 on your home Wi-Fi network, it might change to 1.1.1.2 after 36 hours or
when you disconnect and reconnect
IP Address Classes
Some IP addresses are reserved by the Internet Assigned Numbers Authority (IANA). These are typically reserved for
networks that carry a specific purpose on the Transmission Control Protocol/Internet Protocol (TCP/IP), which is
used to interconnect devices. Four of these IP address classes include:
1.0.0.0.0: This IP address in IPv4 is also known as the default network. It is the non-routeable meta address that
designates an invalid, non-applicable, or unknown network target.
2.127.0.0.1: This IP address is known as the loopback address, which a computer uses to identify itself regardless of
whether it has been assigned an IP address.
3.169.254.0.1 to 169.254.254.254: A range of addresses that are automatically assigned if a computer is unsuccessful in
an attempt to receive an address from the DHCP.
4.255.255.255.255: An address dedicated to messages that need to be sent to every computer on a network or
broadcasted across a network.
 Web Design

• Web design is a concept of planning, creating, updating and maintaining websites.

• A Good web design allows the user to understand the message, contents, and ideas most
conveniently.
• In order to come up with a technically and visually good appealing and effective web design,
elements must be arranged in a way that is pleasing to the eye, well-coordinated, and
maintaining good balance among the elements.
• Web Design is a field related to designing websites on the Internet.
• Without a good design, a website fails to perform well and cannot produce a good impact on the
user.
• Design is a creative process that affects the ranking of the brand.
 WEB DESIGN ELEMENTS

1. TEXT – font family and type must be chosen well, clear and in readable size.
2. GRAPHICS - must be with good quality and well arranged with the text and other elements.
Infographics may be used.
3. SHAPES – can be used to denote an enclosed boundary in the overall design. Any kind of shapes
like geometric or abstract shapes that will fit the user’s design can be placed.
4. BACKGROUND – can help provide your website with a feeling of a surface underneath. This
element must be used to bring out the content given on the website to make it look more
appealing.
5. COLOR – must blend well and complement the elements on the page. Use vibrant and bold
colors that will attract but not too distracting.
 6. VIDEO/AUDIO – will help viewers easily understand what you teaching or selling.
7. LINKS – will allow users to connect another site or page that is related to the content of your
page or site.

WEB SITE DESIGN PRINCIPLES

• A good web design must contain elements that are not only appealing but should be functional,
responsive, and useful.
• To create a usable and effective website, follow the basic principles of an effective web design.
1. PORTABLE DESIGN – must be portable and accessible by users who have different browsers,
operating systems, and computer platforms; test compatibility.
2. DESIGN FOR LOW BANDWIDTH – website design must be accessible at a variety of speeds.
Avoid large graphics or animations as the users may leave the site if downloading is slow.
3. DIRECTION – identify the order of importance of the various elements and place them in a
sequence where the eye moves and perceives the things it sees. There should be a consistent layout
and structure.
4. ACCESSIBILITY – when a visitor enters the website, we must be able to easily access the
information. This means that the text must be readable, the colors must create visual harmony and
balance, and images should be high quality.
5. WHITE SPACES – use white space deliberately in your design as a breathing space. May also
be used to show division of contents.
6. SIMPLIFY – the more options you place in your site, the more difficult it is for a visitor to make
a decision and more time is required to browse through them. Remove distracting options and
clutter.
7. CONVENIENCE – to allow a visitor to make an action, click buttons should be convenience.
The larger the Share or Order button, the more easily and quickly for the customer to click them.
8. REGULAR TESTING – the website should be regularly upgraded, updated, and tested so that
problems will be quickly resolved. This includes the links and the loading of images and other
elements in the page. Visitors will not hold on or proceed if they encounter problems in loading or
viewing.
Types of Web design
The following are the types of Web Design:
•Static Website: This type of design is used when little or no interaction is required from the user.
•Dynamic Website: When user interaction is required and information is to be displayed according to
the request then a dynamic design pattern is followed.
•E-commerce Website: This type of website design is required when a business wants to sell their
products to the consumer.
•Flat Design: Minimalist approach characterized by clean, simple elements, vibrant colors, and
absence of gradients.
PLANNING THE SITE
•Creating a website plan helps you organize your project, collect the assets you need, and start with
an outline of your goals and a clear strategy for achieving them.

1. Identify your website goals

2. Identify your target audience
3. Define your unique selling proposition
4. Secure a domain name and hosting
5. Pick a website builder
6. Create and collect design elements
7. Create content for your core website pages
 Identify your website goals

The purpose of your website is the reason why you want to build it. It’s the somewhat obvious
reason for what you think a website can do for you. You might think the purpose is to:
• Attract traffic and grow an audience
• Showcase your products
• Share what you know
• Advertise your business
• Entertain your readers
 Identify your target audience

Once you know what you want users to do on your site, you need to figure out who those users
are.
1. It identifies your website’s target audience when planning your website.
2. Only then can you create strategic plans to get website visitors to take action.

Define your unique selling proposition

So far in your process of planning a website, you’ve determined your goals and defined your
target audience. Now, you can start developing marketing strategies for reaching the audience
and encouraging them to act.
4. Secure a domain name and hosting
1.Now that you have finished a big portion of your website plan, you can get ready to set up your
site.
2.Start the process by securing a domain name and hosting.
3.A domain name, also known as a URL (Uniform Resource Locator), is a web address used to
locate and access a website on the internet.
4.Website hosting is the server space and resources that store a website’s files and data.
domainname.guru
mrec.ac.in
tspsc.gov.in
 Pick a website builder
1.At this point in planning, you’re ready to choose how you will build your website.
2.You have a few options for building your site.
Option 1: Drag-and-drop website builder Option 2: Custom code

• Images
• Videos
• Text blocks
• Titles
• Galleries
• Forms
• Slideshows
• Buttons
 Create and collect design elements

These design elements define your brand personality and help customers feel what your brand
represents through the use of:
• Colors
• Fonts
• Logos
• Images and photos
Create content for your core website pages

Home page
About page
Product/service page
Contact page
 Types of Navigation Most navigation types fall into three primary categories

Structural
• Connects one page to another page based on the hierarchy of the site; on any page you should expect
to be able to move to the page above it and pages. It connects one page to another based on the site's
hierarchy; on any page, below it.
Associative
• Connects pages with similar topics and content, regardless of their location in the site; links tend to
cross structural boundaries.
Utility
• Connects pages and features that help people use the site itself; these may lie outside the main
hierarchy of the site, and their only relationship to one another is their function.
STRUCTURAL NAVIGATION
•As its name implies, structural navigation follows the structure of a web site. It allows people to
move up and down the different points of a site's.
•Structural navigation can be further subdivided into two types: main navigation and local
navigation.

Main Navigation
•The main navigation generally represents the top-level pages of a site's structure—or the pages just
below the home page.
•The links in the main navigation are expected to lead to pages within the site and behave in a very
consistent way.
LOCAL NAVIGATION
•Local navigation is used to access lower levels in a structure, below the main navigation pages.
•The term "local" implies "within a given category."
•On a given page, local navigation generally shows other options at the same level of a hierarchy, as
well as the options below the current page.
CONTEXTUAL NAVIGATION
•Generally, contextual navigation is placed close to the content of a page.
•This creates a strong connection between the meaning of a text and the linked related pages.
•There are two typical arrangements of contextual navigation on the page

Embedded navigation
• Contextual navigation may be embedded within the text itself. As a result, contextual
navigation is often represented as plain text links.
Related links
• Contextual navigation may appear at the end or to the side of content.
 Linux web servers
What is Web Server
• A Web server is a computer system that processes requests via HTTP, the basic network
protocol used to distribute information on the World Wide Web.
• A web servers main purpose is to store web site files and broadcast them over the internet
for you site visitors to see.
• Thus, the main purpose of a web server is to store and transfer web site data upon the
request of a visitors browser. Update All package

• Update package lists from the repositories.

• To do this, open a terminal. This will also ask for your password. Wait till it gets updated.

Command: zakaria@ zakaria-VirtualBox:$ sudo apt -get update

Command: zakaria@ zakaria-VirtualBox:$ sudo apt -get update
Apache Install
•To install apache2 server, need to
type the following command in your
terminal.
•This will take some time to install
the apache2
Localhost Check
•Here, we can see the current or running status
of apache using this sudo service apache2
status.
•Here, the status of apache is inactive or dead
Ifconfig
•If we want to run and check our apache server
then we should know our if address.
•The ifconfig command will provide us the ip
address

Apache Status
•At fast, we should check the current status of
apache.
•So, we can type the following command to
show the current apache status.
Apache Current Status check
•Here, we can see the current or running status of apache using this sudo service apache2 status.
•Here, the status of apache is inactive or dead
Apache Start
•For the purpose of running our apache server, at first we should start the apache server.
•So, this command is works for start the apache server.
Current localhost Check
•Now, we can see our current localhost default page using the using the apache server by any web
browser. And this is work successfully.
Localhost check using Enthernet IP
•Now, we can see our current localhost default page using our Ethernet IP by any web browser.
•Here we are using the Mozilla firefox web browser. And it works successfully
Go to Root User
•In this section, we need the root user for accessing the /var/www/location. So, in this following
command is used to access the root user. Then created a new file.
• After accessing the root user we need to edit and
write the file which is previously created. This
following command uses for this particular
function.
• And after the accessing of this particular file, we
are designed a html web page which name is
my.html.
• Here, we can see that our required
my.html file is accessing successfully.
And it works successfully.
• This page shows us our previously
created html texts.