How to add an image to HTML:
Let's discuss how to insert an image in HTML?Like Text, Images can be displayed on the web page. Once the image is ready, it can be inserted into a webpage with the help of <img> tag. This tag contains the name of the image file. The general format to add an image to HTML is,
<img attribute1="value" attribute2="value"..............>
Also, HTML allows to control of the height, width, border, and so on, of every image placed on the web page. The <img> tag takes the following attributes:
ALIGN
|
Control alignment of the text following image.
ALIGN=TOP indicates the text after the image to be written at the
top, next to the image.
ALIGN=MIDDILE indicates the text after the image to be written at the
middle, next to the image.
ALIGN=BOTTOM indicates the text after the image to be written at the
bottom, next to the image. Controls alignment of the image concerning
the VDU screen.
ALIGN=LEFT indicates the image is aligned to the left concerning
the screen.
ALIGN=CENTER indicates the image is aligned to the center with the
respect to the screen.
ALIGN=RIGHT indicates the image is aligned to the right with respect
to the screen.
|
BORDER
|
Specifies the size of the border to place around the image.
|
WIDTH
|
Specifies the width of the image in pixels.
|
HEIGHT
|
Specifies the height of the image in pixels.
|
HSPACE
|
Indicates the amount of space to the left and right of the image.
|
VSPACE
|
Indicates the amount of space to the top and bottom of the image.
|
ALT
|
Indicates the text to be displayed in case the browser is unable to
display the image specified in the SRC attributes.
|
SRC
|
Specifies the location and the name of the image file.
|
Example:
<IMG align=Center Border=0 height=57 HSpace=0 src=”image.gif” width=447>
The attributes to insert an image in HTML:
The attributes taken by the <Img…………………> tags are explained in the following examples.
Also Read: Exception handling in java
1.THE BORDER ATTRIBUTE:
Border attributes used to add a border around the image.
<html>
<head><title>working with the image</title></head>
<body background=”images/texture.gif”/>
<b>controlling image borders</b><center>
<i>image without a border</i><br><br>
<img src=”images/crop.gif”><br><br>
<img border=3 src=”images/crop.gif”><br>
</center>
</body>
</html>
2.THE WIDTH AND HEIGHT ATTRIBUTE:
Using the width and height attributes of <img> we change the size of an image.
<html>
<head><title>Working with the images</title></head>
<body background=”images/textures.gif”>
<b>controlling image size</b><center>
<i>normal image size</i><br><br>
<img src=”image/computer.gif><br>
<i>image with size (height and width) set to 200</i><br><br>
<Img height=200 src=”images/computer.gif” width=200><br>
</center>
</body>
3.ALIGN ATTRIBUTE:
The location of the <img> is get altered using the align attribute.
<html>
<head><title>working with the images</title></head>
<body background=”images/texture.gif”>
<b><i>images aligned left</i></b>
<img align=left src=”images/sctonly.gif”><br><br>silicon chip technologies<br>
<i> we specialized in the corporate training ,software development and placements,our training programs and software development includes web based commercial application and commercial application development usiong datacases.</i><br><br>
<br><br>
<b><i>image aligned right</i></b>
<img align=right src=”image/sctonly2.gif”><br><br>silicon chip technologies<br>
<i> we specialized in the corporate training ,software development and placements,our training programs and software development includes web based commercial application and commercial application development usiong datacases.</i><br><br><br><br>
</body>
</html>
Also read: Multithreading in java
I hope you guys understand how to insert an image in HTML. please comment if you something wrong or incorrect.
Also read: Multithreading in java
I hope you guys understand how to insert an image in HTML. please comment if you something wrong or incorrect.
No comments:
Post a Comment