Aula 04 - Desenvolvimento Front-End - HTML, CSS e Bootstrap

Prévia do material em texto

<p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI)</p><p>Desenvolvimento de Software</p><p>Autor:</p><p>Paolla Ramos</p><p>16 de Março de 2024</p><p>39471799600 - Naldira Luiza Vieria</p><p>Paolla Ramos</p><p>Aula 04</p><p>Índice</p><p>..............................................................................................................................................................................................1) Desenvolvimento Front-End - HTML - Teoria 3</p><p>..............................................................................................................................................................................................2) Desenvolvimento Front-End - HTML - Questões Comentadas - MULTIBANCAS 90</p><p>..............................................................................................................................................................................................3) Desenvolvimento Front-End - HTML - Lista de Questões - MULTIBANCAS 143</p><p>..............................................................................................................................................................................................4) Desenvolvimento Front-End - CSS - Teoria 174</p><p>..............................................................................................................................................................................................5) Desenvolvimento Front-End - CSS - Questões Comentadas - MULTIBANCAS 287</p><p>..............................................................................................................................................................................................6) Desenvolvimento Front-End - CSS - Lista de Questões - MULTIBANCAS 318</p><p>..............................................................................................................................................................................................7) Desenvolvimento Front-End - Bootstrap - Teoria 337</p><p>..............................................................................................................................................................................................8) Desenvolvimento Front-End - Bootstrap - Questões Comentadas - Multibancas 390</p><p>..............................................................................................................................................................................................9) Desenvolvimento Front-End - Bootstrap - Lista de Questões - Multibancas 413</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>2</p><p>428</p><p>Sumário</p><p>Apresentação da Aula ...................................................................................................................................... 3</p><p>HTML ............................................................................................................................................................... 4</p><p>Conceitos Básicos ........................................................................................................................................ 4</p><p>HTML Básico ................................................................................................................................................ 9</p><p>Elementos HTML ....................................................................................................................................... 12</p><p>Atributos HTML ......................................................................................................................................... 14</p><p>Cabeçalhos HTML ...................................................................................................................................... 15</p><p>Parágrafos HTML ....................................................................................................................................... 16</p><p>Estilos HTML .............................................................................................................................................. 18</p><p>Formatação de Texto HTML ...................................................................................................................... 21</p><p>Citação em HTML ...................................................................................................................................... 22</p><p>Comentários HTML .................................................................................................................................... 24</p><p>Cores HTML ............................................................................................................................................... 25</p><p>Links HTML ................................................................................................................................................ 27</p><p>Imagens HTML ........................................................................................................................................... 28</p><p>Tabelas HTML ............................................................................................................................................ 32</p><p>Estilização de Tabelas HTML ..................................................................................................................... 35</p><p>Listas HTML ............................................................................................................................................... 36</p><p>Listas Não Ordenadas ............................................................................................................................ 37</p><p>Listas Ordenadas em HTML .................................................................................................................. 40</p><p>Bloco HTML e elementos embutidos ........................................................................................................ 44</p><p>Elementos de nível de bloco .................................................................................................................. 44</p><p>Elementos inline ..................................................................................................................................... 46</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>3</p><p>428</p><p>Atributo de classe HTML ........................................................................................................................... 49</p><p>Formulários HTML ..................................................................................................................................... 52</p><p>Os elementos HTML ................................................................................................................. 55</p><p>Principais Características ............................................................................... Erro! Indicador não definido.</p><p>APIs HTML ................................................................................................................................................. 58</p><p>API de geolocalização HTML ................................................................................................................. 58</p><p>API de armazenamento da Web em HTML ........................................................................................... 59</p><p>RESUMO .................................................................................................................................................... 64</p><p>REFERÊNCIAS ................................................................................................................................................ 87</p><p>Questões Comentadas ...................................................................................... Erro! Indicador não definido.</p><p>Questões Cespe .............................................................................................</p><p>conter uma data. Dependendo do</p><p>suporte do navegador, um seletor de data pode aparecer no campo de</p><p>entrada.</p><p>Especifica um campo de entrada de data e hora, sem fuso horário.</p><p>Dependendo do suporte do navegador, um seletor de data pode aparecer no</p><p>campo de entrada.</p><p>É usado para campos de entrada que devem conter um endereço de e-mail.</p><p>Dependendo do suporte do navegador, o endereço de e-mail pode ser</p><p>validado automaticamente quando enviado.</p><p>Define um campo de seleção de arquivo e um botão "Procurar" para uploads</p><p>de arquivos.</p><p>Define um campo de entrada oculto (não visível para um usuário). Um campo</p><p>oculto permite que os desenvolvedores da web incluam dados que não podem</p><p>ser vistos ou modificados pelos usuários quando um formulário é enviado. Um</p><p>campo oculto geralmente armazena o registro do banco de dados que precisa</p><p>ser atualizado quando o formulário é enviado.</p><p>Define uma imagem como um botão de envio. O caminho para a imagem é</p><p>especificado no srcatributo.</p><p>Permite ao usuário selecionar um mês e um ano. Dependendo do suporte do</p><p>navegador, um seletor de data pode aparecer no campo de entrada.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>58</p><p>428</p><p>Define um campo de entrada numérica. Você também pode definir restrições</p><p>sobre quais números são aceitos.</p><p>Define um campo de senha</p><p>Define um botão de opção. Os botões de opção permitem que um usuário</p><p>selecione apenas uma dentre um número limitado de opções.</p><p>Define um controle para inserir um número cujo valor exato não é importante</p><p>(como um controle deslizante). O intervalo padrão é de 0 a 100. No entanto,</p><p>você pode definir restrições sobre quais números são aceitos com os atributos</p><p>min, maxe :step</p><p>Define um botão de redefinição que redefinirá todos os valores do formulário</p><p>para seus valores padrão</p><p>É usado para campos de pesquisa (um campo de pesquisa se comporta como</p><p>um campo de texto normal).</p><p>Define um botão para enviar dados de formulário para um manipulador de</p><p>formulário</p><p>É usado para campos de entrada que devem conter um número de telefone.</p><p>Define um campo de entrada de texto de linha única</p><p>Permite ao usuário selecionar um horário (sem fuso horário). Dependendo do</p><p>suporte do navegador, um seletor de tempo pode aparecer no campo de</p><p>entrada.</p><p>É usado para campos de entrada que devem conter um endereço URL.</p><p>Dependendo do suporte do navegador, o campo url pode ser validado</p><p>automaticamente quando enviado.</p><p>Permite ao usuário selecionar uma semana e um ano. Dependendo do suporte</p><p>do navegador, um seletor de data pode aparecer no campo de entrada.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>59</p><p>428</p><p>APIs HTML</p><p>O HTML5 apresenta várias novas APIs (Application Programming Interfaces) que permitem aos</p><p>desenvolvedores da Web criar aplicativos da Web mais poderosos e interativos. Aqui estão alguns</p><p>exemplos:</p><p>• A API de geolocalização permite que aplicativos da web acessem as informações de localização</p><p>do usuário, com a permissão do usuário.</p><p>• A API Web Storage fornece uma maneira de armazenar dados localmente em um navegador da</p><p>web, permitindo que os aplicativos da web funcionem offline ou armazenem dados para uso</p><p>futuro.</p><p>• A API Web Workers permite que aplicativos da Web executem tarefas em segundo plano, como</p><p>processamento de dados, sem interromper a experiência do usuário.</p><p>• A API WebSockets permite a comunicação full-duplex entre o navegador da web e um servidor,</p><p>permitindo a troca de dados em tempo real.</p><p>• A API Canvas permite que os desenvolvedores da Web desenhem gráficos e animações em uma</p><p>página da Web usando JavaScript.</p><p>• A API de áudio da Web permite que os desenvolvedores da Web criem e manipulem áudio em</p><p>uma página da Web, como sintetizar som ou processar entradas de áudio.</p><p>• API Server-Sent Events (SSE) é uma tecnologia que permite que um servidor da Web envie dados</p><p>para um navegador da Web em tempo real, sem a necessidade de o navegador fazer uma</p><p>solicitação. Isso facilita a criação de aplicativos em tempo real, como salas de bate-papo, feeds</p><p>de notícias e outros tipos de aplicativos que exigem atualizações frequentes.</p><p>Estes são apenas alguns exemplos das APIs disponíveis no HTML5. Existem muitos mais, cada um</p><p>com seu próprio conjunto específico de recursos e capacidades.</p><p>API de geolocalização HTML</p><p>A API de geolocalização HTML é usada para localizar a posição de um usuário. Como isso pode</p><p>comprometer a privacidade, a posição não está disponível a menos que o usuário aprove. a API de</p><p>geolocalização permite que aplicativos da web acessem as informações de localização do usuário,</p><p>com a permissão do usuário. Isso pode ser útil para uma ampla variedade de aplicativos, como</p><p>pesquisa baseada em localização, publicidade com reconhecimento de localização e jogos</p><p>baseados em localização.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>60</p><p>428</p><p>==1365fc==</p><p>É importante observar que as informações de localização do usuário são confidenciais e os</p><p>aplicativos da Web devem obter a permissão do usuário antes de acessá-las. O usuário</p><p>normalmente será solicitado a permitir ou negar o acesso às suas informações de localização.</p><p>O método getCurrentPosition() é usado para retornar a posição do usuário. O exemplo abaixo</p><p>retorna a latitude e longitude da posição do usuário:</p><p>var x = document.getElementById("demo");</p><p>function getLocation() {</p><p>if (navigator.geolocation) {</p><p>navigator.geolocation.getCurrentPosition(showPosition);</p><p>} else {</p><p>x.innerHTML = "Geolocation is not supported by this browser.";</p><p>}</p><p>}</p><p>function showPosition(position) {</p><p>x.innerHTML = "Latitude: " + position.coords.latitude +</p><p>"Longitude: " + position.coords.longitude;</p><p>}</p><p>Não entendeu nada? Vamos lá, o exemplo acima executa as seguintes ações:</p><p>• Verifica se a geolocalização é suportada</p><p>• Se suportado, executa o método getCurrentPosition().</p><p>• Se não, exibir uma mensagem para o usuário</p><p>• Se o método getCurrentPosition() for bem-sucedido, ele retornará um objeto de</p><p>coordenadas para a função especificada no parâmetro (showPosition)</p><p>• A função showPosition() gera a Latitude e Longitude</p><p>A geolocalização também é muito útil para informações específicas do local, como:</p><p>• Informações locais atualizadas;</p><p>• Mostrar pontos de interesse perto do usuário;</p><p>• Navegação curva a curva (GPS).</p><p>API de armazenamento da Web em HTML</p><p>Para falar sobre API de armazenamento da Web em HTML primeiro devemos saber o que é</p><p>armazenamento na Web em HTML? Com o armazenamento na web, os aplicativos da web podem</p><p>armazenar dados localmente no navegador do usuário.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>61</p><p>428</p><p>Antes do HTML5, os dados do aplicativo precisavam ser armazenados em cookies, incluídos em</p><p>todas as solicitações do servidor. O armazenamento na Web é mais seguro e grandes quantidades</p><p>de dados podem ser armazenadas localmente, sem afetar o desempenho do site.</p><p>Ao contrário dos cookies,</p><p>o limite de armazenamento é muito maior (pelo menos 5 MB) e as</p><p>informações nunca são transferidas para o servidor. O armazenamento na Web é por origem (por</p><p>domínio e protocolo). Todas as páginas, de uma origem, podem armazenar e acessar os mesmos</p><p>dados.</p><p>O armazenamento da web HTML fornece dois objetos para armazenar dados no cliente:</p><p>• window.localStorage - armazena dados sem data de validade; os dados não serão excluídos</p><p>quando o navegador for fechado e estarão disponíveis no próximo dia, semana ou ano.</p><p>• window.sessionStorage - armazena dados para uma sessão. Os dados são excluídos quando</p><p>o usuário fecha a guia específica do navegador.</p><p>Antes de usar o armazenamento na web, é necessário verificar o suporte do navegador para</p><p>localStorage e sessionStorage.</p><p>(CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionado a desenvolvimento de sistemas.</p><p>No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados, tendo como</p><p>característica o armazenamento de dados restritos à aba em funcionamento.</p><p>Comentários</p><p>É possível usar dois objetos para armazenar dados no cliente: window.localStorage e sessionStorage. O</p><p>localStorage - armazena dados sem data de validade; os dados não serão excluídos quando o navegador</p><p>for fechado e estarão disponíveis no próximo dia, semana ou ano. Por outro lado, o window.sessionStorage</p><p>- armazena dados para uma sessão. Os dados são excluídos quando o usuário fecha a guia específica do</p><p>navegador. A questão erra ao afirmar que sessionStorage pode ser utilizado para armazenamento local de</p><p>dados quando na verdade é o window.localStorage que o faz. (Gabarito: Errado)</p><p>Ob</p><p>je</p><p>to</p><p>s</p><p>de</p><p>ar</p><p>m</p><p>az</p><p>en</p><p>am</p><p>en</p><p>to</p><p>d</p><p>a</p><p>W</p><p>eb</p><p>e</p><p>m</p><p>H</p><p>TM</p><p>L window.localStorage - armazena dados sem data de validade</p><p>window.sessionStorage - armazena dados para uma sessão (os dados são</p><p>perdidos quando a guia do navegador é fechada)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>62</p><p>428</p><p>XHTML</p><p>XHTML (Extensible HyperText Markup Language) é uma linguagem de marcação que é uma</p><p>variante do HTML (HyperText Markup Language). É uma versão mais rígida e limpa do HTML, com</p><p>uma sintaxe mais rígida e com foco na conformidade com os padrões.</p><p>Assim como o HTML, o XHTML é usado para estruturar e formatar o conteúdo de páginas da Web,</p><p>incluindo texto, imagens e outros elementos multimídia. No entanto, o XHTML segue as regras do</p><p>XML (eXtensible Markup Language), o que significa que deve ser bem formado e obedecer a certas</p><p>regras de sintaxe. Isso facilita a análise e o processamento e pode ser manipulado por uma ampla</p><p>gama de ferramentas e aplicativos.</p><p>XHTML foi projetado para ser uma ponte entre HTML e XML, e é frequentemente usado em</p><p>combinação com outras tecnologias, como CSS (Cascading Style Sheets) e JavaScript, para criar</p><p>páginas da Web dinâmicas e interativas. É suportado por todos os navegadores da web modernos</p><p>e é comumente usado no desenvolvimento web.</p><p>Existem várias diferenças entre HTML e XHTML:</p><p>• Sintaxe: XHTML tem uma sintaxe mais estrita e rígida do que HTML. Ele segue as regras do</p><p>XML, o que significa que deve ser bem formado e obedecer a certas regras de sintaxe, como</p><p>fechar todas as tags e usar letras minúsculas. O HTML, por outro lado, é mais flexível e</p><p>tolerante em termos de sintaxe, e não é necessário seguir as regras do XML.</p><p>• Extensibilidade: XHTML é projetado para ser extensível, o que significa que pode ser</p><p>estendido com novos elementos e atributos. Isso é feito usando os mecanismos do XML,</p><p>como namespaces. O HTML, por outro lado, não é tão extensível e é limitado aos elementos</p><p>e atributos definidos na especificação HTML.</p><p>• Compatibilidade: XHTML é compatível com uma ampla gama de ferramentas e aplicativos,</p><p>pois segue as regras do XML. O HTML é menos compatível, pois não segue as regras do XML.</p><p>• Tipo de documento: XHTML usa uma declaração de tipo de documento (DTD) diferente do</p><p>HTML. A DTD especifica as regras para o documento e determina como o documento deve</p><p>ser interpretado por navegadores da Web e outros aplicativos.</p><p>• Tipo MIME: XHTML usa um tipo MIME (Multipurpose Internet Mail Extensions) diferente do</p><p>HTML. O tipo MIME informa aos navegadores da Web e outros aplicativos como lidar com</p><p>o documento.</p><p>Em geral, o XHTML é uma versão mais moderna e compatível com os padrões do HTML, e é</p><p>frequentemente usado em combinação com outras tecnologias, como CSS e JavaScript, para criar</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>63</p><p>428</p><p>páginas da Web dinâmicas e interativas. No entanto, o HTML ainda é amplamente usado e</p><p>suportado por todos os navegadores modernos.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>64</p><p>428</p><p>Acessibilidade HTML</p><p>O HTML5 inclui vários recursos que podem melhorar a acessibilidade do conteúdo da Web para</p><p>usuários com deficiências. Alguns desses recursos incluem:</p><p>• Elementos semânticos: o HTML5 apresenta novos elementos semânticos, como ,</p><p>e , que podem ajudar a melhorar a estrutura e o significado do conteúdo da web.</p><p>Isso pode tornar mais fácil para as tecnologias assistivas, como leitores de tela, interpretar e</p><p>navegar pelo conteúdo.</p><p>• Atributos ARIA: A especificação Accessible Rich Internet Applications (ARIA) define um conjunto</p><p>de atributos que podem ser usados para fornecer informações adicionais sobre a finalidade e o</p><p>comportamento dos elementos em uma página da web. Esses atributos podem ser usados para</p><p>melhorar a acessibilidade de elementos interativos, como botões e controles de formulário.</p><p>• Legendas e legendas de vídeo: O elemento permite que você especifique uma trilha de</p><p>texto que pode ser exibida como legendas ou legendas para um elemento . Isso pode</p><p>ajudar a tornar o conteúdo de vídeo mais acessível para usuários surdos ou com deficiência</p><p>auditiva.</p><p>• Controles de formulário: o HTML5 apresenta novos controles de formulário, como os tipos de</p><p>entrada de data e intervalo, que podem melhorar a usabilidade e a acessibilidade dos</p><p>formulários da web.</p><p>Ao usar esses e outros recursos do HTML5, você pode ajudar a tornar seu conteúdo da Web mais</p><p>acessível e fácil de usar para uma ampla gama de usuários.</p><p>O atributo lang é um atributo HTML que pode ser usado para especificar o idioma de um elemento</p><p>e seu conteúdo. É um importante recurso de acessibilidade, pois permite que tecnologias</p><p>assistivas, como leitores de tela, interpretem e pronunciem corretamente o conteúdo de uma</p><p>página da web.</p><p>É uma boa ideia usar o atributo lang sempre que estiver usando um idioma diferente do idioma</p><p>padrão da página da web. Isso ajuda a garantir que o conteúdo seja interpretado e pronunciado</p><p>corretamente por tecnologias assistivas.</p><p>Vale a pena notar que o atributo lang não está limitado ao HTML5 – ele faz parte do HTML há</p><p>muitos anos. No entanto, é um importante recurso de acessibilidade que vale a pena considerar</p><p>em qualquer documento HTML.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>65</p><p>428</p><p>RESUMO</p><p>O que é HTML?</p><p>• HTML significa Hyper Text Markup Language.</p><p>• HTML é a linguagem de marcação padrão para criar páginas da Web;</p><p>• HTML descreve a estrutura de uma página da Web;</p><p>• HTML consiste em uma série de elementos;</p><p>• Os elementos HTML informam ao navegador como exibir o conteúdo;</p><p>• Os elementos HTML rotulam partes do conteúdo como</p><p>"isto é um título", "isto é um</p><p>parágrafo", "isto é um link", etc.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>66</p><p>428</p><p>HTML Básico</p><p>Os cabeçalhos HTML são definidos com as tags to .. define o cabeçalho mais</p><p>importante. Enquanto define o título menos importante:</p><p>Elementos HTML</p><p>Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final. O elemento</p><p>HTML é tudo, desde a tag inicial até a tag final:</p><p>Hy</p><p>pe</p><p>r</p><p>Te</p><p>xt</p><p>M</p><p>ar</p><p>ku</p><p>p</p><p>La</p><p>ng</p><p>ua</p><p>ge</p><p>-</p><p>HT</p><p>M</p><p>L</p><p>Linguagem de marcação padrão para criar páginas da Web</p><p>Descreve a estrutura de uma página da Web</p><p>Consiste em uma série de elementos</p><p>Elementos HTML informam ao navegador como exibir o conteúdo e rotulam partes</p><p>do conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>67</p><p>428</p><p>O conteúdo vai aqui...</p><p>Meu primeiro cabeçalho</p><p>Meu primeiro parágrafo.</p><p>Tag inicial conteúdo do elemento Tag final</p><p>My First Heading</p><p>My first paragraph.</p><p>none none</p><p>Atributos HTML</p><p>Todos os elementos HTML podem ter atributos. Os atributos fornecem informações adicionais</p><p>sobre os elementos, e são sempre especificados na tag de início. Os atributos geralmente vêm em</p><p>pares de nome/valor como: name="value".</p><p>A tag define um hiperlink. O href atributo especifica a URL da página para a qual o link vai:</p><p>Cabeçalhos HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>68</p><p>428</p><p>Cabeçalhos HTML são títulos ou subtítulos que você deseja exibir em uma página da web. Os</p><p>cabeçalhos HTML são definidos com as tags até . Relembrando, define o cabeçalho</p><p>mais importante. define o título menos importante.</p><p>Parágrafos HTML</p><p>Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto. O elemento</p><p>HTML define um parágrafo. Um parágrafo sempre começa em uma nova linha e os</p><p>navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois</p><p>de um parágrafo.</p><p>A tag define uma quebra temática em uma página HTML e geralmente é exibida como uma</p><p>régua horizontal. O elemento é usado para separar o conteúdo (ou definir uma alteração) em</p><p>uma página HTML. A tag é uma tag vazia, o que significa que não tem tag final.</p><p>Estilos HTML</p><p>O atributo HTML style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e</p><p>muito mais. A definição do estilo de um elemento HTML pode ser feita com o atributo style.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>69</p><p>428</p><p>O atributo HTML style tem a seguinte sintaxe4:</p><p>4 property é uma propriedade CSS. value é um valor CSS.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>70</p><p>428</p><p>Propriedade CSS Descrição</p><p>Background-color Define a cor de fundo de um elemento HTML</p><p>Color Define a cor do texto para um elemento HTML</p><p>Font-family Define a fonte a ser usada para um elemento HTML</p><p>Font-size Define o tamanho do texto para um elemento HTML</p><p>Text-align Define o alinhamento horizontal do texto para um elemento HTML</p><p>pa</p><p>rá</p><p>gr</p><p>af</p><p>os</p><p>H</p><p>TM</p><p>L Define um parágrafo</p><p>Define uma mudança temática no conteúdo</p><p>Insere uma única quebra de linha</p><p>Define o texto pré-formatado</p><p>El</p><p>em</p><p>en</p><p>to</p><p>s</p><p>de</p><p>Fo</p><p>rm</p><p>at</p><p>aç</p><p>ão</p><p>H</p><p>TM</p><p>L</p><p>Texto em negrito</p><p>Texto importante</p><p>Texto em itálico</p><p>Texto enfatizado</p><p>Texto marcado</p><p>Texto menor</p><p>Texto deletado</p><p>Texto inserido</p><p>texto subscrito</p><p>Texto sobrescrito</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>71</p><p>428</p><p>Links HTML</p><p>O texto do link é a parte que ficará visível para o leitor. Clicar no texto do link enviará o leitor ao</p><p>endereço de URL especificado. Por padrão, os links aparecerão da seguinte maneira em todos os</p><p>navegadores:</p><p>• Um link não visitado é sublinhado e azul</p><p>• Um link visitado é sublinhado e roxo</p><p>• Um link ativo é sublinhado e vermelho</p><p>O atributo target especifica onde abrir o documento vinculado.</p><p>• _self- Predefinição. Abre o documento na mesma janela/guia em que foi clicado</p><p>• _blank- Abre o documento em uma nova janela ou guia</p><p>• _parent- Abre o documento no quadro pai</p><p>• _top- Abre o documento em todo o corpo da janela</p><p>Imagens HTML</p><p>As imagens podem melhorar o design e a aparência de uma página da web. As imagens não são</p><p>tecnicamente inseridas em uma página da web; mas sim vinculadas a páginas da web. A tag</p><p>cria um espaço de retenção para a imagem referenciada. A tag é vazia e possui dois</p><p>atributos obrigatórios:</p><p>• src - Especifica o caminho para a imagem;</p><p>• alt - Especifica um texto alternativo para a imagem.</p><p>Vejamos os tipos de arquivo de imagem mais comuns, suportados em todos os navegadores</p><p>(Chrome, Edge, Firefox, Safari, Opera):</p><p>Ci</p><p>ta</p><p>çã</p><p>o</p><p>em</p><p>H</p><p>TM</p><p>L</p><p>Define uma abreviação ou acrônimo</p><p>Define as informações de contato do autor/proprietário de um documento</p><p>Define a direção do texto</p><p>Define uma seção que é citada de outra fonte</p><p>Define o título de uma obra</p><p>Define uma citação curta em linha</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>72</p><p>428</p><p>Abreviação Formato do arquivo Extensão</p><p>APNG Animated Portable Network Graphics .apng</p><p>GIF Graphics Interchange Format .gif</p><p>ICO Microsoft Icon .ico, .cur</p><p>JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp</p><p>PNG Portable Network Graphics .png</p><p>SVG Scalable Vector Graphics .svg</p><p>Tag Descrição</p><p>Define uma imagem;</p><p>Define um mapa de imagem;</p><p>Define uma área clicável dentro de um mapa de imagem;</p><p>Define um contêiner para vários recursos de imagem.</p><p>Tabelas HTML</p><p>iM</p><p>AG</p><p>EN</p><p>S</p><p>HT</p><p>M</p><p>L</p><p>define uma imagem</p><p>src define a URL da imagem</p><p>alt define um texto alternativo para uma imagem, se ela não puder ser exibida</p><p>width e height definem o tamanho da imagem</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>73</p><p>428</p><p>Listas HTML</p><p>Tag Descrição</p><p>Define uma lista não ordenada</p><p>Define uma lista ordenada</p><p>Definir um item de lista</p><p>Define uma lista de descrição</p><p>Define um termo em uma lista de descrição</p><p>Descreve o termo em uma lista de descrição</p><p>Listas Não Ordenadas</p><p>Valor Descrição</p><p>disc Define o marcador de item da lista para um marcador (padrão).</p><p>circle Define o marcador de item da lista para um círculo.</p><p>square Define o marcador de item da lista para um quadrado.</p><p>none Os itens da lista não serão marcados.</p><p>ta</p><p>be</p><p>la</p><p>s</p><p>HT</p><p>M</p><p>L</p><p>Define uma tabela</p><p>Define uma célula de cabeçalho em uma tabela</p><p>Define uma linha em uma tabela</p><p>Define uma célula em uma tabela</p><p>Define uma legenda</p><p>de tabela</p><p>Especifica um grupo de uma ou mais colunas em uma tabela para formatação</p><p>Especifica as propriedades da coluna para cada coluna dentro de um elemento</p><p>Agrupa o conteúdo do cabeçalho em uma tabela</p><p>Agrupa o conteúdo do corpo em uma tabela</p><p>Agrupa o conteúdo do rodapé em uma tabela</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>74</p><p>428</p><p>Listas Ordenadas</p><p>Type Descrição</p><p>type="1" Os itens da lista serão numerados com números (padrão)</p><p>type="A" Os itens da lista serão numerados com letras maiúsculas</p><p>type="a" Os itens da lista serão numerados com letras minúsculas</p><p>type="I" Os itens da lista serão numerados com números romanos maiúsculos</p><p>type="i" Os itens da lista serão numerados com números romanos minúsculos</p><p>Li</p><p>st</p><p>as</p><p>n</p><p>ão</p><p>o</p><p>rd</p><p>en</p><p>ad</p><p>as</p><p>Use o elemento HTML para definir uma lista não ordenada</p><p>Use a propriedade CSS list-style-type para definir o marcador de item da lista</p><p>Use o elemento HTML para definir um item da lista</p><p>As listas podem ser aninhadas</p><p>Os itens da lista podem conter outros elementos HTML</p><p>Use a propriedade CSS float:left para exibir uma lista horizontalmente</p><p>Li</p><p>st</p><p>as</p><p>O</p><p>rd</p><p>en</p><p>ad</p><p>as</p><p>Use o elemento HTML para definir uma lista ordenada</p><p>Use o atributo HTML type para definir o tipo de numeração</p><p>Use o elemento HTML para definir um item de lista</p><p>As listas podem ser aninhadas</p><p>Os itens da lista podem conter outros elementos HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>75</p><p>428</p><p>elementos de nível de bloco</p><p>elementos inline HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>76</p><p>428</p><p>Para relembrar, fica esse grande lembrete:</p><p>Formulários HTML</p><p>Um formulário HTML é usado para coletar a entrada do usuário. A entrada do usuário geralmente</p><p>é enviada a um servidor para processamento. O elemento HTML é usado para criar um</p><p>Bl</p><p>oc</p><p>o</p><p>HT</p><p>M</p><p>L e</p><p>e</p><p>le</p><p>m</p><p>en</p><p>to</p><p>s</p><p>em</p><p>bu</p><p>ti</p><p>do</p><p>s</p><p>Existem dois valores de exibição: bloco e embutido</p><p>Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível</p><p>Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária</p><p>é um nível de bloco e geralmente é usado como um contêiner para outros elementos HTML</p><p>é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um</p><p>documento</p><p>Define uma seção em um documento (nível de bloco)</p><p>Define uma seção em um documento (em linha)</p><p>At</p><p>ri</p><p>bu</p><p>to</p><p>d</p><p>e</p><p>cl</p><p>as</p><p>se</p><p>H</p><p>TM</p><p>L</p><p>O atributo HTML class especifica um ou mais nomes de classe para um elemento</p><p>Classes são usadas por CSS e JavaScript para selecionar e acessar elementos</p><p>específicos</p><p>O atributo class pode ser usado em qualquer elemento HTML</p><p>O nome da classe diferencia maiúsculas de minúsculas</p><p>Diferentes elementos HTML podem apontar para o mesmo nome de classe</p><p>JavaScript pode acessar elementos com um nome de classe específico com o método</p><p>getElementsByClassName()</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>77</p><p>428</p><p>formulário HTML para entrada do usuário. Ele é um contêiner para diferentes tipos de elementos</p><p>de entrada, como: campos de texto, caixas de seleção, botões de opção, botões de envio, etc.</p><p>O elemento HTML é o elemento de formulário mais usado. Ele pode ser exibido de várias</p><p>maneiras, dependendo do atributo type.</p><p>Type Descrição</p><p>Exibe um campo de entrada de texto de linha única</p><p>Exibe um botão de opção (para selecionar uma das muitas opções)</p><p>Exibe uma caixa de seleção (para selecionar zero ou mais opções)</p><p>Exibe um botão de envio (para enviar o formulário)</p><p>Exibe um botão clicável</p><p>O atributo do método especifica o método HTTP a ser usado ao enviar os dados do formulário. Os</p><p>dados do formulário podem ser enviados como variáveis de URL (com method="get") ou como pós-</p><p>transação HTTP (com method="post"). O método HTTP padrão ao enviar dados de formulário é</p><p>GET.</p><p>Método Descrição</p><p>Get</p><p>Anexa os dados do formulário ao URL, em pares de nome/valor;</p><p>NUNCA use GET para enviar dados confidenciais! (os dados do formulário enviado</p><p>são visíveis na URL!);</p><p>O comprimento de um URL é limitado (2048 caracteres);</p><p>Útil para envios de formulários em que um usuário deseja marcar o resultado como</p><p>favorito;</p><p>GET é bom para dados não seguros, como strings de consulta no Google.</p><p>Post</p><p>- Anexa os dados do formulário dentro do corpo da solicitação HTTP (os dados do</p><p>formulário enviado não são mostrados na URL);</p><p>- O POST não tem limitações de tamanho e pode ser usado para enviar grandes</p><p>quantidades de dados;</p><p>- Os envios de formulário com POST não podem ser marcados.</p><p>Vejamos um compilado dos atributos dos formulários HTML.</p><p>Atributo de</p><p>Formulários</p><p>Descrição</p><p>accept-charset Especifica as codificações de caracteres usadas para envio de formulário</p><p>action Especifica para onde enviar os dados do formulário quando um formulário é enviado</p><p>autocomplete Especifica se um formulário deve ter o preenchimento automático ativado ou</p><p>desativado</p><p>enctype Especifica como os dados do formulário devem ser codificados ao enviá-los ao</p><p>servidor (somente para method="post")</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>78</p><p>428</p><p>method Especifica o método HTTP a ser usado ao enviar dados de formulário</p><p>name Especifica o nome do formulário</p><p>novalidate Especifica que o formulário não deve ser validado quando enviado</p><p>rel Especifica a relação entre um recurso vinculado e o documento atual</p><p>target Especifica onde exibir a resposta recebida após o envio do formulário</p><p>Os elementos HTML</p><p>Vimos os atributos agora vamos ver os elementos dos formulários HTML! O elemento pode</p><p>conter um ou mais dos seguintes elementos de formulário:</p><p>Elementos de</p><p>Formulários</p><p>Descrição</p><p>Define um formulário HTML para entrada do usuário</p><p>Define um controle de entrada</p><p>Define um controle de entrada multilinha (área de texto)</p><p>Define um rótulo para um elemento</p><p>Agrupa elementos relacionados em um formulário</p><p>Define uma legenda para um elemento</p><p>Define uma lista suspensa</p><p>Define um grupo de opções relacionadas em uma lista suspensa</p><p>Define uma opção em uma lista suspensa</p><p>Define um botão clicável</p><p>Especifica uma lista de opções predefinidas para controles de entrada</p><p>Define o resultado de um cálculo</p><p>Vejamos agora os diferentes tipos de entrada que você pode usar em HTML</p><p>Tipos de entrada de</p><p>Formulários</p><p>Descrição</p><p>Define um botão</p><p>Define uma caixa de seleção. As caixas de seleção permitem que um usuário</p><p>selecione ZERO ou MAIS opções de um número</p><p>limitado de opções.</p><p>É usado para campos de entrada que devem conter uma cor. Dependendo do</p><p>suporte do navegador, um seletor de cores pode aparecer no campo de</p><p>entrada.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>79</p><p>428</p><p>É usado para campos de entrada que devem conter uma data. Dependendo do</p><p>suporte do navegador, um seletor de data pode aparecer no campo de</p><p>entrada.</p><p>Especifica um campo de entrada de data e hora, sem fuso horário.</p><p>Dependendo do suporte do navegador, um seletor de data pode aparecer no</p><p>campo de entrada.</p><p>É usado para campos de entrada que devem conter um endereço de e-mail.</p><p>Dependendo do suporte do navegador, o endereço de e-mail pode ser</p><p>validado automaticamente quando enviado.</p><p>Define um campo de seleção de arquivo e um botão "Procurar" para uploads</p><p>de arquivos.</p><p>Define um campo de entrada oculto (não visível para um usuário). Um campo</p><p>oculto permite que os desenvolvedores da web incluam dados que não podem</p><p>ser vistos ou modificados pelos usuários quando um formulário é enviado. Um</p><p>campo oculto geralmente armazena o registro do banco de dados que precisa</p><p>ser atualizado quando o formulário é enviado.</p><p>Define uma imagem como um botão de envio. O caminho para a imagem é</p><p>especificado no srcatributo.</p><p>Permite ao usuário selecionar um mês e um ano. Dependendo do suporte do</p><p>navegador, um seletor de data pode aparecer no campo de entrada.</p><p>Define um campo de entrada numérica. Você também pode definir restrições</p><p>sobre quais números são aceitos.</p><p>Define um campo de senha</p><p>Define um botão de opção. Os botões de opção permitem que um usuário</p><p>selecione apenas uma dentre um número limitado de opções.</p><p>Define um controle para inserir um número cujo valor exato não é importante</p><p>(como um controle deslizante). O intervalo padrão é de 0 a 100. No entanto,</p><p>você pode definir restrições sobre quais números são aceitos com os atributos</p><p>min, maxe :step</p><p>Define um botão de redefinição que redefinirá todos os valores do formulário</p><p>para seus valores padrão</p><p>É usado para campos de pesquisa (um campo de pesquisa se comporta como</p><p>um campo de texto normal).</p><p>Define um botão para enviar dados de formulário para um manipulador de</p><p>formulário</p><p>É usado para campos de entrada que devem conter um número de telefone.</p><p>Define um campo de entrada de texto de linha única</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>80</p><p>428</p><p>Permite ao usuário selecionar um horário (sem fuso horário). Dependendo do</p><p>suporte do navegador, um seletor de tempo pode aparecer no campo de</p><p>entrada.</p><p>É usado para campos de entrada que devem conter um endereço URL.</p><p>Dependendo do suporte do navegador, o campo url pode ser validado</p><p>automaticamente quando enviado.</p><p>Permite ao usuário selecionar uma semana e um ano. Dependendo do suporte</p><p>do navegador, um seletor de data pode aparecer no campo de entrada.</p><p>Referência completa do HTML</p><p>Vejamos a Referência completa do HTML, incluindo todas as tags.</p><p>Tag Descrição</p><p>Define um comentário</p><p>Define o tipo de documento</p><p>Define um hiperlink</p><p>Define uma abreviação ou um acrônimo</p><p>Não suportado em HTML5. Em vez disso, use Define as informações de contato do autor/proprietário de um documento</p><p>Não suportado em HTML5. Use Define uma área dentro de um mapa de imagem</p><p>Define um artigo</p><p>Define o conteúdo além do conteúdo da página</p><p>Define o conteúdo de som incorporado</p><p>Define o texto em negrito</p><p>Especifica a URL/alvo base para todas as URLs relativas em um documento</p><p>Não suportado em HTML5. Em vez disso, use CSS. Especifica uma cor, tamanho e</p><p>fonte padrão para todo o texto em um documento</p><p>Isola uma parte do texto que pode estar formatada em uma direção diferente de</p><p>outro texto fora dele</p><p>Substitui a direção do texto atual</p><p>Não suportado em HTML5. Em vez disso, use CSS. Define texto grande</p><p>Define uma seção que é citada de outra fonte</p><p>Define o corpo do documento</p><p>Define uma única quebra de linha</p><p>Define um botão clicável</p><p>Usado para desenhar gráficos, em tempo real, via script (geralmente JavaScript)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>81</p><p>428</p><p>Define uma legenda de tabela</p><p>Não suportado em HTML5. Em vez disso, use CSS. Define o texto centrado</p><p>Define o título de uma obra</p><p>Define um pedaço de código de computador</p><p>Especifica as propriedades da coluna para cada coluna dentro de um elemento</p><p>Especifica um grupo de uma ou mais colunas em uma tabela para formatação</p><p>Adiciona uma tradução legível por máquina de um determinado conteúdo</p><p>Especifica uma lista de opções predefinidas para controles de entrada</p><p>Define uma descrição/valor de um termo em uma lista de descrição</p><p>Define o texto que foi excluído de um documento</p><p>Define detalhes adicionais que o usuário pode visualizar ou ocultar</p><p>Especifica um termo que será definido dentro do conteúdo</p><p>Define uma caixa de diálogo ou janela</p><p>Não suportado em HTML5. Em vez disso, use Define uma seção em um documento</p><p>Define uma lista de descrição</p><p>Define um termo/nome em uma lista de descrição</p><p>Define o texto enfatizado</p><p>Define um contêiner para um aplicativo externo</p><p>Agrupa elementos relacionados em um formulário</p><p>Define uma legenda para um elemento</p><p>Especifica o conteúdo independente</p><p>Não suportado em HTML5. Em vez disso, use CSS. Define a fonte, a cor e o tamanho</p><p>do texto</p><p>Define um rodapé para um documento ou seção</p><p>Define um formulário HTML para entrada do usuário</p><p>Não suportado em HTML5. Define uma janela (um quadro) em um conjunto de</p><p>quadros</p><p>Não suportado em HTML5. Define um conjunto de quadros</p><p>a Contém metadados/informações para o documento</p><p>Define um cabeçalho para um documento ou seção</p><p>Define uma mudança temática no conteúdo</p><p>Define a raiz de um documento HTML</p><p>Define uma parte do texto em uma voz ou humor alternativo</p><p>Define um quadro embutido. Uma página dentro de outra página</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>82</p><p>428</p><p>Define uma imagem</p><p>Define um controle de entrada</p><p>Define um texto que foi inserido em um documento</p><p>Define a entrada do teclado</p><p>Define um rótulo para um elemento</p><p>Define uma legenda para um elemento</p><p>Define um item de lista</p><p>Define o relacionamento entre um documento e um recurso externo (mais usado</p><p>para vincular a folhas de estilo)</p><p>Especifica o conteúdo principal de um documento</p><p>Define um mapa de imagem</p><p>Define o texto marcado/destacado</p><p>Define metadados sobre um documento HTML</p><p>Define uma medição escalar dentro de um intervalo conhecido (um medidor)</p><p>Define links de navegação</p><p>Não suportado em HTML5. Define um conteúdo alternativo para usuários que não</p><p>suportam frames</p><p>Define um conteúdo alternativo para usuários que não suportam scripts do lado do</p><p>cliente</p><p>Define um contêiner para um aplicativo externo</p><p>Define uma lista ordenada</p><p>Define um grupo de opções relacionadas em uma lista suspensa</p><p>Define uma opção em uma lista suspensa</p><p>Define o resultado de um cálculo</p><p>Define um parágrafo</p><p>Define um parâmetro para um objeto</p><p>Define um contêiner para vários recursos de imagem</p><p>Define o texto pré-formatado</p><p>Representa o progresso de uma tarefa</p><p>Define uma citação curta</p><p>Define o que mostrar em navegadores que não suportam anotações ruby</p><p>Define uma explicação/pronúncia de caracteres (para tipografia do Leste Asiático)</p><p>Define uma anotação rubi (para tipografia do Leste Asiático)</p><p>Define o texto que não está mais correto</p><p>Define a saída de amostra de um programa de computador</p><p>Define um script do lado do cliente</p><p>Define uma seção em um documento</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>83</p><p>428</p><p>Define uma lista suspensa</p><p>Define um texto menor</p><p>Define vários recursos de mídia para elementos de mídia ()</p><p>Define uma seção em um documento</p><p>Não suportado em HTML5. Use Define informações de estilo para um documento</p><p>Define o texto subscrito</p><p>Define um cabeçalho visível para um elemento</p><p>Define o texto sobrescrito</p><p>Define um contêiner para gráficos SVG</p><p>Define uma tabela</p><p>Agrupa o conteúdo do corpo em uma tabela</p><p>Define uma célula em uma tabela</p><p>Define um contêiner para o conteúdo que deve ser ocultado quando a página é</p><p>carregada</p><p>Define um controle de entrada multilinha (área de texto)</p><p>Agrupa o conteúdo do rodapé em uma tabela</p><p>Define uma célula de cabeçalho em uma tabela</p><p>Agrupa o conteúdo do cabeçalho em uma tabela</p><p>Define uma hora específica (ou datetime)</p><p>Define um título para o documento</p><p>Define uma linha em uma tabela</p><p>Define trilhas de texto para elementos de mídia ()</p><p>Não suportado em HTML5. Em vez disso, use CSS. Define o texto do teletipo</p><p>Define algum texto que não é articulado e tem um estilo diferente do texto normal</p><p>Define uma lista não ordenada</p><p>Define uma variável</p><p>Define o conteúdo de vídeo incorporado</p><p>Define uma possível quebra de linha</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>84</p><p>428</p><p>Mais cobrados em provas</p><p>Um iframe (abreviação de "frame inline") é um elemento HTML usado para incorporar uma página</p><p>da Web em outra página da Web. Ele fornece uma maneira de exibir o conteúdo de outra página</p><p>da Web na página da Web atual e é comumente usado para incorporar vídeos, mapas e outros</p><p>conteúdos interativos.</p><p>Para criar um iframe, você pode usar o elemento e especificar o local da página a ser</p><p>incorporada usando o atributo src. Você também pode usar os atributos de largura e altura para</p><p>especificar o tamanho do iframe na página da web.</p><p>O elemento possui vários atributos que podem ser usados para personalizar seu</p><p>comportamento, como rolagem, frameborder e allowfullscreen. Você também pode usar</p><p>JavaScript para controlar o elemento iframe programaticamente, usando os métodos e</p><p>propriedades do elemento iframe.</p><p>Lembre-se de que os iframes podem ser um risco de segurança se você incorporar conteúdo de</p><p>fontes não confiáveis, pois o conteúdo incorporado tem acesso à página da Web principal e pode</p><p>executar códigos maliciosos. É importante ser cauteloso ao usar iframes e incorporar apenas</p><p>conteúdo de fontes confiáveis.</p><p>Símbolos HTML</p><p>Tag Número Entidade Descrição</p><p>© &#169 &copy Sinal de direitos autorais</p><p>® &#174 &reg Assinatura registrada</p><p>€ &#8364 &euro Sinal do euro</p><p>™ &#8482 &trade Marca comercial</p><p>← &#8592 &larr Seta para a esquerda</p><p>↑ &#8593 &uarr Seta para cima</p><p>→ &#8594 &rarr Seta para a direita</p><p>↓ &#8595 &darr Seta para baixo</p><p>♠ &#9824 &spades Espadas preto</p><p>♣ &#9827 &clubs Club preto</p><p>♥ &#9829 &hearts Coração negro</p><p>♦ &#9830 &diams Diamante negro</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>85</p><p>428</p><p>getElementById</p><p>Em HTML, a função getElementById é um método do objeto de documento que pode ser usado</p><p>para recuperar um elemento do documento por seu identificador exclusivo (ID). A função</p><p>getElementById retorna uma referência ao elemento com o ID especificado ou null se tal elemento</p><p>não existir.</p><p>Vejamos um exemplo de como a função getElementById pode ser usada:</p><p>Este é um elemento div.</p><p>var myDiv = document.getElementById('myDiv');</p><p>console.log(myDiv.innerHTML); // Outputs: " Este é um elemento div."</p><p>Neste exemplo, a função getElementById é usada para recuperar o elemento com um ID de</p><p>"myDiv". A propriedade innerHTML do elemento é registrada no console.</p><p>A função getElementById é uma maneira útil de acessar elementos no DOM (Document Object</p><p>Model) e manipular suas propriedades e estilos. Geralmente é usado em conjunto com outros</p><p>métodos e propriedades DOM, como innerHTML e estilo, para criar páginas da Web dinâmicas e</p><p>interativas.</p><p>A tag define metadados sobre um documento HTML. Metadados são dados (informações)</p><p>sobre dados. As tags sempre ficam dentro do elemento e normalmente são usadas</p><p>para especificar o conjunto de caracteres, a descrição da página, as palavras-chave, o autor do</p><p>documento e as configurações da viewport. Vejamos os atributos, os valores e suas respectivas</p><p>descrições.</p><p>Atributo Valor Descrição</p><p>charset character_set</p><p>Especifica a codificação de caracteres para o</p><p>documento HTML</p><p>content text</p><p>Especifica o valor associado ao atributo http-equiv ou</p><p>name</p><p>http-equiv</p><p>content-security-policy</p><p>content-type</p><p>default-style</p><p>refresh</p><p>Fornece um cabeçalho HTTP para as informações/valor</p><p>do atributo de conteúdo</p><p>name application-name Especifica um nome para os metadados</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>86</p><p>428</p><p>author</p><p>description</p><p>generator</p><p>keywords</p><p>viewport</p><p>Os metadados são usados por navegadores (como exibir conteúdo ou recarregar a página),</p><p>mecanismos de pesquisa (palavras-chave) e outros serviços da web. Vejamos alguns exemplos:</p><p>Define palavras-chave para motores de busca:</p><p>Define uma descrição da sua página da web:</p><p>Define o autor de uma página:</p><p>Atualize o documento a cada 30 segundos:</p><p>Configurando a janela de visualização para que seu site tenha uma boa aparência em todos os</p><p>dispositivos:</p><p>A viewport é a área visível do usuário de uma página da web. Varia de acordo com o dispositivo -</p><p>será menor em um telefone celular do que na tela do computador. Você deve incluir o seguinte</p><p>elemento em todas as suas páginas</p><p>da web:</p><p>Manifesto de cache</p><p>Para tratar um site offline com HTML5, você pode usar o recurso de armazenamento de cache do</p><p>HTML5, que permite que você armazene arquivos em cache no navegador do usuário. Isso significa</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>87</p><p>428</p><p>que, quando o usuário visita o site pela primeira vez, os arquivos são armazenados em cache e, em</p><p>visitas posteriores, o site é carregado a partir do cache, em vez de ser baixado da internet.</p><p>Para habilitar o armazenamento de cache, você precisa criar um arquivo chamado "manifesto de</p><p>cache" e vinculá-lo ao seu HTML usando a tag . O manifesto de cache é um arquivo de texto</p><p>simples que contém uma lista de arquivos que devem ser armazenados em cache. Aqui está um</p><p>exemplo de um manifesto de cache:</p><p>CACHE MANIFEST</p><p># versão 1.0</p><p>index.html</p><p>css/styles.css</p><p>js/scripts.js</p><p>images/logo.png</p><p>Em seguida, você precisa adicionar a tag ao seu arquivo HTML e definir o atributo manifest</p><p>como o caminho para o seu arquivo de manifesto de cache:</p><p>Isso permitirá que o navegador armazene em cache os arquivos especificados no manifesto de</p><p>cache. Quando o usuário visita o site pela primeira vez, os arquivos serão baixados e armazenados</p><p>em cache. Em visitas posteriores, o site será carregado a partir do cache, permitindo que ele</p><p>funcione offline.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>88</p><p>428</p><p>REFERÊNCIAS</p><p>https://www.w3schools.com/html/</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>89</p><p>428</p><p>QUESTÕES COMENTADAS</p><p>Questões Cespe</p><p>1. (CESPE – TCE RJ– 2022). Quanto ao desenvolvimento de sistemas web, julgue o item</p><p>seguinte.</p><p>HTML5 é uma linguagem de programação que permite estruturar páginas web e</p><p>executar comandos como loops de repetição, por exemplo.</p><p>Comentários:</p><p>HTML é a linguagem de marcação padrão para criar páginas da Web, ela descreve a</p><p>estrutura de uma página da Web, porém, não executa comandos como loops de</p><p>repetição.</p><p>Gabarito: Errado</p><p>2. (CESPE –DP DF– 2022) Julgue o item seguinte, a respeito da formatação de dados.</p><p>A tag define o conjunto de caracteres usados na página,</p><p>nesse caso, o UTF-8, que é o padrão para HTML5.</p><p>Comentários:</p><p>O atributo charset especifica a codificação de caracteres para o documento HTML. A</p><p>especificação HTML5 incentiva os desenvolvedores da Web a usar o conjunto de</p><p>caracteres UTF-8, que abrange quase todos os caracteres e símbolos do mundo!</p><p>Gabarito: Correto</p><p>3. (CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionado a desenvolvimento</p><p>de sistemas.</p><p>No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados,</p><p>tendo como característica o armazenamento de dados restritos à aba em</p><p>funcionamento.</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>90</p><p>428</p><p>É possível usar dois objetos para armazenar dados no cliente: window.localStorage e</p><p>sessionStorage. O localStorage - armazena dados sem data de validade; os dados não serão</p><p>excluídos quando o navegador for fechado e estarão disponíveis no próximo dia, semana ou ano.</p><p>Por outro lado, o window.sessionStorage - armazena dados para uma sessão. Os dados são</p><p>excluídos quando o usuário fecha a guia específica do navegador. A questão erra ao afirmar que</p><p>sessionStorage pode ser utilizado para armazenamento local de dados quando na verdade é o</p><p>window.localStorage que o faz.</p><p>Gabarito: Errado</p><p>4. (CESPE – APEX – 2021) Em HTML5, considerando-se o contexto de geolocalização e</p><p>acesso ao dispositivo, para se obter retorno mais rápido e de baixa precisão sobre a</p><p>localização de um dispositivo, deve-se</p><p>a) invocar um método para o objeto PositionOptions da API com o parâmetro “0”.</p><p>b) configurar a função watchPosition() da API de geolocalização.</p><p>c) testar a existência do objeto navigator.geolocation no dispositivo.</p><p>d) chamar o método getCurrentPosition() da API de geolocalização.</p><p>Comentários:</p><p>Pessoal, uma das APIs que vimos em aula foi a API de geolocalização HTML. Nela vimos</p><p>o método getCurrentPosition() que é usado para retornar a posição do usuário. Portanto</p><p>nosso gabarito é a letra D, para se obter retorno mais rápido e de baixa precisão sobre a</p><p>localização de um dispositivo, deve-se chamar o método getCurrentPosition() da API de</p><p>geolocalização.</p><p>Gabarito: Letra D</p><p>5. (CESPE – PGDF – 2021) Acerca de linguagens de marcação utilizadas para formatação</p><p>de dados, julgue o item a seguir.</p><p>HTML e XML são equivalentes, pois ambas possuem uma semântica de apresentação</p><p>predefinida.</p><p>Comentários:</p><p>HTML e XML são equivalentes aqui já encerramos o raciocínio! HTML é a linguagem de</p><p>marcação padrão para páginas da Web. Já, XML significa eXtensible Markup Language e</p><p>foi projetado para armazenar e transportar dados.</p><p>Gabarito: Errado</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>91</p><p>428</p><p>6. (CESPE – SEFAZ CE – 2021) Com relação à arquitetura de desenvolvimento de</p><p>software, julgue o item a seguir.</p><p>Um link de navegação compartilhado por diversas páginas é incluído no elemento</p><p>de uma página HTML5.</p><p>Comentários:</p><p>Pessoal, errada questão. na verdade, o Elemento HTML de Navegação representa</p><p>uma seção de uma página que aponta para outras páginas ou para outras áreas da página,</p><p>ou seja, uma seção com links de navegação. Portanto, o correto seria: Um link de</p><p>navegação compartilhado por diversas páginas é incluído no elemento .</p><p>Gabarito: Errado</p><p>7. (CESPE – PGDF – 2021) Julgue o item a seguir, referente a linguagens de scripts.</p><p>Considere o código seguinte, em HTML e JavaScript.</p><p>.</p><p>Em um navegador Internet com JavaScript habilitado, esse código apresentará o</p><p>resultado a seguir</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>92</p><p>428</p><p>Pessoal, perfeita questão. O script realiza a concatenação dos valores id a e b e insere em</p><p>c.</p><p>Gabarito: Correto</p><p>8. (CESPE – TJ PA – 2020) A respeito do tratamento off-line de um sítio no HTML 5,</p><p>assinale a opção correta.</p><p>a) Esse tratamento pode ser usado para a criação de dados em momento anterior ao</p><p>acesso à aplicação.</p><p>b) Na sessão cache do arquivo manifesto, devem estar relacionados todos os arquivos</p><p>que o navegador deve copiar para que estejam disponíveis para uso off-line.</p><p>c) É necessário que os arquivos PHP estejam listados na sessão cache.</p><p>d) Na sessão network do arquivo manifesto, devem estar relacionados os arquivos que</p><p>precisam ser substituídos por outros no retorno da conexão.</p><p>e) Na sessão fallback do arquivo manifesto, devem estar relacionados os arquivos que</p><p>não são utilizados para o processamento off-line.</p><p>Comentários:</p><p>Para tratar um site offline com HTML5, você pode usar o recurso de armazenamento de</p><p>cache do HTML5, que permite que você armazene arquivos em cache no navegador do</p><p>usuário. Isso significa que, quando o usuário visita o site pela primeira vez, os arquivos</p><p>são armazenados em cache e, em visitas posteriores, o site é carregado a partir do cache,</p><p>em vez de ser baixado</p><p>da internet. Para habilitar o armazenamento de cache, você precisa</p><p>criar um arquivo chamado "manifesto de cache" e vinculá-lo ao seu HTML usando a tag</p><p>. O manifesto de cache é um arquivo de texto simples que contém uma lista de</p><p>arquivos que devem ser armazenados em cache.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>93</p><p>428</p><p>Gabarito: Letra B</p><p>9. (CESPE – MPE CE – 2020) Acerca de JSON e HTML 5, julgue o item subsecutivo.</p><p>No HTML 5, localStorage é um recurso de armazenamento local que usa objetos</p><p>JavaScript e que permite manter dados sem data de expiração prévia.</p><p>Comentários:</p><p>HTML5 localStorage é um recurso de armazenamento na web que permite que um site</p><p>armazene dados no navegador da web de um usuário. É semelhante a um cookie, mas é</p><p>armazenado em uma área separada do computador do usuário e tem uma capacidade de</p><p>armazenamento muito maior (até 5 MB). localStorage é útil para armazenar dados que</p><p>precisam ser acessados no lado do cliente, como preferências do usuário ou dados de</p><p>formulário. Os dados armazenados no localStorage são persistentes, ou seja, não são</p><p>excluídos quando o usuário fecha o navegador ou desliga o computador. Para usar</p><p>localStorage, você pode definir e recuperar valores usando JavaScript.</p><p>Gabarito: Correto</p><p>10. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir:</p><p>No HTML 5, os novos campos para formulários, como email, search e range, e os</p><p>atributos, como placeholder, pattern e required, reduzem a necessidade de utilização</p><p>de plugins para auxiliar a formatação dos elementos.</p><p>Comentários:</p><p>Pessoal, o HTML5 modifica a forma de como escrevemos código e organizamos a</p><p>informação na página. Seria mais semântica com menos código; mais interatividade sem</p><p>a necessidade de instalação de plugins e perda de performance. É a criação de código</p><p>interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação</p><p>de diversas formas. Assim, de fato a questão está correta porque os novos campos para</p><p>formulários, como email, search e range, assim como os atributos, como placeholder,</p><p>pattern e required, reduzem a necessidade de utilização de plugins para auxiliar a</p><p>formatação dos elementos.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>94</p><p>428</p><p>Gabarito: Correto</p><p>11. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir:</p><p>No HTML 5, as tags de link e script usadas para referenciar arquivos de CSS e</p><p>JavaScript não precisam informar o atributo type, porque, na sua ausência, o</p><p>navegador assume que o arquivo é do tipo text/css ou text/javascript.</p><p>Comentários:</p><p>De fato, no HTML 5, nas tags link e script, utilizadas para referenciar arquivos CSS e</p><p>JavaScript, respectivamente, não é mais necessário informar o atributo type=”text/css”</p><p>ou text=”text/javascript”, como era feito na HTML 4.1. Para exemplificar, no HTML 4.1</p><p>era assim:</p><p>Já, no HTML 5 é assim:</p><p>Gabarito: Correto</p><p>12. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir.</p><p>A instrução DOCTYPE do HTML 5 é mais simples que a das versões anteriores HTML</p><p>4 ou XHTML 1.</p><p>Comentários:</p><p>Pessoal, como vimos, é bem mais simples! Vamos relembrar como é a instrução DOCTYPE</p><p>do HTML 5:</p><p>Gabarito: Correto</p><p>13. (CESPE – TJ PA – 2020)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>95</p><p>428</p><p>O código html precedente, ao ser executado em um navegador de Internet, produzirá</p><p>o seguinte resultado</p><p>a) Caca52null</p><p>b) nomeIdadecarro</p><p>c) [object Object][object Object][object Object]</p><p>d) Caca+52+null</p><p>e) nome+Idade+carro.</p><p>Comentários:</p><p>Ao carregar a página, o script percorrerá o objeto meuObjeto e adicionará o nome de</p><p>cada propriedade ao elemento HTML com o ID "prova". No final, o conteúdo do</p><p>elemento de prova será "nomeIdadecarro". Se você quiser incluir o valor das</p><p>propriedades também, deverá alterar a linha:</p><p>document.getElementById("prova").innerHTML += x; para:</p><p>document.getElementById("prova").innerHTML += x + ": " + meuObjeto[x] + "";</p><p>Isso incluirá o nome da propriedade e o valor dela na saída. Por exemplo: nome: Caca.</p><p>Idade: 52. carro: null. Vejamos o resultado da execução do código.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>96</p><p>428</p><p>Gabarito: Letra B</p><p>14. (CESPE – TJ PA – 2020) Na linguagem HTML 5, geralmente considera-se</p><p>determinado elemento como o ponto central do conteúdo do documento, o qual</p><p>pode ser, por exemplo, um post.</p><p>Esse elemento, que representa um conteúdo independente e altamente relevante, é</p><p>o</p><p>a) aside.</p><p>b) canvas.</p><p>c) embed.</p><p>d) article.</p><p>e) figure.</p><p>Comentários:</p><p>Alguns dos novos recursos do HTML5 incluem: Elementos semânticos: o HTML5</p><p>apresenta novos elementos com significados específicos, como , e</p><p>. Esses elementos tornam mais fácil para os desenvolvedores estruturar seu</p><p>conteúdo de maneira lógica e significativa. aside: Trata-se de conteúdo relacionado à</p><p>seção próxima. Análogo às barras laterais em conteúdo impresso. O elemento HTML</p><p>é usado para desenhar gráficos em uma página da web. A tag define</p><p>um contêiner para um recurso externo, como uma página da Web, uma imagem, um</p><p>reprodutor de mídia ou um aplicativo de plug-in. A tag define um conteúdo</p><p>independente de outras partes do sítio e altamente relevante. É autocontido. Exemplo:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>97</p><p>428</p><p>comentário enviado por usuário, post de um blog, artigo de uma revista. A tag</p><p>especifica o conteúdo independente, como ilustrações, diagramas, fotos, listagens de</p><p>código, etc. Portanto, nosso gabarito é a tag</p><p>Gabarito: Letra D</p><p>15. (CESPE –SLU DF – 2019) Com relação a desenvolvimento de software, julgue o item</p><p>a seguir.</p><p>De acordo com o trecho de código a seguir, escrito em HTML5, novos valores de date</p><p>e time são válidos como atributos de elementos de formulário, e apenas o campo data</p><p>é de preenchimento obrigatório.</p><p>.</p><p>Comentários:</p><p>Pessoal, perfeita questão! O atributo data possui um "required" que o torna obrigatório.</p><p>O código cria um formulário HTML simples com dois campos de entrada: um para data e</p><p>outro para hora. O atributo type é usado para especificar o tipo de entrada de dados que</p><p>o campo deve aceitar. No caso do campo de data, o tipo é date, o que significa que o</p><p>usuário só poderá inserir uma data válida nesse campo. O campo de hora tem o tipo time,</p><p>o que significa que o usuário só poderá inserir uma hora válida nesse campo. O atributo</p><p>required é usado para indicar que o campo de data é obrigatório e o usuário deve inserir</p><p>um valor antes de enviar o formulário. O atributo name é usado para dar um nome ao</p><p>campo de entrada, que pode ser usado posteriormente para acessar o valor inserido pelo</p><p>usuário. O botão de envio é criado usando o elemento . Quando</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600</p><p>- Naldira Luiza Vieria</p><p>98</p><p>428</p><p>o usuário clica no botão, o formulário é enviado para o arquivo teste.html, que é</p><p>especificado no atributo action do elemento .</p><p>Gabarito: Correto</p><p>16. (CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo</p><p>uso difundido nas páginas publicadas na Internet. Assinale a opção que corresponde</p><p>à tag utilizada no caso em que seja necessário utilizar uma lista não ordenada.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Como já vimos, uma lista não ordenada começa com a tag e cada item da lista</p><p>começa com a tag . Os itens da lista serão marcados com marcadores (pequenos</p><p>círculos pretos) por padrão. a) é um elemento HTML obsoleto que define o texto em</p><p>negrito. Recomenda-se usar a propriedade CSS "font-weight" para estilizar o texto como</p><p>negrito. b) é um elemento HTML que define um parágrafo de texto. c) é um</p><p>elemento HTML que define uma linha em uma tabela HTML. d) é um elemento HTML</p><p>que define uma lista não ordenada (uma lista com marcadores). e) é um elemento</p><p>HTML que define uma célula como um cabeçalho de tabela em uma tabela HTML.</p><p>Normalmente é usado para exibir o cabeçalho de um grupo de células da tabela.</p><p>Gabarito: Letra D</p><p>17. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>O HTML 5 define como os navegadores web devem lidar com marcações antigas como</p><p>, e outras tags de apresentação.</p><p>Comentários:</p><p>Pessoal, apesar dessas tags serem obsoletas, o HTML5 ainda reconhece o funcionamento</p><p>dessas tags. E o HTML 5 define como os navegadores web devem lidar com elas.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>99</p><p>428</p><p>Gabarito: Correto</p><p>18. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>O HTML 5 especifica novas API (application program interface) para o modelo de</p><p>objeto de documento (DOM — document object model) referente a arrastar e soltar</p><p>eventos enviados pelo servidor, como desenhos, vídeos e similares.</p><p>Comentários:</p><p>Pessoal, o Document Object Model (DOM) é uma interface de programação para</p><p>documentos HTML e XML. Ele representa a estrutura de um documento como uma árvore</p><p>de objetos, com cada objeto representando um elemento do documento. No HTML5, o</p><p>DOM é usado para manipular o conteúdo e a estrutura de um documento HTML. Por</p><p>exemplo, você pode usar o DOM para adicionar, excluir ou modificar elementos em um</p><p>documento HTML ou para alterar os atributos de um elemento. Assim, é possível arrastar</p><p>e soltar eventos enviados pelo servidor, como desenhos, vídeos e similares.</p><p>Gabarito: Correto</p><p>19. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>A XHTML 5 é uma serialização XML que tem as mesmas características e sintaxes do</p><p>HTML 5.</p><p>Comentários:</p><p>Na verdade, XHTML (Extensible HyperText Markup Language) é uma linguagem de</p><p>marcação que é uma variante do HTML (HyperText Markup Language). É uma versão mais</p><p>rígida e limpa do HTML, com uma sintaxe mais rígida e com foco na conformidade com</p><p>os padrões. XHTML foi projetado para ser uma ponte entre HTML e XML, e é</p><p>frequentemente usado em combinação com outras tecnologias, como CSS (Cascading</p><p>Style Sheets) e JavaScript, para criar páginas da Web dinâmicas e interativas. É suportado</p><p>por todos os navegadores da web modernos e é comumente usado no desenvolvimento</p><p>web. Existem várias diferenças entre HTML e XHTML como sintaxe, extensibilidade,</p><p>compatibilidade, tipo de documento. Portanto, não tem as mesmas características e</p><p>sintaxes do HTML 5.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>100</p><p>428</p><p>Gabarito: Errado</p><p>20. (CESPE – MPE PI – 2018) Julgue o próximo item, relativo a lógica de programação</p><p>e linguagens de programação.</p><p>A execução do código JavaScript anteriormente apresentado retornará o seguinte</p><p>resultado:</p><p>Comentários:</p><p>Pessoal, está perfeita a questão! Apresentará o título que consiste no codigo</p><p>JavaScript além do valor que está em colors no seguinte tercho: var colors =</p><p>["Blue", "Red", "White"];</p><p>document.getElementById("demo").innerHTML = colors;</p><p>Gabarito: Correto</p><p>21. (CESPE – TJ STJ – 2018) Julgue o item seguinte, a respeito de Maven,</p><p>desenvolvimento web, servidor web, servidor de aplicação e criptografia.</p><p>No HTML5, o atributo autofocos possibilita que qualquer elemento seja</p><p>automaticamente focado quando do carregamento da página.</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>101</p><p>428</p><p>O atributo autofocus é um atributo HTML5 que pode ser usado para especificar que um</p><p>elemento de formulário deve ser focado automaticamente quando a página é carregada.</p><p>Isso é útil para garantir que a atenção do usuário seja imediatamente atraída para um</p><p>determinado campo de formulário, como uma caixa de pesquisa ou um formulário de</p><p>login. O erro da questão está na grafia da palavra, o que é no mínimo uma maldade do</p><p>examinador,</p><p>Gabarito: Errado</p><p>22. (CESPE – STM – 2018) Julgue o item subsequente, a respeito de programação web.</p><p>Em HTML5, a tag fornece uma indicação ao usuário do que pode ser inserido</p><p>no campo.</p><p>Comentários:</p><p>O elemento é um elemento HTML5 que representa o resultado de um cálculo</p><p>ou ação do usuário. Ele pode ser usado para exibir o resultado de um cálculo de</p><p>formulário ou para exibir conteúdo dinâmico atualizado com base na entrada do usuário.</p><p>A questão refere-se a tag . O elemento é um elemento HTML usado para</p><p>criar controles de formulário para entrada do usuário. Ele pode ser usado para criar uma</p><p>variedade de controles de formulário, incluindo campos de texto, caixas de seleção,</p><p>botões de opção e muito mais.</p><p>Gabarito: Errado</p><p>23. (CESPE – TRE BA – 2017) Entre os novos elementos do HTML5, o elemento:</p><p>a) é o ponto de parada do cursor em qualquer parte da página HTML.</p><p>b) define o progresso de uma tarefa.</p><p>c) interpreta medições meteorológicas.</p><p>d) captura figuras.</p><p>e) define a estrutura principal da linguagem C dentro da página HTML</p><p>Comentários:</p><p>a) Define o texto marcado/destacado; b) Representa o progresso de</p><p>uma tarefa; c) Define uma medição escalar dentro de um intervalo conhecido</p><p>(um medidor); d) Define uma legenda para um elemento ; e)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>102</p><p>428</p><p>Especifica o conteúdo principal de um documento. Portanto, nosso gabarito é a</p><p>letra B.</p><p>Gabarito: Letra B</p><p>24. (CESPE – TCE-PA – 2016) Acerca dos conceitos e das técnicas necessários à</p><p>construção de sítios web em que se utilizam CSS e HTML, julgue o item que se segue.</p><p>HTML é uma linguagem de programação utilizada na construção de páginas na Web.</p><p>Comentários:</p><p>HTML significa Hyper Text Markup Language, é uma linguagem de marcação padrão para</p><p>criar páginas da Web. Ele é usado para criar páginas da Web e dar estrutura e significado</p><p>ao conteúdo da Web. O erro está em dizer: HTML é uma linguagem de programação,</p><p>quando na verdade é uma linguagem de marcação.</p><p>Gabarito: Errado</p><p>25. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente</p><p>a</p><p>desenvolvimento de sistemas web.</p><p>Após a incorporação do jQuery ao HTML5, o desenvolvimento de funcionalidades por</p><p>meio dessa biblioteca JavaScript ficou limitado a aplicações para dispositivos móveis.</p><p>Comentários:</p><p>jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos que facilita a</p><p>manipulação do DOM (Document Object Model), manipula eventos e anima elementos</p><p>em uma página da web. Foi criado em 2006 e ainda hoje é amplamente utilizado. As</p><p>principais funcionalidades do jQuery são: Resolução da incompatibilidade entre os</p><p>navegadores; Redução de código; Reutilização do código através de plugins; Utilização</p><p>de uma vasta quantidade de plugins criados por outros desenvolvedores; Trabalha com</p><p>AJAX e DOM; Implementação segura de recursos do CSS1, CSS2 e CSS3. O HTML5 é a</p><p>versão mais recente do HTML e apresenta vários novos elementos e recursos que facilitam</p><p>a criação de conteúdo da Web interativo e atraente. Embora o jQuery não esteja</p><p>especificamente relacionado ao HTML5, ele pode ser usado em conjunto com o HTML5</p><p>para criar aplicativos da Web interativos. Por exemplo, você pode usar jQuery para</p><p>selecionar e manipular elementos HTML5, como os novos elementos semânticos</p><p>introduzidos no HTML5 (por exemplo, , e ). A questão limita</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>103</p><p>428</p><p>a funcionalidade do jQuery além de citar a incorporação do jQuery ao HTML5, o que está</p><p>errado.</p><p>Gabarito: Errado</p><p>26. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a</p><p>desenvolvimento de sistemas web.</p><p>O elemento do HTML5 especifica uma forma padrão para inserir um vídeo</p><p>em uma página da Web.</p><p>Comentários:</p><p>Na verdade, o elemento HTML é usado para desenhar gráficos em uma página</p><p>da web.</p><p>Gabarito: Errado</p><p>27. (CESPE – FUNPRESP-EXE – 2016) Acerca da tecnologia Java, julgue o próximo</p><p>item.</p><p>Em HTML5, o atributo title da tag pode ser usado para se adicionar um texto</p><p>fixo a ser sempre apresentado imediatamente acima de uma imagem.</p><p>Comentários:</p><p>A tag é vazia, ou seja, contém apenas atributos e não possui uma tag de</p><p>fechamento. Além disso, ela possui dois atributos obrigatórios: src - Especifica o caminho</p><p>para a imagem e alt - Especifica um texto alternativo para a imagem. Portanto, o tributo</p><p>que pode ser usado para adicionar um texto fixo é o alt.</p><p>Gabarito: Errado</p><p>28. (CESPE – FUNPRESP-JUD – 2016) A respeito das tecnologias relacionadas ao</p><p>desenvolvimento web em Java, julgue o item a seguir.</p><p>No HTML 5, a tag é usada para informar o que deve ser exibido nos browsers</p><p>que não suportam anotações ruby.</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>104</p><p>428</p><p>Na referência do HTML 5 temos que define o que mostrar em navegadores que não</p><p>suportam anotações ruby.</p><p>Gabarito: Correto</p><p>29. (CESPE – TRT 8 – 2016) Assinale a opção que apresenta a tag incluída na</p><p>especificação do HTML5 que permite a reprodução de arquivos que contenham som</p><p>ou música.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>Comentários:</p><p>O elemento é um elemento HTML5 que permite incorporar arquivos de áudio</p><p>em uma página da web. Ele fornece uma maneira padrão de reproduzir arquivos de áudio</p><p>nativamente no navegador, sem a necessidade de plug-ins de terceiros, como o Flash.</p><p>Gabarito: Letra E</p><p>30. (CESPE – TRE PI – 2016) A respeito de páginas web desenvolvidas utilizando-se</p><p>HTML 5, assinale a opção correta.</p><p>a) Para a visualização de vídeos incluídos na página web, é necessária a presença de</p><p>plug-ins adequados aos formatos de mídia utilizados.</p><p>b) A indefinição dos parâmetros altura e largura dos vídeos pode gerar problemas de</p><p>renderização.</p><p>c) Para se adicionar vídeos, o uso do atributo preload exige a presença do atributo</p><p>controls.</p><p>d) O elemento permite a inclusão de outra página web na página que esteja</p><p>sendo construída.</p><p>e) O elemento é usado exclusivamente no início de uma página para</p><p>determinar o seu cabeçalho.</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>105</p><p>428</p><p>Nosso gabarito é a letra D. O elemento é um elemento HTML usado para</p><p>incorporar um documento dentro de outro documento. Ele fornece uma maneira de exibir</p><p>o conteúdo de outra página da Web na página da Web atual e é comumente usado para</p><p>incorporar vídeos, mapas e outros conteúdos interativos. Ademais, vejamos os erros das</p><p>demais alternativas. A alternativa A erra ao dizer que é necessária a presença de plug-ins</p><p>adequados aos formatos de mídia utilizados. na verdade, é possível usar a tag ,</p><p>por exemplo, que define vários recursos de mídia para elementos de mídia (). A</p><p>letra B também está incorreta, porque a indefinição dos parâmetros altura e largura dos</p><p>vídeos não causará problemas porque os atributos de altura e largura são opcionais e, se</p><p>você não os especificar, o elemento ajustará automaticamente seu tamanho para</p><p>caber no tamanho do arquivo de vídeo. A letra C também está errada. ambos os atributos</p><p>preload e controls são opcionais e você pode usá-los para personalizar o comportamento</p><p>do elemento de mídia de acordo com suas necessidades, além disso, preload não exige</p><p>a presença do atributo controls. Por fim, o elemento normalmente é usado no</p><p>topo da página da web, mas também pode ser usado para representar o cabeçalho de</p><p>uma seção de uma página da web. Neste caso, deve ser usado dentro de um elemento</p><p>. Portanto a questão erra ao dizer que ele é usado exclusivamente no início de</p><p>uma página.</p><p>Gabarito: Letra D</p><p>31. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>O elemento label funciona como um indicador de caminho a seguir. Muitos browsers</p><p>renderizam o conteúdo daquela tag como uma área clicável a fim de levar o foco para</p><p>o campo relacionado.</p><p>Comentários:</p><p>O elemento é um elemento HTML usado para rotular um controle de formulário.</p><p>Ele fornece uma maneira de associar um rótulo de texto a um controle de formulário,</p><p>tornando mais fácil para os usuários entenderem a finalidade do controle. O elemento</p><p>tem vários benefícios como ajudar a melhorar a acessibilidade de seus</p><p>formulários, pois o software leitor de tela pode usar o texto do rótulo para descrever a</p><p>finalidade do controle de formulário para usuários com deficiências. Tornar mais fácil para</p><p>os usuários entender a finalidade do controle de formulário, especialmente quando o</p><p>controle de formulário tem uma finalidade não óbvia (por exemplo, uma caixa de seleção</p><p>usada para aceitar um boletim informativo). Ajudar a melhorar a usabilidade de seus</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>106</p><p>428</p><p>formulários, pois os usuários podem clicar no texto do rótulo para focar o controle do</p><p>formulário. O elemento é um elemento importante para a criação de formulários</p><p>amigáveis e acessíveis, e é amplamente utilizado no desenvolvimento web moderno. A</p><p>utilização do é mais comum quando trabalhamos com formulários. Para cada</p><p>campo é inserido um label para associar visualmente com o campo a ser preenchido. Por</p><p>isso, está correta a questão ao dizer que o elemento label funciona como um indicador</p><p>de caminho a seguir.</p><p>Gabarito: Correto</p><p>32. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção</p><p>Erro! Indicador não definido.</p><p>Gabarito ............................................................................................................. Erro! Indicador não definido.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>4</p><p>428</p><p>APRESENTAÇÃO DA AULA</p><p>Olá, galera! Vamos iniciar os estudos sobre o HTML!</p><p>Nesta aula, apresento inúmeras palavras-chave, para que vocês possam entender e internalizar o</p><p>conteúdo de forma mais simples. Aproveitem o material, além dos esquemas, resumos e</p><p>mnemônicos. Vamos ao que importa!</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>5</p><p>428</p><p>HTML</p><p>Conceitos Básicos</p><p>Antes de iniciar a aula, é importante mencionar que vários exemplos dessa aula foram retirados ou</p><p>inspirados em exemplos do W3Tutorials (www.w3schools.com/html). Não fizemos isso porque</p><p>somos preguiçosos, mas por dois motivos: (1) os exemplos são excelentes; (2) essa é uma das</p><p>fontes de inspiração das bancas. Além disso, eu sugiro que vocês tenham sempre aberta uma</p><p>janela com um interpretador online para que vocês possam testar o que veremos. Recomendo</p><p>esse:</p><p>https://www.w3schools.com/html/</p><p>O que é HTML?</p><p>• HTML significa Hyper Text Markup Language.</p><p>• HTML é a linguagem de marcação padrão para criar páginas da Web;</p><p>• HTML descreve a estrutura de uma página da Web;</p><p>• HTML consiste em uma série de elementos;</p><p>• Os elementos HTML informam ao navegador como exibir o conteúdo;</p><p>• Os elementos HTML rotulam partes do conteúdo como "isto é um título", "isto é um</p><p>parágrafo", "isto é um link", etc.</p><p>HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa:</p><p>"Linguagem de Marcação de Hipertexto") é uma linguagem de marcação utilizada na construção</p><p>de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é</p><p>fruto da junção entre os padrões HyTime e SGML1.</p><p>1 HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto</p><p>de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações (em inglês: hyperlink e link). O padrão é</p><p>independente de outros padrões de processamento de texto em geral.</p><p>SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em</p><p>hiper-objetos e para descrever as ligações.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>6</p><p>428</p><p>(TCE RJ– 2022) HTML5 é uma linguagem de programação que permite estruturar páginas web e executar</p><p>comandos como loops de repetição, por exemplo.</p><p>_______________________</p><p>Comentários: HTML é a linguagem de marcação padrão para criar páginas da Web, ela descreve a estrutura de uma página da Web, porém,</p><p>não executa comandos como loops de repetição. (Gabarito: Errado).</p><p>Vejamos um exemplo de um documento HTML Simples além da visualização da Estrutura da Página</p><p>HTML gerada.</p><p>• A declaração define que este documento é um documento HTML5;</p><p>• O elemento é o elemento raiz de uma página HTML;</p><p>• O elemento contém metainformações sobre a página HTML;</p><p>• O elemento especifica um título para a página HTML (que é mostrado na barra de título</p><p>do navegador ou na guia da página);</p><p>• O elemento define o corpo do documento e é um recipiente para todos os conteúdos</p><p>visíveis, como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.</p><p>• O elemento define um título grande;</p><p>• O elemento define um parágrafo.</p><p>(FGV –IBGE – 2016) A declaração permite ao navegador apresentar uma página web</p><p>corretamente. A declaração correta para uma página em HTML5 é:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários: A declaração define que este documento é um documento HTML5.</p><p>(Gabarito: Letra D)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>7</p><p>428</p><p>O objetivo de um navegador da Web (Chrome, Edge, Firefox, Safari) é ler documentos HTML e exibi-</p><p>los corretamente. Um navegador não exibe as tags HTML, mas as utiliza para determinar como</p><p>exibir o documento:</p><p>HTML5 é a versão mais recente do HTML e possui vários novos recursos e elementos que permitem</p><p>aos desenvolvedores da Web criar conteúdo mais interativo e atraente para a Web.</p><p>Alguns dos novos recursos do HTML5 incluem:</p><p>• Elementos semânticos: o HTML5 apresenta novos elementos com significados específicos,</p><p>como , e . Esses elementos tornam mais fácil para os</p><p>desenvolvedores estruturar seu conteúdo de maneira lógica e significativa.</p><p>• Suporte de áudio e vídeo: o HTML5 inclui suporte integrado para reprodução de áudio e vídeo,</p><p>eliminando a necessidade de plug-ins de terceiros, como o Flash.</p><p>• Elemento Canvas: O elemento permite aos desenvolvedores desenhar gráficos e</p><p>animações diretamente no navegador, usando JavaScript.</p><p>• Armazenamento off-line: o HTML5 fornece uma maneira de os aplicativos da Web</p><p>armazenarem dados localmente, para que os usuários ainda possam acessar o aplicativo</p><p>quando estiverem off-line.</p><p>• Controles de formulário aprimorados: o HTML5 apresenta novos controles de formulário e tipos</p><p>de entrada, como data, e-mail e intervalo, o que torna mais fácil para os desenvolvedores criar</p><p>formulários amigáveis.</p><p>O HTML5 foi projetado para ser compatível com as versões anteriores do HTML, portanto, a maioria</p><p>dos sites existentes continuará a funcionar como antes. No entanto, usando os novos recursos do</p><p>HTML5, os desenvolvedores podem criar conteúdo mais interativo e atraente para a web.</p><p>Os elementos semânticos são elementos HTML usados para adicionar significado à página da Web,</p><p>em vez de controlar o layout ou a aparência da página. Eles são usados para descrever o conteúdo</p><p>da página da Web de maneira significativa para humanos e máquinas.</p><p>Vejamos uma lista de alguns elementos semânticos comuns em HTML:</p><p>• : representa o cabeçalho de uma página da web ou seção de uma página da web.</p><p>• : representa uma seção da página da Web que contém links de navegação.</p><p>• : Representa o conteúdo principal da página web.</p><p>• : representa um conteúdo independente, como uma postagem de blog ou artigo de</p><p>notícias.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>8</p><p>428</p><p>• : Representa uma seção da página da web, como um capítulo ou um tema.</p><p>• : Representa o conteúdo que está relacionado ao conteúdo principal da página da web,</p><p>mas que não é essencial para a compreensão do conteúdo principal.</p><p>• : representa o rodapé de uma página da web ou seção de uma página da web.</p><p>Os elementos semânticos são importantes para melhorar a acessibilidade de uma página da Web,</p><p>pois fornecem contexto e significado ao conteúdo da página. Eles também ajudam os mecanismos</p><p>de pesquisa a entender o conteúdo da página da Web e a melhorar sua classificação nos resultados</p><p>da pesquisa.</p><p>É importante observar que os elementos semânticos não devem ser usados para</p><p>de</p><p>formulários eletrônicos.</p><p>É vedada a utilização de FIELDSET para agrupar qualquer variedade de elementos</p><p>input de formulários.</p><p>Comentários:</p><p>O elemento é um elemento HTML usado para agrupar controles de formulário</p><p>relacionados. Ele fornece uma maneira de organizar visual e semanticamente os controles</p><p>de formulário, tornando mais fácil para os usuários entender e usar o formulário. Portanto,</p><p>como a questão está dizendo o oposto, nosso gabarito é: Errado.</p><p>Gabarito: Errado</p><p>33. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>A tag pode ser aplicada a todos os elementos de formulário, até mesmo a</p><p>elementos button.</p><p>Comentários:</p><p>Pessoal, novamente cobrando a tag . O erro da questão está em dizer que a</p><p>tag pode ser aplicada a todos os elementos de formulário, até mesmo a elementos</p><p>button.</p><p>Gabarito: Errado</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>107</p><p>428</p><p>34. (CESPE –TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>É possível agrupar inputs de um formulário e, ainda, as opções de uma tag</p><p>usando-se a tag .</p><p>Comentários:</p><p>Pessoal, é super possível! Inclusive uma das formas é utilizando a tag .</p><p>Personal Information</p><p>Name:</p><p>Email:</p><p>Shipping Information</p><p>Address:</p><p>City:</p><p>Gabarito: Correto</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>108</p><p>428</p><p>==1365fc==</p><p>Questões FCC</p><p>35. (FCC – PGE AM – 2022) No cabeçalho de uma página HTML deseja-se indicar ao</p><p>navegador o conjunto de caracteres recomendado pela linguagem HTML5, que</p><p>abrange a maioria dos caracteres e símbolos utilizados na maior parte dos idiomas,</p><p>inclusive acentos existentes no Português. Para isso deve-se utilizar a instrução</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Pessoal, nosso gabarito é a letra A: . O elemento é um</p><p>elemento HTML usado para fornecer metadados sobre uma página da web. O atributo</p><p>charset é usado para especificar a codificação de caracteres da página da web e é usado</p><p>para garantir que os caracteres na página da web sejam exibidos corretamente no</p><p>navegador. O atributo charset é particularmente importante quando a página da Web</p><p>contém caracteres de vários idiomas ou scripts, pois diferentes codificações de caracteres</p><p>podem ser necessárias para exibir os caracteres corretamente.</p><p>Gabarito: Letra A</p><p>36. (FCC – TRT 23 – 2022) Para criar sites responsivos usando HTML5 é aconselhável</p><p>fornecer ao navegador instruções sobre como controlar as dimensões e a escala da</p><p>página por meio da definição da viewport da página, utilizando o comando</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Um site responsivo é um site projetado para ajustar automaticamente seu layout e</p><p>conteúdo para se adequar ao tamanho do dispositivo e da tela do usuário. Sites</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>109</p><p>428</p><p>responsivos usam uma combinação de grades flexíveis, imagens e consultas de mídia para</p><p>criar uma experiência de usuário perfeita e intuitiva em uma ampla variedade de</p><p>dispositivos, desde computadores desktop até smartphones e tablets.</p><p>Aqui estão alguns dos principais recursos dos sites responsivos: Layouts fluidos: sites</p><p>responsivos usam grades flexíveis que se ajustam ao tamanho da tela, para que o</p><p>conteúdo seja exibido em um layout de fácil leitura, independentemente do dispositivo</p><p>usado. Imagens responsivas: sites responsivos usam imagens que ajustam</p><p>automaticamente seu tamanho para caber na largura da tela, para que as imagens tenham</p><p>uma boa aparência em todos os dispositivos. Consultas de mídia: sites responsivos usam</p><p>consultas de mídia para detectar o tamanho da tela e aplicar estilos diferentes com base</p><p>no tamanho da tela. Isso permite que o site ajuste seu layout e conteúdo com base no</p><p>dispositivo que está sendo usado. Um exemplo de um site responsivo simples:</p><p>/* Use a fluid grid to make the website responsive */</p><p>.container {</p><p>display: grid;</p><p>grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));</p><p>grid-gap: 20px;</p><p>}</p><p>/* Use media queries to adjust the layout based on the screen size */</p><p>@media (max-width: 600px) {</p><p>.container {</p><p>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));</p><p>}</p><p>}</p><p>Content goes here. Assim, nosso gabarito é a letra B.</p><p>Gabarito: Letra B</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>110</p><p>428</p><p>37. (FCC – TRT22 – 2022) Uma Analista deseja escrever no rodapé da página web</p><p>HTML5 “Copyright ©”, sem aspas, indicando que a página possui direitos autorais.</p><p>Uma das maneiras corretas de fazer isso é por meio da instrução</p><p>a) Copyright &copy;</p><p>b) Copyright &szlig;</p><p>c) Copyright &circledR;</p><p>d) Copyright &copyright;e) Copyright &cpsymbol;Copyright &cpsymbol;</p><p>Comentários:</p><p>O sinal © é criado pela instrução &copy que significa sinal de direitos autorais.</p><p>Gabarito: Letra A</p><p>38. (FCC – TJ SC – 2021) Em uma situação hipotética, um profissional de TI deseja</p><p>inserir um vídeo institucional do Tribunal de Justiça de Santa Catarina que está no</p><p>Youtube, no site do Tribunal.</p><p>Para isso, obteve o código personalizado abaixo no site do Youtube.</p><p>Tal fragmento de código permite concluir que o comando HTML5 que deve ser</p><p>utilizado na lacuna I é</p><p>a) video</p><p>b) movie</p><p>c) media</p><p>d) frame</p><p>e) iframe</p><p>Comentários:</p><p>The element is an HTML element that is used to embed a document within</p><p>another document. It provides a way to display content from another webpage within the</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>111</p><p>428</p><p>current webpage, and is commonly used to embed videos, maps, and other interactive</p><p>content.</p><p>Gabarito: Letra E</p><p>39. (FCC – TJ MA – 2019) Um Analista que está desenvolvendo a página de abertura</p><p>de um site deseja fazer com que as páginas HTML referentes aos links do menu sejam</p><p>direcionadas e exibidas</p><p>em um contêiner criado pela tag section no interior desta</p><p>página. Nesse contêiner, para permitir a abertura das páginas, deve-se utilizar uma</p><p>tag:</p><p>a) aside</p><p>b) main</p><p>c) dialog</p><p>d) iframe</p><p>e) article</p><p>Comentários:</p><p>Vejamos a definição de cada tag. a) aside: O elemento é um elemento HTML</p><p>utilizado para representar o conteúdo relacionado ao conteúdo principal da página da</p><p>Web, mas que não é essencial para o entendimento do conteúdo principal. Geralmente</p><p>é usado para representar barras laterais, citações e outros conteúdos relacionados</p><p>tangencialmente. b) main: O elemento é um elemento HTML usado para</p><p>representar o conteúdo principal de uma página da web. Ele deve ser usado para agrupar</p><p>o conteúdo exclusivo da página da Web e que não é compartilhado com outras páginas</p><p>no mesmo site. c) dialog: O elemento é um elemento HTML usado para</p><p>representar uma caixa de diálogo ou janela. Ele pode ser usado para criar caixas de</p><p>diálogo modais que exigem que o usuário interaja com elas antes de retornar à página</p><p>da Web principal. d) iframe: O elemento é um elemento HTML usado para</p><p>incorporar um documento dentro de outro documento. Ele fornece uma maneira de exibir</p><p>o conteúdo de outra página da Web na página da Web atual e é comumente usado para</p><p>incorporar vídeos, mapas e outros conteúdos interativos. e) article: A tag define</p><p>um conteúdo independente de outras partes do sítio e altamente relevante. É</p><p>autocontido. Exemplo: comentário enviado por usuário, post de um blog, artigo de uma</p><p>revista. Pessoal, a unica tag que permite a abertura de outra página (documento) é a tag</p><p>. Dessa forma, nosso gabarito é a letra D.</p><p>Gabarito: Letra D</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>112</p><p>428</p><p>40. (FCC – AFAP – 2019) Em uma página HTML 5 de abertura de um site, um Analista</p><p>de Informática deseja definir uma área no centro onde outras páginas HTML poderão</p><p>ser carregadas a partir de cliques nos links do menu principal. Ao abrir a página de</p><p>abertura, um arquivo HTML já poderá ser exibido nessa área, cujo conteúdo poderá</p><p>mudar na medida que se clica nos links do menu. Para que seja possível o</p><p>comportamento descrito, essa área deverá ser definida por meio da tag</p><p>a) div.</p><p>b) section.</p><p>c) iframe.</p><p>d) main.</p><p>e) core.</p><p>Comentários:</p><p>Um iframe (abreviação de "frame inline") é um elemento HTML usado para incorporar</p><p>uma página da Web em outra página da Web. Ele fornece uma maneira de exibir o</p><p>conteúdo de outra página da Web na página da Web atual e é comumente usado para</p><p>incorporar vídeos, mapas e outros conteúdos interativos. Portanto é o nosso gabarito.</p><p>Gabarito: Letra C</p><p>41. (FCC – Pref Manaus – 2019) Em um parágrafo de uma página web desenvolvida</p><p>com HTML5, um programador está usando palavras longas e está com medo do</p><p>navegador quebrar as palavras ou linhas em locais incorretos. Para indicar os locais</p><p>desejados para possíveis quebras de linha, quando a largura da janela do navegador</p><p>mudar, o programador deverá usar a tag</p><p>a) .</p><p>b) .</p><p>c) .</p><p>d) .</p><p>e) .</p><p>Comentários:</p><p>Para indicar os locais desejados para possíveis quebras de linha, quando a largura da</p><p>janela do navegador mudar, o programador deverá usar a tag . De acordo com a</p><p>definição, define uma possível quebra de linha.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>113</p><p>428</p><p>Gabarito: Letra D</p><p>42. (FCC – TRF 4 – 2019) HTML5 incluiu um conjunto de tags semânticas para substituir</p><p>algumas construções que eram feitas com HTML4. Por exemplo, as instruções e feitas em HTML4, são feitas na</p><p>HTML5, usando as tags semânticas, através das instruções:</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e</p><p>Comentários:</p><p>Alguns dos novos recursos do HTML5 incluem elementos semânticos: o HTML5 apresenta</p><p>novos elementos com significados específicos, como : representa o cabeçalho</p><p>de uma página da web ou seção de uma página da web. : representa uma seção</p><p>da página da Web que contém links de navegação. Esses elementos tornam mais fácil</p><p>para os desenvolvedores estruturar seu conteúdo de maneira lógica e significativa.</p><p>Gabarito: Letra B</p><p>43. (FCC – TJ MA – 2019) Um Técnico Judiciário que utiliza HTML5 está criando um</p><p>parágrafo em uma página web que tem muitas palavras longas e, para evitar que o</p><p>navegador quebre linha no lugar errado, utilizou uma tag para especificar onde, em</p><p>um parágrafo, será aceitável uma quebra de linha. A tag correta para isso é:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Pessoal, é exatamente o mesmo caso da questão da Pref Manaus de 2019! Deve ser</p><p>utilizada a tag que define uma possível quebra de linha.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>114</p><p>428</p><p>Gabarito: Letra B</p><p>44. (FCC – TRF 3 – 2019) Considere o fragmento abaixo de uma página HTML5 que</p><p>utiliza elementos semânticos.</p><p>Para inserir a legenda "Figura 1 – Foto das dependências do TRF3" na imagem, após</p><p>deve-se colocar a instrução</p><p>a) Figura 1 – Foto das dependências do TRF3</p><p>b) Figura 1 – Foto das dependências do TRF3</p><p>c) Figura 1 – Foto das dependências do TRF3</p><p>d) Figura 1 – Foto das dependências do TRF3</p><p>e) Figura 1 – Foto das dependências do TRF3.</p><p>Comentários:</p><p>Pessoal, o elemento define uma legenda para um elemento .</p><p>Gabarito: Letra E</p><p>45. (FCC –Pref Manaus – 2019) Um programador precisa utilizar uma tag semântica</p><p>incorporada a versão 5 da linguagem HTML, cujo objetivo é definir algum conteúdo</p><p>adicional colocado normalmente à direita, mas relacionado com um conteúdo que o</p><p>circunda colocado normalmente à esquerda. Deverá escolher, nesse caso, a tag:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>O examinador vai dando dicas: definir algum conteúdo adicional; colocado normalmente</p><p>à direita; mas relacionado com um conteúdo que o circunda colocado normalmente à</p><p>esquerda. Quando o examinador diz: " mas relacionado com um conteúdo que o</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>115</p><p>428</p><p>circunda" já se infere a tag que é o nosso gabarito. Para complementar, vejamos</p><p>as demais alternativas. A tag define um conteúdo independente de outras</p><p>partes do sítio e altamente relevante. É autocontido. Exemplo: comentário enviado por</p><p>usuário, post de um blog, artigo de uma revista. O elemento é um elemento</p><p>HTML usado para representar uma seção da página da Web, como um capítulo ou um</p><p>tema. É um elemento semântico, o que significa que é usado para adicionar significado à</p><p>página da Web, em vez de controlar o layout ou a aparência da página.</p><p>define uma legenda para um elemento . Por fim, o elemento é um</p><p>elemento HTML usado para representar um resumo ou legenda para um elemento</p><p>. Normalmente é usado para fornecer uma breve visão geral ou resumo do</p><p>conteúdo dentro do elemento , que pode ser expandido ou reduzido pelo</p><p>usuário.</p><p>Gabarito: Letra C</p><p>46. (FCC – TRF 3 – 2019) Um programador</p><p>está criando o menu principal da página de</p><p>abertura de um site, que conterá o bloco principal de links de navegação.</p><p>Considerando os elementos semânticos da linguagem HTML5, estes links devem ficar</p><p>imediatamente no interior da tag</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Se deseja criar o menu principal, vai utilizar a tag nav. Vejamos a definição: o elemento</p><p>representa uma seção de uma página que contém links de navegação. É usado</p><p>para agrupar links que levam a outras páginas ou a diferentes partes da mesma página.</p><p>Gabarito: Letra D</p><p>47. (FCC – SANASA – 2019) Um Desenvolvedor de software precisa inserir uma</p><p>instrução no cabeçalho de uma página HTML que fará referência a um arquivo</p><p>chamado a001.css a ser aplicado apenas quando a página for aberta em dispositivos</p><p>com tela de até 600 pixels. A instrução correta que deverá ser inserida é</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>116</p><p>428</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) @media only screen and (min-width: 600px) URL(a001.css) .</p><p>Comentários:</p><p>O elemento com o atributo "rel" definido como "stylesheet" informa ao</p><p>navegador que o documento vinculado é uma folha de estilo e fornece os meios para</p><p>aplicar os estilos definidos na folha de estilo a uma página da web. O atributo "media"</p><p>especifica o tipo de mídia para o qual a folha de estilo se destina, como uma tela ou</p><p>impressão. Neste caso, o atributo "media" é definido como "screen and (max-width:</p><p>600px)", o que significa que os estilos na folha de estilo serão aplicados apenas a telas</p><p>com largura máxima de 600 pixels. O atributo "href" especifica a URL da folha de estilo.</p><p>Nesse caso, o valor do atributo "href" é "a001.css", o que indica que a folha de estilo</p><p>está localizada na URL "a001.css". Este elemento seria colocado no cabeçalho de</p><p>um documento HTML para aplicar os estilos da folha de estilo "a001.css" à página da</p><p>Web em telas com largura máxima de 600 pixels.</p><p>Gabarito: Letra C</p><p>48. (FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com</p><p>HTML5 e deseja exibir um texto com fonte Courier de largura fixa, preservando os</p><p>espaços e as quebras de linha.</p><p>O texto deverá ser colocado entre as tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e .</p><p>Comentários:</p><p>Vamos relembrar o que foi falado durante a aula? O elemento HTML define o texto</p><p>pré-formatado. O texto dentro de um elemento é exibido em uma fonte de largura</p><p>fixa (geralmente Courier) e preserva espaços e quebras de linha.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>117</p><p>428</p><p>Gabarito: Letra E</p><p>49. (FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de</p><p>termos em um site utilizando listas de definições do HTML5. Nestas listas, o termo a</p><p>ser descrito e a descrição propriamente dita são criados, respectivamente, pelas tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e</p><p>Comentários:</p><p>O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de</p><p>termos, com uma descrição de cada termo. A tag define a lista de descrição, a tag</p><p>define o termo (nome) e a tag descreve cada termo. define um termo</p><p>em uma lista de descrição. descreve o termo em uma lista de descrição.</p><p>Gabarito: Letra A</p><p>50. (FCC – TST – 2017) Considere, hipoteticamente, que um Programador deseja</p><p>publicar um vídeo institucional no site do Tribunal Superior do Trabalho. Para isso, no</p><p>local da página HTML5 onde deseja colocar o vídeo, utilizou o bloco de código abaixo.</p><p>Considere que [nome_arquivo.extensão] representa o nome de um arquivo de vídeo</p><p>válido. Nas últimas versões dos principais navegadores, os tipos de arquivos de vídeo</p><p>válidos para preencher a lacuna I são</p><p>a) avi, mpeg e mov</p><p>b) mkv, ogg e flv</p><p>c) mp4, webm e ogg</p><p>d) wmv, rmvb e mp4</p><p>e) mp4, avi e mov.</p><p>Comentários:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>118</p><p>428</p><p>O elemento suporta vários formatos de arquivo de vídeo diferentes, incluindo:</p><p>MP4, WebM e Ogg.</p><p>Gabarito: Letra C</p><p>51. (FCC – TRF 5 – 2017) Uma das recomendações que consta nas Web Content</p><p>Accessibility Guidelines − WCAG é fornecer legendas e outras alternativas para</p><p>conteúdo multimídia.</p><p>Nesse contexto, considere o código abaixo, que disponibiliza um vídeo de orientação</p><p>ao cidadão em um site do Governo.</p><p>Para fornecer um arquivo de legenda em português chamado legenda_br.vtt para o vídeo</p><p>utiliza-se, na lacuna I, o comando</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>Em HTML5, o elemento pode ser usado para especificar uma legenda ou arquivo</p><p>de legenda para um elemento . O elemento permite que você</p><p>especifique uma trilha de texto que pode ser exibida sobre o vídeo durante a reprodução.</p><p>Portanto, o nosso gabarito é a letra E.</p><p>Gabarito: Letra E</p><p>52. (FCC –TRT 24 – 2017) Preocupado com a acessibilidade de um site que está sendo</p><p>desenvolvido para o Tribunal Regional do Trabalho da 24ª Região, um Técnico</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>119</p><p>428</p><p>recomendou o uso de recursos da linguagem HTML, versão 5, para identificar o idioma</p><p>principal da página. Para isso deve-se utilizar:</p><p>a) o atributo lang na tag .</p><p>b) o atributo lang na tag .</p><p>c) o atributo language na tag .</p><p>d) a propriedade language na tag .</p><p>e) a tag no interior da tag</p><p>Comentários:</p><p>O atributo lang é um atributo HTML que pode ser usado para especificar o idioma de um</p><p>elemento e seu conteúdo. É um importante recurso de acessibilidade, pois permite que</p><p>tecnologias assistivas, como leitores de tela, interpretem e pronunciem corretamente o</p><p>conteúdo de uma página da web. É usado na tag html: , portanto,</p><p>nosso gabarito é a letra a.</p><p>Gabarito: Letra A</p><p>53. (FCC – ALMS – 2016) A viewport é a área visível do usuário de uma página web e</p><p>pode variar de acordo com o dispositivo. HTML5 introduziu um método para deixar</p><p>os web designers terem controle sobre a viewport através da tag</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>O elemento meta com um atributo viewport é um recurso HTML5 que pode ser usado</p><p>para controlar o layout de uma página da Web em diferentes dispositivos. O atributo</p><p>viewport permite especificar o tamanho e a escala da viewport, ou a área visível de uma</p><p>página da web, em um navegador da web. O elemento meta com um atributo viewport</p><p>é frequentemente usado para tornar as páginas da Web responsivas, o que significa que</p><p>elas podem ajustar seu layout e aparência para caber no tamanho e na resolução do</p><p>dispositivo</p><p>que está sendo usado para visualizá-las.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>120</p><p>428</p><p>Gabarito: Letra B</p><p>54. (FCC – ELETROSUL – 2016) A uma página HTML5 deseja-se vincular um arquivo</p><p>chamado arq1.css e um arquivo chamado arq2.js.</p><p>Para isso devem-se utilizar as instruções</p><p>a) e</p><p>no corpo da página.</p><p>b) e no</p><p>cabeçalho da página.</p><p>c) e</p><p>no cabeçalho da página.</p><p>d) e no</p><p>corpo da página.</p><p>e) e</p><p>no cabeçalho da página.</p><p>Comentários:</p><p>O elemento com o atributo "rel" definido como "stylesheet" informa ao</p><p>navegador que o documento vinculado é uma folha de estilo e fornece os meios para</p><p>aplicar os estilos definidos na folha de estilo a uma página da web. O atributo "type"</p><p>especifica o tipo do documento vinculado, que neste caso é "text/css" para uma folha de</p><p>estilo CSS. O atributo "href" especifica a URL da folha de estilo. Neste caso, o valor do</p><p>atributo "href" é "arq1.css", o que indica que a folha de estilo está localizada na URL</p><p>"arq1.css". O elemento com o atributo "src" especifica a URL de um script a ser</p><p>executado. Neste caso, o valor do atributo "src" é "arq2.js", o que indica que o script</p><p>está localizado na URL "arq2.js". Esses elementos seriam colocados no cabeçalho do</p><p>documento HTML para aplicar os estilos na folha de estilo "arq1.css" e executar o script</p><p>em "arq2.js" na página da web.</p><p>Gabarito: Letra E</p><p>55. (FCC – ALMS – 2016) Considere o fragmento de código HTML5 a seguir.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>121</p><p>428</p><p>Para disponibilizar na página o áudio chamado beethoven.mp3 a lacuna I deve ser</p><p>corretamente preenchida por</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>No HTML5, o elemento é usado para especificar várias fontes de mídia para os</p><p>elementos e . O atributo src do elemento especifica a URL do</p><p>arquivo de mídia a ser usado. A sintaxe é: no caso da questão ficaria</p><p>Gabarito: Letra C</p><p>56. (FCC – SEMF Teresina – 2016) Em uma página HTML há um parágrafo vazio criado</p><p>pela tag . Em um bloco JavaScript da mesma página, para inserir</p><p>neste parágrafo a palavra Teresina, utiliza-se o comando</p><p>a) document.getElementById("local").innerHTML = "Teresina";</p><p>b) document.getElement("p#demo").innerHTML = "Teresina";</p><p>c) document.p["#local"].value = "Teresina";</p><p>d) document.demo.value = "Teresina";</p><p>e) document.getElementByName("local").innerHTML = "Teresina";</p><p>Comentários:</p><p>Em HTML, a função getElementById é um método usado para recuperar um elemento do</p><p>documento por seu identificador exclusivo (ID). A função getElementById retorna uma</p><p>referência ao elemento com o ID especificado ou null se tal elemento não existir. Para</p><p>inserir o elemento id="local", deve usar o método document.getElementById e usar o id</p><p>"local" e inserir com innerHTML = "Teresina".</p><p>Gabarito: Letra A</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>122</p><p>428</p><p>57. (FCC – TRT 23 – 2016) De acordo com as recomendações da W3C para a linguagem</p><p>HTML5, a instrução</p><p>a) está incorreta, pois tem uma barra no final.</p><p>b) está incorreta, pois deveria estar em letra maiúscula.</p><p>c) está correta.</p><p>d) está correta.</p><p>e) está incorreta, pois faltou o atributo</p><p>language=“javascript”</p><p>Comentários:</p><p>Pessoal, vejamos cada item. a) está incorreta, de fato, o correto</p><p>seria: . b) está incorreta , de fato, o correto</p><p>seria: . A letra c) também está incorreta. O elemento em HTML</p><p>é usado para criar uma tabela. O atributo class é usado para especificar um ou mais nomes</p><p>de classe para um elemento, que pode ser usado para aplicar estilos ao elemento usando</p><p>CSS. E possui a sintaxe portanto, faltou inserir as aspas</p><p>duplas. Nosso gabarito é a letra d. está correta. Por fim, a letra e</p><p>está errada. O correto seria</p><p>Gabarito: Letra D</p><p>58. (FCC –TRF3 – 2016) Em um site que utiliza HTML5 Application Cache há um arquivo</p><p>chamado dados.appcache que define que uma página poderá ter o conteúdo</p><p>acessado mesmo estando offline. Nessa página, para apontar para esse arquivo deve-</p><p>se utilizar a instrução</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários:</p><p>No HTML5, o atributo manifest é usado para especificar a localização de um arquivo de</p><p>manifesto do cache do aplicativo. Um manifesto de cache de aplicativo é um arquivo que</p><p>define os recursos que devem ser armazenados em cache pelo navegador da Web para</p><p>que possam ser usados offline.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>123</p><p>428</p><p>A sintaxe usada é a seguinte: , portanto o gabarito</p><p>é a letra A.</p><p>Gabarito: Letra A</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>124</p><p>428</p><p>Questões FGV</p><p>59. (FGV –TJ TO– 2022) No HTML5, o evento que é disparado quando um objeto é</p><p>carregado é:</p><p>a) begin;</p><p>b) load;</p><p>c) ready;</p><p>d) run;</p><p>e) start.</p><p>Comentários:</p><p>No HTML5, o evento load é disparado quando um recurso e seus recursos dependentes</p><p>terminam de carregar. O evento load pode ser usado com elementos como ,</p><p>e para detectar quando os recursos aos quais eles se referem</p><p>terminaram de ser carregados. Portanto nosso gabarito é a letra b. Ademais, vejamos a</p><p>definição das demais alternativas. O atributo begin é usado para especificar um</p><p>deslocamento de tempo para o elemento . O evento ready é acionado quando o</p><p>documento está totalmente carregado e pronto para manipulação. O atributo run é usado</p><p>para especificar se um script deve ou não ser executado assim que estiver disponível, em</p><p>vez de esperar que todo o documento seja carregado. O atributo start é usado para</p><p>especificar o ponto inicial padrão para uma trilha de texto, como subtítulos ou legendas.</p><p>Gabarito: Letra B</p><p>60. (FGV –MPE SC– 2022) Sobre elementos block-level (nível de bloco) e elementos</p><p>inline (em linha) no HTML, analise as afirmativas a seguir.</p><p>I. Um elemento block-level sempre começa numa nova linha.</p><p>II. é um elemento inline.</p><p>III. é um elemento block-level.</p><p>Está correto somente o que se afirma em:</p><p>a) I;</p><p>b) II;</p><p>c) I e II;</p><p>d) I e III;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular</p><p>(Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>125</p><p>428</p><p>e) II e III..</p><p>Comentários:</p><p>Pessoal, elementos de nível de bloco são elementos usados para criar blocos de conteúdo</p><p>formatados independentemente de outros blocos. Os elementos de nível de bloco</p><p>geralmente começam em uma nova linha e ocupam toda a largura de seu elemento pai.</p><p>Portanto, a assertiva está errada.A segunda assertiva está errada, lembre-se que dois</p><p>elementos de bloco comumente usados são: e . Por fim, a assertiva III está</p><p>correta: é um elemento block-level. Assim, ficamos com as assertivas I e III.</p><p>Gabarito: Letra D</p><p>61. (FGV –MPE GO – 2022) Num documento HTML5, assinale o elemento que contém</p><p>meta informações sobre a página.</p><p>a)</p><p>b) (</p><p>c)</p><p>d)</p><p>e) .</p><p>Comentários:</p><p>Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem</p><p>o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave</p><p>que facilitarão a vida do usuário na hora de te encontrar, por exemplo. Por meio delas,</p><p>você pode também "assinar" seu site, declarando sua autoria sobre o código fonte. As</p><p>meta tags devem ser incluídas no seu código HTML, dentro da tag , portanto,</p><p>nosso gabarito é a letra C.</p><p>Gabarito: Letra C</p><p>62. (FGV –TJ TO– 2022) Observe o código HTML e JavaScript a seguir:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>126</p><p>428</p><p>Após a execução do código, o resultado exibido será:</p><p>a) Maria</p><p>b) João</p><p>c) 2022.1</p><p>d) Tejota</p><p>e) tjProcesso</p><p>Comentários:</p><p>Pessoal, vejamos o que ocorre nesse caso. O método getElementByID acessa o elemento</p><p>0 da seguinte forma: tjProcesso.envolvidos[0] = João e o insere na página. Portanto, nosso</p><p>gabarito é a letra B.</p><p>Gabarito: Letra B</p><p>63. (FGV –Sefaz AM – 2022) A linguagem de marcação HTML é amplamente utilizada</p><p>na construção de páginas da Internet.</p><p>O elemento HTML, que permite reproduzir um arquivo de vídeo no formato MP4 em</p><p>uma página da web, é</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>127</p><p>428</p><p>Comentários:</p><p>No HTML5, usamos o elemento para incorporar conteúdo de vídeo em uma</p><p>página da web. Os elementos , , e não são</p><p>elementos HTML. Não fazem parte da especificação HTML e não são reconhecidos pelos</p><p>navegadores da web.</p><p>Gabarito: Letra E</p><p>64. (FGV –IMBEL – 2021) Analise a imagem a seguir, produzida numa página Web.</p><p>que substitui corretamente a linha com pontos.</p><p>a) AC</p><p>F</p><p>GG</p><p>b) AC</p><p>B</p><p>FG</p><p>c) AC</p><p>B</p><p>FG</p><p>d) AC</p><p>BFG</p><p>e) AC</p><p>B</p><p>FG</p><p>.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>128</p><p>428</p><p>Gabarito:</p><p>Comentários:</p><p>A alternativa B cria uma tabela HTML com três linhas e duas colunas. A primeira linha</p><p>contém dois cabeçalhos de tabela (TH) com o texto "A" e "C". A segunda linha contém</p><p>duas células (TD) com o texto "B" e uma tabela interna com uma linha e dois cabeçalhos</p><p>de tabela "F" e "G", sendo este nosso gabarito. Por outro lado, a letra A tem três linhas</p><p>e duas colunas. A primeira linha contém dois cabeçalhos de tabela "A" e "C". A segunda</p><p>linha contém duas células. A primeira célula contém o texto "F" e a segunda célula</p><p>contém uma tabela interna com uma linha e duas células "G" e "G". A letra C apresenta</p><p>erros: este código HTML é inválido. A tabela interna não está fechada corretamente, pois</p><p>não há tag de fechamento. Além disso, a segunda linha da tabela interna não</p><p>está aninhada corretamente na segunda célula da tabela externa. Assim como a letra D e</p><p>a letra E, que possuem códigos inválidos.</p><p>Gabarito: Letra B</p><p>65. (FGV – TJ RO– 2021) No contexto do HTML, a sintaxe correta para um comentário,</p><p>delimitando um trecho que NÃO deve ser exibido pelo browser, é:</p><p>a)</p><p>b) !--Texto do comentário ></p><p>c)</p><p>d)</p><p>e) .</p><p>Comentários:</p><p>Em HTML, a sintaxe é usada para criar um comentário. Os Comentários: são</p><p>usados para adicionar notas e explicações ao código HTML e não são exibidos na página</p><p>da web. O nosso gabarito é a letra D:</p><p>Gabarito: Letra D</p><p>66. (FGV – IMBEL– 2021) Analise o trecho HTML a seguir.</p><p>AC</p><p>BD</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>129</p><p>428</p><p>Na exibição da página Web, esse script produz uma tabela</p><p>a) com duas linhas e duas colunas.</p><p>b) com quatro linhas e uma coluna.</p><p>c) com quatro colunas e uma linha.</p><p>d) com uma linha e uma coluna.</p><p>e) com linhas e colunas desalinhadas.</p><p>Comentários:</p><p>Pessoal, o tercho HTML gera uma linha com as colunas A e C e outra coluna B e D. Vamos</p><p>lembrar das tags tr e th? Cada célula da tabela é definida por uma tag e . Por</p><p>outro lado, cada linha da tabela começa com uma tag e termina com uma .</p><p>Além disso, o elemento é usado para criar uma célula de cabeçalho de tabela. O</p><p>elemento é usado dentro de um elemento (linha da tabela) para definir uma</p><p>célula que contém informações de cabeçalho para uma tabela.</p><p>Gabarito: Letra A</p><p>67. (FGV –MPE AL – 2018) O HTML 5 introduziu diversos elementos semânticos,</p><p>gráficos e de multimídia.</p><p>Assinale o elemento que não é uma novidade nessa versão.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>Comentários:</p><p>O HTML5 apresenta novos elementos com significados específicos, como ,</p><p>e . Além desses, temos o que representa uma seção da</p><p>página da web, como um capítulo ou um tema. Dentre os novos elementos semânticos</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>130</p><p>428</p><p>, e , a única opção que não é uma novidade no</p><p>HTML 5 é o .</p><p>Gabarito: Letra B</p><p>68. (FGV –ALERO – 2018) No contexto dos elementos introduzidos pelo HTML 5,</p><p>analise as afirmativas a seguir.</p><p>I. Os elementos “header”, “section” e “footer” são elementos block-level.</p><p>II. O elemento “” é funcionalmente idêntico ao já conhecido elemento “”.</p><p>III. Além dos atributos height e width, o elemento “” permite o uso do</p><p>atributo depth, para uso em gráficos tridimensionais.</p><p>Está correto o que se afirma em</p><p>a) I, somente.</p><p>b) II, somente.</p><p>c) III, somente.</p><p>d) I e II, somente.</p><p>e) II e III, somente..</p><p>Comentários:</p><p>Pessoal, elementos de nível de bloco são elementos usados para criar blocos de conteúdo</p><p>formatados independentemente de outros blocos. Os elementos de nível de bloco</p><p>geralmente começam em uma nova linha e ocupam toda a largura de seu elemento</p><p>pai.</p><p>O item I está correto! Já o item II está incorreto: a tag define uma possível quebra</p><p>de linha. Algumas das diferenças entre o e são: é usado para agrupar</p><p>palavras longas ou URLs para melhorar a legibilidade, enquanto é usado para criar</p><p>uma quebra de linha em um bloco de texto. é um elemento inline, enquanto</p><p>é um elemento de nível de bloco. Isso significa que pode ser usado dentro de um</p><p>bloco de texto, enquanto cria um novo bloco. nem sempre é respeitado pelo</p><p>navegador, pois depende do layout e do espaço disponível. , por outro lado, sempre</p><p>cria uma quebra de linha. não é suportado em todos os navegadores, enquanto</p><p>é amplamente suportado. O uso do atributo depth no “” não tem por</p><p>finalidade gráficos tridimensionais. A depth no “” refere-se ao número de bits</p><p>usados para representar a cor de cada pixel na tela. A profundidade é normalmente</p><p>expressa como o número de bits por pixel (bpp). Por exemplo, uma tela com</p><p>profundidade de 8 bpp pode representar até 256 cores diferentes, enquanto uma tela</p><p>com profundidade de 24 bpp pode representar até 16 milhões de cores diferentes.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>131</p><p>428</p><p>Gabarito: Letra A</p><p>69. (FGV –ALERO – 2018) Assinale a opção que melhor descreve a utilização da tag</p><p>canvas no HTML5.</p><p>a) Definir mídias de áudio e vídeo.</p><p>b) Desenhar elementos gráficos por meio de scripts.</p><p>c) Dividir a tela em áreas horizontais de largura variável, que funcionam como painéis.</p><p>d) Dividir a tela em áreas verticais de altura variável, que funcionam como painéis.</p><p>e) Desenhar a entrada de dados e as caixas de diálogo..</p><p>Comentários:</p><p>O elemento é um elemento HTML que foi introduzido no HTML5 e é usado</p><p>para desenhar gráficos, animações e jogos usando JavaScript. É uma tela de bitmap</p><p>dependente de resolução que pode ser usada para renderizar gráficos, gráficos de jogos</p><p>ou outras imagens visuais em tempo real.</p><p>Gabarito: Letra B</p><p>70. (FGV –MPE AL – 2018) Observe o código a seguir.</p><p>Supondo que o cursor do mouse inicialmente esteja fora da área de botão, assinale o</p><p>texto exibido no botão quando a página que o contém estiver carregada.</p><p>a) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão, assim mudando a cada</p><p>movimentação para dentro ou para fora.</p><p>b) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>assim permanece.</p><p>c) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão, e assim permanece mesmo que</p><p>o mouse seja movimentado sobre o botão.</p><p>d) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“Abrir” quando o cursor do mouse sai da área do botão, assim mudando a cada</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>132</p><p>428</p><p>movimentação para dentro ou para fora.</p><p>e) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão pela primeira vez. Nas demais</p><p>saídas, mudar para “Abrir”.</p><p>Comentários:</p><p>O código cria um botão HTML que exibe o texto "ON" quando o mouse está sobre ele</p><p>e "OFF" quando o mouse não está sobre ele. Isso pode ser obtido usando os atributos</p><p>onmouseover e onmouseout, que permitem especificar o código JavaScript a ser</p><p>executado quando o mouse entra ou sai do elemento. Portanto, nosso gabarito é a letra</p><p>a: o texto exibido no botão quando a página que o contém estiver carregada vai Abrir”</p><p>inicialmente, “on” quando o cursor do mouse entra na área do botão, e “off” quando o</p><p>cursor do mouse sai da área do botão, assim mudando a cada movimentação para dentro</p><p>ou para fora.</p><p>Gabarito: Letra A</p><p>71. (FGV –ALERO – 2018) Analise o código a seguir.</p><p>Sabe-se que com essa página exibida, o operador clicou no botão por três vezes.</p><p>Assinale o valor exibido no botão após esses cliques.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>133</p><p>428</p><p>a) 0</p><p>b) 1</p><p>c) 1111</p><p>d) 1234</p><p>e) 4.</p><p>Comentários:</p><p>O código consiste em uma página HTML com um botão que incrementa um contador</p><p>quando clicado. A biblioteca jQuery está sendo carregada de uma CDN (Content Delivery</p><p>Network) para habilitar o uso de funções jQuery no script. O script usa a função</p><p>$(document).ready() para agrupar o código que será executado quando a página for</p><p>carregada e a função $("button").click() para vincular uma função ao evento click do botão</p><p>elemento com o ID "xpto".</p><p>Dentro da função de clique, a expressão $(this)[0].innerText é usada para obter o</p><p>conteúdo de texto do elemento de botão, que é analisado como um número inteiro e</p><p>incrementado em 1. Por fim, o valor atualizado é atribuído de volta ao propriedade</p><p>innerText do elemento de botão. Assim, como o operador clicou no botão por três vezes</p><p>o valor exibido no botão após esses cliques é 4.</p><p>Gabarito: Letra E</p><p>72. (FGV – BANESTES– 2018) HTML é uma linguagem utilizada para construção de</p><p>páginas na Internet. O comando de formatação da linguagem HTML para indicar que</p><p>um determinado texto deve ser apresentado sublinhado é:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>Comentários:</p><p>Vejamos o significado de cada tag: A tag representa um trecho de texto que deve</p><p>ser renderizado em negrito. A tag representa um trecho de texto que não é mais</p><p>preciso ou relevante. Geralmente é usado para riscar o texto para indicar que ele foi</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>134</p><p>428</p><p>removido ou substituído. A tag representa um trecho de texto que deve ser</p><p>renderizado em uma fonte em itálico. A tag representa um parágrafo de texto. A tag</p><p>representa um trecho de texto que deve ser renderizado como sublinhado.</p><p>Gabarito: Letra E</p><p>73. (FGV –BANESTES – 2018) Ao desenvolver uma aplicação cliente Web, o</p><p>programador precisa mostrar um aviso quando a página requisitada tem o acesso</p><p>proibido.</p><p>Assim, ele tem que tratar o erro de resposta HTTP:</p><p>a) 200;</p><p>b) 403;</p><p>c) 404;</p><p>d) 500;</p><p>e) 501.</p><p>Comentários:</p><p>Vejamos o significado de cada código de erro: 200: Este é um código de status de</p><p>sucesso, indicando que a solicitação foi bem-sucedida e o recurso solicitado foi retornado.</p><p>403: Este é um código de erro que ocorre quando a página requisitada tem o acesso</p><p>proibido, indicando que o servidor entendeu a solicitação, mas se recusou a autorizá-la.</p><p>Isso pode ocorrer quando o usuário não possui as permissões necessárias para acessar o</p><p>recurso solicitado. 404: Este é um código de erro não encontrado, indicando que o</p><p>servidor não pode encontrar o recurso solicitado. Isso pode ocorrer quando a URL do</p><p>recurso está incorreta ou o recurso foi movido ou excluído. 500: Este é um código de erro</p><p>do servidor, indicando que o servidor encontrou uma condição inesperada que o impediu</p><p>de atender à solicitação. 501: Este é um código de erro não implementado, indicando</p><p>que o servidor não suporta a funcionalidade necessária para atender à solicitação. Isso</p><p>pode ocorrer quando o servidor não reconhece o método de solicitação (por exemplo,</p><p>GET, POST, etc.) ou não suporta o recurso solicitado.</p><p>Gabarito: Letra B</p><p>74. (FGV –IBGE – 2017) HTML5 (Hypertext Markup Language, versão 5) é uma</p><p>linguagem utilizada para estruturação e apresentação de conteúdo na Internet.</p><p>Analise</p><p>a página HTML5 a seguir:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>135</p><p>428</p><p>Considere que você está utilizando um navegador web que suporta HTML5 Local</p><p>Storage e ao acessar essa página pela primeira vez você apertou três vezes o botão</p><p>indicado com id="B" e então você fechou o navegador.</p><p>Posteriormente, você utiliza o mesmo navegador para acessar novamente essa mesma</p><p>página.</p><p>Após apertar duas vezes o mesmo botão, será apresentada a seguinte mensagem no</p><p>corpo da página:</p><p>a) Você apertou 5 vezes.</p><p>b) Você apertou 7 vezes.</p><p>c) Você apertou 10 vezes.</p><p>d) Você apertou 52 vezes.</p><p>e) Você apertou 55 vezes.</p><p>Comentários:</p><p>O código cria uma página HTML com um botão que conta o número de cliques. A</p><p>contagem de cliques é armazenada no armazenamento local e da sessão e exibida na</p><p>página usando a propriedade innerHTML de um elemento div com o ID "resultado". O</p><p>objeto localStorage é usado para armazenar dados que persistem mesmo quando o</p><p>navegador é fechado, enquanto o objeto sessionStorage é usado para armazenar dados</p><p>que estão disponíveis apenas para a sessão atual da página. O botão conta o número de</p><p>cliques e exibe a contagem total na página. Se você acessou a página pela primeira vez</p><p>e clicou no botão três vezes, o valor da variável localStorage.clickcount seria definido</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>136</p><p>428</p><p>como 4, pois começa em 1 e é incrementado em 1 toda vez que o botão é clicado. O</p><p>valor da variável sessionStorage.clickcount também seria definido como 4, pois começa</p><p>em 1 e é incrementado em 1 toda vez que o botão é clicado. sessionStorage -> os dados</p><p>ficam armazenados na sessão do navegador, ou seja, se fechar, perderá esses dados. Por</p><p>outro lado, no local storage o browser, sendo apagado ao desligar ou ao reiniciar.</p><p>Portanto, o elemento document.getElementByID("result".innetHTML = "Você apertou "</p><p>+ A + B + " vez(es)."; apresentará como Saída: Você apertou 52 vez(es).</p><p>Gabarito: Letra D</p><p>75. (FGV –ALERJ – 2017) Analise a estrutura básica da página HTML a seguir:</p><p>Esse código define que a cor do texto da página e dos links quando clicados são,</p><p>respectivamente:</p><p>a) preta e vermelha;</p><p>b) azul e amarela;</p><p>c) vermelha e verde;</p><p>d) azul e verde;</p><p>e) preta e amarela.</p><p>Comentários:</p><p>O elemento é usado para definir o conteúdo principal de um documento HTML.</p><p>O atributo "bgcolor" especifica a cor de fundo da página da web. Nesse caso, o valor do</p><p>atributo "bgcolor" é "black", o que tornaria a cor de fundo da página da Web preta. Os</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>137</p><p>428</p><p>atributos "alink", "vlink" e "link" especificam as cores dos links na página da web. O</p><p>atributo "alink" especifica a cor de um link quando ele é clicado. O atributo "vlink"</p><p>especifica a cor de um link visitado. O atributo "link" especifica a cor de um link não</p><p>visitado. Nesse caso, os valores dos atributos "alink", "vlink" e "link" são "green",</p><p>"yellow" e "red", respectivamente, o que tornaria a cor de um link clicado verde, o a cor</p><p>de um link visitado é amarela e a cor de um link não visitado é vermelha. O atributo</p><p>"texto" especifica a cor do texto na página da web. Nesse caso, o valor do atributo</p><p>"texto" é "azul", o que tornaria a cor do texto azul. Portanto, a cor do texto da página e</p><p>dos links quando clicados são, respectivamente azul e verde.</p><p>Gabarito: Letra D</p><p>76. (FGV –MPE BA – 2017) A HTML é uma linguagem de marcação utilizada na</p><p>construção de páginas na Web.</p><p>O comando de formatação da linguagem para definir um hyperlink indicando que o</p><p>recurso linkado deve ser aberto em uma nova janela do navegador é:</p><p>a) meu link</p><p>b) meu link</p><p>c) meu link</p><p>d) meu link</p><p>e) meu link.</p><p>Comentários:</p><p>O atributo target especifica onde abrir o documento vinculado. Ele pode ter um dos</p><p>seguintes valores:_self- Predefinição. Abre o documento na mesma janela/guia em que</p><p>foi clicado. _blank- Abre o documento em uma nova janela ou guia. _parent- Abre o</p><p>documento no quadro pai. _top- Abre o documento em todo o corpo da janela. Portanto,</p><p>nosso gabarito é a letra c: _blank- Abre o documento em uma nova janela ou guia.</p><p>Gabarito: Letra C</p><p>77. (FGV –IBGE – 2017) O HTML 5 introduziu um método para permitir que o designer</p><p>controle a área de visualização de um site através da tag . A sintaxe correta</p><p>para que a largura de uma página siga a largura da tela de um dispositivo, com uma</p><p>escala inicial de 1X no momento em que ela é carregada é:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>138</p><p>428</p><p>a) ;</p><p>b) ;</p><p>c) ;</p><p>d) ;</p><p>e) .</p><p>Comentários:</p><p>Questão importante! Foi cobrada no concurso FCC – TRT 23 – 2022! A sintaxe correta</p><p>para que a largura de uma página siga a largura da tela de um dispositivo, com uma escala</p><p>inicial de 1X no momento em que ela é carregada é . A tag meta com um atributo name</p><p>"viewport" é usada para controlar o layout de uma página da Web em um dispositivo</p><p>móvel. O atributo de conteúdo é usado para definir a largura da viewport para a largura</p><p>do dispositivo e para definir a escala inicial para 1,0, o que significa que a página da Web</p><p>será exibida em uma escala de 1:1 no dispositivo. É necessário saber a sintaxe correta.</p><p>Gabarito: Letra D</p><p>78. (FGV – IBGE– 2016) A sigla HTML significa Hyper Text Markup Language, o que</p><p>pode ser traduzido como Linguagem de Marcação de Hipertexto. Uma linguagem de</p><p>marcação pode ser definida como um sistema para:</p><p>a) marcar um documento indicando a sua estrutura lógica e hierárquica</p><p>especificamente para a transmissão e exibição eletrônicas;</p><p>b) definir o comportamento visual em meio eletrônico do conteúdo textual de um</p><p>documento, incluindo tipografia, cor e tamanho dos caracteres;</p><p>c) marcar um documento indicando a ordem em que o conteúdo deve ser apresentado</p><p>em meio eletrônico;</p><p>d) definir as ligações entre diferentes documentos a partir de palavras-chave</p><p>específicas;</p><p>e) criar documentos específicos para transmissão eletrônica através da Internet.</p><p>Comentários:</p><p>HTML (Hypertext Markup Language) é uma linguagem de marcação usada para estruturar</p><p>e formatar conteúdo na web. É usado para marcar um documento, indicando sua</p><p>estrutura lógica e hierárquica, para que os navegadores da web possam interpretar e</p><p>exibir o conteúdo corretamente. Portanto, nosso gabarito é: Uma linguagem de marcação</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>139</p><p>428</p><p>pode ser definida como um sistema para marcar um documento indicando a sua estrutura</p><p>lógica e hierárquica especificamente para a transmissão e exibição eletrônicas</p><p>Gabarito: Letra A</p><p>79. (FGV –IBGE – 2016) Um desenvolvedor Web mobile pretende utilizar os novos</p><p>elementos semânticos disponíveis no HTML5 em suas páginas. Associe corretamente</p><p>os elementos HTML5</p><p>enumerados com o posicionamento na ilustração que representa</p><p>conceitualmente as partes de uma página HTML:</p><p>A sequência correta é:</p><p>a) A=1, B=3, C=5, D=6, E=4 e F=2;</p><p>b) A=2, B=5, C=4, D=3, E=6 e F=1;</p><p>c) A=1, B=4, C=6, D=5, E=3 e F=2;</p><p>d) A=2, B=3, C=6, D=4, E=5 e F=3;</p><p>e) A=1, B=6, C=4, D=3, E=5 e F=2.</p><p>Comentários:</p><p>Vamos lá:1) header: Este elemento representa o cabeçalho de uma seção ou página. Ele</p><p>normalmente contém o logotipo, a navegação do site e outras informações importantes</p><p>sobre a página ou o site. Este é o nosso elemento A. 2) footer: Este elemento representa</p><p>o rodapé de uma seção ou página. Ele normalmente contém informações de direitos</p><p>autorais, links para documentos relacionados e outras informações que não fazem parte</p><p>do conteúdo principal da página. Esse é representado pelo elemento F. 3) nav: Este</p><p>elemento representa uma seção da página que contém links de navegação para outras</p><p>páginas ou para outras partes da mesma página. Este é o elemento B. 4) aside: Este</p><p>elemento representa uma seção da página que está relacionada ao conteúdo principal,</p><p>mas separada dele. Geralmente é usado para exibir barras laterais ou citações extraíveis,</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>140</p><p>428</p><p>este é o elemento E. 5) section: Este elemento representa uma seção genérica de um</p><p>documento, como um capítulo, uma seção de um jornal ou uma seção de um site, este é</p><p>o elemento C. 6)article: Este elemento representa um conteúdo independente que pode</p><p>ser distribuído ou reutilizado independentemente, como uma postagem de blog ou um</p><p>artigo de notícias, este é o elemento D.</p><p>A=1, B=3, C=5, D=6, E=4 e F=2</p><p>Gabarito: Letra A</p><p>80. (FGV – IBGE– 2016) Com a introdução do HTML5, diversas novas APIs Javascript</p><p>(Application Programming Interfaces) foram disponibilizadas, aumentando</p><p>consideravelmente a quantidade de recursos disponíveis para a produção de páginas</p><p>web. São APIs exclusivas do HTML5:</p><p>a) múltiplas colunas de texto, transformações 2D/3D e RWD (Responsive Web Design);</p><p>b) armazenamento em nuvem, suporte a telas de toque e SSL (Secure Sockets Layer);</p><p>c) acesso a câmeras em dispositivos móveis, suporte a streaming de vídeo e SSE</p><p>(Streaming SIMD Extensions);</p><p>d) armazenamento local, geolocalização e SSE (Server-Sent Events);</p><p>e) redimensionamento dinâmico de imagens, detecção de resolução de tela e RWD</p><p>(Responsive Web Display)</p><p>Comentários:</p><p>O HTML5 apresenta várias novas APIs (Application Programming Interfaces) que</p><p>permitem aos desenvolvedores da Web criar aplicativos da Web mais poderosos e</p><p>interativos. Algumas APIs exclusivas do HTML5 são: API de geolocalização, API Web</p><p>Storage, API Web Workers, API WebSockets, API Canvas, API de áudio da Web, API</p><p>Server-Sent Events (SSE).</p><p>Gabarito: Letra D</p><p>81. (FGV –IBGE – 2016) A declaração permite ao navegador apresentar</p><p>uma página web corretamente. A declaração correta para uma página em HTML5 é:</p><p>a)</p><p>b)</p><p>c)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>141</p><p>428</p><p>d)</p><p>e)</p><p>Comentários:</p><p>A declaração define que este documento é um documento HTML5.</p><p>Gabarito: Letra D</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>142</p><p>428</p><p>LISTAS QUESTÕES</p><p>Questões Cespe</p><p>1. (CESPE – TCE RJ– 2022). Quanto ao desenvolvimento de sistemas web, julgue o item</p><p>seguinte.</p><p>HTML5 é uma linguagem de programação que permite estruturar páginas web e</p><p>executar comandos como loops de repetição, por exemplo.</p><p>2. (CESPE –DP DF– 2022) Julgue o item seguinte, a respeito da formatação de dados.</p><p>A tag define o conjunto de caracteres usados na página,</p><p>nesse caso, o UTF-8, que é o padrão para HTML5.</p><p>3. (CESPE – PGE RJ – 2022) Julgue o item que se segue, relacionado a desenvolvimento</p><p>de sistemas.</p><p>No HTML 5, sessionStorage pode ser utilizado para armazenamento local de dados,</p><p>tendo como característica o armazenamento de dados restritos à aba em</p><p>funcionamento.</p><p>4. (CESPE – APEX – 2021) Em HTML5, considerando-se o contexto de geolocalização e</p><p>acesso ao dispositivo, para se obter retorno mais rápido e de baixa precisão sobre a</p><p>localização de um dispositivo, deve-se</p><p>a) invocar um método para o objeto PositionOptions da API com o parâmetro “0”.</p><p>b) configurar a função watchPosition() da API de geolocalização.</p><p>c) testar a existência do objeto navigator.geolocation no dispositivo.</p><p>d) chamar o método getCurrentPosition() da API de geolocalização.</p><p>5. (CESPE – PGDF – 2021) Acerca de linguagens de marcação utilizadas para formatação</p><p>de dados, julgue o item a seguir.</p><p>HTML e XML são equivalentes, pois ambas possuem uma semântica de apresentação</p><p>predefinida.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>143</p><p>428</p><p>6. (CESPE – SEFAZ CE – 2021) Com relação à arquitetura de desenvolvimento de</p><p>software, julgue o item a seguir.</p><p>Um link de navegação compartilhado por diversas páginas é incluído no elemento</p><p>de uma página HTML5.</p><p>7. (CESPE – PGDF – 2021) Julgue o item a seguir, referente a linguagens de scripts.</p><p>Considere o código seguinte, em HTML e JavaScript.</p><p>.</p><p>Em um navegador Internet com JavaScript habilitado, esse código apresentará o</p><p>resultado a seguir</p><p>8. (CESPE – TJ PA – 2020) A respeito do tratamento off-line de um sítio no HTML 5,</p><p>assinale a opção correta.</p><p>a) Esse tratamento pode ser usado para a criação de dados em momento anterior ao</p><p>acesso à aplicação.</p><p>b) Na sessão cache do arquivo manifesto, devem estar relacionados todos os arquivos</p><p>que o navegador deve copiar para que estejam disponíveis para uso off-line.</p><p>c) É necessário que os arquivos PHP estejam listados na sessão cache.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>144</p><p>428</p><p>d) Na sessão network do arquivo manifesto, devem estar relacionados os arquivos que</p><p>precisam ser substituídos por outros no retorno da conexão.</p><p>e) Na sessão fallback do arquivo manifesto, devem estar relacionados os arquivos que</p><p>não são utilizados para o processamento off-line.</p><p>9. (CESPE – MPE CE – 2020) Acerca de JSON e HTML 5, julgue o item subsecutivo.</p><p>No HTML 5, localStorage é um recurso de armazenamento local que usa objetos</p><p>JavaScript e que permite manter dados sem data de expiração prévia.</p><p>10. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir:</p><p>No HTML 5, os novos campos para formulários, como email, search e range, e os</p><p>atributos, como placeholder, pattern e required, reduzem a necessidade de utilização</p><p>de plugins para auxiliar a formatação dos elementos.</p><p>11. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir:</p><p>No HTML 5, as tags de link e script usadas para referenciar arquivos de CSS e</p><p>JavaScript não precisam informar o atributo type, porque, na sua ausência, o</p><p>navegador assume que o arquivo é do tipo text/css ou text/javascript.</p><p>12. (CESPE – ProTI ME – 2020) Acerca de desenvolvimento de sistemas web, julgue o</p><p>item a seguir.</p><p>A instrução DOCTYPE do HTML</p><p>5 é mais simples que a das versões anteriores HTML</p><p>4 ou XHTML 1.</p><p>13. (CESPE – TJ PA – 2020)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>145</p><p>428</p><p>O código html precedente, ao ser executado em um navegador de Internet, produzirá</p><p>o seguinte resultado</p><p>a) Caca52null</p><p>b) nomeIdadecarro</p><p>c) [object Object][object Object][object Object]</p><p>d) Caca+52+null</p><p>e) nome+Idade+carro.</p><p>14. (CESPE – TJ PA – 2020) Na linguagem HTML 5, geralmente considera-se</p><p>determinado elemento como o ponto central do conteúdo do documento, o qual</p><p>pode ser, por exemplo, um post.</p><p>Esse elemento, que representa um conteúdo independente e altamente relevante, é</p><p>o</p><p>a) aside.</p><p>b) canvas.</p><p>c) embed.</p><p>d) article.</p><p>e) figure.</p><p>15. (CESPE –SLU DF – 2019) Com relação a desenvolvimento de software, julgue o item</p><p>a seguir.</p><p>De acordo com o trecho de código a seguir, escrito em HTML5, novos valores de date</p><p>e time são válidos como atributos de elementos de formulário, e apenas o campo data</p><p>é de preenchimento obrigatório.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>146</p><p>428</p><p>.</p><p>16. (CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo</p><p>uso difundido nas páginas publicadas na Internet. Assinale a opção que corresponde</p><p>à tag utilizada no caso em que seja necessário utilizar uma lista não ordenada.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>17. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>O HTML 5 define como os navegadores web devem lidar com marcações antigas como</p><p>, e outras tags de apresentação.</p><p>18. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>O HTML 5 especifica novas API (application program interface) para o modelo de</p><p>objeto de documento (DOM — document object model) referente a arrastar e soltar</p><p>eventos enviados pelo servidor, como desenhos, vídeos e similares.</p><p>19. (CESPE – TJ AM – 2019) Acerca do desenvolvimento web mediante o uso do HTML</p><p>5, do JavaScript, do XML e do CSS, julgue o item subsequente.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>147</p><p>428</p><p>A XHTML 5 é uma serialização XML que tem as mesmas características e sintaxes do</p><p>HTML 5.</p><p>20. (CESPE – MPE PI – 2018) Julgue o próximo item, relativo a lógica de programação</p><p>e linguagens de programação.</p><p>A execução do código JavaScript anteriormente apresentado retornará o seguinte</p><p>resultado:</p><p>21. (CESPE – TJ STJ – 2018) Julgue o item seguinte, a respeito de Maven,</p><p>desenvolvimento web, servidor web, servidor de aplicação e criptografia.</p><p>No HTML5, o atributo autofocos possibilita que qualquer elemento seja</p><p>automaticamente focado quando do carregamento da página.</p><p>22. (CESPE – STM – 2018) Julgue o item subsequente, a respeito de programação web.</p><p>Em HTML5, a tag fornece uma indicação ao usuário do que pode ser inserido</p><p>no campo.</p><p>23. (CESPE – TRE BA – 2017) Entre os novos elementos do HTML5, o elemento:</p><p>a) é o ponto de parada do cursor em qualquer parte da página HTML.</p><p>b) define o progresso de uma tarefa.</p><p>c) interpreta medições meteorológicas.</p><p>d) captura figuras.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>148</p><p>428</p><p>e) define a estrutura principal da linguagem C dentro da página HTML</p><p>24. (CESPE – TCE-PA – 2016) Acerca dos conceitos e das técnicas necessários à</p><p>construção de sítios web em que se utilizam CSS e HTML, julgue o item que se segue.</p><p>HTML é uma linguagem de programação utilizada na construção de páginas na Web.</p><p>25. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a</p><p>desenvolvimento de sistemas web.</p><p>Após a incorporação do jQuery ao HTML5, o desenvolvimento de funcionalidades por</p><p>meio dessa biblioteca JavaScript ficou limitado a aplicações para dispositivos móveis.</p><p>26. (CESPE –TCE-PA – 2016) Julgue o item que se segue, relativamente a</p><p>desenvolvimento de sistemas web.</p><p>O elemento do HTML5 especifica uma forma padrão para inserir um vídeo</p><p>em uma página da Web.</p><p>27. (CESPE – FUNPRESP-EXE – 2016) Acerca da tecnologia Java, julgue o próximo</p><p>item.</p><p>Em HTML5, o atributo title da tag pode ser usado para se adicionar um texto</p><p>fixo a ser sempre apresentado imediatamente acima de uma imagem.</p><p>28. (CESPE – FUNPRESP-JUD – 2016) A respeito das tecnologias relacionadas ao</p><p>desenvolvimento web em Java, julgue o item a seguir.</p><p>No HTML 5, a tag é usada para informar o que deve ser exibido nos browsers</p><p>que não suportam anotações ruby.</p><p>29. (CESPE – TRT 8 – 2016) Assinale a opção que apresenta a tag incluída na</p><p>especificação do HTML5 que permite a reprodução de arquivos que contenham som</p><p>ou música.</p><p>a)</p><p>b)</p><p>c)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>149</p><p>428</p><p>d)</p><p>e) .</p><p>30. (CESPE – TRE PI – 2016) A respeito de páginas web desenvolvidas utilizando-se</p><p>HTML 5, assinale a opção correta.</p><p>a) Para a visualização de vídeos incluídos na página web, é necessária a presença de</p><p>plug-ins adequados aos formatos de mídia utilizados.</p><p>b) A indefinição dos parâmetros altura e largura dos vídeos pode gerar problemas de</p><p>renderização.</p><p>c) Para se adicionar vídeos, o uso do atributo preload exige a presença do atributo</p><p>controls.</p><p>d) O elemento permite a inclusão de outra página web na página que esteja</p><p>sendo construída.</p><p>e) O elemento é usado exclusivamente no início de uma página para</p><p>determinar o seu cabeçalho.</p><p>31. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>O elemento label funciona como um indicador de caminho a seguir. Muitos browsers</p><p>renderizam o conteúdo daquela tag como uma área clicável a fim de levar o foco para</p><p>o campo relacionado.</p><p>32. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>É vedada a utilização de FIELDSET para agrupar qualquer variedade de elementos</p><p>input de formulários.</p><p>Comentários:</p><p>O elemento é um elemento HTML usado para agrupar controles de formulário</p><p>relacionados. Ele fornece uma maneira de organizar visual e semanticamente os controles</p><p>de formulário, tornando mais fácil para os usuários entender e usar o formulário. Portanto,</p><p>como a questão está dizendo o oposto, nosso gabarito é: Errado.</p><p>Gabarito: Errado</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>150</p><p>428</p><p>33. (CESPE – TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>A tag pode ser aplicada a todos os elementos de formulário, até mesmo a</p><p>elementos button.</p><p>34. (CESPE –TCE-PA – 2016) Julgue o item seguinte no que se refere à construção de</p><p>formulários eletrônicos.</p><p>É possível agrupar inputs de um formulário e, ainda, as opções de uma tag</p><p>usando-se a tag .</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>151</p><p>428</p><p>Questões FCC</p><p>35. (FCC – PGE AM – 2022)</p><p>No cabeçalho de uma página HTML deseja-se indicar ao</p><p>navegador o conjunto de caracteres recomendado pela linguagem HTML5, que</p><p>abrange a maioria dos caracteres e símbolos utilizados na maior parte dos idiomas,</p><p>inclusive acentos existentes no Português. Para isso deve-se utilizar a instrução</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>36. (FCC – TRT 23 – 2022) Para criar sites responsivos usando HTML5 é aconselhável</p><p>fornecer ao navegador instruções sobre como controlar as dimensões e a escala da</p><p>página por meio da definição da viewport da página, utilizando o comando</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>37. (FCC – TRT22 – 2022) Uma Analista deseja escrever no rodapé da página web</p><p>HTML5 “Copyright ©”, sem aspas, indicando que a página possui direitos autorais.</p><p>Uma das maneiras corretas de fazer isso é por meio da instrução</p><p>a) Copyright &copy;</p><p>b) Copyright &szlig;</p><p>c) Copyright &circledR;</p><p>d) Copyright &copyright;e) Copyright &cpsymbol;Copyright &cpsymbol;</p><p>38. (FCC – TJ SC – 2021) Em uma situação hipotética, um profissional de TI deseja</p><p>inserir um vídeo institucional do Tribunal de Justiça de Santa Catarina que está no</p><p>Youtube, no site do Tribunal.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>152</p><p>428</p><p>Para isso, obteve o código personalizado abaixo no site do Youtube.</p><p>Tal fragmento de código permite concluir que o comando HTML5 que deve ser</p><p>utilizado na lacuna I é</p><p>a) video</p><p>b) movie</p><p>c) media</p><p>d) frame</p><p>e) iframe</p><p>39. (FCC – TJ MA – 2019) Um Analista que está desenvolvendo a página de abertura</p><p>de um site deseja fazer com que as páginas HTML referentes aos links do menu sejam</p><p>direcionadas e exibidas em um contêiner criado pela tag section no interior desta</p><p>página. Nesse contêiner, para permitir a abertura das páginas, deve-se utilizar uma</p><p>tag:</p><p>a) aside</p><p>b) main</p><p>c) dialog</p><p>d) iframe</p><p>e) article</p><p>40. (FCC – AFAP – 2019) Em uma página HTML 5 de abertura de um site, um Analista</p><p>de Informática deseja definir uma área no centro onde outras páginas HTML poderão</p><p>ser carregadas a partir de cliques nos links do menu principal. Ao abrir a página de</p><p>abertura, um arquivo HTML já poderá ser exibido nessa área, cujo conteúdo poderá</p><p>mudar na medida que se clica nos links do menu. Para que seja possível o</p><p>comportamento descrito, essa área deverá ser definida por meio da tag</p><p>a) div.</p><p>b) section.</p><p>c) iframe.</p><p>d) main.</p><p>e) core.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>153</p><p>428</p><p>41. (FCC – Pref Manaus – 2019) Em um parágrafo de uma página web desenvolvida</p><p>com HTML5, um programador está usando palavras longas e está com medo do</p><p>navegador quebrar as palavras ou linhas em locais incorretos. Para indicar os locais</p><p>desejados para possíveis quebras de linha, quando a largura da janela do navegador</p><p>mudar, o programador deverá usar a tag</p><p>a) .</p><p>b) .</p><p>c) .</p><p>d) .</p><p>e) .</p><p>42. (FCC – TRF 4 – 2019) HTML5 incluiu um conjunto de tags semânticas para substituir</p><p>algumas construções que eram feitas com HTML4. Por exemplo, as instruções e feitas em HTML4, são feitas na</p><p>HTML5, usando as tags semânticas, através das instruções:</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e</p><p>43. (FCC – TJ MA – 2019) Um Técnico Judiciário que utiliza HTML5 está criando um</p><p>parágrafo em uma página web que tem muitas palavras longas e, para evitar que o</p><p>navegador quebre linha no lugar errado, utilizou uma tag para especificar onde, em</p><p>um parágrafo, será aceitável uma quebra de linha. A tag correta para isso é:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>44. (FCC – TRF 3 – 2019) Considere o fragmento abaixo de uma página HTML5 que</p><p>utiliza elementos semânticos.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>154</p><p>428</p><p>Para inserir a legenda "Figura 1 – Foto das dependências do TRF3" na imagem, após</p><p>deve-se colocar a instrução</p><p>a) Figura 1 – Foto das dependências do TRF3</p><p>b) Figura 1 – Foto das dependências do TRF3</p><p>c) Figura 1 – Foto das dependências do TRF3</p><p>d) Figura 1 – Foto das dependências do TRF3</p><p>e) Figura 1 – Foto das dependências do TRF3.</p><p>45. (FCC –Pref Manaus – 2019) Um programador precisa utilizar uma tag semântica</p><p>incorporada a versão 5 da linguagem HTML, cujo objetivo é definir algum conteúdo</p><p>adicional colocado normalmente à direita, mas relacionado com um conteúdo que o</p><p>circunda colocado normalmente à esquerda. Deverá escolher, nesse caso, a tag:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>46. (FCC – TRF 3 – 2019) Um programador está criando o menu principal da página de</p><p>abertura de um site, que conterá o bloco principal de links de navegação.</p><p>Considerando os elementos semânticos da linguagem HTML5, estes links devem ficar</p><p>imediatamente no interior da tag</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>47. (FCC – SANASA – 2019) Um Desenvolvedor de software precisa inserir uma</p><p>instrução no cabeçalho de uma página HTML que fará referência a um arquivo</p><p>chamado a001.css a ser aplicado apenas quando a página for aberta em dispositivos</p><p>com tela de até 600 pixels. A instrução correta que deverá ser inserida é</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>155</p><p>428</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) @media only screen and (min-width: 600px) URL(a001.css) .</p><p>48. (FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com</p><p>HTML5 e deseja exibir um texto com fonte Courier de largura fixa, preservando os</p><p>espaços e as quebras de linha.</p><p>O texto deverá ser colocado entre as tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e .</p><p>49. (FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de</p><p>termos em um site utilizando listas de definições do HTML5. Nestas listas, o termo a</p><p>ser descrito e a descrição propriamente dita são criados, respectivamente, pelas tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e</p><p>50. (FCC – TST – 2017) Considere, hipoteticamente, que um Programador deseja</p><p>publicar um vídeo institucional no site do Tribunal Superior do Trabalho. Para isso, no</p><p>local da página HTML5 onde deseja colocar o vídeo, utilizou o bloco de código abaixo.</p><p>Considere que [nome_arquivo.extensão] representa o nome de um arquivo de vídeo</p><p>válido. Nas últimas versões dos principais navegadores, os tipos</p><p>fins de estilo ou</p><p>layout. Se você deseja controlar o layout ou a aparência da página da Web, use CSS.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>9</p><p>428</p><p>Hy</p><p>pe</p><p>r</p><p>Te</p><p>xt</p><p>M</p><p>ar</p><p>ku</p><p>p</p><p>La</p><p>ng</p><p>ua</p><p>ge</p><p>-</p><p>HT</p><p>M</p><p>L</p><p>Linguagem de marcação padrão para criar páginas da Web</p><p>Descreve a estrutura de uma página da Web</p><p>Consiste em uma série de elementos</p><p>Elementos HTML informam ao navegador como exibir o conteúdo e rotulam partes</p><p>do conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>10</p><p>428</p><p>HTML Básico</p><p>Todos os documentos HTML devem começar com uma declaração de tipo de documento:</p><p>. O próprio documento HTML começa e termina com . A parte</p><p>visível do documento HTML está entre e .</p><p>A declaração representa o tipo de documento e ajuda os navegadores a exibir páginas</p><p>da Web corretamente. Ele deve aparecer apenas uma vez, no topo da página (antes de qualquer</p><p>tag HTML). A declaração não diferencia maiúsculas de minúsculas. Vejamos a</p><p>declaração para HTML5:</p><p>Os cabeçalhos HTML são definidos com as tags to .. define o cabeçalho mais</p><p>importante. Enquanto define o título menos importante:</p><p>Os parágrafos HTML são definidos com a tag :</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>11</p><p>428</p><p>Os links HTML são definidos com a tag :</p><p>O destino do link é especificado no atributo href. Os atributos são usados para fornecer</p><p>informações adicionais sobre os elementos HTML. Em HTML, o atributo "href" é usado para</p><p>especificar um link para uma página da web ou um local específico dentro de uma página da web.</p><p>É comumente usado com o elemento para criar um hiperlink para outra página da web ou com</p><p>o elemento para especificar a URL base para todos os links relativos em uma página da web.</p><p>Vejamos um exemplo do atributo "href" sendo usado com o elemento para criar um hiperlink:</p><p>This is a link</p><p>Neste exemplo, o texto "Este é um link" será exibido na página da Web e, ao clicar nele, o usuário</p><p>será direcionado para a URL "https://www.example.com". Aqui está um exemplo do atributo</p><p>"href" sendo usado com o elemento :</p><p>As imagens HTML são definidas com a tag . O arquivo de origem ( src), texto alternativo ( alt),</p><p>widthe height são fornecidos como atributos:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>12</p><p>428</p><p>Para verificar o código-fonte de uma página HTML, clique com o botão direito do mouse em uma</p><p>página HTML e selecione "Exibir fonte da página" (no Chrome) ou "Exibir fonte" (no Edge) ou</p><p>similar em outros navegadores. Isso abrirá uma janela contendo o código-fonte HTML da página.</p><p>Por outro lado, para inspecionar um elemento HTML, você deve clicar com o botão direito do</p><p>mouse em um elemento (ou em uma área em branco) e escolha "Inspecionar" ou "Inspecionar</p><p>elemento" para ver de que elementos são feitos (você verá o HTML e o CSS). Você também pode</p><p>editar o HTML ou CSS dinamicamente no painel Elementos ou Estilos que é aberto.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>13</p><p>428</p><p>Elementos HTML</p><p>Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final. O elemento</p><p>HTML é tudo, desde a tag inicial até a tag final:</p><p>O conteúdo vai aqui...</p><p>Meu primeiro cabeçalho</p><p>Meu primeiro parágrafo.</p><p>Tag inicial conteúdo do elemento Tag final</p><p>My First Heading</p><p>My first paragraph.</p><p>none none</p><p>Os elementos HTML podem ser aninhados (isso significa que os elementos podem conter outros</p><p>elementos). Todos os documentos HTML consistem em elementos HTML aninhados. O exemplo</p><p>abaixo contém quatro elementos HTML ( , e ) :</p><p>O elemento é o elemento raiz e define todo o documento HTML. Ele tem uma tag</p><p>inicial e uma tag final. Então, dentro do elemento existe um elemento que</p><p>define o corpo do documento. Ele tem uma tag inicial e uma tag final . Então, no</p><p>exemplo acima, dentro do elemento existem dois outros elementos: e . O</p><p>elemento define um cabeçalho e possui uma tag inicial e uma tag final , assim</p><p>como ocorre com o elemento . Há elementos html que não precisam da tag final. Mas a boa</p><p>prática de programação diz: “Nunca pule a tag final!”</p><p>Como disse, há elementos que não precisam da tag final! São conhecidos como elementos HTML</p><p>sem conteúdo ou elementos vazios. A tag define uma quebra de linha e é um elemento vazio</p><p>sem uma tag de fechamento. Veja o exemplo a seguir.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>14</p><p>428</p><p>HTML não diferencia maiúsculas de minúsculas. As tags HTML não diferenciam maiúsculas de</p><p>minúsculas: significa o mesmo que .</p><p>O padrão HTML não requer tags em letras minúsculas, mas é recomendado usar letras minúsculas</p><p>em HTML e exige letras minúsculas para tipos de documento mais restritos, como XHTML.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>15</p><p>428</p><p>Atributos HTML</p><p>Todos os elementos HTML podem ter atributos. Os atributos fornecem informações adicionais</p><p>sobre os elementos, e são sempre especificados na tag de início. Os atributos geralmente vêm em</p><p>pares de nome/valor como: name="value".</p><p>A tag define um hiperlink. O href atributo especifica a URL da página para a qual o link vai:</p><p>O atributo preload é um atributo HTML usado para especificar como um elemento de mídia (como</p><p>um elemento ou ) deve ser carregado quando uma página da web é carregada. O</p><p>atributo controls é um atributo HTML usado para exibir os controles padrão do reprodutor de mídia</p><p>para um elemento de mídia.</p><p>O atributo preload tem três valores possíveis:</p><p>• "auto": A mídia será carregada automaticamente quando a página da web for carregada.</p><p>• " metadata ": Somente os metadados (por exemplo, duração, dimensões) da mídia serão</p><p>carregados quando a página da web for carregada.</p><p>• " none ": a mídia não será carregada quando a página da web for carregada.</p><p>O atributo controls é um atributo booleano, o que significa que não possui um valor. Se o atributo</p><p>controls estiver presente, os controles do reprodutor de mídia serão exibidos e, se não estiver</p><p>presente, os controles não serão exibidos.</p><p>Lembre-se de que os atributos de preload e controls são opcionais e você pode usá-los para</p><p>personalizar o comportamento do elemento de mídia de acordo com suas necessidades.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>16</p><p>428</p><p>Cabeçalhos HTML</p><p>Cabeçalhos HTML são títulos ou subtítulos que você deseja exibir em uma página da web. Os</p><p>cabeçalhos HTML são definidos com as tags até . Relembrando, define o cabeçalho</p><p>mais</p><p>de arquivos de vídeo</p><p>válidos para preencher a lacuna I são</p><p>a) avi, mpeg e mov</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>156</p><p>428</p><p>b) mkv, ogg e flv</p><p>c) mp4, webm e ogg</p><p>d) wmv, rmvb e mp4</p><p>e) mp4, avi e mov.</p><p>51. (FCC – TRF 5 – 2017) Uma das recomendações que consta nas Web Content</p><p>Accessibility Guidelines − WCAG é fornecer legendas e outras alternativas para</p><p>conteúdo multimídia.</p><p>Nesse contexto, considere o código abaixo, que disponibiliza um vídeo de orientação</p><p>ao cidadão em um site do Governo.</p><p>Para fornecer um arquivo de legenda em português chamado legenda_br.vtt para o vídeo</p><p>utiliza-se, na lacuna I, o comando</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>52. (FCC –TRT 24 – 2017) Preocupado com a acessibilidade de um site que está sendo</p><p>desenvolvido para o Tribunal Regional do Trabalho da 24ª Região, um Técnico</p><p>recomendou o uso de recursos da linguagem HTML, versão 5, para identificar o idioma</p><p>principal da página. Para isso deve-se utilizar:</p><p>a) o atributo lang na tag .</p><p>b) o atributo lang na tag .</p><p>c) o atributo language na tag .</p><p>d) a propriedade language na tag .</p><p>e) a tag no interior da tag</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>157</p><p>428</p><p>53. (FCC – ALMS – 2016) A viewport é a área visível do usuário de uma página web e</p><p>pode variar de acordo com o dispositivo. HTML5 introduziu um método para deixar</p><p>os web designers terem controle sobre a viewport através da tag</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>54. (FCC – ELETROSUL – 2016) A uma página HTML5 deseja-se vincular um arquivo</p><p>chamado arq1.css e um arquivo chamado arq2.js.</p><p>Para isso devem-se utilizar as instruções</p><p>a) e</p><p>no corpo da página.</p><p>b) e no</p><p>cabeçalho da página.</p><p>c) e</p><p>no cabeçalho da página.</p><p>d) e no</p><p>corpo da página.</p><p>e) e</p><p>no cabeçalho da página.</p><p>55. (FCC – ALMS – 2016) Considere o fragmento de código HTML5 a seguir.</p><p>Para disponibilizar na página o áudio chamado beethoven.mp3 a lacuna I deve ser</p><p>corretamente preenchida por</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>158</p><p>428</p><p>e)</p><p>56. (FCC – SEMF Teresina – 2016) Em uma página HTML há um parágrafo vazio criado</p><p>pela tag . Em um bloco JavaScript da mesma página, para inserir</p><p>neste parágrafo a palavra Teresina, utiliza-se o comando</p><p>a) document.getElementById("local").innerHTML = "Teresina";</p><p>b) document.getElement("p#demo").innerHTML = "Teresina";</p><p>c) document.p["#local"].value = "Teresina";</p><p>d) document.demo.value = "Teresina";</p><p>e) document.getElementByName("local").innerHTML = "Teresina";</p><p>57. (FCC – TRT 23 – 2016) De acordo com as recomendações da W3C para a linguagem</p><p>HTML5, a instrução</p><p>a) está incorreta, pois tem uma barra no final.</p><p>b) está incorreta, pois deveria estar em letra maiúscula.</p><p>c) está correta.</p><p>d) está correta.</p><p>e) está incorreta, pois faltou o atributo</p><p>language=“javascript”</p><p>58. (FCC –TRF3 – 2016) Em um site que utiliza HTML5 Application Cache há um arquivo</p><p>chamado dados.appcache que define que uma página poderá ter o conteúdo</p><p>acessado mesmo estando offline. Nessa página, para apontar para esse arquivo deve-</p><p>se utilizar a instrução</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>159</p><p>428</p><p>Questões FGV</p><p>59. (FGV –TJ TO– 2022) No HTML5, o evento que é disparado quando um objeto é</p><p>carregado é:</p><p>a) begin;</p><p>b) load;</p><p>c) ready;</p><p>d) run;</p><p>e) start.</p><p>60. (FGV –MPE SC– 2022) Sobre elementos block-level (nível de bloco) e elementos</p><p>inline (em linha) no HTML, analise as afirmativas a seguir.</p><p>I. Um elemento block-level sempre começa numa nova linha.</p><p>II. é um elemento inline.</p><p>III. é um elemento block-level.</p><p>Está correto somente o que se afirma em:</p><p>a) I;</p><p>b) II;</p><p>c) I e II;</p><p>d) I e III;</p><p>e) II e III..</p><p>61. (FGV –MPE GO – 2022) Num documento HTML5, assinale o elemento que contém</p><p>meta informações sobre a página.</p><p>a)</p><p>b) (</p><p>c)</p><p>d)</p><p>e) .</p><p>62. (FGV –TJ TO– 2022) Observe o código HTML e JavaScript a seguir:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>160</p><p>428</p><p>Após a execução do código, o resultado exibido será:</p><p>a) Maria</p><p>b) João</p><p>c) 2022.1</p><p>d) Tejota</p><p>e) tjProcesso</p><p>63. (FGV –Sefaz AM – 2022) A linguagem de marcação HTML é amplamente utilizada</p><p>na construção de páginas da Internet.</p><p>O elemento HTML, que permite reproduzir um arquivo de vídeo no formato MP4 em</p><p>uma página da web, é</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>64. (FGV –IMBEL – 2021) Analise a imagem a seguir, produzida numa página Web.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>161</p><p>428</p><p>que substitui corretamente a linha com pontos.</p><p>a) AC</p><p>F</p><p>GG</p><p>b) AC</p><p>B</p><p>FG</p><p>c) AC</p><p>B</p><p>FG</p><p>d) AC</p><p>BFG</p><p>e) AC</p><p>B</p><p>FG</p><p>.</p><p>65. (FGV – TJ RO– 2021) No contexto do HTML, a sintaxe correta para um comentário,</p><p>delimitando um trecho que NÃO deve ser exibido pelo browser, é:</p><p>a)</p><p>b) !--Texto do comentário ></p><p>c)</p><p>d)</p><p>e) .</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>162</p><p>428</p><p>66. (FGV – IMBEL– 2021) Analise o trecho HTML a seguir.</p><p>AC</p><p>BD</p><p>Na exibição da página Web, esse script produz uma tabela</p><p>a) com duas linhas e duas colunas.</p><p>b) com quatro linhas e uma coluna.</p><p>c) com quatro colunas e uma linha.</p><p>d) com uma linha e uma coluna.</p><p>e) com linhas e colunas desalinhadas.</p><p>67. (FGV –MPE AL – 2018) O HTML 5 introduziu diversos elementos semânticos,</p><p>gráficos e de multimídia.</p><p>Assinale o elemento que não é uma novidade nessa versão.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>68. (FGV –ALERO – 2018) No contexto dos elementos introduzidos pelo HTML 5,</p><p>analise as afirmativas a seguir.</p><p>I. Os elementos “header”, “section” e “footer” são elementos block-level.</p><p>II. O elemento “” é funcionalmente idêntico ao já conhecido elemento “”.</p><p>III. Além dos atributos height e width, o elemento “” permite o uso do</p><p>atributo depth, para uso em gráficos tridimensionais.</p><p>Está correto o que se afirma em</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>163</p><p>428</p><p>a) I, somente.</p><p>b) II, somente.</p><p>c) III, somente.</p><p>d) I e II, somente.</p><p>e) II e III, somente..</p><p>69. (FGV –ALERO – 2018) Assinale a opção que melhor descreve a utilização da tag</p><p>canvas no HTML5.</p><p>a) Definir mídias de áudio e vídeo.</p><p>b) Desenhar elementos gráficos por meio de scripts.</p><p>c) Dividir a tela em áreas horizontais de largura variável, que funcionam como painéis.</p><p>d) Dividir a tela em áreas verticais de altura variável, que funcionam como painéis.</p><p>e) Desenhar a entrada de dados e as caixas de diálogo..</p><p>70. (FGV –MPE AL – 2018) Observe o código a seguir.</p><p>Supondo que o cursor do mouse inicialmente esteja fora da área de botão, assinale o</p><p>texto exibido no botão quando a página que o contém estiver carregada.</p><p>a) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão, assim mudando a cada</p><p>movimentação para dentro ou para fora.</p><p>b) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>assim permanece.</p><p>c) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão, e assim permanece mesmo que</p><p>o mouse seja movimentado sobre o botão.</p><p>d) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“Abrir” quando o cursor do mouse sai da área do botão, assim mudando a cada</p><p>movimentação para dentro ou para fora.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>164</p><p>428</p><p>e) “Abrir” inicialmente, “on” quando o cursor do mouse entra na área do botão, e</p><p>“off” quando o cursor do mouse sai da área do botão pela primeira vez. Nas demais</p><p>saídas, mudar para “Abrir”.</p><p>71. (FGV –ALERO – 2018) Analise o código a seguir.</p><p>Sabe-se que com essa página exibida, o operador clicou no botão por três vezes.</p><p>Assinale o valor exibido no botão após esses cliques.</p><p>a) 0</p><p>b) 1</p><p>c) 1111</p><p>d) 1234</p><p>e) 4.</p><p>72. (FGV – BANESTES– 2018) HTML é uma linguagem utilizada para construção de</p><p>páginas na Internet. O comando de formatação da linguagem HTML para indicar que</p><p>um determinado texto deve ser apresentado sublinhado é:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>165</p><p>428</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e) .</p><p>73. (FGV –BANESTES – 2018) Ao desenvolver uma aplicação cliente Web, o</p><p>programador precisa mostrar um aviso quando a página requisitada tem o acesso</p><p>proibido.</p><p>Assim, ele tem que tratar o erro de resposta HTTP:</p><p>a) 200;</p><p>b) 403;</p><p>c) 404;</p><p>d) 500;</p><p>e) 501.</p><p>74. (FGV –IBGE – 2017) HTML5 (Hypertext Markup Language, versão 5) é uma</p><p>linguagem utilizada para estruturação e apresentação de conteúdo na Internet.</p><p>Analise a página HTML5 a seguir:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>166</p><p>428</p><p>Considere que você está utilizando um navegador web que suporta HTML5 Local</p><p>Storage e ao acessar essa página pela primeira vez você apertou três vezes o botão</p><p>indicado com id="B" e então você fechou o navegador.</p><p>Posteriormente, você utiliza o mesmo navegador para acessar novamente essa mesma</p><p>página.</p><p>Após apertar duas vezes o mesmo botão, será apresentada a seguinte mensagem no</p><p>corpo da página:</p><p>a) Você apertou 5 vezes.</p><p>b) Você apertou 7 vezes.</p><p>c) Você apertou 10 vezes.</p><p>d) Você apertou 52 vezes.</p><p>e) Você apertou 55 vezes.</p><p>75. (FGV –ALERJ – 2017) Analise a estrutura básica da página HTML a seguir:</p><p>Esse código define que a cor do texto da página e dos links quando clicados são,</p><p>respectivamente:</p><p>a) preta e vermelha;</p><p>b) azul e amarela;</p><p>c) vermelha e verde;</p><p>d) azul e verde;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>167</p><p>428</p><p>e) preta e amarela.</p><p>76. (FGV –MPE BA – 2017) A HTML é uma linguagem de marcação utilizada na</p><p>construção de páginas na Web.</p><p>O comando de formatação da linguagem para definir um hyperlink indicando que o</p><p>recurso linkado deve ser aberto em uma nova janela do navegador é:</p><p>a) meu link</p><p>b) meu link</p><p>c) meu link</p><p>d) meu link</p><p>e) meu link.</p><p>77. (FGV –IBGE – 2017) O HTML 5 introduziu um método para permitir que o designer</p><p>controle a área de visualização de um site através da tag . A sintaxe correta</p><p>para que a largura de uma página siga a largura da tela de um dispositivo, com uma</p><p>escala inicial de 1X no momento em que ela é carregada é:</p><p>a) ;</p><p>b) ;</p><p>c) ;</p><p>d) ;</p><p>e) .</p><p>78. (FGV – IBGE– 2016) A sigla HTML significa Hyper Text Markup Language, o que</p><p>pode ser traduzido como Linguagem de Marcação de Hipertexto. Uma linguagem de</p><p>marcação pode ser definida como um sistema para:</p><p>a) marcar um documento indicando a sua estrutura lógica e hierárquica</p><p>especificamente para a transmissão e exibição eletrônicas;</p><p>b) definir o comportamento visual em meio eletrônico do conteúdo textual de um</p><p>documento, incluindo tipografia, cor e tamanho dos caracteres;</p><p>c) marcar um documento indicando a ordem em que o conteúdo deve ser apresentado</p><p>em meio eletrônico;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>168</p><p>428</p><p>==1365fc==</p><p>d) definir as ligações entre diferentes documentos a partir de palavras-chave</p><p>específicas;</p><p>e) criar documentos específicos para transmissão eletrônica através da Internet.</p><p>79. (FGV –IBGE – 2016) Um desenvolvedor Web mobile pretende utilizar os novos</p><p>elementos semânticos disponíveis no HTML5 em suas páginas. Associe corretamente</p><p>os elementos HTML5 enumerados com o posicionamento na ilustração que representa</p><p>conceitualmente as partes de uma página HTML:</p><p>A sequência correta é:</p><p>a) A=1, B=3, C=5, D=6, E=4 e F=2;</p><p>b) A=2, B=5, C=4, D=3, E=6 e F=1;</p><p>c) A=1, B=4, C=6, D=5, E=3 e F=2;</p><p>d) A=2, B=3, C=6, D=4, E=5 e F=3;</p><p>e) A=1, B=6, C=4, D=3, E=5 e F=2.</p><p>80. (FGV – IBGE– 2016)</p><p>Com a introdução do HTML5, diversas novas APIs Javascript</p><p>(Application Programming Interfaces) foram disponibilizadas, aumentando</p><p>consideravelmente a quantidade de recursos disponíveis para a produção de páginas</p><p>web. São APIs exclusivas do HTML5:</p><p>a) múltiplas colunas de texto, transformações 2D/3D e RWD (Responsive Web Design);</p><p>b) armazenamento em nuvem, suporte a telas de toque e SSL (Secure Sockets Layer);</p><p>c) acesso a câmeras em dispositivos móveis, suporte a streaming de vídeo e SSE</p><p>(Streaming SIMD Extensions);</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>169</p><p>428</p><p>d) armazenamento local, geolocalização e SSE (Server-Sent Events);</p><p>e) redimensionamento dinâmico de imagens, detecção de resolução de tela e RWD</p><p>(Responsive Web Display)</p><p>81. (FGV –IBGE – 2016) A declaração permite ao navegador apresentar</p><p>uma página web corretamente. A declaração correta para uma página em HTML5 é:</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>170</p><p>428</p><p>GABARITO</p><p>1. Errado</p><p>2. Correto</p><p>3. Errado</p><p>4. Letra D</p><p>5. Errado</p><p>6. Errado</p><p>7. Correto</p><p>8. Letra B</p><p>9. Correto</p><p>10. Correto</p><p>11. Correto</p><p>12. Correto</p><p>13. Letra B</p><p>14. Letra D</p><p>15. Correto</p><p>16. Letra D</p><p>17. Correto</p><p>18. Correto</p><p>19. Errado</p><p>20. Correto</p><p>21. Errado</p><p>22. Errado</p><p>23. Letra B</p><p>24. Errado</p><p>25. Errado</p><p>26. Errado</p><p>27. Errado</p><p>28. Correto</p><p>29. Letra E</p><p>30. Letra D</p><p>31. Correto</p><p>32. Errado</p><p>33. Errado</p><p>34. Correto</p><p>35. Letra A</p><p>36. Letra B</p><p>37. Letra A</p><p>38. Letra E</p><p>39. Letra D</p><p>40. Letra C</p><p>41. Letra D</p><p>42. Letra B</p><p>43. Letra B</p><p>44. Letra E</p><p>45. Letra C</p><p>46. Letra D</p><p>47. Letra C</p><p>48.Letra E</p><p>49. Letra A</p><p>50. Letra C</p><p>51. Letra E</p><p>52. Letra A</p><p>53. Letra B</p><p>54. Letra E</p><p>55. Letra C</p><p>56. Letra A</p><p>57. Letra D</p><p>58. Letra A</p><p>59. Letra B</p><p>60. Letra D</p><p>61. Letra C</p><p>62. Letra B</p><p>63. Letra E</p><p>64. Letra B</p><p>65. Letra D</p><p>66. Letra A</p><p>67. Letra B</p><p>68. Letra A</p><p>69. Letra B</p><p>70. Letra A</p><p>71. Letra E</p><p>72. Letra E</p><p>73. Letra B</p><p>74. Letra D</p><p>75. Letra D</p><p>76. Letra C</p><p>77. Letra D</p><p>78. Letra A</p><p>79. Letra A</p><p>80. Letra D</p><p>81. Letra D</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>171</p><p>428</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>172</p><p>428</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>173</p><p>428</p><p>Sumário</p><p>Apresentação da Aula ....................................................................................................................... 4</p><p>CSS ..................................................................................................................................................... 5</p><p>Conceitos Básicos .......................................................................................................................... 5</p><p>Sintaxe CSS .................................................................................................................................... 8</p><p>Seletores de CSS ............................................................................................................................ 9</p><p>O seletor de elemento CSS ....................................................................................................... 9</p><p>Todos os seletores simples de CSS ......................................................................................... 10</p><p>Como adicionar CSS .................................................................................................................... 12</p><p>Comentários CSS ......................................................................................................................... 14</p><p>Cores CSS ..................................................................................................................................... 15</p><p>Fundos CSS .................................................................................................................................. 17</p><p>Imagem de Fundo CSS ................................................................................................................ 19</p><p>Propriedades de Borda do CSS ................................................................................................... 22</p><p>Largura da Borda do CSS ......................................................................................................... 24</p><p>Cores de borda ......................................................................................................................... 26</p><p>Margens CSS ................................................................................................................................ 32</p><p>Preenchimento CSS ..................................................................................................................... 34</p><p>Altura, largura e largura máxima do CSS .................................................................................... 36</p><p>Modelo de Caixa CSS .................................................................................................................. 38</p><p>Contorno do CSS ...................................................................................................................... 38</p><p>Largura do Contorno do CSS ................................................................................................... 39</p><p>Cor do Contorno do CSS ......................................................................................................... 39</p><p>Abreviação do Contorno do CSS............................................................................................. 39</p><p>Texto CSS ..................................................................................................................................... 41</p><p>Cor do texto.............................................................................................................................. 41</p><p>Alinhamento e direção do texto .............................................................................................. 42</p><p>Propriedades de Decoração de Texto ..................................................................................... 43</p><p>Transformação de Texto CSS ................................................................................................... 44</p><p>Espaçamento do Texto CSS ..................................................................................................... 45</p><p>Sombra de Texto CSS .............................................................................................................. 46</p><p>Fontes CSS ................................................................................................................................... 47</p><p>Estilo de fonte CSS ................................................................................................................... 49</p><p>Tamanho da fonte .................................................................................................................... 50</p><p>Regras de emparelhamento de fontes .................................................................................... 53</p><p>Ícones</p><p>de CSS .............................................................................................................................. 56</p><p>Fontes de Ícones Incríveis ........................................................................................................ 56</p><p>Ícones do Bootstrap ................................................................................................................. 57</p><p>Links CSS ...................................................................................................................................... 58</p><p>Decoração de texto .................................................................................................................. 59</p><p>Cor de fundo............................................................................................................................. 59</p><p>Botões de link ........................................................................................................................... 59</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>174</p><p>428</p><p>Listas de CSS ............................................................................................................................ 60</p><p>Listas HTML e propriedades da lista CSS .................................................................................. 1</p><p>Marcadores de itens de lista diferentes ..................................................................................... 1</p><p>Uma imagem como marcador de item de lista ......................................................................... 1</p><p>Posicione os Marcadores de Item da Lista ................................................................................ 2</p><p>Remover configurações padrão ................................................................................................. 2</p><p>Lista - Propriedade abreviada .................................................................................................... 2</p><p>Lista de estilos com cores .......................................................................................................... 3</p><p>Tabelas CSS .................................................................................................................................... 4</p><p>Recolher bordas da tabela (border-collapse) ............................................................................ 5</p><p>Tamanho da Tabela CSS ............................................................................................................ 6</p><p>Alinhamento de Tabela CSS ...................................................................................................... 7</p><p>Estilo de Tabela CSS .................................................................................................................. 8</p><p>Tabela Responsiva CSS .............................................................................................................. 9</p><p>Layout CSS - A propriedade de exibição .................................................................................... 10</p><p>Elementos de nível de bloco ................................................................................................... 10</p><p>Elementos embutidos............................................................................................................... 10</p><p>Substituir o valor de exibição padrão ...................................................................................... 12</p><p>Largura e Largura Máxima ........................................................................................................ 12</p><p>A propriedade de posição ........................................................................................................... 13</p><p>position: static; .......................................................................................................................... 13</p><p>position: relative; ...................................................................................................................... 13</p><p>position: fixed; .......................................................................................................................... 13</p><p>position: absolute; .................................................................................................................... 14</p><p>A propriedade z-index ................................................................................................................. 16</p><p>Overflow ....................................................................................................................................... 17</p><p>Layout CSS: Float and clear ......................................................................................................... 19</p><p>A propriedade CSS "clear" ...................................................................................................... 20</p><p>Layout CSS: display: inline-block ................................................................................................. 22</p><p>Alinhamento ................................................................................................................................. 24</p><p>Alinhamento horizontal: ........................................................................................................... 24</p><p>Alinhamento vertical: ................................................................................................................ 24</p><p>Elementos de Alinhamento Central ......................................................................................... 24</p><p>CSS Combinators ......................................................................................................................... 26</p><p>Pseudo-classes ............................................................................................................................. 27</p><p>Opacidade / Transparência ......................................................................................................... 30</p><p>Pseudo-elementos ....................................................................................................................... 31</p><p>Todos os pseudoelementos CSS ............................................................................................. 32</p><p>Barra de Navegação .................................................................................................................... 33</p><p>Barra de Navegação Vertical .................................................................................................... 34</p><p>Barra de Navegação Horizontal ............................................................................................... 35</p><p>Menus suspensos em CSS ........................................................................................................... 36</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>175</p><p>428</p><p>Galeria de imagens ...................................................................................................................... 37</p><p>Sprites de imagem ....................................................................................................................... 38</p><p>Seletores de atributos CSS .......................................................................................................... 39</p><p>Formulários CSS ........................................................................................................................... 40</p><p>Resumo ............................................................................................................................................ 41</p><p>Sintaxe CSS ............................................................................................................................... 42</p><p>Comentário ...............................................................................................................................</p><p>42</p><p>Seletores de CSS ...................................................................................................................... 42</p><p>Todos os seletores simples de CSS ......................................................................................... 43</p><p>Cores CSS ................................................................................................................................. 43</p><p>Fundos CSS ............................................................................................................................... 44</p><p>Imagem de Fundo CSS ............................................................................................................ 45</p><p>Propriedades de Borda do CSS ............................................................................................... 45</p><p>Margens CSS ............................................................................................................................ 46</p><p>Preenchimento CSS .................................................................................................................. 46</p><p>Altura, largura e largura máxima do CSS................................................................................. 47</p><p>Modelo de Caixa CSS .............................................................................................................. 47</p><p>Texto CSS ................................................................................................................................. 47</p><p>Fontes CSS ................................................................................................................................ 48</p><p>Ícones de CSS ........................................................................................................................... 48</p><p>Links CSS ................................................................................................................................... 49</p><p>Tabelas CSS .............................................................................................................................. 49</p><p>Layout CSS - A propriedade de exibição ................................................................................ 49</p><p>A propriedade de posição ....................................................................................................... 50</p><p>A propriedade z-index.............................................................................................................. 51</p><p>Overflow.................................................................................................................................... 51</p><p>Seletores de atributos CSS ....................................................................................................... 52</p><p>Referências ....................................................................................................................................... 53</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>176</p><p>428</p><p>APRESENTAÇÃO DA AULA</p><p>Olá, galera! Vamos iniciar os estudos sobre o CSS!</p><p>Nesta aula, apresento inúmeras palavras-chave, para que vocês possam entender e internalizar o</p><p>conteúdo de forma mais simples. Aproveitem o material, além dos esquemas, resumos e</p><p>mnemônicos. Vamos ao que importa!</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>177</p><p>428</p><p>CSS</p><p>Conceitos Básicos</p><p>Antes de iniciar a aula, é importante mencionar que vários exemplos dessa aula foram retirados</p><p>ou inspirados em exemplos do W3Tutorials (www.w3schools.com/html). Não fizemos isso porque</p><p>somos preguiçosos, mas por dois motivos: (1) os exemplos são excelentes; (2) essa é uma das</p><p>fontes de inspiração das bancas. Além disso, eu sugiro que vocês tenham sempre aberta uma</p><p>janela com um interpretador online para que vocês possam testar o que veremos. Recomendo</p><p>esse:</p><p>https://www.w3schools.com/html/</p><p>CSS é a sigla para Folhas de Estilo em Cascata. É uma linguagem de estilos usada para descrever</p><p>a apresentação de um documento escrito em uma linguagem de marcação. É mais comumente</p><p>usado para estilizar documentos HTML e XML, mas pode ser usado com qualquer documento</p><p>XML, incluindo SVG e XHTML. O CSS é uma tecnologia-chave usada para criar sites visualmente</p><p>atraentes e consistentes. Ele é usado para controlar layout, cores, fontes e outros elementos</p><p>visuais em um site.</p><p>CSS é a linguagem que usamos para estilizar um documento HTML e descreve como os</p><p>elementos HTML devem ser exibidos.</p><p>Vejamos um exemplo de código CSS</p><p>body {</p><p>background-color: lightblue;</p><p>}</p><p>h1 {</p><p>color: white;</p><p>text-align: center;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>178</p><p>428</p><p>}</p><p>p {</p><p>font-family: verdana;</p><p>font-size: 20px;</p><p>}</p><p>O código é um exemplo de CSS. Ele define a cor de fundo do elemento "body" para azul claro,</p><p>a cor do elemento "h1" para branco e alinha o texto do elemento "h1" ao centro. Também</p><p>define a família da fonte e o tamanho da fonte do elemento "p" para Verdana e 20px,</p><p>respectivamente.</p><p>Este CSS será aplicado às tags HTML correspondentes em uma página da Web, resultando em</p><p>um plano de fundo de toda a página azul claro, quaisquer cabeçalhos de nível 1 sendo brancos</p><p>e alinhados ao centro e quaisquer elementos "p" tendo uma família de fontes de Verdana e</p><p>tamanho da fonte de 20px.</p><p>CSS (Cascading Style Sheets) é usado para controlar a aparência de elementos HTML e XML na</p><p>página, incluindo cor, fontes, espaçamento, layout e muito mais. CSS permite que os</p><p>desenvolvedores separem a apresentação do conteúdo, o que facilita a manutenção e o</p><p>desenvolvimento de sites. Com o CSS, é possível aplicar estilos consistentes em todo o site, o</p><p>que ajuda a garantir que a aparência do site seja consistente e profissional.</p><p>• CSS significa Cascading Style Sheets</p><p>• CSS descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outras</p><p>mídias</p><p>• CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da Web de uma</p><p>só vez</p><p>• Folhas de estilo externas são armazenadas em arquivos CSS</p><p>O CSS é usado para definir estilos para suas páginas da Web, incluindo design, layout e variações</p><p>de exibição para diferentes dispositivos e tamanhos de tela.</p><p>O HTML NUNCA foi destinado a conter tags para formatar uma página da web! HTML foi criado</p><p>para descrever o conteúdo de uma página web, como:</p><p>Este é um cabeçalho</p><p>Isto é um parágrafo.</p><p>Quando tags como e atributos de cor foram adicionados à especificação do HTML 3.2,</p><p>começou um pesadelo para os desenvolvedores da web. O desenvolvimento de grandes sites,</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>179</p><p>428</p><p>onde fontes e informações de cores foram adicionadas a cada página, tornou-se um processo</p><p>longo e caro. Para resolver esse problema, o World Wide Web Consortium (W3C) criou o CSS.</p><p>CSS removeu a formatação de estilo da página HTML!</p><p>As definições de estilo são normalmente salvas em arquivos .css externos. Com um arquivo de</p><p>folha de estilo externo, você pode alterar a aparência de um site inteiro alterando apenas um</p><p>arquivo!</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>180</p><p>428</p><p>Sintaxe CSS</p><p>A sintaxe CSS consiste em um conjunto de regras que definem como aplicar estilos a elementos</p><p>em um documento HTML. Essas regras são compostas de seletores, que especificam</p><p>a quais</p><p>elementos os estilos devem ser aplicados, e declarações, que definem os próprios estilos. O</p><p>seletor é o elemento ou grupo de elementos aos quais os estilos serão aplicados. A propriedade</p><p>é a propriedade CSS, como cor ou tamanho da fonte, que você deseja alterar. O valor é o valor</p><p>para o qual você deseja definir a propriedade. Várias declarações podem ser adicionadas à</p><p>mesma regra, separadas por ponto e vírgula:</p><p>• O seletor aponta para o elemento HTML que você deseja estilizar.</p><p>• O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.</p><p>• Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois</p><p>pontos.</p><p>• Várias declarações CSS são separadas por ponto e vírgula e os blocos de declaração são</p><p>cercados por chaves.</p><p>CSS também suporta o uso de cascata e herança, onde estilos podem ser herdados por</p><p>elementos filhos de seus elementos pais.</p><p>O CSS pode ser aplicado de três maneiras:</p><p>• estilo inline, na tag HTML</p><p>• folha de estilo interna, dentro da tag head</p><p>• folha de estilo externa, em um arquivo separado com extensão .css</p><p>Você também pode usar seletores diferentes, como seletores de classe, id, atributo e</p><p>pseudoclasse para direcionar elementos específicos na página.</p><p>h1 {color:blue;</p><p>• Propriedade: valor</p><p>font-size:12px;}</p><p>• Propriedade: valor</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>181</p><p>428</p><p>Seletores de CSS</p><p>Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você</p><p>deseja estilizar.</p><p>Podemos dividir os seletores CSS em cinco categorias:</p><p>• Seletores simples (selecionar elementos com base no nome, id, classe)</p><p>• Seletores de combinação (selecionam elementos com base em uma relação específica</p><p>entre eles)</p><p>• Seletores de pseudoclasse (selecionar elementos com base em um determinado estado)</p><p>• Seletores de pseudoelementos (selecionar e estilizar uma parte de um elemento)</p><p>• Seletores de atributo (selecionar elementos com base em um atributo ou valor de atributo)</p><p>O seletor de elemento CSS</p><p>Os seletores são usados para selecionar os elementos HTML aos quais você deseja aplicar estilos.</p><p>Existem vários tipos diferentes de seletores disponíveis em CSS, incluindo:</p><p>• Seletores de elementos: selecione elementos com base em seus nomes. Por exemplo, p {</p><p>} seleciona todos os elementos na página.</p><p>• Seletores de classe: selecione elementos com base em seu atributo de classe. Por</p><p>exemplo, .my-class { } seleciona todos os elementos com a classe "my-class".</p><p>• Seletores de ID: selecione um elemento exclusivo com base em seu atributo id. Por</p><p>exemplo, #my-id { } seleciona o elemento com o id "my-id".</p><p>• Seletores de atributos: selecione elementos com base em seus atributos ou valores de</p><p>atributos. Por exemplo, input[type="text"] { } seleciona todos os elementos com</p><p>um atributo de tipo "text".</p><p>• Seletores de pseudoclasse: selecione elementos com base em seus estados ou</p><p>comportamento dinâmico. Por exemplo, a:hover { } seleciona todos os elementos</p><p>quando o usuário passa o mouse sobre eles.</p><p>• Combinando seletores: selecione elementos com base em sua relação com outros</p><p>elementos. Por exemplo, #my-id .my-class p seleciona todos os elementos dentro de</p><p>um elemento com a classe "my-class" que é descendente de um elemento com o id "my-</p><p>id".</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>182</p><p>428</p><p>(FCC – TJ-CE – 2022) Para colocar a cor de fundo vermelha apenas dos campos (inputs) do tipo</p><p>text de um formulário, utiliza-se a instrução CSS</p><p>a) input [type=text] {background-color: #00ff00}</p><p>b) input.type [text] {background-color: #ff0000}</p><p>c) input [type=text] {background-color: #ff0000}</p><p>d) input.typeltext] {background: rgb(0,255,0)}}</p><p>e) input [type('text')] {background-color:rgb(255,0,0)}</p><p>Comentários: Para isso podemos usar seletores de atributos: selecione elementos com base em</p><p>seus atributos ou valores de atributos. Por exemplo, input[type="text"] { } seleciona todos os</p><p>elementos com um atributo de tipo "text". No caso da questão, devemos usar o input</p><p>[type=text] {background-color: #ff0000}. (Gabarito: Letra C)</p><p>(FCC – MANAUSPREV – 2021) No formulário de contato de uma página web do site do Governo</p><p>de XX, um desenvolvedor de software precisa especificar que todos os campos do tipo texto</p><p>(text) devem ser mostrados com fonte azul. Para estabelecer este estilo usando a linguagem CSS,</p><p>deve-se utilizar o comando</p><p>a) input [type=text] {color:blue}</p><p>b) input type='text' {color:blue}</p><p>c) input.text {color:blue}</p><p>d) input!text {color:#0000ff}</p><p>e) input#text {color:#blue}</p><p>Comentários: Nessa questão também temos a aplicação de seletores! Nesse caso um</p><p>desenvolvedor de software precisa especificar que todos os campos do tipo texto (text), ou seja,</p><p>input [type=text], devem ser mostrados com fonte azul... eis a questão... qual é o correto? Tanto</p><p>{color:blue} quanto {color:#0000ff} estão corretos. O principal, nessa questão é saber a sintaxe</p><p>correta: input [type=text]. Portanto, temos aí nosso gabarito! (Gabarito: Letra A)</p><p>Todos os seletores simples de CSS</p><p>Seletor Exemplo Descrição do exemplo</p><p>#id</p><p>#firstname Seleciona o elemento com</p><p>id="firstname"</p><p>.class</p><p>.intro Seleciona todos os elementos com</p><p>class="intro"</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>183</p><p>428</p><p>element.class</p><p>p.intro Seleciona apenas elementos com</p><p>class="intro"</p><p>* * Seleciona todos os elementos</p><p>element p Seleciona todos os elementos</p><p>element,element,..</p><p>div, p Seleciona todos os elementos e</p><p>todos os elementos</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>184</p><p>428</p><p>Como adicionar CSS</p><p>Existem três maneiras principais de incluir uma folha de estilo CSS em um documento HTML:</p><p>• Estilos embutidos: são estilos aplicados diretamente a um elemento HTML específico</p><p>usando o atributo "estilo". Por exemplo, Este é um parágrafo</p><p>vermelho.</p><p>• Folha de estilo interna: são estilos definidos na seção de cabeçalho de um documento</p><p>HTML usando uma tag . Por exemplo,</p><p>p {</p><p>color: red;</p><p>}</p><p>• Folha de estilo externa: são estilos definidos em um arquivo .css separado e vinculados a</p><p>um documento HTML usando uma tag na seção head. Por exemplo,</p><p>Neste exemplo, a tag é usada para vincular uma folha de estilo externa chamada styles.css</p><p>à página. O atributo href especifica o caminho para o arquivo CSS, enquanto o atributo rel indica</p><p>que o link é para uma folha de estilo e o atributo type especifica o tipo de arquivo (CSS). Além</p><p>disso, podemos usar a tag no cabeçalho da página:</p><p>/* ou */</p><p>@import url("aleap.css");</p><p>Neste exemplo, a tag é usada para incluir folhas de estilo internas na página. O atributo</p><p>type especifica o tipo de conteúdo (CSS) e o conteúdo da tag é o código CSS. A diretiva</p><p>@import é usada para incluir uma folha de estilo externa chamada aleap.css.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>185</p><p>428</p><p>O uso de uma folha de estilo externa é</p><p>considerado uma prática recomendada, pois permite uma</p><p>melhor organização e capacidade de manutenção dos estilos e facilita a aplicação dos mesmos</p><p>estilos a várias páginas. Vejamos uma questão!</p><p>(FCC – AL-AP – 2020) Segundo os padrões de acessibilidade na web definidos para sites do</p><p>Governo Eletrônico, códigos CSS devem estar sempre em arquivos externos a serem chamados</p><p>pelas páginas do sítio/portal. Por exemplo, a instrução pode ser também escrita na forma:</p><p>a) @include url("aleap.css");</p><p>b)</p><p>c) @import url("aleap.css");</p><p>d)</p><p>e)</p><p>Comentários: Sabemos que há três formas de inserir CSS: Estilos embutidos, Folha de estilo</p><p>interna e Folha de estilo externa. Ainda, o uso de uma folha de estilo externa é considerado uma</p><p>prática recomendada, portanto, vamos lembrar como é inserir CSS usando tags! As tags são</p><p>e . Já que a banca deu a link no enunciado, vamos procurar pela tag Style, certo?</p><p>Das opções, a correta é semelhante ao nosso exemplo @import</p><p>url("aleap.css"); . Portanto, nosso gabarito é a letra C. (Gabarito: Letra C)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>186</p><p>428</p><p>Comentários CSS</p><p>Comentários CSS são usados para adicionar notas ou explicações em uma folha de estilo CSS</p><p>que não afeta a exibição da página da web. Os comentários são ignorados pelos navegadores e</p><p>não são exibidos na página da web.</p><p>Comentários CSS são escritos usando os símbolos /* e */. Qualquer coisa escrita entre esses</p><p>símbolos é considerada um comentário e será ignorada pelo navegador.</p><p>Por exemplo:</p><p>/* Este é um comentário CSS */</p><p>p{</p><p>cor vermelha; /* Isso também é um comentário */</p><p>}</p><p>Os comentários CSS podem ser colocados em sua própria linha ou na mesma linha que uma regra</p><p>CSS. Eles também podem abranger várias linhas.</p><p>É uma boa prática usar comentários para explicar o propósito de uma regra CSS ou grupo de</p><p>regras, ou para indicar que uma seção da folha de estilo ainda está em andamento ou precisa ser</p><p>revisada. Isso pode ajudar outras pessoas que trabalham no projeto a entender o código e fazer</p><p>alterações com mais facilidade.</p><p>Além disso, os comentários CSS podem ser usados para desativar temporariamente uma</p><p>determinada regra ou seção da folha de estilo adicionando /* no início da linha com a regra e */</p><p>no final da linha, sem precisar removê-la completamente.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>187</p><p>428</p><p>Cores CSS</p><p>As cores são especificadas usando nomes de cores predefinidos ou valores RGB, HEX, HSL,</p><p>RGBA, HSLA. Em CSS, as cores podem ser especificadas usando vários métodos diferentes. Valor</p><p>RGB: As cores podem ser especificadas usando o modelo de cores RGB (vermelho, verde, azul),</p><p>onde cada cor é especificada por um valor entre 0 e 255. Por exemplo, a cor vermelha pode ser</p><p>especificada como rgb(255, 0, 0 ).</p><p>• Valor HEX: As cores também podem ser especificadas usando um valor hexadecimal de 6</p><p>dígitos, onde cada par de dígitos representa os valores de vermelho, verde e azul. Por</p><p>exemplo, a cor vermelha pode ser especificada como #ff0000 (vermelho).</p><p>o Branco ="#FFFFFF"</p><p>o Vermelho ="#FF0000"</p><p>o Verde ="#00FF00"</p><p>o Azul ="#0000FF"</p><p>o Preto = "#000000"</p><p>• Valor HSL: As cores também podem ser especificadas usando o modelo de cores HSL</p><p>(matiz, saturação, luminosidade), onde o valor do matiz é um grau entre 0 e 360, a</p><p>saturação e a luminosidade são porcentagens. Por exemplo, a cor vermelha pode ser</p><p>especificada como hsl(0,100%,50%).</p><p>• Predefinido/Palavra-chave: Há também um conjunto de nomes de cores predefinidos que</p><p>podem ser usados, como "vermelho", "verde", "azul", "preto", "branco", etc.</p><p>• Valor RGBA: Semelhante ao valor RGB, mas permite definir um canal alfa para</p><p>transparência.</p><p>• Valor HSLA: Semelhante ao valor HSL, mas permite definir um canal alfa para</p><p>transparência.</p><p>É importante observar que nem todos os navegadores suportam valores HSL e HSLA, por isso é</p><p>uma boa prática.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>188</p><p>428</p><p>Ex</p><p>em</p><p>pl</p><p>os</p><p>d</p><p>e</p><p>co</p><p>re</p><p>s</p><p>em</p><p>c</p><p>ss ...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>co</p><p>re</p><p>s</p><p>em</p><p>c</p><p>ss</p><p>Um valor de cor RGB representa as fontes de luz VERMELHA, VERDE e AZUL.</p><p>Uma cor hexadecimal é especificada com: #RRGGBB, onde os inteiros hexadecimais RR</p><p>(vermelho), GG (verde) e BB (azul)</p><p>HSL significa matiz, saturação e leveza: hsl (matiz , saturação , luminosidade)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>189</p><p>428</p><p>Fundos CSS</p><p>Os fundos CSS são uma forma de definir a aparência de fundo de um elemento HTML usando</p><p>código CSS. Eles permitem que os desenvolvedores escolham entre uma variedade de opções</p><p>de fundo, como cores, imagens e gradientes, para personalizar a aparência visual do elemento.</p><p>Existem várias propriedades CSS que podem ser usadas para definir o fundo de um elemento,</p><p>incluindo:</p><p>Propriedade Descrição</p><p>background-color</p><p>Define a cor de fundo de um elemento. Você pode usar nomes de</p><p>cores, valores rgb, hex, hsl para definir uma cor de fundo.</p><p>background-image</p><p>Define uma imagem como fundo de um elemento. A imagem é</p><p>especificada por um valor de url. Você também pode usar a palavra-</p><p>chave nenhum para remover qualquer imagem de plano de fundo.</p><p>background-repeat</p><p>Define como a imagem de fundo é repetida. O valor padrão é repetir,</p><p>o que significa que a imagem será repetida horizontal e verticalmente.</p><p>Você também pode usar repeat-x, repeat-y, no-repeat para controlar</p><p>a repetição da imagem.</p><p>background-position</p><p>Define a posição da imagem de fundo. Você pode usar valores como</p><p>centro, superior, inferior, esquerda, direita ou valores de</p><p>comprimento específicos, como 10px 20px.</p><p>background-</p><p>attachment</p><p>Define se a imagem de fundo rola com o resto do conteúdo (scroll) ou</p><p>é fixa no lugar (fixed).</p><p>background-clip</p><p>Define a área onde a imagem de fundo deve ser pintada. O valor</p><p>padrão é border-box, o que significa que a imagem será pintada</p><p>dentro das bordas do elemento.</p><p>background-size</p><p>Define o tamanho da imagem de fundo. Você pode usar valores como</p><p>conter ou cobrir para dimensionar a imagem ou valores de</p><p>comprimento como 50% ou 200px para definir um tamanho</p><p>específico.</p><p>Você também pode usar a propriedade abreviada background para definir todas as propriedades</p><p>do background em uma linha.</p><p>É importante observar que a ordem dos valores na propriedade abreviada é:</p><p>plano de fundo: cor de fundo - imagem de fundo repetição de fundo posição de fundo</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>190</p><p>428</p><p>Você pode usar essas propriedades para definir o plano de fundo de qualquer elemento HTML,</p><p>tornando-o uma ferramenta poderosa para criar designs da Web atraentes e envolventes.</p><p>plano</p><p>de fundo: cor de fundo - imagem de fundo - repetição de fundo - posição de fundo</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>191</p><p>428</p><p>Imagem de Fundo CSS</p><p>A propriedade background-image em CSS é usada para definir uma imagem como plano de</p><p>fundo de um elemento. A imagem é especificada por um valor de URL, que pode ser um caminho</p><p>relativo ou absoluto. Por exemplo:</p><p>body {</p><p>background-image: url("my-image.jpg");</p><p>}</p><p>Você também pode usar a palavra-chave none para remover qualquer imagem de plano de</p><p>fundo.</p><p>A propriedade background-repeat controla como a imagem de fundo é repetida. O valor padrão</p><p>é repetir, o que significa que a imagem será repetida horizontal e verticalmente. Outros valores</p><p>possíveis são repeat-x, repeat-y e no-repeat.</p><p>body {</p><p>background-image: url("my-image.jpg");</p><p>background-repeat: no-repeat;</p><p>}</p><p>A propriedade background-position define a posição da imagem de fundo. Você pode usar</p><p>valores como centro, superior, inferior, esquerda, direita ou valores de comprimento específicos,</p><p>como 10px 20px.</p><p>body {</p><p>background-image: url("my-image.jpg");</p><p>background-position: center;</p><p>}</p><p>A propriedade background-size define o tamanho da imagem de fundo. Você pode usar valores</p><p>como conter ou cobrir para dimensionar a imagem ou valores de comprimento como 50% ou</p><p>200px para definir um tamanho específico.</p><p>body {</p><p>background-image: url("my-image.jpg");</p><p>background-size: cover;</p><p>}</p><p>Além disso, você pode usar a propriedade abreviada background para definir todas as</p><p>propriedades do background em uma linha.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>192</p><p>428</p><p>body {</p><p>background:</p><p>A forma abreviada da propriedade background em CSS permite que você defina todas as</p><p>propriedades background em uma única linha de código. Isso pode tornar seu código CSS mais</p><p>conciso e fácil de ler. A ordem dos valores na propriedade abreviada é:</p><p>background: background-color background-image background-repeat background-position/size</p><p>background-attachment</p><p>Por exemplo, para definir uma cor de fundo de #ff0000, uma imagem "my-image.jpg" que se</p><p>repete apenas na horizontal, posicionada no centro e fixa no lugar, você pode usar o seguinte</p><p>código:</p><p>body {</p><p>background: #ff0000 url("my-image.jpg") repeat-x center fixed;</p><p>}</p><p>ou</p><p>body {</p><p>background: #ff0000 url("my-image.jpg") repeat-x center/cover fixed;</p><p>}</p><p>É importante observar que a propriedade abreviada substituirá quaisquer propriedades de plano</p><p>de fundo anteriores definidas individualmente. Também é importante observar que nem todos</p><p>os valores são obrigatórios, depende do que você deseja definir, para que você possa usá-lo</p><p>conforme sua necessidade.</p><p>Propriedade CSS Descrição</p><p>background Define todas as propriedades de plano de fundo em uma declaração</p><p>background-</p><p>attachment</p><p>Define se uma imagem de fundo é fixa ou rola com o restante da</p><p>página</p><p>background-clip Especifica a área de pintura do fundo</p><p>background-color Define a cor de fundo de um elemento</p><p>ordem dos valores na forma abreviada da propriedade background</p><p>background-color background-image background-repeat</p><p>background-</p><p>position/size</p><p>background-</p><p>attachment</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>193</p><p>428</p><p>background-image Define a imagem de fundo para um elemento</p><p>background-origin Especifica onde a(s) imagem(ns) de fundo está(ão) posicionada(s)</p><p>background-position Define a posição inicial de uma imagem de fundo</p><p>background-repeat Define como uma imagem de fundo será repetida</p><p>background-size Especifica o tamanho da(s) imagem(ns) de fundo</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>194</p><p>428</p><p>Propriedades de Borda do CSS</p><p>As propriedades de borda do CSS permitem que você especifique o estilo, a largura e a cor da</p><p>borda de um elemento. Elas permitem controlar a aparência das bordas de um elemento HTML.</p><p>Algumas das principais propriedades de borda incluem:</p><p>• border-width: controla a largura da borda.</p><p>• border-style: controla o estilo da borda (por exemplo, sólido, tracejado, etc.).</p><p>• border-color: controla a cor da borda.</p><p>• border-radius: controla a curvatura das bordas (para criar bordas arredondadas).</p><p>• border: é uma propriedade curta que permite definir a largura, estilo e cor da borda de</p><p>uma só vez.</p><p>Além disso, também é possível controlar as bordas individuais de cada lado de um elemento</p><p>utilizando as propriedades border-top, border-right, border-bottom e border-left. A propriedade</p><p>border-style especifica que tipo de borda exibir. Os seguintes valores são permitidos:</p><p>Estilo de Borda CSS Descrição</p><p>dotted Define uma borda pontilhada</p><p>dashed Define uma borda tracejada</p><p>solid Define uma borda sólida</p><p>double Define uma borda dupla</p><p>groove</p><p>Define uma borda ranhurada 3D. O efeito depende do valor da cor</p><p>da borda</p><p>ridge</p><p>Define uma borda ondulada 3D. O efeito depende do valor da cor da</p><p>borda</p><p>inset</p><p>Define uma borda de inserção 3D. O efeito depende do valor da cor</p><p>da borda</p><p>outset</p><p>Define uma borda inicial 3D. O efeito depende do valor da cor da</p><p>borda</p><p>none Não define borda</p><p>hidden Define uma borda oculta</p><p>Vejamos um exemplo e seu respectivo resultado.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>195</p><p>428</p><p>p.dotted {border-style: dotted;}</p><p>p.dashed {border-style: dashed;}</p><p>p.solid {border-style: solid;}</p><p>p.double {border-style: double;}</p><p>p.groove {border-style: groove;}</p><p>p.ridge {border-style: ridge;}</p><p>p.inset {border-style: inset;}</p><p>p.outset {border-style: outset;}</p><p>p.none {border-style: none;}</p><p>p.hidden {border-style: hidden;}</p><p>p.mix {border-style: dotted dashed solid double;}</p><p>A propriedade border-style</p><p>Esta propriedade especifica que tipo de borda exibir:</p><p>Uma borda pontilhada.</p><p>Uma borda tracejada.</p><p>Uma fronteira sólida.</p><p>Uma borda dupla.</p><p>Uma borda de sulco.</p><p>Uma borda de cume.</p><p>Uma borda embutida.</p><p>Uma borda inicial.</p><p>Sem borda.</p><p>Uma fronteira oculta.</p><p>Uma fronteira mista.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>196</p><p>428</p><p>Largura da Borda do CSS</p><p>A propriedade border-width especifica a largura das quatro bordas de um elemento HTML. A</p><p>largura da borda pode ser especificada usando diferentes unidades de medida, como pixels (px),</p><p>pontos (pt), centímetros (cm) e porcentagem (%). Usando um tamanho específico (em px, pt, cm,</p><p>em, etc) ou usando um dos três valores predefinidos: thin, medium, or thick:</p><p>p.one {</p><p>border-style: solid;</p><p>border-width: 5px;</p><p>}</p><p>p.two {</p><p>border-style: solid;</p><p>border-width: medium;</p><p>}</p><p>p.three {</p><p>border-style: dotted;</p><p>border-width: 2px;</p><p>}</p><p>p.four {</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>197</p><p>428</p><p>==1365fc==</p><p>border-style: dotted;</p><p>border-width:</p><p>thick;</p><p>}</p><p>p.five {</p><p>border-style: double;</p><p>border-width: 15px;</p><p>}</p><p>p.six {</p><p>border-style: double;</p><p>border-width: thick;</p><p>}</p><p>The border-width Property</p><p>This property specifies the width of the four borders:</p><p>Some text.</p><p>Some text.</p><p>Some text.</p><p>Some text.</p><p>Some text.</p><p>Some text.</p><p>A propriedade "border-width" não funciona se for usada sozinha.</p><p>Sempre especifique a propriedade "border-style" para definir as bordas</p><p>primeiro.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>198</p><p>428</p><p>A propriedade border-width pode ter de um a quatro valores (para a borda superior, borda</p><p>direita, borda inferior e borda esquerda):</p><p>p.one {</p><p>border-style: solid;</p><p>border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */</p><p>}</p><p>p.two {</p><p>border-style: solid;</p><p>border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */</p><p>}</p><p>p.three {</p><p>border-style: solid;</p><p>border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px</p><p>left */</p><p>}</p><p>Cores de borda</p><p>A propriedade border-color do CSS permite controlar a cor das quatro bordas de um elemento</p><p>HTML. A cor pode ser especificada usando uma variedade de formatos, incluindo nomes de cores</p><p>(como "red" ou "blue"), códigos hexadecimais (como "#ff0000" ou "#0000ff") ou valores RGB</p><p>ou RGBA (como "rgb(255, 0, 0)" ou "rgba(255, 0, 0, 0.5)").</p><p>A cor pode ser definida por:</p><p>• nome - especifique um nome de cor, como "vermelho"</p><p>• HEX - especifique um valor HEX, como "#ff0000"</p><p>• RGB - especifique um valor RGB, como "rgb(255,0,0)"</p><p>• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)"</p><p>• transparente</p><p>Se a propriedade border-color não estiver definida, então ela herda a cor do elemento. Vejamos</p><p>um exemplo.</p><p>p.one {</p><p>border-style: solid;</p><p>border-color: red;</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>199</p><p>428</p><p>p.two {</p><p>border-style: solid;</p><p>border-color: green;</p><p>}</p><p>p.three {</p><p>border-style: dotted;</p><p>border-color: blue;</p><p>}</p><p>A propriedade border-color</p><p>Esta propriedade especifica a cor das quatro bordas:</p><p>A solid red border</p><p>A solid green border</p><p>A dotted blue border</p><p>Nota: A propriedade "border-color" não funciona se for usada sozinha.</p><p>Use a propriedade "border-style" para definir as bordas primeiro.</p><p>Também é possível controlar a cor da borda individualmente para cada lado de um elemento</p><p>utilizando as propriedades border-top-color, border-right-color, border-bottom-color e border-</p><p>left-color.</p><p>border-top-color: red;</p><p>border-right-color: #0000ff;</p><p>Note que se você usar a propriedade border curta, você pode definir a cor, largura e estilo de</p><p>borda de uma só vez.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>200</p><p>428</p><p>/* Definir a cor, largura e estilo da borda como vermelho, 5 pixels e sólido*/</p><p>border: 5px solid red;</p><p>Não entendeu? Então, vejamos como funciona. As propriedades para controlar cada lado</p><p>individualmente são:</p><p>• border-top: controla a borda superior.</p><p>• border-right: controla a borda direita.</p><p>• border-bottom: controla a borda inferior.</p><p>• border-left: controla a borda esquerda.</p><p>Sempre nessa ordem. Assim, se a propriedade border-style tiver quatro valores:</p><p>border-style: dotted solid double dashed</p><p>• borda superior é pontilhada;</p><p>• borda direita é sólida;</p><p>• borda inferior é dupla;</p><p>• borda esquerda é tracejada.</p><p>Se a propriedade border-style tiver três valores:</p><p>border-style: dotted solid double;</p><p>• borda superior é pontilhada;</p><p>• as bordas direita e esquerda são sólidas;</p><p>• borda inferior é dupla.</p><p>Se a propriedade border-style tiver dois valores:</p><p>border-style: dotted solid;</p><p>• as bordas superior e inferior são pontilhadas;</p><p>• as bordas direita e esquerda são sólidas.</p><p>Se a propriedade border-style tiver um valor:</p><p>border-style: dotted;</p><p>• todas as quatro bordas são pontilhadas.</p><p>Também é possível controlar as propriedades de borda individualmente para cada lado utilizando</p><p>as propriedades border-top-width, border-top-style, border-top-color, border-right-width,</p><p>border-right-style, border-right-color, border-bottom-width, border-bottom-style, border-</p><p>bottom-color, border-left-width, border-left-style, and border-left-color.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>201</p><p>428</p><p>Há muitas propriedades a serem consideradas ao lidar com bordas, entretanto, para encurtar o</p><p>código, também é possível especificar todas as propriedades de borda individuais em uma</p><p>propriedade.</p><p>A propriedade border é uma propriedade abreviada para as seguintes propriedades de borda</p><p>individuais:</p><p>/* Sintaxe geral */</p><p>border: width style color;</p><p>/* Definir a borda como vermelha, largura de 5 pixels e sólida */</p><p>border: 5px solid red;</p><p>/* Definir a borda como azul, largura de 2 pixels e tracejada */</p><p>border: 2px dotted blue;</p><p>/* Definir a borda como verde, largura de 1 ponto e dupla */</p><p>border: 1pt double green;</p><p>/* Definir a borda superior como vermelha, largura de 5 pixels e sólida */</p><p>border-top: 5px solid red;</p><p>/* Definir a borda direita como azul, largura de 2 pixels e tracejada */</p><p>border-right: 2px dotted blue;</p><p>/* Definir a borda inferior e esquerda como verde, largura de 1 ponto e dupla</p><p>*/</p><p>border-bottom: 1pt double green;</p><p>border-left: 1pt double green;</p><p>As propriedades de bordas arredondadas do CSS permitem criar bordas arredondadas em</p><p>elementos HTML. A propriedade principal para controlar bordas arredondadas é a border-radius.</p><p>/* Sintaxe geral */</p><p>border-radius: horizontal vertical;</p><p>/* Definir borda arredondada com raio de 20 pixels */</p><p>border-radius: 20px;</p><p>/* Definir borda arredondada com raio horizontal de 30 pixels e raio vertical</p><p>de 10 pixels */</p><p>border-radius: 30px 10px;</p><p>/* Definir raio de borda arredondada superior esquerda como 30 pixels */</p><p>border-top-left-radius: 30px;</p><p>/* Definir raio de borda arredondada superior direita como 10 pixels */</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>202</p><p>428</p><p>border-top-right-radius: 10px;</p><p>/* Definir raio de borda arredondada inferior esquerda como 5 pixels */</p><p>border-bottom-left-radius: 5px;</p><p>/* Definir raio de borda arredondada inferior direita como 15 pixels */</p><p>border-bottom-right-radius: 15px;</p><p>Professora, para quê tanto exemplo? Porque cai em prova!</p><p>Vejamos agora todas as propriedades de borda CSS</p><p>Propriedades de</p><p>Borda CSS</p><p>Descrição</p><p>border Define todas as propriedades de borda em uma declaração</p><p>border-bottom Define todas as propriedades da borda inferior em uma declaração</p><p>border-bottom-color Define a cor da borda inferior</p><p>border-bottom-style Define o estilo da borda inferior</p><p>border-bottom-width Define a largura da borda inferior</p><p>border-color Define a cor das quatro bordas</p><p>border-left Define todas as propriedades da borda esquerda em uma declaração</p><p>border-left-color Define a cor da borda esquerda</p><p>border-left-style Define o estilo da borda esquerda</p><p>border-left-width Define a largura da borda esquerda</p><p>border-radius</p><p>Define</p><p>todas as quatro propriedades border-*-radius para cantos</p><p>arredondados</p><p>border-right Define todas as propriedades da borda direita em uma declaração</p><p>border-right-color Define a cor da borda direita</p><p>border-right-style Define o estilo da borda direita</p><p>border-right-width Define a largura da borda direita</p><p>border-style Define o estilo das quatro bordas</p><p>border-top Define todas as propriedades da borda superior em uma declaração</p><p>border-top-color Define a cor da borda superior</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>203</p><p>428</p><p>border-top-style Define o estilo da borda superior</p><p>border-top-width Define a largura da borda superior</p><p>border-width Define a largura das quatro bordas</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>204</p><p>428</p><p>Margens CSS</p><p>As margens são usadas para criar espaço ao redor dos elementos, fora de qualquer borda</p><p>definida. Elas permitem controlar o espaço fora de um elemento HTML. Consiste na área</p><p>transparente ao redor de um elemento e o separa dos elementos vizinhos.</p><p>A propriedade principal para controlar margens é a margin.</p><p>margin: top right bottom left;</p><p>Em que top, right, bottom e left são valores que determinam a largura da margem em cima, à</p><p>direita, embaixo e à esquerda, respectivamente. Você pode usar unidades como pixels, pontos</p><p>ou porcentagens. Todas as propriedades de margem podem ter os seguintes valores:</p><p>• auto - o navegador calcula a margem</p><p>• length (comprimento) - especifica uma margem em px, pt, cm, etc.</p><p>• % - especifica uma margem em % da largura do elemento recipiente</p><p>• inherit (herdar) - especifica que a margem deve ser herdada do elemento pai</p><p>Você pode definir a propriedade margin para autocentralizar horizontalmente o elemento em</p><p>seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido</p><p>igualmente entre as margens esquerda e direita.</p><p>/* Definir margem de 10 pixels em todos os lados */</p><p>margin: 10px;</p><p>/* Definir margem de 5 pixels em cima e embaixo, e 20 pixels à direita e esquerda</p><p>*/</p><p>margin: 5px 20px;</p><p>/* Definir margem de 10 pixels em cima, 20 pixels à direita, 30 pixels embaixo</p><p>e 40 pixels à esquerda */</p><p>margin: 10px 20px 30px 40px;</p><p>Você também pode controlar as margens individualmente para cada lado usando as</p><p>propriedades margin-top, margin-right, margin-bottom, e margin-left.</p><p>/* Definir margem superior como 10 pixels */</p><p>margin-top: 10px;</p><p>/* Definir margem direita como 20 pixels */</p><p>margin-right: 20px;</p><p>/* Definir margem inferior como 30 pixels */</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>205</p><p>428</p><p>margin-bottom: 30px;</p><p>/* Definir margem esquerda como 40 pixels */</p><p>margin-left: 40px;</p><p>As margens são importantes para controlar o espaçamento e a disposição de elementos na</p><p>página web, e podem ser usadas para criar uma aparência mais organizada e estruturada para</p><p>seu site.</p><p>Propriedades de</p><p>Margem CSS</p><p>Descrição</p><p>margin Uma propriedade abreviada para definir todas as propriedades de</p><p>margem em uma declaração</p><p>margin-bottom Define a margem inferior de um elemento</p><p>margin-left Define a margem esquerda de um elemento</p><p>margin-right Define a margem direita de um elemento</p><p>margin-top Define a margem superior de um elemento</p><p>Às vezes, as margens superior e inferior dos elementos são recolhidas em uma única margem</p><p>que é igual à maior das duas margens. Isso não acontece nas margens esquerda e direita! Apenas</p><p>as margens superior e inferior!</p><p>As margens são importantes para controlar o espaçamento e a disposição de elementos na</p><p>página web, e podem ser usadas para criar uma aparência mais organizada e estruturada para</p><p>seu site.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>206</p><p>428</p><p>Preenchimento CSS</p><p>O preenchimento CSS controla o espaço dentro de um elemento HTML. O preenchimento é a</p><p>área preenchida dentro de um elemento, ocupando o espaço entre o seu conteúdo e sua borda.</p><p>A propriedade principal para controlar o preenchimento é a padding. A sintaxe geral é:</p><p>padding: top right bottom left;</p><p>Em que top, right, bottom e left são valores que determinam a largura do preenchimento em</p><p>cima, à direita, embaixo e à esquerda, respectivamente. Você pode usar unidades como pixels,</p><p>pontos ou porcentagens. Vejamos os exemplos:</p><p>/* Definir preenchimento de 10 pixels em todos os lados */</p><p>padding: 10px;</p><p>/* Definir preenchimento de 5 pixels em cima e embaixo, e 20 pixels à direita e</p><p>esquerda */</p><p>padding: 5px 20px;</p><p>/* Definir preenchimento de 10 pixels em cima, 20 pixels à direita, 30 pixels</p><p>embaixo e 40 pixels à esquerda */</p><p>padding: 10px 20px 30px 40px;</p><p>Você também pode controlar o preenchimento individualmente para cada lado usando as</p><p>propriedades padding-top, padding-right, padding-bottom, e padding-left.</p><p>Todas as propriedades de preenchimento podem ter os seguintes valores:</p><p>• length - especifica um preenchimento em px, pt, cm, etc.</p><p>• %- especifica um preenchimento em % da largura do elemento que o contém</p><p>• inherit - especifica que o preenchimento deve ser herdado do elemento pai</p><p>Frise-se que valores negativos não são permitidos.</p><p>/* Definir preenchimento superior como 10 pixels */</p><p>padding-top: 10px;</p><p>/* Definir preenchimento direita como 20 pixels */</p><p>padding-right: 20px;</p><p>/* Definir preenchimento inferior como 30 pixels */</p><p>padding-bottom: 30px;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>207</p><p>428</p><p>/* Definir preenchimento esquerda como 40 pixels */</p><p>padding-left: 40px;</p><p>A propriedade CSS width especifica a largura da área de conteúdo do elemento. A área de</p><p>conteúdo é a parte dentro do preenchimento, borda e margem de um elemento (o modelo de</p><p>caixa). Portanto, se um elemento tiver uma largura especificada, o preenchimento adicionado a</p><p>esse elemento será adicionado à largura total do elemento. Isso geralmente é um resultado</p><p>indesejável.</p><p>Propriedades de</p><p>Preenchimento CSS</p><p>Descrição</p><p>padding Uma propriedade abreviada para definir todas as propriedades de</p><p>preenchimento em uma declaração</p><p>padding-bottom Define o preenchimento inferior de um elemento</p><p>padding-left Define o preenchimento esquerdo de um elemento</p><p>padding-right Define o preenchimento correto de um elemento</p><p>padding-top Define o preenchimento superior de um elemento</p><p>O preenchimento é importante para controlar o espaçamento entre o conteúdo e a borda de um</p><p>elemento, e pode ser usado para criar uma aparência mais atraente e organizada para seu site.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>208</p><p>428</p><p>Altura, largura e largura máxima do CSS</p><p>A altura, largura e largura máxima são propriedades CSS que controlam o tamanho de um</p><p>elemento HTML.</p><p>A propriedade height define a altura de um elemento, a propriedade width define a largura de</p><p>um elemento e a propriedade max-width define a largura máxima de um elemento. Vejamos a</p><p>sintaxe para definir altura, largura e largura máxima, respectivamente:</p><p>/* Sintaxe para definir altura, largura e largura máxima, respectivamente */</p><p>height: value;</p><p>width: value;</p><p>max-width: value;</p><p>Em que value é o valor da altura, largura ou largura máxima. Você pode usar unidades como</p><p>pixels, pontos ou porcentagens.</p><p>/* Definir</p><p>importante. define o título menos importante.</p><p>Os mecanismos de pesquisa usam os cabeçalhos para indexar a estrutura e o conteúdo de suas</p><p>páginas da web. Os usuários geralmente percorrem uma página por seus títulos. É importante usar</p><p>cabeçalhos para mostrar a estrutura do documento. os cabeçalhos devem ser usados para os</p><p>cabeçalhos principais, seguidos pelos cabeçalhos , depois os menos importantes e assim</p><p>por diante.</p><p>Cada título HTML tem um tamanho padrão. No entanto, você pode especificar o tamanho de</p><p>qualquer cabeçalho com o atributo style, usando a propriedade font-size CSS:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>17</p><p>428</p><p>Parágrafos HTML</p><p>Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto. O elemento</p><p>HTML define um parágrafo. Um parágrafo sempre começa em uma nova linha e os</p><p>navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois</p><p>de um parágrafo.</p><p>A tag define uma quebra temática em uma página HTML e geralmente é exibida como uma</p><p>régua horizontal. O elemento é usado para separar o conteúdo (ou definir uma alteração) em</p><p>uma página HTML. A tag é uma tag vazia, o que significa que não tem tag final.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>18</p><p>428</p><p>O elemento HTML define uma quebra de linha. Use se quiser uma quebra de linha (uma</p><p>nova linha) sem iniciar um novo parágrafo. A tag é uma tag vazia, o que significa que não tem</p><p>tag final.</p><p>O elemento HTML define o texto pré-formatado. O texto dentro de um elemento é</p><p>exibido em uma fonte de largura fixa (geralmente Courier) e preserva espaços e quebras de linha:</p><p>(FCC – SABESP – 2018) Um Técnico está desenvolvendo uma página web com HTML5 e deseja exibir um</p><p>texto com fonte Courier de largura fixa, preservando os espaços e as quebras de linha.</p><p>O texto deverá ser colocado entre as tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e .</p><p>Comentários: O elemento HTML define o texto pré-formatado. O texto dentro de um elemento</p><p>é exibido em uma fonte de largura fixa (geralmente Courier) e preserva espaços e quebras de linha.</p><p>(Gabarito: Letra E)</p><p>pa</p><p>rá</p><p>gr</p><p>af</p><p>os</p><p>H</p><p>TM</p><p>L Define um parágrafo</p><p>Define uma mudança temática no conteúdo</p><p>Insere uma única quebra de linha</p><p>Define o texto pré-formatado</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>19</p><p>428</p><p>Estilos HTML</p><p>O atributo HTML style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e</p><p>muito mais. A definição do estilo de um elemento HTML pode ser feita com o atributo style.</p><p>O atributo HTML style tem a seguinte sintaxe2:</p><p>A propriedade CSS background-color define a cor de fundo de um elemento HTML.</p><p>2 property é uma propriedade CSS. value é um valor CSS.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>20</p><p>428</p><p>Vejamos as outras propriedades style em sequência:</p><p>Propriedade CSS Descrição</p><p>Background-color Define a cor de fundo de um elemento HTML</p><p>Color Define a cor do texto para um elemento HTML</p><p>Font-family Define a fonte a ser usada para um elemento HTML</p><p>Font-size Define o tamanho do texto para um elemento HTML</p><p>Text-align Define o alinhamento horizontal do texto para um elemento HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>21</p><p>428</p><p>pa</p><p>rá</p><p>gr</p><p>af</p><p>os</p><p>H</p><p>TM</p><p>L style define estilos para elementos HTML</p><p>background-color define a cor do fundo</p><p>color define cores do texto</p><p>font-family define fontes do texto</p><p>font-size define tamanhos do texto</p><p>text-align define o alinhamento do texto</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>22</p><p>428</p><p>Formatação de Texto HTML</p><p>O HTML contém vários elementos para definir o texto com um significado especial.</p><p>Elementos de</p><p>Formatação</p><p>Descrição</p><p>Texto em negrito, sem nenhuma importância extra.</p><p>Texto importante. O conteúdo interno geralmente é exibido em negrito.</p><p>Define uma parte do texto em uma voz ou humor alternativo. Texto em itálico.</p><p>Costuma ser usada para indicar um termo técnico, uma frase de outro idioma,</p><p>um pensamento, o nome de um navio, etc.</p><p>Texto enfatizado. O conteúdo interno geralmente é exibido em itálico.</p><p>Texto marcado. Define o texto que deve ser marcado ou destacado</p><p>Texto menor</p><p>Define o texto que foi excluído de um documento. Os navegadores geralmente</p><p>traçam uma linha através do texto excluído.</p><p>Texto inserido. Os navegadores geralmente sublinham o texto inserido.</p><p>Texto subscrito. O texto subscrito aparece meio caractere abaixo da linha</p><p>normal e, às vezes, é renderizado em uma fonte menor. O texto subscrito pode</p><p>ser usado para fórmulas químicas, como H2O</p><p>Texto sobrescrito. O texto sobrescrito aparece meio caractere acima da linha</p><p>normal e, às vezes, é renderizado em uma fonte menor. O texto sobrescrito</p><p>pode ser usado para notas de rodapé, como WWW[1].</p><p>El</p><p>em</p><p>en</p><p>to</p><p>s</p><p>de</p><p>Fo</p><p>rm</p><p>at</p><p>aç</p><p>ão</p><p>H</p><p>TM</p><p>L</p><p>Texto em negrito</p><p>Texto importante</p><p>Texto em itálico</p><p>Texto enfatizado</p><p>Texto marcado</p><p>Texto menor</p><p>Texto deletado</p><p>Texto inserido</p><p>texto subscrito</p><p>Texto sobrescrito</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>23</p><p>428</p><p>Citação em HTML</p><p>O elemento HTML define uma seção que é citada de outra fonte. Os navegadores</p><p>geralmente indentam elementos.</p><p>A tag HTML define uma citação curta. Os navegadores normalmente inserem aspas ao redor</p><p>da citação.</p><p>A tag HTML define uma abreviação ou um acrônimo, como "HTML", "CSS", "Mr.", "Dr.",</p><p>"ASAP", "ATM". As abreviações de marcação podem fornecer informações úteis para navegadores,</p><p>sistemas de tradução e mecanismos de pesquisa.</p><p>A tag HTML define as informações de contato do autor/proprietário de um documento</p><p>ou artigo. As informações de contato podem ser um endereço de e-mail, URL, endereço físico,</p><p>número de telefone, identificador de mídia social, etc. O texto no elemento geralmente</p><p>é renderizado em itálico e os navegadores sempre adicionam uma quebra de linha antes e depois</p><p>do elemento .</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>24</p><p>428</p><p>A tag HTML define o título de uma obra criativa (por exemplo, um livro, um poema, uma</p><p>música, um filme, uma pintura, uma escultura, etc. O texto no elemento geralmente é</p><p>renderizado em itálico .</p><p>BDO significa Bi-Directional Override. A tag HTML é usada para substituir a direção do texto</p><p>atual:</p><p>Ci</p><p>ta</p><p>çã</p><p>o</p><p>em</p><p>H</p><p>TM</p><p>L</p><p>Define uma abreviação ou acrônimo</p><p>Define as informações de contato do autor/proprietário de um documento</p><p>Define a direção do texto</p><p>Define</p><p>altura como 200 pixels */</p><p>height: 200px;</p><p>/* Definir largura como 50% */</p><p>width: 50%;</p><p>/* Definir largura máxima como 500 pixels */</p><p>max-width: 500px;</p><p>A propriedade max-width é usada para definir a largura máxima de um elemento. Ela pode ser</p><p>especificada em valores de comprimento , como px, cm, etc., ou em porcentagem (%) do bloco</p><p>que o contém, ou definido como nenhum (este é o padrão. Significa que não há largura máxima).</p><p>Quando a janela do navegador é menor que a largura do elemento (500px), o navegador então</p><p>adiciona uma barra de rolagem horizontal à página. Uma boa opção é usar max-width nessa</p><p>situação, assim, irá melhorar o manuseio de janelas pequenas pelo navegador.</p><p>Observe que, se a largura máxima for definida e a largura do elemento exceder o valor da largura</p><p>máxima, a largura do elemento será automaticamente ajustada para o valor da largura máxima.</p><p>Nota que, se por algum motivo você usar a width e max-width no mesmo elemento e o valor da</p><p>width for maior que a max-width, a max-width será usada (e a width será ignorada).</p><p>As propriedades heighte width podem ter os seguintes valores:</p><p>• auto- Este é o padrão. O navegador calcula a altura e a largura</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>209</p><p>428</p><p>• length- Define a altura/largura em px, cm, etc.</p><p>• %- Define a altura/largura em porcentagem do bloco que o contém</p><p>• initial- Define a altura/largura para seu valor padrão</p><p>• inherit- A altura/largura será herdada de seu valor pai</p><p>Propriedades de</p><p>Preenchimento CSS</p><p>Descrição</p><p>height Define a altura de um elemento</p><p>max-height Define a altura máxima de um elemento</p><p>max-width Define a largura máxima de um elemento</p><p>min-height Define a altura mínima de um elemento</p><p>min-width Define a largura mínima de um elemento</p><p>width Define a largura de um elemento</p><p>A altura, largura e largura máxima são importantes para controlar o tamanho de elementos na</p><p>página web e podem ser usadas para criar uma aparência mais organizada e estruturada para</p><p>seu site.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>210</p><p>428</p><p>Modelo de Caixa CSS</p><p>O modelo de caixa CSS é o modelo que define como o conteúdo, borda, preenchimento e</p><p>margem de um elemento HTML são exibidos e gerenciados na página. O modelo de caixa CSS</p><p>é composto pelas seguintes partes:</p><p>• Conteúdo: é o conteúdo real dentro do elemento, como texto, imagens, etc.</p><p>• Preenchimento: é o espaço entre o conteúdo e a borda, controlado pela propriedade</p><p>padding.</p><p>• Borda: é uma linha ao redor do preenchimento e do conteúdo, controlada pelas</p><p>propriedades border-width, border-style e border-color.</p><p>• Margem: é o espaço fora da borda, controlado pela propriedade margin.</p><p>Cada parte pode ser controlada individualmente para dar ao elemento o visual desejado. Além</p><p>disso, o modelo de caixa também afeta como o tamanho de um elemento é calculado, incluindo</p><p>sua altura, largura, etc.</p><p>A compreensão do modelo de caixa CSS é fundamental para o desenvolvimento de páginas web</p><p>profissionais e é usado para criar layouts, espaçamento e visualização de elementos na página.</p><p>A largura total de um elemento deve ser calculada assim:</p><p>• Largura total do elemento = largura + preenchimento esquerdo + preenchimento direito</p><p>+ borda esquerda + borda direita + margem esquerda + margem direita</p><p>A altura total de um elemento deve ser calculada assim:</p><p>• Altura total do elemento = altura + preenchimento superior + preenchimento inferior +</p><p>borda superior + borda inferior + margem superior + margem inferior</p><p>Contorno do CSS</p><p>Um contorno é uma linha desenhada ao redor dos elementos, FORA das bordas, para fazer o</p><p>elemento "se destacar".</p><p>CSS tem as seguintes propriedades de contorno:</p><p>• outline-style</p><p>• outline-color</p><p>• outline-width</p><p>• outline-offset</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>211</p><p>428</p><p>• outline</p><p>Estilo de Contorno CSS</p><p>A propriedade outline-style especifica o estilo do contorno e pode ter um dos seguintes valores:</p><p>• dotted- Define um contorno pontilhado</p><p>• dashed- Define um contorno tracejado</p><p>• solid- Define um contorno sólido</p><p>• double- Define um contorno duplo</p><p>• groove- Define um contorno ranhurado 3D</p><p>• ridge- Define um contorno estriado 3D</p><p>• inset- Define um contorno de inserção 3D</p><p>• outset- Define um esboço inicial 3D</p><p>• none- Não define contorno</p><p>• hidden- Define um contorno oculto</p><p>Largura do Contorno do CSS</p><p>A propriedade outline-width especifica a largura do contorno e pode ter um dos seguintes</p><p>valores:</p><p>• fino (normalmente 1px)</p><p>• médio (normalmente 3px)</p><p>• espessura (normalmente 5px)</p><p>• Um tamanho específico (em px, pt, cm, em, etc)</p><p>Cor do Contorno do CSS</p><p>A propriedade outline-color é usada para definir a cor do contorno.</p><p>A cor pode ser definida por:</p><p>• nome - especifique um nome de cor, como "vermelho"</p><p>• HEX - especifique um valor hexadecimal, como "#ff0000"</p><p>• RGB - especifique um valor RGB, como "rgb(255,0,0)"</p><p>• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)"</p><p>• invert - realiza uma inversão de cores (o que garante que o contorno fique visível,</p><p>independentemente da cor do fundo)</p><p>Abreviação do Contorno do CSS</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>212</p><p>428</p><p>A propriedade outline é uma propriedade de abreviação CSS que permite definir todas as</p><p>propriedades de linha de uma só vez. A propriedade de linha define uma linha ao redor de um</p><p>elemento que é exibida fora da borda, mas ainda faz parte do modelo de caixa.</p><p>outline: width style color;</p><p>• width é a espessura da linha, em pixels ou outra unidade.</p><p>• style é o estilo da linha, como solido, pontilhado etc.</p><p>• color é a cor da linha.</p><p>/* Define uma linha de 1 px de largura, sólida e verde */</p><p>outline: 1px solid green;</p><p>Observe que, ao contrário da propriedade border, a propriedade outline não afeta o tamanho</p><p>do elemento, portanto, não afeta a disposição dos outros elementos na página. Além disso, a</p><p>propriedade outline não tem preenchimento.</p><p>A propriedade outline é uma alternativa mais rápida às propriedades separadas de linha, como</p><p>outline-width, outline-style e outline-color, e é usada para definir rapidamente a aparência da</p><p>linha em torno de um elemento.</p><p>Propriedades de</p><p>Contorno CSS</p><p>Descrição</p><p>outline Uma propriedade abreviada para definir a largura do contorno, o</p><p>estilo do contorno e a cor do contorno em uma declaração</p><p>outline-color Define a cor de um contorno</p><p>outline-offset Especifica o espaço entre um contorno e a borda ou borda de um</p><p>elemento</p><p>outline-style Define o estilo de um contorno</p><p>outline-width Define a largura de um contorno</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>213</p><p>428</p><p>Texto CSS</p><p>A propriedade color é usada para definir a cor do texto. A cor é especificada por:</p><p>um nome de cor - como "vermelho"</p><p>um valor HEX - como "#ff0000"</p><p>um valor RGB - como "rgb(255,0,0)"</p><p>Consulte Valores de cores CSS para obter uma lista completa de possíveis valores de cores.</p><p>O CSS oferece uma ampla gama de propriedades para formatar o texto, incluindo:</p><p>Propriedade Descrição</p><p>font-family Define a fonte para o texto.</p><p>font-size Define o tamanho da fonte.</p><p>font-weight Define o peso da fonte (normal, bold, etc.).</p><p>line-height Define a altura da linha.</p><p>letter-spacing Define</p><p>o espaçamento entre letras.</p><p>word-spacing Define o espaçamento entre palavras.</p><p>text-align Define o alinhamento do texto (esquerda, direita, centro, justificado).</p><p>text-decoration Define a decoração do texto (sublinhado, riscado, etc.).</p><p>text-transform Define a transformação do texto (maiúsculas, minúsculas,</p><p>capitalização).</p><p>color Define a cor do texto.</p><p>text-shadow Define uma sombra para o texto.</p><p>Essas propriedades permitem aos desenvolvedores de páginas web personalizar a aparência do</p><p>texto de acordo com suas necessidades e criar aparências atraentes e profissionais.</p><p>A formatação do texto também pode ser herdada de um elemento pai para seus elementos</p><p>filhos, a menos que seja especificamente sobrescrita para um elemento filho.</p><p>Cor do texto</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>214</p><p>428</p><p>A propriedade color é usada para definir a cor do texto. A cor pode ser especificada como uma</p><p>string de cor RGB, HEX, RGBA ou como uma palavra-chave (por exemplo, "red" ou "blue"). A</p><p>cor é especificada por:</p><p>• um nome de cor - como "vermelho"</p><p>• um valor HEX - como "#ff0000"</p><p>• um valor RGB - como "rgb(255,0,0)"</p><p>p {</p><p>color: blue;</p><p>}</p><p>Propriedades de Cor</p><p>do Texto</p><p>Descrição</p><p>color Especifica a cor do texto</p><p>opacity Esta propriedade define a opacidade do texto. Um valor de 1 é</p><p>totalmente opaco, enquanto um valor de 0 é totalmente transparente.</p><p>text-shadow Adiciona uma sombra ao texto. É possível especificar a cor da sombra,</p><p>a distância da sombra em relação ao texto e o tamanho da sombra.</p><p>background-color Define a cor de fundo do elemento que contém o texto. Quando o</p><p>texto tem uma cor diferente da cor de fundo, a propriedade</p><p>background-color torna-se evidente.</p><p>text-decoration Permite adicionar uma linha, sublinhado ou overline ao texto. É</p><p>possível especificar a cor e o estilo da linha.</p><p>Alinhamento e direção do texto</p><p>A propriedade text-align é usada para alinhar o texto a esquerda, a direita, no centro ou</p><p>justificado.</p><p>p {</p><p>text-align: center;</p><p>}</p><p>O exemplo a seguir mostra o texto alinhado ao centro e à esquerda e à direita (o alinhamento à</p><p>esquerda é padrão se a direção do texto for da esquerda para a direita e o alinhamento à direita</p><p>é padrão se a direção do texto for da direita para a esquerda):</p><p>h1 {</p><p>text-align: center;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>215</p><p>428</p><p>}</p><p>h2 {</p><p>text-align: left;</p><p>}</p><p>h3 {</p><p>text-align: right;</p><p>}</p><p>div {</p><p>text-align: justify;</p><p>}</p><p>Quando a propriedade text-align é definida como "justify", cada linha é esticada para que cada</p><p>linha tenha a mesma largura e as margens esquerda e direita sejam retas (como em revistas e</p><p>jornais):</p><p>A propriedade direction é usada para especificar a direção do texto, ou seja, se ele será escrito</p><p>da esquerda para a direita (ltr) ou da direita para a esquerda (rtl). Já, a propriedade text-align-</p><p>last é usada para alinhar a última linha de um texto justificado.</p><p>A propriedade Bidirecionalidade do Texto Unicode unicode-bidi é usada para controlar a direção</p><p>de exibição de caracteres bidirecionais (por exemplo, árabes e hebreus) no texto.</p><p>Propriedades de</p><p>alinhamento/direção</p><p>do texto CSS</p><p>Descrição</p><p>direction Especifica a direção do texto/direção da escrita</p><p>text-align Especifica o alinhamento horizontal do texto</p><p>text-align-last Especifica como alinhar a última linha de um texto</p><p>unicode-bidi Usado junto com a propriedade de direção para definir ou retornar se</p><p>o texto deve ser substituído para suportar vários idiomas no mesmo</p><p>documento</p><p>vertical-align Define o alinhamento vertical de um elemento</p><p>Propriedades de Decoração de Texto</p><p>• A propriedade text-decoration é usada para adicionar uma decoração ao texto, como</p><p>sublinhado, riscado, entre outros.</p><p>• A propriedade text-decoration-line é usada para especificar a linha de decoração a ser</p><p>aplicada ao texto.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>216</p><p>428</p><p>• A propriedade text-decoration-color é usada para especificar a cor da decoração de texto.</p><p>• A propriedade text-decoration-style é usada para especificar o estilo da decoração de</p><p>texto, como sólido, duplo, entre outros.</p><p>• A propriedade text-decoration-thickness é usada para especificar a espessura da</p><p>decoração de texto.</p><p>a {</p><p>text-decoration: underline;</p><p>}</p><p>a {</p><p>text-decoration-line: underline;</p><p>text-decoration-color: blue;</p><p>text-decoration-style: double;</p><p>text-decoration-thickness: 2px;</p><p>}</p><p>Propriedades de</p><p>Decoração de Texto</p><p>CSS</p><p>Descrição</p><p>text-decoration</p><p>Define todas as propriedades de decoração de texto em uma</p><p>declaração</p><p>text-decoration-color Especifica a cor da decoração do texto</p><p>text-decoration-line</p><p>Especifica o tipo de decoração de texto a ser usado (sublinhado,</p><p>sobrelinhado, etc.)</p><p>text-decoration-style Especifica o estilo da decoração do texto (sólido, pontilhado, etc.)</p><p>text-decoration-</p><p>thickness</p><p>Especifica a espessura da linha de decoração do texto</p><p>Transformação de Texto CSS</p><p>A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um</p><p>texto. Ele pode ser usado para transformar tudo em letras maiúsculas ou minúsculas, ou colocar</p><p>em maiúscula a primeira letra de cada palavra:</p><p>p.uppercase {</p><p>text-transform: uppercase;</p><p>}</p><p>p.lowercase {</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>217</p><p>428</p><p>text-transform: lowercase;</p><p>}</p><p>p.capitalize {</p><p>text-transform: capitalize;</p><p>}</p><p>Propriedades de</p><p>Transformação de</p><p>Texto CSS</p><p>Descrição</p><p>text-transform Controla a capitalização do texto</p><p>Espaçamento do Texto CSS</p><p>• A propriedade text-indent é usada para especificar a indentação do primeiro parágrafo</p><p>de um elemento.</p><p>• A propriedade letter-spacing é usada para especificar o espaçamento entre as letras em</p><p>um elemento.</p><p>• A propriedade line-height é usada para especificar a altura da linha de um elemento.</p><p>• A propriedade word-spacing é usada para especificar o espaçamento entre as palavras</p><p>em um elemento.</p><p>• A propriedade white-space é usada para especificar como o espaço em branco é tratado</p><p>em um elemento.</p><p>p {</p><p>text-indent: 50px;</p><p>letter-spacing: 2px;</p><p>line-height: 1.5;</p><p>word-spacing: 10px;</p><p>white-space: pre-wrap;</p><p>}</p><p>Propriedades de</p><p>Decoração de Texto</p><p>CSS</p><p>Descrição</p><p>letter-spacing Especifica o espaço entre os caracteres em um texto</p><p>line-height Especifica a altura da linha</p><p>text-indent Especifica o recuo da primeira linha em um bloco de texto</p><p>white-space Especifica como lidar com espaço em branco dentro de um elemento</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>218</p><p>428</p><p>word-spacing Especifica o espaço entre as palavras em um texto</p><p>Sombra de Texto CSS</p><p>A propriedade text-shadow é usada para adicionar uma sombra ao texto em um elemento CSS.</p><p>Ela permite especificar a posição horizontal, vertical e a opacidade da sombra, além da cor.</p><p>Em seu uso mais simples, você especifica apenas a sombra horizontal (2px) e a sombra vertical</p><p>(2px):</p><p>h1 {</p><p>text-shadow: 2px 2px;</p><p>}</p><p>p {</p><p>text-shadow: 2px 2px 5px gray;</p><p>}</p><p>No último exemplo, a sombra tem uma posição horizontal de 2px à direita do texto, uma posição</p><p>vertical de 2px abaixo do texto e tem uma opacidade de 5px com a cor cinza.</p><p>Propriedades de</p><p>Sombra de Texto CSS</p><p>Descrição</p><p>text-shadow Especifica o efeito de sombra adicionado</p><p>ao texto</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>219</p><p>428</p><p>Fontes CSS</p><p>A propriedade font é uma propriedade abreviada que permite especificar várias propriedades</p><p>de fonte em um único valor, como tamanho, estilo, variante e peso. Isso facilita a escrita de regras</p><p>de estilo e economiza tempo. A ordem das propriedades especificadas na propriedade abreviada</p><p>é font-style, font-variant, font-weight, font-size, line-height e font-family.</p><p>Escolher a fonte certa tem um grande impacto em como os leitores experimentam um site. A</p><p>fonte certa pode criar uma identidade forte para sua marca. Usar uma fonte fácil de ler é</p><p>importante. A fonte agrega valor ao seu texto. Também é importante escolher a cor e o tamanho</p><p>do texto corretos para a fonte.</p><p>Em CSS existem cinco famílias de fontes genéricas:</p><p>• As fontes serifadas têm um pequeno traço nas bordas de cada letra. Eles criam uma</p><p>sensação de formalidade e elegância.</p><p>• As fontes sem serifa têm linhas limpas (sem pequenos traços anexados). Eles criam um</p><p>visual moderno e minimalista.</p><p>• Fontes monoespaçadas - aqui todas as letras têm a mesma largura fixa. Eles criam uma</p><p>aparência mecânica.</p><p>• As fontes cursivas imitam a caligrafia humana.</p><p>• Fontes fantasia são fontes decorativas/divertidas.</p><p>Dica: A propriedade font-family deve conter vários nomes de fontes como um sistema "fallback",</p><p>para garantir a compatibilidade máxima entre navegadores/sistemas operacionais. Comece com</p><p>a fonte desejada e termine com uma família genérica (para permitir que o navegador escolha</p><p>uma fonte semelhante na família genérica, se nenhuma outra fonte estiver disponível). Os nomes</p><p>das fontes devem ser separados por vírgula. Leia mais sobre fontes alternativas no próximo</p><p>capítulo.</p><p>.p1 {</p><p>font-family: "Times New Roman", Times, serif;</p><p>}</p><p>.p2 {</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>220</p><p>428</p><p>font-family: Arial, Helvetica, sans-serif;</p><p>}</p><p>.p3 {</p><p>font-family: "Lucida Console", "Courier New", monospace;</p><p>}</p><p>O que são fontes seguras da Web? Fontes seguras da Web são fontes instaladas universalmente</p><p>em todos os navegadores e dispositivos. No entanto, não existem fontes 100% totalmente</p><p>seguras para a Web. Há sempre uma chance de que uma fonte não seja encontrada ou instalada</p><p>corretamente. Portanto, é muito importante sempre usar fontes alternativas.</p><p>Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes na font-</p><p>family. Se a primeira fonte não funcionar, o navegador tentará a próxima, a próxima e assim por</p><p>diante. Sempre termine a lista com um nome de família de fonte genérico.</p><p>Vejamos as melhores fontes seguras da Web para HTML e CSS!</p><p>A lista a seguir apresenta as melhores fontes seguras da Web para HTML e CSS:</p><p>• Arial (sem serifa)</p><p>• Verdana (sem serifa)</p><p>• Tahoma (sem serifa)</p><p>• Trebuchet MS (sem serifa)</p><p>• Times New Roman (serif)</p><p>• Geórgia (serifa)</p><p>• Garamond (serifa)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>221</p><p>428</p><p>• Courier New (monoespacial)</p><p>• Brush Script MT (cursiva)</p><p>Arial é a fonte mais amplamente usada para mídia online e impressa. Arial também é a fonte</p><p>padrão no Google Docs. Arial é uma das fontes da web mais seguras e está disponível em todos</p><p>os principais sistemas operacionais.</p><p>Os fallbacks de fonte são fontes de backup que são usadas caso a fonte original não esteja</p><p>disponível em um dispositivo ou sistema operacional. Abaixo estão alguns fallbacks de fontes</p><p>comumente usados, organizados pelas 5 famílias de fontes genéricas:</p><p>• Serif: Times New Roman, Georgia</p><p>• Sans-serif: Arial, Verdana, Helvetica</p><p>• Monospace: Courier New, Lucida Console</p><p>Novamente, pessoal, ao especificar uma fonte, é importante listar várias opções de fallback, para</p><p>garantir que a fonte desejada apareça de maneira consistente em diferentes dispositivos e</p><p>sistemas operacionais. É recomendado usar fontes genéricas, como serif, sans-serif ou</p><p>monospace, como último recurso.</p><p>Estilo de fonte CSS</p><p>A propriedade font-style é usada principalmente para especificar texto em itálico. Esta</p><p>propriedade tem três valores:</p><p>• normal - O texto é mostrado normalmente</p><p>• itálico - O texto é mostrado em itálico</p><p>• oblique - O texto está "inclinado" (oblique é muito semelhante ao itálico, mas menos</p><p>suportado)</p><p>p{</p><p>font-style: normal;</p><p>font-style: italic;</p><p>font-style: oblique;</p><p>}</p><p>p{</p><p>font-weight: normal;</p><p>font-weight: bold;</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>222</p><p>428</p><p>A propriedade font-variant especifica se um texto deve ou não ser exibido em uma fonte</p><p>minúscula. Em uma fonte minúscula, todas as letras minúsculas são convertidas em maiúsculas.</p><p>No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor do que</p><p>as letras maiúsculas originais no texto.</p><p>p.normal {</p><p>font-variant: normal;</p><p>}</p><p>p.small {</p><p>font-variant: small-caps;</p><p>}</p><p>Tamanho da fonte</p><p>A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto</p><p>é importante em web design. No entanto, você não deve usar ajustes de tamanho de fonte para</p><p>fazer parágrafos parecerem títulos ou títulos parecerem parágrafos. Sempre use as tags HTML</p><p>apropriadas, como - para títulos e para parágrafos.</p><p>O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo.</p><p>Tamanho absoluto:</p><p>• Define o texto para um tamanho especificado</p><p>• Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim</p><p>por motivos de acessibilidade)</p><p>• O tamanho absoluto é útil quando o tamanho físico da saída é conhecido</p><p>Tamanho relativo:</p><p>• Define o tamanho relativo aos elementos circundantes</p><p>• Permite que um usuário altere o tamanho do texto nos navegadores</p><p>• Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal,</p><p>como parágrafos, é 16px (16px=1em).</p><p>Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos</p><p>desenvolvedores usam em em vez de pixels. 1em é igual ao tamanho da fonte atual. O tamanho</p><p>de texto padrão nos navegadores é 16px. Portanto, o tamanho padrão de 1em é 16px. O</p><p>tamanho pode ser calculado de pixels para em usando esta fórmula: pixels /16= em</p><p>h1 {</p><p>font-size: 2.5em; /* 40px/16=2.5em */</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>223</p><p>428</p><p>}</p><p>h2 {</p><p>font-size: 1.875em; /* 30px/16=1.875em */</p><p>}</p><p>p {</p><p>font-size: 0.875em; /* 14px/16=0.875em */</p><p>}</p><p>No exemplo acima, o tamanho do texto em em é o mesmo do exemplo anterior em pixels.</p><p>Porém, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores.</p><p>Infelizmente, ainda há um problema com versões mais antigas do Internet Explorer. O texto fica</p><p>maior do que deveria quando aumentado e menor do que deveria quando reduzido.</p><p>As Fontes do Google são uma</p><p>coleção de fontes de</p><p>caracteres disponíveis</p><p>gratuitamente para uso na</p><p>web. Elas podem ser</p><p>incorporadas em uma página</p><p>web através de um link para o</p><p>CSS da fonte fornecido pelo</p><p>Google.</p><p>A vantagem de usar as Fontes do Google é que elas são otimizadas para a web, o que significa</p><p>que são carregadas rapidamente e renderizadas de maneira consistente em diferentes</p><p>dispositivos e sistemas operacionais. Além disso, o Google oferece uma ampla seleção de fontes,</p><p>incluindo</p><p>fontes serif, sans-serif, monospace e muito mais.</p><p>Aqui está um exemplo de como incorporar uma fonte do Google em uma página web:</p><p>p {</p><p>font-family: 'Open Sans', sans-serif;</p><p>font-style: italic;</p><p>font-weight: bold;</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>224</p><p>428</p><p>Nesse exemplo, estamos incorporando a fonte "Open Sans" do Google e definindo sua família</p><p>de fontes, estilo e peso na seção de estilo da página.</p><p>O Google também ativou diferentes efeitos de fonte que você pode usar. Para habilitar efeitos</p><p>de fonte no Google Fonts, você precisa selecionar uma fonte que tenha efeitos disponíveis e</p><p>adicioná-la à sua página. Algumas fontes possuem vários efeitos, como itálico, negrito,</p><p>sublinhado, efeito especial, entre outros. Para habilitar esses efeitos, basta incluí-los na tag "link"</p><p>que você usa para incorporar a fonte na sua página.</p><p>Primeiro adicione à API do Google e, em seguida, adicione um nome de classe especial ao</p><p>elemento que usará o efeito especial. O nome da classe sempre começa e termina com</p><p>.effect=effectnamefont-effect-effectname</p><p>Vejamos como ficam esses efeitos especiais na fonte!</p><p>body {</p><p>font-family: "Sofia", sans-serif;</p><p>font-size: 30px;</p><p>}</p><p>Neon Effect</p><p>Outline Effect</p><p>Emboss Effect</p><p>Multiple Shadow Effect</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>225</p><p>428</p><p>Regras de emparelhamento de fontes</p><p>As regras de emparelhamento de fontes são usadas para escolher fontes que tenham uma boa</p><p>combinação entre si, com base em características como altura de linha, largura, espessura e</p><p>outros atributos visuais. Vejamos as regras básicas.</p><p>1. Complemento</p><p>É sempre seguro encontrar pares de fontes que se complementam. Uma ótima combinação de</p><p>fontes deve harmonizar, sem ser muito parecida ou muito diferente.</p><p>2. Use superfamílias de fontes</p><p>Uma superfamília de fontes é um conjunto de fontes projetadas para funcionar bem juntas.</p><p>Portanto, usar fontes diferentes dentro da mesma superfamília é seguro. Por exemplo, a</p><p>superfamília Lucida contém as seguintes fontes: Lucida Sans, Lucida Serif, Lucida Typewriter Sans,</p><p>Lucida Typewriter Serif e Lucida Math.</p><p>3. O contraste é rei</p><p>Duas fontes muito semelhantes geralmente entrarão em conflito. No entanto, os contrastes,</p><p>feitos da maneira certa, trazem o melhor de cada fonte. Exemplo: Combinar serif com sans serif</p><p>é uma combinação bem conhecida. Uma superfamília forte inclui variações com serifa e sem serifa</p><p>da mesma fonte (por exemplo, Lucida e Lucida Sans).</p><p>4. Escolha apenas um chefe</p><p>Uma fonte deve ser o chefe. Isso estabelece uma hierarquia para as fontes em sua página. Isso</p><p>pode ser conseguido variando o tamanho, peso e cor.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>226</p><p>428</p><p>5. Escolha fontes que tenham uma altura de linha semelhante: Isso ajuda a manter a consistência</p><p>e legibilidade em todo o texto.</p><p>6. Escolha fontes que tenham uma largura semelhante: Isso ajuda a garantir que o texto seja fácil</p><p>de ler e que as palavras não sejam muito compactadas ou espaçadas.</p><p>7. Escolha fontes que tenham uma espessura semelhante. Isso ajuda a manter um equilíbrio visual</p><p>entre o texto e a fonte, garantindo que a fonte não seja muito pesada ou muito leve em relação</p><p>ao texto.</p><p>8. Escolha fontes que tenham uma personalidade semelhante. Isso pode incluir coisas como a</p><p>forma dos caracteres, a inclinação das letras, ou outros detalhes estilísticos que fazem com que</p><p>as fontes pareçam coesas quando usadas juntas.</p><p>9. Escolha fontes que tenham um contraste visual adequado. Isso significa escolher fontes que</p><p>se destaquem o suficiente uma da outra, mas não tanto que causem distração ou dificultem a</p><p>leitura.</p><p>Ao escolher fontes para usar juntas em um projeto, é importante ter em mente essas regras de</p><p>emparelhamento para garantir que as fontes escolhidas sejam legíveis, visualmente agradáveis e</p><p>combinem bem entre si.</p><p>Para encurtar o código, também é possível especificar todas as propriedades de fonte individuais</p><p>em uma propriedade. A propriedade font é uma propriedade abreviada para:</p><p>• font-style</p><p>• font-variant</p><p>• font-weight</p><p>• font-size/line-height</p><p>• font-family</p><p>Os valores font-sizee font-family são obrigatórios. Se um dos outros valores estiver ausente, seu</p><p>valor padrão será usado.</p><p>Fontes CSS Descrição</p><p>font Define todas as propriedades da fonte em uma declaração</p><p>font-family Especifica a família de fontes para texto</p><p>font-size Especifica o tamanho da fonte do texto</p><p>font-style Especifica o estilo de fonte do texto</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>227</p><p>428</p><p>font-variant</p><p>Especifica se um texto deve ou não ser exibido em uma fonte</p><p>minúscula</p><p>font-weight Especifica o peso de uma fonte</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>228</p><p>428</p><p>Ícones de CSS</p><p>Os ícones podem ser facilmente adicionados à sua página HTML, usando uma biblioteca de</p><p>ícones.</p><p>• Fontes de ícones: Utilizando fontes de ícones como Font Awesome, Glyphicons, etc.</p><p>• Imagens: Adicionando imagens através de URLs ou arquivos locais.</p><p>• SVG: Inserindo imagens SVG diretamente no HTML ou através de arquivos externos.</p><p>• CSS pseudo-elementos: Utilizando pseudo-elementos como :before ou :after para criar</p><p>ícones usando CSS.</p><p>Como adicionar ícones? A maneira mais simples de adicionar um ícone à sua página HTML é com</p><p>uma biblioteca de ícones, como Font Awesome. Adicione o nome da classe de ícone especificada</p><p>a qualquer elemento HTML embutido (como ou ). Todos os ícones nas bibliotecas de</p><p>ícones abaixo são vetores escaláveis que podem ser personalizados com CSS (tamanho, cor,</p><p>sombra, etc.)</p><p>Fontes de Ícones Incríveis</p><p>Para usar os ícones do Font Awesome, acesse</p><p>fontawesome.com, faça login e obtenha um código para</p><p>adicionar na seção de sua página HTML:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>229</p><p>428</p><p>Ícones do Bootstrap</p><p>Para usar os glyphicons do Bootstrap, adicione</p><p>a seguinte linha dentro da seção de sua</p><p>página HTML:</p><p>ad</p><p>ic</p><p>io</p><p>na</p><p>r</p><p>íc</p><p>on</p><p>es</p><p>Fontes de ícones: Utilizando fontes de ícones como Font Awesome, Glyphicons, etc</p><p>Imagens: Adicionando imagens através de URLs ou arquivos locais.</p><p>SVG: Inserindo imagens SVG diretamente no HTML ou através de arquivos externos.</p><p>CSS pseudo-elementos: Utilizando pseudo-elementos como :before ou :after para criar</p><p>ícones usando CSS.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>230</p><p>428</p><p>Links CSS</p><p>Com CSS, os links podem ser estilizados de várias maneiras</p><p>diferentes. Os links podem ser estilizados com qualquer</p><p>propriedade CSS (por exemplo color, font-family,</p><p>background, etc.). Veja na imagem um link com a cor hotpink.</p><p>a {</p><p>color: hotpink;</p><p>}</p><p>Além disso, os links podem ter estilos diferentes, dependendo do estado em que estão.</p><p>Os quatro estados dos links são:</p><p>• a:link- um link normal não visitado</p><p>• a:visited- um link que o usuário visitou</p><p>• a:hover- um link quando o usuário passa o mouse sobre ele</p><p>• a:active- um link no momento em que é clicado</p><p>/* unvisited link */</p><p>a:link {</p><p>color: red;</p><p>}</p><p>/* visited link */</p><p>a:visited {</p><p>color: green;</p><p>}</p><p>/* mouse over link */</p><p>a:hover {</p><p>color: hotpink;</p><p>}</p><p>/* selected link */</p><p>a:active {</p><p>color: blue;</p><p>}</p><p>Ao definir o estilo para vários estados de link, existem algumas regras de ordem:</p><p>• a:hover DEVE vir depois de a:link e a:visited</p><p>• a:active DEVE vir depois de a:hover</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>231</p><p>428</p><p>Decoração de texto</p><p>A propriedade text-decoration é usada principalmente para remover sublinhados de links:</p><p>a:link {</p><p>text-decoration: none;</p><p>}</p><p>a:visited {</p><p>text-decoration: none;</p><p>}</p><p>a:hover {</p><p>text-decoration: underline;</p><p>}</p><p>a:active {</p><p>text-decoration: underline;</p><p>}</p><p>Cor de fundo</p><p>A background-color propriedade pode ser usada para especificar uma cor de fundo para links:</p><p>a:link {</p><p>background-color: yellow;</p><p>}</p><p>a:visited {</p><p>background-color: cyan;</p><p>}</p><p>a:hover {</p><p>background-color: lightgreen;</p><p>}</p><p>a:active {</p><p>background-color: hotpink;</p><p>}</p><p>Botões de link</p><p>Este exemplo demonstra um exemplo mais avançado onde combinamos várias propriedades CSS</p><p>para exibir links como caixas/botões:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>232</p><p>428</p><p>a:link, a:visited {</p><p>background-color: #f44336;</p><p>color: white;</p><p>padding: 14px 25px;</p><p>text-align: center;</p><p>text-decoration: none;</p><p>display: inline-block;</p><p>}</p><p>a:hover, a:active {</p><p>background-color: red;</p><p>}</p><p>Este exemplo demonstra como adicionar outros estilos aos hiperlinks:</p><p>a.one:link {color: #ff0000;}</p><p>a.one:visited {color: #0000ff;}</p><p>a.one:hover {color: #ffcc00;}</p><p>a.two:link {color: #ff0000;}</p><p>a.two:visited {color: #0000ff;}</p><p>a.two:hover {font-size: 150%;}</p><p>a.three:link {color: #ff0000;}</p><p>a.three:visited {color: #0000ff;}</p><p>a.three:hover {background: #66ff66;}</p><p>a.four:link {color: #ff0000;}</p><p>a.four:visited {color: #0000ff;}</p><p>a.four:hover {font-family: monospace;}</p><p>a.five:link {color: #ff0000; text-decoration: none;}</p><p>a.five:visited {color: #0000ff; text-decoration: none;}</p><p>a.five:hover {text-decoration: underline;}</p><p>Listas de CSS</p><p>Listas não ordenadas:</p><p>o Café</p><p>o Chá</p><p>o Coca Cola</p><p>▪ Café</p><p>▪ Chá</p><p>▪ Coca Cola</p><p>Listas Ordenadas:</p><p>1. Café</p><p>2. Chá</p><p>3. Coca Cola</p><p>I. Café</p><p>II. Chá</p><p>III. Coca Cola</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>233</p><p>428</p><p>Listas HTML e propriedades da lista CSS</p><p>Em HTML, existem dois tipos principais de listas:</p><p>• listas não ordenadas () - os itens da lista são marcados com marcadores</p><p>• listas ordenadas () - os itens da lista são marcados com números ou letras</p><p>As propriedades da lista CSS permitem:</p><p>• Definir diferentes marcadores de itens de lista para listas ordenadas</p><p>• Definir diferentes marcadores de itens de lista para listas não ordenadas</p><p>• Definir uma imagem como marcador de item da lista</p><p>• Adicionar cores de fundo a listas e itens de lista</p><p>Marcadores de itens de lista diferentes</p><p>A propriedade list-style-type especifica o tipo de marcador de item de lista. O exemplo a seguir</p><p>mostra alguns dos marcadores de item de lista disponíveis:</p><p>ul.a {</p><p>list-style-type: circle;</p><p>}</p><p>ul.b {</p><p>list-style-type: square;</p><p>}</p><p>ol.c {</p><p>list-style-type: upper-roman;</p><p>}</p><p>ol.d {</p><p>list-style-type: lower-alpha;</p><p>}</p><p>Uma imagem como marcador de item de lista</p><p>A propriedade list-style-image especifica uma imagem como o marcador de item da lista:</p><p>ul {</p><p>list-style-image: url('sqpurple.gif');</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>234</p><p>428</p><p>Posicione os Marcadores de Item da Lista</p><p>A propriedade list-style-position especifica a posição dos marcadores de item de lista</p><p>(marcadores). "list-style-position: outside;" significa que os marcadores estarão fora do item da</p><p>lista. O início de cada linha de um item de lista será alinhado verticalmente. Este é o padrão:</p><p>"list-style-position: inside;"significa que os marcadores estarão dentro do item da lista. Como faz</p><p>parte do item da lista, ele fará parte do texto e colocará o texto no início:</p><p>ul.a {</p><p>list-style-position: outside;</p><p>}</p><p>ul.b {</p><p>list-style-position: inside;</p><p>}</p><p>Remover configurações padrão</p><p>A list-style-type:nonepropriedade também pode ser usada para remover os</p><p>marcadores/marcadores. Observe que a lista também possui margem e preenchimento padrão.</p><p>Para remover isso, adicione margin:0e padding:0a ou :</p><p>ul {</p><p>list-style-type: none;</p><p>margin: 0;</p><p>padding: 0;</p><p>}</p><p>Lista - Propriedade abreviada</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>235</p><p>428</p><p>A propriedade list-style é uma propriedade abreviada. É usado para definir todas as propriedades</p><p>da lista em uma declaração:</p><p>ul {</p><p>list-style: square inside url("sqpurple.gif");</p><p>}</p><p>Ao usar a propriedade abreviada, a ordem dos valores da propriedade é:</p><p>• list-style-type(se uma imagem de estilo de lista for especificada, o valor desta propriedade</p><p>será exibido se a imagem por algum motivo não puder ser exibida)</p><p>• list-style-position(especifica se os marcadores de itens de lista devem aparecer dentro ou</p><p>fora do fluxo de conteúdo)</p><p>• list-style-image(especifica uma imagem como marcador de item da lista)</p><p>Se um dos valores de propriedade acima estiver faltando, o valor padrão para a propriedade</p><p>ausente será inserido, se houver.</p><p>Lista de estilos com cores</p><p>Também podemos estilizar listas com cores, para torná-las um pouco mais interessantes. Qualquer</p><p>coisa adicionada à tag ou afeta a lista inteira, enquanto as propriedades adicionadas à</p><p>tag afetarão os itens individuais da lista:</p><p>Propriedades de Listas</p><p>CSS</p><p>Descrição</p><p>list-style Define todas as propriedades de uma lista em uma declaração</p><p>list-style-image Especifica uma imagem como marcador de item de lista</p><p>list-style-position Especifica a posição dos marcadores de item de lista (marcadores)</p><p>list-style-type Especifica o tipo de marcador de item de lista</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito</p><p>Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>236</p><p>428</p><p>Tabelas CSS</p><p>A aparência de uma tabela HTML pode ser muito melhorada com CSS! As tabelas em CSS</p><p>podem ser estilizadas usando os seguintes conceitos:</p><p>• CSS table properties: Propriedades como "border-collapse", "border-spacing", "width",</p><p>"height", etc. podem ser usadas para controlar o aspecto de uma tabela.</p><p>• CSS table-cell properties: Propriedades como "text-align", "vertical-align", "padding", etc.</p><p>podem ser usadas para controlar o aspecto das células da tabela.</p><p>• CSS pseudo-classes: Pseudo-classes como ":hover" podem ser usadas para mudar o estilo</p><p>da tabela quando o usuário passa o mouse sobre ela.</p><p>• CSS media queries: Media queries podem ser usadas para criar tabelas responsivas, que se</p><p>adaptam a diferentes tamanhos de tela.</p><p>Ao estilizar tabelas em CSS, é importante lembrar que o estilo da tabela deve ser claro, fácil de ler</p><p>e acessível para todos os usuários.</p><p>As bordas da tabela em CSS podem ser estilizadas usando as seguintes propriedades:</p><p>• border-style: define o estilo da borda (solid, dotted, double, etc.).</p><p>• border-width: define a largura da borda.</p><p>• border-color: define a cor da borda.</p><p>• border-collapse: define se as bordas das células compartilham espaço (collapse) ou não</p><p>(separate).</p><p>• border-spacing: define o espaçamento entre as células na tabela.</p><p>Exemplo:</p><p>table {</p><p>border-collapse: collapse;</p><p>width: 100%;</p><p>}</p><p>th, td {</p><p>border: 1px solid black;</p><p>text-align: left;</p><p>padding: 8px;</p><p>}</p><p>th {</p><p>background-color: #f2f2f2;</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>237</p><p>428</p><p>Neste exemplo, as bordas da tabela são definidas como "collapse", com uma largura de 1px e cor</p><p>preta. As células da tabela têm alinhamento à esquerda e 8px de padding. A célula de cabeçalho</p><p>tem uma cor de fundo cinza claro.</p><p>Uma tabela full-width é uma tabela que ocupa a largura total da tela, independentemente do</p><p>tamanho da janela do navegador. Isso pode ser alcançado usando CSS com as seguintes etapas:</p><p>1. Remover margens e padding da tabela: Isso pode ser feito usando o seguinte código: table</p><p>{ margin: 0; padding: 0; }.</p><p>2. Definir a largura da tabela como 100%: Isso pode ser feito usando o seguinte código: table</p><p>{ width: 100%; }.</p><p>3. Definir a largura de cada coluna da tabela: Isso pode ser feito usando o seguinte código:</p><p>th, td { width: [porcentagem]; } , onde [porcentagem] é a porcentagem da largura total da</p><p>tabela que cada coluna deve ocupar.</p><p>4. Centralizar a tabela na tela: Isso pode ser feito usando o seguinte código: table { margin: 0</p><p>auto; }.</p><p>table {</p><p>margin: 0 auto;</p><p>padding: 0;</p><p>width: 100%;</p><p>}</p><p>th, td {</p><p>width: 25%;</p><p>border: 1px solid black;</p><p>text-align: left;</p><p>padding: 8px;</p><p>}</p><p>th {</p><p>background-color: #f2f2f2;</p><p>}</p><p>Neste exemplo, a tabela é definida com margem automática, sem padding e largura total da tela.</p><p>Cada coluna ocupa 25% da largura total da tabela e tem bordas pretas, alinhamento à esquerda</p><p>e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza claro.</p><p>Recolher bordas da tabela (border-collapse)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>238</p><p>428</p><p>As bordas da tabela podem ser colapsadas usando a propriedade "border-collapse" em CSS. A</p><p>propriedade "border-collapse" determina se as bordas das células da tabela compartilham espaço</p><p>(collapse) ou não (separate).</p><p>Para colapsar as bordas da tabela, você pode usar o seguinte código:</p><p>table {</p><p>border-collapse: collapse;</p><p>width: 100%;</p><p>}</p><p>th, td {</p><p>border: 1px solid black;</p><p>text-align: left;</p><p>padding: 8px;</p><p>}</p><p>th {</p><p>background-color: #f2f2f2;</p><p>}</p><p>Neste exemplo, as bordas da tabela são definidas como "collapse", ou seja, compartilham espaço.</p><p>As células da tabela têm bordas pretas com largura de 1px, alinhamento à esquerda e 8px de</p><p>padding. A célula de cabeçalho tem uma cor de fundo cinza claro.</p><p>Tamanho da Tabela CSS</p><p>O tamanho de uma tabela em CSS pode ser definido usando as seguintes propriedades:</p><p>• width: define a largura da tabela em pixels ou porcentagem.</p><p>• height: define a altura da tabela em pixels ou porcentagem.</p><p>table {</p><p>width: 75%;</p><p>height: 300px;</p><p>margin: 0 auto;</p><p>border-collapse: collapse;</p><p>}</p><p>th, td {</p><p>border: 1px solid black;</p><p>text-align: left;</p><p>padding: 8px;</p><p>}</p><p>th {</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>239</p><p>428</p><p>background-color: #f2f2f2;</p><p>}</p><p>Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. As bordas da tabela são</p><p>definidas como "collapse". As células da tabela têm bordas pretas com largura de 1px,</p><p>alinhamento à esquerda e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza</p><p>claro.</p><p>Alinhamento de Tabela CSS</p><p>O alinhamento de uma tabela em CSS pode ser definido usando as seguintes propriedades:</p><p>1. margin: define a margem ao redor da tabela.</p><p>2. text-align: define o alinhamento do texto nas células da tabela.</p><p>3. vertical-align: define o alinhamento vertical do conteúdo nas células da tabela.</p><p>Exemplo:</p><p>table {</p><p>width: 75%;</p><p>height: 300px;</p><p>margin: 0 auto;</p><p>border-collapse: collapse;</p><p>text-align: center;</p><p>}</p><p>th, td {</p><p>border: 1px solid black;</p><p>text-align: left;</p><p>padding: 8px;</p><p>vertical-align: middle;</p><p>}</p><p>th {</p><p>background-color: #f2f2f2;</p><p>text-align: center;</p><p>}</p><p>Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. A tabela está centralizada</p><p>na tela com margem automática. O texto nas células da tabela está alinhado à esquerda, enquanto</p><p>o texto no cabeçalho está centralizado. O conteúdo nas células da tabela está alinhado ao centro</p><p>verticalmente. As bordas da tabela são definidas como "collapse". As células da tabela têm bordas</p><p>pretas com largura de 1px e 8px de padding. A célula de cabeçalho tem uma cor de fundo cinza</p><p>claro.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>240</p><p>428</p><p>Estilo de Tabela CSS</p><p>O estilo de uma tabela em CSS pode ser definido usando as seguintes propriedades:</p><p>1. border: define o estilo da borda da tabela.</p><p>2. background-color: define a cor de fundo da tabela.</p><p>3. color: define a cor do texto nas células da tabela.</p><p>4. font-size: define o tamanho da fonte do texto nas células da tabela.</p><p>5. padding: define o espaço entre o conteúdo e a borda da célula da tabela.</p><p>Exemplo:</p><p>table {</p><p>width: 75%;</p><p>height: 300px;</p><p>margin: 0 auto;</p><p>border-collapse: collapse;</p><p>text-align: center;</p><p>border: 2px solid blue;</p><p>background-color: #f2f2f2;</p><p>color: black;</p><p>font-size: 14px;</p><p>}</p><p>th, td {</p><p>border: 1px solid blue;</p><p>text-align: left;</p><p>padding: 8px;</p><p>vertical-align: middle;</p><p>}</p><p>th {</p><p>background-color: blue;</p><p>color: white;</p><p>}</p><p>Neste exemplo, a tabela tem 75% da largura da tela e 300px de altura. A tabela está centralizada</p><p>na tela com margem automática. A borda da tabela é azul com largura de 2px, a cor de fundo é</p><p>cinza claro e a cor do texto é preta. O tamanho da fonte do texto nas células da tabela é 14px. As</p><p>bordas das células da tabela são azul com largura de 1px, o texto nas células da tabela está</p><p>alinhado à esquerda, o conteúdo nas células da tabela está alinhado ao centro verticalmente e há</p><p>8px de padding entre o conteúdo e a borda da célula da tabela. A célula de cabeçalho tem uma</p><p>cor de fundo azul e a cor do texto é branca.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular</p><p>(Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>241</p><p>428</p><p>Tabela Responsiva CSS</p><p>A tabela responsiva é uma tabela que se adapta ao tamanho da tela, tornando-a legível em</p><p>dispositivos de diferentes tamanhos, como computadores, tablets e smartphones. Isso é alcançado</p><p>usando CSS (Folha de Estilo em cascata) e media queries. As media queries são usadas para</p><p>detectar o tamanho da tela e aplicar estilos específicos para diferentes intervalos de tamanho de</p><p>tela. Por exemplo, você pode fazer com que as colunas da tabela sejam exibidas uma abaixo da</p><p>outra em dispositivos menores.</p><p>Propriedades de</p><p>Tabelas CSS</p><p>Descrição</p><p>border Define todas as propriedades de borda em uma declaração</p><p>border-collapse Especifica se as bordas da tabela devem ou não ser recolhidas</p><p>border-spacing Especifica a distância entre as bordas das células adjacentes</p><p>caption-side Especifica o posicionamento de uma legenda de tabela</p><p>empty-cells Especifica se deve ou não exibir bordas e fundo em células vazias em</p><p>uma tabela</p><p>table-layout Define o algoritmo de layout a ser usado para uma tabela</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>242</p><p>428</p><p>Layout CSS - A propriedade de exibição</p><p>A propriedade de exibição display especifica se/como um elemento é exibido. Cada elemento</p><p>HTML tem um valor de exibição padrão, dependendo do tipo de elemento. O valor de exibição</p><p>padrão para a maioria dos elementos é blockou inline.</p><p>Elementos de nível de bloco</p><p>Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura</p><p>disponível (estende-se para a esquerda e para a direita o máximo possível).</p><p>O elemento é um elemento de nível de bloco. Exemplos de elementos de nível de bloco:</p><p>Elementos embutidos</p><p>Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária. Exemplos</p><p>de elementos embutidos:</p><p>display: none; é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-</p><p>los e recriá-los. display: none é uma propriedade de CSS que especifica que um elemento HTML</p><p>não deve ser exibido na página. Esse valor oculta completamente o elemento, incluindo todo o</p><p>espaço que ele ocuparia.</p><p>Ao usar display: none, o elemento não é renderizado pelo navegador, o que pode ajudar a otimizar</p><p>o desempenho da página. Além disso, você pode usar JavaScript para alterar o valor de display</p><p>de um elemento de none para block ou outro valor de exibição, mostrando ou ocultando o</p><p>elemento dinamicamente.</p><p>elementos de nível de bloco</p><p>-</p><p>elementos embutidos</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>243</p><p>428</p><p>Note que o elemento com display: none ainda existe no DOM, mas não é visível na página. Se</p><p>você precisar ocultar um elemento apenas temporariamente ou alternar sua exibição, pode usar</p><p>outras propriedades, como visibility ou opacity, em vez de display: none.</p><p>display: inline é um valor de CSS que especifica que um elemento HTML deve ser exibido como</p><p>uma linha de texto. Isso significa que o elemento ocupará apenas o espaço necessário para exibir</p><p>seu conteúdo, sem quebrar para a próxima linha.</p><p>Ao usar display: inline, o elemento é exibido na mesma linha que outros elementos inline ao seu</p><p>redor, como links e palavras em negrito. Além disso, o tamanho do elemento é determinado pelo</p><p>seu conteúdo, e as propriedades width e height não são aplicadas.</p><p>Note que os elementos inline só podem conter outros elementos inline, e não elementos de bloco,</p><p>como parágrafos ou divs. Se você precisar exibir um elemento como um bloco, pode usar display:</p><p>block ou display: inline-block.</p><p>display: block é um valor de CSS que especifica que um elemento HTML deve ser exibido como</p><p>um bloco de conteúdo. Isso significa que o elemento ocupará toda a largura disponível de seu</p><p>container e será exibido em uma nova linha, separado dos outros elementos.</p><p>Ao usar display: block, o elemento é exibido como um bloco independente, com largura e altura</p><p>definidas pelas propriedades width e height, ou automaticamente pelo conteúdo. Além disso,</p><p>você pode controlar a margem, borda e padding do elemento para definir o espaçamento em</p><p>torno dele.</p><p>Note que os elementos de bloco só podem conter outros elementos de bloco ou elementos inline,</p><p>e não elementos inline como links ou palavras em negrito. Se você precisar exibir um elemento</p><p>como uma linha, pode usar display: inline ou display: inline-block.</p><p>visibility: hidden é uma propriedade de CSS que especifica que um elemento HTML deve ser</p><p>oculto na página, mas ainda ocupar o espaço que ele ocuparia se estivesse visível. Isso significa</p><p>que os elementos adjacentes a ele serão realocados para preencher o espaço vago.</p><p>Ao usar visibility: hidden, o elemento é renderizado pelo navegador, mas fica invisível. Além disso,</p><p>você pode usar JavaScript para alterar o valor de visibility de um elemento de hidden para visible,</p><p>mostrando o elemento dinamicamente.</p><p>Note que o elemento com visibility: hidden ainda existe no DOM e pode afetar o layout da página.</p><p>Se você precisar remover completamente um elemento da página, pode usar a propriedade</p><p>display: none.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>244</p><p>428</p><p>display:flex é um valor de CSS que transforma um elemento HTML em um container flexível. Isso</p><p>significa que os elementos filhos dentro desse container podem ser alinhados em diferentes</p><p>direções e dimensionados de acordo com a largura ou altura disponíveis.</p><p>Ao usar display: flex, você pode controlar como os elementos filhos são dispostos usando</p><p>propriedades CSS como justify-content, align-items, flex-wrap e flex-direction. Por exemplo, você</p><p>pode centralizar elementos filhos vertical e horizontalmente, controlar se eles devem quebrar para</p><p>a próxima linha ou não, e definir a direção do fluxo dos elementos.</p><p>O uso de display: flex é muito útil para criar layouts flexíveis e responsivos, onde os elementos</p><p>precisam se ajustar a diferentes tamanhos de tela e resoluções de dispositivos.</p><p>Substituir o valor de exibição padrão</p><p>Conforme mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode</p><p>substituir isso. Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil</p><p>para fazer a página parecer de uma maneira específica e ainda seguir os padrões da web. Um</p><p>exemplo comum é criar elementos embutidos para menus horizontais:</p><p>Propriedades de</p><p>Exibição CSS</p><p>Descrição</p><p>display Especifica como um elemento deve ser exibido</p><p>visibility Especifica se um elemento deve ou não ser visível</p><p>Largura e Largura Máxima</p><p>Um elemento de nível de bloco sempre ocupa toda a largura disponível (estende-se para a</p><p>esquerda e para a direita o máximo possível). Definir o width de um elemento de nível de bloco</p><p>impedirá que ele se estenda até as bordas de seu contêiner. Em seguida, você pode definir as</p><p>margens como automáticas, para centralizar horizontalmente o elemento em seu contêiner. O</p><p>elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as</p><p>duas margens:</p><p>Usar max-width em vez disso, nessa situação, melhorará o manuseio de janelas pequenas pelo</p><p>navegador. Isso é importante ao tornar um site utilizável em pequenos dispositivos.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>245</p><p>428</p><p>A propriedade de posição</p><p>A propriedade CSS "position" é usada para definir como um elemento HTML é posicionado em</p><p>relação ao seu elemento pai ou à página (estático, relativo, fixo, absoluto ou fixo).</p><p>. As opções de posição incluem:</p><p>• static: o elemento é posicionado de acordo com o fluxo normal do documento (padrão)</p><p>• relative: o elemento é posicionado em relação a sua posição normal, permitindo o uso de</p><p>"top", "right", "bottom" e "left" para mover o elemento a partir da sua posição original</p><p>• fixed: o elemento é posicionado em relação à janela do navegador e não se move quando</p><p>a página é rolada.</p><p>• absolute: o elemento é posicionado em relação ao primeiro elemento pai com posição não-</p><p>estática (se não houver, será posicionado em relação à janela do navegador)</p><p>• sticky: o elemento é posicionado de forma semelhante ao "relative" até que ele atinja uma</p><p>certa posição na tela, a partir daí ele se comporta como "fixed".</p><p>Os elementos são então posicionados usando as propriedades superior, inferior, esquerda e</p><p>direita. No entanto, essas propriedades não funcionarão, a menos que a propriedade position seja</p><p>definida primeiro. Eles também funcionam de forma diferente, dependendo do valor da posição.</p><p>position: static;</p><p>Os elementos HTML são posicionados estáticos por padrão. Os elementos posicionados estáticos</p><p>não são afetados pelas propriedades superior, inferior, esquerda e direita.</p><p>Um elemento com position: static;não é posicionado de nenhuma maneira especial; está sempre</p><p>posicionado de acordo com o fluxo normal da página:</p><p>position: relative;</p><p>Um elemento com position: relative;é posicionado em relação à sua posição normal.</p><p>Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente</p><p>posicionado fará com que ele seja ajustado para longe de sua posição normal. Outros conteúdos</p><p>não serão ajustados para caber em qualquer lacuna deixada pelo elemento.</p><p>position: fixed;</p><p>Um elemento com position: fixed; é posicionado em relação à viewport, o que significa que ele</p><p>sempre permanece no mesmo lugar, mesmo que a página seja rolada. As propriedades superior,</p><p>direita, inferior e esquerda são usadas para posicionar o elemento. Um elemento fixo não deixa</p><p>uma lacuna na página onde normalmente estaria localizado.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>246</p><p>428</p><p>position: absolute;</p><p>Um elemento com position: absolute;é posicionado em relação ao ancestral posicionado mais</p><p>próximo (em vez de posicionado em relação à viewport, como fixo).</p><p>No entanto; se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usará o</p><p>corpo do documento e se moverá junto com a rolagem da página.</p><p>position: sticky;</p><p>Um elemento com position: sticky; é posicionado com base na posição de rolagem do usuário.</p><p>Um elemento fixo alterna entre relative e fixed, dependendo da posição de rolagem. Ele é</p><p>posicionado relativo até que uma determinada posição de deslocamento seja encontrada na</p><p>viewport - então ele "gruda" no lugar (como position:fixed).</p><p>Aaaantes de partir para o próximo tópico, vamos retomar as propriedades de posição em CSS!</p><p>Essas propriedades permitem controlar a localização de elementos HTML em relação a outros</p><p>elementos ou à página. As principais propriedades de posição são "position", "top", "right",</p><p>"bottom" e "left". A propriedade "position" define se um elemento é posicionado de acordo com</p><p>o fluxo normal do documento (static), em relação a sua posição normal (relative), em relação ao</p><p>primeiro elemento pai com posição não-estática (absolute) ou fixo em relação à janela do</p><p>navegador (fixed). As propriedades "top", "right", "bottom" e "left" são usadas para ajustar a</p><p>posição de um elemento em relação ao seu elemento pai ou à página.</p><p>Propriedades de</p><p>Posição CSS</p><p>Descrição</p><p>bottom Define a borda da margem inferior para uma caixa posicionada</p><p>clip Corta um elemento absolutamente posicionado</p><p>left Define a borda da margem esquerda para uma caixa posicionada</p><p>position Especifica o tipo de posicionamento de um elemento</p><p>right Define a borda da margem direita para uma caixa posicionada</p><p>top Define a borda da margem superior para uma caixa posicionada</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>247</p><p>428</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>248</p><p>428</p><p>A propriedade z-index</p><p>A propriedade CSS "z-index" é usada para controlar a ordem de sobreposição de elementos</p><p>HTML na tela. Elementos com um valor de "z-index" mais alto são exibidos "acima" de elementos</p><p>com um valor de "z-index" mais baixo. A propriedade "z-index" só tem efeito se a propriedade</p><p>"position" for definida como "absolute", "relative" ou "fixed". O valor padrão é "auto", o que</p><p>significa que o navegador decide a ordem de sobreposição baseado no fluxo normal do</p><p>documento. Valores positivos colocam o elemento mais à frente, enquanto valores negativos</p><p>colocam o elemento mais atrás.</p><p>Sem índice z! Mas prof, o que acontece se dois elementos posicionados se sobrepõem sem um z-</p><p>index especificado? Neste caso, o elemento definido por último no código HTML será mostrado</p><p>no topo.</p><p>Para usar a propriedade "z-index", você precisa primeiro definir a propriedade "position" do</p><p>elemento como "absolute", "relative" ou "fixed". Em seguida, defina o "z-index" com um número</p><p>inteiro. Valores positivos colocam o elemento mais à frente, enquanto valores negativos o colocam</p><p>mais atrás. O valor padrão é "auto", o que significa que o navegador decidirá a ordem de</p><p>sobreposição baseado no fluxo normal do documento.</p><p>Observe que o "z-index" só tem efeito em elementos que estão em posições diferentes. Se dois</p><p>elementos tiverem a mesma posição, o navegador decidirá qual deles está mais à frente com base</p><p>na ordem deles no código HTML. Além disso, o "z-index" não funcionará em elementos estáticos</p><p>(com "position: static").</p><p>(FCC – TRT - 4ª REGIÃO (RS) – 2022) Quando um Técnico criou uma página web usando HTML e</p><p>CSS, um elemento ficou sobreposto ao outro na tela e ele deseja inverter a ordem de sobreposição</p><p>desses elementos. Para definir ou mudar a ordem de sobreposição dos elementos ele deve utilizar</p><p>a propriedade CSS</p><p>a) z-index</p><p>b) inverter</p><p>c) position</p><p>d) flex-position</p><p>e) x-order</p><p>Comentários: Quando se fala em ordem de sobreposição de elementos HTML estamos falando</p><p>sobre a propriedade z-index. Lembre-se que A propriedade CSS "z-index" é usada para controlar</p><p>a ordem de sobreposição de elementos HTML na tela. Elementos com um valor de "z-index" mais</p><p>alto são exibidos "acima" de elementos com um valor de "z-index" mais baixo. (Gabarito: Letra</p><p>A)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>249</p><p>428</p><p>Overflow</p><p>A propriedade CSS "overflow" controla o que acontece quando o conteúdo de um elemento</p><p>HTML excede suas dimensões definidas, ou seja, conteúdo é grande demais para caber em uma</p><p>área. A propriedade "overflow" pode ter os seguintes valores:</p><p>• visible: o conteúdo é exibido fora do elemento, sem cortar ou rolar.</p><p>• hidden: o conteúdo é cortado, ou seja, o que ultrapassar as bordas do elemento não será</p><p>exibido.</p><p>• scroll: uma barra de rolagem é adicionada ao elemento, permitindo que o usuário role e</p><p>veja o conteúdo que está fora das dimensões visíveis.</p><p>• auto: se o conteúdo ultrapassar as dimensões do elemento, uma barra de rolagem será</p><p>adicionada. Se o conteúdo couber, nenhuma barra de rolagem será exibida.</p><p>Observe que o "overflow" pode ser definido tanto para o eixo x (horizontal) quanto para o eixo y</p><p>(vertical), usando as propriedades "overflow-x" e "overflow-y". Além disso, é possível usar a</p><p>propriedade "overflow: scroll" para forçar a exibição de uma barra de rolagem, mesmo que o</p><p>conteúdo não ultrapasse as dimensões do elemento.</p><p>A propriedade overflow especifica se deve cortar o conteúdo ou adicionar barras de rolagem</p><p>quando o conteúdo de um elemento for muito grande para caber na área especificada.</p><p>Por padrão, o overflow é visible, o que significa que não é recortado e é renderizado fora da caixa</p><p>do elemento. Por outro lado, com o valor hidden, o overflow é recortado e o restante do conteúdo</p><p>é ocultado.</p><p>Ademais, definindo o valor como scroll, o overflow é cortado e uma barra de rolagem é adicionada</p><p>para rolar dentro da caixa. Observe que isso adicionará uma barra de rolagem horizontal e</p><p>verticalmente (mesmo que você não precise dela)</p><p>O valor auto é semelhante a scroll, mas adiciona barras de rolagem somente quando necessário.</p><p>Propriedades de</p><p>Posição CSS</p><p>Descrição</p><p>overflow</p><p>Especifica o que acontece se o conteúdo ultrapassar a caixa de um</p><p>elemento</p><p>overflow-wrap</p><p>Especifica se o navegador pode ou não quebrar linhas com palavras</p><p>longas, caso elas transbordem seu contêiner</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>250</p><p>428</p><p>overflow-x</p><p>Especifica o que fazer com as bordas esquerda/direita do conteúdo</p><p>se ele ultrapassar a área de conteúdo do elemento</p><p>overflow-y</p><p>Especifica o que fazer com as bordas superior/inferior do conteúdo</p><p>se ele ultrapassar a área de conteúdo do elemento</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>251</p><p>428</p><p>Layout CSS: Float and clear</p><p>As propriedades CSS "float" e "clear" são</p><p>usadas para controlar o layout de elementos</p><p>HTML na página. A propriedade "float" define se</p><p>um elemento deve flutuar à esquerda ou à</p><p>direita, (a imagem ao lado está a esquerda!)</p><p>permitindo que outros elementos sejam exibidos</p><p>ao seu lado. Por exemplo, uma imagem pode ser</p><p>definida com "float: left" para que o texto ao seu</p><p>lado seja exibido ao seu redor. Se vários</p><p>elementos tiverem a propriedade "float", eles serão organizados lado a lado, na ordem em que</p><p>aparecem no código HTML.</p><p>A propriedade CSS "float" pode ter três valores principais:</p><p>• "left": flutua o elemento para a esquerda e o posiciona na linha horizontal, permitindo que</p><p>outros elementos sejam exibidos ao seu lado, na direita.</p><p>• "right": flutua o elemento para a direita e o posiciona na linha horizontal, permitindo que</p><p>outros elementos sejam exibidos ao seu lado, na esquerda.</p><p>• "none": não flutua o elemento e mantém-no no fluxo normal da página.</p><p>Além desses valores, a propriedade "float" também pode ter o valor "inherit", que herda o valor</p><p>da propriedade "float" do elemento pai.</p><p>A propriedade "float: left" é comumente utilizada para posicionar elementos HTML na linha</p><p>horizontalmente, flutuando-os para a esquerda. Quando um elemento é definido com "float: left",</p><p>ele é retirado do fluxo normal da página e posicionado na esquerda da página, ocupando apenas</p><p>o espaço necessário para o seu conteúdo. Os elementos subsequentes são então exibidos ao seu</p><p>lado, na direita. É importante destacar que elementos com "float" não afetam o tamanho de seus</p><p>elementos pais, por isso é comum utilizar a propriedade "clear" em conjunto para garantir que</p><p>outros elementos não fiquem sobrepostos aos elementos flutuantes. Assim também ocorre para</p><p>o "float:right".</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>252</p><p>428</p><p>A propriedade "clear" define se um elemento</p><p>deve ser colocado abaixo de elementos flutuantes</p><p>anteriores. Por exemplo, se você tem uma</p><p>imagem flutuando à esquerda e deseja que o</p><p>próximo parágrafo comece abaixo da imagem,</p><p>você pode definir "clear: left" para o parágrafo. A</p><p>propriedade "clear" pode ter os valores "left",</p><p>"right", "both" ou "none". (A imagem agora está</p><p>à direita!)</p><p>Observe que a propriedade "float" é útil para criar</p><p>layouts simples, mas pode ser difícil de controlar</p><p>em situações mais complexas. Alternativas mais modernas incluem o uso de flexbox e grid.</p><p>Frisando que a propriedade float pode ter um dos seguintes valores:</p><p>• left- O elemento flutua à esquerda de seu contêiner</p><p>• right- O elemento flutua à direita de seu contêiner</p><p>• none- O elemento não flutua (será exibido apenas onde ocorre no texto). Isso é padrão</p><p>• inherit- O elemento herda o valor float de seu pai</p><p>Em seu uso mais simples, a propriedade float pode ser usada para quebrar texto em torno de</p><p>imagens.</p><p>A propriedade CSS "clear"</p><p>A propriedade CSS "clear" é usada para controlar a posição de um elemento em relação a</p><p>elementos flutuantes anteriores. A propriedade "clear" tem os seguintes valores:</p><p>• left: o elemento não pode ser colocado à esquerda de um elemento flutuante.</p><p>• right: o elemento não pode ser colocado à direita de um elemento flutuante.</p><p>• both: o elemento não pode ser colocado à esquerda ou à direita de um elemento flutuante.</p><p>• none: o elemento pode ser colocado ao lado de um elemento flutuante.</p><p>Por exemplo, se você tem uma imagem flutuando à esquerda e deseja que o próximo parágrafo</p><p>comece abaixo da imagem, você pode definir "clear: left" para o parágrafo. Isso garantirá que o</p><p>parágrafo não seja colocado ao lado da imagem, mas sim abaixo dela.</p><p>Por fim, vamos relembrar, float especifica se um elemento deve flutuar à esquerda, à direita ou</p><p>não flutuar. Valores possíveis são "left", "right" ou "none".</p><p>Por outro lado, clear especifica se um elemento deve ser colocado abaixo de elementos flutuantes</p><p>anteriores. Valores possíveis são "left", "right", "both" ou "none".</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>253</p><p>428</p><p>Observe que estas são as duas principais propriedades relacionadas a "float". Há outras</p><p>propriedades menos comuns, como "float-offset", que são usadas em situações específicas. É</p><p>importante ter em mente que o uso de "float" para o layout pode ser limitante em algumas</p><p>situações e alternativas mais modernas, como o uso de flexbox e grid, devem ser consideradas.</p><p>Propriedades de</p><p>Posição CSS</p><p>Descrição</p><p>box-sizing Define como a largura e a altura de um elemento são calculadas:</p><p>devem incluir preenchimento e bordas ou não</p><p>clear Especifica o que deve acontecer com o elemento que está ao lado de</p><p>um elemento flutuante</p><p>float Especifica se um elemento deve flutuar para a esquerda, direita ou</p><p>nada</p><p>overflow Especifica o que acontece se o conteúdo ultrapassar a caixa de um</p><p>elemento</p><p>overflow-x Especifica o que fazer com as bordas esquerda/direita do conteúdo</p><p>se ele ultrapassar a área de conteúdo do elemento</p><p>overflow-y Especifica o que fazer com as bordas superior/inferior do conteúdo</p><p>se ele ultrapassar a área de conteúdo do elemento</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>254</p><p>428</p><p>Layout CSS: display: inline-block</p><p>O valor CSS "display: inline-block" é usado para criar um elemento que se comporta como um</p><p>elemento em linha (inline), mas que também pode ter uma largura e altura definidas, como um</p><p>elemento em bloco (block).</p><p>display: inline-block é uma propriedade CSS que especifica o comportamento de exibição de um</p><p>elemento HTML. O valor inline-block cria um contêiner de</p><p>bloco de nível inline. Os elementos com</p><p>esse valor são colocados alinhados com o texto e outros elementos, mas se comportam como um</p><p>elemento de nível de bloco, permitindo que largura, altura e preenchimento sejam definidos. Isso</p><p>torna o bloco embutido útil para criar elementos flexíveis e de tamanho ajustável que podem ser</p><p>usados em layouts com muito texto.</p><p>"inline-block" é uma opção útil quando você precisa que um elemento se comporte como um</p><p>bloco, mas ainda precisa que ele seja exibido na linha, como quando você precisa alinhar</p><p>elementos horizontalmente. Além disso, ele também permite que você especifique a largura e a</p><p>altura de um elemento, bem como ajustes de margem, padding e borda, o que não é possível</p><p>com elementos "inline".</p><p>Normalmente, os elementos em bloco preenchem toda a largura da linha, mas com "display:</p><p>inline-block", o elemento pode ser definido com uma largura específica, permitindo que outros</p><p>elementos sejam posicionados ao lado dele na mesma linha. Isso pode ser útil para criar layouts</p><p>de página com elementos alinhados horizontalmente.</p><p>O "display: inline-block" também permite que o elemento tenha margens, preenchimento e</p><p>bordas, ao contrário dos elementos em linha que não podem ter largura e altura definidas, nem</p><p>bordas ou margens.</p><p>No entanto, é importante lembrar que o "display: inline-block" adiciona um espaçamento em</p><p>branco à direita do elemento, que pode causar problemas de layout. Para evitar isso, é possível</p><p>remover o espaço em branco ou definir uma largura menor para o elemento.</p><p>Além disso, é importante lembrar que o "display: inline-block" não é a solução ideal para todos</p><p>os layouts de página e pode ter limitações em relação à flexibilidade do layout. Em vez disso, pode</p><p>ser necessário combinar várias propriedades CSS para obter o resultado desejado.</p><p>Os valores CSS "inline", "inline-block" e "block" são usados para definir como um elemento HTML</p><p>é exibido na página.</p><p>• "display: inline" é usado para elementos que devem ser exibidos em uma linha, como texto</p><p>ou links. Isso significa que eles não podem ter uma largura ou altura definida e não podem</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>255</p><p>428</p><p>ter margens ou preenchimentos em todas as direções. Os elementos em linha são</p><p>dimensionados automaticamente com base no conteúdo que eles contêm.</p><p>• "display: inline-block" é usado para elementos que precisam de uma largura e altura</p><p>definidas, mas também precisam ser exibidos em uma linha. Isso permite que esses</p><p>elementos sejam posicionados horizontalmente, permitindo que outros elementos sejam</p><p>posicionados ao lado deles na mesma linha. Eles também podem ter margens,</p><p>preenchimento e bordas definidos.</p><p>• "display: block" é usado para elementos que devem ser exibidos em blocos separados,</p><p>ocupando toda a largura disponível. Isso significa que eles podem ter uma largura e altura</p><p>definidas e podem ter margens, preenchimento e bordas em todas as direções. Os</p><p>elementos em bloco são geralmente usados para definir seções maiores de conteúdo na</p><p>página, como parágrafos, cabeçalhos, listas e divs.</p><p>Em resumo, "inline" é usado para elementos que devem ser exibidos em uma linha, "inline-block"</p><p>é usado para elementos que precisam de uma largura e altura definidas e "block" é usado para</p><p>elementos que devem ser exibidos em blocos separados, ocupando toda a largura disponível.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>256</p><p>428</p><p>Alinhamento</p><p>Alinhamento horizontal:</p><p>• text-align: Alinha o texto dentro de um elemento (esquerda, direita, centralizado ou</p><p>justificado).</p><p>• margin: Adiciona espaço ao redor de um elemento, que pode ser usado para centralizar</p><p>horizontalmente um elemento definindo margin: auto em ambos os lados.</p><p>• display: flex e justifique-conteúdo: quando aplicado a um elemento de contêiner, isso cria</p><p>um layout de flexbox e permite o alinhamento horizontal de elementos filho usando a</p><p>propriedade de justify-content (esquerda, direita, centro, espaço entre, espaço ao redor).</p><p>Alinhamento vertical:</p><p>• vertical-align: Alinha elementos de nível embutido e célula de tabela (topo, meio, fundo).</p><p>• line-height: especifica a altura de uma linha de texto, que pode ser usada para centralizar</p><p>o texto verticalmente em um elemento.</p><p>• display: flex and align-items: quando aplicado a um elemento container, isso cria um layout</p><p>flexbox e permite o alinhamento vertical de elementos filho usando a propriedade align-</p><p>items (top, middle, bottom, stretch).</p><p>• display: table-cell e vertical-align: Definir um container e seus filhos para display: table-cell</p><p>e vertical-align permite o alinhamento vertical como uma tabela.</p><p>Elementos de Alinhamento Central</p><p>Existem várias maneiras de alinhar elementos ao centro de uma página ou contêiner usando CSS,</p><p>incluindo:</p><p>Elementos de</p><p>Alinhamento Central</p><p>Descrição</p><p>Margens automáticas</p><p>Definir margens automáticas para os lados esquerdo e direito de um</p><p>elemento fará com que ele seja centralizado horizontalmente</p><p>margin: 0 auto;</p><p>Transformação</p><p>É possível usar a propriedade "transform" para centralizar vertical e</p><p>horizontalmente um elemento.</p><p>transform: translate(-50%, -50%);</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>257</p><p>428</p><p>Flexbox</p><p>Usando a propriedade "display: flex" em um contêiner, é possível</p><p>centralizar os itens dentro dele usando as propriedades "justify-</p><p>content" e "align-items". Por exemplo:</p><p>.container {</p><p>display: flex;</p><p>justify-content: center;</p><p>align-items: center;</p><p>}</p><p>Grid</p><p>Usando a propriedade "display: grid" em um contêiner, é possível</p><p>centralizar os itens dentro dele usando a propriedade "place-items".</p><p>Por exemplo:</p><p>.container {</p><p>display: grid;</p><p>place-items: center;</p><p>}</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>258</p><p>428</p><p>CSS Combinators</p><p>Combinadores CSS são símbolos usados para combinar seletores para direcionar elementos</p><p>específicos em uma página da web. Eles permitem selecionar elementos com base em suas</p><p>relações com outros elementos. Existem quatro tipos de combinadores:</p><p>1. Combinador descendente (espaço): tem como alvo um elemento que é descendente de</p><p>outro elemento. Exemplo: div p visa todos os elementos p que são descendentes de um</p><p>elemento div.</p><p>2. Combinador filho (>): tem como alvo um elemento que é filho direto de outro elemento.</p><p>Exemplo: div > p tem como alvo todos os elementos p que são filhos diretos de um</p><p>elemento div.</p><p>3. Combinador irmão adjacente (+): tem como alvo um elemento que é imediatamente</p><p>adjacente a outro elemento e tem o mesmo pai. Exemplo: h1 + p tem como alvo o primeiro</p><p>elemento p imediatamente após um elemento h1.</p><p>4. Combinador irmão geral (~): tem como alvo um elemento que é irmão de outro elemento</p><p>e tem o mesmo pai. Exemplo: h1 ~ p tem como alvo todos os elementos p que são irmãos</p><p>de um elemento h1.</p><p>Esses combinadores podem ser usados para aumentar a especificidade dos seletores CSS e para</p><p>direcionar elementos específicos em uma página de maneira mais precisa. Os combinators podem</p><p>ser usados em conjunto com seletores de classe, ID e atributo para criar seletores mais específicos</p><p>e precisos. Eles são uma ferramenta poderosa para selecionar e estilizar elementos em uma página</p><p>da web.</p><p>Seletores CSS Exemplo Descrição do Exemplo</p><p>element element</p><p>div p Seleciona todos os elementos dentro dos elementos</p><p>element>element</p><p>uma seção que é citada de outra fonte</p><p>Define o título de uma obra</p><p>Define uma citação curta em linha</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>25</p><p>428</p><p>Comentários HTML</p><p>Os comentários HTML não são exibidos no navegador, mas podem ajudar a documentar seu</p><p>código-fonte HTML. Você pode adicionar comentários à seu código fonte HTML usando a seguinte</p><p>sintaxe:</p><p>Observe que há um ponto de exclamação (!) na tag inicial, mas não na tag final. Com comentários,</p><p>você pode colocar notificações e lembretes em seu código HTML.</p><p>Isto é um parágrafo.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>26</p><p>428</p><p>Cores HTML</p><p>As cores HTML são especificadas com nomes de cores predefinidos ou com valores RGB, HEX, HSL,</p><p>RGBA ou HSLA. Em HTML, uma cor pode ser especificada usando um nome de cor, a cor de fundo</p><p>dos elementos HTML, a cor do texto, a cor das bordas, e muito mais. Vejamos os exemplos!</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>27</p><p>428</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>28</p><p>428</p><p>Links HTML</p><p>Links são encontrados em quase todas as páginas da web. Os links permitem que os usuários</p><p>cliquem de uma página para outra. Links HTML são hiperlinks. Você pode clicar em um link e pular</p><p>para outro documento. Quando você move o mouse sobre um link, a seta do mouse se transforma</p><p>em uma mãozinha.</p><p>O texto do link é a parte que ficará visível para o leitor. Clicar no texto do link enviará o leitor ao</p><p>endereço de URL especificado. Por padrão, os links aparecerão da seguinte maneira em todos os</p><p>navegadores:</p><p>• Um link não visitado é sublinhado e azul</p><p>• Um link visitado é sublinhado e roxo</p><p>• Um link ativo é sublinhado e vermelho</p><p>Por padrão, a página vinculada será exibida na janela atual do navegador. Para alterar isso, você</p><p>deve especificar outro destino para o link.</p><p>O atributo target especifica onde abrir o documento vinculado. Ele pode ter um dos seguintes</p><p>valores:</p><p>• _self- Predefinição. Abre o documento na mesma janela/guia em que foi clicado</p><p>• _blank- Abre o documento em uma nova janela ou guia</p><p>• _parent- Abre o documento no quadro pai</p><p>• _top- Abre o documento em todo o corpo da janela</p><p>Para colocar um endereço de e-mail dentro de um link, você pode utilizar mailto: dentro do</p><p>atributo href para criar um link que abra o programa de e-mail do usuário (para permitir que ele</p><p>envie um novo e-mail):</p><p>Novo e-mail</p><p>Para usar um botão HTML como um link, você precisa adicionar algum código JavaScript. O</p><p>JavaScript permite que você especifique o que acontece em determinados eventos, como o clique</p><p>de um botão:</p><p>HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>29</p><p>428</p><p>Imagens HTML</p><p>As imagens podem melhorar o design e a aparência de uma página da web. As imagens não são</p><p>tecnicamente inseridas em uma página da web; mas sim vinculadas a páginas da web. A tag</p><p>cria um espaço de retenção para a imagem referenciada.</p><p>A tag é vazia, ou seja, contém apenas atributos e não possui uma tag de fechamento. Além</p><p>disso, ela possui dois atributos obrigatórios:</p><p>• src - Especifica o caminho para a imagem;</p><p>• alt - Especifica um texto alternativo para a imagem.</p><p>A tag também deve conter os atributos width e height, que especificam a largura e a altura</p><p>da imagem (em pixels). Quando uma página web carrega, é o navegador, nesse momento, que</p><p>obtém a imagem de um servidor web e a insere na página. Portanto, certifique-se de que a imagem</p><p>realmente permaneça no mesmo local em relação à página da Web, caso contrário, seus visitantes</p><p>receberão um ícone de link quebrado. O ícone de link quebrado e o texto alt são mostrados se o</p><p>navegador não conseguir encontrar a imagem.</p><p>Há duas maneiras de especificar a URL no src atributo:</p><p>1. URL absoluta - Links para uma imagem externa que está hospedada em outro site.</p><p>2. URL relativo - Links para uma imagem hospedada no site. Aqui, a URL não inclui o nome de</p><p>domínio. Se a URL começar sem uma barra, ela será relativa à página atual. Exemplo:</p><p>src="img_girl.jpg". Se a URL começar com uma barra, ela será relativa ao domínio. Exemplo:</p><p>src="/images/img_girl.jpg".</p><p>Dica: quase sempre é melhor usar URLs relativos. Eles não vão quebrar se você mudar de domínio.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>30</p><p>428</p><p>O atributo alt é obrigatório para a tag . Ele especifica um texto alternativo para uma imagem,</p><p>se a imagem por algum motivo não puder ser exibida. Isso pode ocorrer devido a uma conexão</p><p>lenta ou a um erro no atributo src ou se o usuário usar um leitor de tela.</p><p>O atributo style é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito</p><p>mais. Por exemplo, você pode usar o atributo style para especificar a largura e a altura de uma</p><p>imagem, especificando em sequência: style="width:500px;height:600px"</p><p>Os atributos width, heighte stylesão todos válidos em HTML. No entanto, é sugerido o uso do</p><p>atributo style para evitar que as folhas de estilo alterem o tamanho das imagens</p><p>O atributo alt obrigatório fornece um texto alternativo para uma imagem, se o usuário por algum</p><p>motivo não puder visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o usuário</p><p>usar um leitor de tela). O valor do atributo alt deve descrever a imagem.</p><p>O HTML permite GIFs animados. E também permite usar uma imagem como link, para isso, basta</p><p>colocar a tag dentro da tag</p><p>Vejamos os tipos de arquivo de imagem mais comuns, suportados em todos os navegadores</p><p>(Chrome, Edge, Firefox, Safari, Opera):</p><p>Abreviação Formato do arquivo Extensão</p><p>APNG Animated Portable Network Graphics .apng</p><p>GIF Graphics Interchange Format .gif</p><p>ICO Microsoft Icon .ico, .cur</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>31</p><p>428</p><p>JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp</p><p>PNG Portable Network Graphics .png</p><p>SVG Scalable Vector Graphics .svg</p><p>Tag Descrição</p><p>Define uma imagem;</p><p>Define um mapa de imagem;</p><p>Define uma área clicável dentro de um mapa de imagem;</p><p>Define um contêiner para vários recursos de imagem.</p><p>Espera aí, mas o que é um mapa de</p><p>imagem? Veremos isso agora!</p><p>A tag HTML define um mapa de</p><p>imagem. Um mapa de imagem é uma</p><p>imagem com áreas clicáveis. As áreas</p><p>são definidas com uma ou mais tags</p><p>.</p><p>A ideia por trás de um mapa de imagem</p><p>é que você deve ser capaz de realizar</p><p>diferentes ações, dependendo de onde</p><p>você clicar na imagem.</p><p>Para criar um mapa de imagem, você</p><p>precisa de uma imagem e algum código</p><p>HTML que descreva as áreas clicáveis.</p><p>iM</p><p>AG</p><p>EN</p><p>S</p><p>HT</p><p>M</p><p>L</p><p>define uma imagem</p><p>src define a URL da imagem</p><p>alt define um texto</p><p>div > p Seleciona todos os elementos onde o pai é um elemento</p><p>element+element</p><p>div + p Seleciona o primeiro elemento que é colocado</p><p>imediatamente após os elementos</p><p>element1~element2</p><p>p ~ ul Seleciona todos os elementos precedidos por um</p><p>elemento</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>259</p><p>428</p><p>Pseudo-classes</p><p>O que são pseudo-classes? Uma pseudoclasse é usada para definir um estado especial de um</p><p>elemento. Por exemplo, pode ser usado para:</p><p>• Estilizar um elemento quando um usuário passa o mouse sobre ele</p><p>• Estilizar links visitados e não visitados de forma diferente</p><p>• Estilizar um elemento quando ele recebe o foco</p><p>Pseudo-classes são pseudo-elementos que permitem selecionar elementos baseados em algum</p><p>estado específico, como :hover, :active, :focus, etc. Em outras palavras, pseudo-classes permitem</p><p>selecionar elementos HTML que não são identificados por sua tag, classe ou ID, mas por sua</p><p>posição ou estado dentro da página.</p><p>Aqui estão alguns exemplos de pseudo-classes comuns:</p><p>• :hover: seleciona o elemento quando o cursor do mouse estiver sobre ele.</p><p>• :active: seleciona o elemento quando ele estiver ativo, ou seja, quando o usuário clicou ou</p><p>tocou nele.</p><p>• :focus: seleciona o elemento quando ele estiver em foco, ou seja, quando ele estiver</p><p>selecionado para receber entrada de teclado.</p><p>• :first-child: seleciona o primeiro elemento filho de seu pai.</p><p>• :last-child: seleciona o último elemento filho de seu pai.</p><p>Pseudo-classes são usadas em conjunto com outros seletores, como tags HTML, classes ou ID's,</p><p>para aumentar a especificidade de um seletor CSS e aplicar estilos a elementos HTML específicos</p><p>em determinadas situações.</p><p>Seletores Exemplo Descrição do Exemplo</p><p>:active a:active Seleciona o link ativo</p><p>:checked input:checked Seleciona cada elemento marcado</p><p>:disabled input:disabled Seleciona cada elemento desabilitado</p><p>:empty p:empty Seleciona cada elemento que não tem</p><p>filhos</p><p>:enabled input:enabled Seleciona cada elemento ativado</p><p>:first-child p:first-child Seleciona cada elemento que é o primeiro</p><p>filho de seu pai</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>260</p><p>428</p><p>:first-of-type p:first-of-type Seleciona cada elemento que é o primeiro</p><p>elemento de seu pai</p><p>:focus input:focus Seleciona o elemento que tem foco</p><p>:hover a:hover Seleciona links ao passar o mouse</p><p>:in-range input:in-range Seleciona elementos com um valor</p><p>dentro de um intervalo especificado</p><p>:invalid input:invalid Seleciona todos os elementos com um</p><p>valor inválido</p><p>:lang(language) p:lang(it) Seleciona cada elemento com um valor de</p><p>atributo lang começando com "it"</p><p>:last-child p:last-child Seleciona cada elemento que é o último</p><p>filho de seu pai</p><p>:last-of-type p:last-of-type Seleciona cada elemento que é o último</p><p>elemento de seu pai</p><p>:link a:link Seleciona todos os links não visitados</p><p>:not(selector) :not(p) Seleciona todos os elementos que não são um</p><p>elemento</p><p>:nth-child(n) p:nth-child(2) Seleciona cada elemento que é o segundo</p><p>filho de seu pai</p><p>:nth-last-child(n) p:nth-last-child(2) Seleciona cada elemento que é o segundo</p><p>filho de seu pai, contando a partir do último</p><p>filho</p><p>:nth-last-of-type(n) p:nth-last-of-type(2) Seleciona cada elemento que é o segundo</p><p>elemento de seu pai, contando a partir do</p><p>último filho</p><p>:nth-of-type(n) p:nth-of-type(2) Seleciona cada elemento que é o segundo</p><p>elemento de seu pai</p><p>:only-of-type p:only-of-type Seleciona cada elemento que é o único</p><p>elemento de seu pai</p><p>:only-child p:only-child Seleciona cada elemento que é o único</p><p>filho de seu pai</p><p>:optional input:optional Seleciona elementos sem atributo</p><p>"obrigatório"</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>261</p><p>428</p><p>:out-of-range input:out-of-range Seleciona elementos com um valor</p><p>fora de um intervalo especificado</p><p>:read-only input:read-only Seleciona elementos com um atributo</p><p>"readonly" especificado</p><p>:read-write input:read-write Seleciona elementos sem o atributo</p><p>"readonly"</p><p>:required input:required Seleciona elementos com um atributo</p><p>"obrigatório" especificado</p><p>:root root Seleciona o elemento raiz do documento</p><p>:target #news:target Seleciona o elemento #news ativo atual</p><p>(clicado em uma URL contendo o nome da</p><p>âncora)</p><p>:valid input:valid Seleciona todos os elementos com um</p><p>valor válido</p><p>:visited a:visited Seleciona todos os links visitados</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>262</p><p>428</p><p>Opacidade / Transparência</p><p>A propriedade opacity em CSS é usada para controlar a transparência de um elemento. Ela pode</p><p>ter um valor entre 0 (totalmente transparente) e 1 (totalmente opaco). Um elemento com opacity</p><p>definido como 0.5 será metade transparente, ou seja, metade visível e metade invisível.</p><p>Aqui está um exemplo de como usar a propriedade opacity em um elemento:</p><p>div {</p><p>opacity: 0.5;</p><p>}</p><p>É importante lembrar que a opacidade é herdada pelos elementos filhos de um elemento com</p><p>opacidade definida. Portanto, se um elemento pai tiver opacity definido como 0.5, todos os seus</p><p>elementos filhos também terão opacity de 0.5, a menos que sejam sobrescritos com uma</p><p>opacidade diferente.</p><p>A propriedade opacity é útil para criar efeitos de transparência e para tornar elementos menos</p><p>opacos, permitindo que o fundo da página seja visto através deles.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>263</p><p>428</p><p>Pseudo-elementos</p><p>Pseudo-elementos são elementos fictícios que permitem adicionar conteúdo a elementos HTML</p><p>sem modificar o conteúdo do documento. Eles são escritos usando dois pontos (:) seguidos pelo</p><p>nome do pseudo-elemento. Aqui estão alguns exemplos de pseudo-elementos comuns:</p><p>• ::before: adiciona conteúdo antes do conteúdo principal de um elemento.</p><p>• ::after: adiciona conteúdo depois do conteúdo principal de um elemento.</p><p>• ::first-letter: seleciona a primeira letra de um elemento de texto.</p><p>• ::first-line: seleciona a primeira linha de um elemento de texto.</p><p>Pseudo-elementos são úteis para adicionar conteúdo a elementos HTML, como adicionar ícones a</p><p>links, adicionar símbolos a itens de lista, adicionar cabeçalhos a caixas de texto, etc. Eles também</p><p>são usados para aplicar estilos diferentes a partes específicas de um elemento, como mudar a cor</p><p>da primeira letra de um parágrafo ou adicionar uma seta antes de um link.</p><p>O ::pseudo-elemento de ::first-line</p><p>O pseudo-elemento ::first-line é usado para adicionar um estilo especial à primeira linha de um</p><p>texto. As seguintes propriedades se aplicam ao pseudoelemento ::first-line:</p><p>• font properties</p><p>• color properties</p><p>• background properties</p><p>• word-spacing</p><p>• letter-spacing</p><p>• text-decoration</p><p>• vertical-align</p><p>• text-transform</p><p>• line-height</p><p>• clear</p><p>O pseudo-elemento ::first-letter é usado para adicionar um estilo especial à primeira letra de um</p><p>texto. As seguintes propriedades se aplicam ao pseudoelemento ::first-letter:</p><p>• font properties</p><p>• color properties</p><p>• background properties</p><p>• margin properties</p><p>• padding properties</p><p>• border properties</p><p>• text-decoration</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal</p><p>alternativo para uma imagem, se ela não puder ser exibida</p><p>width e height definem o tamanho da imagem</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>32</p><p>428</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>33</p><p>428</p><p>Tabelas HTML</p><p>As tabelas HTML permitem que os desenvolvedores da Web organizem os dados em linhas e</p><p>colunas. Uma tabela em HTML consiste em células de tabela dentro de linhas e colunas. Cada célula</p><p>da tabela é definida por uma tag e . Por outro lado, cada linha da tabela começa com</p><p>uma tag e termina com uma .</p><p>É possível inserir quantas linhas quiser em uma tabela; apenas certifique-se de que o número de</p><p>células seja o mesmo em cada linha.</p><p>Às vezes, você deseja que suas células sejam células de cabeçalho de tabela. Nesses casos, use a</p><p>tag em vez da tag , dessa forma é possível adicionar cabeçalhos de tabela.</p><p>ta</p><p>be</p><p>la</p><p>s</p><p>HT</p><p>M</p><p>L</p><p>Define uma tabela</p><p>Define uma célula de cabeçalho em uma tabela</p><p>Define uma linha em uma tabela</p><p>Define uma célula em uma tabela</p><p>Define uma legenda de tabela</p><p>Especifica um grupo de uma ou mais colunas em uma tabela para formatação</p><p>Especifica as propriedades da coluna para cada coluna dentro de um elemento</p><p>Agrupa o conteúdo do cabeçalho em uma tabela</p><p>Agrupa o conteúdo do corpo em uma tabela</p><p>Agrupa o conteúdo do rodapé em uma tabela</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>34</p><p>428</p><p>As tabelas HTML podem ter bordas de diferentes estilos e formas. Ao adicionar uma borda a uma</p><p>tabela, você também adiciona bordas ao redor de cada célula da tabela. Para adicionar uma borda,</p><p>use a propriedade border CSS nos elementos table, th e td.</p><p>Se você definir uma cor de fundo para cada célula e atribuir à borda uma cor branca (a mesma do</p><p>plano de fundo do documento), terá a impressão de uma borda invisível. Com a propriedade</p><p>border-style, você pode definir a aparência da borda.</p><p>Os seguintes valores são permitidos:</p><p>• dotted</p><p>• dashed</p><p>• solid</p><p>• double</p><p>• groove</p><p>• ridge</p><p>• inset</p><p>• outset</p><p>• none</p><p>• hidden</p><p>Com a propriedade border-color, você pode definir a cor da borda. As tabelas HTML podem ter</p><p>tamanhos diferentes para cada coluna, linha ou tabela inteira. Use o atributo style com as</p><p>propriedades width ou height para especificar o tamanho de uma tabela, linha ou coluna. para</p><p>definir a largura da tabela HTML, adicione o atributo style ao elemento . Para definir o</p><p>tamanho de uma coluna específica, adicione o atributo style em um elemento ou .</p><p>As tabelas HTML podem ter cabeçalhos para cada coluna ou linha ou para muitas colunas/linhas.</p><p>Os cabeçalhos das tabelas são definidos com elementos th. Cada emento th representa uma célula</p><p>da tabela.</p><p>Para usar a primeira coluna como cabeçalhos de tabela, defina a primeira célula em cada linha</p><p>como um elemento . Por padrão, os cabeçalhos das tabelas estão em negrito e centralizados.</p><p>Para alinhar à esquerda os cabeçalhos da tabela, use a propriedade text-align CSS. Você pode ter</p><p>um cabeçalho que se estende por duas ou mais colunas. Para fazer isso, use o atributo colspan no</p><p>elemento. Você pode adicionar uma legenda que sirva como cabeçalho para toda a tabela,</p><p>para isso, use a tag .</p><p>As tabelas HTML podem ajustar o preenchimento dentro das células e também o espaço entre as</p><p>células. O preenchimento da célula é o espaço entre as bordas da célula e o conteúdo da célula.</p><p>Por padrão, o preenchimento é definido como 0. Para adicionar preenchimento nas células da</p><p>tabela, use a propriedade padding CSS.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>35</p><p>428</p><p>Para adicionar preenchimento somente acima do conteúdo, use a propriedade padding-top. E os</p><p>outros lados com as propriedades padding-bottom, padding-lefte padding-right.</p><p>Espaçamento celular é o espaço entre cada célula. Por padrão, o espaço é definido como 2 pixels.</p><p>Para alterar o espaço entre as células da tabela, use a propriedade border-spacing CSS no elemento</p><p>table.</p><p>As tabelas HTML podem ter células que abrangem várias linhas e/ou colunas. Para fazer uma célula</p><p>abranger várias colunas, use o atributo colspan. Para fazer uma célula abranger várias linhas, use o</p><p>atributo rowspan</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>36</p><p>428</p><p>Estilização de Tabelas HTML</p><p>Use CSS para melhorar a aparência de suas tabelas. Para estilizar todos os outros elementos de</p><p>linha da tabela, use o seletor :nth-child(even) como este. Para fazer listras de zebra verticais,</p><p>estilize colunas alternadas, em vez de linhas alternadas.</p><p>Se você especificar bordas apenas na parte inferior de cada linha da tabela, terá uma tabela com</p><p>divisores horizontais. Adicione a propriedade border-bottom a todos os elementos tr para obter</p><p>divisores horizontais:</p><p>O elemento é usado para estilizar colunas específicas de uma tabela. Se você deseja</p><p>estilizar as duas primeiras colunas de uma tabela, use os elementos e . O elemento</p><p>deve ser usado como um contêiner para as especificações da coluna.</p><p>Cada grupo é especificado com um elemento . O atributo span especifica quantas colunas</p><p>recebem o estilo. Já, o atributo style especifica o estilo a ser dado às colunas.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>37</p><p>428</p><p>Listas HTML</p><p>As listas HTML permitem que os desenvolvedores da Web agrupem um conjunto de itens</p><p>relacionados em listas. Uma lista não ordenada começa com a tag . Cada item da lista começa</p><p>com a tag . Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por</p><p>padrão:</p><p>Uma lista ordenada começa com a tag . Cada item da lista começa com a tag . Os itens da</p><p>lista serão marcados com números por padrão</p><p>O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de termos, com</p><p>uma descrição de cada termo. A tag define a lista de descrição, a tag define o termo</p><p>(nome) e a tag descreve cada termo.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>38</p><p>428</p><p>Tag Descrição</p><p>Define uma lista não ordenada</p><p>Define uma lista ordenada</p><p>Definir um item de lista</p><p>Define uma lista de descrição</p><p>Define um termo em uma lista de descrição</p><p>Descreve o termo em uma lista de descrição</p><p>(FCC –DPE AM – 2018) Um Técnico Programador deseja fazer um glossário de termos em um site utilizando</p><p>listas de definições do HTML5. Nestas listas, o termo a ser descrito e a descrição propriamente dita são</p><p>criados, respectivamente, pelas tags</p><p>a) e</p><p>b) e</p><p>c) e</p><p>d) e</p><p>e) e</p><p>Comentários</p><p>O HTML também suporta listas de descrição. Uma lista de descrição é uma lista de termos, com</p><p>uma</p><p>descrição de cada termo. A tag define a lista de descrição, a tag define o termo (nome) e a tag</p><p>descreve cada termo. define um termo em uma lista de descrição. descreve o termo em</p><p>uma lista de descrição. (Gabarito: Letra A).</p><p>Listas Não Ordenadas</p><p>Como já vimos, uma lista não ordenada começa com a tag e cada item da lista começa com a</p><p>tag . Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão.</p><p>A propriedade CSS list-style-type é usada para definir o estilo do marcador de item da lista. Pode</p><p>ter um dos seguintes valores:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>39</p><p>428</p><p>Valor Descrição</p><p>disc Define o marcador de item da lista para um marcador (padrão).</p><p>circle Define o marcador de item da lista para um círculo.</p><p>square Define o marcador de item da lista para um quadrado.</p><p>none Os itens da lista não serão marcados.</p><p>Além de toda as opções já citadas, ainda podemos ter listas aninhadas, ou seja, uma lista dentro</p><p>da outra lista.</p><p>Agora vejamos uma lista horizontal com CSS! As listas HTML podem ser estilizadas de várias</p><p>maneiras diferentes com CSS e uma maneira popular é estilizar uma lista horizontalmente, para</p><p>criar um menu de navegação. Fica bem maneiro, veja:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>40</p><p>428</p><p>ul {</p><p>list-style-type: none;</p><p>margin: 0;</p><p>padding: 0;</p><p>overflow: hidden;</p><p>background-color: #333333;</p><p>}</p><p>li {</p><p>float: left;</p><p>}</p><p>li a {</p><p>display: block;</p><p>color: white;</p><p>text-align: center;</p><p>padding: 16px;</p><p>text-decoration: none;</p><p>}</p><p>li a:hover {</p><p>background-color: #111111;</p><p>}</p><p>Navegação no menu</p><p>Neste exemplo, usamos CSS para estilizar a lista horizontalmente, para</p><p>criar um menu de navegação:</p><p>Página inicial</p><p>Notícias</p><p>Contato</p><p>Sobre</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>41</p><p>428</p><p>Gostaram? Bem bacana não é?</p><p>(CESPE – MPC TCE-PA – 2019) O HTML (hypertext markup language) tem amplo uso difundido nas páginas</p><p>publicadas na Internet. Assinale a opção que corresponde à tag utilizada no caso em que seja necessário</p><p>utilizar uma lista não ordenada.</p><p>a)</p><p>b)</p><p>c)</p><p>d)</p><p>e)</p><p>Comentários</p><p>Como já vimos, uma lista não ordenada começa com a tag e cada item da lista começa com a tag .</p><p>Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão. (Gabarito: Letra</p><p>D)</p><p>Listas Ordenadas em HTML</p><p>Li</p><p>st</p><p>as</p><p>n</p><p>ão</p><p>o</p><p>rd</p><p>en</p><p>ad</p><p>as</p><p>Use o elemento HTML para definir uma lista não ordenada</p><p>Use a propriedade CSS list-style-type para definir o marcador de item da lista</p><p>Use o elemento HTML para definir um item da lista</p><p>As listas podem ser aninhadas</p><p>Os itens da lista podem conter outros elementos HTML</p><p>Use a propriedade CSS float:left para exibir uma lista horizontalmente</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>42</p><p>428</p><p>Uma lista ordenada começa com a tag . Cada item da lista começa com a tag . Os itens da</p><p>lista serão marcados com números por padrão:</p><p>Em uma Lista ordenada, o atributo Type da tag , define o tipo de marcador do item da lista.</p><p>Type Descrição</p><p>type="1" Os itens da lista serão numerados com números (padrão)</p><p>type="A" Os itens da lista serão numerados com letras maiúsculas</p><p>type="a" Os itens da lista serão numerados com letras minúsculas</p><p>type="I" Os itens da lista serão numerados com números romanos maiúsculos</p><p>type="i" Os itens da lista serão numerados com números romanos minúsculos</p><p>Pessoal, a única alteração ocorre na tag . Vocês devem definir o tipo de lista dentro dessa tag</p><p>da seguinte forma: ou , ou . Enfim, você define o tipo e o</p><p>resultado será como a imagem logo após o código. Veja:</p><p>Café</p><p>Chá</p><p>Leite</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>43</p><p>428</p><p>Por padrão, uma lista ordenada começará a contar a partir de 1. Se você quiser começar a contar</p><p>a partir de um número específico, poderá usar o atributo start e definir o valor que deseja iniciar.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>44</p><p>428</p><p>Li</p><p>st</p><p>as</p><p>O</p><p>rd</p><p>en</p><p>ad</p><p>as</p><p>Use o elemento HTML para definir uma lista ordenada</p><p>Use o atributo HTML type para definir o tipo de numeração</p><p>Use o elemento HTML para definir um item de lista</p><p>As listas podem ser aninhadas</p><p>Os itens da lista podem conter outros elementos HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>45</p><p>428</p><p>Bloco HTML e elementos embutidos</p><p>Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento. Existem</p><p>dois valores de exibição: bloco e embutido.</p><p>Elementos de nível de bloco</p><p>Um elemento de nível de bloco sempre começa em uma nova linha e os navegadores adicionam</p><p>automaticamente algum espaço (uma margem) antes e depois do elemento. Um elemento de nível</p><p>de bloco sempre ocupa toda a largura disponível (estende-se para a esquerda e para a direita o</p><p>máximo possível).</p><p>Dois elementos de bloco comumente usados são: e . O elemento define um parágrafo</p><p>em um documento HTML. E o elemento define uma divisão ou uma seção em um documento</p><p>HTML. Vejamos todos os elementos de nível de bloco HTML:</p><p>aside</p><p>O elemento é um elemento HTML utilizado para representar o conteúdo relacionado ao</p><p>conteúdo principal da página da Web, mas que não é essencial para o entendimento do conteúdo</p><p>principal. Geralmente é usado para representar barras laterais, citações e outros conteúdos</p><p>relacionados tangencialmente.</p><p>elementos de nível de bloco</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>46</p><p>428</p><p>Lembre-se de que o elemento é um elemento semântico, o que significa que é usado para</p><p>adicionar significado à página da Web, em vez de controlar o layout ou a aparência da página. Você</p><p>pode usar CSS para estilizar o elemento , assim como qualquer outro elemento.</p><p>O elemento é um elemento HTML usado para representar o cabeçalho de uma página da</p><p>web ou seção de uma página da web. Normalmente, é usado para conter o título principal, o</p><p>logotipo e os links de navegação da página da Web.</p><p>O elemento normalmente é usado no topo da página da web, mas também pode ser</p><p>usado para representar o cabeçalho de uma seção de uma página da web. Neste caso, deve ser</p><p>usado dentro de um elemento .</p><p>Lembre-se de que o elemento é diferente do elemento , que é usado para conter</p><p>metadados sobre a página da web. O elemento faz parte do conteúdo da página da web</p><p>e é visível para o usuário, enquanto o elemento não é.</p><p>O elemento é um elemento HTML usado para representar o conteúdo principal de uma</p><p>página da web. Ele deve ser usado para agrupar o conteúdo exclusivo da página da Web e que não</p><p>é compartilhado com outras páginas no mesmo site.</p><p>O elemento é um elemento semântico, o que significa que é usado para adicionar</p><p>significado à página da Web, em vez de controlar o layout ou a aparência da página. Você pode</p><p>usar CSS para estilizar o elemento , assim como qualquer outro elemento.</p><p>O elemento é um elemento HTML usado para incorporar conteúdo de vídeo em uma</p><p>página da web. Ele fornece uma maneira padrão de reproduzir arquivos de vídeo nativamente no</p><p>navegador, sem a necessidade de plug-ins de terceiros, como o Flash.</p><p>Você pode usar os atributos de altura e largura para especificar o tamanho do elemento</p><p>na página da web. Os valores desses atributos podem ser especificados em pixels ou como uma</p><p>porcentagem do espaço disponível.</p><p>Lembre-se de que os atributos de altura e largura são opcionais e, se você não os especificar, o</p><p>elemento ajustará automaticamente seu tamanho para caber no tamanho do arquivo de</p><p>vídeo. Você também pode usar CSS para estilizar o elemento , assim como qualquer outro</p><p>elemento.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>47</p><p>428</p><p>Your browser does not support the video tag.</p><p>No HTML5, o elemento pode ser usado para incorporar conteúdo de vídeo em uma página</p><p>da web. O elemento suporta vários formatos de arquivo de vídeo diferentes, incluindo:</p><p>• MP4: vídeo codificado usando compressão de vídeo H.264 e áudio codificado usando Advanced</p><p>Audio Coding (AAC).</p><p>• WebM: vídeo codificado usando compressão de vídeo VP8 ou VP9 e áudio codificado usando</p><p>Vorbis ou Opus.</p><p>• Ogg: vídeo codificado usando compressão de vídeo Theora3e áudio codificado usando Vorbis.</p><p>Em HTML5, o elemento pode ser usado para especificar uma legenda ou arquivo de</p><p>legenda para um elemento . O elemento permite que você especifique uma trilha</p><p>de texto que pode ser exibida sobre o vídeo durante a reprodução.</p><p>Para usar o elemento , primeiro você precisa criar um arquivo de texto contendo as</p><p>legendas ou legendas do seu vídeo. O arquivo de texto deve estar em um formato compatível com</p><p>o elemento , como WebVTT (Web Video Text Tracks).</p><p>Quando o vídeo for reproduzido, as legendas serão exibidas sobre o vídeo com base nas</p><p>informações de tempo no arquivo de texto. O usuário pode ativar ou desativar a exibição das</p><p>legendas usando os controles fornecidos pelo navegador.</p><p>Elementos inline</p><p>Um elemento inline não começa em uma nova linha. Pelo contrário, ocupa apenas a largura</p><p>necessária.</p><p>3 Theora é um codec de vídeo, de compressão com perda de dados</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>48</p><p>428</p><p>Vejamos os elementos inline em HTML:</p><p>O elemento geralmente é usado como um contêiner para outros elementos HTML. Ele não</p><p>tem atributos obrigatórios, mas style, class e id são comuns. Quando usado junto com CSS, o</p><p>elemento pode ser usado para estilizar blocos de conteúdo:</p><p>elementos inline HTML</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>49</p><p>428</p><p>O elemento é um contêiner embutido usado para marcar uma parte de um texto ou uma</p><p>parte de um documento. Ele também não tem atributos obrigatórios, mas style, class e id são</p><p>comuns, assim como no elemento . Quando usado junto com CSS, o elemento pode</p><p>ser usado para estilizar partes do texto</p><p>Para relembrar, fica esse grande lembrete:</p><p>Bl</p><p>oc</p><p>o</p><p>HT</p><p>M</p><p>L e</p><p>e</p><p>le</p><p>m</p><p>en</p><p>to</p><p>s</p><p>em</p><p>bu</p><p>ti</p><p>do</p><p>s</p><p>Existem dois valores de exibição: bloco e embutido</p><p>Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível</p><p>Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária</p><p>é um nível de bloco e geralmente é usado como um contêiner para outros elementos HTML</p><p>é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um</p><p>documento</p><p>Define uma seção em um documento (nível de bloco)</p><p>Define uma seção em um documento (em linha)</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>50</p><p>428</p><p>Atributo de classe HTML</p><p>O atributo HTML classé usado para especificar uma classe para um elemento HTML.</p><p>Vários elementos HTML podem compartilhar a mesma classe.</p><p>Usando o atributo de classe</p><p>O classatributo geralmente é usado para apontar para um nome de classe em uma folha de estilo.</p><p>Também pode ser usado por um JavaScript para acessar e manipular elementos com o nome de</p><p>classe específico.</p><p>No exemplo a seguir temos três elementos com um atributo class com o valor "cidade". Todos</p><p>os três elementos serão estilizados igualmente de acordo com a definição de estilo.</p><p>Como vimos no exemplo, para criar uma classe; devemos escreveer um caractere de ponto (.),</p><p>seguido de um nome de classe (no exemplo, cidade). Em seguida, defina as propriedades CSS entre</p><p>chaves {}. Os elementos HTML podem pertencer a mais de uma classe. Para definir várias classes,</p><p>separe os nomes das classes com um espaço, por exemplo, . O elemento</p><p>será estilizado de acordo com todas as classes especificadas.</p><p>No exemplo a seguir, o primeiro elemento pertence tanto à classe city quanto à classe main</p><p>e obterá os estilos CSS de ambas as classes:</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>51</p><p>428</p><p>Para criar uma classe; escreva um caractere de ponto (.), seguido de um nome de classe. Em</p><p>seguida, defina as propriedades CSS entre chaves {}</p><p>Os elementos HTML podem pertencer a mais de uma classe. Para definir várias classes, separe os</p><p>nomes das classes com um espaço, por exemplo, . O elemento será</p><p>estilizado de acordo com todas as classes especificadas. No exemplo a seguir, o primeiro elemento</p><p>pertence tanto à classe city quanto à classe main e obterá os estilos CSS de ambas as classes</p><p>Diferentes elementos HTML podem apontar para o mesmo nome de classe. no exemplo a</p><p>seguir, ambos apontam para a classe "city" e compartilharão o mesmo estilo</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>52</p><p>428</p><p>O nome da classe também pode ser usado pelo JavaScript para executar determinadas tarefas para</p><p>elementos específicos. O JavaScript pode acessar elementos</p><p>com um nome de classe específico</p><p>com o método getElementsByClassName().</p><p>At</p><p>ri</p><p>bu</p><p>to</p><p>d</p><p>e</p><p>cl</p><p>as</p><p>se</p><p>H</p><p>TM</p><p>L</p><p>O atributo HTML class especifica um ou mais nomes de classe para um elemento</p><p>Classes são usadas por CSS e JavaScript para selecionar e acessar elementos</p><p>específicos</p><p>O atributo class pode ser usado em qualquer elemento HTML</p><p>O nome da classe diferencia maiúsculas de minúsculas</p><p>Diferentes elementos HTML podem apontar para o mesmo nome de classe</p><p>JavaScript pode acessar elementos com um nome de classe específico com o método</p><p>getElementsByClassName()</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>53</p><p>428</p><p>Formulários HTML</p><p>Um formulário HTML é usado para coletar a entrada do usuário. A entrada do usuário geralmente</p><p>é enviada a um servidor para processamento. O elemento HTML é usado para criar um</p><p>formulário HTML para entrada do usuário. Ele é um contêiner para diferentes tipos de elementos</p><p>de entrada, como: campos de texto, caixas de seleção, botões de opção, botões de envio, etc.</p><p>O elemento HTML é o elemento de formulário mais usado. Ele pode ser exibido de várias</p><p>maneiras, dependendo do atributo type.</p><p>Type Descrição</p><p>Exibe um campo de entrada de texto de linha única</p><p>Exibe um botão de opção (para selecionar uma das muitas opções)</p><p>Exibe uma caixa de seleção (para selecionar zero ou mais opções)</p><p>Exibe um botão de envio (para enviar o formulário)</p><p>Exibe um botão clicável</p><p>A tag define um rótulo para muitos elementos de formulário. Ela é útil para usuários de</p><p>leitores de tela, porque o leitor de tela lerá o rótulo em voz alta quando o usuário focar no elemento</p><p>de entrada.</p><p>O elemento também ajuda os usuários que têm dificuldade em clicar em regiões muito</p><p>pequenas (como botões de opção ou caixas de seleção) - porque quando o usuário clica no texto</p><p>dentro do elemento, ele alterna o botão de opção/caixa de seleção. O atributo for da tag</p><p>deve ser igual ao atributo id do para uni-los.</p><p>O define um botão de opção. Os botões de opção permitem que um usuário</p><p>selecione UMA dentre um número limitado de opções.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>54</p><p>428</p><p>O define uma caixa de seleção. As caixas de seleção permitem que um</p><p>usuário selecione ZERO ou MAIS opções de um número limitado de opções.</p><p>O define um botão para enviar os dados do formulário para um</p><p>manipulador de formulário. O manipulador de formulário geralmente é um arquivo no servidor</p><p>com um script para processar dados de entrada. O manipulador de formulário é especificado no</p><p>atributo action do formulário.</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>55</p><p>428</p><p>Observe que cada campo de entrada deve ter um atributo name a ser submetido. Se o atributo</p><p>name for omitido, o valor do campo de entrada não será enviado.</p><p>Já o atributo action define a ação a ser executada quando o formulário é enviado. Normalmente,</p><p>os dados do formulário são enviados para um arquivo no servidor quando o usuário clica no botão</p><p>enviar. No exemplo abaixo, os dados do formulário são enviados para um arquivo chamado</p><p>"action_page.php". Este arquivo contém um script do lado do servidor que manipula os dados do</p><p>formulário:</p><p>O atributo target especifica onde exibir a resposta recebida após o envio do formulário. Ele pode</p><p>ter um dos seguintes valores, sendo que o valor padrão é _self o que significa que a resposta será</p><p>aberta na janela atual.</p><p>Valor Descrição</p><p>_blank A resposta é exibida em uma nova janela ou guia;</p><p>_self A resposta é exibida na janela atual;</p><p>_parent A resposta é exibida no quadro pai;</p><p>_top A resposta é exibida em todo o corpo da janela;</p><p>framename A resposta é exibida em um iframe nomeado.</p><p>O atributo do método especifica o método HTTP a ser usado ao enviar os dados do formulário. Os</p><p>dados do formulário podem ser enviados como variáveis de URL (com method="get") ou como pós-</p><p>transação HTTP (com method="post"). O método HTTP padrão ao enviar dados de formulário é</p><p>GET.</p><p>Método Descrição</p><p>Get Anexa os dados do formulário ao URL, em pares de nome/valor;</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>56</p><p>428</p><p>NUNCA use GET para enviar dados confidenciais! (os dados do formulário enviado</p><p>são visíveis na URL!);</p><p>O comprimento de um URL é limitado (2048 caracteres);</p><p>Útil para envios de formulários em que um usuário deseja marcar o resultado como</p><p>favorito;</p><p>GET é bom para dados não seguros, como strings de consulta no Google.</p><p>Post</p><p>- Anexa os dados do formulário dentro do corpo da solicitação HTTP (os dados do</p><p>formulário enviado não são mostrados na URL);</p><p>- O POST não tem limitações de tamanho e pode ser usado para enviar grandes</p><p>quantidades de dados;</p><p>- Os envios de formulário com POST não podem ser marcados.</p><p>Vejamos um compilado dos atributos dos formulários HTML.</p><p>Atributo de</p><p>Formulários</p><p>Descrição</p><p>accept-charset Especifica as codificações de caracteres usadas para envio de formulário</p><p>action Especifica para onde enviar os dados do formulário quando um formulário é enviado</p><p>autocomplete Especifica se um formulário deve ter o preenchimento automático ativado ou</p><p>desativado</p><p>enctype Especifica como os dados do formulário devem ser codificados ao enviá-los ao</p><p>servidor (somente para method="post")</p><p>method Especifica o método HTTP a ser usado ao enviar dados de formulário</p><p>name Especifica o nome do formulário</p><p>novalidate Especifica que o formulário não deve ser validado quando enviado</p><p>rel Especifica a relação entre um recurso vinculado e o documento atual</p><p>target Especifica onde exibir a resposta recebida após o envio do formulário</p><p>Os elementos HTML</p><p>Vimos os atributos agora vamos ver os elementos dos formulários HTML! O elemento pode</p><p>conter um ou mais dos seguintes elementos de formulário:</p><p>Elementos de</p><p>Formulários</p><p>Descrição</p><p>Define um formulário HTML para entrada do usuário</p><p>Define um controle de entrada</p><p>Define um controle de entrada multilinha (área de texto)</p><p>Define um rótulo para um elemento</p><p>Agrupa elementos relacionados em um formulário</p><p>Paolla Ramos</p><p>Aula 04</p><p>Perito Criminal - Curso Regular (Área TI) Desenvolvimento de Software</p><p>www.estrategiaconcursos.com.br</p><p>39471799600 - Naldira Luiza Vieria</p><p>57</p><p>428</p><p>Define uma legenda para um elemento</p><p>Define uma lista suspensa</p><p>Define um grupo de opções relacionadas em uma lista suspensa</p><p>Define uma opção em uma lista suspensa</p><p>Define um botão clicável</p><p>Especifica uma lista de opções predefinidas para controles de entrada</p><p>Define o resultado de um cálculo</p><p>Vejamos agora os diferentes tipos de entrada que você pode usar em HTML</p><p>Tipos de entrada de</p><p>Formulários</p><p>Descrição</p><p>Define um botão</p><p>Define uma caixa de seleção. As caixas de seleção permitem que um usuário</p><p>selecione ZERO ou MAIS opções de um número limitado de opções.</p><p>É usado para campos de entrada que devem conter uma cor. Dependendo do</p><p>suporte do navegador, um seletor de cores pode aparecer no campo de</p><p>entrada.</p><p>É usado para campos de entrada que devem</p>