Unit 2

UNIT-2
UNIT 2
HTML AND XHTML
FORMS
 The HTML <form> element defines a form that is used to collect user input:

 Syntax:
<form>
.
form elements
.
</form>
 An HTML form contains form elements.
 Form elements are different types of input elements like text fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element
 The <input> element is the most important form element.

 The <input> element can be displayed in several ways, depending on the type attribute.
 Example of input type= “text”
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 1

UNIT-2
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
RADIO BUTTON:
 Radio buttons are special type of buttons which allows the user to select only
individual option
 Radio buttons are created using the input tag with the type attribute having the value
radio.
 When radio buttons are created, values must be provided with the help of value
attribute.
 All the radio buttons which are created would have same name. This is because the
radio buttons are group elements.
 If one of the radio buttons has to be selected as soon as the web page is loaded,
checked attribute should be used. The value also would be checked.
<html >
<head> <title> Radio </title>
</head>
<body>
<p>
Age Category </p>
<form action = ""> <p>
<label><input type = "radio" name = "age" value = "under20" checked =
"checked" /> 0-19 </label>
<label><input type = "radio" name = "age" value = "20-35" /> 20-35 </label>
<label><input type = "radio" name = "age" value = "36-50" /> 36-50 </label>
<label><input type = "radio" name = "age" value = "over50" /> Over 50 </label>
</p>
</form>
</body>
</html

UNIT-2
CHECKBOX
 Check box is a type of input using which multiple options can be selected.
 Check box can also be created using the <input> tag with the type having the value
“checkbox”.
 During the creation of check box, the value should be provided using the value
attribute.
 All the checkbox which are created would have the same name because they are
group elements.
 If one of the check box have to be selected as soon as the page is loaded, checked
attribute should be used with the value checked.
<html >
<head> <title> Checkboxes </title></head>
<body>
<p>Grocery Checklist </p>
<label> <input type = "checkbox" name = "groceries" value = "milk" checked =
"checked" /> Milk </label>
<label> <input type = "checkbox" name = "groceries" value = "bread" /> Bread
</label>
<label> <input type = "checkbox" name = "groceries" value = "eggs" /> Eggs
</label>
</p>
</form>
</body>
</html>

UNIT-2
SELECT
 Menu items is another type of input that can be created on the page.
 To create the menu item, <select> tag is used.
 To insert the item in the menu, <option> tag is used.
<html >
<head> <title> Menu </title>
</head>
<body>
<p> Grocery Menu - milk, bread, eggs, cheese </p>
With size = 1 (the default) <select name = "groceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</select>
</p>
</form>
</body>
</html>


UNIT-2
TEXTAREA:
 Text area is a type of input using which multiple statements can be entered.
 Text area is created using <textarea> tag.
 Text area should have the name.
 During the creation of text area, it should be mentioned how many sentences can be
entered. This is done using rows attribute.
 Similarly, it should also be mentioned how many characters can be entered in a line.
This is done using
 cols attribute.
 If the value given to rows is exceeded i.e. if users enter sentences more than specified,
the scroll bar automatically appears.
<html >
<head> <title> Textarea </title></head>
<body>
<p>Please provide your employment aspirations </p>
<form action = "handler">
<p><textarea name = "aspirations" rows = "3" cols = "40"> </textarea></p>
</form>
</body>
</html>

UNIT-2
ACTION BUTTON:
 The Reset button clears all of the controls in the form to their initial states.
 The Submit button has two actions:
o First, the form data is encoded and sent to the server
o second, the server is requested to execute the server- resident program

specified in the action attribute of the <form> tag.
The purpose of such a server-resident program is to process the form data and return
some response to the user.
Every form requires a Submit button.
The Submit and Reset buttons are created with the <input> tag.
<html >
<head>
<title> Button </title>
</head>
<body>
<form action = "">
<p>
<input type = "submit" value = "Submit Form"/>
<input type = "reset" value = "Reset Form" />
</p>
</form>

UNIT-2
</body>
</html>
FRAMES
 HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset.
 The window is divided into frames in a similar way the tables are organized: into
rows and columns.
 To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
 There are 3 kinds of values for rows and columns numbers, percentage and asterisk.
