Apostila HTML

Aula 00
Curso: Informática – Teoria e Questões

comentadas p/ TRF
Aula -Professor:
HTML Gustavo Cavalcante
Curso: Tecnologia da Informação
Professor: Leandro Ribeiro
Teoria e Questões comentadas
Prof. Leandro Ribeiro
APRESENTAÇÃO
Olá, futuros Analistas de Sistemas e Administradores de Sites do

Tribunal de Justiça do Rio Grande do Norte. É com grande satisfação que
inicio mais este trabalho na equipe do Exponencial Concursos.
Meu nome é Leandro Ribeiro, sou Auditor Federal de Controle Externo
do Tribunal de Contas da União e atuo na área de Tecnologia da Informação.
Antes de iniciarmos a aula, passo a contar um pouco da minha trajetória:
Sou de Goiânia, mas moro em Brasília/DF desde 2005, quando comecei
a cursar Engenharia Mecatrônica na UNB. Iniciei os estudos para concurso no
ano da minha formatura 2009.
Assim que me formei o mercado de trabalho estava em meio a uma crise,
participei de diversos processos seletivos para trainee em grandes empresas de
engenharia, porém mesmo naqueles processos em que cheguei às últimas
etapas, próximo da aprovação, as vagas eram canceladas ou reduzidas. Nesse
meio tempo continuei estudando para concursos.
Fiz várias provas de concurso, mas apesar de ter sido aprovado em
algumas delas (Técnico do MPU 2010, Analista Judiciário STM 2010 e
Analista Administrativo PREVIC 2010) não fui nomeado para nenhum dos
cargos até o final de 2010. Foi quando surgiu a oportunidade para trabalhar
como Engenheiro de Petróleo em uma grande multinacional.
Apesar de ser uma carreira interessante e ter aprendido muito
trabalhando no ramo de petróleo, nunca desisti do sonho de me tornar um
servidor público. Foi quando recebi a nomeação para o TRF da 1ª Região, que
havia aproveitado a lista dos aprovados do concurso do STM. Então, no intuito
de realizar o meu sonho, deixei a carreira de Engenheiro de Petróleo e voltei
para Brasília, mesmo abrindo mão de mais da metade da minha renda anterior.
Porém, a estratégia era seguir com novas aprovações até ser nomeado para
o concurso dos meus sonhos.
Enquanto estava no TRF trabalhando com infraestrutura de TI continuei
estudando. Em 2013 fui aprovado para o cargo de Analista do MPU,
posteriormente nomeado e empossado para trabalhar com desenvolvimento
de sistemas. A grande surpresa foi o 1º lugar na classificação entre os
aprovados, o que me deu ânimo e esperança para continuar estudando e
visando concursos melhores.
Em 2013/2014 prestei o concurso do Banco Central do Brasil, as
expectativas eram altas, porém não fui aprovado. E para mim, esse foi o maior
aprendizado na minha vida de concurseiro. Apesar de ter ficado bastante
chateado por não ter conquistado a sonhada aprovação, não me desanimei, pelo
contrário, aumentei a minha carga de estudos.
Por fim, em 2015 veio a recompensa. Nesse mesmo ano fui nomeado
para o Tribunal de Contas do Distrito Federal e para o Tribunal de Contas
Prof. Leandro Ribeiro 2 de 86

www.exponencialconcursos.com.br
da União, que por muitos é considerado um dos melhores lugares para se
trabalhar em toda a Administração Pública.
Portanto, queridos alunos e alunas, não desistam, trabalhem firme.
Sabemos que não é fácil abrir mão dos momentos agradáveis com a família e
amigos para estudar, mas encarem isso como uma parte transitória da vida
e entendam que um dia a aprovação virá e valerá a pena ter corrido atrás desse
sonho.
Para ajudá-los a alcançar o sonho da aprovação, temos a missão de
oferecer para vocês este curso. Seguindo a didática do Exponencial Concursos
estudaremos os principais pontos da teoria, sempre tentando trazer o conteúdo
de forma esquematizada para que você ganhe tempo na sua preparação
para a aprovação.
No quadro abaixo segue o programa do nosso curso.

Aula Conteúdo
00 HTML
01 CSS
02 JavaScript
03 Angular
04 Java
05 PHP
06 Seam
07 GIT
08 SVN
09 Tomcat
10 Jboss
11 SQL Server
12 PostgreSQL
13 Oracle
14 Metodologias Ágeis Scrum e XP.
*Confira o cronograma de liberação das aulas no site do Exponencial,
na página do curso.
Bons estudos!
Leandro Ribeiro

Aula – HTML.
ASSUNTOS PÁGINA
1. TÓPICOS GERAIS ..................................................................................................................... 7

1.1 Introdução ................................................................................................................................ 7
1.2 Atributos................................................................................................................................. 10
1.3 Títulos (Headings) e Parágrafos (Paragraphs) ....................................................................... 11
1.4 Estilos (Styles) e Formatações ................................................................................................ 13
1.5 Citações e Comentários.......................................................................................................... 15
1.6 CSS .......................................................................................................................................... 17
1.7 Cores....................................................................................................................................... 21
1.8 Links e Imagens ...................................................................................................................... 23
1.9 Tabelas e Listas ....................................................................................................................... 25
1.10 Blocos ................................................................................................................................... 28
1.11 Iframes ................................................................................................................................. 29
1.12 JavaScript.............................................................................................................................. 31
1.13 Caminhos de Arquivo ........................................................................................................... 32
1.14 Layouts ................................................................................................................................. 33
1.15 Códigos ................................................................................................................................. 35
1.16 Character Sets ou Encoding.................................................................................................. 36
1.17 Formulários HTML ................................................................................................................ 37
1.18 HTML5 .................................................................................................................................. 40
1.19 Elementos Gráficos .............................................................................................................. 42
1.20 Mídia .................................................................................................................................... 44
2. QUESTÕES COMENTADAS .................................................................................................... 46
3. RISCO EXPONENCIAL ............................................................................................................ 62
4. LISTAS DE EXERCÍCIOS .......................................................................................................... 73
5. GABARITO ............................................................................................................................. 86
6. REFERÊNCIAS ........................................................................................................................ 86
Para facilitar sua referência, abaixo listamos as esquematizações desta aula:

Esquema 1 – Características do HTML. ......................................................................................... 7
Esquema 2 – Características dos Atributos. ................................................................................... 10
Esquema 3 – Títulos. ............................................................................................................ 11
Esquema 4 – Parágrafos. ....................................................................................................... 11
Esquema 5 – Quebras de Linha. ................................................................................................ 12
Esquema 6 – Estilos. ............................................................................................................ 13
Esquema 7 – Formatações. ..................................................................................................... 13
Esquema 8 – Citação. ........................................................................................................... 15
Esquema 9 – Bloco de Citação. ................................................................................................. 15
Esquema 10 – Abreviações. ..................................................................................................... 15
Esquema 11 – Dados do Autor. ................................................................................................. 16
Esquema 12 – Citações de obras. .............................................................................................. 16
Esquema 13 – Escrita invertida. ................................................................................................ 16
Esquema 14 – Comentários. .................................................................................................... 16
Esquema 15 – Formas de se Adicionar o CSS. ................................................................................. 17
Esquema 16 – Inline CSS. ....................................................................................................... 17
Esquema 17 – Internal CSS. ..................................................................................................... 17
Esquema 18 – External CSS. .................................................................................................... 18
Esquema 19 – Arquivo “styles.css”. ............................................................................................ 18
Esquema 20 – Fontes. ........................................................................................................... 18
Esquema 21 – Bordas, paddings e margens. .................................................................................. 19
Esquema 22 – Atributos id e class. ............................................................................................. 19
Esquema 23 – Especificando cor pelo nome. .................................................................................. 21
Esquema 24 – Especificando cor pelo valor RGB. .............................................................................. 21
Esquema 25 – Especificando cor pelo valor hexadecimal. .................................................................... 21
Esquema 26 – Especificando cor pelo valor HSL. .............................................................................. 21
Esquema 27 – Especificando cor pelos valores HSLA e RGBA. ................................................................ 22
Esquema 28 – Link. .............................................................................................................. 23
Esquema 29 – Imagens.......................................................................................................... 23
Esquema 30 – Imagem como link............................................................................................... 24
Esquema 31 – Tabela. ........................................................................................................... 25
Esquema 32 – Atributo colspan. ................................................................................................ 25
Esquema 33 – Atributo rowspan................................................................................................ 26
Esquema 34 – Lista não ordenada. ............................................................................................. 26
Esquema 35 – Lista ordenada................................................................................................... 26
Esquema 36 – Lista de descrição. .............................................................................................. 26
Esquema 37 – Elemento em nível de bloco. ................................................................................... 28
Esquema 38 – Elemento inline. ................................................................................................. 28
Esquema 39 – Tags de agrupamento........................................................................................... 28
Esquema 40 – Iframe. ........................................................................................................... 29
Esquema 41 – JavaScript. ....................................................................................................... 31
Esquema 42 – Elementos de layout. ........................................................................................... 33
Esquema 43 – Entradas do usuário. ............................................................................................ 35
Esquema 44 – Saída de um programa.......................................................................................... 35
Esquema 45 – Fragmento de código. .......................................................................................... 35
Esquema 46 – Variável. ......................................................................................................... 35
Esquema 47 – Encoding. ........................................................................................................ 36
Esquema 48 –Formulário. ...................................................................................................... 37
Esquema 49 – Elementos de formulário........................................................................................ 38
Esquema 50 – Novos elementos em HTML5. .................................................................................. 40
Esquema 51 – Elementos removidos no HTML5. .............................................................................. 40
Esquema 52 – Círculo com canvas. ............................................................................................. 42
Esquema 53 – Texto com canvas. .............................................................................................. 42

Esquema 54 – Círculo com SVG. ................................................................................................ 42
Esquema 55 – Vídeo. ............................................................................................................ 44
Esquema 56 – Tipos de mídia para vídeo. ..................................................................................... 44
Esquema 57 – Áudio. ............................................................................................................ 44
Esquema 58 – Tipos de mídia para áudio. ..................................................................................... 44

1. TÓPICOS GERAIS
1.1 Introdução
HTML (Hyper Text Markup Language) é a linguagem de marcação

