Biblioteca_1923978

Prévia do material em texto

UNIVERSIDADE ESTÁCIO DE SÁ 
SISTEMAS DE INFORMAÇÃO 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
TECNOLOGIAS PARA INTERNET I – HTML5 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Prof. Fernando André da Silva 
 
1º Semestre/2020 
 
2 
 
SUMÁRIO 
 
UNIDADE 1 - O AMBIENTE INTERNET ................................................................................................. 3 
1.1 APRESENTAÇÃO DO AMBIENTE DISTRIBUÍDO DA INTERNET ................................ 3 
1.2 PRINCIPAIS PROTOCOLOS DA INTERNET PARA DESENVOLVIMENTO WEB ............ 4 
1.2.1 HTTP - HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) .. 4 
1.2.2 HTTPS - Hyper Text Transfer Protocol Secure (Protocolo de Transferência de Hipertexto 
Seguro) .............................................................................................................................................. 6 
1.2.3 O Protocolo TCP/IP ................................................................................................... 6 
UNIDADE 2 - INTRODUÇÃO AO HTML5 ............................................................................................. 10 
2.1 O QUE É UMA TAG? ........................................................................................... 13 
2.2 ATRIBUTOS DE UMA TAG .................................................................................. 14 
2.3 BREVE DEFINIÇÃO DE CSS................................................................................ 17 
2.4 O QUE É DOM (DOCUMENT OBJECT MODEL).................................................... 22 
UNIDADE 3 - INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS ................................. 24 
3.1 TAG'S ESTRUTURAIS DO HTML5 ...................................................................... 24 
3.2 TAG'S TEXTUAIS ............................................................................................... 31 
3.3 TAG'S ESPECÍFICAS ........................................................................................... 34 
3.4 TAG'S BÁSICAS ................................................................................................. 39 
3.5 LISTAS COM HTML 5 ....................................................................................... 49 
3.6 TABELAS .......................................................................................................... 59 
3.7 VÍDEO E ÁUDIO ................................................................................................ 68 
3.8 UMA BREVE HISTÓRIA SOBRE CODEC'S ........................................................... 73 
UNIDADE 4 - LINGUAGEM DE MARCAÇÃO E ESTILOS ................................................................ 78 
4.1 DEFINIÇÃO ........................................................................................................ 78 
4.2 SELETORES ....................................................................................................... 80 
4.2.1 Seletor Universal ...................................................................................................... 81 
4.2.2 Seletor de Tipo .......................................................................................................... 82 
4.2.3 Seletor de Classe ...................................................................................................... 83 
4.2.4 Seletor de ID ............................................................................................................. 85 
4.2.5 Seletor de Atributo .................................................................................................... 89 
4.2.6 Seletor de Pseudo-classe .......................................................................................... 90 
4.2.6.1 Pseudo-classes Estruturais ............................................................................. 91 
4.2.6.2 Pseudo-classes Dinâmicas ............................................................................. 95 
4.2.7 Seletor Pseudo-elemento ........................................................................................ 102 
4.2.8 Seletor Descendente Direto (filho) ......................................................................... 105 
4.2.9 Seletores Descendentes ........................................................................................... 106 
4.2.10 Seletores Adjacentes ............................................................................................. 107 
4.2.11 Seletores Adjacentes (irmãos) .............................................................................. 109 
EXERCÍCIOS AULA 2 ............................................................................................................................. 110 
EXERCÍCIOS AULA 3 ............................................................................................................................. 112 
EXERCÍCIO AULA 4 ............................................................................................................................... 115 
EXERCÍCIOS AULA 5 ............................................................................................................................. 117 
EXERCÍCIOS AULA 6 ............................................................................................................................. 118 
 
3 
 
Unidade 1 - O AMBIENTE INTERNET 
 
Ambiente Distribuído da Internet 
 
Nos dias de hoje é difícil é identificar uma área que ainda não tenha investido em tecnologia da 
informação e se beneficiado com as facilidades trazidas pela informação tratada em tempo real e 
disponível sob demanda. 
 
A combinação de texto, som, imagem, entregues em uma pluralidade de formatos para diferentes 
dispositivos, permite, por exemplo, que um candidato a fornecedor receba informações atualizadas ou 
diferenciadas no caminho para o escritório do cliente. 
 
Também permite respostas rápidas, on time, favorecendo a tomada de decisão mais assertiva. 
 
Essa configuração e apropriação da tecnologia que vem se estabelecendo implica certamente em mudança 
na forma de: resolver problemas, comprar, vender, estudar, se comunicar, tomar decisões e também 
raciocinar e agir. 
 
São novos hábitos e costumes gerando novas demandas e oportunidades. 
 
No espaço das demandas e das oportunidades, das soluções criativas e da inovação, principalmente, 
aquelas que se utilizam da Internet (como os portais de conhecimento, as salas de aula virtuais, os 
jogos para Internet), os sistemas de e-commerce têm grande apreço no mercado de trabalho do 
profissional de informática. 
 
Sendo assim, a disciplina de Tecnologias Web traz para o aluno um primeiro contato com esse campo de 
possibilidades. 
 
Esta disciplina permite que o estudante conheça a Internet e suas características, recursos e aplicações. 
 
1.1 Apresentação do ambiente distribuído da Internet 
 
A teia 
 
O embrião do que hoje é a maior rede de comunicação do planeta nasceu em setembro de 1969. 
 
Surgiu pelas mãos de militares. 
 
Alguns integrantes do Departamento de Defesa dos Estados Unidos tiveram a ideia de criar um sistema de 
comunicação que não pudesse ser destruído por bombardeios ou fosse capaz de ligar pontos estratégicos, 
como centros de pesquisas de bases das Forças Armadas. 
 
O projeto ARPA 
 
Desenvolvida pela agência Americana ARPA (Advanced Research and Projects Agency - Agência de 
Pesquisas em Projetos Avançados), em 1969, tinha o objetivo de interligar as bases militares e os 
departamentos de pesquisa do governo americano. 
4 
 
 
Essa rede teve o seu berço dentro do Pentágono e foi batizada com o nome de ARPANET ou ARPANet. 
 
1.2 Principais protocolos da Internet para desenvolvimento Web 
 
Protocolo 
 
Protocolo é o conjunto de regras usadas para permitir a comunicação entre participantes de um diálogo. 
 
Por exemplo, para nos comunicarmos tanto por linguagem escrita como falada épreciso estabelecer regras 
de comunicação entre os participantes. 
 
Protocolos para internet 
 
São os Protocolos de comunicação usados entre duas ou mais máquinas em rede para encaminhamento de 
dados. 
 
Equivale a um conjunto de regras e convenções padronizadas que devem ser obedecidas a fim de permitir 
a troca de informações entre computadores ligados em rede. 
 
Permite que um computador se comunique com outro através de uma de rede, sem que o usuário precise 
se preocupar em saber qual o meio físico que está sendo utilizado. TCP/IP considerado o principal 
conjunto de protocolos usados na internet. 
 
1.2.1 HTTP - HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) 
 
É um protocolo (conjunto das informações, normas e regras definidas) de comunicação entre sistemas de 
informação que permite a transferência de dados entre redes de computadores, principalmente na World 
Wide Web (Internet). 
 
Ao acessar alguns sites, usamos a tradicional URL (Uniform Resource Locator (Localizador Uniforme de 
Recursos)). 
 
A URL é o endereço do site. Dessa forma, você já deve ter reparado também em uma sigla seguida do 
código “://”. 
 
Por exemplo: http://www.exemplo.com.br 
 
Tudo o que vem antes desse código é o protocolo usado para fazer um site chegar até a sua tela. 
 
Qual a função do HTTP? 
 
O HTTP é o protocolo que determina os padrões e define as regras de troca de informações entre 
servidores que abrigam sites e computadores. 
 
Com a Homehost (“hospedagem”), você pode criar sites com fotos, vídeos, textos e hospedar tudo isso 
em um servidor. Já os usuários, podem acessar todos esses conteúdos através de seus equipamentos 
eletrônicos. 
5 
 
 
Como o HTTP funciona? 
 
Quando alguém digita a URL do seu site em um navegador, é isto que acontece: 
 
1. Se a URL pertencer a um domínio próprio, o navegador primeiro se conecta a um servidor e 
recuperará o endereço IP correspondente ao servidor; 
2. O navegador se conecta ao servidor e envia uma solicitação HTTP para a página da web desejada; 
3. O servidor recebe a solicitação e verifica a página desejada. Se a página existir, o servidor a 
mostrará. Se o servidor não conseguir encontrar a página solicitada, ele enviará 
uma mensagem de erro HTTP 404, ou seja, página não encontrada; 
4. O navegador, então, recebe a página de volta e a conexão é fechada; 
5. Caso a página exista (e é isso que se espera), o navegador à analisa e procura outros elementos 
necessários para concluir a sua exibição (textos, imagens e afins); 
6. Para cada um desses elementos, o navegador faz conexões adicionais e solicitações HTTP para o 
servidor para cada elemento; 
7. Quando o navegador terminar de carregar todos os elementos, a página será carregada na janela do 
navegador. 
 
 
 
 
 
Request – Solicitação. Response – Resposta à solicitação 
 
 
6 
 
1.2.2 HTTPS - Hyper Text Transfer Protocol Secure (Protocolo de Transferência de Hipertexto 
Seguro) 
 
O maior problema com o HTTP é que algumas conexões, como é o caso do Wi-Fi, são propícias para que 
um hacker, acesse o conteúdo e intercepte os dados recebidos, deixando então a conexão HTTP insegura 
para o usuário. 
 
O protocolo HTTPS criou uma camada de proteção para quem está acessando o seu site. 
 
Quando uma conexão é HTTPS, quer dizer que ela possui uma criptografia específica que impede que 
os dados sejam interceptados, aumentando assim a segurança da navegação. 
 
Diferença entre HTTP e HTTPS? 
 
HTTP é um protocolo baseado em texto, então, pessoas más intencionadas podem acessar esses textos e 
roubar informações. 
 
O HTTPS garante segurança as informações do usuário, pois, para construir um site com esse protocolo, o 
administrador precisa criar duas chaves, uma pública e outra privada. 
 
Quando o usuário solicita o acesso a esse site, o servidor envia a chave pública ao usuário, e fica com a 
posse da chave privada, garantindo que todas as informações sejam acessadas apenas pelos detentores das 
chaves. 
 
A conexão segura identifica as páginas da internet por meio de um Certificado SSL, o que facilita o seu 
reconhecimento. 
 
O que é Certificado SSL? 
 
De forma mais específica, um site precisa ter um Certificado de segurança SSL (Secure Socket Layer) 
para validar o HTTPS da página. 
 
Ele é emitido por uma Autoridade de Certificação (Certification Authority), que verifica se o endereço 
web pertence realmente à sua organização ou proprietário. 
 
É este Certificado que criptografa todas as informações trocadas dentro da página, gerando segurança e 
privacidade para o usuário. 
 
1.2.3 O Protocolo TCP/IP 
 
O TCP/IP (também chamado de pilha de protocolos TCP/IP) é um conjunto de protocolos de comunicação 
entre computadores em rede. 
 
Seu nome vem de dois protocolos: 
 
• O TCP (Transmission Control Protocol - Protocolo de Controle de Transmissão); 
• O IP (Internet Protocol - Protocolo de Internet, ou ainda, protocolo de interconexão). 
7 
 
 
Em uma rede, os equipamentos precisam se comunicar. Para isso, surgiram protocolos de comunicação e 
modelos para eles. Entre eles, existe o modelo TCP/IP. O nome vem de dois de seus protocolos o TCP e 
o IP. 
 
De uma maneira simples, pode-se dizer que protocolo é a “língua” que os equipamentos ligados em uma 
rede utilizam para se comunicarem. 
 
Dessa forma se permite que equipamentos de diferentes tecnologias, fabricantes e finalidades possam se 
entender. 
 
Sem os protocolos de comunicação padronizados, seria difícil, por exemplo, que existisse um rede de 
alcance mundial como a Internet. 
 
Para padronizar a criação de protocolos, foi criado em 1971 e formalizado em 1983 o modelo OSI (Open 
Systems Interconnection). 
 
Este modelo define uma arquitetura de protocolos para redes. 
 
Com ele, diferentes fabricantes podem produzir seus equipamentos de maneira a se comunicarem, 
interpretar a informação contida na comunicação e executar a tarefa solicitada. 
 
Outros Protocolos 
 
FTP - File Transfer Protocol (Protocolo de Transferência de Arquivo) 
 
Recurso utilizado para transferências de arquivos pela internet. Este protocolo permite apenas o envio e o 
recebimento dos arquivos, no entanto para a leitura serão necessários outros programas. 
 
SSL - Secure Sockets Layer (Camada de Portas de Segurança) 
 
Este é um protocolo de segurança que permite a confirmação da identidade de um servidor, verificando o 
nível de confiança. 
 
ICMP - Internet Control Message Protocol (Protocolo de Mensagens de Controle da Internet) 
 
Autoriza a criação de mensagens relativas ao IP, mensagens de erro e pacotes de teste. 
 
SMTP - Simple Mail Transfer Protocol (Protocolo para Transferência de e-mail Simples) 
 
Usado para envios de mensagem em rede funcionando como roteador do correio eletrônico. 
 
IMAP - Internet Message Access Protocol (Protocolo de Acesso ao Correio da Internet) 
 
Permite a manipulação de caixas postais remotas como se fossem locais, permitindo a organização da 
forma que melhor convier. 
 
POP - Post Office Protocol (Protocolo dos Correios) 
8 
 
 
Usado para receber mensagens de e-mail. Permitem apenas o acesso a uma caixa de e-mail, já o IMAP 
permite o acesso a várias. 
 
MIME - Multipurpose Internet Mail Extensions (Extensões Multifunção para Mensagens de 
Internet) 
 
Se refere a um padrão da internet para o formato das mensagens de correio eletrônico. Permite ao usuário 
a utilização do e-mail trabalhando em multimídia. 
 
O primeiro navegador Mosaic 
 
Conhecido por muitos como o primeiro Navegador WWW e cliente Gopher, foi o primeiro navegador a 
rodar no Windows (além do UNIX), que abriu a web para o público em geral. 
 
Foi desenvolvido no National Center for Supercomputing Applications (NCSA) a partir de 1992, lançado 
em 1993 e extinto em 27 de Janeiro de 1997. 
 
 
 
 
A Rede no Brasil 
 
Emmeados dos anos de 1990, a internet no Brasil se desenvolveu junto ao meio acadêmico e científico. 
 
No seu início, o acesso era restrito a professores e funcionários de universidades e instituições de 
pesquisa. 
 
Somente em maio de 1995 a internet deixou de ser privilégio das universidades e da iniciativa privada 
para se tornar de acesso público. 
 
Desde então o número de provedores que oferecem o serviço e o número de usuários que utilizam esse 
recurso aumentam a cada ano. 
9 
 
 
O Consórcio World Wide Web (W3C) 
 
É um consórcio internacional, no qual organizações filiadas, uma equipe em tempo integral e o público 
trabalham juntos para desenvolver boas práticas para a Web. 
 
O W3C tem como missão conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo 
protocolos e diretrizes que garantam seu crescimento em longo prazo. 
 
 
 
 
 
 
 
 
 
10 
 
Unidade 2 - INTRODUÇÃO AO HTML5 
 
O HTML surgiu como solução para a disseminação e compartilhamento de documentos científicos entre 
pesquisadores. 
 
Tim Berners-Lee, um físico britânico, criou com a ajuda do estudante do CERN (European Council for 
Nuclear Research), Robert Cailliau, a Linguagem de Marcação de Hipertexto ou como conhecemos, o 
HTML, quando em 1989, conseguiu realizar de forma bem sucedida a primeira comunicação entre um 
cliente HTTP e um servidor. 
 
HTML - O que é? 
 
A sigla HTML significa HyperText Markup Language em português, linguagem de marcação de 
hipertexto. A primeira versão do HTML foi baseada na linguagem SGML. O SGML (Standard 
Generalized Markup Language) era utilizado para a estruturação de documentos e foi dele que o HTML 
herdou diversas tags tais como: título <h1> ao <h6>, cabeçalho <head> e parágrafo <p>. 
 
O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu 
junto com o HTTP, ambos possibilitaram a internet ser popularizada. 
 
