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:[email protected]”>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:[email protected]”>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

ADDING

IMAGES

WEEK 6

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

Education