Monday 25 May 2015
Sunday 24 May 2015
Thursday 21 May 2015
Wednesday 20 May 2015
Html tutorials lesson 8
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>
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>
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>.
Subscribe to:
Posts (Atom)