O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) 
na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e 
compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW ( 
World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala 
mundial da WEB. 
 
Versões do HTML 
 
Versão 2.0 – 1995 
 
A primeira versão que surgiu depois da criação do HTML puro, foi a 2.0. O seu objetivo era formalizar 
todas as características do HTML que já eram utilizadas. A sua aparição ocorreu no primeiro evento 
mundial sobre a Web, denominado como World Wide Web Conference. 
 
Versão 3.2 – 1997 
 
Além de corrigir problemas de compatibilidade da versão 2.0, esta versão do HTML propiciou a criação 
de tabelas, applets e texto flutuante ao redor de imagens. 
 
Versão 4.01 – 1999 
 
Sua característica era fornecer compatibilidade com as versões anteriores, mas também acrescentar 
suporte para opções multimídias, folha de estilos e melhorar as práticas de programação. 
 
Versão HTML 5 – 2014 
 
A última versão do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os 
desenvolvedores e usuários finais. 
11 
 
 
O HTML 5 fornece o suporte de áudio e vídeo em alto nível que não existia nas versões anteriores. 
 
As principais diferenças entre o HTML 5 e as versões anteriores são: 
 
• O HTML 5 utiliza um banco de dados da Web, enquanto as outras versões utilizam o cache do 
navegador; 
• O HTML 5 não se baseia mais no SGML, por isso pode ser aprimorado e aperfeiçoado de forma 
independente. 
 
Essa nova versão suporta novos tipos de controles de formulários, como data e horas, e-mail, pesquisa, 
etc. 
 
Como funciona 
 
O HTML é uma linguagem de marcação. Estas linguagens são constituídas de códigos que delimitam 
conteúdos específicos, segundo uma sintaxe própria. 
 
O HTML tem códigos para criar paginas na web. Estes códigos que definem o tipo de letra, qual o 
tamanho, cor, espaçamento, e vários outros aspectos do site. 
 
No início era muito complicado aprender HTML, pois eram muitos comandos para fazer algo simples. A 
cada nova versão, o HTML fica mais fácil de utilizar, e adquire mais funções. 
 
Atualmente qualquer pessoa pode acessar a internet a aprender a construir um site básico em questão de 
horas, seguindo os passos de tutoriais e aprendendo as funções de cada código. 
 
O HTML foi a primeira linguagem de nível mundial, porem não é a única. Existem muitas outras 
linguagens destinadas á criação de páginas da web, porém o HTML ainda prevalece. Atualmente já é 
possível integrar varias linguagens na mesma pagina da Web, sendo possível usar duas ou mais linguagens 
no mesmo site. 
 
Para criar e editar códigos em HTML é necessário qualquer editor de texto comum, como bloco de notas. 
 
Para testar os códigos, basta salvar o arquivo em formato .HTML e executar. Para o teste é necessário ter 
um navegador configurado como padrão. Não é necessária internet, pois o arquivo com os códigos esta na 
maquina onde esta sendo executado. 
 
A maioria dos códigos em HTML precisam ter um código de inicialização e um de finalização - são as 
chamadas Tag's (tag de abertura e tag de fechamento). Por exemplo, para definir o titulo da pagina, é 
necessário escrever: 
 
Exemplo: 
 
Um código HTML para uma pagina onde apareça “Universidade Estacio de Sa” escrito em 
azul, em um fundo rosa: 
 
12 
 
<HTML> 
 <Head> 
 <Title>Título</title> 
 </head> 
 <body bgcolor="pink" text="blue"> 
 Universidade Estacio de Sa 
 </body> 
</HTML> 
 
Basta copiar o código para um editor de texto, salvar em .HTML e abrir no navegador. 
 
Existem programas profissionais para criação de páginas em html automaticamente, como o Adobe 
Dreamweaver, entretanto, com o tempo o desenvolvedor precisará criar páginas complexas demais, sendo 
necessário ele mesmo digitar alguns códigos html. 
 
História do HTML 
 
Pode-se afirmar que o HTML teve o seu surgimento no início da década de 90. E que entre 1990 e 1995, 
passou por várias atualizações e modificações em sua estrutura. 
 
Até 1995 quem supervisionava e controlava o padrão da linguagem era o próprio CERN. 
 
Desse ano em diante, a W3C (The World Wide Web Consortium), uma entidade que regula os padrões da 
Web, tomou para si a sua supervisão e controle. 
 
Versões do HTML 
 
Versão 2.0 – 1995 
 
A primeira versão que surgiu depois da criação do HTML puro, foi a 2.0. O seu objetivo era formalizar 
todas as características do HTML que já eram utilizadas. A sua aparição ocorreu no primeiro evento 
mundial sobre a Web, denominado como World Wide Web Conference. 
 
Versão 3.2 – 1997 
 
Além de corrigir problemas de compatibilidade da versão 2.0, esta versão do HTML propiciou a criação 
de tabelas, applets e texto flutuante ao redor de imagens. 
 
Versão 4.01 – 1999 
 
Sua característica era fornecer compatibilidade com as versões anteriores, mas também acrescentar 
suporte para opções multimídias, folha de estilos e melhorar as práticas de programação. 
 
Versão HTML 5 – 2014 
 
A última versão do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os 
desenvolvedores e usuários finais. 
 
https://www.w3.org/
13 
 
O HTML 5 fornece o suporte de áudio e vídeo em alto nível que não existia nas versões anteriores. 
 
As principais diferenças entre o HTML 5 e as versões anteriores são: 
 
• O HTML 5 utiliza um banco de dados da Web, enquanto as outras versões utilizam o cache do 
navegador 
• O HTML 5 não se baseia mais no SGML, por isso pode ser aprimorado e aperfeiçoado de forma 
independente 
• Essa nova versão suporta novos tipos de controles de formulários, como data e horas, e-mail, 
pesquisa, etc. 
 
2.1 O que é uma Tag? 
 
Tags são estruturas de linguagem de marcação contendo instruções, tendo uma marca deinício e outra de 
fim para que o navegador possa renderizar uma página. 
 
Há uma tendência nos dias atuais para se usar as tags apenas como delimitadores de estilo e/ou conteúdo, 
tanto em HTML quanto em XML. 
 
Sintaxe das tags 
 
Todas as TAGS possuem o mesmo formato, ou seja, possuem um padrão de codificação que deve ser 
seguido pelos desenvolvedores web. 
 
As TAGS começam com um sinal de “<” e terminam com um sinal de “>”. 
 
As TAGS são usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um 
código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo 
visual da página. 
 
A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” e 
“menor que”), ou seja: < >. 
 
Obs. 
 
Chevron é um sinal de pontuação duplo que se coloca em um fragmento de texto, devendo ser traduzido 
como "divisa". Matematicamente também significa "maior que" e "menor que". 
 
As TAGS HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam 
de fechamento. 
 
As TAGS que precisam de fechamento possuem a sintaxe <tag> </tag>, já as que não precisam de 
fechamento possuem como estrutura <tag/>. 
 
Algumas regras das tags HTML 
 
• As tags podem ser escritas tanto em maiúsculas como em minúsculas, porém, os desenvolvedores 
adotaram o padrão de escrita sempre em minúsculas, assim facilitando a visibilidade do código; 
https://www.homehost.com.br/blog/tutoriais/o-que-e-html/
14 
 
• Não pode haver espaços na declaração das tags; 
• Todas as TAGS devem possuir a sua tag de abertura e tag de fechamento respectivamente. 
 
2.2 Atributos de uma tag 
 
Os atributos são usados para personalizar as tags, modificando sua estrutura ou funcionalidade. 
Igualmente, os atributos são utilizados para atribuir uma classe ou id a um elemento. 
 
A maioria das tags tem seus próprios atributos. Contudo, existem alguns atributos genéricos que podem 
ser utilizados na maioria das tags HTML, vamos estudá-los: 
 
• class=”…“ – Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais 
elementos); 
• id=”…“ – Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único 
elemento); 
• style=”…” – Permite incluir elementos CSS (estilos) dentro da tag; 
• lang=”…” – Define o idioma principal do elemento; 
• title=”…” – Define o título do elemento; 
• alt=”…” – Define um texto alternativo e, por isso, é muito utilizado em imagens, auxilia nas 
práticas de SEO - Search Engine Optimization; 
• hidden – Oculta o elemento; 
• align=”…” – Permite definir o padrão de alinhamento desse elemento, como por exemplo: right, 
center, left e justify; 
• width=”…” – Define uma largura para o elemento; 
• height=”…” – Define uma altura para o elemento. 
 
Essas são os principais atributos, porém existem diversos outros que devem ser estudados e podem ser 
utilizados no seu código. 
 
Exemplo da estrutura de um codigo HTML: 
 
<!DOCTYPE html> <!-- informa ao navegador a versão 5 do HTML --> 
<html> <!-- elemento básico da estrutura do HTML--> 
 <head> <!-- delimita o cabeçalho do documento --> 
 </head> <!-- fim cabeçalho do documento --> 
 <title>Título da página</title> <!--define o título da página--> 
 <meta charset="utf-8"/> <!-- inserir metadados ao seu documento, 
 a informação charset=”UTF-8″ 
 é compatibilidade do código com 
 os caracteres de padrão latino 
 americano--> 
 <body> <!-- corpo do documento --> 
 Exemplo da estrutura de um codigo HTML 
 </body> <!-- fim corpo do documento --> 
</html> <!-- fim da estrutura do HTML --> 
 
 
 
15 
 
Em primeiro lugar, vamos agora entender para que serve cada uma dessas tags: 
 
• <!DOCTYPE html> – A tag !DOCTYPE informa ao navegador a versão do HTML que está 
sendo utilizada no documento. Por exemplo: no HTML5, basta incluir !DOCTYPE html, e assim o 
navegador já saberá que se trata de um documento na versão HTML5; 
• <html></html> – Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela 
conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar 
com essa tag; 
• <head></head> – Essa tag delimita o cabeçalho do documento. Não possui nenhum valor 
visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais a 
uma boa apresentação do seu documento HTML; 
• <title></title> – Essa tag define o título da sua página, o nome que aparecerá na sua aba, 
janela ou guia. Por esta razão, a tag <title> é de grande importância para o SEO; 
• <meta/> – Essa tag permite inserir metadados ao seu documento, no caso acima, a 
informação charset=”UTF-8″, que garante a compatibilidade do código com os caracteres de 
padrão latino americano; 
• <body></body> – Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa 
tag que todos os elementos visíveis do seu site devem ser inseridos. 
 
Agora que já conhecemos as tags HTML que formam a estrutura básica de uma página, podemos então 
estudar as diversas tags que contemplarão o documento. 
 
Exemplo de Formulário no HTML: 
 
<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
 <head> 
 <title>TODO supply a title</title> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 </head> 
 <body> 
 <div>Cadastramento de Funcionário</div> 
 </body> 
 
 <form action="/efetivar.html" method="POST"> 
 </form> 
 
 <form> 
 <label for = "matricula">Matricula:</label> 
 <input type="number" name="matricula" id="matricula" size="15" maxlength="6" 
 style="margin-top:15px; margin-left:0px; margin-right:15px; height:20px;"/> 
 </form> 
 
 <form> 
 <label for="nome">Nome:</label> 
 <input type="text" name="nome" id="nome" size="50" maxlengh="40" 
16 
 
 style="margin-top:15px; margin-left:25px; margin-right:15px; height: 20px;"/> 
 </form> 
 
 <form> 
 <label for="endereco">Endereco:</label> 
 <input type="text" name="endereco" id="nome" size="50" maxlengh="40" 
 style="margin-top:15px; margin-left:5px; margin-right:15px; height:20px;"/> 
 <label for="complemento">Complemento:</label> 
 <input type="text" name="complemento"id="complemento"size="20" maxlengh="20" 
 style=" margin-top:15px; margin-left:5px; margin-right:15px; height: 20px;"/> 
 
 <label for="cep">Cep:</label> 
 <input type="number" name="cep" id="cep" size="10" maxlengh="9" 
 style=" margin-top:15px; margin-left:5px; margin-right:15px; height:20px;"/> 
 </form> 
 <form> 
 <input type="submit" value = "Salvar" 
 style="margin-top: 15px; margin-left: 75px; margin-right: 20px; "/> 
 </form> 
</html> 
 
 
 
 
 
 
O que é o SEO de um site? 
 
O SEO (Search Engine Optimization), também conhecido como otimização de sites, é rapidamente 
definido como uma forma de aumentar os acessos do seu site através de um conjunto de técnicas e 
estratégias que permitem que um site melhore seu posicionamento nos resultados orgânicos dos 
mecanismos de busca, como Google. 
 
Boas práticas de SEO 
 
SEO (Search Engine Optimization) é definido como um conjunto de estratégias e técnicas com o objetivo 
de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) 
nos sites de busca, conquistando mais visitantes e consequentemente mais conversões. 
17 
 
 
Boas práticas de SEO parao conteúdo de seu site 
• Escreva textos fáceis de se ler; 
• Mantenha uma boa organização em torno do tema; 
• Use linguagem que seja relevante para seu público-alvo; 
• Tenha conteúdo atual e exclusivo; 
• Ofereça conteúdos exclusivos e serviços; 
 
2.3 Breve definição de CSS 
 
CSS é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo em Cascatas. É uma maneira de dar 
estilo ao código criado por linguagens como HTML, XML ou XHTML, por exemplo. De forma prática, 
ela funciona como uma camada de personalização ao conteúdo visível. 
 
Estes tipos de linguagem citados foram idealizados para serem funcionais e, por serem de marcação, 
precisaram ser aperfeiçoados. O CSS, no caso, veio como uma boa solução para aprimorar a estética dos 
sites. 
 
Por meio dele, é possível separar formatos de conteúdos, bem como definir como serão exibidos em cada 
página. 
 
Para que serve o CSS? 
 
A tecnologia CSS foi criada para marcar a separação entre conteúdos e páginas da web, e para dar uma 
forma de apresentação a elas. Isso gera múltiplos benefícios, como: 
 
• Apresentar o documento final em diferentes estilos (tela, voz, impressão); 
• Ter um site responsivo (adptável a diversas plataformas); 
• Evitar criar arquivos muito pesados; 
• Determinar o estilo visual de um site inteiro. Dessa forma, se mudamos uma página, é possível 
todas automaticamente; 
• Trabalhar com padrões e separar (até certo ponto) a estrutura da apresentação, fazendo um trabalho 
mais definido; 
• Garantir maior flexibilidade e controle nas especificações do site; 
• Simplificar a criação de uma página. 
 
Como o CSS funciona? 
 
Seu site pode ter várias páginas similares e utilizando CSS, você armazena as informações em arquivos 
comuns que todas as páginas compartilham. 
 
Quando um usuário acessa uma página, o navegador carrega as informações de estilo junto com o 
conteúdo da página. Uma linguagem de marcação, como o HTML, também fornece alguns modos de 
especificar o estilo. 
 
Quando utilizar CSS, normalmente-se evita utilizar recursos da linguagem de marcação para que todas as 
informações de estilo do documento estejam em um só lugar. 
 
https://rockcontent.com/blog/marketing-de-conteudo-resume-a-conteudo/
18 
 
Para que o arquivo HTML “leia” o arquivo CSS é necessário que se coloque entre as 
tags <head></head> esta linha <link href=”seu_css.css” rel=”stylesheet” />. 
 
 Desta forma as tags do seu HTML obedecerão aos estilos do seu arquivo css, que é um arquivo de texto 
com a extensão .css. 
 
Vantagens de Usar CSS 
 
É bem fácil de perceber quando um site não usa a linguagem CSS na sua estrutura. Imagine uma situação 
em que uma página HTML que não carrega completamente. E, na imagem de fundo, está uma tela 
totalmente branca, e os textos estão em azul ou preto. 
 
Antigamente, essa era a realidade dos desenvolvedores. Era preciso definir e escrever toda a estrutura 
textual e visual de um site na linguagem de marcação HTML. Com, o CSS, o programador cria arquivos 
CSS estilizados e pode inseri-los sobre o código HTML. 
 
Ou seja, com o CSS, não é mais necessário escrever os elementos de um site individualmente em código 
HTML. A estrutura textual de conteúdo fica com o HTML. A parte visual, agora, é toda definida pelos 
múltiplos estilos possíveis com o CSS. 
 
Essa é uma das grandes vantagens de se usar CSS. 
 
Outras vantagens são: 
 
Mudanças Rápidas e Facilitadas 
 
Os estilos implementados pelo CSS permitem que a parte estrutural e fundamental de um documento seja 
separada da sua parte de apresentação. Ou seja, mudanças na parte visual e no estilo do arquivo podem ser 
feitas de forma rápida e facilitada, sem comprometer todo o conteúdo do arquivo. 
 
Folhas de Estilo Multifuncionais 
 
Assim que o programador cria uma folha de estilos, ela pode ser aplicada a vários documentos diferentes. 
Assim, todos eles podem ter a mesma aparência e visual de página, caracteres e planos de fundo, por 
exemplo. Algo que otimiza o tempo de produção e agiliza os trabalhos no seu projeto na internet. 
 
Códigos Menos Poluídos e Mais Organizados 
 
Como o código de formatação fica armazenado em um único arquivo CSS, fora do contato com o HTML, 
os códigos CSS recebem menos atributos e propriedades específicas. Isso resulta em linhas de códigos 
mais limpas e mais fáceis de entender, economizando tempo na manutenção de um site. Os navegadores 
também carregam as páginas mais rapidamente. 
 
O Que é Possível Fazer Com CSS? 
 
O CSS é a linguagem de estilos para compor o aspecto visual de uma página na web. Por conta disso, ela 
contém uma série de aplicações. Conheça algumas delas abaixo. 
 
19 
 
Animações 
 
São elementos que ajudam sites a receber mais atenção dos visitantes do que simples páginas estáticas. 
 
Neste caso, é exigido um conhecimento mais aprofundado do programador para executar a estrutura certa 
de uma animação, pois ela é mais complexa do que apenas configurar elementos visuais simples. 
 
Efeitos Visuais 
 
O estilo cascata do CSS se encaixa com efeitos de estilo que se sobrepõem uns aos outros. Isso cria um 
atrativo visual extra para quem está acessando tal página na internet com essas funcionalidades. Um dos 
efeitos mais apropriados para este aspecto é o Parallax, que confere um efeito de profundidade mais 
realista ao layout. 
 
Sites Dinâmicos 
 
Como a linguagem de estilos CSS é versátil e fácil de implementar, desenvolvedores são capazes de criar 
sites dinâmicos usando efeitos combinados. Podem ser animações, passagens de transição, páginas 
responsivas, linhas e fontes personalizadas e mudanças de tonalidades quando o cursor do mouse passa 
sobre algum objeto. 
 
Landings Pages 
 
São as páginas de destino usadas para capturar informações dos visitantes ou oferecer vendas de produtos 
e serviços. Estas páginas precisam ser visualmente atrativas para conquistar a atenção de quem as acessa. 
Além disso, geralmente contam com formulários de inscrição e elementos gráficos destacados. Tudo feito 
com CSS. 
 
Como Usar CSS? 
 
Agora você vai aprender a como usar CSS no seu projeto. Como vimos antes, o HTML e o CSS trabalham 
juntos para apresentar uma página de internet bem estruturada. Tanto na parte do conteúdo quando no 
visual. 
 
Existem três formas para incluir o código CSS em seu projeto 
 
• Interno – O estilo (style) é utilizado dentro do head da página HTML; 
• Externo – Usa-se o código básico do HTML como ponto inicial e externamente é criado um 
arquivo com nome.css; 
• Inline - A primeira forma de aplicar CSS a uma página é utilizando o atributo style em 
elementos do HTML. Uma folha de estilo inline, as regras CSS são declaradas dentro da tag 
de abertura do elemento HTML com uso do atributo style. 
 
Por exemplo: temos que <p>Isso é um parágrafo<p>. 
 
Para estilizar esse trecho em CSS, você precisa selecionar um elemento e declarar o que deseja fazer com 
o bloco de informação. 
 
20 
 
Assim, na prática, temos: 
 
Exemplo com o style interno: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>TODO supply a title</title> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
 <head> 
 <style> 
 body { 
 background-color: yellow; 
 } 
 h1 { 
 color: blak; 
 padding: 60px; 
 } 
 </style> 
 </head> 
 <body> 
 <h1>Exemplo style interno</h1> 
 <p>Titulo em preto e fundo amarelo</p> 
 </body> 
</html> 
 
 
 
 
 
 
21 
 
 
Exemplo com o style externo: 
 
Arquivo style.css 
 
body { 
 background-color: yellow; 
} 
h1 { 
 color: blak; 
 padding: 60px; 
} 
 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>TODO supply a title</title> 
 <meta charset="UTF-8"> 
 <metaname="viewport" content="width=device-width,initial-scale=1.0"> 
 <link rel="stylesheet" type="text/css" href="style.css" /> 
 </head> 
 <body> 
 <div>Exemplo CSS Externo</div> 
 </body> 
</html> 
 
 
 
 
22 
 
Exemplo com o style inline: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Estilo Inline </title> 
 <meta charset="UTF-8"> 
 </head> 
 <body style="background-color: GreenYellow;"> 
 <h1 style="color: orange;"> Tecnologias para Intertnet</h1> 
 <p style="color: DarkViolet; font-size: 18px;"> 
 Mensagem de teste cor violeta 
 </p> 
 <p style="color: red; font-size: 18px;"> 
 Segunda mensgem cor vermelha. 
 </p> 
 </body> 
</html> 
 
 
 
 
 
2.4 O que é DOM (Document Object Model) 
 
