Informática – Parte 20 Prof. Márcio Hunecke · O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. ... e) tremt.css 13 Banco do Brasil

Escriturário

Informática – Parte 20

Prof. Márcio Hunecke

www.acasadoconcurseiro.com.br 3

Informática

HTML 5

HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para estrutura-ção e apresentação de conteúdo para a World Wide Web e é uma tecnologia cha-ve da Internet originalmente proposto por Opera Software. É a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semân-tica e acessibilidade. Possibilita o uso de novos recursos antes possíveis apenas com a aplicação de outras tecnologias. Sua essência tem sido melhorar a lingua-gem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers etc.). O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM.

Após seus predecessores imediatos HTML 4.01 e XHTML 1.1, HTML5 é uma resposta à observação de que o HTML e o XHTML, de uso comum na World Wide Web, é uma mistura de características intro-duzidas por várias especificações, juntamente com aquelas introduzidas por software, tais como os navegadores, aqueles estabelecidos pela prática comum, e os muitos erros de sintaxe em documen-tos existentes na web. É, também, uma tentativa de definir uma única linguagem simples de mar-cação que possa ser escrita em HTML ou em sintaxe XHTML. Em particular, HTML5 adiciona várias novas funções sintáticas. Elas incluem as tags de<video>, <audio>, <header> e elementos<canvas> (permite desenhar gráficos via código). Outros novos elementos, como <section>, <article>, <hea-der> e <nav>, são projetados para enriquecer o conteúdo semântico dos documentos.

Estrutura de uma página HTML

www.acasadoconcurseiro.com.br4

HTML é responsável pela estrutura da página.

CSS é responsável pelo estilo visual.

JS é responsável pela interação com os usuários.

Todo documento HTML é formado por TAGs e tem a estrutura básica conforme abaixo:

TAGs HTML

• <title> – Nome que irá aparecer na guia do navegador

• <meta name=“description”> – informação utilizada pelas ferramentas de busca

• <meta name=“keywords”> – informação utilizada pelas ferramentas de busca

• <meta name=“author”> – informação utilizada pelas ferramentas de busca

• <meta charset=“ISO-8859-1”/> – Informação sobre tipo de caracteres. Outra opção é “UTF-8”

Banco do Brasil - TI (Escriturário) – Informática – Márcio Henecke


Exemplo de código utilizando as TAGs acima

• <h1>, <h2>, <h3>, <h4>, <h5> e <h6> – representam os seis níveis de títulos que podemos utilizar

Exemplo de código utilizando a TAG acima

• <header> Conteúdo que será apresentado no topo do Site </header>

• <nav> Menus de Navegação </nav>

• <section> Seção com conteúdos </section>

• <article> Conteúdo da página </article>

• <aside> Barra lateral </aside>

• <footer> Rodape </footer>

• <Blockquotes> é utilizado para referenciar CITAÇÕES de outros autores


• <p> é utilizado para inserir uma quebra de parágrafo

• <br/> é utilizado para inserir uma quebra de linha

Exemplo de código utilizando as últimas três TAGs acima

• <a href> Utilizada para referencial um documento outro arquivo HTML, um site da internet ou até mesmo uma seção do próximo documento HTML. Podemos utilizar _blank (abrir em nova guia) ou _self que é o padrão para abrir na própria guia. Podemos utilizar title para mostrar um texto ao colocar o mouse sobre o hyperlink


<a href="http://www.acasadasquestoes.com.br" target=“_blank" title="Site da Casa das Ques-toes"> Link para Site da Casa das Questoes</a>

• <img src> – Utilizada para mostrar o conteúdo de imagens na página. Podemos utilizar title para mostrar um texto ao colocar o mouse sobre a figura. Podemos utilizar alt para forne-cer uma descrição alternativa para a figura.


<img src="bb.png" title="Icone do Banco do Brasil" alt="Icone BB"/>

• <input type> – Utilizada para solicitar digitação de algum conteúdo na tela. Podemos utilizar a atributo pattern para avaliar o valor digitado. Pattern utiliza expressões regulares.


• Nome: <input type="Nome">

• Sobrenome: <input type="Sobrenome">



