Links and Links and Images Images

LinksLinks• HTML uses a hyperlink to link to another

document on the Web• A hyperlink can be either text or a picture• Links are created with the anchor tag

– (<a></a>)– href is the attribute used to put in the address of the

document or web site being linked to• A simple anchor tag looks like this:

– <a href=“http://www.uen.org”>My Favorite Page</a>• The ‘a’ in the tag tells the browser the tag is an

anchor tag. • The href stands for hyper reference• The text between the <a> and </a> tags appears in

the browser and when clicked on, will link to the website or page that is part of href

Create this pageCreate this page• Copy “lastpage.html from the student server and paste

it into your folder in thawspace. You will need it for this document

• Open the html Template and create this document

<a href="lastpage.html">This text</a> is a link to a page on this Web site.<br><br>

<a href="http://www.microsoft.com/">This text</a> is a link to a page on the World Wide Web. Save as “links.html” The first link is to a page on

the same site as the this page. The second link is to www.microsoft.com

Other Anchor AttributesOther Anchor Attributes• With the target attribute, you can

define where the linked document will be opened.

• The line below will open the document in a new browser window:– <a href="http://www.microsoft.com/"

target="_blank">Microsoft</a> • Open the Links file and insert the

target attribute into each anchor tag

The Anchor Tag and the The Anchor Tag and the Name AttributeName Attribute

• The name attribute is used to create a named anchor.– Links that can jump directly into a specific section on a page

that is named as follows• <a name="label">Text to be displayed</a>

– You have to have an anchor with a name attribute at the location where you want to go on the page

– In your anchor with the href, you need to give the name of the anchor that you want to go to.

• Examples:• <a name="tips"> </a> (name)

Useful Tips Section• <a href="http://www.w3schools.com/html_links.asp#tips"> Jump

to the Useful Tips Section</a> (link directly to name from another page)

• <a href="#tips">Jump to the Useful Tips Section</a> (link to name from within the same page)

Notice # sign

You TryYou Try• Copy & paste Chapters.html into your

folder in thawspace• Create a name anchor for chapters 4,

8, 12, 16 – Example <a name=“c4”></a>

Chapter 4• At the top of the page, create a table

of contents that will let you jump to each of those chapters– Example

<a href="#c4">See Chapter 4</a> (do this for each of the chapters

E-mail LinkE-mail Link• Open up your links.html file and

add an email link– <a href=“mailto:mbrunson@dcsd.org”>

• Add the email link again, this time including a command to add a subject to the e-mail – <a href="mailto:mbrunson@dcsd.org.com

?subject=I have Questions">

Change color of linksChange color of links• Goes in body tag

– link=“green”– vlink=“red” (vlink = visited link)

• Change the color of the link and visited link in the links.html page

• Add a new link to Disney: <a href=“http://www.disney.com”>Disney</a>

ImagesImages• All information for images is contained

inside the <img> tag – There is no closing </img> tag

• Attributes of <img> tag– src: source of the image (address)

example: <img src=“imagename.jpg”>– Height=“number of pixels” example

height=“200”– Width=“number of pixels”– Align=“right”

Images Alt attributeImages Alt attribute• used to define an "alternate text" for

an image • Example: Alt=“description of picture”

– tells the reader what he or she is missing on a page if the browser can't load images

– Also, if hearing impaired, alt is read out loud by software

You TryYou Try

• Copy the images folder from the student file to your folder in thawspace

• Create an html file (use template)• Save as smile.html

You try part 2You try part 2Key in:

This should make you smile<img src=“images/smile.jpg“ alt=“smiling baby”>• When you have images in a folder, you need to

key in the path to your file • Change the width of the then to 200 (refresh your

page after each change)• Change alt to, “A smile starts at the lips and

spreads to the eyes.”• Change the alignment of the image to right

You Try Part 3You Try Part 3• Make the following changes:

– Change the width to 300– Change the alignment to center

• You can make an image be a link.• Add the following link to the picture

<a href=http://en.wikipedia.org/wiki/Smile>

Image for the backgroundImage for the background• An attribute inside of the body tag:

– Background=“imagename.jpg”

• Try it on your smile.html file• Add bg1.jpg as the background

image (in body tag)