MÓDULO I - DESENVOLVIMENTO EM AMBIENTE WEB - UNIP

Prévia do material em texto

Exercício 1:
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define
como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras
CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar,
compõe-se de três partes: um seletor, uma propriedade e um valor e tem a
sintaxe conforme mostrado abaixo:
seletor { propriedade: valor; }
 
 
Onde:
a) Seletor: genericamente, é o elemento CSS identificado por sua tag, ou por
uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por
exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
b) Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra
(por exemplo: font, color, background, etc...).
c) Valor: é a característica específica a ser assumida pela propriedade (por
exemplo: letra tipo arial, cor azul, fundo verde, etc...)
 
fonte: www.maujor.com
A)
Todas as alternativas estão corretas.
B)
Todas as alternativas estão erradas.
C)
Somente a alternativa b está correta.
D)
Somente a alternativa a e c estão corretas
E)
http://www.maujor.com/
Somente a alternativa a está incorreta. Pois, o correto é dizer: (...)
genericamente, é o elemento HTML e não CSS.
O aluno respondeu e acertou. Alternativa(E)
Comentários:
A) 
E) 
Exercício 2:
 Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e
valor separados por dois pontos e entre chaves { }. Quando mais de uma
propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las.
O ponto-e-vírgula é facultativo no caso de propriedade única e também após a
declaração da última propriedade no caso de mais de uma.
No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada
regra para uma propriedade.
Ver os exemplos abaixo:
p {
font-size: 12px; /* ponto-e-vírgula é facultativo */
}
 
body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}
 Portanto
 
 a) No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a
propriedade é o fundo do documento e o valor é a cor branca.
body {
background: #FFFFFF;
}
b) Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou
simples ':
h3 { 
font-family: "Comic Sans MS" 
}
c) Para maior legibilidade das folhas de estilo, é de boa prática usar linhas
distintas para escrever cada uma das declarações — propriedade e seu valor —,
como mostrado abaixo:
p {
text-align: right; 
color: #FF0000;
}
d) Isto é obrigatório! A regra abaixo não tem o mesmo efeito da regra acima e
ambas as sintaxes estão corretas:
p {text-align: right;color: #FF0000;}
 fonte: www.maujor.com
A)
Todas as alternativas estão corretas.
B)
Todas as alternativas estão erradas.
C)
Somente a alternativa b está correta.
D)
Somente a alternativa a e c estão corretas.
E)
Somente a d está incorreta, pois o correto seria: Isto não é obrigatório! A regra
abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:
p {text-align: right;color: #FF0000;}
 
O aluno respondeu e acertou. Alternativa(E)
Comentários:
E) 
http://www.maujor.com/
Exercício 3:
 As folhas de estilo podem ser vinculadas a um documento de três maneiras
distintas:
1. Importadas ou lincadas;
2. Incorporadas;
3. Inline.
 
fonte: www.maujor.com
A)
 Somente a 1 é correta
B)
Somente a 2 é correta
C)
Somente a 3 é correta.
D)
Todas estão corretas
E)
Todas estão incorretas.
 
O aluno respondeu e acertou. Alternativa(D)
Comentários:
D) 
Exercício 4:
 O que podemos dizer a respeito de uma folha de estilo externa é que:
a) Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em
um documento a parte do documento HTML. A folha de estilo é um arquivo
separado do arquivo html e que tem a extensão .html.
http://www.maujor.com/
b) Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com
uma folha de estilo externa , você pode mudar a aparência de um site inteiro
mudando um arquivo apenas (o arquivo da folha de estilo).
c)O arquivo css da folha de estilo externa deverá ser lincado ou importado ao
documento HTML, dentro da tag <head> do documento. A sintaxe geral para lincar
uma folha de estilo chamada estilo.css é mostrada abaixo.
<head>
...........
<link rel="stylesheet" type="text/css" href="estilo.css">
..........
</head>
 
 
fonte: www.maujor.com
A)
Somente a alternativa a está incorreta, pois o certo é dizer: (...) e que tem a
extensão .css
B)
Todas as alternativas estão corretas.
C)
Todas as alternativas estão incorretas.
D)
Somente a alternativa a está correta.
E)
Somente a alternativa c está correta.
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
http://www.maujor.com/
Exercício 5:
 
