Skip to content

revisao.md

Latest commit

 

History

History
1109 lines (1005 loc) · 36.5 KB

revisao.md

File metadata and controls

1109 lines (1005 loc) · 36.5 KB

HTML

Introdução

Esta revisão aborda os principais elementos e conceitos do HTML, incluindo parágrafos, títulos e formatação de texto, além do uso de comentários e imagens com seus atributos. São explorados tópicos como quebras de linha, régua horizontal e a organização do código com div e span.

Outros temas incluem o trabalho com links (internos, externos e âncoras), diferentes tipos de listas (ordenadas, não ordenadas e de definição) e a criação de tabelas. A revisão também explora formulários, tipos de input, elementos como select e textarea, além de recursos modernos do HTML5, elementos semânticos e a aplicação de WAI-ARIA para acessibilidade.

Índice

  1. Elementos de parágrafo e título
  2. Elementos de formatação
  3. Comentários
  4. Elementos de imagem e atributos
  5. Formatos e otimização de imagens
  6. Quebras de linha e régua horizontal
  7. Organização de código com div e span
  8. Trabalhando com links
  9. Entendendo URLs absolutas e relativas
  10. Links dentro de uma mesma página
  11. Links externos
  12. Listas no HTML: ordenadas e não-ordenadas
  13. Listas de Definição (<dl>)
  14. Listas Aninhadas
  15. Criação de tabelas
  16. O que são formulários
  17. Conhecendo os tipos de input
  18. Elementos select e textarea
  19. Recursos modernos do HTML5
  20. Elementos semânticos
  21. WAI-ARIA e atributos de acessibilidade

1. Elementos de parágrafo e título

Os elementos de parágrafo e título são fundamentais para estruturar o conteúdo de uma página web, fornecendo hierarquia e organização ao texto.

Parágrafos

O elemento de parágrafo é representado pela tag <p>. Ele é usado para agrupar conteúdo textual em blocos coesos. Os navegadores automaticamente adicionam espaço antes e depois de cada parágrafo, criando uma separação visual entre eles.Exemplo:

<p>Este é um parágrafo de exemplo. Ele contém várias frases que formam um bloco de texto coeso.</p>
<p>Este é outro parágrafo. Observe como ele é automaticamente separado do parágrafo anterior.</p>

Títulos

HTML oferece seis níveis de títulos, de <h1> a <h6>. Eles são usados para criar uma estrutura hierárquica no documento.

<h1> : Título principal da página

<h2> : Subtítulos principais

<h3> : Subtítulos secundários

<h4> : Subtítulos terciários

<h5> : Subtítulos quaternários

<h6> : Subtítulos quinários

Exemplo:

<h1>Título Principal da Página</h1>
<h2>Seção Importante</h2>
<h3>Subseção</h3>
<h4>Tópico Específico</h4>
<h5>Subtópico</h5>
<h6>Detalhe Menor</h6>

É importante manter uma estrutura lógica e não pular níveis de título, pois isso ajuda na acessibilidade e SEO da página.

2. Elementos de formatação

Os elementos de formatação HTML permitem alterar a aparência do texto sem necessariamente mudar sua estrutura semântica. Aqui estão os elementos de formatação mais comuns, listados em ordem de uso mais frequente:

  1. Negrito: <strong> ou <b> 
    <strong>Texto em negrito semântico</strong>
<b>Texto em negrito estilístico</b>
  2. Itálico: <em> ou <i> 
    <em>Texto em itálico com ênfase</em>
<i>Texto em itálico estilístico</i>
  3. Sublinhado: <u> 
    <u>Texto sublinhado</u>
  4. Tachado: <s> ou <del> 
    <s>Texto tachado</s>
