An Over View Of Dynamic Web Pages Section1

 Section 1 Section2 Section 3 Section 4 Section 5 Section 6

Unit 2

An Over View Of Dynamic Web Pages & Dynamic Web Page: An over view of dynamic web pages – technologies: Introduction to Dynamic HTML programing - Cascading style sheets (CSS) – types and advantages of CSS – CSS basic syntax and structure - Changing Text and Attributes - Dynamically changing style - Text Graphics and placements - Creating multimedia effects with filters and Transactions.

An overview of dynamic web pages

There are two basic methods of web design: static and dynamic web pages. Users access static web pages, which present the same content every time they are viewed. On the other hand, dynamic webpages create content instantly in response to user input and present customized or updated information.

What are Static Web Pages?

Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS, etc. For static web pages when a server receives a request for a web page, then the server sends the response to the client without doing any additional process. These web pages are seen through a web browser. In static web pages, Pages will remain the same until someone changes it manually. 
 Static Websites

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:

1.          Static websites are the simplest kind of website that you can build.

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

3.          Static websites are written with the help of HTML and CSS.

4.          The only form of interactively on a static website is hyperlink.

5.          Static website can be used for the information that doesn't change substantially over months or even years.

6.          Static pages are easy and simple to understand, secure, less prone to technology errors and breakdown and easily visible by search engines.

7.          HTML was the first tool with which people had begun to create static web pages.

8.          Static websites provide flexibility.

9.          Light weight.

10. Static websites perform faster and well than dynamic ones.

Advantages of Static Websites:

1.          Static websites are highly cost-effective for publishing.( giving the best possible profit or results in comparison with the money that is spent)

2.          They require less coding and technical knowledge.

3.          Static websites are easier to make.

4.          Static websites are quick to develop.

5.          Static websites are cheap to host.

6.          A static website contains data which is immutable.(unchanging over time or unable to be changed)

7.          Static websites are beginner level. A programmer with knowledge of HTML, CSS, and JavaScript can build static websites.

8.          It's easy to create and host online.(a service that stores a website's files (like text, images, and code) on a server, making them accessible to anyone on the internet)

9.          Static websites provide security.

Disadvantages of Static Websites:

1.          Requires web development expertise to update site.

2.          Site not as useful for the user.

3.          Content can get stagnant.(outdated, irrelevant to current trends, or repetitive over time)

4.          Send the same response for every request.

5.          Dynamic functionality works only on the client side.

Conclusion:

In real problem static website are really useful. Most developer prefer static website as they are beginner level and interactive.

What are Dynamic Web Pages?

Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc. In dynamic web pages, the Content of pages is different for different visitors. It takes more time to load than the static web page. Dynamic web pages are used where the information is changed frequently, for example, stock prices, weather information, etc. (Computer-Generated Images, Common Gateway Interface, Asynchronous JavaScript and XML, Active Server Pages, Active Server Pages Network Enabled Technologies, JavaServer Pages)
Dynamic Websites

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. (Hypertext Preprocessor, Active Server Pages, Active Server Pages Network Enabled Technologies, JavaServer Pages)

Features of dynamic webpage:

1.          These websites are very flexible.

2.          In these websites the content can be quickly changed on the user's computer without new page request to the web browser.

3.          In these websites the owner have the ability to simply update and add new content to the site?

4.          These websites are featured with content management system, e-commerce system and intranet or extranet facilities.

5.          Most of the dynamic web content is assembled on the web using server-scripting languages.

Advantages of dynamic webpage:

1.          It provides more functional websites.

2.          It is very easy to update.

3.          It helps in the search engines because new content brings people back to the site.

4.          These are interactive websites because these can be customized.

5.          These websites can work as a system to allow staff or users to collaborate.

6.          It's easy to modify or update data.

7.          It provides a user-friendly interactive interface for users.

8.          Proves smooth navigation.

9.          Provide interactive user interface

10. It provides a better user experience.

11. It provides real-time data.

Disadvantages of dynamic WebPages:

1.          These types of websites are complex.

2.          These are more expensive to develop.

3.          Hosting of these websites is also costlier.

4.          It requires a rapid, high-end web server.

5.          High production costs.

6.          Slow to load content.

7.          Client will require a skilled programmer to build a dynamic website.

8.          Hosting a website is costly as compared to a dynamic website.

9.          Low speed compared to a static website

Application of Dynamic Website:

Dynamic websites are applied in e-commerce, social media, news portals, educational platforms, and corporate sites to provide personalized, real-time content, interactivity, and easy updates. Applications include online stores like Amazon, social networks like Facebook, content-rich news sites like CNN, and learning platforms like Khan Academy, which all leverage dynamic features to cater to individual users. 

Examples of dynamic website applications

E-commerce: Websites like Amazon and eBay use dynamic features to show real-time product availability, personalized recommendations, and user reviews.

