Scribd
Upload
130 views

HTML5 S08 Navigation, Layout

Navigation and Layout of HTML5

Uploaded by

martin duy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
130 views

HTML5 S08 Navigation, Layout

Navigation and Layout of HTML5

Uploaded by

martin duy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

NexTGen Web

Session: 8

Creating Navigational Aids


and Division-Based Layout
Objectives

 Explain HTML5 semantic tags


 Explain HTML5 semantic tag layouts
 Explain the usage of navigation bar
 Describe a text-based and graphic navigation bar
 Explain image mapping
 Explain divisions in HTML5

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 2


HTML5 Semantic Tags

HTML5 has evolved by introducing new elements that brought


semantics to higher level.

Earlier version of HTML had the universal tag div which was used
to accomplish various tasks in the HTML structure.

Constraint with div tag is that, it confused the user when


multiple div tag was used in large coding.

HTML5 has introduced two types of semantic tags namely, text-


level and structural.

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 3


Structural Semantic Tags

Are block level elements and are used to


structure pages.
New structural semantic elements are as
follows:

Articl Nav
e

Structur Aside
al
Semantic
Sectio Tags
n

Foote
Header r

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 4


Text-level Semantic Tags

Are currently inline elements.


New text-level semantic elements are
as follows:
Progress

Text-
level Meter
Mark Semantic
Tags

Time

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 5


HTML5 Semantic Layout 1-6
<header> element provides introductory
information.
<head> tag provides information about the entire
document.
<header> tag is used only for the body of the Web page or for the
sections inside the body.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>My First Page</title>
</head>
<body>
<header>
<h1>Sample Blog </h1>
</header>
</body
</html>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 6


HTML5 Semantic Layout 2-6
nav element is a section which contains the
navigation link to other pages or links to
different sections within the page.
Navigational elements are helpful in identifying
large blocks of navigational data.

<body>
<header>
<h1>Sample Blog</h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
</body>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 7


HTML5 Semantic Layout 3-6
<section> is the main information bar that
contains the most important information of the
document.
It can be created in different formats. For
example, it can be divided into several blocks
or columns.

<body>
<header>
<h1>Sample Blog </h1> <section>

</header> <h1>Links</h1>
<nav> <ul>
<ul>
<li> home </li> <li><a href=”#”>Link 1</a></li>

<li> help </li> <li><a href=”#”>Link 2</a></li>


<li> contact </li> <li><a href=”#”>Link 3</a></li>
</ul>
</nav> </ul>

</section>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 8
HTML5 Semantic Layout 4-6
<aside> element is a column or a section that generally
contains data linked to the main information.
This element is used for typographical effects, such as
for sidebars, for groups of nav elements, for
advertising purposes, and so on.

<!DOCTYPE html> <section>


<html lang=”en”> <h1>Links</h1>
<body> <ul>
<header> <li><a href=”#”>Link 1</a></li>
<h1>Sample Blog </h1> <li><a href=”#”>Link 2</a></li>
</header> <li><a href=”#”>Link 3</a></li>
<nav> </ul>
<ul> </section>
<li> home </li> <aside>
<li> help </li> <blockquote>Archive Number One</blockquote>
<li> contact </li> <br>
</ul> <blockquote>Archive Number Two</blockquote>
</nav> </aside>
</body>
</html>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 9
HTML5 Semantic Layout 5-6
 The Code Snippet demonstrates the use of <footer> tag.

<body> <aside>
<header> <blockquote>Archive Number One</blockquote>
<h1>Sample Blog</h1> <br>
</header> <blockquote>Archive Number Two</blockquote>
<nav> </aside>
<ul> <footer>
<li> home </li> Copyright &copy; 2012-2013
<li> help </li> </footer>
<li> contact </li> </body>
</ul> </html>
</nav>
<section>
<h1>Links</h1>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</section>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 10


