Week 6 Lecture

WEEK 6:
LINKS AND
IMAGES
WEEK 6

• HTML tags can have attributes, attributes provide additional
information to the tag
• Attributes are always specified in the opening tag
• Attributes come in name/value pairs like: name=“value”
• Attribute values should always be enclosed in quotes “”
• Some HTML tags require attributes to work
REVIEW… ATTRIBUTES

HTML ATTRIBUTES: LINKS
• HTML links are defined with the <a> tag
• The link address or link destination is specified in the “href”
attribute:
• <a>This link will not work because there is no attribute
assigned</a>
• <a href=“http://www.w3schools.com”>This is a link</a>

LINKS
• The <a> tag defines a hyperlink, which is used to link from one
page to another or to another destination of your choice.
• The <a></a> tag requires both an opening and closing tag.
• The most important part when creating any link is to include
the “href” attribute, which indicates the link’s destination.
Without the “href” attribute you are not creating a link.
• “href” means “hyperlink reference”

LINKS
Any text between the opening and closing <a> tag will
become the clickable text user click on, seen in blue below:
<a href=“http://www.mohawkcollege.ca”>Link</a>
<a href=“index.html”>Homepage</a>

TYPES OF LINKS
Absolute path hyperlinks:
<a href=“http://www.facebook.com”>Facebook</a>
• Links to webpages and resources (eg. PDF) on the web
• Links outside of the site
• Must contain “http://…” so the browser knows to look on the
web for that resource
• www is not always needed… sometimes URLs will have other
text where the www is… this is called a subdomain

TYPES OF LINKS
Relative path hyperlinks:
<a href=“index.html”>My Homepage</a>
• Links to webpages and resources located within the site (siblings)
• Links to resources or files that are on the same domain
• Examples:
• mohawkcollege.ca/file
• mohawkcollege.ca/folder/file
• mohawkcollege.ca/document.pdf
• mohawkcollege.ca/image.jpg

TYPES OF LINKS
Email hyperlinks:
<a href=“mailto:info@mohawkcollege.ca”>Email Us</a>
• Must include href=“mailto: followed by the email address
• Additional attributes can be included to assign the subject link
of the email, even the contents of the email!

NEW WINDOWS/TABS
• Find it annoying when new windows open unexpectedly?
• Nearly everyone agrees that users ought to be alerted when a
link does not open in the current window or frame
• The problem?
Some users may not understand they’ve been taken to a new
window… they may try and use the back button and get
frustrated or worse – lost on a page!
• The solution?
Communicate that they’re being taken to a new window – use
an icon or a title in the link

NEW WINDOWS/TABS
How to make a link open in a new
window or tab?
• Add the attribute: target=“_blank” to the link…
<a href=“link.html” target=“_blank”>Open page in a new tab</a>

Open up Dreamweaver and we’ll practice…
IN-CLASS PRACTICE!

PRACTICE…
Create the following structure in a new html file:
<p>Linking to content and resources:</p>
<ol>
<li><a href=“about.html”>Relative Link</a>
</li>
<li><a href=“http://www.facebook.com/mohawkcollege” >Absolute Link</a>
</li>
<li><a href=“mailto:info@gmail.com”>Email Link<a>
</li>
</ol>

Remember to think like you’re listening to the content on the page…
MAKING LINKS ACCESSIBLE

ACCESSIBILITY MATTERS!
Making hypertext links accessible is one of the most
basic and important aspects of web accessibility!
• Standard hypertext links work with all technologies and platforms
and users of all abilities can access them
• But…some types of links are more accessible than others
• Inaccessible links are one of the most severe barriers to overall
accessibility

ACCESSIBILITY:
USING A KEYBOARD
Users must be able to navigate to and select each
link using the keyboard alone!
• In most browsers, the Tab key allows users to jump from link to
link, and the Enter key allows users to select a link
• If the only way to access a link is with a mouse, the link is
unusable by people who cannot use a mouse

Visit cnib.ca and try using the TAB and ENTER keys to move to another
page… Easy?
TRY IT OUT!

Visit canada.ca/en/ and try using the TAB, and arrow (< >) keys to show
the drop down navigation… Easy?
TRY IT OUT!

Visit honda.com and try using the TAB key to get to the ABOUT section
on the homepage… Easy?
TRY IT OUT!

ACCESSIBILITY:
SCREEN READERS
• Most screen readers say "link" before each link – so links don’t
need the word “link” in the link text
• For example, a Products link would be read as "link
products”
• Screen reader users often navigate from link to link, skipping
the text in between
• This is done by using keyboard shortcuts
• Tabbing from link to link is a way of skimming web content,
especially if the user is looking for a link on a page

