Web – HTML5

Profª Ana Paula Mandelli

anapaula_mandelli@hotmail.com

Técnico em Informática

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

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.

• 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.

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:

• 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

• 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

NOVOS ELEMENTOS E ATRIBUTOS

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

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.

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