Tutorials

Linking & Inserting Images

Inserting Images

To includean inline image <IMG> tag is used with SRC attribute. This SRC points to the URL of the image file to the display it on your web document.
SYNTAX : < IMG SRC="File Name" > <IMG SRC> stands for image source and "file name" is the name of the file to be included.Type the code and open in the web browser.

<HTML>
<HEAD>
<TITLE> IMAGE INSERT </TITLE>
</HEAD>
<BODY>
<IMG SRC="Teznikal.jpg">
</BODY>
</HTML>

For Example Save Page as : image.html

Output

IMAGE INSERT

Note : Before opening the above HTML document in the browser make sure that you must have an image name "Teznikal.jpg"on your system or any other image.

Change Image Size

User can manipulate the sixze,alignment, border & space of the images.
To include an image along with desired dimension, use height and width attributes like :
<IMG SRC="Teznikal.jpg" HEIGHT=50 WIDTH=50>
To figures height=50 and width=50 are in pixels.

Alignment Of Images

You can also give the directions to the browser as to where the image should be display along with the text or without text in the web page.

Top = Align the text at the top of the image.
Middle = Align the text at the middle of the image.
Bottom = Align the txt at the bottom of the image.
Left = Display image left the of window.
Right = Display image right the of window.

<HTML>
<HEAD>
<TITLE> IMAGE INSERT </TITLE>
</HEAD>
<BODY>
 IMAGE IS <IMG SRC="Teznikal.jpg" ALIGN=TOP"> SLIGHTLY BELOW THE TEXT.
 IMAGE IS <IMG SRC="Teznikal.jpg" ALIGN=MIDDLE"> MIDDLE THE TEXT.
 IMAGE IS <IMG SRC="Teznikal.jpg" ALIGN=BOTTOM"> SLIGHTLY ABOVE THE TEXT.
 <IMG SRC="Teznikal.jpg" ALIGN=LEFT"> IMAGE IS LEFT SIDE 
 <IMG SRC="Teznikal.jpg" ALIGN="RIGHT"> IMAGE IS RIGHT SIDE 
</BODY>
</HTML>

For Example Save Page as : image_align.html

Output

IMAGE INSERT

IMAGE IS SLIGHTLY BELOW THE TEXT.

IMAGE IS MIDDLE THE TEXT.

IMAGE IS SLIGHTLY ABOVE THE TEXT.

IMAGE IS LEFT SIDE

IMAGE IS RIGHT SIDE

Home

tEzNiKal

Home