aula 00 demonstrativa metro df analista de sistemas

Desenvolvimento de Software – METRÔ-DF

– Aula 00 – Exercícios Comentados –

Prof. Lúcio

www.tiparaconcursos.net Página 1 de 33

AULA 00: HTML 4 e 5 e CSS

Sumário 1. Apresentação. ................................................................................................................................. 2

1.1. A Banca. ...................................................................................................................................... 2

1.2. Metodologia das aulas. ............................................................................................................... 2

2. Conteúdo Programático e Planejamento das Aulas (Cronograma). ............................................... 4

3. Questões HTML4 e 5 ....................................................................................................................... 5

5. Lista das Questões Utilizadas na Aula. .......................................................................................... 25

6. Gabarito. ....................................................................................................................................... 32

Olá Pessoal!

Primeiramente sejam bem vindos a este curso. Antes de iniciarmos vou falar um

pouquinho sobre mim. Sou graduado em Análise de Sistemas com Pós Graduação em

Engenharia de Software e MBA em Gerenciamento de Projetos. Atualmente sou

funcionário do Banco do Brasil, cedido à Caixa de Previdência dos Funcionários do Banco

do Brasil (PREVI), no Rio de Janeiro. Grande parte da minha trajetória profissional foi

voltada para a área de desenvolvimento de aplicações web utilizando a linguagem Java,