HTML5 Semantic Layout 6-6
<article> element helps to insert a self-contained
composition in an application, page, document, or
site.
<body>
<header> </section>
<h1>Sample Blog</h1> <aside>
</header> <blockquote>Archive Number 1</blockquote>
<nav> <br>
<ul> <blockquote>Archive Number 2</blockquote>
<li> home </li> </aside>
<li> help </li> <footer>
<li> contact </li> Copyright &copy; 2012-2013
</ul> </footer>
</nav> </body>
<section> </html>
<article>
First Blog entry
</article>
<article>
Second Blog entry
</article>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 11


Navigation Bar

Is one of the most important elements in Web design.

Web-layouts do not have any specific physical


representation except for a consistent navigation menu.

In Web designing, navigation menu are always on


navigation bars, which can be horizontal or vertical.
Navigation bar is a section of a Website or online page
intended to support visitors in browsing through the
online document.
Web pages will have a primary and a secondary
navigation bar on all pages which will include links to
the most important sections of the site.
Advantage of using a text-based navigation bar is that
it reduces the loading time of a page.

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 12


Text-based Navigation Bar
 The Code Snippet demonstrates the HTML code for a text-based
navigation bar.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href=”/home/”><font size=”6”>Home</font></a> |
<a href=”/news/”><font size=”6”>News</font></a> |
<a href=”/contact/”><font size=”6”>Contact</font></a>
|
<a href=”/about/”><font size=”6”>About</font></a>
</nav>
<h1>This is a Text-based Navigation Bar</h1>
</body>
</html>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 13


Graphical Navigation Bar with Rollover Effects

Similar to the graphical navigation bar except for


additional feature.

Moving the mouse over the linked image leads to a


change in the state of image.

State change of image leads to an image swapping


process.

When the mouse is moved off the image, the image


swaps back to the previous view.

This rollover effect creates an interactive


activity between the Web site and the visitor.
Rollover effect has two different activities that
include the image in the original view and the
changed image after mouse rollover.

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 14


Image Map
Are images with clickable areas linked to another page

Be Defined by using the <map> tag

<map> element contains a number of <area> elements for


defining the clickable areas in the image map.

The id attribute of the <map> tag when specified, must have


the same value as the name attribute.

<img src=”6.jpg” width=”600”


height=”300” alt=”cake”
usemap=”#cakemap” />
<map name=”cakemap”>
<area shape=”circle”
coords=”0,0,200,600”
href=”4.html” alt=”cake” />
</map>

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 15


Divisions 1-2
<div> tag defines a division in an HTML Web page.

Is used to group block-elements and format them with CSS.

New structural semantic tags reasonably reduce a lot of <div>


tag’s usage.

can be used when there is no other semantically appropriate


element left that suits the purpose in a Web page development.
It can be commonly used for stylistic purposes such as
wrapping some semantically marked-up content in a CSS-styled
container.

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 16


Division Positioning and Formatting 1-2

Elements can be positioned using the top, bottom, left,


and right properties.

These properties will not work unless the position of


the property is set.

There are five position properties in DIV elements


namely, static, relative, absolute, fixed, and inherit.

Only three properties are used namely, absolute,


relative, and fixed.

Positioning can be applied to any block element.

Default position for a block element (DIV) is static.

© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 17


Summary
 HTML 5 has introduced two types of semantic tags. They are namely, text-level and

structural.

 Structural semantic tags : Section, Header , Footer , Aside, Nav, Article

 Text level semantic tags : Mark, Time, Meter, Progress

 Navigation is the most significant element in Web design. Since Web-layouts does not have

any physical representation, a user can depend on consistent navigation menu.

 Text-based navigation bars are created as stand-alone navigation bars that are not

associated with icons. Text-based navigation bar is easy to create and can be displayed in

any Web browsers.

 Graphical navigation bar is better than text-based navigation as it gives a visual appeal to

the visiting users.

 The new structural semantic tags reasonably


© Aptech Ltd.
capture
Creating a lotAids
Navigational ofand
<div>‘s territory,
Division-Based but
Layout <div>8 tag
/ Session 18

You might also like