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;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
padding: 20px;

width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></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