Unit - 1 - Introduction to Web Design
1,179 views
43 slides
Aug 22, 2024
Slide 1 of 43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
About This Presentation
Internet and Web, HTTP Protocol, Architecture of web browser, Introduction to Web Technologies, HTML, CSS, Java Script, Bootstrap, Concepts of effective web design, Web design issues, Designing effective navigation. fundamental of web
page, static and dynamic website design.
Slide Content
Web Development
UNIT - 1
Introduction to
Web Technology and Design
UNIT - 1
Introduction to
Web Technology and Design
Outline...
* Internet and Web
* HTTP Protocol
+ Architecture of Web browser
* Introduction to Web Technologies
* HTML
* CSS
* Java Script
+ Bootstrap
* Concepts of effective web design
* Web design issues
* Designing effective navigation
+ Fundamental of web page
* Static and dynamic website design
* Internet and Web
* HTTP Protocol
+ Architecture of Web browser
* Introduction to Web Technologies
* HTML
* CSS
* Java Script
+ Bootstrap
* Concepts of effective web design
* Web design issues
* Designing effective navigation
+ Fundamental of web page
* Static and dynamic website design
Basics of WWW
* WWW stands for World Wide Web. A technical definition of the
World Wide Web is : all the resources and users on the Internet that
are using the Hypertext Transfer Protocol (HTTP).
+ A broader definition comes from the organization that Web inventor
Tim Berners-Lee helped found, the World Wide Web Consortium
(W3C).
«In simple terms, The World Wide Web is a way of exchanging
information between computers on the Internet, tying them together
into a vast collection of interactive multimedia resources.
* Internet and Web is not the same thing: Web uses internet to pass
over the information.
* WWW stands for World Wide Web. A technical definition of the
World Wide Web is : all the resources and users on the Internet that
are using the Hypertext Transfer Protocol (HTTP).
+ A broader definition comes from the organization that Web inventor
Tim Berners-Lee helped found, the World Wide Web Consortium
(W3C).
«In simple terms, The World Wide Web is a way of exchanging
information between computers on the Internet, tying them together
into a vast collection of interactive multimedia resources.
* Internet and Web is not the same thing: Web uses internet to pass
over the information.
Basics of WWW
Basics of WWW - Evolution
+ World Wide Web was created by Timothy Berners Lee in 1989 at
CERN in Geneva. World Wide Web came into existence as a proposal
by him, to allow researchers to work together effectively and
efficiently at CERN.
* Eventually it became World Wide Web. The following diagram briefly
defines evolution of World Wide Web:
+ World Wide Web was created by Timothy Berners Lee in 1989 at
CERN in Geneva. World Wide Web came into existence as a proposal
by him, to allow researchers to work together effectively and
efficiently at CERN.
* Eventually it became World Wide Web. The following diagram briefly
defines evolution of World Wide Web:
Basics of WWW - Evolution
Web 2.0
“Social Media
“Keyword search
«Rich user experience
“Tagging
Web 2.0
“Social Media
“Keyword search
«Rich user experience
“Tagging
Basics of WWW - Operation
User enters the URL (say, http://www.tutorialspoint.com) of the
web page in the address bar of web browser.
. Then browser requests the Domain Name Server for the IP address
corresponding to www.tutorialspoint.com.
. After receiving IP address, browser sends the request for web page
to the web server using HTTP protocol which specifies the way the
browser and web server communicates.
. Then web server receives request using HTTP protocol and checks
its search for the requested web page. If found it returns it back to
the web browser and close the HTTP connection.
. Now the web browser receives the web page, It interprets it and
display the contents of web page in web browser’s window.
User enters the URL (say, http://www.tutorialspoint.com) of the
web page in the address bar of web browser.
. Then browser requests the Domain Name Server for the IP address
corresponding to www.tutorialspoint.com.
. After receiving IP address, browser sends the request for web page
to the web server using HTTP protocol which specifies the way the
browser and web server communicates.
. Then web server receives request using HTTP protocol and checks
its search for the requested web page. If found it returns it back to
the web browser and close the HTTP connection.
. Now the web browser receives the web page, It interprets it and
display the contents of web page in web browser’s window.
HTTP Protocol
*The Hypertext Transfer Protocol (HTTP) is an application-level
protocol for distributed, collaborative, hypermedia information
systems.
* HTTP is a generic and stateless protocol which can be used for other
purposes as well using extensions of its request methods, error codes,
and headers.
* Basically, HTTP is a TCP/IP based communication protocol, that is used
to deliver data (HTML files, image files, query results, etc.) on the
World Wide Web.
* The default port is TCP 80, but other ports can be used as well. HTTP
specification specifies how clients' request data will be constructed
and sent to the server, and how the servers respond to these
requests.
*The Hypertext Transfer Protocol (HTTP) is an application-level
protocol for distributed, collaborative, hypermedia information
systems.
* HTTP is a generic and stateless protocol which can be used for other
purposes as well using extensions of its request methods, error codes,
and headers.
* Basically, HTTP is a TCP/IP based communication protocol, that is used
to deliver data (HTML files, image files, query results, etc.) on the
World Wide Web.
* The default port is TCP 80, but other ports can be used as well. HTTP
specification specifies how clients' request data will be constructed
and sent to the server, and how the servers respond to these
requests.
HTTP Protocol
HTTP Request
B World Wide Web
or Internet
| HTTP Response \
HTTP Request
B World Wide Web
or Internet
| HTTP Response \
HTTP Protocol
Server Side Script
Database
Web Client
HTTP Protocol
Server Side Script
Database
Web Client
HTTP Protocol
HTTP Protocol Methods
* GET : The GET method is used to retrieve information from the given
server using a given URI. Requests using GET should only retrieve data
and should have no other effect on the data.
+ HEAD : Same as GET, but transfers the status line and header section
only.
* POST : A POST request is used to send data to the server, for example,
customer information, file upload, etc. using HTML forms.
* PUT : Replaces all current representations of the target resource with
the uploaded content.
* DELETE : Removes all current representations of the target resource
given by a URI.
* GET : The GET method is used to retrieve information from the given
server using a given URI. Requests using GET should only retrieve data
and should have no other effect on the data.
+ HEAD : Same as GET, but transfers the status line and header section
only.
* POST : A POST request is used to send data to the server, for example,
customer information, file upload, etc. using HTML forms.
* PUT : Replaces all current representations of the target resource with
the uploaded content.
* DELETE : Removes all current representations of the target resource
given by a URI.
HTTP Protocol Methods
* CONNECT : Establishes a tunnel to the server identified by a given
URI.
* OPTIONS : Describes the communication options for the target
resource.
+ TRACE : Performs a message loop-back test along the path to the
target resource.
* CONNECT : Establishes a tunnel to the server identified by a given
URI.
* OPTIONS : Describes the communication options for the target
resource.
+ TRACE : Performs a message loop-back test along the path to the
target resource.
HTTP Header
* The HTTP headers are used to pass additional information between
the clients and the server through the request and response header.
* All the headers are case-insensitive, headers fields are separated by
colon, key-value pairs in clear-text string format.
+ The end of the header section denoted by an empty field header.
There are a few header fields that can contain the comments.
* General Header: This type of headers applied on Request and
Response headers both but with out affecting the database body.
* Request Header: This type of headers contains information about the
fetched request by the client.
* Response Header: This type of headers contains the location of the
source that has been requested by the client.
* The HTTP headers are used to pass additional information between
the clients and the server through the request and response header.
* All the headers are case-insensitive, headers fields are separated by
colon, key-value pairs in clear-text string format.
+ The end of the header section denoted by an empty field header.
There are a few header fields that can contain the comments.
* General Header: This type of headers applied on Request and
Response headers both but with out affecting the database body.
* Request Header: This type of headers contains information about the
fetched request by the client.
* Response Header: This type of headers contains the location of the
source that has been requested by the client.
HTTP Header
+» Entity Header: This type of headers contains the information about
the body of the resources like MIME type, Content-length.
+ Example
<meta http-equiv="Cache-Control" content="no-cache, no-store">
<meta http-equiv="Expires" content="0">
+» Entity Header: This type of headers contains the information about
the body of the resources like MIME type, Content-length.
+ Example
<meta http-equiv="Cache-Control" content="no-cache, no-store">
<meta http-equiv="Expires" content="0">
1;
HTTP Request
A simple request message from a client computer consists of the
following components:
A request line to get a required resource, for example a request GET
/content/page1.html
Headers (Example — Accept-Language: EN).
An empty line.
A message body which is optional. The request line consists of
GET /doc/test.html HTTP/1.1————> Request Line 3 parts
Host: war.test1ßl.com
Accept: image/gif, image/jpeg, */* Request + Request method
Message
Accept-Language: en-us
penser + Request URI
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0
Ablank line separates header &body * HTTP Version
7 Request Message Body
Request Headers
Content-Length: 35
‘bookrd-123438author=Taneah+Teck
HTTP Request
A simple request message from a client computer consists of the
following components:
A request line to get a required resource, for example a request GET
/content/page1.html
Headers (Example — Accept-Language: EN).
An empty line.
A message body which is optional. The request line consists of
GET /doc/test.html HTTP/1.1————> Request Line 3 parts
Host: war.test1ßl.com
Accept: image/gif, image/jpeg, */* Request + Request method
Message
Accept-Language: en-us
penser + Request URI
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0
Ablank line separates header &body * HTTP Version
7 Request Message Body
Request Headers
Content-Length: 35
‘bookrd-123438author=Taneah+Teck
HTTP Response
* A simple response from the server contains the following components:
1;
A Status-line (For example HTTP/1.1 301 Moved Permanently, means the
requested resource was permanently moved and redirecting to some
other resource).
Headers (Example — Content-Type: html)
An empty line.
A message body which is optional.
HTTP/1.1 200 ok
Date: Sun, 08 Feb xxx 01:11:12 GHT
Server: Apache/1.3.29 (Hin32)
Last-Modified: Sat, 07 Feb xx
ETag: "0-23-4024c3a5"
Accept-Ranges: bytes
nt-Length: 35
Status Line
Response
Message
Response Headers ? Header
A blank line separates header & body
} Response Message Body
* A simple response from the server contains the following components:
1;
A Status-line (For example HTTP/1.1 301 Moved Permanently, means the
requested resource was permanently moved and redirecting to some
other resource).
Headers (Example — Content-Type: html)
An empty line.
A message body which is optional.
HTTP/1.1 200 ok
Date: Sun, 08 Feb xxx 01:11:12 GHT
Server: Apache/1.3.29 (Hin32)
Last-Modified: Sat, 07 Feb xx
ETag: "0-23-4024c3a5"
Accept-Ranges: bytes
nt-Length: 35
Status Line
Response
Message
Response Headers ? Header
A blank line separates header & body
} Response Message Body
HTTP Response Status Code
* The Status-Code element in a server response, is a 3-digit integer
where the first digit of the Status-Code defines the class of response
and the last two digits do not have any categorization role. There are
5 values for the first digit:
SN. | Code and Description
1 xx: Informational: It means the request was received and the process is continuing.
2 2xx Success: It means the action was successfully received, understood, and
accepted.
3 3xx: Redirection: It means further action must be taken in order to complete the
request.
4 4xx: Client Error: It means the request contains incorrect syntax or cannot be
fulfilled.
5 5xx:Server Error: It means the server failed to fulfill an apparently valid request.
* The Status-Code element in a server response, is a 3-digit integer
where the first digit of the Status-Code defines the class of response
and the last two digits do not have any categorization role. There are
5 values for the first digit:
SN. | Code and Description
1 xx: Informational: It means the request was received and the process is continuing.
2 2xx Success: It means the action was successfully received, understood, and
accepted.
3 3xx: Redirection: It means further action must be taken in order to complete the
request.
4 4xx: Client Error: It means the request contains incorrect syntax or cannot be
fulfilled.
5 5xx:Server Error: It means the server failed to fulfill an apparently valid request.
HTTP Request and Response
Architecture of Web Browser
+ A web browser or Internet browser is a software application for
retrieving, presenting, and traversing information resources on the
World Wide Web.
@ ooe
Google Chrome Opera
Mozila Firefox Internet Explorer
* An information resource is identified by a Uniform Resource Identifier
(URI) and may be a web page, image, video, or other piece of content.
* Hyperlinks present in resources enable users to easily navigate their
browsers to related resources.
+ A web browser or Internet browser is a software application for
retrieving, presenting, and traversing information resources on the
World Wide Web.
@ ooe
Google Chrome Opera
Mozila Firefox Internet Explorer
* An information resource is identified by a Uniform Resource Identifier
(URI) and may be a web page, image, video, or other piece of content.
* Hyperlinks present in resources enable users to easily navigate their
browsers to related resources.
Architecture of Web Browser
Component of Web Browser
* The User Interface:
* Its space where User interacts with the browser.
elt includes the address bar, back and next buttons, home button,
refresh and stop, bookmark option, etc.
* The Browser Engine:
« Works as a bridge between the User interface and the rendering
engine.
* According to the inputs from various user interfaces, it queries and
manipulates the rendering engine.
* The Rendering Engine:
* Its responsible for rendering the requested web page on the browser
screen.
* The User Interface:
* Its space where User interacts with the browser.
elt includes the address bar, back and next buttons, home button,
refresh and stop, bookmark option, etc.
* The Browser Engine:
« Works as a bridge between the User interface and the rendering
engine.
* According to the inputs from various user interfaces, it queries and
manipulates the rendering engine.
* The Rendering Engine:
* Its responsible for rendering the requested web page on the browser
screen.
Component of Web Browser
« It interprets the HTML, XML documents and images that are
formatted using CSS and generates the layout that is displayed in the
User Interface.
« Different browsers user different rendering engines.
+ Networking:
* Retrieves the URLs using the common internet protocols of HTTP or
FTP.
* Handles all aspects of Internet communication and security.
* JavaScript Interpreter:
* Interprets and executes the JavaScript code embedded in a website.
* The interpreted results are sent to the rendering engine for display.
« It interprets the HTML, XML documents and images that are
formatted using CSS and generates the layout that is displayed in the
User Interface.
« Different browsers user different rendering engines.
+ Networking:
* Retrieves the URLs using the common internet protocols of HTTP or
FTP.
* Handles all aspects of Internet communication and security.
* JavaScript Interpreter:
* Interprets and executes the JavaScript code embedded in a website.
* The interpreted results are sent to the rendering engine for display.
Introduction to Web Technologies
* Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the Internet.
+ A web browser is used to access web pages.
* Web browsers can be defined as programs that display text, data,
pictures, animation, and video on the Internet.
* Hyperlinked resources on the World Wide Web can be accessed using
software interfaces provided by Web browsers.
* Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the Internet.
+ A web browser is used to access web pages.
* Web browsers can be defined as programs that display text, data,
pictures, animation, and video on the Internet.
* Hyperlinked resources on the World Wide Web can be accessed using
software interfaces provided by Web browsers.
Introduction to Web Technologies
* Web Technology can be Classified into the Following Sections:
* World Wide Web (WWW): The World Wide Web is based on several
different technologies: Web browsers, Hypertext Markup Language
(HTML), and Hypertext Transfer Protocol (HTTP).
* 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 requests to the server for web documents and
services.
» Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web
pages. This exchange takes place using Hypertext Transfer Protocol
(HTTP).
* Web Technology can be Classified into the Following Sections:
* World Wide Web (WWW): The World Wide Web is based on several
different technologies: Web browsers, Hypertext Markup Language
(HTML), and Hypertext Transfer Protocol (HTTP).
* 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 requests to the server for web documents and
services.
» Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web
pages. This exchange takes place using Hypertext Transfer Protocol
(HTTP).
Introduction to Web Technologies
* Web Technology can be Classified into the Following Sections:
* Web Pages: A webpage is a digital document that is linked to the
World Wide Web and viewable by anyone connected to the internet
has a web browser.
*Web Development: Web development refers to the building,
creating, and maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management.
* Web Technology can be Classified into the Following Sections:
* Web Pages: A webpage is a digital document that is linked to the
World Wide Web and viewable by anyone connected to the internet
has a web browser.
*Web Development: Web development refers to the building,
creating, and maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management.
Introduction to Web Technologies
* Web Development can be Classified into Two Ways:
* Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’
of the application.
* Backend Development: Backend is the server side of a website. It is
the part of the website that users cannot see and interact. It is the
portion of software that does not come in direct contact with the
users. It is used to store and arrange data.
* Web Development can be Classified into Two Ways:
* Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’
of the application.
* Backend Development: Backend is the server side of a website. It is
the part of the website that users cannot see and interact. It is the
portion of software that does not come in direct contact with the
users. It is used to store and arrange data.
Introduction to Web Technologies
Frontend Develepmest
Frontend Development
Frontend Develepmest
Frontend Development
Introduction to Web Technologies
Backend
y
1 y I
Python Ruby “ Golang
| =
Ruby on all
Backend Development
Backend
y
1 y I
Python Ruby “ Golang
| =
Ruby on all
Backend Development
Concepts of Effective Web Design
« Within just 10-15 seconds, a visitor landing on your website can
decide whether to stay or leave.
* Regardless of the complexity of the backend code, if your UI/UX
design isn’t impressive, users will lose interest and bounce.
* It’s not just about adding content and elements for beauty; it’s also
about creating a user-friendly experience.
* Creating an effective website requires careful consideration of various
elements. Here are some tips to enhance your web design:
*Have a Purpose and Plan: A user needs a reason to visit an
application and that’s why your website should clearly explain or
convey the services or products you are offering to the users.
« Within just 10-15 seconds, a visitor landing on your website can
decide whether to stay or leave.
* Regardless of the complexity of the backend code, if your UI/UX
design isn’t impressive, users will lose interest and bounce.
* It’s not just about adding content and elements for beauty; it’s also
about creating a user-friendly experience.
* Creating an effective website requires careful consideration of various
elements. Here are some tips to enhance your web design:
*Have a Purpose and Plan: A user needs a reason to visit an
application and that’s why your website should clearly explain or
convey the services or products you are offering to the users.
Concepts of Effective Web Design
* Simplicity: Make your website simple and try to display one detail at
atime for getting the individual attention of each part.
* Readability: Users should not face difficulty in reading the text on
your website so you need to pay attention to the contrast between
your text and its background.
* Responsiveness: People use mobile devices for most of their
browsing and 50% of web traffic comes from mobile devices. These all
are the reasons that your application should be viewable on different
devices.
« Simple Navigation: Visitors will definitely move away from your
website if they won’t be able to find out the things they are looking
for and that’s the reason paying attention to the navigation of your
website is extremely important.
* Simplicity: Make your website simple and try to display one detail at
atime for getting the individual attention of each part.
* Readability: Users should not face difficulty in reading the text on
your website so you need to pay attention to the contrast between
your text and its background.
* Responsiveness: People use mobile devices for most of their
browsing and 50% of web traffic comes from mobile devices. These all
are the reasons that your application should be viewable on different
devices.
« Simple Navigation: Visitors will definitely move away from your
website if they won’t be able to find out the things they are looking
for and that’s the reason paying attention to the navigation of your
website is extremely important.
Concepts of Effective Web Design
* Call To Action: It’s very important in your website to have a clear call
to action button or form that indicates the next step or action the
user should take on a page to accomplish the task.
* Load Speed: People are very impatient and they are not going to wait
for too long if your website speed is slow. Most of the user moves
away from the website within just 5 seconds if their id doesn’t load
fast.
* Prioritize Scrolling: The best way to present more content and fit that
into your website is by using the scrollbar. It has been found in one of
the studies that conversion rates increase by up to 30% when you add
a scrolling feature to your webpage.
* Pick Up The Right Images: A picture says a lot about a website and
choosing the right image for your website can get a lot of visitors.
* Call To Action: It’s very important in your website to have a clear call
to action button or form that indicates the next step or action the
user should take on a page to accomplish the task.
* Load Speed: People are very impatient and they are not going to wait
for too long if your website speed is slow. Most of the user moves
away from the website within just 5 seconds if their id doesn’t load
fast.
* Prioritize Scrolling: The best way to present more content and fit that
into your website is by using the scrollbar. It has been found in one of
the studies that conversion rates increase by up to 30% when you add
a scrolling feature to your webpage.
* Pick Up The Right Images: A picture says a lot about a website and
choosing the right image for your website can get a lot of visitors.
Concepts of Effective Web Design
* Color Palette: The color of your website should match the brand of
your website. Choosing the right color to represent your brand is very
important. You also need to take care of contrast while choosing the
color.
* Color Palette: The color of your website should match the brand of
your website. Choosing the right color to represent your brand is very
important. You also need to take care of contrast while choosing the
color.
Web Design Issues
* Poor Navigation: It is a problem that often leads to user frustration,
resulting in higher bounce rates and decreased engagement.
* Slow Loading Speed: Slow loading websites not only annoy users but
also negatively impact the search engine ranking of a website.
* Lack of Mobile Responsiveness: A website that is not mobile-friendly
can lead to a poor user experience, resulting in lost traffic and
revenue.
* Confusing Layout: A picture says a lot about a website and choosing
the right image for your website can get a lot of Users are more likely
to engage with a website that has a clean and simple layout, which
guides them through the content they are looking for.
* Poor Navigation: It is a problem that often leads to user frustration,
resulting in higher bounce rates and decreased engagement.
* Slow Loading Speed: Slow loading websites not only annoy users but
also negatively impact the search engine ranking of a website.
* Lack of Mobile Responsiveness: A website that is not mobile-friendly
can lead to a poor user experience, resulting in lost traffic and
revenue.
* Confusing Layout: A picture says a lot about a website and choosing
the right image for your website can get a lot of Users are more likely
to engage with a website that has a clean and simple layout, which
guides them through the content they are looking for.
Web Design Issues
« Poor Typography: The typography of your website refers to the
typefaces, fonts, and sizes you use to display your content.
* Lack of Accessibility: An accessible website ensures that all users,
including those with disabilities, can access the information and
features provided on your website.
* Inconsistent Design: Inconsistent design refers to a website that has
different styles, fonts, or colors on different pages, making it difficult
for users to understand and navigate the website.
* Broken Links: Broken links occur when a hyperlink is no longer
working or leads to a dead page.
* Poor Content: It’s important to keep your content up to date and
fresh.
« Poor Typography: The typography of your website refers to the
typefaces, fonts, and sizes you use to display your content.
* Lack of Accessibility: An accessible website ensures that all users,
including those with disabilities, can access the information and
features provided on your website.
* Inconsistent Design: Inconsistent design refers to a website that has
different styles, fonts, or colors on different pages, making it difficult
for users to understand and navigate the website.
* Broken Links: Broken links occur when a hyperlink is no longer
working or leads to a dead page.
* Poor Content: It’s important to keep your content up to date and
fresh.
Designing Effective Navigation
* It is way that helps users or visitors to find content that they want to
see. It is simply a way of navigating pages, content and information on
website using internet.
* Structure of website navigation is very important as it have a greater
impact on sales, user experience and Search Engine Optimization
(SEO) rankings.
* It is way that helps users or visitors to find content that they want to
see. It is simply a way of navigating pages, content and information on
website using internet.
* Structure of website navigation is very important as it have a greater
impact on sales, user experience and Search Engine Optimization
(SEO) rankings.
Designing Effective Navigation
‘About us | Events | | Media | | Newspaper | | Contact
oming
Mission Past isssue
joard
Leadership ee
Listening
‘About us | Events | | Media | | Newspaper | | Contact
oming
Mission Past isssue
joard
Leadership ee
Listening
Fundamental of Web Page
* Having a thorough understanding of web development basics is
essential for a person to become an expert web developer. Three
technologies that rule the world of web development are
+ HTML
«css
+ JavaScript
* HTML or HyperText Markup Language: HTML is a markup language
and is used to write codes that make up a webpage. HTML uses tags,
which are keywords telling the browser to display and format the
information on the page, such as images, text, and videos.
* Having a thorough understanding of web development basics is
essential for a person to become an expert web developer. Three
technologies that rule the world of web development are
+ HTML
«css
+ JavaScript
* HTML or HyperText Markup Language: HTML is a markup language
and is used to write codes that make up a webpage. HTML uses tags,
which are keywords telling the browser to display and format the
information on the page, such as images, text, and videos.
Fundamental of Web Page
* CSS or Cascading Style Sheets: CSS is a set of rules that describe how
to format text, images, videos, and other elements on a web page.
Used to style web pages and their layout, CSS allows a web page to
look consistent and professional. It is also used to make mobile-
friendly, interactive sites that look great on any device.
+ JavaScript: JavaScript is an object-oriented programming language
designed for web development. Being a general-purpose
programming language, JavaScript is used to write programs that
interact with other computers and web pages, and access codes.
* CSS or Cascading Style Sheets: CSS is a set of rules that describe how
to format text, images, videos, and other elements on a web page.
Used to style web pages and their layout, CSS allows a web page to
look consistent and professional. It is also used to make mobile-
friendly, interactive sites that look great on any device.
+ JavaScript: JavaScript is an object-oriented programming language
designed for web development. Being a general-purpose
programming language, JavaScript is used to write programs that
interact with other computers and web pages, and access codes.
Static and Dynamic Website Design
* Static Website: In Static Websites, Web pages are returned by the
server which are prebuilt source code files built using simple
languages such as HTML, CSS, or JavaScript. There is no processing of
content on the server (according to the user) in Static Websites.
* Dynamic Website: In Dynamic Websites, Web pages are returned by
the server which are processed during runtime means they are not
prebuilt web pages but they are built during runtime according to the
user’s demand with the help of server-side scripting languages such
as PHP, Node.js, ASP.NET and many more supported by the server.
* Static Website: In Static Websites, Web pages are returned by the
server which are prebuilt source code files built using simple
languages such as HTML, CSS, or JavaScript. There is no processing of
content on the server (according to the user) in Static Websites.
* Dynamic Website: In Dynamic Websites, Web pages are returned by
the server which are processed during runtime means they are not
prebuilt web pages but they are built during runtime according to the
user’s demand with the help of server-side scripting languages such
as PHP, Node.js, ASP.NET and many more supported by the server.
Static and Dynamic Website Design
Step1- Web browser
requests static page
Web browser
Request
Response
Step2- Web Server
find page
Web Server
Architecture of Static Website
Step3- Web Server
sends page to
requesting browser
Step1- Web browser
requests static page
Web browser
Request
Response
Step2- Web Server
find page
Web Server
Architecture of Static Website
Step3- Web Server
sends page to
requesting browser
Static and Dynamic Website Design
Store and Share
Storage, logging RIMÉFERSS
and retrieval of data Viewing and Interaction
D with HTML pages
> Text
Database <= <=
Database Web Client/Web
Server Server Server
Architecture of Dynamic Website
Store and Share
Storage, logging RIMÉFERSS
and retrieval of data Viewing and Interaction
D with HTML pages
> Text
Database <= <=
Database Web Client/Web
Server Server Server
Architecture of Dynamic Website
Difference Between Static and Dynamic Websites
Static Website Dynamic Website
Content of Web pages can not be change at Content of Web pages can be changed.
runtime.
No interaction with database possible. Interaction with database is possible.
It is faster to load as compared to dynamic It is slower than static website.
website.
Cheaper Development costs. More Development costs.
No feature of Content Management. Feature of Content Management System.
HTML, CSS, JavaScript is used for developing Server side languages such as PHP, Node.js
the website. are used.
Same content is delivered every time the page Content may change every time the page
is loaded. is loaded.
Static Website Dynamic Website
Content of Web pages can not be change at Content of Web pages can be changed.
runtime.
No interaction with database possible. Interaction with database is possible.
It is faster to load as compared to dynamic It is slower than static website.
website.
Cheaper Development costs. More Development costs.
No feature of Content Management. Feature of Content Management System.
HTML, CSS, JavaScript is used for developing Server side languages such as PHP, Node.js
the website. are used.
Same content is delivered every time the page Content may change every time the page
is loaded. is loaded.
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,179
- Slides 43
- Age 468 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
22 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views