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"