Links and Images

Links 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 –( ) –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: – My Favorite Page The ‘a’ in the tag tells the browser the tag is an anchor tag. The href stands for hyper reference The text between the and tags appears in the browser and when clicked on, will link to the website or page that is part of href

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 to

Other 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: – Microsoft Open the Links file and insert the target attribute into each anchor tag

The Anchor Tag and the Name 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 Text to be displayed –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: (name) Useful Tips Section Jump to the Useful Tips Section (link directly to name from another page) Jump to the Useful Tips Section (link to name from within the same page) Notice # sign

You Try Copy & paste Chapters.html into your folder in thawspace Create a name anchor for chapters 4, 8, 12, 16 –Example Chapter 4 At the top of the page, create a table of contents that will let you jump to each of those chapters –Example See Chapter 4 (do this for each of the chapters

Link Open up your links.html file and add an link – Add the link again, this time including a command to add a subject to the –

Change 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: Disney

Images All information for images is contained inside the tag –There is no closing tag Attributes of tag –src: source of the image (address) example: –Height=“number of pixels” example height=“200” –Width=“number of pixels” –Align=“right”

Images 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 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 2 Key in: This should make you smile 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 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

Image 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)