Atlogys html5 presentation (2)

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(“logo@2x.png”)

}

}

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