padrão para a criação de páginas web. O esquema abaixo apresenta
algumas características da linguagem HTML:
•Descreve a estrutura de páginas web

usando marcações;
•Os elementos são os blocos de construção
HTML das páginas;

•Elementos são representados por tags;
•As tags rotulam pedaços de conteúdo;
•Navegadores não mostram as tags, mas
usam elas para renderizar o conteúdo.
Esquema 1 – Características do HTML.
Abaixo segue um exemplo de documento HTML:

<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Meu primeiro cabeçalho</h1>

<p>Meu primeiro parágrafo.</p>
</body>
</html>
Segue a explicação de cada uma das tags utilizadas no documento:

 <!DOCTYPE html>: define esse documento como HTML5;
 <html>: elemento raiz de uma página HTML;
 <head>: elemento com meta dados sobre o documento;
 <title>: elemento que especifica o título do documento;
 <body>: elemento que contém o conteúdo visível da página;
 <h1>: elemento que define um cabeçalho grande;
 <p>: elemento que define um parágrafo.

A declaração <!DOCTYPE> representa o tipo do documento, e ajuda o browser

a mostrar as páginas web de forma correta.
Deve aparecer apenas uma vez no topo da página antes das tags <html>.
A declaração <!DOCTYPE> não é case sensitive.
O <!DOCTYPE> para HTML5 é <!DOCTYPE html> .
As tags HTML são nomes de elementos cercados pelos sinais de menor

que “<” e maior que “>”. As tags geralmente aparecem em pares (<p> e
</p>), a primeira tag do par é a tag de início (abertura) e a segunda tag é a
tag de fim (fechamento). A tag de fim é escrita como a tag de início, porém
com uma barra “/” inserida antes do nome da tag.
Elementos HTML sem conteúdo são chamados de elementos
vazios. Elementos vazios não contém uma tag de fechamento, por exemplo, a
tag <br>, que indica uma quebra de linha. Elementos vazios podem ser
fechados. O HTML5 não exige que elementos vazios sejam fechados,
porém se você busca por uma validação mais rigorosa, você deve fechar todas
as tags.
Apenas o conteúdo dentro da tag <body> é apresentada no navegador.
Elementos HTML podem estar aninhados, ou seja, elementos podem

conter outros elementos.
As tags HTML não são case sensitive, ou seja, <P> é a mesma coisa que
<p>. Porém, o W3C (World Wide Web Consortium) recomenda o uso de letras
minúsculas em HTML.

1- (FCC - 2015 - CNMP - Analista do CNMP - Tecnologia

de Informação e Comunicação Suporte e Infraestrutura) Um programa
elaborado na linguagem HTML apresenta a seguinte linha:
<!DOCTYPE HTML>
Sobre essa linha, é correto afirmar que ela
a) indica que o arquivo com o programa-fonte possui a extensão doc.
b) deve vir sempre após a tag < html>.
c) é uma tag que define o nome do arquivo que possui o programa.
d) especifica ao navegador o tipo de documento HTML que ele vai renderizar.
e) não atende corretamente a linguagem HTML, que não aceita o símbolo ! em
seus comandos.
Resolução:
A declaração <!DOCTYPE> representa o tipo do documento, e ajuda o
browser a mostrar as páginas web de forma correta. Deve aparecer apenas uma
vez no topo da página antes das tags <html>. A declaração <!DOCTYPE>
não é case sensitive. <!DOCTYPE> para HTML5 é <!DOCTYPE html>.
Gabarito: Letra D.

1.2 Atributos
Os atributos fornecem informações adicionais a respeito dos

elementos HTML. Seguem algumas características dos atributos:
Atributos
•Todos os elementos HTML podem ter atributos;

•Fornecem informações adicionais sobre o elemento;
•São sempre especificados nas tags de abertura;
•Geralmente estão na forma nome/valor (nome="valor")
Esquema 2 – Características dos Atributos.
O exemplo abaixo ilustra uma tag do tipo link <a> que especifica o
atributo href:
<a href="https://www.w3schools.com">Isso é um link</a>
O padrão HTML5 não exige que os atributos sejam escritos com letras
minúsculas (lowercase) e nem que seus valores sejam delimitados por aspas,
porém o W3C recomenda o uso de letras minúsculas na especificação dos
atributos e que seus valores sejam delimitados por aspas.
Em alguns casos o uso de aspas para delimitar os valores de atributos é
obrigatório, por exemplo, quando o valor contém espaços em branco. Veja
que no exemplo abaixo as aspas são obrigatórias.
<p title=”Sobre W3Schools”>
Normalmente são utilizadas aspas duplas nos valores dos atributos,

porém as aspas simples também podem ser usadas. Em algumas situações,
quando o valor do atributo contém aspas duplas, é necessário o uso de aspas
simples e vice-versa. Seguem dois exemplos:
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson"

1.3 Títulos (Headings) e Parágrafos (Paragraphs)
Os títulos em HTML são definidos pelas tags que vão de <h1> até
<h6>. De forma que <h1> define o título mais importante e <h6> define o
título menos importante.
Esquema 3 – Títulos.
Os títulos são importantes porque são usados por motores de busca

para indexar a estrutura e o conteúdo das páginas web, ajudam os usuários a
percorrerem as páginas e apresentam a estrutura dos documentos.
As tags de <h1> a <h6> devem ser usadas apenas para títulos , não
devem ser usadas para tornar o texto maior ou negrito.
Os parágrafos em HTML são definidos pelo elemento <p>.
Esquema 4 – Parágrafos.
Caso seja necessário adicionar uma quebra de linha ao documento, sem

abrir um novo parágrafo deve-se utilizar a tag <br>. É importante lembrar que
a tag <br> é uma tag vazia, ou seja, não possui fechamento.

Esquema 5 – Quebras de Linha.
O texto dentro da tag <pre> é mostrado na tela com fonte de largura fixa
(normalmente Courier) e preserva os espaços e quebras de linha.

1.4 Estilos (Styles) e Formatações
O estilo de um elemento HTML pode ser ajustado utilizando-se o atributo

style. Segue um exemplo:
Esquema 6 – Estilos.
A propriedade background-color define a cor de fundo do elemento

HTML. Os etilos possuem o formato propriedade:valor, no exemplo acima a
propriedade é background-color e o valor é powderblue.
A tabela a seguir mostra algumas propriedades de estilo:
Propriedade Significado Exemplo
color cor do texto <h1 style="color:blue;">texto</h1>
font-family fonte <h1 style="font-family:verdana;">texto</h1>
font-size tamanho do texto <h1 style="font-size:300%;">texto</h1>
text-align alinhamento do texto <h1 style="text-align:center;">texto</h1>
Existem elementos HTML específicos para a formatação de texto. Abaixo

temos a lista de alguns elementos utilizados para esse propósito:
Esquema 7 – Formatações.

Note que o navegador apresenta <strong> da mesma forma que <b> e

<em> da mesma forma que <i>. Porém, existe uma diferença semântica
entre essas tags, enquanto <b> e <i> definem textos em negrito e itálico,
<strong> e <em> definem partes "importantes" do texto.

1.5 Citações e Comentários
Nesta seção iremos apresentar elementos HTML que estão relacionados

com citações, abaixo é apresentado um esquema contendo esses elementos,
os seus significados e a forma na qual o navegador apresenta os respectivos
elementos.
A tag <q> define uma citação curta:
Esquema 8 – Citação.
A tag <blockquote> define uma seção que é uma citação de outra fonte:
Esquema 9 – Bloco de Citação.
A tag <abbr> é utilizada para abreviações e acrônimos:
Esquema 10 – Abreviações.
A tag <address> é utilizada para definir informações de um contato

(autor/dono) de um documento ou artigo:

Esquema 11 – Dados do Autor.
A tag <cite> é utilizada para citar títulos de trabalhos:
Esquema 12 – Citações de obras.
A tag <bdo> é utilizada para escrever o texto da direita para a esquerda,

ou seja, inverter o sentido do texto:
Esquema 13 – Escrita invertida.
Os comentários são adicionados ao código fonte HTM da seguinte forma:
Esquema 14 – Comentários.
Comentários não são apresentados no navegador, porém eles podem

ajudar na documentação do código fonte HTML.

1.6 CSS
CSS (Cascading Style Sheets) descreve como os elementos HTML são

mostrados na tela. O CSS pode controlar o layout de várias páginas web de uma
só vez. Existem 3 formas de se adicionar o CSS aos elementos HTML:
 Inline – usando o atributo style nos elementos HTML;
 Internal – usando o elemento <style> no cabeçalho <head>;
 External – usando um arquivo CSS externo.
Atributo Único
Inline
style elemento
Elemento Única
CSS Internal
<style> página
Arquivo Várias
External
externo páginas
Esquema 15 – Formas de se Adicionar o CSS.

Um CSS inline é usado para aplicar um único estilo para um único
elemento HTML, segue um exemplo:
Esquema 16 – Inline CSS.

Um CSS internal (interno) é usado para definir o estilo para uma única
página, segue um exemplo:
Esquema 17 – Internal CSS.

Um CSS external (externo) é usado para definir o estilo para várias
páginas, segue um exemplo:

Esquema 18 – External CSS.

Para que esse exemplo funcione corretamente é necessário que exista
um arquivo externo com o nome “styles.css” e com o seguinte conteúdo:
Esquema 19 – Arquivo “styles.css”.

Para aplicar estilos nas fontes devem-se definir três propriedades: color,
que define a cor da fonte; font-family, que define a fonte usada; e font-size,
que define o tamanho do texto.
Esquema 20 – Fontes.
Pode-se também definr: bordas por meio da propriedade border; o
espaço entre o texto e as bordas por meio da propriedade padding; e a margem
fora das bordas por meio da propriedade margin.

Esquema 21 – Bordas, paddings e margens.

Além das formas já apresentadas, pode-se determinar o estilo de um
elemento especial adicionando o atributo id a esse elemento ou a tipos
especiais de elementos adicionando o atributo class a esses elementos. Segue
um exemplo:
Esquema 22 – Atributos id e class.
O id do elemento deve ser único em uma página, portanto o seletor de id

é usado para selecionar um único elemento!