Folha de estilo incorporada ou interna
O que podemos dizer sobre o estilo incorporada ou interna em CSS?
a) Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão
declaradas no próprio documento HTML.
b) Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma
única página. Com uma folha de estilo incorporada ou interna, você pode mudar a
aparência de somente um documento, aquele onde a folha de estilo esta
incorporada.
c) As regras de estilo, válidas para o documento, são declaradas na seção <head>
do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo:
<head>
...........
<style type="text/css">
<!--
body {
background: #000000; 
url("imagens/minhaimagem.gif");
}
h3 {
color: #FF0000;
}
p {
margin-left: 15px; 
padding:1.5em;
}
-->
</style>
...........
</head>
 
fonte: www.maujor.com
A)
http://www.maujor.com/
 Todas as alternativas estão corretas.
B)
Todas as alternativas estão incorretas.
C)
Somente a alternativa a está incorreta.
D)
Somente a b está incorreta.
E)
A alternativa c está com o código errado.
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 6:
 Sobre folhas inline podemos dizer:
a) Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro
da tag do elemento HTML.
b) Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das
vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use
este método excepcionalmente, como quando quiser aplicar um estilo a uma
única ocorrência de um elemento.
c) A sintaxe para aplicar estilo inline é mostrada a seguir:
<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
fonte: www.maujor.com
A)
 Todas as alternativas estão corretas.
B)
Todas as alternativas estão incorretas.
C)
Somente a alternativa a está incorreta.
http://www.maujor.com/
D)
Somente a b está incorreta.
E)
A alternativa c está com o código errado.
 
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 7:
 As propriedades para as fontes, definem as características (os valores na regra
CSS) das letras que constituem os textos dentro dos elementos HTML.
As propriedades básicas para fontes e que abordaremos neste tutorial são as
listadas abaixo:
a) color:...................cor da fonte
b) font-family:..........tipo de fonte
c) font-size:.............tamanho de fonte
d) font-style:............estilo de fonte
e) font-variant:.........fontes maiúsculas de menor altura
f) font-weight:.........quanto mais escura a fonte é (negrito)
g) font:....................maneira abreviada para todas as propriedades
fonte: www.maujor.com
A)
 Todas as alternativas estão corretas.
B)
Todas as alternativas estão incorretas. 
C)
Somente a alternativa f está incorreta.
D)
http://www.maujor.com/
Somente a alternativa g está incorreta.
E)
Somente as alternativas a e g estão incorretas.
 
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 8:
 Sendo os valores válidos para as propriedades da fonte
color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3.nome da cor: red, blue, green...etc
O código abaixo está correto?
 
1) <html>
2) <head>
3) <style type="text/css">
4) <!--
5) h1 {color: #FF0000;}
6) h2 {color: #00FF00;}
7) p color: rgb(0,0,255);
8) -->
9) </style>
10)</head>
11)<body>
12)<h1>Cabeçalho com letras vermelhas</h1>
13)<h2>Cabeçalho com letras verdes</h2>
14)<p>Parágrafo com letras azuis</p>
15)</body>
16)</html> 
 
 
 
 
fonte: maujor.com
 
 
A)
As linhas 5 e 6 estão incorretas.
 
B)
A linha 7 está incorreta.
C)
Somente as linhas 5 e 7 estão incorretas.
D)
Somente as linhas 6 e 7 estão incorretas.
 
E)
O código todo está correto.
O aluno respondeu e acertou. Alternativa(B)
Comentários:
B) 
Exercício 10:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 
<head>
 <title>Minha primeira página CSS</title>
 <style type="text/css">
 body {
 padding-left: 11em;
 font-family: Georgia, "Times New Roman",
 Times, serif;
 color: purple;
 background-color: #d8da3d }
 ul.navbar {
 position: absolute;
 top: 2em;
 left: 1em;
 width: 9em }
 
 h1 {
 font-family: Helvetica, Geneva, Arial,
 SunSans-Regular, sans-serif }
 </style>
</head>
 
<body>
[etc.]
 
O código acima corresponde ao site abaixo:
 
 
a)     A regra 'position: absolute' determina que o elemento ul seja posicionado na página independentemente de qualquer
texto que venha antes ou depois no código HTML e as propriedades 'left' e 'top' indicam qual a posição a ocupar.
b)     '2em' significa 2 vezes o tamanho da fonte adotada.
c)        A unidade 'em' não é muito usada em CSS, pois ela não permite que as medidas se adaptem automaticamente ao
tamanho de fonte que os usuários costumam utilizar em suas preferências pessoais.
As alternativas corretas são:
A)
“a” e “b” 
B)
 
