Working with Images, Colors, and Canvas
there are 2 types of GIF image formats.
GIF 87, which does not support image transparancy and animation.
GIF 89a, which supports image transparancy and animation.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<H2>Displaying a GIF Image </H2>
<IMG src="ProgressBar.gif"/>
</BODY>
<HTML>
as the GIF image and the gifimage.html file are in the same folder, we have specified only the name of the image.
Displaying a PNG image
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<H2>Inserting an Image in a Web page</H2>
<IMG src="progressbar.png"/>
</BODY>
<HTML>
in case the image file is in a different folder, you need to give the full path of the image.
<img src="D:\images\progressbar.png"/>
Displaying Alternet Text for an Image
<img src="path of the image" alt="alternet text"/>
The alternet text is displayed when the imagedoes not appear on the web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Alternate Text for an Images</TITLE>
</HEAD>
<BODY>
<H2>Displaying Alternate Text for an Image</H2>
<IMG src="progressBar1.png" alt="Progress Bar"/>
</BODY>
</HTML>
Modify the size of an image
The main purpose of the height and width attributes is to reserve the specified space for image.
the values of the attributes height and width are either positive pixels / percentages ranging from 1 to 100.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Size of Image</TITLE>
</HEAD>
<BODY>
<H2>Specifying the size of an Image</H2>
<P> The height of the following image is 100 and width is 100.</P>
<IMG src="car.jpg" height="100" width="100"/>
<BR />
<P> The height and width of the following image is not pecified.</P>
<IMG src="car.jpg" />
</BODY>
<HTML>
Using an Image as a Hyperlink
you can first create a hyperlink and than add an image to a hyperlink.
<a href = "path of the HTML page">
<img src="path of the image file"/></a>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images as hyperlink</TITLE>
</HEAD>
<BODY>
<H2> Using Images as Hyperlink</H2>
<A href="Target.html">
<IMG src="progressBar.png" height="100" width="100"/>
</A>
</BODY>
<HTML>
target.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target page</H2>
</BODY>
<HTML>
Creating Image Maps
A technique in which an image is divided into multiple sections and each section is linked to a different webpage is known as imagemap.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Image Maps</TITLE>
</HEAD>
<BODY>
<H2> Creating the Image Maps</H2>
<IMG src="progressBar.png" usemap="#mymap" />
<MAP name="mymap">
<AREA shape="rect" coords="0,0,82,126" href="Target1.html" />
<AREA shape="circle" coords="190,158,130" href="Target2.html" />
</MAP>
</BODY>
</HTML>
you can use teo elements img element and map element to create an image map.
img element is used to insert an image into a webpage by using the src attribute.
2 area elements are used inside the map elements, which implies that 2 hyperlinks are created on the image.
the coords and href attributes of the area element specifies the position of hyperlinks and the path of the webpage, respectively.
Target1.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target1 page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target1 page</H2>
</BODY>
<HTML>
Target2.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target2 page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target2 page</H2>
</BODY>
<HTML>
Using Color Names
you can specify a color in a webpage by using color names
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color names</TITLE>
</HEAD>
<BODY text="Red">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
Using Hex Values
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color Hex Values</TITLE>
</HEAD>
<BODY text="#FF0000">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
the first two digits represents the red color,
the second two digits represents the green,
and the last two represent the blue color.
Using the RGB Configuration.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color Hex Values</TITLE>
</HEAD>
<BODY text="rgb(255,0,0)">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
Implementing the CANVAS Element
the CANVAS element is used to display 2D shapes and graphics on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="application/x-javascript">
function displayCanvas()
{
var mycanvas = document.getElementById("myCanvas");
if (mycanvas.getContext) {
var contex = mycanvas.getContext('2d');
contex.fillStyle = "rgb(50,0,0)";
contex.fillRect (0, 0, 150, 75);
contex.fillStyle = "rgba(0, 200, 50, 0.5)";
contex.fillRect (40, 30, 125,100 );
}
}
</SCRIPT>
</HEAD>
<BODY onload="displayCanvas();">
<CANVAS id="myCanvas" width="300" height="200">
Your browser does not support the CANVAS element. </CANVAS>
</BODY>
</HTML>
the text written within the starting and ending tags of the CANVAS element is displayed, if the web browser does not support the CANVAS element.
there are 2 types of GIF image formats.
GIF 87, which does not support image transparancy and animation.
GIF 89a, which supports image transparancy and animation.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<H2>Displaying a GIF Image </H2>
<IMG src="ProgressBar.gif"/>
</BODY>
<HTML>
as the GIF image and the gifimage.html file are in the same folder, we have specified only the name of the image.
Displaying a PNG image
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<H2>Inserting an Image in a Web page</H2>
<IMG src="progressbar.png"/>
</BODY>
<HTML>
in case the image file is in a different folder, you need to give the full path of the image.
<img src="D:\images\progressbar.png"/>
Displaying Alternet Text for an Image
<img src="path of the image" alt="alternet text"/>
The alternet text is displayed when the imagedoes not appear on the web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Alternate Text for an Images</TITLE>
</HEAD>
<BODY>
<H2>Displaying Alternate Text for an Image</H2>
<IMG src="progressBar1.png" alt="Progress Bar"/>
</BODY>
</HTML>
Modify the size of an image
The main purpose of the height and width attributes is to reserve the specified space for image.
the values of the attributes height and width are either positive pixels / percentages ranging from 1 to 100.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Size of Image</TITLE>
</HEAD>
<BODY>
<H2>Specifying the size of an Image</H2>
<P> The height of the following image is 100 and width is 100.</P>
<IMG src="car.jpg" height="100" width="100"/>
<BR />
<P> The height and width of the following image is not pecified.</P>
<IMG src="car.jpg" />
</BODY>
<HTML>
Using an Image as a Hyperlink
you can first create a hyperlink and than add an image to a hyperlink.
<a href = "path of the HTML page">
<img src="path of the image file"/></a>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Images as hyperlink</TITLE>
</HEAD>
<BODY>
<H2> Using Images as Hyperlink</H2>
<A href="Target.html">
<IMG src="progressBar.png" height="100" width="100"/>
</A>
</BODY>
<HTML>
target.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target page</H2>
</BODY>
<HTML>
Creating Image Maps
A technique in which an image is divided into multiple sections and each section is linked to a different webpage is known as imagemap.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Image Maps</TITLE>
</HEAD>
<BODY>
<H2> Creating the Image Maps</H2>
<IMG src="progressBar.png" usemap="#mymap" />
<MAP name="mymap">
<AREA shape="rect" coords="0,0,82,126" href="Target1.html" />
<AREA shape="circle" coords="190,158,130" href="Target2.html" />
</MAP>
</BODY>
</HTML>
you can use teo elements img element and map element to create an image map.
img element is used to insert an image into a webpage by using the src attribute.
2 area elements are used inside the map elements, which implies that 2 hyperlinks are created on the image.
the coords and href attributes of the area element specifies the position of hyperlinks and the path of the webpage, respectively.
Target1.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target1 page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target1 page</H2>
</BODY>
<HTML>
Target2.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>target2 page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to target2 page</H2>
</BODY>
<HTML>
Using Color Names
you can specify a color in a webpage by using color names
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color names</TITLE>
</HEAD>
<BODY text="Red">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
Using Hex Values
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color Hex Values</TITLE>
</HEAD>
<BODY text="#FF0000">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
the first two digits represents the red color,
the second two digits represents the green,
and the last two represent the blue color.
Using the RGB Configuration.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>using color Hex Values</TITLE>
</HEAD>
<BODY text="rgb(255,0,0)">
<H2>Welcome to the World of HTML</H2>
</BODY>
</HTML>
Implementing the CANVAS Element
the CANVAS element is used to display 2D shapes and graphics on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="application/x-javascript">
function displayCanvas()
{
var mycanvas = document.getElementById("myCanvas");
if (mycanvas.getContext) {
var contex = mycanvas.getContext('2d');
contex.fillStyle = "rgb(50,0,0)";
contex.fillRect (0, 0, 150, 75);
contex.fillStyle = "rgba(0, 200, 50, 0.5)";
contex.fillRect (40, 30, 125,100 );
}
}
</SCRIPT>
</HEAD>
<BODY onload="displayCanvas();">
<CANVAS id="myCanvas" width="300" height="200">
Your browser does not support the CANVAS element. </CANVAS>
</BODY>
</HTML>
the text written within the starting and ending tags of the CANVAS element is displayed, if the web browser does not support the CANVAS element.
No comments:
Post a Comment