2- (CESPE - 2018 - FUB - Técnico de Tecnologia da

Informação) Julgue o próximo item, concernente ao conceito relacionado a
algoritmos e linguagens de programação.
A tag <style> é utilizada para definir uma folha de estilo dentro de uma página
HTML.
Resolução:
Correto. A tag <style> é utilizada para definir uma folha de estilo na
configuração internal CSS (uso do elemento <style> no cabeçalho <head>).
Segue um exemplo:
Gabarito: Certo.

1.7 Cores
As cores em HTML podem ser especificadas usando nomes, valores

RGB, HEX, HSL, RGBA ou HSLA.
Exemplo de especificação da cor por meio do nome:
Esquema 23 – Especificando cor pelo nome.

Em HTML, a cor pode também ser definida usando valores RGB com a
fórmula rgb(red, green, blue). Cada um dos parâmetros (red, green, e blue)
define a intensidade da cor utilizando números de 0 a 255. Segue um exemplo
de definição de cor com valores RGB:
Esquema 24 – Especificando cor pelo valor RGB.

Outra forma de se definir cores em HTML é utilizando valores
hexadecimais na forma #rrggbb onde rr(red), gg(green) e bb(blue) são
valores hexadecimais entre 00 e ff. Segue um exemplo de definição de cor com
valores hexadecimais:
Esquema 25 – Especificando cor pelo valor hexadecimal.

Uma quarta forma de se definir cores em HTML é por meio de valores
HSL (hue, saturation e lightness) na forma hsl(hue, saturation, lightness).
Hue é o ângulo no círculo de cores, de 0 a 360, onde 0 é vermelho, 120 verde
e 240 azul. Saturation é um percentual, onde 0% é um tom de cinza e 100%
a cor cheia. Lightness também é uma porcentagem, onde 0% é preto, 50%
não é nem escuro nem claro e 100% é branco. Segue um exemplo de definição
de cor com valores HSL:
Esquema 26 – Especificando cor pelo valor HSL.

Por fim, as cores podem ser determinadas por valores RGBA e HSLA nas
formas rgba(red, green, blue, alpha) e hsla(hue, saturation, lightness,
alpha) respectivamente, onde alpha é um número entre 0 (transparente) e 1
(opaco). Seguem exemplos de definições de cores com RGBA e HSLA:

Esquema 27 – Especificando cor pelos valores HSLA e RGBA.

1.8 Links e Imagens
Em HTML os links são definidos pela tag <a>. Nos links o atributo href
especifica o endereço de destino, enquanto que o texto do link é a parte
visível. Ao se clicar no link você será direcionado para o endereço especificado.
Segue um exemplo:
Esquema 28 – Link.
Nesse exemplo, ao se clicar no texto “Visite a nossa página” você será
direcionado para o endereço https://www.exponencialconcursos.com.br.
Nos elementos do tipo link o atributo target especifica onde deve ser
aberto o documento destino. Esse atributo possui os seguintes valores:
 _blank – Abre o documento em uma nova janela ou aba;
 _self – Abre o documento na mesma janela/aba (default);
 _parent – Abre o documento no frame pai;
 _top – Abre o documento no corpo completo do frame;
Ainda se tratando de links, o atributo title especifica uma informação
extra a respeito do elemento. Geralmente essa informação é mostrada quando
o mouse é passado sobre o elemento (tooltip).
As imagens são inseridas em documentos HTML por meio da tag vazia
<img>, ou seja, essa tag não contém conteúdo, apenas atributos, e não precisa
ser fechada:
Esquema 29 – Imagens.
O atributo src especifica o endereço da imagem, o atributo alt fornece
um texto alternativo à imagem e irá aparecer caso a imagem não possa ser
exibida, os atributos width e height especificam a largura e a altura da imagem
respectivamente. Note que a largura e a altura da imagem também podem ser
determinadas por meio do atributo style, como apresentado no exemplo acima.
O atributo title pode ser adicionado à uma tag <img>, nesse caso o
texto do atributo title será exibido sempre que o usuário passar o cursor do
mouse sobre a figura.

Caso queira utilizar uma imagem como link deve-se usar um elemento
<img> dentro do elemento <a>, segue um exemplo:
Esquema 30 – Imagem como link.
3- (CESPE - 2016 - FUNPRESP-EXE - Especialista -

Tecnologia da Informação) 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.
Resolução:
O atributo title pode ser adicionado a uma tag <img>, nesse caso o texto do
atributo title será exibido sempre que o usuário passar o cursor do mouse
sobre a figura, ou seja, não é um texto fixo.
Gabarito: Errado.

1.9 Tabelas e Listas
Uma tabela em HTML é definida pela tag <table>. Cada linha é definida
pela tag <tr>. O cabeçalho da tabela é definido pela tag <th> e por padrão os
cabeçalhos são negritos e centralizados. Os dados/células da tabela são
definidos pela tag <td>.
Esquema 31 – Tabela.
Para que uma célula da tabela tenha mais que uma coluna pode-se
utilizar o atributo colspan e para que uma célula tenha mais que uma linha
pode-se utilizar o atributo rowspan. Seguem exemplos de uso dos atributos
colspan e rowspan:
Esquema 32 – Atributo colspan.

Esquema 33 – Atributo rowspan.

Listas não ordenadas em HTML são criadas utilizando-se a tag <ul>.
Cada item da lista deve ser iniciado com a tag <li>. Segue um exemplo:
Esquema 34 – Lista não ordenada.

No caso de listas ordenadas a tag utilizada é <ol>. Por padrão os itens
da lista são marcados com números:
Esquema 35 – Lista ordenada.

Em HTML também temos listas de descrição/definição (description
lists), nessas listas temos um conjunto de termos e suas respectivas descrições.
A tag <dl> define a lista, a tag <dt> define o termo e a tag <dd> define a
descrição de cada termo:
Esquema 36 – Lista de descrição.

4- (FCC - 2018 - DPE-AM - Assistente Técnico de

Defensoria - Programador) 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>
Resolução:
Em HTML temos listas de descrição/definição (description lists), nessas
listas temos um conjunto de termos e suas respectivas descrições. A tag <dl>
define a lista, a tag <dt> define o termo e a tag <dd> define a descrição de
cada termo.
Gabarito: Letra A.

1.10 Blocos
Todo elemento HTML tem uma forma de exibição padrão dependendo do

tipo do elemento. A forma de exibição padrão para a maioria dos elementos é
bloco ou inline.
Um elemento em nível de bloco sempre inicia em uma nova linha e
ocupa toda a largura disponível na página. Um exemplo de elemento em nível
de bloco é o <div>. O elemento <div> é geralmente usado como um container
para outros elementos HTML. Segue um exemplo:
Esquema 37 – Elemento em nível de bloco.

Os elementos inline não iniciam uma nova linha e ocupam apenas a
largura necessária na página. Um exemplo de elemento inline é o <spam>. O
elemento <spam> é geralmente utilizado como um container para algum
texto. Segue um exemplo:
Esquema 38 – Elemento inline.
define uma
<div> nível de bloco
seção
Tags de
agrupamento
define uma
<span> inline
seção
Esquema 39 – Tags de agrupamento.

1.11 Iframes
O elemento iframe é usado para exibir uma página web dentro de outra
página web, a tag utilizada para se definir um iframe é <iframe src="URL">
</iframe> na qual o atributo src especifica o endereço da página web (URL)
que será exibida. Os atributos height e width são utilizados para determinar a
altura e a largura do iframe respectivamente.
Segue um exemplo do uso de iframe:
Esquema 40 – Iframe.

5- (FCC - 2019 - AFAP - Analista de Fomento -

Tecnologia da Informação) 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.
Resolução:
O elemento iframe é usado para exibir uma página web dentro de outra página
web, a tag utilizada para se definir um iframe é <iframe src="URL">
que será exibida. Portanto, para definir uma área no centro onde outras páginas
HTML poderão ser carregadas deve-se utilizar o iframe.
Gabarito: Letra C.

1.12 JavaScript
O JavaScript deixa as páginas HTML mais dinâmicas e interativas. A tag

<script> é usada para definir um script JavaScript do lado do cliente. O
elemento <script>pode tanto conter instruções do script ou apontar para
um arquivo externo de script através do atributo src.
Scripts podem ser usados, por exemplo, para manipulação de
imagens, para validação, e mudanças dinâmicas no conteúdo das páginas.
Para selecionar um elemento HTML em JavaScript pode-se utilizar o método
document.getElementById().
Os scripts (JavaScript) podem alterar o conteúdo, o estilo e os atributos
de elementos HTML:
Esquema 41 – JavaScript.
No exemplo anterior é utilizado um script para alterar o conteúdo do
elemento <a> para “Bem-vindo!”. Note que o elemento <a> originalmente não
possui um atributo href, ele é atribuído por meio do script. Por fim, o script
altera o estilo do elemento <a> atualizando a sua cor para “red” (vermelho).
Portanto, se você clicar na palavra “Bem-vindo!” em vermelho será
redirecionado para a página https://www.exponencialconcursos.com.br/.
6- (CESPE - 2018 - FUB - Técnico de Tecnologia da

Informação) Julgue o próximo item, a respeito de questões relacionadas ao
desenvolvimento e testes de segurança de aplicações web.
Em uma página web escrita em HTML, é possível inserir um script JavaScript
por meio do uso da tag <script>. O elemento <script> deve conter as sentenças
do script a serem executadas.
Resolução:
A questão afirma que o elemento <script> deve conter as sentenças do script
a serem executadas. A questão está errada, pois o elemento <script>pode
tanto conter instruções do script ou apontar para um arquivo externo de
script através do atributo src.
Gabarito: Errado.

1.13 Caminhos de Arquivo
Um caminho de arquivo descreve o local de um arquivo na estrutura

de diretórios de um site. Caminhos de arquivo são utilizados para “linkar”
arquivos externos como: páginas web, imagens, páginas de estilo e
scripts.
Os caminhos de arquivo podem ser absolutos (URL completa do arquivo
na internet) ou relativos (URL relativa, caminho relativo com base na página
atual). Seguem alguns exemplos:
 <img src="https://www.xpto.com/images/picture.jpg"> - Caminho absoluto.
 <img src="/images/picture.jpg" alt="Mountain"> - Caminho relativo, a pasta
