Post on 08-Oct-2020
1
rohersmoura@gmail.comdanielrohers
Daniel Röhers MouraSoftware Engineer @ HandsOn.TV
HTML o que?HTML5 é a nova versão do HTML, simples assim! :)
Foi lançada em 2008 e traz consigo importantes mudanças quanto ao papel do HTML na Web, através de novas funcionalidades como semântica, acessibilidade e diversas API’s.
2015 reconhecido pela W3C
2
Por que usar?
3
4
Semântica
5
Exemplificando…
6
Semântica, só para isso?
7
45.623.910 pessoas</censo-2010>
8
Não faça:<h1 role="button">heading button</h1>
Faça:<h1>
<button>heading button</button></h1>
9
Não faça:<a href="#” class="btn">heading button</a>
Faça:<button>heading button</button>
10
11
Performance
12
SEOSearch Engine Optimization
13
API'sConectividade • Web Sockets • Server-sent events • WebRTC
Offline e Armazenamento Validação de formulários
Geolocalização Áudio
Vídeo Drag and Drop
Gráficos e efeitos 3D
e muito, muito mais…
14
Algumas tags<!DOCTYPE html> – Específica que iremos utilizar HTML5 ao browser
<header> – Serve para marcar o cabeçalho do documento ou seção.
<nav> – Como o nome já sugere, essa tag é utilizada para navegação, ou seja, nela irá conter links de navegação externa ou interna a página.
<main> – Essa tag pode ser usada para identificar o conteúdo principal da página. Por exemplo, o conteúdo de um artigo pode estar dentro da tag main.
<section> – A section serve para separar as seções genésicas de uma página e para identificar abordagens diferentes de uma página.
<article> – Usado para representar conteúdos independentes de uma página. Como um post de um blog.
15
<aside> – Essa tag é usada para a identificação de um conteúdo secundário que não seja parte da seção principal. Ela é bastante usada como uma sidebar, alocadas em uma coluna esquerda ou direita de uma página.
<footer> – Usada para identificar o rodapé da página ou seção.
<audio> – É uma maneira simples e eficiente de inserirmos um arquivo de áudio na página.
<video> – É usada para inserirmos arquivos de vídeo na página. Existem muitas atributos que complementam essa tag, como inserir legenda por exemplo.
16
Estruturação básica
17
Novos Input Types• color <input type="color" name="favcolor">
• date <input type="date" name="bday">
• datetime <input type="datetime" name="bdaytime">
• email <input type="email" name="email">
• month <input type="month" name="bdaymonth">
• number <input type="number" name="quantity" min="1" max="5">
• range <input type="range" name="points" min="1" max="10">
• time <input type="time" name="usr_time">
• url <input type="url" name="homepage">
• week <input type="week" name="week_year">
18
Bye :)
<acronym><applet><basefont><big><center><dir>
<font><frame><frameset><noframes><strike><tt>
19
20
Mais algumas mudanças…
21
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML
<!DOCTYPE html>
HTML5
22
Language
< html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
HTML
<html lang="en">
HTML5
23
Character Encoding
<meta http-equiv="Content-Type" content=“text/html;charset=UTF-8">
HTML
<meta charset="UTF-8">
HTML5
24
CSS
<link rel="stylesheet" type="text/css" href="theme.css">
HTML
<link rel="stylesheet" href="theme.css">
HTML5
25
JavaScript
<script type="text/javascript" src="javascript.js">
HTML
<script src="javascript.js">
HTML5
26
Alguns exemplos…
< audio >
27
< video >
28
< svg >
29
geolocation
30
getUserMedia
31
getUserMedia
32
37
Obrigado;D
44