links and images. links html uses a hyperlink to link to another document on the web a hyperlink can...
DESCRIPTION
Create 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 This text is a link to a page on this Web site. This text 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 toTRANSCRIPT
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:[email protected]”>
• Add the email link again, this time including a command to add a subject to the e-mail – <a href="mailto:[email protected]
?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)