imagem está na raiz da página corrente.
 <img src="images/picture.jpg" alt="Mountain"> - Caminho relativo, a pasta
imagem está na pasta corrente.
 <img src="../images/picture.jpg" alt="Mountain"> - Caminho relativo, a
pasta imagem está um nível acima da página corrente.
É uma boa prática usar caminhos relativos (sempre que possível). Ao

usar caminhos relativos, sua página irá funcinar da mesma forma no seu
computador ou em qualquer domínio público!

1.14 Layouts
Páginas web são geralmente exibidas em múltiplas linhas e colunas. O

HTML5 oferece novos elementos semânticos que definem as diferentes partes
de uma página web:
 <header> - Define o cabeçalho de um documento ou seção;
 <nav> - Define um container com links de navegação;
 <section> - Define uma seção em um documento;
 <article> - Define um artigo independente e autocontido;
 <aside> - Define um conteúdo ao lado do restante (sidebar);
 <footer> - Define um rodapé para um documento ou seção;
 <details> - Define detalhes adicionais (pode ser ocultado);
 <summary> - Define um cabeçalho para o elemento <details>.
Abaixo temos um esquema para melhor visualizar os elementos descritos
acima:
Esquema 42 – Elementos de layout.
Não utilize tabelas para layout!

7- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) No
contêiner de rodapé de uma página, um web designer deseja definir um título
visível para um conjunto de informações secundárias que podem ser exibidas
ou ocultadas ao clicar nesse título. Para isso, devem ser utilizadas as tags
a) <title>, para o título visível e <summary>, para o conjunto de informações,
ambas, no interior da tag <details>.
b) <article>, para o título visível e <summary>, para o conjunto de
informações, ambas, no interior da tag <section>.
c) <title>, para o título visível e <details>, para o conjunto de informações,
ambas, no interior da tag <summary>.
d) <h1>, para o título visível e <p> para o conjunto de informações, ambas,
no interior da tag <header>
e) <summary>, para o título visível e <p> para os parágrafos com o conjunto
de informações, ambas, no interior da tag <details>.
Resolução:
<summary> - Define um cabeçalho para o elemento <details>.
<p> - Define um parágrafo.
<details> - Define detalhes adicionais (pode ser exibido ou ocultado).
Gabarito: Letra E.

1.15 Códigos
O elemento HTML <kbd> representa uma entrada do usuário, como

entradas de teclado ou comandos vocais. O texto incluído nas tags <kdb> é
geralmente exibido com fonte monoespaçada, por exemplo:
Esquema 43 – Entradas do usuário.

O elemento HTML <samp> representa uma saída de um programa ou
sistema computacional. O texto incluído nas tags <samp> também é exibido
com fonte monoespaçada:
Esquema 44 – Saída de um programa.

O elemento HTML <code> define um fragmento de código. O texto
incluído nas tags <code> também é exibido com fonte monoespaçada:
Esquema 45 – Fragmento de código.

Por fim, o elemento HTML <var> define um variável. A variável pode
estar em uma expressão matemática ou no contexto de programação:
Esquema 46 – Variável.

1.16 Character Sets ou Encoding
Para exibir uma página HTML de forma correta, o navegador precisa saber
qual codificação de caracteres usar (character set/encoding). O encoding
padrão para o HTML5 é o UTF-8 (Unicode), porém se o navegador detectar
ISO-8859-1 em uma página, o padrão será ANSI.
O encoding é especificado por meio da tag <meta>:
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
HTML5
<meta charset="UTF-8">
Esquema 47 – Encoding.
A tag <meta> é usada também para especificar descrição da página,
palavras-chave, autor e outros metadados. Os metadados são utilizados pelo
navegador, motores de busca e outros serviços web.
8- (FCC - 2017 - TRE-PR - Técnico Judiciário -

Programação de Sistemas) Ao desenvolver um site utilizando HTML5, um
Técnico observou que os caracteres acentuados eram exibidos incorretamente
pelo navegador. Para resolver o problema, usou um comando padrão no
cabeçalho das páginas para especificar corretamente a codificação de
caracteres. O comando utilizado foi:
a) <meta http-equiv="Content-Type" content="text/html; lang=pt-br">
b) <page lang="pt-br" encode="ISO-8859-1">
c) <manifest lang="pt-br" encoding="ASCII">
d) <meta charset="UTF-8">
e) <http-equiv lang="pt-br" content="text/html; charset=UTF-8">
Resolução:
O encoding é especificado por meio da tag <meta>:
HTML4
HTML5
Gabarito: Letra D.

1.17 Formulários HTML
O elemento <form> em HTML define um formulário utilizado para

coletar entradas. O formulário contem elementos que correspondem a
diferentes formas de entrada como text fields, checkboxes, radio buttons,
submit buttons, etc.
O elemento <input> é um dos mais importantes em um formulário e
pode ser exibido de diversas formas, dependendo do atributo type. Seguem
alguns exemplos:
Esquema 48 –Formulário.
A tag <input type=”radio”> define um “radio button”, esse elemento
permite a seleção de um item dentre uma quantidade limitada de itens. A tag
<input type=”text”> define uma entrada de texto com apenas uma linha.
A tag <input type=”submit”> define um botão para submeter o
formulário.
O atributo action, que pode ser observado no elemento <form>, define
a ação que será realizada quando o formulário for submetido. Normalmente
os dados do formulário são enviados a uma página web em algum servidor. No
exemplo acima os dados serão enviados para a página “/action_page.php”, que
possui o script para manipular os dados enviados.
O atributo target, especifica se o resultado submetido irá aparecer em
uma nova aba do navegador (“_blank”), ou na janela corrente (“_self”). Já o
atributo method especifica o método HTTP (GET ou POST) que será usado
quando os dados do formulário forem submetidos.
O atributo name, presente em cada um dos elementos <input>, é
obrigatório, ou seja, se o atributo name for omitido os dados do <input> não
serão enviados.
Por fim, o elemento <fieldset> é utilizado para agrupar dados em um
formulário e o elemento <legend> define um título para o agrupador. Segue
uma tabela com os elementos utilizados em formulários e suas respectivas
descrições:

Elemento Descrição
<form> Define um formulário HTML.
<input> Define uma entrada.
<textarea> Define entrada com múltiplas linhas.
<label> Define um rótulo para uma entrada.
<fieldset> Agrupa elementos em um formulário.
<legend> Define um título para o elemento <fieldset>.
<select> Define uma lista do tipo drop-down.
<optgroup> Define um grupo de itens em uma lista do tipo drop-down.
<option> Define uma opção em uma lista do tipo drop-down.
<button> Define um botão clicável.
<datalist> Especifica uma lista de opções pré-definidas.
<output> Define o resultado de um cálculo.
Esquema 49 – Elementos de formulário.
A tag <lable> pode ser usada para definir um rótulo para elementos
<button>, <input>, <meter>, <output>, <progress>, <select> ou
<textarea>. Essa tag não renderiza nada, porém melhora a usabilidade, porque
se o usuário clicar no texto com <label> é como se tivesse clicado no próprio
elemento. O atributo for da tag <label> deve ser igual ao atributo id do
elemento ao qual ela se refere.
Os elementos de um formulário podem ter diferentes atributos e dentre
eles podemos destacar o atributo placeholder. Esse atributo especifica uma
dica que descreve o valor esperado para o elemento de entrada. A dica é
exibida no elemento de entrada antes que o usuário entre com qualquer valor.
Outro atributo que merece destaque é o autofocus. Esse atributo
especifica um campo de entrada que passa a ter o focus assim que a página
é carregada.
Já o atributo pattern especifica uma expressão regular para elementos
do tipo <input> gerando uma validação das entradas na submissão do
formulário.

9- (CESPE - 2018 - MPE-PI - Analista Ministerial -

Tecnologia da Informação)
O resultado da execução do código antecedente será um formulário com um

campo editável, que aparecerá preenchido com a palavra teste na cor vermelha.
Essa palavra será apagada sempre que se começar a digitar dentro do campo e
será mostrada novamente caso se perca o focus do elemento e o conteúdo do
campo esteja vazio.
Resolução:
Correto. O seletor ::placeholder do CSS seleciona o texto do placeholder e
altera sua cor para vermelha. Além disso, o texto do placeholder aparece
sempre que o input estiver vazio, assim que o usuário começa a digitar
dentro do campo o placeholder é substituído pela entrada do usuário.
Gabarito: Certo.
10- (CESPE - 2018 - STJ - Técnico Judiciário -

Desenvolvimento de Sistemas) 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.
Resolução:
Pessoal, veja que essa é uma questão que exige muita atenção, pois a descrição
do atributo está correta, porém a questão foi dada como errada apenas porque
o nome do elemento foi grafado de maneira incorreta. O correto seria
autofocus, e não autofocos.
Gabarito: Errado.

1.18 HTML5
O padrão HTML5 traz novos elementos sejam eles semânticos ou

estruturais, a tabela abaixo lista esses novos elementos do HTML5:
<article> Define um artigo em um documento.
<aside> Define um conteúdo ao lado do restante (sidebar).
<bdi> Isola uma parte do texto que pode ser formatado em uma
direção diferente do restante.
<details> Define detalhes adicionais.
<dialog> Define uma caixa ou janela de diálogo.
<figcaption> Define um título para o elemento <figura>.
<figure> Define um conteúdo auto-contido.
<footer> Define um rodapé para um documento ou seção.
<header> Define um cabeçalho para um documento ou seção.
<main> Define o conteúdo principal do documento.
<mark> Define um texto marcado (highlighted).
<meter> Define uma medida escalar em um intervalo definido.
<nav> Define links de navegação.
<progress> Representa o progresso de uma tarefa.
<rp> Define o que mostrar nos navegadores que não suportam
anotações ruby.
<rt> Define uma explicação/pronúncia de caractere.
<ruby> Define uma anotação ruby.
<section> Define uma seção em um documento.
<summary> Define um cabeçalho para o elemento <details>.
<time> Define uma data/hora.
<wbr> Define uma possível quebra de linha.
Esquema 50 – Novos elementos em HTML5.
Além de conhecer os elementos que foram acrescentados no HTML5
também é importante destacar os elementos removidos no HTML5:
Elemento Removido Use