<del>Texto deletado</del>
  5. Sobrescrito: <sup> 
    x<sup>2</sup> (x ao quadrado)
  6. Subscrito: <sub> 
    H<sub>2</sub>O (fórmula da água)
  7. Texto pequeno: <small> 
    <small>Texto em tamanho reduzido</small>
  8. Marcação: <mark> 
    <mark>Texto destacado</mark>
  9. Citação inline: <q> 
    <q>Citação curta inline</q>
  10. Abreviação: <abbr> 
    <abbr title="HyperText Markup Language">HTML</abbr>
  11. Definição: <dfn> 
    <dfn>HTML</dfn> é uma linguagem de marcação.
  12. Código: <code> 
    <code>console.log("Hello, World!");</code>`
  13. Teclado: <kbd> 
    Pressione<kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.
  14. Variável: <var> 
    <var>x</var> = <var>y</var> + 2
  15. Saída: <samp> 
    <samp>Error 404: Page not found</samp>
  16. Endereço: <address> 
    <address>
  John Doe<br>
  123 Main St<br>
  Anytown, USA
</address>
  17. Bidirecional: <bdi> e <bdo> 
    <bdi>텍스트</bdi> (isola texto bidirecional)
<bdo dir="rtl">Texto da direita para a esquerda</bdo>
  18. Inserção: <ins> 
    <ins>Texto inserido</ins>
  19. Citação em bloco: <blockquote> 
    <blockquote>
  Uma longa citação que ocupa vários parágrafos.
</blockquote>
  20. Pré-formatado: <pre> 
    <pre>
  Texto    com    espaçamento
    e quebras de linha
      preservados
</pre>

3. Comentários

Comentários em HTML são usados para incluir notas no código-fonte que não são exibidas no navegador. Eles são úteis para documentação, organização e depuração do código.Sintaxe:

<!-- Este é um comentário HTML -->

Exemplos de uso:

  1. Comentário de uma linha: 
    <!-- Início da seção de navegação -->
<nav>
  <!-- Conteúdo da navegação aqui -->
</nav>
  2. Comentário de múltiplas linhas: 
    <!--
  Este é um comentário
  que abrange várias
  linhas de código
-->
  3. Comentário para marcar seções do código: 
    <!-- Cabeçalho da página -->
<header>
    <!-- Conteúdo do cabeçalho -->
</header>

    <!-- Conteúdo principal -->
<main>
    <!-- Conteúdo principal aqui -->
</main>

<!-- Rodapé da página -->*
<footer>
    <!-- Conteúdo do rodapé -->
</footer>
  4. Comentário para desabilitar temporariamente código: 
    <!--
<div>
  Este conteúdo está temporariamente desabilitado
</div>
-->
  5. Comentário para incluir informações de versão ou autor: 
    <!--
  Autor: John Doe
  Versão: 1.2
  Última atualização: 2025-01-06
-->

4. Elementos de imagem e atributos

O elemento <img> é usado para incorporar imagens em documentos HTML. É um elemento vazio, o que significa que não tem conteúdo nem tag de fechamento.Sintaxe básica:

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

Atributos principais:

  1. src (obrigatório): Especifica o caminho para a imagem. 
    <img src="imagens/foto.jpg">
  2. alt (altamente recomendado): Fornece uma descrição textual da imagem para acessibilidade e SEO. 
    <img src="logo.png" alt="Logo da empresa XYZ">
  3. width e height: Definem as dimensões da imagem em pixels. 
    <img src="icone.png" width="32" height="32" alt="Ícone de usuário">
  4. title: Adiciona um texto de dica que aparece quando o mouse passa sobre a imagem. 
    <img src="grafico.jpg" alt="Gráfico de vendas" title="Vendas do primeiro trimestre">
  5. loading: Controla como a imagem é carregada. 
    <img src="banner.jpg" alt="Banner promocional" loading="lazy">
  6. srcset: Permite especificar múltiplas fontes de imagem para diferentes resoluções de tela. 
    <img src="imagem-padrao.jpg" 
     srcset="imagem-pequena.jpg 300w,
             imagem-media.jpg 600w,
             imagem-grande.jpg 1200w"
     sizes="(max-width: 300px) 300px,
            (max-width: 600px) 600px,
            1200px"
     alt="Imagem responsiva">
  7. usemap: Associa a imagem a um mapa de imagem. 
    <img src="mapa.jpg" alt="Mapa clicável" usemap="#mapname">
  8. crossorigin: Especifica se a imagem deve ser carregada com CORS habilitado. 
    <img src="https://exemplo.com/imagem.jpg" alt="Imagem externa" crossorigin="anonymous">
  9. ismap: Indica que a imagem é parte de um mapa de imagem do lado do servidor. 
    <a href="pagina.php">
  <img src="botao.jpg" alt="Botão clicável" ismap>
</a>
  10. decoding: Sugere como o navegador deve decodificar a imagem. 
    <img src="foto.jpg" alt="Fotografia" decoding="async">

5. Formatos e otimização de imagens

A escolha do formato de imagem correto e a otimização adequada são cruciais para o desempenho e a qualidade visual de um site. Aqui estão os formatos mais comuns e técnicas de otimização:

Formatos de imagem

  1. JPEG (Joint Photographic Experts Group)
    • Melhor para: Fotografias e imagens com muitas cores
    • Características: Compressão com perda, tamanho de arquivo menor
    • Exemplo de uso: 
      <img src="fotografia.jpg" alt="Paisagem natural">
  2. PNG (Portable Network Graphics)
    • Melhor para: Imagens com transparência, logos, ícones
    • Características: Compressão sem perda, suporta transparência
    • Exemplo de uso: 
      <img src="logo.png" alt="Logo da empresa com fundo transparente">
  3. GIF (Graphics Interchange Format)
    • Melhor para: Animações simples, imagens com poucas cores
    • Características: Limitado a 256 cores, suporta animações
    • Exemplo de uso: 
      <img src="animacao.gif" alt="Ícone animado">
  4. WebP
    • Melhor para: Substituir JPEG e PNG com melhor compressão
    • Características: Suporta tanto compressão com perda quanto sem perda
    • Exemplo de uso: 
      <picture>
  <source srcset="imagem.webp" type="image/webp">
  <img src="imagem.jpg" alt="Imagem otimizada">
</picture>
  5. SVG (Scalable Vector Graphics)
    • Melhor para: Ícones, logos, ilustrações simples
    • Características: Baseado em vetores, escalável sem perda de qualidade
    • Exemplo de uso: 
      <img src="icone.svg" alt="Ícone vetorial">

Técnicas de otimização

  1. Redimensionamento: Ajuste o tamanho da imagem para as dimensões exatas necessárias. 
    <img src="imagem-otimizada.jpg" width="800" height="600" alt="Imagem redimensionada">
  2. Compressão: Use ferramentas de compressão para reduzir o tamanho do arquivo sem perda significativa de qualidade.
  3. Lazy Loading: Carregue imagens apenas quando necessário. 
    <img src="imagem-grande.jpg" loading="lazy" alt="Imagem carregada sob demanda">
  4. Imagens responsivas: Use srcset e sizes para fornecer diferentes versões da imagem para diferentes tamanhos de tela. 
    <img src="imagem-padrao.jpg" 
     srcset="imagem-pequena.jpg 300w, imagem-grande.jpg 1000w"
     sizes="(max-width: 600px) 300px, 1000px"
     alt="Imagem responsiva">
  5. CDN (Content Delivery Network): Use um CDN para distribuir suas imagens globalmente e reduzir o tempo de carregamento.
  6. Formato apropriado: Escolha o formato mais adequado para cada tipo de imagem.
  7. Otimização de metadados: Remova metadados desnecessários das imagens.
  8. Cache do navegador: Configure o cache adequadamente para imagens que não mudam frequentemente. 
    <img src="logo.png" alt="Logo da empresa" cache-control="max-age=31536000">
  9. Sprites de imagem: Combine várias imagens pequenas em uma única imagem para reduzir requisições HTTP.
  10. Minificação de SVG: Para arquivos SVG, remova dados desnecessários e otimize o código.

6. Quebras de linha e régua horizontal

Quebras de linha e réguas horizontais são elementos simples, mas úteis para controlar o layout e a separação visual do conteúdo em HTML.

Quebra de linha

A quebra de linha é representada pela tag
. É um elemento vazio que força uma quebra de linha no ponto onde é inserido.Exemplos de uso:

  1. Quebra simples em um texto: 
    <p>Esta é a primeira linha.<br>Esta é a segunda linha.</p>
  2. Em endereços: 
    <address>
  John Doe<br>
  123 Main St<br>
  Anytown, USA 12345
</address>
  3. Em poesia ou letras de música: 
    <p>
  Roses are red,<br>
  Violets are blue,<br>
  Sugar is sweet,<br>
  And so are you.
</p>
  4. Para separar elementos inline: 
    <span>Elemento 1</span><br>
<span>Elemento 2</span><br>
<span>Elemento 3</span>
  5. Em formulários: 
    <form>
  <label for="nome">Nome:</label><br>
  <input type="text" id="nome" name="nome"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email">
</form>

Régua horizontal

A régua horizontal é representada pela tag <hr>. É um elemento vazio que cria uma linha horizontal, útil para separar seções de conteúdo.Exemplos de uso:

  1. Separação básica entre seções: 
    <h2>Seção 1</h2>
<p>Conteúdo da seção 1.</p>
<hr>
<h2>Seção 2</h2>
<p>Conteúdo da seção 2.</p>
  2. Em formulários longos: 
    <form>
  <h3>Informações Pessoais</h3>
  <!-- campos de informações pessoais -->
  <hr>
  <h3>Endereço</h3>
  <!-- campos de endereço -->
</form>
  3. Para separar o rodapé: 
    <main>
  <!-- Conteúdo principal -->
</main>
<hr>
<footer>
  <!-- Conteúdo do rodapé -->
</footer>
  4. Em artigos longos: 
    <article>
  <h1>Título do Artigo</h1>
  <p>Introdução...</p>
  <hr>
  <h2>Primeira Parte</h2>
  <p>Conteúdo...</p>
  <hr>
  <h2>Segunda Parte</h2>
  <p>Mais conteúdo...</p>
</article>
  5. Para criar uma separação visual em listas: 
    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <hr>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

7. Organização de código com div e span

As tags <div> e <span> são elementos de contêiner genéricos usados para organizar e agrupar outros elementos HTML. Eles não têm significado semântico próprio, mas são essenciais para estruturação e estilização.

Div

A tag <div> é um elemento de nível de bloco usado para criar seções ou agrupar conteúdos.Exemplos de uso:

  1. Criando seções de layout: 
    <div id="cabecalho">
  <h1>Meu Site</h1>
  <nav><!-- Menu de navegação --></nav>
</div>
<div id="conteudo-principal">
  <article><!-- Conteúdo do artigo --></article>
  <aside><!-- Barra lateral --></aside>
</div>
<div id="rodape">
  <!-- Conteúdo do rodapé -->
</div>
  2. Agrupando elementos relacionados: 
    <div class="produto">
  <img src="produto.jpg" alt="Produto">
  <h3>Nome do Produto</h3>
  <p>Descrição do produto</p>
  <button>Comprar</button>
</div>
  3. Criando contêineres para estilização: 
    <div class="caixa-destaque">
  <h2>Oferta Especial</h2>
  <p>Aproveite nossos descontos!</p>
</div>
  4. Organizando formulários: 
    <form>
  <div class="campo-formulario">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
  </div>
  <div class="campo-formulario">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
</form>
  5. Criando grids ou layouts flexíveis: 
    <div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

Span

A tag <span> é um elemento inline usado para marcar partes menores de texto ou elementos dentro de um bloco maior.Exemplos de uso:

  1. Estilizando partes específicas de texto: 
    <p>Este é um <span class="destaque">texto importante</span> que precisa de atenção.</p>
  2. Adicionando ícones inline: 
    <button>
  <span class="icone-carrinho"></span>
  Adicionar ao Carrinho
</button>
  3. Criando elementos interativos inline: 
    <p>Clique <span class="link-tooltip" title="Mais informações">aqui</span> para saber mais.</p>
  4. Aplicando estilos a números ou datas: 
    <p>O evento acontecerá em <span class="data">15 de março de 2025</span>.</p>
  5. Marcando termos técnicos ou palavras-chave: 
    <p>HTML significa <span class="termo-tecnico">HyperText Markup Language</span>.</p>

8. Trabalhando com links

Links são fundamentais para a navegação na web. Em HTML, eles são criados usando a tag <a> (âncora).Sintaxe básica:

<a href="URL">Texto do link</a>

Exemplos e tipos de links:

  1. Link para uma página externa: 
    <a href="https://www.exemplo.com">Visite nosso site parceiro</a>
  2. Link para uma página interna: 
    <a href="sobre.html">Sobre nós</a>
  3. Link para um email: 
    <a href="mailto:contato@exemplo.com">Envie-nos um email</a>
  4. Link para um número de telefone: 
    <a href="tel:+551234567890">Ligue para nós</a>
  5. Link para download de arquivo: 
    <a href="documento.pdf" download>Baixe nosso catálogo</a>
  6. Link para uma seção específica da página (âncora): 
    <a href="#secao-2">Ir para Seção 2</a>

<!-- Em algum lugar da página -->
<h2 id="secao-2">Seção 2</h2>
  7. Link que abre em uma nova aba: 
    <a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">Abrir em nova aba</a>
  8. Link com atributo title (tooltip): 
    <a href="politica-privacidade.html" title="Leia nossa política de privacidade">Política de Privacidade</a>
  9. Link com imagem: 
    <a href="https://www.exemplo.com">
  <img src="logo.png" alt="Logo da Empresa">
</a>
  10. Link para um elemento específico em outra página: 
    <a href="pagina.html#secao-especifica">Ir para seção específica em outra página</a>
  11. Link relativo ao diretório atual: 
    <a href="./imagens/foto.jpg">Ver foto</a>
  12. Link para o diretório pai: 
    <a href="../index.html">Voltar à página inicial</a>
  13. Link com atributo rel para SEO: 
    <a href="https://www.parceiro.com" rel="nofollow">Site Parceiro</a>
  14. Link para um arquivo de script: 
    <a href="javascript:void(0);" onclick="minhaFuncao()">Executar função</a>
  15. Link com prefixo de protocolo: 
    <a href="//exemplo.com">Link com protocolo relativo</a>

Ao trabalhar com links, é importante considerar a acessibilidade, usabilidade e SEO. Use textos descritivos para os links, evite abrir muitos links em novas abas sem necessidade, e certifique-se de que todos os links funcionem corretamente.

9. Entendendo URLs absolutas e relativas

URLs (Uniform Resource Locators) são endereços que especificam a localização de recursos na internet. Existem dois tipos principais de URLs: absolutas e relativas.

URLs Absolutas

Uma URL absoluta contém todas as informações necessárias para localizar um recurso, independentemente do contexto. Ela inclui:

  • Protocolo (ex: https://)
  • Nome de domínio (ex: www.exemplo.com)
  • Caminho completo para o recurso
  • Parâmetros de consulta (opcionais)

Exemplo de URL absoluta:

texthttps://www.exemplo.com/blog/artigo.html?id=123

Vantagens das URLs absolutas:

  • Garantem acesso consistente ao recurso de qualquer lugar
  • Evitam problemas de indexação em sites com múltiplas versões (HTTP/HTTPS)
  • Facilitam a compreensão do destino do link

URLs Relativas

Uma URL relativa especifica a localização de um recurso em relação à página atual ou ao domínio base. Ela geralmente inclui apenas o caminho e, opcionalmente, o recurso.Exemplo de URL relativa:

text/blog/artigo.html

Vantagens das URLs relativas:

  • Mais fáceis de gerenciar em sites grandes
  • Permitem mover conteúdo ou mudar domínios sem quebrar links internos
  • Reduzem a redundância no código

10. Links dentro de uma mesma página

Links dentro da mesma página, também conhecidos como âncoras, permitem a navegação entre diferentes seções de um documento HTML. Eles são úteis para melhorar a usabilidade em páginas longas.Para criar um link âncora:

  1. Defina um identificador no elemento de destino: 
    <h2 id="secao2">Seção 2</h2>
  2. Crie o link para a âncora: 
    <a href="#secao2">Ir para Seção 2</a>

Exemplos de uso:

  • Sumários no início de artigos longos
  • Botões "Voltar ao topo" em páginas extensas
  • Navegação entre seções em páginas de conteúdo único (one-page websites)

11. Links externos

Links externos são hiperlinks que apontam para páginas em domínios diferentes do site atual. Eles são importantes para SEO e para fornecer recursos adicionais aos visitantes.Ao criar links externos:

  1. Use URLs absolutas para garantir que o link funcione corretamente(https://www.seo.com/pt-br/blog/absolute-vs-relative-urls-for-seo/).
  2. Considere abrir o link em uma nova aba usando o atributo target="_blank".
  3. Adicione o atributo rel="noopener noreferrer" para segurança.

Exemplo de link externo:

<a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">Site Exemplo</a>

Benefícios dos links externos:

  • Aumentam a credibilidade do seu conteúdo
  • Fornecem valor adicional aos visitantes
  • Podem melhorar o ranking do site nos mecanismos de busca

Cuidados ao usar links externos:

  • Verifique regularmente se os links ainda estão ativos
  • Evite linkar para sites de baixa qualidade ou não confiáveis
  • Use o atributo rel="nofollow" para links pagos ou não endossados

Ao implementar links em seu site, considere o contexto e o objetivo de cada link para escolher entre URLs absolutas ou relativas, e entre links internos ou externos. Uma estratégia de linking bem planejada pode melhorar significativamente a experiência do usuário e o desempenho do SEO.

12. Listas no HTML: ordenadas e não-ordenadas

As listas em HTML são elementos fundamentais para organizar e estruturar informações em uma página web. Existem três tipos principais de listas: não-ordenadas, ordenadas e de definição.

Listas Não-Ordenadas (<ul>)

As listas não-ordenadas são criadas usando a tag <ul> (unordered list) e são usadas quando a ordem dos itens não é importante. Cada item da lista é definido pela tag <li>

(list item).Exemplo básico:

<ul>
  <li>Maçã</li>
  <li>Banana</li>
  <li>Laranja</li>
</ul>

Estilos de marcadores para <ul>:

  • disc: Círculo preenchido (padrão)
  • circle: Círculo vazio
  • square: Quadrado preenchido
  • none: Sem marcador

Exemplo com estilo personalizado:

<ul style="list-style-type: square;">
  <li>Item com marcador quadrado</li>
  <li>Outro item</li>
</ul>

Listas Ordenadas (<ol>)

As listas ordenadas são criadas usando a tag <ol> (ordered list) e são usadas quando a sequência dos itens é importante. Cada item também é definido pela tag <li>.Exemplo básico:

<ol>
  <li>Primeiro passo</li>
  <li>Segundo passo</li>
  <li>Terceiro passo</li>
</ol>

Estilos de numeração para <ol>:

  • 1: Números (padrão)
  • a: Letras minúsculas
  • A: Letras maiúsculas
  • i: Algarismos romanos minúsculos
  • I: Algarismos romanos maiúsculos

Exemplo com estilo personalizado:

<ol type="i" start="4">
  <li>Item com numeração romana minúscula começando do 4</li>
  <li>Próximo item</li>
</ol>

13. Listas de Definição (<dl>)

As listas de definição são usadas para termos e suas definições. Elas usam três tags:

  • <dl>: Definition List (lista de definição)
  • <dt>: Definition Term (termo a ser definido)
  • <dd>: Definition Description (descrição do termo)

Exemplo:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, a linguagem de marcação para criar páginas web.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, usado para estilizar elementos HTML.</dd>
</dl>

14. Listas Aninhadas

É possível aninhar listas dentro de outras listas, criando sublistas:

<ul>
  <li>Frutas
    <ul>
      <li>Maçã</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetais
    <ol>
      <li>Cenoura</li>
      <li>Brócolis</li>
    </ol>
  </li>
</ul>

15. Criação de tabelas

As tabelas em HTML são usadas para organizar dados em linhas e colunas. A estrutura de uma tabela inclui várias tags importantes:

  • <table>: Define a tabela
  • <thead>: Agrupa o conteúdo do cabeçalho da tabela
  • <tbody>: Agrupa o conteúdo principal da tabela
  • <tfoot>: Agrupa o conteúdo do rodapé da tabela
  • <tr>: Define uma linha da tabela
  • <th>: Define uma célula de cabeçalho
  • <td>: Define uma célula de dados

Exemplo de uma tabela completa:

<table border="1">
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Linha 1, Coluna 1</td>
      <td>Linha 1, Coluna 2</td>
    </tr>
    <tr>
      <td>Linha 2, Coluna 1</td>
      <td>Linha 2, Coluna 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Rodapé da tabela</td>
    </tr>
  </tfoot>
</table>

Atributos importantes para tabelas:

  • border: Define a largura da borda da tabela
  • cellpadding: Define o espaçamento interno das células
  • cellspacing: Define o espaçamento entre as células
  • colspan: Permite que uma célula se estenda por várias colunas
  • rowspan: Permite que uma célula se estenda por várias linhas

16. O que são formulários

Formulários HTML são elementos usados para coletar informações dos usuários. Eles são criados usando a tag <form> e podem conter vários tipos de campos de entrada, botões e outros elementos interativos.Estrutura básica de um formulário:

<form action="/submit-form" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Enviar">
</form>

Atributos importantes do <form>:

  • action: Especifica para onde os dados do formulário serão enviados
  • method: Define o método HTTP a ser usado (geralmente "get" ou "post")
  • enctype: Especifica como os dados do formulário devem ser codificados ao enviar ao servidor (importante para upload de arquivos)

17. Conhecendo os tipos de input

O elemento <input> é o mais versátil e comum em formulários HTML. Aqui está uma lista detalhada dos tipos de <input>, ordenados do mais utilizado para o menos:

  1. text: Para entrada de texto de linha única 
    <input type="text" name="nome" placeholder="Seu nome">
  2. password: Para senhas (oculta os caracteres digitados) 
    <input type="password" name="senha" minlength="8">
  3. submit: Para botões de envio de formulário 
    <input type="submit" value="Enviar formulário">
  4. checkbox: Para caixas de seleção 
    <input type="checkbox" name="termos" value="aceito"> Aceito os termos
  5. radio: Para botões de opção 
    <input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="feminino"> Feminino
  6. email: Para endereços de e-mail 
    <input type="email" name="email" required>
  7. number: Para entrada numérica 
    <input type="number" name="idade" min="0" max="120">
  8. date: Para seleção de data 
    <input type="date" name="data_nascimento">
  9. file: Para upload de arquivos 
    <input type="file" name="documento" accept=".pdf,.doc,.docx">
  10. hidden: Para campos ocultos 
    <input type="hidden" name="id_usuario" value="123456">
  11. tel: Para números de telefone 
    <input type="tel" name="telefone" pattern="[0-9]{10,11}">
  12. url: Para URLs 
    <input type="url" name="website">
  13. search: Para campos de busca 
    <input type="search" name="busca" placeholder="Pesquisar...">
  14. time: Para entrada de hora 
    <input type="time" name="horario">
  15. color: Para seleção de cor 
    <input type="color" name="cor_favorita">
  16. range: Para seleção de um valor dentro de um intervalo 
    <input type="range" name="volume" min="0" max="100" step="1">
  17. datetime-local: Para data e hora (sem fuso horário) 
    <input type="datetime-local" name="evento">
  18. month: Para seleção de mês e ano 
    <input type="month" name="mes_ano">
  19. week: Para seleção de semana e ano 
    <input type="week" name="semana">
  20. image: Para criar um botão de imagem 
    <input type="image" src="botao.png" alt="Enviar" width="50" height="50">
  21. reset: Para resetar o formulário aos valores padrão 
    <input type="reset" value="Limpar formulário">

18. Elementos select e textarea

Select

O elemento <select> cria uma lista suspensa de opções. É usado em conjunto com a tag <option> para definir as opções disponíveis.Exemplo detalhado:

<label for="plataforma">Escolha uma plataforma:</label>
<select name="plataforma" id="plataforma">
  <option value="">Selecione uma opção</option>
  <option value="xbox">Xbox Series</option>
  <option value="ps5">PlayStation 5</option>
  <option value="nsw">Nintendo Switch</option>
  <optgroup label="Plataformas de PC">
    <option value="steam">Steam</option>
    <option value="epic">Epic Games Store</option>
  </optgroup>
</select>

Atributos importantes do <select>:

  • name: Define o nome do campo para envio de dados
  • id: Identificador único para o elemento
  • multiple: Permite seleção múltipla
  • size: Define o número de opções visíveis sem rolar
  • required: Torna o campo obrigatório

Textarea

O elemento <textarea> cria uma área de texto multilinha. É útil para entradas de texto mais longas, como comentários ou descrições.Exemplo detalhado:

<label for="comentario">Deixe seu comentário:</label>
<textarea name="comentario" id="comentario" rows="4" cols="50" maxlength="500" placeholder="Digite seu comentário aqui (máximo 500 caracteres)"></textarea>

Atributos importantes do <textarea>:

  • name: Nome do campo para envio de dados
  • id: Identificador único para o elemento
  • rows: Define o número de linhas visíveis
  • cols: Define o número de colunas visíveis
  • maxlength: Limita o número máximo de caracteres
  • placeholder: Texto de exemplo que aparece quando o campo está vazio
  • required: Torna o campo obrigatório
  • wrap: Controla como o texto é quebrado (soft, hard, off)

Estes elementos são essenciais para criar formulários interativos e coletar diversos tipos de informações dos usuários em páginas web. A escolha correta do tipo de input e a configuração adequada dos atributos podem melhorar significativamente a usabilidade e a acessibilidade do seu formulário.

19. Recursos modernos do HTML5

O HTML5 trouxe uma série de recursos modernos que revolucionaram o desenvolvimento web:

  1. Suporte nativo a áudio e vídeo 
    <video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
  2. Canvas para gráficos 2D e 3D 
    <canvas id="myCanvas" width="200" height="100"></canvas>
  3. SVG para gráficos vetoriais 
    <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  4. Geolocalização 
    javascriptnavigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  5. Web Storage para armazenamento local 
    javascriptlocalStorage.setItem("chave", "valor");
sessionStorage.setItem("chave", "valor");
  6. Web Workers para processamento em segundo plano 
    javascriptconst worker = new Worker("worker.js");
  7. WebSockets para comunicação bidirecional em tempo real 
    javascriptconst socket = new WebSocket("ws://exemplo.com/socket");
  8. Drag and Drop nativo 
    <div draggable="true" ondragstart="drag(event)">Arraste-me</div>

20. Elementos semânticos

Os elementos semânticos do HTML5 fornecem significado estrutural ao conteúdo. Aqui estão os principais, listados do mais utilizado para o menos:

  1. <header>: Cabeçalho da página ou seção
  2. <nav>: Navegação principal
  3. <main>: Conteúdo principal da página
  4. <article>: Conteúdo independente e autocontido
  5. <section>: Seção temática de conteúdo
  6. <aside>: Conteúdo relacionado, mas separado do conteúdo principal
  7. <footer>: Rodapé da página ou seção
  8. <figure>: Conteúdo autônomo, frequentemente com legenda
  9. <figcaption>: Legenda para um elemento <figure>
  10. <time>: Data ou hora específica
  11. <mark>: Texto destacado ou marcado
  12. <details>: Detalhes adicionais que podem ser expandidos
  13. <summary>: Resumo ou cabeçalho visível para um elemento <details>

21. WAI-ARIA e atributos de acessibilidade

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) fornece atributos adicionais para melhorar a acessibilidade de conteúdo web dinâmico. Aqui estão os principais atributos ARIA, listados do mais utilizado para o menos:

  1. role: Define a função de um elemento 
    <div role="button">Clique aqui</div>
  2. aria-label: Fornece um rótulo para elementos sem texto visível 
    <button aria-label="Fechar">X</button>
  3. aria-labelledby: Associa um elemento a outro que serve como seu rótulo 
    <h2 id="titulo">Seção importante</h2>
<div aria-labelledby="titulo">Conteúdo da seção</div>
  4. aria-hidden: Oculta elementos de tecnologias assistivas 
    <div aria-hidden="true">Conteúdo decorativo</div>
  5. aria-expanded: Indica se um elemento expansível está expandido ou recolhido 
    <button aria-expanded="false">Mostrar mais</button>
  6. aria-controls: Indica que um elemento controla outro 
    <button aria-controls="painel">Abrir painel</button>
<div id="painel">Conteúdo do painel</div>
  7. aria-live: Define uma região que será atualizada dinamicamente 
    <div aria-live="polite">Conteúdo atualizado</div>
  8. aria-required: Indica que um campo de formulário é obrigatório 
    <input type="text" aria-required="true">
  9. aria-selected: Indica o estado de seleção de um elemento 
    <li role="option" aria-selected="true">Opção selecionada</li>
  10. aria-disabled: Indica que um elemento está desabilitado 
    <button aria-disabled="true">Botão desabilitado</button>

Estes recursos, elementos semânticos e atributos ARIA trabalham em conjunto para criar páginas web mais acessíveis, significativas e interativas, melhorando a experiência do usuário e a compatibilidade com diferentes dispositivos e tecnologias assistivas