SlideShare a Scribd company logo
NAVIGATIONAL AIDS AND DIVISION BASED
LAYOUT
SESSION 8
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1
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
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.
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.
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.
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.
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.
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.
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>
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.
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>
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;
}
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;
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.
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>
Transition Support
Presented by Muhammad Ehtisham Siddiqui (BSCS)
16
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.
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
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”
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>
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/
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)”/>
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
Questions?
Presented by Muhammad Ehtisham Siddiqui (BSCS)
24

More Related Content

Similar to Buiding Next Generation Websites Session 8 by Muhammad Ehtisham Siddiqui

Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A
 
Web design
Web designWeb design
Web design
katetreess
 
blogger html & css.pdf
blogger html & css.pdfblogger html & css.pdf
blogger html & css.pdf
devbhargav1
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
Mónica Sánchez Crisostomo
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
ADMEC Multimedia Institute
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
AsendraChauhan1
 
Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
nariyaravi
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
Nicole Ryan
 
Using Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
Using Tailwind Shadow: An Easy Guide to Custom Shadows - BlogsUsing Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
Using Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
RonDosh
 
Use Tailwind Select for Easy and Reliable Dropdowns - Blogs
Use Tailwind Select for Easy and Reliable Dropdowns - BlogsUse Tailwind Select for Easy and Reliable Dropdowns - Blogs
Use Tailwind Select for Easy and Reliable Dropdowns - Blogs
RonDosh
 
ashish ppt webd.pptx
ashish ppt webd.pptxashish ppt webd.pptx
ashish ppt webd.pptx
ashishsaini773461
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
Ravi Bhadauria
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
Khoa Quach
 
Lit 20170306
Lit 20170306Lit 20170306
Lit 20170306
Scott Williams
 

Similar to Buiding Next Generation Websites Session 8 by Muhammad Ehtisham Siddiqui (20)

Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Web design
Web designWeb design
Web design
 
blogger html & css.pdf
blogger html & css.pdfblogger html & css.pdf
blogger html & css.pdf
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
 
Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
 
Using Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
Using Tailwind Shadow: An Easy Guide to Custom Shadows - BlogsUsing Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
Using Tailwind Shadow: An Easy Guide to Custom Shadows - Blogs
 
Use Tailwind Select for Easy and Reliable Dropdowns - Blogs
Use Tailwind Select for Easy and Reliable Dropdowns - BlogsUse Tailwind Select for Easy and Reliable Dropdowns - Blogs
Use Tailwind Select for Easy and Reliable Dropdowns - Blogs
 
ashish ppt webd.pptx
ashish ppt webd.pptxashish ppt webd.pptx
ashish ppt webd.pptx
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
 
Lit 20170306
Lit 20170306Lit 20170306
Lit 20170306
 

More from Muhammad Ehtisham Siddiqui

C programming Tutorial Session 4
C programming Tutorial Session 4C programming Tutorial Session 4
C programming Tutorial Session 4
Muhammad Ehtisham Siddiqui
 
C programming Tutorial Session 4
C programming Tutorial Session 4C programming Tutorial Session 4
C programming Tutorial Session 4
Muhammad Ehtisham Siddiqui
 
C programming Tutorial Session 3
C programming Tutorial Session 3C programming Tutorial Session 3
C programming Tutorial Session 3
Muhammad Ehtisham Siddiqui
 
C programming Tutorial Session 2
C programming Tutorial Session 2C programming Tutorial Session 2
C programming Tutorial Session 2
Muhammad Ehtisham Siddiqui
 
C programming Tutorial Session 1
C programming Tutorial Session 1C programming Tutorial Session 1
C programming Tutorial Session 1
Muhammad Ehtisham Siddiqui
 
HTML5 Web storage
HTML5 Web storageHTML5 Web storage
HTML5 Web storage
Muhammad Ehtisham Siddiqui
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
JavaScript Session 2
JavaScript Session 2JavaScript Session 2
JavaScript Session 2
Muhammad Ehtisham Siddiqui
 
JavaScript Session 3
JavaScript Session 3JavaScript Session 3
JavaScript Session 3
Muhammad Ehtisham Siddiqui
 
Javascript session 1
Javascript session 1Javascript session 1
Javascript session 1
Muhammad Ehtisham Siddiqui
 
Html audio video
Html audio videoHtml audio video
Html audio video
Muhammad Ehtisham Siddiqui
 
