Desenvolvimento de
Aplicações Web
HTML5
HTML
l O HTML (HyperText Markup Language) foi criado em
1991 por Tim Berners-Lee no CERN
l HTML é uma linguagem que possibilita apresentar
informações (documentação de pesquisas científicas) na
Internet
l Aquilo que se vê quando abre uma página na Internet é
a interpretação que seu navegador faz do HTML
l HTML é uma linguagem universal destinada à
elaboração de páginas com hiper-texto, como o nome
indica
HTML
HTML
l O que é o HTML5?
• HTML5 é a nova versão do HTML4
• Um dos principais objetivos do HTML5 é facilitar a
manipulação do elemento possibilitando o programador
a modificar as características dos objetos de forma não
intrusiva e de maneira que seja transparente para o
utilizador final
• Fornece ferramentas para a CSS e o Javascript fazerem
seu trabalho da melhor maneira possível
• O HTML5 também cria novas tags e modifica a função
de outras
Estrutura básica, DOCTYPE e charsets
l A estrutura básica do HTML5 continua sendo a mesma
das versões anteriores da linguagem, há apenas uma
excessão na escrita do Doctype.
Estrutura básica, DOCTYPE e charsets
DOCTYPE
l O Doctype deve ser a primeira linha de código do
documento antes da tag HTML.
l <!DOCTYPE html>
l O Doctype indica para o navegador e para outros meios
qual a especificação de código a utilizar. Em versões
anteriores, era necessário referenciar o DTD
diretamente no código do Doctype. Com o HTML5, a
referência por qual DTD utilizar é responsabilidade do
Browser.
O elemento HTML
l O elemento <html> representa a raiz do documento
HTML
l Dentro do elemento <html> segue-se o elemento
<head>. Este elemento contém informações sobre o
documento, titulo, scripts, folhas de estilos, metadata,
etc. Depois do elemento <head> encontra-se o elemento
<body> sendo a secção de conteúdo principal do
documento HTML contendo texto, hyperlinks, imagens,
tabelas, listas, etc.
O elemento HTML
O elemento HTML
l O código HTML é uma série de elementos em árvore
onde alguns elementos são filhos de outros e assim por
diante. O elemento principal dessa grande árvore é
sempre a tag HTML.
l <html lang="pt-br">
l O atributo LANG é necessário para que os user-agents
saibam qual a linguagem principal do documento.
l Lembre-se que o atributo LANG não é restrito ao
elemento HTML, ele pode ser utilizado em qualquer
outro elemento para indicar o idioma do texto
representado.
Elementos estrutura
l Principais elementos estruturais:
• Header
• Nav
• Section
• Article
• Aside
• Footer
Elementos estrutura
l Então a estrutura de um HTML segundo a nova
semântica da W3C seria:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/[Link]" rel="stylesheet“ type="text/css">
<title>Titulo</title>
</head>
<body>
<header>Titulo da sua página</header>
<nav class="menu">Menu da sua página</nav>
<aside class="publicidade">Banner Publicitário da sua página</aside>
<section class="post"><article>Seu Post aqui</article> </section>
<footer>Rodapé da sua página</footer>
</body>
</html>
Elementos estrutura
l o Elemento header
O elemento header pode conter um ou mais elementos h1
até h6, elementos de navegação, um logotipo ou
banner. Normalmente trabalha como um agregador do
conteúdo do cabeça- lho de um documento ou de uma
seção. Dentro dele é possível inserir um elemento
hgroup que tem como função agrupar dois ou mais
elementos h1 até h6 organizando-os em uma hierarquia
de títulos e subtítulos.
Elementos estrutura
l o Elemento hgroup
Como foi referido acima no elemento header, o
elemento hgroup agrupa vários elementos de h1 até h6
quando o título tem vários níveis.
Elementos estrutura
l o Elemento section
O elemento section define uma nova secção genérica no
documento. Section no seu contexto significa grupo de
conteúdos temáticos, tipicamente um cabeçalho.
l Como exemplos de section seriam, capítulos, caixa de
diálogo com separações ou secções numeradas.
Segundo a W3C, uma página web pode ser divida em
secções para introdução de notícias e informações.
Elementos estrutura
l o Elemento nav
l Representa uma secção da página que contem links
para outras páginas ou outras partes dentro da mesma
página. Este elemento deve ser utilizado para grupos de
links importantes do site tipicamente menus de
navegação.
Elementos estrutura
l o Elemento footer
l Representa o rodapé da página ou de uma secção
específica. Este seria o último elemento do último
elemento antes de fechar a tag HTML. Pode conter
informações como nome do autor, contactos, links.
Elementos estrutura
l Elemento figure
l Este elemento especifica conteúdos tais como
ilustrações, diagramas, fotos, etc. Este elemento por
vezes está associado ao elemento <figcaption> para
associar legendas a diagramas, ilustrações.
Elementos estrutura
l Elemento time
O elemento time define uma hora ou data no calendário
gregoriano. Pode ser usado como
• uma forma de codificar as datas e horas de uma forma legível,
possibilitando assim como por exemplo, adicionar eventos e
lembranças no calendário do utilizador.
Atributos descontinuados
l Alguns atributos foram descontinuados porque
modificam a formatação do elemento e suas funções
são melhores controladas pelo CSS:
• align como atributo da tag caption, iframe, img, input, object,
legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup,
tbody, td, tfoot, th, thead e tr.
• alink, link, text e vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr, td, th e body.
• border como atributo da tag table e object.
• cellpadding e cellspacing como atributos da tag table.
• char e charoff como atributos da tag col, colgroup, tbody, td,
tfoot, th, thead e tr.
Atributos descontinuados
• clear como atributo da tag br.
• compact como atributo da tag dl, menu, ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag img e object.
• marginheight e marginwidth como atributos da tag iframe.
• noshade como atributo da tag hr.
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
Atributos
l Alguns elementos ganharam novos atributos:
l O atributo autofocus pode ser especificado nos
elementos input (exceto quando há atributo hidden
atribuído), textarea, select e button.
l A tag a passa a suportar o atributo media como a tag
link.
l A tag form ganha um atributo chamado novalidate.
Quando aplicado o formulário pode ser enviado sem
validação de dados.
l O elemento ol ganhou um atributo chamado reversed.
Quando ele é aplicado os indicadores da lista são
colocados na ordem inversa, isto é, da forma
descendente.
Atributos
l O elemento fieldset agora permite o atributo disabled.
Quando aplicado, todos os filhos de fieldset são
desativados.
l O novo atributo placeholder pode ser colocado em
inputs e textareas.
l O elemento area agora suporta os atributos hreflang e
rel como os elementos a e link
l O elemento base agora suporta o atributo target assim
como o elemento a. O atributo target também não está
mais descontinuado nos elementos a e area porque são
úteis para aplicações web.
Novos valores para o atributo type
l tel
• Telefone. Não há máscara de formatação ou validação,
propositalmente, visto não haver no mundo um padrão bem
definido para números de telefones.
Novos valores para o atributo type
l search
• Um campo de busca. A aparência e comportamento do campo
pode mudar ligeiramente dependendo do browser, para parecer
com os demais campos de busca do sistema.
l email
• E-mail, com formatação e validação. O agente de usuário pode
inclusive promover a integração com sua agenda de contatos.
l url
• Um endereço web, também com formatação e validação.
Novos valores para o atributo type
l Datas e horas
• O campo de formulário pode conter qualquer um desses valores
no atributo type:
o datetime
o date
o month
o week
o time
o datetime-local
Novos valores para o atributo type
l Number
Novos valores para o atributo type
l range
Novos valores para o atributo type
l color
• O campo com type="color" é um seletor de cor. O utilizador
pode mostrar um controle de seleção de cor ou outro auxílio que
estiver disponível. O valor será uma cor no formato #ff6600.
Formulários
l autofocus
• O foco será colocado neste campo automaticamente ao carregar
a página
<input name="login" autofocus >
Formulários
l required
• Para tornar um campo de formulário obrigatório (seu valor
precisa ser preenchido) basta, em HTML5, incluir o atributo
required:
<input name="login" required>
Formulários
l Maxlength
• O atributo maxlength já era conhecido, que limita a quantidade
de caracteres em um campo de formulário. Uma grande lacuna
dos formulário HTML foi corrigida. Em HTML5, o elemento
textarea também pode ter maxlength!
Formulários
l novalidate e formnovalidate
• Podem haver situações em que é necessário que um formulário
não seja validado. Nestes casos, basta incluir no elemento form o
atributo novalidate.
• Outra situação comum é querer que o formulário não seja
validade dependendo da ação de submit. Nesse caso, pode
utilizar no botão de submit o atributo formnovalidate.
Formulários
l novalidate e formnovalidate
Formulários
l Conteúdo editável
• Para tornar um elemento do HTML editável, basta incluir o
atributo contenteditable, assim:
• <div contenteditable="true"> Edite-me... </div>
• Podemos ler e manipular os elementos editáveis normalmente
usando os métodos do DOM. Isso permite, com facilidade,
construir uma área de edição de HTML.
Elementos audio e video, e codecs
• Áudio
• Para inserir áudio numa página web, basta usar o elemento
audio:
• <audio src="[Link]" controls="true" autoplay="true" />
• O valor de controls define se um controle de áudio, com botões
de play, pause, volume, barra de progresso, contador de tempo,
etc. será exibido no ecran. Se for definido como "false", será
preciso controlar o player via javascript, com métodos como
play() e pause(). O valor de autoplay define se o áudio vai
começar a tocar assim que a página carregar.
Elementos audio e video, e codecs
• Áudio
• Como nem todos os browsers suportam todo o tipo de codecs,
pode-se incluir os vários formatos no elemento áudio, garantindo
assim a compatibilidade. A figura seguinte mostra como é
possível garantir esta compatibilidade.
Elementos audio e video, e codecs
• Áudio
o Claro, o browser pode ainda não saber tocar nenhum desses
formatos, ou sequer ter suporte a áudio. Para esses casos, ofereça
um conteúdo alternativo:
Elementos audio e video, e codecs
• Vídeo
o O uso de vídeo é muito semelhante ao de áudio:
Elementos audio e video, e codecs
• Vídeo