This document discusses navigational aids and division-based layout in HTML5. It begins by listing the objectives of explaining semantic tags, tag layouts, navigation bars, and divisions. It then introduces the topic and defines semantic tags, including structural tags like header, nav, footer, section, article, and aside, as well as text-level tags like mark, time, meter, and progress. Next, it covers navigation bars, including text-based and graphical navigation bars. It also discusses image sizing, padding, thumbnails, captions, and CSS3 transitions.

1. NAVIGATIONAL AIDS AND DIVISION BASED
LAYOUT
SESSION 8
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1

2. Objectives
 Explain HTML5 semantic tags
 Explain HTML5 semantic tag layouts
 Explain the usage of navigation bar
 Describe a text-based and graphical
navigation bar
 Explain image mapping
 Explain divisions in HTML5
Presented by Muhammad Ehtisham Siddiqui (BSCS)
2

3. Introduction
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
3
 For designing a Web site, a number of elements and principles are
used to get the desired results.
 . Using these principles and elements helps to develop a rich,
attractive, efficient, and aesthetically pleasing Web site.
 In other words, using some HTML tags and graphics does help to
develop a useful and efficient Web site. Navigation bar plays an
important role in making the Web page user-friendly.

4. Semantic Tags
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
4
 HTML5 has evolved by introducing new elements that brought
semantics to higher level.
 New tags were developed to create stable semantic structure.
 . The earlier version of HTML had the universal tag div which was
used to accomplish various tasks in the HTML structure.
 The constraint with div tag is that, it confused the user when
multiple div tag was used in large coding. Now, HTML5 has
introduced two types of semantic tags.

5. Structural Semantic Tag
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
5
They are the block level elements and are used to structure pages. The new structural semantic
elements are as follows:
 Header
 The header element represents the header of a Web page. It can be used either at the top of the
document or at the top of a section.
 Nav
 The nav element represents a section of a Web page that contains navigation links/menus to other
Web pages or to other parts within the Web page.
 Footer
 The footer is similar to the header and can be present as the footer either for the document or for
the section.
 Section
 The section element represents a section of a Web document. It is used for grouping related
content and is different from other content groups present on the Web page.
 Article
 The article element represents a section of content that is independent of a Web page or site
content. It is self-contained and stands on its own.
 Aside
 The aside element is used for representing the content that is related to the main text of the
document. It aligns itself as a sidebar.

6. Text-level Semantic Tags
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
6
 Mark
 The <mark> tag is used for defining marked or highlighted text because of its relevance to the
context. For example, a mark tag can be used for highlighting words in a Web page that a visitor
searched for.
 Time
 The <time> tag is used for defining either the time, or a date in the Gregorian calendar. It is used
optionally with a time and a time-zone offset. For example, a Web user can add birthday
reminders or scheduled events to the user’s calendar and enable the search engines to produce
better search results.
 Meter
 The <meter> tag displays markup or scalar measurement within a defined range. Absolute scalar
values, such as height or weight, are not represented automatically by the meter tag. For this, the
user must specify the height and weight within the known range of values. It is also used for
displaying fractional value.
 Progress
 The <progress> tag can be used with JavaScript to display the progress of a task.

7. Navigation Bar
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
7
 Navigation is one of the most important elements in Web design.
 Web-layouts do not have any specific physical representation that a user
can depend on except for a consistent navigation menu.
 It is one of the most important design elements which provide the users
with a sense of orientation and guide them through the Web site.
 In Web designing, a navigation menu is always on navigation bars, which
can be horizontal or vertical.
 A navigation bar is a section of a Web site 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.

8. Text Based Navigation
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
8
 Navigation menu is the most used element than any other element on any Web page.
 It is important to make sure that the Web site visitors should be able to easily
navigate through the site structure.

9. Code (try this)
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
9
<!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>

10. Graphical Navigation Bar
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
10
 Graphical navigation bar is more captivating than text-based navigation bar as it
uses icons.
 The usability of the page increases with a good choice of icon for the navigation bar.
 It can also make the Web site more noticeable for the user visiting the Web site. In
other words, graphical navigation bar is better than text-based navigation as it gives
a visual appeal to the visiting users.
 The only disadvantage is that, since it uses images, it takes longer time for a page to
load. Also, the Web page will be useless for users using a non-graphic browser.

11. Figure Caption tag <figcaption>
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
11
 The <figcaption> tag allows the user to add a caption to the image. The
caption always appears along with the image even if the image floats in
Web site layout.
 Code:
<figure>
<img src=”flower1.jpg”>
<img src=”flower2.jpg”>
<img src=”flower3.jpg”>
<figcaption>The different types of flowers</figcaption>
</figure>

12. CSS Image Sizing/ Padding
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
12
 SIZE
 Size of an image is specified in pixels.
 The height and width property sets the height and width of the image.
 One can specify the width and the height will be resized or vice versa.
 CODE:
p.ex {
height:100px;
width:100px;
}

13. CSS Image Sizing/ Padding
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
13
 PADDING
 The CSS padding property is used to specify the space between the element
border and the element content.
 It is used to separate them from the surrounding element.
 The background color of the element affects the padding property.
 Using separate properties such as top, right, bottom, and left, different padding
