HTML XML JavaScript
HTML XML JavaScript
<head>
<title>First html</title>
</head>
<body>
Welcome to any web page
</body>
</html>
Step2: Save the html document any name having. Html as the
extension.
Step3: To execute the html document to open it in any Browser. To
html language is an error free language. That is it will not display
any error massage on the Browser. Even it the html document
contain any error.
Html comments:
Comments are used to make the code name readable
or they are used to explain the code.
HTML comments begins with <!--line one comment-->
EX :<!--line one comment -- >
<!--line one comment
line two comment
.
.
.
N no. of line comments -- >
Attributes:
1. Attributes are used to provide additional information about the
html elements tags.
2. The attributes must be specified in starting tags.
3. The attributes always come in pears.
attribute name = attribute value
4. The attribute value can be enclosed with in single codes are
double codes.
5. Every html tag can contain attribute.
Note: Specifying the attributes for a tag is optional.
Body tag attributes:
Page | 2
<del>Strike</del>
<ins>: This tag is use to Insert a line below the text.
<ins>underline</ins>
<u>: This tag is use to underline a text.
<u>underline</u>
<sup>: This tag is use to display a text as a Superscripted. That the
text will be displayed above the normal text.
a<sup>2</sup>+b<sup>2</sup>
<sub>: This tag is use to display a text as a Subscripted. That is the
text will be displayed below the normal text.
H<sub>2</sub>SO<sub>4</sub>
<big>: This tag is use display a text solidly Bigger then the normal
text.
<big>text</big>
<small>: This tag is to display a text solidly Smaller then the
normal text.
<small>text</small>
<center>: This tag is to display a text in the Center of the
webpage(html document).
<center>Welcome</center>
Heading tags: These tags are used to perform font changes display
the text in boldface and the heading tags by default align the text
tag left side. These are six levels of heading tags. H1, H2, H3, H4, H5
and H6. H1 is the biggest in heading and H6 is the biggest in
heading and H6 is the smallest heading.
We can change the alignment of the headings by using
align attributes.
Ex: align = left |center |right
<H1 align = left>Heading1</H1>
<H2 align = left>Heading2</H2>
<H3 align = center>Heading3</H3>
<H4 align = center>Heading4</H4>
<H5 align = right>Heading5</H5>
<H6 align = right>Heading6</H6>
<pre>:(preformatted text)
This tag is used to display a text in preformatted manner. The
browser preserve all the white spaces as it is.
Page | 4
Ex:<pre>
To,
The manager,
HDFC bank,
Nellore,
Sub: Regarding loan to buy a house.
Respected sir/madam,
I
.
Thanking you.
</pre>
<br>: This tag is used to stop displayed in the content at that point
and displayed content in a new line. The <br> will started new line
where ever it is specified.
Note:<Br> is an empty tag that is <BR> tag doesnt content any
element content.
Ex:
<body>
line one</br>
line two</br>
line three
</body>
<p>: This tag is used to display a paragraph. The <p> will add
paragraph break (inserts an empty line before and after the
paragraph). The paragraphs are is by default to left side. We can
change the alignment by using the alignment attribute.
Ex: align = left |center |right
<p align = left>this is a paragraph</p>
<p align = center>This is a paragraph</p>
<p align = right>This is a paragraph</p>
Page | 5
3. Definition List
1) Ordered List: A list is said to be an ordered list if the items are
displayed by using either by digits or by Alphabets or Roman
numbers. By default digits are used to display order list. We can
change the display by using type attribute.
Type = 1 | a | A | i |I|
Ex: <ol type I>
<li>Hyderabad</li>
<li>Mumbai</li>
<li>Chennai</li>
</ol>
2) Unordered List: If a list is displayed with the help of some
graphical symbols then it is called as unordered list. We can
change the display by using Type attribute.
Type = disc | square | circle
Ex:
<Ul>
<li>Hyderabad</li>
<li>Mumbai</li>
<li>Chennai</li>
</Ul>
3) Definition List: A list is said to be a definition list if we provide
a definition or description to every item.
Ex:
<dl>
<dt>Hyderabad</dt>
<dd>Biriyani</dd>
<dt>Chennai</dt>
<dd>somber</dd>
<dt>Mumbai</dt>
<dd>bomb</dd>
</dl>
We can place a list inside another list that is nesting of lists is
possible.
Ex:
<Ul>
<li>Hyderabad</li>
<ol>
Page | 7
<li>Ameerpet</li>
<li>Hi-tech</li>
<li>Birla temple</li>
</ol>
<li>Mumbai</li>
<li>Chennai</li>
</Ul>
<Font>: This tag can be used to apply font changes, change the
text color or face or size.
Attributes of <font>:
1. Color: This attribute specifies the color of the text to be
displayed.
Ex: <font color = red> Hello </font>
2.
Note: Font tag is dependent tag. That is <font> will not apply any
changes without the attributes.
<img> :(image) this tag is used to display and img on the html
document.
Attributes of<img>:
1. Src(source): This attribute specifies of the URL(Address of the
image).
2. Border: This attribute specifies of the thickness of the border
around the image. By default thickness is zero pixels.
3. Width: This attribute specifies of the width of the an image to
be displayed in a html document.
4. Height: This attribute specifies of the Height of the image to
be displayed in a html document.
Page | 8
Page | 9
<td>seven</td>
<td>eight</td></tr>
</table>
</body>
<html>
<Marquee>: This tag use to display a scrolling text on a web page.
Attributes of <Marquee>:
1. Behavior: This attribute specifies the behavior of the scrolling
text in a web page.
Ex:
Behavior = scroll | slide | alternate(the default
behavior is scroll)
2. Direction: This attribute specifies the direction in which the
text will be scrolled. By default the text scrolls towards left side.
3. Bgcolor: This attribute will display bgcolor to the scrolling text.
4. Scroll amount: This attribute specifies the speed of the
scrolling text.
Ex:
<marquee behavior = scroll direction = right
bgcolor = red scrollamount = 45>flash
news</marquee>
<a>: This tag is use to create link b/w the html documents are any
other web resource.
Attributes of <a>:
1. Href(hyperlinking reference): This attribute specifies the
URL(address) of the resource to which the hyperlink as the link
reference.
2. Target: This attribute will specifies were to open the linked
document.
Target = _self | _blank (_under scor) the default value
_self.
3. Name: This attribute is used to create named Anchor. The
named anchor can be used to jump from one location to
another location with in a html document.
Ex: <a href = image.html target = _blank>click
here</a>
Page | 11
Page | 13
<Select>: This tag will provide the user a list of options form which
the user can select one option.
<Text area>: This tag allows the user to enter the data in multiple
lines the size of the text area can be specified by using rows and cols
attribute.
Ex:
<html>
<head>
<title>Registration</title>
</head>
<body bgcolor = green>
<form method = post name =
registrationform>username<input type = text name
= user size = 30/><br/>
Password<input type = password name = pass size =
30/><br/>
Confirm password<input type = password name =
cpass size = 30/><br/>
Gender<input type = radio name = sex/>
Male<input type = radio name = sex/>
Female<input type = radio name = sex/><br/>
Qualification
<select>
<option>BTech</option>
<option>MCA</option>
<option>BSc</option>
<select><br/>
Hobbies
<input type =check box>programming
<input type =check box>browsing
<input type =check box>reading<br/>
Comments
<textarea rows = 5 cols = 30>Enter your
comments</textarea><br/>
<input type = submit value = register/>
<input type = reset value = clear/>
Page | 14
</form>
</body>
</html>
Special character in HTML:
This are those character which have special
meaning with the browser all these characters are not available in
keyboard.
1. 4 & lt; (4 < 5)
2. 4 & gt; (4 > 5)
3. ®
4. ©
5. ™
6. Parsnd;
7. &
8. " inet solve & quot; inet solve
9. &a pos; solutions & apos; solutions
Xml: Its transfer Extensible Markup Language. It is a markup
language that provide environment to create cross platform
compactable file. Cross platform compatibility means it is not
specific to any operating system, any H/W, any S/W and etc.
. Xml is a standard given by w3c. To create tag based data.
. Xml is called as Mother language using which we can create
other markup languages. Like wml, vml, and mml etc.
. Xml is use to store and describe the data. Data means meaningful
and understandable information. Data can be stored in a text file or
database or xml file.
Text file: The text file can content formatted and unformatted data.
. It doesnt show any hierarchy among the data.
. It doesnt show any relationships b/w the values.
. It doesnt provide any tools to check or verify the correctness of the
data.
. The text files are some time depended on the output.
Database: The database can content formatted data in the form of
tables.
. In a database we require a separate of a query language to operate
on the data.
Page | 15
XML
Uses of xml:
. Xml can be use to store the data permanently similar to a
database.
. Xml can be use to create other Markup language.
Page | 16
Declaring an element:
1. Declaring an element which can be empty.
Syn :<! ELEMENT element-name EMPTY>
Ex :<! ELEMENT address EMPTY>
2. Declaring an element which contains PCDATA.
Syn: <! ELEMENT element-name (# PCDATA)>
Ex: <! ELEMENT roll no (#PCDATA)>
3. Declaring an element which can contain any data
Syn: <! ELEMENT element-name ANY>
EX: <! ELEMENT name ANY>
4. Declaring an element which contains sequence of child
elements.
Syn: <! ELEMENT element-name (child-name1, childname2.)>
Ex: <! ELEMENT student (roll no, name, mobile no, add)>
5. Declaring an element which must occur exactly one time.
Syn: <! ELEMENT element-name (child-name)>
Ex: <! ELEMENT student (roll no)>
6. Declaring an element which can occur zero or more times.
Sys: <! ELEMENT element-name (child-name*)>
Ex: <! ELEMENT student (mobile no*)>
7. Declaring an element which must occur at least one time (one
or more times).
Sys: <! ELEMENT element-name (child-name+)>
Ex: <! ELEMENT student (mobile no+>
Page | 19
Declaring attributes:
1. Declaring n attribute with a default value.
Sys :<! ATTLIST element-name attribute-name attribute-type
default>
Ex :<! ATTLIST student course cDATA xml>
2. Declaring an attribute which is mandatory.
Sys :<! ATTLIST element-name attribute-name attribute-type
#REAUIDED>
Ex :<! ATTLIST student course cDATA #REAUIDED>
3. Declaring an attribute which is optional.
Sys :<! ATTLIST element-name attribute-name attribute-type
#IMPLIED>
Ex :<! ATTLIST student course cDATA #IMPLIED>
4. Declaring an attribute whose value is fixed.
Sys :<! ATTLIST element-name attribute-name attribute-type
#FIXED value>
Ex :<! ATTLIST student fee cDATA #FIXED 3500>
5. Declaring an attribute containing an enumerated list.
Sys :<! ATTLIST element-name attribute-name (en-value1, envalue2.)>
Ex :<! ATTLIST student branch (cse |it | eee |ese)>
Declaring an entity:
1. Declaring an internal entity.
Sys :<! ENTITY entity-name entity-value>
2. Declaring an external entity.
Sys :<! ENTITY entity-name SYSTEM URL>
Rules to be prepared for writing a xml document which stores
student information.
I. Create a tag by the name institute which should be the root
tag.
Page | 20
II.
III.
IV.
V.
VI.
VII.
VIII.
IX.
X.
XI.
XML PARSER:
To validate a xml document we required a xml parser. Xml
parser is a utility tool using which we can check where a xml
document well format or not and valid or not. Xml parser can even
be used for processing the xml documents.
Ex:
SAX (Simple API XML Process)
DOM (Document Object Model)
Document Object model for Java (JDOM)
IDE:
Its transfer Integrated Development Environment. It is used
to speed of the development of an application. Where reduces the
development time.
Ex:
XML SPY
STYLUS STUDIO
Procedure to open XML SPY IDE: Click on start on
program sales Alcove
Click on xml spy.
select all
Page | 21
XML SCHEMA:
1. XML SCHEMA is used to define structure of the XML document.
2. XML SCHEMA is a XML based alternative to DTD.
3. XML SCHEMA is successor to XML DTD.
4. XML SCHEMA is written in XML.
5. XML SCHEMA provides more Richer and powerful functionality.
6. XML SCHEMA supports data types and data types.
7. We can create our own user defined data types based on
predefined data types.
8. XML SCHEMA supports name spaces.
In XML schema we have two types of elements.
A. Simple element
Page | 23
B. Complex element
1. Simple element:
An element is said to be simple if it contains only
text. It should
not contain some other element or attributes.
Syn:
<xs: element name = xxx type = yyy/>
Here xxx represent the name of the element and yyy represent
the type of the data.
Ex:
<xs: element name = mobileno type = xs:
integer/>
<xs: element name = xxx type = yyy default =
value/>
<xs: element name = xxx type = yyy fixed =
value/>
2. Complex element:
An element is said to be complex if it contains
some child
element and attributes or attributes.
Ex:
<xs: element name = xxx>
<xs: complexType>
<xs: sequence>
<xs: element name = x1 type =
y1/>
<xs: element name = x2 type =
y2/>
</xs: sequence>
</xs: complexType>
</xs: element>
Here, xxx represents the name of the complex element name x1 and
x2 represent name of the child elements any y1 and y2 represents
the type of x1 and x2 respectively. Here, x1 and x2 order cant be
changed x1 must be followed by the x2 only.
Page | 24
Order Indicators:
1. Sequence: This indicator will indicate that specifying all the
child elements is mandatory and the order is fixed.
2. All: This indicator will indicate that specifies the child elements
are mandatory but order of the elements can be changed.
3. Choices: These indicators will indicate that we can use
specifying that we can use any one of the child element.
Occurrence indictors:
1. Minoccurs: This indicator will specify the minimum no. of times
a tag or element must occur.
2. Maxoccurs: This indicator will specify the maximum no. of
times an element can (optional) occurs.
Attributes:
Syn:
<xs: attribute name = xxx Type = yyy />
<xs: attribute name = courseType = xs: stringdefault
= xml/>
<xs: attribute name = courseType = xs: stringdefault
=xml/>
<xs: attribute name = course Type = xs: string
fixed=java/>
<xs: attribute name = course Type = xs: string
use=optional/required/>
</xs:restriction>
</xs: SimpleType>
</xs: element>
If we use minInclusive and maxInclusive the extremes values
will be included into the range.
Instead of minInclusive and maxExclusive we can use
minExclusive and maxExclusive where the Extreme values will
not be Included.
2. Restrictions on List of values:
Ex:
<xs: element name = branch>
<xs: simpleType>
<xs: restriction base = xs: string>
<xs: enumeration value = cse/>
<xs: enumeration value = it/>
<xs: enumeration value = mca/>
<xs: enumeration value = ece/>
</xs: restriction>
</xs: simpleType>
</xs: element>
3. Restrictions on series of values:
<xs: element name = xxx>
<xs: simpleType>
<xs: restriction base = yyy>
<xs: pattern value = ([a-z]+)/>
</xs: restriction>
</xs: simpleType>
</xs: element>
The above pattern allow the user to enter the data of
length three
characters, where every character lowercase alphabet.
Note: Every pair of [] represents one character.
<xs: pattern value = [abcd]/>
The above syntax allow to enter a data of length one character
where that character can be either a or b or c and d.
Page | 26
39.
</xs: complexType>
40.
</xs: element>
41.
</xs: sequence>
42.
<xs: attribute name =course use = required>
43.
<xs: simpleType>
44.
<xs: restriction base = xs: string>
45.
<xs: enumeration value = html/>
46.
<xs: enumeration value = xml/>
47.
<xs: enumeration value = java/>
48.
<xs: enumeration value = oracle/>
49.
</xs: restriction>
50.
</xs: simpleType>
51.
</xs: attribute>
52.
<xs: attribute name = type use =optional type = xs:
string default = regular/>
53.
</xs: complexType>
54.
</xs: element>
55.
</xs: sequence>
Save as rules.xsd
56.
</xs: complexType>
57.
</xs: element>
58.
</xs: schema>
Page | 29
Java script:
1. Java script is the most popular scripting language used one the
internet. Its works all the browsers. Like internet Explorer,
Firefox, Chrome etc.
2. Java script is designed to interact with the html document.
3. Java script code can be embedded into the html documents.
4. Java script is an interpreted language.
Note:
Java and java script are two different language designed for two
different purpose.
Uses of java script code:
1. Java script can be used to place dynamic content in the html
document.
Page | 30
Page | 31
The comments are used to explain the code or make the code more
readable the comments are non-executable statements ignored by
the browser. They are two types of commands.
1. Single line comment
//this is a single line comment
2. Multi line comments
/*.*/
Java script functions:
When a java script code is written inside a <script> it will be
executed immediately. When the html document is loaded on to the
browser but some times we want to do this we need to take this
support of a function.
Syn:
Function function-name (Value1, Value2) {
Statements to be executed
}
Ex:
<html>
<head>
<script type = text/JavaScript>
Function display ()
{
document.writen (good afternoon);
}
</script>
</head>
<body onload = didplay ()>
</body>
</html>
Java script variables:
The variables can be used to hold a value or and expression. The
variable name must begin with either an alphabet or an underscore
symbol.
Java script doesnt contain any data types. To declare a variable in
the java script we are use Var (variable).
A variable of java script can contain any kind of data and the string
data must be enclose in () double codes.
Page | 32
Ex:
<head>
<script type = text/java script>
var x = 10;
var y = 20.50;
var z = x + y;
var name = java;
document.write (sum of = + w);
</script>
</head>
Java script operators:
1. Arithmetic operators:
These operators are used to perform then
mathematical
calculations. The various Arithmetic operators are Addition (+),
Subtraction (-), Multiplication (*), Division (/), Modules (%),
Increment (++), and Decrement (--)
2. Relational operators:
These operators are used for comparing the
values. These
operators can also be called as comparison operators. The
various relational operators are less than, less than are equals,
grater than, grater than are equal,
equals, not equals (<, <=, >, >=, ==, !=).
3. Logical operators:
These operators are used to combine the
conditions or used
to compliment the result. The various logical operators are AND
(&), OR (|), and NOT (!).
4. Conditional operators:
This operator is also called as ternary operator
and it is used to perform some operators based on a condition.
The conditional operator is?
Page | 33
Page | 34
<html>
<head>
<script type = text/JavaScript>
var n = prompt(enter a number, 4567);
document.write(n= + n);
</script>
</head>
<body>
</body>
</html>
3. Confirm box:
This box is used to take the confirmation from
the user.
Syn:
confirm(message);
The confirm box contains two buttons OK and CANCEL.
When the user click on OK button it return is true. When the use
click on CANCEL button it returns false.
Ex:
<html>
<head>
<title>pop up boxes</title>
</head>
<body>
<Script type = text/JavaScript>
var status = confirm(do you want to sleep);
document.write(status);
</script>
</body>
</html>
Conditional statements:
These statements are used to execute a
group of statements based on a condition.
1. If statement:
This statement will execute a group of
statements when a condition is true.
Page | 35
Syn:
If (condition)
{
Statements to be executed
}
<html>
<head>
<title>conditional statement</title>
</head>
<body>
<script type = text/JavaScript>
if(1 < 2)
{
document.write(Hello);
}
</script>
</body>
</html>
2. if-else statement:
If the condition is true than if block is executed and when
condition is false else block is executed.
Syntax:
if (condition)
{
Statement1
}
else
{
Statement2
}
Ex:
<html>
<head>
<title>conditional statement</title>
</head>
<body>
<script type = text/JavaScript>
Page | 36
if(1 2)
{
document.write(1 is smaller);
}
else
{
document.write(1 is bigger);
}
</script>
</body>
</head>
3. switch statement:
This statement is used to execute an option from a
group of option from a group of options that are available.
Syn:
Switch (expression)
{
case value1 : statement1;
break;
case value2 : statement2;
break;
case value3 : statement3;
break;
case value4 : statement4;
break;
default : default statement;
}
Ex:
<html>
<head>
<title>conditional statement</title>
</head>
<body>
<script type = text/JavaScript>
var x = parseInt (prompt(Enter a number));
Page | 37
switch(x)
{
case1 : document.write(one);
break;
case2 : document.write(two);
break;
case3 : document.write(three);
break;
case4 : document.write(four);
break;
default: document.write(wrong choice);
}
</script>
</body>
</html>
Iterating statements: These statements are used to execute a
group of statements multiple times.
1. For loop:
This statement has to be used when we known the exact
number of iterations.
Syn:
for(initialization; condition; increment/decrement)
{
Statements to be executed
}
Ex:
<html>
<head>
<title>Iterating statements</title>
</head>
<body>
<script type = text/JavaScript>
var fact = 1;
for(x=1; x<=10; x++)
{
fact = fact * x;
document.write(x+!= +fact+ </br>);
Page | 38
}
</script>
</body>
</html>
2. While loop:
This loop must be used when we do not know the exact
no. of iterations.
Syn:
while(condition)
{
Statements to be executed
}
Ex:
<html>
<head>
<title>iterating statement</title>
</head>
<body>
<script type = text/JavaScript>
var n = parseInt(prompt(Enter a table
number));
var x = parseInt(prompt(Enter an other
number));
var i = 1;
while(i<=x)
{
document.write(n + * +i + = +(n*i)
+<br/>);
i++;
}
</script>
</body>
</html>
3. Do..while loop:
Page | 39
Page | 40
<html>
<head>
<title>date object</title>
</head>
<body>
<script type = text/JavaScript>
var date = new Date();
document.write(date + <br/>);
document.write(date.getDate() +
<br/>);
document.write(date.getMonth() +
<br/>);
document.write(date.getfullYear() +
<br/>);
document.write(date.getHouse() +
<br/>);
document.write(date.getMinutes() +
<br/>);
document.write(date.getSeconds() +
<br/>);
</script>
</body>
</html>
3. Boolean object: This object represents either true or false.
Based on the value we pass to the boolean object.
Ex:
<html>
<head>
<title>Boolean object</title>
</head>
</body>
<script type = text/javascript>
var b1 = new Boolean();
var b2 = new Boolean(0);
var b3 = new Boolean(1);
var b4 = new Boolean(true);
var b5 = new Boolean(false);
var b6 = new Boolean( );
var b7 = new Boolean(html);
Page | 42
</script>
</body>
</html>
5. Math object: This object is used to perform mathematical
operations.
Ex:
<html>
<head>
<title>Math Object</title>
</head>
<body>
<script type = text/javascript>
document.write(Math.min(4,6) + <br/>);
document.write(Math.max(4,6) + <br/>);
document.write(Math.floor(4.5) +
<br/>);
document.write(Math.ceil(4.5) + <br/>);
document.write(Math.round(4.5) +
<br/>); document.write(Math.sqrt(a) +
<br/>); document.write(Math.random()
+ <br/>); document.write(Math.PI +
<br/>);
</script>
</body>
</html>
Javascript events:
Events are the actions that can be identified by
javascript the events will be generated automatically based on the
user operations to perform any operation when an event is
generated. We generally take the help of functions.
Page | 44
<html>
<head>
<title>Events</title>
<script type = text/javascript>
Function change()
{
var name = myform.user.value;
var col = myform.color.value;
document.bgcolor = col;
alert(name + has changed the
background
color to + col);
}
</script>
</head>
<body>
<form name = myform>
UserName<input type = text size = 25 name =
user/> <br/>
color<input type = text size = 25 name =
color/><br/>
<input type = button value = change onclick =
change()/>
</form>
</body>
</html>
if(name.length==0)
{
alert( Enter your user name);
loginform.user.focus();
return false;
}
else if((name.length<6) || (name.length>15))
{
alert(user name length is not valid);
loginform.user.focus();
return false;
}
else if(data.test(name))
{
alert(user name character are not valid);
loginform.user.focus();
return false;
}
if(pwd.length==0)
{
alert(Enter your password);
loginform.pass.focus();
return false;
}
}
</script>
</head>
<body bgcolor = cyan>
<center>
<h1>Loginform</h1>
<form name = loginform onsubmit = return
validate(this)>
UserName<input type = text name = user size =
30/><br/>
password<input type = password name = pass size =
30/> <br/>
<input type = submit value = Login/>
Page | 47
</from>
</center>
</body>
</html>
We can write the javascript code internal to the html document or
external to the html document.
function validate(loginform)
{
.
Save as
.. // validation
.js
.
.
}
To include the external javascript into a html document. We take
help of src attribute of <script>
<script type = text/javascript src = validation.js>
</script>
Page | 48
CSS: its stands for cascading style sheets. CSS is used to define
styles how to display the html element. The styles how to display the
html element.
1. Inline styles
2. Internal styles
3. External styles
1. Inline styles: If the styles are specified inside the tag then
styles are called as inline styles. These styles are applied to
only that tag in which they are specified.
Ex:
<h1 style = color:blue; text-align:center;> XYZ ltd
</h1>
<h1 style = color:red; font-family: arial;> ABC LTD
</h1>
<p style = color:blue; font-style: italic; margin-left:
45t;> this is a para </p>
<p style = font-size: 22pt;> second para</p>
<hr style = color:green;/>
2. Internal styles: If the styles are specified with in the html
document by using <style> then those styles are called as
internal styles. The internal styles will be applied to all the
tags available in that html document.
Ex:
<html>
<head>
<title>CSS</title>
<style type = text/css>
a:hover
{
color:red;
font-size:200%;
}
P
{
color:green;
font-family:arial;
}
Page | 49
h1
{
color:brown;
font-size:22pt;
}
body
{
backgroung-color:cyan;
}
</style>
</head>
<body>
</body>
</html>
3. External Style:
If the styles are specified out side the html
document then those styles are called as external styles. The
styles available externally can be applied to all the tags
available in multiple html documents.
The external styles stored out side the html document. Must
be saved with any name (.) dot having.css as the extension.
Ex:
P
{
color:green;
font-family:arial;
}
Styles.css
h1
{
color:brown;
font-size:22pt;
}
To use external style sheets within the html document we take help
of <link>. The <link> must be specified in the need section of the
html document.
Syn:
Page | 50
Page | 51