<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, ou <del>
<tt> CSS
Esquema 51 – Elementos removidos no HTML5.

11- (CESPE - 2014 - ANTAQ - Analista Administrativo -

Sistemas e Negócios) Acerca da HTML5, julgue o item subsequente.
Alguns elementos do HTML5, tais como o center e o font, são considerados
obsoletos por serem utilizados meramente para formatação, função que pode
ser realizada por meio de CSS.
Resolução:
Correto, os elementos center o font estão na lista de elementos removidos
no HTML5 e devem ser substituídos por instruções CSS.

<center> CSS
<font> CSS
Gabarito: Certo.

1.19 Elementos Gráficos
O elemento <canvas> é utilizado em HTML para desenhar elementos

gráficos em uma página web por meio de JavaScript. O elemento <canvas>
é apenas um container, deve-se usar JavaScript para desenhar.
Abaixo um exemplo de como se desenhar um círculo com canvas:
Esquema 52 – Círculo com canvas.

Abaixo um exemplo de como se desenhar um texto com canvas:
Esquema 53 – Texto com canvas.

Diferentemente da tag <canvas> o elemento <svg> é um container para
elementos gráficos do tipo SVG (Scalable Vector Graphics). A linguagem
para descrever elementos gráficos 2D no SVG é o XML, enquanto canvas utiliza
o JavaScript. Além disso, se um atributo de um objeto SVG é alterado o
navegador automaticamente renderiza o objeto, já com canvas o elemento
gráfico é desenhado pixel a pixel e, após ser desenhado, é esquecido pelo
navegador.
Abaixo um exemplo de como se desenhar um círculo com svg:
Esquema 54 – Círculo com SVG.

12- (CESPE - 2016 - TCE-PA - Auditor de Controle

Externo - Área Informática - Analista de Sistema) 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.
Resolução:
Errado, o elemento <canvas> é utilizado em HTML para desenhar elementos
gráficos em uma página web utilizando-se JavaScript. Uma forma padrão para
inserir um vídeo em uma página web é por meio da tag <video>.
Gabarito: Errado.

1.20 Mídia
Antes do HTML5 vídeos e áudios só poderiam ser reproduzidos em um

navegador por meio de um plugin, por exemplo, flash. Porém, com a introdução
do HTML5 a tag <video> passou a ser usada para reproduzir vídeos e a tag
<áudio> para reproduzir áudios em páginas web.
Segue um exemplo de como um vídeo pode ser inserido a uma página
web utilizando-se o elemento <video>:
Esquema 55 – Vídeo.
No exemplo acima o atributo controls adiciona controles ao vídeo, como
play, pause e volume, caso queira que o vídeo inicie a sua reprodução
automaticamente basta usar o atributo autoplay. O elemento <video> também
suporta os atributos width e height. Já o elemento <source> permite
especificar um arquivo de vídeo alternativo. O navegador utiliza o primeiro
formato reconhecido.
Os tipos de mídia para vídeo são:
Formato do Arquivo Tipo de Mídia

MP4 video/mp4
WebM video/webm
Ogg video/ogg
Esquema 56 – Tipos de mídia para vídeo.
Segue um exemplo de como um áudio pode ser inserido a uma página
web utilizando-se o elemento <audio>:
Esquema 57 – Áudio.
Assim como no elemento <video>, o elemento <audio> também suporta
o atributo controls e para indicar o arquivo de áudio também é utilizada a tag
<source>. Seguem os tipos de mídia para áudio:

MP3 audio/mpeg
OGG audio /ogg
WAV audio /wav
Esquema 58 – Tipos de mídia para áudio.
Tanto para <audio> quanto para <video> o atributo preload pode ser
utilizado para especificar se e como a mídia deve ser carregada: auto
(carrega a mídia quando a página é carregada), metadata (carrega apenas os
metadados da mídia quando a página é carregada) e none (não carrega nada
quando a página é carregada).
13- (CESPE - 2016 - TRT - 8ª Região (PA e AP) - Técnico

Judiciário - Tecnologia da Informação) 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>
Resolução:
A tag <audio> é utilizada para reproduzir áudio/música em páginas web.
Gabarito: Letra E.

2. QUESTÕES COMENTADAS
HTML
14- (CESPE - 2014 - ANTAQ - Analista Administrativo - Sistemas e
Negócios) Acerca da HTML5, julgue o item subsequente.
No exemplo apresentado a seguir, o atributo hint descreve corretamente a
forma de orientar o preenchimento do campo para o usuário.
<input type=”text” name=”Organizacao” hint=”ANTAQ”>
Resolução:
O atributo placeholder especifica uma dica que descreve o valor
esperado para o elemento de entrada e não o atributo hint.
Gabarito: Errado.
15- (CESPE - 2018 - STM - Técnico Judiciário - Programação de

Sistemas)
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.
Resolução:
A afirmativa está incorreta, pois a tag <output> define o resultado de um
cálculo e não dá indicações do que pode ser inserido no campo.
Gabarito: Errado.
16- (CESPE - 2017 - TRE-BA - Técnico Judiciário – Programação de

Sistemas) 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.
Resolução:
a) Incorreto: <mark> é utilizado para marcar/destacar uma parte do texto.
b) Correto: <progress> define o progresso de uma tarefa.
c) Incorreto: <meter> define uma medida escalar em um intervalo definido.
d) Incorreto: <figcaption> define um título para o elemento <figura>.
e) Incorreto: <main> define o conteúdo principal do documento.

Gabarito: Letra B.
17- (CESPE - 2016 - FUNPRESP-JUD - Analista - Tecnologia da

Informação)
Resolução:
Correto, a tag <rp> está entre os novos elementos do HTML5 e define o que
mostrar nos navegadores que não suportam anotações ruby.
Gabarito: Certo.
18- (CESPE - 2016 - TRE-PI - Técnico Judiciário - Programação de

Sistemas) 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.
Resolução:
a) Incorreto: Com o HTML5 não é mais necessário o uso de plugins como flash
para a reprodução de vídeos em páginas web, basta utilizar o elemento
<video>.
b) Incorreto: A indefinição dos parâmetros altura e largura dos vídeos não
geram problemas de renderização, o máximo que pode acontecer é a página
piscar enquanto o vídeo é carregado.
c) Incorreto: Para adição de vídeos é utilizada a tag <video> e o atributo
controls não é obrigatório.
d) Correto: O elemento iframe é usado para exibir uma página web dentro de
outra página web.
e) Incorreto: O header pode ser um cabeçalho da página ou da seção.
Gabarito: Letra D.

19- (CESPE CESPE - 2015 - TJ-DFT - Técnico Judiciário - Programação

de Sistemas) No que se refere ao funcionamento do HTML5 e do CSS3, julgue
o item a seguir.
O elemento <acronym>, usado em versão anterior, não faz parte da
especificação HTML5.
Resolução:
Correto, o elemento <acronym> consta na lista de elementos removidos do
HTML5 e deve ser substituído pelo elemento <abbr>.
Gabarito: Certo.
20- (CESPE - 2015 - TRE-MT - Analista Judiciário - Análise de Sistemas)

Assinale a opção em que o exemplo de nova tag apresentado é seguido por uma
descrição correta no HTML5.
a) <aside> ; muda o destino para aba ou janela à direita ou à esquerda da atual
aba ou janela.
b) <bdo> ; usada para substituir a direção do texto atual.
c) <bdi> ; isola parte de texto para formatação em direção diferente à do
restante do texto.
d) <wbr> ; coloca parênteses em torno de um texto Ruby, exibido por
navegadores que não suportam anotações Ruby.
e) <abbr> ; define abreviatura ou acrônimo.
Resolução:
a) Incorreto: define um conteúdo ao lado do restante (sidebar);
b) Incorreto: não se trata de uma tag nova do HTML5;
c) Correto: isola uma parte do texto que pode ser formatado em uma direção
diferente do restante;
d) Incorreto: define uma possível quebra de linha;
e) Incorreto: não se trata de uma tag nova do HTML5;
Gabarito: Letra C.
21- (CESPE - 2015 - TRE-MT - Técnico Judiciário - Programação de

Sistemas) Assinale a opção correta acerca do código HTML que faz referência
a um arquivo de folha de estilo (CSS).
a) <style src="tremt.css">
b) <link rel="stylesheet" type="text/css" href="tremt.css">

c) <a href="tremt.css">
d) <css src="tremt.css">
e) <stylesheet>tremt.css</stylesheet>
Resolução:
Um CSS external (externo) faz referência a um arquivo de folha de estilo
externo e é usado para definir o estilo para várias páginas:
Veja que nesse caso a tag utilizada é a do elemento <link>.

Gabarito: Letra B.

Sistemas)
<! DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<svg width="200" height="200"
style="fill : rgb (255,255,255); stroke:rgb (0,0,0)">
<rect width="200" height="200" />
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
</body>
</html>
Assinale a opção que apresenta o resultado do código HTML acima em um
navegador compatível.

a)<svg width="200" height="200"
style="fill:rgb(255,255,255);stroke:rgb(0,0,0)">
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
b) HTML
c)HTML
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
d) dHTML
e) Tela vazia.
Resolução:
O elemento <svg> é um container para elementos gráficos do tipo SVG
(Scalable Vector Graphics). A linguagem para descrever elementos gráficos
2D no SVG é o XML e o código acima desenha um elemento gráfico contendo
um retângulo (rect), um círculo (circle) e quatro linhas (line).
Gabarito: Letra D.

23- (CESPE - 2015 - STJ - Analista Judiciário - Análise de Sistemas de
Informação) Julgue o item que se segue acerca de HTML5, CSS3 e JSon.
A tag definida a seguir é obrigatória na especificação de uma página que
utilize HTML5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5. //PT"
"h t t p:/ /www. w3.org/ TR /html5 /strict.dtd">

Resolução:
A declaração <!DOCTYPE> representa o tipo do documento, e ajuda o browser

a mostrar as páginas web de forma correta.
Deve aparecer apena uma vez no topo da página antes das tags <html>.
A declaração <!DOCTYPE> não é case sensitive.
O <!DOCTYPE> para HTML5 é <!DOCTYPE html> .
Gabarito: Errado.
24- (CESPE - 2015 - MEC - Web Design/Mobile Design) No HTML 5, o