Código completo do Programa2 utilizado em aula


Questões

1. (2017 – FCC – TST – Técnico Judiciário – Programação)

Considere, hipoteticamente, que um Programador deseja publicar um vídeo institucional no site do Tribunal Superior do Trabalho. Para isso, no local da página HTML5 onde deseja colocar o vídeo, utilizou o bloco de código abaixo. Considere que [nome_arquivo.extensão] representa o nome de um arquivo de vídeo válido. Nas últimas versões dos principais navegadores, os tipos de arquivos de vídeo válidos para preencher a lacuna I são

a) avi, mpeg e mov b) mkv, ogg e flv c) mp4, webm e ogg d) wmv, rmvb e mp4 e) mp4, avi e mov

2. (2017 – PUC-PR – TJ-MS – Técnico de Nível Superior – Web Designer)

Em relação à criação de páginas web, pode-se afirmar que

a) o uso de editores facilita o desenvolvimento, mas são aplicáveis somente em situações sim-ples, em que não exista a necessidade de programação em HTML ou Javascript. Eles tam-bém não possuem os recursos necessários ao desenvolvimento usando o conceito “table-less” ou a utilização de “folhas de estilos em cascata” ou CSS.

b) a utilização de editores permite a criação de páginas sem grandes esforços de programa-ção, mas um bom editor deve permitir de forma integrada que a programação possa ser feita de forma direta. É importante também que permita trabalhar com “folhas de estilos em cascata” ou CSS, em que a formatação não está no documento e sim em um link.

c) para a inclusão de áudio, vídeo e desenhos, a partir de vetores (SVG), é necessária a consi-deração do uso de plugins pelos navegadores, mesmo com o uso da mais recente versão da linguagem de estruturação e apresentação de conteúdo HTML5.

d) quando existe a necessidade de uma página conectar-se a um banco de dados (SGBD), a única forma de se fazer isto mantendo a compatibilidade com todos os navegadores (que sigam as recomendações do W3C) é por meio da linguagem XML.

e) a utilização do framework jQuery, cujo objetivo principal é potencializar a programação (menos código, mais ações), é muito recomendável quando se trabalha com as “folhas de estilos em cascata” ou CSS, em que a formatação está no documento e não em um link.


3. (2016 – CESGRANRIO – UNIRIO – Técnico em Tecnologia da Informação)

Considere o seguinte código HTML.

Esse código produzirá a saída

a) Nome:

b) Nome: nome c) • Nome: d) • Nome: nome e) Nome:

4. (2014 – CESGRANRIO – Petrobras – Técnico(a) de Informática Júnior)

Um técnico de informática, ao utilizar a linguagem HTML, identifica uma das características dessa linguagem que é

a) apresentar capacidade de extensibilidade, o que a torna adequada para troca de dados. b) criar listas numeradas através do uso da marcação < UL> e listas não numeradas através do

uso da marcação < OL>. c) criar links obedecendo ao formato < a url=?url?>Texto do Link < /a> d) descrever a aparência das páginas. e) possuir quatro níveis de cabeçalhos, numerados de 1 a 4, sendo o número 1 o de menor

destaque.

5. (2014 – CESGRANRIO – EPE – Analista de Gestão Corporativa – Tecnologia da Informação)

HTML (HiperText Markup Language) é uma linguagem de marcação inventada por Tim Berners-Lee e se tornou a principal linguagem de criação de páginas Web. Em evolução constante, sua especificação atual é conhecida como HTML 5. Segundo essa última especificação, um documento HTML, versão 5, básico, deve começar com uma declaração que define seu tipo, que indica ao browser que o conteúdo do elemento deve ser tratado como HTML.

Qual é essa declaração?

a) < !DOCTYPE html>b) < ?DOCTYPE html>



c) < DOCTYPE html5>d) < ?html version="5.0"?>e) < ?html5 version "1.0"?>

6. (2014 – CETRO – IF-PR – Técnico em Laboratório)

Assinale a alternativa que apresenta os elementos básicos obrigatórios de um código fonte escrito em XHTML.

