lab 4

Download Report

Transcript lab 4 

Images and links
lab4
Suzanne Sultan
1
images

use an image as a background for web pages.
<body background="image.gif">

<img> tag within the body
 need parameters( specify image file location, file
name(URL)
Example :
<BODY >
<IMG SRC="abanner.gif">
</BODY>
Suzanne Sultan
2
Cont. attributes

Width and height (image size)



image in a different size than its real size, you can specify its size as
below.
Example:
<BODY >
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30>
</BODY>
Border: border thickness in pixel. Default 0.
Alt: allows to provide a brief text description of your image
Suzanne Sultan
3
Cont.

Hspace : horizontal space that specified an
amount of space (in pixels) to be held clear on
the left and right of the image.

Vspace: vertical space that specified amount of
space above and below .
Suzanne Sultan
4
Cont. Center alignment ,no wrap

Ex:

Write html code to make the image in the center
as shown the picture.
Using either


<p> tag
<vspace>/<hspace
Suzanne Sultan
5
Cont.
Solutions:
1- <p align="center">
<img src="aa.jpg" width=200
height="200"></p>
<p> this is my home. is it beatiful</p>
2- <img src="aa.jpg" width=200 height="200"
hspace="300“ ……>
<p> this is my home. is it beautiful </p>
Which solution is better ?why?

Suzanne Sultan
6
Cont.

Align: vertical alignment that determines the
relationship between the graphic and
surrounding text.

The values are :


top - middle- bottom
Default value is bottom
Suzanne Sultan
7
Cont.

Ex: write the html code to do the following
<p> my picture</p>
<p><img src="aa.jpg" width=200 height="200"
align=“middle”> my home</p>
<p> goodbye</p>
Suzanne Sultan
8
links

Text links
Creating a text link is an easy task. We will use
<A> </A> tag to do this.

Format :
<a href=“url”> linked text or image </a>
Example :
1- page link on the web
<BODY>
<A HREF="http://www.yahoo.com"> yahoo
</A>
</BODY>
2Suzanne Sultan
9
Cont.
2- linking within your site
without using http:// - file name/ pathname
e.g. <a> href=“/web/company/cpmpage.html> my
company</a>
Notes: determine the path from the root directory.

don’t use backslashes(\)
don’t start with drive name c: d:
don’t start with file:// indicates that the file is
local
Suzanne Sultan
10
Cont.
3- Image link
<BODY>
<A HREF="http://www.yahoo.com">
<IMG SRC="me.gif">
</A>
</BODY>
</HTML>
Suzanne Sultan
11