Agenda Links

External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks

Images

Image Attributes: src, alt, width, height, align, border

Links One of the features of web pages is the ability

to display links to other web pages. In web terminology, links in a web page are

referred to hyperlinks.

Hyperlinks can be in the form of text (normally underlined to indicate a link). These links are to other existing web pages.

Hyperlinks can also be in the form of images. In this example, a link can be used to send e-mail to web page author…

Links A hyperlink is a relationship between two anchors. An anchor tag <a> is used to define how the anchors

are related to create the link. There are different ways to link:

External Link Link to a file Link to a specific location in a file

(like a bookmark)

Internal Link Link to a specific Location within the current file

Link

Other

Web page

Link

Other

Web Page

bookmark

Web Page

Link

bookmark

Links

Anchors At one end of the hyperlink is the source

( “tail”) anchor and at the other end of the hyperlink is the destination (or “head) anchor.

The source (tail) anchor appears as the link you point and click

The destination (head) anchor is either another web page or a bookmark in the web page (external link) or another bookmark in the same web page.

Links External Text Hyperlink

A text hyperlink is underlined text that when clicked, will take you to another place in that document or page, to an entirely new document or page or send an e-mail message.

XHTML Code:

<a href=‘http://www.q107.com’>Q-107 Radio</a>

Result:

Q-107 Radio

The anchor tag attribute href(hypertext reference) is used in this example to describe the URL to view when thehypertext link is clicked or “activated”

Links External Image Hyperlink

An image hyperlink is an image that when clicked, will take you to another place in that document or page, to an entirely new document or page, or send an e-mail message.

XHTML Code:

<a href=‘http://cs.senecac.on.ca/~msaul’><img src=‘myface.png’ alt=‘Picture of My Face’ /> </a>

Result:

The image tag will make web browser display image when becomes the link.

Clicking image will link to URL described in the hypertext reference.

Links Additional Link Types

External Link with bookmark eg. <a href=‘sample.html#keyword’>

Note: in order to create this internal link, you must use similar anchor reference in destination web page before the part that deals with “keyword”

i.e. <a name=‘keyword’></a>

Internal Link (bookmark) Same as with example above, but web page filename not

required, and other anchor tag with name attribute must occur before the part that deals with “keyword”

eg. <a href=‘#keyword’>

<a name=‘keyword’></a>

Images The use of images may make your web page

more attractive to visitors.

The <img /> tag is a non-empty tag that instructs the web browser how to display the image.

Various attributes for the tag are used to provide a location to load the image, provide information regarding the image when the image is loading, as well as format the image in terms of size (width and height) and borders.

Images src attribute

The src attribute of the <img> tag indicates the image location to display. The image location can be specified by a pathname relative to web page file’s location (relative pathname) or a URL (absolute pathname).

eg. <img src=‘URL’ /> <img src=‘relative-file-pathname’ />

Note: the minimum required attributes for the <img> tag are src and alt (the alt attribute is discussed in the next slide)

Images alt attribute

The alt attribute (alternative name), is what shows up in place of the picture, if the picture fails to load or if the visitor has turned “loading images” off.

The alternative name is just a brief summary of what the picture is, so if the picture does fail to load, the visitor can still tell what it is supposed to be

eg. <img src=‘file-pathname’ alt=‘Picture of

lights’ />

Images

width and height attribute

If you specify the height and width attributes, the browser uses them to reserve a place for the image on the page, and loads any text and other page elements instead of waiting for the image to load.

eg. <img src=‘file-pathname’ width=‘100’ height=’50’ />

Images align attribute

The align attribute sets the alignment of the image. The default alignment of an image (in not specified) is

left. You can assign the values of right and center to right-align and center align the image respectively.

Notice the “American” spelling of center (i.e not centre which is the Canadian spelling – this won’t work)

eg. <img src=‘mypic.png’ alt=‘me’ align=‘right’ /> <img src=‘mypic.png’ alt=‘me’ align=‘center’ />

Images border attribute

By default a border may appear around an image that is used in a link (i.e. an active image).

You can remove borders to display an active image by assigning the border attribute a value of zero.

eg <img src=‘mypic.png’ alt=‘me’ border=‘0’ />

You can increase the thickness of the border around an active image by assigning a larger value to the border attribute

eg <img src=‘mypic.png’ alt=‘me’ border=‘10’ />