When number is used it specifies in pixels. When percentage is given number is
followed by % sign.
Ex:
<frameset rows=“200 , 300, 400”>
<frameset rows= “22%, 33%, 45%”>
<frameset rows= “22%, 33%,* “>
<frameset rows= “33%, 33%, 33% “ cols=“25%, *”>
 Content of a frame is specified as the value of the src attribute in the <frame> tag
<frame src= “example.html”>

UNIT-2
CREATING VERTICAL COLUMNS
<frameset cols="25%,25%,25%,*">
<frame src="frames1.html">
<frame src="frame2.html">
</frameset>
</html>
Frames1.html
<body>
<h1> Frame1</h1>
<p> content of frame 1 </p>
</body>
</html>
Frames2.html
<body>
<h1> Frame2</h1>
</body>
</html>
Frames3.html
<body>
<h1> Frame3</h1>

UNIT-2
</body>
</html>
Frames4.html
<body>
<h1> Frame4</h1>
<p> content of frame 4</p>
</body>
</html>
CREATING HORIZONTAL ROWS
<frameset rows="150,150,150,*">
<frame src="frame_1.html">

UNIT-2
</frameset>
</html>
MIXING COLUMNS AND ROWS
<frameset cols=“30%,30%,*">
<frameset rows=“40%,*">
</frameset> <frame src="frame_3.html">
</frameset> </html>
<frameset cols="30%,30%,*">
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
MIXING ROWS AND COLUMNS
<frameset cols="*,*">
<frameset rows="*,*">

UNIT-2
<frameset cols="*,*">
</frameset>
</frameset>
</frameset>
</html>
SYNTATIC DIFFERENCE HTML AND XHTML
PARAMETERS HTML XHTML

Case Sensitivity Tags and attributes names are case Tags and attributes names must be in
insensitive lowercase
Closing tags Closing tags may be omitted All elements must have closing tag
Quoted Special characters are quoted. Numeric All attribute values must be quoted
attribute values values are rarely quoted. including numbers
Explicit Some attribute values are implicit. All attribute values must be explicitly
attribute values For example: <table border>. stated
A default value for border is assumed
id and name Both id and name attributes are encouraged Use of id is encouraged and use of name
attributes is discouraged
Element nesting Rules against improper nesting of elements All nesting rules are strictly enforced
(for example: a form element cannot contain
another form element) are not enforced.

UNIT-2
CASCADING STYLE SHEET(CSS)
INTRODUCTION
 The CSS1 specification was developed in 1996 by W3C.

 CSS2 was released in 1998 which added many properties and values to CSS1.
 CSS3 has been under development since the late 1990s.
 CSSs provide the means to control and change presentation of HTML documents.
CSS is not technically HTML, but can be embedded in HTML documents.
LEVELS OF STYLE SHEETS
 The three levels of style sheets

1. Inline Level
2. Document Level
3. External Level
 Inline level: Inline style sheets are specified for a specific occurrence of a tag and
apply only to the content of that tag.
 Document Level : Document-level style specifications appear in the document
head section and apply to the whole body of the document.
 External Level: External style sheets are not part of the documents to which they
apply. They are stored separately and are referenced in all documents that use
them. They are written as text files with MIME type text/css.

UNIT-2
<html >
<head>
<title> Our first document </title>
<style>
h2 {font-size: 32pt; font-weight: bold;font-family: 'Times New Roman';}
h3,h4 { font-size: 18pt; font-family: 'Courier New'; font-style:italic;
font-weight:bold}
</style>
</head> <body>
<h1> Twinkle twinkle little star</h1>
<h2> how I wonder </h2>
<h3>what you are ???</h3>
<h4>up above the world so high</h4>
<h5> like a diamond</h5>
<h6> in the sky.</h6>
</body>
</html>

UNIT-2
 Linking an External Style sheet

 A <link> tag is used to specify that the browser is to fetch and use an external
style sheet file through href. The href attribute of <link> is used to specify the
URL of the style sheet document, as in the following example:
 <link rel = "stylesheet" type = "text/css“
 href = “http://www.wherever.org/termpaper.css"> </link>
STYLE SPECIFICATION FORMATS
 The format of a style specification depends on the level of style sheet.

 Inline Style Specification:
Style = “Property1 : Value1; Property2 : Value2; Property3 : Value3;
Property_n : Value_n;”
 Document Style Specification:

<style type = “text/css”>
Rule list
</style>
 Each style rule in a rule list has two parts:

 a selector, which indicates the tag or tags affected by the rule,
 and a list of property–value pairs.
 The list has the same form as the quoted list for inline style sheets, except that it
is delimited by braces rather than double quotes. So, the form of a style rule is as
follows:
Selector { Property1 : Value1; Property2 : Value2; Property3 : Value3;

Property_n : Value_n; }

UNIT-2
SELECTORS FORMS
The selector can have a variety of forms:
1.Simple selector form
2. Class selector
3. Generic selector
4. Id selector
5. Universal selector
6. Pseudo classes
Simple Selector Forms:
 In case of simple selector, a tag is used. If the properties of the tag are changed,
then it reflects at all the places when used in the program. The selector can be any
tag. If the new properties for a tag are not mentioned within the rule list, then the
browser uses default behaviour of a tag.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
p{ font-size: 50pt; color: Red;
}</style>
</head>
<body>
<p>welcome </p>
<p>college </p>
</body>
</html>
Class Selectors:
 Used to allow different occurrences of the same tag to use different style
specifications. A style class has a name, which is attached to the tag’s name with
a period.

UNIT-2
<head>
p.one
{
font-size: 25pt;
color: Red;
}
p.two
{
font-size: 50pt;
color: green;
}
</style>
</head>
<body>
<p class = "one">Web technologies</p>
<p class = "two">Web technologies</p>
</body>
</html>
Generic Selectors:
A generic class can be defined if you want a style to apply to more than one kind of
tag.
A generic class must be named, and the name must begin with a period without a tag
name in its name.
<html>
<head>

UNIT-2

.one
{
color: green;
}
</style>
</head>
<body>
<h1 class = "one">Web technologies</h1>
<h6 class = "one">Web technologies</h6>
</body>
</html>
id Selectors:
An id selector allows the application of a style to one specific element.
<html>
<head>
#one
{
color: purple;
}
#two
{
color: orange;
}

UNIT-2
</style>
</head>
<body>
<p id = "two">Web technologies</p>
<h1 id = "one">Web technologies</h1>
</body>
</html>
Universal Selectors:
The universal selector, denoted by an asterisk (*), applies its style to all elements in a
document. <html>
<head>
*
{
color: purple;
}
</style>
</head>
<body>
<h1>Web technologies</h1>
<p>Web technologies</p>
</body>
</html>
Pseudo Classes

UNIT-2
Pseudo classes are styles that apply when something happens, rather than because the
target element simply exists. Names of pseudo classes begin with colons .
There are 4 pseudo classes: link, visited, hover and focus.
Example:
<head>
input:focus{ color: purple; font-size:100; }
input:hover{ color: violet; font-size:40;}
</style>
</head>
<body>
<form action = " ">
<p>NAME:<input type = "text" /></p>
</body>
</html>
Contextual selector
Use CSS contextual selector when you want to specify an element
within the context of its container (parent) element.
Example:
<!DOCTYPE html>
<head>
<style>
ol>li {color:red; }
</style>
</head>
<body>
<h2>EATABLES</h2>
<ol>

UNIT-2
<li>JUICES</li>
<li>ICE-CREAMS</li>
<ul>
<li>STRAWBERRY</li>
<li>MANGO</li>
</ul>
<li>CHOCOLATES</li>
</ol>
<ol>
<h2>COLORS</h2>
<li>red</li>
<li>blue</li>
<li>green</li>
</ol>
</body>
</html>
PROPERTY VALUE FORMS
 CSS includes 60 different properties in seven categories: fonts, lists, alignment of

text, margins, colours, backgrounds, and borders. Property values can appear in a
variety of forms.
 Keyword property values are used when there are only a few possible values and
they are predefined.
 A number value can be either an integer or a sequence of digits with a decimal
point and can be preceded by a sign (+ or -).
 Length values are specified as number values that are followed immediately by a
two-character abbreviation of a unit name. The possible unit names are px, for
pixels; in, for inches; cm, for centimeters; mm, for millimeters; pt, for points.
 Percentage values are used to provide a measure that is relative to the previously
used measure for a property value. Percentage values are numbers that are
followed immediately by a percent sign (%).Percentage values can be signed. If