a qual eu possuo as Certificações SCJP (Sun Java Certified Programmer), OCWCD (Oracle

Certified Web Component Developer e OCJA (Oracle Certified Java Architect) Part

I.Atualmente minha função principal é administrar Servidores de Aplicações com

Servidores Linux, na área de Infraestrutura. Nessa área possuo as certificações RHSA

(Red Hat System Administrator), Big IP Essentials e Advanced (Appliance para

Balanceamento de Carga). Sou autor do Livro Android para Desenvolvedores pela

Editora Brasport e Certificado em ITIL e COBIT Essentials.

Na área de Concursos Públicos leciono algumas disciplinas em cursinhos do Rio de

Janeiro e algumas vídeos aulas no grupo ProvasDeTI. Procuro me manter atualizado com

as bancas a fim de identificar os itens mais cobrados nas provas.

Um bom professor não é aquele que ensina bem apenas, mas também que conheça o

assunto, saiba explicar os pontos principais e o mais importante nesta modalidade de

aulas em PDF, é que tenha um material de qualidade. Meu objetivo aqui é conseguir

além de passar os principais pontos a serem estudados, entregar um material de



Prof. Lúcio


qualidade que atenda as exigências de concurseiros, conseguindo agregar conhecimento

nesta jornada que vocês estão seguindo.

1. Apresentação.

Este nosso curso terá como foco atender a necessidade do aluno que irá fazer a prova

do METRO/DF e precisa ter conhecimento sobre o conteúdo publicado no edital,

conforme abaixo:

HTML4 e 5 e CSS

1.1. A Banca.

O foco deste curso é voltado principalmente para o IADES, pois será a organizadora do

concurso alvo deste curso. Como o conjunto de questões deste assunto para esta Banca

é limitado, iremos fazer questões de outras bancas também para consolidar o

conhecimento sobre os principais pontos que serão abordados porém se entrar no

mérito das especificidades da Banca, utilizando as questões apenas para testar o nosso

conhecimento nos assuntos que precisaremos dominar.

Com o conhecimento adquirido ao final deste curso teremos capacidade de aproveitar o

conteúdo adquirido para outras provas que cobrem também estes assuntos.

1.2. Metodologia das aulas.

Este é um curso de questões comentadas, desta forma, é necessário ter um

conhecimento prévio para que possa acompanhar a resolução das questões de forma

adequada. A idéia é que através da resolução das questões possamos traçar um

direcionamento sobre os principais pontos que precisam ser estudados com mais afinco.

Iremos indicar material para estudos posteriores e referências bibliográficas para

aprofundamento na teoria de acordo com os tópicos que serão abordados.

Lembrem-se sempre que o material de questões comentadas é baseado no conteúdo

histórico cobrado pelas Bancas, com os pontos que costumam cair com mais frequência,

porém apesar da probabilidade do tópico cair novamente de forma semelhante ser



Prof. Lúcio


muito grande, isto não é garantido, para isto precisamos estudar também a parte teórica

para entendermos os conceitos necessários.



Prof. Lúcio


2. Conteúdo Programático e Planejamento das Aulas (Cronograma).

O Conteúdo programático está distribuído de forma que os alunos, mesmo que nunca

tenham tido contato com o assunto, possam compreender o contexto da disciplina e

também a forma com que ela se “encaixa” dentro das instituições e que pode ser cobrada

na prova.

Tento sempre trabalhar com o aumento do nível de conhecimento do candidato, e verão

que tudo que coloco nas nossas aulas é sinal que cai ou que pode cair na prova, ou seja, não

deixem de estudar ou se ficar com preguiça, vamos lá gente, volte atrás e leia novamente.

Aula

Conteúdo

Aula Demonstrativa

17/03/2014

HTML 4 e 5 e CSS

Aula 1

24/03/2014

XML: estrutura da linguagem, transformação XSLT,

DTD e XML schema.

Aula 2

31/03/2014

Web Services

Aula 3

07/04/2014

Noções sobre SOA (Service Oriented Architeture).



Prof. Lúcio


3. Questões HTML4 e 5

Antes de iniciarmos, vamos fazer um breve resumo com as principais características da

tecnologia HTML.

O HTML é uma linguagem voltada para a apresentação visual e estruturação de documentos

ou páginas web.

Utiliza tags (elementos) para formar o documento, possuindo representativos para

elementos que formam uma página ou documentos, definindo o esqueleto da página, a

partir de marcadores que irão delimitar a área de espaço. As tags possuem o seguinte

formato: <nome> </nome>, tendo um inicial (<nome>) e um que delimita o fim deste

(</nome>).

Todo elemento HTML deve possuir uma tag inicial e uma tag final. Sempre irá existir um

elemento raiz denominado <html>.

Uma característica muito importante sobre a linguagem HTML é que se trata de uma

tecnologia que não é case-sensitive, ou seja, não distingue maiúsculas de minúsculas, por

exemplo uma tag de nome <head>, tem a mesma interpretação de <HEAD>.

Algumas tags existentes no HTML são:

<html></html> inicia/termina um documento HTML

<head></head> define a área do cabeçalho

<body></body> define a área visível do documento

<title></title> Coloca um título na barra do navegador

<b></b> texto em negrito

<a href=“”></a> link

<hr> linha horizontal

<ul></ul> lista não ordenada

<ol></ol> lista ordenada

Agora que já fizemos este breve resumo, vamos resolver revisar as novidades do HTML5



Prof. Lúcio


A proposta do HTML 5 é ser uma linguagem melhor preparada para construção de

aplicações Web, bem como ser independente dos plugins que estendam sua capacidade, de

forma que possua novos elementos que dão mais semântica ao conteúdo.

A maioria dos navegadores atuais já suporta, e dentre as novidades, as principais mudanças

são referente ao melhor tratamento de exceção, mais tags para substituir scripts,

independência de plataforma e redução da necessidade de utilização de plugins externos.

Uma das principais novidades do HTML5 é o elemento canvas, que através do JavaScript

permite a criação de animações e jobos bem interessantes, prometendo substituir

tecnologias que exigem a instalação de plugins, como o Flash ou SilverLight.

O canvas é uma área retangular onde o usuário pode (através do JavaScript) controlar todos

os pixels, além de desenhar vários elementos gráficos como círculo, retângulo, elipse, linha,

texto, imagens entre outros.

A inclusão da tag se dá sob a seguinte forma:

<canvas id=”myCanvas” width=”400” height=”400”></canvas>

Para fazermos a manipulação do elemento, precisaremos utilizar JavaScript, e portanto não

iremos abordar esta forma de manipulação.

Houve também a inclusão de elementos áudio e vídeo para a manipulação de informação

multimídia.

O HTML5 fornece dois novos objetos para armazenar dados localmente, são eles o

sessionStorage (que irá armazenar dados durante uma sessão ativa) e o localStorage (que

irá armazenar dados sem limite de tempo)

Uma listagem com os novos elementos pode ser observada abaixo:

Tag Descrição

<article> Especifica um artigo qualquer

<aside> Relaciona um conteúdo ao redor.

<bdi> Para texto que não esteja diretamente vinculado ao elemento pai.

<command> Um botão, radioButton ou checkBox.

<details>

<summary> Uma legenda ou resumo dentro do elemento detalhe.



Prof. Lúcio


<figure> Para agrupamento de uma sessão de conteúdo stand-alone.

<figcaption> Legenda para um elemento figura.

<footer> Para um rodapé de um documento ou sessão.

<header> Para uma introdução de um documento ou sessão.

<hgroup> Para uma sessão de cabeçalhos usando h1 para h6.

<mark> Para textos que são destaques.

<meter> Para uma medição. Deve-se conhecer o valor máximo e mínimo.

<nav> Para uma sessão de navegação.

<progress> Para mostrar o progresso de uma execução.

<ruby> Para anotação rubi.

<rt> Para explicar uma anotação rubi.

<rp> Mostra os navegadores que não suportam anotação rubi.

<section> Para uma sessão de um documento como capítulos, cabeçalhos, rodapés, etc.

<time> Para definir um tempo e/ou data.

<wbr> Quebra de linha.

Outra inovação foi referente aos controles para formulários, fazendo com que muitas vezes

os programadores tivessem que recorrer as bibliotecas JavaScript. Na versão 5 novos

controles foram incluídos, segue uma relação:

Tag Descrição

<datalist> Uma lista de opções de entrada.

<keygen> Gera chaves para autenticação de usuários.

<output> Para diferentes tipos de saídas, como a geradas por scripts.

E por último, o elemento input ganhou uma série de novos valores para o atributo type,

tendo maior controle sobre o tipo de informação a ser tratada em cada entrada de dados:



Prof. Lúcio


Type Descrição

tel A entrada é um número de telefone.

search A entrada é um campo de busca.

url A entrada é uma URL.

email A entrada é um ou mais endereço de email.

datetime A entrada é uma data e/ou hora.

date A entrada é uma data

month A entrada é um mês.

week A entrada é um dia da semana.

time A entrada é uma hora.

datetime-

local A entrada é uma data e hora local.

number A entrada é um número.

range A entrada é uma faixa de valores.

color A entrada é uma cor em haxadecimal como #FF00FF.

placeholder Especifica uma dica rápida que descreve o valor esperado em um campo de

entrada.

Tendo conhecimento destas novas funcionalidades, vamos resolver algumas questões de

várias bancas.

QUESTÃO 01 CESPE – 2013 – CNJ

Uma maneira de criar um código HTML dinâmico é a partir da definição de objetos

JavaScript dentro da tag <head>.



Prof. Lúcio


Comentários: Comentários: A tag head é utilizada para definir os diferentes metadados

utilizados dentro da página HTML, por exemplo, inclusão de scripts, definir para o

navegador qual o local irá encontrar os códigos CSS e prover meta informações. A linguagem

de script é definida dentro deste elemento tag, e irá proporcionar comportamento dinâmico

para o HTML.

O content type para a definição de código HTML é “text/javascript”

Gabarito: CERTO

QUESTÃO 02 CESPE – 2013 – TER/MS

Na versão HTML5, novos tipos de campos foram criados. Assinale a opção que descreve

corretamente o tipo de campo em HTML.

(A) O campo de email, com formatação e validação, dependendo do agente do usuário

promove a interação com a agenda de contatos.

(B) URL é o campo para endereço web com validação e busca interna de acordo com a

URL.

(C) O campo tipo telefone (tel) possui máscara de formatação e validação.

(D) O campo tipo datetime-local trata automaticamente os horários absolutos de fusos

horários de acordo com o servidor da aplicação.

(E) O tipo Search é um campo de busca que utiliza o padrão Google em todas as

plataformas.

Comentários: Vamos detalhar melhor os novos tipos de atributos que vimos na tabela acima

sobre os possíveis valores do type para o elemento input.

Email – possui formatação e validação, o agente de usuário pode inclusive promover a

integração com sua agenda de contatos.

Tel – não possui máscara de formatação ou validação, propositalmente, visto não haver no

mundo um padrão bem definido para número de telefones. Assim como o tipo email,

permite vincular com a agenda de contatos.

url – um endereço de web que possui formatação e validação



Prof. Lúcio


datetime-local – trata automaticamente as diferenças de fusos horários, submetendo ao

servidor e recebendo dele valores GMT. Pode-se através dele desenvolver um sistema que

será usado em diferentes fusos horários e permitir que cada usuário lide com os valores em

seu próprio fuso horário.

Gabarito: A

QUESTÃO 03 CESPE – 2013 – SERPRO

O padrão HTML, definido pela W3C, está atualmente na versão 4.01.

Comentários: Esta é uma questão que serve para sabermos qual a última versão do HTML, e

se encontra correta. Existe o html 5 que já é muito cobrado em prova, porém esta versão

apesar de já ser suportada na maioria dos navegadores, ainda não se encontra homologada.

Gabarito: CERTO


Em um formulário HTML, tags do tipo <input type=hidden> são utilizadas para garantir a

segurança dos dados.

Comentários: Esta tag é usada quando apesar da informação ser importante para o

programa que irá processar os dados, esta não necessita ser apresentada ao usuário. Um

exemplo seria:

<form>

<INPUT TYPE="hidden" NAME="email" VALUE="professor">

</form>

Neste exemplo não conseguiríamos visualizar este campo no nosso formulário.

De forma alguma esta tag poderia ser utilizada para garantir a segurança dos dados, pois

uma vez que alguém veja o código fonte conseguiria ter acesso a esta informação.

Este conceito é diferente do que é falado pela questão, pois o objetivo não é proteger

alguma informação, ou garantir a segurança, o propósito é ocultar da apresentação apenas,

porém o valor fica disponível no código fonte, e ao visualizar este, consegue-se ter acesso a

todo o código, inclusive quanto aos valores de variáveis do tipo hidden.



Prof. Lúcio


Gabarito: ERRADO

QUESTÃO 05 CESPE – 2013 – STF

HTML5 é uma linguagem multiplataforma que permitiu o desenvolvimento de aplicações

web executadas off-line e incorporou novos elementos de conteúdo específico,

como <.article>, <.footer>, <.nav> e <.section>.

Comentários: Questão simples que exige que saibamos quais são as novas características do

HTML5, e como vimos em nosso resumo sobre a teoria, todos os elementos citados fazem

partes de suas características.

Gabarito: CERTO

QUESTÃO 06 FMP/RS – 2013 – MPE/AC

A linguagem HTML em sua versão 5 apresenta diversas novas características em relação às

versões anteriores dando uma maior potencialidade à linguagem. Dentre as características

abaixo qual delas NÃO é advinda da proposta de HTML5?

(A) Implementação padrão em todos os browsers e com funcionalidade também padrão e

consistente em todos.

(B) Define uma forma padrão de incorporar vídeo e áudio.

(C) Introdução de diversas APIs, entre elas a API Canvas que permite criar gráficos,

desenhos, jogos e aplicações web.

(D) Fornece maior interatividade sem a necessidade de Plugins.

(E) Define novos tipos para o atributo type do comando INPUT usados em formulários,

tais como data/hora, números, autofocus e faixa de valores, entre outros.

Comentários: Vamos analisar cada uma das alternativas:



Quando fizemos uma revisão sobre o assunto não vimos este tópico como uma das

melhores apresentadas pelo HTML5, isto porque as versões anteriores já tinham essas

características, sendo essa, portanto, a alternativa a ser marcada.



Prof. Lúcio



Vimos que uma das novidades foi à criação dos elementos áudio e vídeo, para poderem

tratar informações multimídia.



Exatamente, vimos inclusive que o elemento canvas permite manipular informações através

de JavaScript.

(D) Fornece maior interatividade sem a necessidade de Plugins

Mais uma alternativa que está de acordo com a proposta do HTML5 que é diminuir a

necessidade de utilização de plugins.



Correto, também vimos inclusive uma tabela contendo os novos tipos para o atributo type

criados.

Gabarito: A

QUESTÃO 07 FCC – 2012 – MPE/AP

A linguagem HTML5 traz um conjunto de novos valores possíveis para o atributo type do

elemento <input>, com objetivo de definir melhor os tipos de dados de entrada nos

campos dos formulários. Fazem parte desses novos valores: tel, url, email, date, time,

number,

(A) Char, search, range, meter, color, week e month

(B) datetime, datetime-local, string, search e color.

(C) search, datetime, month, week, datetime-local, range e color.

(D) date-time, range, color, month, week e boolean.

(E) datetime, month, week, meter, range, search, boolean e color.

Comentários: Mais uma questão que demonstra apenas as novidades e pede para que seja

marcada a alternativa que contempla os novos valores do atributo type da tag input.

Colocamos uma tabela contendo todos os tipos, e passando por ela conseguimos verificar

que a única que atende às informações da tabela é a alternativa C.



Prof. Lúcio


As demais alternativas contemplam tipos que já existiam, tais como char, string e boolean.

Gabarito: C

QUESTÃO 08 FCC – 2012 – MPE/PE

Na HTML5, é um atributo booleano que, quando especificado, indica que o conteúdo do

elemento <iframe> deve ser renderizado de maneira que pareça fazer parte da página que

contém o <iframe> sem bordas ou barras de rolagem.

O atributo citado no texto acima é o

(A) smooth

(B) pattern

(C) seamless

(D) sandbox

(E) srcdoc

Comentários: Vamos fazer uma análise de todas as alternativas:

Smooth não é uma propriedade do iframe.

Pattern também não faz parte do conjunto de propriedades de um iframe.

Seamless é exatamente o que está descrito no comando da questão.

Sandbox é a propriedade que permite habilitar um conjunto de restrições adicionais ao

conteúdo do iframe

Srcdoc é a propriedade que permite especificar o conteúdo HTML a ser exibido no iframe.

Gabarito: C

QUESTÃO 09 FCC – 2012 – TRE/SP

A linguagem HTML5 permite a utilização de uma série de APIs que ajudam na criação de

aplicações Web. Estas APIs podem ser acessadas por meio de .....I..... e usadas em

conjunto com alguns elementos HTML. A API .....II.... permite desenhar na tela do

navegador utilizando o elemento ....III..... e ....IV.....

As lacunas I, II, III e IV são preenchidas correta e respectivamente por:



Prof. Lúcio


(A) tags XML, Canvas, <svg>, XML

(B) linguagens dinâmicas, Scalable Vector Graphics (SVG), <canvas>, XML

(C) scripts JavaScript, Canvas, <canvas>, JavaScript

(D) tags Scalable Vector Graphics (SVG), SVG, <canvas>, JavaScript

(E) taglibs Java, Canvas, <canvas>, XML

Comentários: Por eliminação conseguiríamos chegar à resposta correta, uma vez que

sabemos que a integração do HTML é muito grande com o JavaScript, já poderíamos excluir

as alternativas que falam sobre o XML, e sabemos também que o elemento que permite

desenhar na tela é o canvas, portanto a única questão que sobra pra gente é a letra C.

Gabarito: C

QUESTÃO 10 FCC – 2012 – TRF2

Pedro está criando a página de um artigo de revista utilizando HTML5 e deseja colocar um

pequeno texto relacionado ao assunto principal do artigo à esquerda, circundado pelo

texto principal. Consultando a documentação oficial da HTML5, Pedro decidiu usar o

elemento cuja descrição é apresentada a seguir: ,

This element represents a section of a page that consists of content that is tangentially

related to the content around the element, and which could be considered separate from

that content. Such sections are often represented as sidebars in printed typography.

Com base na descrição é possível concluir que o elemento escolhido por Pedro foi:

(A) <acronym>

(B) <article>

(C) <sidebar>

(D) <aside>

(E) <section>

Comentários: Vamos analisar cada uma das alternativas:

(A) <acronym>



Prof. Lúcio


Esta tag não é mais suportada no HTML5, e caso seja necessário trabalhar com a definição

de siglas, devera ser utilizada a tag <abbr>

(B) <article>

Define um conteúdo independente, utilizado para definir o conteúdo principal.

(C) <sidebar>

Utilizada para criar uma barra de navegação para facilitar a navegação nos documentos

HTML

(D) <aside>

Agrupa informações relacionadas ao conteúdo principal, pode ser utilização para citações,

agrupamento de publicidade, grupos e blocos de navegação.

(E) <section>

Utilizada para separar e organizar conteúdos de diversos assuntos em blocos diferentes

Gabarito: D

QUESTÃO 11 FCC – 2012 – TER/PE

Na HTML5, o atributo do elemento <input> que especifica uma expressão regular

JavaScript para validar a entrada de dados em um campo texto é o

(A) masked

(B) expression

(C) override

(D) placeholder

(E) pattern

Comentários: O elemento do HTML 5 que permite especificar uma expressão regular para

validar a entrada de dados é o atributo pattern, como por exemplo através do código

abaixo:

Aqui está um exemplo de formulário que valida data e cep:

<p>

Digite uma data: <input type="date" name="data"

required="required"



Prof. Lúcio


title="Fotmato de data dd-mm-yyyy" />

</p>

<p>

Digite um cep:

<input type="text" name="cep"

required="required"

pattern="([0-9]{5}-[0-9]{3})"

title="CEP: 99999-999" />

</p>

Gabarito: E


Com base no código acima apresentado, assinale a opção correta.

(A) A tag de parágrafo não será refletida no html, pois não foi inicializada.

(B) Após a importação da fonte Courier.eot, é possível utilizar a fonte apenas na tag font.

(C) A palavra Pantanal será exibida no browser com a fonte CourierTeste no tamanho 4.

(D) No Firefox, não é possível importar fontes com a extensão .ttf, apenas .eot.

(E) A palavra Pantanal não será exibida em negrito.



Prof. Lúcio


Comentários: Vamos analisar cada uma das alternativas e encontrar o erro de cada uma

delas.


Devemos verificar se todas as tags estão alocadas de forma correta, e ao verificarmos

percebemos que todas elas estão sendo abertas e fechadas, por exemplo <HTML></HTML>,

<head></head>, <body></body>.

Apesar disto, o HTML não é criterioso quanto à organização do código HTML, podendo

inclusive haver alguns elementos que não são corretamente fechados.

O HTML não é case sensitive, e esta é uma informação que precisamos ter para não cairmos

em pegadinha das bancas.

A tag parágrafo “P” está corretamente alocada, e por isso a alternativa está errada.


Alternativa está incorreta, pois a utilização de fonte pode ocorrer também dentro do

elemento <body>


Exatamente, percebam que está sendo definido o tamanho 4 e a fonte CourierTeste na linha

exatamente anterior.


Fontes ttf são as fontes conhecidas como true type font, e são suportadas sem problema

algum por todos os navegadores.


A palavra pantanal está entre os elementos <b> e </b>, o que determina que este valor irá

aparecer em negrito.

Gabarito: C


HTML (hypertext markup language) é uma linguagem de programação, atualmente na

versão 5, muito utilizada para ambientes desktop.



Prof. Lúcio


Comentários: Já vimos uma questão bem parecida que falava sobre a questão da última

versão do HTML, e já aprendemos que a última versão é a versão 5, porém ainda não se

encontra homologada pela W3C, e como a questão não fala sobre ser homologada ou não,

podemos considerar certo, o problema ocorre quando a questão fala que o HTML é muito

utilizado para ambientes desktop, aí se encontra incorreta, já que o objetivo do HTML é

prover páginas web que irão ser executadas no ambiente de internet/intranet.

Gabarito: ERRADO



Prof. Lúcio


4. Questões CSS CSS é uma tecnologia utilizada para definir o estilo utilizado na definição de apresentação de

documentos usados em HTML ou XML.

O objetivo desta tecnologia é prover uma separação entre o formato e conteúdo de um

documento.

O CSS trabalha com a utilização de seletores (elementos HTML) que são usados para

declarar a quais elementos de marcação um estilo se aplica. Por exemplo:

p {

color:red;

text-align:center}

}

