curso básico de html5

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:[email protected]

m"> [email protected]</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"



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"



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">