O Modelo de Documento por Objetos é uma convenção multiplataforma e independente de linguagem de 
programação, fiscalizada pelo entidade World Wide Web Consortium, para representação e interação com 
objetos em documentos HTML, XHTML e, XML. 
 
Quando um documento HTML é baixado no navegador, esse navegador precisa transformar em uma 
página Web o que é basicamente uma longa string de caracteres. 
 
23 
 
Para tanto, o navegador decide quais partes são parágrafos, quais são cabeçalhos, quais são texto e assim 
por diante. 
 
Para evitar que os pobres programadores de JavaScript tenham de fazer exatamente o mesmo trabalho, o 
navegador armazena sua interpretação do código HTML como um estrutura de objetos, 
chamada Document Object Model ou DOM. 
 
Como resultado da maneira pela qual o código HTML é escrito - como uma hierarquia de elementos 
aninhados, marcados com tags de início e fim - o DOM cria um objeto diferente para cada elemento, mas 
vincula cada objeto de elemento ao seu elemento circundante (ou elemento pai). 
 
Isso cria uma relação pai-filho (parent-children) explícita entre os elementos e torna mais imediata a 
visualização do DOM como uma estrutura em árvore. 
24 
 
Unidade 3 - INTRODUÇÃO À CONSTRUÇÃO DE PÁGINAS ESTÁTICAS 
 
3.1 Tag's estruturais do HTML5 
 
<!-- --> 
 
Comentário. 
 
Exemplo: 
 
<!-- Alterando cor fundo da tela --> 
 
<head> 
 
O elemento head representa uma coleção de metadados para o documento. Metadados são, como o próprio 
nome diz, dados sobre os dados. 
 
De forma resumida, você poderá informar o navegador alguns detalhes sobre o conteúdo da página. 
 
Por exemplo, <meta charset="UTF-8"> você está especificando a coleção de caracteres que o navegador 
deve utilizar para analisar sua página. 
 
Você ainda pode especificar o autor, descrever o conteúdo da página, ter configurações para SEO, 
informar folhas de estilos para o navegador utilizar na renderização da página, etc. 
 
Exemplo: 
 
<head> 
 <meta charset="UTF-8"> 
</head> 
 
<title> 
 
Define o título da página (aba) 
 
Exemplo title: 
 
<head> 
 <title> Titulo da pagina </title> 
</head> 
 
 <body> 
 
O elemento que representa o conteúdo de um documento HTML. É permitido apenas um <body> por 
documento. 
 
25 
 
Exemplo: 
 
<body bgcolor = "#FFF68F" text="black"> 
 <h1> Primeiro Título em HTML</h1> 
</body> 
 
<header> 
 
O <header> é utilizado para representar o cabeçalho de um documento ou seção declarado no HTML. 
 
Nele podemos inserir elementos de <h1> a <h6>, até elementos para representar imagens, parágrafos 
ou mesmo listas de navegação. 
 
Exemplo: 
 
<body> 
 <article> 
 <header> 
 <hgroup> 
 <h1>Livro sobre HTML</h1> 
 <h2>Como criar uma página </h2> 
 </hgroup> 
 <p>O curso de HTML é muito importante </p> 
 </header> 
 <section> 
 <h1>O HTML 5</h1> 
 <p>Surgimento do HTML 5</p> 
 </section> 
 <section> 
 <h1>Tags</h1> 
 <p>Comandos de criação de páginas.</p> 
 </section> 
 </article> 
</body> 
 
< H1> 
 
H1 é a abreviação de “Heading Tag 1”, e também é a primeira e mais importante das seis tags utilizadas 
para definir e diferenciar os títulos do código HTML de uma página web. 
 
A principal função da tag H1 é diferenciar o título principal do restante do conteúdo. Tem uma grande 
importância para o SEO, pois permite estruturar a página para uma melhor leitura, tanto das pessoas 
quanto para os bots do Google. 
 
Usar as tags de H1 a H6 de maneira sequencial e adequada permite dividir e organizar o conteúdo em 
seções e tornar tudo mais fácil de ser lido e compreendido. 
 
 
26 
 
Exemplo: 
 
<header> 
 <h1> Titulo da pagina </h1> 
 <h2> Subtitulo da pagina </h2> 
 <h3> Subtitulo da pagina </h3> 
 <h4> Subtitulo da pagina </h4> 
 <h5> Subtitulo da pagina </h5> 
 <h6> Subtitulo da pagina </h6> 
</header> 
 
<br> 
 
Imprime linha(s) em branco. 
 
Exemplo: 
 
<body"> 
 <br> <br> <br> 
</body> 
 
<hr> 
 
O marcador <HR> ou <HR/> "Horizontal Rule" é usado para inserir uma linha horizontal numa página 
HTML. 
 
As propriedades da tag <HR> são: 
 
Size= Medida padrão em unidade pixel que define a altura da linha. A unidade de medida "px" não 
necissita ser inserida. 
 
Align= Define o alinhamento da linha em relação à página. 
 
O alinhamento pode ser à esquerda, no centro ou à direita. 
 
O alinhamento padrão, caso não seja definido na tag é o centro. 
 
Width= Largura da linha horizontal que é determinada em porcentagem do local onde a tag <HR> está 
inserida ou em pixels. A unidade de medida "px" não necissita ser inserida. 
Noshade: Quando está propriedade está definida a linha seráa sem sombreamento. Se a propriedade não 
for definida e não houver a inclusão de cor alternativa à padrão a linha será sombreada. 
 
color= Define a cor da linha horizontal. A cor padrão da tag <HR> é #A0A0A0. Portanto se nenhuma a 
propriedade "color" não for definida a linha assumirá esta cor. 
 
Exemplo: 
 
<hr width="70%" align="left" size="2" color="blue"> 
27 
 
 
Uma tag <hr> sem nenhuma propriedade assim aparecerá no navegador: 
 
<HR> 
 
 
Uma tag <hr> com a propriedade "size=10" assim aparecerá no navegador: 
 
<HR size="10" /> 
 
 
 
Uma tag <hr> com as propriedades "align="left"", quot;width=30%" e "size=5" assim aparecerá no 
navegador: 
 
<HR align="left" width="30%" size="5" /> 
 
 
 
Uma tag <hr> com a propriedade "noshade" ativada, e as propriedades width="30%" size="5" assim 
aparecerá no navegador: 
 
<HR width="30%" size="5" noshade /> 
 
 
Uma tag <hr> com as propriedades width="30%" size="5" color="Yellow" assim aparecerá no navegador: 
 
<HR width="30%" size="5" color="Yellow" /> 
 
 
A tag <hr> ou <hr/ > é considerada uma tag vazia, pois, não necessita fechamento. 
 
Exemplo: 
 
<!doctype html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title> Exemplo Pagina HTML </title> 
 </head> 
 <body> 
 <font size = "3" face="arial" color="#FF00FF" </font> 
 <h1> <center>Titulo linha</center> 
 </h1> 
 
 <font size = "3" face="arial" color="blue" </font> 
 Primeira mensagem 
 <hr width="70%" align="left" size="2" color="blue"</hr> 
28 
 
 
 <br> 
 <font size = "5" face="calibre" color="red"</font> 
 Segunda mensagem 
 <hr width="70%" align="left" size="2" color="red"> 
 
 <br> 
 <font size = "4" face="batang" color="green"</font> 
 Terceira mensagem 
 <hr width="70%" align="left" size="2" color="green"> 
 </body> 
 
</html> 
 
 
 
Alterando a cor de fundo usando o nome das cores 
 
Visando facilitar nossa vida, é possível definir cores no atributo bgcolor através do nome das cores, ao 
invés de códigos hexadecimais. Obviamente, não existe 16 milhões de nomes de cores diferentes, por isso 
essa maneirade definir uma cor só serve para as cores mais usadas. 
 
Vá na URL das tabelas de cores (abaixo) e note que há nomes para algumas cores: 
 
http://en.wikipedia.org/wiki/Web_colors 
 
29 
 
Exemplo: 
 
<body bgcolor = "#FFF68F" text="black"> 
</body> 
<!-- #FFF68F é o hexa de amarelo (Yellow) --> 
 
Exemplos de outros nomes que você poderá usar: 
 
Green, Blue, Pink, Yellow, Black, Maroon, etc 
 
Alterando tamanho, tipo e a cor dos caracteres 
 
<font size = "5" face="calibre" color="red"</font> 
 
Exemplo: 
 
<body> 
 <font size = "3" face="arial" color="blue" </font> 
 Primeira mensagem 
 <hr width="70%" align="left" size="2" color="blue"</hr> 
</body> 
 
Parágrafos em HTML – <p> e </p> 
 
É a tag responsável pela quebra de parágrafo. É a <p> que finaliza o parágrafo e insere uma linha em 
branco entre os parágrafos. 
 
Sempre que quisermos que um trecho de um texto seja visto como parágrafo, devemos colocar tal texto 
entre as tags <p> e </p>, e o navegador irá se encarregar de dispor o parágrafo da melhor maneira 
possível. 
 
Lembrando que parágrafo é uma coisa, quebra de linha é outra. 
 
Você deverá continuar a colocar as tags <br /> ao final de cada linha, em nossa música. 
 
O elemento HTML <p> (ou Elemento HTML Parágrafo) representa um parágrafo do texto. 
 
Parágrafos são, geralmente, representados em mídia visual , como bloco de texto que são separados dos 
blocos adjacente por espaços brancos verticais e/ou recuo de primeira-linha. 
 
Exemplo: 
 
<!doctpy html> 
<html> 
 <head> 
 <!-- <meta charset = "UTF-8" meta> --> 
 <title> Exercício 1 Aula 3 </title> 
 </head> 
30 
 
 <body> 
 <p>"No mundo dos negócios todos são pagos com duas<br/> 
 <p>moedas: Dinheiro e Experiência. Agarre a experiência</br> 
 <p>primeiro, o dinheiro depois."</p> 
 </body> 
</html> 
 
 
 
Parágrafos em HTML – <p1> e </p1> 
 
A tem a mesma função de <p> mas não deixa linha em branco. 
 
Exemplo: 
 
<!doctpy html> 
<html> 
 <head> 
 </head> 
 <body> 
 <p1>"No mundo dos negócios todos são pagos com duas<br/> 
 <p1>moedas: Dinheiro e Experiência. Agarre a experiência</br> 
 <p1>primeiro, o dinheiro depois."</p1> 
 </body> 
</html> 
 
 
 
31 
 
 
3.2 Tag's Textuais 
 
São tags utilizadas para a inclusão de textos na página html no bloco <body>...</body>. 
 
Algumas tags 
 
<p> 
 
O elemento HTML <p> (ou Elemento HTML Parágrafo) representa um parágrafo do texto. Parágrafos 
são, geralmente, representados em mídia visual , como bloco de texto que são separados dos blocos 
adjacente por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco . 
 
Exemplo: 
 
<body> 
 <p> Testando tag HR </p> 
 <p> Testando novamente tag HR </p> 
 <p> Testando de novo tag HR </p> 
</body> 
 
<hr> 
 
Essa tag define uma divisão temática em uma página HTML (por exemplo, uma mudança de tópico). É 
usado para separar o conteúdo (ou definir uma mudança) em uma página HTML. 
Exemplo: 
 
<body> 
 <p> Testando tag HR</p> 
 <hr> 
 <hr width="70%" align="left" size="2" color="blue"> 
 <hr> 
</body> 
 
<pre> 
 
É a tag utilizada para representar texto pré-formatado. Um texto dentro desse elemento é tipicamente 
exibido em uma fonte não proporcional da mesma maneira em que o texto original foi disposto no 
arquivo. Espaços em branco são mantidos no texto da mesma forma em que este foi digitado. 
 
Exemplo: 
 
<body> 
 <pre> 
 Line 1. 
 Line 2 is to the right of line 1. 
 Line 3 aligns with line 2. 
 </pre> 
</body> 
32 
 
 
<blockquote> 
 
Tem como função exibir o texto indicando de qual referência foi retirado (citação). 
 
Exemplo: 
 
<body> 
 <blockquote cite="http://www.quote.com/sample.html"> 
 <p>Elemento textual.</p> 
 </blockquote> 
</body> 
 
<figure> 
 
Este elemento permite definir logicamente as informações de uma imagem. Trabalha com 
<figcaption> e <img>. 
 
Exemplo: 
 
<body> 
 <figure> 
 <figcaption>Foto de Férias</figcaption> 
 <img src="stata.jpg" alt="Foto das férias no Rio de Janeiro"> 
 </figure> </body> 
<div> 
 
Elemento que representa um bloco de texto. As TAGs <body>, <header>, <footer>, etc, 
possuem regras de utilização bem definidas. 
 
Caso o desenvolvedor necessite da criação de um bloco de texto que não se encaixe em alguma regra 
defina de bloco, pode-se utilizar o recurso da <div>. 
 
A <div> é um bloco de texto que pode ser usado em qualquer lugar do documento. Geralmente a <div> 
é usada para diagramar o layout de um site. 
 
 
O elemento HTML div define uma divisão ou seção em um documento HTML. O elemento div é 
frequentemente usado como um contêiner para outros elementos, o que facilita na estilização de 
blocos. Também é muito útil para inclusão de interações com Scripts (JavaScript). Portanto, ele é 
definido com um contêiner genérico para conteúdo de fluxo. 
 
Diante disso, a HTML div é muito utilizada quando precisamos agrupar elementos sem a necessidade do 
uso de um elemento semântico do HTML5. Isso acontece pois o elemento div não possui um valor 
semântico. 
 
Como é muito utilizado para agrupar elementos, acaba sendo um facilitador para organizar informações 
dentro de um layout. Dessa forma, é possível formatar e manipular os elementos, inclusive a própria 
33 
 
div, através do CSS de uma forma organizada. Geralmente é acompanha de atributos de id e classe, para 
poder facilitar essa organização e formatação. 
 
Como utilizar a HTML div: 
 
A tag <div> 
 
A sintaxe do elemento HTML div é através da tag de abertura <div> e de fechamento </div>. Por 
padrão, a div gera uma line-break (quebra de linha) automática ao ser utilizada. Isso ocorre pois 
possui como display padrão um elemento de bloco, ou seja display block. Portanto, para utilizar a 
div, basta colocar os elementos que quiser dentro da tag <div></div>. 
 
Atributos da div HTML 
 
O Elemento HTML Div costuma ter entre seus principais atributos: 
 
• id – Define uma id; 
• class – Define uma classe; 
• title – Define um título; 
• height – Define uma altura; 
• width – Define uma larguraPorém, com exceção do ID, da class e do title, todos os demais 
atributos já são considerados depreciados. Portanto, dessa forma, podemos definir a altura, a 
largura e a cor de fundo através do próprio estilo CSS, assim como diversas outras características. 
Porém, com exceção do ID, da class e do title, todos os demais atributos já são considerados depreciados. 
 
Portanto, dessa forma, podemos definir a altura, a largura e a cor de fundo através do próprio estilo CSS, 
assim como diversas outras características. 
 
Alterando a cor de fundo/background da HTML div 
 
Antes da versão 5 do HTML era possível utilizar o atributo bgcolor para poder escolher uma cor de 
background para a div. Porém, a partir da versão 5, o HTML passou a não ter mais suporte a este 
atributo. 
 
Portanto, para poder alterar a cor de fundo de uma div, devemos estilizar através do CSS. Para poder 
modificar a cor de fundo, basta utilizar a propriedade background ou background-color do CSS. 
 
Podemos utilizar o estilo inline, através do atributo style=”…”, através do CSS dentro das 
tags <style> ou ainda através de um folha de estilo externa. 
 
Para utilizar a propriedade do background ou background-color, basta declarar um valor da cor. 
 
Para isso, pode ser utilizado um código hexadecimal de cores, o nome da cor, ou ainda declarar as 
cores através do código rgb, rgba ou hsl. Portando, vejamos então abaixo as diversas formas de 
declarar uma cor de fundo: 
 
<div style="background-color: red"></div> 
34 
 
 <div style="background-color: #FF0000"></div> 
 <div style="background-color: rgb(255,0,0);"></div> 
 <div style="background: red"></div> 
 <div style="background:#FF0000"></div> 
 <div style="background: rgb(255,0,0);"> 
</div> 
 
Exemplo: 
 
<body> 
 <div> teste </div> 
</body> 
3.3 Tag's Específicas 
 
As tags abaixo são utilizadas nos documentos em HTML, e têm função estrutural no seu código. Portanto, 
essas tags têm grande importância na questão semântica da sua página, saber utilizá-las pode adequar o 
seu código para uma melhor visualização por parte do navegador e do usuário, além de proporcionar uma 
otimização para os processos de SEO - Search Engine Optimization (Motor de Otimização de Busca). 
 
O que é SEO? 
 
Você certamente já ouviu falar do Google, certo? 
 
Então, toda vez que uma página é publicada na internet, o Google (e outros buscadores) procuram indexá-la de 
modo que seja encontrada por quem a procura. 
 
Mas existem milhares de páginas sendo publicadas todos os dias na internet e isso faz com que haja bastante 
concorrência. Portanto, como fazer com que uma página fique à frente de outras? 
 
E aí que entra o SEO (Search Engine Optimization). Como a própria tradução já sugere, SEO é uma 
otimização para os motores de busca, isto é, um conjunto de técnicas que influenciam os algoritmos dos 
buscadores a definir o ranking de uma página para determinada palavra-chave que foi pesquisada. 
 
<section> 
 
O elemento <section> representa uma seção genérica dentro de um documento. Este elemento pode 
conter um agrupamento de textos com vários capítulos, seções numeradas, etc. 
 
No exemplo a seguir é apresentado um artigo contendo um assunto principal e dentro deste assunto várias 
seções com assuntos distintos. 
 
Exemplo: 
 
<body> 
 <p> O curso de HTML é muito importante </p> 
 <section> 
 <h1>O HTML 5</h1> 
 <p> Surgimento do HTML 5 </p> 
35 
 
 </section> 
 <section> 
 <h1>Tags</h1> 
 <p> Comandos de criação de páginas. </p> 
 </section> 
</body> 
 
<nav> 
 
Este elemento é a seção onde ficam as informações de navegação de página. Geralmente nesta seção são 
colocados os ligações (links internos) para a própria página ou ligações externas para outras páginas de 
sites externos. 
 
Exemplo: 
 
<body> 
 <header> 
 <nav> 
 <h1>Menu Principal</h1> 
 <ul> 
 <li><a href="articles.html">índice de artigos</a></li> 
 <li><a href="http://www.estacio.br"> Site da Estácio</a></li> 
 </ul> 
 </nav> 
 </header> 
</body> 
 
<article> 
 
É um artigo independente dentro de um texto, este elemento pode estar ou não dentro de um elemento 
<section>. 
 
Imagine um jornal com as seções de esportes, fofocas, etc. Dentro de cada seção existem vários artigos 
sobre textos específicos, por exemplo, na seção de esportes pode ter um artigo falando sobre o time A, 
outro sobre time B e o outro sobre o time C. 
 
