Resumo para Prova_ Padrões para Conteúdo Web

Prévia do material em texto

Resumo para Prova: Padrões para Conteúdo Web
1. Imagens em HTML ()
· Propósito: Inserir conteúdo visual estático (fotos, ilustrações, ícones) em páginas web.
· Tag: é uma tag vazia (self-closing), ou seja, não precisa de uma tag de fechamento.
· Atributos Essenciais:
· src: Obrigatório. Define o caminho (URL) da imagem. Pode ser relativo (dentro do mesmo projeto) ou absoluto (URL completa).
· alt: Obrigatório para acessibilidade. Fornece um texto alternativo que descreve a imagem. É lido por leitores de tela para usuários com deficiência visual e exibido caso a imagem não carregue.
· Atributos Comuns:
· width, height: Definem as dimensões da imagem em pixels. É recomendado usar CSS para controle de tamanho para melhor responsividade.
· loading: Otimização. lazy (carrega a imagem quando entra ou está perto da viewport), eager (carrega imediatamente).
· Boas Práticas:
· Otimizar o tamanho dos arquivos de imagem para carregamento rápido.
· Usar formatos adequados (JPEG para fotos, PNG para imagens com transparência, SVG para gráficos vetoriais).
· Sempre fornecer texto alt descritivo.
2. Links em HTML ()
· Propósito: Criar hiperlinks que permitem navegar entre páginas, arquivos ou seções dentro da mesma página.
· Tag: (âncora).
· Atributos Essenciais:
· href: Obrigatório. Define o URL de destino do link.
· Tipos de Links:
· Links Externos: href="https://www.google.com"
· Links Internos: href="sobre.html" (para outra página no mesmo site)
· Links de Âncora (para seções na mesma página):
1. No elemento de destino, adicione um id: Contato
2. No link, use # seguido do id: Ir para Contato
· Links de Email: href="mailto:seuemail@exemplo.com"
· Links de Telefone: href="tel:+5511987654321"
· Atributos Comuns:
· target: Define onde o link será aberto.
· _self (padrão): Abre na mesma janela/aba.
· _blank: Abre em uma nova janela/aba.
· rel: Indica a relação entre o documento atual e o documento linkado (ex: noopener, noreferrer, nofollow).
· Conteúdo do Link: O texto ou elemento entre as tags e é o que será clicável.
3. Formulários em HTML ()
· Propósito: Coletar dados do usuário (texto, números, seleções, arquivos) e enviá-los para um servidor.
· Tag Principal: .
· Atributos Essenciais do :
· action: O URL para onde os dados do formulário serão enviados quando ele for submetido.
· method: O método HTTP usado para enviar os dados.
· GET: Dados anexados à URL (visível, limitado, para buscas).
· POST: Dados enviados no corpo da requisição (invisível, ilimitado, para envio de dados sensíveis ou grandes).
· Elementos Comuns de Formulário (Inputs):
· : Campo de texto de linha única.
· : Campo de senha (caracteres mascarados).
· : Campo para email (validação básica de formato).
· : Campo para números (com setas para incremento/decremento).
· : Caixa de seleção (múltiplas opções).
· : Botão de opção (uma opção de um grupo, com o mesmo name).
· : Seletor de data.
· : Campo para upload de arquivos.
· : Botão para enviar o formulário.
· : Botão genérico (usado com JavaScript).
· : Campo de texto multilinha.
· com : Lista suspensa (dropdown).
· Atributos Comuns dos Inputs:
· name: Essencial. Nome do campo que será usado para identificar o dado no servidor.
· id: Usado para associar o input com um e para JavaScript.
· value: Valor inicial do campo ou valor do item selecionado (para radio, checkbox, option).
· placeholder: Texto de dica que aparece no campo antes da digitação.
· required: Torna o campo obrigatório.
· disabled: Desabilita o campo.
· readonly: Torna o campo somente leitura.
· Acessibilidade em Formulários:
· : Associa um texto a um input, melhorando a usabilidade e acessibilidade. Clicar no label foca o input.
· e : Agrupam campos relacionados para melhor organização e acessibilidade.
4. Áudio e Vídeo em HTML5
· Propósito: Inserir conteúdo multimídia diretamente na página, sem a necessidade de plugins.
· Tags: e .
· Atributos Comuns para e :
· src: Caminho do arquivo de áudio/vídeo.
· controls: Adiciona os controles padrão do navegador (play/pause, volume, barra de progresso). Altamente recomendado.
· autoplay: Inicia a reprodução automaticamente (muitas vezes bloqueado por navegadores sem interação do usuário).
· loop: Repete o áudio/vídeo continuamente.
· muted: Inicia o áudio/vídeo mudo.
· preload: Sugere ao navegador como pré-carregar o arquivo (auto, metadata, none).
· Atributos Específicos para :
· width, height: Dimensões do vídeo.
· poster: URL de uma imagem para ser exibida antes do vídeo começar a tocar.
· Suporte a Múltiplos Formatos ():
· Recomendado para garantir compatibilidade com diferentes navegadores.
· Dentro de ou , use a tag com src e type para oferecer formatos alternativos. O navegador escolherá o primeiro que puder reproduzir.
HTML
 
 
 Seu navegador não suporta a tag de vídeo.
