HTML Images
HTML
images are defined with the <img> tag. The <img> tag is empty, it
contains attributes only, and does not have a closing tag.
<img src="url" alt="some_text"
width="104px" height="142px"/>
The
source file (src),
alternative text (alt),
and size (width and height) are provided
as attributes:
The src attribute specifies the URL (web
address) of the image. The alt attribute specifies an alternate text for
an image, if the image cannot be displayed.
Sample 10
<html>
<head>
<title>Sharp Land </title>
</head>
<body>
<h1>Sharp Land – Software Training
Division</h1>
<h2>Showing Image</h2>
<img src="tajmahal.jpg" alt="Taj Mahal,
Agra" width="104px" height="142px">
</body>
</html>
Check Output
Note: In this above example
the image will be displayed in left (as default alignment).
Images in Another Folder
If image
location not specified, the browser expects to find the image in the same
folder as the web page.
However,
it is common to store images in a sub-folder. You must then include the folder
name in the src attribute:
<img src="/images/sharp.jpg" alt="Logo" style="width:128px;height:128px;">
Animated Images
The GIF (Graphics Interchange
Format) standard allows animated images:
<img src="logo.gif" alt="Sharp Land" style="width:48px;height:48px;">
Image Floating
Use the
CSS float property to let the image float. The image can float to the right or
to the left of a text:
<p>
<img src="smiley.gif" alt="Taj" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Taj" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>
<img src="smiley.gif" alt="Taj" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Taj" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>
To Align Image as Center
Below is the valid css code
to make an image at center using css in html 5 margin:
<img style="margin:0px
auto;display:block" src="path of image"/>
Change the above html code
as below to get image aligned center,
<img style="margin:0px auto;display:block" src="images/tajmahal.jpg" alt="Taj Mahal,Agra"
width="104" height="142" >
Then we get the output of Image aligned center.
No comments:
Post a Comment