Um artigo pode conter um elemento <header> que é o título e um elemento <footer> que é o rodapé 
do elemento. 
 
Exemplo: 
 
 <body> 
 <article> 
 <header> 
 <h1>Nova Vitória !</h1> 
 </header> 
 <p>O time A ganhou novamente, se continuar assim será líder do 
campeonato...</p> 
 </article> 
</body> 
36 
 
 
<aside> 
 
Representa uma seção de uma página que consiste de conteúdo que é relacionado ao conteúdo do seu 
entorno. 
 
Essas seções são, muitas vezes, representadas como barras laterais. Elas contém explicações laterais, 
como a definição de um glossário; avisos; a biografia do autor; ou, em aplicações web, informações de 
perfil ou links de blogs relacionados. 
 
Exemplo>: 
 
<body> 
 <aside> 
 <h1>Tenha uma graduação !!! </h1> 
 <p> 
 <a href=?http://www.estacio.br?> Estude na estácio</a> 
 </p> 
 </aside> 
</body> 
 
<h1>, <h2>, <h3>, <h4>, <h5>, e <h6> 
 
Elementos que representam o título de cada seção, sendo <h1> o maior título e <h6> o menor título. 
 
Exemplo: 
 
<body> 
 <h1>Maior </h1> 
 <h2>Menor 2 </h2> 
 <h3>Menor 3 </h3> 
 <h4>Menor 4 </h4> 
 <h5>Menor 5 </h5> 
 <h6>Menor 6 </h6> 
</body> 
 
<hgroup> 
 
Elemento usado em conjunto com as tags anteriores para delimitar o título da seção. 
 
Exemplo: 
 
<body> 
 <hgroup> 
 <h1>Livro sobre HTML</h1> 
 <h2>Como criar uma página </h2> 
 </hgroup> 
</body> 
 
 
37 
 
<header> 
 
O novo elemento <header> do HTML5 é usado para definir o cabeçalho de uma página ou seção, e 
pode conter logo, títulos, menu de navegação, campo de busca, etc. 
 
Exemplo: 
 
<body> 
 <header> 
 <h1>Livro sobre HTML</h1> 
 <h2>Como criar uma página </h2> 
 <p>O curso de HTML é muito importante </p> 
 </header> 
 <section> 
 <h1>O HTML 5</h1> 
 <p>Surgimento do HTML 5</p> 
 </section> 
</body> 
 
<footer> 
 
Este elemento contém basicamente as informações sobre o conteúdo da seção, como por exemplo o autor, 
links relacionados, etc. Essa tag define um rodapé para um documento ou seção. 
 
Um elemento <footer> normalmente contém: 
 
• Informação de autoria; 
• Informações sobre direitos autorais; 
• Informações de contato; 
• Mapa do site; 
• Voltar ao topo links; 
• Documentos relacionados. 
 
Pode-se ter vários elementos <footer> em um documento. 
 
 
Exemplo: 
 
<body> 
 <footer> 
 <p> 
 <a href="/credits.html">Créditos</a> 
 <a href="/tos.html">Termos Legais</a> 
 <a herf="/index.html">Mais Informações</a> 
 </p> 
 </footer> 
</body> 
 
38 
 
 
 
39 
 
3.4 Tag's Básicas 
 
Âncoras 
 
As âncoras, ou hiperlinks, são elementos da linguagem HTML utilizados para definir ligações entre 
documentos. Assim, é possível construir uma estrutura de navegação entre páginas web, de forma que o 
usuário possa acessar outras páginas clicando sobre uma ligação. 
 
A definição de uma âncora em uma página ocorre por meio da tag <a>, em que é necessário indicar qual 
documento HTML está associado à âncora. 
 
A ligação entre documentos pode ocorrer dentro do mesmo site, ou, ainda, podem acontecer referências a 
documentos externos. 
 
<a> 
 
Elemento que representa um hiperlink 
 
Atributos: 
 
href = A URL que fornece o destino do hiperlink. 
target = nome de navegação ao contexto ou palavra-chaves seguintes strings literais: "_blank", 
"_self", "_parent", ou "_top". 
 
Href 
 
Este é o único atributo obrigatório para âncoras definindo uma ligação para um hipertexto. Ele indica o 
alvo do link, seja uma URL ou um fragmento de URL. 
 
