Html ,CSS e XML

Prévia do material em texto

Aula 09
Caixa Econômica Federal - CEF (Técnico
Bancário - TI) Desenvolvimento
Autor:
Diego Carvalho, Equipe
Informática 1 (Diego Carvalho),
Paolla Ramos e Silva 
18 de Dezembro de 2022
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Índice
..............................................................................................................................................................................................1) Desenvolvimento Front-End - HTML - Teoria 3
..............................................................................................................................................................................................2) Desenvolvimento Front-End - HTML - Questões Comentadas - MULTIBANCAS 90
..............................................................................................................................................................................................3) Desenvolvimento Front-End - HTML - Lista de Questões - MULTIBANCAS 143
..............................................................................................................................................................................................4) Desenvolvimento Front-End - CSS - Teoria 174
..............................................................................................................................................................................................5) Desenvolvimento Front-End - CSS - Questões Comentadas - MULTIBANCAS 287
..............................................................................................................................................................................................6) Desenvolvimento Front-End - CSS - Lista de Questões - MULTIBANCAS 318
..............................................................................................................................................................................................7) Desenvolvimento Front-End - Bootstrap - Teoria 337
..............................................................................................................................................................................................8) Desenvolvimento Front-End - Bootstrap - Questões Comentadas - Multibancas 390
..............................................................................................................................................................................................9) Desenvolvimento Front-End - Bootstrap - Lista de Questões - Multibancas 413
..............................................................................................................................................................................................10) Formato de Intercâmbio - XML 428
..............................................................................................................................................................................................11) Questões Comentadas - Formato de Intercâmbio - XML - Multibancas 445
..............................................................................................................................................................................................12) Lista de Questões - Formato de Intercâmbio - XML - Multibancas 469
..............................................................................................................................................................................................13) XSLT - Teoria 486
..............................................................................................................................................................................................14) XSLT - Questões Comentadas - Multibancas 490
..............................................................................................................................................................................................15) XSLT - Lista de Questões - Multibancas 498
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
2
504
 
 
 
 
 
Sumário 
Apresentação da Aula ...................................................................................................................................... 3 
HTML ............................................................................................................................................................... 4 
Conceitos Básicos ........................................................................................................................................ 4 
HTML Básico ................................................................................................................................................ 9 
Elementos HTML ....................................................................................................................................... 12 
Atributos HTML ......................................................................................................................................... 14 
Cabeçalhos HTML ...................................................................................................................................... 15 
Parágrafos HTML ....................................................................................................................................... 16 
Estilos HTML .............................................................................................................................................. 18 
Formatação de Texto HTML ...................................................................................................................... 21 
Citação em HTML ...................................................................................................................................... 22 
Comentários HTML .................................................................................................................................... 24 
Cores HTML ............................................................................................................................................... 25 
Links HTML ................................................................................................................................................ 27 
Imagens HTML ........................................................................................................................................... 28 
Tabelas HTML ............................................................................................................................................ 32 
Estilização de Tabelas HTML ..................................................................................................................... 35 
Listas HTML ............................................................................................................................................... 36 
Listas Não Ordenadas ............................................................................................................................ 37 
Listas Ordenadas em HTML .................................................................................................................. 40 
Bloco HTML e elementos embutidos ........................................................................................................ 44 
Elementos de nível de bloco .................................................................................................................. 44 
Elementos inline ..................................................................................................................................... 46 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
3
504
 
 
 
 
 
Atributo de classe HTML ...........................................................................................................................49 
Formulários HTML ..................................................................................................................................... 52 
Os elementos HTML <form> ................................................................................................................. 55 
Principais Características ............................................................................... Erro! Indicador não definido. 
APIs HTML ................................................................................................................................................. 58 
API de geolocalização HTML ................................................................................................................. 58 
API de armazenamento da Web em HTML ........................................................................................... 59 
RESUMO .................................................................................................................................................... 64 
REFERÊNCIAS ................................................................................................................................................ 87 
Questões Comentadas ...................................................................................... Erro! Indicador não definido. 
Questões Cespe ............................................................................................. Erro! Indicador não definido. 
Gabarito ............................................................................................................. Erro! Indicador não definido. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
4
504
 
 
 
 
 
HTML 
Conceitos Básicos 
 
Antes de iniciar a aula, é importante mencionar que vários exemplos dessa aula foram retirados ou 
inspirados em exemplos do W3Tutorials (www.w3schools.com/html). Não fizemos isso porque 
somos preguiçosos, mas por dois motivos: (1) os exemplos são excelentes; (2) essa é uma das 
fontes de inspiração das bancas. Além disso, eu sugiro que vocês tenham sempre aberta uma 
janela com um interpretador online para que vocês possam testar o que veremos. Recomendo 
esse: 
 
https://www.w3schools.com/html/ 
 
 
 
O que é HTML? 
• HTML significa Hyper Text Markup Language. 
• HTML é a linguagem de marcação padrão para criar páginas da Web; 
• HTML descreve a estrutura de uma página da Web; 
• HTML consiste em uma série de elementos; 
• Os elementos HTML informam ao navegador como exibir o conteúdo; 
• Os elementos HTML rotulam partes do conteúdo como "isto é um título", "isto é um 
parágrafo", "isto é um link", etc. 
 
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa: 
"Linguagem de Marcação de Hipertexto") é uma linguagem de marcação utilizada na construção 
de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é 
fruto da junção entre os padrões HyTime e SGML1. 
 
1 HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto 
de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações (em inglês: hyperlink e link). O padrão é 
independente de outros padrões de processamento de texto em geral. 
 
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em 
hiper-objetos e para descrever as ligações. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
6
504
 
 
 
 
 
 
(TCE RJ– 2022) HTML5 é uma linguagem de programação que permite estruturar páginas web e executar 
comandos como loops de repetição, por exemplo. 
 
_______________________ 
Comentários: HTML é a linguagem de marcação padrão para criar páginas da Web, ela descreve a estrutura de uma página da Web, porém, 
não executa comandos como loops de repetição. (Gabarito: Errado). 
 
 
Vejamos um exemplo de um documento HTML Simples além da visualização da Estrutura da Página 
HTML gerada. 
 
 
 
• A declaração <!DOCTYPE html> define que este documento é um documento HTML5; 
• O elemento <html> é o elemento raiz de uma página HTML; 
• O elemento <head> contém metainformações sobre a página HTML; 
• O elemento <title> especifica um título para a página HTML (que é mostrado na barra de título 
do navegador ou na guia da página); 
• O elemento <body> define o corpo do documento e é um recipiente para todos os conteúdos 
visíveis, como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas, etc. 
• O elemento <h1> define um título grande; 
• O elemento <p> define um parágrafo. 
 
(FGV –IBGE – 2016) A declaração <!DOCTYPE> permite ao navegador apresentar uma página web 
corretamente. A declaração correta para uma página em HTML5 é: 
 
a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Strict//EN" 
"http://www.w3.org/TR/html5/strict.dtd"> 
b) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" 
"http://www.w3.org/TR/html5/loose.dtd"> 
c) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0"> 
d) <!DOCTYPE html> 
e) <!DOCTYPE XML PUBLIC "-//W3C//DTD HTML 5.0"> 
 
Comentários: A declaração <!DOCTYPE html> define que este documento é um documento HTML5. 
(Gabarito: Letra D) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
7
504
 
 
 
 
 
 
O objetivo de um navegador da Web (Chrome, Edge, Firefox, Safari) é ler documentos HTML e exibi-
los corretamente. Um navegador não exibe as tags HTML, mas as utiliza para determinar como 
exibir o documento: 
 
HTML5 é a versão mais recente do HTML e possui vários novos recursos e elementos que permitem 
aos desenvolvedores da Web criar conteúdo mais interativo e atraente para a Web. 
 
Alguns dos novos recursos do HTML5 incluem: 
 
• Elementos semânticos: o HTML5 apresenta novos elementos com significados específicos, 
como <header>, <footer> e <article>. Esses elementos tornam mais fácil para os 
desenvolvedores estruturar seu conteúdo de maneira lógica e significativa. 
 
• Suporte de áudio e vídeo: o HTML5 inclui suporte integrado para reprodução de áudio e vídeo, 
eliminando a necessidade de plug-ins de terceiros, como o Flash. 
 
• Elemento Canvas: O elemento <canvas> permite aos desenvolvedores desenhar gráficos e 
animações diretamente no navegador, usando JavaScript. 
 
• Armazenamento off-line: o HTML5 fornece uma maneira de os aplicativos da Web 
armazenarem dados localmente, para que os usuários ainda possam acessar o aplicativo 
quando estiverem off-line. 
 
• Controles de formulário aprimorados: o HTML5 apresenta novos controles de formulário e tipos 
de entrada, como data, e-mail e intervalo, o que torna mais fácil para os desenvolvedores criar 
formulários amigáveis. 
 
O HTML5 foi projetado para ser compatível com as versões anteriores do HTML, portanto, a maioria 
dos sites existentes continuará a funcionar como antes. No entanto, usando os novos recursos do 
HTML5, os desenvolvedores podem criar conteúdo mais interativo e atraente para a web. 
 
Os elementos semânticos são elementos HTML usados para adicionar significado à página da Web, 
em vez de controlar o layout ou a aparência da página. Eles são usados para descrever o conteúdo 
da página da Web de maneira significativa para humanos e máquinas. 
 
Vejamos uma lista de alguns elementos semânticos comuns em HTML: 
 
• <header>: representa o cabeçalho de uma página da web ou seção de uma página da web. 
• <nav>: representa uma seção da página da Web que contém links de navegação. 
• <main>: Representa o conteúdoprincipal da página web. 
• < article >: representa um conteúdo independente, como uma postagem de blog ou artigo de 
notícias. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
8
504
 
 
 
 
 
• <section>: Representa uma seção da página da web, como um capítulo ou um tema. 
• <aside>: Representa o conteúdo que está relacionado ao conteúdo principal da página da web, 
mas que não é essencial para a compreensão do conteúdo principal. 
• <footer>: representa o rodapé de uma página da web ou seção de uma página da web. 
 
Os elementos semânticos são importantes para melhorar a acessibilidade de uma página da Web, 
pois fornecem contexto e significado ao conteúdo da página. Eles também ajudam os mecanismos 
de pesquisa a entender o conteúdo da página da Web e a melhorar sua classificação nos resultados 
da pesquisa. 
 
É importante observar que os elementos semânticos não devem ser usados para fins de estilo ou 
layout. Se você deseja controlar o layout ou a aparência da página da Web, use CSS. 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
9
504
 
 
 
 
 
 
 
Hy
pe
r T
ex
t M
ar
ku
p 
La
ng
ua
ge
 - H
TM
L
Linguagem de marcação padrão para criar páginas da Web
Descreve a estrutura de uma página da Web
Consiste em uma série de elementos
Elementos HTML informam ao navegador como exibir o conteúdo e rotulam partes 
do conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
10
504
 
 
 
 
 
HTML Básico 
 
Todos os documentos HTML devem começar com uma declaração de tipo de documento: 
<!DOCTYPE html>. O próprio documento HTML começa <html> e termina com </html>. A parte 
visível do documento HTML está entre <body>e </body>. 
 
 
 
A declaração <!DOCTYPE> representa o tipo de documento e ajuda os navegadores a exibir páginas 
da Web corretamente. Ele deve aparecer apenas uma vez, no topo da página (antes de qualquer 
tag HTML). A declaração <!DOCTYPE> não diferencia maiúsculas de minúsculas. Vejamos a 
declaração para HTML5: 
 
<!DOCTYPE html> 
 
Os cabeçalhos HTML são definidos com as tags <h1>to .<h6>. <h1>define o cabeçalho mais 
importante. Enquanto <h6>define o título menos importante: 
 
 
 
Os parágrafos HTML são definidos com a tag <p>: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
11
504
 
 
 
 
 
 
 
Os links HTML são definidos com a tag <a>: 
 
 
 
O destino do link é especificado no atributo href. Os atributos são usados para fornecer 
informações adicionais sobre os elementos HTML. Em HTML, o atributo "href" é usado para 
especificar um link para uma página da web ou um local específico dentro de uma página da web. 
É comumente usado com o elemento <a> para criar um hiperlink para outra página da web ou com 
o elemento <base> para especificar a URL base para todos os links relativos em uma página da web. 
Vejamos um exemplo do atributo "href" sendo usado com o elemento <a> para criar um hiperlink: 
 
<a href="https://www.example.com">This is a link</a> 
 
Neste exemplo, o texto "Este é um link" será exibido na página da Web e, ao clicar nele, o usuário 
será direcionado para a URL "https://www.example.com". Aqui está um exemplo do atributo 
"href" sendo usado com o elemento <base>: 
 
<base href="https://www.example.com/resources/"> 
 
As imagens HTML são definidas com a tag <img>. O arquivo de origem ( src), texto alternativo ( alt), 
widthe height são fornecidos como atributos: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
12
504
 
 
 
 
 
 
 
Para verificar o código-fonte de uma página HTML, clique com o botão direito do mouse em uma 
página HTML e selecione "Exibir fonte da página" (no Chrome) ou "Exibir fonte" (no Edge) ou 
similar em outros navegadores. Isso abrirá uma janela contendo o código-fonte HTML da página. 
 
 
 
Por outro lado, para inspecionar um elemento HTML, você deve clicar com o botão direito do 
mouse em um elemento (ou em uma área em branco) e escolha "Inspecionar" ou "Inspecionar 
elemento" para ver de que elementos são feitos (você verá o HTML e o CSS). Você também pode 
editar o HTML ou CSS dinamicamente no painel Elementos ou Estilos que é aberto. 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
13
504
 
 
 
 
 
Elementos HTML 
 
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final. O elemento 
HTML é tudo, desde a tag inicial até a tag final: 
 
< tagname > O conteúdo vai aqui... < /tagname > 
< h1 > Meu primeiro cabeçalho < /h1 > 
< p > Meu primeiro parágrafo. < /p > 
 
Tag inicial conteúdo do elemento Tag final 
<h1> My First Heading </h1> 
<p> My first paragraph. </p> 
<br> none none 
 
Os elementos HTML podem ser aninhados (isso significa que os elementos podem conter outros 
elementos). Todos os documentos HTML consistem em elementos HTML aninhados. O exemplo 
abaixo contém quatro elementos HTML ( , <html>e <body>) :<h1><p> 
 
 
 
O elemento <html> é o elemento raiz e define todo o documento HTML. Ele tem uma tag <html> 
inicial e uma tag </html> final. Então, dentro do <html>elemento existe um elemento <body> que 
define o corpo do documento. Ele tem uma tag inicial <body>e uma tag final </body>. Então, no 
exemplo acima, dentro do elemento <body> existem dois outros elementos: <h1>e <p>. O 
elemento <h1> define um cabeçalho e possui uma tag inicial <h1>e uma tag final </h1>, assim 
como ocorre com o elemento <p>. Há elementos html que não precisam da tag final. Mas a boa 
prática de programação diz: “Nunca pule a tag final!” 
 
Como disse, há elementos que não precisam da tag final! São conhecidos como elementos HTML 
sem conteúdo ou elementos vazios. A tag <br> define uma quebra de linha e é um elemento vazio 
sem uma tag de fechamento. Veja o exemplo a seguir. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
14
504
 
 
 
 
 
 
 
HTML não diferencia maiúsculas de minúsculas. As tags HTML não diferenciam maiúsculas de 
minúsculas: <P>significa o mesmo que <p>. 
 
O padrão HTML não requer tags em letras minúsculas, mas é recomendado usar letras minúsculas 
em HTML e exige letras minúsculas para tipos de documento mais restritos, como XHTML. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
15
504
 
 
 
 
 
Atributos HTML 
 
Todos os elementos HTML podem ter atributos. Os atributos fornecem informações adicionais 
sobre os elementos, e são sempre especificados na tag de início. Os atributos geralmente vêm em 
pares de nome/valor como: name="value". 
 
A tag <a> define um hiperlink. O href atributo especifica a URL da página para a qual o link vai: 
 
 
 
O atributo preload é um atributo HTML usado para especificar como um elemento de mídia (como 
um elemento <audio> ou <video>) deve ser carregado quando uma página da web é carregada. O 
atributo controls é um atributo HTML usado para exibir oscontroles padrão do reprodutor de mídia 
para um elemento de mídia. 
 
O atributo preload tem três valores possíveis: 
 
• "auto": A mídia será carregada automaticamente quando a página da web for carregada. 
• " metadata ": Somente os metadados (por exemplo, duração, dimensões) da mídia serão 
carregados quando a página da web for carregada. 
• " none ": a mídia não será carregada quando a página da web for carregada. 
 
O atributo controls é um atributo booleano, o que significa que não possui um valor. Se o atributo 
controls estiver presente, os controles do reprodutor de mídia serão exibidos e, se não estiver 
presente, os controles não serão exibidos. 
 
Lembre-se de que os atributos de preload e controls são opcionais e você pode usá-los para 
personalizar o comportamento do elemento de mídia de acordo com suas necessidades. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
16
504
 
 
 
 
 
Cabeçalhos HTML 
 
Cabeçalhos HTML são títulos ou subtítulos que você deseja exibir em uma página da web. Os 
cabeçalhos HTML são definidos com as tags <h1> até <h6>. Relembrando, <h1> define o cabeçalho 
mais importante. <h6>define o título menos importante. 
 
 
 
Os mecanismos de pesquisa usam os cabeçalhos para indexar a estrutura e o conteúdo de suas 
páginas da web. Os usuários geralmente percorrem uma página por seus títulos. É importante usar 
cabeçalhos para mostrar a estrutura do documento. os cabeçalhos <h1> devem ser usados para os 
cabeçalhos principais, seguidos pelos cabeçalhos <h2>, depois os menos importantes <h3>e assim 
por diante. 
 
Cada título HTML tem um tamanho padrão. No entanto, você pode especificar o tamanho de 
qualquer cabeçalho com o atributo style, usando a propriedade font-size CSS: 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
17
504
 
 
 
 
 
Parágrafos HTML 
 
Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto. O elemento 
HTML <p> define um parágrafo. Um parágrafo sempre começa em uma nova linha e os 
navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois 
de um parágrafo. 
 
 
 
A tag <hr> define uma quebra temática em uma página HTML e geralmente é exibida como uma 
régua horizontal. O elemento <hr> é usado para separar o conteúdo (ou definir uma alteração) em 
uma página HTML. A tag <hr> é uma tag vazia, o que significa que não tem tag final. 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
18
504
 
 
 
 
 
O elemento HTML <br>define uma quebra de linha. Use <br>se quiser uma quebra de linha (uma 
nova linha) sem iniciar um novo parágrafo. A tag <br> é uma tag vazia, o que significa que não tem 
tag final. 
 
O elemento HTML <pre>define o texto pré-formatado. O texto dentro de um elemento <pre> é 
exibido em uma fonte de largura fixa (geralmente Courier) e preserva espaços e quebras de linha: 
 
 
 
 
 
(FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com HTML5 e deseja exibir um 
texto com fonte Courier de largura fixa, preservando os espaços e as quebras de linha. 
 
O texto deverá ser colocado entre as tags 
 
a) <mark> e </mark> 
b) <dl> e </dl> 
c) <embed> e </embed> 
d) <code> e </code> 
e) <pre> e </pre>. 
 
Comentários: O elemento HTML <pre>define o texto pré-formatado. O texto dentro de um elemento <pre> 
é exibido em uma fonte de largura fixa (geralmente Courier) e preserva espaços e quebras de linha. 
(Gabarito: Letra E) 
 
 
 
pa
rá
gr
af
os
 HT
ML <p> Define um parágrafo
<hr> Define uma mudança temática no conteúdo
<br> Insere uma única quebra de linha
<pre> Define o texto pré-formatado
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
19
504
 
 
 
 
 
Estilos HTML 
 
O atributo HTML style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e 
muito mais. A definição do estilo de um elemento HTML pode ser feita com o atributo style. 
 
 
 
O atributo HTML style tem a seguinte sintaxe2: 
 
<tagname style="property:value;"> 
 
A propriedade CSS background-color define a cor de fundo de um elemento HTML. 
 
 
 
 
2 property é uma propriedade CSS. value é um valor CSS. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
20
504
 
 
 
 
 
 
 
Vejamos as outras propriedades style em sequência: 
 
Propriedade CSS Descrição 
Background-color Define a cor de fundo de um elemento HTML 
Color Define a cor do texto para um elemento HTML 
Font-family Define a fonte a ser usada para um elemento HTML 
Font-size Define o tamanho do texto para um elemento HTML 
Text-align Define o alinhamento horizontal do texto para um elemento HTML 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
21
504
 
 
 
 
 
 
 
 
 
 
pa
rá
gr
af
os
 HT
ML
style define estilos para elementos HTML
background-color define a cor do fundo
color define cores do texto
font-family define fontes do texto
font-size define tamanhos do texto
text-align define o alinhamento do texto
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
22
504
 
 
 
 
 
Formatação de Texto HTML 
 
O HTML contém vários elementos para definir o texto com um significado especial. 
 
Elementos de 
Formatação 
Descrição 
<b> Texto em negrito, sem nenhuma importância extra. 
<strong> Texto importante. O conteúdo interno geralmente é exibido em negrito. 
<i> 
Define uma parte do texto em uma voz ou humor alternativo. Texto em itálico. 
Costuma ser usada para indicar um termo técnico, uma frase de outro idioma, 
um pensamento, o nome de um navio, etc. 
<em> Texto enfatizado. O conteúdo interno geralmente é exibido em itálico. 
<mark> Texto marcado. Define o texto que deve ser marcado ou destacado 
<small> Texto menor 
<del> 
Define o texto que foi excluído de um documento. Os navegadores geralmente 
traçam uma linha através do texto excluído. 
<ins> Texto inserido. Os navegadores geralmente sublinham o texto inserido. 
<sub> 
Texto subscrito. O texto subscrito aparece meio caractere abaixo da linha 
normal e, às vezes, é renderizado em uma fonte menor. O texto subscrito pode 
ser usado para fórmulas químicas, como H2O 
<sup> 
Texto sobrescrito. O texto sobrescrito aparece meio caractere acima da linha 
normal e, às vezes, é renderizado em uma fonte menor. O texto sobrescrito 
pode ser usado para notas de rodapé, como WWW[1]. 
 
 
El
em
en
to
s d
e F
or
ma
ta
çã
o H
TM
L
<b> Texto em negrito
<strong> Texto importante
<i> Texto em itálico
<em> Texto enfatizado
<mark> Texto marcado
<small> Texto menor
<del> Texto deletado
<ins> Texto inserido
<sub> texto subscrito
<sup> Texto sobrescrito
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
23
504
 
 
 
 
 
Citação em HTML 
 
O elemento HTML <blockquote> define uma seção que é citada de outra fonte. Os navegadores 
geralmente indentam <blockquote>elementos. 
 
 
 
A tag HTML <q> define uma citação curta.Os navegadores normalmente inserem aspas ao redor 
da citação. 
 
 
 
A tag HTML <abbr> define uma abreviação ou um acrônimo, como "HTML", "CSS", "Mr.", "Dr.", 
"ASAP", "ATM". As abreviações de marcação podem fornecer informações úteis para navegadores, 
sistemas de tradução e mecanismos de pesquisa. 
 
A tag HTML <address> define as informações de contato do autor/proprietário de um documento 
ou artigo. As informações de contato podem ser um endereço de e-mail, URL, endereço físico, 
número de telefone, identificador de mídia social, etc. O texto no elemento <address> geralmente 
é renderizado em itálico e os navegadores sempre adicionam uma quebra de linha antes e depois 
do elemento <address>. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
24
504
 
 
 
 
 
 
A tag HTML <cite> define o título de uma obra criativa (por exemplo, um livro, um poema, uma 
música, um filme, uma pintura, uma escultura, etc. O texto no elemento <cite> geralmente é 
renderizado em itálico . 
 
BDO significa Bi-Directional Override. A tag HTML <bdo> é usada para substituir a direção do texto 
atual: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Cit
aç
ão
 em
 HT
ML
<abbr> Define uma abreviação ou acrônimo
<address>Define as informações de contato do autor/proprietário de um documento
<bdo> Define a direção do texto
<blockquote> Define uma seção que é citada de outra fonte
<cite> Define o título de uma obra
<q> Define uma citação curta em linha
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
25
504
 
 
 
 
 
Comentários HTML 
 
Os comentários HTML não são exibidos no navegador, mas podem ajudar a documentar seu 
código-fonte HTML. Você pode adicionar comentários à seu código fonte HTML usando a seguinte 
sintaxe: 
 
<!-- Escreva seus comentários aqui --> 
 
Observe que há um ponto de exclamação (!) na tag inicial, mas não na tag final. Com comentários, 
você pode colocar notificações e lembretes em seu código HTML. 
 
<!-- Isto é um comentário --> 
 
<p>Isto é um parágrafo.</p> 
 
<!-- Lembre-se de adicionar mais informações aqui --> 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
26
504
 
 
 
 
 
Cores HTML 
 
As cores HTML são especificadas com nomes de cores predefinidos ou com valores RGB, HEX, HSL, 
RGBA ou HSLA. Em HTML, uma cor pode ser especificada usando um nome de cor, a cor de fundo 
dos elementos HTML, a cor do texto, a cor das bordas, e muito mais. Vejamos os exemplos! 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
27
504
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
28
504
 
 
 
 
 
Links HTML 
 
Links são encontrados em quase todas as páginas da web. Os links permitem que os usuários 
cliquem de uma página para outra. Links HTML são hiperlinks. Você pode clicar em um link e pular 
para outro documento. Quando você move o mouse sobre um link, a seta do mouse se transforma 
em uma mãozinha. 
 
O texto do link é a parte que ficará visível para o leitor. Clicar no texto do link enviará o leitor ao 
endereço de URL especificado. Por padrão, os links aparecerão da seguinte maneira em todos os 
navegadores: 
 
• Um link não visitado é sublinhado e azul 
• Um link visitado é sublinhado e roxo 
• Um link ativo é sublinhado e vermelho 
 
Por padrão, a página vinculada será exibida na janela atual do navegador. Para alterar isso, você 
deve especificar outro destino para o link. 
 
O atributo target especifica onde abrir o documento vinculado. Ele pode ter um dos seguintes 
valores: 
 
• _self- Predefinição. Abre o documento na mesma janela/guia em que foi clicado 
• _blank- Abre o documento em uma nova janela ou guia 
• _parent- Abre o documento no quadro pai 
• _top- Abre o documento em todo o corpo da janela 
 
Para colocar um endereço de e-mail dentro de um link, você pode utilizar mailto: dentro do 
atributo href para criar um link que abra o programa de e-mail do usuário (para permitir que ele 
envie um novo e-mail): 
 
<a href="mailto:professor@estrategia.com">Novo e-mail</a> 
 
Para usar um botão HTML como um link, você precisa adicionar algum código JavaScript. O 
JavaScript permite que você especifique o que acontece em determinados eventos, como o clique 
de um botão: 
 
<button onclick="document.location='default.asp'">HTML </ button > 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
29
504
 
 
 
 
 
Imagens HTML 
 
As imagens podem melhorar o design e a aparência de uma página da web. As imagens não são 
tecnicamente inseridas em uma página da web; mas sim vinculadas a páginas da web. A tag <img> 
cria um espaço de retenção para a imagem referenciada. 
 
A tag <img> é vazia, ou seja, contém apenas atributos e não possui uma tag de fechamento. Além 
disso, ela possui dois atributos obrigatórios: 
 
• src - Especifica o caminho para a imagem; 
• alt - Especifica um texto alternativo para a imagem. 
 
A tag <img> também deve conter os atributos width e height, que especificam a largura e a altura 
da imagem (em pixels). Quando uma página web carrega, é o navegador, nesse momento, que 
obtém a imagem de um servidor web e a insere na página. Portanto, certifique-se de que a imagem 
realmente permaneça no mesmo local em relação à página da Web, caso contrário, seus visitantes 
receberão um ícone de link quebrado. O ícone de link quebrado e o texto alt são mostrados se o 
navegador não conseguir encontrar a imagem. 
 
 
 
Há duas maneiras de especificar a URL no src atributo: 
 
1. URL absoluta - Links para uma imagem externa que está hospedada em outro site. 
 
2. URL relativo - Links para uma imagem hospedada no site. Aqui, a URL não inclui o nome de 
domínio. Se a URL começar sem uma barra, ela será relativa à página atual. Exemplo: 
src="img_girl.jpg". Se a URL começar com uma barra, ela será relativa ao domínio. Exemplo: 
src="/images/img_girl.jpg". 
 
Dica: quase sempre é melhor usar URLs relativos. Eles não vão quebrar se você mudar de domínio. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
30
504
 
 
 
 
 
O atributo alt é obrigatório para a tag <img>. Ele especifica um texto alternativo para uma imagem, 
se a imagem por algum motivo não puder ser exibida. Isso pode ocorrer devido a uma conexão 
lenta ou a um erro no atributo src ou se o usuário usar um leitor de tela. 
 
O atributo style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito 
mais. Por exemplo, você pode usar o atributo style para especificar a largura e a altura de uma 
imagem, especificando em sequência: style="width:500px;height:600px" 
 
Os atributos width, heighte stylesão todos válidos em HTML. No entanto, é sugerido o uso do 
atributo style para evitar que as folhas de estilo alterem o tamanho das imagens 
 
O atributo alt obrigatório fornece um texto alternativo para uma imagem, se o usuário por algum 
motivo não puder visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o usuário 
usar um leitor de tela). O valor do atributo alt deve descrevera imagem. 
 
 
 
O HTML permite GIFs animados. E também permite usar uma imagem como link, para isso, basta 
colocar a tag <img> dentro da tag <a> 
 
Vejamos os tipos de arquivo de imagem mais comuns, suportados em todos os navegadores 
(Chrome, Edge, Firefox, Safari, Opera): 
 
Abreviação Formato do arquivo Extensão 
APNG Animated Portable Network Graphics .apng 
GIF Graphics Interchange Format .gif 
ICO Microsoft Icon .ico, .cur 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
31
504
 
 
 
 
 
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp 
PNG Portable Network Graphics .png 
SVG Scalable Vector Graphics .svg 
 
 
 
Tag Descrição 
<img> Define uma imagem; 
<map> Define um mapa de imagem; 
<area> Define uma área clicável dentro de um mapa de imagem; 
<picture> Define um contêiner para vários recursos de imagem. 
 
Espera aí, mas o que é um mapa de 
imagem? Veremos isso agora! 
 
A tag HTML <map>define um mapa de 
imagem. Um mapa de imagem é uma 
imagem com áreas clicáveis. As áreas 
são definidas com uma ou mais tags 
<area>. 
 
A ideia por trás de um mapa de imagem 
é que você deve ser capaz de realizar 
diferentes ações, dependendo de onde 
você clicar na imagem. 
 
Para criar um mapa de imagem, você 
precisa de uma imagem e algum código 
HTML que descreva as áreas clicáveis. 
 
 
 
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> 
 
iM
AG
EN
S H
TM
L
<img> define uma imagem
src define a URL da imagem
alt define um texto alternativo para uma imagem, se ela não puder ser exibida
width e height definem o tamanho da imagem
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
32
504
 
 
 
 
 
<map name="workmap"> 
 <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"
> 
 <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> 
 <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> 
</map> 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
33
504
 
 
 
 
 
Tabelas HTML 
 
As tabelas HTML permitem que os desenvolvedores da Web organizem os dados em linhas e 
colunas. Uma tabela em HTML consiste em células de tabela dentro de linhas e colunas. Cada célula 
da tabela é definida por uma tag <td> e </td>. Por outro lado, cada linha da tabela começa com 
uma tag <tr> e termina com uma </tr>. 
 
É possível inserir quantas linhas quiser em uma tabela; apenas certifique-se de que o número de 
células seja o mesmo em cada linha. 
 
Às vezes, você deseja que suas células sejam células de cabeçalho de tabela. Nesses casos, use a 
tag <th> em vez da tag <td>, dessa forma é possível adicionar cabeçalhos de tabela. 
 
 
 
 
ta
be
la
s H
TM
L
<table> Define uma tabela
<th> Define uma célula de cabeçalho em uma tabela
<tr> Define uma linha em uma tabela
<td> Define uma célula em uma tabela
<caption> Define uma legenda de tabela
<colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação
<col> Especifica as propriedades da coluna para cada coluna dentro de um elemento <colgroup>
<thead> Agrupa o conteúdo do cabeçalho em uma tabela
<tbody> Agrupa o conteúdo do corpo em uma tabela
<tfoot> Agrupa o conteúdo do rodapé em uma tabela
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
34
504
 
 
 
 
 
 
As tabelas HTML podem ter bordas de diferentes estilos e formas. Ao adicionar uma borda a uma 
tabela, você também adiciona bordas ao redor de cada célula da tabela. Para adicionar uma borda, 
use a propriedade border CSS nos elementos table, th e td. 
 
Se você definir uma cor de fundo para cada célula e atribuir à borda uma cor branca (a mesma do 
plano de fundo do documento), terá a impressão de uma borda invisível. Com a propriedade 
border-style, você pode definir a aparência da borda. 
 
Os seguintes valores são permitidos: 
• dotted 
• dashed 
• solid 
• double 
• groove 
• ridge 
• inset 
• outset 
• none 
• hidden 
 
Com a propriedade border-color, você pode definir a cor da borda. As tabelas HTML podem ter 
tamanhos diferentes para cada coluna, linha ou tabela inteira. Use o atributo style com as 
propriedades width ou height para especificar o tamanho de uma tabela, linha ou coluna. para 
definir a largura da tabela HTML, adicione o atributo style ao elemento <table>. Para definir o 
tamanho de uma coluna específica, adicione o atributo style em um elemento <th>ou <td>. 
 
As tabelas HTML podem ter cabeçalhos para cada coluna ou linha ou para muitas colunas/linhas. 
Os cabeçalhos das tabelas são definidos com elementos th. Cada emento th representa uma célula 
da tabela. 
 
Para usar a primeira coluna como cabeçalhos de tabela, defina a primeira célula em cada linha 
como um elemento <th>. Por padrão, os cabeçalhos das tabelas estão em negrito e centralizados. 
Para alinhar à esquerda os cabeçalhos da tabela, use a propriedade text-align CSS. Você pode ter 
um cabeçalho que se estende por duas ou mais colunas. Para fazer isso, use o atributo colspan no 
<th>elemento. Você pode adicionar uma legenda que sirva como cabeçalho para toda a tabela, 
para isso, use a tag <caption>. 
 
As tabelas HTML podem ajustar o preenchimento dentro das células e também o espaço entre as 
células. O preenchimento da célula é o espaço entre as bordas da célula e o conteúdo da célula. 
Por padrão, o preenchimento é definido como 0. Para adicionar preenchimento nas células da 
tabela, use a propriedade padding CSS. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
35
504
 
 
 
 
 
Para adicionar preenchimento somente acima do conteúdo, use a propriedade padding-top. E os 
outros lados com as propriedades padding-bottom, padding-lefte padding-right. 
 
Espaçamento celular é o espaço entre cada célula. Por padrão, o espaço é definido como 2 pixels. 
Para alterar o espaço entre as células da tabela, use a propriedade border-spacing CSS no elemento 
table. 
 
As tabelas HTML podem ter células que abrangem várias linhas e/ou colunas. Para fazer uma célula 
abranger várias colunas, use o atributo colspan. Para fazer uma célula abranger várias linhas, use o 
atributo rowspan 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
36
504
 
 
 
 
 
Estilização de Tabelas HTML 
 
Use CSS para melhorar a aparência de suas tabelas. Para estilizar todos os outros elementos de 
linha da tabela, use o seletor :nth-child(even) como este. Para fazer listras de zebra verticais, 
estilize colunas alternadas, em vez de linhas alternadas. 
 
Se você especificar bordas apenas na parte inferior de cada linha da tabela, terá uma tabela com 
divisores horizontais. Adicione a propriedade border-bottom a todos os elementos tr para obter 
divisores horizontais: 
 
O elemento <colgroup> é usado para estilizar colunas específicas de uma tabela. Se você deseja 
estilizar as duas primeiras colunas de uma tabela, use os elementos <colgroup> e <col>. O elemento 
<colgroup> deve ser usado como um contêiner para as especificações da coluna. 
 
Cada grupo é especificado com um elemento <col>. O atributo span especifica quantas colunas 
recebem o estilo. Já, o atributo style especifica o estilo a serdado às colunas. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
37
504
 
 
 
 
 
Listas HTML 
 
As listas HTML permitem que os desenvolvedores da Web agrupem um conjunto de itens 
relacionados em listas. Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa 
com a tag <li>. Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por 
padrão: 
 
 
 
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Os itens da 
lista serão marcados com números por padrão 
 
 
 
O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de termos, com 
uma descrição de cada termo. A tag <dl> define a lista de descrição, a tag <dt> define o termo 
(nome) e a tag <dd> descreve cada termo. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
38
504
 
 
 
 
 
 
 
Tag Descrição 
<ul> Define uma lista não ordenada 
<ol> Define uma lista ordenada 
<li> Definir um item de lista 
<dl> Define uma lista de descrição 
<dt> Define um termo em uma lista de descrição 
<dd> Descreve o termo em uma lista de descrição 
 
(FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de termos em um site utilizando 
listas de definições do HTML5. Nestas listas, o termo a ser descrito e a descrição propriamente dita são 
criados, respectivamente, pelas tags 
 
a) <dt> e <dd> 
b) <dd> e <tt> 
c) <ul> e <li> 
d) <tt> e <dd> 
e) <dd> e <dt> 
 
Comentários 
 
O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de termos, com uma 
descrição de cada termo. A tag <dl> define a lista de descrição, a tag <dt> define o termo (nome) e a tag 
<dd> descreve cada termo. <dt> define um termo em uma lista de descrição. <dd> descreve o termo em 
uma lista de descrição. (Gabarito: Letra A). 
 
Listas Não Ordenadas 
 
Como já vimos, uma lista não ordenada começa com a tag <ul> e cada item da lista começa com a 
tag <li>. Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão. 
 
A propriedade CSS list-style-type é usada para definir o estilo do marcador de item da lista. Pode 
ter um dos seguintes valores: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
39
504
 
 
 
 
 
Valor Descrição 
disc Define o marcador de item da lista para um marcador (padrão). 
circle Define o marcador de item da lista para um círculo. 
square Define o marcador de item da lista para um quadrado. 
none Os itens da lista não serão marcados. 
 
 
 
Além de toda as opções já citadas, ainda podemos ter listas aninhadas, ou seja, uma lista dentro 
da outra lista. 
 
 
 
Agora vejamos uma lista horizontal com CSS! As listas HTML podem ser estilizadas de várias 
maneiras diferentes com CSS e uma maneira popular é estilizar uma lista horizontalmente, para 
criar um menu de navegação. Fica bem maneiro, veja: 
 
<!DOCTYPE html> 
<html> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
40
504
 
 
 
 
 
<head> 
<style> 
ul { 
 list-style-type: none; 
 margin: 0; 
 padding: 0; 
 overflow: hidden; 
 background-color: #333333; 
} 
 
li { 
 float: left; 
} 
 
li a { 
 display: block; 
 color: white; 
 text-align: center; 
 padding: 16px; 
 text-decoration: none; 
} 
 
li a:hover { 
 background-color: #111111; 
} 
</style> 
</head> 
<body> 
 
<h2>Navegação no menu</h2> 
<p>Neste exemplo, usamos CSS para estilizar a lista horizontalmente, para 
criar um menu de navegação:</p> 
<ul> 
 <li><a href="#home"> Página inicial </a></li> 
 <li><a href="#news"> Notícias </a></li> 
 <li><a href="#contact"> Contato </a></li> 
 <li><a href="#about"> Sobre </a></li> 
</ul> 
 
</body> 
</html> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
41
504
 
 
 
 
 
 
 
Gostaram? Bem bacana não é? 
 
 
 
(CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo uso difundido nas páginas 
publicadas na Internet. Assinale a opção que corresponde à tag utilizada no caso em que seja necessário 
utilizar uma lista não ordenada. 
 
a) <b> 
b) <p> 
c) <tr> 
d) <ul> 
e) <th> 
 
Comentários 
 
Como já vimos, uma lista não ordenada começa com a tag <ul> e cada item da lista começa com a tag <li>. 
Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão. (Gabarito: Letra 
D) 
 
Listas Ordenadas em HTML 
 
Lis
ta
s n
ão
 or
de
na
da
s
Use o elemento HTML <ul>para definir uma lista não ordenada
Use a propriedade CSS list-style-type para definir o marcador de item da lista
Use o elemento HTML <li>para definir um item da lista
As listas podem ser aninhadas
Os itens da lista podem conter outros elementos HTML
Use a propriedade CSS float:left para exibir uma lista horizontalmente
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
42
504
 
 
 
 
 
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Os itens da 
lista serão marcados com números por padrão: 
 
Em uma Lista ordenada, o atributo Type da tag <ol>, define o tipo de marcador do item da lista. 
 
Type Descrição 
type="1" Os itens da lista serão numerados com números (padrão) 
type="A" Os itens da lista serão numerados com letras maiúsculas 
type="a" Os itens da lista serão numerados com letras minúsculas 
type="I" Os itens da lista serão numerados com números romanos maiúsculos 
type="i" Os itens da lista serão numerados com números romanos minúsculos 
 
Pessoal, a única alteração ocorre na tag <ol>. Vocês devem definir o tipo de lista dentro dessa tag 
da seguinte forma: <ol type="1"> ou <ol type="A">, ou <ol type="I">. Enfim, você define o tipo e o 
resultado será como a imagem logo após o código. Veja: 
 
<ol type="1"> 
 <li>Café</li> 
 <li>Chá</li> 
 <li>Leite</li> 
</ol> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
43
504
 
 
 
 
 
 
 
Por padrão, uma lista ordenada começará a contar a partir de 1. Se você quiser começar a contar 
a partir de um número específico, poderá usar o atributo start e definir o valor que deseja iniciar. 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
44
504
 
 
 
 
 
 
 
 
 
Lis
ta
s O
rd
en
ad
as
Use o elemento HTML <ol>para definir uma lista ordenada
Use o atributo HTML type para definir o tipo de numeração
Use o elemento HTML <li>para definir um item de lista
As listas podem ser aninhadas
Os itens da lista podem conter outros elementos HTML
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
45
504
 
 
 
 
 
Bloco HTML e elementos embutidos 
 
Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento. Existem 
dois valores de exibição: bloco e embutido. 
 
Elementos de nível de bloco 
Um elemento de nível de bloco sempre começa em uma nova linha e os navegadoresadicionam 
automaticamente algum espaço (uma margem) antes e depois do elemento. Um elemento de nível 
de bloco sempre ocupa toda a largura disponível (estende-se para a esquerda e para a direita o 
máximo possível). 
 
Dois elementos de bloco comumente usados são: <p> e <div>. O <p>elemento define um parágrafo 
em um documento HTML. E o <div>elemento define uma divisão ou uma seção em um documento 
HTML. Vejamos todos os elementos de nível de bloco HTML: 
 
 
 
aside 
 
O elemento <aside> é um elemento HTML utilizado para representar o conteúdo relacionado ao 
conteúdo principal da página da Web, mas que não é essencial para o entendimento do conteúdo 
principal. Geralmente é usado para representar barras laterais, citações e outros conteúdos 
relacionados tangencialmente. 
 
elementos de nível de bloco 
<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>
<h6> <header> <hr> <li> <main>
<nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
46
504
 
 
 
 
 
Lembre-se de que o elemento <aside> é um elemento semântico, o que significa que é usado para 
adicionar significado à página da Web, em vez de controlar o layout ou a aparência da página. Você 
pode usar CSS para estilizar o elemento <aside>, assim como qualquer outro elemento. 
 
<header> 
O elemento <header> é um elemento HTML usado para representar o cabeçalho de uma página da 
web ou seção de uma página da web. Normalmente, é usado para conter o título principal, o 
logotipo e os links de navegação da página da Web. 
 
O elemento <header> normalmente é usado no topo da página da web, mas também pode ser 
usado para representar o cabeçalho de uma seção de uma página da web. Neste caso, deve ser 
usado dentro de um elemento <section>. 
 
Lembre-se de que o elemento <header> é diferente do elemento <head>, que é usado para conter 
metadados sobre a página da web. O elemento <header> faz parte do conteúdo da página da web 
e é visível para o usuário, enquanto o elemento <head> não é. 
 
<main> 
 
O elemento <main> é um elemento HTML usado para representar o conteúdo principal de uma 
página da web. Ele deve ser usado para agrupar o conteúdo exclusivo da página da Web e que não 
é compartilhado com outras páginas no mesmo site. 
 
O elemento <main> é um elemento semântico, o que significa que é usado para adicionar 
significado à página da Web, em vez de controlar o layout ou a aparência da página. Você pode 
usar CSS para estilizar o elemento <main>, assim como qualquer outro elemento. 
 
<video> 
 
O elemento <video> é um elemento HTML usado para incorporar conteúdo de vídeo em uma 
página da web. Ele fornece uma maneira padrão de reproduzir arquivos de vídeo nativamente no 
navegador, sem a necessidade de plug-ins de terceiros, como o Flash. 
 
Você pode usar os atributos de altura e largura para especificar o tamanho do elemento <video> 
na página da web. Os valores desses atributos podem ser especificados em pixels ou como uma 
porcentagem do espaço disponível. 
 
Lembre-se de que os atributos de altura e largura são opcionais e, se você não os especificar, o 
elemento <video> ajustará automaticamente seu tamanho para caber no tamanho do arquivo de 
vídeo. Você também pode usar CSS para estilizar o elemento <video>, assim como qualquer outro 
elemento. 
 
<video controls> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
47
504
 
 
 
 
 
 <source src="movie.mp4" type="video/mp4"> 
 <source src="movie.webm" type="video/webm"> 
 Your browser does not support the video tag. 
</video> 
 
No HTML5, o elemento <video> pode ser usado para incorporar conteúdo de vídeo em uma página 
da web. O elemento <video> suporta vários formatos de arquivo de vídeo diferentes, incluindo: 
 
• MP4: vídeo codificado usando compressão de vídeo H.264 e áudio codificado usando Advanced 
Audio Coding (AAC). 
• WebM: vídeo codificado usando compressão de vídeo VP8 ou VP9 e áudio codificado usando 
Vorbis ou Opus. 
• Ogg: vídeo codificado usando compressão de vídeo Theora3e áudio codificado usando Vorbis. 
 
Em HTML5, o elemento <track> pode ser usado para especificar uma legenda ou arquivo de 
legenda para um elemento <video>. O elemento <track> permite que você especifique uma trilha 
de texto que pode ser exibida sobre o vídeo durante a reprodução. 
 
Para usar o elemento <track>, primeiro você precisa criar um arquivo de texto contendo as 
legendas ou legendas do seu vídeo. O arquivo de texto deve estar em um formato compatível com 
o elemento <track>, como WebVTT (Web Video Text Tracks). 
 
<video controls> 
 <source src="my-video.mp4" type="video/mp4"> 
 <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> 
</video> 
 
Quando o vídeo for reproduzido, as legendas serão exibidas sobre o vídeo com base nas 
informações de tempo no arquivo de texto. O usuário pode ativar ou desativar a exibição das 
legendas usando os controles fornecidos pelo navegador. 
 
Elementos inline 
 
Um elemento inline não começa em uma nova linha. Pelo contrário, ocupa apenas a largura 
necessária. 
 
 
3 Theora é um codec de vídeo, de compressão com perda de dados 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
48
504
 
 
 
 
 
 
 
Vejamos os elementos inline em HTML: 
 
 
 
O elemento <div> geralmente é usado como um contêiner para outros elementos HTML. Ele não 
tem atributos obrigatórios, mas style, class e id são comuns. Quando usado junto com CSS, o 
elemento <div> pode ser usado para estilizar blocos de conteúdo: 
 
elementos inline HTML 
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
49
504
 
 
 
 
 
 
 
O elemento <span> é um contêiner embutido usado para marcar uma parte de um texto ou uma 
parte de um documento. Ele também não tem atributos obrigatórios, mas style, class e id são 
comuns, assim como no elemento <div>. Quando usado junto com CSS, o <span>elemento pode 
ser usado para estilizar partes do texto 
 
 
 
Para relembrar, fica esse grande lembrete: 
 
 
 
 
 
 
Bl
oc
o H
TM
L e
 el
em
en
to
s 
em
bu
tid
os
Existem dois valores de exibição: bloco e embutido
Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível
Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária
<div> é um nível de bloco e geralmente é usado como um contêiner para outros elementos HTML
<span> é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um 
documento
<div> Define uma seção em um documento (nível de bloco)
<span> Define uma seção em um documento (em linha)
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
50
504
 
 
 
 
 
Atributo de classe HTML 
 
O atributo HTML classé usado para especificar uma classe para um elemento HTML. 
 
Vários elementos HTML podem compartilhar a mesma classe. 
 
Usando o atributo de classe 
O classatributo geralmente é usado para apontar para um nome de classe em uma folha de estilo. 
Tambémpode ser usado por um JavaScript para acessar e manipular elementos com o nome de 
classe específico. 
 
No exemplo a seguir temos três elementos <div> com um atributo class com o valor "cidade". Todos 
os três elementos serão estilizados igualmente de acordo com a definição de estilo. 
 
 
 
Como vimos no exemplo, para criar uma classe; devemos escreveer um caractere de ponto (.), 
seguido de um nome de classe (no exemplo, cidade). Em seguida, defina as propriedades CSS entre 
chaves {}. Os elementos HTML podem pertencer a mais de uma classe. Para definir várias classes, 
separe os nomes das classes com um espaço, por exemplo, <div class="city main">. O elemento 
será estilizado de acordo com todas as classes especificadas. 
 
No exemplo a seguir, o primeiro elemento <h2> pertence tanto à classe city quanto à classe main 
e obterá os estilos CSS de ambas as classes: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
51
504
 
 
 
 
 
 
 
Para criar uma classe; escreva um caractere de ponto (.), seguido de um nome de classe. Em 
seguida, defina as propriedades CSS entre chaves {} 
 
Os elementos HTML podem pertencer a mais de uma classe. Para definir várias classes, separe os 
nomes das classes com um espaço, por exemplo, <div class="city main">. O elemento será 
estilizado de acordo com todas as classes especificadas. No exemplo a seguir, o primeiro elemento 
<h2> pertence tanto à classe city quanto à classe main e obterá os estilos CSS de ambas as classes 
 
Diferentes elementos HTML podem apontar para o mesmo nome de classe. <h2> no exemplo a 
seguir, ambos <p> apontam para a classe "city" e compartilharão o mesmo estilo 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
52
504
 
 
 
 
 
O nome da classe também pode ser usado pelo JavaScript para executar determinadas tarefas para 
elementos específicos. O JavaScript pode acessar elementos com um nome de classe específico 
com o método getElementsByClassName(). 
 
 
 
 
 
At
rib
ut
o d
e c
la
ss
e H
TM
L
O atributo HTML class especifica um ou mais nomes de classe para um elemento
Classes são usadas por CSS e JavaScript para selecionar e acessar elementos 
específicos
O atributo class pode ser usado em qualquer elemento HTML
O nome da classe diferencia maiúsculas de minúsculas
Diferentes elementos HTML podem apontar para o mesmo nome de classe
JavaScript pode acessar elementos com um nome de classe específico com o método 
getElementsByClassName()
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
53
504
 
 
 
 
 
Formulários HTML 
 
Um formulário HTML é usado para coletar a entrada do usuário. A entrada do usuário geralmente 
é enviada a um servidor para processamento. O elemento HTML <form> é usado para criar um 
formulário HTML para entrada do usuário. Ele é um contêiner para diferentes tipos de elementos 
de entrada, como: campos de texto, caixas de seleção, botões de opção, botões de envio, etc. 
 
O elemento HTML <input>é o elemento de formulário mais usado. Ele pode ser exibido de várias 
maneiras, dependendo do atributo type. 
 
Type Descrição 
<input type="text"> Exibe um campo de entrada de texto de linha única 
<input type="radio"> Exibe um botão de opção (para selecionar uma das muitas opções) 
<input type="checkbox"> Exibe uma caixa de seleção (para selecionar zero ou mais opções) 
<input type="submit"> Exibe um botão de envio (para enviar o formulário) 
<input type="button"> Exibe um botão clicável 
 
 
 
A tag <label> define um rótulo para muitos elementos de formulário. Ela é útil para usuários de 
leitores de tela, porque o leitor de tela lerá o rótulo em voz alta quando o usuário focar no elemento 
de entrada. 
 
O elemento <label> também ajuda os usuários que têm dificuldade em clicar em regiões muito 
pequenas (como botões de opção ou caixas de seleção) - porque quando o usuário clica no texto 
dentro do <label>elemento, ele alterna o botão de opção/caixa de seleção. O atributo for da tag 
<label> deve ser igual ao atributo id do <input> para uni-los. 
 
O <input type="radio">define um botão de opção. Os botões de opção permitem que um usuário 
selecione UMA dentre um número limitado de opções. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
54
504
 
 
 
 
 
 
 
 
O <input type="checkbox"> define uma caixa de seleção. As caixas de seleção permitem que um 
usuário selecione ZERO ou MAIS opções de um número limitado de opções. 
 
 
 
O <input type="submit"> define um botão para enviar os dados do formulário para um 
manipulador de formulário. O manipulador de formulário geralmente é um arquivo no servidor 
com um script para processar dados de entrada. O manipulador de formulário é especificado no 
atributo action do formulário. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
55
504
 
 
 
 
 
 
 
Observe que cada campo de entrada deve ter um atributo name a ser submetido. Se o atributo 
name for omitido, o valor do campo de entrada não será enviado. 
 
Já o atributo action define a ação a ser executada quando o formulário é enviado. Normalmente, 
os dados do formulário são enviados para um arquivo no servidor quando o usuário clica no botão 
enviar. No exemplo abaixo, os dados do formulário são enviados para um arquivo chamado 
"action_page.php". Este arquivo contém um script do lado do servidor que manipula os dados do 
formulário: 
 
O atributo target especifica onde exibir a resposta recebida após o envio do formulário. Ele pode 
ter um dos seguintes valores, sendo que o valor padrão é _self o que significa que a resposta será 
aberta na janela atual. 
 
Valor Descrição 
_blank A resposta é exibida em uma nova janela ou guia; 
_self A resposta é exibida na janela atual; 
_parent A resposta é exibida no quadro pai; 
_top A resposta é exibida em todo o corpo da janela; 
framename A resposta é exibida em um iframe nomeado. 
 
O atributo do método especifica o método HTTP a ser usado ao enviar os dados do formulário. Os 
dados do formulário podem ser enviados como variáveis de URL (com method="get") ou como pós-
transação HTTP (com method="post"). O método HTTP padrão ao enviar dados de formulário é 
GET. 
 
Método Descrição 
Get Anexa os dados do formulário ao URL, em pares de nome/valor; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
56
504
 
 
 
 
 
NUNCA use GET para enviar dados confidenciais! (os dados do formulário enviado 
são visíveis na URL!); 
O comprimento de um URL é limitado (2048 caracteres); 
Útil para envios de formulários em que um usuário deseja marcar o resultado como 
favorito; 
GET é bom para dados não seguros, como strings de consulta no Google. 
Post 
- Anexa os dados do formulário dentro do corpo da solicitação HTTP (os dados do 
formulário enviado não são mostrados na URL); 
- O POST não tem limitações de tamanho e pode ser usado para enviar grandes 
quantidades de dados; 
- Os envios de formulário com POST não podem ser marcados. 
 
Vejamos um compilado dos atributos dos formulários HTML. 
 
Atributo de 
Formulários 
Descrição 
accept-charset Especifica as codificações de caracteres usadas para envio de formulário 
action Especifica para ondeenviar os dados do formulário quando um formulário é enviado 
autocomplete Especifica se um formulário deve ter o preenchimento automático ativado ou 
desativado 
enctype Especifica como os dados do formulário devem ser codificados ao enviá-los ao 
servidor (somente para method="post") 
method Especifica o método HTTP a ser usado ao enviar dados de formulário 
name Especifica o nome do formulário 
novalidate Especifica que o formulário não deve ser validado quando enviado 
rel Especifica a relação entre um recurso vinculado e o documento atual 
target Especifica onde exibir a resposta recebida após o envio do formulário 
 
Os elementos HTML <form> 
 
Vimos os atributos agora vamos ver os elementos dos formulários HTML! O elemento <form> pode 
conter um ou mais dos seguintes elementos de formulário: 
 
Elementos de 
Formulários 
Descrição 
<form> Define um formulário HTML para entrada do usuário 
<input> Define um controle de entrada 
<textarea> Define um controle de entrada multilinha (área de texto) 
<label> Define um rótulo para um elemento <input> 
<fieldset> Agrupa elementos relacionados em um formulário 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
57
504
 
 
 
 
 
<legend> Define uma legenda para um elemento <fieldset> 
<selecionar> Define uma lista suspensa 
<optgroup> Define um grupo de opções relacionadas em uma lista suspensa 
<option> Define uma opção em uma lista suspensa 
<button> Define um botão clicável 
<datalist> Especifica uma lista de opções predefinidas para controles de entrada 
<output> Define o resultado de um cálculo 
 
Vejamos agora os diferentes tipos de entrada que você pode usar em HTML 
 
Tipos de entrada de 
Formulários 
Descrição 
<input 
type="button"> 
Define um botão 
<input 
type="checkbox"> 
Define uma caixa de seleção. As caixas de seleção permitem que um usuário 
selecione ZERO ou MAIS opções de um número limitado de opções. 
<input type="color"> 
É usado para campos de entrada que devem conter uma cor. Dependendo do 
suporte do navegador, um seletor de cores pode aparecer no campo de 
entrada. 
<input type="date"> 
É usado para campos de entrada que devem conter uma data. Dependendo do 
suporte do navegador, um seletor de data pode aparecer no campo de 
entrada. 
<input 
type="datetime-
local"> 
Especifica um campo de entrada de data e hora, sem fuso horário. 
Dependendo do suporte do navegador, um seletor de data pode aparecer no 
campo de entrada. 
<input 
type="email"> 
É usado para campos de entrada que devem conter um endereço de e-mail. 
Dependendo do suporte do navegador, o endereço de e-mail pode ser 
validado automaticamente quando enviado. 
<input type="file"> 
Define um campo de seleção de arquivo e um botão "Procurar" para uploads 
de arquivos. 
<input 
type="hidden"> 
Define um campo de entrada oculto (não visível para um usuário). Um campo 
oculto permite que os desenvolvedores da web incluam dados que não podem 
ser vistos ou modificados pelos usuários quando um formulário é enviado. Um 
campo oculto geralmente armazena o registro do banco de dados que precisa 
ser atualizado quando o formulário é enviado. 
<input 
type="image"> 
Define uma imagem como um botão de envio. O caminho para a imagem é 
especificado no srcatributo. 
<input 
type="month"> 
Permite ao usuário selecionar um mês e um ano. Dependendo do suporte do 
navegador, um seletor de data pode aparecer no campo de entrada. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
58
504
 
 
 
 
 
<input 
type="number"> 
Define um campo de entrada numérica. Você também pode definir restrições 
sobre quais números são aceitos. 
<input 
type="password"> 
Define um campo de senha 
<input type="radio"> 
Define um botão de opção. Os botões de opção permitem que um usuário 
selecione apenas uma dentre um número limitado de opções. 
<input 
type="range"> 
Define um controle para inserir um número cujo valor exato não é importante 
(como um controle deslizante). O intervalo padrão é de 0 a 100. No entanto, 
você pode definir restrições sobre quais números são aceitos com os atributos 
min, maxe :step 
<input type="reset"> 
Define um botão de redefinição que redefinirá todos os valores do formulário 
para seus valores padrão 
<input 
type="search"> 
É usado para campos de pesquisa (um campo de pesquisa se comporta como 
um campo de texto normal). 
<input 
type="submit"> 
Define um botão para enviar dados de formulário para um manipulador de 
formulário 
<input type="tel"> É usado para campos de entrada que devem conter um número de telefone. 
<input type="text"> Define um campo de entrada de texto de linha única 
<input type="time"> 
Permite ao usuário selecionar um horário (sem fuso horário). Dependendo do 
suporte do navegador, um seletor de tempo pode aparecer no campo de 
entrada. 
<input type="url"> 
É usado para campos de entrada que devem conter um endereço URL. 
Dependendo do suporte do navegador, o campo url pode ser validado 
automaticamente quando enviado. 
<input type="week"> 
Permite ao usuário selecionar uma semana e um ano. Dependendo do suporte 
do navegador, um seletor de data pode aparecer no campo de entrada. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
59
504
 
 
 
 
 
APIs HTML 
 
O HTML5 apresenta várias novas APIs (Application Programming Interfaces) que permitem aos 
desenvolvedores da Web criar aplicativos da Web mais poderosos e interativos. Aqui estão alguns 
exemplos: 
 
• A API de geolocalização permite que aplicativos da web acessem as informações de localização 
do usuário, com a permissão do usuário. 
 
• A API Web Storage fornece uma maneira de armazenar dados localmente em um navegador da 
web, permitindo que os aplicativos da web funcionem offline ou armazenem dados para uso 
futuro. 
 
• A API Web Workers permite que aplicativos da Web executem tarefas em segundo plano, como 
processamento de dados, sem interromper a experiência do usuário. 
 
• A API WebSockets permite a comunicação full-duplex entre o navegador da web e um servidor, 
permitindo a troca de dados em tempo real. 
 
• A API Canvas permite que os desenvolvedores da Web desenhem gráficos e animações em uma 
página da Web usando JavaScript. 
 
• A API de áudio da Web permite que os desenvolvedores da Web criem e manipulem áudio em 
uma página da Web, como sintetizar som ou processar entradas de áudio. 
 
• API Server-Sent Events (SSE) é uma tecnologia que permite que um servidor da Web envie dados 
para um navegador da Web em tempo real, sem a necessidade de o navegador fazer uma 
solicitação. Isso facilita a criação de aplicativos em tempo real, como salas de bate-papo, feeds 
de notícias e outros tipos de aplicativos que exigem atualizações frequentes. 
 
Estes são apenas alguns exemplos das APIs disponíveis no HTML5. Existem muitos mais, cada um 
com seu próprio conjunto específico de recursos e capacidades. 
 
API de geolocalização HTML 
 
A API de geolocalização HTML é usada para localizar a posição de um usuário. Como isso pode 
comprometer a privacidade, a posição não está disponível a menos que o usuário aprove. a API de 
geolocalização permite que aplicativos da web acessem as informações de localização do usuário, 
com a permissão do usuário. Isso pode ser útil para uma ampla variedade de aplicativos, como 
pesquisa baseada em localização, publicidade com reconhecimento de localização e jogos 
baseados em localização. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos eSilva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
60
504
 
 
 
 
 
É importante observar que as informações de localização do usuário são confidenciais e os 
aplicativos da Web devem obter a permissão do usuário antes de acessá-las. O usuário 
normalmente será solicitado a permitir ou negar o acesso às suas informações de localização. 
 
O método getCurrentPosition() é usado para retornar a posição do usuário. O exemplo abaixo 
retorna a latitude e longitude da posição do usuário: 
 
<script> 
var x = document.getElementById("demo"); 
function getLocation() { 
 if (navigator.geolocation) { 
 navigator.geolocation.getCurrentPosition(showPosition); 
 } else { 
 x.innerHTML = "Geolocation is not supported by this browser."; 
 } 
} 
 
function showPosition(position) { 
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude; 
} 
</script> 
 
Não entendeu nada? Vamos lá, o exemplo acima executa as seguintes ações: 
• Verifica se a geolocalização é suportada 
• Se suportado, executa o método getCurrentPosition(). 
• Se não, exibir uma mensagem para o usuário 
• Se o método getCurrentPosition() for bem-sucedido, ele retornará um objeto de 
coordenadas para a função especificada no parâmetro (showPosition) 
• A função showPosition() gera a Latitude e Longitude 
 
A geolocalização também é muito útil para informações específicas do local, como: 
• Informações locais atualizadas; 
• Mostrar pontos de interesse perto do usuário; 
• Navegação curva a curva (GPS). 
 
 
API de armazenamento da Web em HTML 
 
Para falar sobre API de armazenamento da Web em HTML primeiro devemos saber o que é 
armazenamento na Web em HTML? Com o armazenamento na web, os aplicativos da web podem 
armazenar dados localmente no navegador do usuário. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
61
504
 
 
 
 
 
Antes do HTML5, os dados do aplicativo precisavam ser armazenados em cookies, incluídos em 
todas as solicitações do servidor. O armazenamento na Web é mais seguro e grandes quantidades 
de dados podem ser armazenadas localmente, sem afetar o desempenho do site. 
 
Ao contrário dos cookies, o limite de armazenamento é muito maior (pelo menos 5 MB) e as 
informações nunca são transferidas para o servidor. O armazenamento na Web é por origem (por 
domínio e protocolo). Todas as páginas, de uma origem, podem armazenar e acessar os mesmos 
dados. 
 
O armazenamento da web HTML fornece dois objetos para armazenar dados no cliente: 
 
• window.localStorage - armazena dados sem data de validade; os dados não serão excluídos 
quando o navegador for fechado e estarão disponíveis no próximo dia, semana ou ano. 
• window.sessionStorage - armazena dados para uma sessão. Os dados são excluídos quando 
o usuário fecha a guia específica do navegador. 
 
Antes de usar o armazenamento na web, é necessário verificar o suporte do navegador para 
localStorage e sessionStorage. 
 
 
 
(CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionado a desenvolvimento de sistemas. 
 
No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados, tendo como 
característica o armazenamento de dados restritos à aba em funcionamento. 
 
Comentários 
É possível usar dois objetos para armazenar dados no cliente: window.localStorage e sessionStorage. O 
localStorage - armazena dados sem data de validade; os dados não serão excluídos quando o navegador 
for fechado e estarão disponíveis no próximo dia, semana ou ano. Por outro lado, o window.sessionStorage 
- armazena dados para uma sessão. Os dados são excluídos quando o usuário fecha a guia específica do 
navegador. A questão erra ao afirmar que sessionStorage pode ser utilizado para armazenamento local de 
dados quando na verdade é o window.localStorage que o faz. (Gabarito: Errado) 
 
 
 
Ob
je
to
s d
e 
ar
ma
ze
na
me
nt
o d
a 
We
b e
m 
HT
ML
 
window.localStorage - armazena dados sem data de validade
window.sessionStorage - armazena dados para uma sessão (os dados são 
perdidos quando a guia do navegador é fechada)
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
62
504
 
 
 
 
 
XHTML 
 
XHTML (Extensible HyperText Markup Language) é uma linguagem de marcação que é uma 
variante do HTML (HyperText Markup Language). É uma versão mais rígida e limpa do HTML, com 
uma sintaxe mais rígida e com foco na conformidade com os padrões. 
 
Assim como o HTML, o XHTML é usado para estruturar e formatar o conteúdo de páginas da Web, 
incluindo texto, imagens e outros elementos multimídia. No entanto, o XHTML segue as regras do 
XML (eXtensible Markup Language), o que significa que deve ser bem formado e obedecer a certas 
regras de sintaxe. Isso facilita a análise e o processamento e pode ser manipulado por uma ampla 
gama de ferramentas e aplicativos. 
 
XHTML foi projetado para ser uma ponte entre HTML e XML, e é frequentemente usado em 
combinação com outras tecnologias, como CSS (Cascading Style Sheets) e JavaScript, para criar 
páginas da Web dinâmicas e interativas. É suportado por todos os navegadores da web modernos 
e é comumente usado no desenvolvimento web. 
 
Existem várias diferenças entre HTML e XHTML: 
 
• Sintaxe: XHTML tem uma sintaxe mais estrita e rígida do que HTML. Ele segue as regras do 
XML, o que significa que deve ser bem formado e obedecer a certas regras de sintaxe, como 
fechar todas as tags e usar letras minúsculas. O HTML, por outro lado, é mais flexível e 
tolerante em termos de sintaxe, e não é necessário seguir as regras do XML. 
 
• Extensibilidade: XHTML é projetado para ser extensível, o que significa que pode ser 
estendido com novos elementos e atributos. Isso é feito usando os mecanismos do XML, 
como namespaces. O HTML, por outro lado, não é tão extensível e é limitado aos elementos 
e atributos definidos na especificação HTML. 
 
• Compatibilidade: XHTML é compatível com uma ampla gama de ferramentas e aplicativos, 
pois segue as regras do XML. O HTML é menos compatível, pois não segue as regras do XML. 
 
• Tipo de documento: XHTML usa uma declaração de tipo de documento (DTD) diferente do 
HTML. A DTD especifica as regras para o documento e determina como o documento deve 
ser interpretado por navegadores da Web e outros aplicativos. 
 
• Tipo MIME: XHTML usa um tipo MIME (Multipurpose Internet Mail Extensions) diferente do 
HTML. O tipo MIME informa aos navegadores da Web e outros aplicativos como lidar com 
o documento. 
 
Em geral, o XHTML é uma versão mais moderna e compatível com os padrões do HTML, e é 
frequentemente usado em combinação com outras tecnologias, como CSS e JavaScript, para criar 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
63
504
 
 
 
 
 
páginas da Web dinâmicas e interativas. No entanto, o HTML ainda é amplamente usado e 
suportado por todos os navegadores modernos. 
 
 
 
 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
64
504
==1feb8f==
 
 
 
 
 
Acessibilidade HTML 
 
O HTML5 inclui vários recursos que podem melhorar a acessibilidade do conteúdo da Web para 
usuários com deficiências. Alguns desses recursos incluem: 
 
• Elementos semânticos: o HTML5 apresenta novos elementos semânticos, como <header>, 
<footer> e <nav>, que podem ajudar a melhorar a estrutura e o significado do conteúdo da web. 
Isso pode tornar mais fácilpara as tecnologias assistivas, como leitores de tela, interpretar e 
navegar pelo conteúdo. 
 
• Atributos ARIA: A especificação Accessible Rich Internet Applications (ARIA) define um conjunto 
de atributos que podem ser usados para fornecer informações adicionais sobre a finalidade e o 
comportamento dos elementos em uma página da web. Esses atributos podem ser usados para 
melhorar a acessibilidade de elementos interativos, como botões e controles de formulário. 
 
• Legendas e legendas de vídeo: O elemento <track> permite que você especifique uma trilha de 
texto que pode ser exibida como legendas ou legendas para um elemento <video>. Isso pode 
ajudar a tornar o conteúdo de vídeo mais acessível para usuários surdos ou com deficiência 
auditiva. 
 
• Controles de formulário: o HTML5 apresenta novos controles de formulário, como os tipos de 
entrada de data e intervalo, que podem melhorar a usabilidade e a acessibilidade dos 
formulários da web. 
 
Ao usar esses e outros recursos do HTML5, você pode ajudar a tornar seu conteúdo da Web mais 
acessível e fácil de usar para uma ampla gama de usuários. 
 
O atributo lang é um atributo HTML que pode ser usado para especificar o idioma de um elemento 
e seu conteúdo. É um importante recurso de acessibilidade, pois permite que tecnologias 
assistivas, como leitores de tela, interpretem e pronunciem corretamente o conteúdo de uma 
página da web. 
 
É uma boa ideia usar o atributo lang sempre que estiver usando um idioma diferente do idioma 
padrão da página da web. Isso ajuda a garantir que o conteúdo seja interpretado e pronunciado 
corretamente por tecnologias assistivas. 
 
Vale a pena notar que o atributo lang não está limitado ao HTML5 – ele faz parte do HTML há 
muitos anos. No entanto, é um importante recurso de acessibilidade que vale a pena considerar 
em qualquer documento HTML. 
 
<html lang="en"> 
 <!-- resto do documento vai aqui --> 
</html> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
65
504
 
 
 
 
 
RESUMO 
 
 
 
O que é HTML? 
• HTML significa Hyper Text Markup Language. 
• HTML é a linguagem de marcação padrão para criar páginas da Web; 
• HTML descreve a estrutura de uma página da Web; 
• HTML consiste em uma série de elementos; 
• Os elementos HTML informam ao navegador como exibir o conteúdo; 
• Os elementos HTML rotulam partes do conteúdo como "isto é um título", "isto é um 
parágrafo", "isto é um link", etc. 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
66
504
 
 
 
 
 
 
 
HTML Básico 
 
 
 
<!DOCTYPE html> 
 
Os cabeçalhos HTML são definidos com as tags <h1>to .<h6>. <h1>define o cabeçalho mais 
importante. Enquanto <h6>define o título menos importante: 
 
 
 
Elementos HTML 
 
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final. O elemento 
HTML é tudo, desde a tag inicial até a tag final: 
Hy
pe
r T
ex
t M
ar
ku
p 
La
ng
ua
ge
 - H
TM
L
Linguagem de marcação padrão para criar páginas da Web
Descreve a estrutura de uma página da Web
Consiste em uma série de elementos
Elementos HTML informam ao navegador como exibir o conteúdo e rotulam partes 
do conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
67
504
 
 
 
 
 
 
< tagname > O conteúdo vai aqui... < /tagname > 
< h1 > Meu primeiro cabeçalho < /h1 > 
< p > Meu primeiro parágrafo. < /p > 
 
Tag inicial conteúdo do elemento Tag final 
<h1> My First Heading </h1> 
<p> My first paragraph. </p> 
<br> none none 
 
 
 
Atributos HTML 
 
Todos os elementos HTML podem ter atributos. Os atributos fornecem informações adicionais 
sobre os elementos, e são sempre especificados na tag de início. Os atributos geralmente vêm em 
pares de nome/valor como: name="value". 
 
A tag <a> define um hiperlink. O href atributo especifica a URL da página para a qual o link vai: 
 
 
 
Cabeçalhos HTML 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
68
504
 
 
 
 
 
Cabeçalhos HTML são títulos ou subtítulos que você deseja exibir em uma página da web. Os 
cabeçalhos HTML são definidos com as tags <h1> até <h6>. Relembrando, <h1> define o cabeçalho 
mais importante. <h6>define o título menos importante. 
 
 
 
Parágrafos HTML 
 
Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto. O elemento 
HTML <p> define um parágrafo. Um parágrafo sempre começa em uma nova linha e os 
navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois 
de um parágrafo. 
 
 
 
A tag <hr> define uma quebra temática em uma página HTML e geralmente é exibida como uma 
régua horizontal. O elemento <hr> é usado para separar o conteúdo (ou definir uma alteração) em 
uma página HTML. A tag <hr> é uma tag vazia, o que significa que não tem tag final. 
 
Estilos HTML 
 
O atributo HTML style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e 
muito mais. A definição do estilo de um elemento HTML pode ser feita com o atributo style. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
69
504
 
 
 
 
 
 
 
O atributo HTML style tem a seguinte sintaxe4: 
 
<tagname style="property:value;"> 
 
 
 
 
4 property é uma propriedade CSS. value é um valor CSS. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
70
504
 
 
 
 
 
 
 
 
 
Propriedade CSS Descrição 
Background-color Define a cor de fundo de um elemento HTML 
Color Define a cor do texto para um elemento HTML 
Font-family Define a fonte a ser usada para um elemento HTML 
Font-size Define o tamanho do texto para um elemento HTML 
Text-align Define o alinhamento horizontal do texto para um elemento HTML 
 
 
 
pa
rá
gr
af
os
 HT
ML
<p> Define um parágrafo
<hr> Define uma mudança temática no conteúdo
<br> Insere uma única quebra de linha
<pre> Define o texto pré-formatado
El
em
en
to
s d
e F
or
ma
ta
çã
o H
TM
L
<b> Texto em negrito
<strong> Texto importante
<i> Texto em itálico
<em> Texto enfatizado
<mark> Texto marcado
<small> Texto menor
<del> Texto deletado
<ins> Texto inserido
<sub> texto subscrito
<sup> Texto sobrescrito
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
71
504
 
 
 
 
 
 
 
<!-- Escreva seus comentários aqui --> 
 
Links HTML 
 
O texto do link é a parte que ficará visível para o leitor. Clicar no texto do link enviará o leitor ao 
endereço de URL especificado. Por padrão, os links aparecerão da seguinte maneira em todos os 
navegadores: 
 
• Um link não visitado é sublinhado e azul 
• Um link visitado é sublinhado e roxo 
• Um link ativo é sublinhado e vermelho 
 
O atributo target especifica onde abrir o documento vinculado. 
 
• _self- Predefinição. Abre o documento na mesma janela/guia em que foi clicado 
• _blank- Abre o documento em uma nova janela ou guia 
• _parent- Abre o documento no quadro pai 
• _top- Abre o documento em todo o corpo da janela 
 
Imagens HTML 
 
As imagens podem melhorar o design e a aparência de umapágina da web. As imagens não são 
tecnicamente inseridas em uma página da web; mas sim vinculadas a páginas da web. A tag <img> 
cria um espaço de retenção para a imagem referenciada. A tag <img> é vazia e possui dois 
atributos obrigatórios: 
 
• src - Especifica o caminho para a imagem; 
• alt - Especifica um texto alternativo para a imagem. 
 
Vejamos os tipos de arquivo de imagem mais comuns, suportados em todos os navegadores 
(Chrome, Edge, Firefox, Safari, Opera): 
 
Cit
aç
ão
 em
 HT
ML
<abbr> Define uma abreviação ou acrônimo
<address>Define as informações de contato do autor/proprietário de um documento
<bdo> Define a direção do texto
<blockquote> Define uma seção que é citada de outra fonte
<cite> Define o título de uma obra
<q> Define uma citação curta em linha
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
72
504
 
 
 
 
 
Abreviação Formato do arquivo Extensão 
APNG Animated Portable Network Graphics .apng 
GIF Graphics Interchange Format .gif 
ICO Microsoft Icon .ico, .cur 
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp 
PNG Portable Network Graphics .png 
SVG Scalable Vector Graphics .svg 
 
 
 
Tag Descrição 
<img> Define uma imagem; 
<map> Define um mapa de imagem; 
<area> Define uma área clicável dentro de um mapa de imagem; 
<picture> Define um contêiner para vários recursos de imagem. 
 
Tabelas HTML 
 
iM
AG
EN
S H
TM
L
<img> define uma imagem
src define a URL da imagem
alt define um texto alternativo para uma imagem, se ela não puder ser exibida
width e height definem o tamanho da imagem
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
73
504
 
 
 
 
 
 
 
Listas HTML 
 
Tag Descrição 
<ul> Define uma lista não ordenada 
<ol> Define uma lista ordenada 
<li> Definir um item de lista 
<dl> Define uma lista de descrição 
<dt> Define um termo em uma lista de descrição 
<dd> Descreve o termo em uma lista de descrição 
 
Listas Não Ordenadas 
 
Valor Descrição 
disc Define o marcador de item da lista para um marcador (padrão). 
circle Define o marcador de item da lista para um círculo. 
square Define o marcador de item da lista para um quadrado. 
none Os itens da lista não serão marcados. 
 
ta
be
la
s H
TM
L
<table> Define uma tabela
<th> Define uma célula de cabeçalho em uma tabela
<tr> Define uma linha em uma tabela
<td> Define uma célula em uma tabela
<caption> Define uma legenda de tabela
<colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação
<col> Especifica as propriedades da coluna para cada coluna dentro de um elemento <colgroup>
<thead> Agrupa o conteúdo do cabeçalho em uma tabela
<tbody> Agrupa o conteúdo do corpo em uma tabela
<tfoot> Agrupa o conteúdo do rodapé em uma tabela
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
74
504
 
 
 
 
 
 
 
Listas Ordenadas 
 
Type Descrição 
type="1" Os itens da lista serão numerados com números (padrão) 
type="A" Os itens da lista serão numerados com letras maiúsculas 
type="a" Os itens da lista serão numerados com letras minúsculas 
type="I" Os itens da lista serão numerados com números romanos maiúsculos 
type="i" Os itens da lista serão numerados com números romanos minúsculos 
 
 
 
Lis
ta
s n
ão
 or
de
na
da
s
Use o elemento HTML <ul>para definir uma lista não ordenada
Use a propriedade CSS list-style-type para definir o marcador de item da lista
Use o elemento HTML <li>para definir um item da lista
As listas podem ser aninhadas
Os itens da lista podem conter outros elementos HTML
Use a propriedade CSS float:left para exibir uma lista horizontalmente
Lis
ta
s O
rd
en
ad
as
Use o elemento HTML <ol>para definir uma lista ordenada
Use o atributo HTML type para definir o tipo de numeração
Use o elemento HTML <li>para definir um item de lista
As listas podem ser aninhadas
Os itens da lista podem conter outros elementos HTML
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
75
504
 
 
 
 
 
 
 
 
 
elementos de nível de bloco 
<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>
<h6> <header> <hr> <li> <main>
<nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>
elementos inline HTML 
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
76
504
 
 
 
 
 
 
 
 
Para relembrar, fica esse grande lembrete: 
 
 
 
 
 
Formulários HTML 
 
Um formulário HTML é usado para coletar a entrada do usuário. A entrada do usuário geralmente 
é enviada a um servidor para processamento. O elemento HTML <form> é usado para criar um 
Bl
oc
o H
TM
L e
 el
em
en
to
s 
em
bu
tid
os
Existem dois valores de exibição: bloco e embutido
Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível
Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária
<div> é um nível de bloco e geralmente é usado como um contêiner para outros elementos HTML
<span> é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um 
documento
<div> Define uma seção em um documento (nível de bloco)
<span> Define uma seção em um documento (em linha)
At
rib
ut
o d
e c
la
ss
e H
TM
L
O atributo HTML class especifica um ou mais nomes de classe para um elemento
Classes são usadas por CSS e JavaScript para selecionar e acessar elementos 
específicos
O atributo class pode ser usado em qualquer elemento HTML
O nome da classe diferencia maiúsculas de minúsculas
Diferentes elementos HTML podem apontar para o mesmo nome de classe
JavaScript pode acessar elementos com um nome de classe específico com o método 
getElementsByClassName()
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
77
504
 
 
 
 
 
formulário HTML para entrada do usuário. Ele é um contêiner para diferentes tipos de elementos 
de entrada, como: campos de texto, caixas de seleção, botões de opção, botões de envio, etc. 
 
O elemento HTML <input>é o elemento de formulário mais usado. Ele pode ser exibido de várias 
maneiras, dependendo do atributo type. 
 
Type Descrição 
<input type="text"> Exibe um campo de entrada de texto de linha única 
<input type="radio"> Exibe um botão de opção (para selecionar uma das muitas opções) 
<input type="checkbox"> Exibe uma caixa de seleção (para selecionar zero ou mais opções) 
<input type="submit"> Exibe um botão de envio (para enviar o formulário) 
<input type="button"> Exibe um botão clicável 
O atributo do método especifica o método HTTP a ser usado ao enviar os dados do formulário. Os 
dados do formulário podem ser enviados como variáveis de URL (com method="get") ou como pós-
transação HTTP (com method="post"). O método HTTP padrão ao enviar dados de formulário é 
GET. 
 
Método Descrição 
Get 
Anexa os dados do formulário ao URL, em pares de nome/valor; 
NUNCA use GET para enviar dados confidenciais!(os dados do formulário enviado 
são visíveis na URL!); 
O comprimento de um URL é limitado (2048 caracteres); 
Útil para envios de formulários em que um usuário deseja marcar o resultado como 
favorito; 
GET é bom para dados não seguros, como strings de consulta no Google. 
Post 
- Anexa os dados do formulário dentro do corpo da solicitação HTTP (os dados do 
formulário enviado não são mostrados na URL); 
- O POST não tem limitações de tamanho e pode ser usado para enviar grandes 
quantidades de dados; 
- Os envios de formulário com POST não podem ser marcados. 
 
Vejamos um compilado dos atributos dos formulários HTML. 
 
Atributo de 
Formulários 
Descrição 
accept-charset Especifica as codificações de caracteres usadas para envio de formulário 
action Especifica para onde enviar os dados do formulário quando um formulário é enviado 
autocomplete Especifica se um formulário deve ter o preenchimento automático ativado ou 
desativado 
enctype Especifica como os dados do formulário devem ser codificados ao enviá-los ao 
servidor (somente para method="post") 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
78
504
 
 
 
 
 
method Especifica o método HTTP a ser usado ao enviar dados de formulário 
name Especifica o nome do formulário 
novalidate Especifica que o formulário não deve ser validado quando enviado 
rel Especifica a relação entre um recurso vinculado e o documento atual 
target Especifica onde exibir a resposta recebida após o envio do formulário 
 
Os elementos HTML <form> 
 
Vimos os atributos agora vamos ver os elementos dos formulários HTML! O elemento <form> pode 
conter um ou mais dos seguintes elementos de formulário: 
 
Elementos de 
Formulários 
Descrição 
<form> Define um formulário HTML para entrada do usuário 
<input> Define um controle de entrada 
<textarea> Define um controle de entrada multilinha (área de texto) 
<label> Define um rótulo para um elemento <input> 
<fieldset> Agrupa elementos relacionados em um formulário 
<legend> Define uma legenda para um elemento <fieldset> 
<selecionar> Define uma lista suspensa 
<optgroup> Define um grupo de opções relacionadas em uma lista suspensa 
<option> Define uma opção em uma lista suspensa 
<button> Define um botão clicável 
<datalist> Especifica uma lista de opções predefinidas para controles de entrada 
<output> Define o resultado de um cálculo 
 
Vejamos agora os diferentes tipos de entrada que você pode usar em HTML 
 
Tipos de entrada de 
Formulários 
Descrição 
<input 
type="button"> 
Define um botão 
<input 
type="checkbox"> 
Define uma caixa de seleção. As caixas de seleção permitem que um usuário 
selecione ZERO ou MAIS opções de um número limitado de opções. 
<input type="color"> 
É usado para campos de entrada que devem conter uma cor. Dependendo do 
suporte do navegador, um seletor de cores pode aparecer no campo de 
entrada. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
79
504
 
 
 
 
 
<input type="date"> 
É usado para campos de entrada que devem conter uma data. Dependendo do 
suporte do navegador, um seletor de data pode aparecer no campo de 
entrada. 
<input 
type="datetime-
local"> 
Especifica um campo de entrada de data e hora, sem fuso horário. 
Dependendo do suporte do navegador, um seletor de data pode aparecer no 
campo de entrada. 
<input 
type="email"> 
É usado para campos de entrada que devem conter um endereço de e-mail. 
Dependendo do suporte do navegador, o endereço de e-mail pode ser 
validado automaticamente quando enviado. 
<input type="file"> 
Define um campo de seleção de arquivo e um botão "Procurar" para uploads 
de arquivos. 
<input 
type="hidden"> 
Define um campo de entrada oculto (não visível para um usuário). Um campo 
oculto permite que os desenvolvedores da web incluam dados que não podem 
ser vistos ou modificados pelos usuários quando um formulário é enviado. Um 
campo oculto geralmente armazena o registro do banco de dados que precisa 
ser atualizado quando o formulário é enviado. 
<input 
type="image"> 
Define uma imagem como um botão de envio. O caminho para a imagem é 
especificado no srcatributo. 
<input 
type="month"> 
Permite ao usuário selecionar um mês e um ano. Dependendo do suporte do 
navegador, um seletor de data pode aparecer no campo de entrada. 
<input 
type="number"> 
Define um campo de entrada numérica. Você também pode definir restrições 
sobre quais números são aceitos. 
<input 
type="password"> 
Define um campo de senha 
<input type="radio"> 
Define um botão de opção. Os botões de opção permitem que um usuário 
selecione apenas uma dentre um número limitado de opções. 
<input 
type="range"> 
Define um controle para inserir um número cujo valor exato não é importante 
(como um controle deslizante). O intervalo padrão é de 0 a 100. No entanto, 
você pode definir restrições sobre quais números são aceitos com os atributos 
min, maxe :step 
<input type="reset"> 
Define um botão de redefinição que redefinirá todos os valores do formulário 
para seus valores padrão 
<input 
type="search"> 
É usado para campos de pesquisa (um campo de pesquisa se comporta como 
um campo de texto normal). 
<input 
type="submit"> 
Define um botão para enviar dados de formulário para um manipulador de 
formulário 
<input type="tel"> É usado para campos de entrada que devem conter um número de telefone. 
<input type="text"> Define um campo de entrada de texto de linha única 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
80
504
 
 
 
 
 
<input type="time"> 
Permite ao usuário selecionar um horário (sem fuso horário). Dependendo do 
suporte do navegador, um seletor de tempo pode aparecer no campo de 
entrada. 
<input type="url"> 
É usado para campos de entrada que devem conter um endereço URL. 
Dependendo do suporte do navegador, o campo url pode ser validado 
automaticamente quando enviado. 
<input type="week"> 
Permite ao usuário selecionar uma semana e um ano. Dependendo do suporte 
do navegador, um seletor de data pode aparecer no campo de entrada. 
 
Referência completa do HTML 
 
Vejamos a Referência completa do HTML, incluindo todas as tags. 
 
Tag Descrição 
<!--...--> Define um comentário 
<!DOCTYPE> Define o tipo de documento 
<a> Define um hiperlink 
<abbr> Define uma abreviação ou um acrônimo 
<acronym> Não suportado em HTML5. Em vez disso, use <abbr 
<endereço> Define as informações de contato do autor/proprietário de um documento 
<applet> Não suportado em HTML5. Use <embed 
<area> Define uma área dentro de um mapa de imagem 
<article> Define um artigo 
<aside> Define o conteúdo além do conteúdo da página 
<audio> Define o conteúdo de som incorporado 
<b> Define o texto em negrito 
<base> Especifica a URL/alvo base para todas as URLs relativas em um documento 
<basefont> Não suportado em HTML5. Em vez disso, use CSS. Especifica uma cor, tamanho e 
fonte padrão para todo o texto em um documento 
<bdi> Isola uma parte do texto que pode estar formatada em uma direção diferente de 
outro texto fora dele 
<bdo> Substitui a direção do texto atual 
<big> Não suportado em HTML5. Em vez disso, use CSS. Define texto grande 
<blockquote> Define uma seção que é citada de outra fonte 
<body> Define o corpo do documento 
<br> Define uma única quebra de linha 
<button> Define um botão clicável 
<canvas> Usado para desenhar gráficos, em tempo real, via script (geralmente JavaScript) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF(Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
81
504
 
 
 
 
 
<caption> Define uma legenda de tabela 
<center> Não suportado em HTML5. Em vez disso, use CSS. Define o texto centrado 
<cite> Define o título de uma obra 
<code> Define um pedaço de código de computador 
<col> Especifica as propriedades da coluna para cada coluna dentro de um elemento 
<colgroup 
<colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação 
<data> Adiciona uma tradução legível por máquina de um determinado conteúdo 
<datalist> Especifica uma lista de opções predefinidas para controles de entrada 
<dd> Define uma descrição/valor de um termo em uma lista de descrição 
<del> Define o texto que foi excluído de um documento 
<details> Define detalhes adicionais que o usuário pode visualizar ou ocultar 
<dfn> Especifica um termo que será definido dentro do conteúdo 
<dialog> Define uma caixa de diálogo ou janela 
<dir> Não suportado em HTML5. Em vez disso, use <ul 
<div> Define uma seção em um documento 
<dl> Define uma lista de descrição 
<dt> Define um termo/nome em uma lista de descrição 
<em> Define o texto enfatizado 
<embed> Define um contêiner para um aplicativo externo 
<fieldset> Agrupa elementos relacionados em um formulário 
<figcaption> Define uma legenda para um elemento <figure> 
<figure> Especifica o conteúdo independente 
<font> Não suportado em HTML5. Em vez disso, use CSS. Define a fonte, a cor e o tamanho 
do texto 
<footer> Define um rodapé para um documento ou seção 
<form> Define um formulário HTML para entrada do usuário 
<frame> Não suportado em HTML5. Define uma janela (um quadro) em um conjunto de 
quadros 
<frameset> Não suportado em HTML5. Define um conjunto de quadros 
<h1> a <h6 
<head> Contém metadados/informações para o documento 
<header> Define um cabeçalho para um documento ou seção 
<hr> Define uma mudança temática no conteúdo 
<html> Define a raiz de um documento HTML 
<i> Define uma parte do texto em uma voz ou humor alternativo 
<iframe> Define um quadro embutido. Uma página dentro de outra página 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
82
504
 
 
 
 
 
<img> Define uma imagem 
<input> Define um controle de entrada 
<ins> Define um texto que foi inserido em um documento 
<kbd> Define a entrada do teclado 
<label> Define um rótulo para um elemento <input> 
<legend> Define uma legenda para um elemento <fieldset> 
<li> Define um item de lista 
<link> Define o relacionamento entre um documento e um recurso externo (mais usado 
para vincular a folhas de estilo) 
<main> Especifica o conteúdo principal de um documento 
<map> Define um mapa de imagem 
<mark> Define o texto marcado/destacado 
<meta> Define metadados sobre um documento HTML 
<meter> Define uma medição escalar dentro de um intervalo conhecido (um medidor) 
<nav> Define links de navegação 
<noframes> Não suportado em HTML5. Define um conteúdo alternativo para usuários que não 
suportam frames 
<noscript> Define um conteúdo alternativo para usuários que não suportam scripts do lado do 
cliente 
<object> Define um contêiner para um aplicativo externo 
<ol> Define uma lista ordenada 
<optgroup> Define um grupo de opções relacionadas em uma lista suspensa 
<option> Define uma opção em uma lista suspensa 
<output> Define o resultado de um cálculo 
<p> Define um parágrafo 
<param> Define um parâmetro para um objeto 
<picture> Define um contêiner para vários recursos de imagem 
<pre> Define o texto pré-formatado 
<progress> Representa o progresso de uma tarefa 
<q> Define uma citação curta 
<rp> Define o que mostrar em navegadores que não suportam anotações ruby 
<rt> Define uma explicação/pronúncia de caracteres (para tipografia do Leste Asiático) 
<ruby> Define uma anotação rubi (para tipografia do Leste Asiático) 
<s> Define o texto que não está mais correto 
<samp> Define a saída de amostra de um programa de computador 
<script> Define um script do lado do cliente 
<section> Define uma seção em um documento 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
83
504
 
 
 
 
 
<selecionar> Define uma lista suspensa 
<small> Define um texto menor 
<source> Define vários recursos de mídia para elementos de mídia (<vídeo>) 
<span> Define uma seção em um documento 
<strike> Não suportado em HTML5. Use <del 
<estilo> Define informações de estilo para um documento 
<sub> Define o texto subscrito 
<summary> Define um cabeçalho visível para um elemento <details> 
<sup> Define o texto sobrescrito 
<svg> Define um contêiner para gráficos SVG 
<table> Define uma tabela 
<tbody> Agrupa o conteúdo do corpo em uma tabela 
<td> Define uma célula em uma tabela 
<template> Define um contêiner para o conteúdo que deve ser ocultado quando a página é 
carregada 
<textarea> Define um controle de entrada multilinha (área de texto) 
<tfoot> Agrupa o conteúdo do rodapé em uma tabela 
<th> Define uma célula de cabeçalho em uma tabela 
<thead> Agrupa o conteúdo do cabeçalho em uma tabela 
<time> Define uma hora específica (ou datetime) 
<title> Define um título para o documento 
<tr> Define uma linha em uma tabela 
<track> Define trilhas de texto para elementos de mídia (<video>) 
<tt> Não suportado em HTML5. Em vez disso, use CSS. Define o texto do teletipo 
<u> Define algum texto que não é articulado e tem um estilo diferente do texto normal 
<ul> Define uma lista não ordenada 
<var> Define uma variável 
<video> Define o conteúdo de vídeo incorporado 
<wbr> Define uma possível quebra de linha 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
84
504
 
 
 
 
 
Mais cobrados em provas 
 
<iframe> 
 
Um iframe (abreviação de "frame inline") é um elemento HTML usado para incorporar uma página 
da Web em outra página da Web. Ele fornece uma maneira de exibir o conteúdo de outra página 
da Web na página da Web atual e é comumente usado para incorporar vídeos, mapas e outros 
conteúdos interativos. 
 
Para criar um iframe, você pode usar o elemento <iframe> e especificar o local da página a ser 
incorporada usando o atributo src. Você também pode usar os atributos de largura e altura para 
especificar o tamanho do iframe na página da web. 
 
O elemento <iframe> possui vários atributos que podem ser usados para personalizar seu 
comportamento, como rolagem, frameborder e allowfullscreen. Você também pode usar 
JavaScript para controlar o elemento iframe programaticamente, usando os métodos e 
propriedades do elemento iframe. 
 
Lembre-se de que os iframes podem ser um risco de segurança se você incorporar conteúdo de 
fontes não confiáveis, pois o conteúdo incorporado tem acesso à página da Web principal e pode 
executar códigos maliciosos. É importante ser cauteloso ao usar iframes e incorporar apenas 
conteúdo de fontes confiáveis. 
 
Símbolos HTML 
 
Tag Número Entidade Descrição 
© &#169 &copy Sinal de direitos autorais 
® &#174 &reg Assinatura registrada 
€ &#8364 &euro Sinal do euro 
™ &#8482 &trade Marca comercial 
← &#8592 &larr Seta para a esquerda 
↑ &#8593 &uarr Seta para cima 
→ &#8594 &rarr Seta para a direita 
↓ &#8595 &darr Seta para baixo 
♠ &#9824 &spades Espadas preto 
♣ &#9827 &clubs Club preto 
♥ &#9829 &hearts Coração negro 
♦ &#9830 &diams Diamante negro 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
85
504
 
 
 
 
 
 
getElementById 
 
Em HTML, a função getElementByIdé um método do objeto de documento que pode ser usado 
para recuperar um elemento do documento por seu identificador exclusivo (ID). A função 
getElementById retorna uma referência ao elemento com o ID especificado ou null se tal elemento 
não existir. 
 
Vejamos um exemplo de como a função getElementById pode ser usada: 
 
<div id="myDiv"> Este é um elemento div.</div> 
 
<script> 
 var myDiv = document.getElementById('myDiv'); 
 console.log(myDiv.innerHTML); // Outputs: " Este é um elemento div." 
</script> 
 
Neste exemplo, a função getElementById é usada para recuperar o elemento <div> com um ID de 
"myDiv". A propriedade innerHTML do elemento é registrada no console. 
 
A função getElementById é uma maneira útil de acessar elementos no DOM (Document Object 
Model) e manipular suas propriedades e estilos. Geralmente é usado em conjunto com outros 
métodos e propriedades DOM, como innerHTML e estilo, para criar páginas da Web dinâmicas e 
interativas. 
 
<meta> 
 
A tag <meta> define metadados sobre um documento HTML. Metadados são dados (informações) 
sobre dados. As tags <meta> sempre ficam dentro do elemento <head> e normalmente são usadas 
para especificar o conjunto de caracteres, a descrição da página, as palavras-chave, o autor do 
documento e as configurações da viewport. Vejamos os atributos, os valores e suas respectivas 
descrições. 
 
Atributo Valor Descrição 
charset character_set 
Especifica a codificação de caracteres para o 
documento HTML 
content text 
Especifica o valor associado ao atributo http-equiv ou 
name 
http-equiv 
content-security-policy 
content-type 
default-style 
refresh 
Fornece um cabeçalho HTTP para as informações/valor 
do atributo de conteúdo 
name application-name Especifica um nome para os metadados 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
86
504
 
 
 
 
 
author 
description 
generator 
keywords 
viewport 
 
Os metadados são usados por navegadores (como exibir conteúdo ou recarregar a página), 
mecanismos de pesquisa (palavras-chave) e outros serviços da web. Vejamos alguns exemplos: 
 
Define palavras-chave para motores de busca: 
 
<meta name="keywords" content="HTML, CSS, JavaScript"> 
 
Define uma descrição da sua página da web: 
 
<meta name="description" content="Free Web tutorials for HTML and CSS"> 
 
Define o autor de uma página: 
 
<meta name="author" content="John Doe"> 
 
Atualize o documento a cada 30 segundos: 
 
<meta http-equiv="refresh" content="30"> 
 
Configurando a janela de visualização para que seu site tenha uma boa aparência em todos os 
dispositivos: 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
A viewport é a área visível do usuário de uma página da web. Varia de acordo com o dispositivo - 
será menor em um telefone celular do que na tela do computador. Você deve incluir o seguinte 
elemento <meta> em todas as suas páginas da web: 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
 
Manifesto de cache 
 
Para tratar um site offline com HTML5, você pode usar o recurso de armazenamento de cache do 
HTML5, que permite que você armazene arquivos em cache no navegador do usuário. Isso significa 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
87
504
 
 
 
 
 
que, quando o usuário visita o site pela primeira vez, os arquivos são armazenados em cache e, em 
visitas posteriores, o site é carregado a partir do cache, em vez de ser baixado da internet. 
 
Para habilitar o armazenamento de cache, você precisa criar um arquivo chamado "manifesto de 
cache" e vinculá-lo ao seu HTML usando a tag <html>. O manifesto de cache é um arquivo de texto 
simples que contém uma lista de arquivos que devem ser armazenados em cache. Aqui está um 
exemplo de um manifesto de cache: 
 
CACHE MANIFEST 
# versão 1.0 
index.html 
css/styles.css 
js/scripts.js 
images/logo.png 
 
Em seguida, você precisa adicionar a tag <html> ao seu arquivo HTML e definir o atributo manifest 
como o caminho para o seu arquivo de manifesto de cache: 
 
<html manifest="/cache.manifest"> 
 
Isso permitirá que o navegador armazene em cache os arquivos especificados no manifesto de 
cache. Quando o usuário visita o site pela primeira vez, os arquivos serão baixados e armazenados 
em cache. Em visitas posteriores, o site será carregado a partir do cache, permitindo que ele 
funcione offline. 
 
 
 
 
 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
88
504
 
 
 
 
 
QUESTÕES COMENTADAS 
Questões Cespe 
 
1. (CESPE – TCE RJ– 2022). Quanto ao desenvolvimento de sistemas web, julgue o item 
seguinte. 
 
HTML5 é uma linguagem de programação que permite estruturar páginas web e 
executar comandos como loops de repetição, por exemplo. 
 
Comentários: 
 
HTML é a linguagem de marcação padrão para criar páginas da Web, ela descreve a 
estrutura de uma página da Web, porém, não executa comandos como loops de 
repetição. 
Gabarito: Errado 
 
2. (CESPE –DP DF– 2022) Julgue o item seguinte, a respeito da formatação de dados. 
 
A tag <meta charset="UTF-8"> define o conjunto de caracteres usados na página, 
nesse caso, o UTF-8, que é o padrão para HTML5. 
 
Comentários: 
 
O atributo charset especifica a codificação de caracteres para o documento HTML. A 
especificação HTML5 incentiva os desenvolvedores da Web a usar o conjunto de 
caracteres UTF-8, que abrange quase todos os caracteres e símbolos do mundo! 
 
Gabarito: Correto 
 
3. (CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionado a desenvolvimento 
de sistemas. 
 
No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados, 
tendo como característica o armazenamento de dados restritos à aba em 
funcionamento. 
 
Comentários: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
90
504
 
 
 
 
 
É possível usar dois objetos para armazenar dados no cliente: window.localStorage e 
sessionStorage. O localStorage - armazena dados sem data de validade; os dados não serão 
excluídos quando o navegador for fechado e estarão disponíveis no próximo dia, semana ou ano. 
Por outro lado, o window.sessionStorage - armazena dados para uma sessão. Os dados são 
excluídos quando o usuário fecha a guia específica do navegador. A questão erra ao afirmar que 
sessionStorage pode ser utilizado para armazenamento local de dados quando na verdade é o 
window.localStorage que o faz. 
 
Gabarito: Errado 
 
4. (CESPE – APEX – 2021) Em HTML5, considerando-se o contexto de geolocalização e 
acesso ao dispositivo, para se obter retorno mais rápido e de baixa precisão sobre a 
localização de um dispositivo, deve-se 
 
a) invocar um método para o objeto PositionOptions da API com o parâmetro “0”. 
b) configurar a função watchPosition() da API de geolocalização. 
c) testar a existência do objeto navigator.geolocation no dispositivo. 
d) chamar o método getCurrentPosition() da API de geolocalização. 
 
Comentários: 
 
Pessoal, uma das APIs que vimos em aula foi a API de geolocalização HTML. Nela vimos 
o método getCurrentPosition() que é usado para retornar a posição do usuário. Portanto 
nosso gabarito é a letra D, para se obter retorno mais rápido e de baixa precisão sobre a 
localização de um dispositivo, deve-se chamar o método getCurrentPosition() da API de 
geolocalização. 
Gabarito: Letra D 
 
5. (CESPE – PGDF – 2021) Acerca de linguagens de marcação utilizadas para formatação 
de dados, julgue o item a seguir.HTML e XML são equivalentes, pois ambas possuem uma semântica de apresentação 
predefinida. 
 
Comentários: 
 
HTML e XML são equivalentes aqui já encerramos o raciocínio! HTML é a linguagem de 
marcação padrão para páginas da Web. Já, XML significa eXtensible Markup Language e 
foi projetado para armazenar e transportar dados. 
Gabarito: Errado 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
91
504
 
 
 
 
 
 
6. (CESPE – SEFAZ CE – 2021) Com relação à arquitetura de desenvolvimento de 
software, julgue o item a seguir. 
 
Um link de navegação compartilhado por diversas páginas é incluído no elemento 
<main> de uma página HTML5. 
 
Comentários: 
 
Pessoal, errada questão. na verdade, o Elemento HTML de Navegação <nav> representa 
uma seção de uma página que aponta para outras páginas ou para outras áreas da página, 
ou seja, uma seção com links de navegação. Portanto, o correto seria: Um link de 
navegação compartilhado por diversas páginas é incluído no elemento <nav>. 
Gabarito: Errado 
 
7. (CESPE – PGDF – 2021) Julgue o item a seguir, referente a linguagens de scripts. 
 
Considere o código seguinte, em HTML e JavaScript. 
 
. 
Em um navegador Internet com JavaScript habilitado, esse código apresentará o 
resultado a seguir 
 
 
Comentários: 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
92
504
 
 
 
 
 
 
Pessoal, perfeita questão. O script realiza a concatenação dos valores id a e b e insere em 
c. 
 
 
 
Gabarito: Correto 
 
8. (CESPE – TJ PA – 2020) A respeito do tratamento off-line de um sítio no HTML 5, 
assinale a opção correta. 
 
a) Esse tratamento pode ser usado para a criação de dados em momento anterior ao 
acesso à aplicação. 
b) Na sessão cache do arquivo manifesto, devem estar relacionados todos os arquivos 
que o navegador deve copiar para que estejam disponíveis para uso off-line. 
c) É necessário que os arquivos PHP estejam listados na sessão cache. 
d) Na sessão network do arquivo manifesto, devem estar relacionados os arquivos que 
precisam ser substituídos por outros no retorno da conexão. 
e) Na sessão fallback do arquivo manifesto, devem estar relacionados os arquivos que 
não são utilizados para o processamento off-line. 
 
Comentários: 
 
Para tratar um site offline com HTML5, você pode usar o recurso de armazenamento de 
cache do HTML5, que permite que você armazene arquivos em cache no navegador do 
usuário. Isso significa que, quando o usuário visita o site pela primeira vez, os arquivos 
são armazenados em cache e, em visitas posteriores, o site é carregado a partir do cache, 
em vez de ser baixado da internet. Para habilitar o armazenamento de cache, você precisa 
criar um arquivo chamado "manifesto de cache" e vinculá-lo ao seu HTML usando a tag 
<html>. O manifesto de cache é um arquivo de texto simples que contém uma lista de 
arquivos que devem ser armazenados em cache. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
93
504
 
 
 
 
 
 
Gabarito: Letra B 
 
9. (CESPE – MPE CE – 2020) Acerca de JSON e HTML 5, julgue o item subsecutivo. 
 
No HTML 5, localStorage é um recurso de armazenamento local que usa objetos 
JavaScript e que permite manter dados sem data de expiração prévia. 
 
 
Comentários: 
 
HTML5 localStorage é um recurso de armazenamento na web que permite que um site 
armazene dados no navegador da web de um usuário. É semelhante a um cookie, mas é 
armazenado em uma área separada do computador do usuário e tem uma capacidade de 
armazenamento muito maior (até 5 MB). localStorage é útil para armazenar dados que 
precisam ser acessados no lado do cliente, como preferências do usuário ou dados de 
formulário. Os dados armazenados no localStorage são persistentes, ou seja, não são 
excluídos quando o usuário fecha o navegador ou desliga o computador. Para usar 
localStorage, você pode definir e recuperar valores usando JavaScript. 
 
Gabarito: Correto 
 
10. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir: 
 
No HTML 5, os novos campos para formulários, como email, search e range, e os 
atributos, como placeholder, pattern e required, reduzem a necessidade de utilização 
de plugins para auxiliar a formatação dos elementos. 
 
Comentários: 
 
Pessoal, o HTML5 modifica a forma de como escrevemos código e organizamos a 
informação na página. Seria mais semântica com menos código; mais interatividade sem 
a necessidade de instalação de plugins e perda de performance. É a criação de código 
interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação 
de diversas formas. Assim, de fato a questão está correta porque os novos campos para 
formulários, como email, search e range, assim como os atributos, como placeholder, 
pattern e required, reduzem a necessidade de utilização de plugins para auxiliar a 
formatação dos elementos. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
94
504
 
 
 
 
 
 
Gabarito: Correto 
 
11. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir: 
 
No HTML 5, as tags de link e script usadas para referenciar arquivos de CSS e 
JavaScript não precisam informar o atributo type, porque, na sua ausência, o 
navegador assume que o arquivo é do tipo text/css ou text/javascript. 
 
Comentários: 
 
De fato, no HTML 5, nas tags link e script, utilizadas para referenciar arquivos CSS e 
JavaScript, respectivamente, não é mais necessário informar o atributo type=”text/css” 
ou text=”text/javascript”, como era feito na HTML 4.1. Para exemplificar, no HTML 4.1 
era assim: 
<link rel="stylesheet" type="text/css" href="arquivo.css"> 
<script type="text/javascript" src="arquivo.js"></script> 
Já, no HTML 5 é assim: 
<link rel="stylesheet" href="arquivo.css"> 
<script src="arquivo.js"></script> 
 
Gabarito: Correto 
 
12. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir. 
 
A instrução DOCTYPE do HTML 5 é mais simples que a das versões anteriores HTML 
4 ou XHTML 1. 
 
Comentários: 
 
Pessoal, como vimos, é bem mais simples! Vamos relembrar como é a instrução DOCTYPE 
do HTML 5: 
<!DOCTYPE html> 
 
Gabarito: Correto 
 
13. (CESPE – TJ PA – 2020) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
95
504
 
 
 
 
 
 
 
O código html precedente, ao ser executado em um navegador de Internet, produzirá 
o seguinte resultado 
 
a) Caca52null 
b) nomeIdadecarro 
c) [object Object][object Object][object Object] 
d) Caca+52+null 
e) nome+Idade+carro. 
 
Comentários: 
 
Ao carregar a página, o script percorrerá o objeto meuObjeto e adicionará o nome de 
cada propriedade ao elemento HTML com o ID "prova". No final, o conteúdo do 
elemento de prova será "nomeIdadecarro". Se você quiser incluir o valor das 
propriedades também, deverá alterar a linha: 
document.getElementById("prova").innerHTML += x; para: 
document.getElementById("prova").innerHTML += x + ": " + meuObjeto[x] + "<br>"; 
Isso incluirá o nome da propriedade e o valor dela na saída. Por exemplo: nome: Caca. 
Idade: 52. carro: null. Vejamos o resultado da execução do código. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br96
504
 
 
 
 
 
 
 
Gabarito: Letra B 
 
14. (CESPE – TJ PA – 2020) Na linguagem HTML 5, geralmente considera-se 
determinado elemento como o ponto central do conteúdo do documento, o qual 
pode ser, por exemplo, um post. 
 
Esse elemento, que representa um conteúdo independente e altamente relevante, é 
o 
 
a) aside. 
b) canvas. 
c) embed. 
d) article. 
e) figure. 
 
Comentários: 
 
Alguns dos novos recursos do HTML5 incluem: Elementos semânticos: o HTML5 
apresenta novos elementos com significados específicos, como <header>, <footer> e 
<article>. Esses elementos tornam mais fácil para os desenvolvedores estruturar seu 
conteúdo de maneira lógica e significativa. aside: Trata-se de conteúdo relacionado à 
seção próxima. Análogo às barras laterais em conteúdo impresso. O elemento HTML 
<canvas>é usado para desenhar gráficos em uma página da web. A tag <embed> define 
um contêiner para um recurso externo, como uma página da Web, uma imagem, um 
reprodutor de mídia ou um aplicativo de plug-in. A tag <article> define um conteúdo 
independente de outras partes do sítio e altamente relevante. É autocontido. Exemplo: 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
97
504
 
 
 
 
 
comentário enviado por usuário, post de um blog, artigo de uma revista. A tag <figure> 
especifica o conteúdo independente, como ilustrações, diagramas, fotos, listagens de 
código, etc. Portanto, nosso gabarito é a tag < article > 
 
Gabarito: Letra D 
 
15. (CESPE –SLU DF – 2019) Com relação a desenvolvimento de software, julgue o item 
a seguir. 
 
De acordo com o trecho de código a seguir, escrito em HTML5, novos valores de date 
e time são válidos como atributos de elementos de formulário, e apenas o campo data 
é de preenchimento obrigatório. 
 
. 
 
Comentários: 
 
Pessoal, perfeita questão! O atributo data possui um "required" que o torna obrigatório. 
O código cria um formulário HTML simples com dois campos de entrada: um para data e 
outro para hora. O atributo type é usado para especificar o tipo de entrada de dados que 
o campo deve aceitar. No caso do campo de data, o tipo é date, o que significa que o 
usuário só poderá inserir uma data válida nesse campo. O campo de hora tem o tipo time, 
o que significa que o usuário só poderá inserir uma hora válida nesse campo. O atributo 
required é usado para indicar que o campo de data é obrigatório e o usuário deve inserir 
um valor antes de enviar o formulário. O atributo name é usado para dar um nome ao 
campo de entrada, que pode ser usado posteriormente para acessar o valor inserido pelo 
usuário. O botão de envio é criado usando o elemento <input type="submit">. Quando 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
98
504
 
 
 
 
 
o usuário clica no botão, o formulário é enviado para o arquivo teste.html, que é 
especificado no atributo action do elemento <form>. 
 
Gabarito: Correto 
 
16. (CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo 
uso difundido nas páginas publicadas na Internet. Assinale a opção que corresponde 
à tag utilizada no caso em que seja necessário utilizar uma lista não ordenada. 
 
a) <b> 
b) <p> 
c) <tr> 
d) <ul> 
e) <th> 
 
Comentários: 
 
Como já vimos, uma lista não ordenada começa com a tag <ul> e cada item da lista 
começa com a tag <li>. Os itens da lista serão marcados com marcadores (pequenos 
círculos pretos) por padrão. a) <b> é um elemento HTML obsoleto que define o texto em 
negrito. Recomenda-se usar a propriedade CSS "font-weight" para estilizar o texto como 
negrito. b) <p> é um elemento HTML que define um parágrafo de texto. c) <tr> é um 
elemento HTML que define uma linha em uma tabela HTML. d) <ul> é um elemento HTML 
que define uma lista não ordenada (uma lista com marcadores). e) <th> é um elemento 
HTML que define uma célula como um cabeçalho de tabela em uma tabela HTML. 
Normalmente é usado para exibir o cabeçalho de um grupo de células da tabela. 
 
Gabarito: Letra D 
 
17. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
 
O HTML 5 define como os navegadores web devem lidar com marcações antigas como 
<font>, <center> e outras tags de apresentação. 
 
Comentários: 
 
Pessoal, apesar dessas tags serem obsoletas, o HTML5 ainda reconhece o funcionamento 
dessas tags. E o HTML 5 define como os navegadores web devem lidar com elas. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
99
504
 
 
 
 
 
Gabarito: Correto 
 
18. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
 
O HTML 5 especifica novas API (application program interface) para o modelo de 
objeto de documento (DOM — document object model) referente a arrastar e soltar 
eventos enviados pelo servidor, como desenhos, vídeos e similares. 
 
Comentários: 
 
Pessoal, o Document Object Model (DOM) é uma interface de programação para 
documentos HTML e XML. Ele representa a estrutura de um documento como uma árvore 
de objetos, com cada objeto representando um elemento do documento. No HTML5, o 
DOM é usado para manipular o conteúdo e a estrutura de um documento HTML. Por 
exemplo, você pode usar o DOM para adicionar, excluir ou modificar elementos em um 
documento HTML ou para alterar os atributos de um elemento. Assim, é possível arrastar 
e soltar eventos enviados pelo servidor, como desenhos, vídeos e similares. 
 
Gabarito: Correto 
 
19. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
 
A XHTML 5 é uma serialização XML que tem as mesmas características e sintaxes do 
HTML 5. 
 
Comentários: 
 
Na verdade, XHTML (Extensible HyperText Markup Language) é uma linguagem de 
marcação que é uma variante do HTML (HyperText Markup Language). É uma versão mais 
rígida e limpa do HTML, com uma sintaxe mais rígida e com foco na conformidade com 
os padrões. XHTML foi projetado para ser uma ponte entre HTML e XML, e é 
frequentemente usado em combinação com outras tecnologias, como CSS (Cascading 
Style Sheets) e JavaScript, para criar páginas da Web dinâmicas e interativas. É suportado 
por todos os navegadores da web modernos e é comumente usado no desenvolvimento 
web. Existem várias diferenças entre HTML e XHTML como sintaxe, extensibilidade, 
compatibilidade, tipo de documento. Portanto, não tem as mesmas características e 
sintaxes do HTML 5. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
100
504
 
 
 
 
 
 
Gabarito: Errado 
 
20. (CESPE – MPE PI – 2018) Julgue o próximo item, relativo a lógica de programação 
e linguagens de programação. 
 
A execução do código JavaScript anteriormente apresentado retornará o seguinte 
resultado: 
 
 
Comentários: 
 
Pessoal, está perfeita a questão! Apresentará o título que consiste no codigo 
<h2>JavaScript </h2> além do valor que está em colors no seguinte tercho: var colors = 
["Blue", "Red", "White"]; 
document.getElementById("demo").innerHTML = colors; 
 
Gabarito: Correto 
 
21. (CESPE – TJ STJ – 2018) Julgue o item seguinte, a respeito de Maven, 
desenvolvimento web, servidor web, servidor de aplicação e criptografia. 
 
No HTML5, o atributo autofocos possibilita que qualquer elemento <input> seja 
automaticamente focado quando do carregamento da página. 
 
Comentários: 
 
Diego Carvalho, EquipeInformática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
101
504
 
 
 
 
 
O atributo autofocus é um atributo HTML5 que pode ser usado para especificar que um 
elemento de formulário deve ser focado automaticamente quando a página é carregada. 
Isso é útil para garantir que a atenção do usuário seja imediatamente atraída para um 
determinado campo de formulário, como uma caixa de pesquisa ou um formulário de 
login. O erro da questão está na grafia da palavra, o que é no mínimo uma maldade do 
examinador, 
Gabarito: Errado 
 
22. (CESPE – STM – 2018) Julgue o item subsequente, a respeito de programação web. 
 
Em HTML5, a tag <output> fornece uma indicação ao usuário do que pode ser inserido 
no campo. 
 
Comentários: 
 
O elemento <output> é um elemento HTML5 que representa o resultado de um cálculo 
ou ação do usuário. Ele pode ser usado para exibir o resultado de um cálculo de 
formulário ou para exibir conteúdo dinâmico atualizado com base na entrada do usuário. 
A questão refere-se a tag <input>. O elemento <input> é um elemento HTML usado para 
criar controles de formulário para entrada do usuário. Ele pode ser usado para criar uma 
variedade de controles de formulário, incluindo campos de texto, caixas de seleção, 
botões de opção e muito mais. 
 
Gabarito: Errado 
 
23. (CESPE – TRE BA – 2017) Entre os novos elementos do HTML5, o elemento: 
 
a) <mark> é o ponto de parada do cursor em qualquer parte da página HTML. 
b) <progress> define o progresso de uma tarefa. 
c) <meter> interpreta medições meteorológicas. 
d) <figcaption> captura figuras. 
e) <main> define a estrutura principal da linguagem C dentro da página HTML 
 
Comentários: 
 
a) <mark> Define o texto marcado/destacado; b) <progress> Representa o progresso de 
uma tarefa; c) <meter> Define uma medição escalar dentro de um intervalo conhecido 
(um medidor); d) <figcaption> Define uma legenda para um elemento <figure>; e) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
102
504
 
 
 
 
 
<main> Especifica o conteúdo principal de um documento. Portanto, nosso gabarito é a 
letra B. 
Gabarito: Letra B 
 
24. (CESPE – TCE-PA – 2016) Acerca dos conceitos e das técnicas necessários à 
construção de sítios web em que se utilizam CSS e HTML, julgue o item que se segue. 
 
HTML é uma linguagem de programação utilizada na construção de páginas na Web. 
 
Comentários: 
 
HTML significa Hyper Text Markup Language, é uma linguagem de marcação padrão para 
criar páginas da Web. Ele é usado para criar páginas da Web e dar estrutura e significado 
ao conteúdo da Web. O erro está em dizer: HTML é uma linguagem de programação, 
quando na verdade é uma linguagem de marcação. 
Gabarito: Errado 
 
25. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a 
desenvolvimento de sistemas web. 
 
Após a incorporação do jQuery ao HTML5, o desenvolvimento de funcionalidades por 
meio dessa biblioteca JavaScript ficou limitado a aplicações para dispositivos móveis. 
 
Comentários: 
 
jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos que facilita a 
manipulação do DOM (Document Object Model), manipula eventos e anima elementos 
em uma página da web. Foi criado em 2006 e ainda hoje é amplamente utilizado. As 
principais funcionalidades do jQuery são: Resolução da incompatibilidade entre os 
navegadores; Redução de código; Reutilização do código através de plugins; Utilização 
de uma vasta quantidade de plugins criados por outros desenvolvedores; Trabalha com 
AJAX e DOM; Implementação segura de recursos do CSS1, CSS2 e CSS3. O HTML5 é a 
versão mais recente do HTML e apresenta vários novos elementos e recursos que facilitam 
a criação de conteúdo da Web interativo e atraente. Embora o jQuery não esteja 
especificamente relacionado ao HTML5, ele pode ser usado em conjunto com o HTML5 
para criar aplicativos da Web interativos. Por exemplo, você pode usar jQuery para 
selecionar e manipular elementos HTML5, como os novos elementos semânticos 
introduzidos no HTML5 (por exemplo, <header>, <footer> e <article>). A questão limita 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
103
504
 
 
 
 
 
a funcionalidade do jQuery além de citar a incorporação do jQuery ao HTML5, o que está 
errado. 
 
Gabarito: Errado 
 
26. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a 
desenvolvimento de sistemas web. 
 
O elemento <canvas> do HTML5 especifica uma forma padrão para inserir um vídeo 
em uma página da Web. 
 
Comentários: 
 
Na verdade, o elemento HTML <canvas>é usado para desenhar gráficos em uma página 
da web. 
 
Gabarito: Errado 
 
27. (CESPE – FUNPRESP-EXE – 2016) Acerca da tecnologia Java, julgue o próximo 
item. 
 
Em HTML5, o atributo title da tag <img> pode ser usado para se adicionar um texto 
fixo a ser sempre apresentado imediatamente acima de uma imagem. 
 
Comentários: 
 
A tag <img> é vazia, ou seja, contém apenas atributos e não possui uma tag de 
fechamento. Além disso, ela possui dois atributos obrigatórios: src - Especifica o caminho 
para a imagem e alt - Especifica um texto alternativo para a imagem. Portanto, o tributo 
que pode ser usado para adicionar um texto fixo é o alt. 
Gabarito: Errado 
 
28. (CESPE – FUNPRESP-JUD – 2016) A respeito das tecnologias relacionadas ao 
desenvolvimento web em Java, julgue o item a seguir. 
 
No HTML 5, a tag <rp> é usada para informar o que deve ser exibido nos browsers 
que não suportam anotações ruby. 
 
Comentários: 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
104
504
 
 
 
 
 
 
Na referência do HTML 5 temos que <rp> define o que mostrar em navegadores que não 
suportam anotações ruby. 
 
Gabarito: Correto 
 
29. (CESPE – TRT 8 – 2016) Assinale a opção que apresenta a tag incluída na 
especificação do HTML5 que permite a reprodução de arquivos que contenham som 
ou música. 
 
a) <phonic> 
b) <img> 
c) <sound> 
d) <music> 
e) <audio>. 
 
Comentários: 
 
O elemento <audio> é um elemento HTML5 que permite incorporar arquivos de áudio 
em uma página da web. Ele fornece uma maneira padrão de reproduzir arquivos de áudio 
nativamente no navegador, sem a necessidade de plug-ins de terceiros, como o Flash. 
Gabarito: Letra E 
 
30. (CESPE – TRE PI – 2016) A respeito de páginas web desenvolvidas utilizando-se 
HTML 5, assinale a opção correta. 
 
a) Para a visualização de vídeos incluídos na página web, é necessária a presença de 
plug-ins adequados aos formatos de mídia utilizados. 
b) A indefinição dos parâmetros altura e largura dos vídeos pode gerar problemas de 
renderização. 
c) Para se adicionar vídeos, o uso do atributo preload exige a presença do atributo 
controls. 
d) O elemento <iframe> permite a inclusão de outra página web na página que esteja 
sendo construída. 
e) O elemento <header> é usado exclusivamente no início de uma página para 
determinar o seu cabeçalho. 
 
Comentários: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
105
504
 
 
 
 
 
Nosso gabarito é a letra D. O elemento <iframe> é um elemento HTML usado para 
incorporar um documento dentro de outro documento. Ele fornece uma maneira de exibir 
o conteúdo de outra página da Web na página da Web atual e é comumente usado para 
incorporar vídeos, mapas e outros conteúdos interativos. Ademais, vejamos os erros das 
demais alternativas. A alternativaA erra ao dizer que é necessária a presença de plug-ins 
adequados aos formatos de mídia utilizados. na verdade, é possível usar a tag <source>, 
por exemplo, que define vários recursos de mídia para elementos de mídia (<vídeo>). A 
letra B também está incorreta, porque a indefinição dos parâmetros altura e largura dos 
vídeos não causará problemas porque os atributos de altura e largura são opcionais e, se 
você não os especificar, o elemento <video> ajustará automaticamente seu tamanho para 
caber no tamanho do arquivo de vídeo. A letra C também está errada. ambos os atributos 
preload e controls são opcionais e você pode usá-los para personalizar o comportamento 
do elemento de mídia de acordo com suas necessidades, além disso, preload não exige 
a presença do atributo controls. Por fim, o elemento <header> normalmente é usado no 
topo da página da web, mas também pode ser usado para representar o cabeçalho de 
uma seção de uma página da web. Neste caso, deve ser usado dentro de um elemento 
<section>. Portanto a questão erra ao dizer que ele é usado exclusivamente no início de 
uma página. 
 
Gabarito: Letra D 
 
31. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
O elemento label funciona como um indicador de caminho a seguir. Muitos browsers 
renderizam o conteúdo daquela tag como uma área clicável a fim de levar o foco para 
o campo relacionado. 
 
Comentários: 
 
O elemento <label> é um elemento HTML usado para rotular um controle de formulário. 
Ele fornece uma maneira de associar um rótulo de texto a um controle de formulário, 
tornando mais fácil para os usuários entenderem a finalidade do controle. O elemento 
<label> tem vários benefícios como ajudar a melhorar a acessibilidade de seus 
formulários, pois o software leitor de tela pode usar o texto do rótulo para descrever a 
finalidade do controle de formulário para usuários com deficiências. Tornar mais fácil para 
os usuários entender a finalidade do controle de formulário, especialmente quando o 
controle de formulário tem uma finalidade não óbvia (por exemplo, uma caixa de seleção 
usada para aceitar um boletim informativo). Ajudar a melhorar a usabilidade de seus 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
106
504
 
 
 
 
 
formulários, pois os usuários podem clicar no texto do rótulo para focar o controle do 
formulário. O elemento <label> é um elemento importante para a criação de formulários 
amigáveis e acessíveis, e é amplamente utilizado no desenvolvimento web moderno. A 
utilização do <label> é mais comum quando trabalhamos com formulários. Para cada 
campo é inserido um label para associar visualmente com o campo a ser preenchido. Por 
isso, está correta a questão ao dizer que o elemento label funciona como um indicador 
de caminho a seguir. 
 
Gabarito: Correto 
 
32. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
É vedada a utilização de FIELDSET para agrupar qualquer variedade de elementos 
input de formulários. 
 
Comentários: 
 
O elemento <fieldset> é um elemento HTML usado para agrupar controles de formulário 
relacionados. Ele fornece uma maneira de organizar visual e semanticamente os controles 
de formulário, tornando mais fácil para os usuários entender e usar o formulário. Portanto, 
como a questão está dizendo o oposto, nosso gabarito é: Errado. 
 
Gabarito: Errado 
 
33. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
A tag <label> pode ser aplicada a todos os elementos de formulário, até mesmo a 
elementos button. 
 
Comentários: 
 
Pessoal, novamente cobrando a tag <label>. O erro da questão está em dizer que a 
tag pode ser aplicada a todos os elementos de formulário, até mesmo a elementos 
button. 
 
Gabarito: Errado 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
107
504
 
 
 
 
 
34. (CESPE –TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
É possível agrupar inputs de um formulário e, ainda, as opções de uma tag <select> 
usando-se a tag <fieldset>. 
 
Comentários: 
 
Pessoal, é super possível! Inclusive uma das formas é utilizando a tag <fieldset>. 
 
<form> 
 <fieldset> 
 <legend>Personal Information</legend> 
 <label for="name">Name:</label> 
 <input type="text" id="name" name="name"><br> 
 <label for="email">Email:</label> 
 <input type="email" id="email" name="email"><br> 
 </fieldset> 
 <fieldset> 
 <legend>Shipping Information</legend> 
 <label for="address">Address:</label> 
 <input type="text" id="address" name="address"><br> 
 <label for="city">City:</label> 
 <input type="text" id="city" name="city"><br> 
 </fieldset> 
</form> 
 
Gabarito: Correto 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
108
504
 
 
 
 
 
Questões FCC 
 
35. (FCC – PGE AM – 2022) No cabeçalho de uma página HTML deseja-se indicar ao 
navegador o conjunto de caracteres recomendado pela linguagem HTML5, que 
abrange a maioria dos caracteres e símbolos utilizados na maior parte dos idiomas, 
inclusive acentos existentes no Português. Para isso deve-se utilizar a instrução 
 
a) <meta charset="UTF-8"> 
b) <meta charset="ISO-8959-1"> 
c) <meta charset="Windows-8859"> 
d) <meta charset="ASC-II"> 
e) <meta charset="PT-BR"> 
 
Comentários: 
 
Pessoal, nosso gabarito é a letra A: <meta charset="UTF-8">. O elemento <meta> é um 
elemento HTML usado para fornecer metadados sobre uma página da web. O atributo 
charset é usado para especificar a codificação de caracteres da página da web e é usado 
para garantir que os caracteres na página da web sejam exibidos corretamente no 
navegador. O atributo charset é particularmente importante quando a página da Web 
contém caracteres de vários idiomas ou scripts, pois diferentes codificações de caracteres 
podem ser necessárias para exibir os caracteres corretamente. 
Gabarito: Letra A 
 
36. (FCC – TRT 23 – 2022) Para criar sites responsivos usando HTML5 é aconselhável 
fornecer ao navegador instruções sobre como controlar as dimensões e a escala da 
página por meio da definição da viewport da página, utilizando o comando 
 
a) <viewport initial-scale="1.0" max-width="100%" /> 
b) <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
c) <viewport content="width=device-width, initial-scale=1.0" /> 
d) <meta type="viewport" initial-scale="100%" max-width="100%" /> 
e) <meta type="viewport" screen="width=100%, initial-scale=1.0"> 
 
Comentários: 
 
Um site responsivo é um site projetado para ajustar automaticamente seu layout e 
conteúdo para se adequar ao tamanho do dispositivo e da tela do usuário. Sites 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
109
504
 
 
 
 
 
responsivos usam uma combinação de grades flexíveis, imagens e consultas de mídia para 
criar uma experiência de usuário perfeita e intuitiva em uma ampla variedade de 
dispositivos, desde computadores desktop até smartphones e tablets. 
 
Aqui estão alguns dos principais recursos dos sites responsivos: Layouts fluidos: sites 
responsivos usam grades flexíveis que se ajustam ao tamanho da tela, para que o 
conteúdo seja exibido em um layout de fácil leitura, independentemente do dispositivo 
usado. Imagens responsivas: sites responsivos usam imagens que ajustam 
automaticamente seu tamanho para caber na largurada tela, para que as imagens tenham 
uma boa aparência em todos os dispositivos. Consultas de mídia: sites responsivos usam 
consultas de mídia para detectar o tamanho da tela e aplicar estilos diferentes com base 
no tamanho da tela. Isso permite que o site ajuste seu layout e conteúdo com base no 
dispositivo que está sendo usado. Um exemplo de um site responsivo simples: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <style> 
 /* Use a fluid grid to make the website responsive */ 
 .container { 
 display: grid; 
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
 grid-gap: 20px; 
 } 
 
 /* Use media queries to adjust the layout based on the screen size */ 
 @media (max-width: 600px) { 
 .container { 
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
 } 
 } 
 </style> 
 </head> 
 <body> 
 <div class="container"> 
 <div>Content goes here</ 
 
Podemos observar que o exemplo apresenta a tag <meta name="viewport" 
content="width=device-width, initial-scale=1.0">. Assim, nosso gabarito é a letra B. 
 
Gabarito: Letra B 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
110
504
 
 
 
 
 
37. (FCC – TRT22 – 2022) Uma Analista deseja escrever no rodapé da página web 
HTML5 “Copyright ©”, sem aspas, indicando que a página possui direitos autorais. 
 
Uma das maneiras corretas de fazer isso é por meio da instrução 
 
a) <p>Copyright &copy;</p> 
b) <p>Copyright &szlig;</p> 
c) <p>Copyright &circledR;</p> 
d) <p>Copyright &copyright;</p>e) <p>Copyright &cpsymbol;</ 
e) <p>Copyright &cpsymbol;</p> 
 
Comentários: 
 
O sinal © é criado pela instrução &copy que significa sinal de direitos autorais. 
 
Gabarito: Letra A 
 
38. (FCC – TJ SC – 2021) Em uma situação hipotética, um profissional de TI deseja 
inserir um vídeo institucional do Tribunal de Justiça de Santa Catarina que está no 
Youtube, no site do Tribunal. 
 
Para isso, obteve o código personalizado abaixo no site do Youtube. 
 
 
 
Tal fragmento de código permite concluir que o comando HTML5 que deve ser 
utilizado na lacuna I é 
 
a) video 
b) movie 
c) media 
d) frame 
e) iframe 
 
Comentários: 
 
The <iframe> element is an HTML element that is used to embed a document within 
another document. It provides a way to display content from another webpage within the 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
111
504
 
 
 
 
 
current webpage, and is commonly used to embed videos, maps, and other interactive 
content. 
Gabarito: Letra E 
 
39. (FCC – TJ MA – 2019) Um Analista que está desenvolvendo a página de abertura 
de um site deseja fazer com que as páginas HTML referentes aos links do menu sejam 
direcionadas e exibidas em um contêiner criado pela tag section no interior desta 
página. Nesse contêiner, para permitir a abertura das páginas, deve-se utilizar uma 
tag: 
 
a) aside 
b) main 
c) dialog 
d) iframe 
e) article 
 
Comentários: 
 
Vejamos a definição de cada tag. a) aside: O elemento <aside> é um elemento HTML 
utilizado para representar o conteúdo relacionado ao conteúdo principal da página da 
Web, mas que não é essencial para o entendimento do conteúdo principal. Geralmente 
é usado para representar barras laterais, citações e outros conteúdos relacionados 
tangencialmente. b) main: O elemento <main> é um elemento HTML usado para 
representar o conteúdo principal de uma página da web. Ele deve ser usado para agrupar 
o conteúdo exclusivo da página da Web e que não é compartilhado com outras páginas 
no mesmo site. c) dialog: O elemento <dialog> é um elemento HTML usado para 
representar uma caixa de diálogo ou janela. Ele pode ser usado para criar caixas de 
diálogo modais que exigem que o usuário interaja com elas antes de retornar à página 
da Web principal. d) iframe: O elemento <iframe> é um elemento HTML usado para 
incorporar um documento dentro de outro documento. Ele fornece uma maneira de exibir 
o conteúdo de outra página da Web na página da Web atual e é comumente usado para 
incorporar vídeos, mapas e outros conteúdos interativos. e) article: A tag <article> define 
um conteúdo independente de outras partes do sítio e altamente relevante. É 
autocontido. Exemplo: comentário enviado por usuário, post de um blog, artigo de uma 
revista. Pessoal, a unica tag que permite a abertura de outra página (documento) é a tag 
<iframe>. Dessa forma, nosso gabarito é a letra D. 
 
Gabarito: Letra D 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
112
504
 
 
 
 
 
40. (FCC – AFAP – 2019) Em uma página HTML 5 de abertura de um site, um Analista 
de Informática deseja definir uma área no centro onde outras páginas HTML poderão 
ser carregadas a partir de cliques nos links do menu principal. Ao abrir a página de 
abertura, um arquivo HTML já poderá ser exibido nessa área, cujo conteúdo poderá 
mudar na medida que se clica nos links do menu. Para que seja possível o 
comportamento descrito, essa área deverá ser definida por meio da tag 
 
a) div. 
b) section. 
c) iframe. 
d) main. 
e) core. 
 
Comentários: 
 
Um iframe (abreviação de "frame inline") é um elemento HTML usado para incorporar 
uma página da Web em outra página da Web. Ele fornece uma maneira de exibir o 
conteúdo de outra página da Web na página da Web atual e é comumente usado para 
incorporar vídeos, mapas e outros conteúdos interativos. Portanto é o nosso gabarito. 
 
Gabarito: Letra C 
 
41. (FCC – Pref Manaus – 2019) Em um parágrafo de uma página web desenvolvida 
com HTML5, um programador está usando palavras longas e está com medo do 
navegador quebrar as palavras ou linhas em locais incorretos. Para indicar os locais 
desejados para possíveis quebras de linha, quando a largura da janela do navegador 
mudar, o programador deverá usar a tag 
 
a) </br>. 
b) <break>. 
c) <\n>. 
d) <wbr>. 
e) <br/>. 
 
Comentários: 
 
Para indicar os locais desejados para possíveis quebras de linha, quando a largura da 
janela do navegador mudar, o programador deverá usar a tag <wbr>. De acordo com a 
definição, <wbr> define uma possível quebra de linha. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
113
504
 
 
 
 
 
Gabarito: Letra D 
 
42. (FCC – TRF 4 – 2019) HTML5 incluiu um conjunto de tags semânticas para substituir 
algumas construções que eram feitas com HTML4. Por exemplo, as instruções <div 
id="header"> </div> e <div id="menu"></div> feitas em HTML4, são feitas na 
HTML5, usando as tags semânticas, através das instruções: 
 
a) <area id="header"></area> e <área id="menu"></area> 
b) <header></header> e <nav></nav> 
c) <head></head> e <menu></menu> 
d) <header></header> e <navigation></navigation> 
e) <header></header> e <menuarea></menuarea> 
 
Comentários: 
 
Alguns dos novos recursos do HTML5 incluem elementos semânticos: o HTML5 apresenta 
novos elementos com significados específicos, como <header>: representa o cabeçalho 
de uma página da web ou seção de uma página da web. <nav>: representa uma seção 
da página da Web que contém links de navegação. Esses elementos tornam mais fácil 
para os desenvolvedores estruturar seu conteúdo de maneira lógica e significativa. 
 
Gabarito: Letra B 
 
43. (FCC – TJ MA – 2019) Um Técnico Judiciário que utiliza HTML5 está criando um 
parágrafo em uma página web que tem muitas palavras longas e, para evitar que o 
navegador quebrelinha no lugar errado, utilizou uma tag para especificar onde, em 
um parágrafo, será aceitável uma quebra de linha. A tag correta para isso é: 
 
a) <break> 
b) <wbr> 
c) <bl> 
d) <rt> 
e) <br> 
 
Comentários: 
 
Pessoal, é exatamente o mesmo caso da questão da Pref Manaus de 2019! Deve ser 
utilizada a tag <wbr> que define uma possível quebra de linha. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
114
504
 
 
 
 
 
Gabarito: Letra B 
 
44. (FCC – TRF 3 – 2019) Considere o fragmento abaixo de uma página HTML5 que 
utiliza elementos semânticos. 
 
 
Para inserir a legenda "Figura 1 – Foto das dependências do TRF3" na imagem, após 
<img src="trf.jpg" alt="TRF3"> deve-se colocar a instrução 
 
a) <label>Figura 1 – Foto das dependências do TRF3</label> 
b) <title>Figura 1 – Foto das dependências do TRF3</title> 
c) <legend>Figura 1 – Foto das dependências do TRF3</legend> 
d) <figlabel>Figura 1 – Foto das dependências do TRF3</figlabel> 
e) <figcaption>Figura 1 – Foto das dependências do TRF3.</figcaption> 
 
Comentários: 
 
Pessoal, o elemento <figcaption> define uma legenda para um elemento <figure>. 
 
Gabarito: Letra E 
 
45. (FCC –Pref Manaus – 2019) Um programador precisa utilizar uma tag semântica 
incorporada a versão 5 da linguagem HTML, cujo objetivo é definir algum conteúdo 
adicional colocado normalmente à direita, mas relacionado com um conteúdo que o 
circunda colocado normalmente à esquerda. Deverá escolher, nesse caso, a tag: 
 
a) <article> 
b) <section> 
c) <aside> 
d) <figcaption> 
e) <summary> 
 
Comentários: 
 
O examinador vai dando dicas: definir algum conteúdo adicional; colocado normalmente 
à direita; mas relacionado com um conteúdo que o circunda colocado normalmente à 
esquerda. Quando o examinador diz: " mas relacionado com um conteúdo que o 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
115
504
 
 
 
 
 
circunda" já se infere a tag <aside> que é o nosso gabarito. Para complementar, vejamos 
as demais alternativas. A tag <article> define um conteúdo independente de outras 
partes do sítio e altamente relevante. É autocontido. Exemplo: comentário enviado por 
usuário, post de um blog, artigo de uma revista. O elemento <section> é um elemento 
HTML usado para representar uma seção da página da Web, como um capítulo ou um 
tema. É um elemento semântico, o que significa que é usado para adicionar significado à 
página da Web, em vez de controlar o layout ou a aparência da página. <figcaption> 
define uma legenda para um elemento <figure>. Por fim, o elemento <summary> é um 
elemento HTML usado para representar um resumo ou legenda para um elemento 
<details>. Normalmente é usado para fornecer uma breve visão geral ou resumo do 
conteúdo dentro do elemento <details>, que pode ser expandido ou reduzido pelo 
usuário. 
 
Gabarito: Letra C 
 
46. (FCC – TRF 3 – 2019) Um programador está criando o menu principal da página de 
abertura de um site, que conterá o bloco principal de links de navegação. 
Considerando os elementos semânticos da linguagem HTML5, estes links devem ficar 
imediatamente no interior da tag 
 
a) <mark> 
b) <progress> 
c) <choose> 
d) <nav> 
e) <navigation> 
 
Comentários: 
 
Se deseja criar o menu principal, vai utilizar a tag nav. Vejamos a definição: o elemento 
<nav> representa uma seção de uma página que contém links de navegação. É usado 
para agrupar links que levam a outras páginas ou a diferentes partes da mesma página. 
 
Gabarito: Letra D 
 
47. (FCC – SANASA – 2019) Um Desenvolvedor de software precisa inserir uma 
instrução no cabeçalho de uma página HTML que fará referência a um arquivo 
chamado a001.css a ser aplicado apenas quando a página for aberta em dispositivos 
com tela de até 600 pixels. A instrução correta que deverá ser inserida é 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
116
504
 
 
 
 
 
a) <@import URL(a001.css) only screen and (max-width: 600px)> 
b) <link rel="media" device="only screen with (max-width: 600px)" href="a001.css"> 
c) <link rel="stylesheet" media="screen and (max-width: 600px)" href="a001.css"> 
d) <inport file="a001.css" media="screen and (max-width: 600px)"> 
e) <style>@media only screen and (min-width: 600px) URL(a001.css) <style>. 
 
Comentários: 
 
O elemento <link> com o atributo "rel" definido como "stylesheet" informa ao 
navegador que o documento vinculado é uma folha de estilo e fornece os meios para 
aplicar os estilos definidos na folha de estilo a uma página da web. O atributo "media" 
especifica o tipo de mídia para o qual a folha de estilo se destina, como uma tela ou 
impressão. Neste caso, o atributo "media" é definido como "screen and (max-width: 
600px)", o que significa que os estilos na folha de estilo serão aplicados apenas a telas 
com largura máxima de 600 pixels. O atributo "href" especifica a URL da folha de estilo. 
Nesse caso, o valor do atributo "href" é "a001.css", o que indica que a folha de estilo 
está localizada na URL "a001.css". Este elemento <link> seria colocado no cabeçalho de 
um documento HTML para aplicar os estilos da folha de estilo "a001.css" à página da 
Web em telas com largura máxima de 600 pixels. 
Gabarito: Letra C 
 
48. (FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com 
HTML5 e deseja exibir um texto com fonte Courier de largura fixa, preservando os 
espaços e as quebras de linha. 
 
O texto deverá ser colocado entre as tags 
 
a) <mark> e </mark> 
b) <dl> e </dl> 
c) <embed> e </embed> 
d) <code> e </code> 
e) <pre> e </pre>. 
 
Comentários: 
 
Vamos relembrar o que foi falado durante a aula? O elemento HTML <pre>define o texto 
pré-formatado. O texto dentro de um elemento <pre> é exibido em uma fonte de largura 
fixa (geralmente Courier) e preserva espaços e quebras de linha. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
117
504
 
 
 
 
 
Gabarito: Letra E 
 
49. (FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de 
termos em um site utilizando listas de definições do HTML5. Nestas listas, o termo a 
ser descrito e a descrição propriamente dita são criados, respectivamente, pelas tags 
 
a) <dt> e <dd> 
b) <dd> e <tt> 
c) <ul> e <li> 
d) <tt> e <dd> 
e) <dd> e <dt> 
 
Comentários: 
 
O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de 
termos, com uma descrição de cada termo. A tag <dl> define a lista de descrição, a tag 
<dt> define o termo (nome) e a tag <dd> descreve cada termo. <dt> define um termo 
em uma lista de descrição. <dd> descreve o termo em uma lista de descrição. 
 
Gabarito: Letra A 
 
50. (FCC – TST – 2017) Considere, hipoteticamente, que um Programador deseja 
publicar um vídeo institucional no site do Tribunal Superior do Trabalho. Para isso, no 
local da página HTML5 onde deseja colocar o vídeo, utilizou o bloco de código abaixo. 
 
Considere que [nome_arquivo.extensão] representa o nome de um arquivo de vídeo 
válido. Nas últimas versões dos principais navegadores, os tipos de arquivos de vídeo 
válidos para preencher a lacuna I são 
 
a) avi, mpeg e mov 
b) mkv, ogg e flv 
c) mp4, webm e ogg 
d) wmv, rmvb e mp4 
e) mp4, avi e mov. 
 
Comentários: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
118
504
 
 
 
 
 
O elemento <video> suporta vários formatos de arquivo de vídeodiferentes, incluindo: 
MP4, WebM e Ogg. 
 
Gabarito: Letra C 
 
51. (FCC – TRF 5 – 2017) Uma das recomendações que consta nas Web Content 
Accessibility Guidelines − WCAG é fornecer legendas e outras alternativas para 
conteúdo multimídia. 
 
Nesse contexto, considere o código abaixo, que disponibiliza um vídeo de orientação 
ao cidadão em um site do Governo. 
 
 
Para fornecer um arquivo de legenda em português chamado legenda_br.vtt para o vídeo 
utiliza-se, na lacuna I, o comando 
 
a) <embed src="legenda_br.vtt" kind="track" srclang="pt" label="Português"> 
b) <subtitle src="legenda_br.vtt" kind="text/media" srclang="pt" label="Português"> 
c) <caption src="legenda_br.vtt" kind="media-query" srclang="pt-br" 
caption="Português"> 
d) <caption href="legenda_br.vtt" kind="subtitles" srclang="pt" label="Português"> 
e) <track src="legenda_br.vtt" kind="subtitles" srclang="pt" label="Português"> 
 
Comentários: 
 
Em HTML5, o elemento <track> pode ser usado para especificar uma legenda ou arquivo 
de legenda para um elemento <video>. O elemento <track> permite que você 
especifique uma trilha de texto que pode ser exibida sobre o vídeo durante a reprodução. 
Portanto, o nosso gabarito é a letra E. 
 
Gabarito: Letra E 
 
52. (FCC –TRT 24 – 2017) Preocupado com a acessibilidade de um site que está sendo 
desenvolvido para o Tribunal Regional do Trabalho da 24ª Região, um Técnico 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
119
504
 
 
 
 
 
recomendou o uso de recursos da linguagem HTML, versão 5, para identificar o idioma 
principal da página. Para isso deve-se utilizar: 
 
a) o atributo lang na tag <html>. 
b) o atributo lang na tag <body>. 
c) o atributo language na tag <!DOCTYPE>. 
d) a propriedade language na tag <meta>. 
e) a tag <lang> no interior da tag <head> 
 
Comentários: 
 
O atributo lang é um atributo HTML que pode ser usado para especificar o idioma de um 
elemento e seu conteúdo. É um importante recurso de acessibilidade, pois permite que 
tecnologias assistivas, como leitores de tela, interpretem e pronunciem corretamente o 
conteúdo de uma página da web. É usado na tag html: <html lang="en">, portanto, 
nosso gabarito é a letra a. 
 
Gabarito: Letra A 
 
53. (FCC – ALMS – 2016) A viewport é a área visível do usuário de uma página web e 
pode variar de acordo com o dispositivo. HTML5 introduziu um método para deixar 
os web designers terem controle sobre a viewport através da tag 
 
a) <viewport> 
b) <meta> 
c) <grid> 
d) <page> 
e) <scale> 
 
Comentários: 
 
O elemento meta com um atributo viewport é um recurso HTML5 que pode ser usado 
para controlar o layout de uma página da Web em diferentes dispositivos. O atributo 
viewport permite especificar o tamanho e a escala da viewport, ou a área visível de uma 
página da web, em um navegador da web. O elemento meta com um atributo viewport 
é frequentemente usado para tornar as páginas da Web responsivas, o que significa que 
elas podem ajustar seu layout e aparência para caber no tamanho e na resolução do 
dispositivo que está sendo usado para visualizá-las. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
120
504
 
 
 
 
 
Gabarito: Letra B 
 
54. (FCC – ELETROSUL – 2016) A uma página HTML5 deseja-se vincular um arquivo 
chamado arq1.css e um arquivo chamado arq2.js. 
 
Para isso devem-se utilizar as instruções 
 
a) <link rel="stylesheet" type="file/css" src="arq1.css"> e <script src="arq2.js"> 
</script> no corpo da página. 
b) <import type="text/css" href="arq1.css"> e <script file="arq2.js"> </script> no 
cabeçalho da página. 
c) <link type="css" style="external" href="arq1.css"> e <script src="arq2.js"> 
</script> no cabeçalho da página. 
d) <include type="text/css" href="arq1.css"> e <script src="arq2.js"> </script> no 
corpo da página. 
e) <link rel="stylesheet" type="text/css" href="arq1.css"> e <script src="arq2.js"> 
</script> no cabeçalho da página. 
 
Comentários: 
 
O elemento <link> com o atributo "rel" definido como "stylesheet" informa ao 
navegador que o documento vinculado é uma folha de estilo e fornece os meios para 
aplicar os estilos definidos na folha de estilo a uma página da web. O atributo "type" 
especifica o tipo do documento vinculado, que neste caso é "text/css" para uma folha de 
estilo CSS. O atributo "href" especifica a URL da folha de estilo. Neste caso, o valor do 
atributo "href" é "arq1.css", o que indica que a folha de estilo está localizada na URL 
"arq1.css". O elemento <script> com o atributo "src" especifica a URL de um script a ser 
executado. Neste caso, o valor do atributo "src" é "arq2.js", o que indica que o script 
está localizado na URL "arq2.js". Esses elementos seriam colocados no cabeçalho do 
documento HTML para aplicar os estilos na folha de estilo "arq1.css" e executar o script 
em "arq2.js" na página da web. 
Gabarito: Letra E 
 
55. (FCC – ALMS – 2016) Considere o fragmento de código HTML5 a seguir. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
121
504
==1feb8f==
 
 
 
 
 
Para disponibilizar na página o áudio chamado beethoven.mp3 a lacuna I deve ser 
corretamente preenchida por 
 
a) <sound src="beethoven.mp3" type="mpeg/ogg/wav" play="on"> 
b) <source target="beethoven.mp3" media_type="sound/mpeg"> 
c) <source src="beethoven.mp3" type="audio/mpeg"> 
d) <sound source="beethoven.mp3" media="audio/mp3"> 
e) <source src="beethoven.mp3" media="sound/mpeg" play="on"> 
 
Comentários: 
 
No HTML5, o elemento <source> é usado para especificar várias fontes de mídia para os 
elementos <video> e <audio>. O atributo src do elemento <source> especifica a URL do 
arquivo de mídia a ser usado. A sintaxe é: <source src="my-video.mp4" 
type="video/mp4"> no caso da questão ficaria <source src="beethoven.mp3" 
type="audio/mpeg"> 
 
Gabarito: Letra C 
 
56. (FCC – SEMF Teresina – 2016) Em uma página HTML há um parágrafo vazio criado 
pela tag <p id="local"></p>. Em um bloco JavaScript da mesma página, para inserir 
neste parágrafo a palavra Teresina, utiliza-se o comando 
 
a) document.getElementById("local").innerHTML = "Teresina"; 
b) document.getElement("p#demo").innerHTML = "Teresina"; 
c) document.p["#local"].value = "Teresina"; 
d) document.demo.value = "Teresina"; 
e) document.getElementByName("local").innerHTML = "Teresina"; 
 
Comentários: 
 
Em HTML, a função getElementById é um método usado para recuperar um elemento do 
documento por seu identificador exclusivo (ID). A função getElementById retorna uma 
referência ao elemento com o ID especificado ou null se tal elemento não existir. Para 
inserir o elemento id="local", deve usar o método document.getElementById e usar o id 
"local" e inserir com innerHTML = "Teresina". 
Gabarito: Letra A 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
122
504
 
 
 
 
 
57. (FCC – TRT 23 – 2016) De acordo com as recomendações da W3C para a linguagem 
HTML5, a instrução 
a) <meta charset="utf-8" /> está incorreta, pois tem uma barra no final. 
b) <!doctype html> está incorreta, pois deveria estar em letra maiúscula. 
c) <table class=table striped> está correta. 
d) <html lang="en-US"> está correta. 
e) <script src="myscript.js"> está incorreta, pois faltou o atributo 
language=“javascript” 
 
Comentários: 
 
Pessoal, vejamos cada item. a) <meta charset="utf-8" /> está incorreta, de fato, o correto 
seria: <meta charset="UTF-8">. b) <!doctype html> está incorreta , de fato, o correto 
seria: <!DOCTYPE html>. Aletra c) também está incorreta. O elemento <table> em HTML 
é usado para criar uma tabela. O atributo class é usado para especificar um ou mais nomes 
de classe para um elemento, que pode ser usado para aplicar estilos ao elemento usando 
CSS. E possui a sintaxe <table class="table striped"> portanto, faltou inserir as aspas 
duplas. Nosso gabarito é a letra d. <html lang="en-US"> está correta. Por fim, a letra e 
está errada. O correto seria <script src="myscripts.js"></script> 
 
Gabarito: Letra D 
 
58. (FCC –TRF3 – 2016) Em um site que utiliza HTML5 Application Cache há um arquivo 
chamado dados.appcache que define que uma página poderá ter o conteúdo 
acessado mesmo estando offline. Nessa página, para apontar para esse arquivo deve-
se utilizar a instrução 
 
a) <html manifest="dados.appcache"> 
b) <cache manifest="dados.appcache"> 
c) <html src="dados.inf" cached> 
d) <cache src="dados.inf"> 
e) <!MANIFEST cache="demo.appcache"> 
 
Comentários: 
 
No HTML5, o atributo manifest é usado para especificar a localização de um arquivo de 
manifesto do cache do aplicativo. Um manifesto de cache de aplicativo é um arquivo que 
define os recursos que devem ser armazenados em cache pelo navegador da Web para 
que possam ser usados offline. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
123
504
 
 
 
 
 
A sintaxe usada é a seguinte: <html manifest="dados.appcache">, portanto o gabarito 
é a letra A. 
 
Gabarito: Letra A 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
124
504
 
 
 
 
 
Questões FGV 
 
59. (FGV –TJ TO– 2022) No HTML5, o evento que é disparado quando um objeto é 
carregado é: 
 
a) begin; 
b) load; 
c) ready; 
d) run; 
e) start. 
 
Comentários: 
 
No HTML5, o evento load é disparado quando um recurso e seus recursos dependentes 
terminam de carregar. O evento load pode ser usado com elementos como <img>, 
<audio> e <video> para detectar quando os recursos aos quais eles se referem 
terminaram de ser carregados. Portanto nosso gabarito é a letra b. Ademais, vejamos a 
definição das demais alternativas. O atributo begin é usado para especificar um 
deslocamento de tempo para o elemento <track>. O evento ready é acionado quando o 
documento está totalmente carregado e pronto para manipulação. O atributo run é usado 
para especificar se um script deve ou não ser executado assim que estiver disponível, em 
vez de esperar que todo o documento seja carregado. O atributo start é usado para 
especificar o ponto inicial padrão para uma trilha de texto, como subtítulos ou legendas. 
 
Gabarito: Letra B 
 
60. (FGV –MPE SC– 2022) Sobre elementos block-level (nível de bloco) e elementos 
inline (em linha) no HTML, analise as afirmativas a seguir. 
 
I. Um elemento block-level sempre começa numa nova linha. 
II. <p> é um elemento inline. 
III. <div> é um elemento block-level. 
 
Está correto somente o que se afirma em: 
a) I; 
b) II; 
c) I e II; 
d) I e III; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
125
504
 
 
 
 
 
e) II e III.. 
 
Comentários: 
 
Pessoal, elementos de nível de bloco são elementos usados para criar blocos de conteúdo 
formatados independentemente de outros blocos. Os elementos de nível de bloco 
geralmente começam em uma nova linha e ocupam toda a largura de seu elemento pai. 
Portanto, a assertiva está errada.A segunda assertiva está errada, lembre-se que dois 
elementos de bloco comumente usados são: <p> e <div>. Por fim, a assertiva III está 
correta: <div> é um elemento block-level. Assim, ficamos com as assertivas I e III. 
 
Gabarito: Letra D 
 
61. (FGV –MPE GO – 2022) Num documento HTML5, assinale o elemento que contém 
meta informações sobre a página. 
 
a) <!DOCTYPE html> 
b) <body> ( 
c) <head> 
d) <html> 
e) <script>. 
 
Comentários: 
 
Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem 
o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave 
que facilitarão a vida do usuário na hora de te encontrar, por exemplo. Por meio delas, 
você pode também "assinar" seu site, declarando sua autoria sobre o código fonte. As 
meta tags devem ser incluídas no seu código HTML, dentro da tag <head>, portanto, 
nosso gabarito é a letra C. 
 
Gabarito: Letra C 
 
62. (FGV –TJ TO– 2022) Observe o código HTML e JavaScript a seguir: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
126
504
 
 
 
 
 
 
Após a execução do código, o resultado exibido será: 
 
a) Maria 
b) João 
c) 2022.1 
d) Tejota 
e) tjProcesso 
 
Comentários: 
 
Pessoal, vejamos o que ocorre nesse caso. O método getElementByID acessa o elemento 
0 da seguinte forma: tjProcesso.envolvidos[0] = João e o insere na página. Portanto, nosso 
gabarito é a letra B. 
 
Gabarito: Letra B 
 
63. (FGV –Sefaz AM – 2022) A linguagem de marcação HTML é amplamente utilizada 
na construção de páginas da Internet. 
 
O elemento HTML, que permite reproduzir um arquivo de vídeo no formato MP4 em 
uma página da web, é 
 
a) <clip> 
b) <embedded> 
c) <media> 
d) <movie> 
e) <video>. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
127
504
 
 
 
 
 
Comentários: 
 
No HTML5, usamos o elemento <video> para incorporar conteúdo de vídeo em uma 
página da web. Os elementos <clip>, <embedded>, <media> e <movie> não são 
elementos HTML. Não fazem parte da especificação HTML e não são reconhecidos pelos 
navegadores da web. 
 
Gabarito: Letra E 
 
64. (FGV –IMBEL – 2021) Analise a imagem a seguir, produzida numa página Web. 
 
que substitui corretamente a linha com pontos. 
 
a) <tr><th>A</th><th>C</th></tr> 
<tr><td>F</td><td><table> 
<tr><td>G</td><td>G</td></tr> 
</table></th></tr> 
b) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td><table> 
<tr><th>F</th><th>G</th></tr> 
</table></th></tr> 
c) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td> 
<tr><td>F</td><td>G</td></tr> 
</th></tr> 
d) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td></table><tr><td>F</td><td>G</td></tr> 
<table></th></tr> 
e) <tr><td>A</td><td>C</td></tr> 
<tr><td>B</td><td><table> 
<tr><td>F</td><td>G</td></tr> 
</table></th></tr>. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
128
504
 
 
 
 
 
Gabarito: 
 
Comentários: 
 
A alternativa B cria uma tabela HTML com três linhas e duas colunas. A primeira linha 
contém dois cabeçalhos de tabela (TH) com o texto "A" e "C". A segunda linha contém 
duas células (TD) com o texto "B" e uma tabela interna com uma linha e dois cabeçalhos 
de tabela "F" e "G", sendo este nosso gabarito. Por outro lado, a letra A tem três linhas 
e duas colunas. A primeira linha contém dois cabeçalhos de tabela "A" e "C". A segunda 
linha contém duas células. A primeira célula contém o texto "F" e a segunda célula 
contém uma tabela interna com uma linha e duas células "G" e "G". A letra C apresenta 
erros: este código HTML é inválido. A tabela interna não está fechada corretamente, pois 
não há tag </table> de fechamento. Além disso, a segunda linha da tabela interna não 
está aninhada corretamente na segunda célula da tabela externa. Assim como a letra D e 
a letra E, que possuem códigos inválidos. 
 
Gabarito: Letra B 
 
65. (FGV – TJ RO–2021) No contexto do HTML, a sintaxe correta para um comentário, 
delimitando um trecho que NÃO deve ser exibido pelo browser, é: 
a) <-- Texto do comentário --> 
b) !--Texto do comentário > 
c) <-Texto do comentário -> 
d) <!--Texto do comentário --> 
e) <--Texto do comentário --/>. 
 
Comentários: 
 
Em HTML, a sintaxe <!-- --> é usada para criar um comentário. Os Comentários: são 
usados para adicionar notas e explicações ao código HTML e não são exibidos na página 
da web. O nosso gabarito é a letra D: <!--Texto do comentário --> 
 
Gabarito: Letra D 
 
66. (FGV – IMBEL– 2021) Analise o trecho HTML a seguir. 
 
<table> 
<tr><th>A</th><th>C</th></tr> 
<tr><th>B</th><th>D</th></tr> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
129
504
 
 
 
 
 
</table> 
 
Na exibição da página Web, esse script produz uma tabela 
 
a) com duas linhas e duas colunas. 
b) com quatro linhas e uma coluna. 
c) com quatro colunas e uma linha. 
d) com uma linha e uma coluna. 
e) com linhas e colunas desalinhadas. 
 
Comentários: 
 
Pessoal, o tercho HTML gera uma linha com as colunas A e C e outra coluna B e D. Vamos 
lembrar das tags tr e th? Cada célula da tabela é definida por uma tag <td> e </td>. Por 
outro lado, cada linha da tabela começa com uma tag <tr> e termina com uma </tr>. 
Além disso, o elemento <th> é usado para criar uma célula de cabeçalho de tabela. O 
elemento <th> é usado dentro de um elemento <tr> (linha da tabela) para definir uma 
célula que contém informações de cabeçalho para uma tabela. 
 
Gabarito: Letra A 
 
 
67. (FGV –MPE AL – 2018) O HTML 5 introduziu diversos elementos semânticos, 
gráficos e de multimídia. 
 
Assinale o elemento que não é uma novidade nessa versão. 
 
a) <article> 
b) <div> 
c) <footer> 
d) <header> 
e) <section>. 
 
Comentários: 
 
O HTML5 apresenta novos elementos com significados específicos, como <header>, 
<footer> e <article>. Além desses, temos o <section> que representa uma seção da 
página da web, como um capítulo ou um tema. Dentre os novos elementos semânticos 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
130
504
 
 
 
 
 
<header>, <footer> <article> e <section>, a única opção que não é uma novidade no 
HTML 5 é o <div>. 
Gabarito: Letra B 
 
68. (FGV –ALERO – 2018) No contexto dos elementos introduzidos pelo HTML 5, 
analise as afirmativas a seguir. 
 
I. Os elementos “header”, “section” e “footer” são elementos block-level. 
II. O elemento “<wbr>” é funcionalmente idêntico ao já conhecido elemento “<br>”. 
III. Além dos atributos height e width, o elemento “<canvas>” permite o uso do 
atributo depth, para uso em gráficos tridimensionais. 
 
Está correto o que se afirma em 
 
a) I, somente. 
b) II, somente. 
c) III, somente. 
d) I e II, somente. 
e) II e III, somente.. 
 
Comentários: 
 
Pessoal, elementos de nível de bloco são elementos usados para criar blocos de conteúdo 
formatados independentemente de outros blocos. Os elementos de nível de bloco 
geralmente começam em uma nova linha e ocupam toda a largura de seu elemento pai. 
O item I está correto! Já o item II está incorreto: a tag <wbr> define uma possível quebra 
de linha. Algumas das diferenças entre o <wbr> e <br> são: <wbr> é usado para agrupar 
palavras longas ou URLs para melhorar a legibilidade, enquanto <br> é usado para criar 
uma quebra de linha em um bloco de texto. <wbr> é um elemento inline, enquanto <br> 
é um elemento de nível de bloco. Isso significa que <wbr> pode ser usado dentro de um 
bloco de texto, enquanto <br> cria um novo bloco. <wbr> nem sempre é respeitado pelo 
navegador, pois depende do layout e do espaço disponível. <br>, por outro lado, sempre 
cria uma quebra de linha. <wbr> não é suportado em todos os navegadores, enquanto 
<br> é amplamente suportado. O uso do atributo depth no “<canvas>” não tem por 
finalidade gráficos tridimensionais. A depth no “<canvas>” refere-se ao número de bits 
usados para representar a cor de cada pixel na tela. A profundidade é normalmente 
expressa como o número de bits por pixel (bpp). Por exemplo, uma tela com 
profundidade de 8 bpp pode representar até 256 cores diferentes, enquanto uma tela 
com profundidade de 24 bpp pode representar até 16 milhões de cores diferentes. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
131
504
 
 
 
 
 
 
Gabarito: Letra A 
 
69. (FGV –ALERO – 2018) Assinale a opção que melhor descreve a utilização da tag 
canvas no HTML5. 
 
a) Definir mídias de áudio e vídeo. 
b) Desenhar elementos gráficos por meio de scripts. 
c) Dividir a tela em áreas horizontais de largura variável, que funcionam como painéis. 
d) Dividir a tela em áreas verticais de altura variável, que funcionam como painéis. 
e) Desenhar a entrada de dados e as caixas de diálogo.. 
 
Comentários: 
 
O elemento <canvas> é um elemento HTML que foi introduzido no HTML5 e é usado 
para desenhar gráficos, animações e jogos usando JavaScript. É uma tela de bitmap 
dependente de resolução que pode ser usada para renderizar gráficos, gráficos de jogos 
ou outras imagens visuais em tempo real. 
 
Gabarito: Letra B 
 
70. (FGV –MPE AL – 2018) Observe o código a seguir. 
 
 
Supondo que o cursor do mouse inicialmente esteja fora da área de botão, assinale o 
texto exibido no botão quando a página que o contém estiver carregada. 
 
a) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão, assim mudando a cada 
movimentação para dentro ou para fora. 
b) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
assim permanece. 
c) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão, e assim permanece mesmo que 
o mouse seja movimentado sobre o botão. 
d) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“Abrir” quando o cursor do mouse sai da área do botão, assim mudando a cada 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
132
504
 
 
 
 
 
movimentação para dentro ou para fora. 
e) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão pela primeira vez. Nas demais 
saídas, mudar para “Abrir”. 
 
Comentários: 
 
O código cria um botão HTML que exibe o texto "ON" quando o mouse está sobre ele 
e "OFF" quando o mouse não está sobre ele. Isso pode ser obtido usando os atributos 
onmouseover e onmouseout, que permitem especificar o código JavaScript a ser 
executado quando o mouse entra ou sai do elemento. Portanto, nosso gabarito é a letra 
a: o texto exibido no botão quando a página que o contém estiver carregada vai Abrir” 
inicialmente, “on” quando o cursor do mouse entra na área do botão, e “off” quando o 
cursor do mouse sai da área do botão, assim mudando a cada movimentação para dentro 
ou para fora. 
 
Gabarito: Letra A 
 
71. (FGV –ALERO – 2018) Analise o código a seguir. 
 
Sabe-se que com essa página exibida, o operador clicou no botão por três vezes. 
Assinale o valor exibido no botão após esses cliques. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
133
504
 
 
 
 
 
 
a) 0 
b) 1 
c) 1111 
d) 1234 
e) 4. 
 
Comentários: 
 
O código consiste em uma página HTML com um botãoque incrementa um contador 
quando clicado. A biblioteca jQuery está sendo carregada de uma CDN (Content Delivery 
Network) para habilitar o uso de funções jQuery no script. O script usa a função 
$(document).ready() para agrupar o código que será executado quando a página for 
carregada e a função $("button").click() para vincular uma função ao evento click do botão 
elemento com o ID "xpto". 
 
Dentro da função de clique, a expressão $(this)[0].innerText é usada para obter o 
conteúdo de texto do elemento de botão, que é analisado como um número inteiro e 
incrementado em 1. Por fim, o valor atualizado é atribuído de volta ao propriedade 
innerText do elemento de botão. Assim, como o operador clicou no botão por três vezes 
o valor exibido no botão após esses cliques é 4. 
 
Gabarito: Letra E 
 
72. (FGV – BANESTES– 2018) HTML é uma linguagem utilizada para construção de 
páginas na Internet. O comando de formatação da linguagem HTML para indicar que 
um determinado texto deve ser apresentado sublinhado é: 
 
a) <b></b> 
b) <s></s> 
c) <i></i> 
d) <p></p> 
e) <u></u>. 
 
Comentários: 
 
Vejamos o significado de cada tag: A tag <b> representa um trecho de texto que deve 
ser renderizado em negrito. A tag <s> representa um trecho de texto que não é mais 
preciso ou relevante. Geralmente é usado para riscar o texto para indicar que ele foi 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
134
504
 
 
 
 
 
removido ou substituído. A tag <i> representa um trecho de texto que deve ser 
renderizado em uma fonte em itálico. A tag <p> representa um parágrafo de texto. A tag 
<u> representa um trecho de texto que deve ser renderizado como sublinhado. 
Gabarito: Letra E 
 
73. (FGV –BANESTES – 2018) Ao desenvolver uma aplicação cliente Web, o 
programador precisa mostrar um aviso quando a página requisitada tem o acesso 
proibido. 
 
Assim, ele tem que tratar o erro de resposta HTTP: 
 
a) 200; 
b) 403; 
c) 404; 
d) 500; 
e) 501. 
 
Comentários: 
 
Vejamos o significado de cada código de erro: 200: Este é um código de status de 
sucesso, indicando que a solicitação foi bem-sucedida e o recurso solicitado foi retornado. 
403: Este é um código de erro que ocorre quando a página requisitada tem o acesso 
proibido, indicando que o servidor entendeu a solicitação, mas se recusou a autorizá-la. 
Isso pode ocorrer quando o usuário não possui as permissões necessárias para acessar o 
recurso solicitado. 404: Este é um código de erro não encontrado, indicando que o 
servidor não pode encontrar o recurso solicitado. Isso pode ocorrer quando a URL do 
recurso está incorreta ou o recurso foi movido ou excluído. 500: Este é um código de erro 
do servidor, indicando que o servidor encontrou uma condição inesperada que o impediu 
de atender à solicitação. 501: Este é um código de erro não implementado, indicando 
que o servidor não suporta a funcionalidade necessária para atender à solicitação. Isso 
pode ocorrer quando o servidor não reconhece o método de solicitação (por exemplo, 
GET, POST, etc.) ou não suporta o recurso solicitado. 
 
Gabarito: Letra B 
 
74. (FGV –IBGE – 2017) HTML5 (Hypertext Markup Language, versão 5) é uma 
linguagem utilizada para estruturação e apresentação de conteúdo na Internet. 
 
Analise a página HTML5 a seguir: 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
135
504
 
 
 
 
 
 
Considere que você está utilizando um navegador web que suporta HTML5 Local 
Storage e ao acessar essa página pela primeira vez você apertou três vezes o botão 
indicado com id="B" e então você fechou o navegador. 
 
Posteriormente, você utiliza o mesmo navegador para acessar novamente essa mesma 
página. 
 
Após apertar duas vezes o mesmo botão, será apresentada a seguinte mensagem no 
corpo da página: 
 
a) Você apertou 5 vezes. 
b) Você apertou 7 vezes. 
c) Você apertou 10 vezes. 
d) Você apertou 52 vezes. 
e) Você apertou 55 vezes. 
 
Comentários: 
 
O código cria uma página HTML com um botão que conta o número de cliques. A 
contagem de cliques é armazenada no armazenamento local e da sessão e exibida na 
página usando a propriedade innerHTML de um elemento div com o ID "resultado". O 
objeto localStorage é usado para armazenar dados que persistem mesmo quando o 
navegador é fechado, enquanto o objeto sessionStorage é usado para armazenar dados 
que estão disponíveis apenas para a sessão atual da página. O botão conta o número de 
cliques e exibe a contagem total na página. Se você acessou a página pela primeira vez 
e clicou no botão três vezes, o valor da variável localStorage.clickcount seria definido 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
136
504
 
 
 
 
 
como 4, pois começa em 1 e é incrementado em 1 toda vez que o botão é clicado. O 
valor da variável sessionStorage.clickcount também seria definido como 4, pois começa 
em 1 e é incrementado em 1 toda vez que o botão é clicado. sessionStorage -> os dados 
ficam armazenados na sessão do navegador, ou seja, se fechar, perderá esses dados. Por 
outro lado, no local storage o browser, sendo apagado ao desligar ou ao reiniciar. 
Portanto, o elemento document.getElementByID("result".innetHTML = "Você apertou " 
+ A + B + " vez(es)."; apresentará como Saída: Você apertou 52 vez(es). 
 
Gabarito: Letra D 
 
75. (FGV –ALERJ – 2017) Analise a estrutura básica da página HTML a seguir: 
 
Esse código define que a cor do texto da página e dos links quando clicados são, 
respectivamente: 
 
a) preta e vermelha; 
b) azul e amarela; 
c) vermelha e verde; 
d) azul e verde; 
e) preta e amarela. 
 
Comentários: 
 
O elemento <body> é usado para definir o conteúdo principal de um documento HTML. 
O atributo "bgcolor" especifica a cor de fundo da página da web. Nesse caso, o valor do 
atributo "bgcolor" é "black", o que tornaria a cor de fundo da página da Web preta. Os 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
137
504
 
 
 
 
 
atributos "alink", "vlink" e "link" especificam as cores dos links na página da web. O 
atributo "alink" especifica a cor de um link quando ele é clicado. O atributo "vlink" 
especifica a cor de um link visitado. O atributo "link" especifica a cor de um link não 
visitado. Nesse caso, os valores dos atributos "alink", "vlink" e "link" são "green", 
"yellow" e "red", respectivamente, o que tornaria a cor de um link clicado verde, o a cor 
de um link visitado é amarela e a cor de um link não visitado é vermelha. O atributo 
"texto" especifica a cor do texto na página da web. Nesse caso, o valor do atributo 
"texto" é "azul", o que tornaria a cor do texto azul. Portanto, a cor do texto da página e 
dos links quando clicados são, respectivamente azul e verde. 
 
Gabarito: Letra D 
 
76. (FGV –MPE BA – 2017) A HTML é uma linguagem de marcação utilizada na 
construção de páginas na Web. 
 
O comando de formatação da linguagem para definir um hyperlink indicando que o 
recurso linkado deve ser aberto em uma nova janela do navegador é: 
 
a) <a href = "url" target ="_top">meu link</a> 
b) <a href = "url".new>meu link</a> 
c) <a href = "url" target="_blank">meu link</a> 
d) <a href = "url" target ="_parent">meu link</a> 
e) <a href = "url" target ="_self">meu link</a>. 
 
Comentários: 
 
O atributo target especifica onde abrir o documento vinculado. Ele pode ter um dos 
seguintes valores:_self- Predefinição. Abre o documento na mesma janela/guia em que 
foi clicado. _blank- Abre o documento em uma nova janela ou guia. _parent-Abre o 
documento no quadro pai. _top- Abre o documento em todo o corpo da janela. Portanto, 
nosso gabarito é a letra c: _blank- Abre o documento em uma nova janela ou guia. 
 
Gabarito: Letra C 
 
77. (FGV –IBGE – 2017) O HTML 5 introduziu um método para permitir que o designer 
controle a área de visualização de um site através da tag <meta>. A sintaxe correta 
para que a largura de uma página siga a largura da tela de um dispositivo, com uma 
escala inicial de 1X no momento em que ela é carregada é: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
138
504
 
 
 
 
 
a) <meta name=”viewport” content=”device, scale=1.0”>; 
b) <meta type="viewport" width="device” scale=”1.0">; 
c) <meta name="viewport" width="device-width, initial-scale=1.0">; 
d) <meta name="viewport" content="width=device-width, initial-scale=1.0">; 
e) <meta type="viewport" content="width=device-width” scale=”initial-scale-1">. 
 
Comentários: 
 
Questão importante! Foi cobrada no concurso FCC – TRT 23 – 2022! A sintaxe correta 
para que a largura de uma página siga a largura da tela de um dispositivo, com uma escala 
inicial de 1X no momento em que ela é carregada é <meta name="viewport" 
content="width=device-width, initial-scale=1.0">. A tag meta com um atributo name 
"viewport" é usada para controlar o layout de uma página da Web em um dispositivo 
móvel. O atributo de conteúdo é usado para definir a largura da viewport para a largura 
do dispositivo e para definir a escala inicial para 1,0, o que significa que a página da Web 
será exibida em uma escala de 1:1 no dispositivo. É necessário saber a sintaxe correta. 
 
Gabarito: Letra D 
 
78. (FGV – IBGE– 2016) A sigla HTML significa Hyper Text Markup Language, o que 
pode ser traduzido como Linguagem de Marcação de Hipertexto. Uma linguagem de 
marcação pode ser definida como um sistema para: 
 
a) marcar um documento indicando a sua estrutura lógica e hierárquica 
especificamente para a transmissão e exibição eletrônicas; 
b) definir o comportamento visual em meio eletrônico do conteúdo textual de um 
documento, incluindo tipografia, cor e tamanho dos caracteres; 
c) marcar um documento indicando a ordem em que o conteúdo deve ser apresentado 
em meio eletrônico; 
d) definir as ligações entre diferentes documentos a partir de palavras-chave 
específicas; 
e) criar documentos específicos para transmissão eletrônica através da Internet. 
 
Comentários: 
 
HTML (Hypertext Markup Language) é uma linguagem de marcação usada para estruturar 
e formatar conteúdo na web. É usado para marcar um documento, indicando sua 
estrutura lógica e hierárquica, para que os navegadores da web possam interpretar e 
exibir o conteúdo corretamente. Portanto, nosso gabarito é: Uma linguagem de marcação 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
139
504
 
 
 
 
 
pode ser definida como um sistema para marcar um documento indicando a sua estrutura 
lógica e hierárquica especificamente para a transmissão e exibição eletrônicas 
Gabarito: Letra A 
 
79. (FGV –IBGE – 2016) Um desenvolvedor Web mobile pretende utilizar os novos 
elementos semânticos disponíveis no HTML5 em suas páginas. Associe corretamente 
os elementos HTML5 enumerados com o posicionamento na ilustração que representa 
conceitualmente as partes de uma página HTML: 
 
 
 
A sequência correta é: 
 
a) A=1, B=3, C=5, D=6, E=4 e F=2; 
b) A=2, B=5, C=4, D=3, E=6 e F=1; 
c) A=1, B=4, C=6, D=5, E=3 e F=2; 
d) A=2, B=3, C=6, D=4, E=5 e F=3; 
e) A=1, B=6, C=4, D=3, E=5 e F=2. 
 
Comentários: 
 
Vamos lá:1) header: Este elemento representa o cabeçalho de uma seção ou página. Ele 
normalmente contém o logotipo, a navegação do site e outras informações importantes 
sobre a página ou o site. Este é o nosso elemento A. 2) footer: Este elemento representa 
o rodapé de uma seção ou página. Ele normalmente contém informações de direitos 
autorais, links para documentos relacionados e outras informações que não fazem parte 
do conteúdo principal da página. Esse é representado pelo elemento F. 3) nav: Este 
elemento representa uma seção da página que contém links de navegação para outras 
páginas ou para outras partes da mesma página. Este é o elemento B. 4) aside: Este 
elemento representa uma seção da página que está relacionada ao conteúdo principal, 
mas separada dele. Geralmente é usado para exibir barras laterais ou citações extraíveis, 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
140
504
 
 
 
 
 
este é o elemento E. 5) section: Este elemento representa uma seção genérica de um 
documento, como um capítulo, uma seção de um jornal ou uma seção de um site, este é 
o elemento C. 6)article: Este elemento representa um conteúdo independente que pode 
ser distribuído ou reutilizado independentemente, como uma postagem de blog ou um 
artigo de notícias, este é o elemento D. 
A=1, B=3, C=5, D=6, E=4 e F=2 
Gabarito: Letra A 
 
80. (FGV – IBGE– 2016) Com a introdução do HTML5, diversas novas APIs Javascript 
(Application Programming Interfaces) foram disponibilizadas, aumentando 
consideravelmente a quantidade de recursos disponíveis para a produção de páginas 
web. São APIs exclusivas do HTML5: 
 
a) múltiplas colunas de texto, transformações 2D/3D e RWD (Responsive Web Design); 
b) armazenamento em nuvem, suporte a telas de toque e SSL (Secure Sockets Layer); 
c) acesso a câmeras em dispositivos móveis, suporte a streaming de vídeo e SSE 
(Streaming SIMD Extensions); 
d) armazenamento local, geolocalização e SSE (Server-Sent Events); 
e) redimensionamento dinâmico de imagens, detecção de resolução de tela e RWD 
(Responsive Web Display) 
 
Comentários: 
 
O HTML5 apresenta várias novas APIs (Application Programming Interfaces) que 
permitem aos desenvolvedores da Web criar aplicativos da Web mais poderosos e 
interativos. Algumas APIs exclusivas do HTML5 são: API de geolocalização, API Web 
Storage, API Web Workers, API WebSockets, API Canvas, API de áudio da Web, API 
Server-Sent Events (SSE). 
 
Gabarito: Letra D 
 
81. (FGV –IBGE – 2016) A declaração <!DOCTYPE> permite ao navegador apresentar 
uma página web corretamente. A declaração correta para uma página em HTML5 é: 
 
a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Strict//EN" 
"http://www.w3.org/TR/html5/strict.dtd"> 
b) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" 
"http://www.w3.org/TR/html5/loose.dtd"> 
c) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0"> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
141
504
 
 
 
 
 
d) <!DOCTYPE html> 
e) <!DOCTYPE XML PUBLIC "-//W3C//DTD HTML 5.0"> 
 
Comentários: 
 
A declaração <!DOCTYPE html> define que este documento é um documento HTML5. 
 
Gabarito: Letra D 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
142
504
LISTAS QUESTÕES 
Questões Cespe 
 
1. (CESPE – TCE RJ– 2022). Quanto ao desenvolvimento de sistemas web, julgue o item 
seguinte. 
 
HTML5 é uma linguagem de programação que permite estruturar páginas web e 
executar comandos como loops de repetição, por exemplo. 
 
2. (CESPE –DP DF– 2022) Julgue o item seguinte, a respeito da formatação de dados. 
 
A tag <meta charset="UTF-8"> define o conjunto de caracteres usados na página, 
nesse caso, o UTF-8, que é o padrão para HTML5. 
 
3. (CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionadoa desenvolvimento 
de sistemas. 
 
No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados, 
tendo como característica o armazenamento de dados restritos à aba em 
funcionamento. 
 
4. (CESPE – APEX – 2021) Em HTML5, considerando-se o contexto de geolocalização e 
acesso ao dispositivo, para se obter retorno mais rápido e de baixa precisão sobre a 
localização de um dispositivo, deve-se 
 
a) invocar um método para o objeto PositionOptions da API com o parâmetro “0”. 
b) configurar a função watchPosition() da API de geolocalização. 
c) testar a existência do objeto navigator.geolocation no dispositivo. 
d) chamar o método getCurrentPosition() da API de geolocalização. 
 
5. (CESPE – PGDF – 2021) Acerca de linguagens de marcação utilizadas para formatação 
de dados, julgue o item a seguir. 
 
HTML e XML são equivalentes, pois ambas possuem uma semântica de apresentação 
predefinida. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
143
504
6. (CESPE – SEFAZ CE – 2021) Com relação à arquitetura de desenvolvimento de 
software, julgue o item a seguir. 
 
Um link de navegação compartilhado por diversas páginas é incluído no elemento 
<main> de uma página HTML5. 
 
7. (CESPE – PGDF – 2021) Julgue o item a seguir, referente a linguagens de scripts. 
 
Considere o código seguinte, em HTML e JavaScript. 
 
. 
Em um navegador Internet com JavaScript habilitado, esse código apresentará o 
resultado a seguir 
 
 
8. (CESPE – TJ PA – 2020) A respeito do tratamento off-line de um sítio no HTML 5, 
assinale a opção correta. 
 
a) Esse tratamento pode ser usado para a criação de dados em momento anterior ao 
acesso à aplicação. 
b) Na sessão cache do arquivo manifesto, devem estar relacionados todos os arquivos 
que o navegador deve copiar para que estejam disponíveis para uso off-line. 
c) É necessário que os arquivos PHP estejam listados na sessão cache. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
144
504
d) Na sessão network do arquivo manifesto, devem estar relacionados os arquivos que 
precisam ser substituídos por outros no retorno da conexão. 
e) Na sessão fallback do arquivo manifesto, devem estar relacionados os arquivos que 
não são utilizados para o processamento off-line. 
 
9. (CESPE – MPE CE – 2020) Acerca de JSON e HTML 5, julgue o item subsecutivo. 
 
No HTML 5, localStorage é um recurso de armazenamento local que usa objetos 
JavaScript e que permite manter dados sem data de expiração prévia. 
 
 
10. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir: 
 
No HTML 5, os novos campos para formulários, como email, search e range, e os 
atributos, como placeholder, pattern e required, reduzem a necessidade de utilização 
de plugins para auxiliar a formatação dos elementos. 
 
11. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir: 
 
No HTML 5, as tags de link e script usadas para referenciar arquivos de CSS e 
JavaScript não precisam informar o atributo type, porque, na sua ausência, o 
navegador assume que o arquivo é do tipo text/css ou text/javascript. 
 
12. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o 
item a seguir. 
 
A instrução DOCTYPE do HTML 5 é mais simples que a das versões anteriores HTML 
4 ou XHTML 1. 
 
13. (CESPE – TJ PA – 2020) 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
145
504
 
O código html precedente, ao ser executado em um navegador de Internet, produzirá 
o seguinte resultado 
 
a) Caca52null 
b) nomeIdadecarro 
c) [object Object][object Object][object Object] 
d) Caca+52+null 
e) nome+Idade+carro. 
 
14. (CESPE – TJ PA – 2020) Na linguagem HTML 5, geralmente considera-se 
determinado elemento como o ponto central do conteúdo do documento, o qual 
pode ser, por exemplo, um post. 
 
Esse elemento, que representa um conteúdo independente e altamente relevante, é 
o 
 
a) aside. 
b) canvas. 
c) embed. 
d) article. 
e) figure. 
 
15. (CESPE –SLU DF – 2019) Com relação a desenvolvimento de software, julgue o item 
a seguir. 
 
De acordo com o trecho de código a seguir, escrito em HTML5, novos valores de date 
e time são válidos como atributos de elementos de formulário, e apenas o campo data 
é de preenchimento obrigatório. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
146
504
. 
 
16. (CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo 
uso difundido nas páginas publicadas na Internet. Assinale a opção que corresponde 
à tag utilizada no caso em que seja necessário utilizar uma lista não ordenada. 
 
a) <b> 
b) <p> 
c) <tr> 
d) <ul> 
e) <th> 
 
17. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
 
O HTML 5 define como os navegadores web devem lidar com marcações antigas como 
<font>, <center> e outras tags de apresentação. 
 
18. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
 
O HTML 5 especifica novas API (application program interface) para o modelo de 
objeto de documento (DOM — document object model) referente a arrastar e soltar 
eventos enviados pelo servidor, como desenhos, vídeos e similares. 
 
19. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML 
5, do JavaScript, do XML e do CSS, julgue o item subsequente. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
147
504
 
A XHTML 5 é uma serialização XML que tem as mesmas características e sintaxes do 
HTML 5. 
 
20. (CESPE – MPE PI – 2018) Julgue o próximo item, relativo a lógica de programação 
e linguagens de programação. 
 
A execução do código JavaScript anteriormente apresentado retornará o seguinte 
resultado: 
 
 
21. (CESPE – TJ STJ – 2018) Julgue o item seguinte, a respeito de Maven, 
desenvolvimento web, servidor web, servidor de aplicação e criptografia. 
 
No HTML5, o atributo autofocos possibilita que qualquer elemento <input> seja 
automaticamente focado quando do carregamento da página. 
 
22. (CESPE – STM – 2018) Julgue o item subsequente, a respeito de programação web. 
 
Em HTML5, a tag <output> fornece uma indicação ao usuário do que pode ser inserido 
no campo. 
 
23. (CESPE – TRE BA – 2017) Entre os novos elementos do HTML5, o elemento: 
 
a) <mark> é o ponto de parada do cursor em qualquer parte da página HTML. 
b) <progress> define o progresso de uma tarefa. 
c) <meter> interpreta medições meteorológicas. 
d) <figcaption> captura figuras. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
148
504
e) <main> define a estrutura principal da linguagem C dentro da página HTML 
 
24. (CESPE – TCE-PA – 2016) Acerca dos conceitos e das técnicas necessários à 
construção de sítios web em que se utilizam CSS e HTML, julgue o item que se segue. 
 
HTML é uma linguagem de programação utilizada na construção de páginas na Web. 
 
 
25. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a 
desenvolvimento de sistemas web. 
 
Após a incorporação do jQuery ao HTML5, o desenvolvimento de funcionalidades pormeio dessa biblioteca JavaScript ficou limitado a aplicações para dispositivos móveis. 
 
26. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a 
desenvolvimento de sistemas web. 
 
O elemento <canvas> do HTML5 especifica uma forma padrão para inserir um vídeo 
em uma página da Web. 
 
27. (CESPE – FUNPRESP-EXE – 2016) Acerca da tecnologia Java, julgue o próximo 
item. 
 
Em HTML5, o atributo title da tag <img> pode ser usado para se adicionar um texto 
fixo a ser sempre apresentado imediatamente acima de uma imagem. 
 
28. (CESPE – FUNPRESP-JUD – 2016) A respeito das tecnologias relacionadas ao 
desenvolvimento web em Java, julgue o item a seguir. 
 
No HTML 5, a tag <rp> é usada para informar o que deve ser exibido nos browsers 
que não suportam anotações ruby. 
 
29. (CESPE – TRT 8 – 2016) Assinale a opção que apresenta a tag incluída na 
especificação do HTML5 que permite a reprodução de arquivos que contenham som 
ou música. 
 
a) <phonic> 
b) <img> 
c) <sound> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
149
504
d) <music> 
e) <audio>. 
 
30. (CESPE – TRE PI – 2016) A respeito de páginas web desenvolvidas utilizando-se 
HTML 5, assinale a opção correta. 
 
a) Para a visualização de vídeos incluídos na página web, é necessária a presença de 
plug-ins adequados aos formatos de mídia utilizados. 
b) A indefinição dos parâmetros altura e largura dos vídeos pode gerar problemas de 
renderização. 
c) Para se adicionar vídeos, o uso do atributo preload exige a presença do atributo 
controls. 
d) O elemento <iframe> permite a inclusão de outra página web na página que esteja 
sendo construída. 
e) O elemento <header> é usado exclusivamente no início de uma página para 
determinar o seu cabeçalho. 
 
31. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
O elemento label funciona como um indicador de caminho a seguir. Muitos browsers 
renderizam o conteúdo daquela tag como uma área clicável a fim de levar o foco para 
o campo relacionado. 
 
32. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
É vedada a utilização de FIELDSET para agrupar qualquer variedade de elementos 
input de formulários. 
 
Comentários: 
 
O elemento <fieldset> é um elemento HTML usado para agrupar controles de formulário 
relacionados. Ele fornece uma maneira de organizar visual e semanticamente os controles 
de formulário, tornando mais fácil para os usuários entender e usar o formulário. Portanto, 
como a questão está dizendo o oposto, nosso gabarito é: Errado. 
 
Gabarito: Errado 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
150
504
33. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
A tag <label> pode ser aplicada a todos os elementos de formulário, até mesmo a 
elementos button. 
 
34. (CESPE –TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de 
formulários eletrônicos. 
 
É possível agrupar inputs de um formulário e, ainda, as opções de uma tag <select> 
usando-se a tag <fieldset>. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
151
504
Questões FCC 
 
35. (FCC – PGE AM – 2022) No cabeçalho de uma página HTML deseja-se indicar ao 
navegador o conjunto de caracteres recomendado pela linguagem HTML5, que 
abrange a maioria dos caracteres e símbolos utilizados na maior parte dos idiomas, 
inclusive acentos existentes no Português. Para isso deve-se utilizar a instrução 
 
a) <meta charset="UTF-8"> 
b) <meta charset="ISO-8959-1"> 
c) <meta charset="Windows-8859"> 
d) <meta charset="ASC-II"> 
e) <meta charset="PT-BR"> 
 
36. (FCC – TRT 23 – 2022) Para criar sites responsivos usando HTML5 é aconselhável 
fornecer ao navegador instruções sobre como controlar as dimensões e a escala da 
página por meio da definição da viewport da página, utilizando o comando 
 
a) <viewport initial-scale="1.0" max-width="100%" /> 
b) <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
c) <viewport content="width=device-width, initial-scale=1.0" /> 
d) <meta type="viewport" initial-scale="100%" max-width="100%" /> 
e) <meta type="viewport" screen="width=100%, initial-scale=1.0"> 
 
37. (FCC – TRT22 – 2022) Uma Analista deseja escrever no rodapé da página web 
HTML5 “Copyright ©”, sem aspas, indicando que a página possui direitos autorais. 
 
Uma das maneiras corretas de fazer isso é por meio da instrução 
 
a) <p>Copyright &copy;</p> 
b) <p>Copyright &szlig;</p> 
c) <p>Copyright &circledR;</p> 
d) <p>Copyright &copyright;</p>e) <p>Copyright &cpsymbol;</ 
e) <p>Copyright &cpsymbol;</p> 
 
38. (FCC – TJ SC – 2021) Em uma situação hipotética, um profissional de TI deseja 
inserir um vídeo institucional do Tribunal de Justiça de Santa Catarina que está no 
Youtube, no site do Tribunal. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
152
504
Para isso, obteve o código personalizado abaixo no site do Youtube. 
 
 
 
Tal fragmento de código permite concluir que o comando HTML5 que deve ser 
utilizado na lacuna I é 
 
a) video 
b) movie 
c) media 
d) frame 
e) iframe 
 
 
39. (FCC – TJ MA – 2019) Um Analista que está desenvolvendo a página de abertura 
de um site deseja fazer com que as páginas HTML referentes aos links do menu sejam 
direcionadas e exibidas em um contêiner criado pela tag section no interior desta 
página. Nesse contêiner, para permitir a abertura das páginas, deve-se utilizar uma 
tag: 
 
a) aside 
b) main 
c) dialog 
d) iframe 
e) article 
 
40. (FCC – AFAP – 2019) Em uma página HTML 5 de abertura de um site, um Analista 
de Informática deseja definir uma área no centro onde outras páginas HTML poderão 
ser carregadas a partir de cliques nos links do menu principal. Ao abrir a página de 
abertura, um arquivo HTML já poderá ser exibido nessa área, cujo conteúdo poderá 
mudar na medida que se clica nos links do menu. Para que seja possível o 
comportamento descrito, essa área deverá ser definida por meio da tag 
 
a) div. 
b) section. 
c) iframe. 
d) main. 
e) core. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
153
504
 
41. (FCC – Pref Manaus – 2019) Em um parágrafo de uma página web desenvolvida 
com HTML5, um programador está usando palavras longas e está com medo do 
navegador quebrar as palavras ou linhas em locais incorretos. Para indicar os locais 
desejados para possíveis quebras de linha, quando a largura da janela do navegador 
mudar, o programador deverá usar a tag 
 
a) </br>. 
b) <break>. 
c) <\n>. 
d) <wbr>. 
e) <br/>. 
 
42. (FCC – TRF 4 – 2019) HTML5 incluiu um conjunto de tags semânticas para substituir 
algumas construções que eram feitas com HTML4. Por exemplo, as instruções <div 
id="header"> </div> e <div id="menu"></div> feitas em HTML4, são feitas na 
HTML5, usando as tags semânticas, através das instruções: 
 
a) <area id="header"></area> e <área id="menu"></area> 
b) <header></header> e <nav></nav> 
c) <head></head> e <menu></menu> 
d) <header></header> e <navigation></navigation> 
e) <header></header> e <menuarea></menuarea> 
 
43. (FCC – TJ MA – 2019) Um Técnico Judiciário que utiliza HTML5 está criando um 
parágrafo em uma página web que tem muitas palavras longas e, para evitar que o 
navegador quebre linhano lugar errado, utilizou uma tag para especificar onde, em 
um parágrafo, será aceitável uma quebra de linha. A tag correta para isso é: 
 
a) <break> 
b) <wbr> 
c) <bl> 
d) <rt> 
e) <br> 
 
44. (FCC – TRF 3 – 2019) Considere o fragmento abaixo de uma página HTML5 que 
utiliza elementos semânticos. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
154
504
 
Para inserir a legenda "Figura 1 – Foto das dependências do TRF3" na imagem, após 
<img src="trf.jpg" alt="TRF3"> deve-se colocar a instrução 
 
a) <label>Figura 1 – Foto das dependências do TRF3</label> 
b) <title>Figura 1 – Foto das dependências do TRF3</title> 
c) <legend>Figura 1 – Foto das dependências do TRF3</legend> 
d) <figlabel>Figura 1 – Foto das dependências do TRF3</figlabel> 
e) <figcaption>Figura 1 – Foto das dependências do TRF3.</figcaption> 
 
45. (FCC –Pref Manaus – 2019) Um programador precisa utilizar uma tag semântica 
incorporada a versão 5 da linguagem HTML, cujo objetivo é definir algum conteúdo 
adicional colocado normalmente à direita, mas relacionado com um conteúdo que o 
circunda colocado normalmente à esquerda. Deverá escolher, nesse caso, a tag: 
 
a) <article> 
b) <section> 
c) <aside> 
d) <figcaption> 
e) <summary> 
 
46. (FCC – TRF 3 – 2019) Um programador está criando o menu principal da página de 
abertura de um site, que conterá o bloco principal de links de navegação. 
Considerando os elementos semânticos da linguagem HTML5, estes links devem ficar 
imediatamente no interior da tag 
 
a) <mark> 
b) <progress> 
c) <choose> 
d) <nav> 
e) <navigation> 
 
47. (FCC – SANASA – 2019) Um Desenvolvedor de software precisa inserir uma 
instrução no cabeçalho de uma página HTML que fará referência a um arquivo 
chamado a001.css a ser aplicado apenas quando a página for aberta em dispositivos 
com tela de até 600 pixels. A instrução correta que deverá ser inserida é 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
155
504
a) <@import URL(a001.css) only screen and (max-width: 600px)> 
b) <link rel="media" device="only screen with (max-width: 600px)" href="a001.css"> 
c) <link rel="stylesheet" media="screen and (max-width: 600px)" href="a001.css"> 
d) <inport file="a001.css" media="screen and (max-width: 600px)"> 
e) <style>@media only screen and (min-width: 600px) URL(a001.css) <style>. 
 
48. (FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com 
HTML5 e deseja exibir um texto com fonte Courier de largura fixa, preservando os 
espaços e as quebras de linha. 
 
O texto deverá ser colocado entre as tags 
 
a) <mark> e </mark> 
b) <dl> e </dl> 
c) <embed> e </embed> 
d) <code> e </code> 
e) <pre> e </pre>. 
 
49. (FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de 
termos em um site utilizando listas de definições do HTML5. Nestas listas, o termo a 
ser descrito e a descrição propriamente dita são criados, respectivamente, pelas tags 
 
a) <dt> e <dd> 
b) <dd> e <tt> 
c) <ul> e <li> 
d) <tt> e <dd> 
e) <dd> e <dt> 
 
50. (FCC – TST – 2017) Considere, hipoteticamente, que um Programador deseja 
publicar um vídeo institucional no site do Tribunal Superior do Trabalho. Para isso, no 
local da página HTML5 onde deseja colocar o vídeo, utilizou o bloco de código abaixo. 
 
Considere que [nome_arquivo.extensão] representa o nome de um arquivo de vídeo 
válido. Nas últimas versões dos principais navegadores, os tipos de arquivos de vídeo 
válidos para preencher a lacuna I são 
 
a) avi, mpeg e mov 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
156
504
b) mkv, ogg e flv 
c) mp4, webm e ogg 
d) wmv, rmvb e mp4 
e) mp4, avi e mov. 
 
51. (FCC – TRF 5 – 2017) Uma das recomendações que consta nas Web Content 
Accessibility Guidelines − WCAG é fornecer legendas e outras alternativas para 
conteúdo multimídia. 
 
Nesse contexto, considere o código abaixo, que disponibiliza um vídeo de orientação 
ao cidadão em um site do Governo. 
 
 
Para fornecer um arquivo de legenda em português chamado legenda_br.vtt para o vídeo 
utiliza-se, na lacuna I, o comando 
 
a) <embed src="legenda_br.vtt" kind="track" srclang="pt" label="Português"> 
b) <subtitle src="legenda_br.vtt" kind="text/media" srclang="pt" label="Português"> 
c) <caption src="legenda_br.vtt" kind="media-query" srclang="pt-br" 
caption="Português"> 
d) <caption href="legenda_br.vtt" kind="subtitles" srclang="pt" label="Português"> 
e) <track src="legenda_br.vtt" kind="subtitles" srclang="pt" label="Português"> 
 
52. (FCC –TRT 24 – 2017) Preocupado com a acessibilidade de um site que está sendo 
desenvolvido para o Tribunal Regional do Trabalho da 24ª Região, um Técnico 
recomendou o uso de recursos da linguagem HTML, versão 5, para identificar o idioma 
principal da página. Para isso deve-se utilizar: 
 
a) o atributo lang na tag <html>. 
b) o atributo lang na tag <body>. 
c) o atributo language na tag <!DOCTYPE>. 
d) a propriedade language na tag <meta>. 
e) a tag <lang> no interior da tag <head> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
157
504
==1feb8f==
53. (FCC – ALMS – 2016) A viewport é a área visível do usuário de uma página web e 
pode variar de acordo com o dispositivo. HTML5 introduziu um método para deixar 
os web designers terem controle sobre a viewport através da tag 
 
a) <viewport> 
b) <meta> 
c) <grid> 
d) <page> 
e) <scale> 
 
54. (FCC – ELETROSUL – 2016) A uma página HTML5 deseja-se vincular um arquivo 
chamado arq1.css e um arquivo chamado arq2.js. 
 
Para isso devem-se utilizar as instruções 
 
a) <link rel="stylesheet" type="file/css" src="arq1.css"> e <script src="arq2.js"> 
</script> no corpo da página. 
b) <import type="text/css" href="arq1.css"> e <script file="arq2.js"> </script> no 
cabeçalho da página. 
c) <link type="css" style="external" href="arq1.css"> e <script src="arq2.js"> 
</script> no cabeçalho da página. 
d) <include type="text/css" href="arq1.css"> e <script src="arq2.js"> </script> no 
corpo da página. 
e) <link rel="stylesheet" type="text/css" href="arq1.css"> e <script src="arq2.js"> 
</script> no cabeçalho da página. 
 
55. (FCC – ALMS – 2016) Considere o fragmento de código HTML5 a seguir. 
 
Para disponibilizar na página o áudio chamado beethoven.mp3 a lacuna I deve ser 
corretamente preenchida por 
 
a) <sound src="beethoven.mp3" type="mpeg/ogg/wav" play="on"> 
b) <source target="beethoven.mp3" media_type="sound/mpeg"> 
c) <source src="beethoven.mp3" type="audio/mpeg"> 
d) <sound source="beethoven.mp3" media="audio/mp3"> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
158
504
e) <source src="beethoven.mp3" media="sound/mpeg" play="on"> 
 
56. (FCC – SEMF Teresina – 2016) Em uma página HTML há um parágrafo vazio criado 
pela tag <p id="local"></p>. Em um bloco JavaScript da mesma página, para inserir 
neste parágrafo a palavra Teresina, utiliza-se o comando 
 
a) document.getElementById("local").innerHTML = "Teresina"; 
b) document.getElement("p#demo").innerHTML = "Teresina"; 
c) document.p["#local"].value = "Teresina"; 
d) document.demo.value = "Teresina"; 
e) document.getElementByName("local").innerHTML = "Teresina"; 
 
 
57. (FCC – TRT 23 – 2016) De acordo com as recomendações da W3C para a linguagem 
HTML5, a instrução 
a) <meta charset="utf-8" /> está incorreta, pois tem uma barra no final. 
b) <!doctype html> está incorreta,pois deveria estar em letra maiúscula. 
c) <table class=table striped> está correta. 
d) <html lang="en-US"> está correta. 
e) <script src="myscript.js"> está incorreta, pois faltou o atributo 
language=“javascript” 
 
 
58. (FCC –TRF3 – 2016) Em um site que utiliza HTML5 Application Cache há um arquivo 
chamado dados.appcache que define que uma página poderá ter o conteúdo 
acessado mesmo estando offline. Nessa página, para apontar para esse arquivo deve-
se utilizar a instrução 
 
a) <html manifest="dados.appcache"> 
b) <cache manifest="dados.appcache"> 
c) <html src="dados.inf" cached> 
d) <cache src="dados.inf"> 
e) <!MANIFEST cache="demo.appcache"> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
159
504
Questões FGV 
 
59. (FGV –TJ TO– 2022) No HTML5, o evento que é disparado quando um objeto é 
carregado é: 
 
a) begin; 
b) load; 
c) ready; 
d) run; 
e) start. 
 
 
60. (FGV –MPE SC– 2022) Sobre elementos block-level (nível de bloco) e elementos 
inline (em linha) no HTML, analise as afirmativas a seguir. 
 
I. Um elemento block-level sempre começa numa nova linha. 
II. <p> é um elemento inline. 
III. <div> é um elemento block-level. 
 
Está correto somente o que se afirma em: 
a) I; 
b) II; 
c) I e II; 
d) I e III; 
e) II e III.. 
 
 
61. (FGV –MPE GO – 2022) Num documento HTML5, assinale o elemento que contém 
meta informações sobre a página. 
 
a) <!DOCTYPE html> 
b) <body> ( 
c) <head> 
d) <html> 
e) <script>. 
 
 
62. (FGV –TJ TO– 2022) Observe o código HTML e JavaScript a seguir: 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
160
504
 
 
Após a execução do código, o resultado exibido será: 
 
a) Maria 
b) João 
c) 2022.1 
d) Tejota 
e) tjProcesso 
 
 
63. (FGV –Sefaz AM – 2022) A linguagem de marcação HTML é amplamente utilizada 
na construção de páginas da Internet. 
 
O elemento HTML, que permite reproduzir um arquivo de vídeo no formato MP4 em 
uma página da web, é 
 
a) <clip> 
b) <embedded> 
c) <media> 
d) <movie> 
e) <video>. 
 
 
64. (FGV –IMBEL – 2021) Analise a imagem a seguir, produzida numa página Web. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
161
504
 
que substitui corretamente a linha com pontos. 
 
a) <tr><th>A</th><th>C</th></tr> 
<tr><td>F</td><td><table> 
<tr><td>G</td><td>G</td></tr> 
</table></th></tr> 
b) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td><table> 
<tr><th>F</th><th>G</th></tr> 
</table></th></tr> 
c) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td> 
<tr><td>F</td><td>G</td></tr> 
</th></tr> 
d) <tr><th>A</th><th>C</th></tr> 
<tr><td>B</td><td></table><tr><td>F</td><td>G</td></tr> 
<table></th></tr> 
e) <tr><td>A</td><td>C</td></tr> 
<tr><td>B</td><td><table> 
<tr><td>F</td><td>G</td></tr> 
</table></th></tr>. 
 
 
 
 
65. (FGV – TJ RO– 2021) No contexto do HTML, a sintaxe correta para um comentário, 
delimitando um trecho que NÃO deve ser exibido pelo browser, é: 
a) <-- Texto do comentário --> 
b) !--Texto do comentário > 
c) <-Texto do comentário -> 
d) <!--Texto do comentário --> 
e) <--Texto do comentário --/>. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
162
504
 
 
66. (FGV – IMBEL– 2021) Analise o trecho HTML a seguir. 
 
<table> 
<tr><th>A</th><th>C</th></tr> 
<tr><th>B</th><th>D</th></tr> 
</table> 
 
Na exibição da página Web, esse script produz uma tabela 
 
a) com duas linhas e duas colunas. 
b) com quatro linhas e uma coluna. 
c) com quatro colunas e uma linha. 
d) com uma linha e uma coluna. 
e) com linhas e colunas desalinhadas. 
 
 
67. (FGV –MPE AL – 2018) O HTML 5 introduziu diversos elementos semânticos, 
gráficos e de multimídia. 
 
Assinale o elemento que não é uma novidade nessa versão. 
 
a) <article> 
b) <div> 
c) <footer> 
d) <header> 
e) <section>. 
 
 
68. (FGV –ALERO – 2018) No contexto dos elementos introduzidos pelo HTML 5, 
analise as afirmativas a seguir. 
 
I. Os elementos “header”, “section” e “footer” são elementos block-level. 
II. O elemento “<wbr>” é funcionalmente idêntico ao já conhecido elemento “<br>”. 
III. Além dos atributos height e width, o elemento “<canvas>” permite o uso do 
atributo depth, para uso em gráficos tridimensionais. 
 
Está correto o que se afirma em 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
163
504
 
a) I, somente. 
b) II, somente. 
c) III, somente. 
d) I e II, somente. 
e) II e III, somente.. 
 
 
69. (FGV –ALERO – 2018) Assinale a opção que melhor descreve a utilização da tag 
canvas no HTML5. 
 
a) Definir mídias de áudio e vídeo. 
b) Desenhar elementos gráficos por meio de scripts. 
c) Dividir a tela em áreas horizontais de largura variável, que funcionam como painéis. 
d) Dividir a tela em áreas verticais de altura variável, que funcionam como painéis. 
e) Desenhar a entrada de dados e as caixas de diálogo.. 
 
 
70. (FGV –MPE AL – 2018) Observe o código a seguir. 
 
 
Supondo que o cursor do mouse inicialmente esteja fora da área de botão, assinale o 
texto exibido no botão quando a página que o contém estiver carregada. 
 
a) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão, assim mudando a cada 
movimentação para dentro ou para fora. 
b) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
assim permanece. 
c) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão, e assim permanece mesmo que 
o mouse seja movimentado sobre o botão. 
d) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“Abrir” quando o cursor do mouse sai da área do botão, assim mudando a cada 
movimentação para dentro ou para fora. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
164
504
e) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e 
“off” quando o cursor do mouse sai da área do botão pela primeira vez. Nas demais 
saídas, mudar para “Abrir”. 
 
 
 
71. (FGV –ALERO – 2018) Analise o código a seguir. 
 
Sabe-se que com essa página exibida, o operador clicou no botão por três vezes. 
Assinale o valor exibido no botão após esses cliques. 
 
a) 0 
b) 1 
c) 1111 
d) 1234 
e) 4. 
 
 
72. (FGV – BANESTES– 2018) HTML é uma linguagem utilizada para construção de 
páginas na Internet. O comando de formatação da linguagem HTML para indicar que 
um determinado texto deve ser apresentado sublinhado é: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
165
504
a) <b></b> 
b) <s></s> 
c) <i></i> 
d) <p></p> 
e) <u></u>. 
 
 
73. (FGV –BANESTES – 2018) Ao desenvolver uma aplicação cliente Web, o 
programador precisa mostrar um aviso quando a página requisitada tem o acesso 
proibido. 
 
Assim, ele tem que tratar o erro de resposta HTTP: 
 
a) 200; 
b) 403; 
c) 404; 
d) 500; 
e) 501. 
 
 
 
74. (FGV –IBGE – 2017) HTML5 (Hypertext Markup Language, versão 5) é uma 
linguagem utilizada para estruturação e apresentação de conteúdo na Internet. 
 
Analise a página HTML5 a seguir: 
 
Diego Carvalho, Equipe Informática 1(Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
166
504
Considere que você está utilizando um navegador web que suporta HTML5 Local 
Storage e ao acessar essa página pela primeira vez você apertou três vezes o botão 
indicado com id="B" e então você fechou o navegador. 
 
Posteriormente, você utiliza o mesmo navegador para acessar novamente essa mesma 
página. 
 
Após apertar duas vezes o mesmo botão, será apresentada a seguinte mensagem no 
corpo da página: 
 
a) Você apertou 5 vezes. 
b) Você apertou 7 vezes. 
c) Você apertou 10 vezes. 
d) Você apertou 52 vezes. 
e) Você apertou 55 vezes. 
 
 
75. (FGV –ALERJ – 2017) Analise a estrutura básica da página HTML a seguir: 
 
Esse código define que a cor do texto da página e dos links quando clicados são, 
respectivamente: 
 
a) preta e vermelha; 
b) azul e amarela; 
c) vermelha e verde; 
d) azul e verde; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
167
504
e) preta e amarela. 
 
 
76. (FGV –MPE BA – 2017) A HTML é uma linguagem de marcação utilizada na 
construção de páginas na Web. 
 
O comando de formatação da linguagem para definir um hyperlink indicando que o 
recurso linkado deve ser aberto em uma nova janela do navegador é: 
 
a) <a href = "url" target ="_top">meu link</a> 
b) <a href = "url".new>meu link</a> 
c) <a href = "url" target="_blank">meu link</a> 
d) <a href = "url" target ="_parent">meu link</a> 
e) <a href = "url" target ="_self">meu link</a>. 
 
 
77. (FGV –IBGE – 2017) O HTML 5 introduziu um método para permitir que o designer 
controle a área de visualização de um site através da tag <meta>. A sintaxe correta 
para que a largura de uma página siga a largura da tela de um dispositivo, com uma 
escala inicial de 1X no momento em que ela é carregada é: 
 
a) <meta name=”viewport” content=”device, scale=1.0”>; 
b) <meta type="viewport" width="device” scale=”1.0">; 
c) <meta name="viewport" width="device-width, initial-scale=1.0">; 
d) <meta name="viewport" content="width=device-width, initial-scale=1.0">; 
e) <meta type="viewport" content="width=device-width” scale=”initial-scale-1">. 
 
 
78. (FGV – IBGE– 2016) A sigla HTML significa Hyper Text Markup Language, o que 
pode ser traduzido como Linguagem de Marcação de Hipertexto. Uma linguagem de 
marcação pode ser definida como um sistema para: 
 
a) marcar um documento indicando a sua estrutura lógica e hierárquica 
especificamente para a transmissão e exibição eletrônicas; 
b) definir o comportamento visual em meio eletrônico do conteúdo textual de um 
documento, incluindo tipografia, cor e tamanho dos caracteres; 
c) marcar um documento indicando a ordem em que o conteúdo deve ser apresentado 
em meio eletrônico; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
168
504
d) definir as ligações entre diferentes documentos a partir de palavras-chave 
específicas; 
e) criar documentos específicos para transmissão eletrônica através da Internet. 
 
 
79. (FGV –IBGE – 2016) Um desenvolvedor Web mobile pretende utilizar os novos 
elementos semânticos disponíveis no HTML5 em suas páginas. Associe corretamente 
os elementos HTML5 enumerados com o posicionamento na ilustração que representa 
conceitualmente as partes de uma página HTML: 
 
 
 
A sequência correta é: 
 
a) A=1, B=3, C=5, D=6, E=4 e F=2; 
b) A=2, B=5, C=4, D=3, E=6 e F=1; 
c) A=1, B=4, C=6, D=5, E=3 e F=2; 
d) A=2, B=3, C=6, D=4, E=5 e F=3; 
e) A=1, B=6, C=4, D=3, E=5 e F=2. 
 
 
 
80. (FGV – IBGE– 2016) Com a introdução do HTML5, diversas novas APIs Javascript 
(Application Programming Interfaces) foram disponibilizadas, aumentando 
consideravelmente a quantidade de recursos disponíveis para a produção de páginas 
web. São APIs exclusivas do HTML5: 
 
a) múltiplas colunas de texto, transformações 2D/3D e RWD (Responsive Web Design); 
b) armazenamento em nuvem, suporte a telas de toque e SSL (Secure Sockets Layer); 
c) acesso a câmeras em dispositivos móveis, suporte a streaming de vídeo e SSE 
(Streaming SIMD Extensions); 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
169
504
d) armazenamento local, geolocalização e SSE (Server-Sent Events); 
e) redimensionamento dinâmico de imagens, detecção de resolução de tela e RWD 
(Responsive Web Display) 
 
 
 
81. (FGV –IBGE – 2016) A declaração <!DOCTYPE> permite ao navegador apresentar 
uma página web corretamente. A declaração correta para uma página em HTML5 é: 
 
a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Strict//EN" 
"http://www.w3.org/TR/html5/strict.dtd"> 
b) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" 
"http://www.w3.org/TR/html5/loose.dtd"> 
c) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0"> 
d) <!DOCTYPE html> 
e) <!DOCTYPE XML PUBLIC "-//W3C//DTD HTML 5.0"> 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
170
504
GABARITO 
1. Errado 
2. Correto 
3. Errado 
4. Letra D 
5. Errado 
6. Errado 
7. Correto 
8. Letra B 
9. Correto 
10. Correto 
11. Correto 
12. Correto 
13. Letra B 
14. Letra D 
15. Correto 
16. Letra D 
17. Correto 
18. Correto 
19. Errado 
20. Correto 
21. Errado 
22. Errado 
23. Letra B 
24. Errado 
25. Errado 
26. Errado 
27. Errado 
28. Correto 
29. Letra E 
30. Letra D 
31. Correto 
32. Errado 
33. Errado 
34. Correto 
35. Letra A 
36. Letra B 
37. Letra A 
38. Letra E 
39. Letra D 
40. Letra C 
41. Letra D 
42. Letra B 
43. Letra B 
44. Letra E 
45. Letra C 
46. Letra D 
47. Letra C 
48.Letra E 
49. Letra A 
50. Letra C 
51. Letra E 
52. Letra A 
53. Letra B 
54. Letra E 
55. Letra C 
56. Letra A 
57. Letra D 
58. Letra A 
59. Letra B 
60. Letra D 
61. Letra C 
62. Letra B 
63. Letra E 
64. Letra B 
65. Letra D 
66. Letra A 
67. Letra B 
68. Letra A 
69. Letra B 
70. Letra A 
71. Letra E 
72. Letra E 
73. Letra B 
74. Letra D 
75. Letra D 
76. Letra C 
77. Letra D 
78. Letra A 
79. Letra A 
80. Letra D 
81. Letra D 
 
 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
171
504
 
 
 
 
 
Sumário 
Apresentação da Aula ....................................................................................................................... 4 
CSS ..................................................................................................................................................... 5 
Conceitos Básicos .......................................................................................................................... 5 
Sintaxe CSS .................................................................................................................................... 8 
Seletores de CSS ............................................................................................................................ 9 
O seletor de elemento CSS ....................................................................................................... 9 
Todos os seletores simples de CSS ......................................................................................... 10 
Como adicionar CSS .................................................................................................................... 12 
Comentários CSS .........................................................................................................................14 
Cores CSS ..................................................................................................................................... 15 
Fundos CSS .................................................................................................................................. 17 
Imagem de Fundo CSS ................................................................................................................ 19 
Propriedades de Borda do CSS ................................................................................................... 22 
Largura da Borda do CSS ......................................................................................................... 24 
Cores de borda ......................................................................................................................... 26 
Margens CSS ................................................................................................................................ 32 
Preenchimento CSS ..................................................................................................................... 34 
Altura, largura e largura máxima do CSS .................................................................................... 36 
Modelo de Caixa CSS .................................................................................................................. 38 
Contorno do CSS ...................................................................................................................... 38 
Largura do Contorno do CSS ................................................................................................... 39 
Cor do Contorno do CSS ......................................................................................................... 39 
Abreviação do Contorno do CSS............................................................................................. 39 
Texto CSS ..................................................................................................................................... 41 
Cor do texto.............................................................................................................................. 41 
Alinhamento e direção do texto .............................................................................................. 42 
Propriedades de Decoração de Texto ..................................................................................... 43 
Transformação de Texto CSS ................................................................................................... 44 
Espaçamento do Texto CSS ..................................................................................................... 45 
Sombra de Texto CSS .............................................................................................................. 46 
Fontes CSS ................................................................................................................................... 47 
Estilo de fonte CSS ................................................................................................................... 49 
Tamanho da fonte .................................................................................................................... 50 
Regras de emparelhamento de fontes .................................................................................... 53 
Ícones de CSS .............................................................................................................................. 56 
Fontes de Ícones Incríveis ........................................................................................................ 56 
Ícones do Bootstrap ................................................................................................................. 57 
Links CSS ...................................................................................................................................... 58 
Decoração de texto .................................................................................................................. 59 
Cor de fundo............................................................................................................................. 59 
Botões de link ........................................................................................................................... 59 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
174
504
 
 
 
 
 
Listas de CSS ............................................................................................................................ 60 
Listas HTML e propriedades da lista CSS .................................................................................. 1 
Marcadores de itens de lista diferentes ..................................................................................... 1 
Uma imagem como marcador de item de lista ......................................................................... 1 
Posicione os Marcadores de Item da Lista ................................................................................ 2 
Remover configurações padrão ................................................................................................. 2 
Lista - Propriedade abreviada .................................................................................................... 2 
Lista de estilos com cores .......................................................................................................... 3 
Tabelas CSS .................................................................................................................................... 4 
Recolher bordas da tabela (border-collapse) ............................................................................ 5 
Tamanho da Tabela CSS ............................................................................................................ 6 
Alinhamento de Tabela CSS ...................................................................................................... 7 
Estilo de Tabela CSS .................................................................................................................. 8 
Tabela Responsiva CSS .............................................................................................................. 9 
Layout CSS - A propriedade de exibição .................................................................................... 10 
Elementos de nível de bloco ................................................................................................... 10 
Elementos embutidos............................................................................................................... 10 
Substituir o valor de exibição padrão ...................................................................................... 12 
Largura e Largura Máxima ........................................................................................................ 12 
A propriedade de posição ........................................................................................................... 13 
position: static; .......................................................................................................................... 13 
position: relative; ...................................................................................................................... 13 
position: fixed; .......................................................................................................................... 13 
position: absolute; .................................................................................................................... 14 
A propriedade z-index ................................................................................................................. 16 
Overflow .......................................................................................................................................17 
Layout CSS: Float and clear ......................................................................................................... 19 
A propriedade CSS "clear" ...................................................................................................... 20 
Layout CSS: display: inline-block ................................................................................................. 22 
Alinhamento ................................................................................................................................. 24 
Alinhamento horizontal: ........................................................................................................... 24 
Alinhamento vertical: ................................................................................................................ 24 
Elementos de Alinhamento Central ......................................................................................... 24 
CSS Combinators ......................................................................................................................... 26 
Pseudo-classes ............................................................................................................................. 27 
Opacidade / Transparência ......................................................................................................... 30 
Pseudo-elementos ....................................................................................................................... 31 
Todos os pseudoelementos CSS ............................................................................................. 32 
Barra de Navegação .................................................................................................................... 33 
Barra de Navegação Vertical .................................................................................................... 34 
Barra de Navegação Horizontal ............................................................................................... 35 
Menus suspensos em CSS ........................................................................................................... 36 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
175
504
 
 
 
 
 
Galeria de imagens ...................................................................................................................... 37 
Sprites de imagem ....................................................................................................................... 38 
Seletores de atributos CSS .......................................................................................................... 39 
Formulários CSS ........................................................................................................................... 40 
Resumo ............................................................................................................................................ 41 
Sintaxe CSS ............................................................................................................................... 42 
Comentário ............................................................................................................................... 42 
Seletores de CSS ...................................................................................................................... 42 
Todos os seletores simples de CSS ......................................................................................... 43 
Cores CSS ................................................................................................................................. 43 
Fundos CSS ............................................................................................................................... 44 
Imagem de Fundo CSS ............................................................................................................ 45 
Propriedades de Borda do CSS ............................................................................................... 45 
Margens CSS ............................................................................................................................ 46 
Preenchimento CSS .................................................................................................................. 46 
Altura, largura e largura máxima do CSS................................................................................. 47 
Modelo de Caixa CSS .............................................................................................................. 47 
Texto CSS ................................................................................................................................. 47 
Fontes CSS ................................................................................................................................ 48 
Ícones de CSS ........................................................................................................................... 48 
Links CSS ................................................................................................................................... 49 
Tabelas CSS .............................................................................................................................. 49 
Layout CSS - A propriedade de exibição ................................................................................ 49 
A propriedade de posição ....................................................................................................... 50 
A propriedade z-index.............................................................................................................. 51 
Overflow.................................................................................................................................... 51 
Seletores de atributos CSS ....................................................................................................... 52 
Referências ....................................................................................................................................... 53 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
176
504
 
 
 
 
 
CSS 
Conceitos Básicos 
 
Antes de iniciar a aula, é importante mencionar que vários exemplos dessa aula foram retirados 
ou inspirados em exemplos do W3Tutorials (www.w3schools.com/html). Não fizemos isso porque 
somos preguiçosos, mas por dois motivos: (1) os exemplos são excelentes; (2) essa é uma das 
fontes de inspiração das bancas. Além disso, eu sugiro que vocês tenham sempre aberta uma 
janela com um interpretador online para que vocês possam testar o que veremos. Recomendo 
esse: 
 
https://www.w3schools.com/html/ 
 
 
 
CSS é a sigla para Folhas de Estilo em Cascata. É uma linguagem de estilos usada para descrever 
a apresentação de um documento escrito em uma linguagem de marcação. É mais comumente 
usado para estilizar documentos HTML e XML, mas pode ser usado com qualquer documento 
XML, incluindo SVG e XHTML. O CSS é uma tecnologia-chave usada para criar sites visualmente 
atraentes e consistentes. Ele é usado para controlar layout, cores, fontes e outros elementos 
visuais em um site. 
 
CSS é a linguagem que usamos para estilizar um documento HTML e descreve como os 
elementos HTML devem ser exibidos. 
 
Vejamos um exemplo de código CSS 
 
body { 
 background-color: lightblue; 
} 
 
h1 { 
 color: white; 
 text-align: center; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
178
504
 
 
 
 
 
} 
 
p { 
 font-family:verdana; 
 font-size: 20px; 
} 
 
O código é um exemplo de CSS. Ele define a cor de fundo do elemento "body" para azul claro, 
a cor do elemento "h1" para branco e alinha o texto do elemento "h1" ao centro. Também 
define a família da fonte e o tamanho da fonte do elemento "p" para Verdana e 20px, 
respectivamente. 
 
Este CSS será aplicado às tags HTML correspondentes em uma página da Web, resultando em 
um plano de fundo de toda a página azul claro, quaisquer cabeçalhos de nível 1 sendo brancos 
e alinhados ao centro e quaisquer elementos "p" tendo uma família de fontes de Verdana e 
tamanho da fonte de 20px. 
 
CSS (Cascading Style Sheets) é usado para controlar a aparência de elementos HTML e XML na 
página, incluindo cor, fontes, espaçamento, layout e muito mais. CSS permite que os 
desenvolvedores separem a apresentação do conteúdo, o que facilita a manutenção e o 
desenvolvimento de sites. Com o CSS, é possível aplicar estilos consistentes em todo o site, o 
que ajuda a garantir que a aparência do site seja consistente e profissional. 
 
• CSS significa Cascading Style Sheets 
• CSS descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outras 
mídias 
• CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da Web de uma 
só vez 
• Folhas de estilo externas são armazenadas em arquivos CSS 
 
O CSS é usado para definir estilos para suas páginas da Web, incluindo design, layout e variações 
de exibição para diferentes dispositivos e tamanhos de tela. 
 
O HTML NUNCA foi destinado a conter tags para formatar uma página da web! HTML foi criado 
para descrever o conteúdo de uma página web, como: 
 
<h1>Este é um cabeçalho</h1> 
 
<p>Isto é um parágrafo.</p> 
 
Quando tags como <font> e atributos de cor foram adicionados à especificação do HTML 3.2, 
começou um pesadelo para os desenvolvedores da web. O desenvolvimento de grandes sites, 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
179
504
 
 
 
 
 
onde fontes e informações de cores foram adicionadas a cada página, tornou-se um processo 
longo e caro. Para resolver esse problema, o World Wide Web Consortium (W3C) criou o CSS. 
 
CSS removeu a formatação de estilo da página HTML! 
As definições de estilo são normalmente salvas em arquivos .css externos. Com um arquivo de 
folha de estilo externo, você pode alterar a aparência de um site inteiro alterando apenas um 
arquivo! 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
180
504
 
 
 
 
 
Sintaxe CSS 
 
A sintaxe CSS consiste em um conjunto de regras que definem como aplicar estilos a elementos 
em um documento HTML. Essas regras são compostas de seletores, que especificam a quais 
elementos os estilos devem ser aplicados, e declarações, que definem os próprios estilos. O 
seletor é o elemento ou grupo de elementos aos quais os estilos serão aplicados. A propriedade 
é a propriedade CSS, como cor ou tamanho da fonte, que você deseja alterar. O valor é o valor 
para o qual você deseja definir a propriedade. Várias declarações podem ser adicionadas à 
mesma regra, separadas por ponto e vírgula: 
 
 
 
• O seletor aponta para o elemento HTML que você deseja estilizar. 
• O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula. 
• Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois 
pontos. 
• Várias declarações CSS são separadas por ponto e vírgula e os blocos de declaração são 
cercados por chaves. 
 
CSS também suporta o uso de cascata e herança, onde estilos podem ser herdados por 
elementos filhos de seus elementos pais. 
 
O CSS pode ser aplicado de três maneiras: 
 
• estilo inline, na tag HTML 
• folha de estilo interna, dentro da tag head 
• folha de estilo externa, em um arquivo separado com extensão .css 
 
Você também pode usar seletores diferentes, como seletores de classe, id, atributo e 
pseudoclasse para direcionar elementos específicos na página. 
 
h1 {color:blue;
• Propriedade: valor
font-size:12px;}
• Propriedade: valor
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
181
504
 
 
 
 
 
Seletores de CSS 
 
Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você 
deseja estilizar. 
 
Podemos dividir os seletores CSS em cinco categorias: 
 
• Seletores simples (selecionar elementos com base no nome, id, classe) 
• Seletores de combinação (selecionam elementos com base em uma relação específica 
entre eles) 
• Seletores de pseudoclasse (selecionar elementos com base em um determinado estado) 
• Seletores de pseudoelementos (selecionar e estilizar uma parte de um elemento) 
• Seletores de atributo (selecionar elementos com base em um atributo ou valor de atributo) 
 
O seletor de elemento CSS 
 
Os seletores são usados para selecionar os elementos HTML aos quais você deseja aplicar estilos. 
Existem vários tipos diferentes de seletores disponíveis em CSS, incluindo: 
 
• Seletores de elementos: selecione elementos com base em seus nomes. Por exemplo, p { 
} seleciona todos os elementos <p> na página. 
 
• Seletores de classe: selecione elementos com base em seu atributo de classe. Por 
exemplo, .my-class { } seleciona todos os elementos com a classe "my-class". 
 
• Seletores de ID: selecione um elemento exclusivo com base em seu atributo id. Por 
exemplo, #my-id { } seleciona o elemento com o id "my-id". 
 
• Seletores de atributos: selecione elementos com base em seus atributos ou valores de 
atributos. Por exemplo, input[type="text"] { } seleciona todos os elementos <input> com 
um atributo de tipo "text". 
 
• Seletores de pseudoclasse: selecione elementos com base em seus estados ou 
comportamento dinâmico. Por exemplo, a:hover { } seleciona todos os elementos <a> 
quando o usuário passa o mouse sobre eles. 
 
• Combinando seletores: selecione elementos com base em sua relação com outros 
elementos. Por exemplo, #my-id .my-class p seleciona todos os elementos <p> dentro de 
um elemento com a classe "my-class" que é descendente de um elemento com o id "my-
id". 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
182
504
 
 
 
 
 
(FCC – TJ-CE – 2022) Para colocar a cor de fundo vermelha apenas dos campos (inputs) do tipo 
text de um formulário, utiliza-se a instrução CSS 
 
 a) input [type=text] {background-color: #00ff00} 
 b) input.type [text] {background-color: #ff0000} 
 c) input [type=text] {background-color: #ff0000} 
 d) input.typeltext] {background: rgb(0,255,0)}} 
 e) input [type('text')] {background-color:rgb(255,0,0)} 
 
Comentários: Para isso podemos usar seletores de atributos: selecione elementos com base em 
seus atributos ou valores de atributos. Por exemplo, input[type="text"] { } seleciona todos os 
elementos <input> com um atributo de tipo "text". No caso da questão, devemos usar o input 
[type=text] {background-color: #ff0000}. (Gabarito: Letra C) 
 
(FCC – MANAUSPREV – 2021) No formulário de contato de uma página web do site do Governo 
de XX, um desenvolvedor de software precisa especificar que todos os campos do tipo texto 
(text) devem ser mostrados com fonte azul. Para estabelecer este estilo usando a linguagem CSS, 
deve-se utilizar o comando 
 
a) input [type=text] {color:blue} 
b) input type='text' {color:blue} 
c) input.text {color:blue} 
d) input!text {color:#0000ff} 
e) input#text {color:#blue} 
 
Comentários: Nessa questão também temos a aplicação de seletores! Nesse caso um 
desenvolvedorde software precisa especificar que todos os campos do tipo texto (text), ou seja, 
input [type=text], devem ser mostrados com fonte azul... eis a questão... qual é o correto? Tanto 
{color:blue} quanto {color:#0000ff} estão corretos. O principal, nessa questão é saber a sintaxe 
correta: input [type=text]. Portanto, temos aí nosso gabarito! (Gabarito: Letra A) 
 
Todos os seletores simples de CSS 
 
Seletor Exemplo Descrição do exemplo 
#id 
#firstname Seleciona o elemento com 
id="firstname" 
.class 
.intro Seleciona todos os elementos com 
class="intro" 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
183
504
 
 
 
 
 
element.class 
p.intro Seleciona apenas elementos <p> com 
class="intro" 
* * Seleciona todos os elementos 
element p Seleciona todos os elementos <p> 
element,element,.. 
div, p Seleciona todos os elementos <div> e 
todos os elementos <p> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
184
504
 
 
 
 
 
Como adicionar CSS 
 
Existem três maneiras principais de incluir uma folha de estilo CSS em um documento HTML: 
 
• Estilos embutidos: são estilos aplicados diretamente a um elemento HTML específico 
usando o atributo "estilo". Por exemplo, <p style="color: red;">Este é um parágrafo 
vermelho.</p> 
 
• Folha de estilo interna: são estilos definidos na seção de cabeçalho de um documento 
HTML usando uma tag <style>. Por exemplo, 
 
<head> 
 <style> 
 p { 
 color: red; 
 } 
 </style> 
</head> 
 
• Folha de estilo externa: são estilos definidos em um arquivo .css separado e vinculados a 
um documento HTML usando uma tag <link> na seção head. Por exemplo, 
 
<head> 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
 
Neste exemplo, a tag <link> é usada para vincular uma folha de estilo externa chamada styles.css 
à página. O atributo href especifica o caminho para o arquivo CSS, enquanto o atributo rel indica 
que o link é para uma folha de estilo e o atributo type especifica o tipo de arquivo (CSS). Além 
disso, podemos usar a tag <style> no cabeçalho da página: 
 
<head> 
 <style type="text/css"> /* ou <style rel="stylesheet" type="text/css"> */ 
 @import url("aleap.css"); 
 </style> 
</head> 
 
Neste exemplo, a tag <style> é usada para incluir folhas de estilo internas na página. O atributo 
type especifica o tipo de conteúdo (CSS) e o conteúdo da tag <style> é o código CSS. A diretiva 
@import é usada para incluir uma folha de estilo externa chamada aleap.css. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
185
504
 
 
 
 
 
O uso de uma folha de estilo externa é considerado uma prática recomendada, pois permite uma 
melhor organização e capacidade de manutenção dos estilos e facilita a aplicação dos mesmos 
estilos a várias páginas. Vejamos uma questão! 
 
(FCC – AL-AP – 2020) Segundo os padrões de acessibilidade na web definidos para sites do 
Governo Eletrônico, códigos CSS devem estar sempre em arquivos externos a serem chamados 
pelas páginas do sítio/portal. Por exemplo, a instrução <link rel="stylesheet" type="text/css" 
href="aleap.css"/> pode ser também escrita na forma: 
 
a) <style rel="link" type="text/css"> @include url("aleap.css"); </style> 
b) <link lang="css" type="stylesheet" href="aleap.css"/> 
c) <style rel="stylesheet" type="text/css"> @import url("aleap.css"); </style> 
d) <link rel="external" type="text/css" src="aleap.css"/> 
e) <style rel="stylesheet" type="text/css" url("aleap.css")/> 
 
Comentários: Sabemos que há três formas de inserir CSS: Estilos embutidos, Folha de estilo 
interna e Folha de estilo externa. Ainda, o uso de uma folha de estilo externa é considerado uma 
prática recomendada, portanto, vamos lembrar como é inserir CSS usando tags! As tags são 
<style>e <link>. Já que a banca deu a link no enunciado, vamos procurar pela tag Style, certo? 
Das opções, a correta é semelhante ao nosso exemplo <style type="text/css"> @import 
url("aleap.css"); </style>. Portanto, nosso gabarito é a letra C. (Gabarito: Letra C) 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
186
504
 
 
 
 
 
Comentários CSS 
 
Comentários CSS são usados para adicionar notas ou explicações em uma folha de estilo CSS 
que não afeta a exibição da página da web. Os comentários são ignorados pelos navegadores e 
não são exibidos na página da web. 
 
Comentários CSS são escritos usando os símbolos /* e */. Qualquer coisa escrita entre esses 
símbolos é considerada um comentário e será ignorada pelo navegador. 
 
Por exemplo: 
 
/* Este é um comentário CSS */ 
p{ 
 cor vermelha; /* Isso também é um comentário */ 
} 
 
Os comentários CSS podem ser colocados em sua própria linha ou na mesma linha que uma regra 
CSS. Eles também podem abranger várias linhas. 
 
É uma boa prática usar comentários para explicar o propósito de uma regra CSS ou grupo de 
regras, ou para indicar que uma seção da folha de estilo ainda está em andamento ou precisa ser 
revisada. Isso pode ajudar outras pessoas que trabalham no projeto a entender o código e fazer 
alterações com mais facilidade. 
 
Além disso, os comentários CSS podem ser usados para desativar temporariamente uma 
determinada regra ou seção da folha de estilo adicionando /* no início da linha com a regra e */ 
no final da linha, sem precisar removê-la completamente. 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
187
504
 
 
 
 
 
Cores CSS 
 
As cores são especificadas usando nomes de cores predefinidos ou valores RGB, HEX, HSL, 
RGBA, HSLA. Em CSS, as cores podem ser especificadas usando vários métodos diferentes. Valor 
RGB: As cores podem ser especificadas usando o modelo de cores RGB (vermelho, verde, azul), 
onde cada cor é especificada por um valor entre 0 e 255. Por exemplo, a cor vermelha pode ser 
especificada como rgb(255, 0, 0 ). 
 
• Valor HEX: As cores também podem ser especificadas usando um valor hexadecimal de 6 
dígitos, onde cada par de dígitos representa os valores de vermelho, verde e azul. Por 
exemplo, a cor vermelha pode ser especificada como #ff0000 (vermelho). 
o Branco ="#FFFFFF" 
o Vermelho ="#FF0000" 
o Verde ="#00FF00" 
o Azul ="#0000FF" 
o Preto = "#000000" 
 
• Valor HSL: As cores também podem ser especificadas usando o modelo de cores HSL 
(matiz, saturação, luminosidade), onde o valor do matiz é um grau entre 0 e 360, a 
saturação e a luminosidade são porcentagens. Por exemplo, a cor vermelha pode ser 
especificada como hsl(0,100%,50%). 
 
• Predefinido/Palavra-chave: Há também um conjunto de nomes de cores predefinidos que 
podem ser usados, como "vermelho", "verde", "azul", "preto", "branco", etc. 
 
• Valor RGBA: Semelhante ao valor RGB, mas permite definir um canal alfa para 
transparência. 
 
• Valor HSLA: Semelhante ao valor HSL, mas permite definir um canal alfa para 
transparência. 
 
É importante observar que nem todos os navegadores suportam valores HSL e HSLA, por isso é 
uma boa prática. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
188
504
 
 
 
 
 
 
 
Ex
em
pl
os
 de
 co
re
s e
m 
cs
s
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
co
re
s e
m 
cs
s Um valor de cor RGB representa as fontes de luz VERMELHA, VERDE e AZUL.
Uma cor hexadecimal é especificada com: #RRGGBB, onde os inteiros hexadecimais RR 
(vermelho), GG (verde) e BB (azul)
HSL significa matiz, saturação e leveza: hsl (matiz , saturação , luminosidade)
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
189
504
 
 
 
 
 
Fundos CSS 
 
Os fundos CSS são uma forma de definir a aparência de fundo de um elemento HTML usando 
código CSS. Eles permitem que os desenvolvedores escolham entre uma variedade de opções 
de fundo, como cores, imagens e gradientes, para personalizar a aparência visual do elemento. 
 
Existem várias propriedades CSS que podem ser usadas para definir o fundo de um elemento, 
incluindo: 
 
Propriedade Descrição 
background-color 
Define a cor de fundo de um elemento. Você pode usar nomes de 
cores, valores rgb, hex, hsl para definir uma cor de fundo. 
background-image 
Define uma imagem como fundo de um elemento. A imagem é 
especificada por um valor de url. Você também pode usar a palavra-
chave nenhum para remover qualquer imagem de plano de fundo. 
background-repeat 
Define como a imagem de fundo é repetida. O valor padrão é repetir, 
o que significa que a imagem será repetida horizontal e verticalmente. 
Você também pode usar repeat-x, repeat-y, no-repeat para controlar 
a repetição da imagem. 
background-position 
Define a posição da imagem de fundo. Você pode usar valores como 
centro, superior, inferior, esquerda, direita ou valores de 
comprimento específicos, como 10px 20px. 
background-
attachment 
Define se a imagem de fundo rola com o resto do conteúdo (scroll) ou 
é fixa no lugar (fixed). 
background-clip 
Define a área onde a imagem de fundo deve ser pintada. O valor 
padrão é border-box, o que significa que a imagem será pintada 
dentro das bordas do elemento. 
background-size 
Define o tamanho da imagem de fundo. Você pode usar valores como 
conter ou cobrir para dimensionar a imagem ou valores de 
comprimento como 50% ou 200px para definir um tamanho 
específico. 
 
Você também pode usar a propriedade abreviada background para definir todas as propriedades 
do background em uma linha. 
 
É importante observar que a ordem dos valores na propriedade abreviada é: 
plano de fundo: cor de fundo - imagem de fundo repetição de fundo posição de fundo 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
190
504
 
 
 
 
 
 
 
 
Você pode usar essas propriedades para definir o plano de fundo de qualquer elemento HTML, 
tornando-o uma ferramenta poderosa para criar designs da Web atraentes e envolventes. 
 
plano de fundo: cor de fundo - imagem de fundo - repetição de fundo - posição de fundo
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
191
504
 
 
 
 
 
Imagem de Fundo CSS 
 
A propriedade background-image em CSS é usada para definir uma imagem como plano de 
fundo de um elemento. A imagem é especificada por um valor de URL, que pode ser um caminho 
relativo ou absoluto. Por exemplo: 
 
body { 
 background-image: url("my-image.jpg"); 
} 
 
Você também pode usar a palavra-chave none para remover qualquer imagem de plano de 
fundo. 
 
A propriedade background-repeat controla como a imagem de fundo é repetida. O valor padrão 
é repetir, o que significa que a imagem será repetida horizontal e verticalmente. Outros valores 
possíveis são repeat-x, repeat-y e no-repeat. 
 
body { 
 background-image: url("my-image.jpg"); 
 background-repeat: no-repeat; 
} 
 
A propriedade background-position define a posição da imagem de fundo. Você pode usar 
valores como centro, superior, inferior, esquerda, direita ou valores de comprimento específicos, 
como 10px 20px. 
 
body { 
 background-image: url("my-image.jpg"); 
 background-position: center; 
} 
 
A propriedade background-size define o tamanho da imagem de fundo. Você pode usar valores 
como conter ou cobrir para dimensionar a imagem ou valores de comprimento como 50% ou 
200px para definir um tamanho específico. 
 
body { 
 background-image: url("my-image.jpg"); 
 background-size: cover; 
} 
 
Além disso, você pode usar a propriedade abreviada background para definir todas as 
propriedades do background em uma linha. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
192
504
 
 
 
 
 
body { 
 background: 
A forma abreviada da propriedade background em CSS permite que você defina todas as 
propriedades background em uma única linha de código. Isso pode tornar seu código CSS mais 
conciso e fácil de ler. A ordem dos valores na propriedade abreviada é: 
 
background: background-color background-image background-repeat background-position/size 
background-attachment 
 
 
 
Por exemplo, para definir uma cor de fundo de #ff0000, uma imagem "my-image.jpg" que se 
repete apenas na horizontal, posicionada no centro e fixa no lugar, você pode usar o seguinte 
código: 
 
body { 
 background: #ff0000 url("my-image.jpg") repeat-x center fixed; 
} 
 
ou 
 
body { 
 background: #ff0000 url("my-image.jpg") repeat-x center/cover fixed; 
} 
 
É importante observar que a propriedade abreviada substituirá quaisquer propriedades de plano 
de fundo anteriores definidas individualmente. Também é importante observar que nem todos 
os valores são obrigatórios, depende do que você deseja definir, para que você possa usá-lo 
conforme sua necessidade. 
 
Propriedade CSS Descrição 
background Define todas as propriedades de plano de fundo em uma declaração 
background-
attachment 
Define se uma imagem de fundo é fixa ou rola com o restante da 
página 
background-clip Especifica a área de pintura do fundo 
background-color Define a cor de fundo de um elemento 
ordem dos valores na forma abreviada da propriedade background
background-color background-image background-repeat background-position/size
background-
attachment
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
193
504
 
 
 
 
 
background-image Define a imagem de fundo para um elemento 
background-origin Especifica onde a(s) imagem(ns) de fundo está(ão) posicionada(s) 
background-position Define a posição inicial de uma imagem de fundo 
background-repeat Define como uma imagem de fundo será repetida 
background-size Especifica o tamanho da(s) imagem(ns) de fundo 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
194
504
 
 
 
 
 
Propriedades de Borda do CSS 
 
As propriedades de borda do CSS permitem que você especifique o estilo, a largura e a cor da 
borda de um elemento. Elas permitem controlar a aparência das bordas de um elemento HTML. 
Algumas das principais propriedades de borda incluem: 
 
• border-width: controla a largura da borda. 
• border-style: controla o estilo da borda (por exemplo, sólido, tracejado, etc.). 
• border-color: controla a cor da borda. 
• border-radius: controla a curvatura das bordas (para criar bordas arredondadas). 
• border: é uma propriedade curta que permite definir a largura, estilo e cor da borda de 
uma só vez. 
 
Além disso, também é possível controlaras bordas individuais de cada lado de um elemento 
utilizando as propriedades border-top, border-right, border-bottom e border-left. A propriedade 
border-style especifica que tipo de borda exibir. Os seguintes valores são permitidos: 
 
Estilo de Borda CSS Descrição 
dotted Define uma borda pontilhada 
dashed Define uma borda tracejada 
solid Define uma borda sólida 
double Define uma borda dupla 
groove 
Define uma borda ranhurada 3D. O efeito depende do valor da cor 
da borda 
ridge 
Define uma borda ondulada 3D. O efeito depende do valor da cor da 
borda 
inset 
Define uma borda de inserção 3D. O efeito depende do valor da cor 
da borda 
outset 
Define uma borda inicial 3D. O efeito depende do valor da cor da 
borda 
none Não define borda 
hidden Define uma borda oculta 
 
Vejamos um exemplo e seu respectivo resultado. 
 
<!DOCTYPE html> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
195
504
 
 
 
 
 
<html> 
<head> 
<style> 
p.dotted {border-style: dotted;} 
p.dashed {border-style: dashed;} 
p.solid {border-style: solid;} 
p.double {border-style: double;} 
p.groove {border-style: groove;} 
p.ridge {border-style: ridge;} 
p.inset {border-style: inset;} 
p.outset {border-style: outset;} 
p.none {border-style: none;} 
p.hidden {border-style: hidden;} 
p.mix {border-style: dotted dashed solid double;} 
</style> 
</head> 
<body> 
 
<h2>A propriedade border-style</h2> 
<p>Esta propriedade especifica que tipo de borda exibir:</p> 
 
<p class="dotted">Uma borda pontilhada.</p> 
<p class="dashed">Uma borda tracejada.</p> 
<p class="solid">Uma fronteira sólida.</p> 
<p class="double">Uma borda dupla.</p> 
<p class="groove">Uma borda de sulco.</p> 
<p class="ridge">Uma borda de cume.</p> 
<p class="inset">Uma borda embutida.</p> 
<p class="outset">Uma borda inicial.</p> 
<p class="none">Sem borda.</p> 
<p class="hidden">Uma fronteira oculta.</p> 
<p class="mix">Uma fronteira mista.</p> 
 
</body> 
</html> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
196
504
 
 
 
 
 
 
 
Largura da Borda do CSS 
 
A propriedade border-width especifica a largura das quatro bordas de um elemento HTML. A 
largura da borda pode ser especificada usando diferentes unidades de medida, como pixels (px), 
pontos (pt), centímetros (cm) e porcentagem (%). Usando um tamanho específico (em px, pt, cm, 
em, etc) ou usando um dos três valores predefinidos: thin, medium, or thick: 
 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
p.one { 
 border-style: solid; 
 border-width: 5px; 
} 
 
p.two { 
 border-style: solid; 
 border-width: medium; 
} 
 
p.three { 
 border-style: dotted; 
 border-width: 2px; 
} 
 
p.four { 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
197
504
 
 
 
 
 
 border-style: dotted; 
 border-width: thick; 
} 
 
p.five { 
 border-style: double; 
 border-width: 15px; 
} 
 
p.six { 
 border-style: double; 
 border-width: thick; 
} 
</style> 
</head> 
<body> 
 
<h2>The border-width Property</h2> 
<p>This property specifies the width of the four borders:</p> 
 
<p class="one">Some text.</p> 
<p class="two">Some text.</p> 
<p class="three">Some text.</p> 
<p class="four">Some text.</p> 
<p class="five">Some text.</p> 
<p class="six">Some text.</p> 
 
<p>A propriedade "border-width" não funciona se for usada sozinha. 
Sempre especifique a propriedade "border-style" para definir as bordas 
primeiro.</p> 
 
</body> 
</html> 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
198
504
 
 
 
 
 
 
A propriedade border-width pode ter de um a quatro valores (para a borda superior, borda 
direita, borda inferior e borda esquerda): 
 
p.one { 
 border-style: solid; 
 border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */ 
} 
 
p.two { 
 border-style: solid; 
 border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */ 
} 
 
p.three { 
 border-style: solid; 
 border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px 
left */ 
} 
Cores de borda 
 
A propriedade border-color do CSS permite controlar a cor das quatro bordas de um elemento 
HTML. A cor pode ser especificada usando uma variedade de formatos, incluindo nomes de cores 
(como "red" ou "blue"), códigos hexadecimais (como "#ff0000" ou "#0000ff") ou valores RGB 
ou RGBA (como "rgb(255, 0, 0)" ou "rgba(255, 0, 0, 0.5)"). 
 
A cor pode ser definida por: 
 
• nome - especifique um nome de cor, como "vermelho" 
• HEX - especifique um valor HEX, como "#ff0000" 
• RGB - especifique um valor RGB, como "rgb(255,0,0)" 
• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)" 
• transparente 
 
Se a propriedade border-color não estiver definida, então ela herda a cor do elemento. Vejamos 
um exemplo. 
 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
p.one { 
 border-style: solid; 
 border-color: red; 
} 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
199
504
 
 
 
 
 
 
p.two { 
 border-style: solid; 
 border-color: green; 
} 
 
p.three { 
 border-style: dotted; 
 border-color: blue; 
} 
</style> 
</head> 
<body> 
 
<h2>A propriedade border-color</h2> 
<p>Esta propriedade especifica a cor das quatro bordas:</p> 
 
<p class="one">A solid red border</p> 
<p class="two">A solid green border</p> 
<p class="three">A dotted blue border</p> 
 
<p><b>Nota:</b> A propriedade "border-color" não funciona se for usada sozinha. 
Use a propriedade "border-style" para definir as bordas primeiro.</p> 
 
</body> 
</html> 
 
 
 
Também é possível controlar a cor da borda individualmente para cada lado de um elemento 
utilizando as propriedades border-top-color, border-right-color, border-bottom-color e border-
left-color. 
 
border-top-color: red; 
border-right-color: #0000ff; 
 
Note que se você usar a propriedade border curta, você pode definir a cor, largura e estilo de 
borda de uma só vez. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
200
504
 
 
 
 
 
 
/* Definir a cor, largura e estilo da borda como vermelho, 5 pixels e sólido*/ 
border: 5px solid red; 
 
Não entendeu? Então, vejamos como funciona. As propriedades para controlar cada lado 
individualmente são: 
 
• border-top: controla a borda superior. 
• border-right: controla a borda direita. 
• border-bottom: controla a borda inferior. 
• border-left: controla a borda esquerda. 
 
Sempre nessa ordem. Assim, se a propriedade border-style tiver quatro valores: 
 
border-style: dotted solid double dashed 
• borda superior é pontilhada; 
• borda direita é sólida; 
• borda inferior é dupla; 
• borda esquerda é tracejada. 
 
Se a propriedade border-style tiver três valores: 
 
border-style: dotted solid double; 
• borda superior é pontilhada; 
• as bordas direita e esquerda são sólidas; 
• borda inferior é dupla. 
 
Se a propriedade border-style tiver dois valores: 
border-style: dotted solid; 
• as bordas superior e inferior são pontilhadas; 
• as bordas direita e esquerda são sólidas. 
 
Se a propriedade border-style tiver um valor: 
 
border-style: dotted; 
• todas as quatro bordas são pontilhadas. 
 
Também é possível controlar as propriedades de borda individualmente para cada lado utilizando 
as propriedades border-top-width, border-top-style, border-top-color,border-right-width, 
border-right-style, border-right-color, border-bottom-width, border-bottom-style, border-
bottom-color, border-left-width, border-left-style, and border-left-color. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
201
504
 
 
 
 
 
Há muitas propriedades a serem consideradas ao lidar com bordas, entretanto, para encurtar o 
código, também é possível especificar todas as propriedades de borda individuais em uma 
propriedade. 
 
A propriedade border é uma propriedade abreviada para as seguintes propriedades de borda 
individuais: 
 
/* Sintaxe geral */ 
border: width style color; 
 
/* Definir a borda como vermelha, largura de 5 pixels e sólida */ 
border: 5px solid red; 
 
/* Definir a borda como azul, largura de 2 pixels e tracejada */ 
border: 2px dotted blue; 
 
/* Definir a borda como verde, largura de 1 ponto e dupla */ 
border: 1pt double green; 
 
/* Definir a borda superior como vermelha, largura de 5 pixels e sólida */ 
border-top: 5px solid red; 
 
/* Definir a borda direita como azul, largura de 2 pixels e tracejada */ 
border-right: 2px dotted blue; 
 
/* Definir a borda inferior e esquerda como verde, largura de 1 ponto e dupla 
*/ 
border-bottom: 1pt double green; 
border-left: 1pt double green; 
 
As propriedades de bordas arredondadas do CSS permitem criar bordas arredondadas em 
elementos HTML. A propriedade principal para controlar bordas arredondadas é a border-radius. 
 
/* Sintaxe geral */ 
border-radius: horizontal vertical; 
 
/* Definir borda arredondada com raio de 20 pixels */ 
border-radius: 20px; 
 
/* Definir borda arredondada com raio horizontal de 30 pixels e raio vertical 
de 10 pixels */ 
border-radius: 30px 10px; 
 
/* Definir raio de borda arredondada superior esquerda como 30 pixels */ 
border-top-left-radius: 30px; 
 
/* Definir raio de borda arredondada superior direita como 10 pixels */ 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
202
504
 
 
 
 
 
border-top-right-radius: 10px; 
 
/* Definir raio de borda arredondada inferior esquerda como 5 pixels */ 
border-bottom-left-radius: 5px; 
 
/* Definir raio de borda arredondada inferior direita como 15 pixels */ 
border-bottom-right-radius: 15px; 
 
 
Professora, para quê tanto exemplo? Porque cai em prova! 
 
Vejamos agora todas as propriedades de borda CSS 
 
Propriedades de 
Borda CSS 
Descrição 
border Define todas as propriedades de borda em uma declaração 
border-bottom Define todas as propriedades da borda inferior em uma declaração 
border-bottom-color Define a cor da borda inferior 
border-bottom-style Define o estilo da borda inferior 
border-bottom-width Define a largura da borda inferior 
border-color Define a cor das quatro bordas 
border-left Define todas as propriedades da borda esquerda em uma declaração 
border-left-color Define a cor da borda esquerda 
border-left-style Define o estilo da borda esquerda 
border-left-width Define a largura da borda esquerda 
border-radius 
Define todas as quatro propriedades border-*-radius para cantos 
arredondados 
border-right Define todas as propriedades da borda direita em uma declaração 
border-right-color Define a cor da borda direita 
border-right-style Define o estilo da borda direita 
border-right-width Define a largura da borda direita 
border-style Define o estilo das quatro bordas 
border-top Define todas as propriedades da borda superior em uma declaração 
border-top-color Define a cor da borda superior 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
203
504
 
 
 
 
 
border-top-style Define o estilo da borda superior 
border-top-width Define a largura da borda superior 
border-width Define a largura das quatro bordas 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
204
504
 
 
 
 
 
Margens CSS 
 
As margens são usadas para criar espaço ao redor dos elementos, fora de qualquer borda 
definida. Elas permitem controlar o espaço fora de um elemento HTML. Consiste na área 
transparente ao redor de um elemento e o separa dos elementos vizinhos. 
 
A propriedade principal para controlar margens é a margin. 
 
margin: top right bottom left; 
 
Em que top, right, bottom e left são valores que determinam a largura da margem em cima, à 
direita, embaixo e à esquerda, respectivamente. Você pode usar unidades como pixels, pontos 
ou porcentagens. Todas as propriedades de margem podem ter os seguintes valores: 
 
• auto - o navegador calcula a margem 
• length (comprimento) - especifica uma margem em px, pt, cm, etc. 
• % - especifica uma margem em % da largura do elemento recipiente 
• inherit (herdar) - especifica que a margem deve ser herdada do elemento pai 
 
Você pode definir a propriedade margin para autocentralizar horizontalmente o elemento em 
seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido 
igualmente entre as margens esquerda e direita. 
 
/* Definir margem de 10 pixels em todos os lados */ 
margin: 10px; 
 
/* Definir margem de 5 pixels em cima e embaixo, e 20 pixels à direita e esquerda 
*/ 
margin: 5px 20px; 
 
/* Definir margem de 10 pixels em cima, 20 pixels à direita, 30 pixels embaixo 
e 40 pixels à esquerda */ 
margin: 10px 20px 30px 40px; 
 
Você também pode controlar as margens individualmente para cada lado usando as 
propriedades margin-top, margin-right, margin-bottom, e margin-left. 
 
/* Definir margem superior como 10 pixels */ 
margin-top: 10px; 
 
/* Definir margem direita como 20 pixels */ 
margin-right: 20px; 
 
/* Definir margem inferior como 30 pixels */ 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
205
504
 
 
 
 
 
margin-bottom: 30px; 
 
/* Definir margem esquerda como 40 pixels */ 
margin-left: 40px; 
 
As margens são importantes para controlar o espaçamento e a disposição de elementos na 
página web, e podem ser usadas para criar uma aparência mais organizada e estruturada para 
seu site. 
 
Propriedades de 
Margem CSS 
Descrição 
margin Uma propriedade abreviada para definir todas as propriedades de 
margem em uma declaração 
margin-bottom Define a margem inferior de um elemento 
margin-left Define a margem esquerda de um elemento 
margin-right Define a margem direita de um elemento 
margin-top Define a margem superior de um elemento 
 
Às vezes, as margens superior e inferior dos elementos são recolhidas em uma única margem 
que é igual à maior das duas margens. Isso não acontece nas margens esquerda e direita! Apenas 
as margens superior e inferior! 
 
As margens são importantes para controlar o espaçamento e a disposição de elementos na 
página web, e podem ser usadas para criar uma aparência mais organizada e estruturada para 
seu site. 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
206
504
 
 
 
 
 
Preenchimento CSS 
 
O preenchimento CSS controla o espaço dentro de um elemento HTML. O preenchimento é a 
área preenchida dentro de um elemento, ocupando o espaço entre o seu conteúdo e sua borda. 
 
A propriedade principal para controlar o preenchimento é a padding. A sintaxe geral é: 
 
padding: top right bottom left; 
 
Em que top, right, bottom e left são valores que determinam a largura do preenchimentoem 
cima, à direita, embaixo e à esquerda, respectivamente. Você pode usar unidades como pixels, 
pontos ou porcentagens. Vejamos os exemplos: 
 
/* Definir preenchimento de 10 pixels em todos os lados */ 
padding: 10px; 
 
/* Definir preenchimento de 5 pixels em cima e embaixo, e 20 pixels à direita e 
esquerda */ 
padding: 5px 20px; 
 
/* Definir preenchimento de 10 pixels em cima, 20 pixels à direita, 30 pixels 
embaixo e 40 pixels à esquerda */ 
padding: 10px 20px 30px 40px; 
 
Você também pode controlar o preenchimento individualmente para cada lado usando as 
propriedades padding-top, padding-right, padding-bottom, e padding-left. 
 
Todas as propriedades de preenchimento podem ter os seguintes valores: 
 
• length - especifica um preenchimento em px, pt, cm, etc. 
• %- especifica um preenchimento em % da largura do elemento que o contém 
• inherit - especifica que o preenchimento deve ser herdado do elemento pai 
 
Frise-se que valores negativos não são permitidos. 
 
/* Definir preenchimento superior como 10 pixels */ 
padding-top: 10px; 
 
/* Definir preenchimento direita como 20 pixels */ 
padding-right: 20px; 
 
/* Definir preenchimento inferior como 30 pixels */ 
padding-bottom: 30px; 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
207
504
 
 
 
 
 
/* Definir preenchimento esquerda como 40 pixels */ 
padding-left: 40px; 
 
A propriedade CSS width especifica a largura da área de conteúdo do elemento. A área de 
conteúdo é a parte dentro do preenchimento, borda e margem de um elemento (o modelo de 
caixa). Portanto, se um elemento tiver uma largura especificada, o preenchimento adicionado a 
esse elemento será adicionado à largura total do elemento. Isso geralmente é um resultado 
indesejável. 
 
Propriedades de 
Preenchimento CSS 
Descrição 
padding Uma propriedade abreviada para definir todas as propriedades de 
preenchimento em uma declaração 
padding-bottom Define o preenchimento inferior de um elemento 
padding-left Define o preenchimento esquerdo de um elemento 
padding-right Define o preenchimento correto de um elemento 
padding-top Define o preenchimento superior de um elemento 
 
O preenchimento é importante para controlar o espaçamento entre o conteúdo e a borda de um 
elemento, e pode ser usado para criar uma aparência mais atraente e organizada para seu site. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
208
504
 
 
 
 
 
Altura, largura e largura máxima do CSS 
 
A altura, largura e largura máxima são propriedades CSS que controlam o tamanho de um 
elemento HTML. 
 
A propriedade height define a altura de um elemento, a propriedade width define a largura de 
um elemento e a propriedade max-width define a largura máxima de um elemento. Vejamos a 
sintaxe para definir altura, largura e largura máxima, respectivamente: 
 
/* Sintaxe para definir altura, largura e largura máxima, respectivamente */ 
height: value; 
width: value; 
max-width: value; 
 
Em que value é o valor da altura, largura ou largura máxima. Você pode usar unidades como 
pixels, pontos ou porcentagens. 
 
/* Definir altura como 200 pixels */ 
height: 200px; 
 
/* Definir largura como 50% */ 
width: 50%; 
 
/* Definir largura máxima como 500 pixels */ 
max-width: 500px; 
 
A propriedade max-width é usada para definir a largura máxima de um elemento. Ela pode ser 
especificada em valores de comprimento , como px, cm, etc., ou em porcentagem (%) do bloco 
que o contém, ou definido como nenhum (este é o padrão. Significa que não há largura máxima). 
 
Quando a janela do navegador é menor que a largura do elemento (500px), o navegador então 
adiciona uma barra de rolagem horizontal à página. Uma boa opção é usar max-width nessa 
situação, assim, irá melhorar o manuseio de janelas pequenas pelo navegador. 
 
Observe que, se a largura máxima for definida e a largura do elemento exceder o valor da largura 
máxima, a largura do elemento será automaticamente ajustada para o valor da largura máxima. 
 
Nota que, se por algum motivo você usar a width e max-width no mesmo elemento e o valor da 
width for maior que a max-width, a max-width será usada (e a width será ignorada). 
 
As propriedades heighte width podem ter os seguintes valores: 
 
• auto- Este é o padrão. O navegador calcula a altura e a largura 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
209
504
 
 
 
 
 
• length- Define a altura/largura em px, cm, etc. 
• %- Define a altura/largura em porcentagem do bloco que o contém 
• initial- Define a altura/largura para seu valor padrão 
• inherit- A altura/largura será herdada de seu valor pai 
 
Propriedades de 
Preenchimento CSS 
Descrição 
height Define a altura de um elemento 
max-height Define a altura máxima de um elemento 
max-width Define a largura máxima de um elemento 
min-height Define a altura mínima de um elemento 
min-width Define a largura mínima de um elemento 
width Define a largura de um elemento 
 
A altura, largura e largura máxima são importantes para controlar o tamanho de elementos na 
página web e podem ser usadas para criar uma aparência mais organizada e estruturada para 
seu site. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
210
504
 
 
 
 
 
Modelo de Caixa CSS 
 
O modelo de caixa CSS é o modelo que define como o conteúdo, borda, preenchimento e 
margem de um elemento HTML são exibidos e gerenciados na página. O modelo de caixa CSS 
é composto pelas seguintes partes: 
 
• Conteúdo: é o conteúdo real dentro do elemento, como texto, imagens, etc. 
• Preenchimento: é o espaço entre o conteúdo e a borda, controlado pela propriedade 
padding. 
• Borda: é uma linha ao redor do preenchimento e do conteúdo, controlada pelas 
propriedades border-width, border-style e border-color. 
• Margem: é o espaço fora da borda, controlado pela propriedade margin. 
 
Cada parte pode ser controlada individualmente para dar ao elemento o visual desejado. Além 
disso, o modelo de caixa também afeta como o tamanho de um elemento é calculado, incluindo 
sua altura, largura, etc. 
 
A compreensão do modelo de caixa CSS é fundamental para o desenvolvimento de páginas web 
profissionais e é usado para criar layouts, espaçamento e visualização de elementos na página. 
 
A largura total de um elemento deve ser calculada assim: 
 
• Largura total do elemento = largura + preenchimento esquerdo + preenchimento direito 
+ borda esquerda + borda direita + margem esquerda + margem direita 
 
A altura total de um elemento deve ser calculada assim: 
 
• Altura total do elemento = altura + preenchimento superior + preenchimento inferior + 
borda superior + borda inferior + margem superior + margem inferior 
 
Contorno do CSS 
 
Um contorno é uma linha desenhada ao redor dos elementos, FORA das bordas, para fazer o 
elemento "se destacar". 
 
CSS tem as seguintes propriedades de contorno: 
 
• outline-style 
• outline-color 
• outline-width 
• outline-offset 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
211
504
 
 
 
 
 
• outline 
Estilo de Contorno CSS 
A propriedade outline-style especifica o estilo do contorno e pode ter um dos seguintes valores: 
 
• dotted- Define um contorno pontilhado 
• dashed- Define um contorno tracejado 
• solid- Define um contorno sólido 
• double- Define um contorno duplo 
• groove- Define umcontorno ranhurado 3D 
• ridge- Define um contorno estriado 3D 
• inset- Define um contorno de inserção 3D 
• outset- Define um esboço inicial 3D 
• none- Não define contorno 
• hidden- Define um contorno oculto 
 
Largura do Contorno do CSS 
 
A propriedade outline-width especifica a largura do contorno e pode ter um dos seguintes 
valores: 
 
• fino (normalmente 1px) 
• médio (normalmente 3px) 
• espessura (normalmente 5px) 
• Um tamanho específico (em px, pt, cm, em, etc) 
 
Cor do Contorno do CSS 
 
A propriedade outline-color é usada para definir a cor do contorno. 
 
A cor pode ser definida por: 
 
• nome - especifique um nome de cor, como "vermelho" 
• HEX - especifique um valor hexadecimal, como "#ff0000" 
• RGB - especifique um valor RGB, como "rgb(255,0,0)" 
• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)" 
• invert - realiza uma inversão de cores (o que garante que o contorno fique visível, 
independentemente da cor do fundo) 
 
Abreviação do Contorno do CSS 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
212
504
 
 
 
 
 
A propriedade outline é uma propriedade de abreviação CSS que permite definir todas as 
propriedades de linha de uma só vez. A propriedade de linha define uma linha ao redor de um 
elemento que é exibida fora da borda, mas ainda faz parte do modelo de caixa. 
 
outline: width style color; 
 
• width é a espessura da linha, em pixels ou outra unidade. 
• style é o estilo da linha, como solido, pontilhado etc. 
• color é a cor da linha. 
 
/* Define uma linha de 1 px de largura, sólida e verde */ 
outline: 1px solid green; 
 
Observe que, ao contrário da propriedade border, a propriedade outline não afeta o tamanho 
do elemento, portanto, não afeta a disposição dos outros elementos na página. Além disso, a 
propriedade outline não tem preenchimento. 
 
A propriedade outline é uma alternativa mais rápida às propriedades separadas de linha, como 
outline-width, outline-style e outline-color, e é usada para definir rapidamente a aparência da 
linha em torno de um elemento. 
 
Propriedades de 
Contorno CSS 
Descrição 
outline Uma propriedade abreviada para definir a largura do contorno, o 
estilo do contorno e a cor do contorno em uma declaração 
outline-color Define a cor de um contorno 
outline-offset Especifica o espaço entre um contorno e a borda ou borda de um 
elemento 
outline-style Define o estilo de um contorno 
outline-width Define a largura de um contorno 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
213
504
 
 
 
 
 
Texto CSS 
 
A propriedade color é usada para definir a cor do texto. A cor é especificada por: 
 
um nome de cor - como "vermelho" 
um valor HEX - como "#ff0000" 
um valor RGB - como "rgb(255,0,0)" 
Consulte Valores de cores CSS para obter uma lista completa de possíveis valores de cores. 
 
O CSS oferece uma ampla gama de propriedades para formatar o texto, incluindo: 
 
Propriedade Descrição 
font-family Define a fonte para o texto. 
font-size Define o tamanho da fonte. 
font-weight Define o peso da fonte (normal, bold, etc.). 
line-height Define a altura da linha. 
letter-spacing Define o espaçamento entre letras. 
word-spacing Define o espaçamento entre palavras. 
text-align Define o alinhamento do texto (esquerda, direita, centro, justificado). 
text-decoration Define a decoração do texto (sublinhado, riscado, etc.). 
text-transform Define a transformação do texto (maiúsculas, minúsculas, 
capitalização). 
color Define a cor do texto. 
text-shadow Define uma sombra para o texto. 
 
Essas propriedades permitem aos desenvolvedores de páginas web personalizar a aparência do 
texto de acordo com suas necessidades e criar aparências atraentes e profissionais. 
 
A formatação do texto também pode ser herdada de um elemento pai para seus elementos 
filhos, a menos que seja especificamente sobrescrita para um elemento filho. 
 
Cor do texto 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
214
504
 
 
 
 
 
A propriedade color é usada para definir a cor do texto. A cor pode ser especificada como uma 
string de cor RGB, HEX, RGBA ou como uma palavra-chave (por exemplo, "red" ou "blue"). A 
cor é especificada por: 
 
• um nome de cor - como "vermelho" 
• um valor HEX - como "#ff0000" 
• um valor RGB - como "rgb(255,0,0)" 
 
p { 
 color: blue; 
} 
 
Propriedades de Cor 
do Texto 
Descrição 
color Especifica a cor do texto 
opacity Esta propriedade define a opacidade do texto. Um valor de 1 é 
totalmente opaco, enquanto um valor de 0 é totalmente transparente. 
text-shadow Adiciona uma sombra ao texto. É possível especificar a cor da sombra, 
a distância da sombra em relação ao texto e o tamanho da sombra. 
background-color Define a cor de fundo do elemento que contém o texto. Quando o 
texto tem uma cor diferente da cor de fundo, a propriedade 
background-color torna-se evidente. 
text-decoration Permite adicionar uma linha, sublinhado ou overline ao texto. É 
possível especificar a cor e o estilo da linha. 
 
Alinhamento e direção do texto 
 
A propriedade text-align é usada para alinhar o texto a esquerda, a direita, no centro ou 
justificado. 
 
p { 
 text-align: center; 
} 
 
O exemplo a seguir mostra o texto alinhado ao centro e à esquerda e à direita (o alinhamento à 
esquerda é padrão se a direção do texto for da esquerda para a direita e o alinhamento à direita 
é padrão se a direção do texto for da direita para a esquerda): 
 
h1 { 
 text-align: center; 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
215
504
 
 
 
 
 
} 
 
h2 { 
 text-align: left; 
} 
 
h3 { 
 text-align: right; 
} 
div { 
 text-align: justify; 
} 
 
Quando a propriedade text-align é definida como "justify", cada linha é esticada para que cada 
linha tenha a mesma largura e as margens esquerda e direita sejam retas (como em revistas e 
jornais): 
 
A propriedade direction é usada para especificar a direção do texto, ou seja, se ele será escrito 
da esquerda para a direita (ltr) ou da direita para a esquerda (rtl). Já, a propriedade text-align-
last é usada para alinhar a última linha de um texto justificado. 
 
A propriedade Bidirecionalidade do Texto Unicode unicode-bidi é usada para controlar a direção 
de exibição de caracteres bidirecionais (por exemplo, árabes e hebreus) no texto. 
 
Propriedades de 
alinhamento/direção 
do texto CSS 
Descrição 
direction Especifica a direção do texto/direção da escrita 
text-align Especifica o alinhamento horizontal do texto 
text-align-last Especifica como alinhar a última linha de um texto 
unicode-bidi Usado junto com a propriedade de direção para definir ou retornar se 
o texto deve ser substituído para suportar vários idiomas no mesmo 
documento 
vertical-align Define o alinhamento vertical de um elemento 
 
Propriedades de Decoração de Texto 
 
• A propriedade text-decoration é usada para adicionar uma decoração ao texto, como 
sublinhado, riscado, entre outros. 
• A propriedade text-decoration-line é usada para especificar a linha de decoração a ser 
aplicada ao texto. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
216
504
 
 
 
 
 
• A propriedade text-decoration-color é usada para especificar a cor da decoração de texto. 
• A propriedade text-decoration-style é usada para especificar o estilo da decoraçãode 
texto, como sólido, duplo, entre outros. 
• A propriedade text-decoration-thickness é usada para especificar a espessura da 
decoração de texto. 
 
a { 
 text-decoration: underline; 
} 
 
a { 
 text-decoration-line: underline; 
 text-decoration-color: blue; 
 text-decoration-style: double; 
 text-decoration-thickness: 2px; 
} 
 
 
Propriedades de 
Decoração de Texto 
CSS 
Descrição 
text-decoration 
Define todas as propriedades de decoração de texto em uma 
declaração 
text-decoration-color Especifica a cor da decoração do texto 
text-decoration-line 
Especifica o tipo de decoração de texto a ser usado (sublinhado, 
sobrelinhado, etc.) 
text-decoration-style Especifica o estilo da decoração do texto (sólido, pontilhado, etc.) 
text-decoration-
thickness 
Especifica a espessura da linha de decoração do texto 
 
Transformação de Texto CSS 
 
A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um 
texto. Ele pode ser usado para transformar tudo em letras maiúsculas ou minúsculas, ou colocar 
em maiúscula a primeira letra de cada palavra: 
 
p.uppercase { 
 text-transform: uppercase; 
} 
 
p.lowercase { 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
217
504
 
 
 
 
 
 text-transform: lowercase; 
} 
 
p.capitalize { 
 text-transform: capitalize; 
} 
 
Propriedades de 
Transformação de 
Texto CSS 
Descrição 
text-transform Controla a capitalização do texto 
 
Espaçamento do Texto CSS 
 
• A propriedade text-indent é usada para especificar a indentação do primeiro parágrafo 
de um elemento. 
• A propriedade letter-spacing é usada para especificar o espaçamento entre as letras em 
um elemento. 
• A propriedade line-height é usada para especificar a altura da linha de um elemento. 
• A propriedade word-spacing é usada para especificar o espaçamento entre as palavras 
em um elemento. 
• A propriedade white-space é usada para especificar como o espaço em branco é tratado 
em um elemento. 
 
p { 
 text-indent: 50px; 
 letter-spacing: 2px; 
 line-height: 1.5; 
 word-spacing: 10px; 
 white-space: pre-wrap; 
} 
 
Propriedades de 
Decoração de Texto 
CSS 
Descrição 
letter-spacing Especifica o espaço entre os caracteres em um texto 
line-height Especifica a altura da linha 
text-indent Especifica o recuo da primeira linha em um bloco de texto 
white-space Especifica como lidar com espaço em branco dentro de um elemento 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
218
504
 
 
 
 
 
word-spacing Especifica o espaço entre as palavras em um texto 
 
Sombra de Texto CSS 
 
A propriedade text-shadow é usada para adicionar uma sombra ao texto em um elemento CSS. 
Ela permite especificar a posição horizontal, vertical e a opacidade da sombra, além da cor. 
 
Em seu uso mais simples, você especifica apenas a sombra horizontal (2px) e a sombra vertical 
(2px): 
 
h1 { 
 text-shadow: 2px 2px; 
} 
 
p { 
 text-shadow: 2px 2px 5px gray; 
} 
 
No último exemplo, a sombra tem uma posição horizontal de 2px à direita do texto, uma posição 
vertical de 2px abaixo do texto e tem uma opacidade de 5px com a cor cinza. 
 
Propriedades de 
Sombra de Texto CSS 
Descrição 
text-shadow Especifica o efeito de sombra adicionado ao texto 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
219
504
 
 
 
 
 
Fontes CSS 
 
A propriedade font é uma propriedade abreviada que permite especificar várias propriedades 
de fonte em um único valor, como tamanho, estilo, variante e peso. Isso facilita a escrita de regras 
de estilo e economiza tempo. A ordem das propriedades especificadas na propriedade abreviada 
é font-style, font-variant, font-weight, font-size, line-height e font-family. 
 
Escolher a fonte certa tem um grande impacto em como os leitores experimentam um site. A 
fonte certa pode criar uma identidade forte para sua marca. Usar uma fonte fácil de ler é 
importante. A fonte agrega valor ao seu texto. Também é importante escolher a cor e o tamanho 
do texto corretos para a fonte. 
 
Em CSS existem cinco famílias de fontes genéricas: 
 
• As fontes serifadas têm um pequeno traço nas bordas de cada letra. Eles criam uma 
sensação de formalidade e elegância. 
• As fontes sem serifa têm linhas limpas (sem pequenos traços anexados). Eles criam um 
visual moderno e minimalista. 
• Fontes monoespaçadas - aqui todas as letras têm a mesma largura fixa. Eles criam uma 
aparência mecânica. 
• As fontes cursivas imitam a caligrafia humana. 
• Fontes fantasia são fontes decorativas/divertidas. 
 
 
 
Dica: A propriedade font-family deve conter vários nomes de fontes como um sistema "fallback", 
para garantir a compatibilidade máxima entre navegadores/sistemas operacionais. Comece com 
a fonte desejada e termine com uma família genérica (para permitir que o navegador escolha 
uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível). Os nomes 
das fontes devem ser separados por vírgula. Leia mais sobre fontes alternativas no próximo 
capítulo. 
 
.p1 { 
 font-family: "Times New Roman", Times, serif; 
} 
 
.p2 { 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
220
504
 
 
 
 
 
 font-family: Arial, Helvetica, sans-serif; 
} 
 
.p3 { 
 font-family: "Lucida Console", "Courier New", monospace; 
} 
 
 
 
O que são fontes seguras da Web? Fontes seguras da Web são fontes instaladas universalmente 
em todos os navegadores e dispositivos. No entanto, não existem fontes 100% totalmente 
seguras para a Web. Há sempre uma chance de que uma fonte não seja encontrada ou instalada 
corretamente. Portanto, é muito importante sempre usar fontes alternativas. 
 
Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes na font-
family. Se a primeira fonte não funcionar, o navegador tentará a próxima, a próxima e assim por 
diante. Sempre termine a lista com um nome de família de fonte genérico. 
 
Vejamos as melhores fontes seguras da Web para HTML e CSS! 
A lista a seguir apresenta as melhores fontes seguras da Web para HTML e CSS: 
 
• Arial (sem serifa) 
• Verdana (sem serifa) 
• Tahoma (sem serifa) 
• Trebuchet MS (sem serifa) 
• Times New Roman (serif) 
• Geórgia (serifa) 
• Garamond (serifa) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
221
504
 
 
 
 
 
• Courier New (monoespacial) 
• Brush Script MT (cursiva) 
 
Arial é a fonte mais amplamente usada para mídia online e impressa. Arial também é a fonte 
padrão no Google Docs. Arial é uma das fontes da web mais seguras e está disponível em todos 
os principais sistemas operacionais. 
 
Os fallbacks de fonte são fontes de backup que são usadas caso a fonte original não esteja 
disponível em um dispositivo ou sistema operacional. Abaixo estão alguns fallbacks de fontes 
comumente usados, organizados pelas 5 famílias de fontes genéricas: 
 
• Serif: Times New Roman, Georgia 
• Sans-serif: Arial, Verdana, Helvetica 
• Monospace: Courier New, Lucida Console 
 
Novamente, pessoal, ao especificar uma fonte, é importante listar várias opções de fallback, para 
garantir que a fonte desejada apareça de maneira consistente em diferentes dispositivos e 
sistemas operacionais. É recomendado usar fontes genéricas, como serif, sans-serif ou 
monospace, como último recurso. 
 
Estilo de fonte CSS 
 
A propriedade font-style é usadaprincipalmente para especificar texto em itálico. Esta 
propriedade tem três valores: 
 
• normal - O texto é mostrado normalmente 
• itálico - O texto é mostrado em itálico 
• oblique - O texto está "inclinado" (oblique é muito semelhante ao itálico, mas menos 
suportado) 
 
p{ 
 font-style: normal; 
 font-style: italic; 
 font-style: oblique; 
} 
 
p{ 
 
 font-weight: normal; 
 font-weight: bold; 
} 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
222
504
 
 
 
 
 
A propriedade font-variant especifica se um texto deve ou não ser exibido em uma fonte 
minúscula. Em uma fonte minúscula, todas as letras minúsculas são convertidas em maiúsculas. 
No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor do que 
as letras maiúsculas originais no texto. 
 
p.normal { 
 font-variant: normal; 
} 
 
p.small { 
 font-variant: small-caps; 
} 
 
Tamanho da fonte 
 
A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto 
é importante em web design. No entanto, você não deve usar ajustes de tamanho de fonte para 
fazer parágrafos parecerem títulos ou títulos parecerem parágrafos. Sempre use as tags HTML 
apropriadas, como <h1> - <h6> para títulos e <p> para parágrafos. 
 
O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo. 
 
Tamanho absoluto: 
 
• Define o texto para um tamanho especificado 
• Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim 
por motivos de acessibilidade) 
• O tamanho absoluto é útil quando o tamanho físico da saída é conhecido 
 
Tamanho relativo: 
 
• Define o tamanho relativo aos elementos circundantes 
• Permite que um usuário altere o tamanho do texto nos navegadores 
• Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, 
como parágrafos, é 16px (16px=1em). 
 
Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos 
desenvolvedores usam em em vez de pixels. 1em é igual ao tamanho da fonte atual. O tamanho 
de texto padrão nos navegadores é 16px. Portanto, o tamanho padrão de 1em é 16px. O 
tamanho pode ser calculado de pixels para em usando esta fórmula: pixels /16= em 
 
h1 { 
 font-size: 2.5em; /* 40px/16=2.5em */ 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
223
504
 
 
 
 
 
} 
 
h2 { 
 font-size: 1.875em; /* 30px/16=1.875em */ 
} 
 
p { 
 font-size: 0.875em; /* 14px/16=0.875em */ 
} 
 
No exemplo acima, o tamanho do texto em em é o mesmo do exemplo anterior em pixels. 
Porém, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores. 
Infelizmente, ainda há um problema com versões mais antigas do Internet Explorer. O texto fica 
maior do que deveria quando aumentado e menor do que deveria quando reduzido. 
 
As Fontes do Google são uma 
coleção de fontes de 
caracteres disponíveis 
gratuitamente para uso na 
web. Elas podem ser 
incorporadas em uma página 
web através de um link para o 
CSS da fonte fornecido pelo 
Google. 
 
A vantagem de usar as Fontes do Google é que elas são otimizadas para a web, o que significa 
que são carregadas rapidamente e renderizadas de maneira consistente em diferentes 
dispositivos e sistemas operacionais. Além disso, o Google oferece uma ampla seleção de fontes, 
incluindo fontes serif, sans-serif, monospace e muito mais. 
 
Aqui está um exemplo de como incorporar uma fonte do Google em uma página web: 
 
<link 
href="https://fonts.googleapis.com/css2?family=Open+Sans:italic,bold&display=s
wap" rel="stylesheet"> 
 
<style> 
 p { 
 font-family: 'Open Sans', sans-serif; 
 font-style: italic; 
 font-weight: bold; 
 } 
</style> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
224
504
 
 
 
 
 
Nesse exemplo, estamos incorporando a fonte "Open Sans" do Google e definindo sua família 
de fontes, estilo e peso na seção de estilo da página. 
 
O Google também ativou diferentes efeitos de fonte que você pode usar. Para habilitar efeitos 
de fonte no Google Fonts, você precisa selecionar uma fonte que tenha efeitos disponíveis e 
adicioná-la à sua página. Algumas fontes possuem vários efeitos, como itálico, negrito, 
sublinhado, efeito especial, entre outros. Para habilitar esses efeitos, basta incluí-los na tag "link" 
que você usa para incorporar a fonte na sua página. 
 
Primeiro adicione à API do Google e, em seguida, adicione um nome de classe especial ao 
elemento que usará o efeito especial. O nome da classe sempre começa e termina com 
.effect=effectnamefont-effect-effectname 
 
Vejamos como ficam esses efeitos especiais na fonte! 
 
<head> 
<link rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss
|shadow-multiple"> 
<style> 
body { 
 font-family: "Sofia", sans-serif; 
 font-size: 30px; 
} 
</style> 
</head> 
<body> 
 
<h1 class="font-effect-neon">Neon Effect</h1> 
<h1 class="font-effect-outline">Outline Effect</h1> 
<h1 class="font-effect-emboss">Emboss Effect</h1> 
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1> 
 
</body> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
225
504
 
 
 
 
 
 
 
Regras de emparelhamento de fontes 
 
As regras de emparelhamento de fontes são usadas para escolher fontes que tenham uma boa 
combinação entre si, com base em características como altura de linha, largura, espessura e 
outros atributos visuais. Vejamos as regras básicas. 
 
1. Complemento 
É sempre seguro encontrar pares de fontes que se complementam. Uma ótima combinação de 
fontes deve harmonizar, sem ser muito parecida ou muito diferente. 
 
2. Use superfamílias de fontes 
Uma superfamília de fontes é um conjunto de fontes projetadas para funcionar bem juntas. 
Portanto, usar fontes diferentes dentro da mesma superfamília é seguro. Por exemplo, a 
superfamília Lucida contém as seguintes fontes: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, 
Lucida Typewriter Serif e Lucida Math. 
 
3. O contraste é rei 
Duas fontes muito semelhantes geralmente entrarão em conflito. No entanto, os contrastes, 
feitos da maneira certa, trazem o melhor de cada fonte. Exemplo: Combinar serif com sans serif 
é uma combinação bem conhecida. Uma superfamília forte inclui variações com serifa e sem serifa 
da mesma fonte (por exemplo, Lucida e Lucida Sans). 
 
4. Escolha apenas um chefe 
Uma fonte deve ser o chefe. Isso estabelece uma hierarquia para as fontes em sua página. Isso 
pode ser conseguido variando o tamanho, peso e cor. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
226
504
 
 
 
 
 
 
5. Escolha fontes que tenham uma altura de linha semelhante: Isso ajuda a manter a consistência 
e legibilidade em todo o texto. 
 
6. Escolha fontes que tenham uma largura semelhante: Isso ajuda a garantir que o texto seja fácil 
de ler e que as palavras não sejam muito compactadas ou espaçadas. 
 
7. Escolha fontes que tenham uma espessura semelhante. Isso ajuda a manter um equilíbrio visual 
entre o texto e a fonte, garantindo que a fonte não seja muito pesada ou muito leve em relação 
ao texto. 
 
8. Escolha fontes que tenham uma personalidade semelhante. Isso pode incluir coisas como a 
forma dos caracteres, a inclinação das letras, ou outros detalhes estilísticos que fazem com que 
as fontes pareçam coesas quando usadas juntas. 
 
9.Escolha fontes que tenham um contraste visual adequado. Isso significa escolher fontes que 
se destaquem o suficiente uma da outra, mas não tanto que causem distração ou dificultem a 
leitura. 
 
Ao escolher fontes para usar juntas em um projeto, é importante ter em mente essas regras de 
emparelhamento para garantir que as fontes escolhidas sejam legíveis, visualmente agradáveis e 
combinem bem entre si. 
 
Para encurtar o código, também é possível especificar todas as propriedades de fonte individuais 
em uma propriedade. A propriedade font é uma propriedade abreviada para: 
 
• font-style 
• font-variant 
• font-weight 
• font-size/line-height 
• font-family 
 
Os valores font-sizee font-family são obrigatórios. Se um dos outros valores estiver ausente, seu 
valor padrão será usado. 
 
Fontes CSS Descrição 
font Define todas as propriedades da fonte em uma declaração 
font-family Especifica a família de fontes para texto 
font-size Especifica o tamanho da fonte do texto 
font-style Especifica o estilo de fonte do texto 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
227
504
 
 
 
 
 
font-variant 
Especifica se um texto deve ou não ser exibido em uma fonte 
minúscula 
font-weight Especifica o peso de uma fonte 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
228
504
 
 
 
 
 
Ícones de CSS 
 
Os ícones podem ser facilmente adicionados à sua página HTML, usando uma biblioteca de 
ícones. 
 
• Fontes de ícones: Utilizando fontes de ícones como Font Awesome, Glyphicons, etc. 
• Imagens: Adicionando imagens através de URLs ou arquivos locais. 
• SVG: Inserindo imagens SVG diretamente no HTML ou através de arquivos externos. 
• CSS pseudo-elementos: Utilizando pseudo-elementos como :before ou :after para criar 
ícones usando CSS. 
 
Como adicionar ícones? A maneira mais simples de adicionar um ícone à sua página HTML é com 
uma biblioteca de ícones, como Font Awesome. Adicione o nome da classe de ícone especificada 
a qualquer elemento HTML embutido (como <i>ou <span>). Todos os ícones nas bibliotecas de 
ícones abaixo são vetores escaláveis que podem ser personalizados com CSS (tamanho, cor, 
sombra, etc.) 
 
Fontes de Ícones Incríveis 
 
Para usar os ícones do Font Awesome, acesse 
fontawesome.com, faça login e obtenha um código para 
adicionar na <head>seção de sua página HTML: 
 
<script src="https://kit.fontawesome.com/yourcode.js" 
crossorigin="anonymous"></script> 
 
 
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://kit.fontawesome.com/a076d05399.js" 
crossorigin="anonymous"></script> 
</head> 
<body> 
 
<i class="fas fa-cloud"></i> 
<i class="fas fa-heart"></i> 
<i class="fas fa-car"></i> 
<i class="fas fa-file"></i> 
<i class="fas fa-bars"></i> 
 
</body> 
</html> 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
229
504
 
 
 
 
 
 
Ícones do Bootstrap 
 
Para usar os glyphicons do Bootstrap, adicione 
a seguinte linha dentro da <head>seção de sua 
página HTML: 
 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
 
<i class="glyphicon glyphicon-cloud"></i> 
<i class="glyphicon glyphicon-remove"></i> 
<i class="glyphicon glyphicon-user"></i> 
<i class="glyphicon glyphicon-envelope"></i> 
<i class="glyphicon glyphicon-thumbs-up"></i> 
 
</body> 
</html> 
 
 
 
ad
ici
on
ar
 íc
on
es
Fontes de ícones: Utilizando fontes de ícones como Font Awesome, Glyphicons, etc
Imagens: Adicionando imagens através de URLs ou arquivos locais.
SVG: Inserindo imagens SVG diretamente no HTML ou através de arquivos externos.
CSS pseudo-elementos: Utilizando pseudo-elementos como :before ou :after para criar 
ícones usando CSS.
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
230
504
 
 
 
 
 
Links CSS 
 
Com CSS, os links podem ser estilizados de várias maneiras 
diferentes. Os links podem ser estilizados com qualquer 
propriedade CSS (por exemplo color, font-family, 
background, etc.). Veja na imagem um link com a cor hotpink. 
 
a { 
 color: hotpink; 
} 
 
Além disso, os links podem ter estilos diferentes, dependendo do estado em que estão. 
 
Os quatro estados dos links são: 
 
• a:link- um link normal não visitado 
• a:visited- um link que o usuário visitou 
• a:hover- um link quando o usuário passa o mouse sobre ele 
• a:active- um link no momento em que é clicado 
 
/* unvisited link */ 
a:link { 
 color: red; 
} 
 
/* visited link */ 
a:visited { 
 color: green; 
} 
 
/* mouse over link */ 
a:hover { 
 color: hotpink; 
} 
 
/* selected link */ 
a:active { 
 color: blue; 
} 
 
Ao definir o estilo para vários estados de link, existem algumas regras de ordem: 
 
• a:hover DEVE vir depois de a:link e a:visited 
• a:active DEVE vir depois de a:hover 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
231
504
 
 
 
 
 
 
Decoração de texto 
 
A propriedade text-decoration é usada principalmente para remover sublinhados de links: 
 
a:link { 
 text-decoration: none; 
} 
 
a:visited { 
 text-decoration: none; 
} 
 
a:hover { 
 text-decoration: underline; 
} 
 
a:active { 
 text-decoration: underline; 
} 
 
Cor de fundo 
 
A background-color propriedade pode ser usada para especificar uma cor de fundo para links: 
 
a:link { 
 background-color: yellow; 
} 
 
a:visited { 
 background-color: cyan; 
} 
 
a:hover { 
 background-color: lightgreen; 
} 
 
a:active { 
 background-color: hotpink; 
} 
 
Botões de link 
 
Este exemplo demonstra um exemplo mais avançado onde combinamos várias propriedades CSS 
para exibir links como caixas/botões: 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
232
504
 
 
 
 
 
a:link, a:visited { 
 background-color: #f44336; 
 color: white; 
 padding: 14px 25px; 
 text-align: center; 
 text-decoration: none; 
 display: inline-block; 
} 
 
a:hover, a:active { 
 background-color: red; 
} 
 
Este exemplo demonstra como adicionar outros estilos aos hiperlinks: 
 
a.one:link {color: #ff0000;} 
a.one:visited {color: #0000ff;} 
a.one:hover {color: #ffcc00;} 
 
a.two:link {color: #ff0000;} 
a.two:visited {color: #0000ff;} 
a.two:hover {font-size: 150%;} 
 
a.three:link {color: #ff0000;} 
a.three:visited {color: #0000ff;} 
a.three:hover {background: #66ff66;} 
 
a.four:link {color: #ff0000;} 
a.four:visited {color: #0000ff;} 
a.four:hover {font-family: monospace;} 
 
a.five:link {color: #ff0000; text-decoration: none;} 
a.five:visited {color: #0000ff; text-decoration: none;} 
a.five:hover {text-decoration: underline;} 
 
Listas de CSS 
 
Listas não ordenadas: 
o Café 
o Chá 
o Coca Cola 
 
▪ Café 
▪ Chá 
▪ Coca Cola 
 
Listas Ordenadas: 
1. Café 
2. Chá 
3. Coca Cola 
 
I. Café 
II. Chá 
III. Coca Cola 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
233
504
 
 
 
 
 
Listas HTML e propriedades da lista CSS 
 
Em HTML, existem dois tipos principais de listas: 
 
• listas não ordenadas (<ul>) -os itens da lista são marcados com marcadores 
• listas ordenadas (<ol>) - os itens da lista são marcados com números ou letras 
 
As propriedades da lista CSS permitem: 
 
• Definir diferentes marcadores de itens de lista para listas ordenadas 
• Definir diferentes marcadores de itens de lista para listas não ordenadas 
• Definir uma imagem como marcador de item da lista 
• Adicionar cores de fundo a listas e itens de lista 
 
Marcadores de itens de lista diferentes 
 
A propriedade list-style-type especifica o tipo de marcador de item de lista. O exemplo a seguir 
mostra alguns dos marcadores de item de lista disponíveis: 
 
ul.a { 
 list-style-type: circle; 
} 
 
ul.b { 
 list-style-type: square; 
} 
 
ol.c { 
 list-style-type: upper-roman; 
} 
 
ol.d { 
 list-style-type: lower-alpha; 
} 
 
Uma imagem como marcador de item de lista 
 
A propriedade list-style-image especifica uma imagem como o marcador de item da lista: 
 
ul { 
 list-style-image: url('sqpurple.gif'); 
} 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
234
504
 
 
 
 
 
Posicione os Marcadores de Item da Lista 
 
A propriedade list-style-position especifica a posição dos marcadores de item de lista 
(marcadores). "list-style-position: outside;" significa que os marcadores estarão fora do item da 
lista. O início de cada linha de um item de lista será alinhado verticalmente. Este é o padrão: 
 
 
"list-style-position: inside;"significa que os marcadores estarão dentro do item da lista. Como faz 
parte do item da lista, ele fará parte do texto e colocará o texto no início: 
 
 
 
ul.a { 
 list-style-position: outside; 
} 
 
ul.b { 
 list-style-position: inside; 
} 
 
Remover configurações padrão 
 
A list-style-type:nonepropriedade também pode ser usada para remover os 
marcadores/marcadores. Observe que a lista também possui margem e preenchimento padrão. 
Para remover isso, adicione margin:0e padding:0a <ul> ou <ol>: 
 
ul { 
 list-style-type: none; 
 margin: 0; 
 padding: 0; 
} 
 
Lista - Propriedade abreviada 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
235
504
 
 
 
 
 
A propriedade list-style é uma propriedade abreviada. É usado para definir todas as propriedades 
da lista em uma declaração: 
 
ul { 
 list-style: square inside url("sqpurple.gif"); 
} 
 
Ao usar a propriedade abreviada, a ordem dos valores da propriedade é: 
 
• list-style-type(se uma imagem de estilo de lista for especificada, o valor desta propriedade 
será exibido se a imagem por algum motivo não puder ser exibida) 
• list-style-position(especifica se os marcadores de itens de lista devem aparecer dentro ou 
fora do fluxo de conteúdo) 
• list-style-image(especifica uma imagem como marcador de item da lista) 
 
Se um dos valores de propriedade acima estiver faltando, o valor padrão para a propriedade 
ausente será inserido, se houver. 
 
Lista de estilos com cores 
 
Também podemos estilizar listas com cores, para torná-las um pouco mais interessantes. Qualquer 
coisa adicionada à tag <ol> ou <ul> afeta a lista inteira, enquanto as propriedades adicionadas à 
tag <li> afetarão os itens individuais da lista: 
 
Propriedades de Listas 
CSS 
Descrição 
list-style Define todas as propriedades de uma lista em uma declaração 
list-style-image Especifica uma imagem como marcador de item de lista 
list-style-position Especifica a posição dos marcadores de item de lista (marcadores) 
list-style-type Especifica o tipo de marcador de item de lista 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
236
504
 
 
 
 
 
Tabelas CSS 
 
A aparência de uma tabela HTML pode ser muito melhorada com CSS! As tabelas em CSS 
podem ser estilizadas usando os seguintes conceitos: 
 
• CSS table properties: Propriedades como "border-collapse", "border-spacing", "width", 
"height", etc. podem ser usadas para controlar o aspecto de uma tabela. 
• CSS table-cell properties: Propriedades como "text-align", "vertical-align", "padding", etc. 
podem ser usadas para controlar o aspecto das células da tabela. 
• CSS pseudo-classes: Pseudo-classes como ":hover" podem ser usadas para mudar o estilo 
da tabela quando o usuário passa o mouse sobre ela. 
• CSS media queries: Media queries podem ser usadas para criar tabelas responsivas, que se 
adaptam a diferentes tamanhos de tela. 
 
Ao estilizar tabelas em CSS, é importante lembrar que o estilo da tabela deve ser claro, fácil de ler 
e acessível para todos os usuários. 
 
As bordas da tabela em CSS podem ser estilizadas usando as seguintes propriedades: 
 
• border-style: define o estilo da borda (solid, dotted, double, etc.). 
• border-width: define a largura da borda. 
• border-color: define a cor da borda. 
• border-collapse: define se as bordas das células compartilham espaço (collapse) ou não 
(separate). 
• border-spacing: define o espaçamento entre as células na tabela. 
 
Exemplo: 
 
table { 
 border-collapse: collapse; 
 width: 100%; 
} 
 
th, td { 
 border: 1px solid black; 
 text-align: left; 
 padding: 8px; 
} 
 
th { 
 background-color: #f2f2f2; 
} 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
237
504
 
 
 
 
 
Neste exemplo, as bordas da tabela são definidas como "collapse", com uma largura de 1px e cor 
preta. As células da tabela têm alinhamento à esquerda e 8px de padding. A célula de cabeçalho 
tem uma cor de fundo cinza claro. 
 
Uma tabela full-width é uma tabela que ocupa a largura total da tela, independentemente do 
tamanho da janela do navegador. Isso pode ser alcançado usando CSS com as seguintes etapas: 
 
1. Remover margens e padding da tabela: Isso pode ser feito usando o seguinte código: table 
{ margin: 0; padding: 0; }. 
 
2. Definir a largura da tabela como 100%: Isso pode ser feito usando o seguinte código: table 
{ width: 100%; }. 
 
3. Definir a largura de cada coluna da tabela: Isso pode ser feito usando o seguinte código: 
th, td { width: [porcentagem]; } , onde [porcentagem] é a porcentagem da largura total da 
tabela que cada coluna deve ocupar. 
 
4. Centralizar a tabela na tela: Isso pode ser feito usando o seguinte código: table { margin: 0 
auto; }. 
 
table { 
 margin: 0 auto; 
 padding: 0; 
 width: 100%; 
} 
 
th, td { 
 width: 25%; 
 border: 1px solid black; 
 text-align: left; 
 padding: 8px; 
} 
 
th { 
 background-color: #f2f2f2; 
} 
 
Neste exemplo, a tabela é definida com margem automática, sem padding e largura total da tela. 
Cada coluna ocupa 25% da largura total da tabela e tem bordas pretas, alinhamento à esquerda 
e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza claro. 
 
Recolher bordas da tabela (border-collapse) 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
238
504
 
 
 
 
 
As bordas da tabela podem ser colapsadas usando a propriedade "border-collapse" em CSS. A 
propriedade "border-collapse" determina se as bordas das células da tabela compartilham espaço 
(collapse) ou não (separate). 
 
Para colapsar as bordas da tabela, você pode usar o seguinte código: 
 
table { 
 border-collapse: collapse; 
 width: 100%; 
} 
 
th, td { 
 border: 1px solid black; 
 text-align: left; 
 padding: 8px; 
} 
 
th { 
 background-color: #f2f2f2; 
} 
 
Neste exemplo, as bordas da tabela são definidas como "collapse", ou seja, compartilham espaço. 
As células da tabela têmbordas pretas com largura de 1px, alinhamento à esquerda e 8px de 
padding. A célula de cabeçalho tem uma cor de fundo cinza claro. 
 
Tamanho da Tabela CSS 
 
O tamanho de uma tabela em CSS pode ser definido usando as seguintes propriedades: 
 
• width: define a largura da tabela em pixels ou porcentagem. 
• height: define a altura da tabela em pixels ou porcentagem. 
 
table { 
 width: 75%; 
 height: 300px; 
 margin: 0 auto; 
 border-collapse: collapse; 
} 
 
th, td { 
 border: 1px solid black; 
 text-align: left; 
 padding: 8px; 
} 
 
th { 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
239
504
 
 
 
 
 
 background-color: #f2f2f2; 
} 
 
Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. As bordas da tabela são 
definidas como "collapse". As células da tabela têm bordas pretas com largura de 1px, 
alinhamento à esquerda e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza 
claro. 
 
Alinhamento de Tabela CSS 
 
O alinhamento de uma tabela em CSS pode ser definido usando as seguintes propriedades: 
 
1. margin: define a margem ao redor da tabela. 
2. text-align: define o alinhamento do texto nas células da tabela. 
3. vertical-align: define o alinhamento vertical do conteúdo nas células da tabela. 
 
Exemplo: 
 
table { 
 width: 75%; 
 height: 300px; 
 margin: 0 auto; 
 border-collapse: collapse; 
 text-align: center; 
} 
 
th, td { 
 border: 1px solid black; 
 text-align: left; 
 padding: 8px; 
 vertical-align: middle; 
} 
 
th { 
 background-color: #f2f2f2; 
 text-align: center; 
} 
 
Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. A tabela está centralizada 
na tela com margem automática. O texto nas células da tabela está alinhado à esquerda, enquanto 
o texto no cabeçalho está centralizado. O conteúdo nas células da tabela está alinhado ao centro 
verticalmente. As bordas da tabela são definidas como "collapse". As células da tabela têm bordas 
pretas com largura de 1px e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza 
claro. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
240
504
 
 
 
 
 
 
Estilo de Tabela CSS 
 
O estilo de uma tabela em CSS pode ser definido usando as seguintes propriedades: 
 
1. border: define o estilo da borda da tabela. 
2. background-color: define a cor de fundo da tabela. 
3. color: define a cor do texto nas células da tabela. 
4. font-size: define o tamanho da fonte do texto nas células da tabela. 
5. padding: define o espaço entre o conteúdo e a borda da célula da tabela. 
 
Exemplo: 
 
table { 
 width: 75%; 
 height: 300px; 
 margin: 0 auto; 
 border-collapse: collapse; 
 text-align: center; 
 border: 2px solid blue; 
 background-color: #f2f2f2; 
 color: black; 
 font-size: 14px; 
} 
 
th, td { 
 border: 1px solid blue; 
 text-align: left; 
 padding: 8px; 
 vertical-align: middle; 
} 
 
th { 
 background-color: blue; 
 color: white; 
} 
 
Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. A tabela está centralizada 
na tela com margem automática. A borda da tabela é azul com largura de 2px, a cor de fundo é 
cinza claro e a cor do texto é preta. O tamanho da fonte do texto nas células da tabela é 14px. As 
bordas das células da tabela são azul com largura de 1px, o texto nas células da tabela está 
alinhado à esquerda, o conteúdo nas células da tabela está alinhado ao centro verticalmente e há 
8px de padding entre o conteúdo e a borda da célula da tabela. A célula de cabeçalho tem uma 
cor de fundo azul e a cor do texto é branca. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
241
504
 
 
 
 
 
Tabela Responsiva CSS 
 
A tabela responsiva é uma tabela que se adapta ao tamanho da tela, tornando-a legível em 
dispositivos de diferentes tamanhos, como computadores, tablets e smartphones. Isso é alcançado 
usando CSS (Folha de Estilo em cascata) e media queries. As media queries são usadas para 
detectar o tamanho da tela e aplicar estilos específicos para diferentes intervalos de tamanho de 
tela. Por exemplo, você pode fazer com que as colunas da tabela sejam exibidas uma abaixo da 
outra em dispositivos menores. 
 
Propriedades de 
Tabelas CSS 
Descrição 
border Define todas as propriedades de borda em uma declaração 
border-collapse Especifica se as bordas da tabela devem ou não ser recolhidas 
border-spacing Especifica a distância entre as bordas das células adjacentes 
caption-side Especifica o posicionamento de uma legenda de tabela 
empty-cells Especifica se deve ou não exibir bordas e fundo em células vazias em 
uma tabela 
table-layout Define o algoritmo de layout a ser usado para uma tabela 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
242
504
 
 
 
 
 
Layout CSS - A propriedade de exibição 
 
A propriedade de exibição display especifica se/como um elemento é exibido. Cada elemento 
HTML tem um valor de exibição padrão, dependendo do tipo de elemento. O valor de exibição 
padrão para a maioria dos elementos é blockou inline. 
 
Elementos de nível de bloco 
 
Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura 
disponível (estende-se para a esquerda e para a direita o máximo possível). 
 
O elemento <div> é um elemento de nível de bloco. Exemplos de elementos de nível de bloco: 
 
 
 
Elementos embutidos 
 
Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária. Exemplos 
de elementos embutidos: 
 
 
 
display: none; é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-
los e recriá-los. display: none é uma propriedade de CSS que especifica que um elemento HTML 
não deve ser exibido na página. Esse valor oculta completamente o elemento, incluindo todo o 
espaço que ele ocuparia. 
 
Ao usar display: none, o elemento não é renderizado pelo navegador, o que pode ajudar a otimizar 
o desempenho da página. Além disso, você pode usar JavaScript para alterar o valor de display 
de um elemento de none para block ou outro valor de exibição, mostrando ou ocultando o 
elemento dinamicamente. 
 
elementos de nível de bloco 
<div> <h1> - <h6> <p> <forma> <cabeçalho> <rodapé> <seção>
elementos embutidos
<span> <a> <img>
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
243
504
 
 
 
 
 
Note que o elemento com display: none ainda existe no DOM, mas não é visível na página. Se 
você precisar ocultar um elemento apenas temporariamente ou alternar sua exibição, pode usar 
outras propriedades, como visibility ou opacity, em vez de display: none. 
 
display: inline é um valor de CSS que especifica que um elemento HTML deve ser exibido como 
uma linha de texto. Isso significa que o elemento ocupará apenas o espaço necessário para exibir 
seu conteúdo, sem quebrar para a próxima linha. 
 
Ao usar display: inline, o elemento é exibido na mesma linha que outros elementos inline ao seu 
redor, como links e palavras em negrito. Além disso, o tamanho do elemento é determinado pelo 
seu conteúdo, e as propriedades width e height não são aplicadas. 
 
Note que os elementos inline só podem conter outros elementos inline, e não elementos de bloco, 
como parágrafos ou divs. Se você precisar exibir um elemento como um bloco, pode usar display: 
block ou display: inline-block. 
 
display: block é um valor de CSS que especificaque um elemento HTML deve ser exibido como 
um bloco de conteúdo. Isso significa que o elemento ocupará toda a largura disponível de seu 
container e será exibido em uma nova linha, separado dos outros elementos. 
 
Ao usar display: block, o elemento é exibido como um bloco independente, com largura e altura 
definidas pelas propriedades width e height, ou automaticamente pelo conteúdo. Além disso, 
você pode controlar a margem, borda e padding do elemento para definir o espaçamento em 
torno dele. 
 
Note que os elementos de bloco só podem conter outros elementos de bloco ou elementos inline, 
e não elementos inline como links ou palavras em negrito. Se você precisar exibir um elemento 
como uma linha, pode usar display: inline ou display: inline-block. 
visibility: hidden é uma propriedade de CSS que especifica que um elemento HTML deve ser 
oculto na página, mas ainda ocupar o espaço que ele ocuparia se estivesse visível. Isso significa 
que os elementos adjacentes a ele serão realocados para preencher o espaço vago. 
 
Ao usar visibility: hidden, o elemento é renderizado pelo navegador, mas fica invisível. Além disso, 
você pode usar JavaScript para alterar o valor de visibility de um elemento de hidden para visible, 
mostrando o elemento dinamicamente. 
 
Note que o elemento com visibility: hidden ainda existe no DOM e pode afetar o layout da página. 
Se você precisar remover completamente um elemento da página, pode usar a propriedade 
display: none. 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
244
504
 
 
 
 
 
display:flex é um valor de CSS que transforma um elemento HTML em um container flexível. Isso 
significa que os elementos filhos dentro desse container podem ser alinhados em diferentes 
direções e dimensionados de acordo com a largura ou altura disponíveis. 
 
Ao usar display: flex, você pode controlar como os elementos filhos são dispostos usando 
propriedades CSS como justify-content, align-items, flex-wrap e flex-direction. Por exemplo, você 
pode centralizar elementos filhos vertical e horizontalmente, controlar se eles devem quebrar para 
a próxima linha ou não, e definir a direção do fluxo dos elementos. 
 
O uso de display: flex é muito útil para criar layouts flexíveis e responsivos, onde os elementos 
precisam se ajustar a diferentes tamanhos de tela e resoluções de dispositivos. 
 
Substituir o valor de exibição padrão 
 
Conforme mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode 
substituir isso. Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil 
para fazer a página parecer de uma maneira específica e ainda seguir os padrões da web. Um 
exemplo comum é criar elementos embutidos <li>para menus horizontais: 
 
Propriedades de 
Exibição CSS 
Descrição 
display Especifica como um elemento deve ser exibido 
visibility Especifica se um elemento deve ou não ser visível 
 
Largura e Largura Máxima 
 
Um elemento de nível de bloco sempre ocupa toda a largura disponível (estende-se para a 
esquerda e para a direita o máximo possível). Definir o width de um elemento de nível de bloco 
impedirá que ele se estenda até as bordas de seu contêiner. Em seguida, você pode definir as 
margens como automáticas, para centralizar horizontalmente o elemento em seu contêiner. O 
elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as 
duas margens: 
 
Usar max-width em vez disso, nessa situação, melhorará o manuseio de janelas pequenas pelo 
navegador. Isso é importante ao tornar um site utilizável em pequenos dispositivos. 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
245
504
==1feb8f==
 
 
 
 
 
A propriedade de posição 
 
A propriedade CSS "position" é usada para definir como um elemento HTML é posicionado em 
relação ao seu elemento pai ou à página (estático, relativo, fixo, absoluto ou fixo). 
. As opções de posição incluem: 
 
• static: o elemento é posicionado de acordo com o fluxo normal do documento (padrão) 
• relative: o elemento é posicionado em relação a sua posição normal, permitindo o uso de 
"top", "right", "bottom" e "left" para mover o elemento a partir da sua posição original 
• fixed: o elemento é posicionado em relação à janela do navegador e não se move quando 
a página é rolada. 
• absolute: o elemento é posicionado em relação ao primeiro elemento pai com posição não-
estática (se não houver, será posicionado em relação à janela do navegador) 
• sticky: o elemento é posicionado de forma semelhante ao "relative" até que ele atinja uma 
certa posição na tela, a partir daí ele se comporta como "fixed". 
 
Os elementos são então posicionados usando as propriedades superior, inferior, esquerda e 
direita. No entanto, essas propriedades não funcionarão, a menos que a propriedade position seja 
definida primeiro. Eles também funcionam de forma diferente, dependendo do valor da posição. 
 
position: static; 
 
Os elementos HTML são posicionados estáticos por padrão. Os elementos posicionados estáticos 
não são afetados pelas propriedades superior, inferior, esquerda e direita. 
 
Um elemento com position: static;não é posicionado de nenhuma maneira especial; está sempre 
posicionado de acordo com o fluxo normal da página: 
 
position: relative; 
Um elemento com position: relative;é posicionado em relação à sua posição normal. 
 
Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente 
posicionado fará com que ele seja ajustado para longe de sua posição normal. Outros conteúdos 
não serão ajustados para caber em qualquer lacuna deixada pelo elemento. 
 
position: fixed; 
 
Um elemento com position: fixed; é posicionado em relação à viewport, o que significa que ele 
sempre permanece no mesmo lugar, mesmo que a página seja rolada. As propriedades superior, 
direita, inferior e esquerda são usadas para posicionar o elemento. Um elemento fixo não deixa 
uma lacuna na página onde normalmente estaria localizado. 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
246
504
 
 
 
 
 
 
position: absolute; 
 
Um elemento com position: absolute;é posicionado em relação ao ancestral posicionado mais 
próximo (em vez de posicionado em relação à viewport, como fixo). 
 
No entanto; se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usará o 
corpo do documento e se moverá junto com a rolagem da página. 
 
position: sticky; 
 
Um elemento com position: sticky; é posicionado com base na posição de rolagem do usuário. 
Um elemento fixo alterna entre relative e fixed, dependendo da posição de rolagem. Ele é 
posicionado relativo até que uma determinada posição de deslocamento seja encontrada na 
viewport - então ele "gruda" no lugar (como position:fixed). 
 
Aaaantes de partir para o próximo tópico, vamos retomar as propriedades de posição em CSS! 
Essas propriedades permitem controlar a localização de elementos HTML em relação a outros 
elementos ou à página. As principais propriedades de posição são "position", "top", "right", 
"bottom" e "left". A propriedade "position" define se um elemento é posicionado de acordo com 
o fluxo normal do documento (static), em relação a sua posição normal (relative), em relação ao 
primeiro elemento pai com posição não-estática (absolute) ou fixo em relação à janela do 
navegador (fixed). As propriedades "top", "right", "bottom" e "left" são usadas para ajustar a 
posição de um elemento em relação ao seu elemento pai ou à página. 
 
Propriedades de 
Posição CSS 
Descrição 
bottom Define a borda da margem inferior para uma caixaposicionada 
clip Corta um elemento absolutamente posicionado 
left Define a borda da margem esquerda para uma caixa posicionada 
position Especifica o tipo de posicionamento de um elemento 
right Define a borda da margem direita para uma caixa posicionada 
top Define a borda da margem superior para uma caixa posicionada 
 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
247
504
 
 
 
 
 
A propriedade z-index 
 
A propriedade CSS "z-index" é usada para controlar a ordem de sobreposição de elementos 
HTML na tela. Elementos com um valor de "z-index" mais alto são exibidos "acima" de elementos 
com um valor de "z-index" mais baixo. A propriedade "z-index" só tem efeito se a propriedade 
"position" for definida como "absolute", "relative" ou "fixed". O valor padrão é "auto", o que 
significa que o navegador decide a ordem de sobreposição baseado no fluxo normal do 
documento. Valores positivos colocam o elemento mais à frente, enquanto valores negativos 
colocam o elemento mais atrás. 
 
Sem índice z! Mas prof, o que acontece se dois elementos posicionados se sobrepõem sem um z-
index especificado? Neste caso, o elemento definido por último no código HTML será mostrado 
no topo. 
 
Para usar a propriedade "z-index", você precisa primeiro definir a propriedade "position" do 
elemento como "absolute", "relative" ou "fixed". Em seguida, defina o "z-index" com um número 
inteiro. Valores positivos colocam o elemento mais à frente, enquanto valores negativos o colocam 
mais atrás. O valor padrão é "auto", o que significa que o navegador decidirá a ordem de 
sobreposição baseado no fluxo normal do documento. 
 
Observe que o "z-index" só tem efeito em elementos que estão em posições diferentes. Se dois 
elementos tiverem a mesma posição, o navegador decidirá qual deles está mais à frente com base 
na ordem deles no código HTML. Além disso, o "z-index" não funcionará em elementos estáticos 
(com "position: static"). 
 
(FCC – TRT - 4ª REGIÃO (RS) – 2022) Quando um Técnico criou uma página web usando HTML e 
CSS, um elemento ficou sobreposto ao outro na tela e ele deseja inverter a ordem de sobreposição 
desses elementos. Para definir ou mudar a ordem de sobreposição dos elementos ele deve utilizar 
a propriedade CSS 
 
a) z-index 
b) inverter 
c) position 
d) flex-position 
e) x-order 
 
Comentários: Quando se fala em ordem de sobreposição de elementos HTML estamos falando 
sobre a propriedade z-index. Lembre-se que A propriedade CSS "z-index" é usada para controlar 
a ordem de sobreposição de elementos HTML na tela. Elementos com um valor de "z-index" mais 
alto são exibidos "acima" de elementos com um valor de "z-index" mais baixo. (Gabarito: Letra 
A) 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
249
504
 
 
 
 
 
Overflow 
 
A propriedade CSS "overflow" controla o que acontece quando o conteúdo de um elemento 
HTML excede suas dimensões definidas, ou seja, conteúdo é grande demais para caber em uma 
área. A propriedade "overflow" pode ter os seguintes valores: 
 
• visible: o conteúdo é exibido fora do elemento, sem cortar ou rolar. 
• hidden: o conteúdo é cortado, ou seja, o que ultrapassar as bordas do elemento não será 
exibido. 
• scroll: uma barra de rolagem é adicionada ao elemento, permitindo que o usuário role e 
veja o conteúdo que está fora das dimensões visíveis. 
• auto: se o conteúdo ultrapassar as dimensões do elemento, uma barra de rolagem será 
adicionada. Se o conteúdo couber, nenhuma barra de rolagem será exibida. 
 
Observe que o "overflow" pode ser definido tanto para o eixo x (horizontal) quanto para o eixo y 
(vertical), usando as propriedades "overflow-x" e "overflow-y". Além disso, é possível usar a 
propriedade "overflow: scroll" para forçar a exibição de uma barra de rolagem, mesmo que o 
conteúdo não ultrapasse as dimensões do elemento. 
 
A propriedade overflow especifica se deve cortar o conteúdo ou adicionar barras de rolagem 
quando o conteúdo de um elemento for muito grande para caber na área especificada. 
 
Por padrão, o overflow é visible, o que significa que não é recortado e é renderizado fora da caixa 
do elemento. Por outro lado, com o valor hidden, o overflow é recortado e o restante do conteúdo 
é ocultado. 
 
Ademais, definindo o valor como scroll, o overflow é cortado e uma barra de rolagem é adicionada 
para rolar dentro da caixa. Observe que isso adicionará uma barra de rolagem horizontal e 
verticalmente (mesmo que você não precise dela) 
 
O valor auto é semelhante a scroll, mas adiciona barras de rolagem somente quando necessário. 
 
Propriedades de 
Posição CSS 
Descrição 
overflow 
Especifica o que acontece se o conteúdo ultrapassar a caixa de um 
elemento 
overflow-wrap 
Especifica se o navegador pode ou não quebrar linhas com palavras 
longas, caso elas transbordem seu contêiner 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
250
504
 
 
 
 
 
overflow-x 
Especifica o que fazer com as bordas esquerda/direita do conteúdo 
se ele ultrapassar a área de conteúdo do elemento 
overflow-y 
Especifica o que fazer com as bordas superior/inferior do conteúdo 
se ele ultrapassar a área de conteúdo do elemento 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
251
504
 
 
 
 
 
Layout CSS: Float and clear 
 
 As propriedades CSS "float" e "clear" são 
usadas para controlar o layout de elementos 
HTML na página. A propriedade "float" define se 
um elemento deve flutuar à esquerda ou à 
direita, (a imagem ao lado está a esquerda!) 
permitindo que outros elementos sejam exibidos 
ao seu lado. Por exemplo, uma imagem pode ser 
definida com "float: left" para que o texto ao seu 
lado seja exibido ao seu redor. Se vários 
elementos tiverem a propriedade "float", eles serão organizados lado a lado, na ordem em que 
aparecem no código HTML. 
 
A propriedade CSS "float" pode ter três valores principais: 
 
• "left": flutua o elemento para a esquerda e o posiciona na linha horizontal, permitindo que 
outros elementos sejam exibidos ao seu lado, na direita. 
 
• "right": flutua o elemento para a direita e o posiciona na linha horizontal, permitindo que 
outros elementos sejam exibidos ao seu lado, na esquerda. 
 
• "none": não flutua o elemento e mantém-no no fluxo normal da página. 
 
Além desses valores, a propriedade "float" também pode ter o valor "inherit", que herda o valor 
da propriedade "float" do elemento pai. 
 
A propriedade "float: left" é comumente utilizada para posicionar elementos HTML na linha 
horizontalmente, flutuando-os para a esquerda. Quando um elemento é definido com "float: left", 
ele é retirado do fluxo normal da página e posicionado na esquerda da página, ocupando apenas 
o espaço necessário para o seu conteúdo. Os elementos subsequentes são então exibidos ao seu 
lado, na direita. É importante destacar que elementos com "float" não afetam o tamanho de seus 
elementos pais, por isso é comum utilizar a propriedade "clear" em conjunto para garantir que 
outros elementos não fiquem sobrepostos aos elementos flutuantes. Assim também ocorre para 
o "float:right". 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
252
504
 
 
 
 
 
A propriedade "clear" define se um elemento 
deve ser colocado abaixo de elementos flutuantes 
anteriores. Por exemplo, se você temuma 
imagem flutuando à esquerda e deseja que o 
próximo parágrafo comece abaixo da imagem, 
você pode definir "clear: left" para o parágrafo. A 
propriedade "clear" pode ter os valores "left", 
"right", "both" ou "none". (A imagem agora está 
à direita!) 
 
Observe que a propriedade "float" é útil para criar 
layouts simples, mas pode ser difícil de controlar 
em situações mais complexas. Alternativas mais modernas incluem o uso de flexbox e grid. 
 
Frisando que a propriedade float pode ter um dos seguintes valores: 
 
• left- O elemento flutua à esquerda de seu contêiner 
• right- O elemento flutua à direita de seu contêiner 
• none- O elemento não flutua (será exibido apenas onde ocorre no texto). Isso é padrão 
• inherit- O elemento herda o valor float de seu pai 
 
Em seu uso mais simples, a propriedade float pode ser usada para quebrar texto em torno de 
imagens. 
 
A propriedade CSS "clear" 
 
A propriedade CSS "clear" é usada para controlar a posição de um elemento em relação a 
elementos flutuantes anteriores. A propriedade "clear" tem os seguintes valores: 
 
• left: o elemento não pode ser colocado à esquerda de um elemento flutuante. 
• right: o elemento não pode ser colocado à direita de um elemento flutuante. 
• both: o elemento não pode ser colocado à esquerda ou à direita de um elemento flutuante. 
• none: o elemento pode ser colocado ao lado de um elemento flutuante. 
 
Por exemplo, se você tem uma imagem flutuando à esquerda e deseja que o próximo parágrafo 
comece abaixo da imagem, você pode definir "clear: left" para o parágrafo. Isso garantirá que o 
parágrafo não seja colocado ao lado da imagem, mas sim abaixo dela. 
 
Por fim, vamos relembrar, float especifica se um elemento deve flutuar à esquerda, à direita ou 
não flutuar. Valores possíveis são "left", "right" ou "none". 
Por outro lado, clear especifica se um elemento deve ser colocado abaixo de elementos flutuantes 
anteriores. Valores possíveis são "left", "right", "both" ou "none". 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
253
504
 
 
 
 
 
 
Observe que estas são as duas principais propriedades relacionadas a "float". Há outras 
propriedades menos comuns, como "float-offset", que são usadas em situações específicas. É 
importante ter em mente que o uso de "float" para o layout pode ser limitante em algumas 
situações e alternativas mais modernas, como o uso de flexbox e grid, devem ser consideradas. 
 
Propriedades de 
Posição CSS 
Descrição 
box-sizing Define como a largura e a altura de um elemento são calculadas: 
devem incluir preenchimento e bordas ou não 
clear Especifica o que deve acontecer com o elemento que está ao lado de 
um elemento flutuante 
float Especifica se um elemento deve flutuar para a esquerda, direita ou 
nada 
overflow Especifica o que acontece se o conteúdo ultrapassar a caixa de um 
elemento 
overflow-x Especifica o que fazer com as bordas esquerda/direita do conteúdo 
se ele ultrapassar a área de conteúdo do elemento 
overflow-y Especifica o que fazer com as bordas superior/inferior do conteúdo 
se ele ultrapassar a área de conteúdo do elemento 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
254
504
 
 
 
 
 
Layout CSS: display: inline-block 
 
O valor CSS "display: inline-block" é usado para criar um elemento que se comporta como um 
elemento em linha (inline), mas que também pode ter uma largura e altura definidas, como um 
elemento em bloco (block). 
 
display: inline-block é uma propriedade CSS que especifica o comportamento de exibição de um 
elemento HTML. O valor inline-block cria um contêiner de bloco de nível inline. Os elementos com 
esse valor são colocados alinhados com o texto e outros elementos, mas se comportam como um 
elemento de nível de bloco, permitindo que largura, altura e preenchimento sejam definidos. Isso 
torna o bloco embutido útil para criar elementos flexíveis e de tamanho ajustável que podem ser 
usados em layouts com muito texto. 
 
"inline-block" é uma opção útil quando você precisa que um elemento se comporte como um 
bloco, mas ainda precisa que ele seja exibido na linha, como quando você precisa alinhar 
elementos horizontalmente. Além disso, ele também permite que você especifique a largura e a 
altura de um elemento, bem como ajustes de margem, padding e borda, o que não é possível 
com elementos "inline". 
 
Normalmente, os elementos em bloco preenchem toda a largura da linha, mas com "display: 
inline-block", o elemento pode ser definido com uma largura específica, permitindo que outros 
elementos sejam posicionados ao lado dele na mesma linha. Isso pode ser útil para criar layouts 
de página com elementos alinhados horizontalmente. 
 
O "display: inline-block" também permite que o elemento tenha margens, preenchimento e 
bordas, ao contrário dos elementos em linha que não podem ter largura e altura definidas, nem 
bordas ou margens. 
 
No entanto, é importante lembrar que o "display: inline-block" adiciona um espaçamento em 
branco à direita do elemento, que pode causar problemas de layout. Para evitar isso, é possível 
remover o espaço em branco ou definir uma largura menor para o elemento. 
 
Além disso, é importante lembrar que o "display: inline-block" não é a solução ideal para todos 
os layouts de página e pode ter limitações em relação à flexibilidade do layout. Em vez disso, pode 
ser necessário combinar várias propriedades CSS para obter o resultado desejado. 
 
Os valores CSS "inline", "inline-block" e "block" são usados para definir como um elemento HTML 
é exibido na página. 
 
• "display: inline" é usado para elementos que devem ser exibidos em uma linha, como texto 
ou links. Isso significa que eles não podem ter uma largura ou altura definida e não podem 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
255
504
 
 
 
 
 
ter margens ou preenchimentos em todas as direções. Os elementos em linha são 
dimensionados automaticamente com base no conteúdo que eles contêm. 
 
• "display: inline-block" é usado para elementos que precisam de uma largura e altura 
definidas, mas também precisam ser exibidos em uma linha. Isso permite que esses 
elementos sejam posicionados horizontalmente, permitindo que outros elementos sejam 
posicionados ao lado deles na mesma linha. Eles também podem ter margens, 
preenchimento e bordas definidos. 
 
• "display: block" é usado para elementos que devem ser exibidos em blocos separados, 
ocupando toda a largura disponível. Isso significa que eles podem ter uma largura e altura 
definidas e podem ter margens, preenchimento e bordas em todas as direções. Os 
elementos em bloco são geralmente usados para definir seções maiores de conteúdo na 
página, como parágrafos, cabeçalhos, listas e divs. 
 
Em resumo, "inline" é usado para elementos que devem ser exibidos em uma linha, "inline-block" 
é usado para elementos que precisam de uma largura e altura definidas e "block" é usado para 
elementos que devem ser exibidos em blocos separados, ocupando toda a largura disponível. 
 
 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
256
504
 
 
 
 
 
Alinhamento 
 
Alinhamento horizontal: 
 
• text-align: Alinha o texto dentro de um elemento (esquerda, direita, centralizado ou 
justificado). 
• margin: Adiciona espaço ao redor de um elemento, que pode ser usado para centralizar 
horizontalmente um elemento definindo margin: auto em ambos os lados. 
• display: flex e justifique-conteúdo:quando aplicado a um elemento de contêiner, isso cria 
um layout de flexbox e permite o alinhamento horizontal de elementos filho usando a 
propriedade de justify-content (esquerda, direita, centro, espaço entre, espaço ao redor). 
 
Alinhamento vertical: 
 
• vertical-align: Alinha elementos de nível embutido e célula de tabela (topo, meio, fundo). 
• line-height: especifica a altura de uma linha de texto, que pode ser usada para centralizar 
o texto verticalmente em um elemento. 
• display: flex and align-items: quando aplicado a um elemento container, isso cria um layout 
flexbox e permite o alinhamento vertical de elementos filho usando a propriedade align-
items (top, middle, bottom, stretch). 
• display: table-cell e vertical-align: Definir um container e seus filhos para display: table-cell 
e vertical-align permite o alinhamento vertical como uma tabela. 
 
Elementos de Alinhamento Central 
 
Existem várias maneiras de alinhar elementos ao centro de uma página ou contêiner usando CSS, 
incluindo: 
 
Elementos de 
Alinhamento Central 
Descrição 
Margens automáticas 
Definir margens automáticas para os lados esquerdo e direito de um 
elemento fará com que ele seja centralizado horizontalmente 
margin: 0 auto; 
Transformação 
É possível usar a propriedade "transform" para centralizar vertical e 
horizontalmente um elemento. 
transform: translate(-50%, -50%); 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
257
504
 
 
 
 
 
Flexbox 
Usando a propriedade "display: flex" em um contêiner, é possível 
centralizar os itens dentro dele usando as propriedades "justify-
content" e "align-items". Por exemplo: 
.container { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
} 
Grid 
Usando a propriedade "display: grid" em um contêiner, é possível 
centralizar os itens dentro dele usando a propriedade "place-items". 
Por exemplo: 
.container { 
 display: grid; 
 place-items: center; 
} 
 
 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
258
504
 
 
 
 
 
CSS Combinators 
 
Combinadores CSS são símbolos usados para combinar seletores para direcionar elementos 
específicos em uma página da web. Eles permitem selecionar elementos com base em suas 
relações com outros elementos. Existem quatro tipos de combinadores: 
 
1. Combinador descendente (espaço): tem como alvo um elemento que é descendente de 
outro elemento. Exemplo: div p visa todos os elementos p que são descendentes de um 
elemento div. 
 
2. Combinador filho (>): tem como alvo um elemento que é filho direto de outro elemento. 
Exemplo: div > p tem como alvo todos os elementos p que são filhos diretos de um 
elemento div. 
 
3. Combinador irmão adjacente (+): tem como alvo um elemento que é imediatamente 
adjacente a outro elemento e tem o mesmo pai. Exemplo: h1 + p tem como alvo o primeiro 
elemento p imediatamente após um elemento h1. 
 
4. Combinador irmão geral (~): tem como alvo um elemento que é irmão de outro elemento 
e tem o mesmo pai. Exemplo: h1 ~ p tem como alvo todos os elementos p que são irmãos 
de um elemento h1. 
 
Esses combinadores podem ser usados para aumentar a especificidade dos seletores CSS e para 
direcionar elementos específicos em uma página de maneira mais precisa. Os combinators podem 
ser usados em conjunto com seletores de classe, ID e atributo para criar seletores mais específicos 
e precisos. Eles são uma ferramenta poderosa para selecionar e estilizar elementos em uma página 
da web. 
 
Seletores CSS Exemplo Descrição do Exemplo 
element element 
div p Seleciona todos os elementos <p> dentro dos elementos 
<div> 
element>element 
div > p Seleciona todos os elementos <p> onde o pai é um elemento 
<div> 
element+element 
div + p Seleciona o primeiro elemento <p> que é colocado 
imediatamente após os elementos <div> 
element1~element2 
p ~ ul Seleciona todos os elementos <ul> precedidos por um 
elemento <p> 
 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
259
504
 
 
 
 
 
Pseudo-classes 
 
O que são pseudo-classes? Uma pseudoclasse é usada para definir um estado especial de um 
elemento. Por exemplo, pode ser usado para: 
 
• Estilizar um elemento quando um usuário passa o mouse sobre ele 
• Estilizar links visitados e não visitados de forma diferente 
• Estilizar um elemento quando ele recebe o foco 
 
Pseudo-classes são pseudo-elementos que permitem selecionar elementos baseados em algum 
estado específico, como :hover, :active, :focus, etc. Em outras palavras, pseudo-classes permitem 
selecionar elementos HTML que não são identificados por sua tag, classe ou ID, mas por sua 
posição ou estado dentro da página. 
 
Aqui estão alguns exemplos de pseudo-classes comuns: 
 
• :hover: seleciona o elemento quando o cursor do mouse estiver sobre ele. 
• :active: seleciona o elemento quando ele estiver ativo, ou seja, quando o usuário clicou ou 
tocou nele. 
• :focus: seleciona o elemento quando ele estiver em foco, ou seja, quando ele estiver 
selecionado para receber entrada de teclado. 
• :first-child: seleciona o primeiro elemento filho de seu pai. 
• :last-child: seleciona o último elemento filho de seu pai. 
 
Pseudo-classes são usadas em conjunto com outros seletores, como tags HTML, classes ou ID's, 
para aumentar a especificidade de um seletor CSS e aplicar estilos a elementos HTML específicos 
em determinadas situações. 
 
Seletores Exemplo Descrição do Exemplo 
:active a:active Seleciona o link ativo 
:checked input:checked Seleciona cada elemento <input> marcado 
:disabled input:disabled Seleciona cada elemento <input> desabilitado 
:empty p:empty Seleciona cada elemento <p> que não tem 
filhos 
:enabled input:enabled Seleciona cada elemento <input> ativado 
:first-child p:first-child Seleciona cada elemento <p> que é o primeiro 
filho de seu pai 
Diego Carvalho, Equipe Informática 1 (Diego Carvalho), Paolla Ramos e Silva 
Aula 09
Caixa Econômica Federal - CEF (Técnico Bancário - TI) Desenvolvimento
www.estrategiaconcursos.com.br
260
504
 
 
 
 
 
:first-of-type p:first-of-type Seleciona cada elemento <p> que é o primeiro 
elemento <p> de seu pai 
:focus input:focus Seleciona o elemento <input> que tem foco 
:hover a:hover Seleciona links ao passar o mouse 
:in-range input:in-range Seleciona elementos <input> com um valor 
dentro de um intervalo especificado 
:invalid input:invalid Seleciona todos os elementos <input> com um 
valor inválido 
:lang(language) p:lang(it) Seleciona cada elemento <p> com um valor de 
atributo lang começando com "it" 
:last-child p:last-child Seleciona cada elemento <p> que é o último 
filho de seu pai 
:last-of-type p:last-of-type Seleciona cada elemento <p> que é o último 
elemento <p> de seu pai 
:link a:link Seleciona todos os links não visitados 
:not(selector) :not(p) Seleciona todos os elementos que não são um 
elemento <p> 
:nth-child(n) p:nth-child(2) Seleciona cada elemento <p> que é o segundo 
filho de seu pai 
:nth-last-child(n) p:nth-last-child(2) Seleciona cada elemento <p> que é o segundo 
filho de seu pai, contando a partir do último 
filho 
:nth-last-of-type(n) p:nth-last-of-type(2) Seleciona cada elemento <p> que é o segundo 
elemento <p> de seu pai, contando a partir do 
último filho 
:nth-of-type(n) p:nth-of-type(2) Seleciona cada elemento <p> que é o segundo 
elemento <p> de seu pai 
:only-of-type p:only-of-type Seleciona cada elemento <p> que é o único 
elemento <p> de seu pai 
:only-child p:only-child Seleciona cada elemento <p> que é o único 
filho de seu pai 
:optional input:optional Seleciona elementos