Programação para Web II: HTML5

HTML5HTML5
Prof. Alex Dias Camargo
alexcamargo@ifsul.edu.br
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
SUL-RIO-GRANDENSE
CÂMPUS BAGÉ
PROGRAMAÇÃO PARA WEB II

2
I. Plano de aula
Na aula anterior foi visto:
 História e arquitetura da Web
 Evolução das tecnologias
PWII - HTML 5

3
I. Plano de aula
Nesta aula será apresentado:
 HTML5: uma breve história
 Estrutura básica e elementos de seção
PWII - HTML 5

4
1. Uma breve história
Nunca foi tão fácil desenvolver para Web como é hoje. O
esforço de desenvolvedores aliado à padrões bem definidos,
tornaram a programação para a Web mais atrativa e rentável.
 Antigamente a “maior preocupação” era apenas com o Internet
Explorer.
 Fazer websites com tabela foi um marco para a história.
 No passado era normal misturar o CSS com o HTML.
PWII - HTML 5

5
1. Uma breve história
PWII - HTML 5
Figura. Estrutura de um site utilizando o <table>...</table>.

6
1.2 As 3 camadas de desenvolvimento
O desenvolvimento client-side é baseado em 3 camadas principais:
informação, formatação e comportamento.
 Informação: vem antes de todas as outras e fica sob o
controle do HTML.
 Formatação: o CSS é responsável por controlar o visual da
informação exibida pelo HTML.
 Comportamento: o Javascript controla os valores definidos
pelo CSS e manipula estas propriedades.
PWII - HTML 5

7
1.2 As 3 camadas de desenvolvimento
PWII - HTML 5
Figura. Camadas do desenvolvimento client-side.

8
1.3 WHAT Working Group
O WHATWG foi fundado por desenvolvedores de empresas como
Mozilla, Apple e Opera em 2004.
 Enquanto isso, o W3C focava suas atenções para a criação da
segunda versão do XHTML.
 O trabalho do WHATWG passou a ser conhecido pelo mundo e
principalmente pelo W3C.
 Essas organizações se juntaram para escrever o que seria
chamado hoje de HTML5.
PWII - HTML 5

9
1.4 HTML5 e suas mudanças
A separação da estrutura do código com a formatação e
princípios de acessibilidade foram trazidos para discussão entre
fabricantes e desenvolvedores.
 A versão final do HTML5 foi lançada em 2014.
 O HTML5 cria novas tags e descontinua outras.
 Mais interatividade sem a necessidade de instalação de
plugins.
PWII - HTML 5

10
1.4 HTML5 e suas mudanças
PWII - HTML 5
Figura. Elementos removidos do HTML5.

11
2. Estrutura, DOCTYPE e charsets
A estrutura básica do HTML5 continua sendo praticamente a
mesma das versões anteriores, porém, com menos código.
 <!DOCTYPE html>: instrução para que o navegador tenha
informações sobre qual é a versão de código escrita.
 <html lang="pt-br">: o atributo LANG é necessário para
que os user-agents saibam qual a linguagem principal do
documento.
 <meta charset="utf-8">: metatag responsável por indicar
qual tabela de caracteres a página está utilizando.
PWII - HTML 5

12
2. Estrutura, DOCTYPE e charsets
PWII - HTML 5
Figura. Estrutura básica do HTML5.

13
3. Elementos de seção
Elementos de seção são um novo conjunto de elementos que além
de dividir as áreas do layout, dá um significado a elas.
 Menos sintaxe (código) e mais semântica (significado).
 Preocupação maior com a acessibilidade e diferentes
dispositivos.
 Fácil identificação no código.
PWII - HTML 5

14
3. Elementos de seção
PWII - HTML 5
Figura. Elementos de seção do HTML5.

15
3.2 Header
O elemento header define uma seção de cabeçalho.
 Exemplo: pode conter campos de busca, elementos de
navegação, um logo ou banner.
PWII - HTML 5

16
3.2 Header
PWII - HTML 5
Figura. Exemplo de uso do elemento <header></header>.

17
3.3 Nav
O elemento nav representa uma seção da página que contém links
para outras partes do website.
 Exemplo: menu principal ou histórico de navegação.
PWII - HTML 5

18
3.3 Nav
PWII - HTML 5
Figura. Exemplo de uso do elemento <nav></nav>.

19
3.4 Aside
O elemento aside representa um bloco de informação relativo ao
conteúdo principal.
 Exemplo: um agrupamento de publicidade ou um menu de
navegação lateral.
PWII - HTML 5

20
3.4 Aside
PWII - HTML 5
Figura. Exemplo de uso do elemento <aside></aside>.

21
3.5 Section
O elemento section define uma nova seção genérica no
documento.
 Exemplo: a home de um website pode ser dividida em
diversas seções.
PWII - HTML 5

22
3.5 Section
PWII - HTML 5
Figura. Exemplo de uso do elemento <section></section>.

23
3.6 Article
O elemento article é onde colocamos texto ou informação principal.
 Exemplo: em um blog, dentro de article haverá toda a
informação necessária sobre a postagem.
PWII - HTML 5

24
3.6 Article
PWII - HTML 5
Figura. Exemplo de uso do elemento <article></article>.