Um fragmento de URL é um nome precedido por uma cerquilha (#), a qual especifica um destino interno 
(um ID) dentro do documento atual. 
 
URLs não precisam se limitar à documentos Web baseados em HTTP. URLs podem usar qualquer 
protocolo suportado pelo navegador. Por exemplo, file, ftp, e mailto funcionam na maioria dos 
navegadores. 
 
target 
 
Este atributo especifica onde mostrar o recurso linkado. No HTML4, o valor é um nome ou uma palavra-
chave que se refere a um frame. No HTML5, é um nome ou palavra-chave que se refere a um contexto de 
navegação (por exemplo, aba, janela ou um frame inserido dentro de uma linha ("iframe"). 
 
As seguintes palavras-chave possuem significados especiais: 
 
• _self: Carrega a resposta no mesmo frame HTML4 (ou contexto de navegação HTML5) em que o 
link está. Este é o valor padrão se o atributo não for especificado. 
40 
 
• _blank: Carrega a resposta em uma nova janela sem nome HTML4 ou contexto de navegação 
HTML5. 
• _parent: Carrega a resposta no frame pai do frame atual em HTML4 ou no contexto de navegação 
pai do atual no HTML5. Se não existe um pai, este atributo se comporta de forma idêntica ao _self. 
• _top: Em HTML4: Carrega a resposta na janela original cheia, cancelando todos os outros frames. 
Em HTML5:Carrega a resposta no contexto de navegação do topo (isto é, o contexto de navegaçãoancestral do atual, e que não tem pai). Se não existe um pai no contexto atual, esta opção se 
comporta de modo idêntico que_self. 
 
Exemplo (link interno): 
 
<!doctype html> 
<html> 
 <head> 
 <meta charset = "UTF-8"></meta> 
 <title> Exemplo Link Interno </title> 
 </head> 
 <body> 
 <h1> Link Interno </h1> 
 <a href="Exemplo.html">Exemplo Link Interno</a> 
 </body> 
</html> 
 
Resultado: 
 
<!—- Nome da página: Exemplo.html --> 
<!doctype html> 
<html> 
 <head> 
 <meta charset = "UTF-8"></meta> 
 <title> Exemplo Chamado por Link Interno </title> 
 </head> 
 <body> 
 <h1> Exemplo chamado por um Link Interno </h1> 
 <h2> Exemplo chamado por um Link Interno </h2> 
 </body> 
</html> 
 
 
41 
 
Exemplo (link externo): 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Hiperlink</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <h1>Sites de Notícias</h1> 
 <a href="http://www.oglobo.com/">O Globo</a></br> 
 <a href="http://www.odia.com.br/">O Dia</a></br> 
 <h2>Utilize as âncoras para acessar sites de comercio Eletrônico</h2> 
 <a href="https://www.magazineluiza.com.br/">Magazine Luiza</a></br> 
 <a href="http://www.pontofrio.com.br/">Ponto Frio</a> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
<p> 
 
O elemento HTML <p> (ou Elemento HTML Parágrafo) representa um parágrafo do texto. Parágrafos são, 
geralmente, representados em mídia visual , como bloco de texto que são separados dos blocos adjacente 
por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco. 
42 
 
Exemplo: 
 
<html> 
 <head> 
 <title>Exemplo de Parágrafo de Texto</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Esse é o primeiro parágrafo do texto. Esse é o primeiro parágrafo do texto. 
 Esse é o primeiro parágrafo do texto.</p> 
 
 <p>Esse é o segundo parágrafo do texto. Esse é o segundo parágrafo do texto. 
 Esse é o segundo parágrafo do texto.</p> 
 
 <p>Esse é o terceiro parágrafo do texto. Esse é o terceiro parágrafo do texto. 
 Esse é o terceiro parágrafo do texto.</p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<em> 
 
O elemento HTML <em> marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada 
nível de aninhamento indicando um grau maior de ênfase. 
 
Este elemento enfatiza um bloco de texto, colocando-o em itálico. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Realce Texto em Itálico</title> 
 <meta charset="UTF-8"> 
 </head> 
43 
 
 <body> 
 <p>Na computação distribuída, 
 <em>Middleware</em> 
 ou mediador, é um programa de computador que faz a mediação entre software e 
demais aplicações. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<strong> 
 
Este elemento transforma um texto simples em um texto de certa importância, colocando-o em negrito. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Realce Texto em Negrito</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Na computação distribuída, 
 <strong>Middleware</strong> 
 ou mediador, é um programa de computador que faz a mediação entre software 
 e demais aplicações. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
44 
 
 
<small> 
 
O elemento HTML <small> representa comentários laterais e letras pequenas, como direitos autorais e 
texto legal, independentemente de sua apresentação com estilo. 
 
Por padrão, ele processa o texto com um tamanho de fonte menor. Este elemento diminui o tamanho do 
texto. 
 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Realce Texto em Tamanho Menor</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Na computação distribuída, 
 <small>Middleware ou mediador,</small> 
 é um programa de computador que faz a mediação entre software 
 e demais aplicações. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<s> 
 
O elemento HTML <s> renderiza texto com um rasurado ou uma linha ao longo dele. Use o 
elemento <s> para representar coisas que não são mais relevantes ou que não são mais precisas. No 
entanto, <s> não é apropriado ao indicar edições do documento; para isso, use os 
elementos <del> e <ins> , conforme apropriado. 
 
Exemplo: 
 
<!DOCTYPE html> 
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-BR&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del&usg=ALkJrhiMqOp6PnhhfgKpQ6XI3mh64VHGCg
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-BR&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins&usg=ALkJrhiGpzrxiqw4cbo9yGZNXbxEGfHKfw
45 
 
<html> 
 <head> 
 <title>Exemplo de Texto Riscado</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Na computação distribuída, 
 <s>Middleware ou mediador,</s> 
 é um programa de computador que faz a mediação entre software 
 e demais aplicações. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<cite> 
 
O elemento HTML <cite> representa uma referência a um trabalho artístico. Deve incluir o título do 
trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as 
convenções usadas para a adição dos metadados de citação. Este elemento transforma o texto em uma 
citação. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Citação</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p> 
 Mais informações podem ser encontrada em 
 <cite>[Manual HTML Capítulo 10 página 125]</cite>, 
 após o uso colocá-lo na mesma prateleira. 
 </p> 
 </body> 
</html> 
 
Resultado: 
46 
 
 
 
<q> 
 
O elemento HTML <q> indica que o texto dentro da tag é uma pequena citação. Este elemento destina-se 
a citações curtas que não requerem marcações de parágrafo; para citações maiores use o 
elemento <blockquote>. Este elemento coloca aspas em um bloco de texto. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Texto com Aspas</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Mais informações podem ser encontrada em 
 <q>Manual HTML Capítulo 10 página 125</q>, 
 após o uso colocá-lo na mesma prateleira. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<code> 
 
O elemento HTML <code> apresenta seu conteúdo estilizado de maneira a indicar que o texto é um 
pequeno fragmento de código. Por padrão, o conteúdo é exibido utilizando a fonte monoespaçada padrão 
do user agent's. Este elemento representa um fragmento de código de computador. 
 
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blockquote
https://developer.mozilla.org/en-US/docs/Glossary/user_agent
47 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de como Realçar um Texto</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Mais informações podem ser encontrada em 
 <code>Manual HTML Capítulo 10 página 125</code>, 
 após o uso colocá-lo na mesma prateleira. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<span> 
 
O elemento HTML <span> é um conteiner generico em linha para conteúdo fraseado , que não representa 
nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os 
atributos class ou id ), ou para compartilhar valores de atributos comolang. Ele deve ser usado 
somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o 
elemento <div> , entretando <div> é um elemento de nível de bloco enquanto <span> é um elemento 
em linha. 
 
Elemento de utilização genérica idêntico ao elemento <DIV>. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de como Realçar um Texto com SPAN</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Mais informações podem ser encontrada em 
 <span>Manual HTML Capítulo 10 página 125</span>, 
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/div
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/div
48 
 
 após o uso colocá-lo na mesma prateleira. 
 </p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
<br> 
 
Este elemento representa uma quebra de linha. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo Quebra de Linha</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <p>Mais informações podem ser encontrada em</br> 
 Manual HTML Capítulo 10 página 125,</br> 
 após o uso colocá-lo na mesma prateleira.</br> 
 </p> 
 /body> 
</html> 
 
Resultado: 
 
 
 
49 
 
3.5 Listas com HTML 5 
 
Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor 
exemplificação de um determinado assunto. 
 
São recursos extremamente usados, inclusive quando nem imaginamos que ele esta sendo usado, como no 
caso de menus. Hoje, boa parte dos menus em HTML é feito com listas. 
 
Há três tipos de listas: 
 
• Não ordenada; 
• Ordenada ou numerada; 
• De definição - usada para fazer comentários sobre os itens expostos. 
 
Listas não ordenadas 
 
Para construir uma lista não ordenada devemos utilizar o elemento <ul>, e para cada elemento da lista 
utilizamos o elemento <li>. 
 
Por padrão, cada elemento da lista é marcada por um pequeno circulo preenchido (marcador). 
 
As listas não numeradas são usadas para listar itens, sem se preocupar com sua sequência. Chamadas de 
lista de marcadores apenas. 
 
As tags usadas para criar uma lista não ordenada são <ul> e <li>. A tag <ul> é usada para definir a 
lista e a tag <li> é usada para cada item da lista. 
 
O simbolo utilizando para identificar cada elemento pode ser modificado utilizando-se o atributo list-
style-type do CSS, este atributo aceita os seguintes valores: disc, circle, square e none; 
 
Exemplo1: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo listas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3>Lista não ordenada</h3> 
 <ul> 
 <li>Internet Explorer</li> 
 <li>Opera</li> 
 <li>Firefox</li> 
 <li>Safari</li> 
 </ul> 
 </body> 
</html> 
 
50 
 
Resultado: 
 
 
 
Exemplo2 (marcadores diferentes): 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo listas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h4>Lista de bullets de disco (disc):</h4> 
 <ul type="disc"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ul> 
 
 <h4>Lista de bullets de círculo (circle):</h4> 
 <ul type="circle"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ul> 
 
 <h4>Lista de bullets de quadrado (square):</h4> 
 <ul type="square"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
51 
 
 <li>Laranjas</li> 
 </ul> 
 </body> 
</html> 
 
Resultado: 
 
 
 
Listas ordenadas ou numerada 
 
O Elemento HTML <ol> (ou Elemento HTML de lista ordenada) representa uma lista de itens 
ordenados. 
 
De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os 
precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos. 
 
Esse modelo numerado não é definido na descrição html da página, mas na folha de estilos CSS associada, 
pela propriedade list-style-type. 
52 
 
 
Não há limitação para a profundidade e a imbricação (superposição) das listas definidas com os 
elementos <ol> e <ul>. 
 
Para construir uma lista ordenada devemos utilizar o elemento <ol>, e assim como na lista não ordenada, 
para cada item utilizamos o elemento <li>, por padrão, cada elemento é numerado de 1 à “n”. 
 
As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou numeração. 
 
As tags usadas para criar uma lista ordenada são <ol> e <li>. A tag <ol> é usada para definir a lista e 
a tag <li> é usada para cada item da lista. 
 
O símbolo utilizando para cada identificar cada elemento pode ser modificado utilizando-se o 
atributo list-style-type do CSS, este atributo aceita os seguintes valores: decimal, decimal-
leading-zero, lower-alpha, lower-latin, lower-roman. 
 
Atributos 
 
compact 
 
Este atributo boleano sugere que a lista deve ser renderizada em um estilo compacto. A interpretação deste 
atributo depende do perfil de navegação (user agent) e não funciona em todos os navegadores. 
 
reversed 
 
Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a 
menos importante será listada primeiro. 
 
start 
 
Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de 
ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial 
sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize <ol start="3">. 
 
type 
 
Indica o tipo de numeração: 
• 'a' indica letras minúsculas, 
• 'A' indica letras maiúsculas, 
• 'i' indica algarismos romanos minúsculos, 
• 'I' indica algarismos romanos maiúsculos, 
• e '1' indica números (padrão). 
 
O tipo de marcação é usado na lista inteira, a menos que um atributo type diferente seja utilizado dentro do 
elemento <li>. 
 
Exemplo (ordenado por número): 
 
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/ol
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/ul
http://www.devmedia.com.br/listas-ordenadas-curso-de-html-basico-16/26512
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/li#attr-type
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/li
53 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo listas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3>Lista ordenada por número</h3> 
 <ol type="1" start="1"> 
 <li>São Paulo</li> 
 <li>Rio de Janeiro</li> 
 <li>Belo Horizonte</li> 
 <li>Brasília</li> 
 </ol> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
Exemplo (ordenado por número decrescente): 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo listas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3>Lista ordenada por número decrescente</h3> 
 <ol reversed type="1"> 
 <li>Nome</li> 
 <li>Telefone</li> 
 <li>Endereço</li> 
54 
 
 <li>País</li> 
 </ol> 
 </body> 
</html> 
 
Resultado: 
 
 
 
Listas ordenadas também podem ser ordenada letra (a,b,c,d, etc). Caso queira que seja ordenada por letras 
maiúsculas, basta em colocar <ol type="a">. 
 
Exemplo (ordenado por letra): 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo listas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3>Lista ordenada por letra</h3> 
 <ol type="a"start="1"> 
 <li>Nome</li> 
 <li>Telefone</li> 
 <li>Endereço</li> 
 <li>País</li> 
 </ol> 
 </body> 
</html> 
 
 
 
 
 
55 
 
Resultado: 
 
 
 
Exemplo Completo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo de Listas</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body> 
 <h4>Lista numerada:</h4> 
 <ol> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ol> 
 
 <h4>Lista com letras:</h4> 
 <ol type="A"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ol> 
 
 <h4>Lista com letras minúsculas:</h4> 
 <ol type="a"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ol> 
56 
 
 
 <h4>Lista com números romanos:</h4> 
 <ol type="I"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ol> 
 
 <h4>Lista com números romanos minúsculos:</h4> 
 <ol type="i"> 
 <li>Maçãs</li> 
 <li>Bananas</li> 
 <li>Limões</li> 
 <li>Laranjas</li> 
 </ol> 
 </body> 
</html> 
 
Resultado: 
 
 
 
57 
 
 
 
Listas de definição 
 
Este tipo de lista recebe estes nomes por ser muito usada para a definição de palavras, nomes, objetos, 
entre outros. 
 
A tag utilizada para criar uma lista de definição é a tag <dl>, mas como esta lista precisa de um termo a 
ser definido e também de uma definição, então utilizaremos a tag <dt> para indicar o termo a ser 
definido e após isso utilizaremos a tag <dd> para indicar a definição. 
 
As listas de descrição, são listas de termos com as suas devidas descrições. O elemento <dl> é utilizado 
para definir a lista de descrição, <dt> para definir o termo (ou o nome) e <dd> para definir a descrição 
do termo. 
 
Listas de definição são usadas em assuntos onde há um termo a em sequência a sua definição, estilo 
perguntas e respostas. 
 
As tags usadas são <dl>, <dt> e <dd>. 
 
• <dl> definition list - cria a lista de definição; 
• <dt> difinition term - onde o termo é proposto; 
• <dd> definition definition - onde o termo é definido. 
 
Exemplo: 
 
<!doctype html> 
<html> 
 <head> 
 <title>Exemplo de Listas</title> 
 <meta charset="UTF-8"> 
 </head> 
 <body 
 <dl> 
 <dt>Termo 1</dt> 
 <dd>Definição do termo 1</dd> 
 <dt>Termo 2</dt> 
 <dd>Definição do termo 2</dd> 
 </dl> 
 </body> 
</html> 
 
 
 
 
 
 
 
 
58 
 
Resultado: 
 
 
 
Exemplo2: 
 
<html> 
 <body> 
 <h4>Uma lista de definição:</h4> 
 <dl> 
 <dt>Café</dt> 
 <dd>Bebida quente preta</dd> 
 <dt>Leite</dt> 
 <dd>Bebida fria branca</dd> 
 </dl> 
 
 </body> 
</html> 
 
Uma lista de definição: 
 
 
59 
 
3.6 Tabelas 
 
As tabelas são listas de dados em duas dimensões e são compostas por linhas e colunas. Portanto, são 
muito utilizadas para apresentar dados de uma forma organizada. 
 
Um grande exemplo de como as tabelas são importantes é o crescente uso do programa Excel, requisito 
obrigatório de seleção para muitas empresas. Mas e para apresentar uma tabela em um site, existe a 
possibilidade de criar tabelas através do próprio HTML, de forma rápida e simples, por meio de uma 
tabela HTML. 
 
Conforme a imagem abaixo, podemos ver a estrutura básica de uma tabela. Assim, é importante saber que 
cada elemento de uma tabela é denominada “célula”. 
 
 
 
Por exemplo, vejamos abaixo um exemplo de tabela com doze células organizadas em quatro colunas e 
três linhas, sendo a primeira linha o título das colunas: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo de Tabelas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3>Resumo Situação Final do Curso Sistemas de Informação</h3> 
 <table border="1"> 
 <caption><strong>Lista de Alunos</strong></caption> 
 <thead> 
 <tr> 
 <th><strong>Aluno</strong></th> 
 <th>Disciplina</th> 
 <th>Media</th> 
 <th>Situação Final</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>Fernando André da Silva</td> 
 <td>Programação I</td> 
60 
 
 <td>9.7</td> 
 <td>Aprovado</td> 
 </tr> 
 <tr> 
 <td>Marcos Ferreira da SIlva</td> 
 <td>Lógica de Programação I</td> 
 <td>8.5</td> 
 <td>Aprovado</td> 
 </tr> 
 </tbody> 
 </table> 
 </body> 
</html> 
 
 
 
 
<table> 
 
Esta tag é de uso obrigatório e definirá o começo e o fim da tabela dentro do documento HTML. Dentro 
da tag <table> e </table> criaremos cabeçalho, corpo, rodapé, linhas e colunas da tabela. 
 
Atributos 
 
align 
 
Este atributo enumerado indica como a tabela deve ser alinhada considerando o conteúdo do documento. 
 
Que pode ter os seguintes valores: 
 
• left, significando que a tabela deve ser exibida à esquerda do documento; 
Exemplo: <table align="left" border="1"> 
• center, significando que a tabela deve ser exibida centralizada no documento; 
61 
 
Exemplo: Exemplo: <table align="center" border="1"> 
• right, significando que a tabela deve ser exibida à direita do documento. 
Exemplo: <table align="right" border="1"> 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo de Tabelas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3><center>Resumo Situação Final do Curso Sistemas de Informação</center></h3> 
 <table align="center" border="1"> 
 <caption><strong>Lista de Alunos</strong></caption> 
 <thead> 
 <tr> 
 <th><strong>Aluno</strong></th> 
 <th>Disciplina</th> 
 <th>Media</th> 
 <th>Situação Final</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>Fernando André da Silva</td> 
 <td>Programação I</td> 
 <td>9.7</td> 
 <td>Aprovado</td> 
 </tr> 
 </tbody> 
 </table> 
 </body> 
</html> 
 
 
 
62 
 
Bgcolor 
 
Este atributo define a cor de fundo da tabela e seu conteúdo. É um dos códigos hexadecimais de 6 dígitos 
como definido em sRGB - A Standard Default Color Space for the Internet (Um espaço de cores padrão 
padrão para a Internet), prefixado por um “#”. Um dos textos das dezesseis cores predefinidas podem 
também ser utilizados: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> Exemplo de Tabelas</title> 
 <meta charset="UTF-8"meta> 
 </head> 
 <body> 
 <h3><center>Resumo Situação Final do Curso Sistemas de Informação</center></h3> 
 <table align="center" bgcolor="aqua" border="1"> 
 <caption><strong>Lista de Alunos</strong></caption> 
 <thead> 
 <tr> 
 <th><strong>Aluno</strong></th> 
 <th>Disciplina</th> 
 <th>Media</th> 
 <th>Situação Final</th> 
 </tr> 
 </thead> 
 <tbody><tr> 
 <td>Fernando André da Silva</td> 
 <td>Programação I</td> 
 <td>9.7</td> 
 <td>Aprovado</td> 
 </tr> 
 </tbody> 
 </table> 
 </body> </html> 
 black = "#000000" green = "#008000" 
 silver = "#C0C0C0" lime = "#00FF00" 
 gray = "#808080" olive = "#808000" 
 white = "#FFFFFF" yellow = "#FFFF00" 
 maroon = "#800000" navy = "#000080" 
 red = "#FF0000" blue = "#0000FF" 
 purple = "#800080" teal = "#008080" 
 fuchsia = "#FF00FF" aqua = "#00FFFF" 
63 
 
 
 
 
Border 
 
Esse atributo inteiro define, em pixels, o tamanho do quadro ao redor da tabela. Se definido como 0, 
significa que o atributo de quadro está definido como nulo (não tem quadro). 
 
Exemplo: 
 
<!doctype html> 
<html> 
 <body> 
 <table border="1"> 
 <tr><td>Borda Largua 1</td></tr> 
 </table> 
 <br> 
 <table border="5"> 
 <tr><td>Borda Largua 5</td></tr> 
 </table> 
 <br> 
 <table border="10"> 
 <tr><td>Borda Largua 10</td></tr> 
 </table> 
 </body> 
</html> 
 
64 
 
 
 
Cellpadding 
 
Este atributo define o espaço entre o conteúdo de uma célula e a borda, exibida ou não, dela. Se tiver um 
comprimento de pixel, esse espaço do tamanho de pixel será aplicado nos quatro lados; se tiver uma 
porcentagem, o conteúdo será centralizado e o espaço vertical total (superior e inferior) representará essa 
porcentagem. O mesmo vale para o espaço horizontal total (esquerda e direita). 
 
cellspacing 
 
Este atributo define o tamanho, em porcentagem ou em pixels, do espaço entre duas células (horizontal e 
verticalmente), entre a parte superior da tabela e as células da primeira linha, a esquerda da tabela e a 
primeira coluna, o à direita da tabela e a última coluna e a parte inferior da tabela e a última linha. 
 
frame 
 
Esse atributo enumerado define qual lado do quadro ao redor da tabela deve ser exibido. Pode ter os 
seguintes valores: 
 
 above below 
 hsides vsides 
 lhs rhs 
 border box 
 void 
 
rules 
 
Esse atributo enumerado define onde as regras, ou seja, as linhas, devem aparecer em uma tabela. Pode ter 
os seguintes valores: 
 
65 
 
• Nenhum, que indica que nenhuma regra será exibida; é o valor padrão; 
• Groups, que fará com que as regras sejam exibidas entre grupos de linhas (definidos pelos 
elementos <thead>, <tbody> e <tfoot>) e entre grupos de colunas (definidos pelos 
elementos <col> e <colgroup>); 
• Linhas, que farão com que as regras sejam exibidas entre as linhas; 
• Colunas, que tornarão as regras exibidas entre as colunas; 
• Tudo, que fará com que as regras sejam exibidas entre linhas e colunas. 
 
summary 
 
Este atributo define um uso de texto alternativo para descrever a tabela no agente do usuário incapaz de 
exibi-la. Normalmente, ele contém uma descrição para permitir que pessoas com deficiência visual, como 
pessoas cegas que navegam na Web usando a tela em Braille, obtenham as informações nela. Se as 
informações adicionadas nesse atributo também puderem ser úteis para pessoas com deficiência visual, 
considere usar a <legenda>. O atributo de resumo não é obrigatório e pode ser omitido quando um 
elemento <caption> cumpre sua função. 
 
width 
 
Este atributo define a largura da tabela. Pode ser um comprimento de pixel ou um valor percentual, 
representando a porcentagem da largura do seu contêiner que a tabela deve usar. 
 
<caption> 
 
Título da tabela 
 
A tabela HTML tem uma tag particular para definir um título. Essa tag é a <caption> e 
</caption>. Em contraste com os demais elementos da tabela, a tag <caption> não será composta 
por células, portanto ficará acima da tabela, como um título. 
 
Sintaxe: 
 
<caption>Lista de Alunos</caption> 
 
<thead> 
 
A tag <thead> apresenta a funcionalidade de agrupar elementos do conteúdo de um cabeçalho no 
HTML. 
 
Ela deve ser usada como filho de um elemento <table>, ou seja, estar após <table>, e antes de 
qualquer <tbody>, <tr> ou <tfoot>. 
 
Sintaxe: 
 
<th>Titulo da Coluna 1</th> 
<th>Titulo da Coluna 2</th> 
 
66 
 
<tbody> 
 
Esta tag é usada para aglutinar elementos presentes no conteúdo do corpo de uma tabela, ou seja, nas 
linhas da tabela. 
 
É utilizada como filho de um elemento <table> e após qualquer <subtítulo>, <coolgroup> ou 
<thead>. 
 
Sintaxe: 
 
<tbody> 
 <tr> 
 <td>Conteúdo da Coluna 1 </td> 
 <td>Conteúdo da Coluna 2 </td> 
 </tr> 
 </tbody> 
 
<tr> (tr = table row) 
 
A tag <tr> tem como objetivo definir as linhas da tabela, que serão dispostas dentro do documento. Ela 
determina o começo e o fim de cada linha. 
 
Sintaxe: 
 
<tr> 
 <th>Nome</th><th>Salário</th> 
</tr> 
 
<th> 
 
A tag <th> serve exatamente para criar e delimitar células de cabeçalho dentro de uma tabela, separando 
essas informações dos dados. 
 
Sintaxe: 
 
<th>Titulo da Coluna 1</th><th>Titulo da Coluna 2</th> 
 
Exemplo: 
 
<tr> 
 <th>Nome do Funcionário</th><th>Salário</th> 
</tr> 
 
 
<td> (td = table data) 
 
Essa célula é definida pela tag <td>, assim delimitando onde começa e termina cada célula de dado 
presente nas linhas da tabela. 
 
67 
 
Sintaxe: 
 
<td>Conteúdo célula 1</td><td> Conteúdo célula 2</td> 
 
<tr> 
 <td>Denivaldo Gonçalves</td><td>1.500,25</td> 
</tr> 
 
<tfoot> 
 
A tag <tfoot> é utilizada para definir conteúdos de rodapé dentro de uma tabela e juntá-lo ao corpo e ao 
cabeçalho. 
 
O elemento <tfoot> deve ser filho de <table>, estar após o <thead> e antes das tags <tbody>, 
<tr> e <td>. 
 
Sintaxe: 
 
<tfoot> 
 <tr> 
 <th>Totais</th> 
 <td>2.500,25</td> 
 </tr> 
</tfoot> 
 
Exemplo: 
 
<!doctype html> 
<head> 
 <title> Exemplo de Tabelas</title> 
 <meta charset="UTF-8"meta> 
</head> 
<html> 
 <body> 
 <table align="center" border="1"> 
 <tr bgcolor="pink"> 
 <td>Nome</td> 
 <td>Salário</td> 
 </tr> 
 <tr> 
 <td>Denivaldo Gonçalves</td> 
 <td>1.500,25</td> 
 </tr> 
 <tr> 
 <td>Edvaldo Ferreira</td> 
 <td>1.000,00</td> 
 </tr> 
 <tfoot> 
 <tr> 
 <th>Totais</th> 
 <td>2.500,25</td> 
68 
 
 </tr> 
 </tfoot> 
 </table> 
 <br> 
 </body> 
</html> 
 
 
Nome Salário 
Denivaldo Gonçalves 1.500,25 
Edvaldo Ferreira 1.000,00 
Totais 2.500,25 
 
3.7 Vídeo e Áudio 
 
As tag's <audio> e <video> são tag's de média que foram criadas, entre outros motivos, para acabar 
com a dependência de plugin's para a reprodução de áudio e vídeo nas páginas. 
 
Dessa forma em sites que precisaríamos ter instalado o Flash, por exemplo o Youtube, não iremos mais, 
basta que sejam implementadas essas novas tag's e que tenhamos um navegador compatível com HTML5, 
o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recente são. O IE8 foge 
dessa lista apenas o IE9 suporta o HTML5. 
 
Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag's isso não é 
diferente, pois agora passaremos a manipular áudio e vídeo praticamente como manipulamos a inserção de 
imagens. 
 
Anteriormente, para a exibição de vídeos em um documento HTML, os desenvolvedores utilizavam a 
TAG <object> que é um container genérico para incorporar objetos estrangeiros ( plugins de terceiros ) 
a página. Devido a inconsistência dos navegadores, era necessário replicar várias linhas de código para 
que o vídeo pudesse ser exibido. O HTML 5 provê a TAG <video> para eliminar os problemas de 
incompatibilidade entre os navegadores. 
 
<video> 
 
Elementoque exibe vídeos ou filmes. 
 
Sintaxe: <video></vídeo> 
 
Exemplo: 
 
< video width="320" height="240" autoplay="autoplay" controls="controls"> 
 
Atributos: 
 
autoplay = "autoplay" ou "" (string vazia) ou sem atributo. Todas vez que a página for recarregada, o 
vídeo se iniciará. 
69 
 
 
Sintaxe: autoplay = "autoplay" 
 
controls = "controls" ou "" (string vazia) ou sem atributo. Será exibido a interface de controle de 
vídeo. 
 
Sintaxe: controls = "controls" 
 
loop = "loop" ou "" (string vazia) ou sem atributo. O vídeo será passado contínuamente. 
 
Sintaxe: loop = "loop" 
 
height = Altura do vídeo em pixels. 
 
Sintaxe: height="240" 
 
width = Largura do vídeo em pixels. 
 
Sintaxe: width="320" 
 
muted = "muted" or ""ou "" (string vazia) ou sem atributo. Estado do vídeo default com o áudio 
desligado. 
 
Sintaxe: muted = "muted" 
 
src = URL do vídeo 
 
Sintaxe: src="WhatZapp.mp4" type="video/mp4"> 
 
poster = Endereço de uma imagem será exibida enquanto o vídeo não carrega. 
 
Exemplo: 
 
<!DOCTYPE HTML> 
<html> 
 <head> 
 <meta charset="utf-8" > 
 <title>Exemplo Video HTML5</title> 
 </head> 
 <body> 
 < video width="320" height="240" autoplay="autoplay" controls="controls"> 
 <source src="WhatZapp.mp4" type="video/mp4"> 
 <source src="WhatZapp.ogg" type="video/ogg"> 
 Seu navegador não suporta HTML5. 
 </video> 
 </body> 
</html> 
 
70 
 
 
<audio> 
 
Até ao momento, implementar áudio num website era um processo complicado e que dependia 
inteiramente de plugins como o Flash. Uma vez que o iPhone não aceita plugins e que a Adobe 
mencionou que não vai mais suportar o Flash para dispositivos móveis, muitos programadores estão à 
procura de outras opções para incorporar áudio nos seus projetos. É aqui que o áudio HTML5 entra em 
ação para resolver o problema. 
 
Áudio simples em HTML5 
 
A forma mais simples para implementar áudio numa página web através de HTML5 é usando o novo tag 
de áudio. Implemente esta tag no documento de HTML5, usando o seguinte código: 
 
<!DOCTYPE HTML> 
<html> 
 <head> 
 <meta charset=utf-8" > 
 <title>Exemplo Áudio HTML5</title> 
 </head> 
 <body> 
 <audio controls="controls"> 
 <source src="Pé na Areia.ogg" type="audio/ogg" /> 
 <source src="Pé na Areia.mp3" type="audio/mpeg" /> 
 Your browser does not support the audio element. 
 </audio> 
 </body> 
</html> 
 
 
 
 
Observando o código em cima, é possível verificar que foi declarada a tag <audio> e os atributos de 
controle, de modo a que os controladores default do player sejam visíveis. 
 
71 
 
Dentro do <audio> existe 2 tags 'src'. Uma define a faixa MP3 e a outra define o formato OGG. O 
formato OGG é especialmente usado para permitir que a música toque no Firefox, uma vez que devido a 
licenças o Firefox não suporta MP3 sem usar um plugin. A seguinte mensagem O seu broser não 
suporta o elemento de audio. permite que os utilizadores com browsers incompatíveis saibam o que se 
passa. 
 
<source> 
 
A tag <source> em HTML é usada para anexar arquivos multimídia como áudio, vídeo e fotos. Os 
elementos são <audio><source></source></audio> e <video><source></source></video>. 
 
Sintaxe: 
 
<audio> 
 <source src="Pé na Areia.mp3" type="audio/mp3"> 
</áudio> 
 
Atributos da tag de áudio HTML5 
 
Atributos 
 
Como todos os elementos HTML, este elemento suporta os global attributes. 
 
autoplay 
 
Um atributo Booleano; se especificado (mesmo se o valor for "false"!), o áudio iniciará 
automaticamente assim que possível sem parar de carregar os dados. 
 
controls 
 
Se esse atributo estiver presente, o navegador oferecerá controles para permitir ao usuário controlar a 
reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução. 
 
loop 
 
Um atributo Booleano; se especificado, ao chegar no fim do áudio, ele voltará automaticamente para o 
começo. 
 
muted 
 
Um atributo Booleano que indica se o áudio será inicializado silenciado. 
 
 
 
autobuffer 
 
Um atributo Booleano; se especificado, o áudio será baixado automaticamente, mesmo se não está 
configurado para reprodução automática. Isto continua até que o cache de mídia esteja cheio, ou até que o o 
https://developer.mozilla.org/en-US/docs/HTML/Global_attributes
72 
 
arquivo de áudio completo tenha sido baixado, o que vier primeiro. Isto deve ser utilizado apenas quando é 
esperado que o usuário escolherá tocar o áudio; por exemplo, se o usuário navegou para a página utilizando 
um link "Reproduzir". Este atributo foi removido no Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 
2.1) em razão do atributo preload. 
 
