Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof.

Lcio

AULA 00: HTML 4 e 5 e CSS

Sumrio
1. 1.1. 1.2. 2. 3. 5. 6. Apresentao. ................................................................................................................................. 2 A Banca. ...................................................................................................................................... 2 Metodologia das aulas. ............................................................................................................... 2 Contedo Programtico e Planejamento das Aulas (Cronograma). ............................................... 4 Questes HTML4 e 5 ....................................................................................................................... 5 Lista das Questes Utilizadas na Aula. .......................................................................................... 25 Gabarito. ....................................................................................................................................... 32

Ol Pessoal! Primeiramente sejam bem vindos a este curso. Antes de iniciarmos vou falar um pouquinho sobre mim. Sou graduado em Anlise de Sistemas com Ps Graduao em Engenharia de Software e MBA em Gerenciamento de Projetos. Atualmente sou funcionrio do Banco do Brasil, cedido Caixa de Previdncia dos Funcionrios do Banco do Brasil (PREVI), no Rio de Janeiro. Grande parte da minha trajetria profissional foi voltada para a rea de desenvolvimento de aplicaes web utilizando a linguagem Java, a qual eu possuo as Certificaes SCJP (Sun Java Certified Programmer), OCWCD (Oracle Certified Web Component Developer e OCJA (Oracle Certified Java Architect) Part I.Atualmente minha funo principal administrar Servidores de Aplicaes com Servidores Linux, na rea de Infraestrutura. Nessa rea possuo as certificaes 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 Pblicos leciono algumas disciplinas em cursinhos do Rio de Janeiro e algumas vdeos aulas no grupo ProvasDeTI. Procuro me manter atualizado com as bancas a fim de identificar os itens mais cobrados nas provas. Um bom professor no aquele que ensina bem apenas, mas tambm que conhea 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 alm de passar os principais pontos a serem estudados, entregar um material de www.tiparaconcursos.net Pgina 1 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

qualidade que atenda as exigncias de concurseiros, conseguindo agregar conhecimento nesta jornada que vocs esto seguindo.

1. Apresentao.
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 contedo 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 questes deste assunto para esta Banca limitado, iremos fazer questes de outras bancas tambm para consolidar o conhecimento sobre os principais pontos que sero abordados porm se entrar no mrito das especificidades da Banca, utilizando as questes apenas para testar o nosso conhecimento nos assuntos que precisaremos dominar. Com o conhecimento adquirido ao final deste curso teremos capacidade de aproveitar o contedo adquirido para outras provas que cobrem tambm estes assuntos.

1.2.

Metodologia das aulas.

Este um curso de questes comentadas, desta forma, necessrio ter um conhecimento prvio para que possa acompanhar a resoluo das questes de forma adequada. A idia que atravs da resoluo das questes possamos traar um direcionamento sobre os principais pontos que precisam ser estudados com mais afinco. Iremos indicar material para estudos posteriores e referncias bibliogrficas para aprofundamento na teoria de acordo com os tpicos que sero abordados. Lembrem-se sempre que o material de questes comentadas baseado no contedo histrico cobrado pelas Bancas, com os pontos que costumam cair com mais frequncia, porm apesar da probabilidade do tpico cair novamente de forma semelhante ser

www.tiparaconcursos.net

Pgina 2 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

muito grande, isto no garantido, para isto precisamos estudar tambm a parte terica para entendermos os conceitos necessrios.

www.tiparaconcursos.net

Pgina 3 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

2. Contedo Programtico e Planejamento das Aulas (Cronograma).

O Contedo programtico est distribudo de forma que os alunos, mesmo que nunca tenham tido contato com o assunto, possam compreender o contexto da disciplina e tambm a forma com que ela se encaixa dentro das instituies e que pode ser cobrada na prova. Tento sempre trabalhar com o aumento do nvel de conhecimento do candidato, e vero que tudo que coloco nas nossas aulas sinal que cai ou que pode cair na prova, ou seja, no deixem de estudar ou se ficar com preguia, vamos l gente, volte atrs e leia novamente.

Aula

Contedo

Aula Demonstrativa 17/03/2014 Aula 1 24/03/2014 Aula 2 31/03/2014 Aula 3 07/04/2014

HTML 4 e 5 e CSS

XML: estrutura da linguagem, transformao XSLT, DTD e XML schema. Web Services

Noes sobre SOA (Service Oriented Architeture).

www.tiparaconcursos.net

Pgina 4 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

3. Questes HTML4 e 5
Antes de iniciarmos, vamos fazer um breve resumo com as principais caractersticas da tecnologia HTML. O HTML uma linguagem voltada para a apresentao visual e estruturao de documentos ou pginas web. Utiliza tags (elementos) para formar o documento, possuindo representativos para elementos que formam uma pgina ou documentos, definindo o esqueleto da pgina, a partir de marcadores que iro delimitar a rea de espao. 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 caracterstica muito importante sobre a linguagem HTML que se trata de uma tecnologia que no case-sensitive, ou seja, no distingue maisculas de minsculas, por exemplo uma tag de nome <head>, tem a mesma interpretao de <HEAD>. Algumas tags existentes no HTML so: <html></html> inicia/termina um documento HTML <head></head> define a rea do cabealho <body></body> define a rea visvel do documento <title></title> Coloca um ttulo na barra do navegador <b></b> texto em negrito <a href=></a> link <hr> linha horizontal <ul></ul> lista no ordenada <ol></ol> lista ordenada Agora que j fizemos este breve resumo, vamos resolver revisar as novidades do HTML5

www.tiparaconcursos.net

Pgina 5 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

A proposta do HTML 5 ser uma linguagem melhor preparada para construo de aplicaes Web, bem como ser independente dos plugins que estendam sua capacidade, de forma que possua novos elementos que do mais semntica ao contedo. A maioria dos navegadores atuais j suporta, e dentre as novidades, as principais mudanas so referente ao melhor tratamento de exceo, mais tags para substituir scripts, independncia de plataforma e reduo da necessidade de utilizao de plugins externos. Uma das principais novidades do HTML5 o elemento canvas, que atravs do JavaScript permite a criao de animaes e jobos bem interessantes, prometendo substituir tecnologias que exigem a instalao de plugins, como o Flash ou SilverLight. O canvas uma rea retangular onde o usurio pode (atravs do JavaScript) controlar todos os pixels, alm de desenhar vrios elementos grficos como crculo, retngulo, elipse, linha, texto, imagens entre outros. A incluso da tag se d sob a seguinte forma: <canvas id=myCanvas width=400 height=400></canvas> Para fazermos a manipulao do elemento, precisaremos utilizar JavaScript, e portanto no iremos abordar esta forma de manipulao. Houve tambm a incluso de elementos udio e vdeo para a manipulao de informao multimdia. O HTML5 fornece dois novos objetos para armazenar dados localmente, so eles o sessionStorage (que ir armazenar dados durante uma sesso ativa) e o localStorage (que ir armazenar dados sem limite de tempo) Uma listagem com os novos elementos pode ser observada abaixo: Tag <article> <aside> <bdi> Descrio Especifica um artigo qualquer Relaciona um contedo ao redor. Para texto que no esteja diretamente vinculado ao elemento pai.

<command> Um boto, radioButton ou checkBox. <details> <summary> Uma legenda ou resumo dentro do elemento detalhe.

www.tiparaconcursos.net

Pgina 6 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

<figure>

Para agrupamento de uma sesso de contedo stand-alone.

<figcaption> Legenda para um elemento figura. <footer> <header> <hgroup> <mark> <meter> <nav> Para um rodap de um documento ou sesso. Para uma introduo de um documento ou sesso. Para uma sesso de cabealhos usando h1 para h6. Para textos que so destaques. Para uma medio. Deve-se conhecer o valor mximo e mnimo. Para uma sesso de navegao.

<progress> Para mostrar o progresso de uma execuo. <ruby> <rt> <rp> <section> <time> <wbr> Para anotao rubi. Para explicar uma anotao rubi. Mostra os navegadores que no suportam anotao rubi. Para uma sesso de um documento como captulos, cabealhos, rodaps, etc. Para definir um tempo e/ou data. Quebra de linha.

Outra inovao foi referente aos controles para formulrios, fazendo com que muitas vezes os programadores tivessem que recorrer as bibliotecas JavaScript. Na verso 5 novos controles foram includos, segue uma relao:

Tag

Descrio

<datalist> Uma lista de opes de entrada. <keygen> Gera chaves para autenticao de usurios. <output> Para diferentes tipos de sadas, como a geradas por scripts.

E por ltimo, o elemento input ganhou uma srie de novos valores para o atributo type, tendo maior controle sobre o tipo de informao a ser tratada em cada entrada de dados: www.tiparaconcursos.net Pgina 7 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Type tel search url email datetime date month week time datetimelocal number range color placeholder

Descrio A entrada um nmero de telefone. A entrada um campo de busca. A entrada uma URL. A entrada um ou mais endereo de email. A entrada uma data e/ou hora. A entrada uma data A entrada um ms. A entrada um dia da semana. A entrada uma hora. A entrada uma data e hora local. A entrada um nmero. A entrada uma faixa de valores. A entrada uma cor em haxadecimal como #FF00FF. Especifica uma dica rpida que descreve o valor esperado em um campo de entrada.

Tendo conhecimento destas novas funcionalidades, vamos resolver algumas questes de vrias bancas.

QUESTO 01 CESPE 2013 CNJ Uma maneira de criar um cdigo HTML dinmico a partir da definio de objetos JavaScript dentro da tag <head>.

www.tiparaconcursos.net

Pgina 8 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Comentrios: Comentrios: A tag head utilizada para definir os diferentes metadados utilizados dentro da pgina HTML, por exemplo, incluso de scripts, definir para o navegador qual o local ir encontrar os cdigos CSS e prover meta informaes. A linguagem de script definida dentro deste elemento tag, e ir proporcionar comportamento dinmico para o HTML. O content type para a definio de cdigo HTML text/javascript Gabarito: CERTO

QUESTO 02 CESPE 2013 TER/MS Na verso HTML5, novos tipos de campos foram criados. Assinale a opo que descreve corretamente o tipo de campo em HTML. (A) O campo de email, com formatao e validao, dependendo do agente do usurio promove a interao com a agenda de contatos. (B) URL o campo para endereo web com validao e busca interna de acordo com a URL. (C) O campo tipo telefone (tel) possui mscara de formatao e validao. (D) O campo tipo datetime-local trata automaticamente os horrios absolutos de fusos horrios de acordo com o servidor da aplicao. (E) O tipo Search um campo de busca que utiliza o padro Google em todas as plataformas. Comentrios: Vamos detalhar melhor os novos tipos de atributos que vimos na tabela acima sobre os possveis valores do type para o elemento input. Email possui formatao e validao, o agente de usurio pode inclusive promover a integrao com sua agenda de contatos. Tel no possui mscara de formatao ou validao, propositalmente, visto no haver no mundo um padro bem definido para nmero de telefones. Assim como o tipo email, permite vincular com a agenda de contatos. url um endereo de web que possui formatao e validao

www.tiparaconcursos.net

Pgina 9 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

datetime-local trata automaticamente as diferenas de fusos horrios, submetendo ao servidor e recebendo dele valores GMT. Pode-se atravs dele desenvolver um sistema que ser usado em diferentes fusos horrios e permitir que cada usurio lide com os valores em seu prprio fuso horrio. Gabarito: A

QUESTO 03 CESPE 2013 SERPRO O padro HTML, definido pela W3C, est atualmente na verso 4.01. Comentrios: Esta uma questo que serve para sabermos qual a ltima verso do HTML, e se encontra correta. Existe o html 5 que j muito cobrado em prova, porm esta verso apesar de j ser suportada na maioria dos navegadores, ainda no se encontra homologada. Gabarito: CERTO

QUESTO 04 CESPE 2013 SERPRO Em um formulrio HTML, tags do tipo <input type=hidden> so utilizadas para garantir a segurana dos dados. Comentrios: Esta tag usada quando apesar da informao ser importante para o programa que ir processar os dados, esta no necessita ser apresentada ao usurio. Um exemplo seria: <form> <INPUT TYPE="hidden" NAME="email" VALUE="professor"> </form> Neste exemplo no conseguiramos visualizar este campo no nosso formulrio. De forma alguma esta tag poderia ser utilizada para garantir a segurana dos dados, pois uma vez que algum veja o cdigo fonte conseguiria ter acesso a esta informao. Este conceito diferente do que falado pela questo, pois o objetivo no proteger alguma informao, ou garantir a segurana, o propsito ocultar da apresentao apenas, porm o valor fica disponvel no cdigo fonte, e ao visualizar este, consegue-se ter acesso a todo o cdigo, inclusive quanto aos valores de variveis do tipo hidden. www.tiparaconcursos.net Pgina 10 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Gabarito: ERRADO

QUESTO 05 CESPE 2013 STF HTML5 uma linguagem multiplataforma que permitiu o desenvolvimento de aplicaes web executadas off-line e incorporou novos elementos de contedo especfico, como <.article>, <.footer>, <.nav> e <.section>. Comentrios: Questo simples que exige que saibamos quais so as novas caractersticas do HTML5, e como vimos em nosso resumo sobre a teoria, todos os elementos citados fazem partes de suas caractersticas. Gabarito: CERTO

QUESTO 06 FMP/RS 2013 MPE/AC A linguagem HTML em sua verso 5 apresenta diversas novas caractersticas em relao s verses anteriores dando uma maior potencialidade linguagem. Dentre as caractersticas abaixo qual delas NO advinda da proposta de HTML5?
(A) Implementao padro em todos os browsers e com funcionalidade tambm padro e

consistente em todos.
(B) Define uma forma padro de incorporar vdeo e udio. (C) Introduo de diversas APIs, entre elas a API Canvas que permite criar grficos,

desenhos, jogos e aplicaes web.

(D) Fornece maior interatividade sem a necessidade de Plugins. (E) Define novos tipos para o atributo type do comando INPUT usados em formulrios,

tais como data/hora, nmeros, autofocus e faixa de valores, entre outros. Comentrios: Vamos analisar cada uma das alternativas: (A) Implementao padro em todos os browsers e com funcionalidade tambm padro e consistente em todos. Quando fizemos uma reviso sobre o assunto no vimos este tpico como uma das melhores apresentadas pelo HTML5, isto porque as verses anteriores j tinham essas caractersticas, sendo essa, portanto, a alternativa a ser marcada. www.tiparaconcursos.net Pgina 11 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

(B) Define uma forma padro de incorporar vdeo e udio. Vimos que uma das novidades foi criao dos elementos udio e vdeo, para poderem tratar informaes multimdia. (C) Introduo de diversas APIs, entre elas a API Canvas que permite criar grficos, desenhos, jogos e aplicaes web. Exatamente, vimos inclusive que o elemento canvas permite manipular informaes atravs 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 utilizao de plugins. (E) Define novos tipos para o atributo type do comando INPUT usados em formulrios, tais como data/hora, nmeros, autofocus e faixa de valores, entre outros. Correto, tambm vimos inclusive uma tabela contendo os novos tipos para o atributo type criados. Gabarito: A

QUESTO 07 FCC 2012 MPE/AP A linguagem HTML5 traz um conjunto de novos valores possveis para o atributo type do elemento <input>, com objetivo de definir melhor os tipos de dados de entrada nos campos dos formulrios. 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. Comentrios: Mais uma questo 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 informaes da tabela a alternativa C. www.tiparaconcursos.net Pgina 12 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

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

QUESTO 08 FCC 2012 MPE/PE Na HTML5, um atributo booleano que, quando especificado, indica que o contedo do elemento <iframe> deve ser renderizado de maneira que parea fazer parte da pgina que contm 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

Comentrios: Vamos fazer uma anlise de todas as alternativas: Smooth no uma propriedade do iframe. Pattern tambm no faz parte do conjunto de propriedades de um iframe. Seamless exatamente o que est descrito no comando da questo. Sandbox a propriedade que permite habilitar um conjunto de restries adicionais ao contedo do iframe Srcdoc a propriedade que permite especificar o contedo HTML a ser exibido no iframe. Gabarito: C

QUESTO 09 FCC 2012 TRE/SP A linguagem HTML5 permite a utilizao de uma srie de APIs que ajudam na criao de aplicaes 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 so preenchidas correta e respectivamente por:

www.tiparaconcursos.net

Pgina 13 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

(A) tags XML, Canvas, <svg>, XML (B) linguagens dinmicas, 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 Comentrios: Por eliminao conseguiramos chegar resposta correta, uma vez que sabemos que a integrao do HTML muito grande com o JavaScript, j poderamos excluir as alternativas que falam sobre o XML, e sabemos tambm que o elemento que permite desenhar na tela o canvas, portanto a nica questo que sobra pra gente a letra C. Gabarito: C

QUESTO 10 FCC 2012 TRF2 Pedro est criando a pgina 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 documentao oficial da HTML5, Pedro decidiu usar o elemento cuja descrio 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 descrio possvel concluir que o elemento escolhido por Pedro foi: (A) <acronym> (B) <article> (C) <sidebar> (D) <aside> (E) <section> Comentrios: Vamos analisar cada uma das alternativas: (A) <acronym>

www.tiparaconcursos.net

Pgina 14 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Esta tag no mais suportada no HTML5, e caso seja necessrio trabalhar com a definio de siglas, devera ser utilizada a tag <abbr> (B) <article> Define um contedo independente, utilizado para definir o contedo principal. (C) <sidebar> Utilizada para criar uma barra de navegao para facilitar a navegao nos documentos HTML (D) <aside> Agrupa informaes relacionadas ao contedo principal, pode ser utilizao para citaes, agrupamento de publicidade, grupos e blocos de navegao. (E) <section> Utilizada para separar e organizar contedos de diversos assuntos em blocos diferentes Gabarito: D

QUESTO 11 FCC 2012 TER/PE Na HTML5, o atributo do elemento <input> que especifica uma expresso regular JavaScript para validar a entrada de dados em um campo texto o (A) masked (B) expression (C) override (D) placeholder (E) pattern Comentrios: O elemento do HTML 5 que permite especificar uma expresso regular para validar a entrada de dados o atributo pattern, como por exemplo atravs do cdigo abaixo: Aqui est um exemplo de formulrio que valida data e cep: <p> Digite uma data: <input type="date" name="data" required="required"

www.tiparaconcursos.net

Pgina 15 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

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

QUESTO 12 CESPE 2013 TER/MS

Com base no cdigo acima apresentado, assinale a opo correta.

(A) A tag de pargrafo no ser refletida no html, pois no foi inicializada. (B) Aps a importao da fonte Courier.eot, possvel 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, no possvel importar fontes com a extenso .ttf, apenas .eot. (E) A palavra Pantanal no ser exibida em negrito.

www.tiparaconcursos.net

Pgina 16 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Comentrios: Vamos analisar cada uma das alternativas e encontrar o erro de cada uma delas. (A) A tag de pargrafo no ser refletida no html, pois no foi inicializada. Devemos verificar se todas as tags esto alocadas de forma correta, e ao verificarmos percebemos que todas elas esto sendo abertas e fechadas, por exemplo <HTML></HTML>, <head></head>, <body></body>. Apesar disto, o HTML no criterioso quanto organizao do cdigo HTML, podendo inclusive haver alguns elementos que no so corretamente fechados. O HTML no case sensitive, e esta uma informao que precisamos ter para no cairmos em pegadinha das bancas. A tag pargrafo P est corretamente alocada, e por isso a alternativa est errada. (B) Aps a importao da fonte Courier.eot, possvel utilizar a fonte apenas na tag font. Alternativa est incorreta, pois a utilizao de fonte pode ocorrer tambm dentro do elemento <body> (C) A palavra Pantanal ser exibida no browser com a fonte CourierTeste no tamanho 4. Exatamente, percebam que est sendo definido o tamanho 4 e a fonte CourierTeste na linha exatamente anterior. (D) No Firefox, no possvel importar fontes com a extenso .ttf, apenas .eot. Fontes ttf so as fontes conhecidas como true type font, e so suportadas sem problema algum por todos os navegadores. (E) A palavra Pantanal no ser exibida em negrito. A palavra pantanal est entre os elementos <b> e </b>, o que determina que este valor ir aparecer em negrito. Gabarito: C

QUESTO 13 CESPE 2013 TER/MS HTML (hypertext markup language) uma linguagem de programao, atualmente na verso 5, muito utilizada para ambientes desktop.

www.tiparaconcursos.net

Pgina 17 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Comentrios: J vimos uma questo bem parecida que falava sobre a questo da ltima verso do HTML, e j aprendemos que a ltima verso a verso 5, porm ainda no se encontra homologada pela W3C, e como a questo no fala sobre ser homologada ou no, podemos considerar certo, o problema ocorre quando a questo fala que o HTML muito utilizado para ambientes desktop, a se encontra incorreta, j que o objetivo do HTML prover pginas web que iro ser executadas no ambiente de internet/intranet. Gabarito: ERRADO

www.tiparaconcursos.net

Pgina 18 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

4. Questes CSS
CSS uma tecnologia utilizada para definir o estilo utilizado na definio de apresentao de documentos usados em HTML ou XML. O objetivo desta tecnologia prover uma separao entre o formato e contedo de um documento. O CSS trabalha com a utilizao de seletores (elementos HTML) que so usados para declarar a quais elementos de marcao 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 cdigo em HTML dever receber a cor vermelha e o alinhamento centralizado. Alm de trabalhar com seletores genricos, o CSS pode trabalhar tambm 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 opo 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 caractersticas mais importantes do CSS, precisamos conhecer as trs 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 configuraes de estilo. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Interno o estilo definido dentro do prprio documento html, dentro da tag head, especificamente dentro de uma tag script. www.tiparaconcursos.net Pgina 19 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");} </style> </head> E por ltimo Inline, que a configurao dentro do prprio 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 configurao 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 questes.

QUESTO 14 CESPE 2013 CNJ O CSS uma linguagem de estilo que permite separar o formato e o contedo de documentos. Entretanto, as definies do CSS no so suportadas igualmente por todos os navegadores. Comentrios: Realmente o CSS uma linguagem que possui o intuito de separar o estilo de um documento ou pgina HTML do contedo das informaes. Este objetivo auxilia na separao de responsabilidades, deixando a parte de estilizao sob responsabilidade do CSS, enquanto o HTML fica responsvel pela definio do contedo do documento. Nas verses anteriores era at possvel definir o estilo do documento dentro do prprio cdigo HTML, atravs da prpria linguagem, porm com a chegada do CSS ficou definido esta organizao como forma de prover uma melhor leitura e melhor definio de documentos web. O que acontece na prtica que muitos navegadores no implementam todas as recomendaes da W3C, o que faz com que qualquer documento web tenha que ser testado e homologado em vrios navegadores a fim de garantir o completo funcionamento em todos estes, o que corrobora com a segunda parte da questo que cita exatamente este fato. Gabarito: CERTO

www.tiparaconcursos.net

Pgina 20 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 15 CESPE 2011 BRB Nas CSS, o termo body significa que todo o cdigo CSS existente entre um par de chaves { e } se aplica ao contedo dentro do elemento <body> do HTML. Comentrios: Informao bem bsica sobre o funcionamento do CSS necessrio que saibamos no mnimo como se estrutura uma configurao 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 sero separados dos outros por ponto e vrgula. Gabarito: CERTO

QUESTO 16 CESPE 2011 TER/ES Os estilos em CSS so especificados como uma lista de pares de atributos de nome/valor, separados por dois pontos, em que cada nome separado por ponto e vrgula. Comentrios: Mais uma questo bem simples, bem caracterstica da banca CESPE, que tenta confundir o candidato colocando uma informao errada/confusa dentro de uma frase correta. O erro da questo est em dizer que os pares nome/valor so separados por dois pontos. Sabemos que quando existirem mais de um par, estes sero separados por ;, e os pares so separados entre si por :, por exemplo: p{ color:blue; text-align:center; background-color:white } Gabarito: ERRADO

QUESTO 17 FCC 2012 TRT11 Considere a pgina HTML: www.tiparaconcursos.net Pgina 21 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

<html> <head> <title>Cadastro</title> <style type="text/css"> </style> </head> <body> <p> <a href=music.html>Msicas</a> </p> </body> </html> A instruo 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 cdigo HTML dinmico a partir da definio de objetos Comentrios: Uma questo que cobra o entendimento sobre propriedades de atributos de estilo. A questo cobra informaes sobre dois tipos de atributos, hover e visited. Ambos so 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 aps ter sido visitado. Sabendo destas informaes j conseguimos definir qual o seletor deveremos utilizar, que no caso o seletor hover, mais especificamente a:hover, que es pecifica o hover do elemento a. E quanto ao texto est sendo pedido que remova o sublinhado, portanto retirar a decorao de texto. Gabarito: B

www.tiparaconcursos.net

Pgina 22 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 18 FCC 2010 TRE/RS Analise os blocos de cdigo 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 pargrafo </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. Comentrios: Esta questo serve para vermos a importncia de reconhecermos os trs tipos de associao do CSS ao cdigo HTML. No Bloco 1 temos um cdigo sendo referenciado dentro do elemento head, neste caso pode ser um interno ou externo, porm, como est sendo referenciado um arquivo externamente atravs de um link, fica claro que o bloco 1 se refere a um tipo externo. No bloco 2 o contedo est dentro do head tambm, porm limitado entre tags style, o que identifica o modo interno. E por ltimo no bloco 3 o cdigo CSS est dentro do prprio elemento html, o que indica a utilizao do modo inline. www.tiparaconcursos.net Pgina 23 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Gabarito: C

QUESTO 19 FCC 2010 TRE/RS 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 Comentrios: A propriedade de background do CSS permite receber vrias opes e restringir o que ir receber a propriedade, podendo ser apenas background que definir todas as propriedades em uma nica declarao, pode ser background-attachment, que ir definir se a imagem de fundo fixa ou se acompanha a pgina, 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 posio inicial de uma imagem de fundo e background-repeat, que define como uma imagem de fundo ser repetida. Gabarito: C

www.tiparaconcursos.net

Pgina 24 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

5. Lista das Questes Utilizadas na Aula.

QUESTO 01 CESPE 2013 CNJ Uma maneira de criar um cdigo HTML dinmico a partir da definio de objetos JavaScript dentro da tag <head>.

QUESTO 02 CESPE 2013 TER/MS Na verso HTML5, novos tipos de campos foram criados. Assinale a opo que descreve corretamente o tipo de campo em HTML. (A) O campo de email, com formatao e validao, dependendo do agente do usurio promove a interao com a agenda de contatos. (B) URL o campo para endereo web com validao e busca interna de acordo com a URL. (C) O campo tipo telefone (tel) possui mscara de formatao e validao. (D) O campo tipo datetime-local trata automaticamente os horrios absolutos de fusos horrios de acordo com o servidor da aplicao. (E) O tipo Search um campo de busca que utiliza o padro Google em todas as plataformas.

QUESTO 03 CESPE 2013 SERPRO O padro HTML, definido pela W3C, est atualmente na verso 4.01. QUESTO 04 CESPE 2013 SERPRO Em um formulrio HTML, tags do tipo <input type=hidden> so utilizadas para garantir a segurana dos dados.

www.tiparaconcursos.net

Pgina 25 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 05 CESPE 2013 STF HTML5 uma linguagem multiplataforma que permitiu o desenvolvimento de aplicaes web executadas off-line e incorporou novos elementos de contedo especfico, como <.article>, <.footer>, <.nav> e <.section>.

QUESTO 06 FMP/RS 2013 MPE/AC A linguagem HTML em sua verso 5 apresenta diversas novas caractersticas em relao s verses anteriores dando uma maior potencialidade linguagem. Dentre as caractersticas abaixo qual delas NO advinda da proposta de HTML5? (A) Implementao padro em todos os browsers e com funcionalidade tambm padro e consistente em todos. (B) Define uma forma padro de incorporar vdeo e udio. (C) Introduo de diversas APIs, entre elas a API Canvas que permite criar grficos, desenhos, jogos e aplicaes web. (D) Fornece maior interatividade sem a necessidade de Plugins. (E) Define novos tipos para o atributo type do comando INPUT usados em formulrios, tais como data/hora, nmeros, autofocus e faixa de valores, entre outros.

QUESTO 07 FCC 2012 MPE/AP A linguagem HTML5 traz um conjunto de novos valores possveis para o atributo type do elemento <input>, com objetivo de definir melhor os tipos de dados de entrada nos campos dos formulrios. 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.

www.tiparaconcursos.net

Pgina 26 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 09 FCC 2012 TRE/SP A linguagem HTML5 permite a utilizao de uma srie de APIs que ajudam na criao de aplicaes 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 so preenchidas correta e respectivamente por: (A) tags XML, Canvas, <svg>, XML (B) linguagens dinmicas, 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

QUESTO 10 FCC 2012 TRF2 Pedro est criando a pgina 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 documentao oficial da HTML5, Pedro decidiu usar o elemento cuja descrio 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 descrio possvel concluir que o elemento escolhido por Pedro foi: (A) <acronym> (B) <article> (C) <sidebar> (D) <aside> (E) <section>

www.tiparaconcursos.net

Pgina 27 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 11 FCC 2012 TER/PE Na HTML5, o atributo do elemento <input> que especifica uma expresso regular JavaScript para validar a entrada de dados em um campo texto o (A) masked (B) expression (C) override (D) placeholder (E) pattern

QUESTO 12 CESPE 2013 TER/MS

Com base no cdigo acima apresentado, assinale a opo correta. (A) A tag de pargrafo no ser refletida no html, pois no foi inicializada. (B) Aps a importao da fonte Courier.eot, possvel 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, no possvel importar fontes com a extenso .ttf, apenas .eot. (E) A palavra Pantanal no ser exibida em negrito.

QUESTO 13 CESPE 2013 TER/MS HTML (hypertext markup language) uma linguagem de programao, atualmente na verso 5, muito utilizada para ambientes desktop.

www.tiparaconcursos.net

Pgina 28 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 14 CESPE 2013 CNJ O CSS uma linguagem de estilo que permite separar o formato e o contedo de documentos. Entretanto, as definies do CSS no so suportadas igualmente por todos os navegadores.

QUESTO 15 CESPE 2011 BRB Nas CSS, o termo body significa que todo o cdigo CSS existente entre um par de chaves { e } se aplica ao contedo dentro do elemento <body> do HTML.

QUESTO 16 CESPE 2011 TER/ES Os estilos em CSS so especificados como uma lista de pares de atributos de nome/valor, separados por dois pontos, em que cada nome separado por ponto e vrgula.

QUESTO 17 FCC 2012 TRT11 Considere a pgina HTML: <html> <head> <title>Cadastro</title> <style type="text/css"> </style> </head> <body> <p> <a href=music.html>Msicas</a> </p> </body> </html> A instruo 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} www.tiparaconcursos.net Pgina 29 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