Social Media: Platforms like Facebook and Instagram are inherently dynamic, delivering user-specific feeds and facilitating interactions like comments and likes.

News and Media: CNN and BBC update their content in real time and often provide personalized news feeds to users based on their interests.

Education: Coursera and Khan Academy offer personalized learning paths, interactive quizzes, and progress tracking tailored to each student.

Corporate and Business: Many businesses use dynamic websites to manage large amounts of content, interact with customers through contact forms or chat, and provide up-to-date company information.

Other examples: Other applications include blogs, forums, classified sites, and web applications for collaboration or management

Here is a list of application where we use dynamic website over static website 

Online booking system:

·    E-commerce website.

·    Voting or polls,

·    Forums

·    E-newsletter.

Real-life application:

Here is a list of application where we use dynamic website in real world.

·    Facebook

·    Twitter

·    LinkedIn

·    Online booking website.

·    Social media 

Conclusion:

In real world Dynamic Website are really useful. Dynamic website is easy to use and provide many features. As a result, many users prefer to use dynamic website.

Difference between Static and Dynamic Web Pages

Static Web Page	Dynamic Web Page
In static web pages, Pages will remain same until someone changes it manually.	In dynamic web pages, Content of pages is different for different visitors.
Static Web Pages are simple in terms of complexity.	Dynamic web pages are complicated.
In static web pages, Information is change rarely.	In dynamic web page, Information is change frequently.
Static Web Page takes less time for loading than dynamic web page.	Dynamic web page takes more time for loading.
In Static Web Pages, database is not used.	In dynamic web pages, database is used.
Static web pages are written in languages such as: HTML, JavaScript, CSS, etc.	Dynamic web pages are written in languages such as: CGI, AJAX, ASP, ASP.NET, etc.
Static web pages do not contain any application program.	Dynamic web pages contain application program for different services.
Static web pages require less work and cost in designing them.	Dynamic web pages require comparatively more work and cost in designing them.

 

Conclusion

Selecting the best approach that depends on the objectives of your website requires a major understanding of the differences between static and dynamic web pages. Static pages are easier to use and load more quickly, while dynamic pages are more flexible and interactive, which makes them better suited for complicated, user-driven websites.

Technologies

Introduction to Dynamic HTML programing

DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.

DHTML combines HTML, CSS, JavaScript, and the Document Object Model (DOM) to create dynamic content.

It uses the Dynamic Object Model to modify settings, properties, and methods.

Scripting is also an essential component of DHTML, which was part of earlier computing trends.

It is supported by some versions of Netscape Navigator and Internet Explorer 4.0 and higher.
HTML 

HTML stands for Hypertext Markup Language and it is a client-side markup language.

It is used to build the block of web pages. 

HTML stands for Hypertext Markup Language.

It is a standard language used to create and structure content on the web.

It defines the structure of a web page by using elements (tags)                                                         like <html>, <head>, <body>, <div>, <p>, <a>, <img>, etc.

Tags usually come in pairs: an opening tag and a closing tag (e.g. <p> … </p>).

·         HTML documents are plain-text files saved with an .html extension.

·         Browsers read these documents, interpret the markup (tags and attributes), and render the formatted content on your screen.

·         An HTML document has a tree-like structure (DOM — Document Object Model) where elements nest inside one another.

·         HTML works closely with CSS (for styling/layout) and JavaScript (for interactivity/behavior). Browsers parse HTML, build a DOM, and then apply CSS and execute JavaScript to render pages.

JavaScript 

It is a client-side Scripting language.

JavaScript is supported by most of browsers, and also has cookie collection to determine the user's needs. 

JavaScript is a programming language used to create dynamic content for websites.

It is a lightweight, cross-platform, and single-threaded programming language.

It's an interpreted language that executes code line by line, providing more flexibility.

Client Side

On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.

Server Side

On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

CSS

The abbreviation of CSS is Cascading Style Sheet.

It helps in the styling of the web pages and helps in designing of the pages.

The CSS rules for DHTML will be modified at different levels using JS with event handlers which add a significant amount of dynamism with very little code. 

It is a stylesheet language used to style and enhance website presentation.

CSS is one of the three main components of a webpage, along with HTML and JavaScript.

·         HTML adds Structure to a web page.

·         CSS adds the style and makes it visually appealing.

·         JavaScript adds interactivity and logic to the page.

CSS was released (in 1996), 3 years after HTML (in 1993). (HTML was first created by Tim Berners-Lee in 1991) The main idea behind its use is that it allows the separation of content (HTML) from presentation (CSS). This makes websites easier to maintain and more flexible.(JavaScript was invented by Brendan Eich in 1995.)

DOM

It is known as a Document Object Model which acts as the weakest link in it. The only defect in it is that most of the browsers do not support DOM. It is a way to manipulate the static content. 