buffered 
 
Um atributo que pode ser lido para determinar os intervalos do áudio que já foram carregados. Este atributo 
contém um objeto TimeRanges. 
 
played 
 
Um objeto TimeRanges indicando que todo o áudio foi reproduzido. 
 
preload 
 
Atributo de pré-carregamento HTML5. Carregamento automático de vídeos e áudios. Sua funcionalidade 
é iniciar automaticamente o carregamento do vídeo e do áudio para armazená-lo no buffer, para que a 
reprodução não sofra cortes. 
 
src 
 
A URL do áudio a ser incorporado. Isso é sujeito a HTTP access controls. Isto é opcional; ao 
invés disso você pode usar o elemento <source> dentro do bloco do áudio para especificar o vídeo a ser 
incorporado. 
 
Exemplo do SIA: 
 
<!DOCTYPE HTML> 
<html> 
 <head> 
 <meta charset="utf-8" > 
 <title>Exemplo Áudio HTML5</title> 
 </head> 
 <body><center> 
 <video controls src="http://media.w3.org/2010/05/bunny/movie.ogv"> 
 Seu navegador não suporta vídeos em HTML 5 
 </video> 
 </body> 
</html> 
 
 
 
 
 
 
 
 
 
https://developer.mozilla.org/pt-BR/docs/Web/API/TimeRanges
https://developer.mozilla.org/pt-BR/docs/Web/API/TimeRanges
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-BR&prev=search&rurl=translate.google.com.br&sl=es&sp=nmt4&u=https://www.anerbarrena.com/programacion/html5/video-audio/&usg=ALkJrhjTLNlisKtcQG4azFhe8IXjDai0cQ
https://developer.mozilla.org/en-US/docs/HTTP_access_control
http://developer.mozilla.org/en-US/docs/pt-BR/HTML/Element/source
73 
 
 
Resultado: 
 
URL do vídeo: http://media.w3.org/2010/05/bunny/movie.ogv 
 
 
 
 
 
3.8 Uma breve história sobre CODEC's 
 
O que são e para que servem os Codecs 
 
A palavra "Codec" vem de COdificação e DECodificação, ou seja, eles "traduzem" um arquivo que 
originalmente seria muito grande para ser compartilhado/executado em conteúdo bem menos pesado. 
 
Aquele filme que ocuparia seu disco rígido inteiro ou demoraria dias para ser baixado pode ser 
comprimido em um MPEG-2 ou um Windows Media Video. 
 
Os Codecs pegam um arquivo grande e comprimem os elementos que fazem parte do mesmo - audio e 
video - em um formato menor, capaz de ser codificado e decodificado a partir de softwares específicos 
para isso, a exemplo do iTunes, Windows Media Player, Quicktime, Real Player, 
entre outros. Eles rearranjam o fluxo de bits para determinar coisas como largura e altura de imagens, 
velocidade de exibição, entre outras. 
 
Assim, aquele filme que precisaria de 500 GB teria agora um tamanho bem mais adequado, como 700 
MB. 
 
74 
 
A diferença entre os Codecs está em como seus elementos são comprimidos ou descomprimidos. 
 
Por exemplo, uns apenas "resumem" ao máximo o tipo de conteúdo que não precisa da qualidade máxima; 
outros fazem isso com o mínimo de perdas possível e alguns variam de acordo com a necessidade, como 
nos momentos de silêncio de um filme, que não necessitam de compressão de som. 
 
Histórico 
 
Tudo começou no final da década de 1980, com o projeto MPEG, o Moving Picture Experts 
Group, ou o Grupo de Especialistas em Imagens Animadas (ou filmes). Esse grupo desenvolveuum 
sistema de compactação de arquivos de filme para armazenagem e reprodução em computadores, sem 
excesso de tamanho ou peso. Imagine que em um filme de 800x600, tela cheia em alta resolução, existam 
30 imagens diferentes por segundo e cada imagem é feita em média com uns 500.000 pontos. Cada ponto 
é um byte de informação, então, cada segundo de filme teria uns 15 MB de informação. Dessa forma, em 
um CD com capacidade para 700 MB caberiam somente 50 segundos de filme! 
 
Esse grupo desenvolveu uma forma de codificar essas imagens do filme para que não ocupassem tanto 
espaço. 
 
Apesar de ter perdido um pouco da qualidade, o filme era reproduzível em qualquer computador, além de 
propiciar a observação em detalhes. Esses arquivos eram os MPEGs, ou MPGs. O MP3 na verdade seria a 
terceira camada dos MPEGs, a camada de som (por isso se chama MP3). O formato MP4 seria uma quarta 
camada de MPEG, com vídeos em alta definição. 
 
Tipos mais populares de Codecs 
 
H.264 (MPEG-4 Part 10 AVC) 
 
Mais conhecido como MPEG-4 Part 10, é um Codec bastante utilizado em smartphones, câmeras 
digitais e discos de Blu-ray. É um dos mais populares, especialmente porque consegue ter arquivos 
pequenos com alta qualidade e é compatível com Apple, YouTube, HTML 5 e Adobe Flash. A única 
deficiência é que a boa taxa de compressão de algoritmos também torna a tarefa de codificação lenta. 
 
MPEG-2 
 
Esse é um dos Codecs mais antigos e também mais comuns por aí. Sua vantagem sobre o H.264 é que 
tem algoritmos de compressão inferiores, o que torna a codificação bem mais rápida. Isso, porém, vira 
uma desvantagem quando falamos de vídeo streaming, já que a qualidade do conteúdo para esse fim 
deixa o vídeo todo pixelado. 
 
As imagens pixeladas são imagens de baixa qualidade que aparecem granuladas e de forma não nítida. 
 
Esse efeito geralmente é causado ao redimensionar uma imagem pequena para torná-la maior. Ao fazer 
isso, o tamanho da imagem muda, mas a resolução não. Imagens que foram digitalizadas também pode 
aparecer pixeladas. 
 
 
https://canaltech.com.br/plugins/O-que-e-um-Codec/
https://canaltech.com.br/empresa/youtube/
75 
 
 
 
 
 
 
Imagens pixeladas (duas): 
 
MPEG-4 Part 2 
 
Esse é o Codec anterior ao H.264, é o H.263, que costumava ser codificado com os softwares DivX e 
Xvid. Ele consegue manter uma qualidade razoável em um arquivo também de tamanho aceitável. 
Porém, não é indicado quando se fala em alta definição. 
 
Windows Media Video (WMV) 
 
É a versão da Microsoft para Codecs MPEG-4. Começou com o WMV 7, em 1999, como uma cópia 
do MPEG-4 Part 2. Desde então, assim como outro Codec da Microsoft, VC-1, faz um papel 
semelhante ao MPEG-4 Part 10 e é utilizado em discos Blu-ray também. Todos os programas 
relacionados da Microsoft, a exemplo do Windows Maker, Silverlight, entre outros, utilizam 
o WMV e o VC-1. 
 
Estes são apenas alguns dos mais populares Codecs, existem outros (WAV, AIFF, FLAC, AC3, 
Dolby Digital Plus, DTS-HD, etc), no entanto, com esses já dá para compreender melhor para 
que servem essas siglas todas. 
https://canaltech.com.br/empresa/microsoft/
https://canaltech.com.br/produtos/O-que-e-audio-DTS/
76 
 
 
Simplificando ainda mais os Codecs 
 
Imagine que você quer enviar uma mensagem de texto via celular para alguém via SMS. Caso seja escrito 
com todas as letras, o texto vai ficar muito grande para caber no espaço de 100 caracteres permitidos na 
mensagem. Então, você e seu amigo resolvem criar um código: escrever somente consoantes e retirar as 
vogais, além de trocar outras coisinhas pré-combinadas. Como deixar em maiúscula as consoantes de 
palavras que comecem ou terminem com consoantes e em minúscula as consoantes de palavras que 
comecem ou terminem com vogais. Dessa forma, o texto ficaria bem menor e caberia no espaço do 
celular. 
 
Então o texto: 
 
Infelizmente não poderei estar no horário combinado porque apareceu uma 
situação de emergência para resolver. Eu te ligo quando chegar em casa. 
 
Ficaria assim, depois de passar pelo seu código: 
 
nflzmnt Ñ Pdr stR N Hrr Cmbnd Pq prc 1 Stçõ D mrgnc P RslvR. T Lg Qd 
ChgR m Cs. 
 
Um texto de 143 caracteres ficou somente com 80, portanto pode ser enviado para seu amigo! Com essa 
codificação, a mensagem ficou bem menor, mas passa o mesmo recado. 
 
É claro que nem todo mundo consegue decifrar esse código se não souber como decodificar. Porém, você 
e seu amigo conseguem se comunicar. 
 
Os codecs fazem exatamente isso que você acabou de fazer: eles codificam para simplificar e 
permitem decodificar para receber a mensagem depois! 
 
Entendendo como funciona 
 
O codec é um pequeno programa para codificar e decodificar as informações de um arquivo de mídia. Ele 
codifica o formato original em um tamanho menor para armazenar e depois decodifica, transformando 
novamente em imagem e/ou som para que todos possam ver. 
 
Por isso é preciso ter o codec instalado no seu computador para ver determinados arquivos de mídia. Um 
vídeo no formato AVI, por exemplo, pode ser compactado com diferentes codecs, como o XVID ou o 
DIVX. E para que o seu computador possa ler aquela informação, é preciso ter aquele código para 
decodificar o filme e assisti-lo. 
 
Principais codecs existentes 
 
Atualmente, é utilizado um principal codec de áudio, o MP3. Além de alguns diferentes codecs de vídeo, 
como o XVID, o DIVX, o RMVB, o M4V, entre vários outros. 
 
Existe o K-Lite Codec Pack, um grande pacote com todos esses principais codecs e muitos outros, 
todos reproduzíveis com o Media Player Classic. O importante é que com o K-Lite Codec 
77 
 
Pack instalado, dificilmente você encontrará algum formato de arquivo que exija algum codec que não 
esteja em seu computador. 
 
Existem diferentes versões do K-Lite. Elas são: 
 
K-Lite Mega Codec Pack: Com este pacote oferece a grande maioria dos codecs necessários e 
ainda a vantagem de trazer o Media Player Classic pronto para usar. 
 
K-Lite Codec Pack Full: Traz todos os codecs que você vai precisar, sem o Media Player 
Classic. 
 
Outros Pacotes Possíveis 
 
Se você não está satisfeito com os pacotes do K-Lite Codec Pack, há outras opções de download no 
Baixaki. Algumas são: 
 
Windows Essencials Codec Pack: Permite a decodificação de outros formatos de arquivo como 
APE de áudio e FLV de vídeo. 
 
Real Alternative: Um pacote com codecs para assistir a arquivos em Real Media, como RMA de 
áudio e RMV e RMVB de vídeo. 
 
https://www.baixaki.com.br/download/k-lite-mega-codec-pack.htm
https://www.baixaki.com.br/download/k-lite-codec-pack-full.htm
https://www.baixaki.com.br/download/windows-essentials-codec-pack.htm
https://www.baixaki.com.br/download/real-alternative.htm
78 
 
Unidade 4 - LINGUAGEM DE MARCAÇÃO E ESTILOS 
 
4.1 Definição 
 
CSS é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo em Cascatas. É uma maneira de dar 
estilo ao código criado por linguagens como HTML, XML ou XHTML, por exemplo. De forma prática, 
ela funciona como uma camada de personalização ao conteúdo visível. 
 
Estes tipos de linguagem citados foram idealizados para serem funcionais e, por serem de marcação, 
precisaram ser aperfeiçoados. O CSS, no caso, veio como uma boa solução para aprimorar a estética dos 
sites. 
 
Por meio dele, é possível separar formatos de conteúdos, bem como definir como serão exibidos em cada 
página. 
 
Para que serve o CSS? 
 
A tecnologia CSS foi criada para marcar a separação entre conteúdos e páginas da web, e para dar uma 
forma de apresentação a elas. Isso gera múltiplos benefícios, como: 
 
• Apresentar o documento final em diferentes estilos (tela, voz, impressão); 
• Ter um site responsivo (adptável a diversas plataformas); 
• Evitar criar arquivos muito pesados; 
• Determinar o estilo visual de um site inteiro. Dessa forma, se mudamos uma página, é possível 
todas automaticamente;• Trabalhar com padrões e separar (até certo ponto) a estrutura da apresentação, fazendo um trabalho 
mais definido; 
• Garantir maior flexibilidade e controle nas especificações do site; 
• Simplificar a criação de uma página. 
 
Como o CSS funciona? 
 
Seu site pode ter várias páginas similares e utilizando CSS, você armazena as informações em arquivos 
comuns que todas as páginas compartilham. 
 
Quando um usuário acessa uma página, o navegador carrega as informações de estilo junto com o 
conteúdo da página. Uma linguagem de marcação, como o HTML, também fornece alguns modos de 
especificar o estilo. 
 
Quando utilizar CSS, normalmente-se evita utilizar recursos da linguagem de marcação para que todas as 
informações de estilo do documento estejam em um só lugar. 
 
Para que o arquivo HTML execute o arquivo CSS é necessário que se coloque entre as 
tags <head></head> esta linha <link href=”nomeArquivo.css” rel=”stylesheet” 
/>. 
 
https://rockcontent.com/blog/marketing-de-conteudo-resume-a-conteudo/
79 
 
 Desta forma as tags do seu HTML obedecerão aos estilos do seu arquivo css, que é um arquivo de 
texto com a extensão .css. 
 
Através das regras CSS é que você vai conseguir dar forma as suas páginas web. Portanto a atenção nas 
informações que vêm a seguir é fundamental. 
 
A regra CSS é um comando que serve para definir o estilo que um elemento HTML receberá. Ele é 
composto por um ou mais seletores, e uma ou mais declarações. As declarações estão contidas entre 
chaves e são formadas pela propriedade e o valor da propriedade. O seletor vincula um elemento do 
documento HTML a declaração CSS. 
 
Uma regra básica segue o seguinte esquema: 
 
seletor { 
 propriedade: valor 
} 
 
Regras 
 
Para utilizarmos estilos CSS em um elemento, fazemos uso das regras CSS. Uma regra é escrita como o 
exemplo abaixo: 
 
body { 
 background-color: white; 
} 
 
No exemplo acima, definimos como cor de fundo da tag body a cor branca. Uma regra é feita dos 
seguintes componentes: 
 
▪ Seletor(es): um dos mais poderosos aspectos CSS, permite que selecionemos qualquer elemento 
na página. No exemplo acima, estamos selecionando a tag body. 
▪ Chaves ("{" e "}"): contém as declarações CSS. 
▪ Declaração: cada declaração aplica um estilo específico para o elemento ou elementos 
selecionados. Uma declaração é composta de: 
▪ Propriedade: no exemplo acima, background-color. Sempre a propriedade é seguida 
de dois pontos ":". Há várias outras propriedades que iremos estudar. 
▪ Valor: no exemplo acima, white, o que aplica um fundo branco para a tag body, ou 
seja, a página inteira. 
 
Todas as declarações são terminadas por ponto-e-vírgula ";". 
 
Na imagem a seguir podemos ver os detalhes da regra. 
 
80 
 
 
 
 
Seletor 
 
Ele é responsável por selecionar o elemento, ou elementos HTML que receberão determinado estilo. 
 
Propriedade 
 
Se refere às características visuais que um elemento pode possuir. Tomamos como comparação qualquer 
objeto que podemos medir suas dimensões. Altura e largura seriam propriedades deste objeto quando 
pensamos em tamanho. 
 
Os elementos HTML também possuem propriedades de altura e largura. 
 
Valor: 
 
Corresponde ao produto da propriedade. Ou seja, ele define como o elemento será apresentado. 
 
Se um elemento tem uma altura, o valor corresponde ao seu tamanho seguida pela sua unidade de medida. 
 
Um bloco com 2 cm de altura possui a propriedade altura cujo valor é 2 cm. 
 
Outro exemplo para fixar o conceito é selecionar um parágrafo (seletor) para que apresente no navegador 
uma cor (propriedade) e cujo valor desta cor é vermelha (valor). 
 
4.2 Seletores 
 
As formatações dos estilos em cascata são definidas por meio de elementos conhecidos como seletores. 
 
Existem algumas maneiras de especificar seletores, as quais estão associadas à aplicabilidade das 
formatações ao longo das páginas. 
 
 
 
81 
 
Tipos de seletores 
 
• Seletores Universal; 
• Seletores por Tipo; 
• Seletores por Atributos; 
• Seletores por ID; 
• Seletores por Classes; 
• Seletor Pseudoclasse; 
o Estruturais; 
o Dinâmicos; 
• Seletores Descendentes; 
• Seletores Descendentes Diretos (filho); 
• Seletores por Pseudoelementos; 
• Seletores Adjacentes; 
• Seletores Adjacentes (irmão) 
 
4.2.1 Seletor Universal 
 
Este tipo de seletor é utilizado para definir formatações que serão aplicadas a qualquer tipo de elemento da 
página. 
 
Na codificação deste tipo de seletor, é empregado o símbolo de asterisco, indicando que a formatação será 
associada a todos os elementos da página. 
 
No exemplo a seguir o estilo foi definido no formato interno. No entanto, a especificação também pode 
ser realizada no formato externo. No exemplo, o seletor universal é utilizado para definir todos os textos 
da página na cor azul. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Estilos em Cascata</title> 
 <style> 
 *{color: blue;} 
 </style> 
 </head> 
 <body> 
 <h1>Exemplo Seletor Universal (*)</h1> 
 <p> 
 Texto 1 para teste do seletor universal mudando a cor para azul. 
 </p> 
 <p> 
 Texto 2 para teste do seletor universal mudando a cor para azul. 
 </p> 
 <h3>Lista não ordenada</h3> 
 <Ol> 
82 
 
 <li>Internet Explorer</li> 
 <li>Firefox</li> 
 </Ol> 
 </body> 
</html> 
 
 
Resultado: 
 
 
 
 
4.2.2 Seletor de Tipo 
 
Este seletor é empregado na especificação de formatações para determinados elementos da página. Dessa 
forma, é possível indicar regras que serão aplicadas exclusivamente a um elemento da página. A principal 
característica deste seletor é que o nome dele é o mesmo do elemento HTML. 
 
O seguinte trecho de código apresenta um seletor de tipo para aplicar a cor azul a todos os parágrafos do 
documento: 
 
Exemplo: 
 
<!DOCTYPE html> 
 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Estilos em Cascata</title> 
 <style> 
 p{color: blue;} 
 </style> 
 </head> 
 <body> 
 <h1>Exemplo Seletor de Tipo (tipo). Essa tag não será alterada so "p"</h1> 
 <p> 
 Texto 1 para teste do seletor de Tipo mudando a cor para azul. 
 </p> 
