HTML5 Level 2

INTRODUCTION HTML5 TAGS CREATING LINKS

One of the most important aspects of web Links allow users to navigate from page to page
design is the way you lay out content on the TAG DESCRIPTION on your site. They can also be used to access
page. Webpage layout is the process of <header> The header element represents the internal and external documents in your site.
designing a user interface so a visitor can easily head of the webpage, but it is When you move the mouse over a link, the
navigate the site. A standard layout contains a </header> different from the head of the HTML mouse pointer will change into a hand. Most
banner on top, a navigation menu, a content document. The header is where the users define a link as an anchor and the <a> tag
area and a footer as shown in Figure 1. In this title, logo and slogan of the webpage defines the anchor followed by the attribute href
class, you will learn the new HTML5 layout are housed. It is the introduction to (Hypertext Reference). The attribute href defines
tags and some basic CSS (Cascading Style the site. the document you want to link to. The equal sign
Sheets) techniques to design your own website. connects the attribute to its value.
<nav> The nav element stands for
navigation. It represents a section of Before creating a link, you must know the file
LAYOUT </nav> the page that is reserved for name or site you want to link it to. Let’s say you
In the past, web designers used tables and navigation. It is a small container on want to link the library site to your webpage.
divider tags to lay out webpages. Today, top of the page with a collection of Your code should look like this:
designers have to deal with the challenge of links to other pages. It is the most <a href="http://www.ocls.info/">Library</a>.
building a more attractive site. HTML5 and popular site navigation design pattern However, if you want to add an About page to
CSS3 give designers a new way to lay out used in HTML5. your site, the code would look like this: <a
webpages. See Figure 1. href="About.html">About</a>.
<div> A container that allows us to create
Figure 1: HTML5 Layout layout subsections inside of the main Links allow users to jump from one section to
</div> section. It allows you to float the logo another on your website.
section to the left, and the navigation
to the right.

<a > The <a> tag defines a hyperlink,

which is used to link from one page
</a> to another.
<footer> The footer element represents the
footer of the webpage. It is a small
</footer> container located at the bottom of the
page. The footer may contain
copyright notices, contact information
or licensing information.

<img> The <img> tag defines an image in an Figure 2: Links Structure

HTML page. The <img> tag has two
</img> required attributes: src and alt.
 HTML5 Level 2
CREATING A FOOTER USING ICON FONTS ADDING COLOR
The footer element represents the footer of the Most modern websites have links to social media Adding colors to your site will make the site look
webpage. It is a small container located at the profiles. You can create links to Facebook, Twitter, very attractive, but colors have emotional value
bottom of the page. The footer is the last and even Instagram with a simple <a> tag. depending on culture and circumstances. For
section of an HTML webpage. The footer may example, the color yellow symbolizes cowardice
contain the following content: copyright To replace the text links with the actual logo of the in North America. In opposition, it symbolizes
notices, contact information, licensing social media site, you can implement an icon font. courage in Japan. Check other sites to get some
information, social media links, and other Icon fonts, like the online library Font Awesome, ideas about designing.
secondary links. See Figure 3. host hundreds of icons you can use on your
website. See Figure 4.
USING HEXADECIMAL CODES
Most web browsers are able to read color names
such as green or red. But to ensure consistency it
is recommended to use hexadecimal (HEX) or
Figure 3: Footer web colors. There are 16 Hexadecimal figures.
They range from 0 to 9 and A to F where the
letters A to F represent the numbers 10 to 15. A
<footer> Figure 4:Sample of Font Awesome Icons single color consists of a # sign followed by 3
<a href="http:// pairs of two-digit hexadecimal each. See Figure 6
www.facebook.com/">Facebook</a> 1. Navigate to http://www.fontawesome.io/icons for more details.
<a href="http://www.twitter.com/">Twitter</a> a. Search for ‘Facebook’. Click on the
<a href="http:// Facebook icon.
www.instagram.com/">Instagram</a> b. Copy the <i> tag that is generated. Color name Hex
</footer> aqua #00FFFF
black #000000
blue #0000FF

ADDING HTML IMAGES fuchsia #FF00FF

gray #808080
Images can easily be added into any HTML5
green #008000
website with the use of the <img> tag. The Figure 4a: Sample of Font Awesome Icons
image tag allows you to load an image by lime #00FF00
pointing to the location of the image file. The maroon #800000
1. Navigate back to index.html, to paste the
src attribute allows you to point to the exact copied <i> tag inside the footer. navy #000080
location of the image. Notice how the image Repeat the above steps for all social media olive #808000
tag is not paired with a closing tag. It is a icons like Twitter and Instagram. purple #800080
self-closing tag. red #FF0000
Figure 6: silver #C0C0C0
<img src="image.jpg" /> Hexadecimal teal #008080
Colors
<img src="image.jpg" alt="Caption for image" /> white #FFFFFF
Figure 5: Social Media Icons yellow #FFFF00