Qual é o propósito do atributo 'controls' no elemento HTML?
Ativar controles de reprodução, pausa e volume
(correct)
Adicionar legendas ao vídeo
Carregar vídeos em formatos diferentes
Definir a largura e altura do vídeo
O elemento
True (A)
Qual elemento HTML é usado para reproduzir vídeos numa página web?
O navegador usará o primeiro formato reconhecido dentro do elemento <_____>
<p>source</p>
Signup and view all the answers
Associa os elementos HTML com suas funções:
<p><video> = Reproduzir vídeo na página</p>
<source> = Especificar arquivos de vídeo alternativos
controls = Adicionar controles ao vídeo
<img> = Mostrar imagens na página
Signup and view all the answers
Qual dos seguintes elementos HTML é utilizado para criar uma lista 'drop-down'?
<p><select> (A)</p>
Signup and view all the answers
O que acontece se o navegador não suportar o elemento
<p>Mostrará o texto entre as tags <video> (A)</p>
Signup and view all the answers
Todos os formatos de imagem são suportados por todos os navegadores e dispositivos.
<p>False (B)</p>
Signup and view all the answers
O método 'GET' é adequado para enviar grandes quantidades de dados de forma segura.
<p>False (B)</p>
Signup and view all the answers
Qual atributo HTML define a ação a ser realizada quando um formulário é submetido?
<p>action</p>
Signup and view all the answers
Qual deve ser a ordem dos formatos de imagem definidos no elemento ?
<p>O formato que o navegador reconhece primeiro;</p>
Signup and view all the answers
O elemento __________ é utilizado para definir uma descrição para um grupo de opções em uma lista 'drop-down'.
<p>optgroup</p>
Signup and view all the answers
Associe os elementos HTML com suas descrições:
<p><button> = Define um botão clicável</p>
<textarea> = Campo para texto longo
<fieldset> = Agrupa informações relacionadas
<datalist> = Lista de opções pré-definidas
Signup and view all the answers
Qual dos métodos HTTP é utilizado para enviar dados de formulário de maneira que eles não sejam visíveis na URL?
<p>POST (D)</p>
Signup and view all the answers
O elemento
<p>False (B)</p>
Signup and view all the answers
O que é um
<p>Uma descrição para o elemento <fieldset></p>
Signup and view all the answers
Qual elemento é utilizado para agrupar elementos e/ou dados relacionados?
<p>fieldset> (A)</p>
Signup and view all the answers
O elemento datalist> é utilizado para definir um botão de envio.
<p>False (B)</p>
Signup and view all the answers
Qual atributo se usa para especificar o tipo de botão em um elemento button>?
<p>type</p>
Signup and view all the answers
O elemento ________ é utilizado para fornecer funcionalidade de 'preenchimento automático' para elementos de entrada.
<p>datalist</p>
Signup and view all the answers
Qual destes elementos não pode receber texto ou outros elementos?
<p>button> (D)</p>
Signup and view all the answers
Associe os elementos HTML a suas respectivas funções:
<p>fieldset> = Agrupa elementos relacionados
legend> = Define a descrição de um fieldset
datalist> = Oferece opções predefinidas
input type='password'> = Campo de entrada para senhas</p>
Signup and view all the answers
O atributo disabled desativa todos os elementos dentro de um fieldset.
<p>True (A)</p>
Signup and view all the answers
Qual atributo deve ter o mesmo valor que o id do elemento datalist>?
<p>list</p>
Signup and view all the answers
Qual é a função do elemento
<p>Definir uma descrição para elementos do formulário (A)</p>
Signup and view all the answers
O elemento
<p>True (A)</p>
Signup and view all the answers
Qual atributo deve ser utilizado para associar um
<p>for</p>
Signup and view all the answers
O elemento <button> define um botão ______.
<p>clicável</p>
Signup and view all the answers
Associe os elementos HTML com suas funções:
<p><label> = Define uma descrição para elementos de formulário</p>
<option> = Define uma opção em uma lista drop-down
<button> = Cria um botão clicável
<select> = Cria uma lista drop-down
Signup and view all the answers
Qual atributo é necessário para referenciar os dados do formulário após ser submetido?
<p>name (A)</p>
Signup and view all the answers
O atributo 'selected' é utilizado para especificar um item de lista pré-selecionado no elemento
<p>True (A)</p>
Signup and view all the answers
Por que o uso do método POST é recomendado quando o formulário contém informações sensíveis?
<p>Porque és dados são enviados de forma oculta no corpo da requisição.</p>
Signup and view all the answers
Qual tipo de input é utilizado para selecionar uma cor?
<p>color (B)</p>
Signup and view all the answers
O input do tipo 'checkbox' permite selecionar apenas uma opção.
<p>False (B)</p>
Signup and view all the answers
O que faz o atributo 'readonly' em um campo de input?
<p>Indica que o campo é só de leitura e não pode ser editado.</p>
Signup and view all the answers
O tipo de input '________' permite a inserção de arquivos através de um botão 'Procurar'.
<p>file</p>
Signup and view all the answers
Associe os tipos de input com suas respectivas descrições:
<p>radio = Define botões de opção, onde apenas uma pode ser escolhida
date = Define um campo para inserir uma data
email = Campo para um endereço de email
button = Define um botão que não submete automaticamente os dados</p>
Signup and view all the answers
Qual dos seguintes tipos de input não envia seu valor na submissão do formulário?
<p>disabled (D)</p>
Signup and view all the answers
O input do tipo 'reset' repõe todos os valores do formulário para seus padrões definidos.
<p>True (A)</p>
Signup and view all the answers
Qual é a função do campo de input do tipo 'local'?
<p>Permite inserir uma data e hora.</p>
Signup and view all the answers
Qual atributo HTML deve ser utilizado para indicar que um campo de entrada é obrigatório?
<p>required (B)</p>
Signup and view all the answers
O atributo 'multiple' pode ser usado em campos de entrada do tipo texto.
<p>False (B)</p>
Signup and view all the answers
Qual é a função do atributo 'placeholder' em um campo de entrada?
<p>Fornecer uma sugestão visual do valor esperado.</p>
Signup and view all the answers
O atributo 'size' especifica a largura visível, em __________, de um campo de entrada.
<p>caracteres</p>
Signup and view all the answers
Associe os campos de entrada com suas características corretas:
<p>text = Permite o preenchimento de texto único.
email = Aceita endereços de email.
file = Permite o upload de arquivos.
number = Aceita apenas valores numéricos.</p>
Signup and view all the answers
Qual atributo deve ser utilizado para definir um padrão de validação para um campo de entrada?
<p>pattern (C)</p>
Signup and view all the answers
O atributo 'autofocus' faz com que o cursor seja automaticamente colocado no campo ao carregar a página.
<p>True (A)</p>
Signup and view all the answers
Quais tipos de entrada podem utilizar o atributo 'multiple'?
<p>email e file</p>
Signup and view all the answers
Flashcards
Formatos de imagem suportados
Alguns navegadores ou dispositivos podem não suportar todos os formatos de imagem. O elemento permite adicionar imagens de todos os formatos, e o navegador usará o primeiro formato reconhecido.
Elemento
Mostra/reproduz vídeo numa página web. O atributo 'controls' adiciona controlos (play, pause, volume). Largura e altura devem ser especificadas para evitar problemas de layout.
Atributo 'controls' em
Adiciona controlos de vídeo (play, pause, volume) ao elemento
Largura e altura em
Essencial para o correto carregamento de vídeos, evita problemas de layout durante o carregamento.
Signup and view all the flashcards
Elemento
Especifica ficheiros de vídeo alternativos se o navegador não reconhecer o formato principal.
Signup and view all the flashcards
Compatibilidade em
Texto dentro das tags só é exibido se o navegador não suportar o elemento
Signup and view all the flashcards
Elemento form
Elemento HTML utilizado para criar formulários, permitindo a entrada de dados do usuário.
Signup and view all the flashcards
Elemento label
Elemento HTML utilizado para fornecer uma descrição/rótulo para outros elementos, como inputs.
Signup and view all the flashcards
Elemento input
Elemente HTML usado para receber dados de entrada do usuário (texto, password, email, etc).
Signup and view all the flashcards
Elemento Button
Elemento HTML que representa um botão clicável, podendo disparar ações ou enviar dados de um formulário.
Signup and view all the flashcards
Elemento select
Elemento HTML utilizado para criar menus dropdown ou combo boxes.
Signup and view all the flashcards
Elemento textarea
Elemento HTML para inserir textos longos.
Signup and view all the flashcards
Elemento fieldset
Elemento HTML para agrupar elementos relacionados dentro de um bloco.
Signup and view all the flashcards
Elemento legend
Elemento HTML utilizado para definir um título/descrição para um fieldset.
Signup and view all the flashcards
Elemento datalist
HTML elemento que cria lista pré-definida para elementos de entrada.
Signup and view all the flashcards
Atributo action (form)
Especifica o destino para onde os dados do formulário são enviados quando submetidos.
Signup and view all the flashcards
Método GET
Método HTTP para enviar dados do formulário como parte da URL.
Signup and view all the flashcards
Método POST
Método HTTP para enviar dados do formulário no corpo do pedido HTTP.
Signup and view all the flashcards
Elemento form e dados sensíveis
Para envio de dados sensíveis/pessoais em formulários, utilize sempre o método POST.
Signup and view all the flashcards
Elemento label
Fornece uma descrição a elementos de formulário, melhorando a acessibilidade (leitores de tela) e usabilidade (cliques em áreas pequenas).
Signup and view all the flashcards
Atributo 'for' e 'id' (label)
O atributo 'for' do elemento 'label' deve ser igual ao atributo 'id' do elemento de formulário a que se refere para associá-los.
Signup and view all the flashcards
Elemento select
Cria uma lista dropdown (desdobrável).
Signup and view all the flashcards
Elemento option
Define uma opção dentro de uma lista dropdown.
Signup and view all the flashcards
Opção pré-selecionada (select)
Utilize o atributo 'selected' para definir uma opção como selecionada por padrão.
Signup and view all the flashcards
Atributo 'size' (select)
Define o número de opções visíveis numa lista dropdown.
Signup and view all the flashcards
Atributo 'multiple' (select)
Permite seleção de múltiplas opções na dropdown.
Signup and view all the flashcards
Atributo 'name' (select)
Necessário para identificar os dados do formulário ao submeter. Sem ele, os dados da dropdown não serão enviados.
Signup and view all the flashcards
Atributo 'id' (select)
Necessário para associação entre o elemento 'label' e a 'dropdown'.
Signup and view all the flashcards
Elemento button
Define um botão clicável.
Signup and view all the flashcards
Elemento <button>
Elemento HTML para criar botões. Requer o atributo "type" para especificar o tipo de botão (ex: submit, button, reset).
Signup and view all the flashcards
Elemento
Define uma legenda para o elemento
Signup and view all the flashcards
Elemento
Agrupa elementos relacionados em um formulário. O atributo form faz referência ao formulário e o atributo disabled pode desabilitar os elementos agrupados.
Signup and view all the flashcards
Elemento
Fornece uma lista de sugestões de texto para o elemento (input text) associado. Permite preenchimento automático.
Signup and view all the flashcards
Input type "password"
Campo de entrada de texto ocultando os caracteres digitados, geralmente usado para senhas.
Signup and view all the flashcards
Input type "submit"
Botão para enviar dados do formulário para o servidor.
Signup and view all the flashcards
Atributo "disabled"
Desativa um elemento do formulário (como um campo de texto ou botão).
Signup and view all the flashcards
Input 'reset'
Botão que reseta os valores de um formulário para os padrões.
Signup and view all the flashcards
Input 'radio'
Botões de opção; somente um pode ser selecionado.
Signup and view all the flashcards
Input 'checkbox'
Caixas de seleção; permite selecionar nenhuma ou múltiplas opções.
Signup and view all the flashcards
Input 'button'
Botão que não envia automaticamente os dados do formulário.
Signup and view all the flashcards
Input 'color'
Campo para entrada de cores.
Signup and view all the flashcards
Input 'date'
Campo para entrada de datas.
Signup and view all the flashcards
Input 'local'
Campo para entrada de datas e horas.
Signup and view all the flashcards
Input 'email'
Campo para entrada de endereços de email.
Signup and view all the flashcards
Input 'image'
Imagem como botão de envio (submit).
Signup and view all the flashcards
Input 'file'
Campo para seleção de ficheiros.
Signup and view all the flashcards
Atributo 'value'
Especifica o valor inicial do campo de entrada.
Signup and view all the flashcards
Atributo 'readonly'
Campo só de leitura; o valor é enviado ao submeter.
Signup and view all the flashcards
Atributo 'disabled'
Campo desativado; não é enviado ao submeter.
Signup and view all the flashcards
Atributo size em input
Especifica a largura visível, em caracteres, de um campo de entrada. Só para inputs tipo text, search, tel, url, email e password.
Signup and view all the flashcards
Atributo multiple em input
Permite ao utilizador introduzir vários valores num campo de entrada. Só para inputs tipo email e file.
Signup and view all the flashcards
Atributo pattern em input
Especifica uma expressão regular para validar o valor do campo no envio. Só inputs: text, date, search, url, tel, email, password.
Signup and view all the flashcards
Atributo placeholder
Sugestão que descreve o valor ou formato esperado para um campo. Visível no input até o utilizador inserir um valor.
Signup and view all the flashcards
Atributo required
Obriga o preenchimento de um campo antes de submeter o formulário. Usado em vários tipos.
Signup and view all the flashcards
Atributo autofocus
Define que o campo deve ter o foco quando a página carrega.
Signup and view all the flashcards
Atributo autocomplete
Ativa ou desativa o preenchimento automático em inputs text, search, url, tel, email, password, date-picker, range e color, ou em formulários.
Signup and view all the flashcards
Campo Nome
Campo de texto obrigatório para o nome completo do utilizador.
Signup and view all the flashcards
Campo Género
Campo de seleção com opções 'M' e 'F'.
Signup and view all the flashcards
Campo Idade
Campo numérico obrigatório, com limites de 0 a 60.
Signup and view all the flashcards
Seleção de Curso
Caixa de seleção com as opções 'DW'.
Signup and view all the flashcards
Study Notes
HTML - Links
Links são facilmente identificáveis ao passar o mouse sobre eles, a seta do mouse se transforma em mão.
Links podem ser texto, imagens ou outros elementos HTML.
O atributo href especifica o destino do link.
Links não visitados são azuis e sublinhados.
Links visitados são roxos e sublinhados.
Links ativos são vermelhos e sublinhados.
Estilos podem ser modificados via CSS.
Links geralmente abrem na mesma janela atual, exceto quando especificado o contrário.
href="https://www....." : Caminho absoluto para um documento da web, em servidor diferente.
href="/path....": Caminho relativo a um arquivo no mesmo servidor (ex: imagem, html).
href="../": Referência para a pasta superior na estrutura do site.
Criar um link para email: href="mailto:..." . Permite definir título e destinatários.
Espaços em URLs devem ser substituídos por %20.
Links internos para uma seção específica usam href="#value".
Utilize links internos para evitar rolagem excessiva em páginas longas.
O valor de href corresponde ao atributo id do destino.
HTML - Imagem
A tag <img> insere imagens em páginas web.
As imagens são referenciadas na página, não inseridas diretamente.
A tag <img> cria espaço para a imagem.
A tag <img> não tem tag de fechamento.
Atributos obrigatórios:
src: caminho da imagem.
alt: texto alternativo para a imagem.
HTML -
A tag <picture> exibe imagens diferentes para diferentes tamanhos de tela.
Usa o atributo srcset, permitindo ao navegador escolher a melhor imagem para exibição.
Contém um ou mais elementos <source>.
Cada <source> indica qual a imagem para cada tamanho de tela via atributo media.
Cada <source> tem um atributo srcset com o caminho da imagem e as suas dimensões.
O elemento <img> é exibido se nenhuma das tags <source> for apropriada para o tamanho da tela.
HTML -
A tag <video> mostra vídeos na página web.
O atributo controls adiciona controles ao vídeo (play, pause, volume).
Os atributos width e height são necessários para tamanho adequado.
Utilize <source> para fornecer diferentes formatos de vídeo, permitindo que vários navegadores reproduzam o vídeo.
HTML -
A tag <audio> reproduz áudio na página web.
O atributo controls adiciona controles ao áudio (play, pause, volume).
Utilize <source> para fornecer diferentes formatos de áudio.
HTML - YouTube vídeos
Use a tag <iframe> para incorporar vídeos do YouTube.
O atributo src aponta para o vídeo do YouTube.
Atributos como width, height, e outros parâmetros podem ser inseridos na url do YouTube para controlar o tamanho, autoplay, etc.
HTML - <iframe>
A tag <iframe> cria um quadro para exibir outro documento HTML dentro da página atual.
O atributo src especifica o URL do documento a ser exibido no iframe.
Use CSS para estilizar o iframe.
O atributo title é necessário para acessibilidade.
HTML - Formulários
Formulários são usados para coletar dados do usuário.
Os dados do formulário são enviados a um servidor para processamento.
Elementos básicos:
<form>: Contém os elementos do formulário.
<label>: Define uma descrição para os elementos de entrada.
<input>: Obtém dados de entrada (texto, senha, data, etc.).
<button>: Controla outros elementos ou executa uma ação.
<select>: Cria uma lista drop-down.
<textarea>: Para texto de múltiplas linhas.
<fieldset>: Agrupa itens em um formulário.
<legend>: Rótulo para um
<datalist>: Fornece sugestões para o preenchimento automático.
<option>: Opções na lista drop-down, <optgroup> para agrupar opções.
<output>: Mostra resultados de cálculos.
HTML Form Atributos
action: página para onde serão enviados os dados;
target: onde a resposta será exibida;
autocomplete: se o preenchimento automático será ativado ou não;
novalidate: desabilita a validação do formulário;
method: GET ou POST (indica como os dados são enviados - use POST para dados sensíveis).
HTML - Tipos de Input
<input type="text">: Campo de entrada de texto simples.
<input type="password">: Campo de entrada de senha (caracteres ocultos).
<input type="submit">: Botão para submeter o formulário.
<input type="reset">: Botão para limpar os campos do formulário.
<input type="checkbox">: Caixa de seleção (pode escolher múltiplas opções).
<input type="radio">: Botão de opção (apenas uma opção pode ser selecionada).
<input type="color">: Seletor de cor.
<input type="date">: Campo de entrada para data.
<input type="datetime-local">: Campo de entrada para data e hora.
<input type="email">: Campo de entrada para email.
<input type="file">: Campo para selecionar arquivos.
<input type="button">: Botão, não submete automaticamente dados.
