Image Map:
Image maps are images with clickable areas. These areas in image-maps when clicked will
link to another page. The image maps have to be used intelligently to make it effective.
If they are not used appropriately they can confuse the users. The <map> tag is used to
define an image-map. The <map> element contains a number of <area> elements for
defining the clickable areas in the image map. In HTML5, if the id attribute of the <map>
tag is specified, then it must have the same value as the name attribute.
Table 8.4 shows <map> tag attribute and its value.
Follow these guidelines to create an image map:
1-Use the <img> tag to insert and link an image. In the <img> tag, use the
usemap attribute to define the image map name.
2-Use the <map> tag to create a map with the same name. Inside this <map>
tag, define the clickable areas with the <area> tag.
<!DOCTYPE html>
<html>
<body>
<img src=”6.jpg” width=”600” height=”300” alt=”cake”
usemap=”#cakemap” />
<map name=”cakemap”>
<area shape=”circle” coords=”0,0,200,600” href=”4.html” alt=”cake”
/>
</map>
</body>
</html>
Showing posts with label html session 8. Show all posts
Showing posts with label html session 8. Show all posts
Wednesday, 20 May 2015
Tuesday, 19 May 2015
Html session 8
Divisions:
The <div> tag defines a division in an HTML Web page. It is used to group block-elements and format them with CSS. The new structural semantic tags reasonably reduce a lot of <div> tag’s usage, but <div> tag is still important in the HTML5 world. The <div> tag can be used when there is no other semantically appropriate element left that suits the purpose in a Web page development. It can be commonly used for stylistic purposes such as wrapping some semantically marked-up content in a CSS-styled container.
Code Snippet 14 demonstrates an HTML code to show the use of <div> tag used for wrapping.
Code Snippet 14:
<body>
<div id=”wrapper”>
<header>
<h1>Hello</h1>
<nav>
<! -- ... -->
</nav>
</header>
</div>
</body>
Tips for using <div> tag in Web site development are as follows:
The <div> tag is a block-level element.
The <div> tag can contain any other tag.
In HTML5, the <div> tag can be found inside any element that can contain flow elements, such as other <div>, <address>, <section>, and <table>.
The <div> tag defines a division in an HTML Web page. It is used to group block-elements and format them with CSS. The new structural semantic tags reasonably reduce a lot of <div> tag’s usage, but <div> tag is still important in the HTML5 world. The <div> tag can be used when there is no other semantically appropriate element left that suits the purpose in a Web page development. It can be commonly used for stylistic purposes such as wrapping some semantically marked-up content in a CSS-styled container.
Code Snippet 14 demonstrates an HTML code to show the use of <div> tag used for wrapping.
Code Snippet 14:
<body>
<div id=”wrapper”>
<header>
<h1>Hello</h1>
<nav>
<! -- ... -->
</nav>
</header>
</div>
</body>
Tips for using <div> tag in Web site development are as follows:
The <div> tag is a block-level element.
The <div> tag can contain any other tag.
In HTML5, the <div> tag can be found inside any element that can contain flow elements, such as other <div>, <address>, <section>, and <table>.
Monday, 18 May 2015
Html session 8
Html tutorials session 8 :
Division Positioning and Formatting :
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position of the property is set. They also work differently depending on the positioning method. There are five position properties in DIV elements namely, static, relative, absolute, fixed, and inherit. For easy usage, only three properties are used namely, absolute, relative, and fixed. Positioning can be applied to any block element. The default position for a block element (DIV) is static. Table 8.5 shows the various values that can be used in DIV element to position elements.
Value Description
static Positions the element in order, as they appear in the document flow. It is the default value.
absolute Positions the element relative to its first position.
fixed Positions the element relative to the browser window.
relative Positions the element relative to its normal position.
inherit Positions the element with respect the value that is inherited from the parent element.
Code Snippet 15:
.lCard{
width: 100px;
height:100px;
background-color:blue;
padding: 6px;
position:fixed;
left:450px;
top:100px;
}
.rCard{
width: 100px;
background-color:red;
padding: 7px;
position:relative;
top:93px;
left:300px;
}
.bCard{
width: 100px;
height:100px;
background-color:green;
padding: 6px;
position:absolute;
left:310px;
bottom:320px;
}
Code Snippet 16:
<body>
<div class=”rCard”>
</div>
<div class=”bCard”>
</div>
<div class=”lCard”>
</div>
</body>
Multiple columns are created by using the <div> tag and CSS is used to format the divisions. Divisions can be formatted by using the same character, paragraph, and page formatting styles. In the Code Snippet, CSS is used to format each DIV.
Division Positioning and Formatting :
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position of the property is set. They also work differently depending on the positioning method. There are five position properties in DIV elements namely, static, relative, absolute, fixed, and inherit. For easy usage, only three properties are used namely, absolute, relative, and fixed. Positioning can be applied to any block element. The default position for a block element (DIV) is static. Table 8.5 shows the various values that can be used in DIV element to position elements.
Value Description
static Positions the element in order, as they appear in the document flow. It is the default value.
absolute Positions the element relative to its first position.
fixed Positions the element relative to the browser window.
relative Positions the element relative to its normal position.
inherit Positions the element with respect the value that is inherited from the parent element.
Code Snippet 15:
.lCard{
width: 100px;
height:100px;
background-color:blue;
padding: 6px;
position:fixed;
left:450px;
top:100px;
}
.rCard{
width: 100px;
background-color:red;
padding: 7px;
position:relative;
top:93px;
left:300px;
}
.bCard{
width: 100px;
height:100px;
background-color:green;
padding: 6px;
position:absolute;
left:310px;
bottom:320px;
}
Code Snippet 16:
<body>
<div class=”rCard”>
</div>
<div class=”bCard”>
</div>
<div class=”lCard”>
</div>
</body>
Multiple columns are created by using the <div> tag and CSS is used to format the divisions. Divisions can be formatted by using the same character, paragraph, and page formatting styles. In the Code Snippet, CSS is used to format each DIV.
Subscribe to:
Posts (Atom)