· Boas Práticas:
· Oferecer transcrições para áudio e legendas/descrições para vídeo para acessibilidade ().
· Otimizar os arquivos multimídia para a web (compressão, formatos adequados).
5. Contêineres em HTML (Tags Semânticas e Genéricas)
· Propósito: Agrupar e organizar elementos HTML para estruturar o layout e o conteúdo da página.
· Tags Genéricas (Não Semânticas):
· : Elemento de bloco genérico. Não tem significado semântico. Usado extensivamente para agrupar elementos para estilização com CSS ou manipulação com JavaScript. Cria uma nova linha.
· : Elemento de linha genérico. Não tem significado semântico. Usado para aplicar estilos a pequenas partes de texto ou elementos inline. Não cria uma nova linha.
· Tags Semânticas (HTML5):
· Propósito: Adicionam significado à estrutura do conteúdo, tornando o HTML mais compreensível para navegadores, mecanismos de busca e desenvolvedores.
· Benefícios: Melhor SEO, melhor acessibilidade, código mais legível e mantenível.
· Exemplos:
· : Introdução, logotipos, navegação principal.
· : Links de navegação.
· : Conteúdo principal único da página.
· : Conteúdo autossuficiente e independente (ex: post de blog, notícia).
· : Agrupamento temático de conteúdo (ex: "Sobre Nós", "Serviços").
· : Conteúdo relacionado, mas separado (ex: barra lateral, publicidade).
· : Informações de rodapé (direitos autorais, links de contato).
· e : Para imagens, diagramas, etc., com legendas.
· Importância: Use tags semânticas sempre que possível para estruturar o documento, reservando e para casos onde não há um significado semântico apropriado.
6. Flexbox (CSS Flexible Box Layout Module)
· Propósito: Um modelo de layout CSS unidimensional (linhas ou colunas) projetado para distribuir espaço entre os itens em um contêiner e controlar seu alinhamento. Não é HTML, mas é crucial para layout moderno e é usado com HTML.
· Conceitos Chave:
· Contêiner Flex (Flex Container): O elemento pai que recebe display: flex; ou display: inline-flex;. Seus filhos diretos se tornam itens flex.
· Itens Flex (Flex Items): Os filhos diretos do contêiner flex.
· Eixo Principal (Main Axis): A direção principal em que os itens flex são dispostos (flex-direction).
· Eixo Cruzado (Cross Axis): O eixo perpendicular ao eixo principal.
· Propriedades do Contêiner Flex:
· display: flex;: Transforma o elemento em um contêiner flex.
· flex-direction: Define a direção do eixo principal (row - padrão, row-reverse, column, column-reverse).
· justify-content: Alinha os itens flex ao longo do eixo principal (flex-start, flex-end, center,space-between, space-around, space-evenly).
· align-items: Alinha os itens flex ao longo do eixo cruzado (verticalmente se flex-direction: row). (flex-start, flex-end, center, stretch, baseline).
· flex-wrap: Define se os itens quebram para a próxima linha/coluna quando não há espaço (nowrap - padrão, wrap, wrap-reverse).
· align-content: Alinha linhas de itens flex (quando flex-wrap: wrap) ao longo do eixo cruzado.
· Propriedades dos Itens Flex:
· flex-grow: Define a capacidade de um item de crescer para preencher o espaço disponível.
· flex-shrink: Define a capacidade de um item de encolher para evitar estouro.
· flex-basis: Define o tamanho inicial de um item antes que o espaço restante seja distribuído.
· flex: Shorthand para flex-grow, flex-shrink, flex-basis.
· order: Controla a ordem visual dos itens, independentemente da ordem no HTML.
· align-self: Sobrescreve o align-items para um item flex individual.
· Quando usar: Para layouts unidimensionais (linha ou coluna), como barras de navegação, galerias simples, cards, formulários. Para layouts bidimensionais (linhas e colunas simultaneamente), prefira CSS Grid.
Dica para a prova: Além de memorizar os atributos, tente entender o porquê de cada um existir (acessibilidade, responsividade, semântica). Pense em cenários práticos de uso.
Boa sorte na sua prova!