Html links and image tags




In the last 2 blogs, we cover basic of Html and formatting text.
Now, In this blog cover about Html font, image, map, and link tags.


<font> - This tag is specified for size, color, and face.

Attributes          value

 color              color name
 face                font family
 size                 number

Ex:-

<html>
<head>
<title>
create page
</title>
<body>
<p> <font size = "3"  color = "Blue"> Techiebots...!</font>
<br>
<p><font size = "4" face = "Arial" color="Black">Techiebots...!</font>
<br>
</body>
</html>



Also in this tag, you may increase or decrease the font size(Ex - +2,-2).

Ex:-

  <font size="+2" color="Pink" face="Time new roman">Techiebots..!</font>



HTML IMAGE TAGS:-
 <Img>
 <Map>
 <Area>



1. <img> - This tag is empty, only contain attribute. Tag is used to embedding an image.

mainly 2 Attribute:-
 src - path to the image
 alt - alternate text for the image.

Ex:-

 <html>
 <body>
 <p> This image but not specific any height or width.</p>
 <img src="angelina-kichukova-1i6mrD_t9gA-unsplash.jpg" alt="moon">
 </body>
 </html>



Also many more attribute:

Attribuate        description

Align                 Alignment of image(right, left, top, bottom)
Border               Border around an image
Height               Height of an image
Width                Width of an image 
Vspace              Set whitespace on top and bottom of an image
Uspace              Set whitespace on left and right side of an image
Size                   Provide image size for page layout 
Usemap            (#Mapname)Client-side image map
Ismap                (#Mapname)Server side image map

Ex:-

 <html>
 <body>
 <img src="angelina-kichukova-1i6mrD_t9gA-unsplash.jpg" alt="sunset"
 width="450" height="500">
 </body>
 </html>





2. <map> - The tag defines an image map it means an image with the clickable area.
               So this area is defined as a <area> tag.
            it creates a relationship between the image and map.
              <img>'s  usemap and ismap attributes for map.

Attribute   value

name        mapname
  

3. <area> - area is a empty tag.Tag defines an area inside a map.


 Attribute     value
alt    text
coords coordinate
 href    URL
reltag 
  search
 next 
 prev
  help etc...
shape default 
 rect 
 circle 
  poly
target  _blank
  _parent
 _self 
  _top
 typemedia_type 


For more information:-
_blank - document opens in a new window.
_parent-document open in the parent frame.
_self - document open in a new tab.
_top - document open in the full body of the window

Ex:- Use of map and area tag.

<html>
<body>
<img src="moon.jpg" width="450" height="300" alt="moon" usemap="#moonmap">
<map name="moonmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun">
</map>
</body>
</html>


When clicking the moon:-







Html Hyperlink:-


<a> - Tag define for a hyperlink.
               The most important attribute is href.which define/indicate link's destination.


Attribute               value

href                    URL 
type                    name
shape                   rect, circle, poly
target                  _blank, _self, _parent, _top    
alink                   color
vlink                   color
link                    color



Ex:-

<html>
<head>
<title> links of html</title>
<body vlink="red" alink="blue">
<a href="https://techiebot55.blogspot.com">TECHIEBOTS</a>
</body>
</html>


When clicking the link it's going to the destination page.






And after see this link color will be changed. it converts blue into red.










Comments

Post a Comment

Popular Posts