(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 cdigo HTML dinmico a partir da definio de objetos

QUESTO 18 FCC 2010 TRE/RS Analise os blocos de cdigo 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 pargrafo </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.

www.tiparaconcursos.net

Pgina 30 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

QUESTO 19 FCC 2010 TRE/RS 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

www.tiparaconcursos.net

Pgina 31 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

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

www.tiparaconcursos.net

Pgina 32 de 33

Desenvolvimento de Software METR-DF Aula 00 Exerccios Comentados Prof. Lcio

Um assunto um tanto quanto delicado, mas o rateio de material crime e ns no TIParaConcursos.net no iremos tolerar tal prtica, visto os esforos despendidos pelos nossos professores e sua respectiva valorizao. Temos ainda meios de rastrearmos tal realizao em grupos de discusses e redes sociais, de forma que tal prtica seja coibida.

DIREITOS AUTORAIS LEI 10.695/2003 No caso de violao de direitos de autor e delitos conexos, a pena ser de deteno de trs meses a um ano ou multa. Se a infrao tiver o intuito de lucro direito ou indireto, o agente poder ser condenado recluso de dois a quatro anos e multa, tanto na hiptese de distribuio, venda ou aluguel no pas, quanto no de oferecimento ao pblico via cabo, fibra tica e satlite.

CONCURSEIRO QUE PIRATEIA PODE FICAR IMPEDIDO DE TOMAR POSSE CASO SEJA PROCESSADO .

www.tiparaconcursos.net

Pgina 33 de 33