Post on 20-Jan-2017
HTML5Conhecendo e
implementando
Estru
tura
<!DOCTYPE html><html lang=“pt-br"> <head> <title>Estrutura do
HTML5</title> </head> <body> <h1>Hello, world!</h1></body></html>
Tabi
ndex Serve para manipular a
ordem das tabulações:Exemplo: <p tabindex=“1”>Texto</p>
Title
É um atributo para facilitar a acessibilidade em leitores de tela.Exemplo: <p title=“texto a ser lido
por leitores de tela”>Texto</p>
Acce
ssKe
y
Mais um elemento para acessibilidade, desta vez para selecionar um elemento utilizando teclas, é necessário segurar a tecla “alt”.<a href=“#” accesskey=“a”>Link</a
>
Cont
ente
dita
ble
O que você acha de editar um
conteúdo pelo navegador
sem programar?Exemplo:<div contenteditable=“true”>
<h1>Título</h1> <p contenteditable=“false”>Text
o não editável</p></div>
Dir
Atributo responsável por direcionar os elementos.Exemplo:<p dir=“ltr”>Texto da
esquerda pra direita</p><p dir=“rtl”>Texto da direita pra esquerda</p>
Hidd
en
Atributo que serve para ocultar um elemento.Exemplo:
<div class=“classe” hidden>conteúdo da div</div>
Spel
lchec
k
O que você acha de um corretor ortográfico em seus
inputs e textarea?Exemplo:<form><label>Digite o
texto:</label><textarea rows=“6” cols=“8”
spellcheck=“true”></textare
a></form>
Mark
Esse elemento tem a função de destacar uma parte do conteúdo.Exemplo:
<p>Texto qualquer, <mark>parte destacada</mark></p>
Mete
r
É um dos elementos muito pouco falados, mas com uma função bem bacana, é melhor ver do que explicar.Exemplo:<meter min="0"
max="100" value="88">8.8</meter>
Prog
ress
Cria um elemento de progresso
na página, mas assim como
alguns outros elementos, ele
não tem uso prático sem o uso
do javascript.Exemplo:<p>
Progresso: <progress id=“p”
max=“100”><span>0</span
>%</progress></p>
Nav
Esse elemento serve para
identificar e informar ao navegador que aquele bloco
se trata de uma área de navegação.
Exemplo:<nav><ul><li><a href=“#”>Link</a></li></u
l></nav>
Artic
le
Esse é um elemento de estrutura, que serve para
blocos de artigos.Exemplo:<article> <h3>Título do
Artigo</h3> <p>texto do Artigo</p></article>
Asid
e
Este elemente tem a proposta de
criar blocos que tem em seus
conteúdos relacionamentos com
o conteúdo principal, por exemplo “conteúdo relacionado”.
Exemplo:<aside> <ul><li> <a href=“#”>Noticia relacionada</a> </li></ul></aside>
Data
list
Esse é um elemento muito interessante,
ele serve para pré-armazenar valores
em campo input, fica semelhante a um
select.
Exemplo:<input list="browsers"><datalist id="browsers"> <option value="Internet Explorer">
<option value="Firefox"> <option value="Chrome">
<option value="Opera"> <option value="Safari">
</datalist>
Deta
ils &
Su
mm
ary
Cria um elemento que pode ser
estendido ao ser clicado.Exemplo:<details> <summary>Copyright 1999-
2014.</summary> <p> - by Refsnes Data. All
Rights Reserved.</p> <p>All content and graphics on
this web site are the property of
the company Refsnes Data.</p>
</details>
Figur
e &
FigCa
ptio
n
Elementos para envolver uma
imagem ou vídeo, e o figurecaption para colocar um
caption no elemento.Exemplo:<figure> <img src="img_pulpit.jpg"
alt="The Pulpit Rock" width="304"
height="228"> <figcaption>Fig1. - A view of the
pulpit rock in Norway.</figcaption></figure>
Foot
er
Elemento que representa não só o
final do site, mas o final de qualquer
item que considere separar suas
marcações.Exemplo:<footer> <p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:someone@example.co
m"> someone@example.com</a>.</p>
</footer>
Sect
ion
É um bloco para separar elementos distintos e agrupar
elementos que se complementam de alguma
forma.
Exemplo:<section> <h1>WWF</h1> <p>The World Wide Fund
for Nature (WWF) is....</p></section>
Head
er
Elemento que representa e separa o que é
considerado um topo ou cabeçalho de
parte do meu site, e assim como o footer,
ele pode ser usado em partes e não
somente num todo.Exemplo:<article> <header> <h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-
15"></time></p> </header> <p>Windows Internet Explorer 9
(abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00
PDT.....</p></article>
Audi
o
Inserir áudio com html.Exemplo:<audio controls> <source src="horse.ogg"
type="audio/ogg"> <source src="horse.mp3"
type="audio/mpeg"> Your browser does not support the audio tag.
</audio>
Vide
o
Inserir vídeo no html.Exemplo:<video width="320" height="240" controls>
<source src="movie.mp4"
type="video/mp4"> <source src="movie.ogg"
type="video/ogg"> Your browser does not support the video tag.
</video>
Track
Esse atributo serve para inserir legendas
em vídeos.Exemplo:<video width="320" height="240"
controls> <source src="forrest_gump.mp4"
type="video/mp4"> <source src="forrest_gump.ogg"
type="video/ogg"> <track src="subtitles_en.vtt"
kind="subtitles" srclang="en"
label="English"> <track src="subtitles_no.vtt"
kind="subtitles" srclang="no"
label="Norwegian"></video>
Canv
as
O Canvas é um elemento capaz de delimitar uma área específica na página para a renderização dinâmica de gráficos.Exemplo:<canvas></canvas>
Plac
ehol
der
É um atributo dos inputs para criar
uma dica ao usuário ao preencher
seu formulário.Exemplo:<form action="demo_form.asp">
<input type="text" name="fname"
placeholder="First name"><br>
<input type="text" name="lname"
placeholder="Last name"><br>
<input type="submit" value="Submit"></form>
Auto
focu
s
É um parâmetro a ser inserido
a um elemento de formulário
para que ao dar load na aplicação, o elemento já fique
selecionado, sem a necessidade de clicar sobre o
mesmo.
Exemplo:<input type="text" name="fname" placeholder="First name“
autofocus>
Requ
ired
Atributo em elementos de formulário para o torna-lo obrigatórios é que seja validado pelo próprio navegador.Exemplo:<input type="text" nam
e="fname" placeholder="First name“ required>
Auto
com
plet
e
Atributo em elementos inputs para auto completarem os campos do tipo texto, tendo 2 valores, on e off.
Exemplo:<input type="text" name="fname" placeholder="First name“ autocomplete=“off”>
Form
Não estamos falando da tag que antecede
um formulário e sim de um atributo que
pode ser usado por elementos de fora do
formulário, mas que fazem referência ao
mesmo.
Exemplo:<form action="demo_form.asp"
id="form1"> First name: <input type="text"
name="fname"><br> <input type="submit" value="Submit">
</form>
Last name: <input type="text"
name="lname" form="form1">
Form
actio
n
Desta forma é possível enviar o mesmo
form para 2 arquivos diferentes.Exemplo:<form action="demo_form.asp"
method="get">First name: <input type="text"
name="fname"><br>Last name: <input type="text"
name="lname"><br><button type="submit">Submit</button><br>
<button type="submit" formaction="demo_admin.asp">Submit
as admin</button></form>
Form
enct
ype
Atributo que define o tipo de dados que
será enviado no formulário. Os tipos são:
application/x-www-form-urlencoded,
multipart/form-data, text/plain.Exemplo:<form action="demo_post_enctype.asp"
method="post">Name: <input type="text"
name="fname" value="Ståle
Refsnes"><br><button type="submit">Submit with
character encoding</button><button type="submit" formenctype="text/plain">Submit
without character encoding</button>
</form>
Form
met
hod
Atributo para informar o método do envio,
se será get ou post, existe ainda mais 2,
mas não implementado pelos navegadores,
como put e delete.Exemplo:<form action="demo_form.asp"
method="get">First name: <input type="text"
name="fname"><br>Last name: <input type="text"
name="lname"><br><button type="submit">Submit</button>
<button type="submit" formmethod="post"
formaction="demo_post.asp">
Submit using POST</button></form>
Form
nova
lidat
e
Desabilita a função do navegador em
validar seus formulários.Exemplo:<form action="demo_form.asp">
E-mail: <input type="email"
name="userid"><br><input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
Form
targ
et
Atributo que assim como nos links permite
adicionar funções de abertura da página
ao se clicar no submit.Exemplo:<form action="demo_form.asp"
method="get">First name: <input type="text"
name="fname"><br>Last name: <input type="text"
name="lname"><br><button type="submit" >Submit</button><button type="submit"
formtarget="_blank">Submit to a new
window</button></form>
Type
s
Nesse slide vamos falar dos
novos tipo para os inputs,
são eles:Search, tel, url, email, datetime, date, time, month,
week, datetime-local, number, range, color.Exemplo:<input type="range"
name="points" min="1" max="10">