- Images in your web page:
<BODY BACKGROUND="image.gif">
</BODY>
Here we want to learn how to add an image in a web page. Tag that will be used for this purpose
is <IMG> tag.
Actually we will need parameters for this tag that specify image file location, file name and other
optional parameters.
Look at this example:
Example:
<HTML>
<HEAD>
<TITLE>Example </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
<B>This is an image:</B><BR>
<IMG SRC="abanner.gif">
</BODY>
</HTML>
In this example We have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag.
If you want to show your image in a different size than its real size, you can specify its size as below.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image:<BR>
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30>
</BODY>
</HTML>
Alignment and border size for images
You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center.
See example below.
Example:
<HTML>
<HEAD>
<TITLE>Example showing change in image attributes </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image:<BR>
<P ALIGN="center">
<IMG SRC="abanner.gif">
</P>
</BODY>
</HTML>
You can add a border to an image by adding a border parameter to <IMG> tag. See the results of this html code.
You can see examples of this lesson in our site. Go to email course section in our site to see ready examples.
Example:
<HTML>
<HEAD>
<TITLE>Example 3-6</TITLE>
</HEAD>
<P ALIGN="center">
<IMG SRC="abanner.gif" border=3>
</P>
</HTML>
Some of options we use may not be supported on other browsers. As most of web surfers use "MS
Internet Explorer"
we will work around this browser.
- Alternative text for images:
It is very easy. Just add an ALT parameter to <IMG> tag.
<IMG SRC="abanner.gif" ALT="Learning Online">
You see it does not cost too much.
- Path of image file:
image file resides in other directory , we must add a relational path or a complete URL to this
image.
See examples below:
<IMG SRC="images/abanner.gif"> Image is located in "images" directory below the directory that html file resides.
<IMG SRC="../abanner.gif"> Image is located in parent directory of the directory of html file.
In this lesson you learned more text formatting techniques. You also learned how to include images in your web pages.
In next lesson we will learn about links, image links and more.
Until then I suggest you to start designing a web page using the knowledge you have from these three lessons.
< page6 Webdesign
Posts