Html 5 geolocation api
Html 5 geolocation api Html 5 geolocation api
Html 5 geolocation api
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation  Websites Session 7 by Muhammad Ehtisham SiddiquiBuilding Next Generation  Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites by Muhammad Ehtisham Siddiqui
Building Next Generation Websites by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites by Muhammad Ehtisham Siddiqui
Building Next Generation Websites by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session6
Building Next Generation Websites Session6Building Next Generation Websites Session6
Building Next Generation Websites Session6
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session5
Building Next Generation Websites Session5Building Next Generation Websites Session5
Building Next Generation Websites Session5
Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session4
Building Next Generation Websites Session4Building Next Generation Websites Session4
Building Next Generation Websites Session4
Muhammad Ehtisham Siddiqui
 
Session4
Session4Session4
Office session14
Office session14Office session14
Office session14
Muhammad Ehtisham Siddiqui
 

More from Muhammad Ehtisham Siddiqui (20)

C programming Tutorial Session 4
C programming Tutorial Session 4C programming Tutorial Session 4
C programming Tutorial Session 4
 
C programming Tutorial Session 4
C programming Tutorial Session 4C programming Tutorial Session 4
C programming Tutorial Session 4
 
C programming Tutorial Session 3
C programming Tutorial Session 3C programming Tutorial Session 3
C programming Tutorial Session 3
 
C programming Tutorial Session 2
C programming Tutorial Session 2C programming Tutorial Session 2
C programming Tutorial Session 2
 
C programming Tutorial Session 1
C programming Tutorial Session 1C programming Tutorial Session 1
C programming Tutorial Session 1
 
HTML5 Web storage
HTML5 Web storageHTML5 Web storage
HTML5 Web storage
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
JavaScript Session 2
JavaScript Session 2JavaScript Session 2
JavaScript Session 2
 
JavaScript Session 3
JavaScript Session 3JavaScript Session 3
JavaScript Session 3
 
Javascript session 1
Javascript session 1Javascript session 1
Javascript session 1
 
Html audio video
Html audio videoHtml audio video
Html audio video
 
Html 5 geolocation api
Html 5 geolocation api Html 5 geolocation api
Html 5 geolocation api
 
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation  Websites Session 7 by Muhammad Ehtisham SiddiquiBuilding Next Generation  Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites by Muhammad Ehtisham Siddiqui
Building Next Generation Websites by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites by Muhammad Ehtisham Siddiqui
Building Next Generation Websites by Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session6
Building Next Generation Websites Session6Building Next Generation Websites Session6
Building Next Generation Websites Session6
 
Building Next Generation Websites Session5
Building Next Generation Websites Session5Building Next Generation Websites Session5
Building Next Generation Websites Session5
 
Building Next Generation Websites Session4
Building Next Generation Websites Session4Building Next Generation Websites Session4
Building Next Generation Websites Session4
 
Session4
Session4Session4
Session4
 
Office session14
Office session14Office session14
Office session14
 

Recently uploaded

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 

Recently uploaded (20)

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 

Buiding Next Generation Websites Session 8 by Muhammad Ehtisham Siddiqui

  • 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

Editor's Notes

  1. Presentation slide for courses, classes, lectures et al.
  2. Beginning course details and/or books/materials needed for a class/project.
  3. Beginning course details and/or books/materials needed for a class/project.
  4. Beginning course details and/or books/materials needed for a class/project.
  5. Beginning course details and/or books/materials needed for a class/project.
  6. Beginning course details and/or books/materials needed for a class/project.
  7. Beginning course details and/or books/materials needed for a class/project.
  8. Beginning course details and/or books/materials needed for a class/project.
  9. Beginning course details and/or books/materials needed for a class/project.
  10. Beginning course details and/or books/materials needed for a class/project.
  11. Beginning course details and/or books/materials needed for a class/project.
  12. Beginning course details and/or books/materials needed for a class/project.
  13. Beginning course details and/or books/materials needed for a class/project.
  14. Beginning course details and/or books/materials needed for a class/project.
  15. Beginning course details and/or books/materials needed for a class/project.
  16. Beginning course details and/or books/materials needed for a class/project.
  17. Beginning course details and/or books/materials needed for a class/project.
  18. Beginning course details and/or books/materials needed for a class/project.
  19. Beginning course details and/or books/materials needed for a class/project.
  20. Beginning course details and/or books/materials needed for a class/project.
  21. Beginning course details and/or books/materials needed for a class/project.
  22. Beginning course details and/or books/materials needed for a class/project.
  23. Beginning course details and/or books/materials needed for a class/project.
  24. Example graph/chart.