Informática Parte 20 Prof. Márcio Hunecke

Transcrição

1 Escriturário Informática Parte 20 Prof. Márcio Hunecke

2

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 chave 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ântica 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 linguagem 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 introduzidas 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 documentos existentes na web. É, também, uma tentativa de definir uma única linguagem simples de marcaçã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>, <header> e <nav>, são projetados para enriquecer o conteúdo semântico dos documentos. Estrutura de uma página HTML 3

4 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 /> Informação sobre tipo de caracteres. Outra opção é UTF

5 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 5

6 <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 Exemplo de código utilizando a TAG acima <a href=" target= _blank" title="site da Casa das Questoes"> 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 fornecer uma descrição alternativa para a figura. Exemplo de código utilizando a TAG acima <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. Exemplo de código utilizando a TAG acima Nome: <input type="nome"> Sobrenome: <input type="sobrenome"> 6

7 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke Código completo do Programa2 utilizado em aula 7

8

9 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 simples, em que não exista a necessidade de programação em HTML ou Javascript. Eles também não possuem os recursos necessários ao desenvolvimento usando o conceito tableless 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 consideraçã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. 9

10 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> 10

11 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke 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" " > b) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" " 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 é necessário inserir a instrução a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" " 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" 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" " html5/ html5.dtd"> antes da tag <html>. 11

12 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= > DESTINO </a> b) <a href= > DESTINO </a> c) <a href= > DESTINO <a/> d) <a iref= > 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> 12

13 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke 13. (2014 FAURGS HCPA Analista I Webdesigner) A alternativa que apresenta a sintaxe correta para vincular uma folha de estilo externa, utilizando 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="styleshe et">css<ahref=" 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 abra em uma nova janela? a) <a href=" target="_blank">ufop</a> b) <a target="_blank"> c) <a href=" target="_parent">ufop</a> d) <a src=" 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". 13

14 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 cabeç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 destaque, 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. 14

15 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke 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 "> 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. A 11. B 12. B 13. A 14. A 15. C 16. E 17. A 18. D 19. D 20. D 15