atributo pattern permite a definição de um padrão de apresentação dos
elementos de um formulário.
Resolução:
Errado, o atributo pattern especifica uma expressão regular para elementos
do tipo <input> gerando uma validação das entradas na submissão do
formulário.
Gabarito: Errado.
25- (CESPE - 2015 - MEC - Web Design/Mobile Design) No HTML 5, para

que um arquivo de áudio seja automaticamente carregado a partir do momento
em que a página for carregada, é necessário usar-se o atributo preload.
Resolução:
Tanto para <audio> quanto para <video> o atributo preload pode ser utilizado
para especificar se e como a mídia deve ser carregada: auto (carrega a
mídia quando a página é carregada), metadata (carrega apenas os metadados
da mídia quando a página é carregada) e none (não carrega nada quando a
página é carregada).
Gabarito: Certo.

26- (FCC - 2018 - SABESP - Técnico em Gestão 01 - Informática) 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>
Resolução:
a) Incorreto: define a marcação/destaque do texto;
b) Incorreto: define uma lista de descrição;
c) Incorreto: define conteúdo interativo ou plugin externo;
d) Incorreto: define um fragmento de código;
e) Correto: define um texto pré-formatado;
Gabarito: Letra E.
27- (FCC - 2018 - SABESP - Analista de Gestão - Publicidade e

Propaganda) Desenvolvido pela Macromedia, empresa adquirida no ano de
2005 pela Adobe, o Flash Player é um recurso para exibição de animações na
web a partir de arquivos executáveis. Até a popularização dos smartphones, era
o padrão para criação gráfica avançada em sites e jogos, mas por conta do
bloqueio de seu funcionamento em dispositivos produzidos pela Apple, uma
linguagem foi desenvolvida para que animações fossem emuladas e mostradas
pelo próprio navegador, facilitando tanto o design de aplicativos e web móvel
quanto a segurança de navegação e conexão. Essa linguagem é o
a) NET.
b) C++.
c) PHP.
d) ASP.
e) HTML5.
Resolução:
Antes do HTML5 vídeos e áudios só poderiam ser reproduzidos em um
navegador por meio de um plugin, por exemplo, flash. Porém, com a introdução
do HTML5 a tag <video> passou a ser usada para reproduzir vídeos e tag
<áudio> para reproduzir áudios em páginas web.
Gabarito: Letra E.

28- (FCC - 2018 - DPE-AM - Assistente Técnico de Defensoria -

Programador) Considere o fragmento abaixo em uma página HTML acessível.
O rótulo de texto "6 dividido por 4 é igual a 1.5" é fornecido para a equação de
divisão gerada pelo fragmento de código, de forma que quando o leitor de tela
encontrar essa equação, o texto do rótulo seja lido para que um usuário cego,
por exemplo, saiba do que se trata o objeto (equação). Em condições ideais,
para que isso seja possível, a lacuna I deve ser preenchida pelo atributo
a) description.
b) aria-label.
c) text-aria.
d) info-label.
e) label.
Resolução:
Essa é uma questão que trata de acessibilidade. O atributo aria-label é usado
para definir um texto na tag do elemento corrente.
Esse atributo pode ser usado em qualquer elemento de HTML e gera efeitos
sobre os user agents e tecnologia assistiva.
Gabarito: Letra B.
29- (FCC - 2017 - TST - Técnico Judiciário – Programação) 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
Resolução:
Os tipos de mídia para vídeo são:

MP4 video/mp4
WebM video/webm
Ogg video/ogg
Gabarito: Letra C.
30- (FCC - 2015 - TCM-GO - Auditor de Controle Externo - Informática)

Um desenvolvedor está criando um formulário em uma página web e deseja
utilizar um novo elemento de formulário adicionado na versão 5 da linguagem
HTML, que especifica uma lista drop-down de opções pré-definidas para um
elemento < input >. O elemento que este desenvolvedor deve utilizar é o
a) <output>
b) <ol>
c) <keygen>
d) <ul>
e) <datalist>
Resolução:
Seguem os elementos de formulário:
<form> Define um formulário HTML.
<input> Define uma entrada.
<textarea> Define entrada com múltiplas linhas.
<label> Define um rótulo para uma entrada.
<fieldset> Agrupa elementos em um formulário.
<legend> Define um título para o elemento <fieldset>.
<select> Define uma lista do tipo drop-down.
<optgroup> Define um grupo de itens em uma lista do tipo drop-down.
<option> Define uma opção em uma lista do tipo drop-down.
<button> Define um botão clicável.
<datalist> Especifica uma lista de opções pré-definidas.
<output> Define o resultado de um cálculo.

Gabarito: Letra E.
31- (FCC - 2013 - AL-RN - Técnico Legislativo - Programador) A
linguagem HTML na versão 5 possui um conjunto de novos elementos e
atributos. Sobre eles, é INCORRETO afirmar que o
a) elemento <meter> define uma medida escalar dentro de um intervalo não
conhecido. Deve ser usado apenas para medições onde os valores mínimo e
máximo são desconhecidos.
b) elemento <datalist > em conjunto com o atributo list do elemento <input>
pode ser usado para criar caixas de combinação (comboboxes).
c) elemento <details> pode ser utilizado para mostrar ou ocultar informações
adicionais na página.
d) atributo pattern do elemento <input> permite inserir uma expressão regular
para validação da entrada de dados em um campo.
e) atributo type do elemento <input> permite valores como email, url, search,
tel, date, time, number, range e color.
Resolução:
<meter>: Define uma medida escalar em um intervalo definido
a) Incorreto: elemento <meter> define uma medida escalar dentro de um
intervalo não conhecido. Deve ser usado apenas para medições onde os valores
mínimo e máximo são desconhecidos.
Gabarito: Letra A.
32- (FCC - 2017 - TRT - 24ª REGIÃO (MS) - Técnico Judiciário -

Tecnologia da Informação) 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> .
Resolução:
Códigos ISO de países definem abreviações para países. Em HTML eles podem
ser utilizados no atributo lang. Veja um exemplo:

Gabarito: Letra A.
33- (FCC - 2013 - MPE-AM - Agente de Apoio - Programador) Apesar dos

recursos da HTML4 ainda serem hoje a referência para o desenvolvimento de
aplicações web, essa versão está sendo gradativamente substituída pela HTML5
que possui um conjunto de novos elementos, não presentes na HTML4, como,
por exemplo,
a) <figure>, <abbr>, <canvas> e <param>
b) <details>, <detalist>, <keygen> e <object>
c) <footer>, <header>, <section> e <nav>
d) <embed>, <mark>, <progress> e <link>
e) <meter>, <time>, <kbd> e <legend>
Resolução:
Novos elementos HTML5:
anotações ruby.

a) Incorreto: <abbr>, <canvas> e <param> não estão na lista de elementos

novos do HTML5.
b) Incorreto: <detalist>, <keygen> e <object> não estão na lista de
elementos novos do HTML5.
c) Correto: <footer>, <header>, <section> e <nav> estão na lista de
elementos novos do HTML5.
d) Incorreto: <embed> e <link> não estão na lista de elementos novos do
HTML5.
e) Incorreto: <kbd> e <legend> não estão na lista de elementos novos do
HTML5.
Gabarito: Letra C.
34- (FCC - 2017 - TRT - 11ª Região (AM e RR) - Técnico Judiciário -
Tecnologia da Informação) Considere que um Técnico está desenvolvendo
um site acessível utilizando HTML5 para que seja adequadamente interpretado
por leitores de tela usados por deficientes visuais. Assim, recomendou a
associação de etiquetas de texto (label) aos campos (input) dos formulários
utilizando, nos elementos input e label, respectivamente, os atributos
a) alt e src.
b) name e idref.
c) target e source.
d) ref e caption.
e) id e for.
Resolução:
O atributo for da tag <label> deve ser igual ao atributo id do elemento ao
qual ela se refere.
Gabarito: Letra E.
35- (FCC - 2016 - AL-MS - Técnico de Informática) Considere o fragmento

de código HTML5 a seguir. <body> <audio controls> I </audio> </body> 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">
Resolução:
Segue um exemplo do uso da tag <audio>:
Gabarito: Letra C.
36- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer)

Considere a página web a seguir:
Os atributos de indexação da página web são descritos em

a) Local-1.
b) Local-2.
c) Local-3.
d) Local-4.
e) Local-5.
Resolução:
A tag <meta> é usada para definir o encoding, especificar uma descrição da
página, palavras-chave, autor e outros metadados. Os metadados são utilizados
pelo navegador, motores de busca e outros serviços web.
Essa tag é colocada entre as tags <HEAD></HEAD>, portanto pode-se dizer
que os atributos de indexação da página web são descritos no Local-2.
Gabarito: Letra B.

37- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) Em um
campo telefone de um formulário HTML5, criado pela tag <input>, um web
designer deseja especificar uma expressão regular para checar se a entrada do
telefone está no formato desejado e especificar uma pequena dica que descreve
o formato do telefone esperado no campo antes do usuário digitar um valor.
Para isso, deve utilizar, respectivamente, na tag <input> os atributos
a) checked e hint.
b) pattern e placeholder.
c) regexp e title.
d) checked e placeholder
e) pattern e hint.
Resolução:
O atributo pattern especifica uma expressão regular para elementos do tipo
<input> gerando uma validação das entradas na submissão do formulário.
O atributo placeholder especifica uma dica que descreve o valor
esperado para o elemento de <input>.
Gabarito: Letra B.

Considere o bloco de código HTML5 a seguir:
<video width="400" height="300" autoplay>
</video>
Para exibir um vídeo chamado mppb.mp4 deve-se escrever, entre a tag

<video> e </video> a instrução
a) <movie src="mppb.mp4" type="video/mp4">
b) <source type="movie/mp4" href="mppb.mp4">
c) <source src="mppb.mp4" type="video/mp4">
d) <movie type="movie/mp4" src="mppb.mp4">
e) <source src="mppb.mp4" enctype="multipart/mp4">
Resolução:
Segue um exemplo de como um vídeo pode ser inserido a uma página web
utilizando-se o elemento <video>:

Note que para inserir um vídeo deve-se inserir entre as tags <video> e
</video> o elemento <source> com o atributo src e type.
Gabarito: Letra C.
39- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) As