ACCESSIBILITY:
SCREEN READERS
• Links with no context such as “Click Here” are not useful
• Add context to the link text
• BAD: Click here for the arena schedule
• GOOD: View the arena schedule
• Place the distinguishing information of links at the beginning of
a link.
• Users can choose to listen to all links from a-z
• Use familiar phrases whenever possible
• Eg. Contact Us is better than You can can contact us

ACCESSIBILITY:
LONG VS. SHORT LINKS
Long:
• Be long enough to convey the purpose of the link but no longer
• Screen reader users cannot visually skim through lengthy
links, they must listen to all text
Short:
• There is no minimum length of link text, as long as the link is
not empty
• Keep in mind that really small link areas may be difficult to click
on for some users

ACCESSIBILITY:
SUMMARY
• Always use descriptive language in links
• Create unique links, don’t use meaningless text:
eg. “Click Here”
• Be cautions about opening links in a new window
• Remember absolute, relative and email coding standards

Images can be used to provide branding, communicate critical
information, or make a site more visually appealing
USING IMAGES ON A SITE

WHY ARE IMAGES
IMPORTANT?
• Articles with images get 94% more total views
• Including a Photo and a video in a press release increases views by
over 45%
• 60% of consumers are more likely to consider or contact a business
when an image shows up in local search results
• In an ecommerce site, 67% of consumers say the quality of a
product image is “very important” in selecting and purchasing a
product
• In an online store, customers think that the quality of a products
image is more important than product-specific information,
descriptiond and ratings /reviews
• Engagement rate on Facebook for photos is 37% higher over text

Full background image… impactful!
USING IMAGES ON A WEB SITE

Full background image… setting a mood and feel for the site

Large HERO images filling homepages… major trend

Interactivity… Sliders that let you view a series of images with text

Interactivity… using Javascript and techniques like parallax.

ADDING IMAGES
• The <img /> tag is used to insert image into our webpages
• Image tags are similar to <br /> and <hr />, they’re “self closing”: -
the closing tag is built in
• Images require the “src” attribute that specifies the location of the
image
• Without the “src” attribute (src is a short-form of source),
your image will not work!
• Example:
<img src=“images/photo.jpg” />

ADDING IMAGES:
THE PATH
• Adding an image is very similar to adding a hyperlink
• You can add an image in a couple of ways, which include Absolute &
Relative paths
• Absolute: when the image resides OUTSITE your site
• Relative: when the image reside ON your site
Absolute path:
<img src=”http://www.mohawkcollege.ca/images/photo.jpg” />
Relative path:
<img src=”images/photo.jpg” alt=“photo” />

ADDING IMAGES:
ALT ATTRIBUTES
• Images also need the “alt” attribute
• The alt attributes provides alternative information for an image if
a user for some reason cannot view it
• Reasons an image may not be viewable:
• a slow connection
• an error in the “src” attribute
• the user uses a screen reader
• You cannot see the alternate text in the browser
Example:
<img src=”images/photo.jpg” alt=“Photo of
something” />

ADDING IMAGES:
LINKING IMAGES
• All images on a webpage can be used as a link
• Now that we know how to code both, creating an image link is easy, we just need to put
everything in the correct order. Just as text in between HTML is being described as something,
so can images
• Make sure to include all relevant “attributes” in order for the image and link to work correctly:
• “href” for links
• “src” for images
• The first part to any image link is the links itself:
<a href=“http://www.facebook.com” title=“Facebook”>
• The second part to any image link is the image
<img src=“images/fblogo” alt=“Facebook Logo” />
• The third part to any image link is the closing link tag
</a>
• Example:
<a href=“http://www.facebook.com” title=“Facebook”><img src=“images/
fblogo” alt=“Facebook Logo” /></a>

ADDING IMAGES:
LINKING IMAGES
1. The first part to any image link is the links itself:
<a href=“http://www.facebook.com” title=“Facebook”>
2. The second part to any image link is the image:
<img src=“images/fblogo” alt=“Facebook Logo” />
3. The third part to any image link is the closing link tag:
</a>

ADDING IMAGES:
LINKING IMAGES
Put it all together:
<a href=“http://www.facebook.com”
title=“Facebook”><img src=“images/
fblogo” alt=“Facebook Logo” /></a>
This logo would now be a clickable
link to Facebook

Let’s try inserting some images… open up eLearn and Dreamweaver!
IN-CLASS DEMO!

Week 6 Lecture

More Related Content

What's hot

Similar to Week 6 Lecture

More from Katherine McCurdy-Lapierre, R.G.D.

Recently uploaded

Week 6 Lecture