The document provides an overview of web technologies, focusing on HTML, DHTML, and CSS. It explains the features and differences between HTML and DHTML, outlines the types of CSS, and discusses style classes, filters, and transitions in DHTML. Additionally, it includes example programs demonstrating the use of inline, embedded, and external style sheets, as well as various DHTML effects.
The document provides an overview of web technologies, focusing on HTML, DHTML, and CSS. It explains the features and differences between HTML and DHTML, outlines the types of CSS, and discusses style classes, filters, and transitions in DHTML. Additionally, it includes example programs demonstrating the use of inline, embedded, and external style sheets, as well as various DHTML effects.
The document provides an overview of web technologies, focusing on HTML, DHTML, and CSS. It explains the features and differences between HTML and DHTML, outlines the types of CSS, and discusses style classes, filters, and transitions in DHTML. Additionally, it includes example programs demonstrating the use of inline, embedded, and external style sheets, as well as various DHTML effects.
The document provides an overview of web technologies, focusing on HTML, DHTML, and CSS. It explains the features and differences between HTML and DHTML, outlines the types of CSS, and discusses style classes, filters, and transitions in DHTML. Additionally, it includes example programs demonstrating the use of inline, embedded, and external style sheets, as well as various DHTML effects.
Web Technologies UNIT – II 1. Give a brief introduction about HTML and its features. DHTML: DHTML means Dynamic Hyper Text Markup Language and is also known as dynamic HTML. It is combination of different technologies such as HTML, JavaScript and CSS. It is a client-side technology used for developing dynamic web pages. Features: 1. Alteration of Tags and Properties: It allows to make changes in the qualities of HTML tags based on the events that are external to the browser. The events may include mouse click, time, date etc. It can be used for preloading information onto the web page. 2. Real-Time Positioning: It allows to position the objects, images and texts in such a way that they can move all over the webpage. This concept is used for interactive games. 3. Dynamic Fonts: This feature is called Netscape-only because it was developed by Netscape inorder to prevent the problem of designers caused due to the unawareness of the font’s type present on the user’s system. Dynamic font in DHTML allow to encode and download the fonts with the pages such that the page remains the same as it was designed. 4. Data Binding: Microsoft developed the concept of data binding in DHTML inorder to make databases and web sites easily accessible. This feature is also known as Internet-Only feature. =================================================================== 2. Explain briefly differences between HTML and DHTML. HTML DHTML 1. HTML is a mark-up language. 1. DHTML is a cluster of technologies. 2. It comprises of simple html tags. 2. It comprises of html tags, CSS and JavaScript. 3. It is static in nature, hence used to 3. It is dynamic in nature, hence used to create static web pages create dynamic web pages. 4. It doesn’t use any methods, hence 4. It uses events, methods and many more to the content is always static. provide dynamic content. 5. Creation of web pages with html is 5. Creation of web pages with dhtml is easy but less interactive. complex but more interactive. 6. The files of html can be stored using 6. The files of dhtml can be stored using “.html” or “.htm” extension. “.dhtm” extension. 7. It doesn’t need any kind of 7. It needs processing from browser inorder processing from browser. to alter the look and feel. 8. It doesn’t contain server side code. 8. It may contain server side code. 9. It doesn’t require database 9. It requires database connectivity inorder connectivity. to interact with user. 10. Slow performance in client-side 10. Fast performance in client-side technologies. technologies. =================================================================== 3. What is CSS? Explain different types of CSS. Cascading Style Sheets: CSS forms specifies the style rules for organizing elements of a given web document. It extends its features in controlling colors, sizes, fonts, and spaces. CSS is used to determine the style and layout of web pages. Syntax: Selector { property : value; } Types of CSS: 1. Inline style sheet 2. Embedded style sheet 3. External style sheet 1. Inline Style Sheet: It is used to directly apply style sheet rules to any HTML element using style attribute of the relevant tag. Syntax: <selector style = “property : value;”> Program: <html> <head> <title> Inline Style Sheet </title> </head> <body> <h1 style = “background-color:orange; font-size:200%;”> Inline Style Sheet </h1> <p style = “background-color:green; font-size:200%;”> This is an Inline Style Sheet </p> </body> </html> 2. Embedded Style Sheet: It is used to apply Style Sheet rules to a single document. The style rules are included in the header section of the html document by using <style> tag. Syntax: <head> <style> Selector { property : value; } </style> </head> Program: <html> <head> <title> Embedded Style Sheet </title> <style> h1 { background-color:orange; font-size:200%; } p { background-color:green; font-size:200%; } </head> <body> <h1> Embedded Style Sheet </h1> <p> This is an Embedded Style Sheet </p> </body> </html> 3. External Style Sheet: It is used to style multiple set of pages. The CSS rules are written in a single document and saved as “filename.css” extension. This document can be downloaded once and applied to any number of pages, multiple times. The external style sheet can be linked with the web document with a <link> tag. Syntax: <link href = “URL” rel = “filename.css”> “href” specifies the location of the stylesheet and “rel” indicates that the referred document is a stylesheet. Program: External.css h1 { background-color:orange; font-size:200%; } p { background-color:green; font-size:200%; } external.html <html> <head> <title> External Style Sheet </title> <link href = “External.css” rel = “stylesheet”> </head> <body> <h1> External Style Sheet </h1> <p> This is an External Style Sheet </p> </body> </html> =================================================================== 4. Explain style classes with an example program. Style class is an extension of internal style sheet. A class of CSS rules is defined in the <head> section of HTML document. The class selector selects HTML elements with a specific attribute. To select elements with a specific class, a period(.) character is followed by the class name. Syntax: .classname { property : value; } Program: <html> <head> <title> Style Classes </title> <style> .heading { background-color:red; font-family:Algerian; align:center;} .para { background-color:green; font-family: Times New Roman;} </style> </head> <body> <h1 class = “heading” > Style Class </h1> <p class = “para”> This is a style class </p> </body> </html> =================================================================== 5. Explain about different types of filters and transitions in DHTML. Filters and transitions play an important role in creating multimedia effects. They provide dynamic visual effects to web pages. Filters: They are used to apply visual effects to some HTML objects and some other objects like button, div, img, marquee, input, span, table etc. Filters are usually applied to text and graphics. List of filters: 1. fliph( ): Creates horizontal mirror image. 2. flipv( ): Creates vertical mirror image. 3. blur( ): Causes an object to be in a state of motion. 4. wave( ): Generates a wave-like distortion to an object. 5. chroma( ): Causes a color to appear/become transparent. 6. glow( ): Adds a glow effect round an object. 7. grayscale( ): Turns an object to grayscale. 8. invert( ): Creates inverse of an object. 9. mask( ): Creates a transparent mask from the given non-transparent pixels. 10. shadow( ): Creates a shadow behind the object. Syntax: <img src = “URL” width = “pixels” height = “pixels” style = “filter:effect( )”> Ex: <img src = “Tulips.jpg” width = “100” height = “100” style = “filter.glow( )”> Program: <html> <head> <style> img { filter: grayscale(100%);} </style> </head> <body> <h1>The filter Property</h1> <p>Convert the image to grayscale:</p> <img src="butterfly.jpg" alt="Butterfly" width="300" height="300"> </body> </html> Transitions: They are filters that provide effects to the content of the web page. They are responsible for visually changing the control/moving a page from one state to another. They are two types 1. Reveal Transition Filter: This filter is written as RevealTrans. It is applied to multiple visual objects together inorder to show/hide them. Syntax: style = “filter:revealtrans(duration = duration, transition = transitionshape)” 2. Blend Transition Filter: This filter is written as BlendTrans. It is applied to a visual object to fadein/fadeout for certain time limit. Syntax: style = “filter:blendtrans(duration = duration)” Program: <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> </body> </html>
