Programação Web

DESENVOLVIMENTO WEB
Diego César Batista Mariano
Conhecendo a disciplina
Olá! Seja bem-vindo à disciplina Desenvolvimento Web. Nos dias de hoje, o

desenvolvimento de aplicações web se tornou fundamental para o sucesso no mercado
de trabalho, impactando diversos tipos de negócio.
Nos últimos tempos, a internet deixou de ser palco exclusivo de grandes empresas de
comércio eletrônico (e-commerce), passando a fazer parte do dia a dia de pequenas e
médias empresas, que têm focado cada vez mais em levar seus produtos para serem
divulgados ou comercializados na internet.
A partir da integração de serviços disponibilizados por empresas de tecnologia, websites

têm se tornado cada vez mais dinâmicos. Se uma empresa quer divulgar seu endereço
para clientes, por que não incluir em seu site um serviço de mapas que indique o local
com precisão? Se uma empresa quer vender um produto inovador, por que não adicionar
vídeos explicando seu funcionamento? Se uma empresa quer esclarecer dúvidas, em
tempo real, de clientes que desejam comprar seu produto online, por que não adicionar
um chat que conecte o cliente ao vendedor? Se a empresa quer aumentar o valor da
marca, então, por que não investir em divulgação nas redes sociais? O que todas essas
necessidades têm em comum? Todas requerem profissionais competentes e capacitados
para lidarem com aplicações web.
Nesta disciplina, você verá desde os fundamentos do desenvolvimento de websites até o

aperfeiçoamento visual da interface usando-se folhas de estilo. Além disso, será
abordado o desenvolvimento de aplicações a partir de linguagens back-end, isto é,
aplicações executadas diretamente em um servidor, e linguagens front-end, aquelas
executadas diretamente no navegador.
Na Unidade 1, você aprenderá os fundamentos da linguagem de marcação de

hipertexto, denominada HTML, bem como a estruturar as páginas usando tags, a
adicionar imagens, links, tabelas, a construir seus próprios formulários e a montar a
estrutura de uma página web utilizando o HTML.
Na Unidade 2, focaremos a configuração da aparência de websites a partir das

chamadas folhas de estilo em cascata, denominadas CSS (Cascading Style Sheets). As
folhas de estilo permitem separar os códigos relacionados ao conteúdo de uma página
dos códigos relacionados à aparência. Já na Unidade 3, abordaremos os fundamentos
do JavaScript, que é uma linguagem de programação front-end que possibilita que
documentos web possam se tornar interativos.
Por fim, na Unidade 4, será apresentada a linguagem de programação PHP.

Originalmente, PHP significava personal home page (página pessoal), por ser uma
linguagem back-end utilizada para construção de websites dinâmicos, mas com a
evolução da linguagem e a adoção de novas funcionalidades, PHP passou a ser um
acrônimo recursivo para PHP: Hypertext Preprocessor (Pré-processador de
Hipertextos PHP). Nos dias de hoje, a maior parte dos sites dos documentos disponíveis
na internet são construídos usando-se PHP.
Bons estudos!
Não pode faltar
INTRODUÇÃO À PROGRAMAÇÃO
WEB
Qual é a importância de aprender sobre o HTML?
Conhecer a fundo os elementos básicos do HTML é fundamental para se compreender,

na prática, os princípios do desenvolvimento de aplicações web.
Fonte: Shutterstock.
Convite ao estudo
Ao longo dos anos, a internet tornou-se fundamental para a sociedade. Estamos sempre
conectados à grande rede mundial de computadores e isso tem trazido mudanças
profundas no mercado de trabalho; empresas que não estão na web correm o risco de
deixarem de existir. Por esse motivo e outros, cada vez mais profissionais capacitados
estão sendo requisitados na área de desenvolvimento web.
As aplicações web, ou seja, aquelas que são executadas a partir da internet, podem ser
construídas usando-se uma gama de linguagens de marcação, estilo e programação.
Portanto, o caminho para se tornar um desenvolvedor web é longo e envolve muita
dedicação, e nesta unidade, você dará o primeiro passo.
Na primeira seção, você aprenderá os fundamentos da linguagem de marcação de
hipertexto (HTML), suas versões, diferenças e elementos básicos.
Na segunda seção, você aprenderá sobre elementos estruturais da linguagem HTML e

as tags relacionadas à inserção de texto, listas, links e imagens; conhecerá, ainda, o
conceito de iframes e de design responsivo.
Por fim, na terceira seção, você aprenderá a construir tabelas e formulários, bem como
conhecerá os tipos de campos de entrada e outros elementos.
Vamos lá?
Praticar para aprender
Nesta seção, você aprenderá os fundamentos do desenvolvimento de websites;

conhecerá, ainda, os serviços de hospedagem de páginas web e como são editados a
partir de editores de códigos.
Aprender os fundamentos para construção de websites é fundamental para o sucesso no

mercado de trabalho, que, a cada dia, requer mais profissionais da tecnologia da
informação capacitados para lidar com aplicações web.
Uma das linguagens fundamentais para o desenvolvimento web é a linguagem HTML,

ou linguagem de marcação de hipertexto, que é a principal linguagem utilizada para
construção de documentos web. Conhecer a fundo os elementos básicos do HTML é
fundamental para se compreender, na prática, os princípios do desenvolvimento de
aplicações web.
A fim de colocar em prática os conhecimentos a serem adquiridos nesta seção, imagine

que você acaba de ser contratado como estagiário em uma empresa que vende planos de
internet. A empresa que o contratou é bastante conceituada no mercado, entretanto, a
maior parte das operações de vendas é realizada com métodos antigos, como ligações
telefônicas. No começo das atividades dessa empresa, isso não era um problema, pois a
maioria dos clientes não possuía acesso à internet, logo, requisitavam os serviços da
empresa. Entretanto, nos últimos tempos, a empresa passou a focar a atração de clientes
de outras provedoras de internet, tornando-se necessário construir aplicações web para
isso.
Entre as funções que você deverá desempenhar, podemos listar: detecção de problemas
em códigos-fonte da empresa e construção de novas páginas web.
Você, então, inicia o desenvolvimento de uma página web construindo o código HTML:
Código 1.1 | Página HTML para comercializar planos de internet
<!DOCTYPE html>
<html>
<head>
<title>Melhore sua conexão com nosso produto</title>
</head>
<body>
<h1>Melhore sua conexão com nosso produto</h1>
<p>Cansado de conexões lentas com a internet?</p>

<p>Você gostaria de fazer downloads em alta velocidade?</p>
<p>Conheça nosso revolucionário sistema de conexão à Internet via fibra ótica</p>
</body>
</html>
Fonte: elaborado pelo autor.
Em seguida, você testa essa página em um navegador do Google Chrome e obtém este
resultado:
Figura 1.1 | Visualização no Google Chrome
Fonte: captura de tela do Google Chrome elaborada pelo autor.
Entretanto, ao testá-la em outro navegador, você se depara com o seguinte problema:
Figura 1.2 | Visualização no Internet Explorer

Fonte: captura de tela do Internet Explorer elaborada pelo autor.
Como resolver esse problema?
Esse é o seu desafio: escrever o código para a resolução do problema e testá-lo. Para
isso, conte com o apoio do simulador a seguir:
Bons estudos!
conceito-chave
Os primeiros computadores, ainda nos primórdios do século XX, eram estrondosas

máquinas que ocupavam prédios inteiros, mas tinham um baixo poder de
processamento. Naquela época, eles eram usados, principalmente, nos grandes centros
de pesquisa e em bases militares para cálculos balísticos. Era o auge da Guerra Fria e os
militares precisavam de meios rápidos para a troca de informações entre bases militares;
surgiu, assim, a ARPANET, uma rede remota que interligava bases militares e permitia
a troca de informações entre computadores (LAMBERT et al., 2005). Mais tarde, as
grandes universidades americanas obtiveram permissão para acessar a rede de
computadores, que foi dividida em duas: (i) MILNET, rede de acesso exclusivo militar,
e (ii) internet, rede disponível publicamente (LAMBERT et al., 2005).
Com a evolução dos componentes eletrônicos, surgiu a possibilidade de comunicação

entre usuários comuns. Naquele tempo, vários protocolos foram implementados, como o
protocolo TCP/IP, que passou a permitir que dispositivos construídos por diferentes
fabricantes pudessem se conectar em uma linguagem universal. Entretanto, somente nos
anos 1990 a web se popularizou devido ao surgimento de um novo protocolo de
comunicação por meio de hipertextos, chamado HTTP (Hypertext Transfer Protocol)
(GOURLEY et al., 2002).
Assimile
O hipertexto é um tipo de documento que vai além de blocos de textos comuns,

agregando diversos outros componentes, como imagens, cores, sons, vídeos, entre
outros. As páginas de hipertexto podem ser interligadas a partir das chamadas
hiperligações, que são links que permitem que o usuário acesse determinado documento
com um único clique. Os links se diferem de textos simples por serem exibidos em uma
cor distinta, em geral, azul, além de serem sublinhados.
O protocolo HTTP foi criado por Tim Berners-Lee, professor do Massachusetts

Institute of Technology (MIT) e fundador do W3C (World Wide Web Consortium). O
protocolo HTTP permitiu o surgimento de uma nova forma de acessar conteúdo em
formato de hipertexto na chamada World Wide Web (WWW) ou rede mundial de
computadores. Por meio de navegadores de internet, um usuário conseguia acessar
páginas web armazenadas em computadores remotos.
Entretanto, por muitos anos, a internet ficou restrita a um público que tinha maiores
recursos financeiros, uma vez que computadores e até mesmo o acesso a linhas
telefônicas (necessárias para conexões com a internet) tinham alto custo. A
popularização da internet teve início nos anos 2000 com a melhoria da infraestrutura de
comunicação e componentes eletrônicos.
Nos últimos anos, houve um crescimento significativo na quantidade e variedade de

dispositivos eletrônicos conectados à internet, como laptops, smartphones, tablets,
relógios inteligentes e os tradicionais computadores de torres, conectados por redes de
comunicação disponíveis 24 horas. Além disso, devido ao fato de estarmos tão
conectados, grande parte das aplicações, de banco de dados e servidores migraram para
a “nuvem”, isto é, super computadores que armazenam informações, fornecem serviços
e podem ser localizados em qualquer ponto geográfico (Figura 1.3).
Figura 1.3 | A internet é formada por uma grande rede de dispositivos conectados
remotamente que engloba todo o mundo
Além disso, faz-se importante destacar que, com o advento da internet, a quantidade de
dispositivos e de aplicações online também contribuiu para o aumento da quantidade de
dados e informações enviadas para a nuvem para, em seguida, serem analisadas e
auxiliarem na tomada de decisão das empresas, demandando uma maior utilização da
internet.
Com a internet, os usuários puderam compartilhar informações por meio de locais

específicos, chamados de páginas da internet, documentos web, websites ou apenas
sites. As páginas da internet podem ser acessadas por meio de dois componentes
básicos:
 Um navegador de internet, também conhecido como browser (Figura 1.4). São

exemplos de navegadores: Chrome, Firefox, Opera, Edge e Safari.
 Um endereço URL (uniform resource locator ou, na tradução, “localizador
uniforme de recursos”).
Figura 1.4 | Estrutura de um navegador (browser)
Browser é um programa de computador que recebe um endereço de URL, realiza uma

requisição a um servidor remoto (também pode ser usado para visualizar arquivos
locais), obtém os arquivos codificados em uma linguagem de marcação, interpreta-os e
formata o documento que ser�� exibido para o usuário. Em geral, navegadores são
utilizados para acessar documentos de hipertexto (e veremos mais sobre isso na próxima
seção).
Exemplificando
As URLs não estão presentes apenas em navegadores; elas podem ser usadas como
sistemas de navegação em redes para acesso de recursos e dispositivos. Observe, a
seguir, uma ilustração de como funciona uma URL:
protocolo://domínio:porta/caminho/recurso?busca#identificador
 O protocolo indica o método de acesso, como HTTP (protocolo de transferência

de hipertexto), HTTPS (transferência criptografada de hipertexto), FTP
(protocolo de transferência de arquivos) e outros.
 O domínio indica o endereço em que se encontra o recurso.
 A porta filtra o acesso a um dispositivo alvo. Por exemplo: o protocolo HTTP
usa a porta 80 e o HTTPS a 443.
 O caminho indica a localização de pastas e diretórios em que se encontra algum
recurso (ou arquivo) desejado.
 A busca e o identificador são atributos opcionais que permitem o envio de
informações ao documento acessado e o acesso a posições específicas,
respectivamente.
Entretanto, ao acessar um site, nem todas essas características precisam ser informadas.
Observe o exemplo a seguir:
https://biblioteca-virtual.com/uk
Nesse exemplo, podemos observar que o protocolo utilizado é o HTTPS, ou seja, o

recurso acessado corresponde a um documento de hipertexto que foi acessado em uma
conexão segura.
Para acessar um site, informar o protocolo não é obrigatório. Observe o domínio

acessado: biblioteca-virtual.com. Veja que a porta não é informada; o navegador
entende que, ao acessar o protocolo HTTPS, a porta de acesso ao servidor é a 443. Por
fim, o endereço informado apresenta o caminho uk, e isso indica que os arquivos
daquele site estão disponíveis em um diretório denominado uk.
Como um site funciona?
Um site pode ser considerado um documento de hipertexto que pode ser acessado a
partir de um navegador. Para que um site seja acessado por um cliente (e/ou um
usuário), ele deve estar disponibilizado em um computador que fique, o tempo todo,
conectado à internet, a fim de permitir que outros dispositivos o acessem. A esse
computador remoto dá-se o nome de servidor web (Figura 1.5). Um servidor é um
dispositivo que fornece algum serviço. No caso do servidor web, esse computador
fornece o serviço de hospedagem de documentos web.
Figura 1.5 | Usuário acessando um site hospedado em um servidor remoto

Na teoria, seria possível hospedar um site em seu próprio computador apenas instalando
um software servidor web e adquirindo um domínio e um endereço de IP fixo.
Entretanto, a configuração desses sistemas é um pouco complexa e, a depender da
quantidade de acessos ao site, pode tornar o uso de seu computador inviável. Em geral,
para se colocar um site no ar, é preciso adquirir um domínio e alugar um servidor de
hospedagem.
Exemplificando
No Brasil, o departamento responsável pelo registro e pela manutenção de nomes de

domínios com terminação “.br” é o Registro.br. Em geral, a aquisição de um domínio é
cobrada anualmente e deve ser renovada enquanto o desenvolvedor desejar manter o
nome de domínio.
Entretanto, antes de se adquirir um domínio, é preciso conhecer os conceitos que

envolvem o desenvolvimento de um site.
Reflita
Antigamente, os endereços de site eram precedidos pela combinação de letras www (um
acrônimo para world wide web ou, na tradução, “rede mundial de computadores”),
como: www.google.com.br. Nos dias de hoje, esse mesmo site pode ser acessado sem o
www: google.com.br. Reflita sobre os motivos disso.
Desenvolvimento web
O desenvolvimento web constitui na construção de documentos que podem ser

acessados a partir de websites. Na prática, o desenvolvimento web utiliza linguagens
próprias para a construção de documentos: linguagens de marcação de hipertexto, de
estilo e até mesmo de programação para construção de páginas web dinâmicas. Em
geral, as linguagens de desenvolvimento web podem ser classificadas como linguagens
back-end e linguagens front-end.
Linguagens back-end são aquelas que são executadas diretamente no servidor. Elas
podem ser utilizadas, por exemplo, para gerar uma página dinâmica que será enviada ao
browser. São exemplos de linguagem back-end: PHP (PHP: Hypertext Preprocessor) e
ASP (Active Server Pages). Já as linguagens front-end são aquelas executadas
diretamente no navegador do cliente, como, JavaScript, CSS (Cascading Style Sheets) e
HTML (HyperText Markup Language). A Figura 1.6 ilustra algumas das principais
linguagens de desenvolvimento web.
Figura 1.6 | Linguagens de desenvolvimento web
No desenvolvimento de uma página web, a primeira linguagem que se deve
compreender é o HTML.
HyperText Markup Language (HTML)
HTML é um acrônimo para HyperText Markup Language ou, na tradução, “linguagem

de marcação de hipertexto”. O HTML fornece conjuntos de códigos que permitem a
estruturação de uma página de internet que os navegadores conseguem interpretar e
exibir o documento formatado de forma compreensiva ao usuário.
Versionamento da linguagem HTML e suas diferenças
A linguagem HTML foi oficialmente proposta no início dos anos 1990 pelo cientista da
computação Tim Berners-Lee, enquanto trabalhava no CERN (Conseil Européen pour
la Recherche Nucléaire – Conselho Europeu de Pesquisa Nuclear). Tim Berners-Lee se
inspirou na linguagem SGML (Standard Generalized Markup Language) e ainda foi
idealizador do conceito WWW (World Wide Web).
Inicialmente, o HTML foi construído para facilitar a comunicação entre colaboradores

do CERN, entretanto, sua popularidade cresceu tanto que, em 1991, foi disponibilizado
para o público.
Figura 1.7 | Linha do tempo da linguagem HTML
Fonte: elaborada pelo autor.
Em 1995, a versão 2.0 do HTML foi publicada por Berners-Lee e um grupo de

desenvolvedores. O HTML 2.0 surgiu como um esforço para se criar uma especificação
que permitisse interoperabilidade entre diversas implementações do HTML.
Nos anos seguintes, o HTML passou a ser uma recomendação oficial do W3C (World
Wide Web Consortium), logo, iniciaram o desenvolvimento da terceira versão do
HTML. Entretanto, a nova versão trouxe tantas diferenças em relação ao HTML 2.0 que
tiveram problemas na implantação da proposta. Diante disso, os desenvolvedores
decidiram abandonar a versão 3.0 e iniciar o desenvolvimento de uma nova versão,
denominada HTML 3.2, oficialmente lançada em 1997.
O HTML 3.2 trouxe uma série de novos recursos, como a possibilidade de inserção de
tabelas e de texto ao redor de imagens.
Em dezembro de 1999, o W3C propôs oficialmente a versão HTML 4.01. Essa versão
trouxe novos recursos com suporte a frames e tornou obsoletas algumas tags das versões
anteriores do HTML. A quarta versão do HTML trazia recursos considerados
revolucionários na época, como suporte a linguagens de scripts e a folhas de estilo em
cascata. Nos anos seguintes, a W3C ainda propôs uma integração entre HTML e XML
(eXtensible Markup Language), que ficou conhecida como XHTML (eXtensible
Hypertext Markup Language), visando à construção de documentos que fossem XMLs
válidos.
A versão HTML5 veio apenas em 2014, trazendo uma série de novos recursos que
visavam, principalmente, à simplificação da sintaxe da linguagem. HTML5 trouxe
suporte a inserções de áudio e vídeo diretamente no HTML, além de suporte a imagens
vetoriais, como o formato SVG (Scalable Vector Graphics).
Elementos básicos
HTML é fundamentado no conceito das chamadas tags (marcações), que são códigos
especiais inseridos entre parênteses angulares, ou seja, os sinais de < (menor que) e >
(maior que). As tags podem ser do tipo simples ou composto (MARIANO; DE MELO-
MINARDI, 2017).
 Tag simples:
<exemplo-de-tag-simples>
 Tag composta:
<exemplo-de-tag-composta>Conteúdo</exemplo-de-tag-composta>
As tags compostas são constituídas de uma declaração de abertura, do conteúdo que se

deseja inserir e, por fim, de uma declaração de fechamento </exemplo-de-tag-
composta>, que se distingue da declaração de abertura apenas pela barra inserida antes
do nome da tag. Por outro lado, as tags simples não requerem uma declaração de
fechamento.
As tags podem ser personalizadas a partir da inserção de atributos, que recebem valores,
geralmente, declarados entre aspas, da seguinte forma:
<tag atributo="valor">
Pode-se, ainda, inserir uma tag dentro de outra tag. Nesse caso, a tag no interior é
denominada como tag filha. Observe:
<tag_pai>
<tag_filha_1>
<tag_filha_2>
<tag_filha_simples>
</tag_pai>
Neste caso, a tag pai possui três tags filhas. A menos que especificado, as tags filhas
herdam regras de formatação aplicadas à tag pai. Não há limites na quantidade de tags
embutidas em outras tags:
Código 1.2 | Tags embutidas em outras
<tag1>
<tag2>
<tag3>
<tag4>
<tag5>
<tag_n></tag_n>
</tag5>
</tag4>
</tag3>
</tag2>
</tag1>
Em geral, costuma-se inserir tabulações (tab) para indicar que uma tag está contida
dentro de outra. Isso é denominado indentação, e indentar o código não é obrigatório
em HTML, entretanto, um código bem indentado facilita a leitura e, portanto, constitui
em uma boa prática de desenvolvimento de códigos.
Páginas HTML devem ser salvas com a terminação “.html”. Em geral, denominamos a
primeira página com o nome “index.html” (na tradução para o português: “índice”).
Exemplificando
Documentos web podem ser construídos utilizando-se simples editores de texto, como o
Bloco de Notas (Windows) ou o Gedit (Linux). Há desenvolvedores que preferem
utilizar editores de terminal de linha de comando, como vi ou nano. Há, ainda, editores
com recursos personalizados para desenvolvimento de códigos, como a indicação de
linhas e o syntax highlight, que é quando o editor colore palavras e blocos de código de
acordo com a função delimitada pela linguagem utilizada. Como exemplo desses
editores, podemos citar o Notepad++, o Visual Studio Code e o Sublime Text (Figura
1.8).
A escolha do editor depende da escolha pessoal de desenvolvedor.
Figura 1.8 | Exemplo de página construída usando Sublime Text
Fonte: captura de tela do Sublime Text elaborada pelo autor.
“Olá, mundo!”: criando sua primeira página HTML
Agora que você foi introduzido aos conceitos básicos do HTML, vamos começar a criar
nossa primeira página de internet.
Código 1.3 | Minha primeira página
<!DOCTYPE html>
<html>
<head>
<title>Minha primeira página</title>
<meta charset="utf-8">
</head>
<body>
<p>Olá mundo!</p>
</body>
</html>
Teste a sua primeira página utilizando o Trinket e observe a saída do código a seguir:
Você pode, também, copiar o código em um bloco de notas, salvá-lo como “index.html”
e abri-lo em um navegador. Você verá a seguinte página (Figura 1.9):
Figura 1.9 | Meu primeiro documento web exibido no navegador Chrome
Fonte: captura de tela do navegador Chrome elaborada pelo autor.
Agora, vamos analisar o que é realizado para cada linha de código:
1. <!DOCTYPE html>
Na primeira linha, vemos a declaração do tipo de documento; isso informa ao navegador

que o documento em questão se trata de uma página web que usa HTML. Essa
declaração indica, ainda, que se trata de uma página que usa HTML5. Outras versões do
HTML utilizam declarações diferentes. A declaração do HTML 4.01 é feita da seguinte
forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
A tag <html> aparece a seguir. Todo o conteúdo da página HTML deve ser inserido
dentro dessa tag, por isso, ela é fechada apenas na última linha.
2. <html>
A tag <head> deve conter informações do cabeçalho da página, indicando seus itens de

configuração. Os conteúdos inseridos aqui não são exibidos no corpo da página.
3. <head>
A tag <title> permite a configuração do título que aparecerá no navegador (Figura

1.10).
4. <title>Minha primeira página</title>
Figura 1.10 | Título
Fonte: captura de tela do navegador Chrome elaborada pelo autor.
A tag <meta> permite a inserção de metadados na página (SILVA, 2018). Neste

exemplo, a tag meta recebe o atributo charset, que, por sua vez, recebe o valor utf-8 (8-
bit Unicode Transformation Format). Esse atributo altera a codificação de caracteres na
página e permite que seu site tenha palavras com acento.
5. <meta charset="utf-8">
Assimile
A tag meta é inserida dentro da tag <head>; ela tem múltiplos propósitos e
funcionalidades, em geral, relacionados a metadados da página. Observe algumas
variações dessa tag:
 meta name: recebe os metadados do documento na forma de pares nome/valor.

Exemplo:
<meta name="description"> content="Descrição do Site">
<meta name="keywords"> content="Palavras-chave do site">
<meta name="author"> content="Nome do autor do site">
 meta http-equiv=refresh: atualiza a página após um determinado número de

segundos.
<meta http-equiv="refresh"> content="30">
 meta charset: declaração de codificação de caracteres do documento. Exemplo:

<meta charset="UTF-8">
A tag <head> é fechada na linha 6; em seguida, a tag <body> é aberta. Essa tag permite
a inserção do conteúdo que será exibido no corpo da página.
6. </head>
7. <body>
A tag <p> indica a inserção de parágrafos.
8. <p>Olá mundo!</p>
Por fim, as tags <body> e <html> são fechadas. Todas as tags compostas devem ser
fechadas.
9. </body>
10. </html>
Parágrafo e títulos
No exemplo descrito anteriormente, conhecemos algumas tags usadas para inserção de

textos, como a tag <p>. Agora, observe a Figura 1.11 a seguir:
Figura 1.11 | Estrutura de uma página e tags de texto
Nessa figura, vemos a estrutura de uma página, além de tags utilizadas para inserção de
parágrafos e títulos. A principal diferença entre elas está no tamanho da fonte. Títulos
podem ser inseridos por meio das tags <h1> a <h6>, sendo <h1> a maior e <h6> a
menor (Quadro 1.1).
Quadro 1.1 | Tags relacionadas a títulos
Tag Tamanho
<h1></h1>
Título
<h2></h2>
Título
<h3></h3> Título
<h4></h4> Título
<h5></h5> Título
<h6></h6> Título
<p></p> Parágrafo
Agora que você aprendeu os fundamentos do HTML, vamos fixar os conhecimentos

sobre essa linguagem e iniciar o desenvolvimento de uma página web. Mãos à obra!
Pesquise mais
Confira, a seguir, algumas recomendações de conteúdo complementar que podem

auxiliar nos seus estudos:
 Recomendações de artigos:
o MARIANO, D. Fundamentos do HTML. Diegomariano, 12 ago. 2020a.
o MARIANO, D. Introdução ao HTML. Diegomariano, 13 ago. 2020b.
 • Dicas de videoaulas:
o O QUE é um Website? [S.l.: s.n.], 2020. 1 vídeo (5:28 min.). Publicado
pelo canal Diego Mariano.
o COMO a internet funciona? [S.l.: s.n.], 2020. 1 vídeo (6:56 min.).
Publicado pelo canal Diego Mariano.
Referências
COMO a internet funciona? [S.l.: s.n.], 2020. 1 vídeo (6:56 min.). Publicado pelo canal
Diego Mariano. Disponível em: https://bit.ly/2My70qd. Acesso em: 19 out. 2020.
GOURLEY, D. et al. HTTP: the definitive guide. [S.l.]: O’Reilly Media, 2002.
LAMBERT, L. et al. The Internet: a historical encyclopedia. [S.l.]: ABC-CLIO, 2005.

MARIANO, D.; DE MELO-MINARDI, R. Introdução à programação web para
bioinformática: HTML, CSS, PHP & JavaScript. Belo Horizonte: [s.n.], 2017.
MARIANO, D. Fundamentos do HTML. Diegomariano, 12 ago. 2020a. Disponível

em: https://bit.ly/3azuSld. Acesso em: 19 out. 2020.
MARIANO, D. Introdução ao HTML. Diegomariano, 13 ago. 2020b. Disponível

em: https://bit.ly/3cOmBMS. Acesso em: 19 out. 2020.
O QUE é um Website? [S.l.: s.n.], 2020. 1 vídeo (5:28 min.). Publicado pelo canal
Diego Mariano. Disponível em: https://bit.ly/3rraz0j. Acesso em: 19 out. 2020.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec Editora, 2018.

FOCO NO MERCADO DE TRABALHO
INTRODUÇÃO À PROGRAMAÇÃO
WEB
Como garantir que os navegadores reconheçam acentos e cedilha?
Chegou o momento de você aplicar os seus conhecimentos sobre a linguagem HTML.
sem medo de errar
No início da seção, você foi desafiado a solucionar este problema ocasionado pelo
Código 1.1: no Internet Explorer os acentos e cedilha foram trocados por outros
caracteres, dificultando a leitura do texto proposto.
A solução para isso seria declarar a codificação usada:
Código 1.4 | Página HTML para comercializar planos de internet
<!DOCTYPE html>
<html>
<head>
<title>Melhore sua conexão com nosso produto</title>
</head>
<body>
<h1>Melhore sua conexão com nosso produto</h1>
<p>Cansado de conexões lentas com a internet?</p>

<p>Você gostaria de fazer downloads em alta velocidade?</p>
<p>Conheça nosso revolucionário sistema de conexão à Internet via fibra ótica</p>
</body>
</html>
O resultado seria este:
Figura 1.12 | UTF-8 permite o uso de acentos
Fonte: captura de tela do Internet Explorer elaborada pelo autor.
A codificação UTF-8 permite a inserção de caracteres como acentos e cedilha. Alguns

navegadores conseguem identificar automaticamente a codificação usada, mas outros
não, portanto, é recomendado, sempre, a inserção do código <meta charset="utf-8">.
NÃO PODE FALTAR
DESENVOLVIMENTO COM HTML5

Como estruturar conteúdos e formatar textos no HTML5?
Agora, você conhecerá as tags utilizadas para executar essas tarefas.
Olá! Nesta seção, você conhecerá algumas tags utilizadas para se determinar a estrutura
de páginas HTML. Tags estruturais agem como containers que delimitam o
posicionamento de elementos em páginas. A partir delas, é possível determinar a forma
e o posicionamento de cada elemento em um documento web.
A tag estrutural mais utilizada é a div. Essa tag cria um container que permite a
aplicação de propriedades de estilo a todas as outras tags posicionadas dentro do bloco.
Entretanto, HTML5 trouxe uma série de novas tags que adicionam semântica à estrutura
das páginas, apesar de, na prática, possuírem a mesma funcionalidade que a tag div. São
exemplos dessas tags estruturais HTML: section, header, footer, nav, article e aside.
Além disso, você conhecerá novas tags para aprimorar a tipografia de seus websites
usando elementos inline, como adicionar textos em negrito, itálico e sublinhado. Você
aprenderá, ainda, a criar listas ordenadas e não ordenadas, a inserir links que conectam
sua página a outros endereços, a criar iframes que adicionam conteúdo externo a sua
página e a adicionar mídias, como imagens, áudios e vídeos, usando HTML5.
Por fim, você será introduzido ao conceito de design responsivo. Responsividade é um

conceito recente, que prevê que páginas se comportem de maneira distinta, a depender
do dispositivo utilizado para acesso. Por exemplo, um mesmo site responsivo acessado
por um smartphone, um tablet e um notebook deverá apresentar três distintas interfaces,
de forma que facilitem a interação dos usuários. Mas não se preocupe com a
implementação disso agora. O importante é que você compreenda os conceitos
envolvidos. A responsividade depende de componentes relacionados a folhas de estilo
(que veremos nas próximas seções).
Nesta seção, você será apresentado a uma série de novas tags HTML, por isso, é
importante que pratique o que aprender. Reproduza os exemplos apresentados em seu
computador e verifique a execução em diferentes navegadores.
Agora, imagine que você acaba de ser contratado para realizar um estágio em uma
empresa que vende planos de internet. Em seu primeiro dia de trabalho, seu chefe lhe
apresentou as funções que desempenhará. Uma delas envolve prestar manutenção no
código-fonte do site de vendas da empresa.
A página de vendas possui, atualmente, um problema relacionado à configuração do

leiaute. Um estagiário que também trabalha na empresa era o responsável pela página,
entretanto, por algum descuido, enquanto alterava o código-fonte para alteração de
preços do site, acabou desconfigurando a estrutura da página.
Veja como a página se encontra atualmente:
Figura 1.13 | Estrutura da página

Infelizmente, o estagiário teve que se ausentar do trabalho hoje. A cada segundo que a
página fica desconfigurada, a empresa perde possíveis vendas. Então, cabe a você
corrigir o problema.
Para isso, você deve, inicialmente, observar o código-fonte:
Código 1.5 | Código-fonte
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">R$0<small class="text-muted"/ mês</small></h1>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Versão

gratuita</button>
</div>
</div>
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<button type="button" class="btn btn-lg btn-block btn-primary">Comprar Versão

PRO</button>
</div>
</div>
div class="card mb-4 shadow-sm">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
</div>

<button type="button" class="btn btn-lg btn-block btn-primary">Versão para
empresas</button>
</div>
</div>
</div>
Supondo que você não tenha conhecimento das folhas de estilo utilizadas e faça
alterações apenas nos códigos HTML, descreva os passos para a resolução do problema.
Pronto para mergulhar a fundo no mundo do desenvolvimento web com HTML5?
Então, vamos lá!
conceito-chave
Para desenvolver websites usando HTML, é importante conhecer as tags de marcação

disponíveis. Entretanto, HTML possui um total de mais de 100 elementos de tags
definidos na especificação (SILVA, 2018). É claro que não é necessário decorar todas
as tags, porém é importante conhecer algumas das principais.
Anteriormente, foram apresentadas as tags de definição do documento (html, head,

body), as tags do cabeçalho do documento (title e meta) e as tags relacionadas à
inserção de parágrafos (p) e títulos (h1 a h6). Outras tags importantes são as tags
estruturais, que são utilizadas para organizar a estrutura de uma página, uma vez que, ao
se construir um website, é preciso que determinados elementos fiquem acoplados em
posições específicas. A Figura 1.14 ilustra um exemplo de estrutura de uma página web.
Observe as divisões e os posicionamentos enumerados na página.
Figura 1.14 | Exemplo de organização em um site. Há três seções visualmente identificáveis:

(1) artigo principal; (2) quatro blocos de artigos secundários (abaixo do principal); e (3) bloco
lateral esquerdo com uma lista de textos secundários
A princípio, pode ser difícil perceber, mas cada bloco de conteúdo da página está
organizado em blocos de códigos (containers) cercados por uma tag HTML, conforme
pode ser visto na Figura 1.14. Esses blocos, por sua vez, estão organizados dentro de
outros blocos, de forma a construir uma estrutura física para o conteúdo da página. Cada
um desses containers, embora não apareça no exemplo, pode ser visualizado se se
aplicar os códigos de estilo). Geralmente, o espaço ocupado pelo conteúdo é delimitado
de maneira quadrangular. Observe, na Figura 1.15, as possíveis posições das tags
estruturais. Perceba que as seções 1 e 2 (Artigos) fazem parte de um container maior
localizado ao lado da seção 3 (News).
Figura 1.15 | Delimitação da posição de containers usados na organização de um site

Observe, na Figura 1.15, a primeira linha pontilhada (primeiro container), que delimita
todo o conteúdo da página. Dentro desse container, temos dois outros containers, que
dividem a página em uma seção principal (tópicos 1 e 2, à esquerda) e um menu
secundário (tópico 3, à direita). Os textos em News (tópico 3) foram inseridos
linearmente, logo, não é necessário adicionar tags estruturais para cada um deles. Por
padrão, HTML insere novos elementos abaixo de outros elementos.
A Figura 1.15, na caixa à esquerda, apresenta a seção Artigos, em que novas divisórias
foram inseridas (representadas pelos retângulos azuis). A primeira delas foi dividida em
duas partes. A seguir, um novo bloco foi dividido em quatro containers, que, por sua
vez, são divididos em duas partes (imagem/texto). Nesse caso, foi aplicada uma
propriedade para que os quatro containers que representam artigos sejam alocados lado
a lado, sendo cada um adicionado em seu próprio container.
Cada um desses containers possui uma tag composta, que deve ser corretamente
posicionada dentro ou ao lado de outras tags. Caso uma dessas tags compostas não seja
corretamente fechada, a estrutura da página pode ser corrompida, causando danos no
leiaute do site, como o problema apresentado na Figura 1.16.
Figura 1.16 | Estrutura da página corrompida devido a uma tag não fechada
Nesse caso, apenas uma tag em um dos containers não foi fechada, desconfigurando
completamente a estrutura da página. Esse é considerado um dos erros mais comuns em
desenvolvimento web e, mesmo assim, ainda pode ser um erro difícil de solucionar, isso
porque, em páginas muito grandes, uma tag incorretamente fechada pode ser difícil de
ser detectada. Por isso, é sempre importante indentar corretamente o seu código.
Exemplificando
O código a seguir apresenta um erro que corrompe a estrutura da página. Você

conseguiria dizer onde está o erro?
Código 1.6 | Código com erro
<!DOCTYPE html><html><head><title>Importância da
indentação</title></head><body><div><p>DIV 1</p><div><p>DIV 2</p><div><p>DIV
3</p><div><p>DIV 4</p></div></div></div></body></html>
Provavelmente não, pois o código não está corretamente indentado.
Agora, vamos apresentar esse mesmo código indentado. Observe, a seguir, como os
blocos de tags compostas estão organizados. A maioria dos editores de código inclui
marcadores e linhas que delimitam as declarações de abertura e fechamento de tags,
logo, observe que o erro pode ser facilmente encontrado: há uma tag não fechada na
linha 19.
Código 1.7 | Código indentado
<!DOCTYPE html>
<html>
| <head>
| | <title>Importância da indentação</title>
| </head>
| <body>
| | <div>
| | | <p>DIV 1</p>
| | | <div>
| | | | <p>DIV 2</p>
| | | | <div>
| | | | | <p>DIV 3</p>
| | | | | <div>
| | | | | | <p>DIV 4</p>
| | | | | </div>
| | | | </div>
| | | </div>
||
| </body>
</html>
Fonte: elaborado pelo ator.
Novidades do HTML5
Em versões anteriores do HTML, em geral, utiliza-se a tag <div> para construção de

containers genéricos. HTML5 trouxe uma série de tags específicas para cada seção da
página, como <article> para inserção de artigos, <header> para o cabeçalho, <nav> para
o menu de navegação, entre outras (Quadro 1.2).
Quadro 1.2 | Tags estruturais do HTML5
<TAG> Definição HTML4 HTML5
<div class="article"> <article>

article Artigo
</div> </article>
<div class="aside"> <aside>

aside Conteúdo lateral
</div> </aside>
div Container genérico <div></div> <div></div>
<div class="footer"> <footer>

footer Rodapé (parte inferior da página)
</div> </footer>
<div class="header"> <header>

header Cabeçalho exibido na página
</div> </header>
<div class="menu"> <menu>

menu Permite a inserção de itens
</div> </menu>
<div class="nav"> <nav>

nav Grupo de links de navegação
</div> </nav>
<div class="section"> <section>

section Bloco reservado para representar seções
</div> </section>
span Bloco de texto <span></span> <span></span>

Fonte: adaptado de Mariano (2020); W3C (2012).
Na prática, as tags estruturais em HTML têm funcionalidade idêntica; o que as

diferencia é o contexto em que são aplicadas. Por exemplo: a tag <article> foi
construída para armazenar conteúdos de artigos, entretanto, nada impede o
desenvolvedor de usar uma tag <div> com o mesmo propósito. HTML5 ainda permite o
uso da tag <div>, que é utilizada na maioria dos casos pelos desenvolvedores mais
antigos.
Exemplificando
Observe como a figura anterior seria estruturada em um documento HTML (preste

atenção nos níveis de indentação):
Código 1.8 | Estruturação em documento HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<nav></nav>
</header>
<div>
<article>
<section></section>
</article>
<aside></aside>
</div>
<footer></footer>
</body>
</html>
Entretanto, ao implementar esse código, você não verá nada no navegador, uma vez que
tags estruturais apenas delimitam o posicionamento em que os itens serão inseridos.
Você poderá visualizá-los quando implementar regras de estilo com CSS.
A Figura 1.17 ilustra um exemplo de implementação dessas tags para se estruturar uma
página HTML.
Figura 1.17 | Exemplo de uso de tags estruturais em uma página HTML
Fonte: Mariano; de Melo-Minardi (2017, p. 93).
Nesse exemplo, vemos que a tag <header> é usada para delimitar a região do cabeçalho
da página (não confunda com o cabeçalho do documento, que apenas mantém os
metadados da página e, portanto, não é exibido). Dentro da tag <header> está a tag
<nav>, utilizada para armazenar menus de navegação. Observe que poderia ser utilizada
a tag <menu>, a depender do contexto, ou, ainda, inverter a ordem em que
<header> e <nav> estão descritas.
A seguir, uma <div> delimitará todo o conteúdo central de uma página (Quadro 1.2).
Em geral, essa seção é utilizada para carregar elementos dinâmicos (i.e., elementos que
serão alterados em diferentes páginas). Esse container, então, é dividido em duas
colunas: (1) <article>, região em que será adicionado o texto e que ocupa a maior parte
do espaço da div; e (2) <aside>, que receberá menus laterais e, portanto, possui uma
largura menor. Dentro de <article>, pode-se inserir tags do tipo <section>, a fim de se
categorizar o conteúdo e facilitar a navegação em páginas muito grandes; por fim, o
<footer>, também conhecido como rodapé, recebe informações complementares, que,
em geral, são repetidas em todas as páginas.
Reflita
Em versões anteriores ao HTML 4, desenvolvedores costumavam utilizar tabelas para

organizar a estrutura da página; hoje em dia, essa prática foi completamente abandonada
devido à criação de tags específicas para diversas seções de documentos web.
Você consegue imaginar os motivos que levaram à criação de tags específicas para a
estruturação de uma página?
Formatação avançada de texto e outros elementos inline
Vimos, anteriormente, que a tag <p> permite a inserção de simples estruturas de

parágrafos, enquanto as tags <h1> a <h6> permitem a inserção de títulos. Entretanto, a
escrita de textos requer uma gama maior de funcionalidades, como adição de trechos em
destaque: uso de negrito, itálico e sublinhado (Quadro 1.3).
Quadro 1.3 | Formatação avançada de texto e outros elementos HTML5
Modificado no
<TAG> Definição
HTML5
b Texto em negrito x
br Quebra de linha
h1, h2, h3, h4, h5,

Título
h6
hr Linha horizontal x
i Itálico (atribui importância ao item) x
li Item da lista
ol Lista ordenada
p Parágrafo
pre Texto pré-formatado
span Container para texto
strong Grande importância (negrito)
style Permite alterar o estilo
Texto deslocado com estilo convencional com um

u x
sublinhado
ul Lista não ordenada
Crie um arquivo HTML contendo o código a seguir:
Código 1.9 | Código para criação de arquivo HTML
<!DOCTYPE html>
<html>
| <head><meta charset="UTF-8"></head>
| <body>
| | <h1>Título</h1>
| | <p>Linha horizontal abaixo</p>
| | <hr>
| | <span>
| | | <b>Negrito</b>
| | | <strong>Ênfase forte</strong>
| | | <i>Itálico</i>
| | | <em>Ênfase fraco</em>
| | | <u>Sublinhado</u>
| | </span>
| </body>
</html>
Fonte: elaborado pelo ator.
Teste esse código no simulador:
A seguir, abra o arquivo em um navegador; assim, você terá a página da Figura 1.18.
Figura 1.18 | Estilos de texto

Fonte: captura de tela do index.html elaborada pelo autor.
Observe que a tag <span> não insere qualquer informação perceptível na página (linha

8 do código acima). Trata-se de uma tag container usada, preferencialmente, para
delimitar textos. Em geral, HTML insere novos elementos, um abaixo do outro,
entretanto, todas as tags inseridas dentro de <span> são adicionadas na mesma linha.
Por esse motivo, são denominadas tags inline.
Perceba que as tags <b> e <strong> têm o mesmo efeito no texto: a inserção de negrito
(linhas 9-10); da mesma forma, <i> e <em> alteram o texto para itálico (linhas 11-12).
Apesar de terem efeitos práticos similares, o motivo de uso dessas tags deve estar
relacionado ao contexto empregado. Em geral, <strong> e <em> são indicados para
inserção de ênfase, enquanto <b> e <i> são as tags tradicionais usadas para
configuração de negrito e itálico.
Outro recurso textual do HTML é o que corresponde à inserção de listas, que podem ser
ordenadas (ol) ou não ordenadas (ul). Observe a implementação de listas a seguir:
Código 1.10 | Inserção de listas
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"</head>
<body>
<h1>Lista</h1>
<h2>Lista não ordenada</h2>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<h2>Lista ordenada</h2>
<ol>
<li>Item</li>
<li>Item</li>
</ol>
</body>
</html>
Teste em seu navegador ou utilize o Trinket para visualizar a saída das listas (Figura
1.19).
Figura 1.19 | Listas em HTML
Ambos os tipos de lista têm o mesmo método para inserção de itens: a tag <li>. Observe
que a lista não ordenada insere apenas um ponto (bullet) antes do item, já a lista
ordenada insere um numeral.
A tag <pre> é utilizada para representar um texto pré-formatado. Observe, a seguir, a

comparação de um texto inserido com a tag <p> e um texto inserido com a tag <pre>.
A Figura 1.20 ilustra os exemplos de saída utilizando as tags <p>Texto
normal</p><pre>Texto pre</pre>.
Figura 1.20 | Comparação de tags: <p>Texto normal</p><pre>Texto pre</pre>
Uma outra tag que vale a pena mencionar é <style>. Essa tag permite alterar os estilos
da página, que serão abordados com maior intensidade quando falarmos sobre folhas de
estilo em cascata (CSS). Entretanto, aqui, apresentaremos um breve uso dessa tag sem
entrar em detalhes.
O código a seguir reproduz a Figura 1.20 com a cor de fundo vermelha. Essa
configuração foi feita usando-se a propriedade CSS backgroung-color com o valor
red (vermelho em inglês) aplicada à tag body.
Código 1.11 | Reprodução da Figura 1.20 com fundo vermelho
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"</head>
<body>
<p>Texto normal</p>
<pre>Texto pre</pre>
<style>
body{
background-color: red;
}
</style>
</body>
</html>
Teste o código utilizando a ferramenta Trinket. Você pode alterar a cor de fundo
(background) do corpo da página (body) (Figura 1.21).
Figura 1.21 | Fundo (background) do corpo da página (body) na cor vermelha (red)
A tag <style> permite a inserção de códigos CSS diretamente no código fonte HTML,

no entanto, o seu uso não é muito recomendado, uma vez que o ideal é separar os
códigos de estilo em arquivos diferentes. (Detalhes sobre os códigos apresentados
dentro de <style> serão apresentados em outra oportunidade.)
Links em HTML
A tag <a> é um elemento do tipo inline que permite a inserção de links para outras
páginas (SILVA, 2018). Por padrão, o texto em um link é exibido sublinhado e na cor
azul, entretanto, essas configurações podem ser alteradas usando-se folhas de estilos.
Um link recebe, no atributo href, o endereço ao qual será direcionado. Além disso, links
podem ser absolutos ou relativos. Os links absolutos informam o endereço completo do
item a ser acessado. Observe um exemplo de link absoluto:
<a href="https://google.com.br">Link</a>
Os links relativos devem levar em consideração a posição do arquivo que se deseja
acessar. Por exemplo: se o arquivo que deseja está na “public/views”, você deve acessá-
lo desta forma (Figura 1.22):
Figura 1.22 | Criando um link para uma página secundária usando Sublime Text
Fonte: captura de tela do Sublime Text elaborada pelo autor.
Caso queira criar um link desse outro arquivo, indique que o arquivo se encontra duas
pastas antes. Para isso, use a seguinte estrutura:
<a href="../../index.html">Link</a>
Sendo que cada “..” indica que está retornando a uma pasta anterior.
Para abrir o link em uma nova página, use o atributo target="_blank":
<a href="../../index.html" target="_blank">Link</a>
Atenção
Não confunda a tag <a> com a tag <link>!
A tag <a> cria ligações para outros locais, enquanto a tag <link> cria uma ligação entre
o documento atual e um conteúdo externo, como quando queremos adicionar um
arquivo CSS a nossa página.
Imagens, áudios e vídeos
Imagens podem ser inseridas em HTML usando-se a tag <img>. Essa tag recebe o
atributo src, que receberá o endereço completo da imagem. Nesse caso, as regras
utilizadas para se definir o endereço são as mesmas usadas para se inserir links <a>.
Observe o uso da tag <img>:
<img src="endereco_da_imagem.extensao">
Exemplificando
Exemplo simples: imagem no mesmo diretório

No exemplo a seguir, adicionaremos uma imagem denominada “tag.png” a uma página
HTML (Figura 1.23).
Figura 1.23 | Imagem utilizada
Fonte: captura de tela elaborada pelo autor.
Antes de inserir a imagem, é importante atentar-se à extensão da imagem utilizada.

Neste caso, é usada uma imagem no formato PNG (Portable Network Graphics).
Se estiver usando Windows e seu sistema não estiver apresentando a extensão do

arquivo, clique em “Exibir” e marque a opção “Extensões e nomes de arquivos” (Figura
1.24).
Figura 1.24 | Exibindo extensões de arquivos
Fonte: captura de tela da pasta site elaborada pelo autor.
Agora vamos inserir a imagem usando a tag <img>:
Código 1.12 | Inserindo a imagem

<!DOCTYPE html>
<html>
<head>
<title>img</title>
</head>
<body>
<img src="tag.png">
</body>
</html>
Ao abrir esse arquivo no navegador, você verá a seguinte página (Figura 1.25):
Figura 1.25 | Página web com a imagem
Podemos, ainda, incluir imagens da internet em uma página web apesar de não ser uma
boa prática inserir o src da imagem diretamente da internet, pois isso mantém seu site
dependente de uma página, ou seja, de uma imagem hospedada em outro servidor, e isso
pode deixar seu carregamento mais lento. Teste o exemplo da página com o Trinket:
HTML ainda permite a inserção de arquivos de áudio e vídeo diretamente na página por
meio das tags <audio> e <video>, respectivamente. A seguir, mostraremos um exemplo
contendo as tags <audio> e <video>.
Código 1.13 | Código contendo as tags <audio> e <video>
<!DOCTYPE html>
<audio controls>
<source src="musica.mp3" type="audio/mpeg">
</audio>
<video controls>
<source src="video.mp4" type="vide/mp4">
</video>
Esse exemplo gera a seguinte visualização (Figura 1.26):
Figura 1.26 | Inserindo áudio e vídeo
Fonte: captura de tela da página img elaborada pelo autor.
iframes
A tag <iframe> permite a inserção de páginas externas diretamente na sua página. O uso

mais comum da tag <iframe> está na incorporação de vídeos do YouTube. Observe o
exemplo a seguir:
<iframe src="https://www.youtube.com/embed/fXabY0-2jO8"></iframe>
Nesse exemplo, você só precisa informar o endereço do elemento que será incorporado;
a partir do acesso a um servidor externo, o item será inserido e todos os componentes
dele serão incluídos na sua página, sem a necessidade de se acrescentar qualquer outro
código. O exemplo apresentado gera a seguinte página (Figura 1.27):
Figura 1.27 | Usando um iframe para carregar um vídeo do YouTube
Fonte: captura de tela da página img elaborada pelo autor.
Teste o exemplo utilizando o Trinket:
É possível, ainda, controlar a largura e a altura do iframe por meio dos atributos width e
height, respectivamente. Esses atributos recebem valores em pixels. Por exemplo:
Código 1.14 | Controlando a dimensão do iframe
<iframe
width="640"
height="480"
src="https://www.youtube.com/embed/fXabY0-2jO8"
>
</iframe>
O código apresentado cria um iframe de tamanho 640px de largura por 480px de altura.
HTML5 Responsivo
Nos últimos anos, novos meios de acesso a websites têm se popularizado, como
celulares, tablets, laptops e computadores com telas de diversos tamanhos. Assim, um
site desenvolvido especificadamente para um dispositivo com tela FULL HD
(1920x1080) não pode ser visualizado corretamente em um smartphone cuja resolução é
375x812.
Devido a isso, introduziu-se o conceito de design responsivo. Nessa técnica, o website

pode ser exibido de diferentes formas, a depender do dispositivo usado para acesso
(Figura 1.28).
Figura 1.28 | Exemplo de uma página carregada em três diferentes dispositivos: computador
desktop, tablet e smartphone
Fonte: capturas de tela do site da Biblioteca Virtual da Kroton com adaptação do autor.
Atualmente, navegadores fornecem funções nativas para testagem da responsividade de

páginas, como a ferramenta de alternância de dispositivo da função inspecionar
elemento do Google Chrome (Figura 1.29). A ferramenta está disponível por meio do
atalho CTRL+SHIFT+I ou clicando com o botão direito e, em seguida, em inspecionar.
Figura 1.29 | Ferramenta de alternância de dispositivo da função inspecionar elemento de um

navegador permite simular design responsivo no Chrome
Fonte: captura de tela do navegador Google Chrome elaborada pelo autor.
A implementação do design responsivo também requer o uso de folhas de estilos (CSS),

que serão apresentadas nas próximas seções.
Pesquise mais
Nesta seção, você aprendeu as tags estruturais <div>, <section>, <article> além de tags
utilizadas para inserção de links e imagens (<a> e <img>, respectivamente).
Você foi introduzido a uma grande quantidade de conteúdos, portanto, é fundamental

que você os pratique. Como exercício, construa uma página do zero a cada novo
conceito aprendido.
Dicas de videoaulas:
 Tags básicas:
o TAGS. [S.l.: s.n.], 2017. 1 vídeo (5:14 min.). Publicado pelo canal Diego
Mariano.
 Inserindo imagens no HTML:
o IMAGENS. [S.l.: s.n.], 2017. 1 vídeo (3:05 min.). Publicado pelo canal
Diego Mariano.
 • Trabalhando com links:
o LINKS. [S.l.: s.n.], 2017. 1 vídeo (3:35 min.). Publicado pelo canal
Diego Mariano.
Referências
IMAGENS. [S.l.: s.n.], 2017. 1 vídeo (3:05 min.). Publicado pelo canal Diego Mariano.
Disponível em: https://bit.ly/3oQuyUr. Acesso em: 10 nov. 2020.
LINKS. [S.l.: s.n.], 2017. 1 vídeo (3:35 min.). Publicado pelo canal Diego Mariano.
Disponível em: https://bit.ly/36JIBop. Acesso em: 10 nov. 2020.
bioinformática: html, css, php and javascript. [S.l.]: Independently Published, 2017.
MARIANO, D. Tags HTML5. Diegomariano, 31 ago. 2020. Disponível em:

https://diegomariano.com/tags-html/. Acesso em: 10 nov. 2020.
TAGS. [S.l.: s.n.], 2017. 1 vídeo (5:14 min.). Publicado pelo canal Diego Mariano.
Disponível em: https://bit.ly/3oNYYXn. Acesso em: 10 nov. 2020.
W3C WORKING DRAFT. HTML: the markup language (an HTML language
reference). [s.d.]. Disponível em: https://bit.ly/3pOldxK. Acesso em: 10 nov. 2020.

Como solucionar a desconfiguração de um leiaute?
Para resolver esse problema, fique atento a pequenos erros no código!
sem medo de errar
No início desta seção, você foi apresentado a uma página com leiaute desconfigurado e
a seu respectivo código-fonte. O seu desafio consiste em consertá-lo.
Para solução do problema, você deve verificar, inicialmente, onde ele ocorreu.
Perceba que o problema de configuração aparece entre o segundo e o terceiro bloco.
Figura 1.30 | Estrutura da página com destaque no erro

Percebemos que o possível trecho com erro envolve o texto div class="card mb-4-
shadow-sm". Vamos, então, pesquisar todas as ocorrências desse termo no Código 1.5
(exposto anteriormente). Observe que esse termo aparece três vezes:
Se estiver utilizando um editor de códigos, o syntax highlight (quando o código é

colorido de acordo com sua função) destacará claramente que há um problema na última
ocorrência. Ao compararmos os códigos, percebemos que falta um parêntese angular <
na abertura da tag <div>, logo, basta inseri-lo para a página voltar ao normal.
Figura 1.31 | Estrutura da página ajustada

Nesse caso, o estagiário deve ter apagado, inconscientemente, o símbolo da abertura da
tag. A solução pode parecer simples, entretanto, muitos problemas em codificação de
sites ocorrem quando pequenos erros aparecem em códigos muito grandes. É
fundamental, portanto, que um desenvolvedor web saiba identificá-los e corrigi-los.
NÃO PODE FALTAR
DESENVOLVIMENTOS DE
FORMULÁRIOS E TABELAS EM
HTML5
Qual é a utilidade das tabelas e dos formulários?
Tabelas são essenciais para organizar dados, já os formulários permitem que clientes
interajam com o website.
Olá! Nesta seção, você aprenderá sobre a construção de tabelas (componentes que
permitem a inserção de dados tabulares) e de formulários (tipos de elementos HTML
usados para envio de informações).
Tabelas são essenciais para organizar dados e podem ser criadas usando-se a tag
<table>. Devemos ressaltar que cada elemento da tabela deve ser declarado
separadamente usando-se a tag <td>, que representa uma célula. Além disso, um
conjunto de células deve ser organizado em uma linha, que deve ser criada usando-se o
comando <tr>. Apesar de as tabelas poderem receber uma quantidade maior de linhas,
essas são consideradas as principais tags para se produzir uma tabela mínima. Nesta
seção, você conhecerá também as outras tags relacionadas a tabelas e suas
particularidades.
Por fim, você também verá como criar formulários HTML, que permitem que clientes
interajam com seu website. A função dos formulários é receber valores digitados ou
arquivos inseridos e, então, enviá-los para o servidor, por meio de uma página
previamente estabelecida, a fim de que seja processado por uma linguagem back-end.
Formulários possuem uma variada gama de entradas de diversos tipos, facilitando a

compreensão dos clientes sobre o que deve ser enviado e auxiliando o desenvolvedor na
coleta de diferentes tipos de dados, sem que haja problemas em seu formato.
Vide por exemplo um sistema que coleta data de nascimento. Qual seria a forma ideal
de digitar a data? 01-01-2021, 01/01/2021 ou 1º de janeiro de 2021? E para clientes de
países em que o mês é digitado em uma posição invertida ao dia? Todas essas questões
representam problemas na hora de processar os dados. Por isso, HTML5 apresentou a
tag input do tipo date, que coleta a data correta, pedindo ao usuário que apenas a
selecione no calendário.
Para colocar em prática os conhecimentos a serem aprendidos nesta seção, considere

que você foi contratado por uma empresa que possui sistema de atendimento telefônico
e atendimento por e-mail. Entretanto, poucas pessoas utilizam o serviço de e-mail para
contatá-los. Vendo a necessidade de facilitar essa dinâmica, a equipe definiu que deve
ser construída uma página de contato dentro do site da empresa. Essa página deverá
receber o nome, o e-mail, o telefone de contato, o assunto e a mensagem do cliente.
Todas essas informações deverão, então, ser enviadas para a caixa de mensagens da
empresa.
Diante disso, requisitaram você para construir essa página por meio da qual os clientes
da empresa de planos de internet poderão entrar em contato com o estabelecimento.
Você, então, pesquisou modelos de formulários de contato e encontrou o exemplo da
Figura 1.32 a seguir.
Figura 1.32 | Exemplo de formulário de contato

Fonte: captura de tela do menu contato da Biblioteca Virtual da Kroton elaborada pelo autor.
Com base no modelo apresentado na Figura 1.32, construa um código HTML que
reproduza um formulário de contato. Utilize tabelas sem bordas para alinhar os campos
e-mail e telefone.
Neste momento, não se preocupe com o processamento e o envio de e-mails, pois isso
será apresentado posteriormente. E quando tratarmos sobre CSS, aprenderemos métodos
melhores para alinhar elementos lado a lado.
Vamos, então, aprender a construir tabelas e formulários?
Bons estudos!
conceito-chave
Tabelas
Caro aluno, você já viu como páginas podem ser estruturadas, agora, verá tags que
representam componentes importantes do HTML, como as tabelas.
Você já deve ter visto alguma tabela, no entanto, é importante que relembre alguns
conceitos para entender como ela é interpretada em HTML. Uma tabela possibilita
organizar informações em três componentes principais: colunas, linhas e células,
conforme a Figura 1.33.
Figura 1.33 | Exemplo de tabela
Nas primeiras versões do HTML, as tabelas eram utilizadas como um elemento

estrutural, para se organizar o leiaute da tela. Nas versões mais recentes, novas tags
estruturais foram introduzidas e tabelas passaram a ser utilizadas apenas para exibir
dados tabulares (TITTEL; NOBLE; COUTO, 2018).
Em HTML, tabelas são definidas por meio da tag composta <table>. Ao se criar uma
tabela, as linhas são inseridas por meio da tag <tr>. Células podem ser inseridas
usando-se a tag <th>, para célula de cabeçalho, ou <td>, para células comuns. Por
padrão, o texto inserido a partir da tag de cabeçalho <th> está em negrito, enquanto os
elementos inseridos por meio da tag de células comuns <td> são alinhados à esquerda
em fonte normal. A Figura 1.34 ilustra como uma tabela pode ser estruturada em
HTML.
Figura 1.34 | Exemplo básico de tabela

O Código 1.15 a seguir nos mostra um exemplo de uma simples tabela em HTML. A
saída do código da tabela pode ser visualizada na Figura 1.35 e corresponde à
visualização em um navegador (browser). No simulador, você consegue executar e
modificar a informação da tabela.
Código 1.15 | Exemplo de uma tabela em HTML
<table>
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>1A</td>
<td>1B</td>
<td>1C</td>
</tr>
<tr>
<td>2</td>
<td>2A</td>
<td>2B</td>
<td>2C</td>
</tr>
<tr>
<td>3</td>
<td>3A</td>
<td>3B</td>
<td>3C</td>
</tr>
</table>
Fonte: elaborado pelo autor. Figura 1.35 | Visualização da tabela no navegador
Teste o Código 1.15 no Trinket:
Vamos interpretar cada parte do código:

Na primeira linha é declarada a abertura da tabela, seguida pela abertura da primeira
linha:
1. <table>
2. <tr>
A primeira linha tem uma característica especial: ela deve receber as células de
cabeçalho, portanto, cada célula é declarada com a tag <th> (na prática, isso apenas
deixa o texto em negrito). Vamos adicionar quatro células (ou seja, teremos quatro
colunas):
3. <th>#</th>
4. <th>A</th>
5. <th>B</th>
6. <th>C</th>
A primeira linha deve, então, ser fechada para que a próxima possa ser aberta:
7. </tr>
Aqui, temos as próximas linhas e células correspondentes. Lembre-se de que deve

sempre utilizar a mesma quantidade de células em uma linha. Observe que, agora,
usamos <td> para indicar cada célula:
9. <tr>
10. <td>1</td>
11. <td>1A</td>
12. <td>1B</td>
13. <td>1C</td>
14. </tr>
15.
16. <tr>
17. <td>2</td>
18. <td>2A</td>
19. <td>2B</td>
20. <td>2C</td>
21. </tr>
22.
23. <tr>
24. <td>3</td>
25. <td>3A</td>
26. <td>3B</td>
27. <td>3C</td>
28. </tr>
Por fim, a tabela deve ser fechada:
29. </table>
Por padrão, tabelas inseridas não possuem borda. Você pode inseri-las usando o atributo
border, que recebe um valor numérico indicando a largura desejada para a borda,
conforme vemos na Figura 1.36.
<table border=1>
Figura 1.36 | Tabela com bordas
Você pode, ainda, adicionar cor ao fundo de uma tabela usando o atributo bgcolor, que
recebe o nome da cor desejada (em inglês). Neste caso, foi inserida a cor amarela
(yellow).
Outra forma de se inserir cor é utilizando códigos em hexadecimal da cor. Na Figura

1.37, podemos observar a cor do fundo da tabela.
<table border=1 bgcolor="yellow">
Figura 1.37 | Alterando cor de fundo de uma tabela

A seguir, apresentaremos uma tabela em HTML contendo algumas cores e seus códigos
em hexadecimal. Observe que utilizamos o atributo bgcolor com a tag <td> para cada
linha da primeira coluna na tabela; já na segunda coluna, temos os códigos em
hexadecimal. Tais cores podem ser utilizadas na concepção de uma página web em
HTML. Observe a tabela e seu código na ferramenta Trinket:
Pode-se, ainda, alterar a largura e a altura de partes da tabela. No exemplo a seguir,

faremos a alteração da altura e da largura apenas da primeira linha, observe o resultado
na Figura 1.38 e o código alterado na ferramenta Trinket.
Figura 1.38 | Alterando largura e altura de partes de uma tabela

O atributo height recebe um valor em pixels para definir a altura do item. Observe que
ele foi aplicado apenas na primeira linha <tr>. O atributo width determina a largura do
item, logo, observe que, após ter sido aplicado em cada célula, a largura delas nas linhas
seguintes também foi alterada.
Podemos modificar e verificar a cor de fundo da tabela, teste com a ferramenta Trinket,
alterando para a cor azul, e modifique os valores de altura e largura.
Reflita
Apesar desses atributos permitirem alterações de cores, bordas e larguras, a sua

utilização não é recomendada. É preferível o uso de propriedades de estilo CSS (que
estudaremos em outro momento).
Quais seriam os motivos para isso?
Mesclando células
É possível mesclar células usando o atributo colspan, utilizado para mesclar colunas,
como na Figura 1.39. Podemos, ainda, mesclar linhas utilizando o atributo rowspan.
Observe a estrutura na Figura 1.40. Esses atributos podem ser utilizados tanto em
células do tipo <th> quanto do tipo <td>. Para isso, primeiro você deve determinar
quantas colunas serão mescladas (no exemplo a seguir, duas). A seguir, utilizar o
atributo colspan para indicar quais células serão unidas. Como mencionado, pode-se,
ainda, utilizar a propriedade rowspan para unir linhas.
Figura 1.39 | Atributo colspan
Fonte: adaptada de Mariano; de Melo-Minardi (2017). Figura 1.40 | Atributo rowspan
Fonte: adaptada de Mariano; de Melo-Minardi (2017).
Novidades do HTML5 para tabelas
HTML5 trouxe tags que permitem uma melhor maneira de organizar tabelas: <thead>,
<tbody> e <tfoot>. A tag <thead> é utilizada para inserir as células do cabeçalho. O
conteúdo da tabela deve ser inserido em <tbody>; já <tfoot> pode ser usado para
inserção de linhas conclusivas ou de notas de rodapé. Observe a tabela criada e ilustrada
na Figura 1.41.
Figura 1.41 | Tags <thead>, <tbody> e <tfoot>

Você pode testar o código dessa tabela na ferramenta Trinket:
Caro aluno, agora que você conhece as tags para criação de tabela, aprenderá a criar
outro elemento em HTML: os formulários. Você já deve ter se deparado com páginas de
serviços na internet em que é preciso preencher formulários de contato, de suporte, de
atendimento, orçamento, compras, cadastro, entre outros. Então, agora você conhecerá
algumas das tags utilizadas na construção de formulários.
Formulários
Formulários são tipos de elementos HTML usados para coletar os dados que o
desenvolvedor deseja processar e/ou salvar (TITTEL; NOBLE; COUTO, 2018). O uso
de formulários é a forma mais efetiva para se obter dados relevantes dos usuários do seu
website (GUPTA, 2013). A Figura 1.32 ilustra um exemplo de formulário de contato
com alguns campos para inclusão de dados pessoais e mensagem.

Formulários podem ser criados usando-se a tag <form>, que pode receber como
principais atributos action, method e name (MARIANO; DE MELO-MINARDI, 2017).
O atributo action informa ao navegador para qual endereço deve enviar as informações
presentes no formulário; o atributo method indica o método a ser utilizado para envio
(POST e GET são os mais comuns); por fim, o atributo name indica o nome utilizado
para o formulário.
Assimile
POST versus GET
No método POST, as informações passadas pelo formulário são transmitidas junto ao

corpo da requisição HTTP (ou seja, a transmissão é feita de forma criptografada).
POST pode ser utilizado, por exemplo, para envio de arquivos ou em formulários com
dados sigilosos.
Por outro lado, os envios por meio do método GET transmitem os dados pela URL da
página. Por exemplo:
www.site.com.br/?id=1
Nesse exemplo, é feita uma requisição do tipo GET, em que a variável id é igual a 1.
Portanto, os dados enviados em GET são visualmente públicos (MARIANO; DE
MELO-MINARDI, 2017).
Além de name, method e action, formulários podem receber o atributo enctype. O

atributo enctype determina como os dados do formulário devem ser codificados quando
enviados ao servidor. Ele pode receber os valores: (i) application/x-www-form-
urlencoded, para caracteres codificados antes do envio; (ii) multipart/form-data, usado
para envio de arquivos, uma vez que não fornece codificação; e (iii) text/plain, que
codifica apenas os espaçamentos.
Código 1.16 | Exemplo de um formulário
<!DOCTYPE html>
<html>
<head>
<title>Formulários</title>
</head>
<body>
<form
name="meu_primeiro_formulario"
method="POST"
action="gravaDados.php"
enctype="multipart/form-data"
>
</form>
</body>
</html>
A seguir, o código é explicado:
 Observe que o formulário é aberto por meio da tag <form> e fechado via tag
</form>.
 Em name="meu_primeiro_formulario", define-se o nome do formulário. No
caso, ele foi nomeado como “meu_primeiro_formulario”. Observe que
evitamos o uso de espaços ou outros caracteres especiais. Isso se dá uma vez que
esse nome pode ser utilizado na etapa de processamento, já os caracteres
especiais podem ser codificados ou não, a depender do tipo de enctype utilizado
para envio.
 Em method="POST" define-se o método de envio considerado, o qual foi o
POST.
 Em action="gravaDados.php" define-se que o atributo action aponta para
“gravarDados.php”. Assim, para que esse formulário funcione corretamente,
deve existir um arquivo denominado “gravarDados.php”, que recebe os dados
enviados pelo método POST e processa-os usando a linguagem de programação
PHP (outras linguagens também podem ser utilizadas, entretanto, citaremos
apenas PHP aqui, pois será a linguagem abordada ao final dos nossos estudos).
 Por fim, em enctype="multipart/form-data", define-se que o enctype utilizado é
o “multipart/form-data”. Declarar o enctype é necessário quando queremos
enviar arquivos anexados ao formulário.
A seguir, você conhecerá os elementos que podem ser incluídos em formulários HTML.
Elementos de formulários
Há uma série de elementos que tornam os formulários HTML altamente versáteis:
 Menu de seleção: elemento que fornece um menu suspenso que será exibido
quando o usuário clicar. É criado com a tag <select>. Cada item é adicionado
usando-se a tag <option>. Observe o exemplo com um menu de seleção com os
dias da semana.
Código 1.17 | Menu de seleção com os dias da semana
<select name="dias_da_semana">
<option value="segunda">Segunda-Feira</option>
<option value="terca">Terça-Feira</option>
<option value="quarta">Quarta-Feira</option>
<option value="quinta">Quinta-Feira</option>
<option value="sexta">Sexta-Feira</option>
<option value="sabado">Sábado</option>
<option value="domingo">Domingo</option>
</select>
No exemplo, observe que a tag <select> foi nomeada como “dias_da_semana”:

<select name="dias_da_semana">. Essa tag é fechada com </select>. Dentro da tag
<select> temos as opções a serem selecionadas; no caso, as opções possuem como valor
(value) os dias da semana <option value="segunda">Segunda-Feira</option>.
 Áreas de texto: permitem que usuários insiram textos com várias linhas e são
criadas com a tag <textarea>. Exemplo (formulário de contato):
<textarea placeholder="Digite sua mensagem"></textarea>
 Botões: botões permitem diversos tipos de ação e podem ser integrados por
meio de scripts. São criados com a tag <button>.
<button>Clique aqui</button>
 Rótulos: inseridos com a tag <label>, permitem a identificação de partes dos

formulários.
Exemplos: <label>Dias da semana:</label> e <label>Contato:</label>
O código a seguir apresenta um exemplo de formulário contendo as opções de dias da

semana. Observe que o resultado do código apresentado gera o resultado ilustrado na
Figura 1.42.
Código 1.18 | Formulário com opções de dias da semana
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form
name="Meu primeiro formulário"
method="POST"
>
<label>Dias da semana:</label>
</select>
<br>
<label>Contato:</label>
<br>
<label>Enviar:</label>
</form>
</body>
</html>
Fonte: elaborado pelo autor. Figura 1.42 | Elementos de formulários: menu de seleção, área
de texto e botão (à esquerda). À direita é exibido o menu de seleção quando clicado
Teste o código apresentado na ferramenta Trinket:

 Entradas: são o tipo de elemento mais importante em formulários. Elas são
inseridas usando-se a tag <input>, por exemplo:
<input type="text">
A tag <input> pode ter diversos tipos (especificados no atributo type), como caixas de
texto, senhas, caixas de seleção múltiplas e únicas, entre outros.
Tipos de entrada e atributos
A tag <input> recebe uma série de atributos que definirão o tipo dos dados que serão
submetidos como entrada. Observe o Quadro 1.4.
Quadro 1.4 | Tipos de input
Tipo Descrição
text Campo de entrada de texto.
password Campo de entrada de senha.
checkbox Caixa de seleção.
radio Botão de rádio.
button Botão.
submit Botão de envio.
reset Botão de reset.
file Controle de upload de arquivo.
hidden Controle de entrada escondido.
image Controle de entrada de coordenadas de imagem.
datetime Controle global de entrada de data e hora.
datetime-local Controle de entrada local de data e hora.
date Controle de entrada de data.
month Controle de entrada de ano e mês.
time Controle de entrada de tempo.
week Controle de entrada ano e semana.
number Controle de entrada de número.
range Controle de entrada de número impreciso.
email Controle de entrada de endereço de e-mail.
url Controle de entrada de URL.

Tipo Descrição
search Campo de pesquisa.
tel Campo de entrada de número de telefone.
color Controle de bloco de cores.
Exemplificando
Aplicação dos elementos em HTML5
No exemplo a seguir, implementaremos todos os tipos de elementos de entrada em um

formulário:
Código 1.19 | Formulário com todos os elementos de entrada
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="POST" action="gravaDados.php" enctype="multipart/form-data">
<div style="width: 25%; float:left">
<label>Entrada do tipo: button</label><br>
<input type="button"><br><br>
<label>Entrada do tipo: checkbox</label><br>
<input type="checkbox"><br><br>
<label>Entrada do tipo: color</label><br>
<input type="color"><br><br>
<label>Entrada do tipo: date</label><br>
<input type="date"><br><br>
<label>Entrada do tipo: datetime</label><br>
<input type="datetime"><br><br>
<label>Entrada do tipo: datetime-local</label><br>
<input type="datetime-local"><br><br>
</div>
<label>Entrada do tipo: email</label><br>
<input type="email"><br><br>
<label>Entrada do tipo: file</label><br>
<input type="file"><br><br>
<label>Entrada do tipo: hidden</label><br>
<input type="hidden"><br><br>
<label>Entrada do tipo: image</label><br>
<input type="image"><br><br>
<label>Entrada do tipo: month</label><br>
<input type="month"><br><br>
<label>Entrada do tipo: number</label><br>
<input type="number"><br><br>
</div>
<label>Entrada do tipo: password</label><br>
<input type="password"><br><br>
<label>Entrada do tipo: radio</label><br>
<input type="radio"><br><br>
<label>Entrada do tipo: range</label><br>
<input type="range"><br><br>
<label>Entrada do tipo: reset</label><br>
<input type="reset"><br><br>
<label>Entrada do tipo: search</label><br>

<input type="search"><br><br>
<label>Entrada do tipo: submit</label><br>
</div>
<input type="submit"><br><br>
<label>Entrada do tipo: tel</label><br>
<input type="tel"><br><br>
<label>Entrada do tipo: text</label><br>
<input type="text"><br><br>
<label>Entrada do tipo: time</label><br>
<input type="time"><br><br>
<label>Entrada do tipo: url</label><br>
<input type="url"><br><br>
<label>Entrada do tipo: week</label><br>
<input type="week"><br><br>
</div>
</form>
</body>
</html>
Observe, a seguir, a página construída ilustrada na Figura 1.43.
Figura 1.43 | Tipos de elementos input

Fonte: captura de tela da página Formulários elaborada pelo autor.
Se desejar teste o código apresentado na ferramenta Trinket:
Agora, vamos, então, analisar alguns desses elementos.
Caixas de texto e senhas
As caixas de texto (type text) são os elementos de entrada mais comuns. Esse tipo de
input gera uma caixa de texto de linha única em que o usuário poderá digitar qualquer
tipo de informação. As caixas de texto de senhas (type password) são bastante similares
a elas. A principal diferença é que nos inputs do tipo password, o texto é criptografado
diretamente quando digitado. Observe o exemplo da Figura 1.44.
<label>Placeholder: desaparece ao digitar</label><br>
<input type="text" placeholder="Digite aqui"<br><br>
<label>Texto escondido</label><br>
<input type="password"<br><br>
Figura 1.44 | Inputs dos tipos text e password. Ao digitar no campo do tipo password, os
caracteres são exibidos como marcadores

Ambas as entradas aceitam diversos atributos, como o atributo value, em que se pode
inserir os valores padrão para o campo, ou o atributo placeholder, que exibe um texto
informativo no campo (esse texto desaparece quando o usuário clica na caixa de texto).
Botões
Além do elemento <button>, HTML fornece duas outras formas de criação de botões. A
primeira delas é utilizando-se o input do tipo button. A outra forma de gerar um botão é
utilizando um input do tipo submit. Entretanto, o botão do tipo submit tem a função
específica de enviar o formulário para a página indicada no atributo action de form,
<label>Similar a button</label>
<input type="button" value="Botão"<br>
<label>Botão de envio de formulário</label>
<input type="submit" value="Enviar">
Figura 1.45 | Tipos button e submit
Caixas de seleção únicas e múltiplas
As caixas de seleção permitem que usuários escolham certas opções. Elas são divididas
em dois tipos: caixas de seleção únicas (radio), caracterizadas por seu formato circular,
e caixas de seleção múltiplas (checkbox), caracterizadas pelo seu formato quadrangular.
Código 1.20 |Código de seleção múltipla
<label>Seleção múltipla</label>
<input type="checkbox" name="multiplo" value="1">
<input type="checkbox" name="multiplo" value="3"><br>
Fonte: elaborado pelo autor. Código 1.21 | Código de seleção única
<label>Seleção única</label>
<input type="radio" name="unico" value="2">
Fonte: elaborado pelo autor. Figura 1.46 | Caixas de seleção múltiplas (checkbox) e únicas
(radio)
Perceba que cada entrada apresenta um mesmo valor para o atributo name. Isso indica à
página de processamento que os campos de seleção representam uma mesma variável.
A diferença entre os campos será dada pelo valor existente no atributo value. Nos
códigos de seleção múltipla e única apresentados, observe que a variável multiplo
recebe os valores [1, 2, 3], enquanto a variável unico recebe o valor 2.
Novos recursos do HTML5 para formulários
HTML5 apresentou novos tipos de entradas para formulários, como os inputs dos tipos
date e color. O tipo date fornece um campo que, quando clicado, exibe um calendário
que permite ao usuário selecionar uma data. A Figura 1.47 ilustra o resultado da
utilização do input do tipo date.
<input type="date">
Figura 1.47 | Input do tipo date

Já as entradas do tipo color permitem que o usuário selecione uma cor. Esse elemento
retorna um código de cores RGB, como vemos na Figura 1.48.
<input type="color">
Figura 1.48 | Input do tipo color
Teste as tags <input type="date"> e <input type="color"> utilizando a ferramenta

Trinket. Aproveite e teste outras tags em html.
Chegamos ao final de uma unidade. O aprendizado foi grande e você conheceu a

linguagem HTML. Agora, você pode iniciar seus projetos de páginas WEB, aplicar os
conhecimentos e criar estruturas de páginas e formulários em HTML.
Bom trabalho!
Referências
GUPTA, G. Mastering HTML5 Forms. Birmingham: Packt Publishing, 2013.

MARIANO, D. Tags HTML5. 2020. Disponível em: https://bit.ly/2MVQOij. Acesso
em: 17 nov. 2020.
TITTEL, E.; NOBLE, J.; COUTO, E. HTML, XHTML e CSS Para Leigos. Tradução
de Elda Couto. Rio de Janeiro: Alta Books, 2018.
reference). [s.d]. Disponível em: https://bit.ly/3tp54kx. Acesso em: 17 nov. 2020.
W3SCHOOLS. HTML <form> enctype Attribute. [s.d.] Disponível

em: https://bit.ly/3tvlvMg. Acesso em: 17 nov. 2020.

Como solucionar a desconfiguração de um leiaute?
Para resolver esse problema, fique atento a pequenos erros no código!
sem medo de errar
No início desta seção, você foi apresentado a uma página com leiaute desconfigurado e
a seu respectivo código-fonte. O seu desafio consiste em consertá-lo.
Para solução do problema, você deve verificar, inicialmente, onde ele ocorreu.
Perceba que o problema de configuração aparece entre o segundo e o terceiro bloco.
Figura 1.30 | Estrutura da página com destaque no erro

Percebemos que o possível trecho com erro envolve o texto div class="card mb-4-
shadow-sm". Vamos, então, pesquisar todas as ocorrências desse termo no Código 1.5
(exposto anteriormente). Observe que esse termo aparece três vezes:
Se estiver utilizando um editor de códigos, o syntax highlight (quando o código é

colorido de acordo com sua função) destacará claramente que há um problema na última
ocorrência. Ao compararmos os códigos, percebemos que falta um parêntese angular <
na abertura da tag <div>, logo, basta inseri-lo para a página voltar ao normal.
Figura 1.31 | Estrutura da página ajustada

Nesse caso, o estagiário deve ter apagado, inconscientemente, o símbolo da abertura da
tag. A solução pode parecer simples, entretanto, muitos problemas em codificação de
sites ocorrem quando pequenos erros aparecem em códigos muito grandes. É
fundamental, portanto, que um desenvolvedor web saiba identificá-los e corrigi-los.
NÃO PODE FALTAR
DESENVOLVIMENTOS DE
HTML5
Qual é a utilidade das tabelas e dos formulários?
Tabelas são essenciais para organizar dados, já os formulários permitem que clientes
interajam com o website.
Olá! Nesta seção, você aprenderá sobre a construção de tabelas (componentes que
permitem a inserção de dados tabulares) e de formulários (tipos de elementos HTML
usados para envio de informações).
Tabelas são essenciais para organizar dados e podem ser criadas usando-se a tag
<table>. Devemos ressaltar que cada elemento da tabela deve ser declarado
separadamente usando-se a tag <td>, que representa uma célula. Além disso, um
conjunto de células deve ser organizado em uma linha, que deve ser criada usando-se o
comando <tr>. Apesar de as tabelas poderem receber uma quantidade maior de linhas,
essas são consideradas as principais tags para se produzir uma tabela mínima. Nesta
seção, você conhecerá também as outras tags relacionadas a tabelas e suas
particularidades.
Por fim, você também verá como criar formulários HTML, que permitem que clientes
interajam com seu website. A função dos formulários é receber valores digitados ou
arquivos inseridos e, então, enviá-los para o servidor, por meio de uma página
previamente estabelecida, a fim de que seja processado por uma linguagem back-end.
Formulários possuem uma variada gama de entradas de diversos tipos, facilitando a

compreensão dos clientes sobre o que deve ser enviado e auxiliando o desenvolvedor na
coleta de diferentes tipos de dados, sem que haja problemas em seu formato.
Vide por exemplo um sistema que coleta data de nascimento. Qual seria a forma ideal
de digitar a data? 01-01-2021, 01/01/2021 ou 1º de janeiro de 2021? E para clientes de
países em que o mês é digitado em uma posição invertida ao dia? Todas essas questões
representam problemas na hora de processar os dados. Por isso, HTML5 apresentou a
tag input do tipo date, que coleta a data correta, pedindo ao usuário que apenas a
selecione no calendário.
Para colocar em prática os conhecimentos a serem aprendidos nesta seção, considere

que você foi contratado por uma empresa que possui sistema de atendimento telefônico
e atendimento por e-mail. Entretanto, poucas pessoas utilizam o serviço de e-mail para
contatá-los. Vendo a necessidade de facilitar essa dinâmica, a equipe definiu que deve
ser construída uma página de contato dentro do site da empresa. Essa página deverá
receber o nome, o e-mail, o telefone de contato, o assunto e a mensagem do cliente.
Todas essas informações deverão, então, ser enviadas para a caixa de mensagens da
empresa.
Diante disso, requisitaram você para construir essa página por meio da qual os clientes
da empresa de planos de internet poderão entrar em contato com o estabelecimento.
Você, então, pesquisou modelos de formulários de contato e encontrou o exemplo da
Figura 1.32 a seguir.

Com base no modelo apresentado na Figura 1.32, construa um código HTML que
reproduza um formulário de contato. Utilize tabelas sem bordas para alinhar os campos
e-mail e telefone.
Neste momento, não se preocupe com o processamento e o envio de e-mails, pois isso
será apresentado posteriormente. E quando tratarmos sobre CSS, aprenderemos métodos
melhores para alinhar elementos lado a lado.
Vamos, então, aprender a construir tabelas e formulários?
Bons estudos!
conceito-chave
Tabelas
Caro aluno, você já viu como páginas podem ser estruturadas, agora, verá tags que
representam componentes importantes do HTML, como as tabelas.
Você já deve ter visto alguma tabela, no entanto, é importante que relembre alguns
conceitos para entender como ela é interpretada em HTML. Uma tabela possibilita
organizar informações em três componentes principais: colunas, linhas e células,
Figura 1.33 | Exemplo de tabela
Nas primeiras versões do HTML, as tabelas eram utilizadas como um elemento

estrutural, para se organizar o leiaute da tela. Nas versões mais recentes, novas tags
estruturais foram introduzidas e tabelas passaram a ser utilizadas apenas para exibir
dados tabulares (TITTEL; NOBLE; COUTO, 2018).
Em HTML, tabelas são definidas por meio da tag composta <table>. Ao se criar uma
tabela, as linhas são inseridas por meio da tag <tr>. Células podem ser inseridas
usando-se a tag <th>, para célula de cabeçalho, ou <td>, para células comuns. Por
padrão, o texto inserido a partir da tag de cabeçalho <th> está em negrito, enquanto os
elementos inseridos por meio da tag de células comuns <td> são alinhados à esquerda
em fonte normal. A Figura 1.34 ilustra como uma tabela pode ser estruturada em
HTML.
Figura 1.34 | Exemplo básico de tabela

O Código 1.15 a seguir nos mostra um exemplo de uma simples tabela em HTML. A
saída do código da tabela pode ser visualizada na Figura 1.35 e corresponde à
visualização em um navegador (browser). No simulador, você consegue executar e
modificar a informação da tabela.
Código 1.15 | Exemplo de uma tabela em HTML
<table>
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>1A</td>
<td>1B</td>
<td>1C</td>
</tr>
<tr>
<td>2</td>
<td>2A</td>
<td>2B</td>
<td>2C</td>
</tr>
<tr>
<td>3</td>
<td>3A</td>
<td>3B</td>
<td>3C</td>
</tr>
</table>
Fonte: elaborado pelo autor. Figura 1.35 | Visualização da tabela no navegador
Teste o Código 1.15 no Trinket:
Vamos interpretar cada parte do código:

Na primeira linha é declarada a abertura da tabela, seguida pela abertura da primeira
linha:
1. <table>
2. <tr>
A primeira linha tem uma característica especial: ela deve receber as células de
cabeçalho, portanto, cada célula é declarada com a tag <th> (na prática, isso apenas
deixa o texto em negrito). Vamos adicionar quatro células (ou seja, teremos quatro
colunas):
3. <th>#</th>
4. <th>A</th>
5. <th>B</th>
6. <th>C</th>
A primeira linha deve, então, ser fechada para que a próxima possa ser aberta:
7. </tr>
Aqui, temos as próximas linhas e células correspondentes. Lembre-se de que deve

sempre utilizar a mesma quantidade de células em uma linha. Observe que, agora,
usamos <td> para indicar cada célula:
9. <tr>
10. <td>1</td>
11. <td>1A</td>
12. <td>1B</td>
13. <td>1C</td>
14. </tr>
15.
16. <tr>
17. <td>2</td>
18. <td>2A</td>
19. <td>2B</td>
20. <td>2C</td>
21. </tr>
22.
23. <tr>
24. <td>3</td>
25. <td>3A</td>
26. <td>3B</td>
27. <td>3C</td>
28. </tr>
Por fim, a tabela deve ser fechada:
29. </table>
Por padrão, tabelas inseridas não possuem borda. Você pode inseri-las usando o atributo
border, que recebe um valor numérico indicando a largura desejada para a borda,
conforme vemos na Figura 1.36.
<table border=1>
Você pode, ainda, adicionar cor ao fundo de uma tabela usando o atributo bgcolor, que
recebe o nome da cor desejada (em inglês). Neste caso, foi inserida a cor amarela
(yellow).
Outra forma de se inserir cor é utilizando códigos em hexadecimal da cor. Na Figura

1.37, podemos observar a cor do fundo da tabela.
<table border=1 bgcolor="yellow">
Figura 1.37 | Alterando cor de fundo de uma tabela

A seguir, apresentaremos uma tabela em HTML contendo algumas cores e seus códigos
em hexadecimal. Observe que utilizamos o atributo bgcolor com a tag <td> para cada
linha da primeira coluna na tabela; já na segunda coluna, temos os códigos em
hexadecimal. Tais cores podem ser utilizadas na concepção de uma página web em
HTML. Observe a tabela e seu código na ferramenta Trinket:
Pode-se, ainda, alterar a largura e a altura de partes da tabela. No exemplo a seguir,

faremos a alteração da altura e da largura apenas da primeira linha, observe o resultado
na Figura 1.38 e o código alterado na ferramenta Trinket.
Figura 1.38 | Alterando largura e altura de partes de uma tabela

O atributo height recebe um valor em pixels para definir a altura do item. Observe que
ele foi aplicado apenas na primeira linha <tr>. O atributo width determina a largura do
item, logo, observe que, após ter sido aplicado em cada célula, a largura delas nas linhas
seguintes também foi alterada.
Podemos modificar e verificar a cor de fundo da tabela, teste com a ferramenta Trinket,
alterando para a cor azul, e modifique os valores de altura e largura.
Reflita
Apesar desses atributos permitirem alterações de cores, bordas e larguras, a sua

utilização não é recomendada. É preferível o uso de propriedades de estilo CSS (que
estudaremos em outro momento).
Quais seriam os motivos para isso?
Mesclando células
É possível mesclar células usando o atributo colspan, utilizado para mesclar colunas,
como na Figura 1.39. Podemos, ainda, mesclar linhas utilizando o atributo rowspan.
Observe a estrutura na Figura 1.40. Esses atributos podem ser utilizados tanto em
células do tipo <th> quanto do tipo <td>. Para isso, primeiro você deve determinar
quantas colunas serão mescladas (no exemplo a seguir, duas). A seguir, utilizar o
atributo colspan para indicar quais células serão unidas. Como mencionado, pode-se,
ainda, utilizar a propriedade rowspan para unir linhas.
Figura 1.39 | Atributo colspan
Fonte: adaptada de Mariano; de Melo-Minardi (2017). Figura 1.40 | Atributo rowspan
Fonte: adaptada de Mariano; de Melo-Minardi (2017).
Novidades do HTML5 para tabelas
HTML5 trouxe tags que permitem uma melhor maneira de organizar tabelas: <thead>,
<tbody> e <tfoot>. A tag <thead> é utilizada para inserir as células do cabeçalho. O
conteúdo da tabela deve ser inserido em <tbody>; já <tfoot> pode ser usado para
inserção de linhas conclusivas ou de notas de rodapé. Observe a tabela criada e ilustrada
na Figura 1.41.
Figura 1.41 | Tags <thead>, <tbody> e <tfoot>

Você pode testar o código dessa tabela na ferramenta Trinket:
Caro aluno, agora que você conhece as tags para criação de tabela, aprenderá a criar
outro elemento em HTML: os formulários. Você já deve ter se deparado com páginas de
serviços na internet em que é preciso preencher formulários de contato, de suporte, de
atendimento, orçamento, compras, cadastro, entre outros. Então, agora você conhecerá
algumas das tags utilizadas na construção de formulários.
Formulários
Formulários são tipos de elementos HTML usados para coletar os dados que o
desenvolvedor deseja processar e/ou salvar (TITTEL; NOBLE; COUTO, 2018). O uso
de formulários é a forma mais efetiva para se obter dados relevantes dos usuários do seu
website (GUPTA, 2013). A Figura 1.32 ilustra um exemplo de formulário de contato
com alguns campos para inclusão de dados pessoais e mensagem.

Formulários podem ser criados usando-se a tag <form>, que pode receber como
principais atributos action, method e name (MARIANO; DE MELO-MINARDI, 2017).
O atributo action informa ao navegador para qual endereço deve enviar as informações
presentes no formulário; o atributo method indica o método a ser utilizado para envio
(POST e GET são os mais comuns); por fim, o atributo name indica o nome utilizado
para o formulário.
Assimile
POST versus GET
No método POST, as informações passadas pelo formulário são transmitidas junto ao

corpo da requisição HTTP (ou seja, a transmissão é feita de forma criptografada).
POST pode ser utilizado, por exemplo, para envio de arquivos ou em formulários com
dados sigilosos.
Por outro lado, os envios por meio do método GET transmitem os dados pela URL da
página. Por exemplo:
www.site.com.br/?id=1
Nesse exemplo, é feita uma requisição do tipo GET, em que a variável id é igual a 1.
Portanto, os dados enviados em GET são visualmente públicos (MARIANO; DE
MELO-MINARDI, 2017).
Além de name, method e action, formulários podem receber o atributo enctype. O

atributo enctype determina como os dados do formulário devem ser codificados quando
enviados ao servidor. Ele pode receber os valores: (i) application/x-www-form-
urlencoded, para caracteres codificados antes do envio; (ii) multipart/form-data, usado
para envio de arquivos, uma vez que não fornece codificação; e (iii) text/plain, que
codifica apenas os espaçamentos.
Código 1.16 | Exemplo de um formulário
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form
name="meu_primeiro_formulario"
method="POST"
>
</form>
</body>
</html>
A seguir, o código é explicado:
 Observe que o formulário é aberto por meio da tag <form> e fechado via tag
</form>.
 Em name="meu_primeiro_formulario", define-se o nome do formulário. No
caso, ele foi nomeado como “meu_primeiro_formulario”. Observe que
evitamos o uso de espaços ou outros caracteres especiais. Isso se dá uma vez que
esse nome pode ser utilizado na etapa de processamento, já os caracteres
especiais podem ser codificados ou não, a depender do tipo de enctype utilizado
para envio.
 Em method="POST" define-se o método de envio considerado, o qual foi o
POST.
 Em action="gravaDados.php" define-se que o atributo action aponta para
“gravarDados.php”. Assim, para que esse formulário funcione corretamente,
deve existir um arquivo denominado “gravarDados.php”, que recebe os dados
enviados pelo método POST e processa-os usando a linguagem de programação
PHP (outras linguagens também podem ser utilizadas, entretanto, citaremos
apenas PHP aqui, pois será a linguagem abordada ao final dos nossos estudos).
 Por fim, em enctype="multipart/form-data", define-se que o enctype utilizado é
o “multipart/form-data”. Declarar o enctype é necessário quando queremos
enviar arquivos anexados ao formulário.
A seguir, você conhecerá os elementos que podem ser incluídos em formulários HTML.
Elementos de formulários
Há uma série de elementos que tornam os formulários HTML altamente versáteis:
 Menu de seleção: elemento que fornece um menu suspenso que será exibido
quando o usuário clicar. É criado com a tag <select>. Cada item é adicionado
usando-se a tag <option>. Observe o exemplo com um menu de seleção com os
dias da semana.
Código 1.17 | Menu de seleção com os dias da semana
</select>
No exemplo, observe que a tag <select> foi nomeada como “dias_da_semana”:

<select name="dias_da_semana">. Essa tag é fechada com </select>. Dentro da tag
<select> temos as opções a serem selecionadas; no caso, as opções possuem como valor
(value) os dias da semana <option value="segunda">Segunda-Feira</option>.
 Áreas de texto: permitem que usuários insiram textos com várias linhas e são
criadas com a tag <textarea>. Exemplo (formulário de contato):
 Botões: botões permitem diversos tipos de ação e podem ser integrados por
meio de scripts. São criados com a tag <button>.
 Rótulos: inseridos com a tag <label>, permitem a identificação de partes dos

formulários.
Exemplos: <label>Dias da semana:</label> e <label>Contato:</label>
O código a seguir apresenta um exemplo de formulário contendo as opções de dias da

semana. Observe que o resultado do código apresentado gera o resultado ilustrado na
Figura 1.42.
Código 1.18 | Formulário com opções de dias da semana
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form
name="Meu primeiro formulário"
method="POST"
>
<label>Dias da semana:</label>
</select>
<br>
<label>Contato:</label>
<br>
<label>Enviar:</label>
</form>
</body>
</html>
Fonte: elaborado pelo autor. Figura 1.42 | Elementos de formulários: menu de seleção, área
de texto e botão (à esquerda). À direita é exibido o menu de seleção quando clicado
Teste o código apresentado na ferramenta Trinket:

 Entradas: são o tipo de elemento mais importante em formulários. Elas são
inseridas usando-se a tag <input>, por exemplo:
<input type="text">
A tag <input> pode ter diversos tipos (especificados no atributo type), como caixas de
texto, senhas, caixas de seleção múltiplas e únicas, entre outros.
Tipos de entrada e atributos
A tag <input> recebe uma série de atributos que definirão o tipo dos dados que serão
submetidos como entrada. Observe o Quadro 1.4.
Quadro 1.4 | Tipos de input
Tipo Descrição
text Campo de entrada de texto.
password Campo de entrada de senha.
checkbox Caixa de seleção.
radio Botão de rádio.
button Botão.
submit Botão de envio.
reset Botão de reset.
file Controle de upload de arquivo.
hidden Controle de entrada escondido.
image Controle de entrada de coordenadas de imagem.
datetime Controle global de entrada de data e hora.
datetime-local Controle de entrada local de data e hora.
date Controle de entrada de data.
month Controle de entrada de ano e mês.
time Controle de entrada de tempo.
week Controle de entrada ano e semana.
number Controle de entrada de número.
range Controle de entrada de número impreciso.
email Controle de entrada de endereço de e-mail.
url Controle de entrada de URL.

Tipo Descrição
search Campo de pesquisa.
tel Campo de entrada de número de telefone.
color Controle de bloco de cores.
Exemplificando
Aplicação dos elementos em HTML5
No exemplo a seguir, implementaremos todos os tipos de elementos de entrada em um

formulário:
Código 1.19 | Formulário com todos os elementos de entrada
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="POST" action="gravaDados.php" enctype="multipart/form-data">
<label>Entrada do tipo: button</label><br>
<input type="button"><br><br>
<label>Entrada do tipo: checkbox</label><br>
<input type="checkbox"><br><br>
<label>Entrada do tipo: color</label><br>
<input type="color"><br><br>
<label>Entrada do tipo: date</label><br>
<input type="date"><br><br>
<label>Entrada do tipo: datetime</label><br>
<input type="datetime"><br><br>
<label>Entrada do tipo: datetime-local</label><br>
<input type="datetime-local"><br><br>
</div>
<label>Entrada do tipo: email</label><br>
<input type="email"><br><br>
<label>Entrada do tipo: file</label><br>
<input type="file"><br><br>
<label>Entrada do tipo: hidden</label><br>
<input type="hidden"><br><br>
<label>Entrada do tipo: image</label><br>
<input type="image"><br><br>
<label>Entrada do tipo: month</label><br>
<input type="month"><br><br>
<label>Entrada do tipo: number</label><br>
<input type="number"><br><br>
</div>
<label>Entrada do tipo: password</label><br>
<input type="password"><br><br>
<label>Entrada do tipo: radio</label><br>
<input type="radio"><br><br>
<label>Entrada do tipo: range</label><br>
<input type="range"><br><br>
<label>Entrada do tipo: reset</label><br>
<input type="reset"><br><br>
<label>Entrada do tipo: search</label><br>

<input type="search"><br><br>
<label>Entrada do tipo: submit</label><br>
</div>
<input type="submit"><br><br>
<label>Entrada do tipo: tel</label><br>
<input type="tel"><br><br>
<label>Entrada do tipo: text</label><br>
<input type="text"><br><br>
<label>Entrada do tipo: time</label><br>
<input type="time"><br><br>
<label>Entrada do tipo: url</label><br>
<input type="url"><br><br>
<label>Entrada do tipo: week</label><br>
<input type="week"><br><br>
</div>
</form>
</body>
</html>
Observe, a seguir, a página construída ilustrada na Figura 1.43.
Figura 1.43 | Tipos de elementos input

Se desejar teste o código apresentado na ferramenta Trinket:
Agora, vamos, então, analisar alguns desses elementos.
Caixas de texto e senhas
As caixas de texto (type text) são os elementos de entrada mais comuns. Esse tipo de
input gera uma caixa de texto de linha única em que o usuário poderá digitar qualquer
tipo de informação. As caixas de texto de senhas (type password) são bastante similares
a elas. A principal diferença é que nos inputs do tipo password, o texto é criptografado
diretamente quando digitado. Observe o exemplo da Figura 1.44.
<label>Placeholder: desaparece ao digitar</label><br>
<input type="text" placeholder="Digite aqui"<br><br>
<label>Texto escondido</label><br>
<input type="password"<br><br>
Figura 1.44 | Inputs dos tipos text e password. Ao digitar no campo do tipo password, os
caracteres são exibidos como marcadores

Ambas as entradas aceitam diversos atributos, como o atributo value, em que se pode
inserir os valores padrão para o campo, ou o atributo placeholder, que exibe um texto
informativo no campo (esse texto desaparece quando o usuário clica na caixa de texto).
Botões
Além do elemento <button>, HTML fornece duas outras formas de criação de botões. A
primeira delas é utilizando-se o input do tipo button. A outra forma de gerar um botão é
utilizando um input do tipo submit. Entretanto, o botão do tipo submit tem a função
específica de enviar o formulário para a página indicada no atributo action de form,
<label>Similar a button</label>
<input type="button" value="Botão"<br>
<label>Botão de envio de formulário</label>
<input type="submit" value="Enviar">
Figura 1.45 | Tipos button e submit
Caixas de seleção únicas e múltiplas
As caixas de seleção permitem que usuários escolham certas opções. Elas são divididas
em dois tipos: caixas de seleção únicas (radio), caracterizadas por seu formato circular,
e caixas de seleção múltiplas (checkbox), caracterizadas pelo seu formato quadrangular.
Código 1.20 |Código de seleção múltipla
<label>Seleção múltipla</label>
<input type="checkbox" name="multiplo" value="3"><br>
Fonte: elaborado pelo autor. Código 1.21 | Código de seleção única
<label>Seleção única</label>
Fonte: elaborado pelo autor. Figura 1.46 | Caixas de seleção múltiplas (checkbox) e únicas
(radio)
Perceba que cada entrada apresenta um mesmo valor para o atributo name. Isso indica à
página de processamento que os campos de seleção representam uma mesma variável.
A diferença entre os campos será dada pelo valor existente no atributo value. Nos
códigos de seleção múltipla e única apresentados, observe que a variável multiplo
recebe os valores [1, 2, 3], enquanto a variável unico recebe o valor 2.
Novos recursos do HTML5 para formulários
HTML5 apresentou novos tipos de entradas para formulários, como os inputs dos tipos
date e color. O tipo date fornece um campo que, quando clicado, exibe um calendário
que permite ao usuário selecionar uma data. A Figura 1.47 ilustra o resultado da
utilização do input do tipo date.
<input type="date">
Figura 1.47 | Input do tipo date

Já as entradas do tipo color permitem que o usuário selecione uma cor. Esse elemento
retorna um código de cores RGB, como vemos na Figura 1.48.
<input type="color">
Figura 1.48 | Input do tipo color
Teste as tags <input type="date"> e <input type="color"> utilizando a ferramenta

Trinket. Aproveite e teste outras tags em html.
Chegamos ao final de uma unidade. O aprendizado foi grande e você conheceu a

linguagem HTML. Agora, você pode iniciar seus projetos de páginas WEB, aplicar os
conhecimentos e criar estruturas de páginas e formulários em HTML.
Bom trabalho!
Referências
GUPTA, G. Mastering HTML5 Forms. Birmingham: Packt Publishing, 2013.

MARIANO, D. Tags HTML5. 2020. Disponível em: https://bit.ly/2MVQOij. Acesso
em: 17 nov. 2020.
TITTEL, E.; NOBLE, J.; COUTO, E. HTML, XHTML e CSS Para Leigos. Tradução
de Elda Couto. Rio de Janeiro: Alta Books, 2018.
reference). [s.d]. Disponível em: https://bit.ly/3tp54kx. Acesso em: 17 nov. 2020.
W3SCHOOLS. HTML <form> enctype Attribute. [s.d.] Disponível

em: https://bit.ly/3tvlvMg. Acesso em: 17 nov. 2020.
DESENVOLVIMENTOS DE
HTML5
É possível construir um formulário de contato utilizando apenas o HTML?
Sim! Utilize os conhecimentos adquiridos até aqui para solucionar esse desafio.
sem medo de errar
Conforme a situação-problema apresentada, você ficou responsável por construir uma

página por meio da qual os clientes da empresa de planos de internet poderão entrar em
contato com o estabelecimento.
Para construir uma página de contato usando apenas HTML, seu código-fonte deve ficar
da seguinte forma:
Vamos, então, analisar cada parte do código. Inicialmente é feita a declaração do

cabeçalho:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <head>
charset=
"utf-8"
>
5. <title>
Formulários
<title>
6. </head>
7.
8. <body>
Após a abertura do corpo da página, deve-se, então, criar o formulário. Veja que ele
aponta para a página contato.php (aprenderemos, em outra oportunidade, sobre php).
9. <form method="POST" action="contato.php">
10. <h1>Contato</h1>
11.
Aqui, temos o primeiro rótulo seguido do seu campo de entrada: um input do tipo
text (caixa de texto):
12. <label>Nome completo</label><br>

13. <input type="text" name="nome" size="50" placeholder="Entre com o seu Nome
Completo">
14.
Essas quebras de linha foram introduzidas para separar os itens inseridos. (Quando
tratarmos sobre CSS, veremos formas melhores de inserir margens.)
15. <br><br>
16.
Aqui, é utilizada uma tabela para posicionar corretamente os itens (mais uma vez,
ressaltamos que adiante apresentaremos formas melhores de posicionar objetos com
CSS).
17. <table>
18. <tr>
19. <td>
20. <label>E-mail</label><br>
21. <input type="email" name="number" placeholder="Entre com o seu E-mail">
22. </td>
23.
24. <td>
25. <label>Telefone</label><br>
26. <input type="email" name="number" placeholder="Entre com o seu
telefone">
27. </td>
28. </tr>
29. </table>
30.
31. <br>
32.
33. <label>Assunto</label><br>
34. <input type="text" name="assunto" size="50" placeholder="Informe o assunto">
35.
36. <br><br>
37.
A seguir apresentamos uma textarea: um campo que permite a inserção de várias linhas
de texto.
38. <label>Mensagem</label><br>
39. <textarea name="mensagem" placeholder="Entre com a
mensagem" rows="5" cols="50"></textarea>
40.
41. <br><br>
42.
O último item do formulário é um input do tipo submit. Esse item é necessário para que
o formulário seja enviado para a página apontada no atributo action da tag <form>.
43. <input type="submit" name="submit" value="Enviar">
44.
45. </form>
46. </body>
47. </html>
48.
Figura 1.49 | Formulário de contato construído usando apenas HTML

Observe que o código apresentado apresenta alguns novos atributos; são eles: size, cols
e rows.
Size altera o tamanho da entrada do tipo text. Observe que os campos e-mail e telefone
apresentam o tamanho padrão. Apenas os campos nome e assunto foram alterados para
ficarem com um tamanho maior.
O elemento textarea recebe os outros dois atributos. Cols determina a quantidade de

colunas permitidas (tem um efeito similar ao size), enquanto rows determina a
quantidade de linhas que a área de texto deverá ter (no exemplo, cinco linhas).
É notável, ainda, que o formulário de contato construído apenas com HTML apresenta
diferenças visuais quando comparado ao formulário modelo (Figura 1.32), uma vez que
este aplicou folhas de estilo personalizadas (CSS), que veremos em outra oportunidade.
Não pode faltar
INTRODUÇÃO AO CASCADING
STYLE SHEETS (CSS)
Qual a importância do CSS na construção de websites?
Enquanto o HTML é utilizado para estruturar as páginas o CSS é utilizado para cuidar
da aparência da página, com a aplicação de estilos, como a formatação de textos, cores
dos elementos, imagens de fundo, entre outros.
Convite ao estudo
Caro aluno, nesta unidade você se aprofundará nos estudos para se tornar um
desenvolvedor web. Com os conhecimentos apresentados nesta unidade, você aprenderá
a estilizar as páginas em html, tornando-as visualmente mais amigáveis. Agora, você vai
aperfeiçoar o layout de suas páginas. Aqui, veremos as folhas de estilo em cascata.
Na seção 1, veremos uma breve introdução à linguagem CSS (Cascading Style Sheets),
a inclusão do CSS em um website, as regras e os seletores CSS, além das propriedades
de texto, formatação, cores e propriedades background em CSS.
Na seção 2, abordaremos layouts em CSS; aprenderemos os conceitos do box model
HTML/CSS, como as propriedades de bordas, preenchimentos e margens; e veremos o
posicionamento de elementos em páginas HTML, além de propriedades como largura e
altura. Por fim, na seção 3, veremos a formatação em tabelas CSS e em formulários
HTML, animações e transição usando-se CSS, além de alguns frameworks CSS.
Vamos lá!
praticar para aprender
Olá!
O conhecimento dos fundamentos da linguagem HTML permite a você a construção de

seus primeiros websites. Entretanto, as páginas que você pode construir usando apenas
os conhecimentos adquiridos nessa linguagem de marcação, possivelmente, não
apresentarão uma interface muito amigável.
Isso se deve ao fato de a linguagem HTML ter sido planejada para armazenar e
estruturar os conteúdos, enquanto a aparência da página é de responsabilidade das
folhas de estilo.
CSS é a sigla para cascating style sheet (folha de estilo em cascata). CSS é uma
linguagem propriamente desenvolvida para configuração de estilo e aparência. Ela é
fundamentada na definição de estilos aplicados a seletores (elementos HTML) por meio
das propriedades.
Códigos CSS podem ser inseridos de três formas:
i. Por meio de declarações inline realizadas diretamente do elemento que se deseja

formatar.
ii. Por meio de declarações na tag de estilos.
iii. E por meio de arquivos externos.
Aqui, veremos como construir códigos HTML usando-se as três formas e qual delas é
considerada mais apropriada.
Nesta seção, você vai conhecer os fundamentos da linguagem CSS, sua sintaxe e
principais características. Você verá, ainda, como formatar textos, alterar cores de
elementos e adicionar imagens como planos de fundo.
Você foi contratado por uma empresa de provedor de internet que solicitou que você
crie a página web do provedor. Assim, você deverá criar a estrutura das páginas e
aplicar o estilo (CSS). Dessa vez, você criará uma página de apresentação da empresa
(“QUEM SOMOS”), mas enquanto você trabalhava em uma página experimental para a
empresa de vendas de planos de internet, você construiu os códigos index.html e
estilo.css a seguir:
Código 2.1 | index.html
<!DOCTYPE html>
<html>
<head>
<title>Planos de internet</title>
<link href="estilo.css"rel="stylesheet">
</head>
<body>
<h1>Quem somos?</h1>
<h3>Planos de internet de qualidade</h3>
<span>tag span</span>
<p>
Somos uma empresa no mercado há mais de 10 anos trazendo a melhor banda

larga para nossos clientes.
</p>
</body>
</html>
Código 2.2 | estilo.css
/* Arquivo estilo.css */
body{
font-family: "Roboto";
color:#333;
font-size:16px;
h1{ color: #333; }
h3{ color: #777; }

Foi sugerido por um dos membros da equipe, a inclusão de uma fonte externa, a fonte
“Roboto”: uma fonte gratuita disponível na plataforma de fontes do Google. Você
acessou o site, fez o download da fonte e a instalou em seu computador.
Entretanto, ao visualizar a página no navegador de outro computador, você notou que a

fonte correta não estava sendo carregada, como pode ser visto na Figura 2.1:
Figura 2.1 | Como a página foi exibida
Roboto é uma fonte não serifada, o que difere da fonte apresentada. Observe a Figura
2.2 a seguir:
Figura 2.2 | Exemplo de texto escrito com a fonte Roboto

Fonte: captura de tela do Google Fonts adaptada pelo autor.
Explique o que pode ter ocorrido e como você pode resolver esse problema.
Faça o download da fonte Roboto em Google Fonts.
conceito-chave
A estrutura de uma página Web pode ser criada utilizando-se apenas a linguagem
HTML, possibilitando a construção de seus primeiros websites, todavia, é possível criar
páginas com o visual não tão amigável para o usuário. Na medida em que páginas da
internet se tornaram mais complexas, tornou-se necessário melhorar e estruturar o seu
desenvolvimento. Isso se deve ao fato de a linguagem HTML ter sido planejada para
armazenar e estruturar os conteúdos, porém o visual e a aparência da página devem ser
desenvolvidos por meio das folhas de estilo em cascata (ou CSS).
Folhas de estilo em cascata
CSS, do inglês cascading style sheets, ou na tradução “folhas de estilos em cascata”, é

uma linguagem de estilos utilizada para se definir a aparência de um documento web.
CSS surgiu com um dos objetivos de separar códigos relacionados a conteúdo dos
códigos relacionados à aparência de uma página. A Figura 2.1 ilustra a estrutura de
separação de conteúdo e a aparência de um website. Observe que, para o conteúdo e a
estrutura de uma página, é utilizada a linguagem html, e para a aparência (“estilo”) da
página, a linguagem CSS. Assim, enquanto a estrutura básica e o conteúdo de uma
página, tais como tags estruturais, textos, imagens e vídeos, são construídos em
arquivos HTML, os arquivos CSS armazenam os estilos, como fontes, espaçamentos,
cores, tamanhos e outros elementos estruturais.
Figura 2.3 | Separação de conteúdo e aparência para a criação de um website

Com o CSS, é possível criar um único arquivo de folhas de estilo e importá-lo em

diversas páginas HTML, o que permitirá economizar muito tempo no desenvolvimento
e na manutenção de códigos.
Atenção
HTML e CSS não são linguagens de programação. Enquanto HTML é uma linguagem
de marcação de hipertextos, CSS é uma linguagem de folhas de estilos.
Incluindo CSS em uma página HTML
Há três formas de incluir estilos em arquivos HTML:
i. Atributo style (inserção inline).

ii. Tag <style>.
iii. Importação de arquivo “.css”.
Atributo style
As configurações de estilo são aplicadas diretamente na tag que se deseja formatar:
<p style="color: red">Olá mundo!</p>
No trecho <p style= "color: red">Olá mundo!</p> , a cor do texto (color) é alterada

para vermelho (red) por meio do atributo de estilos (style), que pode ser aplicado a
qualquer tag HTML.
Tag <Style>
As configurações de estilo são inseridas dentro da tag < style >< /style >. Nesse caso, é
necessário informar um seletor, que será abordado na próxima seleção.
<style>
p{
color: red;
}
</style>
<p>Olá mundo!</p>
Esse código funciona similar ao trecho <p style="color: red">Olá mundo!</p>. Porém,

a principal diferença é que, enquanto o atributo style utilizado em <p style=></p>aplica
uma configuração a uma tag específica, a tag <style> aplicará a formatação a todas as
ocorrências do seletor, ou seja, todas as ocorrências da tag p, logo, todo conteúdo
presente em tags <p> recebe a cor vermelha.
Importação de um arquivo CSS
Outra forma de incluir um código de estilo em um documento Web é importar um

arquivo CSS por meio da tag <link>. Em geral, essa tag deve ser incluída dentro do
cabeçalho da página, isto é, entre as tags <head></head>. Um arquivo CSS deve conter
apenas códigos escritos no padrão CSS. Observe o exemplo, a seguir, de como é
realizada a importação do CSS:
<link href="estilo.css" rel="stylesheet">
Nesse exemplo, a tag <link> recebe dois atributos. O primeiro é o atributo href, que
informa a localização e o nome do arquivo que será ligado à página HTML. O arquivo
importado é denominado “estilo.css”, e para esse exemplo, deve estar no mesmo
diretório do arquivo HTML que o importou. O segundo é o atributo rel, que informa o
tipo do arquivo conectado, que, nesse caso, trata-se de uma folha de estilos (stylesheet).
Os dois primeiros métodos para inserção de estilos são realizados internamente, ou seja,
no código HTML. Portanto, o uso desses métodos não é considerado uma boa prática,
logo, a maneira mais adequada para aplicar estilos na sua página web é por meio da
inserção dos códigos relacionados à aparência em um arquivo externo, nomeado com a
extensão “.css”.
Sintaxe da linguagem CSS
A sintaxe básica da linguagem CSS inclui a inserção de um seletor e uma ou várias

declarações de estilo dentro de chaves. As declarações devem ser separadas por ponto e
vírgula (“ ; ”). Uma declaração é composta por uma propriedade e um valor para essa
propriedade, como pode ser observado na Figura 2.4.
Figura 2.4 | Sintaxe do CSS

Fonte: adaptado de MDN (2020).
No exemplo da Figura 2.4, o seletor p (parágrafos) receberá a propriedade color (cor)

com o valor red (vermelho). Veja como a estrutura de declarações CSS é simples e
lógica. Nesse exemplo, nosso seletor escolhido para aplicação das regras de formatação
foi p, o que indica que as propriedades serão aplicadas a todas as tags <p>. Como
podemos observar, é possível seguir essa regra para todas as tags, que também serão
consideradas seletores. Todavia, seletores vão muito além de tags.
Assimile
Por que o nome se refere a estilos em cascata?
O estilo em cascata se refere à forma como os navegadores de internet carregam

arquivos de estilos. Uma página HTML pode importar de nenhuma a diversas folhas de
estilo. Logo, é natural que possam ocorrer conflitos, isto é, um mesmo seletor pode
receber diversas declarações diferentes em partes diferentes do código. Para definir qual
declaração deverá ser aplicada na apresentação final da página, CSS utiliza o efeito
cascata, em que declarações realizadas em diferentes níveis possuem prioridade sobre
outros níveis, como pode ser observado na Figura 2.5.
Figura 2.5 | Ordem de carregamento do CSS

Nesse exemplo, os estilos de maior prioridade são os inseridos com a marcação:
!important
E as de menor prioridade são as folhas de estilo do navegador.
Por exemplo, imagine que você acaba de criar uma página e adicionou o seguinte
código:
Código 2.3 | index.html – Olá mundo!
<!DOCTYPE html>
<html>
<head>
<title>Minha página</title>
</head>
</hmtl>
O código apresentado vai gerar a página ilustrada na Figura 2.6:
Figura 2.6 | Exemplo de página

Observe que, no código apresentado, não foram especificados a fonte, o tamanho da

fonte, a cor do fundo, entre outras coisas. Para a formatação aplicada a essa página, foi
considerada as configurações definidas pelo navegador, ou seja, considerou-se um nível
de menor importância.
Agora observe o Código 2.4 e a Figura 2.7 a seguir:
Código 2.4 | Tag <style> com cor de fundo preto e cor da fonte vermelha incorporada
ao arquivo index.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: black;
color:red;
}
</style>
</head>
<body>
<p>Olá mundo!</p>
</body>
</html>
Figura 2.7 | Background
Dessa vez, os estilos foram aplicados usando-se a tag <style>. Veja que foi aplicada ao
seletor body a propriedade background-color (cor de fundo) de valor black (preto).
Além disso, foi aplicada ao body a propriedade color (cor de texto) de valor red
(vermelho). Mesmo assim, o conteúdo da tag <p> recebeu a cor vermelha.
Isso ocorre porque: (1) declarações da tag <style> têm prioridade sobre a folha de estilo
padrão do navegador (que iria inserir fundo branco e cor de texto preta) e (2) a tag
<p> está inserida dentro das tags <body></body>; portanto, na ausência de uma
declaração para o seletor p, os estilos da tag de nível superior são aplicados à tag em
questão.
Agora, veja o que ocorre se você adicionar um atributo style que muda a cor da tag <p>
para azul (Figura 2.8):
Código 2.5 | Tag <style> com atributo style que altera a cor da tag <p> para azul
<!DOCTYPE html>
<html>
<head>
<style>
body{
color:red;
}
</style>
</head>
<body>
<p>style="color:blue">Olá mundo!</p>
</body>
</html>
Fonte: elaborado pela autora.
Figura 2.8 | Atributo style

Aqui, observamos que o atributo style tem prioridade sobre a tag </style>. A não ser que
haja a declaração !important, que tem prioridades sobre todas as outras, desde que ela
seja aplicada diretamente sobre o seletor desejado. Observe a Figura 2.9:
Código 2.6 | Declaração !important aplicada ao seletor p, sendo priorizado e sendo

aplicada a cor verde ao texto
<!DOCTYPE html>
<html>
<head>
<style>
body{
color:red;
}
p{
color:green !important;
}
</style>
</head>
<body>
<p>style="color:blue">Olá mundo!</p>
</body>
</html>
Fonte: elaborado pela autora.
Figura 2.9 | Valor !important
Nesse caso, temos três declarações para a propriedade color: verde, vermelho e azul.
Assim, podemos observar claramente a importância do efeito cascata, que age como
camadas sobrepondo estilos declarados em folhas de estilo de menor importância. A
Figura 2.10 ilustra como o navegador reconhece os estilos aplicados e seleciona apenas
um deles.
Figura 2.10 | Visualização da propriedade inspecionar elemento do navegador Google Chrome

Fonte: captura de tela da propriedade inspecionar elemento, do Google Chrome, adaptada
pelo autor.
Note que a cor azul (blue) foi reconhecida, mas o navegador optou pela propriedade
green (verde) que é declarada com !important
Veja e teste os exemplos de códigos vistos anteriormente a seguir:
Regras e seletores em CSS
Classes (class) e identificadores (id)
Antes de introduzirmos os seletores CSS, é necessário apresentar dois atributos HTML

importantes: class e id. O atributo class (classe) recebe um nome que pode ser aplicado
a um ou mais elementos. Já o atributo id deve ser um nome identificador para um único
elemento da página.
<tag class="..."id="...">[...]</tag>
Veja um exemplo simples de uso:
<p>class="vermelho">Olá mundo!</p>
<p>id="apresentacao">Seja bem-vindo(a)</p>
Aqui, temos duas tags <p>, sendo que a primeira recebe a class “vermelho” e a segunda
recebe o id “apresentação”.
Seletores
Seletores representam elementos de uma página HTML cujas propriedades CSS serão
aplicadas (SILVA, 2018). Como apresentado na seção anterior, tags são simples
exemplos de seletores, mas além delas, existem muitos outros, como as classes, os
identificadores, os seletores universais e os seletores múltiplos (quando múltiplos
elementos são listados). Observe o Quadro 2.1 a seguir:
Quadro 2.1 | Tipos de seletores
Seletor Exemplo
Descrição
Seleciona todos os elementos com as classes de valor
.class .introducao
“introdução”, ou seja, class="introducao"
#id #nome Seleciona o elemento de id="nome"
* * Seleciona todos os elementos
elemento p Seleciona todos os elementos <p>
elemento,elemento,.. div, p Seleciona todos os elementos <div> e <p>
Fonte: adaptado de W3Schools ([s.d.]).
Observe, a seguir, exemplos de aplicação de seletores. Inicialmente, utilizamos apenas a

propriedade que altera a cor da fonte (color).
Agora, vamos separar os códigos em dois arquivos diferentes, sendo um arquivo .html
(Código 2.7) e o outro .css (Código 2.8).
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Minha página</title>
6. <link href="estilo.css"rel="stylesheet">
7. </head>
8. <body>
9. <p>tag p</p>
10.<span>tag span</span>
11. <div>tag div</div>
12.<p class="texto-verde">
13. class texto-verde
14.</p>
15.<p class="texto-vermelho">
16. class texto-vermelho
17.</p>
18.<p id="azul">
19. id azul
20.</p>
21.<p class="texto-verde">
22. class texto-verde
23. </p>
24. </body>
25. </html>
/* Parágrafos devem estar em cinza */
p{
color: gray;
/* span em roxo */
span{
color: purple;
/* texto em divs em laranja */
div{
color: orange;
/* classes */
.texto-verde{
color: green;
.texto-vermelho{
color: red;
/* IDs */
#azul{
color: blue;
Os códigos produzirão a seguinte página (Figura 2.11):
Figura 2.11 | Diferentes tipos de seletores

Veja os códigos e o resultado a seguir:
Pode-se observar que classes e IDs só aplicam formatações aos elementos em que foram
declarados. Enquanto classes podem ser utilizadas múltiplas vezes, um ID só pode ser
usado em um único elemento. Para diferenciar classes e IDs, CSS requer que os
seletores sejam declarados usando-se os símbolos “.” e “#”, respectivamente. Logo, a
declaração “.texto-verde” representa uma classe, enquanto a declaração “#azul”
representa um ID.
Assimile
Comentários CSS
Comentários são trechos de códigos que são ignorados durante a interpretação dos
comandos. Na prática, eles são utilizados para documentação, i.e., para inserir
explicações sobre o funcionamento dos códigos. Em CSS, comentários devem ser
inseridos entre os símbolos /* e */. Por exemplo:
/* Isto é um comentário CSS */
p{ color: red; }
/* Enquanto a linha de cima será lida pelo navegador,
todos os trechos entre comentários serão ignorados. */
Você pode realizar declarações múltiplas, separando os seletores por vírgulas:
/* Parágrafos, divs e spans devem estar em cinza */
p, div, span{
color: gray;
A Figura 2.12 mostra o resultado da página. Observe que você deve apagar as
declarações individuais para os seletores div e span ou, então, as regras definidas
posteriormente substituirão essa nova regra. Isso se deve ao efeito em cascata, que será
explicado no decorrer desta seção.
Figura 2.12 | Declarações múltiplas

Por fim, você deve conhecer o seletor universal “*”. Esse seletor aplica regras a
qualquer elemento. Para ilustrar isso, vamos apresentar um exemplo que explora uma
regra aplicada por navegadores: a regra de margens. Por padrão, navegadores podem
aplicar regras CSS em alguns elementos. Como exemplo, podemos listar as margens
aplicadas em elementos. Observe o texto inserido na tag <p>, da Figura 2.12: a tag <p>
recebe uma configuração de margem diferente das demais e note que o espaçamento de
todas as tags para a margem da página, isso foi realizado por meio da inclusão do
asterisco (*) antes de abrir chaves do seletor. Agora, vamos aplicar uma propriedade
que remove todas as margens e aplicá-la ao seletor universal:
/* Seletor universal */
*{
margin:0;
Nesse exemplo, a propriedade margin (margem) recebe o valor 0. Aplicada ao seletor

universal, ela removerá margens personalizadas de todas as tags que as possuem (Figura
2.13).
Figura 2.13 | Margens removidas
Agora, observe que todas as tags possuem a mesma margem. Além disso, a margem
para a borda da página foi removida. O seletor universal permite que você reinicie as
configurações de estilo de uma página e construa seus estilos sem influência de estilos
herdados de outras folhas de estilo, que será abordada na sequência da seção. No
próximo tópico, apresentaremos algumas propriedades CSS.
Propriedades de textos
Agora, falaremos das outras propriedades CSS referentes a fontes. As fontes dizem
respeito à forma como são “desenhados” os caracteres usados em textos. O Quadro 2.2
sintetiza algumas propriedades CSS que podem ser aplicadas às fontes.
Quadro 2.2 Tipos de propriedades de texto CSS.
Propriedade Descrição Entradas permitidas
nome da família de fonte, como:

"verdana", "helvetica", "arial" etc.
font-family Família das fontes.
nome da família genérica, como:
"serif", "sans-serif", "cursive" etc.
• xx-small
• x-small
• small
• medium
• large
• x-large
font-size Tamanho da fonte.
• xx-large
• smaller
• larger
length: medida CSS de comprimento
• exemplos: px, em, rem, %
• normal: fonte normal

font-style Estilo da fonte. • italic: fonte inclinada
• oblique: fonte obliqua
• normal: fonte normal

Altera a altura. da fonte e converte em
font-variant • small-caps: transforma em
maiúsculo.
maiúsculas de menor altura
• normal
• bold
• bolder
• lighter
• 100
• 200
font-weight “Peso da fonte” (variações de negrito). • 300
• 400
• 500
• 600
• 700
• 800
• 900
font-stretch Grau de expansão de glifos. • normal

• ultra-condensed
Propriedade Descrição Entradas permitidas
• extra-condensed
• condensed
• semi-condensed
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
Declaração abreviada de todas as Exemplo:

font propriedades apresentadas font: italic small-caps bold 12px/30px
anteriormente. Georgia, serif;
Fonte: adaptado de Maujor (2016); W3Schools (2020).
A propriedade responsável por alterar o tipo de fonte utilizada em um site é a font-

family. As fontes, em geral, podem ser classificadas em serifadas e não serifadas
(observe a diferença na Figura 2.14). No entanto, a propriedade font-family permite
alterar as fontes usadas para diversas famílias distintas. Uma das fontes tipográficas
mais populares é “Helvetica”, seguida por “Arial”.
Figura 2.14 | Diferença entre fontes serifadas e não serifadas.
As fontes que não possuem serifas são consideradas mais esteticamente agradáveis.
Entretanto, as serifas facilitam a percepção da palavra pelo olhar humano. Elas são
muito utilizadas em blocos de texto pequenos, como em jornais.
Antes de alterar a família da fonte de um website, deve-se avaliar se os leitores daquele

site terão as fontes instaladas em suas máquinas, caso contrário, o sistema alterará a
exibição para a fonte padrão do navegador (em geral, Times New Roman). Para tentar
amenizar esse problema, pode-se declarar duas ou mais fontes, que serão carregadas de
acordo com a prioridade estabelecida. Assim, se o usuário não possuir a primeira fonte
declarada, o sistema tentará carregar a próxima fonte listada. Apesar disso, não é
recomendado utilizar fontes incomuns.
Outra propriedade digna de nota é a font-size, que altera o tamanho do texto. Em geral,
os valores de font-size são inseridos em pixels (ex.: 12px), mas existem outras unidades
de medida que podem ser utilizadas, como “em”, “rem”, valores percentuais, entre
outros.
Há, ainda, outras propriedades, como font-style, font-variant, font-weight e font-stretch.

Font-style permite a inserção de texto em itálico. Ela é menos utilizada por trazer o
mesmo efeito que as tags <i> e <em>. A font-variant permite variações na fonte usada,
como deixar o texto em maiúsculo e com um tamanho menor. Já a propriedade font-
weight com valor bold aplica um efeito parecido às tags <b> e <strong>, entretanto, essa
propriedade permite definir o “peso” da fonte, ou seja, definir quão finos ou grossos
serão os caracteres, podendo-se utilizar nomes como normal, bold, bolder e lighter ou
valores numéricos, que vão de 100 a 900. A propriedade font-stretch altera o
espaçamento entre caracteres.
Exemplificando
A seguir, veja um exemplo de implementação das propriedades de fonte. Nele, serão

utilizadas as classes para se explorar uma série de propriedades CSS para formatação de
fontes.
1.<!DOCTYPE html>
2.<html>
3.<head>
4. <title>Fontes</title>
7.</head>
8.<body>
9.
10. <p>Texto normal.</p>
11.
12. <p class="pesada">
13. Testando o valor bolder da propriedade font-weight.
14. </p>
15.
16. <p class="leve">
17. Testando o valor lighter da propriedade font-weight.
18. </p>
19.
20.<p class="italico">Font-style: Itálico.</p>
21.
22.<p class="oblique">Font-style: Olique.</p>
23.
24.<p class="variante">Variante (font-variant: small-caps).</p>
25.
26.<p class="condensado">Ultra-condensado.</p>
27.
28.</body>
29.</html>
p{
font-family: "helvetica", "arial";
.pesada{
font-weight: bolder;
}
.leve{
font-weight: lighter;
.italico{
font-style: italic;
.oblique{
font-style: oblique;
.variante{
font-variant: small-caps;
.condensado{
font-stretch: ultra-condensed;
O resultado do código pode ser visto na Figura 2.15.
Figura 2.15 | Propriedades de fontes

Formatação de alinhamento
A propriedade responsável por configurar o alinhamento do texto é text-align. As

propriedades de formatação de texto (text-*) se estendem às funcionalidades das
propriedades de fontes (font-*). Há diversas propriedades de formatação de textos, e a
propriedade text-align pode receber os seguintes valores:
 left: alinha à esquerda (valor padrão);

 right: alinha à direita;
 center: alinha ao centro;
 justify: alinha o texto justificado;
 inherit: herda o valor do alinhamento do elemento pai.
No exemplo a seguir, vamos explorar as propriedades de alinhamento usando classes.

Observe os Códigos 2.11 e 2.12 a seguir:
Código 2.11 | estilo.css – propriedade de alinhamento utilizando classes
.direita{
text-align: right;
.justificado{
text-align: justify;
}
.esquerda{
text-align: left;
.centro{
text-align: center;
Código 2.12 | HTML
<!DOCTYPE html>
<html>
<head>
<title>Texto</title>
<link href="estilo.css"rel="stylesheet">
</head>
<body>
<p class="esquerda">Alinhado à esquerda.</p>
<p class="centro">Alinhado ao centro.</p>
<p class="direita">Alinhado à direita.</p>
<p class="justificado">
Texto justificado: Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Integer sapien sapien,
finibus ac sollicitudin et, gravida nec lacus.
Fusce ullamcorper fermentum ante,
non pellentesque ipsum volutpat at.
</p>
</body>
</html>
O exemplo gerará a seguinte página (Figura 2.16):
Figura 2.16 | Alinhamento do texto
Cores
Anteriormente, apresentamos a propriedade color, que altera a cor da fonte, e vimos que
ela pode receber os nomes das cores em inglês: red (vermelho), green (verde), blue
(azul) etc. Entretanto, existem métodos melhores para definição de cores, usando-se, por
exemplo, diferentes sistemas de cores. Podemos alterar cores utilizando as seguintes
propriedades (MAUJOR, 2016):
 código hexadecimal: #ffc6d9.

 código rgb: rgb(255,235,0).
 código rgba: rgb(255,235,0, 0.7).
 código hsl: hsl(210,100%,40%).
 código hsla: hsla(155,80%,35%,0.4).
 palavra-chave: red, blue, green, etc.
 transparente: transparent.
Em páginas web, o sistema mais utilizado é o código hexadecimal. Esse sistema é

composto por um código de seis dígitos iniciado por “#” (não confunda com os IDs,
pois códigos hexadecimais devem ser escritos entre aspas). Os dígitos podem variar de
0-9ABCDEF, em que a letra A representa o número 10, a letra B representa o número
11, a letra C representa o número 12, a letra D representa o número 13, a letra E
representa o número 14 e a letra F representa o número 15. Como na cor “#FF0000”: os
dois primeiros dígitos representam a quantidade de vermelho (“FF” representa a
quantidade máxima), os dois seguintes representam a quantidade de verde e os dois
últimos representam a quantidade de azul (“00” é o valor mínimo). Logo, pode-se
concluir que “#FF0000” é o código da cor vermelha.
Dica
Acesse o site Adobe Color e use a paleta de cores para selecionar uma cor. A Figura
2.17 mostra o código hexadecimal da cor e de outras cores que harmonizam com a cor
selecionada.
Figura 2.17 | Ferramenta de seleção de cores da Adobe
Fonte: Adobe Color.
A ferramenta de seleção de cores da Adobe é bastante popular entre profissionais da

área de web design.
Você não precisa memorizar os códigos hexadecimais. Sempre que precisar escolher
uma cor, você pode consultar na web ferramentas que ajudem a selecionar cores HTML
para o padrão hexadecimal de cores.
Propriedades background em CSS
As propriedades de background permitem alterar o plano de fundo, alterando as cores

ou até mesmo inserindo figuras. Elas são iniciadas com “background-*”.
A seguir, veja um exemplo de uso das propriedades que alteram a cor do fundo de uma
página; uma propriedade bastante utilizada é a background-color. Observe os códigos
index.html (Código 2.13) e o estilo.css (Código 2.14) a seguir:
Código 2.13 | index.html – aplicando ao html a propriedade background-color
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Cor de fundo</title>
7. </head>
8. <body>
9. <p>
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien sapien,
finibus ac sollicitudin et, gravida nec lacus. Fusce ullamcorper fermentum ante, non
pellentesque ipsum volutpat at.
11. </p>
12. </body>
13. </html>
Código 2.14 | estilo.css - propriedade background-color
body{
/* Cor de texto */
color:#ffffff; /* branco */
/* Cor de fundo */
background-color:#000000; /* preto */
O código apresentado gerará a página ilustrada na Figura 2.18:

Figura 2.18 | Alterando a cor de fundo para preto e do texto para branco
Ao se alterar a cor de fundo, a cor das fontes deve contrastar com ela. Logo, se alterou a
cor do fundo para preto, a cor da fonte deve ser oposta. Entretanto, não é recomendado
usar cores escuras como cor de fundo.
Imagens como plano de fundo
CSS possibilita, ainda, usar uma imagem como plano de fundo. Para isso, você pode
utilizar a propriedade background-image. Nesse caso, o nome da imagem deve ser
passado entre o valor url(“NOME-DA-IMAGEM.extensão”).
Exemplificando
Como utilizamos imagens como planos de fundo? Vamos a um exemplo!!
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Cor de fundo</title>
7. </head>
8. <body>
9. <p>
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien sapien,
finibus ac sollicitudin et, gravida nec lacus. Fusce ullamcorper fermentum ante, non
pellentesque ipsum volutpat at.
11. </p>
12. </body>
13. </html>
Código 2.16 | estilo.css – imagem de fundo
body{
/* Imagem de fundo */
background-image: url('imagem_fundo.jpg');
background-size: 100%;
Nesse caso, a imagem denominada “imagem_fundo.jpg” será inserida como imagem de

background da tag <body> (Figura 2.19). Perceba que ao se usar a propriedade
background-image, é possível adicionar textos sobre a imagem, o que não é permitido
por padrão ao usar uma imagem usando a tag <img>.
Figura 2.19 | Inserindo uma imagem de background

Fonte: Pixabay.
Observe que, nesse caso, uma propriedade adicional foi inserida: background-size, que
determina o tamanho da imagem de fundo (nesse caso, 100%). Atente-se, ainda, à
extensão da imagem “.jpg”. Muitos erros cometidos ao inserir imagens de fundo
ocorrem devido à inserção incorreta da extensão da imagem. Note, também, que a
imagem deve estar localizada no mesmo diretório do arquivo “index.html”. Caso não
esteja, a imagem não será reconhecida.
Veja os códigos e o resultado a seguir:
No Quadro 2.3, ilustramos uma série de propriedades utilizadas para configurar o plano
de fundo (background):
Quadro 2.3 | Propriedades CSS para background
Propriedade Descrição
background-color Especifica a cor de fundo a ser usada.
background-image Especifica UMA ou MAIS imagens de fundo a serem usadas.
background-position Especifica a posição das imagens de fundo.
background-size Especifica o tamanho das imagens de fundo.
background-repeat Especifica se as imagens deverão ser repetidas.
background-origin Especifica a área de posicionamento das imagens de fundo.

Propriedade Descrição
background-clip Especifica a área de pintura das imagens de fundo.
background- Especifica se as imagens de fundo são fixas ou rolam com o resto da

attachment página.
Propriedade genérica que permite a inserção de todas as propriedades

background
listadas anteriormente.
Fonte: adaptado de W3Schools ([s.d.]).
Reflita
Suponha que você aplique as propriedades background-image e background-color a um

mesmo seletor. Qual propriedade terá prioridade? Inclua o background-color no
exemplo a seguir, teste na ferramenta Trinket e observe o resultado.
Saiba mais
O Dinossauro das CSS
O engenheiro carioca Maurício Samy Silva ou, simplesmente, Maujor, aposentou-se no

ano de 1999, quando resolveu se aventurar no mundo do desenvolvimento web. Em seu
site pessoal, Maujor começou a escrever artigos em língua portuguesa que explicavam
conceitos de CSS.
O engenheiro carioca Maurício Samy Silva ou, simplesmente, Maujor, aposentou-se no

ano de 1999, quando resolveu se aventurar no mundo do desenvolvimento web. Em seu
site pessoal, Maujor começou a escrever artigos em língua portuguesa que explicavam
conceitos de CSS.
Por ter sido um pioneiro na divulgação da linguagem CSS no Brasil, seus tutoriais
estavam sempre indexados em ferramentas de busca (i.e., Google). Mas o que fez dele a
grande referência brasileira quanto a folhas de estilo foi o efeito CSS, que exibia um
dinossauro ao passar o mouse sobre os links (efeito que foi, infelizmente, removido das
versões mais recentes do seu site). Ele se autointitula: “o dinossauro das CSS”. Com
bom humor e uma linguagem simples, o site do Maujor, até hoje, é considerado uma
referência na área, contendo uma série de especificações de propriedades CSS. Por
exemplo, veja o tutorial de CSS moderno “explicado para dinossauros”:
MAUJOR. CSS moderno explicado para dinossauros. 2016.
Pesquise mais
Confira a seguir algumas recomendações de conteúdo complementar que pode auxiliar

nos seus estudos.
Recomendações de artigos:
 MDN WEB DOCS. Referência de CSS. 2020.
 MARIANO, D. Folhas de estilo em cascata (CSS). Diegomariano. 15 ago.
2020a.
 MARIANO, D. Iniciando a construção de um Website. Diegomariano. 15 ago.
2020b.
Dicas de videoaulas:
 Fundamentos das CSS. [S.l.: s.n.], 2017. 1 vídeo (12:24 min.) Publicado pelo
canal Diego Mariano.
Disponível em: https://bit.ly/2NYGw1Y. Acesso em: 23 fev. 2021.
 MARIANO, D. CSS3. [S.l.: s.n.], 2017. 1 vídeo (8:02 min.) Publicado pelo
canal Diego Mariano.
Nesta seção, você aprendeu os fundamentos da linguagem CSS; nas próximas seções,
você aprenderá as propriedades referentes aos espaçamentos de elementos HTML.
Até lá!
Referências

MARIANO, D. CSS3. [S.l.: s.n.], 2017. 1 vídeo (8:02 min.) Publicado pelo canal Diego
Mariano. Disponível em: https://bit.ly/2MOrCuo. Acesso em: 23 fev. 2021.
MARIANO, D. Folhas de estilo em cascata (CSS). Diegomariano. 15 ago. 2020a.

Disponível em: https://bit.ly/3c4oNxR. Acesso em: 19 out. 2020.
Fundamentos das CSS. [S.l.: s.n.], 2017. 1 vídeo (12:24 min.) Pulbicado pelo canal
Diego Mariano.
Disponível em: https://bit.ly/3c6pbff. Acesso em: 23 fev. 2021.
MARIANO, D. Iniciando a construção de um Website. Diegomariano. 15 ago. 2020b.

Disponível em: https://bit.ly/3kQ2NuL. Acesso em: 19 out. 2020.
MAUJOR. As 8 propriedade css para estilização de fontes e seus segredos. 2016.

Disponível em: https://bit.ly/3rgXdUt. Acesso em: 23 fev. 2021.
MAUJOR. CSS moderno explicado para dinossauros. 2016. Disponível em:

https://bit.ly/3sQkNrO. Acesso em: 23 fev. 2021.
MDN WEB DOCS. CSS básico. 2020. Disponível em: https://mzl.la/38a6juQ. Acesso
em: 23 fev. 2021.
MDN WEB DOCS. Referência de CSS. 2020. Disponível em: https://mzl.la/3sJcZrA.

Acesso em: 23 fev. 2021.

W3SCHOOLS. CSS font property. 2021. Disponível em: https://bit.ly/3eb1uW2.
INTRODUÇÃO AO CASCADING
STYLE SHEETS (CSS)
Como garantir que fontes externas de uma página sejam exibidas corretamente
em todos os computadores?
A incorporação de fontes externas possibilita que sua página seja corretamente exibida
em computadores que não possuam as fontes desejadas instaladas. O @font-face
permite que uma fonte externa possa ser incorporada a uma página HTML.
SEM MEDO DE ERRAR
O que aconteceu é que a fonte utilizada não estava instalada no computador em que o
site foi visualizado. Para solucionar esse problema, pode-se utilizar a diretiva @font-
face.
Essa diretiva do CSS permite que você insira uma fonte diretamente no código fonte de
um site.
 Passo 1 - baixando a fonte: acesse o site Google Fonts e faça o download do
arquivo “Roboto.zip”.
 Passo 2 - abra o arquivo com algum programa de extração de arquivos
compactados (recomendamos o WinRar).
Figura 2.20 | Conteúdo do arquivo Roboto.zip
Fonte: captura de tela do programa de descompactação de arquivos elaborado pelo autor.
 Passo 3 - extraindo os arquivos. Vamos utilizar apenas o arquivo “Roboto-

Regular.tff”.
Copie esse arquivo e cole no mesmo diretório do seu site.
 Passo 4 - adicione o seguinte código no arquivo “estilo.css”:
@font-face {
font-family:"Roboto";
src: url("Roboto-Regular.ttf");
O @font-face permite que uma fonte externa possa ser incorporada a uma página
HTML. A incorporação de fontes externas possibilita que sua página seja corretamente
exibida em computadores que não possuam as fontes desejadas instaladas (Figura 2.21).
Figura 2.21 | Página com a fonte externa carregada

NÃO PODE FALTAR
LAYOUT EM CSS
O que é o Box Model?
O Box Model é um conceito fundamental para a composição de páginas HTML, ele

visualiza cada elemento da página como uma caixa e define algumas propriedades,
como bordas e margens, permitindo um adequado posicionamento e ajuste na página
construída.
Caro aluno, conhecer as estruturas de uma página web não é o suficiente para construir
uma página WEB amigável. Você deve ter percebido que a maior parte dos websites
comerciais possui estilos bem elaborados, que, com apenas HTML, possivelmente, não
produziria o mesmo resultado. No HTML, tags estruturais são utilizadas para
determinar a semântica dos tipos de conteúdo inseridos. Nesse quesito, CSS pode ser
essencial para construir páginas mais atrativas. Você pode posicionar corretamente
elementos em determinadas posições.
Um dos conceitos importantes no desenvolvimento de páginas WEB é o box model

HTML/CSS ou, na tradução para português, modelo de caixa. O box model visualiza
cada elemento de uma página HTML como uma caixa e define algumas propriedades
para manipular como os dados serão formatados. O box model permite alterar as
margens dos elementos, dividindo a estrutura de uma caixa em três partes: margem
externa, borda e margem interna (também conhecida como preenchimento).
Além disso, para desenvolver uma página WEB, é importante conhecer algumas
propriedades, como altura e largura, e o posicionamento dos elementos em CSS. As
propriedades de posicionamento permitem definir onde um elemento deverá aparecer
em uma página WEB, se sua posição será fixa ou baseada em outros elementos da
página.
Por fim, veremos alguns estilos que serão aplicados em vídeos exibidos na página. Você
também será introduzido a um conceito fundamental para a construção de páginas
responsivas: os containers.
Você havia sido requisitado a construir uma página de contato para a empresa de
provedor de internet, agora, você deve recriar a página de contato. Entretanto, deve
construir uma página completa com cabeçalho, menu de navegação, área de conteúdo
delimitada por um container e rodapé.
No menu de navegação, você deve incluir links para:
 Página inicial.
 Página “quem somos”.
 Página “produtos”.
 Página “contato”.
Importante
 Você pode utilizar os códigos construídos anteriormente como base para iniciar
o desenvolvimento da sua página.
 Utilize tags estruturais para cada parte do site. Ex.: header, nav, main, article,
div.
 Chame o logo do site de “logo.png”. Segue abaixo um exemplo:
Figura 2. 22 | Logo do provedor de Internet

 NÃO utilize tabelas para colocar inputs em colunas! Utilize a propriedade float.
 O botão de enviar deve ter cor de fundo verde e borda verde escura.
Bons estudos!
conceito-chave
Caro aluno, um conceito fundamental para construção de documentos web é o Box

Model. O Box Model é utilizando para a inserção de bordas e margens em elementos
HTML, permitindo um adequado posicionamento e ajuste na página construída.
Propriedades de bordas, preenchimentos e margens
Todas as tags HTML, desde divs a até mesmo blocos de parágrafos, podem ser
interpretadas como caixas. A caixa delimitará os espaços que os elementos HTML
poderão ocupar e o posicionamento de cada item de um site. Assim, esses elementos
podem ser formatados usando-se o chamado modelo de caixa, do inglês box model
(W3SCHOOLS, 2020).
A Figura 2.23 ilustra um exemplo de como o box model funciona na prática. Na divisão
da figura, temos (A), (B) e (C). A Figura 2.23 (A) ilustra a visualização da caixa que
envolve o menu de um site. Ao passar o cursor sobre partes de código visualizadas pela
ferramenta inspecionar elemento, o navegador destaca a caixa que compõe os
elementos. (B-C). Observe que mesmo os elementos de caixas possuem suas próprias
caixas quando analisados individualmente.
Figura 2.23 | Visualizando as caixas usando a ferramenta inspecionar elemento
(A)
(B)
(C)
Fonte: captura de tela da Biblioteca Virtual elaborada pelo autor.
O CSS possibilita a alteração de quatro propriedades principais de uma caixa listadas a

seguir:
 Margem externa (margin).

 Borda (border).
 Margem interna ou preenchimento (padding).
 Conteúdo, que pode ser um texto, uma imagem, um vídeo, apenas uma caixa
vazia, entre outros.
A Figura 2.24 ilustra a estrutura do modelo de caixa CSS com suas propriedades. A
seguir, será descrita cada uma dessas propriedades.
Figura 2.24 | Modelo de Caixa CSS

Para que possamos compreender corretamente o modelo de caixa CSS, vamos começar
introduzindo o conceito de bordas. Isso será necessário, uma vez que as margens
internas e externas serão aplicadas entre as bordas, que podem ser inseridas com a
propriedade border, que deve receber:
 A espessura da borda.
 Um tipo: solid (sólido), doted (pontilhado), dashed (tracejado), double (borda
dupla), groove (borda 3D), none (nenhuma borda), entre outros.
 Uma cor (pode ser apresentada no padrão hexadecimal, como #000000).
A seguir, vamos mostrar uma aplicação de bordas em uma página index.html. Para isso,
criamos o arquivo estilo.css mostrado a seguir:
Código 2.17 | estilo.css - bordas
div {
border:1px dashed #000;
No arquivo estilo.css, para todas as divs presentes na página (index.html) mostrada a

seguir, será aplicada uma borda com 1 pixel de espessura (1px) (border:1px), tracejada
(dashed) e na cor preta (dashed #000), observe que #000 é equivalente a #000000 ou a
black).
Código 2.18| index.html
<!DOCTYPE html>
<html>
<head>
<title>Bordas</title>
</head>
<body>
<div>
<p>Este texto possui uma borda. </p>
</div>
</body>
</html>
A Figura 2.25 ilustra o resultado da página index.html e estilo.css. Observe que a borda
foi aplicada diretamente a uma div. Bordas podem ser aplicadas a quaisquer elementos.
Figura 2.25 | Borda aplicada a uma div

Agora é com você! Teste o código index.html com o estilo.css, altere a espessura e a cor
da borda e observe o resultado mostrado na ferramenta Trinket:
Podemos, também, aplicar uma segunda propriedade border à tag <p>. Observe o trecho
de código do arquivo estilo.css a seguir:
div {
border:1px dashed #000;
#p {
border:10px solid #999;
Observe, na Figura 2.26, o resultado da aplicação da propriedade border à tag <p>.
Figura 2.26 | Borda aplicada à tag <p>

Observe que uma segunda borda de cor cinza (#999), sólida (solid) e com 10px de
espessura foi inserida entre o texto e a borda da div. Podemos alterar o tamanho das
margens usando as propriedades margin e padding, conforme o Quadro 2.4 a seguir:
Quadro 2.4 | Propriedades margin e padding
Propriedade Função Exemplo
margin Define as margens externas. Quando recebe quatro valores, /* Margens

estes correspondem à distância para topo (1º), ao lado superior, direita,
direito (2º), ao rodapé (3º) e ao lado esquerdo (4º); três inferior e
valores indicam (1º) topo, (2º) esquerda e direita e (3º) esquerda */
rodapé; dois valores indicam distância para o (1º) topo e o
rodapé e (2º) os lados direito e esquerdo; um valor é válido margin: 5px 0
para todos os outros. 10px 0;
/* Margens
superior, lados e
inferior */
margin: 5px 0
10px;
/* Margens
topo/rodapé e
lados */
margin: 10px 0;
/* Todas iguais */
margin: 10px;
/* Margem
superior */
margin-top Margem superior.
margin-top: 10px;
/* Margem
inferior */
margin-
Margem inferior.
bottom
margin-bottom:
10px;
/* Margem
margin-left Margem esquerda. esquerda */
margin-left: 10px;
/* Margem direita
*/
margin-right Margem direita.
margin-right:
10px;
/* Margens
Margem interna. Mesmas regras aplicadas à margin são internas */
padding
válidas.
padding: 10px;
/*Padding
superior*/
padding-top Margem interna superior.
padding-top:
10px;
/* Padding
inferior*/
padding-
Margem interna inferior.
bottom
padding-bottom:
10px;
/* Padding
esquerdo*/
padding-left Margem interna esquerda.
padding-left:
10px;
padding- Margem interna direita. /* Padding

right direito*/
padding-right:
10px;
Fonte: adaptado de Mariano; de Melo-Minardi (2017).
A seguir, observe como alterar as margens internas da tag <p> usando a propriedade
padding:
p{
padding:30px;
A Figura 2.27 ilustra o resultado da página do código apresentado:
Figura 2.27 | Margem interna de 30px
Fonte elaborada pelo autor.
Agora, veja o que acontece se substituirmos padding por margin:
p{
padding:30px;
}
Antes
p{
margin:30px;
Depois
A Figura 2.28 ilustra o resultado com a margem externa de 30px.
Figura 2.28 | Margem externa de 30px
Ao passar um único valor para a propriedade padding ou margin, esse valor é aplicado
para todas as bordas. Você pode especificar os valores desejados das bordas superior,
direita, inferior e esquerda, como vemos na Figura 2.29.
Há duas formas de especificar as bordas. A primeira é especificando a borda que deseja

alterar, como margin-right, que altera a margem à direita, ou margin-bottom, que altera
a margem inferior.
Figura 2.29 | Bordas: superior, direita, inferior e esquerda

A segunda forma de especificar é determinando a quantidade de valores passados às

propriedades margin ou padding: você pode passar 1, 2, 3 ou 4 valores, conforme o
exemplo a seguir:
/*margin: superior, direita, inferior, esquerda;*/
margin: 10px 20px 5px 0px;
Nesse exemplo, você aplicou uma margem superior de 10px, direita de 20px, inferior de
5px e nenhuma margem à esquerda.
Assimile
Da mesma forma que se pode determinar propriedades margin e padding específicas, é

possível alterar as bordas de um elemento. O trecho de código a seguir aplica uma borda
única à esquerda com tamanho de 10px.
p{
border-left:10px solid #ffeb3b;
background-color:#ffffcc;
padding:30px 10px;
Figura 2.30 | Borda única à esquerda

Note que foi aplicada uma margem interna de 30px (superior e inferior) e 10px (direita
e esquerda).
BOX MODEL
Propriedades de largura e altura
Para os casos apresentados até o momento, todas as margens ocupam todo o espaço
horizontal disponível, mas a altura depende do conteúdo do bloco. Podemos, então,
determinar a altura e a largura utilizando as propriedades altura (height) e largura
(width). Observe o Quadro 2.5, temos algumas dessas propriedades com as funções e
exemplos de cada uma delas.
Quadro 2.5 | Propriedades de altura e largura
/* Altura */
height Define a altura de elemento.
height: 200px;
/* Altura
máxima */
Define a altura máxima. Usado em sites com design responsivo,
max-height
caso a janela seja reajustada.
max-height:
300px;
/* Altura mínima
*/
Define a altura mínima. Usado em sites com design responsivo,
min-height
caso a janela seja reajustada.
min-height:
100px;
width Define a largura de um elemento. /* Largura */

width: 800px;
/* Largura
máxima */
Define a largura máxima. Usado em sites com design
max-width
responsivo, caso a janela seja reajustada.
max-width:
1000px;
/* Largura
Define a largura mínima. Usado em sites com design mínima */
min-width
responsivo, caso a janela seja reajustada.
width: 800px;
POSICIONAMENTO DE ELEMENTOS CSS
A partir dos conceitos de margens e tamanhos, podemos começar a compreender o

sistema de posicionamentos do CSS. Para ilustrar esse sistema, vamos criar quatro divs
e aplicar cores a elas (utilizaremos a ferramenta Adobe Color para obter dicas de cores
complementares). Além disso, vamos definir que o tamanho das divs será de 100px de
altura por 100px de largura. Observe o código index.html e a aba com o código
estilo.css a seguir e o seu resultado na ferramenta Trinket.
Por padrão, HTML insere novos elementos abaixo de outros elementos já declarados.
Podemos resolver isso por meio da propriedade float.
A propriedade float (flutuação) altera o fluxo natural de posicionamento de novos

elementos HTML, permitindo que sejam adicionados à direita (right) ou à esquerda
(left) (MDN WEB DOCS, 2019).
Vamos adicionar a propriedade float: left; a todos os elementos no arquivo estilo.css.

Observe o Código 2.19 a seguir.
div {
height:100px;
width:100px;
#alfa{
background-color: #ED3107;
float:left;
#beta{
background-color: #1786EB;
float:left;
#gama{
background-color: #07EB98;
float:left;
#delta{
background-color: #EB950C;
float:left;
Observe a Figura 2.31 o resultado da aplicação de float:left; com as divs lado a lado.
Figura 2.31 | Divs lado a lado

A propriedade float left permite que o próximo elemento HTML seja inserido ao lado
do elemento atual. Nesse caso, isso indica que o elemento que recebe essa propriedade
deve ficar à esquerda do próximo elemento. Se no lugar de left utilizássemos a opção
right, o elemento atual seria posicionado à direita. Observe o Código 2.20 a seguir:
div {
height:100px;
width:100px;
#alfa{
float:right;
#beta{
float:right;
}
#gama{
float:right;
#delta{
float:right;
Observe o resultado da aplicação de float:right na Figura 2.32.
Figura 2.32 | Float right
Observe que o primeiro bloco (vermelho) foi posicionado no lado direito da tela,
passando a ser o último. A propriedade float: right indica que o bloco deve “flutuar à
direita”, ou seja, ele deve estar à direita de todos os elementos a seguir.
Agora, suponha que desejemos que os dois últimos quadrados sejam colocados na linha
debaixo; se apenas removermos a propriedade float: left, nosso código apresentará
problemas. Observe o que ocorre ao removermos a propriedade do bloco delta,
Figura 2.33 | Removendo propriedade do bloco laranja
Ao utilizarmos a ferramenta de inspeção de elementos, podemos perceber que a div

ainda existe. Entretanto, ela foi sobreposta pelas divs anteriores, ou seja, o bloco
alaranjado encontra-se abaixo do bloco vermelho com o recurso inspecionar.
Figura 2.34 | Inspecionar elemento

Para solucionar o problema de sobreposição, pode-se utilizar a propriedade clear, que

indica se um elemento pode possuir vizinhos à direita ou à esquerda (right e left) ou se
esses elementos devem ser posicionados na linha seguinte, abaixo (both). Todavia, para
utilizarmos essa propriedade, devemos reestruturar a forma como o HTML está
organizado, criando, assim, duas novas divs que receberão cada uma das linhas. O
código ficará organizado da forma a seguir:
Div: 1ª linha
 Div: Alfa
 Div: Beta
Div: 2ª linha
 Div: Gama
 Div: Delta
Como as linhas possuem características idênticas, podemos criar uma classe para
representá-las. Aplicaremos a elas a propriedade clear:both; que fará com que sejam
posicionadas uma abaixo da outra. Observe os códigos index.html (Código 2.21) e
estilo.css (Código 2.22).
<!DOCTYPE html>
<html>
<head>
<title>Posicionamento</title>
</head>
<body>
<div class="linha">
<div id="alfa"></div>
<div id="beta"></div>
</div>
<div class="linha">
<div id="gama"></div>
<div id="delta"></div>
</div>
</body>
</html>
div {
height:100px;
width:100px;
#alfa{
float:left;
#beta{
float:left;
#gama{
float:left;
#delta{
float:left;
.linha{
width: 200px;
clear:both;
Perceba que, agora, os blocos estão posicionados corretamente (Figura 2.35):

Figura 2.35 | Posicionando blocos corretamente
Observe o resultado utilizando a ferramenta Trinket.
Exemplificando
Observe, a seguir, um uso da propriedade clear both para um site de notícias. Sites de
notícias requerem que imagens sejam exibidas ao redor de textos, entretanto, nem todas
as imagens devem ser exibidas com essas configurações, sendo necessário, algumas
vezes, que haja uma separação clara entre imagem e texto.
No exemplo a seguir, uma imagem é posicionada ao redor de um texto usando-se a

propriedade float left (lado esquerdo). Ao ser aplicada a propriedade clear both, é
inserida uma linha invisível que determina que todo ponto abaixo dela deve ser alocado
na linha abaixo (Figura 2.36).
Figura 2.36 | Float left e clear both

Fonte: Mariano; de Melo-Minardi (2017, p.99).
Float left usado para posicionar texto ao redor de uma imagem (esquerda). Ao lado,
vemos a propriedade clear both aplicada.
A importância da delimitação do tamanho de blocos
Agora, suponhamos que queremos adicionar uma margem de 20px separando os blocos.
Podemos, simplesmente, adicionar o seguinte código no arquivo “estilo.css”:
div {
height:100px;
width:100px;
margin:10px;
Nesse caso, usamos 10px, porque cada bloco aplicará uma distância de 10px em relação
ao outro (como cada linha tem dois blocos, logo, a margem será de 20px). Entretanto,
ao carregar a página, ela aparecerá conforme mostrado na Figura 2.37.
Figura 2.37 | Problema na exibição

O problema ocorre, pois foi delimitado o tamanho máximo de largura e altura. Se cada
bloco tem largura e altura de 100px e uma margem de 10px para cada borda, logo ele,
ocupará 120px de largura e de altura (100+10+10). Como temos dois blocos por linha
(ou seja, 240px) e delimitamos o tamanho da linha para 200px, a interface entrará em
colapso e se desestruturará ao atingir o limite da linha. Note que, mesmo adicionando a
propriedade de flutuação à esquerda, ao atingir o limite máximo de largura definido, o
bloco será empurrado para a linha abaixo.
Há várias formas de resolver esse problema. A mais simples é aumentar o tamanho

máximo da classe “linha” para 240px (Figura 2.38).
Figura 2.38 | Largura de 240px

Position
Uma propriedade fundamental para posicionamento de elementos HTML é a

propriedade position, que pode ser absoluta (absolute), relativa (relative) ou fixa (fixed).
O valor padrão dessa tag é relative, ou seja, a posição dos itens é relativa à posição de
itens apresentados anteriormente. Entretanto, os dois outros tipos de posicionamento
inserem características interessantes. Vamos começar aprendendo as características da
position absolute.
Enquanto a position relative determina a posição com base no elemento HTML

declarado anteriormente, a position absolute determina a posição com base apenas na
página atual, o que permite que itens se sobreponham. Observe o resultado da página
web se adicionarmos a propriedade position com valor absolute para todos os nossos
blocos (Figura 2.39):
Figura 2.39 | Apenas a div delta é exibida

Observe que apenas a div da cor alaranjada é exibida. Isso acontece porque ela é a
última a ser declarada, logo, ela sobrepõe a todas as outras. Podemos visualizar que as
outras divs ainda estão presentes, adicionando propriedades de distância para as
margens da página:
/* Removendo propridades margin e padding padrão de navegadores */
*{margin:0px; padding:0px;}
/* Observe que, aqui, adotamos o estilo condensado de exibição, em que todas as

propriedades são exibidas em uma única linha. Esse estilo facilita a performance de
carregamento do CSS, mas dificulta a leitura do código */
div{height:100px; padding:100px;}
/* Não é necessário distância para as margens aqui */
#alfa{
position:absolute;
}
/* Distância de 30px para o topo e de 30px para o lado esquerdo */
#beta{
position:absolute;
top: 30px;
left: 30px;
#gama{
position:absolute;
top: 60px;
left: 60px;
#delta{
position:absolute;
top: 90px;
left: 90px;
A propriedade absolute atua em conjunto com quatro possíveis propriedades de

posicionamento:
 Top: determina a distância do elemento para o topo da página (no exemplo, o

valor 0px indica que o elemento deve estar a uma distância de 0px do topo da
página).
 Bottom: determina a distância do elemento para o rodapé da página (no
exemplo, o valor 0px indica que o elemento deve estar a uma distância de 0px da
parte inferior da página).
 Left: determina a distância do elemento para o lado esquerdo da página (no
exemplo, o valor 0px indica que o elemento deve estar a uma distância de 0px
do lado esquerdo).
 Right: determina a distância do elemento para o lado direito da página (no
exemplo, o valor 0px indica que o elemento deve estar a uma distância de 0px
do lado direito).
Podemos alterar a prioridade de exibição de itens usando a propriedade z-index (índice

do eixo z), que deverá receber um número indicando a ordem de prioridade. Quanto
maior o número, maior a prioridade de exibição (ou seja, mais à frente ele estará).
No exemplo a seguir, a propriedade z-index dos blocos é alterada. Observe o resultado

na Figura 2.40:
 Alfa receberá o valor 4.

 Beta receberá o valor 2.
 Gama receberá o valor 3.
 Delta receberá o valor 4.
Figura 2.40 | O bloco vermelho (alfa) tem a prioridade mais alta (z-index: 4), o bloco beta (azul)
tem prioridade 2, enquanto o gama (verde) tem prioridade 3. Logo, o verde deve estar acima
do azul e abaixo do vermelho. Delta tem a mais baixa prioridade (1)
Teste os posicionamentos utilizando a ferramenta Trinket:

Assimile
A prioridade de exibição de conteúdo em uma página é vital para que o layout seja
exibido corretamente. Teste a propriedade z-index para reposicionamento da ordem de
exibição de blocos aqui:
Position fixed
Agora, vamos falar sobre a propriedade position fixed. Fixed determina que um item
esteja sempre em uma mesma posição, independentemente da quantidade de itens em
uma página. No exemplo a seguir, vamos adicionar textos na página e fixar cada
imagem em um canto. Teste o código utilizando o Trinket:
<!DOCTYPE html>
<html>
<head>
<title>Posicionamento</title>
</head>
<body>

<div id="alfa"></div>
<div id="beta"></div>
<div id="gama"></div>
<div id="delta"></div>
<span id="conteudo">
[...]
</span>
</body>
</html>
Código 2.25| estilo.css
div{
height: 100px;
width: 100px;
/* aplicamos algumas configurações de estilo para deixar o texto na página maior */
span{
color: #777;
font-size: 20px;
line-height: 25px;
/* Veja que alfa deve ser colocada à esquerda do topo */
#alfa{
position:fixed;
top: 0px;
left: 0px;
/* beta deve ser colocada à direita do rodapé */

#beta{
position:fixed;
right: 0px;
bottom: 0px;
/* gama deve ser colocada à direita do topo */
#gama{
position:fixed;
right: 0px;
top: 0px;
/* delta deve ser colocada à esquerda do rodapé */
#delta{
position:fixed;
left: 0px;
bottom: 0px;
À medida que o usuário rolar pela página gerada anteriormente, os quatro blocos
coloridos continuarão fixos nos locais delimitados (Figura 2.41):
Figura 2.41 | Posição fixed aplicada aos blocos

Manipulação de vídeos em CSS
Existe propriedades para a manipulação de áudios e vídeos usando CSS. Para ilustrar
este exemplo, utilizaremos o vídeo disponível gratuitamente na plataforma Pexels. Para
facilitar a análise, vamos renomear o vídeo para “video.mp4”.
O Código 2.26 a seguir carrega o vídeo em sua página HTML:
Código 2.26 | index.html – carregando vídeo em sua página HTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Vídeos</title>
6. <link href="estilo.css" rel="stylesheet">
7. </head>
8. <body>
9. <video controls>
10. <source src="video.mp4" type="video/mp4">
11. </video>
12. </body>
12. </html>
A Figura 2.42 mostra a página web carregada.
Figura 2.42 | Exibição do vídeo usando HTML
O trecho de código que realiza o carregamento do vídeo se encontra entre as linhas 9 e

11:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Observe que a tag vídeo recebe o atributo “controls”. Esse atributo será responsável por
inserir os botões de início e pause do vídeo, além do volume, maximização e botões de
configurações. Neste exemplo, usamos a tag <source> para indicar o nome e o tipo do
vídeo. Agora, vamos aplicar algumas propriedades de estilo a essa página (Código
2.27).
1. video{
2.
3. /* borda*/
4. border:solid 1px #333;
5.
6. /* distância de x | distância de -y | desfoque | cor */
7. box-shadow: 3px 3px 10px black;
8.
9. }
Vamos começar adicionando bordas e sombras ao vídeo (Figura 2.43):
Figura 2.43 | Bordas e sombras

Até o momento, foi mostrado como inserir bordas, agora, vamos à propriedade CSS
para inclusão de sombras. A propriedade CSS responsável por isso é a box-shadow, que
recebe quatro valores: distância de x | distância de -y | desfoque | cor.
Neste exemplo, foi inserido uma sombra na cor preta com distância para os eixos x e y
de 3px e um desfoque de 10px.
Pode-se ainda aplicar as propriedades de tamanho (width), como pode ser visto no
Código 2.28:
Código 2.28 | estilo.css – propriedades de tamanho
video{
/* borda*/
border:solid 1px #333;
/* distância de x | distância de -y | desfoque | cor */
box-shadow: 3px 3px 10px black;
/* ocupando toda a página */
width: 100%;
}
Esse código utiliza a propriedade width para que o vídeo ocupe todo o espaçamento da
página. Note que, por ser um vídeo vertical, a altura do vídeo ultrapassa o tamanho
natural da página HTML (Figura 2.44):
Figura 2.44 | Vídeo em largura total
Containers
Um conceito importante em CSS e responsividade são os Containers. Os containers

delimitam o posicionamento de um conjunto de blocos em uma página, inserindo
margens idênticas nos lados direito e esquerdo.
Observe, na Figura 2.45 a seguir, um exemplo da utilidade de containers.

Fonte: captura de tela da Biblioteca Virtual elaborada pelo autor.
Observe que no exemplo da Figura 2.45, o conteúdo da página é centralizado com

margens idênticas tanto para a direita quanto para a esquerda. Isso indica que o
conteúdo da página está contido em um container. Essas margens só aparecem em
monitores de alta resolução; em monitores de menor resolução, elas não seriam
exibidas. Por isso, containers podem ser considerados elementos fundamentais para
páginas responsivas.
O conceito de container pode ser aplicado a qualquer elemento HTML. Aqui, vamos
introduzi-lo para delimitar margens de exibição do vídeo.
Primeiro, vamos criar uma div container para delimitar todo o conteúdo exibido
(Código 2.29):
Código 2.29 | index.html – criando uma div container
<div class="container">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
O vídeo deve estar entre as tags de abertura e fechamento da div container. Os estilos
serão aplicados como uma classe. Agora, vamos configurar o arquivo estilo.css:
Código 2.30 | estilo.css – criando uma div container

video{
/* borda*/
border:solid 1px #333;
/* distância de x | distância de -y | desfoque | cor */
box-shadow: 3px 3px 10px black;
/* ocupando toda a página */
width: 100%;
/* delimita a posição do item */
.container{
width: 960px;
margin: 20px auto;
Observe que ao delimitar a largura do nosso container em 960px com margem de 20px
(para o topo e o rodapé) e o valor auto (para a esquerda e direita), o valor auto
configura os mesmos valores tanto para direita quanto para a esquerda. Por exemplo:
imagine que o monitor tem uma resolução de 1280px de largura por 768px de altura;
como seu container tem tamanho de 960px, sobram 320px que não serão utilizados. A
propriedade auto distribui 160px para cada lado, assim, o container fica centralizado na
página (Figura 2.46). Observe como o vídeo será exibido:
Figura 2.46 | Container centraliza o vídeo

Um ponto importante a ser ressaltado é que a exibição do vídeo dessa forma se deve à
combinação de dois fatores:
i. Largura do container (960px).

ii. Largura aplicada à tag <vídeo> (100%).
Perceba que a tag vídeo está dentro do container, logo, o vídeo terá largura de 100%
sobre o tamanho de sua div pai, ou seja, 960px.
Reflita
Containers permitem que o conteúdo seja corretamente posicionado em uma página,

mantendo margens à direita e à esquerda. Se temos outras formas de realizar o
posicionamento, por que podemos utilizar containers quando se trata de páginas
responsivas? Reflita sobre sua importância para a construção de páginas responsivas.
Saiba mais
Sobre o uso de vídeos em páginas web
A inserção direta de vídeos em um website pelo HTML não é bastante utilizada por
desenvolvedores web, e isso se deve ao fato de o carregamento de vídeos consumir
recursos computacionais do servidor, uma vez que vídeos demandam espaço de
armazenamento e banda para a transmissão dos dados. Muitas vezes, desenvolvedores
optam por inserir os vídeos em plataformas especializadas, como YouTube, Vimeo ou
Twitch, e, por fim, embutir o vídeo na página por meio de tags de frames.
Pesquise mais
Para saber um pouco mais sobre propriedades CSS, recomendamos o seguinte artigo:
 Estrutura de páginas: nesse capítulo é apresentada uma definição detalhada

dos códigos CSS usados no posicionamento de itens em uma página HTML:
MARIANO, D. Estrutura de páginas. Diegomariano. 15 ago. 2020.
Além disso, você pode estudar um pouco mais assistindo às seguintes videoaulas:
 Conceitos da propriedade float, como alinhamento à esquerda e à direita:

CHIEF OF DESIGN. Curso de HTML e CSS - Float Left, Right [Aula 25]. [S.l.:
s.n.], 2019. 1 vídeo (5:20 min.) Publicado pelo canal Chief of Design.
 Conceitos de ordem de posicionamento de elementos HTML:
CHIEF OF DESIGN. Curso de HTML e CSS - Z-index [Aula 24]. [S.l.: s.n.],
2019. 1 vídeo (6:09 min.) Publicado pelo canal Chief of Design.
Caro aluno, nesta seção você aprendeu a posicionar elementos em páginas. Esse
conceito é fundamental para a elaboração de páginas web mais completas. Agora, você
já está pronto para construir websites mais profissionais. Portanto, na próxima seção,
apresentaremos algumas propriedades interessantes para formatação de tabelas e
formulários, além de conceitos de frameworks CSS.
Até mais!
Referências
CHIEF OF DESIGN. Curso de HTML e CSS - Float Left, Right [Aula 25]. [S.l.: s.n.],
2019. 1 vídeo (5:20 min.) Publicado pelo canal Chief of Design. Disponível em:
https://bit.ly/3edv64Q. Acesso em: 24 fev. 2021.
CHIEF OF DESIGN. Curso de HTML e CSS - Z-index [Aula 24]. [S.l.: s.n.], 2019. 1
vídeo (6:09 min.) Publicado pelo canal Chief of Design. Disponível em:
https://bit.ly/30g9MDL. Acesso em: 24 fev. 2021.
MARIANO, D. Estrutura de páginas. Diegomariano. 15 ago. 2020. Disponível em:

https://bit.ly/3qieivV. Acesso em: 19 out. 2020.

MDN WEB DOCS. Float. 2019. Disponível em: https://mzl.la/3sVaF0C. Acesso em:
24 fev. 2021.
W3SCHOOLS. CSS Box Model. [s.d.]. Disponível em: https://bit.ly/3cjcvlF. Acesso

em: 24 fev. 2021.
LAYOUT EM CSS
O que é um Container?
O container é um conceito importante em CSS, refere-se a responsividade. Os

containers delimitam o posicionamento de um conjunto de blocos em uma página,
inserindo margens idênticas nos lados direito e esquerdo.
sem medo de errar
A seguir, apresentaremos uma possível solução para esse problema. É importante

salientar que não existe uma resposta perfeita em relação ao estilo. Neste exercício,
exigimos apenas que as tags requisitadas sejam apresentadas e corretamente
posicionadas na página. Cada desenvolvedor deve adotar o design que achar melhor.
Aqui, apresentamos um exemplo básico de modelo de página de contato.
Para facilitar a compreensão do código, as explicações foram inseridas como

comentários:
 Em HTML, comentários são códigos em volta dos caracteres .

 Em CSS, comentários são códigos escritos entre os caracteres /* e */.
O código completo e interativo está disponível aqui:
Vamos começar apresentando como construir o arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Planos de internet</title>
<link href="estilo.css" rel="stylesheet"> 
</head>
<body>

<header>
<div id="logo">
<a href="#">
<img src="logo.png" title="logo" alt="logo">
</a>
</div>
<nav>
<a href="#">Página inicial</a>
<a href="#">Quem somos</a>
<a href="#">Produtos</a>
<a href="#">Contato</a>
</nav>
</div>
</header>


<main>
<div id="cabecalho-interno">
<h1>Contato</h1>
<h5>Use o formulário abaixo para entrar em contato com nossos canais de

atendimento</h5>
</div>
</div>
<article class="container">
<form method="post" action="contato.php">
<div class="linha">
<label>Nome completo</label><br>
<input type="text" name="nome" size="50" placeholder="Entre com o seu Nome

Completo">
</div>
<div class="linha">
<div class="coluna">
<label>E-mail</label>
<input type="email" name="email" placeholder="Entre com o seu E-mail">
</div>
<div class="coluna">
<label>Telefone</label>
<input type="email" name="number" placeholder="Entre com o seu telefone">
</div>
<div style="clear:both"></div> 
<div class="linha">
<label>Assunto</label>
<input type="text" name="assunto" size="50" placeholder="Informe o assunto">
</div>
<div class="linha">
<label>Mensagem</label>
<textarea name="mensagem" placeholder="Entre com a mensagem" rows="5"

cols="50"></textarea>
</div>
<div class="linha">
<input type="submit" name="submit" value="Enviar" class="botao-enviar">
</div>
</form>
</article>
</main>


<footer>
©2021 | Todos os direitos reservados.
</footer>
<!—Fim/Rodapé -->
</body>
</html>
Se você analisar o navegador, verá uma página parecida com esta:
Figura 2.47 | Página HTML visualizada no navegador

Veja que nossa página ainda não possui nenhum estilo aplicado; vamos configurar
cores, posicionamentos e margens usando CSS (Código 2.32):
/*
Arquivo: estilo.css
Autor: Diego Mariano
Códigos de cores foram obtidos em: https://color.adobe.com/pt/create/color-wheel
*/
/* Removendo propridades margin e padding padrão de navegadores */
*{
margin:0px; /* margem externa */
padding: 0px; /* margem interna */
}
/* ------------------------- Tags principais ------------------------- */
body{
font-family: "helvetica", "arial narrow", "arial"; /* */
color:#111; /* cor de texto: variante da cor preta; */
a{
color: #31D1BB; /* cor: variante de verde; */
header{
height: 80px; /* altura de 80px */
background-color: #111; /* cor de fundo: variação da cor preta */
nav{
float:right; /* alinhamento à direita */
margin-top:30px; /* margem para o topo de 30px */
nav a{
color:#f4f4f4; /* Cor do texto: variação de branco */
text-decoration: none; /* Remove o sublinhado do link*/
padding:30px 20px; /* margem interna */
nav a:hover{ /* :hover aplica um estilo quando o mouse está sobre um item */
background-color: #31D1BB; /* cor de fundo: variante de verde; */
h1{
font-size: 60px; /* tamanho da fonte 60px */
h5{
color:#777; /* cor: variação de cinza; */
padding:5px 0 0 5px; /* margem para o topo e direita de 5px */
article{
padding:30px 0; /* margem interna para topo e rodapé de 30px */
label{
font-weight: bold; /* negrito */
font-size:14px; /* tamanho de texto 14px */
footer{
text-align: center; /* texto alinhado ao centro */
background-color:#ccc; /* cor de fundo: cinza claro; */
margin-top:50px; /* margem para o elemento anterior de 50px */
padding: 20px 0; /* margem interna de 20px (topo e rodapé) */
color:#111; /* cor de texto: preto */
input{
width: calc(100% - 20px); /* calc determina o tamanho máximo - 20px (padding) */
padding:10px; /* 10px de margem interna */
textarea{
padding: 10px; /* 10px de margem interna */
/* ------------------------- IDs ------------------------- */
#logo{
float: left; /* posicionamento à esquerda */

margin-top:10px; /* margem para o topo de 10px */
#cabecalho-interno{
padding: 50px; /* margem interna de 50px */
background-color:#ccc; /* cor de fundo: cinza claro; */
/* ------------------------- Classes ------------------------- */
.container{
width: 960px; /* largura fixa de 960px */
margin:0 auto;/* margem automática nos lados esquerdo e direito */
.botao-enviar{
background-color: #02B81A; /* cor de fundo: variaçãode verde claro; */
border: solid 1px #016B0F; /* cor de borda: variação de verde escuro; */
color:white; /* cor de texto: branco; */
padding: 20px; /* margem interna: 20px; */
width: 100%; /* largura: 100%; */
.linha{
margin:10px 0 20px 0; /* margem topo 10px e para o rodapé de 20px */
.coluna{
width: 50%; /* 50% de largura */
float:left; /* posicionamento à esquerda */
Agora, observe como ficará nossa página web:
Figura 2.48 | Página web finalizada

NÃO PODE FALTAR
TABELAS EM CSS
QUAL A IMPORTÂNCIA DE UTILIZAR FRAMEWORKS NA

CONSTRUÇÃO DE PÁGINAS?
Os frameworks reduzem consideravelmente a quantidade de código necessária para

construção de páginas com layout amigável.
Olá!
Nesta seção, daremos continuidade ao uso das folhas de estilo em cascata. Desta vez,
você aprenderá os fundamentos para formatação de estilos para tabelas e formulários.
Apesar de ser um recurso oriundo das primeiras versões do HTML, as tabelas ainda são
utilizadas em muitas aplicações, em especial, para exibição de conteúdo tabular. A
principal diferença é que as alterações nos estilos, como bordas e cores, eram realizadas
por meio de atributos das tags. Nos dias de hoje, convencionou-se que a melhor maneira
de alterar estilos tanto em tabelas quanto em qualquer elemento HTML é por meio das
propriedades CSS. Aqui, aplicaremos propriedades CSS de bordas, margens e cores de
fundo em tabelas e formulários.
Nesta seção, você também será introduzido ao maravilhoso mundo dos frameworks
CSS/JavaScript, que são bibliotecas de códigos com inúmeras funcionalidades já
desenvolvidas e testadas por muitos outros desenvolvedores. Por meio de um
framework é possível aplicar diversas configurações de estilos apenas inserindo o nome
das classes; além disso, ele permite que desenvolvedores criem aplicações com interface
amigável utilizando-se poucas linhas de código.
Você vai conhecer dois frameworks: DataTables, uma biblioteca especialmente

construída para formatação de tabelas, e Bootstrap, um framework CSS+JavaScript com
inúmeras funcionalidades de estilo, como formatação de formulários e tabelas, definição
da grade de estrutura de uma página, entre outras.
Por fim, você será introduzido ao mundo das animações utilizando apenas a linguagem
CSS. As propriedades de animação permitem transitar entre um estilo e outro.
Animações em CSS, apesar de serem mais simples quando comparadas com JavaScript,
permitem tornar a página mais dinâmica com um baixo custo para carregamento pelo
navegador.
Na empresa em que trabalha, você foi requisitado a implementar as outras páginas

remanescentes para compor a página WEB.
 Página inicial.
 Página “quem somos”.
 Página “produtos”.
Entretanto, nessa nova implementação, alguns requisitos são importantes:
1. Sua página deve apresentar design responsivo.

2. Use o lorem ipsum para preencher a página quem somos; imagens podem ser
coletadas no Pixabay.
3. Opcionalmente, você pode criar uma página única em que cada uma corresponda
a uma seção dessa página principal (use links de navegação interna).
4. Na página “produtos”, os itens apresentados no Quadro 2.6 devem estar
inclusos.
Quadro 2.6 | Itens a serem inclusos na página produtos
Plano Internet Modem wifi Telefone fixo Pacote de dados TV Preço
Alfa 10 Mb - - - - 50
Beta 20 Mb x - - - 90
Gama 50 Mb x x 5 GB - 120
Delta 100 Mb x x 10 GB 100 Canais 150
Ômega 400 Mb x x 100 GB 150 Canais 199

DICA
Você pode usar o Bootstrap e o DataTables em sua página.
Os conhecimentos apresentados nesta seção poderão representar um grande avanço em

sua carreira de desenvolvedor web, por isso, foco total e bons estudos!
CONCEITO-CHAVE
Caro aluno, nesta seção, você aprenderá a aplicar estilos em tabelas e formulários. Nas
primeiras versões do HTML, estilos eram aplicados com o conteúdo, o que dificultava a
manutenção e a escalabilidade do código. Com as aplicações CSS, foi possível separar
códigos de conteúdos e códigos de estilo, e os estilos podem ser aplicados a todas as
tabelas e formulários de uma página web.
O foco principal desta seção será apresentar estilos para tabelas, mas muitas das
propriedades aplicadas a tabelas também podem ser aplicadas a formulários. Além
disso, muitas dessas propriedades já foram apresentadas anteriormente para outros
elementos CSS. Por fim, você vai conhecer dois poderosos frameworks CSS para
inserção de estilos automáticos: DataTables e Bootstrap. Os frameworks reduzem
consideravelmente a quantidade de código necessária para construção de páginas com
layout amigável. Você verá que, conhecendo fundamentos básicos desses frameworks,
já é possível construir belas páginas.
Para ilustrarmos o conteúdo apresentado, vamos utilizar o Quadro 2.7 com dados da
população brasileira do ano de 2017:
Quadro 2.7 | População do Brasil por estados
UF População Sigla Região
Acre 829619 AC Norte
Alagoas 3375823 AL Nordeste
Amapá 797722 AP Norte
Amazonas 4063614 AM Norte
Bahia 15344447 BA Nordeste
Ceará 9020460 CE Nordeste
Distrito Federal 3039444 DF Centro-oeste
Espírito Santo 4016356 ES Sudeste
Goiás 6778772 GO Centro-oeste
Maranhão 7000229 MA Nordeste
Mato Grosso 3344544 MT Centro-oeste

UF População Sigla Região
Mato Grosso do Sul 2713147 MS Centro-oeste
Minas Gerais 21119536 MG Sudeste
Pará 8366628 PA Norte
Paraíba 4025558 PB Nordeste
Paraná 11320892 PR Sul
Pernambuco 9473266 PE Nordeste
Piauí 3219257 PI Nordeste
Rio Grande do Norte 3507003 RN Nordeste
Rio Grande do Sul 11322895 RS Sul
Rio de Janeiro 16718956 RJ Sudeste
Rondônia 1805788 RO Norte
Roraima 522636 RR Norte
Santa Catarina 7001161 SC Sul
São Paulo 45094866 SP Sudeste
Sergipe 2288116 SE Nordeste
Tocantins 1550194 TO Norte
Fonte: adaptado de SILVEIRA (2017).
Elementos da tabela
Por padrão, navegadores não aplicam qualquer formatação, exibindo a tabela em

branco. Logo, se recriarmos a tabela acima em HTML, ela ficará assim (2.49):
Figura 2.49 | Visualização da tabela criada em HTML

Podemos aplicar estilos a tabelas usando as tags internas de tabelas. Uma tabela é
composta por elementos como no Quadro 2.8:
Quadro 2.8 | Tags de tabelas
Descrição Tag
Tabela <table>
Linhas <tr>
Células <td>
Células de título <th>
Cabeçalho <thread>
Corpo <tbody>
Rodapé <tfoot>
Por exemplo, podemos aplicar uma borda aplicando a propriedade:
td, th {
border: 1px solid #ccc;
padding: 10px;
O resultado ficará da seguinte forma (Figura 2.50):
Note que também aplicamos uma margem interna de 10px. Por padrão, tabelas não
apresentam margens internas, o que pode dificultar a leitura.
Perceba, ainda, que cada célula possui um espaçamento que gera um efeito de borda
dupla. Podemos remover isso usando a propriedade “border-colapse” (“A Complete
Guide to the Table Element”, 2013). Veja:
table {
border-collapse: collapse;
Por fim, podemos, também, adicionar detalhes ao nosso cabeçalho (tag ), como inverter
a cor de fundo e de texto:
table {
border-collapse: collapse;
td, th {
border: 1px solid #ccc;
padding: 10px;
th {
background-color: #333;
front-weight: bold;
color: #fff;
Veja que declaramos th duas vezes (na primeira vez, foram aplicadas regras à td e th,
mas abaixo, apenas à th. Não há qualquer problema em fazer múltiplas declarações a
um elemento CSS; deve-se, apenas, ressaltar que o efeito cascata garante que, caso haja
duas declarações idênticas, a última declaração realizada se sobreponha à outra (exceto
se a expressão !important for usada).
A Figura 2.51 ilustra a tabela resultante.
Figura 2.51 | Aplicando estilos a uma tabela com CSS

O código que configura a tabela está listado abaixo no Trinket.

Formatação de dados da tabela
Note, pelos exemplos anteriores, que a formatação de tabelas pode demandar bastante
tempo, uma vez que requer que você aplique diversas regras individualmente, visando
facilitar a leitura dos dados na tabela. Algumas das regras apresentadas parecem simples
e repetitivas (como as regras de inserção de bordas para a tabela), logo, pode-se
observar que não é necessário reimplementar essas mesmas regras em toda a página
HTML criada. Por isso, surgiram os chamados frameworks CSS, que facilitam a
construção de sites fornecendo uma série de componentes básicos para formatação de
layouts amigáveis usando-se poucas linhas de códigos.
Assimile
O que é um framework?
Em computação, um framework é um conjunto de códigos que contém uma série de

funcionalidades pré-desenvolvidas. O objetivo de um framework é facilitar o
desenvolvimento de projetos de software mais completos, reduzindo o tempo gasto para
se codificar funcionalidades básicas.
Um exemplo de framework voltado exclusivamente para criação de tabelas é o

DataTables.
DataTables
DataTables é um framework CSS/JavaScript especialmente desenvolvido para

formatação automática de tabelas. Ele contém funcionalidades avançadas que podem ser
inseridas com poucas linhas de código, bem como permite, por exemplo, a ordenação
alfabética ou numérica de dados da tabela com base em elementos de uma coluna, a
busca em dados de uma tabela e a paginação de dados exibidos na tabela. A única
desvantagem do DataTables é que a interface da tabela é configurada em inglês (ex.: o
botão de busca aparece como “search”). Isso não é algo que compromete o uso, mas,
como desenvolvedores web, devemos sempre focar em apresentar interfaces amigáveis
e compreensíveis para todos os usuários. Além disso, para usuários avançados, é
possível personalizar as mensagens.
Dica
Usando o DataTables
A implementação do DataTables é bastante simples. Você pode fazer o download dele

no site. Há várias versões disponíveis (mas apresentaremos apenas a versão básica).
Precisaremos, apenas, de dois arquivos: query.dataTables.min.css e
jquery.dataTables.min.js, bem como do jQuery (falaremos mais sobre ele no capítulo de
JavaScript).
Caso não consiga fazer o download dos arquivos, mostraremos, a seguir, como fazer
uma instalação usando a CDN (Content Delivery Network ou, na tradução, Rede de
Fornecimento de Conteúdo). Com a CDN, não é necessário baixar os arquivos, basta
utilizar os links disponibilizados pelos servidores (requer conexão com a internet). Para
isso, serão necessários apenas três passos:
1. Inserção do estilo CSS: entre as tags <head> </head> inclua o seguinte código:
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"
rel="stylesheet">
2. Inserção dos arquivos JavaScript do jQuery e do DataTables entre as tags

<footer> </footer> (ou seja, no fim da página):
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"
></script>
3. Código de ativação da tabela com base no ID (deve ser inserido depois da

declaração do script anterior):
<script>
$(document) .ready( function(){
$('nome_tabela') .DataTable();
} );
</script>
Importante: altere o valor “#nome-tabela” pelo ID que você deu a sua tabela.
Agora, vamos alterar a tabela criada anteriormente e configurar o DataTables. Observe

o resultado na ferramenta Trinket:
Após a configuração do DataTables, note que que foi incluído na linha 6 o seguinte
código:
rel="stylesheet">
Agora, compare as diferenças das duas versões, uma tabela construída com o estilo
nativo do navegador e uma tabela construída com o estilo nativo do DataTables (2.52):
Figura 2.52 | Diferença do estilo padrão do navegador (A) e do estilo padrão do DataTables (B)
(A) Sem DataTables
(B) Com DataTables
Observe que DataTables inseriu uma linha divisória de cabeçalho, uma barra de buscas
e de paginação, além dos mecanismos de ordenação Figura 2.53.
Figura 2.53 | Detalhes da tabela padrão do DataTables.

E tudo isso foi realizado com poucas linhas de códigos.
Agora, veremos outro framework CSS bastante popular: Bootstrap.
Bootstrap
Bootstrap é um framework CSS/JavaScript que contém funcionalidades generalizadas

para diversos elementos HTML, como tabelas, formulários, botões, textos, entre muitos
outros. Entre os muitos recursos do Bootstrap, estão as funcionalidades de construção
de páginas responsivas, que são compatíveis com celulares, computadores e tablets.
Assim como DataTables, o Bootstrap pode ser executado via CDN. Para isso, basta
inserir os seguintes códigos em sua página:
1. Folhas CSS entre as tags <head> </head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/
dist/css/bootstrap.min.css">
2. Arquivos JavaScript entre as tags <footer> </footer> (requer jQuery):
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/
dist/js/bootstrap.bundle.min.js"
></script>
Bootstrap é executado por meio de classes atribuídas. Por exemplo, uma formatação
simples de tabelas pode ser feita atribuindo-se a classe “table”:
<table class="table">
A Figura 2.54 apresenta a Tabela padrão do Bootstrap. Veja o resultado do exemplo da

tabela apresentada anteriormente.
Figura 2.54 | Tabela padrão do Bootstrap
Entretanto, o Bootstrap oferece uma série de classes que podem ser aplicadas em
conjunto com a classe table para se formatar tabelas. É possível utilizar as seguintes
classes (Tabela 3):
Quadro 2.9 | Classes para formatação de tabelas do Bootstrap
Classe Descrição
table-hover Altera a cor da linha quando o cursor é passado sobre determinada linha.
table-striped Insere cores intercaladas para linhas.
table-bordered Insere bordas em todas as células.
table-borderless Remove todas as bordas.
table-dark Inverte cores.

Classe Descrição
table-sm Tabela sem margens internas.
A Figura 2.55 a seguir apresenta alguns exemplos de uso das classes apresentadas na
tabela anterior para a tabela de população brasileira estratificada por estados:
Figura 2.55 | Variações de classes para formatação de tabelas no Bootstrap
(A) table table-bordered

(B) table table-sm
(C) table table-hover
(D) table table-hover
(E) table table-borderless
(F) table table-dark
Você pode, ainda, aplicar cores às linhas usando as propriedades de cores. Observe o
resultado na Figura 2.56:
Figura 2.56 | Linhas coloridas

Observe o código necessário para criar essa tabela:
Código 2.33 | Criando uma tabela
<table class="table">
<thead>
<th>
<th>UF</th>
<th>População</th>
<th>Sigla</th>
<th>Região</th>
</th>
</thead>
<tbody>
<tr class="table-primary">
<td>Região</td>
<td>829619</td>
<td>AC</td>
<td>Norte</td>
</tr>
<tr class="table-secondary">
<td>Alagoas</td>
<td>3375823</td>
<td>AL</td>
<td>Nordeste</td>
</tr>
<tr class="table-sucess">
<td>Amapá</td>
<td>797722</td>
<td>AP</td>
<td>Norte</td>
</tr>
<tr class="table-danger">
<td>Amazonas</td>
<td>4063614</td>
<td>AM</td>
<td>Norte</td>
</tr>
<tr class="table-warning">
<td>Bahia</td>
<td>1534447</td>
<td>BA</td>
<td>Nordeste</td>
</tr>
<tr class="table-warning">
<td>Ceará</td>
<td>9020460</td>
<td>CE</td>
<td>Nordeste</td>
</tr>
<tr class="table-light">
<td>Distrito Federal</td>
<td>3039444</td>
<td>DF</td>
<td>Centro-oeste</td>
</tr>
<tr class="table-dark">
<td>Espírito Santo</td>
<td>4016356</td>
<td>ES</td>
<td>Sudeste</td>
</tr>
</tbody>
</table>

Reflita
O Bootstrap utiliza classes para alterar as cores das linhas na tabela, e o seu uso é
bastante simples e prático. Por exemplo: para a cor azul, utiliza-se a classe: table-
primary.
Com base no código apresentado, quais seriam as classes utilizadas para colorir as
linhas nas cores:
a. Cinza
b. Verde
c. Vermelho
d. Amarelo
e. Azul claro
f. Cinza claro
g. Cinza (texto branco)
Aplicando estilos CSS em formulários HTML
As mesmas propriedades CSS utilizadas para formatar tabelas também podem ser
utilizadas em formulários.
Observe o seguinte formulário HTML:
<link href="estilo.css" hel="stylesheet">
<main class="container">
<form method="post" action="processa.php">
<div class="linha">
<input type="text" name="assunto" size="50" placeholder="Informe o assunto">
</div>
<div class="linha">
<textarea name="mensagem" placeholder="Entre com a
</div>
<div class="linha">
<input type="subtmit" name="submit" value="Enviar" class="botao-enviar">
</div>
</form>
</main>
Dica
Nota técnica: o código apresenta apenas um fragmento do arquivo HTML. A fim de

que não ficasse repetitivo, não exibimos tags como <html>, <head>, <body>, <footer>,
etc.; no entanto, muitas delas são essenciais, portanto, não se esqueça de inclui-las em
seus códigos.
Agora, configuramos o arquivo CSS desta forma:
input{
textarea{
/* ------------------------- Classes ------------------------- */
.container{
margin: 0 auto; /* margem automática nos lados esquerdo e direito */
.botao-enviar{
background-color: #02B81A; /* cor de fundo: variação de verde claro; */

color: white; /* cor de texto: branco; */
width: 100%; /* largura: 100%; */
.linha{
margin: 10px 0 20px 0; /* margem topo 10px e para o rodapé de 20px */
Esse código irá produzir a seguinte página (Figura 2.57):
Figura 2.57 | Formulário com CSS
Veja a seguir o código e seu resultado no Trinket:
Agora, vamos entender as principais partes do código criado:

Nas linhas a seguir, foram aplicadas propriedades às tags input (no caso, as caixas de
inserção de textos).
input{
Veja que, nesse caso, apresentamos uma propriedade especial do CSS, calc( ), que é
responsável por fazer um cálculo que determinará o tamanho ocupado pelo elemento.
Trata-se de algo necessário, pois queremos que o input ocupe toda a linha, mas sem
ultrapassar os limites de largura estabelecidos. Nesse caso, ele ultrapassará os limites
em 20px (10px à direita e 10px à esquerda), pois atribuímos, logo abaixo, uma margem
interna de 10px (padding: 10px). Veja que os limites de largura não foram estabelecidos
nesse elemento e sim na classe container:
.container{
margin: 0 auto; /* margem automática nos lados esquerdo e direito */
A mesma estratégia é aplicada para a tag <textarea>, que permite a inserção de blocos
de texto de múltiplas linhas. Além disso, inserimos cada elemento do formulário em
uma div e aplicamos a classe linha, que insere margens no topo (10px) e no rodapé
(20px), entre cada um dos elementos adicionados:</div>
.linha{
margin: 10px 0 20px 0; /* margem topo 10px e para o rodapé de 20px */
Aplicamos, ainda, um estilo de cor no botão de submissão, por meio da classe “botao-
enviar”.
.botao-enviar{
background-color: #02B81A; /* cor de fundo: variação de verde claro; */
color: white; /* cor de texto: branco; */

width: 100%; /* largura: 100%; */
Nesse caso, aplicamos um tom de verde claro (código de cor hexadecimal #02B81A)
como cor de fundo e um tom de verde um pouco mais escuro (código de cor
hexadecimal #016B0F) como cor da borda, e isso foi feito para criarmos um efeito de
contraste. Alteramos, ainda, a cor de fundo para branco e adicionamos uma margem
interna de 20px para ampliar verticalmente o tamanho do botão. Por fim, para que o
botão seguisse o mesmo estilo aplicado aos outros elementos, determinamos que ele
ocupasse 100% do espaço destinado na página. Como usamos a classe container para
delimitar sua ocupação, ele deverá ocupar 100% do elemento container, ou seja, 960px.
Formulários com Bootstrap
Você deve ter percebido que a modificação de estilos usando-se CSS envolve uma série
de propriedades. Caso queira reduzir o tempo gasto no desenvolvimento, você pode
utilizar as classes disponibilizadas pelo Bootstrap para formatação de formulários.
Observe o HTML a seguir:
<div class="mt-4">
<input type="text" name="assunto" class="form-
control" size="50" placeholder="Entre com a mensagem">
</div>
<div class="mt-4">
<textarea name="mensagem" class="form-control" placeholder="Entre com a
</div>
<div class="mt-4">
<input type="subtmit" name="submit" value="Enviar" class="btn btn-sucess btn-

block">
</div>
</form>
</main>
Nesse caso, não precisaremos do arquivo “estilo.css”, portanto, substitua a declaração

da sua folha de estilo pelo Bootstrap:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/
bootstrap.min.css">
O Código acima produzirá a seguinte página (Figura 2.58):
Figura 2.58 | Formulários com Bootstrap
Agora, você vai entender quais estilos e classes apresentadas aplicaram nos elementos
CSS: container, mt-4, form-control e btn.
Container
O Bootstrap também tem sua própria classe container. A vantagem dessa classe para o
código que você criou manualmente é que o container do Bootstrap é responsivo, i.e.,
logo, o bloco vai se ajustar de acordo com o dispositivo utilizado. Para ativar o design
responsivo, você precisa incluir a seguinte meta tag de escala dentro do <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Observe como a página construída sem e com Bootstrap será vista em um smartphone
(Figura 2.59):
Figura 2.59 | Comparação entre o container criado manualmente e o container nativo do

Bootstrap
(A) Sem Bootstrap (não responsivo)

(B) Com Bootstrap (responsivo)
mt-4
A classe mt-4 foi utilizada no lugar da classe linha. O padrão de classes de
espaçamento Bootstrap é formado por um caractere representando o tipo de
espaçamento (m para margin e p para padding), a posição (t para top, b para bottom, l
para left e r para right) e um valor numérico, que pode ser substituído por números de 0
a 5 (quanto maior o número, maior o espaçamento da margem).
Reflita
Observe que o Bootstrap utiliza um padrão lógico para nomear suas classes. Por
exemplo: a classe mt-4 aplica uma propriedade margin-top; se desejássemos utilizar
uma classe para alterar o espaçamento da margem esquerda (margin-left), poderíamos
utilizar a classe ml-4.
Com base nisso, reflita sobre possíveis variações de classes Bootstrap para margem e
preenchimento e indique a classe do Bootstrap que aumenta ao máximo o
preenchimento da margem interna inferior.
form-control
Form-control é a classe que formata entradas de formulários no padrão Bootstrap. Ela

deve ser aplicada a todos os elementos de um formulário em que se deseja inserir um
novo estilo. A Figura 2.59 ilustra a diferença entre o estilo criado anteriormente e o
estilo padrão do Bootstrap.
btn
A classe btn é responsável por aplicar estilos de formatação em botões. No exemplo, ela
recebe o auxílio de duas outras classes: btn-success (aplica o estilo em verde) e btn-
block (define a largura do botão em 100%). Há oito variações de cores, além do botão
tipo link (Figura 2.60):
Figura 2.60 | Cores aplicadas a botões com Bootstrap
Fonte: adaptada de Bootstrap Team (2020).
Observe o código usado para criar os botões acima:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
Sistema de grade (grid system)
Um recurso valioso do Bootstrap é o chamado sistema de grade (grid system). O

principal componente do sistema de grade Bootstrap são os containers.
Anteriormente, definimos nossa classe container com uma largura fixa de 960px, logo,
nosso container não era responsivo, uma vez que, independentemente da tela utilizada,
nosso container teria sempre 960px. O container Bootstrap determina o tamanho da
largura com base na resolução da tela usada para visualizá-lo. Por exemplo: se a tela
possuir mais do que 1200 px de largura, o Bootstrap determinará que seu container
tenha 1140px, e se for maior do que 992px, então, o máximo será de 960px. Se for
maior que 768, o tamanho máximo será de 720px; se for maior que 576px, terá 540px; e
se for menor do que isso, o container ocupará 100% do espaço disponível (Quadro
2.10). A ideia do container Bootstrap é impedir que elementos saiam do espaço
disponível em tela.
Quadro 2.10 | Dispositivos e resoluções do sistema de grade Bootstrap
Telas
Tela extra pequenas
Disposi Tela média Tela média Tela grande
pequena (smartphone
tivos (Tabletes) (Laptops) (Desktops)
(smartphone) de alta
resolução)
Largura < 576 px ≥576px ≥ 768 px ≥ 992px ≥ 1200px
Tamanh
o
máximo Nenhum
540 px 720 px 960 px 1140px
antes (auto)
do
colapso
Classes .col- .col-sm- .col-md- .col-lg- .col-xl-

de
colunas
# de
12
colunas
Após apresentarmos a classe Container, vamos apresentar a classe container-fluid.

Enquanto a classe container respeita os tamanhos disponíveis, a classe container-fluid
utiliza todo o espaço disponibilizado pela tela usada, ou seja, sempre 100% do espaço
(com exceção das margens). Isso pode ser interessante, por exemplo, em páginas que
exibem tabelas, assim, o máximo de espaço será aproveitado. Entretanto, é preciso
atentar-se a monitores muito grandes (como resoluções Full HD: 1920x1080 px ou 4K).
Mesmo que a resolução seja muito grande, o Bootstrap tentará utilizar todo o espaço
disponível, o que poderá gerar muitos espaços em branco.
Outro ponto importante das classes do grid system Bootstrap são as linhas, colunas e
pontos de colapso. Bootstrap trata do sistema de grades como se fosse uma tabela com
exatamente 12 colunas. Entretanto, você não precisa usar as 12 colunas, podendo aplicar
tamanhos personalizados (desde que sejam múltiplos de 12). Observe a Figura 2.61 a
seguir.
Figura 2.61 | Sistema de grade Bootstrap

(A) Exemplos de uso de colunas no Bootstrap. A soma dos valores de classes em uma
linha deve ser 12 (no máximo). (B) Caso a soma ultrapasse 12, a linha entra em colapso.
Nesse exemplo, a última coluna é jogada para a próxima linha, e isso garante a
integridade dos elementos da coluna.
Fonte: adaptada de Bootstrap Team (2020).
O Código 2.37 apresenta uma implementação de um simples layout responsivo usando

as classes Bootstrap.
Código 2.37 | Implementação de um layout responsivo com classes em Bootstrap
<header class="container">
<div class="row">
<div class="col-12 p-5 bg-primary">
Cabeçalho
</div>
</div>
</header>
<div class="row">
<div class="col-8 p-5 bg-info">
Conteúdo principal <br> (coluna ocupa 75%)
</div>
<div class="col-4 p-5 bg-warning">
Menu latera (coluna ocupa 25%)
</div>
</div>
</main>
<footer class="container">
<div class="row">
<div class="col-12 p-3 bg-danger text-center">
<p>Eu sou o rodapé.</p>
</div>
</div>
</footer>
O código apresentado resultará na página mostrada na Figura 2.62 a seguir.
Figura 2.62 | Linhas (row) e colunas (col) no Bootstrap

Veja que o padrão de cores apresentado para os botões vale para componentes de pano
de fundo (bg-*: sendo bg-primary azul, bg-info verde-água, bg-warning amarelo e bg-
danger vermelho). Note, também, que usamos a classe p-5, que é equivalente a pt-5, pr-
5, pb-5 e pl-5 usadas ao mesmo tempo. Além disso, aplicamos text-center, que
centraliza o texto do rodapé.
Podemos, ainda, adicionar um ponto de colapso. Caso a resolução da tela seja pequena,
é desejável que a coluna principal e o menu lateral não sejam exibidos lado a lado e sim
um abaixo do outro, para isso, basta alterar as classes usadas:
<div class="col-12 col-lg-8 p-5 bg-info">
Conteúdo principal
</div>
<div class="col-12 col-lg-4 p-5 bg-warning">
Menu lateral
</div>
Nesse caso, aplicamos duas classes distintas para cada um: col-12 e col-lg-8 para o
conteúdo principal e col-12 e col-lg-4 para o menu lateral. Se a tela tiver uma resolução
grande, serão aplicadas col-8 e col-4, e se a tela tiver uma resolução pequena, o sistema
deverá adotar a classe col-12, i.e., ocupando todo o espaço disponível.
Logo, o mesmo documento exibido na Figura 2.62, em um smartphone, seria visto

como ilustrado na Figura 2.63:
Figura 2.63 | Design responsivo do Bootstrap - visualização de um smartphone
Animação e transição utilizando CSS
O CSS3 permite, ainda, a inserção de animações em elementos HTML. As animações

do CSS não são tão avançadas quanto aquelas construídas usando-se JavaScript,
entretanto, elas permitem configurar transições entre estilos CSS. A propriedade
responsável por isso é animation. Essa classe pode receber, ainda, outras
subpropriedades (Quadro 2.11):
Quadro 2.11 | Subpropriedades de animation
Sub-propriedade Definição
Determina o tempo em que o elemento é carregado e o início da

animation-delay
sequência de animação (delay).
Configura alternância de direções de um elemento (permite voltar ao

animation-direction
ponto inicial e repetir ação).
animation-duration Configura o tempo que uma animação deve completar um ciclo.
animation-iteration-
Configura o número de vezes que uma animação deve se repetir.
count
animation-name Especifica o nome da regra com parênteses (at-rule) @keyframes.
animation-play-state Permite pausar e recomeçar a animação.
animation-timing-
Configura a sincronização da animação.
function
Configura os valores aplicados pela animação antes e depois de se

animation-fill-mode
executar.
Fonte: adaptado de MDN Web Docs (2019).
Vamos adicionar o seguinte efeito no arquivo “estilo.css” e configurar o exemplo

anterior:
div{
animation-duration: 1s;
animation-name: surgir da direita;
@keyframes surgir_da_direita{
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
No Código 2.38 foi configurada uma animação com duração de 1 segundo denominada
surgir_da_direita. Como o próprio nome define, a animação permite que divs surjam na
tela pelo lado direito e deslizem até o lado esquerdo. O estilo inicial é definido dentro
do bloco iniciado com from (observe que a margem esquerda inicial é 100%, ou seja,
está fora da vista) e o estilo final é definido no bloco to (aqui, a margem esquerda é de
0%). Além disso, foi aplicada uma mudança de tamanho de 300 para 100%, o que gera
um efeito redutivo interessante (Figura 2.64).
Figura 2.64 | Exemplo de animação em quatro períodos distintos
(A) Tempo 0s
(B) Tempo 0,5s
(C) Tempo 0,75s
(D) Tempo 1s
Saiba mais
Bootstrap Icons
Ícones são essenciais para construção de sites com interface amigável. Recentemente,
Boostrap lançou sua própria biblioteca de ícones para auxiliar desenvolvedores.
Veja alguns exemplos de ícones:
Figura 2.65 | Ícones Bootstrap
Fonte: captura de tela do software Bootstrap elaborada pelo autor.
Exemplo básico: para inserir o ícone utilize o código a seguir:
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20
20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><patch fill-
rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0
01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>
É claro que a inserção de ícones com códigos assim pode ser um pouco complexa. Você
pode acessar a página do Bootstrap icons, escolher o ícone desejado e inseri-lo usando o
código informado na página.
Por exemplo: o código para inserção do ícone
encontra-se neste link: https://icons.getbootstrap.com/icons/house-door/ .
A maneira mais simples é: fazer o download dos arquivos SVG e, depois, inseri-los
como imagens:
<img src="[NOME-ICONE].svg" width="[largura]" height="[altura]">
Você pode baixá-la manualmente em: https://github.com/twbs/icons/releases/latest/.
Vamos precisar dos arquivos presentes na pasta “icons”.
Copie a pasta e cole no mesmo diretório que o seu site.
Para inserir o ícone
(“book.svg”), digite a pasta seguida do nome do arquivo desejado:
<img width="50px" height="50px" src="icons/book.svg">
Uma lista com vários nomes de ícones pode ser encontrada no link disponível em:
https://icons.getbootstrap.com/.
Além disso, você pode encontrar na página disponível em:

https://getbootstrap.com.br/docs/4.1/getting-started/introduction/. Nela você terá o passo
a passo para introduzir a ferramenta Bootstrap.
Pesquise mais
Algumas referências complementares:
 MDN WEB DOCS. Tabelas. 2019.

 MAUJOR. Tabelas de dados acessíveis. 2011.
É fundamental que você foque os fundamentos do CSS, entretanto, o conhecimento de

conceitos básicos sobre frameworks CSS, como o Bootstrap, pode auxiliar no seu
desenvolvimento como web designer.
Nesse caso, a referência básica é a página oficial do Bootstrap:
 Versão 4.1 (em português): https://getbootstrap.com.br/

 Versão 4.5 (apenas em inglês): https://getbootstrap.com/
Aqui, apresentamos fundamentos da aplicação de estilos para tabelas e formulários;

conhecemos os frameworks Bootstrap e DataTables; por fim, vimos como realizar
animações básicas usando CSS. Agora, é o momento de demonstrar na prática o
conhecimento adquirido. Vamos lá?
REFERÊNCIAS
BOOTSTRAP TEAM. Bootstrap. [s.d.]. Disponível em: https://getbootstrap.com/.

COYIER, C. A complete guide to the table element. 2013. Disponível em:

https://bit.ly/3sTGvuK. Acesso em: 25 fev. 2021.
MAUJOR. Tabelas de dados acessíveis. 2011. Disponível em: https://bit.ly/3qeRRrC.
MDN WEB DOCS. Tabelas. 2019. Disponível em: https://mzl.la/3kNVFPu. Acesso

em: 24 fev. 2021.
SILVEIRA, D. Brasil tem mais de 207 milhões de habitantes, segundo IBGE. 2017.
Disponível em: https://glo.bo/3bjRUyd. Acesso em: 25 fev. 2021.
TABELAS EM CSS
O QUE É DATATABLES?
DataTables é uma biblioteca especialmente construída para formatação de tabelas, ele

contém funcionalidades avançadas que podem ser inseridas com poucas linhas de
código.
sem medo de errar
A solução completa da situação-problema está disponível aqui:
A seguir, você poderá entender como cada parte foi construída:
Tecnologias usadas:
 Bootstrap 4.5.
 DataTables.
 Imagens coletadas no Pixabay.
Estrutura em que o código foi organizado, conforme a Figura 2.66.
Figura 2.66 | Estrutura de diretórios e organização da página
O documento web está disponível em index.html; optamos por construir apenas um

arquivo HTML para todo o conteúdo; o arquivo CSS principal foi incluído em
dados/css/; foi utilizada a CDN para o DataTables e Bootstrap; e as Imagens foram
inseridas em dados/img e obtidas no Pixabay.
A maior parte dos códigos de estilo utilizou o Bootstrap e poucas alterações foram
realizadas na folha de estilo principal. Observe o Código 2.39 a seguir:
/*
Arquivo: estilo.css
*/
nav{
min-height: 80px;
td img{
width: 25px;
height: 25px;
}
/* ID */
#quem-somos{
min-height: 600px;
background-image: url('../img/computer-768608_1280.jpg');
background-color: #000;
/* Classes */
.sobreposicao{
min-height: 600px;
background-color: rgba(0, 0, 0, 0.7);
Aqui, destacamos a classe “sobreposicao", que insere um fundo com 70% de

transparência sobre a div “quem-somos”. Esta, por sua vez, exibe uma imagem de
fundo, logo, preste a atenção na forma como o link da imagem de fundo foi declarado:
background-image: url('../img/computer-768608_1280.jpg');
O CSS procurará a imagem com base na sua localização atual. Lembre-se de que o
arquivo está disponível em dados/css/estilo.css, logo, para encontrar a imagem de
fundo, ele deverá partir dessa posição. A imagem se encontra em dados/img/ computer-
768608_1280.jpg, entretanto, a pasta “dados” foi substituída por “..”. O símbolo “..”
indica o diretório anterior, então, a imagem se encontra dentro da pasta “img”, que está
um diretório atrás.
Página inicial
Todas as páginas foram incluídas dentro de “index.html” e podem ser acessadas por
links internos #nome-do-id. Para um melhor entendimento do código, dividimos ele em
seis partes:
Na primeira parte, fizemos as declarações de tags iniciais e incluímos três folhas de

estilo: (i) folha de estilo do DataTables (pela CDN), (ii) folha de estilos do Bootstrap
(pela CDN) e (iii) folha de estilo principal (apresentada anteriormente).
Em seguida, fizemos a abertura das tags <body> e <header> e inserimos o cabeçalho.

Optamos por utilizar o menu nativo do Bootstrap.
Depois, construímos duas colunas de tamanhos col-lg-5 e col-lg-7 para receber uma
imagem e um texto de descrição. Preste a atenção nas classes Bootstrap utilizadas para
inserir detalhes nos estilos dos elementos exibidos. Confira o Código 2.40 com a
primeira parte da implementação index.html.
Código 2.40 | index.html (parte 1)
<!DOCTYPE html>
<html>
<head>
<title>Internet ilimitada</title>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link href="dados/css/estilo.css" rel="stylesheet"> 
</head>
<body>
<header>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#"><img src="dados/img/logo.png"></a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse bg-dark" id="navbarNav" style="z-index:9999">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Página inicial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quem-somos">Quem somos</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Planos de internet
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#planos">Alfa</a>
<a class="dropdown-item" href="#planos">Beta</a>
<a class="dropdown-item" href="#planos">Gama</a>
va class="dropdown-item" href="#planos">Delta</a>
<a class="dropdown-item" href="#planos">Omega</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="O que deseja?">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
</header>

<main>

<div class="jumbotron mb-0">
<div class="row py-4">

<div class="col-12 col-lg-5">
<img src="dados/img/monitor-1307227_1280.jpg" class="img-fluid img-thumbnail">
</div>

<div class="col-12 col-lg-7">
<h1 class="display-4">Faça sua <strong class="text-info">internet</strong> voar!

</h1>
<p class="lead">Com os nossos planos de internet com até 400 Mb de velocidade</p>
<hr class="my-4">
<p class="text-muted">Conheça nossos planos combo com modem wifi grátis, telefone
fixo, pacote de dados, TV digital e o melhor serviço de atendimento da região. Planos
combo à partir de R$ 50 sem taxa de instalação.</p>
<a class="btn btn-info btn-lg" href="#planos" role="button">Conheça nossos

planos</a>
<div>
</div>
</div>
Essa primeira parte do código produzirá a página ilustrada na Figura 2.67 a seguir.
Figura 2.67 | Página construída
Uma das vantagens de se utilizar o menu do Bootstrap é que ele se adapta ao dispositivo
utilizado (design responsivo). A Figura 2.68 ilustra o resultado da página no
smartphone.
Figura 2.68 | Visão da página em um smartphone

Perceba que, nesse exemplo, a imagem foi enviada para a parte superior e o texto para a
parte inferior (isso se deve às classes Bootstrap utilizadas). A esse processo de
adaptação dá-se o nome de design responsivo.
Seção Quem Somos

Em seguida, destacamos uma seção para exibir uma mensagem que apresente a
empresa. Chamamos essa seção de “quem-somos”. Nela, adicionamos uma imagem de
fundo e uma segunda camada posterior na cor preta, mas com 70% de transparência. A
transparência foi definida no arquivo estilo.css, na linha:
background-color: rgba('0, 0, 0, 0.7');
rgba: indica a quantidade de vermelho (r), verde (g) e azul (b). O último valor (a),
conhecido como alpha, indica o índice de transparência, que vai de 0 a 1 (no exemplo,
0.7 indica 70% de transparência).
Código 2.41 | index.html (parte 2) – Quem somos
<section id="quem-somos">
<div class="sobreposicao text-center p-5 text-light">
<h2 class="display-4 text-info pt-5">Quem somos?</h2>
<hr class="bg-info">
<p class="lead text-light col-lg-6 offset-lg-3 p-5">Somos uma empresa conceituada no

mercado de internet banda larga. Atuamos há mais de 10 anos trazendo planos de
internet com alta qualidade para sua família. Recentemente, implmentamos uma
poderosa rede de fibra ótica. Conheça já nossos <a href="#planos" class="text-
info">planos</a> de altíssima velocidade. </p>
</div>
</section>
A Figura 2.69 ilustra como a página ficará ao ser exibida:
Figura 2.69 | Visão da página

Painel de planos
Construímos uma seção para exibir uma lista de planos disponíveis. Para essa seção,
optamos por utilizar a classe cards do Bootstrap.
Observe a implementação no painel de planos no Código 2.42.
Código 2.42 | index.html (parte 3) – Painel de Planos
<section class="container pb-5 text-center" id="planos">
<h1 class="p-5">Planos</h1>
<div class="row">
<div class="col-12 col-md-3">
<div class="card">
<div class="card-img-top bg-light text-muted text-center py-5"><h1>R$

50</h1></div>
<h5 class="card-title">Plano Alfa</h5>
<p class="card-text">Internet de 10 Mb de velocidade com instalação grátis.</p>
<a href="#" class="btn btn-info">Assine já!</a>
</div>
</div>
</div>
<div class="card">

90</h1></div>
<h5 class="card-title">Plano Beta</h5>
</div>
</div>
</div>
<div class="card">

120</h1></div>
<h5 class="card-title">Plano Gama</h5>
</div>
<div>
</div>
<div class="card">

150<h1></div>
<h5 class="card-title">Plano Delta</h5>

</div>
</div>
</div>
</div>
<div class="card text-center my-5">
<div class="card-header bg-secondary text-light">
CONHEÇA NOSSO PLANO EMPRESARIAL
</div>
<h5 class="card-title">Plano Omega</h5>
<p class="card-text col-8 offset-2">Internet de 400 Mb de velocidade com instalação

grátis, telefone fixo, modem wifi, pacote de dados e TV digital com 150 canais. E ainda
você irá contar com suporte dedicado 24 horas por dia, 7 dias por semana.</p>
<a href="#" class="btn btn-danger">Assine já!</a>
</div>
<div class="card-footer text-muted">
APENAS R$199
</div>
</div>
</section>
Veja como essa página ficará ao ser exibida:
Figura 2.70 | Visualização da página Planos criada

Aqui, dividimos uma linha em quatro colunas (col-md-3). Em cada card, exibimos os
preços, o título do plano e um botão “assine já”; além disso, inserimos o quinto plano
em um card logo abaixo, e fizemos isso para dar destaque a ele.
Tabela comparativa
Em seguida, construímos uma tabela comparativa para os planos. Nesse caso,

combinamos o DataTables com as classes destinadas à formatação de tabelas do
Bootstrap. Veja o código:
Código 2.43 | index.html (parte 4) – Tabela comparativa para planos
<section id="compare" class="bg-light pb-5">
<div class="pb-5 container">
<h1 class="pt-5 text-center">Compare nossos COMBOS</h1>
<p class="lead text-muted text-center pb-5">Descubra o plano ideal para você</p>
<table id="compare_planos" class="table table-striped table-hover table-responsive-sm

text-center">
<thead>
<tr>
<th>#</th><th>Plano</th><th>Internet</th><th>Modem wifi</th><th>Telefone
fixo</th><th>Pacote de dados</th><th>TV</th><th>Preço (R$)</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alfa</td>
<td>10 Mb</td>
<td><img src="dados/img/x-circle.png"></td>
<td>50</td>
</tr>
<tr>
<th>2</th>
<td>Beta</td>
<td>20 Mb</td>
<td><img src="dados/img/check-circle-fill.png"></td>
<td>90</td>
</tr>
<tr>
<th>3</th>
<td>Gama</td>
<td>50 Mb</td>
<td>5 GB</td>
<td>120</td>
</tr>
<tr>
<th>4</th>
<td>Delta</td>
<td>100 Mb</td>
<td>10 GB</td>
<td>100 canais</td>
<td>150</td>
</tr>
<tr>
<th>5</th>
<td>Ômega</td>
<td>400 M</td>
<td>100 GB</td>
<td>150 canais</td>
<td>199</td>
</tr>
</tbody>
</table>
</div>
</section>
A Figura 2.71 ilustra a página com a tabela comparativa de planos.
Figura 2.71 | Tabela comparativa de planos
Aqui, destacamos a classe table-responsive-sm inserida na tabela. Essa classe é

necessária para tornar tabelas responsivas. Se a tabela ultrapassar o limite estabelecido
pelo container, o Bootstrap inserirá uma barra horizontal que permite a navegação pela
tabela sem colapsar a página. É importante ressaltarmos que as configurações no estilo
do DataTables para essa tabela foram realizadas na tag <footer>.
Seção fale conosco
A seção fale conosco foi desenvolvida com base nos scripts construídos anteriormente.
Observe o código 2.44 a seguir.
Código 2.44 | index.html (parte 5) – Seção Fale conosco
<section id="contato" class="container p-5">
<h1 class="text-center">Fale conosco</h1>
<div class="mt-4">
<label>Nome</label>
<input type="text" name="nome" class="form-control" size="50"

placeholder="Informe seu nome">
</div>
<div class="mt-4">
<label>E-mail</label>
<input type="email" name="email" class="form-control" size="50"

placeholder="Informe seu email">
</div>
<div class="mt-4">
<input type="text" name="assunto" class="form-control" size="50"

placeholder="Informe o assunto">
</div>
<div class="mt-4">
<textarea name="mensagem" class="form-control" placeholder="Entre com a

</div>
<div class="mt-4">
<input type="submit" name="submit" value="Enviar" class="btn btn-success btn-

block">
</div>
</form>
</section>
</main>
Fonte: elaborado pelo autor. Figura 2.72 | Página da seção Fale conosco
Rodapé
Por fim, adicionamos o rodapé na página. Aqui, adicionamos apenas uma mensagem
indicando a fonte das imagens utilizadas, que foram coletadas do Pixabay
gratuitamente, e embora a atribuição de fonte não seja obrigatória pelos termos do
Pixabay, é uma boa prática informar a fonte de onde as imagens foram obtidas. Além
disso, adicionamos, também, alguns scripts: jQuery, Bootstrap Bundle e DataTables.
Esses scripts são requisitados pelos frameworks utilizados.
Além disso, incluímos um script que altera os padrões de exibição da tabela. Esse script
remove a paginação, a barra de informações e de buscas. Observe o Código 2.45 com a
criação do rodapé. Veja que incluímos uma imagem com o link do Pixabay.
Código 2.45 | index.html (parte 6) – Rodapé
<footer class="bg-info p-5 text-center text-light">
<p>© 2021 | Imagens de <a class="text-warning"

href="https://pixabay.com/pt/users/geralt-9301/?utm_source=link-
attribution&utm_medium=referral&utm_campaign=image&utm_content
=1307227">Gerd Altmann</a> por <a class="text-warning"
href="https://pixabay.com/pt/?utm_source=link-
=1307227">Pixabay</a> e <a class="text-warning" href="https://pixabay.com/photos/?
utm_source=link-
=768608">Free-Photos</a> por <a class="text-warning" href="https://pixabay.com/pt/?
utm_source=link-
=768608">Pixabay</a></p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></
script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function(){
/* configuração obtida aqui: https://datatables.net/examples/basic_init/filter_only.html

*/
$('#compare_planos').DataTable({
"paging": false,
"searching": false,
"info": false
});
} );
</script>
</footer>
</body>
</html>
Não pode faltar
A LINGUAGEM JAVASCRIPT
QUAL É A APLICABILIDADE DO JAVASCRIPT?
Essa linguagem do tipo front-end é usada para realizar alterações em páginas web; ela é
executada diretamente no navegador, proporcionando mudanças interativas na página
em tempo real.
convite ao estudo
Prezado aluno, nesta unidade, “Desenvolvimento web com JavaScript”, você vai
conhecer e compreender a linguagem de programação JavaScript usada em aplicações
client-side, além de seus recursos para desenvolvimento web. Para construir boas
aplicações web, não é necessário ter um conhecimento profundo em sintaxe e
metodologias do JavaScript. Entretanto, conhecer os fundamentos básicos dessa
linguagem é importante para que você esteja apto a compreender scripts desenvolvidos
por outros usuários (como as bibliotecas) e adaptá-los para suas aplicações.
Na Seção 3.1, “A linguagem JavaScript”, você vai conhecer os fundamentos da

linguagem JavaScript, aprender a construir seus primeiros scripts, a criar variáveis e a
executar funções, além de estruturas condicionais e de repetição.
Na Seção 3.2, “Elementos de aplicações em JavaScript”, você vai conhecer o modelo de
objetos de documento (DOM), aprender como manipular o estilo de formulários, ver
uma introdução às tecnologias AJAX (Asynchronous JavaScript And XML) e JSON
(JavaScript Object Notation) e aprender a utilizar as funcionalidades de geolocalização,
além de controlar a execução de vídeos usando HTML5 e JavaScript.
Na Seção 3.3, “Bibliotecas e frameworks JavaScript”, você vai ver uma introdução a
bibliotecas JavaScript, como Node.js, Create.JS, jQuery, React, D3.js, Glimmer.js,
Impact.js, Bootstrap e AngularJS, bem como entender a fundo como desenvolver
códigos usando jQuery, além de alguns exemplos usando Bootstrap JavaScript.
Bons estudos!
Caro aluno, JavaScript é uma das únicas linguagens de programação executadas em um

navegador de internet. Entretanto, o JavaScript também pode ser executado em outros
ambientes, sendo possível usá-lo em ambiente de servidor (Node.js). Sem JavaScript,
não seria possível criar páginas interativas, como jogos online, serviços de e-mail,
geolocalização e carregamento de vídeos.
A melhor forma de aprender a desenvolver códigos usando JavaScript é conhecer os

fundamentos da linguagem de programação (que veremos nesta seção) e, a seguir,
pesquisar bibliotecas JavaScript existentes e estudar códigos construídos por outros
desenvolvedores.
JavaScript possui uma imensa e ativa comunidade de desenvolvedores, por isso, espera-
se achar uma grande quantidade de documentação na internet. A melhor maneira de
aprender JavaScript na prática é trabalhando com exemplos reais. JavaScript tem se
tornado cada vez mais popular, estando presente na grande maioria dos documentos
web. Nesta seção, você aprenderá os fundamentos dessa linguagem, como
características, sintaxe e possíveis usos.
Agora, para nos aproximarmos da prática, imagine que o setor de marketing e data
science da empresa de planos de internet em que você trabalha chegou à conclusão de
que, às quartas-feiras, a taxa de vendas de planos tem uma queda significativa. Por isso,
decidiram implementar uma promoção: assine na quarta-feira e receba 30 dias grátis.
Você deve, então, implementar uma função que exiba na seção de planos de internet a
mensagem:
PROMOÇÃO! Assine qualquer plano hoje e receba 30 dias grátis!
Para isso, você deve:
1. Criar um array para armazenar todos os dias da semana (domingo, segunda-

feira, [...], sábado).
2. Utilizar JavaScript para detectar o dia da semana atual.
3. Usar um comando condicional para exibir um bloco de código apenas na quarta-
feira.
Dica 1. Você pode usar o seguinte código para obter o dia atual:
d = new Date();
d.getDay();
Dica 2. Você pode gravar textos na página usando a função:
document.write( )
Para solucionar esse desafio, aproveite o conteúdo a seguir. Bons estudos!
CONCEITO-CHAVE
O HTML é uma linguagem estática, isto é, uma vez gerada a página, ela será exibida da
forma como foi criada. Entretanto, a manutenção de sites estáticos é complexa: imagine
um site de receitas culinárias em que um cozinheiro precisa construir uma página
HTML para adicionar cada uma de suas receitas: é inviável! Por isso, tornou-se
necessária a construção de páginas dinâmicas. Além disso, sites modernos requerem
funcionalidades interativas, como um menu complementar, um botão que carrega uma
janela extra ou um painel que troca uma imagem de tempos em tempos. Com CSS,
vimos que podemos realizar algumas modificações envolvendo estilos, entretanto,
podemos aplicar modificações avançadas usando linguagens de programação, que
podem ser back-end ou front-end; além disso, para entendermos a diferença entre eles,
precisamos voltar ao conceito do paradigma cliente-servidor.
Paradigma cliente-servidor
As páginas de internet são compostas por documentos estruturados no formato HTML e

estilizadas por meio de CSS. A internet é composta por uma série de computadores
interligados de forma descentralizada por meio de redes de comunicação. Então, qual o
papel do JavaScript em um documento web?
Antes de visualizarmos isso, é necessário entender como funciona o paradigma cliente-

servidor. Nesse paradigma, todo dispositivo usado para acessar a internet é denominado
cliente (esse nome, muitas vezes, é utilizado para ser referir ao navegador ou ao próprio
usuário: sim, você é o cliente). Para que um cliente possa acessar um site na internet,
esse site deve estar disponível em um computador. Ao computador que fornece acesso
ao site dá-se o nome de servidor. A Figura 3.1 ilustra o esquema do paradigma cliente-
servidor.
Figura 3.1 | Paradigma cliente-servidor

Assim, o paradigma cliente-servidor explica como uma página da internet pode ser
visualizada:
 O cliente faz uma requisição à internet por meio de um navegador (no caso,
fornece um endereço do site).
 Roteadores, servidores DNS e outros dispositivos e serviços indicam a
localização do servidor que armazena o site requisitado.
 O servidor envia para o cliente os códigos necessários para renderização da
página.
Assim, pode-se afirmar que as linguagens de programação podem ser aplicadas em dois
pontos distintos: no cliente ou no servidor. Linguagens que executam no servidor são
denominadas server-side, também conhecidas como linguagens back-end. Linguagens
que executam no cliente são denominadas client-side, também conhecidas como front-
end. Cada uma das linguagens executadas em cliente ou servidor tem seu propósito.
Linguagens executadas no servidor têm uma maior segurança, uma vez que os códigos
não ficarão visíveis para os usuários em geral, que receberão apenas os códigos
HTML/CSS. Já as linguagens executadas no cliente utilizam recursos do próprio
dispositivo do cliente, ou seja, não é necessário requisitar que o servidor processe
mudanças no documento web (o que melhora a performance).
JavaScript é a linguagem front-end usada para realizar alterações em páginas web; ela
é executada diretamente no navegador, proporcionando mudanças interativas na página
em tempo real. Essa linguagem é considerada a mais popular para o mercado de
trabalho segundo uma pesquisa recente do site Stack Overflow (2019).
Fundamentos do JavaScript
JavaScript (JS) é uma linguagem de programação de script interpretada, dinâmica e

executada em navegadores de internet (MDN WEB DOCS, 2020). Diferentemente do
HTML e do CSS, linguagens de marcação e de estilos, respectivamente, o JavaScript
permite a entrada de dados, o processamento e o controle do fluxo dos dados
diretamente no navegador, bem como o retorno de resultados computados. Tais
características fazem do JavaScript uma linguagem de programação front-end, isto é,
uma linguagem executada no cliente. O JavaScript trabalha em conjunto com HTML e
CSS para tornar páginas de internet mais dinâmicas; além disso, ele tem sido usado, por
exemplo, para a construção de jogos online, a visualização de dados interativa, a
visualização de moléculas, a transmissão assíncrona de dados, entre outros.
Exemplificando
Um exemplo do poder da linguagem JavaScript
Pode-se utilizar a linguagem JavaScript para uma grande variedade de funcionalidades

que vão desde alterações simples no CSS até a construção de jogos executados
diretamente de um navegador. Observe um exemplo de como a linguagem JavaScript
pode ser usada. A Figura 3.2 ilustra um exemplo de buscador Google.
Figura 3.2 | Uma simples página de internet
Fonte: captura de tela do Google elaborada pelo autor.
A Figura 3.3 mostra o acesso ao console dessa página, no qual foi digitado o comando:
document.body.style.backgroundColor = 'red';
Figura 3.3 | Abrindo o console
Fonte: captura de tela do Google adaptada pelo autor.
O resultado do comando é mostrado na Figura 3.4.
Figura 3.4 | Mudando a cor de fundo para vermelho

Fonte: captura de tela do Google adaptada pelo autor.
Nesse exemplo, foi utilizado um comando JavaScript para alterar a cor de fundo. Vamos
entender o código parte por parte:
Aqui, foi indicado ao JavaScript que se deve acessar elementos presentes dentro do
documento web.
O elemento a ser modificado é a tag <body>.
A seguir, informamos que se deseja alterar o estilo CSS dessa tag.
A seguir, será informada a propriedade background-color (propriedade que altera a cor

de fundo) a ser alterada. Perceba que JavaScript não permite que se utilize hífen para
separar palavras, assim, o hífen é removido e, em seu lugar, a primeira letra da próxima
palavra é colocada em maiúsculo. Logo, backgroundColor é equivalente a background-
color.
Por fim, foi indicado que essa propriedade deverá receber o valor red (vermelho). O
valor poderia tanto ser inserido entre aspas (“) quanto entre apóstrofos (‘), como nesse
caso. Veja que a linha é encerrada com ponto e vírgula; isso não é obrigatório, mas sim
uma boa prática do JavaScript.
Nesse exemplo, foi utilizado o console para fazer alterações no estilo com JavaScript.
Entretanto, o console é apenas uma maneira interativa de desenvolvedores web
analisarem e testarem seus códigos (no Brasil, chamamos isso de depurar o código ou,
informalmente, de debugar o código), não sendo a forma de se utilizar códigos
JavaScript em um site. Para isso, é necessário incorporar o código diretamente no
HTML.
Acessando o console em diferentes navegadores
Navegadores apresentam ferramentas para auxiliar no desenvolvimento web. Uma

dessas ferramentas é o console da página (presente nas ferramentas de inspeção de
código). O Quadro 3.1 apresenta formas de acesso ao console em dois diferentes
navegadores: Chrome e Firefox.
Quadro 3.1 | Como acessar o console do navegador

Diferenças entre navegadores
Chrome Firefox
Acessando inspecionar (clique com o botão direito).
Visualize o código-fonte. Agora, clique em console.

Diferenças entre navegadores
Em HTML, comandos JavaScript são declarados através da tag <script>:
<script>
/* Comandos JavaScript; */
<script>
Os comandos em JavaScript devem ser encerrados por ponto e vírgula (apesar de que o
uso de ponto e vírgula no final de uma linha não é considerado obrigatório para que um
script funcione). Além disso, assim como na linguagem CSS, comentários em
JavaScript também são inseridos entre os símbolos de /* e */. Todavia, JavaScript
também permite a inserção de comentários de linha única por meio dos símbolos
// inseridos no início de uma linha. Observe o exemplo a seguir:
<script>
/*
Comentário
de
múltiplas
linhas
*/
//comentário de linha única
</script>
É importante destacar que essa prática de inserção de códigos JavaScript diretamente no

arquivo HTML não é uma boa prática. Assim como CSS, o ideal é criar um arquivo
externo (de extensão .js) e embuti-lo no código HTML, conforme pode ser visto a
seguir:
Código 3.1 | Meu primeiro script em Javascript.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Meu primeiro script</title>

<link rel="stylesheet" href="estilo.css">

<script src="script.js"></script>
</head>
<body>

</body>
</html>
script.js
/* Comandos JavaScript; */
estilo.css
/* Arquivo de estilos */
Observe que no exemplo apresentado, dividimos a página web em três arquivos:
 index.html: arquivo principal que recebe a estrutura e o conteúdo da página.

 script.js: recebe os códigos JavaScript que serão executados em index.html.
 estilo.css: recebe os estilos que serão aplicados em index.html.
Veja a forma como os dois arquivos são declarados em index.html. Enquanto a folha de
estilo é referenciada pela tag simples <link> e a propriedade rel, o arquivo fonte do
script é inserido com a tag composta <script> e a propriedade src. Note que, no arquivo
script.js, não é necessário declarar a tag <script>.
Funções
JavaScript possui recursos nativos (built-in), denominados funções. As funções têm o

objetivo de receber informações passadas como parâmetros, realizar processamentos e
retornar os dados processados por meio de alguma ação. Para chamar uma função, deve-
se escrever o nome dessa função seguido de parênteses.
nome_da_função("Argumento 1","Argumento 2","...","Argumento n");
As funções podem receber de 0 a n argumentos, a depender da função utilizada. Um

exemplo simples é a função alert(), que exibe uma mensagem de alerta na caixa de
diálogo. Adicione o seguinte código dentro do seu arquivo script.js:
/* Meu primeiro script */
alert("Olá mundo");
Agora, observe o resultado mostrado na Figura 3.5:
Figura 3.5 | “Olá mundo!” JavaScript

Observe que, até o momento, você está apenas aprendendo a realizar as chamadas de
funções; na sequência, você aprenderá a criar suas próprias funções.
Variáveis e tipos de dados
Caro aluno, você já aprendeu a utilizar a função alert() para exibir uma mensagem,
agora, observe que alert recebeu um conjunto de letras (ou caracteres) declaradas entre
aspas. Assim como outras linguagens de programação, JavaScript atribui tipos para os
dados recebidos. Por exemplo: conjuntos de caracteres são dados do tipo string e, em
geral, são declarados entre “aspas” ou ‘apóstrofos’. Além disso, há diversos outros tipos
de dados:
Quadro 3.2 | Tipos de dados em JavaScript
Tipo Explicação Exemplo
Variável de texto. Deve ser declarada com

String var variavel = ‘Ola mundo’;
apóstrofos ou aspas.
Numérico Numerais inteiros ou flutuantes. var variavel = 3;
Boolean Variável verdadeira (true) ou falsa (false). var variavel = true;
Array Coleção de dados. var meuArray = [‘um’,2,’tres’,4];
var variavel =
Objetos Em JavaScript, objetos são “qualquer coisa”.
document.querySelector('p');
Fonte: adaptado de Mariano; de Melo-Minardi (2017); MDN WEB DOCS (2020).

No exemplo apresentado, foi utilizada a função alert() para imprimir uma string na
caixa de diálogo. Assim, sempre que for necessário exibir essa string novamente na tela,
esta deverá ser digitada novamente.
Linguagens de programação utilizam o conceito de variáveis para armazenamento de

dados na memória e reutilização durante o código. Imagine uma variável como uma
caixa na qual você armazena uma informação que poderá ser consultada a qualquer
momento. A seguir, observe um exemplo de uma variável:
/* script.js */
mensagem = "Olá mundo";
alert(mensagem);
No código apresentado a seguir, foi criada uma variável global denominada mensagem,
que receberá, como valor, a string Olá mundo. Veja, agora, a declaração de diversos
tipos de variáveis:
Código 3.2 | script.js – Declaração, exibição e atribuição de variáveis
/* script.js */
/* Declarando variáveis de diversos tipos */
mensagem = "Olá mundo";
numero = 1;
minha_lista = ["abacate", "goiaba", "queijo"];
verdadeiro = true;
/* Exibindo as variáveis */
alert(mensagem);
alert(numero);
alert(minha_lista);
alert(verdadeiro);
/* Atribuindo uma variável a outra variável */
mensagem = numero;
alert(mensagem);
Observe que foram evitados acentos em nomes de variáveis. Ainda que muitos
navegadores já ofereçam suporte ao uso de acentos em nomes de variáveis, alguns
desenvolvedores evitam utilizar os caracteres especiais para evitar possíveis falhas no
código (veja que espaços em nomes de variáveis não são aceitáveis e, em geral, são
substituídos pelo caractere “_”).
Observe, ainda, que é possível atribuir uma variável à outra. Na linha 15, foi atribuída a
variável numero à variável mensagem, logo, mensagem passará a receber o valor
de numero. Isso só foi possível porque foram utilizadas as variáveis globais. Além
dessas, existem outras formas de se declarar variáveis.
Assimile
Variáveis são case sensitive, isto é, letras maiúsculas e minúsculas fazem a diferença no
nome da variável. Por exemplo, uma variável chamada “mensagem” é diferente de uma
variável chamada “Mensagem”.
Em JavaScript, variáveis podem, ainda, ser declaradas por meio das palavras reservadas
var, const ou let (ou nada, como no exemplo anterior), seguido de um nome, o sinal de
atribuição e um valor (opcionais), e encerrado por ponto e vírgula.
Código 3.3 | Declarando variáveis em JavaScript
/* script.js */
/* Declarando variáveis */
mensagem_1 = "Olá mundo";
let mensagem_2 = "Olá mundo novamente";
const mensagem_3 = "Olá mundo pela terceira vez";
var mensagem_4 = "Olá mundo - episódio final";

Observe que as quatro variáveis declaradas são do tipo string. Entretanto, a diferença
entre elas dependerá do “escopo” adotado e das características desejadas. É importante
não chamar uma variável antes de sua declaração. Caso isso ocorra, o código será
imediatamente interrompido e um erro no console será exibido.
Entretanto, em JavaScript, há o conceito de hoisting: quando um script é executado,

todas as variáveis são elevadas (hoisting) ao topo do contexto de execução. Isso pode
permitir, por exemplo, que você utilize uma variável antes da declaração.
Código 3.4 | Ordem de declaração de variáveis para exibição de mensagens em JavaScript
/* script.js */
alert(mensagem_1)
alert(mensagem_2)
alert(mensagem_3)
alert(mensagem_4)

Na execução desse código, nada foi exibido, uma vez que a mensagem exibida na linha
3 só foi declarada na linha 9, ou seja, ela ainda não existia no momento da chamada (a
execução do código é linear). Ao verificar o console da propriedade “Inspecionar”, você
verá o seguinte erro, conforme nos é mostrado na Figura 3.6:
Figura 3.6 | Verificando erros no console

Isso indica que a variável mensagem_1 não foi definida antes da execução, logo, há um
erro na linha 3 do arquivo script.js (vemos isso na figura em script.js:3).
Agora, vamos verificar o que acontece com os outros tipos de variáveis. Você pode
comentar, separadamente, as linhas 3, 4 e 5 para verificar o que ocorre na execução da
próxima linha. Veja que, agora, temos um erro diferente (Figura 3.7):
Figura 3.7 | Comparando tipos de variáveis

//alert(mensagem_1)
alert(mensagem_2)
alert(mensagem_3)
alert(mensagem_4)
//alert(mensagem_1)
//alert(mensagem_2)
alert(mensagem_3)
alert(mensagem_4)
Pode-se observar que o console retorna um erro, indicando que não é possível acessar a
variável antes de sua inicialização. Ao comentar separadamente, é possível verificar que
a execução do código é interrompida a cada variável executada antes de sua declaração.
Entretanto, nenhum erro aparece se se realizar o mesmo teste para a variável

mensagem_4 (Figura 3.8):
Figura 3.8 | Variável indefinida

O sistema apenas imprime a palavra undefined (indefinido). Isso ocorre porque a

palavra reservada var possui escopo global, ou seja, ela existirá em qualquer parte do
código. Entretanto, o valor só será atribuído depois da declaração (por isso, é exibido
que o valor da variável é indefinido).
Código 3.5 | Declaração de variáveis antes e depois do alert
/* script.js */
//alert(mensagem_1)
//alert(mensagem_2)
//alert(mensagem_3)
alert(mensagem_4)

alert(mensagem_4)
Veja o que ocorre ao imprimir essa variável em dois pontos distintos do código (Figura
3.9):
Figura 3.9 | Imprimindo variáveis declaradas com var antes (A) e depois da declaração (B)
(A) alert na linha 4 (removendo comentário), antes da declaração da variável
(B) alert na linha 13, após a declaração da variável

Fonte: capturas de tela elaboradas pelo autor.
Essa é uma das principais diferenças entre var e let (recomenda-se criar variáveis
usando let). Enquanto var permite que variáveis sejam usadas antes de sua declaração,
let restringe a inicialização da variável antes de sua declaração. Variáveis let são
restringidas ainda pelo escopo, que pode ser entendido como o contexto de execução, ou
seja, uma parte do código. A palavra reservada const, por sua vez, cria variáveis
“constantes”, ou seja, que não podem ser modificadas.
Observe as linhas 6 e 9 no Código 3.6 e o resultado na Figura 3.10. Pode-se verificar

que, ao tentar mudar o valor de uma variável declarada como const, será exibido um
erro.
Código 3.6 | Mudança de variáveis declaradas como alert (linhas 6 e linha 9)
/* script.js */
mensagem_3 = mensagem_4
Fonte: elaborado pelo autor. Figura 3.10 | Constantes
Aqui, a variável mensagem_3, por ser do tipo const, não pode ser reatribuída a outro
valor.
O Quadro 3.3 apresenta as principais características de cada variável:
Quadro 3.3 | Palavras-chave usadas na declaração de variáveis
Palavra-chave const let var
Escopo global NÃO NÃO SIM
Escopo da função SIM SIM SIM
Escopo do bloco SIM SIM NÃO
Pode ser reatribuída NÃO SIM SIM
Fonte: adaptado de Gordon ([s.d.]).
Estruturas de controle
As linguagens de programação devem restringir que blocos de códigos sejam

executados apenas se determinada condição ou conjunto de condições forem
alcançadas. Veja a anatomia de um bloco de código:
bloco(condição){
comandos;
Entretanto, antes de apresentarmos os dois tipos de estruturas de controle (condicionais

e iterativas), é necessário que você conheça os operadores.
Operadores matemáticos
Um exemplo simples de operadores são os denominados operadores matemáticos.

Como o próprio nome diz, são os operadores usados para realização de operações
matemáticas, como soma (+), divisão (/), multiplicação (*), subtração (-), módulo ou
resto da divisão (%), exponenciação (**) e operador de atribuição (=).
Observe um exemplo a seguir:
Código 3.7 | Operadores matemáticos em JavaScript
/* script.js */
/* Operações matemáticas */
let a = 5;
let b = 2;
alert(a+b); // 7
alert(a-b); // 3
alert(a*b); // 10
alert(a/b); // 2.5
alert(a%b); // 1
alert(a**b); // 25
// Operador de atribuição
let soma = a + b; // variável soma RECEBE a + b

Dos exemplos apresentados, destaca-se o operador módulo (%), que retorna o resto de
uma divisão cujo resultado deve ser um número inteiro (no exemplo, 5 dividido por 2 é
igual a 2 com resto 1, e o módulo corresponde ao resto dessa divisão).
Observe que foi destacado o operador “=”, mas ele não é considerado um operador
matemático e sim um operador de atribuição. Veja na linha 15 um exemplo de uso do
operador de atribuição (não dizemos que a variável soma é IGUAL às variáveis a + b e
sim que soma RECEBE as variáveis a + b). Para avaliarmos uma igualdade, temos de
utilizar os operadores relacionais.
Exemplificando
Concatenando strings
É fácil compreender o que acontece somando-se duas variáveis numéricas, mas se no

lugar de uma variável numérica tivesse uma string? Quando se utiliza o operador de
soma para strings, tem-se uma operação de concatenação, i.e., junção entre duas
palavras. Observe a seguir:
Código 3.8 | Concatenação de strings
let texto_1 = "Olá";
let texto_2 = " mundo!";
let texto_final = texto_1 + texto_2;
console.log(texto_final);
Console:
script.js:5 Olá mundo!
Operadores relacionais
Operadores relacionais permitem a comparação entre dois itens. Por exemplo:
Código 3.9 | Operadores relacionais em JavaScript
let a = 5;
let b = 2;
alert(a > b); // true

Nesse caso, a linha 4 está avaliando se o valor contido em a é maior do que o valor
contido em b. Como a operação exibida no exemplo é verdadeira, a caixa de mensagem
exibirá true.
Veja alguns outros exemplos de operadores relacionais:
Quadro 3.4 | Operadores relacionais
Operador Descrição
== Igual.
=== Igual ou do mesmo tipo.
!= Diferente.
!== Diferente e de tipos diferentes.
> Maior que.
< Menor que.
>= Maior ou igual.
<= Menor ou igual.
Operadores lógicos
Por fim, você deve conhecer os operadores lógicos, que nos permitem avaliar múltiplas
condições ou negações. Os operadores lógicos podem ser and (e), or (ou) ou not
(negação).
Quadro 3.5 | Operadores lógicos
Operador Descrição
&& AND
|| OR
! NOT
Um exemplo é mostrado a seguir:
Código 3.10 | Operadores lógicos em JavaScript
let a = 5;
let b = 2;
// a (5) é maior que b (2) E b (2) é maior que 0?
alert((a>b) && (b>0)); // true
// a (5) é maior que b (2) OU b (2) é menor que 0?
alert((a>b) || (b<0)); // true
// a (5) é maior que b (2) E (inverta o resultado de: b (2) é maior que 0)?
alert((a>b) && !(b>0)); // false

Observe como os parênteses são utilizados para organizar as condições:
( ( condição 1) e ( condição 2 ) )
Pode-se, ainda, utilizar parênteses para criar condições avançadas:
( ( ( condição 1 ) e ( condição 2) ) ou ( condição 3 ) )
Nesse caso, a expressão será verdadeira se condição 1 e condição 2 forem verdadeiras

ou se apenas a condição 3 for verdadeira. No exemplo anterior, colorimos os parênteses
de acordo com seus pares. Veja que cada parêntese aberto deve ser fechado, caso
contrário, o código apresentará um erro.
Console
Agora, vamos utilizar a função console.log(), que exibe o resultado no console da

ferramenta inspecionar elemento. Veja como o código seria exibido:
Código 3.11 | console.log() para exibição de resultados
/* script.js */
let a = 5;
let b = 2;
console.log(a > b); // true
console.log(a-b); // 3
console.log(a*b); // 10
console.log(a/b); // 2.5
console.log(a%b); // 1
console.log(a**b); // 25
let soma = a + b; // variável soma RECEBE a + b
console.log(soma);
Fonte: elaborado pelo autor. Figura 3.11 | Operações matemáticas
Agora que você já conhece os operadores matemáticos, lógicos e relacionais, podemos,

então, conhecer as estruturas condicionais.
Estruturas condicionais
Estruturas condicionais permitem o controle de execução de um determinado bloco de

código se determinada condição for estabelecida. São exemplos de palavras reservadas
utilizadas em comandos condicionais: if (usado para verificar se determinada condição
foi estabelecida), else if (usado para verificar se determinada condição foi estabelecida
caso a anterior não tenha sido) e else (que executa o bloco caso os códigos acima
tenham falhado).
Código 3.12 | Exemplo de estruturas condicionais em JavaScript

/* script.js */
let numero = 7;
if(numero % 2 == 0) {
console.log(numero+" é par");
} else if (numero % 2 == 1) {
console.log(numero+" é ímpar");
} else {
console.log("Número inválido");
}
Nesse exemplo, na linha 5, estamos verificando se a variável numero (que foi declarada

igual a 7 na linha 3), quando dividida por 2, apresentará resultado zero. Como 7
dividido por 2 dá 3,5 ou, se analisarmos apenas valores inteiros, 3 com resto 1, logo,
essa condição não foi atendida, portanto, será realizado o teste da próxima condição.
Se você executar esse código, visualizará a mensagem “7 é ímpar”. O único bloco

executado nessa série de comandos condicionais corresponde à linha 8. Como as outras
condições não foram estabelecidas, os blocos foram ignorados. Se mudarmos o valor da
variável numero para 70, veremos que 70 dividido por 2 é igual a 35 com resto 0, logo,
esse valor será par e a linha 6 será executada.
Entretanto, se nosso resultado só tem duas opções, par ou ímpar, para que serve a última
condição? Imagine que seu site está recebendo dados inseridos por usuários; como os
usuários são livres para digitar o que quiserem, eles podem tanto digitar um número
válido como qualquer coisa que não seja um número.
Código 3.13 | Modo de verificar se um número é par ou ímpar com estruturas condicionais if e
else
/* script.js */
let numero = "olá mundo";
if(numero % 2 == 0) {
console.log(numero+" é par");
} else if (numero % 2 == 1) {
console.log(numero+" é ímpar");
} else {
console.log("Número inválido");
}
Nesse caso, a variável numero recebeu a mensagem “olá mundo”. Não é possível fazer

operações matemáticas com caracteres, logo, é necessário incluir uma opção que
execute algo caso todas as condições anteriores falhem.
Outra estrutura condicional é o comando switch, que deve ser utilizado quando há uma
série de condições que se deseja avaliar. Observe o Código 3.14, em que foi modificado
o Código 3.13 e utilizado o comando switch:
Código 3.14 | Modo de verificar se um número é par ou ímpar com estruturas switch
let numero = 7;
let resto = numero % 2;
switch(resto){
case 0: console.log(numero+" é par"); break;
case 1: console.log(numero+" é ímpar"); break;
default: console.log("Número inválido"); break;
}
O comando switch avalia se uma variável é igual a um determinado valor. Para isso, é

utilizada a palavra reservada case seguida do valor avaliado. Ao final de cada case, deve
ser inserida a palavra break. A condição padrão, caso as outras falhem, é definida pela
palavra default.
Estruturas repetitivas
As estruturas repetitivas, também conhecidas como estruturas iterativas, permitem que

um determinado bloco seja repetido até que determinada condição seja atendida (while)
ou para um conjunto determinado de elementos (for).
O comando while executa um bloco enquanto uma determinada condição é válida.

Veja o exemplo a seguir:
Código 3.15 | Comando while para determinar se uma condição é válida

let i = 0;
while(i < 5){
console.log(i);
i = i+1;
}
Esse código imprimirá no console os valores 0, 1, 2, 3 e 4. A variável i será inicializada

com o valor 0 (usamos i como nome da variável por causa da palavra “iteração”), logo,
o laço while será executado enquanto i for menor que 5. Ainda dentro do laço while, foi
feita uma nova atribuição para a variável i, que passou a receber o valor anterior somado
com 1.
Reflita
A incrementação de variáveis dada, por exemplo, pelo código i=i+1 permite que uma
variável receba o seu valor atual somado ao valor 1. Poderíamos aplicar isso com outros
operadores matemáticos e outros valores, como:
 i = i–1 (subtração)
 i = i**2 (exponenciação – elevado ao quadrado)
 i = i/3 (divisão por três)
 i = i*4 (multiplicação por quatro)
Com base nisso, você consegue imaginar o que aconteceria se não incluísse a linha i =
i+1?
Você pode ter o mesmo resultado utilizando o comando for. Esse comando executa um
laço de repetição por uma condição predeterminada. Veja, a seguir, um código que
obtém o mesmo resultado:
Código 3.16 | Comando for e console.log()
for(let i = 0; i<5; i++){
console.log(i);
}
O comando for recebe:
 O nome da variável e o valor inicial.
 A condição de parada.
 A condição de incrementação.
Observe que i++ é equivalente a i = i+1.
Podemos, ainda, usar o comando for para navegar por arrays (coleções indexadas). A
seguir, apresentaremos o comando for usado para navegar pelos índices da
variável lista:
Código 3.17 | Utilizando o comando for para navegar por índices de um array
// array
lista = ["abacate", "bola", "cachorro"]
for(i in lista){
// posição na lista
console.log(i);
// valor atual
console.log(lista[i]);
}
Para isso, você deverá informar o nome do array (no exemplo, lista) seguido da posição
em que se encontra o valor que se deseja imprimir. O código apresentado utiliza a
palavra reservada in para verificar quais os valores presentes no array. Observe o
resultado que será exibido no console (Figura 3.12):
Figura 3.12 | Comando for

Você pode, ainda, usar a palavra reservada of no lugar de in para obter os valores
específicos de cada elemento do array.
Atenção
JavaScript é uma linguagem baseada no paradigma de orientação a objetos. Na prática,

um objeto pode ser considerado uma entidade independente, que possui propriedades e
tipos (MDN WEB DOCS, 2019). No exemplo a seguir, declaramos um objeto que
receberá um conjunto de chaves e valores.
Código 3.18 | Declarando um objeto em JavaScript
// objetos
let objeto = {
"A": "Abacate",
"B": "Bola",
"C": "Cachorro"
console.log(objeto);
console.log(objeto["A"]);
A linha 9 retornará à visão geral do objeto, enquanto a linha 11 imprimirá apenas o

valor presente na chave “A” (Figura 3.13).
Figura 3.13 | Imprimindo os objetos declarados

Funções
Caro aluno, você já aprendeu duas funções Javascript: alert() e console.log. Agora, você
pode construir suas próprias funções da seguinte forma:
// declaração da função
function nome_da_função(parâmetro_1, parâmetro_2, ..., parâmetro_n){
// comandos
return "alguma coisa";
Uma função pode executar uma determinada ação com base nos argumentos enviados e,
ainda, retornar informações para o fluxo principal do programa. Veja que, ao declarar
uma função, o bloco no qual ela se encontra é ignorado na execução do código. Esse
bloco só será executado quando a função for chamada.
Para executar a função criada, você deve chamá-la pelo nome seguido dos argumentos
que serão usados no processamento. Observe como deve ser realizada a chamada da
função criada anteriormente:
//chamada da função
nome_da_função(1, 2, 3, 4);
No exemplo a seguir, você construirá uma função que recebe dois parâmetros, a e b, e
retorna a soma dos dois valores.
Código 3.19 | Função soma que retorna a soma de dois valores
// Funções
function soma(a, b){
return a+b;
// Chamando a função
let valor_soma = soma(2, 3);
console.log(valor_soma); // 5
Saiba mais
JS Bin é uma ferramenta web gratuita e um software para desenvolvimento de websites.

No JS Bin, você pode criar e editar seus próprios websites com JavaScript diretamente
do seu navegador (JS BIN, [s.d.]).
Nesta seção, você aprendeu os fundamentos de programação com a linguagem

JavaScript. Agora, você já pode aplicar os seus conhecimentos sobre essa linguagem.
Pesquise mais
Seguem algumas dicas de materiais que podem complementar o ensino:
 Site:
Comunidade JavaScript (JAVASCRIP.COM, [s.d.]).
o
 Artigos:
o MARIANO, D. Fundamentos do JavaScript. Diegomariano, 15 ago.
2020a.
o MARIANO, D. Introdução ao JavaScript. Diegomariano, 15 ago.
2020b.
 Vídeos:
o FUNDAMENTOS do JavaScript. [S.l., s.n.], 2017. 1 vídeo (3:24 min).
o INTRODUÇÃO ao JavaScript. [S.l., s.n.], 2017. 1 vídeo (4:02 min).
o O QUE o JavaScript é capaz de fazer? – Curso JavaScript #01. [S.l., s.n.],
2019. 1 vídeo (28:49 min). Publicado pelo canal Curso em Vídeo.
REFERÊNCIAS
FUNDAMENTOS do JavaScript. [S.l., s.n.], 2017. 1 vídeo (3:24 min). Publicado pelo
canal Diego Mariano. Disponível em: https://cutt.ly/WzTb9EM. Acesso em: 26 fev.
2021.
GORDON, Z. Const vs let vs var in JavaScript. [s.d.]. Disponível em:

https://cutt.ly/CzTnwqP. Acesso em: 26 fev. 2021.
INTRODUÇÃO ao JavaScript. [S.l., s.n.], 2017. 1 vídeo (4:02 min). Publicado pelo
canal Diego Mariano. Disponível em: https://cutt.ly/vzTnufl. Acesso em: 26 fev. 2021.
JAVASCRIPT.COM. [s.d.]. Disponível em: https://www.javascript.com/. Acesso em: 9

mar. 2021.
JS BIN. [s.d.]. Disponível em: http://jsbin.com/. Acesso em: 26 fev. 2021.
MALAVASI, A. Afinal, Javascript e ECMAScript são a mesma coisa? 2017.

Disponível em: https://cutt.ly/gzTnnUX. Acesso em: 26 fev. 2020.
MARIANO, D. Fundamentos do JavaScript. Diegomariano, 15 ago. 2020a. Disponível
em: https://cutt.ly/ezTnOJx. Acesso em: 26 fev. 2021.
MARIANO, D. Introdução ao JavaScript. Diegomariano, 15 ago. 2020b. Disponível

em: https://cutt.ly/WzTmkcw. Acesso em: 26 fev. 2021.
MARIANO, D.; DE MELO-MINARDI, R. Introdução à Programação Web para

Bioinformática: HTML, CSS, PHP and JavaScript. [S.l.]: Independently Published,
2017.
MDN WEB DOCS. JavaScript básico. 2020. Disponível em: https://cutt.ly/yzTnVhO.

MDN WEB DOCS. Trabalhando com objetos. 2019. Disponível em:

https://cutt.ly/xzTn9Wo. Acesso em: 26 fev. 2021.
O QUE o JavaScript é capaz de fazer? – Curso JavaScript #01. [S.l., s.n.], 2019. 1 vídeo
(28:49 min). Publicado pelo canal Curso em Vídeo. Disponível em:
https://cutt.ly/VzTn6Wl. Acesso em: 26 fev. 2021.
STACK OVERFLOW. Developer Survey Results. Stack Overflow, 2019. Disponível

em: https://cutt.ly/azTmoso. Acesso em: 26 fev. 2021.
A LINGUAGEM JAVASCRIPT
COMO FAZER COM QUE UMA MENSAGEM APAREÇA EM UM SITE EM

DETERMINADO DIA DA SEMANA?
Utilize seus conhecimentos sobre JavaScript para solucionar esse desafio.
sem medo de errar
Anteriormente, você foi desafiado a implementar uma função que exiba na seção de
planos de internet de um site a seguinte mensagem, apenas às quartas-feiras:
PROMOÇÃO! Assine qualquer plano hoje e receba 30 dias grátis!
Observe o resultado de como a página ficará em dias diferentes da semana:
Figura 3.14 | Domingo, segunda-feira, terça-feira, quinta-feira, sexta-feira e sábado

Fonte: elaborada pelo autor. Figura 3.15 | Quarta-feira
Agora observe o código utilizado para realizar isso (as linhas comentadas explicam cada
trecho do código):
Código 3.20 | Resolução da situação-problema – Página “Planos”
<h1 class="p-5">Planos</h1>
<script>
// Declara um array que recebe os 7 dias da semana
let semana = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-

Feira", "Sexta-Feira", "Sábado"];
// coleta a data atual

let d = new Date();
// cria uma variável numero_dia que utiliza a função getDay( ) para pegar o nome do
dia da semana
// exemplo: domingo = 0, segunda-feira = 1, terça-feira = 2
let numero_dia = d.getDay();
// pega o valor do dia com base no array semana
let dia = semana[numero_dia];
// mensagem que será exibida na tela (foi usado Bootstrap para formatar o estilo da
mensagem)
let mensagem = '<div class="alert alert-success" role="alert"><strong>PROMOÇÃO!

</strong> Assine qualquer plano hoje e receba 30 dias grátis!</div>';
// comando condicional para verificar se é quarta-feira
if(dia == "Quarta-Feira"){
document.write(mensagem);
</script>
Não pode faltar
ELEMENTOS DE APLICAÇÕES EM
JAVASCRIPT
QUAL É A FUNÇÃO DO DOM?
O Modelo de Objetos de Documento (DOM) é fundamental para realizar alterações no

documento web após o carregamento da página usando JavaScript.
Olá, aluno!
Seja bem-vindo à segunda seção de JavaScript. Compreender JavaScript é fundamental

para construir páginas dinâmicas e interativas, que poderão atrair mais os usuários.
Nesta seção, você conhecerá o Modelo de Objetos de Documento (do inglês

Document Object Model ou apenas DOM). O DOM é fundamental para realizar
alterações no documento web após o carregamento da página usando JavaScript. Por
meio do DOM é possível selecionar um determinado campo e realizar alterações de
forma interativa e sem a necessidade de realizar uma nova requisição ao servidor.
Considere que você deseja construir um formulário de cadastro em um determinado site.
Seu formulário tem um campo para inserção de CPF; entretanto, seu site tem recebido
muitos cadastros falsos, o que tem comprometido a capacidade de processamento do
servidor. Por exemplo, se um usuário digita um CPF inválido, como 000.000.000-00, o
formulário é submetido ao servidor, que processará as informações e retornará um aviso
indicando que se trata de um CPF inválido. Você poderia utilizar JavaScript para validar
esse campo antes de o formulário ser enviado ao servidor. Para isso, deverá utilizar a
árvore DOM para buscar os valores digitados no campo input que recebe o CPF.
Depois, você deverá utilizar algum “gatilho” para ativar a validação. Chamamos esses
gatilhos de eventos, que podem ser diversos, como ao clicar em um botão ou ao digitar
em um campo.
Você também aprenderá a respeito da manipulação de vídeos com JavaScript e HTML5

e ainda verá como usar geolocalização para criar mapas interativos.
A fim de colocarmos em prática os conhecimentos a serem aprendidos, vamos analisar a

seguinte situação-problema: o departamento de marketing da empresa pela qual você foi
contratado decidiu que ela precisa ter sua localização transparente, para que os clientes
possam visitá-la. Portanto, decidiram adicionar uma seção “como chegar”.
Você foi incumbido de incluir essa funcionalidade e deverá construir um mapa

interativo para exibir a localização da empresa. Além disso, um mapa interativo deverá
ser adicionado à página criada anteriormente.
A empresa está localizada nas seguintes coordenadas:
 var lat = -20.5.

 var lon = -43.86.
Use o OpenLayers para exibir o mapa. Você pode instalá-lo usando o comando npm:
npm install ol
Você também pode executá-lo sem instalação inserindo o trecho mostrado no Código
3.21:
Código 3.21 | Execução do OpenLayers sem instalação
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/
v6.5.0/build/ol.js"></script>
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/
css/ol.css">
Outra opção é fazer o download manual dos arquivos para execução local, disponíveis
no material suplementar: v6.5.0-dist.zip.
Não se esqueça de incluir os seguintes arquivos:
 ol.css.
 ol.js.
 ol.css.map.
 ol.js.map.
Não deixe de praticar o desenvolvimento de scripts usando JavaScript. E, sempre que

possível, construa páginas completas usando HTML, CSS e JS.
Bons estudos!
CONCEITO-CHAVE
JavaScript é uma linguagem cujo processamento é realizado diretamente no navegador

do cliente. Entretanto, muitas vezes um desenvolvedor deseja que alterações sejam
realizadas em partes do código que já foram carregadas. Por exemplo, pense em um
formulário de cadastro. Deseja-se conferir se o usuário preencheu todos os campos.
Entretanto, essa verificação só deverá ser executada depois que o usuário clicar no botão
“enviar”. Podemos fazer essas modificações back-end, mas isso apenas acarretaria um
custo de processamento desnecessário para nosso servidor. Podemos então utilizar o
navegador do cliente para realizar esse processamento usando JavaScript. Para verificar
o estado de elementos de um documento web, podemos utilizar a árvore DOM.
Documentos web são compostos por tags que se conectam a outras tags em uma grande
rede. Uma forma de visualizar a estrutura dessas páginas é com base no Modelo de
Objetos de Documento (do inglês Document Object Model ou apenas DOM). O DOM
representa a estrutura de documentos HTML, SVG ou XML como uma árvore (MDN
WEB DOCS, [s.d.]). A Figura 3.16 mostra a estrutura da Árvore DOM.
Figura 3.16 | Árvore DOM

Fonte: adaptada de Mariano; De Melo-Minardi (2017).
Uma das principais vantagens do DOM é a sua capacidade de ser manipulado por meio
de linguagens de script, como JavaScript.
Pesquise mais
Você poderá ter acesso a mais informações sobre o que é o DOM no artigo indicado a
seguir:
MARIANO, D. Fundamentos do Java Script. Diego Mariano, 15 ago. 2020.
A seguir, nos Códigos 3.22 (index.html) e 3.23 (script.js), é apresentado um exemplo

do uso de JavaScript para manipulação do DOM. Neste exemplo, foram coletadas todas
as tags <p> :
Código 3.22 | index.html - Exemplo de manipulação do DOM
index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>

</head>
<body>

<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
</body>
</html>
Fonte: elaborado pelo autor. Código 3.23 | script.js – Coletando todas as tags <p>
script.js
// A linha a seguir carrega a função quando a página estiver carregada
window.onload = function(){
// Coleta todas as ocorrências da tag <p>
const paragrafos = document.querySelectorAll("p");
// exibe todo o objeto
console.log(paragrafos);
// exibe o primeiro parágrafo
console.log(paragrafos[0]);
// exibe o tipo do nó
console.log(paragrafos[0].nodeName);
}
A Figura 3.17 ilustra o resultado ao carregar o código dessa página em um navegador.
Figura 3.17 | Manipulação do DOM usando JavaScript

Fonte: captura de tela de DOM elaborada pelo autor.
Agora, vamos analisar o script (Código 3.23) linha por linha:
 Na linha 2, temos o comando window.onload = function(){}. Ele possibilita que

o bloco da função (que engloba todos os comandos na sequência) só seja
executado se o evento de carregamento da janela for concluído.
 A seguir é declarada uma constante denominada parágrafos, que recebe o

resultado da função que seleciona todos os resultados do seletor <p>.
const paragrafos = document.querySelectorAll("p");
 Na linha 8, é exibido no console o conteúdo da constante paragrafos:
console.log(paragrafos);
 Observe que ao imprimir o conteúdo do objeto paragrafos pode-se observar uma

lista de nós (Figura 3.17). A página apresenta três parágrafos; logo, pode-se
observar três elementos: 0, 1 e 2. Assim, é possível exibir o conteúdo da
primeira tag (<p>Parágrafo 1</p>) executando o código:
console.log(paragrafos[0]);
Assimile
Por que foi necessário usar o comando: window.onload = function(){}?
Você pode verificar que, ao abrir o arquivo HTML, as tags serão carregadas linha a
linha (note que declaramos o script na linha 8 do Código 3.22). Logo, o script só
poderia analisar o conteúdo que aparece antes dele. Como não há parágrafos antes da
declaração do script, os códigos JavaScript não conseguiriam coletar informação
alguma. Uma solução para isso é incluir a chamada do script no final da página.
Entretanto, JavaScript fornece soluções mais robustas por meio de eventos de
carregamento, como o evento onload. Esse comando executa o bloco de código apenas
ao final do carregamento da página, ou seja, garante que todas as tags necessárias já
tenham sido carregadas.
Modificando a estrutura do HTML usando JavaScript e DOM
Podemos alterar a estrutura de uma página usando o DOM. Observe, a seguir, os

métodos JavaScript que podem ser utilizados para essa modificação (Quadro 3.6):
Quadro 3.6 | Métodos de manipulação do documento
Método Descrição
document.createElement() Cria um novo elemento HTML.
document.removeChild() Remove um elemento HTML.
document.appendChild() Adiciona um elemento HTML.
document.replaceChild() Substitui um elemento HTML.
document.write() Escreve dentro de um elemento HTML.
Fonte: adaptado de Mariano; De Melo-Minardi (2017, p. 359-360).
Observe a seguinte página HTML sem qualquer conteúdo aplicado ao body e teste esse
exemplo utilizando a ferramenta Trinket:
Veja a Figura 3.18. Ela mostra o preenchimento dessa página usando apenas
propriedades de manipulação do DOM no arquivo JavaScript.
script.js
// cria uma mensagem
var mensagem = document.write("Olá mundo");
Figura 3.18 | Console

Fonte: captura de tela de DOM elaborada pelo autor. Código 3.24 | index.html e estilo.css –
apresentam duas divisões (divs): a div na cor vermelha, com a mensagem “Olá Mundo!”, e a
div na cor azul
index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>


</head>
<body>
<main>
<div id="A">Olá mundo!</div>
<div id="B"></div>
</main>
</body>
</html>
estilo.css
*{
margin:0;
padding:0;
body{
font-size: 50px;
text-align: center;
#A{
height: 100%;
width: 50%;
background-color: red;
left:0;
position: absolute;
#B{
height: 100%;
width: 50%;
background-color: blue;
left:50%;
position: absolute;
}
A Figura 3.19 ilustra a página web gerada.

Figura 3.19 | Exemplo de uso de JS
Observe que temos um bloco vermelho ao lado de um bloco azul. Apenas no bloco
vermelho foi inserido o texto: “Olá mundo!”.
Reflita
Na Figura 3.19, você pôde observar que as duas divs ocupam todo o espaço disponível
na página. As propriedades CSS utilizadas para definição de tamanho e posicionamento
são de grande importância, principalmente na construção de páginas com design
responsivo.
Você consegue identificar as propriedades CSS usadas para deixar as divs ocupando
toda a largura e altura da página? Qual propriedade foi utilizada para posicionar a div
azul ao lado da vermelha?
Agora, você pode verificar as propriedades JavaScript para mover o conteúdo do bloco
vermelho para o bloco azul. Para isso, precisamos da função que navega pelo DOM,
além de coletar o elemento com base no seu ID. Esse método é
document.getElementById().
Código 3.25 | Método document.getElementById()
script.js
// copia o conteúdo de A para B

document.getElementById("B").textContent =
document.getElementById("A").innerHTML;
// apaga o conteúdo de A
document.getElementById("A").innerHTML = '';
}
Observe o resultado na Figura 3.20 a seguir:
Figura 3.20 | JavaScript usado para mover o texto de lugar
Fonte: captura de tela do DOM elaborada pelo autor.
Caro aluno, neste momento veremos o passo a passo do que foi realizado, mais uma vez
usando o seguinte comando:
window.onload = function(){}
Isso para que os códigos presentes na função sejam executados apenas após o
carregamento da página, uma vez que optamos em declarar o script no cabeçalho.
document.getElementById("B").textContent =
Usamos o método getElementById( ) para coletar o elemento com ID “B”. Observe que
o atributo textContent informa o que se deseja aplicar ao conteúdo do texto. Assim, o
operador de atribuição foi utilizando-o para informar que será aplicado ao texto o
conteúdo do elemento de ID “A”. Nesse caso, utilizamos o atributo innerHTML. Assim,
foi informado qual era o conteúdo do HTML do elemento daquele ID. Então, o
conteúdo de A é copiado para B.
document.getElementById("A").innerHTML = '';
Por fim, foi aplicado ao HTML interno do elemento de ID “A” o valor " (vazio). Ou
seja, o texto existente é substituído por um valor em branco.
Exemplificando
Você sabe qual a diferença entre textContent e innerHTML?
Neste exemplo, usamos textContent e innerHTML para estimular o debate acerca do

uso de cada um. Observe que na div A temos apenas texto. Entretanto, imagine o que
aconteceria se tivéssemos o seguinte conteúdo:
<div id="A"><p>Olá mundo!</p></div>
<div id="B"></div>
Observe que o texto está envolvido por uma tag <p></p>. Será que a tag seria
transferida?
Usando textContent não, pois apenas o texto seria coletado. Entretanto, ao usar

innerHTML, você consegue coletar todo o conteúdo HTML presente no elemento, logo
a tag <p> também seria transferida.
Observe o Quadro 3.7 a seguir, em que temos uma lista de comandos JavaScript para
modificação do DOM.
Quadro 3.7 | Comandos JavaScript
element.innerHTML = novo conteúdo html Altera o interior de um elemento HTML.
element.attribute = novo valor Muda o atributo valor de um elemento HTML.
element.setAttribute (atributo, valor) Muda o atributo valor de um elemento HTML.
element.style.property = novo estilo Altera o estilo de um elemento HMTL.
Fonte: adaptado de Mariano; De Melo-Minardi (2017, p. 359).
Teste o código a seguir:

Alterando o estilo
Você também pode utilizar os comandos JavaScript para alterar os estilos CSS. Para
isso, deve-se coletar o objeto pelo ID e, a seguir, aplicar a propriedade desejada com a
seguinte sintaxe:
element.style.property
Em que: o element representa o objeto coletado; o style indica que se deseja alterar o

estilo; e property deve ser substituído com o nome da propriedade desejada.
Vamos alterar o exemplo anterior, para que seja possível alterar a cor de fundo da div A:
// modifica a cor de fundo
document.getElementById("A".style.backgroundColor = 'green';
Observe que a propriedade que altera a cor de fundo é background-color. Entretanto,

não é permitido o uso de “-” no nome do atributo. Portanto, é necessário remover o
traço e utilizar um caractere maiúsculo na próxima palavra: backgroundColor. A Figura
3.21 ilustra o resultado da alteração da cor do fundo da página.
Figura 3.21 | Alterando a cor
Seleção por tags e classes
Você aprendeu que a seleção de elementos pode ser realizada por ID. Outra forma de
realizar esse procedimento é utilizando a seleção por classes ou pelas tags, caso seja
necessário alterar vários elementos.
A seguir, vamos criar uma classe no arquivo estilo.css:
.texto-branco{
color:white;
Essa classe apenas muda a cor do texto para branco. Você pode adicioná-la
manualmente no arquivo HTML, mas vamos fazer de uma forma diferente: utilizando
JS.
Agora, pode-se editar o arquivo script.js mostrado no Código 3.26 a seguir:
Código 3.26 | Arquivo script.js
document.getElementById("B").innerHTML =
//document.getElementById("A").innerHTML = '';
let elemento = document.getElementsByTagName("div");
for(let i=0; i < elemento.length; i++){
elemento[i].classList.add("texto-branco");
}
Como será utilizado o conteúdo do elemento A para este exemplo, você pode comentar
a linha que o apaga:
//document.getElementById("A").innerHTML = '';
A seguir, pode-se utilizar uma variável para selecionar nosso elemento desejado:
let elemento = document.getElementsByTagName("div");
Utilizamos o método getElementsByTagName() no lugar da função

getElementById() para coletar o elemento. Esse método seleciona elementos com base
no nome da tag (no exemplo, foi selecionada a tag <div>).
Assimile
Tome cuidado com o nome das funções
 getElementsByTagName: o nome fica no plural (Elements), pois esse método

coleta várias tags.
 getElementByld: o nome fica no singular (Element), pois um ID deve ser único.
Observe o trecho de código a seguir. Há um laço de repetição que vai de 0 ao tamanho

do objeto elemento, acrescentando 1 valor a cada iteração. Observe que o tamanho da
variável elemento indica a quantidade de tags existentes (no caso temos duas divs) e
pode ser obtido com o atributo length. Observe que foi utilizado apenas o operador
menor (“<”), uma vez que, em computação, a contagem geralmente começa do valor
zero (logo, se o array possui dois valores, eles terão índices 0 e 1).
for(let i=0; i < elemento.length; i++){
}
Você pode aplicar a classe texto-branco a cada uma das divs. Para isso usamos o
atributo classList e o método add.
Importa destacar que não podemos aplicar essa classe a todo o objeto elemento, mas a
posições específicas [i]. Por isso, foi necessário utilizar um laço de repetição para
coletar os valores possíveis da variável i. Note que o laço fará duas iterações. Na
primeira, i vale 0, logo o comando executado seria:
elemento[0].classList.add("texto-branco");
Ou seja, o primeiro elemento (posição 0) receberá a classe texto-branco. Em seguida, o

laço executará:
elemento[1].classList.add("texto-branco");
E, assim, o segundo elemento também receberá essa classe.
Você pode remover uma classe usando o comando:
elemento[0].classList.remove("texto-branco");
Você pode ainda selecionar elementos usando o nome das classes com o método
getElementsByClassName().
let elemento2 = document.getElementsByClassName("texto-branco");
for(let i=0; i < elemento2.length; i++){

elemento2[i].style.color ="yellow";
Observe que, ao fazer isso, a nova propriedade CSS sobrepõe as regras apresentadas
anteriormente (mesmo que os elementos ainda apresentem a classe texto-branco; neste
caso, o texto se tornará amarelo), conforme a Figura 3.22.
Figura 3.22 | Efeito cascata
Isso ocorre devido ao “efeito cascata”: regras aplicadas com o atributo style têm
prioridade em relação a regras de estilo obtidas de um arquivo externo.
Eventos
Eventos permitem interações entre os elementos de uma página HTML e o arquivo

JavaScript, possibilitando alterações pelo DOM. Existem diversos tipos de eventos que
podem atuar, por exemplo, quando um botão é clicado, quando uma página é carregada
(como apresentado anteriormente), quando uma tecla é pressionada, entre muitos outros.
O Quadro 3.8 a seguir sintetiza uma lista de eventos e suas definições.
Quadro 3.8 | Tipos de eventos
Evento Descrição
onchange Quando um elemento HTML foi mudado.
onclick Quando um elemento é clicado.
onmouseover Quando o mouse passa por cima de um elemento.
onmouseout Quando o mouse sai de cima de um elemento.
onkeydown Quando uma tecla do teclado é digitada.

onload Quando uma página é carregada.
Fonte: adaptado de Mariano; De Melo-Minardi (2017, p. 349-350).
Como exemplo, vamos explorar o evento onclick (ao clicar em um botão).
Primeiro crie o botão na página HTML:
<button onclick="clique()">Clique aqui</button>
Observe que o atributo onclick recebe entre aspas a função clique(). Isso indica que
quando o evento onclick for disparado (ou seja, quando o botão for clicado), a página
deverá executar a função clique(). Agora, vamos criar essa função no arquivo
JavaScript:
function clique(){
alert("Olá mundo!");
}
Essa função apenas exibe a mensagem “Olá mundo!”. Observe que não foi necessário
utilizar o comando window.onload, uma vez que o evento só será disparado quando o
usuário clicar no botão. A Figura 3.23 apresenta o resultado da aplicação.
Figura 3.23 | Evento onclick
Elementos de formulário
Vamos usar as propriedades JS para analisar formulários. Suponhamos que temos o

seguinte formulário e desejamos formatá-lo (Figura 3.24):
Código 3.27 | Formulário com nome e telefone
<form>
<input type="text" name="nome" placeholder="Nome">
<input type="text" name="telefone" placeholder="Telefone">
</form>
Fonte: elaborado pelo autor. Figura 3.24 | Resultado do Código 3.27: formulário com nome e
telefone
Vamos aplicar uma propriedade que seja exclusiva para cada campo. Para isso, vamos
criar uma função que apesenta parâmetros e recebe argumentos enviados na chamada.
Também vamos explorar o evento onmouseover (quando o cursor está sobre o
elemento). No arquivo JS, crie a seguinte função:
Código 3.28 | Função para formatar os elementos input
// função que formata cada elemento input
function formata_input(id){
var elemento = document.getElementById(id);
elemento.style.boxShadow = "0 0 30px blue";
// muda a mensagem presente em placeholder
elemento.placeholder = "Digite seu "+id;
}
Essa função recebe um ID passado em sua chamada, depois seleciona o elemento, a
seguir aplica a propriedade box-shadow (uma sombra azul de 30px de desfoque e 0 de
movimentação nos eixos x e y) e altera o atributo placeholder.
O atributo placeholder exibe uma mensagem em um campo input que desaparece

quando o usuário clica sobre ele. Nos exemplos, exibimos as mensagens “Nome” e
“Telefone”. Agora, vamos usar um valor enviado para a função para personalizar a
mensagem: ao passar o mouse sobre o campo, a mensagem “Nome” será substituída por
“Digite seu nome”, e o mesmo para telefone.
Observe que na declaração da função é adicionada a variável id dentro dos parênteses.

Nesse caso, id representa uma variável criada e utilizada especificamente no escopo
dessa função. Essa variável será utilizada para buscar o elemento na linha:
E será usada para personalizar a mensagem do placeholder na linha:
elemento.placeholder = "Digite seu "+id;
Vamos então configurar o HTML para realizar a chamada da função quando o evento
ocorrer:
Código 3.29 | Input do formulário com evento onmouseover (observe a função formata_input)
<form>
<input
type="text"
id="nome"
onmouseover="formata_input('nome')"
placeholder="Nome"
>
<input
type="text"
id="telefone"
onmouseover="formata_input('telefone')"
placeholder="Telefone"
>
</form>
No exemplo apresentado, não há qualquer problema em quebrar as linhas dentro da

tag <input>. Isso facilita a leitura do arquivo.
Observe que o evento utilizado chama a função criada anteriormente e envia um

argumento similar ao ID do elemento:
Observe o que ocorre ao posicionar o mouse sobre o campo input (Figura 3.25):
Figura 3.25 | Evento onmouseover
Um problema identificado é que ao remover o mouse do campo, o estilo é mantido. O

campo deverá normalizar ao mover o cursor para fora. Para fazer isso, podemos utilizar
o evento onmouseout.
Para isso, você pode criar uma função que volte as configurações ao normal:
function voltar_normal(id){
elemento.style.boxShadow = "0 0 0");
// muda a mensagem presente em placeholder
elemento.placeholder = id;
E, depois, vamos adicionar o evento onmouseout, mostrado no Código 3.30:

Código 3.30 | Evento onmouseout
<form>
<input
type="text" id="nome"
onmouseout="voltar_normal('nome')"
placeholder="Nome"
>
<input
type="text" id="telefone"
onmouseout="voltar_normal('telefone')" onmouseover="formata_input('telefone')"
placeholder="Telefone"
>
</form>
Dessa forma, o campo retorna ao normal ao remover o cursor dele.
Agora, considere que você deseja aplicar um estilo em ambos os campos input ao
mesmo tempo. Para isso, você vai aprender a realizar a chamada de uma função dentro
de outra função. A seguir, será apresentado um exemplo em que, ao passar o mouse
sobre o campo, é adicionada uma margem interna de 5px a todos os campos input.
Então você pode criar duas funções, formata_input_geral() e remove_estilo_geral(),
uma para adicionar a margem interna e a outra para removê-la, respectivamente.
Código 3.31 | script.js – Funções formata_input_geral() e remove_estilo_geral()
script.js
// função genérica para todos os inputs
function formata_input_geral(){
// seleciona todos os inputs
var elemento = document.getElementsByTagName("input");

// para cada elemento
for(var i=0; i < elemento.length; i++){
// adiciona margem interna de 5px
elemento[i].style.padding = "5px";
// função genérica para remover os estilos dos inputs
function remove_estilo_geral(){
// seleciona todos os inputs
var elemento = document.getElementsByTagName("input");
// para cada elemento
for(var i=0; i < elemento.length; i++){
// adiciona margem interna de 0
elemento[i].style.padding = "0";
}
Pode-se realizar as chamadas dessas funções dentro das funções que criamos
anteriormente. Observe o Código 3.32 contendo duas funções e fazendo a chamada das
funções
formata_input_geral() e remove_estilo_geral() criadas no Código 3.31.
Código 3.32 | Trecho de código script.js – Funções formata_input(id) e voltar_normal(id)
Trecho do código de script.js:
function formata_input(id){
// executa a função formata_input_geral() para qualquer item
formata_input_geral();
// [...]
}
function voltar_normal(id){
// executa a função remove_estilo_geral() para qualquer item
remove_estilo_geral();
// [...]
}
Agora compare os resultados (Figura 3.26):
Figura 3.26 | Testando as funções construídas
A. Quando o cursor do mouse está por cima do campo.
B. Quando o cursor do mouse deixa de sobrepor o campo.

Teste o exemplo a seguir:
JSON
JSON (JavaScript Object Notation) é o formato usado para armazenamento e troca de

informações em arquivos de texto. JSON foi baseado no JavaScript, mas pode ser usado
independentemente da linguagem de programação (ECMA-404 THE JSON DATA
INTERCHANGE STANDARD, [s.d.]).
Arquivos JSON são compostos por objetos que apresentam um conjunto de chaves e
valores separadas por vírgula. Valores podem receber strings (escritas com aspas),
numerais (escritos sem aspas), arrays, estruturas lógicas, objetos nulos (null) ou até
mesmo outros objetos.
Sintaxe do JSON:
Objeto{
“chave”: “valor”,
[...]
Por exemplo:
let pessoa = { nome: "José", sobrenome: "da Silva", idade: 34};
JSON também permite o uso de arrays como entrada. Arrays, também conhecidos como
vetores ou listas, são declarados entre colchetes. Observe o array a seguir:
[ valor_1, valor_2, valor_3, ..., valor_n ]
Manipulando JSON com JS
Em geral, arquivos JSON são salvos em um arquivo separado na extensão “.json”.

Observe o exemplo “empresa.json” a seguir:
"funcionários":[
{"nome":"José","sobrenome":"da Silva","Idade":23},
{"nome":"Ana","sobrenome":"Gonzales","Idade":33},
{"nome":"Pedro","sobrenome":"Parker","Idade":18},
Caro aluno, veja que para o JS a chave não precisa de aspas, mas ao salvar em arquivo,
essas aspas são necessárias. Para ilustrar o exemplo, faremos sua declaração diretamente
no código JS como uma string. Observe o Código 3.33 e o resultado dele ilustrado na
Figura 3.27:
Código 3.33 | Trecho JSON - código script.js
script.js
var obj = JSON.parse('{\
"funcionários":[\
{"nome":"José", "sobrenome":"da Silva", "idade":23 },\
{"nome":"Ana", "sobrenome":"Gonzales", "idade":33 },\
{"nome":"Pedro", "sobrenome":"Parker", "idade":18 }\
]}');
console.log(obj)
Fonte: elaborado pelo autor. Figura 3.27 | Objetos
Aqui, o objeto funcionários possui um array com três outros objetos constituídos por
três pares de chave-valor: nome, sobrenome e idade.
Vamos, então, navegar por esse objeto. Podemos obter o nome e a idade do primeiro
funcionário usando o código (Figura 3.28):
console.log(obj.funcionários[0].nome)
console.log(obj.funcionários[0].idade)
Figura 3.28 | Visualizando os objetos
Observe que para obter as informações do primeiro funcionário usamos o nome do

objeto (obj.funcionários) seguido da posição (como queremos a primeira posição,
usamos o índice 0) e, por fim, adicionamos qual propriedade queremos: nome e idade.
Pesquise mais
Veja mais a respeito do formato JSON no vídeo “JSON”, disponível no YouTube

(JSON, 2017).
JSON. [S.l., s.n.], 11 out. 2017.1 vídeo (5 min. 34 seg.). Publicado pelo canal Diego
Mariano.
AJAX
AJAX (Asynchronous JavaScript And XML ou, na tradução, Javascript Assíncrono e

XML) corresponde ao conjunto de técnicas para realização de requisições assíncronas.
Quando uma página dinâmica é processada em um servidor, o navegador faz uma
requisição única. Para obter ou enviar dados, tecnicamente é necessário recarregar a
página e fazer outra requisição. A ideia do AJAX é que as requisições sejam feitas de
forma assíncrona, ou seja, não é necessário recarregar todos os componentes da página.
Por exemplo, há alguns anos muitos sites apresentavam um botão “salvar” para gravar
dados de formulários. Você pode verificar que, ao clicar nesse botão, é feito o envio dos
dados para o servidor, e a página inteira é recarregada. O problema é que, ao recarregar
a página, diversas informações desnecessárias eram transferidas, como a estrutura do
cabeçalho, menus, divs, imagens e estilos (vamos desconsiderar, por enquanto, que
navegadores têm estruturas de cache que podem salvar parte desses componentes).
Todas essas informações não alterarão ao clicar o botão salvar. No máximo, o servidor
retornará as mesmas informações que você enviou, além de uma mensagem como
“dados gravados com sucesso”.
AJAX permite que apenas parte dos dados sejam enviados para o servidor, sem a
necessidade de recarregar toda a página. Com isso, o tempo para envio dos dados será
menor, além da redução do fluxo de dados na rede.
AJAX utiliza JavaScript para fazer requisições assíncronas ao servidor remoto por meio
da API XMLHttpRequest. É bastante usado com PHP, mas pode ser usado com outras
linguagens back-end, como Python e Java.
Canvas
O Canvas é um elemento do HTML5 utilizado para desenhar com o auxílio da

linguagem de script, e a JavaScript é uma linguagem muito utilizada. Com Canvas, é
possível realizar desenhos de gráficos em tempo de execução, além de composição de
imagens e animações em uma página web.
A tag <canvas> tem a capacidade de realizar a renderização de imagens em bitmap

(bmp) e é compatível com as folhas de estilo CSS.
Para a criação de Canvas deve-se especificar três parâmetros: o ID, a largura (width) e a
altura (height) do elemento a ser desenhado, conforme pode ser visto no exemplo a
seguir:
<canvas id="testecanvas" width="300" height="400"></canvas>
Importa destacar que, ao desenhar utilizando o elemento <canvas>, deve-se realizar o

desenho todo no arquivo JavaScript.
Em um arquivo texto, você pode digitar o seguinte código:
Código 3.34 | Teste Canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="testecanvas" width="400" height="500" style="border:6px solid

#c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("testecanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,200,400);
</script>
</body>
</html>
O trecho em JavaScript utiliza o ID para encontrar o elemento Canvas que foi definido
na página: var c=document.getElementById("testecanvas");.
Na sequência, em var ctx=c.getContext("2d"); é criado um objeto em contexto.
Será desenhado em um contexto de desenho 2D; logo, o objeto getContext("2d") é um

objeto interno HTML5. Esse objeto apresenta muitos métodos para desenhar imagens,
caixas e círculos, entre outros.
Em ctx.fillStyle="blue"; é definida a cor azul, e ctx.fillRect(0,0,200,400); desenha a

forma retangular.
Nesse sentido, o atributo fillStyle definiu a cor azul, e o atributo fillRect definiu a

posição, o tamanho e a forma geométrica. Teste o código a seguir e observe a saída:
Para melhor entendimento do Canvas, é necessário conhecer coordenadas para facilitar

a criação dos scripts para o desenho.
Geolocalização com JavaScript
Um exemplo de função que pode ser feita usando JS é a coleta de geolocalização.

Geolocalização corresponde à detecção de sua posição geográfica com base no sistema
global de linhas imaginárias horizontais e verticais que dividem a superfície da Terra.
Latitude corresponde às linhas horizontais, e longitude, às verticais (ENCYCLOPEDIA
BRITANNICA, 2020).
Esse posicionamento pode ser obtido de várias formas, com o seu endereço de IP usado
para conectar-se à internet, com a triangulação das antenas de telecomunicação ou,
ainda, com os dados específicos dos dispositivos GPS (Sistema de Posicionamento
Global, ou, em inglês, Global Positioning System). De fato, nos dias de hoje tornou-se
trivial a utilização de métodos de obtenção de localização do dispositivo de acesso, e tal
posicionamento pode ser explorado por scripts construídos com JavaScript.
Navegadores modernos apresentam suporte à API de geolocalização. A obtenção do

posicionamento pode ser feita através da propriedade global navigator e do objeto
geolocation.
Código 3.35 | API de geolocalização – navigator.geolocation
var lat;
var lon;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(posicao){
console.log(posicao);
lat = posicao.coords.latitude;
lon = posicao.coords.longitude;
console.log(lat, lon);
);
}
Observe que na linha 4 foi necessário verificar se a variável existe. Isso porque muitos
navegadores ainda não oferecem suporte à API de geolocalização. Ao abrir essa página
no navegador, se houver suporte será exibida uma caixa de diálogo questionando se
você autoriza a divulgação de sua geolocalização. Esse procedimento garante que sua
localização seja utilizada apenas quando previamente autorizado (Figura 3.29).
Figura 3.29 | Geolocalização
Após a obtenção da geolocalização ser autorizada, pode-se observar o objeto

navigator.geolocation que será impresso na linha 7 (Figura 3.30):
Figura 3.30 | Inspecionando a geolocalização

Nesse objeto podemos verificar várias informações, como a acurácia, que indica o quão
precisa é a posição apresentada (no exemplo, a acurácia é de 10.182 metros), além da
latitude e longitude. Vários campos não puderam ser definidos devido a restrições do
navegador.
A seguir, serão utilizadas as variáveis declaradas anteriormente para coletar as posições

de latitude e longitude (linhas 9 a 12) (Quadro 3.9).
Quadro 3.9 | Propriedades do objeto coord
Propriedade Tipo Observação
coords.latitude double graus decimais
coords.longitude double graus decimais
coords.altitude double ou null metros em elipsoide de referência
coords.accuracy double metros
coords.altitudeAccuracy double ou null metros
coords.heading double ou null graus em sentido do norte verdadeiro
coords.speed double ou null metros/segundos
timestamp DOMTimeStamp como um objeto de Date()
Fonte: adaptado de Pilgrim (2010).
Você pode copiar as posições de latitude e longitude e usar uma ferramenta de mapas
para visualizar, como o Google Maps, conforme ilustrado na Figura 3.31:
Figura 3.31 | Coordenadas: -19.87, -43.95

Fonte: captura de tela do Google Maps elaborada pelo autor.
Nesse exemplo foram utilizadas apenas duas casas decimais (para facilitar a
visualização).
O Google Maps permite ainda o uso de uma API para inclusão de mapas em sites
usando JavaScript. Entretanto, essa API requer uma chave.
Para ilustrar a exibição de mapas, vamos utilizar uma ferramenta gratuita: o

OpenLayers. Anteriormente, já apresentamos como executá-la. Relembre:
OpenLayers
É uma biblioteca JavaScript open source com recursos de alto desempenho para
mapeamento. Veja a seguir os 3 modos de executá-la.
Modo 01
Instale o OpenLayers utilizando o seguinte comando:
npm install ol
Modo 02
Para executá-lo sem instalação, utilize o seguinte trecho de código:
Modo 03
JavaScript: ol.js - Contém os scripts necessários para carregamento dos mapas
interativos.
CSS: ol.css - Contém os estilos usados na implementação dos mapas.
Map: ol.css.map e ol.js.map - São usados para debugar os códigos na etapa de

desenvolvimento.
Observação: aprenda mais sobre essa biblioteca acessando o site oficial do OpenLayers.
Para o exemplo a seguir, obtivemos dados da documentação oficial, disponível no site

da biblioteca (OPENLAYERS, [s.d.]).
Como está sendo utilizada uma biblioteca JS, não é necessário “decorar” todos os
códigos, uma vez que alguns comandos são bastante específicos para essa biblioteca.
Você pode adaptar códigos disponíveis na documentação para seus problemas
específicos. O importante é compreender os fundamentos e alguns comandos utilizados.
Código 3.36 | index.html – Geolocalização
index.js
<!DOCTYPE html>
<html>
<head>
<title>Geolocalização</title>


href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/
css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/
v6.4.3/build/ol.js"></script>
</head>
<body>
<h2>Mapa</h2>
<div id="map" class="map"></div>
</body>
</html>
No arquivo index.html mostrado no Código 3.36 foi necessário adicionar os dois

scripts do OpenLayers, inserir a div (que deverá ter id=“map”) e inserir o script
particular no final do arquivo.
estilo.css
.map {
height: 400px;
width: 100%;
}
No Código 3.37, o estilo apenas definiu a altura da div que receberá o mapa (no
exemplo, 400px) e a largura total (100%).
Código 3.38 | script.js – Função gerar mapa
script.js
var lat;
var lon;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(posicao){
console.log(posicao);
lat = posicao.coords.latitude;
lon = posicao.coords.longitude;
console.log(lat, lon);
geraMapa();
);
function geraMapa(){
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: 10
})
});
}
No script foi criada uma nova função denominada geraMapa(). A análise dela é
realizada a seguir:
Nessa linha foi declarada uma variável denominada map que recebe um novo objeto
ol.Map. No trecho a seguir, temos algumas propriedades desse objeto, como o alvo
(target) e as camadas (layers), que receberão um novo objeto do tipo ol.layer.Tile:
target: 'map',
layers: [
new ol.layer.Tile({
})
],
Por fim, no trecho a seguir é apresentado um objeto do tipo ol.View que definirá

propriedades de como o mapa será visualizado e o nível de zoom desejado:
view: new ol.View({
zoom: 10
})
});
Os códigos dentro dessa função foram coletados diretamente da documentação oficial.

De fato, a única linha modificada foi a linha em que definimos as posições da latitude e
longitude:
Nesse caso, foram inseridos os nomes das variáveis que criamos anteriormente para
receber a localização atual. A Figura 3.32 ilustra o resultado do mapa.
Figura 3.32 | Exemplo de mapa

Controlando vídeos com HTML5 e JavaScript
No exemplo a seguir, você poderá controlar a reprodução de um vídeo em HTML5

usando JavaScript. Para isso, vamos construir uma página HTML que exibirá um vídeo
em tela cheia. Por fim, você pode construir um botão que iniciará o vídeo. Ao ser
iniciado, o texto no botão será alterado para Pausar. Ao pausar o vídeo, o texto do
botão deverá ser substituído por Continuar.
A Figura 3.33 ilustra a página resultante:
Figura 3.33 | Vídeos
Vamos começar configurando o arquivo “script.js” (Código 3.39):
Código 3.39 | script.js – Função controlarVideo( )
script.js
function controlarVideo() {
var video = document.getElementById("meuVideo");
var btn = document.getElementById("controle");
if (video.paused) {
video.play();
btn.innerHTML = "Pausar";
} else {
video.pause();
btn.innerHTML = "Continuar";
}
Nesse arquivo foi construída uma função denominada controlarVideo( ). Ao executar

essa função, dois objetos são criados: video e btn. O primeiro deles consulta a árvore
DOM pelo elemento de ID meuVideo (usaremos esse ID para o vídeo inserido na
página). O segundo objeto (btn) receberá o botão usado para iniciar e pausar o vídeo.
O objeto de vídeo apresenta dois métodos:
 pause( ) : interrompe a execução do vídeo.

 play( ) : executa o vídeo.
Observe que o comando condicional verifica se o objeto video.paused é verdadeiro ou

falso (ele contém a informação se o vídeo está executando no momento ou não). Para
alterar o texto no botão, atribuímos um novo valor à propriedade btn.innerHTML.
Agora você pode construir a página HTML. Aqui será utilizado um vídeo genérico no
formato MP4 denominado “a.mp4”. O botão deverá ativar a função controlarVideo( ) ao
ser clicado (evento onclick). Observe o código resultante a seguir:
Código 3.40 | Manipulação de vídeos com HTML5 e JavaScript
index.html
<!DOCTYPE html>
<html>
<head>
<title>Manipulando vídeos com HTML5 e JS</title>


</head>
<body>
<video loop id="meuVideo">
<source src="a.mp4" type="video/mp4">
Seu navegador não suporta vídeos :(
</video>
<div class="conteudo">
<button id="controle" onclick="controlarVideo()">Assistir vídeo</button>
</div>
</body>
</html>
Por fim, você pode aplicar os estilos usados nessa página (Código 3.41):
Código 3.41 | estilo.css utilizado no Código 3.40
estilo.css
*{
box-sizing: border-box;
body {
margin: 0;
#meuVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.conteudo {
position: fixed;
top: 0;
background: rgba(255, 255, 255, 0.5);
color: #f1f1f1;
width: 100%;
padding: 30px;
#controle {
width: 200px;
font-size: 16px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
#controle:hover{
background: #ddd;
color: black;
}
Nesta seção, você pôde se aprofundar na linguagem JavaScript. Você estudou como
navegar pelo DOM e quais são os eventos disponíveis. Ainda aprendeu alguns
fundamentos do uso de bibliotecas, que são utilizadas, por exemplo, para
geolocalização. Agora você pode aplicar os seus conhecimentos criando aplicações que
utilizem as bibliotecas apresentadas. Vamos lá?
REFERÊNCIAS
ECMA-404 THE JSON DATA INTERCHANGE STANDARD. Introdução ao JSON.

Json.org, [s.d.]. Disponível em: https://bit.ly/3evW7AM. Acesso em: 11 nov. 2020.
ENCYCLOPEDIA BRITANNICA. Latitude e longitude. Britannica Escola, c2021.
Disponível em: https://bit.ly/3tdcO8h. Acesso em: 11 nov. 2020.
JSON. [S.l., s.n.], 11 out. 2017.1 vídeo (5 min. 34 seg.). Publicado pelo canal Diego
Mariano. Disponível em: https://bit.ly/38yHKb1. Acesso em: 27 fev. 2021.
MARIANO, D. Fundamentos do Java Script. Diego Mariano, 15 ago. 2020.

Disponível em: https://bit.ly/3rI7lFZ. Acesso em: 27 fev. 2021.
MARIANO, D.; DE MELO-MINARDI, R. Introdução à Programação Web para

Bioinformática: HTML, CSS, PHP and JavaScript. [S.l.] Independently Published,
2017.
MDN WEB DOCS. Introduction to the DOM. MDN Web Docs Mozilla,
[s.d.].Disponível em: https://mzl.la/30ytWZU. Acesso em: 6 nov. 2020.
OPENLAYERS. Quick start. OpenLayers, [s.d.]. Disponível em: https://bit.ly/3l7b0ee.

PILGRIM, M. Dive into HTML 5. [S.l.]: O’Reilly Media, 2010. Disponível em:
https://bit.ly/38wSC9v. Acesso em: 27 fev. 2021.
ELEMENTOS DE APLICAÇÕES EM
JAVASCRIPT
COMO INCORPORAR MAPAS EM UMA PÁGINA WEB?
Para executar essa tarefa, recorra aos conhecimentos que você obteve até esse momento
sobre a linguagem JavaScript.
Deseja ouvir este material?
sem medo de errar
Para ampliar sua visão acerca das possibilidades de aplicação dos conhecimentos
obtidos até o momento, vamos propor uma resolução para a situação-problema
apresentada no início desta seção. Sua incumbência foi incluir uma localização
transparente em um website para o caso de algum cliente da empresa quiser visitá-la.
Você deverá construir um mapa interativo para exibir essa localização. Além disso,
deverá adicionar o mapa interativo à página criada anteriormente.
O resultado é apresentado na Figura 3.34 a seguir.

Figura 3.34 | Resultado da seção “Onde estamos?”
A seguir é apresentado o código-fonte da solução:
Código 3.42 | Código da resolução da situação-problema
<section class="container">
<style type="text/css">
.map {
height: 400px;
width: 100%;
</style>
<h2>Onde estamos?</h2>
<div id="map" class="map"></div>
<script>
var lat = -20.5;
var lon = -43.86;
function geraMapa(){
target: 'map',
layers: [
new ol.layer.Tile({
})
],
view: new ol.View({
zoom: 10
})
});
geraMapa();
</script>
</section>
Observe que criamos a função geraMapa, e foram incluídas as seguintes coordenadas:
 var lat = -20.5;

 var lon = -43.86;
Não pode faltar
BIBLIOTECAS E FRAMEWORKS
JAVASCRIPT
POR QUE É RECOMENDADO O USO DE BIBLIOTECAS E

FRAMEWORKS?
Bibliotecas e frameworks são conjuntos de códigos desenvolvidos por terceiros que

facilitam o desenvolvimento de aplicações web.
Olá, aluno! Você já pensou se uma empresa automobilística precisasse inventar um

novo modelo de roda para cada carro desenvolvido? E se um cozinheiro precisasse
redescobrir como fazer fogo antes de preparar cada refeição? O processo de produção
de um carro (ou de preparação de um jantar) demoraria muito mais tempo. Considere
que você deseja acender o fogão. Você pode saber como fazer isso friccionando duas
pedras até que uma faísca acenda, mas seria mais eficaz usar um fósforo. Esses
exemplos podem parecer absurdos, mas no desenvolvimento de websites podemos fazer
uma analogia parecida. Digamos que temos uma lista com cinco elementos:
40, 123, 12, 84, 0
Qual o maior elemento dessa lista? Obviamente, 123!
Mas pense em como calcular isso com JavaScript. Uma maneira de descobrir qual o
maior na lista é analisar um a um usando um laço de repetição e verificar, a cada
rodada, qual o maior número atual. Para isso, é necessária uma variável auxiliar para
armazenar o maior valor. Agora, observe o trecho de código a seguir:
Código 3.43 | Maior valor em uma lista
var lista = [40, 123, 12, 84, 0];
var maior = 0;
for(i in lista){
if(maior < lista[i]){
maior = lista[i];
console.log(maior);
Achar o maior número de uma lista é uma tarefa muito simples, mesmo assim foram
utilizadas oito linhas. O JavaScript contém uma função para isso na biblioteca nativa:
Math.max(40, 123, 12, 84, 0) //123
Ao observarmos de forma minuciosa, Math é, na verdade, um objeto embutido com

métodos próprios, mas que ilustra bem o conceito de uma biblioteca. Analisar o maior
ou o menor número de uma lista é uma tarefa trivial, ou seja, podem existir muitas
formas de se fazer, mas isso já está bem estabelecido e não precisamos gastar muitas
linhas de código. Uma função já havia sido construída anteriormente; logo, basta
chamá-la e assim teremos o maior valor da lista.
Por isso, bibliotecas e frameworks são tão importantes. Eles fornecem soluções que
aceleram o desenvolvimento do código, permitindo que os programadores foquem o que
realmente importa: construir aplicações mais robustas.
Bibliotecas e frameworks são conjuntos de códigos desenvolvidos por terceiros que

facilitam o desenvolvimento de aplicações web. Apesar de existirem tênues diferenças
entre esses conceitos, muitas vezes eles têm sido utilizados no mesmo contexto, como
no caso do jQuery, que algumas vezes é chamado de biblioteca, e outras, de framework.
Na prática, uma biblioteca é um conjunto de métodos e propriedades predefinidas que
pode auxiliar no desenvolvimento de código. Já um framework pode agrupar uma série
de bibliotecas ou ainda delimitar a forma como o programador deverá construir o
código.
Diferentes bibliotecas e frameworks podem ter diversos objetivos. Por exemplo, jQuery
é uma biblioteca construída para simplificar a forma como programamos em JavaScript.
Já o D3.js é uma biblioteca construída especialmente para construção de gráficos e
outros tipos de visualização de dados. Assim, não há empecilho em usar as duas
bibliotecas em um mesmo projeto de site.
Usar frameworks e bibliotecas têm muitas vantagens; entre elas, aperfeiçoar a

codificação reduzindo o tempo gasto na construção de métodos triviais ou, ainda, no
caso dos frameworks, criar uma padronização de como os códigos deverão ser
construídos. Uma desvantagem é que à medida que o número de bibliotecas usadas em
um mesmo site aumenta, o carregamento pode se tornar lento, uma vez que incluirá
muitas funções que talvez não sejam usadas pelo programador. Além disso, pode-se ter
conflitos relacionados a nomes de funções – mas há uma série de boas práticas para
lidar com isso.
A fim de colocarmos em prática os conhecimentos a serem obtidos, vamos analisar a

seguinte situação-problema: você foi contratado para criar uma página de planos de um
site. Observe que a empresa apresenta quatro valores possíveis de planos. Precisamos
implementar um formulário que envie o contato do cliente e qual plano será assinado
quando ele clica em “Assine já!”, na seção de planos mostrada na figura a seguir.
Figura 3.35 | Seção de planos
Para isso, foi solicitado que você utilize a estrutura de um modal Bootstrap (um
componente que usa animações CSS e JavaScript, além do efeito lightbox para melhorar
a interface de uma caixa de diálogo). Entretanto, você deverá construir um código que
utilize um único modal, que deverá receber interativamente o plano escolhido com base
na opção escolhida pelo usuário.
Para isso, será preciso implementar essa caixa de diálogo interativa, seguindo as
seguintes regras:
1. O modal de assinatura deve ter um formulário que exija nome, telefone,

endereço, cidade, estado e CEP.
2. Ao final do formulário deve haver um checkbox com a mensagem “Concordo
com os termos de uso” (não se preocupe com os termos de uso, eles serão
escritos pelo departamento jurídico da empresa, portanto apenas insira a
mensagem).
3. O formulário deve ter um campo PLANO, que deve exibir apenas o plano
referente ao botão clicado na página principal (exemplo, se o usuário clicou no
botão “Assine já!” do Plano Alfa, o formulário exibirá apenas o Plano Alfa e o
valor).
4. O formulário deve ter dois botões: cancelar e assinar. O botão “assinar” deve
ficar desabilitado por padrão. Ele só será habilitado quando o usuário clicar no
checkbox dos termos de uso. Uma vez aceitos os termos de uso, o checkbox
deverá ser desabilitado (ou seja, não será possível mais remover a checagem).
Opcional: inclua os estados brasileiros em um campo do tipo select. Você pode obter
uma lista (select) dos estados brasileiros em GitHub (c2021).
Observe qual é a versão do Bootstrap utilizada, pois classes podem receber novos
nomes. Você pode usar jQuery combinado às classes do Bootstrap para alterar os
atributos referentes aos campos selecionados. Por exemplo, o atributo disabled impede
que um campo seja clicado (ele é bloqueado).
Diante disso, nesta seção, abordaremos alguns exemplos de bibliotecas JavaScript, além
de apresentar exemplos práticos usando jQuery, a mais popular biblioteca/framework
JavaScript. Vamos lá?
CONCEITO-CHAVE
Nos últimos anos, uma ampla gama de frameworks JavaScript tem sido disponibilizada
na internet. Isso traz vantagens, pois dá ao desenvolvedor muitas opções na hora de
desenvolver a sua aplicação, porém pode tornar difícil a escolha do framework e a
decisão de qual biblioteca utilizar.
Anteriormente citamos um framework JavaScript, o Bootstrap. No Quadro 3.10,

podemos ver uma lista de bibliotecas e frameworks populares em JavaScript.
Quadro 3.10 | Lista de bibliotecas e/ou frameworks JavaScript
Biblioteca Descrição
Node.js é um software para execução de código JavaScript em ambiente back-

Node.js
end.
CreateJS é uma suíte de bibliotecas para desenvolvimento de conteúdo

CreateJS
interativo usando HTML5.
jQuery Biblioteca que simplifica o desenvolvimento de códigos com JavaScript.

React Biblioteca JavaScript usada para criação de interfaces de usuário.
Biblioteca usada para criação de visualização de dados web, desde criação de

D3.js
gráficos simples a visualizações interativas.
Glimmer.js é uma biblioteca construída visando acelerar a renderização do

Glimmer.js
DOM por meio da compilação em códigos de baixo nível.
Impact.js é uma biblioteca para construção de jogos em HTML5 usando

Impact.js
JavaScript.
BootstrapVue une os frameworks Bootstrap e Vue.js para construção de sites

BootstrapVue
responsivos focados principalmente em desenvolvimento mobile.
AngularJS é um framework JavaScript proposto pela Google para construção de

AngularJS documentos web single-page. AngularJS foi encerrado em 2016 e substituído
pelo framework Angular (que utiliza outra linguagem).
Angular É a nova versão do AngularJS. Foi construído com a linguagem TypeScript.
Perceba que cada framework apresenta uma principal motivação. De fato, o que elas
têm em comum é o fato de utilizarem uma sintaxe parecida ao JavaScript (usando os
padrões do ECMAScript). Entretanto, detalhes de como implementar códigos usando
cada um desses frameworks devem ser explorados na documentação descrita nos seus
respectivos sites. Como dissemos, seria impossível explorar cada um desses
frameworks; portanto, escolhemos a biblioteca jQuery para ilustrar a seção. Entretanto,
recomendamos a você, aluno, que pesquise a fundo as novas bibliotecas/frameworks
JavaScript, em especial aquelas com foco em arquitetura single-page, que podem ser a
próxima tendência no desenvolvimento web.
Pesquise mais
Conheça as 24 bibliotecas JavaScript gratuitas mais populares no ano de 2020, de

acordo com o site Colorlib (IVANOVS, 2020).
jQuery
jQuery é uma biblioteca JavaScript simplificada e rica em recursos. Ela permite o

desenvolvimento e manipulação de documentos HTML, tratamento de eventos,
construção de animações e manipulação de JavaScript de forma assíncrona (AJAX) de
uma maneira simples e compatível com diversos navegadores. jQuery pode ser obtido
no site da biblioteca (JQUERY, c2021).
Início rápido
Para começar a desenvolver seus primeiros códigos em jQuery, inclua a seguinte linha
de código:
Esse código carrega a biblioteca jQuery diretamente da CDN (Content Delivery

Network ou, na tradução, Rede de Fornecimento de Conteúdo). Entretanto, é
recomendado que seja realizado o download do arquivo “jquery-[versão].min.js” e que
seja salvo no diretório local de sua aplicação. Para testar, abra o link do script no
navegador, clique com o botão direito e vá em “salvar como”.
Instalação opcional
Opcionalmente, jQuery pode ser instalado pelo npm usando o seguinte código:
npm install jquery
JavaScript versus jQuery
A principal ideia por trás do jQuery é reduzir a quantidade de código necessário em

JavaScript para realizar uma mesma tarefa. Observe, a seguir, um código simples que
insere e grava uma mensagem dentro do elemento de ID “conteudo”:
Código 3.44 | Inserindo e gravando uma mensagem
<!DOCTYPE html>
<html>
<head>
<title>jQuery vs. JavaScript</title>
</head>
<body>
<div id="conteudo"></div>

<script>
$('#conteudo').text('Olá mundo!'); // jQuery
</script>
</body>
</html>
Esse código gerará a seguinte página (Figura 3.36):
Figura 3.36 | “Olá mundo!”
Perceba que o jQuery foi carregado na linha 13. Ele deve ser declarado antes dos
códigos usando a sintaxe jQuery, como o código presente na linha 15.
Observe como um código similar seria realizado usando JavaScript quando comparado
com a versão em jQuery:
/* JavaScript */
document.getElementById('conteudo').innerHTML = 'Olá mundo';
/* jQuery */
$('conteudo').text('Olá mundo');
Por isso, o lema do jQuery é “write less, do more”, que pode ser traduzido em “escreva
menos, faça mais”.
A sintaxe do jQuery requer um seletor seguido de um método:
$ ( [ seletor ] ) . método ( [ valores ] ) ;
Um seletor precedido por # indica a busca por um ID. Se for precedido por um ponto,
será uma classe. Caso desejemos usar uma tag, basta colocar o seu nome:
1. $('body')
2. $('.minhaClasse')
3. $('#meuID')
No exemplo apresentado, jQuery é usado para buscar o elemento contido pela

tag <body> na linha 1, todos os elementos com a classe minhaClasse na linha 2 e o
elemento de id meuID na linha 3.
Assimile
Seletores avançados
Até o momento abordamos apenas seletores simples, como nome da tag, ID e classe.
Entretanto, existem seletores que permitem buscas mais eficientes, como selecionar
elementos pai e filho, ou elementos que apresentam determinado atributo. Como
poderíamos selecionar um elemento que apresenta o atributo data-bs-
toggle="dropdown" e alterar a sua cor de fundo para vermelho?
Por exemplo: <button id="menu" data-bs-toggle="dropdown">
Confira a lista de seletores no site jQuery (c2021b).
Verificando se o documento está “pronto”
Caso você utilize um comando jQuery antes do carregamento da biblioteca, você obterá
a seguinte mensagem:
Uncaught ReferenceError: $ is not defined
Essa frase poderia ser traduzida como “erro de referência não detectado: $ não está
definido”. Isso ocorre porque o navegador não consegue reconhecer comandos iniciados
com $ nativamente. Apenas quando a biblioteca jQuery é completamente iniciada, esse
comando passará a ser reconhecido. Importa destacar que é recomendado que o script
jQuery seja declarado dentro da tag <head>.
Além disso, antes de executar qualquer script com jQuery é importante verificar se o
documento está “pronto”, isto é, se todo o conteúdo foi corretamente carregado. Foi
realizado algo similar usando JavaScript puro, quando usamos a função que verificava
se a página já havia sido carregada.
Há duas formas de se fazer isso. A primeira envolve uma declaração completa:
$( document ).ready(function() {
console.log( "Pronto!" );
});
Mas pode-se utilizar a forma reduzida:
$(function() {
console.log( "Pronto!" );
});
Nos exemplos a seguir, usaremos sempre a versão reduzida.
Manipulação do CSS e de atributos com jQuery
Navegar pelo DOM e alterar propriedades CSS usando JavaScript puro pode requerer
que você digite uma grande quantidade de código. A biblioteca jQuery fornece soluções
para facilitar isso. Você pode facilmente alterar estilos e atributos de elementos HTML
usando os métodos do jQuery (Quadro 3.11).
Quadro 3.11 | Classes do jQuery usadas para manipulação do CSS
Classe Descrição
.addClass() Adiciona uma classe especificada.
.css() Aplica uma propriedade de estilo.
.hasClass() Verifica se o elemento possui uma classe determinada.
.height() Determina a altura.
.innerHeight() Obtém a altura interna atual (incluindo preenchimento, mas não borda).
.innerWidth() Obtém a largura interna atual (incluindo preenchimento, mas não borda).
.offset() Obtém as coordenadas atuais ou define as coordenadas de cada elemento.
Obtém a altura externa atual (incluindo preenchimento, borda e,

.outerHeight() opcionalmente, margem). Pode ser usada ainda para definir a altura externa
de cada elemento correspondido.
Obtém a largura externa atual (incluindo preenchimento, borda e,

.outerWidth() opcionalmente, margem). Pode ser usada ainda para definir a largura externa
de cada elemento correspondido.
Obtém as coordenadas atuais do primeiro elemento em relação ao elemento

.position()
pai.
.removeClass() Remove uma ou várias classes.
Obtém a posição horizontal atual da barra de rolagem. Pode ser usada ainda
.scrollLeft() para definir a posição horizontal da barra de rolagem para cada elemento
correspondido.
.scrollTop() Obtém a posição vertical atual da barra de rolagem. Pode ser usada ainda para
definir a posição vertical da barra de rolagem para cada elemento
correspondido.
Adiciona ou remove uma ou mais classes de cada elemento (dependendo da

.toggleClass()
presença da classe ou do valor do argumento).
.width() Obtém a largura atual calculada.
Fonte: adaptado de jQuery (c2021c).
Suponhamos que você deseja usar o jQuery para alterar a cor de fundo de uma página.
$(function(){
$('body').css('backgroundColor','black');
});
Observe que o método .css( ) requer dois parâmetros: a propriedade a ser alterada e o
valor que a propriedade receberá. Nesse exemplo, a propriedade alterada foi
background-color (note que aqui você pode usar tanto backgroundColor
quanto background-color). O valor aplicado a essa propriedade foi black (preto).
Podemos ainda alterar altura e largura de um elemento usando as propriedades

height e width, respectivamente. Observe a implementação a seguir:
Código 3.45 | Alteração da altura (height) e da largura (width)
<div id='caixa'></div>
<script>
$(function(){
$('#caixa').css('background-color','green');
$('#caixa').height('400px');
$('#caixa').width('400px');
$('body').css('background-color','black');
});
</script>
O código apresentado cria uma divisão div quadrada chamada caixa, que receberá a cor
de fundo verde, uma altura de 400px e uma largura de 400px, além disso, a cor de fundo
será alterada para preto (Figura 3.37).
Figura 3.37 | Utilização do CSS para alterar cores e tamanhos de elementos
Você pode observar o uso dos métodos de alteração de estilo na prática.
Vamos, a seguir, compreender como jQuery trata eventos.
Eventos
jQuery também fornece uma série de métodos para facilitar o uso de eventos JavaScript.
Eventos englobam comportamentos relacionados à interação entre usuário e sistema. Na
prática podem ser desde um clique do mouse em um determinado botão até quando uma
determinada tecla é pressionada. O método ready( ), por exemplo, determina que uma
função será executada quando o DOM for completamente carregado.
Eventos de cursor
Os eventos relacionados ao cursor em geral analisam o posicionamento indicado por um

mouse ou trackpad. Em geral, esses eventos estão relacionados à movimentação ou
clique do mouse sobre um determinado elemento. Confira a seguir alguns eventos
relacionados ao cursor:
 .click(): ocorre quando se clica em algum elemento.

 .hover(): ocorre quando o mouse sobrepõe um elemento.
 .mousedown(): ocorre quando algum botão do mouse é pressionado sobre um
determinado elemento.
 .mouseenter(): ocorre quando o cursor adentra o elemento.
 .mouseleave(): evento ativado quando o cursor deixa o elemento.
 .mouseout(): ativado quando o cursor não está sobre o determinado elemento.
 .mouseover(): evento ocorre quando o mouse está sobre o elemento.
 .mouseup(): ocorre quando algum botão do mouse, após ser pressionado, é
liberado.
Muitos desses métodos funcionam de maneira similar, porém com pequenas diferenças
relacionadas a seu uso. Para verificar, consulte MDN Web Docs ([s.d.]).
Eventos do teclado
Esse tipo de evento é acionado quando o teclado é utilizado. No JavaScript temos como
exemplo o evento onkeypress (quando uma tecla é pressionada). jQuery também fornece
maneiras de manipular eventos (FERREIRA, 2020). Há três principais métodos:
 .keydown(): ocorre no exato momento em que a tecla é pressionada.

 .keypress(): ocorre enquanto uma tecla é pressionada.
 .keyup(): ocorre após a tecla ser pressionada e voltar a sua posição original.
Eventos de formulários
Dos eventos relacionados a formulários, destacamos o responsável pela submissão:

.submit().
Uma lista com todos os eventos pode ser consultada em jQuery (c2021d).
Exemplificando
Vamos ver na prática como os eventos podem ser utilizados em combinação com as
propriedades de alteração do CSS. O código a seguir constrói uma página HTML como
um simples botão e um quadrado vermelho logo a seguir. Vamos utilizar jQuery para
que identifique um evento de clique no botão e altere a cor do quadrado para azul:
Código 3.46 | Identificação de um evento de clique e alteração da cor em jQuery
<!DOCTYPE html>
<html lang="pt-br">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery</title>
<style>#caixa{ height:100px; width:100px; background-color:red; margin-top:
10px; }</style>
</head>
<body>
<button id='botao'>Clique aqui</button>
<div id='caixa'></div>
<script>
// quando a página for carregada...
$(function(){
// quando o elemento de id 'botao' for clicado
$('#botao').click(function(){
// altere a cor do elemento de id 'caixa' para azul
$('#caixa').css('background-color','blue');
});
});
</script>
</body>
</html>
Agora observe na prática o que ocorre ao clicar no botão “Clique aqui” (Figura 3.38):
Figura 3.38 | Entendendo eventos jQuery

A. Antes de clicar no botão
B. Depois do clique
Note o elemento analisado (#botao) recebe o método relacionado ao evento de clique.

Assim, dentro da função criada, é adicionado o comando que fará a modificação em
#caixa.
Perceba que a forma como os parênteses e chaves são adicionados às vezes pode gerar
dúvidas. Para tentar melhorar isso, no código a seguir vamos colorir da mesma cor cada
elemento relacionado:
Código 3.47 | Função SELETOR com evento de clique
$(
function(){
$( [ SELETOR ] ) . EVENTO (
function(){
// o que será feito
);
);
Por exemplo, note que a função declarada na linha 2 é fechada na linha 8. Enquanto
isso, a função aberta na linha 4 é fechada na linha 6. Observe que o encerramento de
parênteses deve ser procedido de ponto e vírgula, mas o fechamento de chaves não.
Veja, ainda, que a quebra de linhas dentro de parênteses não interfere na execução do
código.
Agora você pode testar o código apresentado:
Vamos investigar mais os eventos relacionados ao mouse. Primeiro, vamos adicionar

um código que altere a cor da caixa para verde quando o mouse estiver sobre ela:
// EVENTO DE SOBREPOSIÇÃO DO MOUSE
// ao sobrepor o mouse sobre a #caixa
$('#caixa').hover(function(){
$('#caixa').css('background-color','green');
});
Neste caso, podemos utilizar a função hover. Assim, ao remover o cursor do mouse da
caixa, a caixa volta a ser verde. Podemos também adicionar um novo evento que deve
colorir a cor da caixa de roxo, caso o cursor do mouse tenha sido colocado sobre ela e
depois removido. Veja:
// ao tirar o mouse da #caixa
$('#caixa').mouseout(function(){
$('#caixa').css('background-color','purple);
});
Observe o resultado dessas modificações:

Bootstrap JavaScript
O framework Bootstrap é capaz de aperfeiçoar a interface de websites. Contudo,

Bootstrap não é apenas um framework HTML/CSS, dispondo de uma série de recursos
que utilizam JavaScript para deixar a navegação mais interativa. Por exemplo, os
componentes do Bootstrap utilizam JavaScript para exibição interativa de menus, caixas
de aviso e imagens.
Para usar as funcionalidades JavaScript do Bootstrap, deve-se incluir o Bootstrap

Bundle. Observe o código a seguir, em que é apresentada uma estrutura modelo:
Código 3.48 | Estrutura modelo utilizando Bootstrap
<!DOCTYPE html>
<html lang="pt-br">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1
" crossorigin="anonymous">
<title>Bootstrap JS!</title>
</head>
<body>
<h1>Olá mundo!</h1>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js
"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65K
gf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Teste esse código com o simulador Trinket:
A partir desse modelo, você pode elaborar alguns exemplos de uso para o Bootstrap
JavaScript. Aprenda, a seguir, com o exemplo dos menus suspensos.
Menu suspenso
Muitas vezes, ao construir um menu de um site, você tem uma quantidade maior de
links do que o espaço disponível. Uma solução é adicionar um menu suspenso, o qual,
quando o usuário clicar no botão, o navegador exibirá abaixo ou acima uma lista com
outros links. Observe o exemplo de menu suspenso da Figura 3.39 a seguir:
Figura 3.39 | Exemplos de menus suspensos
A. Exemplo de uso de links suspensos no menu de um site.

B. Exemplo de link suspenso usando Bootstrap.
Você pode implementar um exemplo de menu suspenso utilizando o Bootstrap. Observe

o código a seguir e insira-o dentro do <body> de sua página:
Código 3.49 | Menu suspenso utilizando Bootstrap
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="menu" data-bs-

toggle="dropdown" aria-expanded="false">
Clique para saber mais
</button>
<ul class="dropdown-menu" aria-labelledby="menu">
<li><button class="dropdown-item" type="button">Página X</button></li>
<li><button class="dropdown-item" type="button">Página Y</button></li>
<li><button class="dropdown-item" type="button">Página Z</button></li>
</ul>
</div>
Agora observe o resultado (Figura 3.40):

Figura 3.40 | Exemplo de menu suspenso criado com Bootstrap (ao clicar no botão, três outros
links são exibidos)
Teste o Código 3.49 com o simulador Trinket:
O Bootstrap utiliza classes para indicar ao navegador quais ações serão realizadas.
Nesse caso, o botão criado deve ser precedido de uma div, que deve apresentar a classe
dropdown. Essa classe indica que se trata de um menu suspenso. Observe também que o
botão (tag button) tem as classes btn e btn-secondary (responsáveis por aplicar o estilo
do botão e a cor cinza), além da classe dropdown-toggle, que insere a seta que aponta
para baixo no final do botão. Para que o menu suspenso funcione, o atributo data-bs-
toggle="dropdown" é necessário. Já o atributo aria-expanded recebe false quando o
menu está oculto e true quando o menu é clicado.
Os links que queremos inserir no menu suspenso devem ser adicionados dentro de um
elemento <ul> que deve receber a classe dropdown-menu. Cada link deve ser
adicionado dentro de um elemento do tipo <li>, e pode ser um <button> ou um <a>,
desde que receba a classe dropdown-item.
Modal
Modals são caixas de diálogos usadas para exibir informações. Sua funcionalidade pode
ser comparada às caixas de alertas exibidas ao executar o comando alert() do JavaScript.
Entretanto, elas apresentam um design mais atrativo, em especial devido às animações
de entrada e saída e ao efeito lightbox, quando o fundo é levemente escurecido dando
destaque à caixa de diálogo (Figura 3.41).
Figura 3.41 | Exemplo de uso de um modal (será implementado a seguir)
A. Botão que ativa o modal.

B. Exemplo de modal.
Para a implementação de um modal, deve-se considerar duas partes: um botão que

ativará o modal e a div que receberá as informações do modal. Agora você pode
implementar um modal. Observe no código a seguir a parte 1 (ativar o modal) e a parte
2 (modal).
Código 3.50 | Modal – Parte 1 (ativar modal) e parte 2 (div principal do modal)

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-

target="#modal-exemplo">
Botão que ativa o modal
</button>


<div class="modal fade" id="modal-exemplo" tabindex="-1" aria-hidden="true">


<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title">Título do modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-

label="Close"></button>
</div>

<div class="modal-body">
...
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-

dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar</button>
</div>
</div>
</div>
</div>
Observe que o botão que ativa o modal requer dois atributos:
1. data-bs-toggle="moda"
2. data-bs-target="#modal-exemplo"
O primeiro indica que o botão acionará um modal e o segundo indica qual o ID do

elemento que armazena o modal.
O elemento que recebe o modal deve receber a classe: class="modal fade". Ainda, é
importante que o id seja o mesmo informado no atributo data-bs-target, i. e., id="modal-
exemplo".
Além disso, o elemento que receberá o modal pode ser composto por três partes
principais:
 O cabeçalho do modal (classe modal-header).

 O corpo do modal (classe modal-content).
 O rodapé do modal (classe modal-footer).
Esses elementos deverão ser parte de uma div que deve receber a classe modal-dialog e
de outra div que deve receber a classe modal-content.
Reflita
Você aprendeu a construir modals. Entretanto, é possível enviar informações para um

modal diretamente de um elemento que ativa um evento. Como você faria para enviar
informações para o modal? Quais as modificações você faria no código a seguir?
Você pode consultar o site do Bootstrap e pensar nas possíveis alterações desse código
(BOOTSTRAP, [s.d.]).
Carrossel de imagens
Bootstrap ainda apresenta um recurso para exibição de apresentações de imagens

denominado carrossel de imagens (carousel). O carrossel de imagens utiliza
transformações CSS 3D e um pouco de JavaScript para exibir uma série de imagens,
textos, indicadores e controles de troca de imagem.
No exemplo a seguir será implementado um carrossel de imagens:
Agora, observe os três possíveis estados do slideshow (Figura 3.42).
Figura 3.42 | Imagens inseridas no slideshow

Nesse exemplo, você pode clicar nas setas para alterar a imagem atual ou aguardar um
tempo até ela ser trocada automaticamente (isso dependerá de o navegador oferecer
suporte). É possível ver que a div container, colorida de preto para melhor visualizar os
marcadores, tem uma largura maior do que a imagem. Essa escolha foi realizada para
incluir o título definido para a imagem e a descrição.
Apresentamos até este momento três modelos em JavaScript do Bootstrap para a

construção de páginas interativas: menus suspensos, modals e carrossel de imagens.
Entretanto, Bootstrap fornece uma série de recursos e funcionalidades que podem
auxiliar no desenvolvimento da sua aplicação.
Single-page applications
Como já pudemos observar, uma aplicação web pode apresentar muitas páginas. Além
disso, as folhas de estilo surgiram para melhorar a performance, separando conteúdo e
estilo em arquivos separados. Assim, vários arquivos relacionados a conteúdo podem
utilizar um mesmo estilo (Figura 3.43).
Figura 3.43 | Um mesmo estilo usado para quatro páginas distintas

Assim, quando o usuário do seu site navegar, por exemplo, da página 1 para a página 2,
o sistema não precisa carregar novamente o estilo, reduzindo a necessidade de transferir
os códigos de estilo do servidor para o cliente.
Exemplificando
Observe nas estruturas HTML que, ao navegar da página 1 para a página 2, o estilo
utilizado é o mesmo e, além do estilo, as tags utilizadas também são as mesmas.
Considere como exemplo o Quadro 3.12.
Quadro 3.12 | Compare os dois códigos: a única mudança ocorre na div “conteudo”
Página 1 Página 2
<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<body> <body>
<div id = "conteudo"> <div id = "conteudo">
ABC XYZ
</div> </div>
</body> </body>
</html> </html>

E se o navegador pudesse buscar no servidor apenas as partes que foram modificadas de
uma página para outra? Carregar a página levaria menos tempo. Veja no Quadro 3.12
que o navegador só precisa buscar no servidor uma única linha em vez de oito.
O JavaScript permitiu o carregamento de partes de páginas de forma mais elegante.

Usando JavaScript é possível detectar um evento (o clique em um link), determinar a
região que será alterada (usando o DOM para navegação) e consultar um servidor
remoto para buscar o novo conteúdo que será inserido na página. O servidor remoto
recebe a requisição e retorna apenas o que foi pedido por meio de uma linguagem back-
end, como o PHP e, por fim, o JavaScript remove o conteúdo anterior e adiciona o novo
conteúdo sem a necessidade de recarregar a página.
Nesse caso, apenas uma requisição da página completa foi feita ao servidor, logo temos
uma única página carregada. Assim, ao navegar por esse site, você não tem uma
mudança real de página, mas uma simples troca de parte do conteúdo. Em
desenvolvimento web, isso é denominado de single-page applications.
Reflita
Você provavelmente já usou um site que utiliza a tecnologia single-page applications.

Ao enviar um e-mail pelo Gmail, você não precisa recarregar a página: simplesmente ao
clicar no botão “escrever e-mail”, uma caixa para digitar a mensagem aparece no canto.
Ou, então, ao usar o Facebook ou o Instagram, à medida que você desce pelo feed de
notícias, novas postagens vão aparecendo, sem a necessidade de recarregar toda a
página. Sites de comércio eletrônico também têm se beneficiado muito disso. Codificar
um site que faz esse tipo de requisições pode ser um pouco mais complicado; muitos
problemas podem acontecer, por exemplo: se a requisição de parte de uma página
falhar, como o usuário vai perceber?
Nos últimos anos, frameworks JavaScript têm mudado a maneira pela qual uma
aplicação web é estruturada, focando estratégias que melhorem a performance de um
site. Um exemplo é o AngularJS, um framework JavaScript proposto pela Google para
construção de documentos web single-page. Observe a seguir um exemplo retirado do
site oficial (ANGULARJS, 2018) demonstrando como o AngularJS funciona.
Código 3.51 | Exemplo utilizando AngularJS
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="seuNome" placeholder="Enter a name here">
<hr>
<h1>Hello {{seuNome}}!</h1>
</div>
</body>
</html>
Fonte: ANGULARJS (2018, [s.p.]).
Neste momento, não é necessário conhecer os detalhes desse código, pois o framework
AngularJS não será aprofundado agora. O objetivo é apenas demonstrar como o
framework age em conjunto com os códigos HTML: utilizando atributos para detectar
elementos do DOM ( como ng-model) e marcações para definir onde os dados serão
inseridos (como {{seuNome}}). AngularJS foi encerrado em 2016 (essa versão foi
considerada a 1.x) e substituído pelo framework Angular (2021), que utiliza a
linguagem TypeScript no lugar de JavaScript.
Sites de alta performance
Observe o exemplo de um site de comércio eletrônico que enfrenta uma grande

quantidade de acessos em uma determinada data. O que ocorre se as seções de
navegação e compra de produto funcionarem perfeitamente, mas o sistema de
pagamento não funcionar? De que adiantaria o cliente escolher o produto se, na hora do
pagamento, a transação falhar?
Por isso, o uso de estratégias híbridas é fundamental para construção de sites mais
robustos e capazes de se manterem on-line por mais tempo mesmo recebendo grandes
quantidades de acessos. Nesse caso, diversas tecnologias podem ser combinadas, como
frameworks que melhoram a performance ou que reduzam os custos de processamento
de servidores ou o tráfego na rede. Importa destacar que quando falamos em grande
quantidade de acessos, não estamos falando em receber entre 1 a 10 mil usuários
visitantes ao mesmo tempo, mas, sim, de manter on-line dezenas de milhares a milhões
de usuários simultaneamente. Para sites que não necessitam de suporte a tantos acessos
em paralelo – ou seja, a grande maioria dos sites na internet –, o modelo tradicional de
desenvolvimento, composto de HTML, CSS e JavaScript, atende às necessidades.
Páginas dinâmicas
Até o momento foi apresentado o desenvolvimento web em aplicações de páginas

estáticas (construídas com HTML + CSS) e aplicações de página única. Entre esses dois
modelos de desenvolvimento de websites, não podemos deixar de citar um tipo
fundamental: as páginas dinâmicas.
Assimile
Formas de construção de websites e suas características
 Páginas estáticas:
o Conteúdo fixo
 Páginas dinâmicas:
o Página HTML construída no servidor web.

o Conteúdo pode ser armazenado em um banco de dados.
o PHP
 Single-page applications:
o Site carregado em uma página única.

o Conteúdo carregado conforme a demanda.
Na construção de páginas dinâmicas, assim como os estilos armazenados nos arquivos

CSS, a estrutura do site é armazenada separadamente em códigos HTML (note que nem
sempre os códigos HTML estarão em arquivos de extensão “.html”). O conteúdo, por
sua vez, é armazenado em uma estrutura separada, que pode ser em tabelas de bancos de
dados (como o MySQL) ou até mesmo em arquivos de diversos tipos e formatos. Note
que o documento web correspondente a uma página de internet não existe até o
momento em que o usuário faz a requisição ao servidor web. Este, por sua vez, recebe a
requisição e deve “construir” a página: ele detecta, com base na requisição, qual o
conteúdo desejado; carrega separadamente cada componente de códigos HTML, CSS e
JavaScript; busca os dados referentes ao conteúdo em um banco de dados ou arquivo; e,
por fim, monta uma página HTML, que será enviada para o navegador do cliente. Por
isso dizemos que se trata de uma página dinâmica.
Para que o servidor web funcione é necessária uma linguagem de programação para
realizar os processamentos que construirão essa página dinâmica. Lembre-se de que
chamamos de front-end as linguagens que executam no cliente (como JavaScript).
Assim, as linguagens que executam no servidor são denominadas back-end.
Caro aluno, até aqui você conheceu vários frameworks Javascript e agora já pode
escolher o seu preferido e desenvolver sua aplicação Javascript. Mãos à obra!
Pesquise mais
Caro aluno, seguem algumas sugestões de materiais que podem complementar seu
aprendizado:
 Sites:
o jQuery site official (OPENJS FOUDANTION, [s.d.]).
o Sheet cheat jQuery: (ÓSCAR OTERO, [s.d.]).
 Videoaulas:
o Modal (Bootstrap) (MODAL…, 2017).

o Carrossel de imagens (CAROUSEL…, 2017).
 Artigos:
o Introdução ao jQuery (MARIANO, 2020a).

o Bootstrap JavaScript (MARIANO, 2020b).
o D3.js (MARIANO, 2020c).
REFERÊNCIAS
ANGULAR. Página inicial. Angular, 2021. Disponível em: https://angular.io. Acesso

em: 28 fev. 2021.
ANGULARJS. Página inicial. AngularJS, 2018. Disponível em: https://angularjs.org/.

BOOTSTRAP. Modal. Varying modal content. GetBootstrap, [s.d.]. Disponível

em: https://bit.ly/30Acsft. Acesso em: 28 fev. 2021.
CAROUSEL (Bootstrap). [S.l., s.n.], 2017. 1 vídeo (10 min. 23 seg.). Publicado pelo
canal Diego Mariano. Disponível em: https://bit.ly/3ez7iJ0. Acesso em: 28 fev. 2021.
FERREIRA, A. L. Como identificar uma tecla pressionada usando a propriedade

“keyCode” do Javascript. Visual Ficas, 26 fev. 2020. Disponível em:
https://bit.ly/30EBvOx. Acesso em: 13 dez. 2020.
GITHUB. Quagliato: select_estados.html. GitHub Gist, c2021. Disponível em:

https://bit.ly/38Br3fk. Acesso em: 28 fev. 2021.
IVANOVS, A. 24 Best Free JavaScript Frameworks for Web Developers 2020.

Colorlib, 27 ago. 2020. Disponível em: https://bit.ly/3bH10p2. Acesso em: 28 fev.
2021.
JQUERY. Category: CSS. jQuery, c2021c. Disponível em: https://bit.ly/30ANdKj.

JQUERY. Category: Events. jQuery, c2021d. Disponível em:

https://bit.ly/38B7PGq Acesso em: 28 fev. 2021.
JQUERY. Category: Selectors. jQuery, c2021b. Disponível em: https://bit.ly/3levNfN.

JQUERY. Página inicial. jQuery, c2021a. Disponível em: https://jquery.com/. Acesso

em: 28 fev. 2021.
MARIANO, D. Bootstrap JavaScript. Diego Mariano, 15 ago. 2020b. Disponível

em: https://bit.ly/30ClaKh. Acesso em: 28 fev. 2021.
MARIANO, D. D3.js. Diego Mariano, 15 ago. 2020c. Disponível em:

https://bit.ly/3rTIvD6. Acesso em: 28 fev. 2021.
MARIANO, D. jQuery. Diego Mariano, 15 ago. 2020a. Disponível em:
https://bit.ly/3cq7tUf. Acesso em: 28 fev. 2021.
MDN WEB DOCS. Elements. Events. MDN Web Docs Mozilla, [s.d.]. Disponível em:
https://mzl.la/3ey2sMc. Acesso em: 28 fev. 2021.
MODAL (Bootstrap). [S.l., s.n.], 11 out. 2017. 1 vídeo (8 min. 41 seg.). Publicado pelo
canal Diego Mariano. Disponível em: https://bit.ly/3bClvD8. Acesso em: 28 fev. 2021.
OPENJS FOUDANTION. Página Inicial. OpenJS Foundation, [s.d.]. Disponível em:

https://jquery.org. Acesso em: 28 fev. 2021.
ÓSCAR OTERO. jQuery. Óscar Otero, [s.d.]. Disponível em: https://bit.ly/3bG484p.

BIBLIOTECAS E FRAMEWORKS
JAVASCRIPT
COMO IMPLEMENTAR UM FORMULÁRIO EM UM WEBSITE?
Execute essa atividade com base nos seus conhecimentos sobre modal Bootstrap.
Deseja ouvir este material?
sem medo de errar
Lembre-se de que, conforme a situação-problema apresentada, você foi contratado para

criar uma página de planos de um site. A empresa apresenta quatro valores possíveis de
planos. Precisamos implementar um formulário que envie o contato do cliente e qual
plano será assinado quando ele clica em “Assine já!”, na seção de planos.
Uma possível visão da interface do formulário é mostrada na figura a seguir. Ao clicar

em “Assine já!”, pode ser aberto o formulário com as informações dos planos e com os
campos de preenchimento nome, telefone e endereço, juntamente com os termos de uso.
Figura 3.44 | Visão geral da interface do formulário
Observe o Código 3.52, que apresenta a resolução da situação-problema utilizando

modal:
Código 3.52 | Utilização do modal
<div class="modal fade" id="assineja" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Assine agora:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-12">
<label>Plano</label>
<select class="form-control" id="nomePlano" disabled>
<option id='o-alfa' value="alfa">Plano Alfa (R$ 50)</option>
<option id='o-beta' value="beta">Plano Beta (R$ 90)</option>
<option id='o-gama' value="gama">Plano Gama (R$ 120)</option>
<option id='o-delta' value="delta">Plano Delta (R$ 150)</option>
<option id='o-omega' value="omega">Plano Omega (R$ 199)</option>
</select>
</div>
</div>
<div class="row mt-2">
<div class="form-group col-md-6">
<label>Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Digite seu nome

completo">
</div>
<label>Telefone de contato</label>
<input type="text" class="form-control" id="contato" placeholder="Digite seu

telefone">
</div>
</div>
<div class="form-group">
<label>Endereço</label>
<input type="text" class="form-control" id="endereco" placeholder="Rua A, Bairro

Z">
</div>
<div class="form-row">
<label>Cidade</label>
<input type="text" class="form-control" id="cidade">
</div>
<label>Estado</label>
<select id="estado" class="form-control" name="estado">
<option></option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
<option value="EX">Estrangeiro</option>
</select>
</div>
<label>CEP</label>
<input type="text" class="form-control" id="CEP">
</div>
</div>
</div>
<div class="form-group ml-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="termos">
<label class="form-check-label">
Concordo com os termos de uso.
</label>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-

dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-success" id="assinarbtn"

disabled>Assinar</button>
</div>
</div>
</div>
</div>
Agora observe o Código 3.53. Ele contém os scripts construídos para manipular o
estado dos botões e campos de seleção, os quais são detalhados nos comentários dentro
do código:
Código 3.53 | Utilização do modal
<script>
// esta função é necessária para remover a seleção caso o usuário clique em vários
planos
function removeSelecao(){
$('#o-alfa').removeAttr('selected');
$('#o-beta').removeAttr('selected');
$('#o-gama').removeAttr('selected');
$('#o-delta').removeAttr('selected');
$('#o-omega').removeAttr('selected');
$(function(){
// habilita a submissão do formulário
$('#termos').click(function(){
$('#assinarbtn').removeAttr('disabled');
$('#termos').attr('disabled','');
});
// as funções a seguir preenchem o select com o plano que o usuário clicou
$('#alfa').click(function(){
removeSelecao();
$('#o-alfa').attr('selected','');
});
$('#beta').click(function(){
removeSelecao();
$('#o-beta').attr('selected','');
});
$('#gama').click(function(){
removeSelecao();
$('#o-gama').attr('selected','');
});
$('#delta').click(function(){
removeSelecao();
$('#o-delta').attr('selected','');
});
$('#omega').click(function(){
removeSelecao();
$('#o-omega').attr('selected','');
});
});
</script>
Não pode faltar
Introdução a PHP
Ely Fernando do Prado
Como o PHP é utilizado no desenvolvimento web?
O PHP se incorpora dentro de páginas HTML, que é interpretada no navegador web. O

cliente, usuário final que acessa a página utilizando o navegador, não enxerga o código
PHP, pois este já foi processado no servidor de hospedagem.
Convite ao estudo
Caro aluno, você já observou como a maioria dos sites hoje em dia muda o seu
conteúdo dinamicamente? A estrutura e layout permanecem os mesmos, mas o conteúdo
muda constantemente. Sites como o Facebook, por exemplo, atualizam o seu conteúdo
quase que em tempo real. Plataformas de e-commerce exibem produtos diferentes de
acordo com o histórico de navegação e preferências do usuário. É como se houvesse
páginas HTML sendo criadas o tempo todo, para que a cada acesso elas estivessem
sempre atualizadas para o usuário visualizar novas informações. Na verdade, a “magia”
por trás dessas páginas que são atualizadas constantemente é uma linguagem de
programação capaz de processar e criar páginas dinâmicas a cada acesso, as quais são
processadas do lado do servidor. Dentre as linguagens de programação para esse fim,
uma das mais utilizadas é o PHP, o qual se destaca pela sua facilidade de uso e uma
ampla comunidade de desenvolvedores ativos. Caro aluno, nesta unidade você
aprenderá como criar páginas dinâmicas utilizando a linguagem PHP. Na Seção 1 serão
apresentados os fundamentos de PHP, incluindo os conceitos de variáveis, funções e
estruturas da linguagem, além de apresentar a incorporação do código PHP aos arquivos
HTML. Na Seção 2 são apresentados conceitos mais aprofundados acerca da linguagem
PHP, bem como a manipulação de arquivos, a qual permite o upload, a criação, cópia e
leitura de arquivos no servidor. Por fim, a última seção é dedicada a uma utilização de
banco de dados dentro de aplicações web com PHP, além da utilização de sessões e
cookies para autenticação de usuários.
Páginas dinâmicas para internet são muito mais comuns do que você imagina. O fato de
ser dinâmica significa que o seu conteúdo é alterado e gerado dinamicamente de acordo
com os critérios definidos pelo programador. É assim que sites de e-commerce
conseguem apresentar produtos diferentes a cada acesso, também é assim que sites de
notícias mantêm seu conteúdo sempre atualizado e redes sociais oferecem ao usuário
texto e imagens direcionadas a ele. Para isso, é necessário utilizar uma linguagem de
servidor, como o PHP. Nesta seção será apresentada a linguagem de programação PHP,
desde seus conceitos fundamentais até a sua interação com as páginas web e
formulários. Será abordada a utilização de variáveis, operadores, constantes e funções,
além das expressões e fluxos de controle do PHP. Esses conhecimentos são de suma
importância para desenvolvedores de aplicações web, visto que hoje em dia não há
como pensar no desenvolvimento de um site sem que haja algum conteúdo dinâmico. A
linguagem PHP conta com muitos desenvolvedores no mundo todo, e diversas empresas
estão à procura de profissionais capacitados nessa linguagem para manter e desenvolver
desde pequenos sites até mesmo grandes plataformas para internet. Se há alguma dúvida
quanto à capacidade e robustez da linguagem PHP, basta observar que a maior rede
social do mundo, o Facebook, foi desenvolvida utilizando a linguagem PHP como sua
base principal, sofrendo alterações na sua infraestrutura, porém mantendo sua relação
direta com essa poderosa linguagem de programação. Devido sua popularidade e
facilidade de uso, o PHP se tornou a linguagem de programação com maior número de
servidores de hospedagem ativos ao redor do mundo, e é muito fácil encontrar um
servidor PHP gratuito para hospedar suas aplicações. Dessa forma, vamos aprender com
exemplos práticos como programar páginas web dinâmicas utilizando PHP.

seguinte situação-problema: você foi contratado por um startup e deseja desenvolver um
website capaz de auxiliar as pessoas a decidirem qual é o combustível mais econômico
para abastecer um carro flex, que aceita tanto etanol quanto gasolina. Assim, você
deverá desenvolver uma aplicação PHP no site em que o usuário em questão deverá ser
capaz de inserir as informações a respeito da distância que deseja percorrer, o preço do
litro de etanol e o preço do litro de gasolina.
O site deverá conter uma aplicação PHP que calcula e exibe qual é o valor gasto na
viagem caso abasteça com etanol e o valor gasto caso abasteça com gasolina.
Considerando que o etanol é um combustível que é consumido mais rápido, mas que
normalmente costuma ser mais barato. Considere que o veículo em questão faz 9 km
com 1 litro de etanol e 11 km com 1 litro de gasolina. Portanto para, por exemplo, saber
a quantidade de etanol gasto em uma viagem de 20 km, deve-se efetuar o seguinte
cálculo: etanol = 20/11. E para saber a quantidade de gasolina gasta em uma viagem de
mesma distância deve-se efetuar o seguinte cálculo: 20/9. Após calcular a quantidade
gasta de cada combustível, multiplique essa quantidade pelo preço do litro do
combustível digitado pelo usuário no formulário. Com isso, mostre ao usuário qual dos
tipos de combustível tem melhor custo-benefício.
Una o que há de melhor no design de páginas web com a programação de conteúdos

dinâmicos utilizando PHP. Bons estudos!
conceito-chave
Caro aluno, PHP (um acrônimo recursivo para PHP, Hypertext Preprocessor) é uma
linguagem de script muito utilizada para o desenvolvimento web. Ela é uma linguagem
open source, ou seja, de código aberto, a qual pode ser utilizada de maneira gratuita até
mesmo para a criação de plataformas comerciais.
A primeira versão do PHP foi criada em 1994 por Rasmus Lerdof, o qual liberou o
código fonte para o público em 1995 permitindo uma significativa adoção pela
comunidade de desenvolvedores. Em 1996 foi lançada a versão 2.0 do PHP, incluindo
suporte ao acesso à banco de dados. Em 1998, ainda nos primórdios da internet, já havia
mais de 60 mil sites utilizando a linguagem PHP, e no final deste mesmo ano foi
lançada a versão 3.0 da linguagem totalmente reescrita e aprimorada. No ano de 2000
foi lançada a versão 4.0 do PHP, ganhando ainda mais apoio da comunidade e
aumentando o número de servidores espalhados pelo mundo. A versão 5.0 foi
disponibilizada no ano de 2004, alcançando a marca de centenas de milhões de
servidores hospedando páginas PHP. A versão 5.x do PHP foi tão popular que se
manteve ativa até o ano de 2019, recebendo diversas atualizações. Sua principal
novidade foi ao suporte aprimorado ao paradigma de Programação Orientada a Objetos.
Por se tratar de um software de código aberto, a comunidade de desenvolvedores foi
incrementando a linguagem ao longo do tempo, e todas as features (recursos)
planejados para o PHP 6.0 acabaram sendo implementados nas ramificações da versão
5.x, chegando ao ponto que não faria mais sentido lançar uma versão 6.0. Portanto, em
2015, a linguagem PHP teve um salto, passando para a versão 7.0 que é mantida até os
dias atuais com suas ramificações 7.x.
O que chama a atenção no PHP é o fato de ser processado do lado do servidor, ou seja,
o cliente (usuário final que deve acessar a página utilizando o navegador) não consegue
enxergar o código PHP, pois este já foi processado no servidor de hospedagem,
diferentemente da linguagem JavaScript, que é interpretada no navegador o usuário.
Na Figura 4.1 a seguir podemos visualizar o funcionamento da Linguagem PHP:
Figura 4.1 | Processo da Linguagem PHP

Como incorporar um PHP em uma página HTML
O código PHP fica dentro da página HTML, podendo em um mesmo arquivo intercalar
entre os código HTML, CSS e JavaScript e o código PHP. Para que isso ocorra é
importante demarcar quando o código PHP inicia e quando ele finaliza. Essa marcação é
dada por meio das TAGs “<php" para abertura do código php e "?>" para fechamento,
conforme este exemplo:
<?php echo “Olá mundo”; ?>
Neste caso foi utilizado o comando “echo”, que é responsável por imprimir um texto
diretamente na página html. A forma apresentada é a padrão e mais utilizada de se
incorporar código PHP dentro do HTML, porém existem outras formas, sendo que
algumas delas dependem da sua configuração e ativação no servidor para que
funcionem. As outras formas de se incorporar código PHP ao HTML são as seguintes:
 <? echo “Olá mundo”; ?>

 <script language="php"> echo “Olá mundo”; </script>
 <% echo “Olá mundo”; %>
No Código 4.1 a seguir é apresentado um exemplo de código PHP. Observe o código

PHP nas linhas 10 a 16 e o código HTML, que chamamos de conteúdo estático. Neste
exemplo o usuário que acessar a página receberá como resultado apenas o código
HTML, conforme mostrado no Código 4.2.
Código 4.1 | Exemplo de código PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1>
Meu primeiro site PHP
</h1>
<?php
echo "<p>Olá, mundo!</p>";
?>
<?php
echo "<ul><li>Você pode utilizar tags html,</li>";
echo "<li>Vamos aprender PHP?</li></ul>";
?>
</body>
</html>
Código 4.2 | Resultado do código HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1>
Meu primeiro site PHP
</h1>
<p>Olá, mundo!</p>
<ul><li>Você pode utilizar tags html,</li>
<li>Vamos aprender PHP?</li></ul>
</body>
</html>
Exemplificando
Agora, você pode testar o código na ferramenta on-line Paiza.io.
Paiza.io é uma IDE (Ambiente de Desenvolvimento Integrado) on-line; logo, não há

necessidade de instalar nada no computador. Essa plataforma oferece suporte para mais
de 20 linguagens de programação, incluindo o PHP. A interface do Paiza.io é
apresentada na Figura 4.2. Observe que o ambiente de desenvolvimento Paiza.io
permite exibir o resultado em modo Texto, em HTML ou JSON. Observe o exemplo do
Código 4.1, configurado para a visualização em html.
Figura 4.2 | IDE on-line Paiza.io
Fonte: captura de tela do Paiza.io elaborada pelo autor.
Observe o código .php dentro do arquivo .html.

Copie o código do Código 4.1 e cole na ferramenta Paiza.io
https://paiza.io/en/projects/new?language=php, inclua a visualização HTML e observe a
saída.
Assim, podemos observar que o código PHP foi processado do lado do servidor,
transferindo para o cliente apenas o resultado desse processamento. Para executar
páginas PHP você precisa de um servidor. Existem milhares de servidores na internet
compatíveis com PHP, alguns deles são 000webhost (2021) e Hostinger (2021), entre
outros. Também existem plataformas em nuvem que oferecem serviço de hospedagem
de aplicações PHP, como Amazon (2021), Google Cloud (2021) e Microsoft Azure
(2021). Existe ainda a possibilidade de instalar um servidor PHP no seu próprio
computador e ter a facilidade de testar suas páginas sem precisar de internet. Se você
utiliza Windows pode instalar o WampServer ([s. d.]), um pacote que inclui o Apache,
MariaDB e PHP para Windows. Outra opção de pacote de instalação gratuita e
facilitada de servidor local PHP é o BitNami WAMPStack (2021). São tantas opções
que é natural, no início, haver dúvidas a respeito de qual servidor usar.
Para aprender uma linguagem de programação é importante que você entenda sua
sintaxe. É importante também adicionar comentários nos seus códigos para facilitar a
compreensão futura. Para adicionar comentário de uma linha com PHP você pode
utilizar os símbolos // ou # no início da linha, ou pode fazer comentários em bloco
adicionando o símbolo /* para abrir o comentário e */ para finalizar o comentário.
Sintaxe e Variáveis em PHP
A utilização de variáveis é algo fundamental em toda linguagem de programação. PHP é

uma linguagem que não define tipos para suas variáveis, bastando colocar o sinal de
cifrão ($) antes do nome da variável. Observe que no código apresentado no Código 4.3
são utilizadas duas variáveis, uma capaz de armazenar texto e outra capaz de armazenar
número. O texto deve ser envolto em aspas, que podem
Código 4.3 | Declaração da sintaxe e variável em PHP
<?php
//declara variável texto
$nome = "Bill Gates";
//declara variável numérica
$idade = 64;
//imprime o conteúdo da variável $nome
echo $nome;
//imprime um texto (entre aspas) contendo uma TAG HTML
echo "<br/>";
//imprime o conteúdo da variável $idade
echo $idade;
?>
Execute esse código no Paiza.io e veja o resultado.
Copie o Código 4.3 e cole na ferramenta Paiza.io https://paiza.io/en/projects/new?

language=php, inclua a visualização HTML e observe a saída.
PHP é uma linguagem case sensitive, ou seja, faz diferenciação entre letras maiúsculas e
minúsculas. Portanto, uma variável com o nome $telefone é diferente da variável
$Telefone. Para trabalhar com os nomes de variáveis, você precisa ainda respeitar as
seguintes regras:
 Nunca inicie por um número.

 Não utilize caracteres especiais (apenas letras não acentuadas, números e
underscore _).
 Não utilize espaços em branco. Se precisar colocar duas ou mais palavras,
separe-as com letras maiúsculas ($valorProduto, $telefoneContato) ou com
underscore ($valor_produto, $telefone_contato).
 Crie nomes de variáveis significativas, que indiquem o conteúdo armazenado.
Uma característica interessante do PHP é o fato de que se pode utilizar tanto aspas
simples como aspas duplas para demarcar textos. Porém, quando se usa aspas duplas,
caso exista alguma variável dentro do texto, é impresso o valor desta variável. Já
quando se usa aspas simples, é impresso exatamente o valor literal dentro das aspas,
incluindo o nome da variável. É possível ainda concatenar um texto, imprimindo uma
sequência de caracteres concatenada a uma variável por meio do símbolo de ponto final.
Ao contrário de variáveis, que podem variar o seu valor, existem as constantes, que não
podem ter seu valor alterado. As constantes são declaradas pelo comando define, úteis
para guardar valores fixos, com o valor de PI. No Código 4.4 a seguir é apresentado um
exemplo de utilização de variáveis e constantes:
Código 4.4 | Declaração da sintaxe e variável em PHP
<?php
//declara variável
$nome = "Ada Lovelace";
echo "Olá $nome!"; // Olá Ada Lovelace
echo 'Olá, $nome!'; // Olá, $nome!

echo "Olá, ".$nome; // Olá Ada Lovelace
echo "Olá," . " mundo!"; //Olá, mundo!
//declara a constante PI
define("PI", 3.141592654);
echo PI;
?>
Um tipo de recurso importante em uma linguagem de programação são as variáveis

compostas, ou arrays. Nesse tipo de variável é possível armazenar um conjunto de
valores, os quais são identificados por um índice. Na maioria das linguagens de
programação o índice de um array é definido por um número inteiro, porém no PHP
pode-se utilizar números ou caracteres para identificar um elemento de um vetor,
conforme o exemplo mostrado no Código 4.5 a seguir:
Código 4.5 | Declaração de um array
<?php
//declarando array com índice numérico
$array1 = array(10, 15, 20, 30, 12);
echo $array1[0]; //imprime a 1a posição do array: 10
echo "<br/>";
echo $array1[3]; //imprime a 4a posição do array: 30
echo "<br/>";
//declarando array indicando a chave de índice
$array2 = ["nome" => "Alan Turing", "idade" => 41];
echo "Nome: " . $array2["nome"];
echo "<br/>";
echo "Idade: " . $array2["idade"];
?>
Muitos dos problemas solucionados pela programação envolvem cálculos matemáticos.

Em PHP é possível realizar cálculos utilizando os seguintes operadores:
 Adição: +
 Subtração: -
 Multiplicação: *
 Divisão: /
 Módulo (resto da divisão): %
Como exemplo, considere que uma loja dá 10% de desconto para vendas à vista, e que
se deseja calcular o valor total de uma compra, o valor de desconto e o valor de troco.
No código PHP apresentado no Código 4.6 a seguir, esse cálculo é realizado com base
nos dados do valor unitário, a quantidade e o valor pago por um produto qualquer.
Código 4.6 | Declaração de variáveis e cálculos
<?php
//declara as variáveis
$valorUnitario = 10.50;
$quantidade = 3;
//calcula o valor total do produto
$valorTotal = $valorUnitario * $quantidade;
//calcula o valor de desconto (10% do valor total)
$valorDesconto = $valorTotal * 10 / 100;
//declara a variável contendo o valor pago
$valorPago = 100;
//calcula o valor do troco. Note a importância do uso dos parênteses
$valorTroco = $valorPago - ($valorTotal - $valorDesconto);
//imprime os resultados para o usuário
echo "<br/>Valor Total: " . $valorTotal;
echo "<br/>Valor de Desconto: " . $valorDesconto;
echo "<br/>Valor do Troco: " . $valorTroco;
?>
Assimile
Trabalhar com linguagens de programação para internet não é algo tão simples quando
se trata de operações mais complexas. Nós exemplificamos uma situação em que o
usuário deseja saber o preço final do produto, valor do desconto e valor do troco.
Porém, no exemplo que foi dado, nós colocamos os valores fixos nas variáveis. Para
permitir que o usuário digite os dados de entrada é necessário que você crie duas
páginas, uma para o formulário e outra para resposta. O formulário é a principal forma
para permitir a entrada de dados pelo usuário, e é formada pela TAG HTML “<form>”
seguido por dois atributos:
 action: determina o nome do arquivo php que receberá os dados digitados pelo
usuário.
 method: determina o método de envio e pode ser “post” ou “get”. O método
‘get’ expõe os dados digitados pelo usuário na barra de endereços do navegador.
O método ‘post’, por sua vez, envia os dados no corpo da requisição HTTP, não
exibindo os dados enviados na barra de endereços.
Para permitir que o usuário entre com dados é necessário criar dentro do formulário
elementos do tipo “input”. Esses elementos apresentam o atributo “name”, que faz a
identificação do campo para envio dos dados e o atributo “type”, que define o tipo de
entrada, podendo ser do tipo “text” para entrada de texto, “radio” para escolha de um
valor ou “checkbox“ para selecionar um valor, e “submit”, que faz um botão capaz de
enviar os dados digitados para o servidor, redirecionando para página definida no
elemento “action”. Observe o código HTML apresentado no Código 4.7, que contém
um formulário em que o usuário pode digitar o valor unitário de um produto, a
quantidade e o valor pago:
Código 4.7 | Declaração em formulários
<html>
<body>
Formulário:
<form action="resposta.php" method="post">
Valor Unitário:
<input type="text" name="valorUnitario"/>
<br/>Quantidade:
<input type="text" name="quantidade"/>

<br/>Valor Pago:
<input type="text" name="valorPago"/>
<br/><input type="submit" value="ok"/>
</form>
</body>
</html>
Nesse formulário é importante observar que há um parâmetro action para a página

“resposta.php”, a qual enviará os dados via método “post” para que estes dados sejam
tratados. Nesse tipo de envio de dados, os valores são enviados para o vetor $_POST. O
Código 4.8 apresenta o código da página “resposta.php”, a qual é capaz de calcular o
valor total do produto multiplicando a quantidade pelo valor unitário digitado pelo
usuário. Após essa operação é realizado o cálculo de 10% referente ao valor de
desconto. Por fim é calculado o valor de troco, subtraindo o valor pago (digitado pelo
usuário) pelo valor total menos o valor de desconto (Código 4.8).
Código 4.8 | Arquivo resposta.php
<?php
//página de resposta
//calcula o valor total
$valorTotal = $_POST["valorUnitario"] * $_POST["quantidade"];
//calcula o valor de desconto
$valorDesconto = $valorTotal * 10 / 100;
//calcula o valor de troco
$valorTroco = $_POST["valorPago"] - ($valorTotal - $valorDesconto);
echo "<br/>Valor Total: " . $valorTotal;
echo "<br/>Valor de Desconto: " . $valorDesconto;
echo "<br/>Valor do Troco: " . $valorTroco;
?>

Na Figura 4.3 podemos observar a execução do código apresentado na plataforma
PaizaCloud (c2014).
Figura 4.3 | Exemplo de Formulário
Note que o método do formulário é do tipo “post”. Este tipo de método encapsula os
dados que são enviados para a outra página, não os mostrando no endereço da página de
resposta, e os seus valores são enviados para o PHP por meio do array
$_POST[“nome_do_input”]. Dessa forma, o valor total é obtido pela multiplicação dos
atributos $_POST[“valorUnitario”] e $_POST[“quantidade”].
Estruturas condicionais e seus operadores em PHP
Existem situações em que é necessário tomar decisões dentro do algoritmo, permitindo

que ele execute um bloco de instruções caso atenda a uma determinada condição. Nesse
caso utilizamos uma estrutura condicional, a qual pode ser definida na linguagem PHP
com a instrução IF. É possível ainda executar um bloco de instruções caso a sentença
seja falsa, adicionando esses comandos na cláusula ELSE. Para utilizar uma estrutura
condicional é necessário conhecer os operadores relacionais. Em PHP podem ser
utilizados os seguintes:
 Igual: ==
 Diferente: != ou <>
 Menor que: <
 Maior que: >
 Menor ou igual que: <=
 Maior ou igual que: >=
Pode-se ainda utilizar os operadores lógicos para combinar condições, como o operador
E (&& ou and) que é verdadeira apenas se as duas condições forem verdadeiras, e o
operador OU (|| ou or), que retorna verdadeiro caso uma das condições forem
verdadeiras. No Código 4.9 a seguir pode-se observar a utilização da estrutura
condicional e seus operadores. No exemplo foram declaradas as variáveis nota = 7 e
faltas =30.
Código 4.9 | Estruturas condicionais e seus operadores em PHP
<?php
//declara as variáveis $nota e $faltas
$nota = 7;
$faltas = 30;
//estrutura condicional. O símbolo && significa “E”
if ($nota>=6 && $faltas < 20) {
//caso a nota for maior ou igual a 6 e tiver menos de 20 faltas
echo "aprovado";
} else {
//caso contrário ele irá imprimir a palavra “reprovado”
//como a variável $faltas possui um valor maior que 20, ele irá
//imprimir este resultado da cláusula else.
echo "reprovado";
?>

Modifique os valores declarados para faltas = 20.
Estruturas de repetição em PHP

Estruturas de repetição são muito úteis quando se deseja repetir um bloco de instruções.
Basicamente, esse tipo de estrutura pode ser de dois tipos:
 While: permite a repetição de uma instrução enquanto uma condição for

verdadeira
 For: executa um número predeterminado de repetições, utilizando um índice
para contar os loops. Nessa estrutura são passadas três operações separadas por
ponto e vírgula: início, condição de término e critério de incremento. Observe o
exemplo apresentado no Código 4.10 a seguir, onde é realizada uma estrutura de
repetição em que é impressa a tabuada do número 7, mostrando o resultado da
multiplicação de 7 pelos números de 1 a 10. No Código 4.11 é demonstrada uma
estrutura de repetição que mostra todos os números ímpares de 1 a 49.
Código 4.10 | Estruturas de repetição em PHP
<?php
//mostra a tabuada de 7
$num = 7;
//estrutura de repetição
//que executa de 1 à 10.
for($i = 1; $i <= 10; $i++){
//calcula e mostra o resultado da
//multiplicação de 7 com os //números de 1 à 10
$r = $i * $num;
echo “$i x $num = $r <br/>”;
?>
Código 4.11 | Estruturas de repetição em PHP
<?php
//mostra os números ímpares
$num = 1;
//estrutura de repetição
//que executa enquanto a
//variável for menor que 50
while($num < 50 ) {
//soma +2 na variável $num
$num = $num + 2;
echo "$num <br/>";
?>
Reflita
PHP é uma linguagem que teve grande evolução ao longo dos anos, com a adição de
várias funcionalidades e recursos. Neste material foram apresentadas as seguintes
estruturas do código PHP: if, while e for. Mas existem outras estruturas que podem ser
utilizadas para determinar condições ou repetições?
Atenção
Até o momento, todos os códigos foram executados em uma única página pela
plataforma Paiza.io. Porém, há casos em que desejamos executar uma aplicação web
mais complexa, formada por várias páginas. Para isso, pode-se utilizar a plataforma
PaizaCloud (c2014), a qual fornece um ambiente mais completo e robusto. Conta com
uma licença gratuita e o seu servidor pode ser utilizado por um tempo limitado a 4
horas.
Entrada de dados
Reflita
A entrada de dados por parte do usuário se dá por elementos HTML do tipo INPUT.
Utilizamos o tipo dos inputs como TEXT. Será que existem outros tipos que inputs que
podem ser utilizados com html?
Observe na Figura 4.4 que foram criados dois arquivos, um para formulário e outro para
o processamento e exibição dos dados. Formulários que utilizam o método “get” enviam
seus dados para o array do PHP $_GET[“nome_do_input”], enquanto formulários que
utilizam o método “post” enviam seus dados para o array
Text$_POST[“nome_do_input”]. Nesse exemplo é importante relembrar que o
formulário html é composto pela TAG , <form action=”segunda.php”
method=”get"> em que o parâmetro “action” determina a página que deverá receber e
processar os dados digitados pelo usuário, enquanto o parâmetro “method” determina a
forma como esses dados serão enviados, podendo ser “get” ou “post”. No Código 4.8 é
mostrado um exemplo utilizando a tag <input>, , ao inserir os parâmetros type=”text”,
indica que será adicionado um elemento de caixa de texto para entrada de dados, e o
parâmetro type=”submit” indica que será adicionado um botão capaz de executar a ação
do formulário, submetendo os dados digitados pelo usuário para a página indicada no
parâmetro “action” do formulário, conforme pode ser observado no Código 4.12 a
seguir:
Código 4.12 | Formulários em HTML
<html>
<body>
<form action="segunda.php" method="get">
Nome:
<input type="text" name="nome"/>
<br/>Idade:
<input type="text" name="idade"/>
<br/><input type="submit" value="ok/>
</form>
</body>
</html>
Após o usuário submeter os dados, a página chamada “segunda.php” receberá os dados

por meio de um vetor $_GET, o qual deve-se colocar entre colchetes o nome do
elemento input desejado, conforme pode ser observado no código apresentado no
Código 4.13.
Código 4.13 | Submissão de dados em PHP
<html>
<body>
<?php
echo "olá " . $_GET["nome"];
echo "Você tem " . $_GET["idade"] . " anos";

?>
</body>
</html>
Figura 4.4 | Exemplo de Formulário no PaizaCloud
Fonte: captura de tela do PaizaCloud elaborada pelo autor.

Exemplificando
Linguagens de programação têm a capacidade de automatizar tarefas e cálculos que

seriam dispendiosos se realizados manualmente. Considere o seguinte problema: uma
nutricionista deseja criar um site em que seus pacientes possam inserir os dados de
altura e peso, e o sistema mostrará ao usuário se ele está abaixo do peso (IMC<18,5),
com peso normal (IMC entre 18,5 e 24,9) ou com sobrepeso (IMC maior ou igual a 25).
O IMC é calculado com a seguinte equação: IMC = peso / (altura * altura). Nesse caso,
teríamos que construir duas páginas no ambiente paiza.cloud, uma para o formulário de
entrada de dados e outra para calcular e exibir o resultado. O Código 4.14 mostra o
código para solucionar esse problema. Primeiramente segue o código HTML capaz de
permitir o usuário digitar em um formulário a sua altura e o peso. Observe que o método
de envio é do tipo “post”, de forma que os dados não serão exibidos explicitamente na
barra de endereços do navegador; mas poderia ser utilizado o método “get” sem nenhum
problema:
Código 4.14 | Código .html - Nutricionista on-line

<html>
<body>
<h1>Nutricionista Online</h1>
Altura:
<input type="text" name="altura"/>
<br/>Peso:
<input type="text" name="peso"/>
</form>
</body>
</html>
A página de resposta é capaz de processar os dados enviados pelo usuário. Observe o

código e seus devidos comentários:
Código 4.15 | Código .php - Nutricionista on-line
<?php
/* declara uma variável chamada $imc, a qual receber o peso dividido pela altura *
altura digitados pelo usuário no formulário anterior */
$imc = $_POST["peso"] / ($_POST["altura"] * $_POST["altura"]);
//imprime o código HTML mostrando o valor da variável $imc
echo "O seu IMC é $imc<br/>";
/*faz uma estrutura condicional em que determina o estado do imc de acordo com as
regras apresentadas no enunciado*/
if ($imc<18.5) {
echo "você está abaixo do peso";
} else if ($imc>=18.5 && $imc <=24.9) {
echo "Você está com peso normal";

} else {
echo "Você está com sobrepeso";
?>
Figura 4.5 | Exemplo de calculadora de IMC
Saiba mais
As instruções de programação PHP são inseridas dentro dos arquivos HTML, podendo
conter, além de código HTML puro e simples, um conjunto de instruções CSS e de
JavaScript. Essa mistura de linguagens pode parecer confusa para quem não está
ambientado, portanto justifica-se treinar um pouco essa mescla de tecnologias e deixar
bem claro o que cada uma faz. No exemplo a seguir, em um mesmo arquivo são
utilizados trechos de código HTML, CSS, JavaScript e PHP:
Código 4.16 | Código PHP dentro do HTML
<html>
<head>
<title>
Exemplo
</title>
<style>
body {
background-color: lightblue;
h1 {
color: darkgreen;
text-align: center;
</style>
</head>
<body>
<h1>Exemplo de HTML</h1>
<?php
echo "Código PHP";
?>
<script>
alert("Código Javascript");
</script>
</body>
</html>

Pesquise mais
No artigo indicado a seguir são apresentadas as principais novidades na linguagem PHP

7.0, além de um breve histórico sobre as principais características e particularidades
dessa linguagem.
ROTERMEL, F.; SOMMARIVA, L. W. Inovações advindas na nova versão da

linguagem de programação web PHP 7.0. Revista Interdisciplinar Científica
Aplicada, v. 10, n. 4, p. 1-20, 2016.
Nesta seção, foram apresentados os conceitos fundamentais da linguagem PHP, a

utilização de variáveis, operadores aritméticos, estruturas condicionais e de repetição.
Também vimos como o PHP se incorpora dentro de páginas HTML, gerando conteúdo
dinamicamente. Dessa forma será exibido ao usuário um conteúdo personalizado de
acordo com as entradas que ele mesmo fizer utilizando formulários. Nas próximas
seções, serão explorados esses e outros recursos do PHP, essa incrível linguagem de
programação!
Referências
000WEBHOST. Página inicial. 000webhost, 2021. Disponível em:

https://br.000webhost.com/. Acesso em: 28 fev. 2021.
AWS. Comece a criar com a AWS ainda hoje. Amazon, 2021. Disponível em:
https://aws.amazon.com/. Acesso em: 28 fev. 2021.
BABIN, L. Ajax com PHP: do iniciante ao profissional: crie poderosos aplicativos web
interativos utilizando a força de Ajax e PHP. Rio de Janeiro: Alta Books, 2007. 208 p.
ISBN 9788576081463.
BITNAMI. WAMP. Bitnami, 2021. Disponível em: https://bitnami.com/stack/wamp,

GOOGLE CLOUD. Página inicial. Google Cloud, 2021. Disponível em:

https://cloud.google.com/. Acesso em: 28 fev. 2021.
HOSTINGER. Página inicial. Hostinger, 2021. Disponível em:

https://www.hostinger.pt/. Acesso em: 28 fev. 2021.
MICROSOFT AZURE. Página inicial. Microsoft, 2021. Disponível em:

https://bit.ly/2Oo6ZpA. Acesso em: 28 fev. 2021.
MILANI, A. Construindo aplicações web com PHP e MySQL. São Paulo: Novatec,
2010. 336 p. ISBN 9788575222195.
PAIZA CLOUD. Página inicial. Paiza Inc, c2014. Disponível em:

https://paiza.cloud/. Acesso em: 28 fev. 2021.
ROTERMEL, F.; SOMMARIVA, L. W. Inovações advindas na nova versão da
linguagem de programação web PHP 7.0. Revista Interdisciplinar Científica
Aplicada, v. 10, n. 4, p. 1-20, 2016.
THE PHP GROUP. História do PHP. PHP, 2020. Disponível em:

https://bit.ly/38vUxLA. Acesso em: 18 set. 2020.
WAMPSERVER. Página inicial. WampServer, [s. d.]. Disponível em:

https://bit.ly/3emx3fA. Acesso em: 28 fev. 2021.
ZERVAAS, Q.; LIMA, E. C.; KINOSHITA, L. Aplicações práticas de web 2.0 com
PHP. Rio de Janeiro: Alta Books, 2009. 521 p. ISBN 9788576083269.
INTRODUÇÃO A PHP
Aplicação PHP em páginas web
Para a codificação de uma aplicação em páginas web é importante identificar quais são
as entradas (dados que o usuário deverá inserir), quais são as saídas (resultados
esperados) e quais são os valores internos que serão utilizados para produzir as saídas
com base nas entradas.
sem medo de errar
obtidos até este momento, vamos retomar a situação-problema apresentada no início
desta seção. Uma empresa deseja desenvolver um sistema web para facilitar a decisão
em relação ao tipo de combustível cujo uso é mais compensatório: etanol ou gasolina.
Sempre que forem apresentados problemas dessa natureza é importante identificar quais
são as entradas (dados que o usuário deverá inserir), quais são as saídas (resultados
esperados) e quais são os valores internos que serão utilizados para produzir as saídas
com base nas entradas. Nesse caso podemos identificar os seguintes elementos:
Entradas: distância a ser percorrida, preço do etanol e preço da gasolina.

Saídas: valor gasto com etanol, valor gasto com gasolina e qual é o combustível que
fica mais barato.
Valores internos: o veículo faz 9 km/litro de etanol e 11 km/litro de gasolina.
Depois de identificar esses elementos fica mais fácil codificar o seu site. Observe o
código do formulário para entrada de dados:
Código 4.17 | Código para entrada de dados
<html>
<body>
<h1>Combustível</h1>
<form action="respost.php" method="post">
Distância:
<input type="text" name="distancia"/>
<br/>Preço etanol:
<input type="text" name="precoEtanol"/>
<br/>Preço gasolina:
<input type="text" name="precoGasolina"/>
</form>
</body>
</html>
Para processar os dados deve-se primeiramente ler os dados enviados pelo formulário
com o vetor $_POST. Em seguida, deve-se efetuar os cálculos para saber a quantidade
de combustível gasto e depois a multiplicação pelo valor de cada combustível, conforme
mostrado a seguir:
Código 4.18 | Código para o processamento dos dados apresentados
<?php
$distancia = $_POST["distancia"];
$precoEtanol = $_POST["precoEtanol"];
$precoGasolina = $_POST["precoGasolina"];
$gastoEtanol = $distancia / 9 * $precoEtanol;
$gastoGasolina = $distancia / 11 * $precoGasolina;
echo "O valor gasto com etanol é $gastoEtanol <br/>";
echo "O valor gasto com gasolina é $gastoGasolina <br/>";
if ($gastoEtanol<$gastoGasolina) {
echo "Abasteça com Etanol";
} else {
echo "Abasteça com Gasolina";
?>
Como esse exercício necessita de dois arquivos de código PHP trabalhando em conjunto
(um para o formulário e outro para processar a resposta), deve-se executá-lo em um
servidor configurado no computador ou, então, na plataforma on-line PaizaCloud
(c2014), conforme mostrado na Figura 4.6.
Figura 4.6 | Calculadora de combustível

Não pode faltar
Funções e manipulação de arquivos em

PHP
Qual a importância das funções?
As funções são importantes para deixar o código mais limpo e organizado, além de
facilitar na manutenção futura do código e sua reutilização.
Você já deve ter percebido o quanto a linguagem PHP é rica e oferece recursos para
desenvolvimento de aplicações web complexas. Mas algo que ainda não foi explorado é
a quantidade de funções que o PHP oferece, as quais são extremamente úteis para
oferecer ao desenvolvedor atalhos para diversas funcionalidades. Em vez de o
programador ter que codificar do zero tudo o que ele precisa, ele pode utilizar funções
prontas que facilitam o desenvolvimento e deixam o código mais limpo. Formatar as
casas decimais de um número, substituir uma parte de um texto e verificar se uma data é
válida são exemplos de funções oferecidas pela linguagem PHP, as quais serão
apresentadas juntamente com muitas outras nesta seção. Contudo, muitas vezes é
necessário criar nossas próprias funções, e isso também será apresentado e
exemplificado de forma que você será capaz de deixar seu código muito mais
organizado. Por fim, outro recurso importante tratado nesta seção é a manipulação de
arquivos, a qual permite que você possa armazenar e ler dados do servidor. Considere,
por exemplo, um site de notícias em que há uma área administrativa para os repórteres
postarem conteúdo. Nesse caso, as notícias podem ser armazenadas em arquivos para
que os visitantes do site possam acessar dinamicamente. Outro exemplo são sites de
fórum, em que usuários podem criar tópicos e postar textos, necessitando que esses
textos sejam salvos e posteriormente exibidos de alguma maneira. A maioria dos sites
que acessamos hoje em dia costumam salvar ou ler dados, os quais podem ser realizados
por meio de arquivos.

seguinte situação-problema: na startup em que você trabalha solicitaram o
desenvolvimento de uma página capaz de auxiliar o usuário a decidir qual o melhor
combustível para ele abastecer, considerando o preço do litro da gasolina e do etanol,
além de efetuar cálculos levando em consideração o consumo do veículo (9 km/litro de
etanol e 11 km/litro de gasolina) e a distância a ser percorrida. Acontece que essa
startup começou a ter um número significativo de acessos e muitos usuários estão
pedindo para que o site mostre um relatório contendo o histórico de preço da gasolina e
do etanol, já que esses dados estão sendo inseridos pelos usuários frequentemente.
Também disseram que os valores deveriam ser formatados com duas casas decimais.
Para isso, você terá que armazenar todos os dados inseridos pelos usuários em um
arquivo e, posteriormente, terá que desenvolver uma página que mostre esse relatório
contendo a data, o valor da gasolina e o valor do etanol. Portanto, para resolver essa
situação-problema, você terá que desenvolver uma aplicação web com os seguintes
requisitos:
 Formulário HTML em que o usuário digitará o preço da gasolina, o preço do

etanol e a distância a ser percorrida.
 Página PHP capaz de receber os dados digitados pelo usuário e calcular o valor
gasto de etanol e de gasolina, levando em consideração o consumo de cada um
desses combustíveis. Os valores deverão ser exibidos formatados com duas
casas decimais. Nessa mesma página deverão ser salvos em um arquivo a data
atual, o preço da gasolina e o preço do etanol. O arquivo deverá ser salvo no
modo “a”, que indica que o novo conteúdo será adicionado ao conteúdo atual do
arquivo.
 Página PHP capaz de abrir o arquivo em que foram salvos os dados para leitura,
e deverão ser salvos todos os dados salvos nesse arquivo.
Vamos nos aprofundar ainda mais no mundo do desenvolvimento de aplicações web

com PHP. Bons estudos!
conceito-chave
A programação de páginas PHP pode incluir desafios na construção do algoritmo, pois

envolve uma complexidade no código para satisfazer à lógica desejada. Nesse sentido, é
importante organizar o código de forma que o problema seja dividido em partes, as
quais chamamos de funções.
Funções
Uma função pode ser definida simplesmente como um bloco de código que pode ser
executado em diversas partes do seu sistema. Caso o algoritmo apresente partes
repetitivas no código, é interessante que se crie uma função, evitando, assim, a
duplicidade desse código. Essa técnica é a principal para se fazer a reutilização de
código, o que torna o seu sistema mais organizado, com código mais limpo e mais fácil
de se dar manutenção.
Criando uma função
É possível criar suas próprias funções no PHP definindo o seu nome logo após a palavra
reservada function, além de definir os seus parâmetros e seu valor de retorno. Para o
nome de uma função, você deve seguir as mesmas regras das definições de nomes para
variáveis:
 Nunca iniciar por um número.

 Não utilizar caracteres especiais (apenas letras não acentuadas, números e
underscore _).
 Não utilizar espaços em branco.
 Criar nomes de funções significativas.
A declaração de uma função pode ser realizada conforme o Código 4.18 a seguir:
Código 4.18 | Funções em PHP
<?php
function nome_funcao() {
//bloco de código da função
?>
Logo após definir o nome da função, inserimos os argumentos de parâmetros. Esses

parâmetros são variáveis que deverão obrigatoriamente ter seu valor passado ao invocar
sua função, e esses valores podem ser utilizados dentro do bloco de código da função.
Os parâmetros devem ser separados por vírgulas, tanto na declaração da função quanto
no momento de executar essa função. No Código 4.19 a seguir podemos observar uma
função que recebe dois números, calcula e exibe a média entre esses números. Logo
após a definição da função, observe que ela é executada três vezes, permitindo, assim, o
reúso do bloco de código da função em questão.
Código 4.19 | Funções em PHP

<?php
//define a função chamada media com 2 parâmetros
function media($num1, $num2) {
//calcula a média entre os 2 números recebidos
$m = ($num1 + $num2) / 2;
//mostra a média
echo $m;
//imprime um código HTML para quebra de linha
echo "<br/>";
//calcula a média entre 7 e 10 = 8.5
media(7,10);
//calcula a média entre 3 e 5 = 4
media(3,5);
//calcula a média entre 9 e 7 = 8
media(9,7);
?>

As funções ainda podem apresentar um valor de retorno, o qual poderá ser utilizado no
código principal do seu sistema. O retorno de uma função é definido pela palavra
reservada return, que ao ser executada encerra o bloco de código da função e leva o
resultado de retorno para o fluxo principal do seu código. No Código 4.20, observe que
a função calcular_media tem como retorno o resultado do cálculo da média entre dois
números e que logo em seguida esse resultado é passada para a função
mostrar_resultado, a qual exibe o resultado, mas não apresenta retorno algum.
Primeiramente observe o código que cria a função calcular_media, a qual recebe os
valores por parâmetro das variáveis $num1 e $num2:
Código 4.20 | Função calcula média em PHP

<?php
//define a função para calcular média
function calcular_media($num1, $num2) {
$m = ($num1 + $num2) / 2;
//retorna o resultado da média
return $m;
}>
Agora observe, no Código 4.21, a declaração da função mostrar_resultado, a qual recebe

o valor da variável média por parâmetro e faz uma estrutura condicional para imprimir
se o aluno está aprovado ou reprovado:
Código 4.21 | Função calcula média em PHP
//define a função para calcular média
function mostrar_resultado($media) {
if ($media>=6) {
echo "aprovado";
} else {
echo "reprovado";
}>
Por fim, no mesmo arquivo em que foram declaradas as funções é feita a execução
delas. Veja que a variável $media recebe o resultado da função calcular_media, e que
essa função recebe os valores 7 e 10. Depois disso, é executada a função
mostrar_resultado, passando essa média como parâmetro. Observe o exemplo no
Código 4.22.
Código 4.22| Função mostrar resultado no cálculo da média em PHP

//executa a função para calcular média e salva
//o seu retorno em uma variável chama $media
$media = calcular_media(7,10);
//executa a função para mostrar o resultado
mostrar_resultado($media);
?>
Funções específicas
Além das estruturas básicas que toda linguagem de programação apresenta, existem
funções prontas e específicas que facilitam a vida dos desenvolvedores. Essas funções
costumam prover um conjunto de recursos que até poderiam ser programados
manualmente, mas que reduzem a quantidade de linhas de código porque já estão
prontas para o uso.
Um exemplo de funções prontas são as relacionadas às validações para datas. Pense se

você tivesse que fazer a validação de datas, com a preocupação de a data se referir a um
ano bissexto; quantos dias tem aquele mês. Trabalhar com regras e cálculos envolvendo
datas geralmente é algo que envolve um conjunto complexo de verificações. Portanto, a
linguagem PHP oferece várias funções prontas que facilitam essas tarefas, como a
função checkdate, capaz de validar se uma data é verdadeira ou não. Toda função pode
ter argumentos de parâmetros que são passados para a função dentro de parênteses logo
após o seu nome e ela pode apresentar também um valor de retorno. No exemplo da
função checkdate, ela tem três argumentos: mês, dia e ano, e retorna um valor booleano:
verdadeiro, caso a data seja válida, ou falsa, caso seja uma data inválida. Dessa forma é
possível, por exemplo, dizer ao usuário que a data 31/02/2020 é uma data inválida. O
Código 4.23 apresenta um exemplo de uso dessa função:
Código 4.23 | Função predefinida checkdate
<?php
//declara variáveis
$dia = 31;
$mes = 02;
$ano = 2020;
//verifica se a data é válida ou não

if (checkdate($mes,$dia,$ano)) {
echo 'Data válida';
} else {
echo 'Data inválida';
//Resultado: Data inválida
?>
Além da função checkdate, existem funções que possibilitam efetuar cálculos e

operações entre datas, de maneira que você pode identificar, por exemplo, há quantos
dias um boleto está atrasado. Pode-se realizar essa operação com a função date_diff.
Com ela pode-se efetuar o cálculo da diferença entre duas datas, passando por
parâmetro duas datas que foram instanciadas pela função date_create.
O retorno da função date_diff é um objeto do tipo DateInterval. Um objeto é uma

espécie de variável que além de possuir um valor atribuído a ela, também apresenta
funções que podem ser acessadas com o símbolo de seta (->). Para exibir o valor de
diferença entre as datas é necessário utilizar a função format, pertencente ao objeto
DateInterval. Observe o Código 4.24a seguir: no código são utilizadas todas essas
funções com o objetivo de calcular a diferença entre duas datas.
Código 4.24 | Exemplo de aplicação das funções date_create, date_diff e format
<?php
//declara variáveis
$data1 = date_create("2020-04-12");
$data2 = date_create("2020-12-25");
//calcula a diferença de meses e dias entre as duas datas
$diferenca = date_diff($data1, $data2);
//formata a variável do tipo DateInterval
echo $diferenca->format("%m meses e %d dias");
?>

A linguagem PHP dispõe de muitas funções prontas e não é possível, neste momento,
explorá-las todas. Mas vale a pena dar uma atenção para algumas funções relacionadas à
formatação de números e tratamento de texto. A seguir, são descritas algumas funções
com seus devidos parâmetros e valores de retorno:
 Formatar números passando por parâmetro o número que se deseja formatar, a

quantidade de casas decimais, o caractere usado para separar as casas decimais e
o caractere utilizado para separar os milhares:
number_format ( float $number , int $decimals , string $dec_point , string
$thousands_sep ) : string
 Converter um texto para letras maiúsculas passando por parâmetro o texto que se
deseja fazer a conversão: strtoupper ( string $string ) : string
 Converter um texto para letras minúsculas passando por parâmetro o texto que
se deseja fazer a conversão: strtolower ( string $str ) : string
 Retornar a quantidade de caracteres de um texto passando por parâmetro o texto
que se deseja fazer a contagem: strlen ( string $string ) : int
 Substituir parte de um texto por outro passando por parâmetro o texto que deseja
ser pesquisado, o texto que deseja ser substituído e o texto que vai receber essa
substituição. É possível, ainda, passar um parâmetro opcional informando a
quantidade de substituições que se deseja fazer.
str_replace ( mixed $search , mixed $replace , mixed $subject [, int
&$count ] ) : mixed
O Código 4.25 apresenta alguns exemplos de uso dessas funções:
Código 4.25 | Exemplo de aplicação de algumas funções existentes
<?php
//formata o número com 2 casas decimais: 3,10
echo number_format ( 3.1 , 2 , "," , "." );
//converte para maiúsculo: OLA MUNDO
echo strtoupper ("Ola Mundo");
//converte para minúsculo: ola mundo
echo strtolower ("Ola Mundo");
//conta a quantidade de caracteres: 9
echo strlen ("Ola Mundo");
//substitui a palavra "Ola" por "Oi": Oi Mundo
echo str_replace ("Ola", "Oi" , "Ola Mundo" );
?>
Um conjunto importante de funções que merece destaque são aquelas relacionadas ao

tratamento de arquivos, pois a capacidade de armazenar e fazer leitura de arquivo torna
sua aplicação muito poderosa. Essa função aceita dois argumentos: o nome do arquivo a
ser aberto e o modo em que esse arquivo será aberto, aceitando os seguintes modos:
 ‘w’: abre o arquivo somente para escrita e grava o conteúdo a partir do início do

arquivo. Caso o arquivo não exista, ele é criado automaticamente. Caso ele já
exista, todo seu conteúdo é perdido, e é substituído pelo novo conteúdo.
 ‘w+’: abre o arquivo para leitura e escrita seguindo os mesmo critérios do modo
'w'.
 ‘r’: abre o arquivo somente para leitura. Retorna um erro caso o arquivo não
exista.
 ‘r+’: abre para leitura e escrita; retorna um erro caso o arquivo não exista.
 ‘a’: abre para somente para escrita somente; coloca o ponteiro do arquivo no
final. Caso o arquivo não exista, ele é criado automaticamente. Caso ele já
exista, ele adiciona o novo conteúdo ao conteúdo já existente.
 ‘a+’: abre o arquivo para leitura e escrita seguindo os mesmo critérios do modo
'a'.
 ‘x’: cria e abre o arquivo para escrita somente, porém ele retorna erro caso o
arquivo já exista.
 ‘x+’: cria e abre um arquivo para escrita e leitura, porém ele retorna erro caso o
arquivo já exista.
Outras funções são necessárias para manipular arquivos. A função fwrite tem a
funcionalidade de escrever em um arquivo que foi anteriormente aberto em algum dos
modos de leitura. Ela tem como parâmetro a ponteiro do arquivo aberto, o texto que se
deseja gravar e um parâmetro opcional para especificar o tamanho do conteúdo a ser
gravado. Já a função fclose é capaz de fechar um arquivo aberto, liberando o espaço que
ele estava ocupando na memória. No Código 4.26 a seguir é apresentado um exemplo
de abertura e escrita de conteúdo em um arquivo.
Código 4.26 | Funções para escrita de arquivos em PHP
<?php
//abre o arquivo no modo de escrita
$arquivo = fopen('meuarquivo.txt','w');
if ($arquivo) {
//se conseguiu abrir o arquivo, grava o texto "novo conteúdo"
fwrite($arquivo, 'Novo conteúdo');
//fecha o arquivo
fclose($arquivo);
}
?>
Caro aluno, agora que você já sabe gravar um arquivo, vai aprender como se realiza a
leitura de um arquivo. A função fgets é capaz de ler uma linha de um arquivo. Caso
você queira ler o arquivo inteiro, terá que utilizar uma estrutura de repetição lendo linha
a linha do arquivo até chegar ao seu fim. A função que verifica se chegou no fim do
arquivo é a feof e sua utilização pode ser visualizada no exemplo do Código 4.27 a
seguir.
Código 4.27 | Funções fgets, feof e fclose
<?php
$arquivo = fopen('meuarquivo.txt','r');
if ($arquivo) {
// imprime linha por linha ate detectar o final
while(!feof($arquivo)) {
echo fgets($arquivo). '<br />';
fclose($arquivo);
?>
Além de abrir arquivos para leitura e escrita, é possível manipular arquivos copiando,
movendo ou excluindo-os. As principais funções para manipulação de arquivos são as
seguintes:
 Função capaz de copiar um arquivo passando por parâmetro o caminho de

origem e o caminho de destino: copy ( string $source , string $dest) : bool
 Função capaz de excluir um arquivo passando por parâmetro o nome do arquivo
a ser excluído:
unlink ( string $filename) : bool
Um recurso avançado quando está se trabalhando com arquivos é o bloqueio para
múltiplos acessos e suas respectivas configurações de permissão. Para esse controle,
pode ser utilizada a função chmod, a qual recebe por parâmetro o nome do arquivo
seguido pelo número correspondente à permissão desejada. O Código 4.28 apresenta um
exemplo de código para controle de permissões de arquivos:
Código 4.28 | Aplicação da função chmod para controle de permissões de arquivos
<?php
// Escrita e leitura para o dono do arquivo apenas
chmod ("/somedir/somefile", 0600);
// Escrita e leitura para o dono do arquivo, leitura para todos os outros
// Tudo para o proprietario, leitura e execução para os outros
// Tudo para o proprietario, leitura e execucao para o grupo do proprietária
?>
Upload de arquivos
De todas as funcionalidades disponíveis na linguagem PHP para se trabalhar com

arquivos, uma das principais é o upload de arquivos, que permite que os usuários
enviem arquivos para o servidor. Para isso, é necessário que se crie uma página HTML
contendo um formulário com o seguinte atributo: enctype="multipart/form-data".
Dentro desse formulário deve haver um elemento input do tipo file. É necessário ainda
definir no atributo action o nome do arquivo PHP que processará o upload, conforme
mostrado no Código 4.29.
Código 4.29 | Envio de arquivos para um servidor

<form enctype="multipart/form-data" action="upload.php" method="POST">

Arquivo: <input name="userfile" type="file" />
<input type="submit" value="Enviar arquivo" />
</form>
Reflita
Funções de armazenamento de arquivos são importantes quando desejamos deixar

dados salvos para serem exibidos posteriormente no seu site. Reflita a respeito de como
poderia ser desenvolvido um formulário HTML em que o usuário digite dados que, ao
serem submetidos para o servidor, possam ser salvos em um arquivo. Depois disso,
como fazer uma página capaz de ler e exibir os dados que foram salvos anteriormente?
Na página chamada “upload.php” são realizados o recebimento e processamento do

arquivo enviado pelo usuário, e a variável global $_FILES contêm todas as informações
desse arquivo. Tais informações podem ser lidas como um array com os seguintes
atributos:
 $_FILES['userfile']['name']: nome original do arquivo.

 $_FILES['userfile']['type']: tipo do arquivo.
 $_FILES['userfile']['size']: tamanho, em bytes, do arquivo.
 $_FILES['userfile']['tmp_name']: nome temporário em que o arquivo foi
armazenado no servidor.
 $_FILES['userfile']['error']: erro associado ao upload do arquivo.
Nesses exemplos deve-se notar que o nome ‘userfile’ se refere ao nome do elemento
input da página anterior. O Código 4.30 apresenta um trecho de código que recebe e
salva o arquivo enviado pelo usuário:
Código 4.30 | Exemplo de código para receber e salvar um arquivo
<?php
//define a pasta em que o arquivo será salvo
$uploaddir = '/var/www/uploads/';
//define o caminho completo do arquivo de destino, pegando para isto o nome do

arquivo original
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
//move o arquivo temporário para o destino desejado
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "Arquivo enviado com sucesso.";

} else {
echo "Falha ao fazer o upload de arquivo!";
?>
Assimile
Uma função definida pelo desenvolvedor pode executar outra e, para isso, basta
escrever o nome da função que se deseja executar seguido por parênteses contendo os
seus argumentos. Mas o que acontece quando uma função executa a si própria? A esse
caso chamamos recursão, o qual permite que uma função execute a si, gerando um laço
de repetição que tende ao infinito. Para prevenir loops infinitos na utilização de
recursão, é importante definir o ponto de parada. No Código 4.31 a seguir é passado por
parâmetro o número 24, que é dividido por 2 e executada a mesma função, passando por
parâmetro o número 12; depois é executada novamente, passando por parâmetro o
número 6. A mesma função vai sendo executada várias vezes até chegar ao ponto de
parada, quando o número não é maior do que 2.
Código 4.31 | Exemplo de recursão em PHP
<?php
function recursao($num) {
//calcula a metade do número recebido
$metade = $num / 2;
//mostra o resultado do cálculo
echo $metade;
//quebra a linha do HTML
echo "<br/>";
//caso o resultado da operação for maior que 2,
//executa a função novamente.
if ($metade>2) {
//executa a função
recursao($metade);
//inicia a recursão passando o número 24
recursao(24);
//o resultado será uma sequencia com os números
//12, 6, 3 e 1.5
?>
Outra função importante no PHP é a Date, a qual recebe por parâmetro um formato que
se deseja exibir a data atual. Esse formato pode ser expresso utilizando uma combinação
de caracteres, destacando-se os seguintes:
d - Dia do mês: de 1 até 31.
m - mês: de 1 até 12.
Y - ano com 4 dígitos.
y - ano com 2 dígitos.
w - representação numérica do dia da semana: de 0 (domingo) até 6 (sábado).
h - hora no formato 12-horas: 01 até 12.
H - Hora no formato 24-horas: 00 até 23h
i - minutos: 00 até 59.
s - segundos: 00 até 59.
É possível, ainda, formatar uma data específica passando um segundo parâmetro

referente a essa data, porém, a data tem que ter sido declarada utilizando a função
strtotime, que permite ser enviada como parâmetro uma data no seguinte formato texto:
“ano-mês-dia hora:minuto:segundo”. O Código 4.32 apresenta alguns exemplos de
uso dessas funções.
Código 4.32 | Exemplo de uso da função strtotime
<?php
// mostra a data atual no formato dia/mes/ano
echo date('d/m/Y');
// mostra somente o ano atual
echo date('Y');
//instancia uma variável com uma data personalizada
$minha_data = strtotime("2020-12-25 16:30:00");
//mostra da data e hora no formato brasileiro: 25/12/2020 10:30:00
echo date('d/m/Y H:i:s', $minha_data);
?>
Exemplificando
Cálculos envolvendo datas são sempre bastante complexos, pois envolvem muitas
verificações. Considere, por exemplo, um caso em que se deseja verificar se um boleto
está atrasado e, com base nessa informação, deve-se calcular o valor a ser pago,
sabendo-se que são aplicados 2% de multa para boletos atrasados, além de 0,5% de
juros por dia de atraso. Dessa maneira teremos que criar variáveis suficientes para a
entrada de dados quando à data de vencimento e o valor do boleto. Como saída, o
código deverá exibir informações acerca da quantidade de dias de atraso, o valor da
multa, o valor de juros e o valor total a ser pago. Considerando essas informações, uma
solução para seria um algoritmo PHP conforme mostrado a seguir. Primeiramente deve-
se declarar as variáveis contendo a data de vencimento e valor. Como faremos cálculo
com data, a variável $vencimento recebe um valor utilizando a função date_create. Essa
função é capaz de declarar uma variável do tipo data, conforme Código 4.33 a seguir.
Código 4.33 | Função date_create
<?php
//declara variáveis de entrada
$vencimento = date_create("2020-10-01");
$valor = 500;

Depois deve-se criar uma variável contendo a data atual. Para isso, deve-se criar uma
data com a função date_create e, em seguida, a data atual com a função date(“Y-m-d”).
Depois é possível calcular a diferença de dias entre a data de vencimento e a data de
hoje com a função date_diff. Essa função retorna um objeto com vários parâmetros, mas
o que nos interessa é apenas a quantidade de dias; portanto, deve-se atribuir a uma
variável o valor do atributo days, conforme mostrado no Código 4.34 a seguir.
Código 4.34 | Exemplos de funções date_diff e date_create
//declara variável com a data de hoje
$hoje = date_create(date("Y-m-d"));
//calcula a diferença entre a data de vencimento até hoje
$diferenca = date_diff($hoje, $vencimento);
//pega o atributo de quantidade total de dias de diferença
$diasatraso = $diferenca->days;
Por fim, basta fazer uma estrutura de decisão em que, caso a quantidade de dias de
atraso for maior que zero, deve-se calcular o valor da multa (2% do valor original), o
valor de juros (0,5% por cada dia de atraso) e o valor a pagar, que é a soma do valor
original com a multa e os juros. Se a quantidade de dias de atraso não for maior que
zero, significa que o boleto não está atrasado, portanto, basta exibir o valor original do
boleto, como mostra o Código 4.35 a seguir.
Código 4.35 | Exemplo de estrutura de decisão
//verifica se está atrasado
if ($diasatraso>0) {
//calcula 2% a multa
$multa = $valor * 2 / 100;
//calcula 0.5% de juros ao dia de atraso
$juros = ($valor * 0.5 / 100) * $diasatraso;
//soma a multa e o juros ao valor a pagar
$valorpagar = $valor + $multa + $juros;
//exibe os valores ao usuário

echo "O boleto está com ";
echo $diasatraso . " dias de atraso<br/>";
echo "Valor de Multa: ";
echo number_format ($multa, 2 , "," , "." )."<br/>";
echo "Valor de Juros: ";
echo number_format ($juros, 2 , "," , "." )."<br/>";
echo "Valor a Pagar: ";
echo number_format ($valorpagar, 2 , "," , ".");
} else {
//boleto não está atrasado
echo "Boleto está em dia<br/>";
echo "Valor a Pagar: ";
echo number_format ($valor, 2 , "," , "." );
?>
A leitura de arquivos e exibição de seus dados
Saiba mais
Armazenar dados em arquivos é uma prática muito útil quando queremos manter e
recuperar informações na nossa aplicação web. Porém, muitas vezes os dados que
desejamos armazenar são complexos e exigem um cuidado maior nas suas tratativas.
Nesses casos recomenda-se utilizar um formato de dados que possa ser recuperado
posteriormente. Um padrão muito utilizado é o JSON (JavaScript Object Notation –
Notação de Objetos JavaScript), um formato simples e leve de formatação de dados.
Para se trabalhar com JSON, a linguagem PHP disponibiliza duas funções muito
importantes:
 json_decode($json): analise uma string no formato JSON e converte para uma

variável de objeto PHP.
 json_encode($variavel): converte uma variável de objeto PHP para o formato
JSON.
A seguir é apresentado um exemplo dessas duas funções, para transformar uma variável
em JSON e logo depois salvar em um arquivo. Depois, no mesmo exemplo, é realizada
a leitura do conteúdo do arquivo que acabou de ser gravado e feita a conversão de volta
do formato JSON para variável do PHP:
Código 4.36 | Armazenar em arquivo
<?php
//instancia uma variável do tipo vetor
$valores = array(1,2,3,4);
//transforma a variável em uma string JSON
$json = json_encode($valores)
//abre o arquivo no modo de escrita
$arquivo = fopen('meuarquivo.txt','w');
if ($arquivo) {
//se conseguiu abrir o arquivo, grava o conteúdo JSON
fwrite($arquivo, $json);
//fecha o arquivo
fclose($arquivo);
//exemplo de leitura do arquivo.
//abre o arquivo em modo de leitura
$arquivo = fopen('meuarquivo.txt','r');
if ($arquivo) {
// instancia uma variavel de texto vazia
$conteudo = "";
//le todo o conteudo do arquivo para a varivel
$conteudo .= fgets($arquivo);
fclose($arquivo);
//transforma o conteúdo JSON em uma variável PHP
$vetor = json_decode($conteudo);
//imprime a 3o posição do vetor, pois ele inicia do 0.
echo $vetor[2];
?>
Pesquise mais
Nesta seção foram apresentadas várias funções da linguagem PHP. Mas PHP não se
limita ao desenvolvimento de páginas simples. No texto indicado a seguir, o autor
apresenta a utilização da linguagem PHP para o desenvolvimento de jogos para internet:
KISIELEWICZ, L. A. Um jogo eletrônico como ferramenta complementar no

ensino de PHP. 2012. 91 f. Dissertação (Mestrado em Ensino de Ciência e Tecnologia)
- Universidade Tecnológica Federal do Paraná, Ponta Grossa, 2012.
Quiz
Teste seu conhecimento!
Nesta seção apresentamos a importância das funções para deixar nosso código mais
limpo e organizado. O uso das funções também é favorável para uma maior facilidade
na manutenção futura do código. Outro aspecto que merece destaque é o uso das
funções já existentes na ampla biblioteca de recursos de linguagem PHP. Na próxima
seção, você vai estudar a utilização de banco de dados em página PHP.
Referências
ISBN 9788576081463.
KISIELEWICZ, L. A. Um jogo eletrônico como ferramenta complementar no

ensino de PHP. 2012. 91 f. Dissertação (Mestrado em Ensino de Ciência e Tecnologia)
- Universidade Tecnológica Federal do Paraná, Ponta Grossa, 2012.
2010. 336 p. ISBN 9788575222195.
https://bit.ly/3eE27HX. Acesso em: 18 set. 2020.
FUNÇÕES E MANIPULAÇÃO DE
ARQUIVOS EM PHP
Aplicação com armazenagem de dados
Desenvolvimento de aplicação com armazenagem de dados digitados pelo usuário em

um arquivo e criação de relatório para exibição desses dados.
sem medo de errar
obtidos até o momento, vamos propor uma resolução para a situação-problema
apresentada no início da seção. Deve-se continuar a aplicação web em que o usuário
deverá digitar a distância a ser percorrida, o preço da gasolina e o preço do etanol. Logo
depois deverá ser calculado e exibido o valor gasto com cada um dos combustíveis,
considerando um consumo de 9 km/litro de etanol e 11 km/litro de gasolina, além de
mostrar ao usuário qual o combustível fica mais barato. Nesta seção foi solicitado que
adicionássemos o requisito de armazenar os dados digitados pelo usuário em um
arquivo, e depois que criássemos um relatório que exibisse esses dados. A parte de
código em que o usuário fará a entrada de dados (index.html) não terá nenhuma
alteração com a versão anterior, mantendo-se da seguinte forma:
<html>
<body>
Distância:
<br/> Preço etanol:
<br/> Preço gasolina:
</form>
</body>
</html>
Já a página “respostas.php” terá alterações quando à formatação dos números,

utilizando a função number_format, a captura da data atual com a função date e ao
armazenamento dos dados em um arquivo chamado “log.txt”. É adicionado, ainda, um
link para o usuário abrir a página chamada “relatório.php”. A seguir, é apresentado o
código da página “resposta.php”, dando destaque em negrito para as partes que foram
alteradas da seção anterior:
Código 4.38 | Exibir relatório de preços de combustível
<html>
<head><title>Resposta</title></head>
<body>
<?php
$distancia = $POST[“distancia”];
$precoEtanol = $POST[“precoEtanol”];
$precoGasolina = $POST[“precoGasolina”];
echo “O valor gasto com etanol é: “;
echo number_format($gastoEtanol, 2, “,”, “.”);
echo “<br/>”;
echo “O valor gasto com gasolina é: “;
echo number_format($gastoGasolina, 2, “,”, “.”);
echo “<br/>”;
if ($gastoEtanol < $gastoGasolina) {
echo “Abasteça com Etanol”;
} else {
echo “Abasteça com Gasolina”;
//pega a data atual
$data = date(‘d/m/Y’);
//abre o arquivo no modo de escrita com adição de dados (append)
$arquivo = fopen(‘log.txt’,’a’);
if ($arquivo) {
//se conseguiu abrir o arquivo, grava os dados separando-os por um espaço
fwrite($arquivo, $data);
fwrite($arquivo, “ “);
fwrite($arquivo, number_format($precoEtanol, 2, “,”, “.”));
fwrite($arquivo, “ “);
fwrite($arquivo, number_format($precoGasolina, 2, “,”, “.”));
//grava uma quebra de linha

fwrite($arquivo, “\n”);
//fecha o arquivo
fclose($arquivo);
?>
<!—link para o relatório >
<a hr” elatóriorio.”hp">Abrir Relatório</a>
</body>
</html>
Por fim, deve-se criar uma página de relatório capaz de exibir os dados que foram
armazenados no arquivo log.txt, conforme exemplo a seguir:
Código 4.39 | Relatório
<html>
<head>
<title>Relatório</title>
</head>
<body>
<h1>Relatório dos Preços de Combustível</h1>
<?php
$arquivo = fopen('log.txt','r');
if ($arquivo) {
// imprime linha por linha ate detectar o final
echo fgets($arquivo). '<br />';
}
fclose($arquivo);
?>
</body>
</html>

Não pode faltar
Conexão de banco de dados em PHP

O que é um SGBD?
Um Sistema Gerenciador de Banco de Dados (SGBD) é um software responsável pelo

gerenciamento dos dados, controlando os acessos, a consistência e a integridade desses
dados.
O que uma rede social, um e-commerce e um site de notícias têm em comum? Uma
grande quantidade de dados, que são exibidos rapidamente a cada vez que algum
usuário acessa o site. Nos casos em que temos um grande volume de dados, o simples
armazenamento de deles em arquivos não é satisfatório, pois ficaria muito lento,
desestruturado e inseguro. Pense, por exemplo, em um site de e-commerce: a cada
acesso devem ser disponibilizadas diversas informações a respeito dos produtos
disponíveis, incluindo a descrição, código de referência, preço, informações técnicas,
saldo de estoque disponível, volume para cálculo de frete, fotos e outras. Além disso, os
produtos devem ser classificados em categorias e o site deve permitir que o usuário faça
pesquisa filtrando os produtos que deseja. São muitas informações, e é fundamental que
elas estejam armazenadas e organizadas em um banco de dados. Nesta seção
estudaremos a utilização do banco de dados MySQL com a linguagem de programação
para web PHP.
Para colocarmos em prática os conhecimentos a serem obtidos, vamos analisar a

seguinte situação-problema: na startup em que você trabalha, solicitaram o
desenvolvimento de uma página capaz de auxiliar o usuário a decidir qual o melhor
combustível para seu uso, considerando o preço do litro da gasolina e do etanol. Essa
página também deve efetuar cálculos levando em conta o consumo do veículo (9
km/litro de etanol e 11 km/litro de gasolina) e a distância a ser percorrida.
Além disso, foi solicitado que você mantivesse salvos os dados inseridos pelos usuários,
de maneira que fosse possível gerar posteriormente um relatório contendo a data, o
valor da gasolina e o valor do etanol que os usuários digitaram. Esses dados estavam
sendo salvos em arquivo, porém essa não é a melhor estratégia. Portanto, visando ao
melhor desempenho do site, sua startup deverá desenvolver funcionalidades que
permitam que os dados inseridos pelo usuário sejam salvos e posteriormente exibidos
no relatório com base em manipulação e consultas no banco de dados MySQL.
Com a utilização de banco de dados, as suas aplicações web ficarão ainda mais robustas
e profissionais. Bons estudos!
conceito-chave
Caro aluno, as diversas mídias dizem que estamos atualmente na Era da Informação, e
que o bem mais precioso é a informação. Portanto, sempre que você desenvolver uma
aplicação web é importante armazenar e disponibilizar informações aos seus usuários,
incluindo dados sobre o produto que ele visitou no e-commerce, recorrência de acesso e
quais cliques o usuário deu dentro do site. Considere a quantidade de informações
armazenadas em um e-commerce: os dados cadastrais dos clientes, dados sobre os
produtos, preços, estoque, carrinhos de compra, pagamentos e outros. São tantas
informações que seria inviável desenvolver um sistema desse tipo sem um banco de
dados. Sempre que precisamos fazer persistência de dados, ou seja, armazenar e
recuperar dados, uma estratégia muito utilizada é utilizar um Sistema Gerenciador de
Banco de Dados (SGBD). Um SGBD é um software responsável pelo gerenciamento
dos dados, controlando os acessos, a consistência e a integridade desses dados. Alguns
exemplos de SGBDs são o MySQL, MariaDB, PostgreSQL, Oracle e Microsoft SQL
Server.
Sistema Gerenciador de Banco de Dados MySQL
O MySQL é um SGBD relacional cuja primeira versão foi lançada em 1994. Em 2008
foi adquirido pela empresa Sun Microsystems e, em 2010 a gigante Oracle, que tem um
SGBD de mesmo nome, comprou a Sun Microsystems. Assim, atualmente o MySQL é
de propriedade da Oracle, que mantém a distribuição do MySQL com código aberto
(open source) sob a licença GPL (General Public License), permitindo o uso gratuito do
MySQL, disponde, também, de uma versão paga que pode ser incorporada a sistemas
comerciais.
Reflita
A licença do MySQL costuma ser um assunto que confunde muitas pessoas. Pesquise a
respeito das condições de uso do MySQL e reflita sobre elas. Veja, ainda, as condições
de uso do MariaBD e quais as diferenças desse SGBD com o MySQL.
Quando falamos de banco de dados relacional, dizemos que os dados são organizados
em uma estrutura que relaciona e organiza os dados por meio dos seguintes elementos:
tabelas (entidades), colunas (atributos) e registros (tuplas).
Para se comunicar com o banco de dados MySQL é utilizada a linguagem SQL

(Structured Query Language), ou Linguagem de Consulta Estruturada. A linguagem
SQL é adotada por praticamente todos os sistemas gerenciadores de banco de dados
relacionais, sofrendo apenas pequenas mudanças quanto a sua sintaxe. Dessa forma,
antes de aprendermos como se conecta ao banco de dados MySQL com PHP, vamos
estudar um pouco a linguagem SQL, que permite a manipulação dos dados com as
seguintes operações:
 Inserção: para inserir um registro em uma tabela utiliza-se o seguinte comando:
INSERT INTO nome_da_tabela (atributo1, atributo2) VALUES (3, ‘valor2’);
Observe que há um parêntese em que são adicionados os atributos da tabela que se

deseja fazer a inserção separados por vírgula. No segundo parêntese são adicionados os
valores desses mesmos atributos, seguindo a mesma ordem em que foram adicionados
no primeiro parêntese. Caso o valor for algum texto ou data, deve-se colocar os valores
entre aspas simples.
 Alteração: para alterar um registro de uma tabela é importante que se tenha o

valor da chave primária (atributo que identifica unicamente uma tupla) do
registro que se deseja alterar. A alteração é realizada pelo seguinte comando:
UPDATE nome_da_tabela SET atributo1 = 3, atributo2 = ’valor2’

WHERE chaveprimaria = 1;
A cláusula WHERE serve para indicar qual é o registro a ser alterado.
 Exclusão: para excluir um registro de uma tabela é necessário que se tenha o

valor da chave primária do registro que se deseja excluir, passando-o na cláusula
WHERE, semelhante ao que acontece no comando para alteração:
DELETE FROM nome_da_tabela WHERE chaveprimaria = 1;
Entre os comandos da linguagem SQL, o mais versátil é o comando para consultar

dados. Neste momento veremos apenas sua sintaxe básica, mas vale a pena você estudar
mais a fundo esse importante comando. Para consultar todas as colunas de todos os
registros de uma tabela basta utilizar o seguinte comando:
SELECT * FROM nome_da_tabela;

O símbolo asterisco indica que serão consultados todos os atributos da tabela, mas
muitas vezes desejamos consultar apenas alguns, o que deixa a consulta mais rápida.
Para especificar as colunas que se deseja consultar, pode-se substituir o asterisco pelo
nome das colunas separados por vírgula, conforme este exemplo:
SELECT atributo1, atributo2 FROM nome_da_tabela;
É possível ainda adicionar filtros para que sejam mostrados apenas os registros que
atendem a esse critério com a cláusula WHERE. Também é possível ordenar os dados
utilizando a cláusula ORDER BY, conforme mostrado neste código:
SELECT atributo1, atributo2

FROM nome_da_tabela
WHERE atributo2 = ‘teste’
ORDER BY atributo1;
Criando o banco de dados
Para criar as tabelas do seu banco de dados você pode utilizar ferramentas auxiliares,
como o MySQL Workbank ou o PHPMyAdmin. É possível utilizar, por exemplo, a
PHPMyAdmin dentro do ambiente PaizaCloud e assim não há necessidade de instalar
algo mais no seu computador. Para isso, crie ambiente no PaizaCloud (PAIZA INC,
c2014), marcando as opções PHP, MySQL e phpMyAdmin, conforme mostrado na
Figura 4.7 a seguir:
Figura 4.7 | Criação do servidor PaizaCloud
Depois de criar o servidor, abra o navegador existente dentro do PaizaCloud e acesse o

endereço https://localhost/phpmyadmin/.
Dentro desse endereço clique no menu “Banco de Dados” e crie um banco de dados,
conforme exemplificado na Figura 4.8:
Figura 4.8 | Criação do banco de dados
Criando tabelas
Depois que criar o banco de dados deve-se elaborar as tabelas que receberão os dados a
serem armazenados. Na Figura 4.9 está sendo criada uma tabela chamada “pessoa”, com
os atributos de idpessoa, nome, cpf e telefone. O atributo “idpessoa” é uma chave
primária (identificador único de cada registro), portanto, foi selecionada a opção
PRIMARY KEY. Marcamos também a opção A.I., que significa “autoincremento”, ou
seja, esse campo terá o seu valor atribuído automaticamente por meio de uma sequência
numérica única.
Figura 4.9 | Criação da tabela

Reflita
A plataforma de desenvolvimento on-line PaizaCloud quando usada na licença gratuita,

permite a criação de servidores temporários, ou seja, depois de 4 horas você perde todos
os arquivos e o banco de dados criado. Será que podemos usar essa plataforma para
projetos profissionais? Vale a pena configurar todo o ambiente de desenvolvimento
localmente no seu computador?
Conectando ao banco de dados
Agora que temos um banco de dados e uma tabela criados, podemos fazer a conexão
utilizando a linguagem PHP, que disponibiliza algumas bibliotecas para conectar-se em
diversos SGBDs disponíveis no mercado. No caso das conexões com o MySQL,
usaremos a biblioteca MySQLi. Essa biblioteca disponibiliza diversas funções, com
destaque para as seguintes:
 Abrir conexão: antes de executar qualquer comando no banco de dados, é

necessário abrir uma conexão com a função mysqli_connect, passando como
parâmetros o endereço do servidor, o nome do usuário, a senha e o nome do
banco de dados. É necessário salvar o retorno dessa função em uma variável,
que será utilizada nas funções seguintes para apontar para a conexão com o
banco de dados, conforme este exemplo: $con = mysqli_connect($server,
$username, $password, $database);
 Executar comando SQL: para executar um comando SQL (para inserção,
alteração, exclusão ou consulta), podemos utilizar a função mysqli_query,
passando por parâmetro uma variável que indica a conexão com o banco de
dados e a string contendo o comando SQL que se deseja executar. Nos casos em
que o comando sql é de consulta de dados, é necessário salvar o retorno da
variável para que possa ser utilizado na recuperação dos dados, conforme este
exemplo: $res = mysqli_query($con, $sql);
 Ler dados da consulta: o comando mysqli_fetch_array é capaz de ler um
registro da consulta que foi realizada no banco de dados. Como parâmetro, deve-
se passar uma variável contendo o resultado da consulta e o seu retorno é um
vetor contendo as colunas e valores do registro. Caso queira fazer a leitura de
todos os registros de uma consulta, é necessário combinar esse comando com
uma estrutura de repetição, conforme mostrado neste exemplo:
while ($row = mysqli_fetch_array($res)) {
echo $row[“coluna”];
}
 Fechar conexão: os SGBDs têm um limite permitido para realização de

conexões, logo é importante, ao concluir as operações com o banco de dados,
fechar a conexão pelo comando mysqli_close, conforme mostrado a
seguir: mysqli_close($con);
 Exibir erro: quando estamos trabalhando com banco de dados, enviamos para
ele comandos SQL, que serão interpretados pelo SGBD. Como esses comandos
dependem da interpretação do MySQL, é possível que haja algum tipo de falha.
Nesses casos pode-se exibir o erro na execução do comando sql por meio do
comando mysqli_error, passando como parâmetro a variável que identifica a
conexão: mysqli_error($con);
Exemplificando
A linguagem PHP permite que executemos comandos SQL no banco de dados MySQL.
Mas como podemos utilizar todos esses comandos na prática? Considere o banco de
dados chamado “meubd”, que contém uma tabela chamada “pessoa” com os atributos
de “nome”, “telefone” e “cpf”. A seguir podemos ver um exemplo de código PHP capaz
de inserir um registro nessa tabela e logo em seguida consultar todos os dados contidos
na tabela. Cada linha do código está comentada com a função sua função.
Código 4.40 | Inserção e consulta de registro de registro utilizando SQL
<?php
//define as variáveis de configuração da conexão
$servername = "localhost"; //banco de dados local
$database = "meubd"; //nome do banco de dados
$username = "root"; //usuário padrão do MySQL é root
$password = ""; //por padrão o Paiza.cloud não coloca senha no banco de dados
//abre a conexão com o banco
$con = mysqli_connect($servername, $username, $password, $database);
if (!$con) {
//caso a conexão falhe, ele encerra a página PHP imprimindo a mensagem de erro
die("Falha de conexão: " . mysqli_connect_error());
//monta o comando SQL para inserção
$sql = "INSERT INTO pessoa (nome, telefone, cpf) VALUES ('Bill Gates', '(99)9999-
9999', '123.123.123-12')";
//executa a string SQL e valida se foi executa com sucesso ou não
if (mysqli_query($con, $sql)) {
echo "Novo registro inserido com sucesso!";
} else {
echo "Erro: " . $sql . "<br>" . mysqli_error($con);
//monta o comando SQL para consulta dos dados

$sql = "SELECT * FROM pessoa ORDER BY nome";
//executa a string SQL e atribui o seu resultado na variável $res
$res=mysqli_query($con,$sql);
//imprime uma tabela em HTML
echo "<table border='1'>";
//faz um laço de repetição que irá durar enquanto tiverem registros na consulta
while($row = mysqli_fetch_array($res)){
//imprime os dados do registro dentro de uma tabela HTML
//lembre-se que <TR> é coluna e que <TD> é uma coluna da tabela
echo "<tr>";
echo "<td>" . $row["nome"] . "</td>";
echo "<td>" . $row["telefone"] . "</td>";
echo "<td>" . $row["cpf"] . "</td>";
echo "</tr>";
//fecha a tabela do HTML
echo "</table>";
//fecha a conexão com o banco de dados
mysqli_close($con);
?>
Fonte: elaborado pelo autor
Autenticação de usuário, sessões e cookies
Caro aluno, agora que você já pode realizar a manipulação e consultas de dados no
banco de dados, abordaremos a autenticação de usuário. Em uma rede social, por
exemplo, quando você clica para ver seus amigos é mostrada uma lista contendo apenas
os seus amigos, enquanto outro usuário que clica no mesmo link enxerga a lista dos
amigos dele. Ou seja, para cada usuário é exibida uma informação diferente. Isso
acontece também em sites de e-commerce, quando são sugeridos produtos direcionados
para o usuário que está acessando a página. A visualização ocorre dessa maneira porque
cada usuário fez o seu login de acesso e tem sua identificação definida em todas as
páginas que ele acessa na aplicação. Uma forma muito comum de se identificar o
usuário é por meio da sessão, que em PHP é identificada pelo vetor (array) chamado
$_SESSION. Nesse vetor podem ser armazenados dados exclusivos para aquele usuário,
de modo que ele tenha uma identificação única e diferente da dos demais usuários.
Quando o usuário fecha o navegador essa sessão é excluída automaticamente,
garantindo a segurança do acesso daquele usuário. Para se utilizar a sessão de usuário
em uma página PHP, é obrigatório que na primeira linha da página seja feita a
inicialização da sessão pela função session_start().
Um complemento ao uso da sessão é a utilização do banco de dados para validar o login

do usuário; caso ele tenha digitado usuário e senha válidos, pode-se guardar o seu nome
no vetor da sessão. Assim, qualquer página a que ele tiver acesso posteriormente, seu
nome poderá ser resgatado para identificação ou para filtrar dados que serão exibidos
para este usuário. Considere que você tem um banco de dados com a tabela chamada
“usuario” contendo os atributos de “idusuario”, “nome”, “email” e “senha”. Faremos,
portanto, um formulário HTML em que o usuário poderá digitar o seu e-mail e senha.
Caso ele digite um usuário ou senha válidos, seu nome será armazenado na sua sessão,
então ele poderá navegar em todas as páginas da aplicação tendo seu nome exibido no
topo das páginas. Acompanhe o exemplo a seguir, que ilustra um sistema de
autenticação de usuário. A página index.html disponibiliza um formulário em que o
usuário poderá digitar o seu e-mail e senha:
Código 4.41 | index.html – formulário de autenticação
<html>
<head>
<title>Formulário de Autenticação</title>
</head>
<body>

<form action="login.php" method="post">

E-mail: <input type="text" name="email"/>
<br/>

Senha: <input type="password" name="senha"/>
<br/>


<input type="submit" value="entrar"/>
</form>
</body>
</html>
Quando o usuário clicar no botão “submit” ele será redirecionado para a página
“login.php”, a qual receberá os dados digitados pelo usuário no vetor $_POST. Note
que a primeira linha do arquivo “login.php” é justamente a abertura do código PHP com
a inicialização da sessão do usuário. Depois disso é realizada uma consulta no banco de
dados para saber se o e-mail existe no cadastro de usuários e se a senha está correta.
Caso o usuário e a senha sejam válidos, o nome do usuário é salvo no vetor de sessão e
é disponibilizado um link para o usuário navegar até a página de menu:
Código 4.42 | login.php
<?php
//inicializa a sessão do usuário
session_start();
?>
<html>
<head>
<title>Autenticação do Usuário</title>
</head>
<body>
<?php
//declara as variáveis de configuração da conexão
$servername = "localhost"; //endereço do servidor local do mysql
$username = "root"; //nome do usuário
$password = ""; //senha do banco de dados
//abre a conexão com o banco de dados

//caso não consiga fazer a conexão, mostra uma mensagem de erro
if (!$con) {
//pega os dados de email e senha digitados pelo usuário no formulário
$email = $_POST["email"];
$senha = $_POST["senha"];
//monta a string sql capaz de consultar todos os usuários com o email
//digitado pelo usuário
$sql = "SELECT * FROM usuario WHERE email='$email'";
//executa a instrução no banco de dados
//verifica se a instrução retornou algum registro
if($row = mysqli_fetch_array($res)){
//confirma se a senha no BD é igual à digitada pelo usuário
if ($row["senha"]==$senha) {
//se a senha for válida, mostra mensagem de bem vindo seguido
//pelo nome do usuário e um link para o menu
echo "Seja bem vindo(a) ";
echo $row["nome"];
echo "<br/>";
echo "<a href='menu.php'>Menu</a>";
//guarda o nome do usuário logado na sessão
$_SESSION["nome"] = $row["nome"];
} else {
//se a senha não é igual, mostra mensagem de senha inválida
echo "Senha inválida";
}
} else {
//se não encontrou nenhum registro na tabela para aquele usuário,
//mostra mensagem de que o usuário é inválido
echo "Usuário inválido";
mysqli_close($con);
?>
</body>
</html>
Quando o usuário clicar no link para abrir a página de menu ou qualquer outra página
que ele acessar a partir de então, basta iniciar a sessão com a função session_start() e
buscar o nome do usuário que está logado por meio do vetor $_SESSION:
Código 4.43 | Função session_start() para inicializar a sessão do usuário
<?php
//inicializa a sessão do usuário
session_start();
?>
<html>
<head>
<title>Menu personalizado do usuário</title>
</head>
<body>
<h1>

Menu do <?php echo $_SESSION["nome"]; ?>
</h1>
</body>
</html>
O nome do usuário pode ser usado para muito mais do que simplesmente mostrar quem
está logado. Pode-se, por exemplo, utilizar o nome do usuário para filtrar os produtos
relacionados a ele em um site de e-commerce ou as notícias com os assuntos que o
usuário costuma ler, ou, ainda, uma lista de seus amigos em uma rede social. Essas
consultas podem ser facilmente realizadas pelo banco de dados.
Existem casos em que não há área no site para se fazer autenticação do usuário por meio
de login e senha, mas, mesmo assim, deseja-se manter alguma informação salva sobre
ele. A sessão de usuário então não é útil, pois quando o navegador é fechado os valores
da sessão se perdem. Quando há a necessidade de se armazenar alguma informação
especificamente daquele usuário é possível utilizar cookies, que basicamente são
pequenas informações salvas no navegador do usuário. Toda vez que o usuário voltar a
acessar o seu site, você poderá ler os cookies que foram salvar no navegador de quem
está acessando. É importante notar que nos cookies devem ser salvas realmente poucas
informações, pois geralmente há um limite de no máximo 4Kb apenas para guardar
informações desse tipo no navegador. Para salvar um dado no cookie do usuário utilize
a função do PHP setcookie, passando por parâmetro um nome identificador do valor e o
valor que se deseja salvar. Também é possível enviar a data de expiração para esse
valor, somando a uma função time() a quantidade de segundos que você quer deixar
esse dado disponível. É obrigatório que a chamada da função setcookie venha antes de
qualquer código html ou impressão de dados com php, semelhante ao que ocorre com a
função session_start, a qual colocamos logo no início do arquivo. Para recuperar algum
dado armazenado no cookie de usuário basta acessar o vetor $_COOKIE, conforme
mostrado no exemplo a seguir:
Código 4.44 | Função setcookie para salvar um dado no cookie do usuário
<?php
//salva o nome no cookie do navegador
setcookie("nome", "Alan Turing");
//salva o email pelo tempo de 1 hora (3600 segundos)
setcookie("email", "alan@gmail.com", time()+3600);
//mostra o nome salvo no cookie.
//este valor estará disponível em qualquer página que o usuário acessar
echo $_COOKIE["nome"];
?>
Infelizmente os cookies não podem ser utilizados dentro do ambiente do PaizaCloud ou

do Paiza.io, pois são salvos no navegador do usuário (Chrome, Firefox, Edge) e ambas
as plataformas de desenvolvimento on-line não utilizam navegadores reais, mas
simuladores on-line. Portanto, para testar os cookies é recomendável que você instale e
configure o PHP no seu próprio computador para ter acesso a todos os recursos da
linguagem PHP sem limitação. Você pode então instalar o software WAMPServer ([s.
d.]), além de um editor de código como o Microsoft Visual Studio Code (2021). A
Figura 4.10 a seguir apresenta como a página PHP que grava cookie pode ser executada
utilizando WAMPServer:
Figura 4.10 | Execução da página com WAMPServer
Assimile
Uma informação importante para saber se o seu site está tendo sucesso ou não é a taxa
de recorrência de seus usuários, ou seja, a quantidade de vezes que um usuário volta ao
seu site. Nos casos em que não há interface para o usuário fazer login, é possível
analisar essa taxa com um contador de acessos que utiliza cookies. Esse contador de
acesso é único por usuário, pois o seu valor é salvo no navegador do próprio usuário.
Assim, cada vez que um novo usuário acessa sua página, o contador inicia a contagem
novamente, e você saberá que é um novo usuário entrando na sua página. A seguir,
podemos observar um código que faz esse contador:
Código 4.45 | Contador de acesso de usuários
<?php
//inicializa a variavel de quantidade com zero
$quantidade = 0;
//faz um verificação, pois caso seja o primeiro acesso do usuário o valor do cookie é
nulo
if ($_COOKIE["contador"]!=null) {
//caso exista um valor de cookie salvo anteriormente, atualiza a variável de quantidade

com o valor do cookie
$quantidade = $_COOKIE["contador"];
//soma +1 no valor atual da variável quantidade
$quantidade++;
//salva o novo valor de quantidade no cookie do navegador do usuário
setcookie("contador", $quantidade);
//exibe o valor atual da variável quantidade
echo $quantidade;
?>
Saiba mais
Um dos recursos mais relevantes do PHP é a capacidade de gerar conteúdo HTML

dinâmico. Quando se usa um banco de dados, essa funcionalidade fica ainda mais
interessante, pois podemos permitir que nossa página mude de conteúdo à medida que o
banco de dados é alimentado. Acompanhe o exemplo a seguir, que mostra a realização
de uma consulta em uma tabela de alunos e suas notas. Note que de acordo com a nota
do aluno a linha da tabela muda de cor: ficará em vermelho quando o aluno for
reprovado ou em azul, quando for aprovado:
Figura 4.11 | Lista de Alunos

Código 4.46 | Lista de Alunos
<html>
<head>
<title>Lista de Alunos</title>
</head>
<body>
<h1>Lista de Alunos</h1>
<?php
//declara as variáveis de configuração da conexão ao banco de dados
//endereço do servidor
$servername = "localhost";
//nome do banco de dados
$database = "meubd";
//usuário do MySQL
$username = "root";
//senha do MySQL
$password = "";
//conecta ao banco de dados MySQL
if (!$con) {
//instrução SQL para consulta de dados
$sql = "SELECT * FROM aluno ORDER BY nome";
//executa a instrução SQL
//abre a tabela e define o cabeçalho
echo "<th>nome</th>";
echo "<th>nota 1</th>";
echo "<th>nota 2</th>";
echo "<th>média</th>";
//estrutura de repetição para percorrer todas as linhas da tabela
//calcula a média entre as 2 notas
$media = ($row["nota1"]+$row["nota2"]) / 2;
//se a nota for maior ou igual a 6 ele coloca a linha em azul
if ($media >= 6) {
echo "<tr bgcolor='blue'>";
} else {
//caso contrário (nota menor que 6) ele coloca a linha em vermelho
echo "<tr bgcolor='red'>";
//imprime as colunas dda tabela
echo "<td>" . $row["nome"] . "</td>";
echo "<td>" . $row["nota1"] . "</td>";
echo "<td>" . $row["nota2"] . "</td>";
echo "<td>" . $media . "</td>";
echo "</tr>";
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Pesquise mais
Para aprender mais acerca da utilização de banco de dados com PHP, recomendamos a
leitura das páginas 71 a 88 do material indicado a seguir.
BOECHAT, G. C. Apostila de Linguagem de Programação I e II PHP. Guarulhos,

SP: Instituto Federal de Educação, Ciência e Tecnologia de São Paulo, 2014.
É incrível a quantidade de funções e recursos que a linguagem PHP nos disponibiliza.

Vimos, nesta seção, o acesso ao banco de dados por meio de uma linguagem de
programação, um recurso extremamente importante que permite desenvolver aplicações
web complexas. Aplique os conceitos apresentados neste material e crie seus próprios
portais para internet.
Referências
ISBN 9788576081463.
BOECHAT, G. C. Apostila de Linguagem de Programação I e II PHP. Guarulhos,

SP: Instituto Federal de Educação, Ciência e Tecnologia de São Paulo, 2014. Disponível
em: https://onbus.com.br/leeia.com.br/pdf/ApostilaPHP_2014.pdf. Acesso em: 2 mar.
2021.
2010. 336 p. ISBN 9788575222195.
PAIZA CLOUD. Página inicial. Paiza Inc, c2014. Disponível em: https://paiza.cloud/.

https://www.php.net/manual/pt_BR/history.php.php. Acesso em: 18 set. 2020.
VISUAL STUDIO CODE. Página inicial. Seattle: Microsoft, 2021. Disponível em:
https://code.visualstudio.com/. Acesso em: 2 mar. 2021.
WAMPSERVER. Página inicial. WampServer, [s. d.]. Disponível em:

https://www.wampserver.com/en/download.php. Acesso em: 28 fev. 2021.
CONEXÃO DE BANCO DE DADOS

EM PHP
Aplicação com manipulação e consultas no banco de dados
Alterações na codificação da aplicação para que os dados possam ser salvos no banco de
dados e o relatório exiba os dados que foram armazenados no banco de dados.
sem medo de errar
A fim de ampliar sua visão a respeito das possibilidades de aplicação dos

conhecimentos obtidos até o momento, vamos propor uma resolução para a situação-
problema apresentada no início desta seção. De acordo com ela, deve-se continuar a
aplicação web em que o usuário deverá digitar a distância a ser percorrida, o preço da
gasolina e o preço do etanol. Logo depois deverá ser calculado e exibido o valor gasto
com cada um dos combustíveis, considerando um consumo de 9 km/litro de etanol e 11
km/litro de gasolina, além de mostrar ao usuário qual combustível gera menos custo.
Nesta seção vimos como adicionar o requisito de armazenar os dados digitados pelo
usuário em uma tabela no banco de dados, criando, depois, um relatório que exibisse
esses dados. A parte de código em que o usuário fará a entrada de dados (index.php) não
sofrerá alteração alguma com a versão anterior, mantendo-se da seguinte forma:
Código 4.47 | Formulário para cálculo do preço do combustível
<html>
<body>
Distância:
<br/> Preço etanol:
<br/> Preço gasolina:
</form>
</body>
</html>
A página “resposta.php” sofrerá alterações para que os dados possam ser salvos no
banco de dados, ficando de seguinte forma:
Código 4.48 | Resposta
<html>
<head><title>Resposta</title></head>
<body>
<?php
$distancia = $POST["distancia"];
$precoEtanol = $POST["precoEtanol"];
$precoGasolina = $POST["precoGasolina"];
echo "O valor gasto com etanol é: ";
echo number_format($gastoEtanol, 2, ",", ".");
echo "<br/>";
echo "O valor gasto com gasolina é: ";
echo number_format($gastoGasolina, 2, ",", ".");
echo "<br/>";
if ($gastoEtanol < $gastoGasolina) {
echo "Abasteça com Etanol";
} else {
echo "Abasteça com Gasolina";
//pega a data atual no formato do banco de dados, primeiro o ano, depois o mês e depois
o dia
$data = date('Y-m-d');
//define as variáveis de configuração da conexão com o BD
if (!$con) {
}
//monta o comando SQL para inserção
$sql = "INSERT INTO combustivel (data, precoEtanol, precoGasolina) VALUES

('$data', $precoEtanol, $precoGasolina)";
//executa a string SQL e valida se foi executa com sucesso ou não
if (mysqli_query($con, $sql)) {
echo "Novo registro inserido com sucesso!";
} else {
echo "Erro: " . $sql . "<br>" . mysqli_error($con);
mysqli_close($con);
?>

<a href="relatorio.php">Abrir Relatório</a>
</body>
</html>
Por fim, deve-se alterar a página de relatório para ela que seja capaz de exibir os dados
que foram armazenados no banco de dados, conforme exemplo a seguir:
Código 4.49 | Relatório de preços de combustível
<html>
<head>
</head>
<body>
<h1>Relatório dos Preços de Combustível</h1>
<?php
//define as variáveis de configuração da conexão

if (!$con) {
//monta o comando SQL para consulta dos dados
$sql = "SELECT * FROM combustivel ORDER BY data";
//executa a string SQL e atribui o seu resultado na variável $res
//imprime uma tabela em HTML
//faz um laço de repetição que irá durar enquanto tiverem registros na consulta
//imprime os dados do registro dentro de uma tabela HTML
//lembre-se que <TR> é coluna e que <TD> é uma coluna da tabela
echo "<tr>";
echo "<td>" . $row["data"] . "</td>";
echo "<td>" . number_format($row["precoEtanol"], 2, ",", ".") . "</td>";
echo "<td>" . number_format($row["precoGasolina"], 2, ",", ".") . "</td>";
echo "</tr>";
//fecha a tabela do HTML
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Saiba mais
Nesta seção aprendemos os comandos básicos dos comandos SQL, porém existem
diversos recursos a serem explorados, especialmente na sintaxe da instrução de consulta
de dados. Na atividade proposta com foco no mercado foi solicitado que você fizesse
um relatório listando todos os dados inseridos pelo usuário a respeito do preço da
gasolina e do etanol. Mas, e se em vez de listar todos os dados quiséssemos um resumo,
informando qual é a média de preço de cada um desses combustíveis, qual o preço mais
alto e qual o preço mais baixo? Para isso, podemos utilizar as funções agregadas que a
linguagem SQL nos disponibiliza. Essas funções são capazes de agrupar dados
mostrando o resultado da operação a qual ela foi designada, que pode ser dos seguintes
tipos:
 SUM: calcula a soma dos valores.

 AVG: calcula a média dos valores.
 MAX: retorna o maior valor.
 MIN: retorna o menor valor.
 COUNT: conta a quantidade de valores.
Assim, podemos fazer um relatório sintético dos preços de combustível, conforme o

exemplo a seguir:
Código 4.50 | Funções para agrupar dados
<html>
<head>
</head>
<body>
<?php
//declara as variáveis de configuração da conexão ao banco de dados
//endereço do servidor
$servername = "localhost";
//nome do banco de dados
$database = "meubd";
//usuário do MySQL
$username = "root";
//senha do MySQL
$password = "";
//conecta ao banco de dados MySQL
if (!$con) {
//instrução SQL para consulta de dados
$sql = "SELECT AVG(precoEtanol) as mediaEtanol,
AVG(precoGasolina) as mediaGasolina,
MAX(precoEtanol) as maiorEtanol,
MAX(precoGasolina) as maiorGasolina,
MIN(precoEtanol) as menorEtanol,
MIN(precoGasolina) as menorGasolina
FROM combustivel";
//executa a instrução SQL
//retorna os dados da consulta
//não há necessidade de estrutura de repetição, pois a instrução SQL irá retornar apenas
um registro
$row = mysqli_fetch_array($res);
//imprime os resultados
echo "<br/>Média de preço do Etanol: " . number_format($row["mediaEtanol"], 2, ",",
".");
echo "<br/>Média de preço da Gasolina: " . number_format($row["mediaGasolina"], 2,

",", ".");
echo "<br/>Maior preço do Etanol: " . number_format($row["maiorEtanol"], 2, ",", ".");
echo "<br/>Maior preço da Gasolina: " . number_format($row["maiorGasolina"], 2, ",",

".");
echo "<br/>Menor preço do Etanol: " . number_format($row["menorEtanol"], 2, ",",

".");
echo "<br/>Menor preço da Gasolina: " . number_format($row["menorGasolina"], 2,

",", ".");
mysqli_close($con);
?>
</body>
</html>

Programação Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programação Web

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO WEB

Diego César Batista Mariano

Olá! Seja bem-vindo à disciplina Desenvolvimento Web. Nos dias de hoje, o

A partir da integração de serviços disponibilizados por empresas de tecnologia, websites

Nesta disciplina, você verá desde os fundamentos do desenvolvimento de websites até o

Na Unidade 1, você aprenderá os fundamentos da linguagem de marcação de

Na Unidade 2, focaremos a configuração da aparência de websites a partir das

Por fim, na Unidade 4, será apresentada a linguagem de programação PHP.

Qual é a importância de aprender sobre o HTML?

Conhecer a fundo os elementos básicos do HTML é fundamental para se compreender,

Na segunda seção, você aprenderá sobre elementos estruturais da linguagem HTML e

Praticar para aprender

Nesta seção, você aprenderá os fundamentos do desenvolvimento de websites;

Aprender os fundamentos para construção de websites é fundamental para o sucesso no

Uma das linguagens fundamentais para o desenvolvimento web é a linguagem HTML,

A fim de colocar em prática os conhecimentos a serem adquiridos nesta seção, imagine

Código 1.1 | Página HTML para comercializar planos de internet

<p>Cansado de conexões lentas com a internet?</p>

Fonte: elaborado pelo autor.

Figura 1.1 | Visualização no Google Chrome

Fonte: captura de tela do Google Chrome elaborada pelo autor.

Entretanto, ao testá-la em outro navegador, você se depara com o seguinte problema:

Figura 1.2 | Visualização no Internet Explorer

Como resolver esse problema?

Os primeiros computadores, ainda nos primórdios do século XX, eram estrondosas

Com a evolução dos componentes eletrônicos, surgiu a possibilidade de comunicação

O hipertexto é um tipo de documento que vai além de blocos de textos comuns,

O protocolo HTTP foi criado por Tim Berners-Lee, professor do Massachusetts

Nos últimos anos, houve um crescimento significativo na quantidade e variedade de

Com a internet, os usuários puderam compartilhar informações por meio de locais

 Um navegador de internet, também conhecido como browser (Figura 1.4). São

Figura 1.4 | Estrutura de um navegador (browser)

Browser é um programa de computador que recebe um endereço de URL, realiza uma

 O protocolo indica o método de acesso, como HTTP (protocolo de transferência

Nesse exemplo, podemos observar que o protocolo utilizado é o HTTPS, ou seja, o

Para acessar um site, informar o protocolo não é obrigatório. Observe o domínio

Como um site funciona?

Figura 1.5 | Usuário acessando um site hospedado em um servidor remoto

No Brasil, o departamento responsável pelo registro e pela manutenção de nomes de

Entretanto, antes de se adquirir um domínio, é preciso conhecer os conceitos que

O desenvolvimento web constitui na construção de documentos que podem ser

Figura 1.6 | Linguagens de desenvolvimento web

HyperText Markup Language (HTML)

HTML é um acrônimo para HyperText Markup Language ou, na tradução, “linguagem

Versionamento da linguagem HTML e suas diferenças

Inicialmente, o HTML foi construído para facilitar a comunicação entre colaboradores

Figura 1.7 | Linha do tempo da linguagem HTML

Fonte: elaborada pelo autor.

Em 1995, a versão 2.0 do HTML foi publicada por Berners-Lee e um grupo de

As tags compostas são constituídas de uma declaração de abertura, do conteúdo que se

Código 1.2 | Tags embutidas em outras

A escolha do editor depende da escolha pessoal de desenvolvedor.

Figura 1.8 | Exemplo de página construída usando Sublime Text

Fonte: captura de tela do Sublime Text elaborada pelo autor.

“Olá, mundo!”: criando sua primeira página HTML

Código 1.3 | Minha primeira página

<title>Minha primeira página</title>

Figura 1.9 | Meu primeiro documento web exibido no navegador Chrome

Fonte: captura de tela do navegador Chrome elaborada pelo autor.

Agora, vamos analisar o que é realizado para cada linha de código:

Na primeira linha, vemos a declaração do tipo de documento; isso informa ao navegador

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

A tag <head> deve conter informações do cabeçalho da página, indicando seus itens de

A tag <title> permite a configuração do título que aparecerá no navegador (Figura