Material sobre HTML5

•

UEM

3

0

3

0

Rodrigo Mansueli

29/11/2013

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Web

1.860 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

HTML5
Prof. Adriano Rívolli
Programação Web
Web 
Cliente
Textos de Referências
• HTML5 – Curso W3C Escritório Brasil
– http://www.w3c.br/pub/Cursos/CursoHTML5/html5-
web.pdf
– Versão Online: http://tableless.com.br/html5/
• Dive into HTML5 (100% traduzido)
– http://diveintohtml5.com.br/
Sites de apoio
• Especificação W3C
– http://www.w3.org/TR/html5/
• W3C Validator
– http://validator.w3.org/– http://validator.w3.org/
• W3Schools
– http://www.w3schools.com/html/html5_intro.asp
• Can i use (Posso utilizar?)
– http://caniuse.com/
• Editor online
– http://jsfiddle.net/
Revisão da web
• 3 Pilares
–URI
–HTTP–HTTP
––HTMLHTML
HTML
• Hypertext Markup Language -
Linguagem de Marcação de 
Hypertexto
• HTML é uma linguagem para publicação de 
conteúdo (texto, imagem, vídeo, áudio e etc) na 
Web
• Hipertexto são conjuntos de elementos (ou nós) 
ligados por conexões, não conectados 
linearmente
Histórico
• Desenvolvido originalmente por Tim Berners-
Lee 
• Se tornou popular com o Mosaic - browser 
desenvolvido por Marc Andreessen na década de 
19901990
• Entre 1993 e 1995, o HTML ganhou as versões 
HTML+, HTML2.0 e HTML3.0
• Apenas em 1997, o grupo de trabalho do W3C 
responsável por manter o padrão do código, 
trabalhou na versão 4 da linguagem
• Em 2000 veio o XHTML
HTML5
• Um grupo chamado Web Hypertext Application 
Technology Working Group (WHATWG) trabalhava 
em uma versão do HTML, o que é chamado hoje de 
HTML5
• Por volta de 2006 o W3C - que até então trabalhavam • Por volta de 2006 o W3C - que até então trabalhavam 
separadamente - reconheceu todo o trabalho do 
grupo
• Outubro de 2006, Tim Berners-Lee anunciou que 
trabalharia juntamente com o WHATWG na 
produção do HTML5 em detrimento do XHTML 2
• O grupo que estava cuidando especificamente do 
XHTML 2 foi descontinuado em 2009
Resumo da evolução
O que é o HTML5?
• O HTML5 é a nova versão do HTML4
• Definem APIs que formarão a base da arquitetura 
web.
• Cria novas tags e modifica a função de outras• Cria novas tags e modifica a função de outras
"Novos" recursos
• Suporte a áudio e vídeo
• Gráficos em 2D e 3D (canvas)
• Armazenamento local
• Acesso a arquivos e dispositivos locais• Acesso a arquivos e dispositivos locais
• Elementos semânticos
• Formulários mais ricos
• Arrastar e soltar
• Aplicações Offline
Esqueleto
Esqueleto – Elementos/atributos
TAG/Elemento - O código HTML é uma série de TAG/Elemento - O código HTML é uma série de 
elementos em árvore onde alguns elementos são
filhos de outros e assim por diante
Atributos – Informações adicionais
de um elemento
Esqueleto - Doctype
DOCTYPE - indica para o navegador e 
para outros meios qual a especificação para outros meios qual a especificação 
de código utilizar.
Obs: não é uma tag do HTML
Esqueleto - HTML
O elemento principal dessa grandeO elemento principal dessa grande
árvore é sempre a tag HTML
O lang é um atributo e determina 
a linguagem do conteúdo
Esqueleto - Head
O head ficam os metadados (informações O head ficam os metadados (informações 
sobre a página e o conteúdo ali publicado)
O metatag responsável por chavear qual tabela 
de caracteres a página está utilizando
O link são links para fontes externas que serão 
usadas no documento, neste caso uma folha 
de estilo
O title define um título para a página
Esqueleto - Body
body – contém todo o conteúdo 
efetivo da página
Olá Mundo!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Adriano Rívolli</title><title>Adriano Rívolli</title>
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Meu primeiro exemplo em HTML.</p>
<!-- este é um comentário -->
</body>
</html>
Comentários
<!-- Isso é um comentário -->
<!--
E isso também
-->
Como o navegador "vê a página"
Exibição dos erros
• Nenhuma mensagem ou aviso é exibido
• Não respeitar as regras pode fazer com que o 
navegador não gere a árvore DOM corretamente 
e consequentemente não exibe o conteúdo como e consequentemente não exibe o conteúdo como 
esperado
• Espaços em brancos e quebras de linhas no 
código HTML não interferem no modo como a 
página é exibida, e devem ser utilizadas para uma 
melhor organização do código
– Porém tais espaços estarão presentes na árvore DOM
Abriu/Fechou
• Cada elemento é representado no código por 
uma tag de início (exemplo: <html>) e uma de fim 
(exemplo: </html>).
– Observação: Algumas tags não possuem fim.
• Exemplo de erro:
<p>Isto está <em>muito 
<strong>errado</em>!</strong></p>
<p>Isto <em>está 
<strong>correto</strong>.</em></p>
Atributos no início
• Os atributos (ou propriedades) são sempre 
definidos dentro da tag de início
• consistem de um nome e um valor, que são 
separados por um sinal de igual =separados por um sinal de igual =
• Os valores devem sempre estar entre aspas 
("assim" ou 'assim')
–CUIDADO! não “assim“ ou ‘assim’
Exemplos
<!-- Atributos vazios -->
<input name="endereco" disabled>
<input name="endereco" disabled="">
<!-- atributos com um valor -->
<input name="endereco" maxlength=200>
<input name="endereco" 
maxlength='200'>
<input name="endereco" 
maxlength="200">
HTML5 - Elementos
http://joshduck.com/periodic-table.html
Layouts
Código dos layouts
Estrutura 1
<header></header>
<nav></nav>
<section>
<header></header>
Estrutura 2
<header>
<nav></nav>
</header>
<section>
<header></header>
<article></article>
<footer></footer>
</section>
<aside></aside>
<footer></footer>
<section>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
</section>
<footer></footer>
Títulos
<h1>Título de nível 1</h1>
<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>
<h4>Título de nível 4</h4>
<h5>Título de nível 5</h5>
<h6>Título de nível 6</h6>
Listas
• Ordenadas • Não ordenadas
• Definição
Lista ordenada
<strong>O procedimento:</strong>
<ol>
<li>Primeiro, misturar bem os ingredientes a seco</li>
<li>Adicionar os ingredientes líquidos</li>
<li>Mexer ininterruptamente durante 10 minutos</li>
<li>Levar ao forno e deixar cozinhar uma hora a 300 <li>Levar ao forno e deixar cozinhar uma hora a 300 
graus</li>
</ol>
Lista não ordenada
<strong>Os ingredientes:</strong>
<ul>
<li>100g. De farina</li>
<li>10g. De açucar</li><li>10g. De açucar</li>
<li>1 copo de água</li>
<li>2 ovos</li>
<li>sal e pimenta</li>
</ul>
Lista de definição
<dl>
<dt>Redução dos custos</dt>
<dd>A nova versão deste produto custa 
significativamente ...</dd>
<dt>De fácil utilização</dt><dt>De fácil utilização</dt>
<dd>Nós alteramos o produto de forma...</dd>
<dt>Não representa qualquer risco para as 
crianças</dt>
<dd>Você poderá deixar os seus filhos...</dd>
</dl>
Alguns blocos de texto
p
p
div
hr
br
blockquote
q
Exemplo dos blocos
<p>Este é um paragrafo</p>
<p>Este é outro paragrafo<br>contudo 
uma quebra foi utilizada</p>
<hr>
<div><div>
Utilizando uma quebra de assunto
</div>
<blockquote>
Citação de bloco
</blockquote> 
<q>Citação de linha</q>
Links
<a href="exemplo.html" title="Texto que 
irá aparecer quando o mouse estiver em 
cima do link">Página de exemplo</a>
index.html
<a href="index.html">Voltar</a>
exemplo.html
Tabela
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Sobrenome</th>
</tr>
</thead></thead>
<tbody>
<tr>
<td>1</td>
<td>Mario</td>
<td>Brother</td>
</tr>
<tr>
<td>2</td><td>Roberto</td><td>Carlos</td>
</tr>
</tbody>
</table>
Tabelacom título
<table border="1">
<caption>Nomes</caption>
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Sobrenome</th>
</tr></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mario</td><td>Brother</td>
</tr>
<tr>
<td>2</td><td>Roberto</td><td>Carlos</td>
</tr>
</tbody>
</table>
Tabela com rodapé e colunas diferentes
<table border="1">
<caption>Nomes</caption>
<thead>
<tr>
<th>#</th><th>Nome</th>
<th>Sobrenome</th>
</tr></tr>
</thead>
<tbody>
<tr><td>1</td><td>Mario</td><td>Brother</td></tr>
<tr><td>2</td><td>Roberto</td><td>Carlos</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">2 pessoas</td></tr>
</tfoot>
</table>
Tabela com linhas expandidas
<table border="1">
<caption>Nomes</caption>
<thead>
<tr>
<th>#</th><th>Nome</th>
<th>Sobrenome</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Mario</td><td>Brother</td></tr>
<tr>
<td rowspan="2">2</td>
<td>Roberto</td><td>Carlos</td>
</tr>
<tr><td>Roberto</td><td>Rei</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">2 pessoas</td></tr>
</tfoot>
</table>
Teste o funcionamento dos elementos
• pre
• cite
• em
• strong
• sub
• sup
• progress
• code
• b
• rt
• ins
• del• strong
• small
• mark
• dfn
• abbr
• time
• code
• var
• samp
• kbd
• span
• i
• del
• div
Detalhes / Sumário
Imagem
<img src="imagem.jpg">
<figure>
<img src="macaque.jpg">
<figcaption>Macaco do rio 
Lower Kintaganban, Borneo. 
</figcaption>
</figure>Macaco do rio Lower Kintaganban, Borneo.
Áudio
Vídeo
FORMULÁRIOS
Formulário e fieldset
Página que os dados serão enviados Método de envio: GET ou POST
Inputs tradicionais - Types
• Text – Campo de texto
• Password – Campo de senha
• Checkbox – Seleção múltipla
• Radio – Seleção única• Radio – Seleção única
• Hidden – Campo oculto
• Button / Reset / Submit – Botões (simples / 
limpar formulário / enviar formulário)
Novos inputs
Outros elementos tradicionais
• Select – Caixa de seleção
– Option – Opções da caixa de seleção
– Optgroup – Grupos de opções
• Textarea – Caixa de texto• Textarea – Caixa de texto
• Button – Botões