células de uma tabela são definidas pela tag <td>. Para mesclar células na
horizontal ou na vertical são utilizados nessa tag, respectivamente, os atributos
a) cols e rows.
b) columns e lines.
c) mixcols e mixrows.
d) columns e rows.
e) colspan e rowspan.
Resolução:
Para que uma célula da tabela tenha mais que uma coluna pode-se utilizar o
atributo colspan e para que uma célula tenha mais que uma linha pode-se
utilizar o atributo rowspan.
Gabarito: Letra E.
40- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) Um web

designer está desenvolvendo um site com HTML5 e, para manter a identidade
visual em todas as páginas, criou um layout padrão com contêineres div para
cabeçalho, rodapé, menu superior, menu lateral esquerdo e um contêiner maior
à direita onde serão carregadas as páginas referentes a cada link clicado nos
menus. Para que as páginas referentes aos links dos menus sejam carregadas
nesse contêiner quando o usuário clicar nesses links é necessário que elas sejam
direcionadas para um
a) table no interior do contêiner por meio do atributo redirect.
b) frame no interior do contêiner por meio do atributo redirect.
c) frameset no interior do contêiner por meio do atributo pointer.
d) iframe no interior do contêiner por meio do atributo target.
e) section no interior do contêiner por meio do atributo target.
Resolução:

O elemento iframe é usado para exibir uma página web dentro de outra página
web, a tag utilizada para se definir um iframe é <iframe src="URL">
que será exibida.
Gabarito: Letra D.

3. RISCO EXPONENCIAL
•Descreve a estrutura de páginas web

usando marcações;
•Os elementos são os blocos de construção
HTML das páginas;

•Elementos são representados por tags;
•As tags rotulam pedaços de conteúdo;
•Navegadores não mostram as tags, mas
usam elas para renderizar o conteúdo.
Atributos
•Todos os elementos HTML podem ter atributos;

•Fornecem informações adicionais sobre o elemento;
•São sempre especificados nas tags de abertura;
•Geralmente estão na forma nome/valor (nome="valor")



Atributo Único
Inline
style elemento
Elemento Única
CSS Internal
<style> página
Arquivo Várias
External
externo páginas




define uma
<div> nível de bloco
seção
Tags de
agrupamento
define uma
<span> inline
seção

HTML4
HTML5


MP4 video/mp4
WebM video/webm
Ogg video/ogg

MP3 audio/mpeg
OGG audio /ogg

WAV audio /wav
Novos Elementos HTML5

anotações ruby.

<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, ou <del>
<tt> CSS

4. LISTAS DE EXERCÍCIOS
Questões comentadas durante a aula.
1- (FCC - 2015 - CNMP - Analista do CNMP - Tecnologia de Informação
e Comunicação Suporte e Infraestrutura) Um programa elaborado na
linguagem HTML apresenta a seguinte linha:
< !DOCTYPE HTML>
Sobre essa linha, é correto afirmar que ela
a) indica que o arquivo com o programa-fonte possui a extensão doc.
b) deve vir sempre após a tag < html>.
c) é uma tag que define o nome do arquivo que possui o programa.
d) especifica ao navegador o tipo de documento HTML que ele vai renderizar.
e) não atende corretamente a linguagem HTML, que não aceita o símbolo ! em
seus comandos.
2- (CESPE - 2018 - FUB - Técnico de Tecnologia da Informação) Julgue

o próximo item, concernente ao conceito relacionado a algoritmos e linguagens
de programação.
A tag <style> é utilizada para definir uma folha de estilo dentro de uma página
HTML.
3- (CESPE - 2016 - FUNPRESP-EXE - Especialista - Tecnologia da

Informação) 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.

Programador) 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>

5- (FCC - 2019 - AFAP - Analista de Fomento - Tecnologia da
Informação) 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.
6- (CESPE - 2018 - FUB - Técnico de Tecnologia da Informação) Julgue

o próximo item, a respeito de questões relacionadas ao desenvolvimento e
testes de segurança de aplicações web.
Em uma página web escrita em HTML, é possível inserir um script JavaScript
por meio do uso da tag <script>. O elemento <script> deve conter as sentenças
do script a serem executadas.
7- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) No

contêiner de rodapé de uma página, um web designer deseja definir um título
visível para um conjunto de informações secundárias que podem ser exibidas
ou ocultadas ao clicar nesse título. Para isso, devem ser utilizadas as tags
a) <title>, para o título visível e <summary>, para o conjunto de informações,
ambas, no interior da tag <details>.
b) <article>, para o título visível e <summary>, para o conjunto de
informações, ambas, no interior da tag <section>.
c) <title>, para o título visível e <details>, para o conjunto de informações,
ambas, no interior da tag <summary>.
d) <h1>, para o título visível e <p> para o conjunto de informações, ambas,
no interior da tag <header>
e) <summary>, para o título visível e <p> para os parágrafos com o conjunto
de informações, ambas, no interior da tag <details>.
8- (FCC - 2017 - TRE-PR - Técnico Judiciário - Programação de

Sistemas) Ao desenvolver um site utilizando HTML5, um Técnico observou que
os caracteres acentuados eram exibidos incorretamente pelo navegador. Para

resolver o problema, usou um comando padrão no cabeçalho das páginas para
especificar corretamente a codificação de caracteres. O comando utilizado foi:
a) <meta http-equiv="Content-Type" content="text/html; lang=pt-br">
b) <page lang="pt-br" encode="ISO-8859-1">
c) <manifest lang="pt-br" encoding="ASCII">
d) <meta charset="UTF-8">
e) <http-equiv lang="pt-br" content="text/html; charset=UTF-8">
9- (CESPE - 2018 - MPE-PI - Analista Ministerial - Tecnologia da

Informação)
O resultado da execução do código antecedente será um formulário com um

campo editável, que aparecerá preenchido com a palavra teste na cor vermelha.
Essa palavra será apagada sempre que se começar a digitar dentro do campo e
será mostrada novamente caso se perca o focus do elemento e o conteúdo do
campo esteja vazio.
10- (CESPE - 2018 - STJ - Técnico Judiciário - Desenvolvimento de

Sistemas) 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.

Alguns elementos do HTML5, tais como o center e o font, são considerados
obsoletos por serem utilizados meramente para formatação, função que pode
ser realizada por meio de CSS.

12- (CESPE - 2016 - TCE-PA - Auditor de Controle Externo - Área
Informática - Analista de Sistema) 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.
13- (CESPE - 2016 - TRT - 8ª Região (PA e AP) - Técnico Judiciário -

Tecnologia da Informação) 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>

No exemplo apresentado a seguir, o atributo hint descreve corretamente a
forma de orientar o preenchimento do campo para o usuário.
<input type=”text” name=”Organizacao” hint=”ANTAQ”>
15- (CESPE - 2018 - STM - Técnico Judiciário - Programação de

Sistemas)
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.
16- (CESPE - 2017 - TRE-BA - Técnico Judiciário – Programação de

Sistemas) 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.

17- (CESPE - 2016 - FUNPRESP-JUD - Analista - Tecnologia da
Informação)
18- (CESPE - 2016 - TRE-PI - Técnico Judiciário - Programação de

Sistemas) 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.
19- (CESPE CESPE - 2015 - TJ-DFT - Técnico Judiciário - Programação

de Sistemas) No que se refere ao funcionamento do HTML5 e do CSS3, julgue
o item a seguir.
O elemento <acronym>, usado em versão anterior, não faz parte da
especificação HTML5.
20- (CESPE - 2015 - TRE-MT - Analista Judiciário - Análise de Sistemas)

Assinale a opção em que o exemplo de nova tag apresentado é seguido por uma
descrição correta no HTML5.
a) <aside> ; muda o destino para aba ou janela à direita ou à esquerda da atual
aba ou janela.
b) <bdo> ; usada para substituir a direção do texto atual.
c) <bdi> ; isola parte de texto para formatação em direção diferente à do
restante do texto.
d) <wbr> ; coloca parênteses em torno de um texto Ruby, exibido por
navegadores que não suportam anotações Ruby.
e) <abbr> ; define abreviatura ou acrônimo.

Sistemas) Assinale a opção correta acerca do código HTML que faz referência
a um arquivo de folha de estilo (CSS).
a) <style src="tremt.css">
b) <link rel="stylesheet" type="text/css" href="tremt.css">
c) <a href="tremt.css">
d) <css src="tremt.css">
e) <stylesheet>tremt.css</stylesheet>

Sistemas)
<! DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
style="fill : rgb (255,255,255); stroke:rgb (0,0,0)">
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
</body>
</html>
Assinale a opção que apresenta o resultado do código HTML acima em um
navegador compatível.
a)<svg width="200" height="200"
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
b) HTML

c)HTML
<circle cx="100" cy="100" r="40" />
<line x1="0" y1="100" x2="100" y2="200" />
<line x1="100" y1="200" x2="200" y2="100"/>
<line x1="200" y1="100" x2="100" y2="0" />
<line x1="100" y1="0" x2="0" y2="100" />
</svg>
d) dHTML
e) Tela vazia.
23- (CESPE - 2015 - STJ - Analista Judiciário - Análise de Sistemas de

Informação) Julgue o item que se segue acerca de HTML5, CSS3 e JSon.
A tag definida a seguir é obrigatória na especificação de uma página que
utilize HTML5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5. //PT"
"h t t p:/ /www. w3.org/ TR /html5 /strict.dtd">
24- (CESPE - 2015 - MEC - Web Design/Mobile Design) No HTML 5, o

atributo pattern permite a definição de um padrão de apresentação dos
elementos de um formulário.
25- (CESPE - 2015 - MEC - Web Design/Mobile Design) No HTML 5, para

que um arquivo de áudio seja automaticamente carregado a partir do momento
em que a página for carregada, é necessário usar-se o atributo preload.
26- (FCC - 2018 - SABESP - Técnico em Gestão 01 - Informática) 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>
27- (FCC - 2018 - SABESP - Analista de Gestão - Publicidade e

Propaganda) Desenvolvido pela Macromedia, empresa adquirida no ano de
2005 pela Adobe, o Flash Player é um recurso para exibição de animações na
web a partir de arquivos executáveis. Até a popularização dos smartphones, era
o padrão para criação gráfica avançada em sites e jogos, mas por conta do
bloqueio de seu funcionamento em dispositivos produzidos pela Apple, uma
linguagem foi desenvolvida para que animações fossem emuladas e mostradas
pelo próprio navegador, facilitando tanto o design de aplicativos e web móvel
quanto a segurança de navegação e conexão. Essa linguagem é o
a) NET.
b) C++.
c) PHP.
d) ASP.
e) HTML5.