83 
 
 <p> 
 Texto 2 para teste do seletor Tipo mudando a cor para azul. 
 </p> 
 <h3>Lista ordenada não terá a cor alterada. Só a tag "p"</h3> 
 <Ol> 
 <li>Internet Explorer</li> 
 <li>Firefox</li> 
 </Ol> 
</body> 
</html> 
 
Resulado: 
 
 
 
4.2.3 Seletor de Classe 
 
Neste tipo de especificação, é possível indicar quais elementos da página receberão as formatações 
definidas no seletor. 
 
Para isso, é necessário atribuir um nome ao seletor e indicar este nome no atributo class de cada 
elemento que receberá as formatações. 
 
As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir 
formatação a VÁRIOS elementos de uma vez. 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo Seletor de Classe</title> 
 <meta charset="utf-8"> 
 <style> 
 .classe1 {color:blue;} 
 .classe2 {font-size:30px;} 
 .classe3 {background: yellow;} 
 </style> 
 </head> 
 <body><center> 
84 
 
 <div class="classe1">Texto 1</div> 
 <div class="classe1 classe2">Texto 2</div> 
 <div class="classe1 classe2 classe3">Texto 3</div> 
 </body></center> 
</html> 
 
Resultado: 
 
 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Exemplo1 Seletor de Classe</title> 
 <style> 
 h1.titulo{background-color: yellow; color: red;} 
 p.paragrafo1{color: blue;}p.paragrafo2{color: orange;} 
 h2.titulolista{color:blueviolet;} 
 li.itemlista{color:deeppink;} 
 li.item2ista{color:forestgreen} 
 </style> 
 </head> 
 <body> 
 <h1 class="titulo"> 
 Primeiro título Seletor de classe "h1" 
 </h1> 
 <p class="paragrafo1"> 
 Primeiro parágrafo seletor de classe cor azul "p". 
 </p> 
 <p class="paragrafo2"> 
 Segundo parágrafo seletor de classe cor laranja "p". 
 </p> 
 <h2 class="titulolista"> 
 Exemplo Lista com Seletor de Classe "h2" 
 </h2> 
 <ol> 
85 
 
 <li class="itemlista">Primeiro item "li"</li> 
 <li class="item2ista">Segundo item "li"</li> 
 </ol> 
 </body> 
</html> 
 
Resultado: 
 
 
 
4.2.4 Seletor de ID 
 
Este tipo de seletor é empregado na especificação de formatações que serão aplicadas unicamente na 
página. As formatações são exibidas nos elementos que possuem o atributo ID configurado com o mesmo 
nome do seletor. 
 
Segundo as recomendações da linguagem de marcação HTML (MAUJOR, 2014), o atributo ID é utilizado 
para identificar unicamente um elemento na página. Assim, um seletor de ID será aplicado exclusivamente 
a um elemento do documento. 
 
A definição deste seletor é realizada com o símbolo de cerquilha (hashtag). 
 
As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se 
fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um 
elemento em especial. 
 
Sintaxe1: 
 
<style> 
 nomeElemento[id="NomeId"]{propriedade:valor;} 
</style> 
 
Exemplo: 
 
86 
 
<!DOCTYPE html> 
<html lang="pt-br"> 
 <head> 
 <title>Exemplo Seletor ID</title> 
 <meta charset="utf-8"> 
 <style> 
 #idUm { background: pink;} 
 #idDois { background: yellow;} 
 #idTres { background: lightblue;} 
 #idQuatro { background: lightgreen;} 
 </style> 
 </head> 
 <body> 
 <div id="idUm">Div1</div> 
 <div id="idDois">Div2</div> 
 <div id="idTres">Div3</div> 
 <div id="idQuatro">Div4</div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
Exemplo2: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title> Exemplo1 Seletor de Classe ID</title> 
 <style> 
 #atributoid {color: red; 
 background:yellow; 
 text-align:center } 
 </style> 
 </head> 
 <body> 
 <div> 
 <p id="atributoid"> 
87 
 
 Parágrafo com um ID. Caracter cor vermelha, fundo amarelo e centralizado. 
 </p> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
Qual a diferença entre CLASS e ID? 
 
Estudando este artigo de tutorial e o tutorial passado sobre o seletor class, uma dúvida surge e atormenta 
os iniciantes em CSS: quando usar class e quando usar id? 
 
