CategoryHtml 5

Minicurso HTML 5: Detalhes e Edição inline

Em diversas funcionalidades, surge a necessidade de descrever um único item, por exemplo, os detalhes de um upload.

A tag <details> atribui semântica para estes casos, com a definição explícita de um resumo e do restante do conteúdo.

Um exemplo pode ser encontrado aqui.

Também é possível tornar um elemento editável, basta incluir o atributo contenteditable=”true”.

Um exemplo de conteúdos editáveis pode ser encontrado aqui

Minicurso HTML 5: Formulários

Os elementos input do HTML 5 ganharam novos tipos, com validação e métodos de entrada mais úteis.

Novos valores para o atributo type

  • tel
  • search
  • email
  • url
  • datetime, date, month, week, time, datetime-local (GMT)
  • number
  • range
  • color

Atributos novos (step, min, max) definem os valores mínimos e máximos de cada campo, ou o intervalo entre cada possível valor. Ex: Um tipo time possui step (300), então os únicos horários permitidos são: 7:00, 7:05, 7:10 e assim sucessivamente.

Continue reading

Minicurso HTML 5: Elementos novos, modificados e descontinuados

Com a especificação da nova linguagem, os documentos HTML passaram a possuir elementos que adicionam semântica a seu conteúdo.

Por mais que visualmente seja fácil perceber a diferença entre as diferentes seções de um site, para os robôs de busca, esta percepção não é tão clara. O HTML 5 trouxe novos elementos que ajudam a definir os principais setores de um documento, sendo possível diferenciar diretamente pelo código, áreas importantes como: cabeçalho, rodapé e menu.

Continue reading

Minicurso HTML 5: Estrutura básica

Doctype, Head, Charsets e Link

<!DOCTYPE html!> – o DocType não é uma tag HTML, mas uma instrução para que o navegador saiba qual a versão do código.

<html lang=”pt-br”> – o código HTML é uma série de elementos em árvore, em que alguns elementos são filhos de outros e consequentemente. O elemento principal é a tag HTML.

O atributo lang é opcional, mas é útil para informar qual o idioma do documento. Este atributo pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

<head> – a tag head contém os metadados com informações sobre a página e o conteúdo.

<meta charset=”utf-8″> – representa a tabela de caracteres que será utilizada para o “desenho” dos caracteres

<link rel=”stylesheet” type=”text/css” href=”estilo.css”> – a tag link vincula fontes externas que serão utilizadas no documento. Geralmente, é utilizada para importação de arquivos de estilo para a página, mas também podem ser utilizadas para representar a localização do feed da página e outras coisas.

Continue reading

Minicurso HTML 5: Visão Geral

Segundo a W3C, a Web baseia-se em três pilares

  • Um esquema de nomes para localização de fontes de informações na Web – URI
  • Um protocolo para acessar estas fontes – HTTP
  • Uma linguagem para facilitar a navegação entre as fontes de informação – HTML

Continue reading

Minicurso HTML 5: Roteiro

O mini-curso tem duração de aproximadamente 8 horas. Abaixo está o roteiro dos tópicos que serão abordados durante as aulas.

É importante frisar, que de acordo com a evolução da turma, certos tópicos podem ser priorizados, para que o maior número de pessoas possível chegue ao final do curso entendendo os principais conceitos e o caminho para avançar cada vez no domínio do HTML 5.

Continue reading

Minicurso HTML 5: Apresentação

Segundo a W3C (World Wide Web Consortium), HTML (abreviação de HyperText Markup Language) é um dos 3 pilares da Web, e de forma resumida pode-se defini-lo como: uma linguagem de publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Continue reading

© 2020 explicando.net

Theme by Anders NorenUp ↑