Class selectors

In HTML an image map is a list of coordinates relating to a
specific image, created in order to hyperlink areas of
the image to different destinations (as opposed to a
normal image link, in which the entire area of
the image links to a single destination).

<html><head></head><body>
<h1> Image Mapping </h1>
<map name="imgmap">
<center><img src="aos.png" usemap="#Asad"> </center>
<map name="Asad">
<area shape="rect" coords="1,253,170,511" href="#ASAD">
<area shape="circle" coords="324,408,77"href="#saad">
<area shape="poly" coords="314,71,295,130,297,234,406,233,401,221"
href="#Mussadiq">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1><a name="ASAD">ASAD</a></h1>
<img src="420227.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1><a name="saad">saad</a></h1>
<img src="WEB.png">
<h1><a name="Mussadiq">Mussadiq</a></h1>
<img src="cc.png">
</body>
</html>

Single Selector
Child Selector
Descendant Selector
Adjacent Sibling Selector
General Sibling Selector

Single Selector
H1{
COLOR:RED;
}
Just effect on single tag

Child Selector
div > h1
{
color:green;
background-color:orange;
}
If have to apply on all tags in one Div or Box

Descendant Selector
div p
{
color:red;
background-color:gray;
}
Same as Child but work on 1st
tag

Adjacent Sibling Selector
h1+p+p
{
background-color:yellow;
}
Tag a specific tag after tag
The upper tag will effect only
Those p tag exist after h1->p->p

General Sibling Selector
h1 ~ p{ text-decoration:underline; }
It effect all tags after h1 paragraph

Script is a short piece of Program or a code.
We can add it by using <script>…</script>
In Html code.

• The <script> tag is used to define a client-
side script (JavaScript).
• The <script> element either contains
scripting statements, or it points to an
external script file through the src attribute.
• Common uses for JavaScript are image
manipulation, form validation,
and dynamic changes of content.

JavaScript != Java
JavaScript Variables :
• Variables are used to store data.
• A variable is a "container" for information you
want to store. A variable's value can change
during the script. You can refer to a variable by
name to see its value or to change its value.
• Rules for variable names:
– Variable names are case sensitive
– They must begin with a letter or the underscore
character
• strname – STRNAME (not same)

JavaScript Basic Examples
1) Output to a Browser Display
<html>
<head></head>
<body>
<script>
document.write("BsCs Web Engineering Class");
</script>
</body>
</html>

JavaScript Basic Examples
1) Output to a Browser Display
<html>
<head></head>
<body>
<script>
document.write("BsCs Web Engineering Class");
</script>
</body>
</html>
Output 

2) Creating a variable in JavaScript
Here variable can automatically sense the
data type .
var name_of_variable ;
Var = Is keyword for declaring a variable
; = termination Sign

var a=5;
var b=“Asad”;
document.write(a); is will show 5 on screen
document.write(b); is will show Asad

var a=5;
var b=“Asad”;
var ara= new Array(length);
ara[0]=“Asad”;
ara[1]=122;
So on…

3) Operations In JavaScripts
<html><head></head><body><font size=12>
<script>
var a=5;
var b=10;
var c=a+b;
document.write(c);
</script>
</font></body></html>

3) Operations In JavaScripts
<html><head></head><body><font size=12>
<script>
var a=5;
var b=10;
var c=a+b;
document.write(c);
</script>
</font></body></html>
Output 
Same for other operation .
Can use increment and decrement .

4) Functions in JavaScripts
<html><head>
<script>
function Asad(){document.write("Pak Pak
Pakistan")}
</script>
</head><body>
<script>Asad();</script>
</body></html>

4) Functions in JavaScripts
<html><head>
<script>
function Asad(){document.write("Pak Pak
Pakistan")}
</script>
</head><body>
<script>Asad();</script>
</body></html>
Output 

Flow Control Statements
5) If statement
<html><head></head><body><font size=12><script>
var a=5;
if(a>=5)
{
document.write("A is greater or Equal to 5");}
else
{
document.write("A is smaller then 5");
}
</script></font></body></html>

6) For Loop
<html><head></head><body><script>
for(i=1;i<6;i++)
{
document.write("BsCs Web Engineering
Class"+"<br>");
}
</script></body></html>

6) For Loop
<html><head></head><body><script>
for(i=1;i<6;i++)
{
document.write("BsCs Web Engineering
Class"+"<br>");
}
</script></body></html>
Output 

Dialog Boxes
• The alert dialog box
<script> alert(“Message”);</script>
• The confirm dialog box
<script> variable= confirm(“Message”);</script>
• The prompt dialog box
<script> variable=prompt(“Message”[“Default value”]);</script>
St=prompt(“Enter Name of city”,”Layyah”);
Confirm(“you entered city name :”+st);

Class selectors

Recommended

Recommended

More Related Content

Similar to Class selectors

Similar to Class selectors (20)

More from ITz_1

More from ITz_1 (8)

Recently uploaded

Recently uploaded (20)

Class selectors