Web Pages

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

1. WEB PAGES OVERVIEW OF STATIC WEBPAGE & STATIC WEBPAGE

2. 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

3. 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.

4. 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

5. 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.org/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 .

6. Web Page: Website:

7. 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.

8. Search engine Browser

9. 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 ”.

10. 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.

11. 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

12. 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.

13. DOM for HTML Document Why? Making dynamic pages Easy to manipulate the data . Root Parent 1 st child element La st child element Child Sibling

14. 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:

15. 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

16. 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.

17. 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

18. 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 .

19. 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:

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

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

22. 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 use ful 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

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