Apresentação do PowerPoint -...

12
Web – HTML5 Profª Ana Paula Mandelli [email protected] Técnico em Informática

Transcript of Apresentação do PowerPoint -...

Page 1: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

Web – HTML5

Profª Ana Paula Mandelli

[email protected]

Técnico em Informática

Page 2: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

PÁGINAS ESTÁTICAS e DINÂMICAS

• As páginas web estáticas são páginas web que não se

alteram quando os navegadores as abrem, são como se fossem uma vitrine eletrônica.

• Atualmente, a maioria dos sites de comércio eletrônico usam o que são chamados de páginas web dinâmicas, porque têm carrinhos de compras em seus sites. Essas páginas dinâmicas dependem de bases de dados que, através de um software, consultam uma lista de categorias que o usuário procura e em seguida, recolhem os dados – imagens, descrições de produtos, preços e assim por diante, preenchendo essa página com conteúdo relevante.

Estáticas

Dinâmicas

Page 3: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

HTML 5

• Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem.

• Por isso o HTML foi desenvolvido para que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor.

• Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis.

Page 4: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

• O HTML5 é a nova versão do HTML4.

• Um dos principais objetivos do HTML5 é:

– Facilitar a manipulação dos elementos;

– Possibilidade de modificar as características dos objetos de forma não intrusiva para o usuário final.

• O HTML5 também cria novas tags e modifica a função de outras.

Page 5: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

ESTRUTURA BÁSICA, DOCTYPE E CHARSETS

• A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma exceção na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:

Page 6: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

• O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

• O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar.

• O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

Doctype

Page 7: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

• O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante.

• O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.

Elemento HTML

Page 8: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

NOVOS ELEMENTOS E ATRIBUTOS

Page 9: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são
Page 10: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

• Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:

Page 11: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

NOVOS TIPOS DE CAMPOS

Novos valores para o atributo type

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.

O elemento input aceita os seguintes novos valores para o atributo type:

tel

Search Um campo de busca. A aparência e comportamento do campo pode mudar ligeiramente dependendo do agente de usuário, para parecer com os demais campos de busca do sistema.

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.

Page 12: Apresentação do PowerPoint - colegiomondrone.com.brcolegiomondrone.com.br/images/works/09082017183734.pdf · PÁGINAS ESTÁTICAS e DINÂMICAS •As páginas web estáticas são

Um endereço web, também com formatação e validação. url

O campo de formulário pode conter qualquer um desses valores no atributo type: • datetime • date • month • week • time • datetime-loca

Data e horas

number color range