Programador) Considere o fragmento abaixo em uma página HTML acessível.
O rótulo de texto "6 dividido por 4 é igual a 1.5" é fornecido para a equação de
divisão gerada pelo fragmento de código, de forma que quando o leitor de tela
encontrar essa equação, o texto do rótulo seja lido para que um usuário cego,
por exemplo, saiba do que se trata o objeto (equação). Em condições ideais,
para que isso seja possível, a lacuna I deve ser preenchida pelo atributo

a) description.
b) aria-label.
c) text-aria.
d) info-label.
e) label.
29- (FCC - 2017 - TST - Técnico Judiciário – Programação) 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
30- (FCC - 2015 - TCM-GO - Auditor de Controle Externo - Informática)

Um desenvolvedor está criando um formulário em uma página web e deseja
utilizar um novo elemento de formulário adicionado na versão 5 da linguagem
HTML, que especifica uma lista drop-down de opções pré-definidas para um
elemento < input >. O elemento que este desenvolvedor deve utilizar é o
a) <output>
b) <ol>
c) <keygen>
d) <ul>
e) <datalist>
31- (FCC - 2013 - AL-RN - Técnico Legislativo - Programador) A

linguagem HTML na versão 5 possui um conjunto de novos elementos e
atributos. Sobre eles, é INCORRETO afirmar que o

a) elemento <meter> define uma medida escalar dentro de um intervalo não
conhecido. Deve ser usado apenas para medições onde os valores mínimo e
máximo são desconhecidos.
b) elemento <datalist > em conjunto com o atributo list do elemento <input>
pode ser usado para criar caixas de combinação (comboboxes).
c) elemento <details> pode ser utilizado para mostrar ou ocultar informações
adicionais na página.
d) atributo pattern do elemento <input> permite inserir uma expressão regular
para validação da entrada de dados em um campo.
e) atributo type do elemento <input> permite valores como email, url, search,
tel, date, time, number, range e color.
32- (FCC - 2017 - TRT - 24ª REGIÃO (MS) - Técnico Judiciário -

Tecnologia da Informação) 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> .
33- (FCC - 2013 - MPE-AM - Agente de Apoio - Programador) Apesar dos

recursos da HTML4 ainda serem hoje a referência para o desenvolvimento de
aplicações web, essa versão está sendo gradativamente substituída pela HTML5
que possui um conjunto de novos elementos, não presentes na HTML4, como,
por exemplo,
a) <figure>, <abbr>, <canvas> e <param>
b) <details>, <detalist>, <keygen> e <object>
c) <footer>, <header>, <section> e <nav>
d) <embed>, <mark>, <progress> e <link>
e) <meter>, <time>, <kbd> e <legend>
34- (FCC - 2017 - TRT - 11ª Região (AM e RR) - Técnico Judiciário -
Tecnologia da Informação) Considere que um Técnico está desenvolvendo
um site acessível utilizando HTML5 para que seja adequadamente interpretado

por leitores de tela usados por deficientes visuais. Assim, recomendou a
associação de etiquetas de texto (label) aos campos (input) dos formulários
utilizando, nos elementos input e label, respectivamente, os atributos
a) alt e src.
b) name e idref.
c) target e source.
d) ref e caption.
e) id e for.
35- (FCC - 2016 - AL-MS - Técnico de Informática) Considere o fragmento

de código HTML5 a seguir. <body> <audio controls> I </audio> </body> 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">

Considere a página web a seguir:
Os atributos de indexação da página web são descritos em

a) Local-1.

b) Local-2.
c) Local-3.
d) Local-4.
e) Local-5.
37- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) Em um

campo telefone de um formulário HTML5, criado pela tag <input>, um web
designer deseja especificar uma expressão regular para checar se a entrada do
telefone está no formato desejado e especificar uma pequena dica que descreve
o formato do telefone esperado no campo antes do usuário digitar um valor.
Para isso, deve utilizar, respectivamente, na tag <input> os atributos
a) checked e hint.
b) pattern e placeholder.
c) regexp e title.
d) checked e placeholder
e) pattern e hint.

Considere o bloco de código HTML5 a seguir:
<video width="400" height="300" autoplay>
</video>
Para exibir um vídeo chamado mppb.mp4 deve-se escrever, entre a tag

<video> e </video> a instrução
a) <movie src="mppb.mp4" type="video/mp4">
b) <source type="movie/mp4" href="mppb.mp4">
c) <source src="mppb.mp4" type="video/mp4">
d) <movie type="movie/mp4" src="mppb.mp4">
e) <source src="mppb.mp4" enctype="multipart/mp4">
39- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) As

células de uma tabela são definidas pela tag <td>. Para mesclar células na
horizontal ou na vertical são utilizados nessa tag, respectivamente, os atributos
a) cols e rows.

b) columns e lines.
c) mixcols e mixrows.
d) columns e rows.
e) colspan e rowspan.
40- (FCC - 2015 - MPE-PB - Técnico Ministerial – Web Designer) Um web

designer está desenvolvendo um site com HTML5 e, para manter a identidade
visual em todas as páginas, criou um layout padrão com contêineres div para
cabeçalho, rodapé, menu superior, menu lateral esquerdo e um contêiner maior
à direita onde serão carregadas as páginas referentes a cada link clicado nos
menus. Para que as páginas referentes aos links dos menus sejam carregadas
nesse contêiner quando o usuário clicar nesses links é necessário que elas sejam
direcionadas para um
a) table no interior do contêiner por meio do atributo redirect.
b) frame no interior do contêiner por meio do atributo redirect.
c) frameset no interior do contêiner por meio do atributo pointer.
d) iframe no interior do contêiner por meio do atributo target.
e) section no interior do contêiner por meio do atributo target.

5. GABARITO
1 D 11 C 21 B 31 A
2 C 12 E 22 D 32 A
3 E 13 E 23 E 33 C
4 A 14 E 24 E 34 E
5 C 15 E 25 C 35 C
6 E 16 B 26 E 36 B
7 E 17 C 27 E 37 B
8 D 18 D 28 B 38 C
9 C 19 C 29 C 39 E
10 E 20 C 30 E 40 D
6. REFERÊNCIAS
W3SCHOOLS. HTML Tutorial. Disponível em:
<https://www.w3schools.com/html/default.asp>. Acesso em: 18 abr. 2019.


Apostila HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Aula 00

Curso: Informática – Teoria e Questões

Olá, futuros Analistas de Sistemas e Administradores de Sites do

Prof. Leandro Ribeiro 2 de 86

No quadro abaixo segue o programa do nosso curso.

Prof. Leandro Ribeiro 3 de 86

1. TÓPICOS GERAIS ..................................................................................................................... 7

Para facilitar sua referência, abaixo listamos as esquematizações desta aula:

Prof. Leandro Ribeiro 4 de 86

Prof. Leandro Ribeiro 5 de 86

Prof. Leandro Ribeiro 6 de 86

HTML (Hyper Text Markup Language) é a linguagem de marcação

•Descreve a estrutura de páginas web

HTML das páginas;

Esquema 1 – Características do HTML.

Abaixo segue um exemplo de documento HTML:

<h1>Meu primeiro cabeçalho</h1>

Segue a explicação de cada uma das tags utilizadas no documento:

Prof. Leandro Ribeiro 7 de 86

A declaração <!DOCTYPE> representa o tipo do documento, e ajuda o browser

As tags HTML são nomes de elementos cercados pelos sinais de menor

Apenas o conteúdo dentro da tag <body> é apresentada no navegador.

Elementos HTML podem estar aninhados, ou seja, elementos podem

Prof. Leandro Ribeiro 8 de 86

1- (FCC - 2015 - CNMP - Analista do CNMP - Tecnologia

Prof. Leandro Ribeiro 9 de 86

Os atributos fornecem informações adicionais a respeito dos

•Todos os elementos HTML podem ter atributos;

Esquema 2 – Características dos Atributos.

Normalmente são utilizadas aspas duplas nos valores dos atributos,

<p title="John 'ShotGun' Nelson"

Prof. Leandro Ribeiro 10 de 86

Os títulos são importantes porque são usados por motores de busca

Os parágrafos em HTML são definidos pelo elemento <p>.

Caso seja necessário adicionar uma quebra de linha ao documento, sem

Prof. Leandro Ribeiro 11 de 86

Esquema 5 – Quebras de Linha.

Prof. Leandro Ribeiro 12 de 86

O estilo de um elemento HTML pode ser ajustado utilizando-se o atributo

A propriedade background-color define a cor de fundo do elemento

Existem elementos HTML específicos para a formatação de texto. Abaixo

Prof. Leandro Ribeiro 13 de 86

Note que o navegador apresenta <strong> da mesma forma que <b> e

Prof. Leandro Ribeiro 14 de 86

Nesta seção iremos apresentar elementos HTML que estão relacionados

Esquema 9 – Bloco de Citação.

A tag <abbr> é utilizada para abreviações e acrônimos:

A tag <address> é utilizada para definir informações de um contato

Prof. Leandro Ribeiro 15 de 86

A tag <cite> é utilizada para citar títulos de trabalhos:

Esquema 12 – Citações de obras.

A tag <bdo> é utilizada para escrever o texto da direita para a esquerda,

Esquema 13 – Escrita invertida.

Os comentários são adicionados ao código fonte HTM da seguinte forma:

Comentários não são apresentados no navegador, porém eles podem

Prof. Leandro Ribeiro 16 de 86

CSS (Cascading Style Sheets) descreve como os elementos HTML são

Esquema 15 – Formas de se Adicionar o CSS.

Esquema 16 – Inline CSS.

Esquema 17 – Internal CSS.

Prof. Leandro Ribeiro 17 de 86

Esquema 18 – External CSS.

Esquema 19 – Arquivo “styles.css”.

Prof. Leandro Ribeiro 18 de 86