“a” e “c”
C)
“b” e “a”
D)
“b” e “c”
E)
“c” e “a”
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 11:
 
O código abaixo corresponde ao página web acima.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Minha primeira página CSS</title>
</head>
 
<body>
 
<!-- Menu de navegacao do site -->
<ul class="navbar">
 <li><a href="index.html">Home page</a>
 <li><a href="pensamentos.html">Pensamentos</a>
 <li><a href="cidade.html">Minha cidade</a>
 <li><a href="links.html">Links</a>
</ul>
 
<!-- Conteudo -->
<h1>Minha primeira página CSS</h1>
 
<p>Bem vindos à minha página estilizada!
 
<p>Minha página não contém imagens, mas pelo
menos está estilizada.
Ela contém links, ainda que eles não levem
a lugar algum…
 
<p>Deveria haver mais textos aqui porém eu
ainda não decidi o que escrever.
 
<!-- Date e assine sua página, isto é educado! -->
<address>Construida em 15 de dezembro de 2004<br>
 por mim mesmo.</address>
 
</body>
</html>
 
É correto afirmar que:
 
a)     A primeira linha do código HTML acima informa ao browser qual é o tipo de HTML do código (DOCTYPE
significa DOCument TYPE - DOCumento TIPO). No nosso caso trata-se de HTML version (versão) 4.01.
b)        As palavras dentro dos sinais < e > são chamadas de tags e, como você pode notar, o documento está
contido dentro das tags <html> e </html>. Entre as tags <head> e </head> poderão estar contidas várias
informações que não são mostradas na tela. Note que ali está contido o título (title) do documento e mais adiante
você verá que nossa folha de estilos também será colocada ali.
c)     A tag <body> contém o texto do documento em si. A princípio tudo que está dentro dela será mostrado na
tela exceto textos colocados entre os sinais <!-- e -->, que se destinam a abrigar comentários no código. O
browser ignora os comentários.
d)     Sobre as demais tags no exemplo, <ul> é para exibir “Listas não ordenadas”, isto é, uma lista na qual os seus
itens não são numerados. A tag <li> é para cada um dos "Itens da lista". A tag <p> é para “Parágrafos.” E, a tag
<a> é para “Âncoras”, e servem para criar hyperlink.
 
A)
A alternativa “a” está errada.
B)
A alternativa “b” está errada.
C)
A alternativa “c” está errada.
D)
A alternativa “d” está errada.
E)
 
Todas as alternativas estão corretas.
 
O aluno respondeu e acertou. Alternativa(E)
Comentários:
E) 
Exercício 12:
Regras das folhas de estilos
Exemplificando com o comando que diz que parágrafos definidos como título 3 terão a cor amarela, nesse tom:
H3 { color:#00ffff }
Nesse comando CSS existe uma regra, ou seja, uma indicação do aspecto de um ou mais elementos. Essa
REGRA configura a cor de todos os títulos H3 do arquivo.
Uma regra simples do CSS constitui-se de duas partes:
 
O seletor
a)     O elemento de ligação entre o documento HTML e o estilo.
b)     O seletor especifica qual(is) elemento(s) são afetados pela declaração. A declaração configura o efeito
que o seletor terá. No exemplo acima, o seletor H3 e a declaração é "color: 00ffff".
c)     É importante notar que com essa regra aplicada ao documento HTML, todos os elementos H3 serão
afetados, ou seja, eles terão a cor amarela, pois a propriedade "color" afeta apenas a cor da fonte.
 
As alternativas acima estão corretas?
A)
Sim, todas estão corretas. 
B)
 
Não, a alternativa “a” está incorreta.
C)
Não, a alternativa “b” está incorreta.
D)
Não, a alternativa “c” está incorreta.
E)
Não, somente as  alternativas “a” e “b” estão corretas.
 
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 13:
O comando Inline (em Linha) permite:
 
a) Os comandos de um certo estilo ficam diretamente no elemento HTML que se deseja alterar.
 
b) Possibilita que só aquele elemento seja estilizado, alterarando todos os outros da página.
 