UNIT-2
preceded by a plus sign, the percentage is added to the previous value; if

negative, the percentage is subtracted.
 There can be no space between url and the left parenthesis.
 Color property values can be specified as color names, as six-digit hexadecimal
numbers, or in RGB form. RGB form is just the word rgb followed by a
parenthesized list of three numbers that specify the levels of red, green, and blue,
respectively. The RGB values can be given either as decimal numbers between 0
and 255 or as percentages. Hexadecimal numbers must be preceded with pound
signs (#), as in #43AF00.
FONT PROPERTIES
Font Families:
 The font-family property is used to specify a list of font names. The browser uses
the first font in the list that it supports. For example, the property:
font-family: Arial, Helvetica, Futura
 tells the browser to use Arial if it supports that font. If not, it will use Helvetica if
it supports it. If the browser supports neither Arial nor Helvetica, it will use Futura if
it can. If the browser does not support any of the specified fonts, it will use an
alternative of its choosing.
 If a font name has more than one word, the whole name should be delimited by
single quotes, as in the following example:
font-family: ‘Times New Roman’
Font Sizes:
 The font-size property does what its name implies. For example, the following
property specification sets the font size for text to 10 points:
font-size: 10pt
 Many relative font-size values are defined, including xx-small, x-small, small,
medium, large, x-large, and xx-large. In addition, smaller or larger can be specified.
Furthermore, the value can be a percentage relative to the current font size.
Font Variants:
 The default value of the font-variant property is normal, which specifies the usual
character font.

UNIT-2
 This property can be set to small-caps to specify small capital characters. These
characters are all uppercase, but the letters that are normally uppercase are somewhat
larger than those that are normally lowercase.
 Font Styles:
The font-style property is most commonly used to specify italic, as in
font-style: italic
Font Weights:
The font-weight property is used to specify the degree of boldness, as in font-weight:

bold
 Besides bold, the values normal, bolder, and lighter can be specified. Specific
numbers also can be given in multiples of 100 from 100 to 900, where 400 is the
same as normal and 700 is the same as bold
Font Shorthands:
 If more than one font property must be specified, the values can be stated in a list as
the value of the font property.
 The order in which the property values are given in a font value list is important.
 The order must be as follows: The font names must be last, the font size must be
second to last, and the font style, font variant, and font weight, when they are
included, can be in any order but must precede the font size and font names.
font: bold 14pt ‘Times New Roman’
Example:
<html>
<head>
<title>Font Properties</title>
p.one
{
font-family: 'lucida calligraphy';

UNIT-2
font-weight:bold;
font-size:75pt;
color: purple;
}
p.three
{
font: small-caps italic bold 50pt 'times new roman'
}
</style>
</head>
<body>
<p class = "three">Web technologies</p>
</body>
</html>
The text-decoration property

 The text-decoration property is used to specify some special features of the text. The
available values are line-through, overline, underline, and none, which is the
default.
Eg:line-through, overline, underline, none
Letter-spacing – value is any length property value controls amount of space between
characters in text
Eg: letter-spacing: 3px
<html >
<head> <title> Text decoration </title>
p.through {text-decoration: line-through}
p.over {text-decoration: overline}

UNIT-2
p.under {text-decoration: underline}

</style> </head>
<body>
<p class = "through">
Twinkle twinkle little star how i wonder what you are!!!!! </p>
<p class= "over">
<p class = "under">
</body>
</html>
LIST PROPERTIES
 Two presentation details of lists can be specified in XHTML documents: the

shape of the bullets that precede the items in an unordered list and the sequencing
values that precede the items in an ordered list.
 The list- style-type property is used to specify both of these.
 The list-style-type property of an unordered list can be set to disc, circle, square,
or none.
<html>
<head>
<title>CSS Bullets</title>
li.one{list-style-type:disc}
li.two{list-style-type:square}

UNIT-2
li.three{list-style-type:circle}
</style>
</head>
<body>
<h3>South Indian Kings</h3>
<ul>
<li class = "one"> Puneeth Rajkumar</li>
<li class = "two"> Mahesh Babu</li>
<li class = "three"> Suriya</li>
</ul>
</body>
</html>
 Bullets in unordered lists are not limited to discs, squares, and circles. Any image
can be used in a list item bullet. Such a bullet is specified with the list-style-
image property, whose value is specified with the url form.
<html>
<head>
<title>CSS Bullets-Image</title>
li.image {list-style-image: url(bullet.png); font-size:25pt;}
</style>
</head>
<body>
<h1>South Indian Kings</h1>
<ul>
<li class = "image"> Puneeth Rajkumar</li>
<li class = "image"> Mahesh Babu</li>
<li class = "image"> Suriya</li>
</ul>

UNIT-2
</body>
</html>
The following example illustrates the use of different sequence value types in nested
lists:
<html>
<head>
<title> CSS nested lists </title>
ol {list-style-type:upper-roman;}
ol ol {list-style-type:upper-alpha;}
ol ol ol {list-style-type:decimal;}
</style>
</head
<ol>
<li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ol>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ol>
<li>Computer Networks</li>
<ol>
<li>Part 1</li>
<li>Part 2</li>
</ol>

UNIT-2
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>
<ol>
<li>Compiler Design</li>
<li>FLAT</li>
<ol>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ol>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>
</html>
COLOR
 There are three color collections

1. There is a larger set, the Web Palette includes 216 colors.Use hexadecimal color
values of 00, 33, 66, 99, CC, and FF
2. Any one of 16 million different colors due to 24 bit color representation
3. There is a set of 16 colors that are guaranteed to be displayable by all graphical
browsers on all color monitors
black 000000 green 008000
silver C0C0C0 lime 00FF00
gray 808080 olive 808000
white FFFFFF yellow FFFF00
maroon 800000 navy 000080

UNIT-2
red FF0000 blue 0000FF

purple 800080 teal 008080
fuchia FF00FF aqua 00FFFF
Color Properties:
 The color property specifies the foreground color of XHTML elements. For
example, consider the following small table
<style type = “text/css”>
th.red {color: red}
th.orange {color: orange}
</style> …
<table border = "5">
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange">Strawberry</th>
</tr>
</table>
The background-color property specifies the background color of elements.
<style type=“text/css”>
P.standout {font-size:24pt;color;blue; background-color: red”>
</style>
……
<p class=“standout”>
To really make it standout ,use a red background
</p>

UNIT-2
ALIGNMENT OF TEXT
 The HTML <td> align attribute is used to set the horizontal alignment of text
content.
 The text alignment property has the possible values, left (the default), center,
right, or justify.
P {text-align:right}
 Sometimes we want text to flow around another element - the float property. The
float property has the possible values, left, right, and none (the default).
 If we have an element we want on the right, with text flowing on its left, we use
the default text-align value (left) for the text and the right value for float on the
element we want on the right.
<html>
<head> <title> The float property </title>
img {float: right}
</style>
 The first line of the paragraph can indented using text-indent property. This
property takes either a length or a percentage values.
 For example
<style type=“text/css”>
p.Indent {text-indent :0.5in}
</style>
….
<p class=“indent”>
 Now is the time for web programming languages using style sheets
 For all presentations
 </p>
THE BOX MODEL

UNIT-2
 All document elements can have borders with various styles, such as color and
width. The amount of space between the content of an element and its border,
known as padding.
 The space between the border and an adjacent element, known as the margin.
 This model is shown in figure below.
 Every element has a border-style property. It Controls whether the element has a
border and if so, the style of the border.
 The styles of one of the four sides of an element can be set with
 border-style values: none, dotted, dashed, and double border-width – thin,
medium (default), thick, or a length value in pixels.
 Border width can be specified for any of the four borders (e.g., border-top-width)
bordercolor– any color.
 Border color can be specified for any of the four borders (e.g., border-topcolor)
 Margin:
 Margin is space between the border of an element and elements neighbor.
 Padding is the space between the content of an element and border.
 Margin properties are named margin, which applies to all four sides of an
element, margin-left, margin-right, margin-top, margin-bottom.
 Padding properties are named padding, which applies to all four sides padding-
left, padding-right, padding-top, padding-bottom.
BACKGROUND IMAGES

UNIT-2
 The background-image property is used to place an image in the background of

an element.
 Repetition can be controlled. Background image can be replicated to fill the area
of the element. This is known as tiling background-repeat property possible
values: repeat (default), no-repeat, repeat-x, or repeat-y
 background-position property. Possible values: top, center, bottom, left, or right.
Example:
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-color: red;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
THE <span> & <div> Tags

 One problem with the font properties is that they apply to whole elements, which
are often too large.
 new tag to define an element in the content of a larger element - <span>.it makes
a word or a phrase appear different.
 Another tag that is useful for style specifications: <div>. Used to create document
sections (or divisions) for which different style can be specified.
 <div> tag able to apply a style to a section of a document rather than each
paragraph

UNIT-2
 e.g., A section of five paragraphs for which you want some particular style It is
applied with <div> tag
 Example for span tag:
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and
my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
</body>
</html>
Output:
 Example for div tag:

<html>
<body>
<h1>The div element</h1>
<div style="background-color:lightblue">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text in a p element.</p>
</body>
</html>

UNIT-2
Output:
CONFLICT RESOLUTION
 Sometimes on a web page, there can be two different values for the same property on
the same element leading to conflict.
h3 {color: blue;} body h3 {color: red;}
 The browser has to resolve this conflict.
 There can be one or more type of conflict: i.e. when style sheets at 2 or more levels
specify different value for same property on some element.
 This conflict is resolved by providing priority to the different levels of style sheets.
 The inline level gets the highest priority over the document level.
 The document level gets the higher priority over the external level
 But the browser must be able to resolve the conflict in the first example using same
technique.
 There can be several different origins of the specification of property values.
 One of the value may come from a style sheet created by the author or it can be
specified by the user using the options provided by the browser.
 The property values with different origin have different precedence.
 The precedence can also be set for a property by marking it as important.
 p.special {font-style: italic !important; font-size: 14}
 This means that font-style:italic is important [this is known as weight of
specification]
 The process of conflict resolution is a multi-stage sorting process.
 The first step is to gather information about levels of style sheet.
 Next, all the origins and weights are sorted. The following rules are considered:
o Important declarations with user origin

UNIT-2
o Important declarations with author origin

o Normal declarations with author origin
o Normal declarations with user origin

o Any declarations with browser (or other user agent) origin
 If there are other conflicts even after sorting, the next step is sorting by specificity.
Rules are:
o id selectors
o Class and pseudo class selectors
o Contextual selectors (more element type names means that they are
more specific)
o Universal selectors
 If there still conflicts, they are resolved by giving precedence to most recently seen
specification.

Unit 2

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Unit 2

Загружено:

Авторское право:

Доступные форматы

UNIT-2

 The HTML <form> element defines a form that is used to collect user input:

The <input> Element

 The <input> element is the most important form element.

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 1

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 2

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 3

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 4

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 5

o second, the server is requested to execute the server- resident program

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 6

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 7

CREATING VERTICAL COLUMNS

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 8

CREATING HORIZONTAL ROWS

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 9

MIXING COLUMNS AND ROWS

MIXING ROWS AND COLUMNS

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 10

SYNTATIC DIFFERENCE HTML AND XHTML

PARAMETERS HTML XHTML

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 11

CASCADING STYLE SHEET(CSS)

 The CSS1 specification was developed in 1996 by W3C.

LEVELS OF STYLE SHEETS

 The three levels of style sheets

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 12

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 13

 Linking an External Style sheet

STYLE SPECIFICATION FORMATS

 The format of a style specification depends on the level of style sheet.

 Document Style Specification:

 Each style rule in a rule list has two parts:

Selector { Property1 : Value1; Property2 : Value2; Property3 : Value3;

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 14

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 15

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 16

<style type = "text/css">

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 17

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 18

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 19

PROPERTY VALUE FORMS

 CSS includes 60 different properties in seven categories: fonts, lists, alignment of

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 20

preceded by a plus sign, the percentage is added to the previous value; if

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 21

The font-weight property is used to specify the degree of boldness, as in font-weight:

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 22

The text-decoration property

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 23

p.under {text-decoration: underline}

 Two presentation details of lists can be specified in XHTML documents: the

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 24

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 25

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 26

 There are three color collections

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 27

red FF0000 blue 0000FF

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 28

THE BOX MODEL

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 29

K.L.E. SOCIETY’S DEGREE COLLEGE, DEPT OF B.C.A., NAGARBHAVI 30

 The background-image property is used to place an image in the background of