Embed Size (px)
Citation preview
HTML
ATLOGYS
HTML5 INTRODUCTION PROGRAMME
RAMANI VINOTH
SENIOR WEB DEVELOPER
HTML
05/01/2023 2
Things you expect to know !!!
New Features that can be used today Best Practices of HTML5 Development New aspects of CSS3 Mobile friendly Website
HTML
05/01/2023 3
What is HTML5 ?
Where the web is going ?Everything new and interesting on web ?
Just some new markups ?
Here is the Future!!!Here is the Browser!!!
HTML
05/01/2023 4
How HTML5?
HTML CSS JavaScriptAPIs+ + =
Markup Forms ARIA Microdata Canvas Videoetc...
Selectors Media Queries Fonts Transforms Transitions Animationsetc...
Geolocation Web Storage Web Sockets FileAPI Media Capture IndexedDBetc...
HTML
HTML
05/01/2023 5
Technology Areas of HTML5
Performance Multimedia
3D Effects
Semantics
Offline & Storage Device Access
Styling
Connectivity
HTML
05/01/2023 6
HTML
05/01/2023 7
New Elements
ArticleAsideAudioCanvasCommandDatalistEmbedFigcaptionFigure
FooterHeaderHgroupKeygenMarkMeterOutputProgressrp
RtRubySectionSourceSummaryTimewbr
HTML
05/01/2023 8
5 HTML5 Features Every Developer Should Know
Audio & Video Elements Canvas Elements New Input types Form Features Custom Data Attributes
HTML
05/01/2023 9
SHALL WE HAVE A BREAK?
HTML
05/01/2023 10
Layouts and Animations
Layouts Legacy Layout
Positioning Display Float z-index
Flexbox Layout Horizontal and
vertical Packing Alignment Flex wrapping
Grid Layout Power of tables
but implemented incss
Absolute rows and columns
Fractional rows and columns
Spanning Alignments
HTML
05/01/2023 11
Layouts and Animations (cont’d)
Animations Transforms
rotate skew scale translate
Transitions Animations
HTML
05/01/2023 12
Mobile Website
Building sites on multi- device web Responsive images
HTML
05/01/2023 13
Building sites on multi- device web
Breakpoint Using Media Queries
<link rel=“stylesheet” media=“(min-width: 500px)” href=“min-500px.css”>
<style>
@media (min-width: 500px) {
}
</style> Meta Viewport Tag
<meta name=“viewport” content=“width=device-width, intial-scale=1”>
HTML
05/01/2023 14
Responsive Images
Background image in css
.example {
background-image: url(“phone.png”);
}
@media (min-width: 500px) {
body {
background-image: url(“india.png”);
}
.example {
background-image: url(“tablet.png”);
}
}
HTML
05/01/2023 15
Media queries for 2x images
.logo {
background-image: url(“logo.png”);
}
@media (min-resolution: 2dppx)
(-webkit-min-device-pixel-ratio:2) {
.logo {
background-image: url(“[email protected]”)
}
}
HTML
05/01/2023 16
Image-set()
.example {
background-image: url(‘icon1x.png’);
background-image: -webkit-image-set(url(“icon1x.png”) 1x, url(“icon2x.png”) 2x)
srcset
<img src=“photo.png” srcset=“photo.png 1x, photo2x.png 2x”/>
HTML
05/01/2023 17
QUESTIONS?
IF ANY…
HTML
05/01/2023 18
THANK YOU
