WEB PROGRAMMING

Index: Rounded Corners. Colors. Box Shadows. Introduction to DOM. DOM History and Levels.

Rounded Corners:  Rounded corners are used to add special colored corner to body or text by using the border-radius property.  Rounded corners are used to add special colored corner to body or text by using the border-radius property. #rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }

Value & Description:  Border-radius Use this element for setting four boarder radius property  Border-top-left-radius Use this element for setting the boarder of top left corner  Border-top-right-radius Use this element for setting the boarder of top right corner  Border-bottom-right-radius Use this element for setting the boarder of bottom right corner  Border-bottom-left-radius Use this element for setting the boarder of bottom left corner

Example: <html> <head> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; }

#rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } </style> </head> <body>

<p id = "rcorners1">Rounded corners!</p> <p id = "rcorners2">Rounded corners!</p> </body> </html> Result: Rounded Corners!

Each Corner Property: The border-radius property can have from one to four values. Here are the rules: Four values - border-radius: 15px 50px 30px 5px; First value applies to top-left corner. Second value applies to top-right corner. Third value applies to bottom-right corner. Fourth value applies to bottom-left corner.

Example: <html> <head> <style> #rcorners1 { border-radius: 15px 50px 30px 5px; background: #a44170; padding: 20px; width: 100px; height: 100px; }

#rcorners2 { border-radius: 15px 50px 30px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners3 { border-radius: 15px 50px; background: #a44170; padding: 20px;

width: 100px; height: 100px; } </style> </head> <body> <p id = "rcorners1"></p> <p id = "rcorners2"></p> <p id = "rcorners3"></p> </body> <body>

CSS Colors: Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Color Names: In HTML, a color can be specified by using a color name:

Background Color:  You can set the background color for HTML elements: Example: <h1 style="background-color : Dodger Blue ;"> Hello World</h1>

Text Color: You can set the color of text: Hello World Example: <h1 style="color:Tomato;">Hello World</h1> Border color: You can set the color of borders:

Example: <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> Color Values:  In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. RGB Value:  In HTML, a color can be specified as an RGB value, using this formula.  Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb (255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

HEX Value: In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

HSL Value: In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form: HSL(hue, saturation, lightness) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

RGBA Value: RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba (red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

HSLA Value: An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

BOX SHADOW: #box-shadow defines the shadow of the element. default box-shadow: none; Removes any box-shadow that was applied to the element. box-shadow: 2px 6px; You need at least two values:  the first is the horizontal offset  the second is the vertical offset HELLO WORLD

 The shadow color will be inherited from the text color. box-shadow: 2px 6px red;  You can define a color as the last value.  As with colors, you can use color names, hexadecimal, rgb, hsl... box-shadow: 2px 4px 10px red;

The optional third value defines the blur of the shadow. The color will be diffused across 10px in this example, from opaque to transparent. box-shadow: 2px 4px 10px 4px red; The optional fourth value defines the spread of the shadow. The spread defines how much the shadow should grow: it enhances the shadow.

INTRODUCTION TO THE DOCUMENT OBJECT MODEL The Document Object Model (DOM) is a programming interface for HTML and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated. DOM is a way to represent the webpage in the structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes or Elements using commands or methods provided by Document object.

Structure of DOM: DOM can be thought of as Tree or Forest(more than one tree). The term structure model is sometimes used to describe the tree-like representation of a document. One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.

Properties of DOM:  Window Object: Window Object is at always at top of hierarchy.  Document object: When HTML document is loaded into a window, it becomes a document object.  Form Object: It is represented by form tags.  Link Objects: It is represented by link tags.  Anchor Objects: It is represented by a href tags.  Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons, and checkboxes, etc.

Methods of Document Object: write(“string”): writes the given string on the document. getElementById(): returns the element having the given id value. getElementsByName(): returns all the elements having the given name value. getElementsByTagName(): returns all the elements having the given tag name. getElementsByClassName(): returns all the elements having the given class name.

History of DOM: The history of the Document Object Model is intertwined with the history of the “browser wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer as well as with that of JavaScript and Jscript, the first scripting languages to be widely implemented in the JavaScript engines of web browsers.

Levels of DOM: Level 0: Provides low-level set of interfaces. Level 1: DOM level 1 can be described in two parts: CORE and HTML. CORE provides a low-level interfaces that can be used to represent any structured document. HTML provides high-level interfaces that can be used to represent HTML document. Level 2 : consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL and RANGE.  CORE2: extends functionality of CORE specified by DOM level 1.

VIEWS: views allows programs to dynamically access and manipulate content of document. EVENTS: Events are scripts that is either executed by browser when user reacts to web page. STYLE: allows programs to dynamically access and manipulate content of style sheets. TRAVERSAL: allows programs to dynamically traverse the document. RANGE: allows programs to dynamically identify a range of content in document.

Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.  CORE3: extends functionality of CORE specified by DOM level 2.  LOAD and SAVE: allows program to dynamically load the content of XML document into DOM document and save the DOM Document into XML document by serialization.  VALIDATION: allows program to dynamically update the content and structure of document while ensuring document remains valid.  EVENTS: extends functionality of Events specified by DOM Level 2.  XPATH: XPATH is a path language that can be used to access DOM tree.

WEB PROGRAMMING

More Related Content

Similar to WEB PROGRAMMING

More from sweetysweety8

Recently uploaded

WEB PROGRAMMING