O seletor do exemplo acima determina que todo elemento <p>, quando aparecer no código

em HTML deverá receber a cor vermelha e o alinhamento centralizado.

Além de trabalhar com seletores genéricos, o CSS pode trabalhar também com

identificadores para os elementos, utilizando o seletor precedido de um “#”, assim, todo

elemento que possuir aquele identificador receberá o estilo.

Ex: #id1 { color: black }

Assim, todo elemento que tiver um identificador igual a 1 (id=”id1”) irá receber a cor preta.

Outra opção é trabalhar com seletores de classe, onde o elemento que pertencer a classe

citada (seletor precedido por um “.”) receberá aquele estilo.

Ex: .classe1 {color:blue}

Neste exemplo o elemento que tiver class=”classe1” receberá o estilo.

Focando agora nas características mais importantes do CSS, precisamos conhecer as três

formas de vincular um documento HTML `a um CSS, Externo, Interno e Inline.

Externo é a forma em que definimos dentro do elemento head do html, um link para o

documento CSS que possui as configurações de estilo.

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Interno o estilo é definido dentro do próprio documento html, dentro da tag head,

especificamente dentro de uma tag script.



Prof. Lúcio


<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

E por último Inline, que é a configuração dentro do próprio elemento html.

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

A pergunta que devemos fazer é a seguinte, qual a prioridade caso exista mais de uma

configuração de CSS? A resposta é bem simples, a ordem de prioridade será sempre do mais

interno para o mais externo, ou seja, Inline, Interno e Externo.

Agora que já fizemos um breve resumo, vamos às questões.


O CSS é uma linguagem de estilo que permite separar o formato e o conteúdo de

documentos. Entretanto, as definições do CSS não são suportadas igualmente por todos

os navegadores.

Comentários: Realmente o CSS é uma linguagem que possui o intuito de separar o estilo de

um documento ou página HTML do conteúdo das informações. Este objetivo auxilia na

separação de responsabilidades, deixando a parte de estilização sob responsabilidade do

CSS, enquanto o HTML fica responsável pela definição do conteúdo do documento.

Nas versões anteriores era até possível definir o estilo do documento dentro do próprio

código HTML, através da própria linguagem, porém com a chegada do CSS ficou definido

esta organização como forma de prover uma melhor leitura e melhor definição de

documentos web.

O que acontece na prática é que muitos navegadores não implementam todas as

recomendações da W3C, o que faz com que qualquer documento web tenha que ser

testado e homologado em vários navegadores a fim de garantir o completo funcionamento

em todos estes, o que corrobora com a segunda parte da questão que cita exatamente este

fato.

Gabarito: CERTO



Prof. Lúcio


QUESTÃO 15 CESPE – 2011 – BRB

Nas CSS, o termo body significa que todo o código CSS existente entre um par de chaves –

“{“ e “}” – se aplica ao conteúdo dentro do elemento <body> do HTML.

Comentários: Informação bem básica sobre o funcionamento do CSS é necessário que

saibamos no mínimo como se estrutura uma configuração CSS, e vimos que existirá um

seletor, e entre um par de chaves irá existir duplas de propriedades e valor, separados entre

eles por dois pontos, e caso existam mais de uma dupla propriedade/valor, estes serão

separados dos outros por “ponto e vírgula”.

Gabarito: CERTO

QUESTÃO 16 CESPE – 2011 – TER/ES

Os estilos em CSS são especificados como uma lista de pares de atributos de nome/valor,

separados por dois pontos, em que cada nome é separado por ponto e vírgula.

Comentários: Mais uma questão bem simples, bem característica da banca CESPE, que tenta

confundir o candidato colocando uma informação errada/confusa dentro de uma frase

correta. O erro da questão está em dizer que os pares nome/valor são separados por dois

pontos. Sabemos que quando existirem mais de um par, estes serão separados por “;”, e os

pares são separados entre si por “:”, por exemplo:

p {

color:blue;

text-align:center;

background-color:white

}

Gabarito: ERRADO

QUESTÃO 17 FCC – 2012 – TRT11

Considere a página HTML:



Prof. Lúcio


<html>

<head>

<title>Cadastro</title>

<style type="text/css">

</style>

</head>

<body>

<p>

<a href=”music.html”>Músicas</a>

</p>

</body>

</html>

A instrução que deve ser utilizada no interior do elemento <style></style> para retirar o

sublinhado do link ao posicionar o

ponteiro do mouse sobre ele é

(A) a:hover{text-decoration:underline}

(B) a:hover{text-decoration:none}

(C) a:hover{text-decoration:normal}

(D) a:visited{text-decoration:none}

(E) a:{text-decoration:none}Uma maneira de criar um código HTML dinâmico é a partir da

definição de objetos

Comentários: Uma questão que cobra o entendimento sobre propriedades de atributos de

estilo. A questão cobra informações sobre dois tipos de atributos, hover e visited. Ambos

são propriedade de links (“a”), e especificam respectivamente o estilo que o link irá ter

quando o mouse estiver posicionado em cima dele e como o link ficará após ter sido

visitado. Sabendo destas informações já conseguimos definir qual o seletor deveremos

utilizar, que no caso é o seletor “hover”, mais especificamente a:hover, que especifica o

hover do elemento “a”. E quanto ao texto está sendo pedido que remova o sublinhado,

portanto é retirar a decoração de texto.

Gabarito: B



Prof. Lúcio


QUESTÃO 18 FCC – 2010 – TRE/RS

Analise os blocos de código seguintes:

Bloco 1:

<head>

<link rel=“stylesheet” type=“text/css” href=“config.css”>

</head>

Bloco 2:

<head>

<style type=“text/css”>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

Bloco 3:

<p style=“color: red; margin-left: 20px”>

Este é um parágrafo

</p>

Esses blocos representam, respectivamente, as maneiras de inserir folhas de estilo:

a) interna, externa e inline.

b) inline, interna e externa.

c) externa, interna e inline.

d) externa e interna, somente.

e) interna, somente.

Comentários: Esta questão serve para vermos a importância de reconhecermos os três tipos

de associação do CSS ao código HTML. No Bloco 1 temos um código sendo referenciado

dentro do elemento “head”, neste caso pode ser um interno ou externo, porém, como está

sendo referenciado um arquivo externamente através de um link, fica claro que o bloco 1 se

refere a um tipo externo.

No bloco 2 o conteúdo está dentro do “head” também, porém limitado entre tags “style”, o

que identifica o modo interno. E por último no bloco 3 o código CSS está dentro do próprio

elemento html, o que indica a utilização do modo inline.



Prof. Lúcio


Gabarito: C


Se a imagem de fundo ficará fixa ou se rolará ao usar a barra de rolagem, é definida na

linguagem CSS pela propriedade background-

(A) Scroll

(B) Fixed

(C) Attachment

(D) Position

(E) Image

Comentários: A propriedade de background do CSS permite receber várias opções e

restringir o que irá receber a propriedade, podendo ser apenas “background” que definirá

todas as propriedades em uma única declaração, pode ser background-attachment, que irá

definir se a imagem de fundo é fixa ou se acompanha a página, background-color, que

define a cor de um elemento, background-image, que define uma imagem de fundo para

um elemento, background-position, que irá definir a posição inicial de uma imagem de

fundo e background-repeat, que define como uma imagem de fundo será repetida.

Gabarito: C



Prof. Lúcio


5. Lista das Questões Utilizadas na Aula.


Uma maneira de criar um código HTML dinâmico é a partir da definição de objetos

JavaScript dentro da tag <head>.


Na versão HTML5, novos tipos de campos foram criados. Assinale a opção que descreve

corretamente o tipo de campo em HTML.

(A) O campo de email, com formatação e validação, dependendo do agente do usuário

promove a interação com a agenda de contatos.

(B) URL é o campo para endereço web com validação e busca interna de acordo com a

URL.

(C) O campo tipo telefone (tel) possui máscara de formatação e validação.

(D) O campo tipo datetime-local trata automaticamente os horários absolutos de fusos

horários de acordo com o servidor da aplicação.

(E) O tipo Search é um campo de busca que utiliza o padrão Google em todas as

plataformas.


O padrão HTML, definido pela W3C, está atualmente na versão 4.01.


Em um formulário HTML, tags do tipo <input type=hidden> são utilizadas para garantir a

segurança dos dados.



Prof. Lúcio


QUESTÃO 05 CESPE – 2013 – STF

HTML5 é uma linguagem multiplataforma que permitiu o desenvolvimento de aplicações

web executadas off-line e incorporou novos elementos de conteúdo específico,

como <.article>, <.footer>, <.nav> e <.section>.

QUESTÃO 06 FMP/RS – 2013 – MPE/AC

A linguagem HTML em sua versão 5 apresenta diversas novas características em relação às

versões anteriores dando uma maior potencialidade à linguagem. Dentre as características

abaixo qual delas NÃO é advinda da proposta de HTML5?






(D) Fornece maior interatividade sem a necessidade de Plugins.



QUESTÃO 07 FCC – 2012 – MPE/AP

A linguagem HTML5 traz um conjunto de novos valores possíveis para o atributo type do

elemento <input>, com objetivo de definir melhor os tipos de dados de entrada nos

campos dos formulários. Fazem parte desses novos valores: tel, url, email, date, time,

number,

(A) Char, search, range, meter, color, week e month

(B) datetime, datetime-local, string, search e color.

(C) search, datetime, month, week, datetime-local, range e color.

(D) date-time, range, color, month, week e boolean.

(E) datetime, month, week, meter, range, search, boolean e color.



Prof. Lúcio


QUESTÃO 09 FCC – 2012 – TRE/SP

A linguagem HTML5 permite a utilização de uma série de APIs que ajudam na criação de

aplicações Web. Estas APIs podem ser acessadas por meio de .....I..... e usadas em

conjunto com alguns elementos HTML. A API .....II.... permite desenhar na tela do

navegador utilizando o elemento ....III..... e ....IV.....

As lacunas I, II, III e IV são preenchidas correta e respectivamente por:

(A) tags XML, Canvas, <svg>, XML

(B) linguagens dinâmicas, Scalable Vector Graphics (SVG), <canvas>, XML

(C) scripts JavaScript, Canvas, <canvas>, JavaScript

(D) tags Scalable Vector Graphics (SVG), SVG, <canvas>, JavaScript

(E) taglibs Java, Canvas, <canvas>, XML

QUESTÃO 10 FCC – 2012 – TRF2

Pedro está criando a página de um artigo de revista utilizando HTML5 e deseja colocar um

pequeno texto relacionado ao assunto principal do artigo à esquerda, circundado pelo

texto principal. Consultando a documentação oficial da HTML5, Pedro decidiu usar o

elemento cuja descrição é apresentada a seguir: ,

This element represents a section of a page that consists of content that is tangentially

related to the content around the element, and which could be considered separate from

that content. Such sections are often represented as sidebars in printed typography.

Com base na descrição é possível concluir que o elemento escolhido por Pedro foi:

(A) <acronym>

(B) <article>

(C) <sidebar>

(D) <aside>

(E) <section>



Prof. Lúcio


QUESTÃO 11 FCC – 2012 – TER/PE

Na HTML5, o atributo do elemento <input> que especifica uma expressão regular

JavaScript para validar a entrada de dados em um campo texto é o

(A) masked

(B) expression

(C) override

(D) placeholder

(E) pattern


Com base no código acima apresentado, assinale a opção correta.







HTML (hypertext markup language) é uma linguagem de programação, atualmente na

versão 5, muito utilizada para ambientes desktop.



Prof. Lúcio



O CSS é uma linguagem de estilo que permite separar o formato e o conteúdo de

documentos. Entretanto, as definições do CSS não são suportadas igualmente por todos

os navegadores.

QUESTÃO 15 CESPE – 2011 – BRB

Nas CSS, o termo body significa que todo o código CSS existente entre um par de chaves –

“{“ e “}” – se aplica ao conteúdo dentro do elemento <body> do HTML.

QUESTÃO 16 CESPE – 2011 – TER/ES

Os estilos em CSS são especificados como uma lista de pares de atributos de nome/valor,

separados por dois pontos, em que cada nome é separado por ponto e vírgula.

QUESTÃO 17 FCC – 2012 – TRT11

Considere a página HTML:

<html>

<head>

<title>Cadastro</title>

<style type="text/css">

</style>

</head>

<body>

<p>

<a href=”music.html”>Músicas</a>

</p>

</body>

</html>

A instrução que deve ser utilizada no interior do elemento <style></style> para retirar o

sublinhado do link ao posicionar o

ponteiro do mouse sobre ele é

(A) a:hover{text-decoration:underline}



Prof. Lúcio


(B) a:hover{text-decoration:none}

(C) a:hover{text-decoration:normal}

(D) a:visited{text-decoration:none}

(E) a:{text-decoration:none}Uma maneira de criar um código HTML dinâmico é a partir da

definição de objetos


Analise os blocos de código seguintes:

Bloco 1:

<head>

<link rel=“stylesheet” type=“text/css” href=“config.css”>

</head>

Bloco 2:

<head>

<style type=“text/css”>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

Bloco 3:

<p style=“color: red; margin-left: 20px”>

Este é um parágrafo

</p>

Esses blocos representam, respectivamente, as maneiras de inserir folhas de estilo:

a) interna, externa e inline.

b) inline, interna e externa.

c) externa, interna e inline.

d) externa e interna, somente.

e) interna, somente.



Prof. Lúcio



Se a imagem de fundo ficará fixa ou se rolará ao usar a barra de rolagem, é definida na

linguagem CSS pela propriedade background-

(F) Scroll

(G) Fixed

(H) Attachment

(I) Position

(J) Image



Prof. Lúcio


6. Gabarito.

1. CERTO

2. A

3. CERTO

4. ERRADO

5. CERTO

6. A

7. C

8. C

9. C

10. D

11. E

12. C

13. ERRADO

14. CERTO

15. CERTO

16. ERRADO

17. B

18. C

19. C



Prof. Lúcio


Um assunto um tanto quanto delicado, mas o rateio de material é crime e nós

no TIParaConcursos.net não iremos tolerar tal prática, visto os esforços

despendidos pelos nossos professores e sua respectiva valorização.

Temos ainda meios de rastrearmos tal realização em grupos de discussões e

redes sociais, de forma que tal prática seja coibida.

DIREITOS AUTORAIS LEI 10.695/2003 No caso de violação de direitos de autor

e delitos conexos, a pena será de detenção de três meses a um ano ou multa.

Se a infração tiver o intuito de lucro direito ou indireto, o agente poderá ser

condenado à reclusão de dois a quatro anos e multa, tanto na hipótese de

distribuição, venda ou aluguel no país, quanto no de oferecimento ao público

via cabo, fibra ótica e satélite.

CONCURSEIRO QUE PIRATEIA PODE FICAR IMPEDIDO DE TOMAR POSSE

CASO SEJA PROCESSADO .

aula 00 demonstrativa metro df analista de sistemas

Documents