The HTML DOM (Document Object Model) is a structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript. It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.

• The HTML Document Object Model (DOM) is a tree structure, where each HTML tag becomes a node in the hierarchy.

• At the top, the <html> tag is the root element, containing both <head> and<body> as child elements.

• These in turn have their own children, such as <title>, <div>, and nested elements like <h1>, <p>,<ul>, and<li>.

• Elements that contain other elements are labeled as container elements, while elements that do not are simply child elements.

• This hierarchy allows developers to navigate and manipulate web page content using JavaScript by traversing from parent to child and vice versa.

DHTML is not a technology; rather, it is the combination of three different technologies, client-side scripting (JavaScript or VBScript), cascading style sheets and document object model.

Note

Many times DHTML is confused with being a language like HTML but it is not. It must be kept in mind that it is an interface or browsers enhancement feature which makes it possible to access the object model through Javascript language and hence make the webpage more interactive. 

Example 2:

Dynamic Style Changes

DHTML can also be used to change styles dynamically.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>DHTML Style Change Example</title>

    <style>

        #colorBox {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

    <script>

        function changeColor() {

            document.getElementById(‘colorBox’).style.backgroundColor = ‘green’;

        }

    </script>

</head>

<body>

    <h1>Introduction to DHTML</h1>

    <div id=”colorBox”></div>

    <button onclick=”changeColor()”>Change Color</button>

</body>

</html>

In this example:

HTML: Defines a div element and a button.

CSS: Styles the div element.

JavaScript: Changes the background color of the div element when the button is clicked.

DOM: Enables the dynamic interaction.

Key Features:

1.          Tags and their properties can be changed using DHTML.

2.          It is used for real-time positioning. (Provide continuous, location-based information that is crucial for applications in logistics, healthcare, construction, and more) (Logistics is the management of the flow of goods, services, and information from the point of origin to the point of consumption)

3.          Dynamic fonts can be generated using DHTML.

4.          It is also used for data binding.

5.          It makes a webpage dynamic and be used to create animations, games, applications along with providing new ways of navigating through websites.

6.          The functionality of a webpage is enhanced due to the usage of low-bandwidth effect by DHTML.

7.          DHTML also facilitates the use of methods, events, properties, and codes.

Why Use DHTML? 

DHTML makes a webpage dynamic but Javascript also does, the question arises that what different does DHTML do? So, the answer is that DHTML has the ability to change webpages look, content and style once the document has loaded on our demand without changing or deleting everything already existing on the browser's webpage. DHTML can change the content of a webpage on demand without the browser having to erase everything else, i.e. being able to alter changes on a webpage even after the document has completely loaded. 

Advantages: 

1.          Sizes of the files are compact in compared to other interactional media like Flash or Shockwave, and it downloads faster.

2.          It is supported by big browser manufacturers like Microsoft and Netscape.

3.          Highly flexible and easy to make changes.

4.          Viewer requires no extra plug-ins for browsing through the webpage that uses DHTML, they do not need any extra requirements or special software to view it.

5.          User time is saved by sending a smaller number of requests to the server. As it is possible to modify and replace elements even after a page is loaded, it is not required to create separate pages for changing styles which in turn saves time in building pages and also reduces the number of requests that are sent to the server.

6.          It has more advanced functionality than a static HTML. it is capable of holding more content on the web page at the same time.

Disadvantages: 

1.          It is not supported by all the browsers. It is supported only by recent browsers such as Netscape 6, IE 5.5, and Opera 5 like browsers.

2.          Learning of DHTML requires a lot of pre-requisites languages such as HTML, CSS, JS, etc should be known to the designer before starting with DHTML which is a long and time-consuming in itself.

3.          Implementation of different browsers are different. So if it worked in one browser, it might not necessarily work the same way in another browser.

4.          Even after being great with functionality, DHTML requires a few tools and utilities that are some expensive. For example, the DHTML text editor, Dreamweaver. Along with it the improvement cost of transferring from HTML to DHTML makes cost rise much higher.

Difference between HTML and DHTML: 

HTML	DHTML
HTML is a markup language	DHTML is a collection of technologies
HTML is used to create static WebPages	DHTML is capable of creating dynamic WebPages.
But HTML is not used create animations and dynamic menus	DHTML is used to create animations and dynamic menus
HTML sites are slow upon client-side technologies	DHTML sites are comparatively faster
Web pages created using HTML are rather simple and have no styling as it uses only one language	DHTML uses HTML, CSS, and JavaScript which results in a much better and way more presentable webpage.
HTML cannot be used as server-side code	DHTML used as server-side code.
HTML doesn’t needs database connectivity	DHTML needs database connectivity
Files in HTML are stored using .htm or .html extension	DHTML uses. dhtm extension
HTML requires no processing from the browser	DHTML requires processing from the browser