Realmente, vendo os códigos do ID e de CLASS só muda mesmo que em ID usamos o símbolo de hash 
(#) e em classes usamos o ponto (.) 
 
ID e JavaScript 
 
Sem dúvidas, um dos usos mais importantes do seletor id é para JavaScript. 
 
Como o nome do seletor diz, ele serve para identificar um elemento, sendo vastamente usado 
em formulários HTML. 
 
Através da linguagem de programação para werb JavaScript, podemos nos comunicar diretamente 
com cada elemento de um código HTML, devidamente identificado por seu id. 
 
Por exemplo, em formulários, damos um nome a cada elemento do formulário e através disso o 
JavaScript ou PHP poderá saber as informações fornecidas pelos usuários ao preencher o form: 
 
Ou seja, identificando cada membro, ele terá um nome único, que é só dele, assim uma linguagem de 
programação pode obter e trabalhar junto de um local específico do HTML, pois tem como identificar 
aquele trecho pelo seu nome. 
http://www.htmlprogressivo.net/p/formularios-em-html.html
88 
 
 
ID é única, CLASS pode não ser. 
 
Os exemplos de formulários passado mostram uma das grandes diferenças entre id e class: as id são 
únicas, não podemos ter dois elementos de um formulário com a mesma id. 
 
Exemplo2: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title> Exemplo1 Seletor de Classe ID</title> 
 <style> 
 #id1 {color: red; background:yellow;} 
 #id2 {text-align:center } 
 p.classe1{color:blue;} 
 p.classe2{background: greenyellow;} 
 </style> 
 </head> 
 <div> 
 <p class="classe1"> 
 Primeiro Parágrafo com um atributo. Cor azul. 
 </p> 
 <p class="classe1 classe2"> 
 Segundo parágrafo com dois atributos. Azul e verde. 
 </p> 
 <p id="id1"> 
 Terceiro parágrafo com um ID. Não é possível usar dois ID's 
 </p> 
 </div> 
</body> 
</html> 
 
Resultado: 
 
 
89 
 
 
4.2.5 Seletor de Atributo 
 
É um tipo de seletor CSS que permite seleção baseada em um atributo definido para o elemento. A sintaxe 
de um seletor de atributo consiste no nome do elemento seguido do sinal colchetes ([ ]) e dentro dos 
colchetes uma expressão. 
 
A expressão dentro do colchetes admite sete sintaxes diferentes e cada uma delas define um tipo de seletor 
de atributo, conforme mostrado na tabela seguir: 
 
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio 
atributo. 
 
Os atributos podem ser: 
 
• E[atributo = “valor"]: elementos do tipo E cujo “atributo” seja igual a “valor”. 
• E[atributo ^= "valor"]: elementos do tipo E cujo valor do “atributo” comece com a 
palavra “valor”. 
• E[atributo $= "valor"]: elementos do tipo E cujo valor do “atributo” termine com a 
palavra “valor”. 
• E[atributo *= "valor"]: elementos do tipo E cujo valor do “atributo” contenha a palavra 
“valor”. 
 
Sintaxe: 
 
<style> 
 nomeElemento[id="NomeId"]{propriedade:valor;} 
</style> 
 
Exemplo: 
 
<doctype html> 
<html> 
 <head 
 <title Exemplo Seleto de Atributo /title> 
 <meta charset="utf-8"> 
 <style> 
 div[id="cabecalho"]{color:red;} 
 div[id^="par"]{color:blue} 
 p1[id$="ior"]{color:blueviolet;} 
 div[id*="fra"]{color:orange;} 
 </style> 
 </head> 
 <body> 
 <div id="cabecalho"> 
 <h1>Exemplo uso Seletor por atributo</h1> 
 </div> 
 <div> 
 <div id="parte_superior"> 
 Parte superior. Exemplo (div[id^="par"]{color:darkblue}) 
90 
 
 </div> 
 <div id="parte_inferior"> 
 Parte inferior. Exemplo (div[id^="par"]{color:darkblue}) 
 </div> 
 </div> 
 <div><br> 
 <p1 id="parte_superior"> 
 Parte superior. Exemplo (p1[id$="ior"]{color:blueviolet;}) 
 </p1><br> 
 <p1 id="parte_inferior"> 
 Parte inferior. Exemplo (p1[id$="ior"]{color:blueviolet;}) 
 </p1> 
 </div> 
 <div id="frase"> 
 <p> 
 É um artigo independente dentro de um texto. Exemplo (div[id*="fra"]{color:orange;}) 
 </p>. 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
4.2.6 Seletor de Pseudo-classe 
 
Uma pseudo-classe CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial 
do(s) elemento(s) selecionado(s). Por exemplo,:hover pode ser usado para alterar a cor de um botão 
quando o usuário parar o mouse sobre ele. 
 
91 
 
Pseudo-classes são utilizada para adicionar efeitos especiais para alguns seletores. As pseudo-classes 
funcionam como se uma classe fosse adicionada a uma tag de modo automático, não sendo necessário ao 
programadorter que declarar o atributo class ao elemento. Pseudo classes podem ser Estruturais e 
Dinâmicas. 
 
4.2.6.1 Pseudo-classes Estruturais 
 
São utilizadas para selecionar elementos da estrutura do código do HTML, veja alguns exemplos: 
 
• :first-child - Seleciona todos os elementos que são primeiro filho do elemento pai. 
• :last-child - Seleciona o elemento que é o último filho do seu elemento pai. 
• :first-of-type - Seleciona a primeira ocorrência de cada elemento. 
• :not(seletor) - Seleciona todos elementos que não são um elemento selecionado. 
o Ex: :not(p), todos os elementos serão selecionados menos o <p>. 
• :nth-child(n) - Seleciona um elemento que é filho do elemento pai. 
o Ex: :nth-child(4), este comando irá selecionar o quarto filho do elemento pai. 
• :only-child - Seleciona todos elementos que só tem um elemento como filho. 
o Ex: ul:only-child, este comando selecionará apenas as <ul> que possuírem somente um 
elemento como filho. 
 
first-child 
 
Por exemplo, a propriedade first-child simula como se fosse criada uma classe "primeiro-
filho" que é anexada a tag que representa o primeiro filho de determinado elemento. 
 
É utilizado para definir formatações especiais nos elementos da página. Uma listagem detalhada destes 
seletor pode ser visualizada em (W3SCHOOLS, 2014). 
 
Com isso, é possível definir formatações diferentes para cada estado da âncora: não visitada; visitada; 
quando o mouse passa por cima da âncora; e quando a âncora é selecionada. 
 
Abaixo temos o exemplo da sintaxe de uso de pseudo-classes, utilizando o nome do seletor seguido de 
dois-pontos e o nome da pseudo-classe: 
 
Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial 
do elemento selecionado. 
 
Sintaxe: 
 
seletor:pseudo-class{propriedade:valor} 
 
Exemplo: 
 
<style> 
 p:first-child{color: blue;} 
</style> 
 
92 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <style> 
 p:first-child {color: blue;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <p>Primeiro parágrafo <i>itálico em azul com first-child</i></p> 
 <p>Segundo parágrafo <i>itálico em azul sem first-child</i></p> 
 <p>Terceiro parágrafo <i>itálico em azul sem first-child</i></p> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
last-child 
 
A CSS pseudo-classe :last-child representa qualquer elemento que é o último filho de seu elemento 
pai. 
 
Sintaxe: 
 
seletor:pseudo-class{propriedade:valor} 
 
Exemplo: 
 
<style> 
 p:last-child {color: blue;} 
</style> 
https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes
93 
 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo Pseudo Classe Last-child</title> 
 <meta charset="UTF-8"> 
 <style> 
 p:last-child {color: blue;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <p>Primeiro parágrafo <i>itálico em azul sem last-child</i></p> 
 <p>Segundo parágrafo <i>itálico em azul sem last-child</i></p> 
 <p>Terceiro parágrafo <i>itálico em azul com last-child</i></p> 
 </div> 
 </body> 
</html> 
 
 
Resultado: 
 
 
 
Exemplo completo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>TODO supply a title</title> 
 <meta charset="UTF-8"> 
 <style> 
 ol li:first-child{ 
 color: red; 
 } 
 li:first-of-type{ 
 color: orange; 
 } 
 ol li:last-child{ 
94 
 
 color: blue; 
 } 
 p:not(.segundo){ 
 font-size: 22px; 
 } 
 p:nth-child(4){ 
 color: green; 
 } 
 ul li:only-child{ 
 color: yellow; 
 } 
 </style> 
 </head> 
 <body> 
 <ul> 
 <li>primeira lista não ordenada</li> 
 <li>segunda lista não ordenada</li> 
 </ul> 
 <ul> 
 <li>terceira lista não ordenada</li> 
 </ul> 
 <ol> 
 <li>primeira lista ordenada</li> 
 <li>segunda lista ordenada</li> 
 <li>terceira lista ordenada</li> 
 </ol> 
 <div> 
 <p class="primeiro">Este é meu primeiro parágrafo</p> 
 <p class="segundo">Este é meu segundo parágrafo</p> 
 <p class="terceiro">Este é meu terceiro parágrafo</p> 
 <p class="quarto">Este é meu quarto parágrafo</p> 
 </div> 
 </body> 
</html> 
 
Obs. 
 
Para melhor entendimento do conteúdo do exemplo anterior: 
 
Primeiro, eu disse que o primeiro filho (first-child) da <ol>, que no caso é o <li>, receberá a 
cor vermelha. 
 
Segundo, informei que o primeiro do tipo (first-of-type) <li> receberá a cor laranja. 
 
Terceiro, a <li>, filho da <ol>, que for o último filho (last-child) vai receber a cor azul. 
 
Quarto, todas as tags <p> receberão font-size de 22px, menos as que tiverem a classe segundo. 
 
Quinto, observem na estrutura do html que a tag <p> se repete 4 vezes, eu queria selecionar apenas o 
último <p>, portanto usei a pseudo classe nth-child()(com o valor 4, pois temos que informar qual 
filho queremos estilizar) e defini que ele adquirisse a cor verde. 
95 
 
 
Por último, eu queria estilizar apenas a <ul> que tivesse somente um filho <li>,então usei a pseudo 
classe only-child para que esse único filho tivesse a cor amarela. 
 
Veja o resultado desta estilização abaixo: 
 
 
 
 
4.2.6.2 Pseudo-classes Dinâmicas 
 
Os efeitos dinâmicos são aqueles que o usuário exerce uma ação sobre um elemento, como: mover o 
cursor sobre um link, clicar, etc. 
 
Exemplo: 
 
• :hover - Ativa um estilo do elemento quando passamos ou colocamos o mouse em cima dele. 
• :active - Seleciona o link ativo. 
o Por exemplo, ao clicar em um link e permanecer com o botão do mouse pressionado 
estamos ativando aquele elemento. 
• :visited - Seleciona todos os links visitados. 
• :link - Link não visitado. 
• :focus - Aplicado quando um elemento recebe foco, o que pode ocorrer quando o usuário 
selecionar o elemento utilizando o teclado ou ativando o mesmo com o mouse. 
o Por exemplo, um campo de um formulário). 
 
hover 
 
Ativa um estilo do elemento quando passamos ou colocamos o mouse em cima dele. 
 
Sintaxe: 
 
elemento:pseudoclasse {propriedade:valor;} 
 
96 
 
 
Exemplo: 
 
a:hover {background-color:gold;} 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 /* Cor de fundo cor ouro */ 
 a:hover {background-color:gold;} 
 </style> 
 </head> 
 <body> 
 <p><a href="http://www.uol.com.br">Uol (Cor azul site visitado)</a>.</p> 
 </body> 
</html> 
 
 
 
 
active 
 
Seleciona links ativados. 
 
Sintaxe: 
 
elemento:pseudoclasse {propriedade:valor;} 
 
Exemplo: 
 
a:active {background-color:yellow;} 
 
Exemplo: 
 
97 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 /* Links visitados e ativos ficam com a cor amarela */ 
 a:active {background-color:yellow;} 
 </style> 
 </head> 
 <body> 
 <p><a href="http://www.hotmail.com">Hotmail (Cor azul site visitado)</a>.</p> 
 </body> 
</html> 
 
 
 
 
 
 
 
visited 
 
Sintaxe: 
 
elemento:pseudoclasse {propriedade:valor;} 
 
Exemplo: 
 
a:visited {color: blue;} 
 
98 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 /* Marca os links visitados com a cor azul */ 
 a:visited {color:blue;} 
 </style> 
 </head> 
 <body> 
 <h1>Noticias</h1> 
 <p><a href="http://www.uol.com.br">Uol (Cor azul site visitado)</a>.</p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
link 
 
Links listados na página com alteração na descrição. 
 
Sintaxe: 
 
elemento:pseudoclasse {propriedade:valor;} 
 
Exemplo: 
 
a:link {color: red;} 
 
Exemplo: 
 
99 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 /* Descrição do link. No caso com a cor vermelha */ 
 a:link {color: red;} 
 </style> 
 </head> 
 <body> 
 <h1>Email</h1> 
 <p><a href="http://www.yahoo.com.br">yahoo (Cor vermelha - nome do link)</a>.</p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
focus 
 
Selecionar o elemento utilizando o teclado ou ativando o mesmo com o mouse. 
 
Sintaxe: 
 
elemento:pseudoclasse {propriedade:valor;} 
 
Exemplo: 
 
a:focus {background-color:lime} 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
100 
 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 /*Elemento selecionado com o mouse com verde */ 
 a:focus {background-color:lime} 
 </style> 
 </head> 
 <body> 
 <h1>Noticias</h1> 
 <p><a href="http://www.uol.com.br">Uol (Cor da seleção do link (mouse) - verde)</a>.</p> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
Exemplo completo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>CSS dynamic pseudo-classes</title> 
 <style> 
 body {font-family: sans-serif;} 
 
 h1, h2 {font-family: cursive;} 
 
 /* Descrição do link. No caso com a cor vermelha */ 
 a:link {color: red;} 
 
 /* Marca os links visitados com a cor azul */ 
 a:visited {color: blue;} 
 
 /* Cor de fundo cor ouro */ 
 a:hover {background-color:gold;} 
 
 /* Links visitados e ativos ficam com a cor amarela */ 
 a:active {background-color:yellow;} 
101 
 
 
 /*Elemento selecionado com o mouse com verde */ 
 a:focus {background-color:lime} 
 </style> 
 </head> 
 <body> 
 <h1>Noticias</h1> 
 <p><a href="http://www.uol.com.br">Uol (Cor azul site visitado)</a>.</p> 
 
 <h2>Jornais</h2> 
 <ul> 
 <li> 
 <a href="http://www.odia.com.br">Jornal O Dia (Cor azul site visitado)</a> 
 </li> 
 <li> 
 <a href="http://www.oglobo.com">Jornal O Globo (Cor azul site visitado)</a> 
 </li> 
 </ul> 
 
 <h2>Página Inexistente (Cor sempre vermelha)</h2> 
 <ul> 
 <li> 
 <a href="http://ww.estacio.com.br">Site da Estácio (Cor vermelha 
site com erro)</a> 
 </li> 
 <li> 
 <a href="https://ww.magazineluiza.com.br">Site Magazine Luiza 
(cor vermelha site com erro)</a> 
 </li> 
 </ul> 
 </body> 
</html> 
 
 
 
102 
 
 
4.2.7 Seletor Pseudo-elemento 
 
Os pseudo-elementos nos permitem selecionar algumas áreas internas de um elemento HTML e 
customizá-las através de propriedades. 
 
Selecionar a área que antecede o conteúdo de um elemento adicionando a ela texto ou imagens, ou 
estilizar apenas a primeira linha de um elemento de texto são apenas algumas das possibilidades criadas 
por esse recurso. 
 
Para utilizar um pseudo-elemento basta declarar o seletor seguido pelo pseudo-elemento desejado. Logo 
após, da mesma forma que é feito com qualquer regra CSS, podemos definir as propriedades a ele 
relacionadas. 
 
Sintaxe: 
 
[seletor]::pseudo-elemento{ 
 propriedade:valor; 
 } 
 
Todos os pseudo-elementos CSS 
 
Seletor Exemplo Descrição 
::after p::after Inserir algo após o conteúdo de cada elemento <p> 
::before p::before Inserir algo antes do conteúdo de cada elemento <p> 
::first-letter p::first-letter Seleciona a primeira letra de cada elemento <p> 
::first-line p::first-line Seleciona a primeira linha de cada elemento <p> 
::selection p::selection Seleciona a parte de um elemento que é selecionado por um usuário 
 
::after 
 
A declaração do pseudo-elemento ::after cria um falso elemento que nos permite adicionar conteúdo 
ao elemento selecionado no final. 
 
Exemplo: 
 
div::after { content: "pseudo-elemento ::after"; color: red;} 
 
<div> 
 Texto dentro do elemento. 
</div> 
 
::before 
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-PT&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://www.w3schools.com/cssref/sel_after.asp&usg=ALkJrhgdYEUFI_RqkMZC3Qeo9clAu0bTxw
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-PT&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://www.w3schools.com/cssref/sel_before.asp&usg=ALkJrhhEzHcKG9Vx1EaIeJswTtxI7Nydfw
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-PT&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://www.w3schools.com/cssref/sel_firstletter.asp&usg=ALkJrhhHUTDGPMATL90KbE0154n7kJeegQ
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-PT&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://www.w3schools.com/cssref/sel_firstline.asp&usg=ALkJrhhVQ3yJq8xXEOgsZMmjkNnGegPDFA
https://translate.googleusercontent.com/translate_c?depth=1&hl=pt-PT&prev=search&rurl=translate.google.com.br&sl=en&sp=nmt4&u=https://www.w3schools.com/cssref/sel_selection.asp&usg=ALkJrhjPT3yhRBJOG4H7W-bVL_YPYa110w
103 
 
 
A declaração do pseudo-elemento ::before em um seletor cria um falso elemento que nos permite 
adicionar conteúdo antes do conteúdo do elemento selecionado. 
 
Exemplo: 
 
div::before {content: “pseudo-elemento ::before”; color: blue;} 
 
<div> 
 Texto dentro do elemento. 
</div> 
 
::first-letter 
 
O pseudo-elemento ::first-letter nos permite selecionar a primeira letra do conteúdo de um 
elemento. Usamos esse recurso quando desejamos destacar essa letra alterando seu tamanho e sua cor, por 
exemplo. 
 
Exemplo: 
 
p::first-letter {color: red; font-size: 32px;} 
 
<p> 
 Por exemplo, ele pode ser usado para: 
</p> 
 
::first-line 
 
O pseudo-elemento ::first-line é utilizado quando desejamos customizar o conteúdo apresentado 
na primeira linha de um elemento. Assim, podemos estilizar esse fragmento de texto de forma 
independente, aplicando, por exemplo, um tamanho de fonte diferente. 
 
Exemplo: 
 
p::first-line {font-size:20px; color:red;} 
 
<p> 
 Por exemplo, ele pode ser usado para: 
</p> 
 
::selection 
 
O pseudo-elemento ::selection é utilizado para selecionar o conteúdo de um elemento e, a partir 
disso, customizar algumas propriedades dessa área, como a cor de fundo e do texto. 
 
O seletor ::selection corresponde à parte de um elemento que é selecionado por um usuário. 
 
Obs. 
104 
 
 
É importante ressaltar que apenas um pequeno conjunto de propriedades do CSS pode ser utilizado com 
esse pseudo-elemento. Entre essas propriedades podemos destacar: color, background-
color, cursor e text-decoration. Em alguns navegadores ainda podemos 
utilizar: outline e text-shadow. Quando uma propriedade não puder ser renderizada ela será 
ignorada. 
 
Exemplo: 
 
p1::selection {color:blue; background-color:yellow;} 
 
<p1>Por exemplo, ele pode ser usado para: Continuar.</p1> 
 
Exemplo completo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Exemplo Seletor Pseudo Elemento</title> 
 <meta charset="UTF-8"> 
 <style> 
 /* Inclui um texto antes da frase com a cor azul*/ 
 li::before {content: "Texto incluído com before. "; color: blue;} 
 
 /* Inclui um texto no final da frase com a cor azul*/ 
 li::after {content:" Texto incluído com after.";color: blue;} 
 
 /* Muda a primeira letra do parágrafo para azul*/ 
 p::first-letter {color: blue; font-size: 32px;} 
 
 /* Muda a primeira linha do parágrafo para azul*/ 
 p::first-line {color:red; font-size: 25px;} 
 
 /* Muda a cor do texto para azul e fundo amarelo quando selecionado*/ 
 p1::selection {color:blue; background-color:yellow;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <h1>Que são pseudo-elementos?</h1> 
 <p> 
 Pseudo-elemento especificado em partes de um elemento.<br> 
 Por exemplo, ele pode ser usado para: 
 <ol> 
 <li>Estilizar a primeira letra, ou linha, de um elemento;</li> 
 <li>Inserir conteúdo antes, ou depois, o conteúdo de um elemento.</li> 
 </ol> 
 </p> 
 <p1> 
 Pseudo-elemento em CSS é usado para estilo especificado em partes de um elemento.<br> 
 Por exemplo, ele pode ser usado para: Continuar. 
 </p1> 
 </div> 
 </body> 
</html> 
105 
 
 
Resultado: 
 
 
 
4.2.8 Seletor Descendente Direto (filho) 
 
Um seletor filho tem como alvo um filho imediato de um elemento. O seletor filho consiste de um ou mais 
seletores simples separados por um sinal de maior “>”. O elemento pai fica à esquerda do sinal “>”, e é 
permitido deixar espaço em branco entre o elemento de combinação e os seletores. 
 
A regra a seguir aplica-se a todos os elementos <li> que sejam filhos de um elemento <ol>: 
 
Sintaxe: 
 
Seletor [pai] > elemento-filho{propriedade:valor} 
 
Exemplo: 
 
<style> 
 ol > li {color:red;} 
</style> 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>TODO supply a title</title> 
 <meta charset="UTF-8"> 
 <title> Exemplo Seletor Filho </title> 
106 
 
 <style> 
 ol > li {color:red;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <h1>Exemplo Seletor Filho</h1> 
 <ol> 
 <li>Item 1 da lista</li> 
 <li>Item 2 da lista</li> 
 <li>Item 3 da lista</li> 
 </ol> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
4.2.9 Seletores Descendentes 
 
Um seletor descendente é uma combinação de dois ou mais seletores simples separados por um espaço em 
branco. Casa com elementos que sejam descendentes do primeiro elemento simples declarado no seletor. 
 
Por exemplo, na regra a seguir o seletor casa com todos os elementos ul que sejam descendentes do 
elemento body: 
 
Sintaxe: 
 
 elemento-seletor elemento-seletor-descendente{propriedade:valor} 
 
Exemplo: 
 
 <style> 
107 
 
 body ul{color:blue;} 
</style> 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title> Exemplo Seletor Descendente </title> 
 <style> 
 body ul{color:blue;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <h1>Exemplo Seletor Descendente </h1> 
 <ol> 
 <li>Lista 1</li> 
 </ol> 
 <ul> 
 <li>Lista 1</li> 
 </ul> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
 
4.2.10 Seletores Adjacentes 
 
108 
 
Um seletor irmão adjacente consiste de um ou mais seletores simples separados por um sinal de adição, 
“+”. O seletor tem como alvo um elemento que seja irmão e adjacente ao primeiro elemento. Os 
elementos devem ter o mesmo pai e o primeiro elemento deve ser imediatamente anterior ao segundo. É 
permitido deixar espaço em branco entre o elemento de combinação e os seletores. 
 
 
Sintaxe: 
 
seletorpai + seletor-filho{propriedade:valor} 
 
Exemplo: 
 
<style> 
 h1 + p {color:red;} 
</style> 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title> Exemplo Seletor Adjacente </title> 
 <style> 
 h1 + p {color:red;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <h1>Exemplo Seletor Adjacente</h1> 
 <p>Primeiro parágrafo será alterado para cor vermelha</p> 
 <p>Segundo parágrafo não será alterado para cor vermelha</p> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
109 
 
4.2.11 Seletores Adjacentes (irmãos) 
 
Conhecido como elemento irmão, é bastante parecido com o seletor A + B, porém ele seleciona todos os 
elementos diretos de A e não somente o primeiro. Usa (~) til na sintaxe (A ~ B), visto que ele não é para 
elementos filhos e sim para elementos seguintes. 
 
Sintaxe: 
 
Seletorpai ~ seletor-filho{propriedade:valor} 
 
Exemplo: 
 
<style> 
 h1 ~ p {color:red;} 
</style> 
 
Exemplo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title> Exemplo Seletor Adjacente (irmão) </title> 
 <style> 
 h1 ~ p {color:red;} 
 </style> 
 </head> 
 <body> 
 <div> 
 <h1>Exemplo Seletor Adjacente Irmão</h1> 
 <p>Primeiro parágrafo será alterado para cor vermelha</p> 
 <p>Segundo parágrafo tb será alterado para cor vermelha</p> 
 </div> 
 </body> 
</html> 
 
Resultado: 
 
 
 
110 
 
Exercícios Aula 2 
 
1 – Objectivo: Utilização das marcas 
 
<html></html> 
<head></head> 
<title></title> 
<body></body> 
<h1></h1> 
<h2></h2> 
<h3></h3> 
<h4></h4> 
<h5></h5> 
<h6></h6> 
 
1. Abrir o NotePad. 
2. Criar um documento HTML com a aparência semelhante a figura abaixo. 
3. Salvar o documento com o nome: exer1.html. 
 
 
 
2 – Objetivo: Utilização das marcas 
 
<p></p> 
<hr> 
<br> 
 
1. Abrir o NotePad. 
2. Criar um documento HTML com a aparência semelhante ao anexo. 
3. Guardar o documento com o nome: exer2.html 
 
111 
 
 
112 
 
Exercícios Aula 3 
 
1 – Criar uma página em HTML como exemplo no slide seguinte. 
 
Observar: 
 
1 – Títulos centralizados (H1,H2 e H3); 
2 – Separador de blocos (hr); 
3 – Parágrafos centralizados (p1); 
4 – Fazer uso dos textos (slides seguinte); 
5 – O layout deve ficar igual ao formulário apresentado. 
 
Corona Vírus 
 
Os coronavírus (CoV) são uma grande família viral, conhecidos desde meados dos anos 1960, que causam infecções 
respiratórias em seres humanos e em animais. 
Geralmente, infecções por coronavírus causam doenças respiratórias leves a moderada, semelhantes a um resfriado comum. 
A maioria das pessoas se infecta com os coronavírus comuns ao longo da vida, sendo as crianças pequenas mais propensas a se 
infectarem. 
Os coronavírus comuns que infectam humanos são alpha coronavírus 229E e NL63 e beta coronavírus OC43, HKU1. 
 
Como o coronavírus é transmitido? 
 
As investigações sobre as formas de transmissão do coronavírus ainda estão em andamento, mas a disseminação de pessoa para 
pessoa, ou seja, a contaminação por gotículas respiratórias ou contato, está ocorrendo. 
Qualquer pessoa que tenha contato próximo (cerca de 1m) com alguém com sintomas respiratórios está em risco de ser exposta 
à infecção. 
É importante observar que a disseminação de pessoa para pessoa pode ocorrer de forma continuada. 
Alguns vírus são altamente contagiosos (como sarampo), enquanto outros são menos. Ainda não está claro com que facilidade o 
coronavírus se espalha de pessoa para pessoa. 
Apesar disso, a transmissão dos coronavírus costuma ocorrer pelo ar ou por contato pessoal com secreções contaminadas, 
como: 
Gotículas de saliva; 
Espirro; 
Tosse; 
Catarro; 
Contato pessoal próximo, como toque ou aperto de mão; 
Contato com objetos ou superfícies contaminadas, seguido de contato com a boca, nariz ou olhos. 
 
Os coronavírus apresentam uma transmissão menos intensa que o vírusda gripe. 
 
Tratamento 
 
Não existe tratamento específico para infecções causadas por coronavírus humano. 
No caso do coronavírus é indicado repouso e consumo de bastante água, além de algumas medidas adotadas para aliviar os 
sintomas, conforme cada caso, como, por exemplo: 
Uso de medicamento para dor e febre (antitérmicos e analgésicos). 
Uso de umidificador no quarto ou tomar banho quente para auxiliar no alívio da dor de garanta e tosse. 
Assim que os primeiros sintomas surgirem, é fundamental procurar ajuda médica imediata para confirmar diagnóstico e iniciar 
o tratamento. 
 
 
 
113 
 
 
 
2 – Criar uma página em HTML como exemplo no slide seguinte. 
 
Observar: 
 
1 – Títulos (H1) centralizados <center>; 
2 – Usar <center>, são duas seções; 
3 – Usar parágrafos(p); 
4 – O layout deve ficar igual ao formulário apresentado. 
 
 
 
114 
 
3 – Criar uma página em HTML como exemplo no slide seguinte. 
 
Observar: 
 
1 – Títulos (H1); 
2 – Usar <article>; 
3 – Usar parágrafos(p); 
4 – O layout deve ficar igual ao formulário apresentado. 
 
 
115 
 
Exercício Aula 4 
 
1 – Criar uma página em HTML como exemplo abaixo. 
 
Observar: 
 
1 – Títulos (H1); 
2 – Usar <a> para fazer link’s internos; 
3 – Formatar o título e texto conforme exemplo abaixo (Formatar o texto usando: negrito, itálico, riscado e 
“aspas”); 
4 - Usar <a> para fazer link externo; 
5 – Usar separadores; 
6 – O layout deve ficar igual ao formulário apresentado. 
Link para os Exercícios 
Exercicio 1 Aula1 
Exercicio 2 Aula1 
Exercicio 1 Aula2 
Exercicio 2 Aula2 
 
 
 
Formatar o texto usando: negrito, itálico, riscado, aspas 
Um servidor Web (web server) é o programa de computador responsável por publicação de recursos na Internet. 
Estes recursos podem ser desde páginas web, até conteúdo multimídia, tais como imagens, áudio e vídeo. 
Os principais servidores web utilizados atualmente são o Apache HTTP Server e o Microsoft Internet Information Services (IIS). 
O Apache HTTP Server é o servidor web mais popular para disponibilização de conteúdo na Internet. 
Este servidor foi criado em 1996 e tem como objetivo principal fornecer um servidor seguro, eficiente e extensível fundamentado 
nos serviços e padrões atuais do protocolo HTTP. 
O servidor Apache é um projeto de código aberto desenvolvido e mantido pela Apache Software Foundation (APACHE, 2014). 
A solução Microsoft para servidores Web é popularmente conhecida como IIS e suporta diversos serviços tais como 
HTTP, FTP e SMTP. O servidor permite ainda a inclusão de módulos para extensão das funcionalidades oferecidas, 
como, por exemplo, ferramentas para publicação de páginas web, plataforma de entrega multimídia, entre outros. 
O Internet Infomation Services é parte integrante dos sistemas operacionais Microsoft, principalmente da família 
Windows Server (IIS, 2014). 
 
Link para a Estacio 
Acessar o site 
 
 
 
Texto da página a ser formatado 
 
Um servidor Web (web server) é o programa de computador responsável por publicação de recursos na Internet. 
Estes recursos podem ser desde páginas web, até conteúdo multimídia, tais como imagens, áudio e vídeo. 
Os principais servidores web utilizados atualmente são o Apache HTTP Server e o MicrosoftInternet Information Services (IIS). 
 
http://localhost:8383/HTML5Application/Aula2GabaritoExercicio1.html
http://localhost:8383/HTML5Application/Aula2GabaritoExercicio2.html
http://localhost:8383/HTML5Application/Aula3GabaritoExercicio1.html
http://localhost:8383/HTML5Application/Aula3GabaritoExercicio2.html
http://www.estacio.br/
116 
 
O Apache HTTP Server é o servidor web mais popular para disponibilização de conteúdo na Internet. 
Este servidor foi criado em 1996 e tem como objetivo principal fornecer um servidor seguro, eficiente e extensível fundamentado 
nos serviços e padrões atuais do protocolo HTTP. 
O servidor Apache é um projeto de código aberto desenvolvido e mantido pela Apache Software Foundation (APACHE, 2014). 
 
A solução Microsoft para servidores Web é popularmente conhecida como IIS e suporta diversos serviços tais como 
HTTP, FTP e SMTP. O servidor permite ainda a inclusão de módulos para extensão das funcionalidades oferecidas, 
como, por exemplo, ferramentas para publicação de páginas web, plataforma de entrega multimídia, entre outros. 
O Internet Infomation Services é parte integrante dos sistemas operacionais Microsoft, principalmente da família Windows Server (IIS, 
2014). 
117 
 
Exercícios Aula 5 
 
1. Criar um documento HTML cujo conteúdo seja semelhante ao apresentado na figura 1. 
 
2. Refaça o exercício 1 alterando o layout de acordo com a figura 2 abaixo. 
 
3. Criar um documento HTML para carregar e tocar uma música. 
 
4. Criar um documento HTML para carregar e exibir um vídeo. 
 
 
 
 
118 
 
Exercícios Aula 6 
 
Montar formulários para os seletores abaixo: 
 
• Seletores por Tipo; 
• Seletores por Atributos; 
• Seletores por ID; 
• Seletores por Classes; 
• Seletor Pseudoclasse; 
• Estruturais; 
• Dinâmicos; 
• Seletores Descendentes; 
• Seletores Descendentes Diretos (filho); 
• Seletores por Pseudo-elementos; 
• Seletores Adjacentes; 
• Seletores Adjacentes (irmão) 
 
Não pode ser igual aos exemplos apresentados na apostila.