25
3.7 Footer
O elemento footer marca o limite inferior do website, normalmente
é conhecido como rodapé.
 Exemplo: pode conter um bloco de informações com
identificação do desenvolvedor e copyright.
PWII - HTML 5

26
3.7 Footer
PWII - HTML 5
Figura. Exemplo de uso do elemento <footer></footer>.

27
4. Exercícios
1. Implemente os códigos apresentados em sala de aula, criando
um arquivo HTML em nível de camada de informação. Este servirá
como base para os demais exemplos trabalhados sobre o tema.
2. Faça uma busca em códigos-fonte de sites na Web e identifique
os 5 elementos de seção do HTML5 vistos até o momento.
Descreva a sua URL e os elementos encontrados.
3. Responda os exercícios sobre atributos HTML disponível no link
abaixo:
https://www.w3schools.com/html/exercise.asp?filename=exercise_
html_attributes1
4. Responda as questões extraídas de concursos públicos e/ou provas
de certificação disponibilizadas em:
http://jkolb.com.br/questoes-html5/
PWII - HTML 5

28
5. Formulários, multimídia
e outras abordagens
O HTML5 oferece suporte nativo a players multimídia, também, a
linguagens baseadas em XML e APIs.
 Quando o grupo WHATWG reescreveu o HTML, decidiram
começar pelos formulários.
 Novas opções de validação de formulários.
 Expansão de elementos gráficos.
PWII - HTML 5

29
5.2 Datalist
É um elemento <input> com os valores pré-definidos em um
<datalist>.
 Exemplo: uma lista de disciplinas em uma seleção.
PWII - HTML 5

30
5.2 Datalist
PWII - HTML 5
Figura. Exemplo de uso da tag <datalist>...</datalist>

31
5.2 Datalist
PWII - HTML 5
Figura. Exemplo de uso da tag <datalist>...</datalist>

32
5.3 Atributos min e max
Os atributos min e max especificam o valor máximo e mínimo para
um elemento <input>.
 Exemplo: quantidade de alunos em uma turma.
PWII - HTML 5

33
PWII - HTML 5
Figura. Exemplo de uso do atributo max e min

34
PWII - HTML 5
Figura. Exemplo de uso do atributo max e min

35
5.4 Atributo required
É um atributo contido em um formulário HTML com um campo de
entrada obrigatório.
 Exemplo: nome de uma pessoa.
PWII - HTML 5

36
PWII - HTML 5
Figura. Exemplo de uso do atributo required

37
PWII - HTML 5
Figura. Exemplo de uso do atributo required

38
5.5 Controle de som nativo
A tag <audio> define o som, como música ou outros fluxos de
áudio.
 Exemplo: um player de música online.
PWII - HTML 5

39
PWII - HTML 5
Figura. Exemplo de uso do controle de som nativo

40
PWII - HTML 5
Figura. Exemplo de uso do controle de som nativo

41
5.6 Controle de vídeo nativo
A tag <video> exibe um player que transmite fluxo de vídeos.
 Exemplo: um player de vídeo online.
PWII - HTML 5

42
PWII - HTML 5
Figura. Exemplo de uso do controle de vídeo nativo

43
PWII - HTML 5
Figura. Exemplo de uso do controle de vídeo nativo

44
5.7 MathML
Trata-se de uma linguagem de marcação, baseada em XML, para
representação de fórmulas matemáticas.
 Exemplo: fórmula de Bhaskara representada em um website.
PWII - HTML 5

45
5.7 MathML
PWII - HTML 5
Figura. Exemplo de uso da linguagem MatHTML

46
5.7 MathML
PWII - HTML 5
Figura. Exemplo de uso da linguagem MatHTML

47
5.8 SVG
Assim como MathML, SVG é uma linguagem XML. Sua finalidade é
marcação de gráficos vetoriais.
 Exemplo: desenho de formas geométricas.
PWII - HTML 5

48
5.8 SVG
PWII - HTML 5
Figura. Exemplo de uso da linguagem SVG

49
5.8 SVG
PWII - HTML 5
Figura. Exemplo de uso da linguagem SVG (renderização)

50
6. Exercícios
1. Com base no tema definido para o projeto, crie uma página Web
explorando o maior número de elementos semânticos, atributos de
controle, elementos gráficos e elementos multimídia do HTML5
vistos em aula.
Requisitos que devem ser cumpridos na atividade:
1 seção cabeçalho;
1 barra de navegação;
1 seção principal;
1 seção com formulário;
1 rodapé.
PWII - HTML 5

51
Referências
DUCKETT, Jon. Introdução à Programação Web com HTML,
XHTML e CSS. 2 ed. Rio de Janeiro: Editora Ciência Moderna Ltda.,
2010.
SILVA, Mauricio Samy. Criando sites com HTML: sites de alta
qualidade com HTML e CSS. São Paulo, SP: Novatec, 2008.
YANK, Kevin; ADAMS, Cameron. Só Javascript: tudo o que você
precisa saber sobre Javascript a partir do zero. Porto Alegre,
RS: Bookman, 2009.
PWII - HTML 5

Programação para Web II: HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Ähnlich wie Programação para Web II: HTML5

Ähnlich wie Programação para Web II: HTML5 (20)

Mehr von Alex Camargo

Mehr von Alex Camargo (20)

Programação para Web II: HTML5