a) TYPE, head e body. b) STRICT, html e body. c) FRAMESET, html, head e body. d) DOCTYPE, html e head, apenas. e) DOCTYPE, html, head e body.

7. (2016 – FGV – IBGE – Tecnologista – Programação Visual – Webdesign)

A declaração < !DOCTYPE > permite ao navegador apresentar uma página web corretamente. A declaração correta para uma página em HTML5 é:

a) < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0

Strict//EN" "http://www.w3.org/TR/html5/strict.dtd" >

b) < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0

Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">

c) < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0"> d) < !DOCTYPE html> e) < !DOCTYPE XML PUBLIC "-//W3C//DTD HTML 5.0">

8. (2015 – FCC – TRT – 4ª REGIÃO (RS) – Analista Judiciário – Tecnologia da Informação)

Para que o navegador saiba explicitamente que a página foi escrita na linguagem HTML5 é ne-cessário inserir a instrução

a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd"> após da tag <html>.

b) <!DOCTYPE html> antes da tag <html>. c) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" http://www.w3.org/TR/html5/loose.dtd"> antes da tag <html>.

d) <!DOCTYPE html5 PUBLIC> antes da tag <html>. e) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 //PT-BR" "http://www.w3.org/TR/

html5/ html5.dtd"> antes da tag <html>.


9. (2010 – FADESP – CREA-PA – Técnico em Tecnologia da Infomação e Comunicação – Web Designer)

Analisando a linha de código em HTML acima, qual o parâmetro que não faz parte da composi-ção de um comando de hyperlink?

a) Href.b) Title. c) Super.d) Target

10. (2017 – FGV – MPE-BA – Analista Técnico – Tecnologia)

A HTML é uma linguagem de marcação utilizada na construção de páginas na Web.

O comando de formatação da linguagem para definir um hyperlink indicando que o recurso linkado deve ser aberto em uma nova janela do navegador é:

a) <a href = "url" target ="_top">meu link</a> b) <a href = "url".new>meu link</a> c) <a href = "url" target="_blank">meu link</a> d) <a href = "url" target ="_parent">meu link</a> e) <a href = "url" target ="_self">meu link</a>

11. (2017 – FUNDEP (Gestão de Concursos) – UFVJM-MG – Técnico em Tecnologia da Informação)

Assinale a alternativa que apresenta corretamente uma marcação HTML?

a) <a ref=”www.teste.com.br”> DESTINO </a> b) <a href=”www.teste.com.br”> DESTINO </a> c) <a href=”www.teste.com.br”> DESTINO <a/> d) <a iref=”www.teste.com.br”> DESTINO </a>

12. (2015 – CESPE – TRE-MT – Técnico Judiciário – Programação de Sistemas)

Assinale a opção correta acerca do código HTML que faz referência a um arquivo de folha de estilo (CSS).

a) <style src="tremt.css"> b) <link rel="stylesheet" type="text/css" href="tremt.css"> c) <a href="tremt.css"> d) <css src="tremt.css"> e) <stylesheet>tremt.css</stylesheet>



13. (2014 – FAURGS – HCPA – Analista I – Webdesigner)

A alternativa que apresenta a sintaxe correta para vincular uma folha de estilo externa, utilizan-do um link no cabeçalho de uma página em HTML é:

a) <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> b) <link="stylesheet">CSS<ahref="http://styles.css">

c) stylesheet<href "styles.css"> d) <rel="stylesheet" href="styles.css" type="css.htm">- e) <link rel="stylesheet” type="text.css="styles.alt" media="screen">

14. (2016 – UFOP – UFOP – Técnico de Tecnologia da Informação)

Qual a opção correta para que a url http://www.ufop.br abra em uma nova janela?

a) <a href="http://www.ufop.br" target="_blank">UFOP</a> b) <a target="_blank">http://www.ufop.br</a> c) <a href="http://www.ufop.br" target="_parent">UFOP</a> d) <a src="http://www.ufop.br" target="_blank">UFOP</a>

15. (2014 – FCC – TRT – 1ª REGIÃO (RJ) – Analista Judiciário – Tecnologia da Informação)

Considere o programa a seguir, elaborado na linguagem HTML:

A função da 3ª e 4ª linhas é

a) exibir a imagem Parte1.jpg como plano de fundo da página. b) escrever na tela "Parte 1" em letras grandes e "Parte 1 do site" em letras pequenas. c) criar um link interno, para a região com o nome "Parte 1 do site". d) criar o título "Parte 1" que apareça da barra do navegador. e) abrir o arquivo texto "Parte 1" e exibi-lo após o cabeçalho "Parte 1 do site".


16. (2016 – FCC – ELETROBRAS-ELETROSUL – Informática)

A uma página HTML5 deseja-se vincular um arquivo chamado arq1.css e um arquivo chamado arq2.js. Para isso devem-se utilizar as instruções

a) <link rel="stylesheet" type="file/css" scr="arq1.css"> e <script src="arq2.js"> </script> no corpo da página.

b) <import type="text/css" href="arq1.css" e <script file="arq2.js"> </script> no cabeçalho da página.

c) <link type="css" style="external" href"arq1.css"> e <script src="arq2.js"> </script> no ca-beçalho da página.

d) <include type="text/css" href="arq1.css"> e <script src="arq2.js"> </script> no corpo da página.

e) <link rel="stylesheet" type="text/css" href="arq1.css"> e <script src="arq2.js"> </script> no cabeçalho da página

17. (2018 – CONSULPLAN – Câmara de Belo Horizonte – MG – Analista de Tecnologia da Informação – Desenvolvimento de Sistema)

Elemento do HTML5 “que pode ser uma caixa (na teoria ou na prática) dentro do conteúdo principal em si, na mesma coluna, mas não aninhado ao conteúdo principal, ou em (ou como) uma coluna secundária, como a barra lateral”. Exemplos desse elemento são citação em des-taque, propaganda, grupos de elementos nav (por exemplo, um blog roll), uma caixa de links de artigos relacionados em um site de negócios etc. Assinale a alternativa que apresenta esse elemento.

a) Aside. b) Footer. c) Article. d) Footer.

18. (2018 – CONSULPLAN – Câmara de Belo Horizonte – MG – Analista de Tecnologia da Informação – Desenvolvimento de Sistema)

No HTML5, há dois elementos especiais utilizados para marcação de um texto citado de uma fonte. Um desses elementos “representa uma citação (geralmente uma citação mais longa, mas não necessariamente), que se sustenta por si só e é renderizada, por padrão em uma linha própria”. Trata-se de:

a) q. b) cite. c) mark. d) blackquote.

19. (2017 – PUC-PR – TJ-MS – Técnico de Nível Superior – Web Designer)

Sobre as imagens presentes em websites HTML, é CORRETO afirmar que

a) TITLE é um atributo que quando inserido na imagem a transforma em um botão que leva ao título da página.

b) TOOLTIP é um atributo que apresenta uma animação quando pressionado em uma imagem.



c) IMG SRC é um atributo que melhora a qualidade da imagem. d) ALT é um atributo que fornece uma descrição alternativa para imagens. e) MAP é um atributo de geolocalização da imagem para acessar um endereço específico.

20. (2017 – FCC – TRE-PR – Técnico Judiciário – Programação de Sistemas)

Ao desenvolver um site utilizando HTML5, um Técnico observou que os caracteres acentuados eram exibidos incorretamente pelo navegador. Para resolver o problema, usou um comando padrão no cabeçalho das páginas para especificar corretamente a codificação de caracteres. O comando utilizado foi:

a) <meta http-equiv="Content-Type" content="text/html; lang=pt-br"> b) <page lang="pt-br" encode="ISO-8859-1"> c) <manifest lang="pt-br" encoding="ASCII"> d) <meta charset="UTF-8"> e) <http-equiv lang="pt-br" content="text/html; charset=UTF-8">

Gabarito: 1. C 2. B 3. A 4. D 5. A 6. E 7. D 8. B 9. C 10. C 11. B 12. B 13. A 14. A 15. C 16. E 17. A 18. D 19. D 20. D

Documents

Informática – Parte 20 Prof. Márcio Hunecke · O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. ... e) tremt.css 13 Banco do Brasil