Scribd
Upload
19 views

Lecture 5

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
19 views

Lecture 5

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

Internet Technologies &

webpage authoring /
web Fundamentals
Links & images
 A link is the "address" to a document (or a resource) on the

web
 One of the greatest strengths of Hypertext Markup
Language is hypertext – the ability to link documents
together. The World Wide Web itself consists of millions of
html documents all linked together via hypertext. A good
web site designer should be able to use hyperlinks to make
it easy for visitors to not only move around their site easily,
but to also get to related sites. The key is to enable people
to get to what they want as quickly and easily as possible
Hyperlinks, Anchors, and
Links
 In web terms, a hyperlink is a reference (an address)
to a resource on the web.
 Hyperlinks can point to any resource on the web: an
HTML page, an image, a sound file, a movie, etc.
 An anchor is a term used to define a hyperlink
destination inside a document.
 The HTML anchor element <a>, is used to define
both hyperlinks and anchors.
 We will use the term HTML link when the <a>
element points to a resource, the term HTML anchor
when the <a> elements defines an address inside a
document..
 The most common use for the anchor tag is to provide a link to

another document. This is done using an anchor tag with a


hyperlink reference attribute, as shown below.
 <A HREF=”filename.html”>text for the link</A>

 E.g. If you wanted the text see our product list to be used as a

link to a document called product.html you would do this with


the following line of html:
 <A HREF=”product.html”>see our product list</A>

 Most browsers display hyperlink text (the text between the

closing and ending A tag) as underlined text displayed in the


colour specified in the document’s BODY tag. Moving the mouse
pointer over a hyperlink will change the shape of the pointer to a
pointing hand.
Relative vs absolute links

 There are two types of hyperlinks you can use in your html -

relative and absolute. An absolute hyperlink will give the


complete address of a document. A relative hyperlink will
give the address of the destination document in relation to
the current location.
 E.g. If two documents were in the same location you may

use a relative reference such as <A


HREF=”index.html”>main page</A>
 If they were in different locations (such as a link to another

site) you would need to use an absolute reference such as


<AHREF=”http://www.otherpage.com/index.html”>
someone else’s page </A>
Email links
 To create an email link, you use a regular hyperlink tag. For the

link location, put MAILTO: followed by the email address. E.g.


 <A HREF=”MAILTO:[email protected]”>send me an email

</A>.
 It is a common practice to make the email address itself into

an email link.
 E.g. If you wanted the text [email protected] to appear on

your page as a link to the email address it describes, you could


use the following HTML.
 <AHREF=”MAILTO:[email protected]”>[email protected]

u </A>
The target Attribute
 The target attribute defines where the linked

document will be opened.


 The code below will open the document in a new

browser window:
 Examples

 <a href="http://www.w3schools.com/"

target="_blank">Visit W3Schools!</a>
 <a href=“file.html” target="_blank">visit my file</a>
Exercise

Design two HTML pages and link


them to each other
Creating links to other pages
and email links
 Open the file index.html. We will create a navigation section with links

that can be used to get to other pages in the site. The navigation links
will go along the top of the page similar to the links shown below.
Note the vertical lines ( | ) that are used to separate each link so it is
easy for users to tell them apart. If you can’t find it on your keyboard
you can get it by holding down [Shift] and pressing \. (Note that on
most keyboards | looks like ¦ )
 Home | About Us | Upcoming Events | Who's Who | Contacts |

Links
 Between the body and the main heading, insert the following html.

This should be after the <BODY> tag and before the <H1> tag so
that it will appear at the top of the page above the heading.
 <P ALIGN="center">

 <A HREF="index.html">Home</A> |

 <A HREF="about.html">About Us</A> |

 <A HREF="events.html">Upcoming Events</A> |

 <A HREF="who.html">Who's Who</A> |

 <A HREF="contacts.html">Contacts</A> |

 <A HREF="links.html">Links</A> </P>

 If you have any questions about us,

 <A HREF="MAILTO:[email protected]">Send us an

email</A>
The Image Tag
 It is rare these days to find a website without pictures

being used in some form.


 Images are inserted in html with the IMG tag. Since

the tag is specifying the point where the image will


appear, there is no close tag to indicate the end of the
image.
 The most basic image tag will specify the name

(source – SRC) of the image file to be inserted. Like


hyperlinks,
 this file reference may be relative or absolute.

 E.g. <IMG SRC=”picture.gif”>


Images are commonly used as hyperlinks

instead of text. A picture is worth a


thousand words so a picture can often
indicate the purpose of a link better than a
word.
To make a picture into a link, you insert

your image tag inside your anchor tag.


E.g. <A HREF=”link.html”><IMG

SRC=”picture.gif”></A>
Image tag attributes

 HEIGHT/ WIDTH These two attributes specify the size

of the image in pixels. If they are not included, the


image will display at its normal size. It is usually a
good idea to include these attributes for two reasons.
 1 The browser can load the picture quicker when it

already knows its exact size.


 2 The browser will make room for the loading picture

rather than shifting everything down the page as


each image loads.
 HSPACE / VSPACE These attributes specify the amount of

horizontal and vertical space around the picture in pixel


measurements.

 ALT Specifies the text that will display while the picture is

loading or if it doesn’t load. If the picture’s important,


make sure you include this. Some people don’t have
browsers that show images and some turn image loading
off to speed up their browsing. Recent browsers use the
alternate text as a pop-up when the mouse is moved over
the image.
 BORDER Specifies the width (in pixels) of the
picture’s border. Set this to 0 if the picture is a
hyper-link; otherwise a border the colour of your
links will appear around the image.
 ALIGN
- TOP Aligns the top of the picture with the top of the
current line of text
- MIDDLE Aligns the middle of the picture with the
middle of the current line of text
- BOTTOM Aligns the bottom of the picture with the
bottom of the current line of text
- LEFT Aligns the picture to the left of text and will
make text wrap around the picture
- RIGHT Aligns the picture to the right of text and will
make text wrap around the picture
Image types

 There are two image formats commonly used


throughout the Internet.
 These are GIF (Graphical Interchange Format)
and JPEG (Joint Photographic Experts Group).

 The reason they are both so widely used is


because they are both formats that can
compress an image’s file size without too
much loss in image quality. These smaller file
sizes make them ideal for use on the Internet.
GIF Images

Graphic Interchange Format


Developed by CompuServe. Standard
gifs are usually GIF89a format. Animated
gifs are GIF89b format. GIF87a standard
is still sometimes used but doesn’t
support transparent areas.
File extension - .gif
JPEG Images

Joint Photographic Expert Group


Developed by the group the format was
named after.
File extension - .jpg .jpeg or .jpe
Gif vs jpeg differences
 Gif  Jpeg
- Best for Drawings, - Best for scanned
logos, graphs, text photos, artwork
- No more than 256 - approximately 16.7
colours million coulors
- lossless format (no - lossy format (loss in
loss in quality) quality when saved)
- best in transparent
areas
- best for animations
PNG Images

Portable Network Graphic


Combines the features of GIF and JPEG in to
one format. But isn’t very commonly used.
File extension .png
Tips for using Graphics in
Websites
 Remember that graphics may look different on
different screen sizes.
 Don’t make the picture any bigger than you
absolutely have to.
 Re-size graphics in a graphics program instead of
doing it in the web page.
 Provide alternate text for the image (Use the ALT
attribute in the image tag).
 Save pictures in the right place. Usually best to save
them in the same folder as your website files.
 Make filenames descriptive.
 Avoid spaces in filenames. Use an underscore “_”
instead.
 Keep filenames lowercase. Avoid capital letters.

You might also like