c)       Pode-se colocar quantos comandos quiser dentro de cada página HTML e pode-se utilizar comandos CSS
InLine, inclusive se os modos embedding ou linking estiverem sendo usados.
 
 
A)
Somente as alternativa “a” e “c” estão corretas. 
B)
Somente a alternativa “b” está correta. 
C)
Somente a alternativa “c” está correta.
D)
Todas as alternativas estão corretas.
E)
Todas as alternativas estão incorretas.
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 14:
As definições abaixo estão corretas para os 3 tipos possíveis de links em CSS?
a) a:link { color:#xxxxxx }
b) a:hover { color:#xxxxxx }
c) a:visited { backgroundcolor:#xxxxxx }
A)
Sim, todos estão corretos.
B)
Não, “a” está incorreto.
C)
Não, “b” está incorreto.
D)
Não, “c”, está incorreto. 
E)
 
As alternativas “a” e “b” estão incorretas.
 
O aluno respondeu e acertou. Alternativa(D)
Comentários:
D) 
http://www.ufpa.br/dicas/htm/htm-link.htm#tipos
Exercício 15:
Colocação dos elementos em CSS - caixas
Todos os elementos que podem ser vistos numa página ocupam uma certa área na página, que tem a forma de
um retângulo, e que é chamada de caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito:
conteúdo, linhas de contorno, margens e espaço em branco.
Esse esquema representa as diferentes áreas que constituem a caixa de um elemento:
 
a) Conteúdo: fica na parte mais interna.
b) Padding: espaço que pode existir entre o conteúdo e suas bordas.
 
c) Border: designa o limite do elemento
 
d) Margin: pode existir e separa o elemento de outros da mesma página
 
e) Largura do elemento: é determinada pela largura do conteúdo
f) Largura da caixa: é determinada pela soma das larguras do conteúdo, mais as larguras ocupadas pelas linhas
de contorno (border), pelo espaço em branco (padding) e pelas larguras das margens.
 
As afirmações acima estão corretas?
A)
 
Sim, estão.
B)
Não, a alternativa “a” está incorreta.
C)
Não, a alternativa “c” está incorreta.
D)
Não, a alternativa “d” está incorreta.
E)
Não, as alternativas “a” e “f” estão incorretas.
 
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 16:
Anatomia deum elemento xhtml
Vamos ver um elemento em detalhe. Um elemento não vazio divide-se então em
três partes:
· Uma marca de início
· Conteudo
· Uma marca de fim
 
1) A marca de início é delimitada pelos símbolos "<" e ">" e contem o nome do
elemento seguido dos atributos, se tiver.
2) Os nomes dos elementos são sempre em minúsculas.
3) Os atributos vêm sempre em pares nome/valor como por exemplo:
nome="valor". O valor do atributo deve estar sempre entre aspas.
4) O conteúdo é constituído por texto, por outros elementos ou ambos.
5) A marca de fim é, tal como a marca de início, delimitada pelos símbolos "<" e
">", contem a barra "//" e o nome do elemento. A marca de fim pode ter
atributos.
A)
Somente a alternativa3 está correta.
B)
Todas as sentenças estão incorretas
C)
Todas as sentenças estão corretas
D)
Somente a alternativa 5 está incorreta
E)
Somente a alternativa1 e 3 estão corretas.
O aluno respondeu e acertou. Alternativa(D)
Comentários:
D) 
Exercício 17:
Parágrafo
O parágrafo é definido usando o elemento:
 
1. <b>
2. <d>
3. <t>
4. <p>
5. <pp>
A)
Somente a alternativa 4 está correta
B)
Somente a alternativa 5 está correta
C)
Somente a alternativa 1 está correta
D)
Somente a alternativa 2 está correta
E)
Nenhuma das alternativas.
O aluno respondeu e acertou. Alternativa(A)
Comentários:
A) 
Exercício 18:
Comentários
Os comentários são utilizados para mais tarde recordar o que fez no código ou
para outros o lerem. Os comentários são apenas visível no código fonte. O
browser ignora os comentários completamente.
Para se adicionar um comentário siga-se os seguintes passos:
1. Escreve-se <!--
2. Escrevem-se os comentários que se deseja
3. Escreve-se --> para fechar o comentário
4. <!-- Isto é um comentário -->
5. <isto é um comentário>
 
A)
Todas as alternativas estão corretas
B)
Todas as alternativas estão incorretas
C)
Somente a alternativa 4 está correta
D)
Somente a alternativa 5 está correta.
E)
Nenhuma das anteriores
O aluno respondeu e acertou. Alternativa(C)
Comentários:
C)