values can be specified and the padding can be changed separately.
 CODE
 padding-top:10px;
 padding-bottom:10px;
 padding-right:15px;
 padding-left:15px;
 CODE
 padding:25px 50px 75px 100px;

14. Thumbnail Graphics
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
14
 The speed of loading a page of a Web site is reduced if high-resolution
graphics are used.
 High-resolution graphics are required to improve the effectiveness of the site
and cannot be avoided.
 Hence, to avoid this issue, thumbnails are used.
 A thumbnail is a small image, or a part of a larger image.
 Clicking the thumbnail image will link to the larger original image, which can be
viewed and downloaded.
 Even a hover effect can be given through CSS and JavaScript.

15. Thumbnails
Presented by Muhammad Ehtisham Siddiqui (BSCS)
15
 Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img { border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px; }
img:hover {
box-shadow: 0 0 2px 1px ; }
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<p>Click on the image to enlarge it.</p>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" style="width:150px">
</a>
</body>
</html>

16. Transition Support
Presented by Muhammad Ehtisham Siddiqui (BSCS)
16

17. CSS 3 Transitions
Presented by Muhammad Ehtisham Siddiqui (BSCS)
17
 Interactivity is one of the important aspects of animation.
 Earlier, a combination of HTML, CSS, and JavaScript were used to
animate objects on the Web.
 In 2007, Apple introduced the CSS transition, which later became a
proprietary feature of Safari called CSS Animation.
 Representatives from Apple and Mozilla began adding the CSS
transitions module to the CSS Level 3 specification, closely
modeled on what Apple had already added to Webkit and moz.

18. Configuring the animations
Presented by Muhammad Ehtisham Siddiqui (BSCS)
18
 A CSS animation sequence can be created by styling the element with the
animation property.
 This property can be used to configure the timing, duration, and sequence of
the animation. @keyframes rule define the appearance of the animation.
 The keyframe is used to describe the rendering of the element in the animation
sequence.
Property Description
@keyframes Is used for specifying the animation
animation Is a shorthand property representing all the animation
properties, except the animation-play-state property
animation-name Is used for specifying the name of the @keyframes
animation
animation-duration Is used for specifying the duration of an animation cycle in
seconds or milliseconds. Default value is 0

19. Configuring the animations
Presented by Muhammad Ehtisham Siddiqui (BSCS)
19
Property Description
animation-
timingfunction
Is used for describing the progress of animation over one
cycle of its duration. Default value is “ease
animation-delay Is used for specifying the start value of animation. Default
value is 0
animation-
iterationcount
Is used for specifying the number of times an animation is
played. Default value is 1
animation-
direction
Is used for specifying whether or not the animation should
play in reverse on alternate cycles. Default value is
“normal”
animation-play-
state
Is used for specifying the state of the animation, that is
whether it is running or paused. Default value is “running”

20. Example (Try it)
Presented by Muhammad Ehtisham Siddiqui (BSCS)
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/><style>
body {
display: flex;
justify-content: center;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.ball:hover{background-color:#0C6;animation:running;animation-duration:0.5s;animation-delay:2s;
}@keyframes bounce { from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}</style>
<title>Untitled Document</title></head><body>
<div class="ball"></div></body>
</html>

21. Example 1. (Try it)
Presented by Muhammad Ehtisham Siddiqui (BSCS)
21
CSS :
<style type="text/css"> #traveler { position: absolute; width: 20px; height: 240px; -webkit-animation-
name: travel; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -
webkit-animation-direction: alternate; -webkit-animation-duration: 4.8s; animation-name: travel;
animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
animation-duration: 4.8s; } #bouncer { position: absolute; width: 20px; height: 20px; background:
red; border-radius: 10px; -webkit-animation-name: bounce; -webkit-animation-iteration-count:
infinite; -webkit-animation-duration: 4.2s; animation-name: bounce; animation-iteration-count:
infinite; animation-duration: 4.2s; } </style>
HTML:
<div id="stage">
<div id="traveler">
<div id="bouncer">
<!-- -->
</div>
</div>
</div>
Link: https://www.the-art-of-web.com/css/bouncing-ball-animation/

22. Using CSS on Mobile Devices
Presented by Muhammad Ehtisham Siddiqui (BSCS)
22
 There are different ways to provide Web pages for mobile devices.
 The user can make use of style sheet for the handheld devices (all mobile
browsers do not recognize it).
 IPhone’s Safari and Opera’s Mini browsers support a new feature of CSS3
called media queries.
 CODE:
<link rel=”stylesheet” href=”styles/mobile.css” media=”only screen and (max-
device-width: 480px)”/>

23. Using CSS on Mobile Devices
Presented by Muhammad Ehtisham Siddiqui (BSCS)
23
 The five ways to provide Web pages for mobile devices are as follows:
1. Define a style sheet for mobile devices
2. Include a link to a mobile version of the Web site
3. Use JavaScript to detect mobile devices and redirect
4. Use a server-side scripting language to detect and redirect
5. Use the WURFL to detect mobile devices

24. Questions?
Presented by Muhammad Ehtisham Siddiqui (BSCS)
24