Week 5 Lecture

WEEK 5
WEEK 5:
LISTS,
ATTRIBUTES AND
LINKS

WHAT YOU ALREADY KNOW…
• HTML stands for Hypertext Markup Language, Its not a programming language but
rather a way of describing something

WHAT YOU ALREADY KNOW…
• <p> </p> = paragraph tag, for creating separation between areas of text
• HTML has 6 available heading tags: <h1> - <h6>
• The first heading tag <h1> is the biggest and boldest
• <h1> should only be used once per page
• Other headings can be as sub headings <h2> - <h6>
• <strong> - used to make portions or single words strong which appears
as bold
• <em> - used to make text or single words emphasized or italicized
• <br /> - used to insert a lines break in text – self closing
• <hr /> - used to insert a horizontal rule usually to indicate a new section of
text or for visual interest – self closing

UNORDERED LIST
• An unordered list starts with the <ul> tag and ends with the
closing </ul> tag.
• Each list item in the lists starts with the <li> tag and ends with the
</li> tag.
• Inside a list item you can put text, line breaks, images, links, other
lists, etc.
• The list items are marked with bullets (typically small black circles)
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

ORDERED LIST
• An ordered list starts with the <ol> tag and ends with the closing
</ol> tag.
• Each list item in the lists starts with the <li> tag and ends with the
</li> tag.
• Inside a list item you can put text, line breaks, images, links, other
lists, etc.
• The list items are marked with numbers
<ol>
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ol>

FORMATTING WITH
THE UL AND OL TAGS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Just some <strong>random text</strong>to make a
paragraph. Just some random text to make a paragraph. Just
some random text to make a paragraph.</p>
<ul>
<li>Whole Wheat Bread</li>
<li>Milk</li>
<li>Eggs</li>
</ul>
</body>
</html>

FORMATTING WITH
THE UL AND OL TAGS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Just some <strong>random text</strong>to make a
paragraph. Just some random text to make a paragraph. Just
some random text to make a paragraph.</p>
<ol>
<li>Whole Wheat Bread</li>
<li>Milk</li>
<li>Eggs</li>
</ol>
</body>
</html>

HTML ATTRIBUTES
• HTML tags can have attributes, attributes provide additional
information to the HTML tag
• Some HTML tags require attributes to work
• E.g. We can use the <img/> tag to place an image on our
page but the “attributes” actually specify which images to
use and where the image is located.
• Without the attribute, the tag is not complete and will not
work
• 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

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”
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> (absolute path)
<a href=“index.html”>Homepage</a> (relative path)

TYPES OF LINKS
Absolute path hyperlinks
<a href=“http://www.facebook.com”>Facebook</a>
• These are links to webpages on the Internet and resources on
the Internet
Relative path hyperlinks
<a href=“index.html”>My Homepage</a>
• These are links to webpages and resources located within our
“root” folder (stuff you have created)
Email hyperlinks
<a href=“mailto:info@mohawkcollege.ca”>Email Us</a>

ABSOLUTE PATH LINKS
• They are the full url including the “http protocol”
• They refer to a specific location on the web (a url), including
the domain name, eg. facebook.com
• Anytime you want to link to a resource outside of your “root”
website folder you must use an absolute path.
Example:
<a href=“http://www.mohawkcollege.ca”>Mohawk College</a>

RELATIVE PATH LINKS
• These are links to pages, images or other site assets within your
website folder structure
• They are “relative” to the location of your current page and the
“root” folder
• think that the files are related to each other like a sibling, living in
the same site
• They are not links to external websites, no http protocol is
needed.
Example:
<a href=“index.html”>Home</a>
<a href=“about.html”>About</a>

EMAIL LINKS
• These are links to an email address.
Example:
<a href=“mailto:info@mohawkcollege.ca”>Email Us</a>
• “mailto” is a simple protocol for sending emails
• Any text between the opening and closing <a> tag will become the
clickable text user click on, seen in blue above
• In this example, clicking on the words Email Us, would open up the
default email client on your computer

EMAIL LINKS
• Email hyperlinks should also contain the “title” attribute
• The “title” attribute provides a “tool tip” to the user when the
mouse is placed over the link in the web bowser
Example:
<a href=“mailto:info@mohawkcollege.ca” title=“Email
Mohawk”>Email Us</a>

ADDING LINKS
<!DOCTYPE html>
<html> …
<body>
<p>Just some random text to make a paragraph.</p>
<ol>
<li><a href=“about.html” title=“About the program”>Learn more about the
program</a></li>
<li><a href=“http://www.facebook.com/mohawkcollege.ca”
title=“Connect with us on Facebook”>Connect with us on Facebook</a>
</li>
<li><a href=mailto:info@mohawkcollege.ca title=“Email Us”>
Email Us<a></li>
</ol>
</body>
</html>

Week 5 Lecture

More Related Content

Week 5 Lecture