Overview of Static and Dynamic Web pages, Difference between Static and dynamic web pages

1. OVERVIEW OF STATIC WEBPAGE & STATIC WEBPAGE

2. TEAM
MEMBERS
Maryam Bibi
(Pari)
#006
Muhammad
Junaid Shahid
#016
Aqib Amin #023
Mehwish #04
Sayed Ihtsham
Ahmad
#047

3. Content
• Webpage
– History
– Difference b/w WebPages, Website & Web server
– Search Engine
• HTML And DHTML
– Use of Language
– CSS & JavaScript
• DOM
– How to work
– Why?
• Static WebPages and Dynamic WebPages
– Page Processing
– Use of Dynamic Pages
– Kind of Dynamic Pages

4. Webpage:-
– A Hypertext document connected to World Wide Web.
– It is accessible through the Internet.
– It is accessed by entering a unique URL address.
– It is like an information set, can contain numerous types of
information, which is able to be seen, heard and interactive
with by end-user.
– It is consist of several elements including CSS, Images and
JavaScript.
– File extension for web page is .htm or .html
– Pages generated by a script can end in .cgi, .php, .pl, and other
extensions.
Tip: You can view all of code by viewing the source code of webpage.

5. HISTORY:-
The first web page was created at CERN by Tim
Berners-Lee on August 6, 1991.
Example:
http://www.computer.com/jargon/u/url.html
Protocol Sub-domain Domain and domain suffix Directories Web page

6. Difference b/w web page, web site and
web server
Web Page Web Site Web Server
It is a Hypertext document
displayed by a browser
It is collection of linked
web pages that share a
unique domain
It is a computer hosting one
or more websites.
All web pages available on
the web are reachable
through a unique address
To access a website, type
its domain name in your
browser address bar.
It well send any web page
from the website it is
hosting to any user’s
browser, per user request
https://developer.mozilla.or
g/en-us/docs/Glossary
(Show Glossary page)
developer/mozilla.org
(Show Home page)
My website is not
responding.
My web server is not
responding.
“Hosting” mean that all the web pages and their supporting
files are available on that computer.

7. Web Page:
Website:

8. Search Engine:
“It is a special kind of website that helps users
find web pages from other websites”.
• Difference b/w Search engine & Browser
Search Engine Browser
It is a website that helps
people find web pages
from other websites.
It is a piece of software
that retrieve and displays
web pages.
Google, Bing, Yahoo,
Yandex
Google Chrome, Mozilla
Firefox, Internet Explorer.

9. Search
engine
Browser

10. HTML:
“It is needed to explain the structure of any web pages and
used to develop website”.
HTML stands for “Hyper Text Markup Language”.
DHTML:
“It is a collection of technologies that are used to create
interactive and animated web sites”.
DHTML stands for “Dynamic Hyper Text Markup
Language”.

11. Use of
Language
HTML
HTML CSS
DHTML
HTML CSS JavaScript
Cascading Style Sheet
CSS JavaScript
It is used to control how a document
should appear.
It is used to make a web page dynamic
and interactive. It is a programming and
interpreted Language.

12. Advantages of CSS and JavaScript:
CSS JavaScript
CSS saves time: You can
reuse CSS code
Immediate feedback to the
visitor: Don’t have to wait for
a page reload
Pages Load faster: Don’t
need to write HTML tags
Attributes every time.
Increased interactivity: you
can create interfaces that reacts.
Easy maintenance: To make
Global change, simply change
the Style
Richer interface: You can use
it to include such items as Drag
and Drop

13. DOM
• It is a cross platform and language
independent application programming
interface that treats and HTML document as a
Tree Structure.
• It stands for Document Object Model
(DOM).
• Documents are web pages, Objects are
Elements and Attributes and Model is tree
structure.

14. HTML
Head
Title Meta Data Link
Body
Header Section
Heading Paragraph
Footer
DOM for HTML Document
Why?
Making dynamic pages
Easy to manipulate the data.
Root
Parent
1st child element Last child element
Child
Sibling

15. There are two types of web pages:
Static webpage:-
– “It is a web page that is delivered to the user
exactly as stored on the web server”.
– It is also called “Flat or Stationary web page”.
Dynamic web page:-
– “It is a web page that shows different information
at different point of time”.
Web Pages:

16. Static Vs Dynamic Page Processing
Browser
Browser
Static Web pages
(.htm or .html)
Passed straight to browser
Dynamic Web pages
(.php or .asp)
Server processes scripting
language querying database
and other functions then passes
resulting html page to browser

17. Static Web page
 They are also known as flat or stationary web pages
 They are also used when the information is no more
required to be modified
 Such web pages contain only static information
 They can only read the information , but can’t do any
modification or interact with information.
 Designed and developed by HTML & CSS
 In static web pages, HTML & CSS can use.

18. Dynamic web page
• Dynamic web pages whose content changes
dynamically.
• It accesses content from a database or Content
Management System(CMS).
• Content is generated quickly and changes
regularly.
• The main objective to make the page is
dynamic, dynamic mean the content of
webpage get changed as per user requirement.
• Designed and developed by DHTML

19. Use of dynamic pages
• Offers highly personalized and customized visitor
options.
• Database access improves the personalized
experience (as opposed to using just client side
cookies)
• Scripts can read in data sources and display it
differently depending on how it is run.
• Can create the illusion of being updated regularly
using time and date sensitive routines (or even
randomizers) to display prewritten text.

20. Dynamic Web pages are of two types.
Client side scripting:
“Scripts that runs within web browser without interaction
with a web server”
Example: Google.com, Facebook.com and Yahoo use Java
Script .
Server side Scripting:
“Scripts that run at server end and return the HTML document
as the Output.”
Example: Google.com (C, C++, Go, Java, Python,Php)
Facebook.com(Hack, Php, Python, C++,Erlang)
Yahoo (PHP)
Dynamic Web page:

21. Client Side Scripting Language
• JavaScript(.js)
• VbScript(.vbs, .vbe)
• Jscript(.js)

22. Server Side Scripting Language
• ASP (.asp)
• Go (.go)
• Lasso (.lasso)
• Perl (.pl)
• PHP (.php)
• Python (.py) Like (Pyramid, Flask)
• Ruby (.rb)

23. Comparison of Static and Dynamic web
pages(Advantages & Disadvantages)
Static Web pages Dynamic Web pages
Easy to develop Slower to develop
Cheap to develop More Expensive to develop
Cheap to host More cost to host
Required web development expertise
to update
Much easier to update
Not useful for user New content brings people back
Content can get inactive Can work as a system to allow staff
or users to collaborate
Much more Functional webpage

24. Thanks of:
Mam.
Wardah
Akram
The Style
of Nature
The
Natural
Flower