desenvolvimento web html ccs javaschrit te php

Prévia do material em texto

DESENVOLV. WEB EM HTML5, CSS, JAVASCRIPT E PHP  
 
Tema 1 
INTRODUÇÃO 
O chamado modelo Cliente x Servidor, com origem na Computação, é uma estrutura de aplicação distribuída, em que                                   
temos tarefas partilhadas e executadas entre as duas camadas: de um lado, a origem das requisições e solicitações de                                     
recursos ou serviços – o lado cliente – e, do outro, processos sendo executados a fim de prover tais recursos ou serviços                                           
– o lado servidor. Atualmente, tal modelo é amplamente utilizado, sendo base do Ambiente Web e de suas aplicações,                                     
como veremos ao longo deste tema. 
Modulo 1 
AMBIENTE CLIENTE X SERVIDOR 
Um pouco de história 
O modelo Cliente x Servidor foi criado pela Xerox PARC nos anos 1970, tendo como principal premissa a separação entre                                       
dados e recursos de processamento, ao contrário do modelo predominante à época – conhecido como modelo centralizado,                                 
em que tanto o armazenamento dos dados quanto o seu processamento ficavam a cargo dos computadores de grande                                   
porte: Mainframe. 
Como é composto o modelo Cliente x Servidor 
O ponto de partida para entendermos a arquitetura do modelo Cliente x Servidor é tomarmos como exemplo a rede interna                                       
de computadores de uma empresa, em que temos máquinas exercendo a função de servidores − provendo serviços como                                   
armazenamento de arquivos ou dados, impressão, e-mail etc. − e máquinas exercendo a função de clientes − consumindo os                                     
recursos fornecidos pelos servidores. Essa arquitetura pode ser vista na Figura 1. 
​Figura 1 – 
Arquitetura Cliente x Servidor em uma Rede Interna. Fonte: Paixão, 2020. 
APLICAÇÕES NO MODELO CLIENTE X SERVIDOR 
O modelo Cliente x Servidor tornou possível o desenvolvimento de aplicações que fizessem uso de sua arquitetura                                 
distribuída. Tais aplicações foram desenvolvidas tendo como base o conceito de desenvolvimento em camadas. Logo,                             
surgiram os modelos de 2, 3 e 4 (ou N) camadas. 
Modelo de 2 camadas 
Neste modelo, temos as camadas Cliente e Servidor, sendo função da primeira tratar a lógica do negócio e fazer a interface                                         
com o usuário, enquanto a segunda é responsável por tratar os dados – normalmente fazendo uso de Sistemas                                   
Gerenciadores de Bancos de Dados (SGDB). São exemplos deste modelo as aplicações desktop instaladas em cada                               
computador cliente que se comunicam com um servidor na mesma rede. 
 
​Modelo de 2 
camadas. 
Modelo de 3 camadas 
Este modelo foi criado para resolver alguns problemas do modelo anterior, entre eles a necessidade de                               
reinstalação/atualização da aplicação nos clientes a cada mudança de regra ou lógica. Logo, este modelo incluiu uma                                 
camada a mais, chamada de aplicação. Com isso, as responsabilidades de cada camada ficaram assim divididas: 
CAMADA DE APRESENTAÇÃO 
Ainda representada pela aplicação instalada na máquina cliente. Era responsável pela interface com o usuário e passou a                                   
acessar o servidor de Aplicação, perdendo o acesso direto ao servidor de dados. 
CAMADA DE APLICAÇÃO 
Representada por um servidor responsável pela lógica e regras de negócio, assim como pelo controle de acesso ao                                   
servidor de dados. 
CAMADA DE DADOS 
Representada por um servidor responsável pelo armazenamento dos dados. 
Veja um exemplo do modelo de 3 camadas: 
 
Modelo de 4 camadas 
O grande avanço obtido neste modelo foi tirar da máquina cliente a responsabilidade pela interface com o usuário, passando                                     
a centralizá-la em um único ponto, normalmente em um servidor Web. Com isso, no lugar de aplicações instaladas em cada                                       
máquina cliente passamos a ter os clientes acessando aplicações hospedadas em servidores Web a partir de navegadores.                                 
Neste modelo, a divisão de responsabilidades ficou dessa forma: 
 
Cliente 
Passou a precisar apenas de um navegador para ter acesso à aplicação. 
 
Servidor 
Agora composto por 3 servidores − o de Aplicações, o de Dados e o Web, sendo este último o responsável pela                                         
apresentação/interface com o usuário cliente. 
Veja um exemplo do modelo de 4 camadas: 
​Modelo de 4 
camadas. 
O AMBIENTE WEB 
Como vimos, inicialmente as aplicações ficavam hospedadas dentro de uma rede interna, onde estavam tanto os clientes                                 
quanto os servidores. Posteriormente, elas migraram para a internet, surgindo então o Ambiente Web, cuja base é                                 
justamente prover aos clientes, usuários, o acesso a várias aplicações a partir de diversos dispositivos, como navegadores                                 
em desktops e smartphones ou a partir de aplicações mobile. 
Até aqui, vimos que este Ambiente é composto pelo: 
CLIENTE 
Utiliza um navegador ou aplicativo e consome serviços hospedados em um servidor Web. 
SERVIDOR WEB 
Cuja estrutura pode comportar tanto as camadas citadas anteriormente numa única máquina quanto em diversas                             
máquinas, sendo essa distribuição indistinguível para o cliente. 
 
Quando falamos de comunicação, estamos falando, mais especificamente, de como trafegam os dados entre a requisição                               
enviada por um cliente e a resposta provida por um servidor. 
 
Comunicação no Ambiente Web 
A comunicação, neste ambiente, é feita sobre a internet, com o uso dos seus protocolos de comunicação, sendo o principal                                       
protocolo o HTTP (HyperText Transfer Protocol) − que é um protocolo para transferência de hipertexto. Na Figura 2,                                   
podemos ver um exemplo de comunicação no Ambiente Web. 
Figura 2 –     
Comunicação no Ambiente Web. Fonte: Paixão, 2020. 
No exemplo mostrado na Figura 2, temos de um lado o cliente que, com um desktop ou smartphone, faz a requisição de                                           
um serviço − representada pelo arquivo Listar-TV.php − através da internet a um servidor. O servidor Web, após processar                                     
a requisição, retorna a informação solicitada, representada pelo arquivo Listagem-TV.php. 
Com base nesse exemplo, podemos entender como funcionam as aplicações disponíveis no Ambiente Web, como                             
websites de notícias, comércio eletrônico, e-mail, redes sociais etc. Em cada um desses casos, há de um lado uma                                     
requisição sendo feita pelo cliente e, do outro, o servidor processando a requisição e respondendo ao cliente com o que foi                                         
solicitado. 
Solicitação e Resposta 
O processo de comunicação no Ambiente Web é conhecido como Solicitação (Request) e Resposta (Response).                             
Normalmente, a solicitação é iniciada pelo cliente, mas é possível que também o servidor a inicie, como em serviços PUSH –                                         
serviços que disparam notificações/mensagens para os clientes que fizeram opção por recebê-las. 
 
Client Side X Server Side 
Essas duas expressões são muito comuns quando falamos de aplicações rodando no Ambiente Web. Ambas se referem a                                   
tecnologias, códigos, disponibilizados no lado cliente (neste caso, o dispositivo utilizado por um usuário para fazer uma                                 
requisição) e no lado servidor. Nos próximos tópicos trataremosde ambas mais a fundo. 
 
Modulo 2 
A INTERFACE DO LADO CLIENTE 
O conceito de interface está ligado à área de Interação Humano-Computador (IHC), que pode ser resumida como o estudo                                     
da interação entre pessoas e computadores. Nesse contexto, a interface, muitas vezes chamada de interface do utilizador,                                 
é quem provê a interação entre o ser humano e o computador. No início da utilização dos computadores, tal interação era                                         
realizada através de linha de comando e, posteriormente, também através de ​interfaces gráficas​. Segundo Morais (2014),                               
no início, a interação foi, de certa forma, primária, deixando um pouco de lado o ser humano, por não existir um estudo                                           
aprofundado desses aspectos. 
Como Silva (2014) explica, a evolução tecnológica levou a uma crescente utilização de dispositivos móveis que possuem os                                   
mais ​variados tamanhos de tela e funcionalidades​. O site StatCounter Global Stats mantém ativa uma série de dados e                                     
estatísticas sobre dispositivos, tamanhos de tela, além de outras informações relacionadas. Sobre o tamanho de telas, e                                 
considerando o período de abril de 2019 a abril de 2020, temos os seguintes dados: 
Tamanho da Tela em Pixels (Largura x Altura) - Percentual de Utilização  
 360 x 640 10,11% 
 1366 x 768 9,69% 
 
 1920 x 1080 8,4% 
 375 x 667 4,24% 
 414 x 896 3,62% 
 1536 x 864 3,57% 
Quando consideramos essas mesmas estatísticas, mas levando em conta especificamente os dados de navegação do                             
Brasil, temos um cenário diferente, conforme pode ser visto na Figura 3. 
​Figura 3 – 
Estatísticas sobre resoluções de telas de dispositivos - Brasil. 
DESIGN RESPONSIVO 
Segundo Knight (2011), o ​design responsivo é a abordagem que sugere que o design e o desenvolvimento devam responder                                     
ao comportamento e ao ambiente do usuário com base no tamanho da tela, plataforma e orientação do dispositivo por ele                                       
utilizado. 
A origem do design responsivo 
O conceito de design responsivo teve sua origem no Projeto Arquitetônico Responsivo. Tal projeto prega que uma sala ou                                     
um espaço deve se ajustar automaticamente ao número e fluxo de pessoas dentro dele. Para tanto, é utilizada uma                                     
combinação de robótica e tecnologia, como: sensores de movimento; sistemas de controle climático com ajuste de                               
temperatura e iluminação; juntamente com materiais – estruturas que dobram, flexionam e expandem. 
Da mesma forma que no Projeto Arquitetônico Responsivo, arquitetos não refazem uma sala ou um espaço de acordo                                   
com o número, fluxo e as características de seus ocupantes, no Ambiente Web não devemos ter que precisar construir                                     
uma versão de uma mesma página de acordo com as características dos seus visitantes. Isso traria ainda outros custos,                                     
como identificar uma enorme combinação de tamanhos de tela e tecnologia, entre outros fatores, para criar uma mesma                                   
quantidade de páginas correspondentes. 
DESIGN RESPONSIVO NA PRÁTICA 
Na prática, ao aplicarmos o conceito de design responsivo, fazemos uso de uma combinação de técnicas, como layouts                                   
fluidos, media query e scripts. A seguir veremos cada uma dessas técnicas em detalhes. 
Layouts fluidos 
Para entender o conceito de layout fluido, é necessário entender primeiro o que seria o seu oposto, ou seja, o layout fixo. 
 
Layout fixo 
As dimensões (largura e altura) dos elementos de uma página Web são definidos com a utilização de unidades de                                     
medidas fixas, como os ‘​pixels​’. Com isso, tais elementos não se adaptam às alterações no tamanho do campo de visão                                       
dos dispositivos que os visualiza. 
 
 
Layout fluido 
Já os layouts fluidos fazem uso de unidades flexíveis – no lugar de definir as dimensões com o uso de quantidades fixas                                           
são utilizados valores flexíveis. Isso permite, por exemplo, que no lugar de definir que o cabeçalho de uma página tenha                                       
1366 pixels de largura, possamos definir que ele ocupe 90% do tamanho da tela do dispositivo que o visualiza. Daí o                                         
conceito de fluido, ou seja, de adaptabilidade ao campo de visão conforme dimensões do dispositivo que visualiza a                                   
página. 
 
lém dos valores percentuais, há outras unidades de medidas flexíveis, como, por exemplo: 
EM 
Unidade de medida tipográfica, estando relacionada à letra “M”. O tamanho base dessa unidade equivale à largura da letra                                     
“M” em maiúscula. 
REM 
Enquanto o EM está relacionado ao tamanho do elemento de contexto (ou seja, definimos o valor EM de um elemento                                       
tomando como base o seu elemento pai), no REM definimos que o elemento de contexto, o elemento pai, será sempre a                                         
tag HTML <body>. Daí a letra “R” nessa unidade, que faz referência à raiz (root). 
Media Query 
A função de apresentação, de estruturar o layout de uma página, no Ambiente Web, cabe às Folhas de Estilo (CSS).                                       
Trataremos mais a fundo do CSS no próximo tópico. Por ora, para definir o que é Media Query, falaremos um pouco                                         
também sobre CSS. 
Com base na afirmação de que cabe ao CSS estruturar o layout de uma página Web, temos normalmente associada a uma                                         
página Web uma ou mais Folhas de Estilo – que são códigos que definem aspectos de toda a página, como as dimensões                                           
dos elementos, cores de fundo, as cores e os tipos de fonte etc. 
A ​Figura 4 mostra um fragmento de código onde uma Media Query é utilizada para impedir que um menu lateral (o elemento                                           
HTML cuja classe equivale a “menu_lateral”) seja exibido caso a largura da tela do dispositivo seja menor que 360 pixels. 
​Figura 4 – Exemplo 
de Declaração de Media Query. Fonte: Paixão, 2020. 
O resultado das expressões utilizadas na Media Query pode ser verdadeiro ou falso. No caso acima, será verdadeiro sempre                                     
que a largura da tela do dispositivo que visualiza a página seja inferior a 360 pixels. Do contrário, será falso. Ou seja, para                                             
todos os dispositivos cuja largura de tela seja superior a 360px, o código CSS em questão será ignorado. 
 
Scripts 
Quando falamos em Scripts no lado cliente, no Ambiente Web, estamos falando de linguagens de programação que rodam                                   
no navegador e cujo exemplo mais comum é o Javascript. 
Esta linguagem adiciona interação a uma página Web, permitindo, por exemplo, a atualização dinâmica de conteúdos, o                                 
controle de multimídia, a animação de imagens e muito mais. No contexto do design responsivo, sua faceta maisimportante é a de atualização dinâmica de conteúdo – e não só do conteúdo, mas também da apresentação do mesmo. 
DESIGN RESPONSIVO X DESIGN ADAPTATIVO 
O conceito de design adaptativo, muitas vezes, confunde-se com o de design responsivo. Enquanto o segundo, como já                                   
visto anteriormente, consiste na utilização de uma combinação de técnicas para ajustar um site automaticamente em                               
função do tamanho da tela dos dispositivos utilizados pelos usuários, no design adaptativo são usados layouts estáticos                                 
baseados em pontos de quebra (ou de interrupção), onde, após o tamanho de tela ser detectado, é carregado um layout                                       
apropriado para ele. Em linhas gerais, no design adaptativo, são criados layouts com base em seis tamanhos de tela mais                                       
comuns. A aplicação desses dois conceitos na prática acontece da seguinte forma: 
DESIGN RESPONSIVO 
Medias Queries são utilizadas, em conjunto com scripts, para criar um layout fluido que se adapte – através, sobretudo, da                                       
adequação das dimensões de seus elementos – ao tamanho da tela do dispositivo utilizado pelo visitante. 
 
 
DESIGN ADAPTATIVO 
Um site é planejado e construído com a definição de seis layouts predefinidos, onde são previstos pontos de quebra para                                       
que a página se adapte às seis diferentes dimensões utilizadas. 
 
Mobile first 
Uma das abordagens de design responsivo mais utilizadas atualmente é a ​mobile first​. Tal abordagem está centrada no                                   
crescente uso de dispositivos móveis na navegação no Ambiente Web e defende que em primeiro lugar seja pensado o                                     
design para telas menores e, posteriormente, para telas maiores. Trata-se de um enfoque progressivo (​progressive                             
enhancement​), no qual parte-se dos recursos e tamanhos de tela disponíveis nos dispositivos menores, progredindo com a                                 
adição de recursos e conteúdo tendo em vista as telas e os dispositivos maiores. 
A partir da definição de ​mobile first podemos identificar o seu contraponto com o desenvolvimento Web tradicional, em                                   
que temos o conceito de degradação graciosa (​graceful degradation​): 
A aplicação prática do mobile first consiste em planejar o desenvolvimento de um site priorizando os recursos e as                                     
características presentes nos dispositivos móveis, como o tamanho de tela, a largura de banda disponível e até mesmo                                   
recursos específicos, como os de localização, por exemplo. 
VERIFICANDO O APRENDIZADO 
 
A interface é a disciplina responsável pelo layout no desenvolvimento de software. Um dos seus princípios é garantir a                                     
criação de telas mais bonitas, que chamem a atenção de quem utiliza um software ou aplicativo. 
O objetivo da interface vai além de aspectos como definir o que é ‘mais ou menos bonito’. Seu cerne está em garantir que,                                             
sobretudo, haja uma comunicação mais natural e intuitiva entre usuário e sistema computacional. 
Em relação ao design responsivo, assinale qual opção corresponde à melhor ação a ser tomada para sua aplicação: 
Estudar os dados provenientes das visitas ou, na ausência destes, os relacionados às pesquisas de comportamento de                                 
acesso a websites para planejar a construção ou remodelação de um site a fim de garantir que ele se adapte às                                         
características dos dispositivos que o acessa. 
Como visto anteriormente, para aplicar o Design Responsivo devemos fazer uso de uma combinação de técnicas a fim de                                     
garantir que uma página corresponda às preferências e características dos seus usuários com base no tamanho da tela,                                   
plataforma e orientação dos dispositivos por eles utilizados. 
Modulo 3 
 
AS TECNOLOGIAS DO LADO CLIENTE: HTML5, CSS E JAVASCRIPT 
HTML 
A HTML é considerada a tecnologia fundamental da Web, pois sua função é definir a estrutura de uma página Web. Essa                                         
linguagem de marcação, criada por Tim Berners-Lee na década de 1990, inicialmente objetivava permitir a disseminação                               
de pesquisas entre Lee e seus colegas pesquisadores, mas foi rapidamente difundida até formar a rede que,                                 
posteriormente, veio a se tornar a World Wide Web como a conhecemos atualmente. 
 
Em linhas gerais, a HTML é uma linguagem de marcação simples, composta por elementos, chamados ​tags​, que são                                   
relacionados a textos e outros conteúdos a fim de lhes dar significado. Por exemplo: Podemos marcar um texto como                                     
sendo um parágrafo, uma lista ou uma tabela. É possível, ainda, inserir vídeos e imagens. Além disso, também utilizamos                                     
essa marcação para definir a estrutura de um documento de forma lógica: menu de navegação, cabeçalho, rodapé etc. As                                     
tags podem ser agrupadas em tipos: 
ESTRUTURAIS 
Juntamente com o elemento de definição do DocType, como pode ser visto na Figura 5, compõem a estrutura obrigatória                                     
de uma página web. 
 
 
DE CONTEÚDO 
Como nome sugere, têm o papel de marcar o conteúdo pelo seu tipo. 
 
SEMÂNTICO 
Relacionado ao tipo de conteúdo e à criação de seções para agrupá-lo de acordo com sua função no documento. Para                                       
melhor entender esse conceito, veja a Figura 6. 
 
 
HTML 5 
A versão mais recente da HTML é a 5, que trouxe algumas importantes evoluções em relação às anteriores. Entre tais                                       
novidades destacam-se: 
swap_horiz Arraste para os lados. 
 
Novos atributos e elementos, com foco sobretudo na semântica. 
 
Melhorias de conectividade. 
 
 
Possibilidade de armazenamento de dados no lado cliente. 
 
Otimização nas operações off-line. 
 
Suporte estendido a multimídia –  
CSS 
O ​CSS corresponde à segunda camada no tripé de tecnologias que formam o lado cliente, no Ambiente Web. Trata-se de                                       
uma linguagem declarativa cuja função é controlar a apresentação visual de páginas Web. Com isso, têm-se a separação                                   
de funções em relação à HTML: 
Uma cuida do conteúdo, da estruturação; a outra cuida da apresentação, do layout. 
 
Sintaxe 
A sintaxe da CSS consiste em uma declaração onde são definidos o(s) elemento(s) e o(s) estilo(s) que desejamos aplicar                                     
a ele(s) ou, em outras palavras: 
O seletor 
Um elemento HTML (body, div, p etc.) ou o seu identificador (atributo id) ou classe (atributo class). 
 
A propriedade 
Característica do elemento (cor, fonte, posição etc.). 
 
O valor 
Novo parâmetro a ser aplicado à característica do elemento. 
 
Exemplo 
Para alterar a cor da fonte de um texto inserido em um parágrafo, poderíamos utilizar uma das variações apresentadas na                                       
Figura 7: 
 
 
No exemplo anterior, vimos duas formas para definir o estilo de uma tag de parágrafo. No primeiro, o elemento ao qual o                                           
estilo foi aplicado foi definido com a utilização de seu atributo ID. A respeito dos seletores, propriedades existentes e mais                                       
detalhes sobre a CSS é recomendado ler o Guia de Referência do próprio W3C. 
Como inserir o CSS na página Web 
Há quatro formas de inserir o CSS em um documento: Inline, Interno, Externo e Escopo. 
INLINE 
Os estilos, neste caso, são aplicadoscom a utilização do atributo “style” seguido de uma ou mais propriedades/valores. 
INTERNO 
Os estilos são definidos com a utilização da tag <style>, dentro da tag <head> no documento. 
EXTERNO 
Essa é a forma preferencial de inserir estilos. Nela, é utilizado um arquivo externo, com extensão “.css”, contendo apenas                                     
estilos. Para vincular esse arquivo externo ao documento é utilizada a tag <link> dentro da tag <head>. 
ESCOPO 
Esta forma foi introduzida pela HTML5. Com ela, um estilo pode ser definido em nível de escopo, ou seja, declarado em                                         
seções específicas do documento. Sua declaração é feita da mesma forma que na Inline. Entretanto, no lugar de ser                                     
declarada no <head>, é declarada dentro da tag à qual se quer aplicar os estilos. 
 
Seletores CSS 
A CSS permite uma série de combinações para a aplicação de estilos. Pode-se usar aplicações simples, como as vistas                                     
até aqui, nas quais apenas um elemento foi selecionado, ou combinações mais complexas, em que vários elementos                                 
podem ser agrupados a fim de receberem um mesmo estilo. 
Boas práticas relacionadas à CSS 
É boa prática e fortemente recomendado utilizar a forma Externa para incluir CSS em uma página Web. Entre outras                                     
vantagens, como uma melhor organização do código, separando o HTML do Estilo, devemos ter em mente que um mesmo                                     
arquivo CSS pode ser usado em várias páginas de um site. 
Pré-processadores 
Em linhas gerais, um pré-processador é um programa que permite gerar CSS a partir de uma sintaxe − própria de cada                                         
pré-processador −, que inclui inúmeras facilidades não suportadas naturalmente pelo CSS, como variáveis, funções, regras                             
aninhadas, entre outras. 
O fluxo de gerar CSS através de um pré-processador consiste na escrita do código contendo as regras a serem aplicadas,                                       
fazendo uso da sintaxe de cada pré-processador. Ao final, esse código será compilado, gerando então o código CSS                                   
normal. 
JAVASCRIPT 
O ​Javascript completa o tripé de tecnologias Web que rodam no lado cliente. Trata-se de uma linguagem de programação                                     
que, assim como o CSS, é interpretada pelo Navegador. Entre suas principais características, destaca-se o fato de ser                                   
multiparadigma (orientação a objetos, protótipos, funcional etc.). 
 
Javascript 
Costuma-se abreviar o seu nome como “JS”, que é também a extensão de seus arquivos − quando vinculados                                   
externamente ao documento HTML. 
Sua função é, sobretudo, fornecer interatividade a páginas Web, e foi criada com o intuito de diminuir a necessidade de                                       
requisições ao lado Servidor, permitindo a comunicação assíncrona e a alteração de conteúdo sem que seja necessário                                 
recarregar uma página inteira. 
Sintaxe 
O Javascript é, ao mesmo, amigável, mas também completo e poderoso. Embora criado para ser leve, uma vez que é                                       
interpretado nativamente pelos navegadores, trata-se de uma linguagem de programação completa e, como já                           
mencionado, multiparadigma. Logo, seus códigos podem ser tanto estruturados quanto orientados a objetos. Além disso,                             
permitem que bibliotecas, como ​Jquery​, ​Prototype etc. sejam criadas a partir de seu core, estendendo assim a sua                                   
funcionalidade. Vejamos algumas características dessa linguagem: 
EVENTOS E MANIPULAÇÃO DOM 
Essa linguagem oferece amplo suporte à manipulação de eventos relacionados a elementos HTML. É possível, por                               
exemplo, utilizar um elemento <button> (botão) que, ao ser clicado, exiba uma mensagem na tela. Ou, ainda, aumentar o                                     
tamanho de uma fonte ou diminuí-lo. 
MENSAGENS E ENTRADA DE DADOS 
O Javascript possui suporte a funções nativas para a exibição de caixas de diálogo para entrada de dados ou exibição de                                         
mensagens, como alertas, por exemplo. 
JSON 
O ​JSON é um formato para troca de dados no Ambiente Web. Logo, é importante fazer menção a ele quando falamos das                                           
tecnologias do lado cliente, uma vez que tal formato está entre os mais utilizados no intercâmbio de dados com o lado                                         
servidor e entre diferentes sistemas, independentemente da linguagem utilizada nos mesmos. Embora relacionado ao                           
Javascript, como o próprio nome diz, não é um formato exclusivo dessa linguagem e pode ser usado mesmo em sistemas                                       
onde esta não esteja presente. 
Como inserir o Javascript na página Web 
A inserção do Javascript em uma página HTML é feita de forma bastante similar à da CSS. Dessa forma, é possível tanto                                           
inserir um código Javascript diretamente no documento − dentro da tag <script>, seja no <head> ou em qualquer outra                                     
parte − como através de arquivos externos com a extensão “.js”, devendo estes serem linkados na tag <head>. Vejamos                                     
alguns exemplos das formas de inclusão do Javascript: 
 
Exemplo 
 
A primeira parte da Figura 8 mostra o fragmento de uma página HTML onde há um botão e um evento – onclick – que, ao                                                 
ser disparado (no click do botão), chama a função “funcaoJavascript”, declarada no corpo do HTML, logo após a tag                                     
<button>. Tal função exibe um alerta na tela. A segunda parte da Figura mostra a declaração do Javascript dentro da tag                                         
<head>. Este código faz uso de um evento, o de carregamento da janela do navegador, para exibir uma alerta de                                       
boas-vindas. Por fim, na última parte da Figura vemos a declaração para a incorporação de um arquivo externo JS, assim                                       
como o código do arquivo. 
Boas práticas relacionadas ao Javascript 
1 Assim como foi dito em relação à CSS, deve-se dar preferência à utilização de arquivos externos para a incorporação de                                         
Javascript. 
 
2 Outra boa prática consiste em incorporar arquivos externos de Javascript ao final da página, após o fechamento da tag                                       
<body>. Com isso, temos ganho de desempenho, uma vez que o carregamento da página HTML é feito de cima para                                       
baixo. Logo, quanto mais código, CSS ou Javascript, existir no topo da página, dentro da tag <head>, mais demorado será                                       
o carregamento da página em si. 
 
3 Por outro lado, deve-se tomar cuidado ao mover o Javascript para o final da página: caso algum elemento, evento ou                                         
funcionalidade da página dependa do código em questão, eles não serão executados, uma vez que foram carregados                                 
antes do Javascript. Nesse caso, pode ser adotada uma abordagem híbrida, onde os códigos Javascript dos quais a                                   
página dependa para funcionar corretamente fiquem no início e os demais, ao final. 
 
Atenção 
Assim como já foi falado em relação à CSS, é também recomendado minificar o arquivo .js a fim de otimizar o                                         
desempenho do carregamento da página. 
VERIFICANDO O APRENDIZADO 
1. Ao desenvolvermos uma página Web devemos nos preocupar não somente com o resultadofinal, mas também em 
utilizarmos corretamente cada uma das tecnologias. 
 
Neste contexto, assinale a opção correta quanto às boas práticas a serem seguidas: 
Utilizar os elementos HTML corretamente, tendo em mente a semântica; separar as responsabilidades entre cada                             
tecnologia; otimizar o tempo de carregamento das páginas; utilizar folhas de estilo e Javascript a partir de arquivos                                   
externos. 
 
Como frisado nas seções de Boas Práticas, o Ambiente Web está em constante evolução. Tal fator, somado aos princípios                                     
básicos como semântica e separação de responsabilidades definem o que são as boas práticas quanto às tecnologias                                 
Client Side. 
 
Como vimos, cada tecnologia do lado cliente possui sua própria função. Logo, a respeito da separação de funções e 
responsabilidades, assinale a alternativa correta: 
O HTML cuida do conteúdo, o CSS, do layout/apresentação e o Javascript, do comportamento/interação. Com isso, ao                                 
não misturarmos as funções − embora seja possível −, obtemos vários benefícios, como o de separação de interesses e                                     
consequente facilidade para manter o código, uma vez que podemos ter diferentes pessoas trabalhando ao mesmo tempo                                 
em diferentes partes do site. 
As tecnologias do lado cliente foram desenvolvidas em momentos distintos, a começar pela HTML. Com isso, a partir do                                     
surgimento de novas necessidades, novas tecnologias, como a CSS e o Javascript foram desenvolvidas. A utilização em                                 
conjunto destas tecnologias, que se complementam, traz inúmeros benefícios, desde a otimização na criação das páginas                               
ao resultado final. 
 
Modulo 4 
 
AS TECNOLOGIAS DO LADO SERVIDOR: 
PHP, PÁGINAS DINÂMICAS E ACESSO A DADOS 
PHP 
Uma das principais funções das linguagens de programação Server Side é permitir o acesso a informações armazenadas                                 
em Bancos de Dados. Uma vez que apenas utilizando HTML e Javascript isto não é possível, faz-se necessária a utilização                                       
de uma linguagem no lado servidor. Entre as diversas linguagens disponíveis no lado servidor estão o Java, o Python, o                                       
ASP, o .NET e o PHP – que conheceremos um pouco mais ao longo deste tópico. 
O que é o PHP e para que serve 
PHP é uma linguagem de programação baseada em script, open source e destinada, sobretudo, ao desenvolvimento Web.                                 
Trata-se de uma linguagem criada para ser simples, tendo nascida estruturada e, posteriormente, adotado o paradigma de                                 
orientação a objetos – isto apenas 10 anos depois da sua criação. 
Frisando o que já foi dito acima, o principal foco do PHP são os scripts do lado servidor, dando suporte a funções como 
coleta e processamento de dados oriundos de formulários HTML, geração de conteúdo dinâmico com o acesso a bancos 
de dados, entre outras. Além disso, do foco nos scripts no lado servidor, é possível também utilizar o PHP através de 
scripts em linha de comando e na criação de aplicações Desktop (com a utilização da extensão PHP-GTK), embora não 
seja a melhor linguagem para isso. 
 
Como o PHP funciona 
O PHP é uma linguagem interpretada, ou seja, ela precisa “rodar” sobre um servidor Web. Com isso, todo o código gerado                                         
é interpretado pelo servidor, convertido em formato HTML e então exibido no navegador. 
Etapa 01 
O PHP é uma linguagem interpretada, ou seja, precisa rodar sobre um servidor Web. 
Etapa 02 
Com isso, todo o código gerado é interpretado pelo servidor. 
Etapa 03 
Convertido em formato HTML. 
Etapa 04 
E, então, exibido no navegador. 
Logo, o código-fonte não pode ser visto no lado cliente, mas apenas o HTML gerado. 
 
Outra característica importante do PHP é poder ser utilizado na maior parte dos Sistemas Operacionais, assim como em                                   
vários servidores Web diferentes, como o Apache, o IIS e o Nginx, entre outros. 
Anatomia de um script PHP 
Um script PHP é composto por código delimitado pelas tags <?php e ?>. A última, de fechamento, não é obrigatória.                                       
Devido à sua simplicidade, um mesmo script PHP pode conter tanto código estruturado quanto orientado a objetos. Pode                                   
até conter código de marcação HTML. Neste último caso, o código próprio do PHP deverá ficar entre as tags de abertura e                                           
fechamento. A ​Figura 9 mostra dois exemplos de código, um apenas em PHP e outro mesclado com HTML. Ao                                     
analisarmos os códigos, inicialmente é importante notar que ambos possuem a extensão “.php”. Outras extensões                             
possíveis, mas atualmente em desuso, são “.php3”, “.php4”, “.phtml”. 
​Figura 9 – 
Exemplos de Código PHP. Fonte: Paixão, 2020. 
 
A seguir, no primeiro código, temos as tags de um arquivo HTML comum, com exceção do código inserido dentro das tags                                         
<?php e ?>. Aqui temos a função “echo”, que serve para imprimir algo na tela, associado a uma frase. Quando visualizado                                         
no navegador, o código será renderizado como HTML normal. Caso exibamos a fonte, só será possível ver as tags HTML e                                         
o conteúdo, sem o código PHP em questão. 
Na segunda imagem, temos um exemplo de código onde são definidas duas variáveis, $nome e $email, que recebem dois                                     
valores enviados de um formulário HTML, através do método POST. Daí a utilização do array superglobal $_POST – cujos                                     
índices ‘nome’ e ‘email’ correspondem ao atributo ‘name’ dos campos input do formulário. A seguir, é utilizada a função                                     
“echo” para a impressão de uma frase e do conteúdo das variáveis recebidas. Repare ainda na utilização, mais uma vez,                                       
de uma tag html, a <br/>, em meio a código PHP. 
Sintaxe 
Assim como fizemos com o Javascript, veremos a seguir um resumo sobre a sintaxe do PHP: 
VARIÁVEIS 
As variáveis em PHP são criadas com a utilização do símbolo de cifrão ($). Além disso, PHP é ​case sensitive​. Logo,                                         
tomando como exemplo as variáveis mostradas na Figura 9, $nome e $email, ambas são diferentes das variáveis $Nome                                   
e $Email. 
TIPOS DE DADOS 
O PHP é uma linguagem fracamente tipada. Logo, embora possua suporte para isto, não é necessário definir o tipo de                                       
uma variável em sua declaração. 
Os tipos de dados disponíveis em PHP são: Booleanos, inteiros, números de ponto flutuante, strings, arrays, interáveis                                 
(iterables), objetos, recursos, NULL e call-backs. 
OPERADORES CONDICIONAIS 
O PHP tem suporte às condicionais if, else, if e else ternários, if else e switch. 
LAÇOS DE REPETIÇÃO 
Estão disponíveis os laços: For, foreach, while e do-while. 
FUNÇÕES E MÉTODOS 
O PHP possui uma grande quantidade de funções e métodos nativos. 
Include 
Require 
Include once 
Require_once 
Acesso ao sistema de arquivos 
Através do PHP é possível ter acesso ao sistema de arquivos do servidor Web. Com isso é possível, por exemplo,                                       
manipular arquivos e diretórios, desde a simples listagem à inclusão ou exclusão de dados. 
PÁGINAS DINÂMICAS 
Se fôssemos implementar em uma página Web tudo o que estudamos até aqui, teríamos uma página HTML básica, comum pouco de interação no próprio navegador, graças ao Javascript, e também com um pouco de estilo, este devido ao                                       
CSS. 
Além disso, já sabemos que é possível enviar dados do HTML para o PHP através de um formulário. Mas e agora? Qual o                                             
próximo nível? O que fazer a seguir? A resposta para essas duas perguntas está no que abordaremos a seguir: ​páginas                                       
dinâmicas​ e acesso a dados. 
A combinação das tecnologias do lado cliente com as tecnologias do lado servidor produzem as páginas dinâmicas.                                 
Nelas, é possível receber as informações provenientes do cliente, processá-las, guardá-las, recuperá-las e utilizá-las                           
sempre que desejarmos. E não é só isso: Podemos guardar todo o conteúdo do nosso blog no banco de dados. Com isso,                                           
teríamos apenas uma página PHP que recuperaria nosso conteúdo no banco e o exibiria no navegador. A Tabela 2                                     
apresenta um pequeno resumo comparativo entre as páginas estáticas e dinâmicas. 
 
 
Tabela 2 – Comparativo entre páginas estáticas e dinâmicas. Fonte: Paixão, 2020. 
 
Páginas estáticas Páginas dinâmicas 
nclusão/Alteração/Exclusão 
de conteúdo 
Manualmente, direto no 
código HTML 
Automaticamente através de scripts no lado 
servidor, como PHP 
Armazenamento do conteúdo Na própria página HTML Em um banco de dados 
Outra importante característica de um site dinâmico é possibilitar a utilização de ferramentas de gestão de conteúdo (CMS)                                   
para manter as informações do site sempre atualizadas. Com isso, depois de pronto, não será mais necessário mexer nos                                     
códigos-fonte, basta acessar a ferramenta e gerenciar o conteúdo através dela. Já no site estático, será preciso modificar                                   
diretamente o código HTML, tornando necessário alguém com conhecimento técnico para isto. 
ACESSO A DADOS 
Como mencionado anteriormente, o Ambiente Web é composto por tecnologias que rodam do lado cliente e do lado servidor.                                     
Complementando o que vimos até aqui, temos ainda, do lado servidor, ​o banco de dados​. De forma resumida, podemos                                     
defini-lo como um repositório onde diversas informações podem ser armazenadas e posteriormente recuperadas. Para                           
realizar a gestão destes dados, existem os ​SGBD​, ou Sistemas Gerenciadores de Bancos de Dados. 
Se, por um lado, o SGBD é responsável por montar a estrutura do banco de dados − entre outras funções −, por outro lado,                                               
para recuperarmos uma informação guardada em um banco de dados e exibi-la em uma página Web, é necessário utilizar                                     
uma linguagem do lado servidor, como o PHP. Em outras palavras, não é possível acessar o banco de dados utilizando                                       
apenas HTML ou mesmo Javascript. Sempre será necessária a utilização de uma linguagem server side para o acesso                                   
aos dados. 
Formas de acesso a dados 
A partir das tecnologias vistas até aqui, há algumas formas de acessar os dados guardados em um banco de dados. 
A PARTIR DO HTML 
Uma das maneiras mais comuns de enviar e recuperar dados a partir do HTML é fazendo uso de formulários. Com eles é                                           
possível submetermos nossos dados para uma linguagem no lado servidor/PHP. Este, então recebe as informações e as                                 
armazena no banco de dados. Da mesma forma acontece o caminho inverso. Podemos ter um formulário em nossa                                   
página HTML que solicite dados ao PHP e este as envie de volta, após recuperá-las do banco de dados. 
Vale lembrar ainda o que vimos sobre o PHP: Ele permite a utilização de códigos HTML diretamente em seus scripts.                                       
Logo, uma página Web feita em PHP pode recuperar dados do banco de dados toda vez que é carregada. É isso o que                                             
acontece na maioria dos sites. Cada página visualizada é composta por conteúdo armazenado em banco de dados e                                   
código HTML produzidos por uma linguagem do lado servidor. Com isso, cada página que abrimos em sites dinâmicos                                   
implica em uma chamada/requisição ao lado servidor – script e banco de dados. 
 
A PARTIR DO JAVASCRIPT 
O Javascript possui, essencialmente, duas formas para se comunicar com linguagens do lado Servidor: Através das APIs                                 
(Application Programming Interface) XMLHttpRequest e Fetch API. A primeira é amplamente utilizada, sendo a forma mais                               
comum de realizar esta comunicação. É normalmente associada a uma técnica de desenvolvimento Web chamada AJAX.                               
Já a segunda é mais recente e oferece algumas melhorias, embora não seja suportada por todos os navegadores. 
A comunicação em ambas consiste em, através de algum evento no navegador – que normalmente é originada em uma                                     
ação disparada pelo usuário −, enviar uma requisição ao lado servidor, como recuperar algum dado, por exemplo, tratar o                                     
seu retorno e o exibir na tela. Isso tudo sem que seja necessário recarregar toda a página. 
 
VERIFICANDO O APRENDIZADO 
1. O PHP é uma linguagem de script, altamente adaptável à HTML e que lhe possibilita interatividade e dinâmica. Assinale a 
alternativa correta quanto a esta afirmação: 
Para recuperar informações de um banco de dados, a HTML precisa fazer uso do PHP, seja diretamente − a partir de                                         
algum elemento próprio, − ou através de Javascript. 
 
O PHP é uma linguagem Server Side, utilizada, sobretudo, para criar páginas dinâmicas, em conjunto com a HTML e                                     
demais tecnologias do lado cliente. Embora muito adaptável à HTML, o PHP é uma linguagem de programação completa,                                   
que possui uma sintaxe específica, assim como funções e métodos nativos que lhe possibilitam o acesso tanto ao                                   
sistema de arquivos quanto à diferentes bancos de dados. 
 
As páginas dinâmicas, ao contrário das páginas estáticas, proveem dinamismo ao Ambiente Web. Neste contexto, 
assinale a opção correta: 
A utilização de linguagens de programação Server Side é a principal característica de uma página dinâmica. 
Comentário 
Parabéns!​ A alternativa ​"D"​ está correta. 
 
Nas páginas dinâmicas, todo o conteúdo de um site pode ser gerenciado automaticamente através de scripts que                                 
rodam no servidor. 
Tema 2 
O PRINCÍPIO DA HTML 
A especificação da HTML foi formada a partir da junção de dois padrões: o ​SGML e o HyTime. O primeiro, SGML (Standard                                           
Generalized Markup Language), é, na verdade, um padrão ISO que especifica as regras para a criação de linguagens de                                     
marcação que sejam independentes de plataforma. 
Já o ​HyTime é um padrão desenvolvido pela ISO com o objetivo de possibilitar que hiperdocumentos hipermídia                                 
pudessem ser descritos em função de sua estrutura e conteúdo e, consequentemente, utilizados por quaisquer sistemas                               
conformantes (Newcomb et al, 1991). 
Inicialmente, a especificação da HTML e sua evolução foram mantidas pelo IETF (Internet Engineering Task Force), desde                                 
sua primeira publicação formal, em 1993. Entretanto, a partir de 1996 passou a ser mantida pelo ​WorldWide Web                                     
Consortium (W3C)​, além de ter ganhado também o status de norma internacional (ISO/IEC) em 2000. 
A EVOLUÇÃO DA HTML: VERSÕES 
Ao longo dos anos, a HTML tem passado por uma série de aperfeiçoamentos. Tal processo é liderado pelo W3C. Desde a                                         
sua criação, a HTML teve várias versões: HTML, HTML 2.0, HTML 3.2, HTML 4.01, XHTML, HTML 5, HTML 5.1 e HTML 5.2. 
Veja na tabela a seguir o histórico de versões da HTML: 
 
Ano Versão Histórico 
991 HTML Tim Berners-Lee cria a HTML 
995 HTML 2 Grupo de Trabalho HTML define a HTML 2.0 
Tabela 1: Histórico de versões da HTML 
TIPOS DE DOCUMENTO 
O ponto inicial da estrutura de uma página Web é o tipo de documento a ser utilizado. Inicialmente, a HTML continha                                         
apenas tags para ​marcações simples​, uma vez que ainda não existia um dispositivo com interface gráfica onde pudesse                                   
ser exibida. 
Com isso, as primeiras tags eram relacionadas a elementos como títulos, parágrafos, quebras de linha etc. Entretanto,                                 
com a sua rápida expansão e sobretudo pelo lançamento do primeiro navegador, o Mosaic, surgiu a necessidade de                                   
criação de novas tags, para ​marcações mais complexas​. 
Tal necessidade se tornou contínua, tendo como principais pilares estes eventos já mencionados: a rápida expansão da                                 
Web e a construção de novos navegadores. 
O fato de que cada navegador implementava seus próprios padrões, incluindo tags que só podiam ser interpretadas por                                   
eles mesmos, tornou necessária a adoção de padrões. Por isso, o W3C criou o DTD – Definição de Tipos de Documentos                                         
(do inglês Document Type Definition), que é uma lista de elementos, atributos e requisitos relacionados a uma                                 
determinada linguagem ou variação da linguagem. 
UTILIZANDO DOCTYPES – DOCUMENT TYPES 
A importância dos Document Types, na criação de páginas HTML, diz respeito ao conjunto de tags que podem ser usadas e                                         
que serão ou não ​renderizadas​ a partir do tipo utilizado. 
Antes da HTML5, existia um conceito chamado de ​Concordância de Documento​. Embora relevante apenas nas versões                               
anteriores da HTML, ainda é importante abordá-lo, uma vez que muitas páginas Web ainda não foram portadas para a HTML5.                                       
Tal conceito significa que cada página precisa ser concordante com a especificação W3C oficial para a qual ela foi escrita. 
997 HTML 3.2 W3C publica a Recomendação HTML 3.2 
999 HTML 4.01 W3C publica a Recomendação HTML 4.01 
2000 XHTML W3C publica a Recomendação XHTML 1.0 
2014 HTML5 W3C publica a Recomendação HTML5 
2016 
2017 
HTML 5.1 W3C candidata a Recomendação HTML 5.1 
W3C publica a Recomendação HTML 5.1 2ª edição 
2017 HTML 5.2 W3C publica a Recomendação HTML5.2 
STRICT 
Como o próprio nome diz, determinava uma série de restrições e exigências: obrigatoriedade de separação entre a                                 
estrutura e a apresentação; limitação nos elementos de apresentação disponíveis - como tags de fonte e atributos de                                   
alinhamento −; ausência de suporte a tags obsoletas etc. 
TRANSITIONAL 
Era mais maleável em relação aos atributos de apresentação, além de possibilitar a utilização de tags obsoletas. 
FRAMESET 
Tag obsoleta da HTML4 usada para combinar múltiplos frames e exibi-los como numa única página. 
Vemos o fragmento do código inicial de uma página HTML 4.01: 
<!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional//EM” http://www.w3.org/TR/html4/loose.dtd> 
Na declaração, são definidas as seguintes informações sobre a página HTML: 
● Tipo de Documento: HTML; 
● Acesso à DTD: Public – logo, a DTD a que se refere está disponível para uso de forma pública; 
● Onde se encontra o DTD: Foi criado e está hospedado no W3C; 
● Versão da HTML: 4.01 Transitional; 
● URL da especificação: O endereço ​http://www.w3.org/TR/html4/loose.dtd​ leva à especificação em questão. 
Portanto, o DOCTYPE: 
Não é uma tag HTML, mas sim uma instrução. 
É uma declaração que serve para informar ao navegador qual a versão da HTML usada em um arquivo HTML. 
A partir da HTML5, quando a HTML deixou de ser baseada na SGML, a declaração do DOCTYPE foi simplificada, como visto                                         
a seguir: 
<!DOCTYPE html> 
Comparando as declarações do DocType entre a HTML5 e a HTML4, notamos algumas diferenças. 
A principal é que a HTML5, ao contrário das versões anteriores, não se baseia na SGML e, portanto, não requer 
referência a um DTD. 
 
ESTRUTURA DE UMA PÁGINA WEB – ELEMENTOS OBRIGATÓRIOS 
Como visto anteriormente, a estruturação de uma página Web tem início na definição do DocType a ser utilizado. Em                                     
seguida, é necessário inserir um conjunto de tags que, em conjunto com o DocType, formam a sua estrutura básica. Tal                                       
estrutura é demonstrada na figura 1: 
 
<!doctype html> 
<html> 
<head> 
</head> 
<body> 
</body> 
</html> 
Figura 1 – Estrutura básica de uma página Web. 
Vamos entender o que significa cada tag? 
Raiz 
A tag inicial, após a declaração do DocType, é a <html>. Tal elemento é a raiz do documento. Logo, e lembrando que o código                                               
HTML é composto por uma estrutura hierárquica de tags, podemos dizer que a <html> é a raiz da árvore do documento. 
Outra característica importante sobre as tags, que abordaremos de maneira mais aprofundada a seguir, é que uma 
tag deve ser aberta e fechada. 
A declaração <html> é a abertura, e o seu fechamento se dá com a declaração </html>. Com isso, observando a figura 1, é                                             
possível perceber que as demais tags estão contidas dentro da tag raiz, <html>. 
Cabeçalho 
A tag <head> é chamada de cabeçalho do documento. Fazendo analogia ao corpo humano, devemos vê-la como a cabeça,                                     
uma vez que esta contém as tags que serão usadas para manter todo o documento funcionando e em ordem. 
Na tabela a seguir é possível visualizar as tags que fazem parte do cabeçalho: 
Tabela 2: Lista de tags contidas no cabeçalho da página Web. 
Corpo 
Logo abaixo do cabeçalho deve ser inserida a tag <body>. Esta é responsável pela estruturação do documento, sobretudo de                                     
seu conteúdo e também apresentação – embora seja fortemente recomendado que a apresentação do documento, como                               
será visto no módulo específico, seja feita por meio de folhas de estilo (CSS). 
Quando navegamos em um website, todo o conteúdo que vemos – os textos, imagens e demais elementos – está 
contido dentro da tag <body>. 
ESTRUTURA DE UMA PÁGINA WEB – ELEMENTOS BÁSICOS 
Embora as páginas Web sejam diferentes umas das outras, elas tendem a compartilhar uma mesma estrutura. Isto é, além                                     
da estrutura apresentada acima, uma página Web é, na maioria das vezes, composta por seções, sendo as mais comuns: 
CABEÇALHO 
Tag Para que serve 
<title> É o título do documento, sendo visualizada na barra de título do navegador. 
<meta> Engloba uma série de informações – comumente chamadas de metainformações – como a 
descrição da página, palavras-chave etc. 
<script> É responsável pela inclusão e/ou definição de scripts relacionados ao documento. 
<link> É responsável pela inclusão de folhas de estilo (externas) relacionadas ao documento. 
Também possibilita a inclusão de favicons (pequenos ícones que aparecem na barra de 
endereços do navegador). 
<style> Assim como a anterior, é responsável pelo vínculode folhas de estilo ao documento − quando 
elas são declaradas diretamente no documento. 
Uma área inicial, logo na parte superior da página. Normalmente vemos um título, uma logomarca ou algo do tipo. 
BARRA DE NAVEGAÇÃO 
Esta área pode ser tanto horizontal quanto vertical – e, em alguns casos, os dois. Contém os links para navegação pelas                                         
seções/páginas do site. 
CONTEÚDO 
O conteúdo principal da página, que pode ser dividido em subseções. 
BARRA LATERAL 
Pode conter tanto links de navegação quanto informações adicionais que forneçam complemento ao conteúdo principal. 
RODAPÉ 
A área final da página, onde normalmente são dispostos links, avisos de direitos autorais, informações complementares                               
sobre o proprietário do site etc. 
 
COMO FUNCIONA A HTML 
Após concluído, o documento estruturado, composto por tags, deve ser salvo com a extensão “html” ou “htm”. Assim, ele                                     
estará pronto para ser lido por um dispositivo, como um navegador Web – em um computador pessoal ou em um                                       
smartphone. Ou seja, ​quando uma página Web é exibida no navegador, o que vemos é o seu conteúdo​: o texto, as                                         
imagens etc., não o código ou as tags. Esse processo consiste, como já vimos, no que chamamos de interpretação e                                       
renderização. 
VERIFICANDO O APRENDIZADO 
1. Com relação aos Tipos de Documento, DocTypes, marque a afirmativa correta: 
A combinação entre a definição de um DocType e a utilização das tags suportadas por ele permite a correta renderização                                       
de uma páginas Web. 
 
Conforme visto nas seções ​Tipos de Documento e Utilizando DOCTYPEs – Document Types​, o DocType é uma instrução                                   
obrigatória e permite que seja informado ao navegador ou dispositivo o tipo de documento a ser carregado, permitindo assim a                                       
correta renderização da página. 
Assinale a alternativa que contém o conjunto de tags que forma a estrutura considerada obrigatória em uma página 
HTML: 
<DocType><html><head> e <body> 
 
Conforme visto na Figura 1, a estrutura considerada obrigatória, para a correta renderização de uma página Web nos                                   
navegadores, é composta pelas tags <DocType><html><head> e <body>. 
 
Modulo 2 
 
APROFUNDANDO O CONCEITO DE TAGS 
Aprendemos que a HTML é uma linguagem de marcação que faz uso de tags para estruturar o seu conteúdo. Mas o que                                           
são tags? Como visto nos exemplos do módulo anterior, tags são palavras, escritas entre os caracteres de menor “<” e                                       
maior “>” e que servem para informar ao navegador a estrutura e o significado do conteúdo inserido em uma página Web. 
COMO DECLARAR AS TAGS 
Antes de conhecermos mais a fundo as tags, sua composição e tipos, vamos voltar à criação. 
O primeiro ponto a se ter em mente é que existe um conjunto já definido de tags (padronizado pelo W3C). Logo, não é                                             
possível criarmos as nossas próprias tags HTML. 
Outro ponto importante é a forma como uma tag é escrita, entre os sinais de menor e maior. Além disso, ela deve, 
obrigatoriamente, ser fechada. Para isso, repetimos a declaração da tag e utilizamos uma barra “/” antes do seu 
nome. 
Exemplo 
Vejamos alguns exemplos: 
● <h1>Título de uma seção</h1> 
● <p>Parágrafo contendo um texto</p> 
Com base no primeiro exemplo, dizemos que a tag foi iniciada ao inserirmos o “<h1>” e fechada no “</h1>”. 
 
Existem algumas tags que fogem à essa regra. Um exemplo bem conhecido é a de quebra de linha: <br />. Repare que,                                           
nesse caso, a tag é fechada com a utilização da “/” logo antes do sinal de maior. 
A tag de quebra de linha tornou-se obsoleta a partir da HTML5. 
 
TIPOS E COMPOSIÇÃO DAS TAGS 
As tags podem ser divididas em tipos, de acordo com as suas funções: Estruturais, textuais e semânticas. Outra                                   
característica importante é que elas também podem ter atributos. A seguir, falaremos sobre cada um desses temas. 
Os atributos 
Os atributos servem para que algumas características sejam adicionadas a um elemento, a uma tag. São compostos por um                                     
nome e por um valor. 
Vamos a um exemplo: 
● <img src=”imagem.jpg” alt=”minha imagem” /> 
Esta tag é utilizada para a inserção de imagens no documento. Temos dois exemplos de atributos em sua declaração: src                                       
e alt, que são nomes de atributo; e “imagem.jpg” e “minha imagem” são seus valores, respectivamente. 
O atributo “src” define o endereço e o nome da imagem. Já o atributo “alt” define um texto alternativo a ser exibido no                                             
navegador caso a imagem não seja carregada. 
Há uma enorme variedade de atributos, assim como de relacionamentos entre eles e as tags. 
Ao longo dos próximos módulos, veremos alguns dos principais, lembrando que o site do W3C contém a lista completa de                                       
atributos e combinações. 
Por ora, cabe ainda destacar dois atributos de extrema importância no desenvolvimento Web: 
ID 
Utilizado para definir um identificador, que deve ser único, para uma tag em um documento. 
CLASS 
Usado para definir uma classe à qual uma ou mais tags pertencem. Com base nesses dois tipos de identificação, é                                       
possível, por exemplo, fazer referência a um ou mais atributos para inserirmos estilização visual nas páginas, através de                                   
Folhas de Estilo ou eventos e interação, através de Javascript. 
Tipos de tags: textuais e semânticas 
Até aqui, conhecemos algumas tags associadas à estrutura, dita obrigatória, de uma página. Também vimos que, na                                 
maioria dos casos, as páginas Web possuem uma mesma estrutura em termos de conteúdo. A seguir, conheceremos os                                   
tipos de tag textuais e semânticos. 
● Tags textuais 
São responsáveis por organizar o conteúdo da página, ou seja, textos, mídias e links, por exemplo. Algumas das principais                                     
tags textuais, inclusive vistas anteriormente, são: <p>, <h1> ... <h6>, <img> e <a>. Essas tags e suas funções serão                                     
descritas a seguir, quando tratarmos das tags semânticas. 
● Tags semânticas 
A partir da HTML5 foram inseridas tags com a função semântica de organizar a estrutura de conteúdo de uma página.                                       
Logo, voltando ao exemplo de seções básicas de uma página, nossa página ficaria assim: 
Figura 2 – Tags       
estruturais básicas de uma página Web 
Ao analisar a Figura 2, é possível perceber que existem tags específicas para cada seção do conteúdo. Essa é uma                                       
característica importante da HTML, chamada de ​semântica​. 
Logo, semântica, neste contexto, pode ser considerada como a correta utilização de uma tag HTML de acordo com o seu                                       
conteúdo ou finalidade. 
Em muitos casos é indiferente, ao visualizarmos uma página no navegador, as tags utilizadas para guardar 
determinado conteúdo. Entretanto, é fortemente recomendado usá-las de acordo com sua função. 
Isso cria uma organização no documento que facilita tanto para você, que o escreveu, quanto para outras pessoas que                                     
venham a editar o mesmo documento. Além disso, muitos dispositivos fazem uso dessa marcação para uma correta                                 
interpretação do conteúdo ali contido. 
A seguir, veremos outras tags e suas respectivas funções: 
Tag  Descrição/Funçãoarticle>  nclui um bloco de conteúdo que deve ser usado quando se deseja inserir um artigo, como                               
um post de um blog, por exemplo. 
section>  Define uma seção no documento. É normalmente utilizado para agrupar seções. Por                       
exemplo: uma <section> poderia conter vários <article>. 
h1> 
h2> 
h3> 
h4> 
h5> 
h6> 
Usada para inserir títulos ao longo da página. É uma boa prática que cada seção ou cada                                 
bloco de texto seja precedido por um título. Trata-se de uma tag hierárquica, logo, no título                               
mais importante deve ser usada a tag <h1>, no subtítulo seguinte, <h2>, e assim por diante.                               
Além disso, uma página poderá conter várias <h1>, <h2>... <h6>. A exceção aqui fica por                             
conta da tag <h1>, uma vez que é recomendado utilizar apenas uma numa mesma página. 
p>  Usada para inserir parágrafos de texto. 
pre>  Usada para inserir um texto pré-formatado. 
div>  Embora não seja considerada semântica, essa tag poderá ser usada para agrupar algum tipo                           
de conteúdo que não tenha nenhuma semântica específica ou que não se encaixe bem                           
dentro de uma tag semântica. 
span>  É semelhante à <div>. Entretanto, enquanto a <div> é um elemento não semântico no bloco                             
quando usada, quebra o conteúdo em uma seção), a <span> é embutida (não quebra o                             
conteúdo, apenas o agrupa). 
a>  Usada para inserir links. 
br />  Usada para inserir uma quebra de linha. 
Tabela 3: Lista de tags estruturais, textuais e semânticas. 
Tags de formatação <strong> e <em> vs <b> e <i> 
A última versão HTML ainda dá suporte a algumas tags direcionadas à formatação visual de conteúdo. Embora possam ser                                     
substituídas por CSS, quatro delas merecem atenção especial: 
● <b>: aplica o efeito de negrito em um texto; 
● <strong>: aplica o efeito de negrito em um texto e o marca como importante; 
● <i>: aplica o efeito de itálico em um texto; 
● <em>: aplica o efeito de itálico e dá ênfase a um texto. 
O destaque que tais elementos merecem diz respeito à função semântica que as tags <strong> e <em> exercem. 
É interessante notar que as duas produzem o mesmo efeito visual (que <b> e <i>, respectivamente) em um texto, ou seja,                                         
marcá-lo como negrito e/ou itálico. Entretanto, há uma diferença importante entre elas, que vai além da visualização do texto                                     
no navegador pela maioria dos usuários. 
A função semântica de ambas é perceptível em ​dispositivos de leitura de tela​, normalmente utilizados por pessoas com                                   
deficiência visual. Esses dispositivos, ao encontrarem as tags “strong” e “em” dão ênfase ao conteúdo nelas contido,                                 
modulando sua voz de forma incisiva, no caso de “strong”, ou enfática, no caso de “em”. 
Tags obsoletas 
A cada nova versão da HTML, novas tags são criadas, assim como antigas são descontinuadas. Estas, chamadas de                                   
obsoletas, embora ainda possam ter suporte em boa parte dos navegadores, devem ser evitadas. 
● Em primeiro lugar, porque provavelmente foram substituídas por novas tags, com melhor semântica. 
● Em segundo lugar, pelo risco de desconfigurarem o conteúdo da página, uma vez que os browsers podem deixar de                                     
suportá-las a qualquer momento. 
A tabela 4 lista algumas tags obsoletas: 
hr>  nsere uma linha horizontal no documento. Normalmente é utilizada quando se pretende                       
alterar a temática de um texto. 
Tag Função 
<applet> dentifica a inclusão de um applet Java. 
<center> Centraliza horizontalmente o conteúdo de um bloco. 
<dir> Container para lista de diretórios ou arquivos. 
<font> Determina características relacionadas a fontes de um determinado elemento. 
Tabela 4: Exemplos de tags obsoletas. 
Atualmente consideradas obsoletas, as tags <center> e <font> ainda são usadas em muitas páginas HTML. Ambas se                                 
enquadram no conceito, já mencionado, de que não é função da HTML cuidar da apresentação. Logo, as duas foram                                     
substituídas por propriedades CSS. 
VERIFICANDO O APRENDIZADO 
 Marque a alternativa ​incorreta​ e que ​não​ pode ser usada para definir o que são as tags:. 
As tags são textos simples inseridos entre o sinal de < e >, e podem tanto ser usadas a partir das especificações W3C ou                                               
serem criadas/inventadas por cada pessoa ao construir um documento HTML. 
As tags são elementos que servem para marcar quais informações uma página exibe. Por exemplo: a marcação                                 
<h1>Título de um bloco de texto</h1> insere um título em uma página HTML. Estes elementos são definidos,                                 
padronizados e mantidos em especificações suportadas pela W3C. 
 Em termos de semântica, na utilização de tags, assinale a alternativa correta: 
O conceito de semântica pode ser resumido como a escolha e utilização de tags de acordo com o tipo de conteúdo ou                                           
função. 
A HTML semântica tem como objetivo principal descrever o significado do conteúdo contido em um documento HTML,                                 
a fim de torná-lo mais claro para os dispositivos que processam o documento e também para o programador que o                                       
criou ou precisará modificá-lo. 
Modulo 3 
LISTAS 
O HTML fornece suporte para a representação visual de três tipos de listas: as ​ordenadas​, as ​não ordenadas e as de                                         
definição​. 
 Clique nas barras para ver as informações. 
ORDENADAS 
Usadas quando desejamos listar dados com a necessidade de representar a sua ordenação de forma numérica ou                                 
alfabética. 
NÃO ORDENADAS 
Usadas quando não há necessidade de listar ordenadamente. 
DE DEFINIÇÃO 
Usadas quando precisamos listar itens e atribuirmos uma descrição a eles. 
 
<image> Ancestral da tag <img>, era usada nas primeiras versões HTML para a inserção de 
magens. 
Tipo Tag Container Tag Item Tag Descrição 
Ordenadas <ol> <li> - 
Tabela 5: Tags utilizadas para a representação de listas 
Na figura 3, podemos ver como as tags acima são exibidas no navegador: 
Lista ordenada 
 
<ol> 
<li> Primeiro Item da lista </li> 
<li> Segundo Item da lista </li> 
<li> Terceiro Item da lista </li> 
</ol> 
Resultado: 
1. Primeiro Item da lista 
2. Segundo Item da lista 
3. Terceiro Item da lista 
Lista não ordenada 
 
<ul> 
<li> Primeiro Item da lista não ordenada </li> 
<li> Segundo Item da lista não ordenada </li> 
<li> Terceiro Item da lista não ordenada </li> 
</ul> 
Resultado: 
● Primeiro Item da lista não ordenada 
● Segundo Item da lista não ordenada 
● Terceiro Item da lista não ordenada 
Lista de definição 
 
<dl> 
<dt> Primeiro Item da lista não ordenada </dt> 
<dd> Descrição do primeiro elemento </dd> 
<dt> Segundo Item da lista não ordenada </dt> 
<dd> Descrição do segundo elemento </dd> 
<dt> Terceiro Item da lista não ordenada </dt> 
<dd> Descrição do terceiro elemento </dd> 
</dl> 
Resultado: 
Primeiro Item da lista não ordenada 
 Descrição do primeiro elemento 
Não Ordenadas <ul> <li> - 
Definição <dl> <dt> <dd> 
Segundo Item da lista não ordenada 
 Descrição do segundo elemento 
Terceiro Item da lista não ordenada 
 Descrição do terceiro elemento 
Figura 3 – Tags e representação visual das listas no navegador 
Cabe destacar que tanto o símbolo de ordenação (a numeração, no exemplo acima), no caso da primeira, quanto o 
símbolo visual (o bullet – pequeno círculo preto), no caso da segunda, podem ser alterados com a utilização deCSS. 
TABELAS 
Quando precisamos lidar com dados tabulares em uma página web utilizamos tabelas. As tabelas usadas nesse documento                                 
são exemplos do tipo de dado e também da apresentação obtida ao utilizarmos tais elementos na HTML. 
Estrutura das Tabelas 
A marcação HTML relacionada às tabelas contém, além da tag principal <table>, outras tags. A principal define o container                                     
geral. 
De forma hierárquica, a seguir temos as tags para a definição de linhas <tr> e colunas <td>. Com estas três tags é possível                                             
representarmos uma tabela simples. Entretanto, há tags adicionais que podem ser usadas e que ajudam a melhor organizar                                   
o conteúdo. 
A tabela abaixo apresenta as tags de marcação, e suas respectivas funções, relacionadas às tabelas: 
Tabela 6: O elemento Tabela e suas tags 
Tag Função 
<table> Container principal da tabela 
<tr> Representa as linhas, sendo composta pelas tags relacionadas às colunas. 
<td> Representa as colunas e precisa ser inserida dentro da tag de linha. 
<th> Também representa colunas e é usada para exibir o título de uma coluna, possuindo, neste 
sentido, função semântica. Assim como a tag <td>, deve estar contida em uma tag de linha. 
Este elemento apresenta estilos próprios, sendo renderizado de forma diferente das colunas 
comuns. 
<thead> Armazena o cabeçalho da tabela, sendo composto por linhas e colunas. Este elemento, a 
exemplo do que vimos anteriormente, tem função semântica em termos de estruturação de 
conteúdo. 
<tfoot> Armazena o rodapé da tabela, tendo também função semântica em termos de estruturação. 
As tabelas, normalmente, são organizadas de maneira uniforme: ​linhas sobre linhas, colunas após colunas, célula ao lado de                                   
célula​. Logo, as colunas costumam ter a mesma largura, assim como as linhas a mesma altura. Entretanto, há situações                                     
onde é preciso mudar um pouco essa organização. Por exemplo, pode ser necessário mesclar duas colunas ou mesmo duas                                     
ou mais linhas. 
Para isso, fazemos uso de alguns atributos - que têm função de destaque ao tratarmos das tags relacionadas às tabelas.                                       
São eles: ​rowspan e ​colspan​. Como o próprio nome indica, estes atributos têm a função de expandir as linhas ou colunas.                                         
Sua declaração é acompanhada de um número que indica a quantidade de células a serem utilizadas para expansão da linha                                       
ou coluna. 
As tabelas e a semântica 
Podemos dizer que as tabelas foram, desde a criação do código HTML, o elemento mais utilizado fora de sua função                                       
semântica. Isto se deve ao fato de que a estrutura básica de uma página HTML lembra muito a estrutura de uma tabela:                                           
cabeçalho, rodapé, seções (linhas) etc. Logo, foi prática comum ao longo de muitos anos a codificação de páginas web                                     
completas fazendo-se uso de tabelas. Além de ir de contra a semântica, tal uso traz consigo outros problemas, como o                                       
peso das páginas e a redução da acessibilidade, entre outros. 
APLICAÇÃO 
Como vimos, um documento HTML pode conter tanto tabelas simples quanto mais complexas. Tendo como base o arquivo                                   
HTML usado nos módulos anteriores e o conteúdo visto anteriormente, chegou a hora de codificarmos. No editor de texto,                                     
comece criando uma nova seção no seu HTML e insira: 
● uma tabela simples; 
● uma tabela que contenha título; 
● uma tabela com cabeçalho e rodapé; 
● uma tabela com linhas e colunas expandidas; 
● um exemplo completo; 
● salve o arquivo e veja o resultado no navegador. 
​Figura 4 – 
Demonstração de aplicação no editor. 
MÍDIAS: VÍDEO E ÁUDIO 
O suporte à multimídia na HTML vem melhorando ao longo dos anos e versões. Com o advento da HTML5, tornou-se                                       
possível, de forma muito simples, incorporar vídeo e áudio em uma página Web. Para isso, e conforme visto na figura 5, são                                           
usadas as tags <video> e <audio>. 
 
<vídeo src= “http://www.youtube.com/watch?v=20SHvU2PKsM” controle></vídeo> 
<áudio src= “/áudios/sample.ogg” controls autoplay loop> </audio> 
Figura 5 – Tags de vídeo e áudio no HTML 
Como visto, os atributos também têm suma importância ao fazermos uso das tags de vídeo e áudio. No exemplo acima,                                       
temos, inicialmente, o atributo “src” – que informa o endereço, podendo ser de um site, ou mesmo de um arquivo local – no                                             
seu computador ou no servidor onde a página Web fica hospedada. 
Os atributos “controls”, “autoplay” e “loop”, que são específicos para este tipo de mídia em questão, fornecem 
suporte ao controle do conteúdo (vídeo ou áudio) incorporado pelo navegador, além de definirem alguns 
comportamentos, como o autoplay e o loop, que são autoexplicativos. 
Os três atributos aqui descritos são apenas uma prévia, uma vez que há alguns outros disponíveis. Outros componentes                                   
importantes, contidos na especificação do HTML5, são os eventos que permitem o controle de mídia embutida com a                                   
utilização de Javascript. São os chamados “Media Events”. 
TEORIA DA PRÁTICA 
Ao final deste módulo, vamos inserir novas tags em nosso arquivo HTML. Inclua ao menos uma tag de vídeo e uma de áudio.                                             
Além disso, experimente inserir e remover os controles mencionados, sempre salvando e comparando os resultados no                               
navegador. 
 
<!doctype html> 
<html lang = “pt-BR”> 
<head> 
<meta charset=”utf-8”> 
</head> 
<body> 
<video src=”small.mp4” controls> < /video> 
<audio src=”sample.ogg” controls autoplay loop> < /audio> 
</body> 
</html> 
VERIFICANDO O APRENDIZADO 
Qual fragmento de código HTML, entre as opções abaixo, deve ser utilizado para representar a lista apresentada na 
figura abaixo: 
 
1. Capítulo I 
1. Primeira Seção 
2. Segunda Seção 
3. Terceira Seção 
2. Capítulo II 
3. Capítulo III 
<ol><li><ol><li></li><li></li><li></li></ol></li><li></li><li></li></ol> 
Os elementos de listas no HTML são bastante flexíveis, além de abrangentes, permitindo a estruturação das mais                                 
variadas combinações, incluindo listas aninhadas. Logo, é possível incluir uma lista aninhada − um elemento “filho” de                                 
um item de outra lista. 
As linhas e colunas de uma tabela HTML podem ser modificadas (mescladas) para permitir uma organização não 
uniforme. Assinale a opção verdadeira: 
Os atributos colspan e rowspan são utilizados para modificar a organização de colunas e linhas em uma tabela. 
Os atributos têm papel importante dentro da HTML. Combinados às tags, eles informam como elas devem se                                 
comportar. 
Modulo 4 
FORMULÁRIOS: COMPOSIÇÃO E VALIDAÇÃO 
Tudo o que vimos até esse ponto nos permitiu criar um documento HTML estruturado contendo textos, listas, tabelas,                                   
vídeo e áudio. Neste módulo, falaremos sobre o ​Formulário​. 
Este elemento é um dos mais utilizados para prover interação entre usuários e uma página Web ou até mesmo um                                       
aplicativo ​mobile​. 
ESTRUTURA INICIAL DO FORMULÁRIO 
A exemplo do que vimos com as tabelas, o formulário é composto por uma tag principal, um container, e várias tags “filhas”. 
Tags como campos de texto, de uma ou mais linhas;campos de seleção; e botões fazem parte de sua estrutura. 
Além disso, para maior clareza, também usamos tags para informar a função dos campos do formulário. São as chamadas                                     
“label”. A tabela a seguir lista as tags comumente usadas em um formulário: 
Tabela 7: Estrutura básica de tags do elemento formulário 
CONHECENDO MELHOR OS ELEMENTOS E ATRIBUTOS DO FORMULÁRIO 
Na figura 6 temos o fragmento HTML correspondente a um formulário. Nela é possível ver as tags mencionadas                                   
anteriormente, assim como algumas tipificações nos campos e novos atributos. Falaremos sobre ambos a seguir: 
Tag Função 
<form> Container principal do formulário. 
<input> Campo do formulário. Como há diversos tipos de campos, fazemos uso do atributo “type” 
para informar o tipo a ser utilizado – conforme veremos mais adiante. 
<textarea> Campo de texto de múltiplas linhas. 
<select> e 
<option> 
Campos de seleção, onde o container é definido pela tag <select> e os itens pela tag 
<option>. 
button Campo de botão. Permite que uma ação seja executada no formulário – enviar o 
ormulário, limpar os dados etc. 
abel Usado para definir um título, uma legenda, que descreva para que serve cada campo do 
ormulário. 
 
Figura 6: Formulário HTML – Elementos e atributos 
É fácil identificar para o que serve cada campo do formulário anterior ao lermos o conteúdo da tag <label>. Além disso, a tag                                             
<fieldset> cria seções dentro do formulário, ajudando a separar os campos no código e a visualizar a página no navegador. 
Isso fica ainda mais claro quando vinculamos ao <fieldset> a tag <legend>. 
Como vimos, é necessária uma atenção especial aos atributos quando tratamos de formulários. 
Para melhor visualização e entendimento, todos os atributos contidos no código mencionado são descritos na tabela 8: 
Tabela 8: Formulário HTML – Tags básicas e seus atributos 
O ATRIBUTO “TYPE” 
Este atributo, dada a sua importância, precisa ser visto de forma aprofundada. Como já dito, além de definir o tipo do campo,                                           
ele também determina como este se comporta. No código apresentado na tabela é utilizado apenas o tipo “text”, que, no                                       
caso da tag <input>, corresponde ao seu valor padrão. 
Alguns outros tipos comuns são: 
PASSWORD 
Mascara o texto com asteriscos. 
HIDDEN 
Esconde o campo para não ser exibido no navegador. 
CHECKBOX 
Usado para seleção de valor através de click/check. 
RADIO 
Tag Atributo Função do atributo 
<form> action Define a URL (endereço) para a qual os dados do formulário serão enviados. 
<form> method Define o método HTTP (POST ou GET) para envio dos dados. 
<label> or Vincula a tag <label> ao campo ao qual ela se refere. Este vínculo faz com que 
seja possível clicar na label para ativar o campo relacionado. 
<input> minlength, 
maxlength 
Definem a quantidade de caracteres mínima e máxima, respectivamente, 
permitida em um campo. 
<input>, 
<button> 
ype Define o tipo do campo e, sobretudo, como ele se comporta. 
<option> value Este atributo também pode ser utilizado na tag <input>. Ele define o valor do 
campo. No caso da <option>, os seus valores possíveis são previamente 
definidos quando a página é codificada. Já na <input>, embora também possa 
ser previamente definido, normalmente é o usuário quem define o seu valor. 
Usado para seleção exclusiva de valor – quando é apresentada mais de uma opção, apenas uma poderá ser selecionada,                                     
ao contrário do tipo “checkbox”. 
SUBMIT 
Associada à tag <button>, dispara o evento que envia/submete o formulário. 
RESET 
Associada à tag <button>, dispara o evento que limpa os valores do formulário. 
BUTTON 
Uma tag <input> pode ser do tipo “button” – exercendo, assim, a mesma função da tag <button>. 
 
Ao longo de vários anos, havia apenas esses tipos disponíveis na HTML. Com isso, algumas necessidades − fossem de                                     
inserção de tipos de dados específicos, fossem de validação de valores, conforme veremos mais adiante − não podiam ser                                     
supridas apenas com a utilização de tags, sendo necessário combinar códigos Javascript e CSS. Por exemplo: um campo                                   
para seleção de data. 
Além disso, novos tipos de dados, com características específicas, ganharam importância ao longo dos anos. Podemos                               
citar, como exemplo, o e-mail. Embora seja um campo de texto, ele possui um padrão de composição próprio, como o uso de                                           
@, entre outras características. 
NOVOS ATRIBUTOS E TIPOS 
Pensando nas deficiências citadas anteriormente, e como é comum na evolução da HTML, a HTML5 definiu novos tipos de                                     
entrada e também novos atributos relacionados a formulários. Entre eles, podemos destacar: 
Atributos 
Atributo Função Comentário 
placeholder Exibir um texto no campo de input. utilizado para dar uma dica ao usuário sobre o 
dado a ser inserido. 
equired Determinar se um campo é obrigatório. utilizado na validação dos dados de um 
ormulário. 
autofocus Fixar o foco no campo. utilizado quando desejamos que, ao carregar o 
ormulário, um determinado campo seja focado. 
Tabela 9: Exemplos de novos atributos e tipos de dados definidos na HTML5 
Comentário 
Uma lista completa dos atributos e tipos pode ser encontrada nas referências mencionadas na seção Explore +. 
VALIDAÇÃO DE FORMULÁRIOS 
Para explicarmos a criação de um formulário HTML, apresentamos tags e atributos que nos permitem montar um formulário                                   
já funcional, pronto para ser preenchido e submetido. Entretanto, há um outro aspecto relacionado a esses elementos que                                   
precisa ser discutido: A validação de dados. 
A importância da validade dos dados concorre com a importância da utilização das tags corretas e que permitam a 
melhor experiência possível aos usuários. Podemos dizer que, ao pensarmos na estrutura do formulário, nas tags e 
atributos, estamos pensando em quem vai preencher o formulário. 
COMO FUNCIONA A VALIDAÇÃO? 
pattern Validar o valor de um campo com base 
em uma expressão regular. 
As RegEX – expressões regulares – 
podem ser consideradas um recurso de 
nguagem de programação para a 
análise e manipulação de texto.) 
O campo de tel. é um bom exemplo de utilização 
desse atributo. Com ele podemos, por exemplo, 
determinar a quantidade de caracteres e o 
ormato esperado para um campo. 
Tipos 
Tipo Função Comentário 
el nserir números de telefone. Para uma melhor usabilidade, deve ser usado em 
conjunto com o atributo pattern. 
datetime nserir datas com o fuso horário em UTC 
a partir de um calendário. 
date nserir datas sem fuso horário a partir de 
um calendário. 
number nserir números. Cria um componente diferente do imput normal, 
em que, por meio de setas, os números podem 
ser incrementados ou decrementados. 
A validação é um processo que pode, e deve, ocorrer tanto no lado cliente – no navegador – quanto no lado servidor.                                           
Pensando no lado cliente, essa ação ocorre assim que o formulário é submetido, antes que os dados sejam recebidos pelo                                       
servidor de destino. 
Até há bem pouco tempo, para validar um formulário era necessário fazer uso de Javascript. Entretanto, na HTML5 é                                     
possível fazê-lo de forma nativa, sem o uso de linguagens de programação. 
Tipos de validação 
Na HTML5 há dois tipos de validação possíveis: 
Verifica se o dado inseridoem um campo é consistente com o seu tipo e/ou padrão (pattern). 
Verifica se um campo obrigatório foi preenchido. 
 
Algo semelhante acontece com a utilização do atributo pattern, sendo que, neste caso, é você quem define o que um                                       
campo precisa conter para ser considerado válido. Por exemplo: determinar o formato desejado para um campo que                                 
receba um número de telefone. 
Você pode definir que ele contenha o DDD, com dois caracteres numéricos, seguido por dois conjuntos de números – um                                       
contendo 5 e outro contendo 3 ou 4 caracteres – o que geraria este código: pattern=“\([0-9]{2}\) [0-9]{5}-[0-9]{3,4}$”. 
Além da validação pelo tipo de dado, há também a validação de campos obrigatórios. Logo, quando precisamos que                                   
determinado campo não fique em branco, usamos o atributo “required”. 
VERIFICANDO O APRENDIZADO 
1. Sobre a composição e o comportamento do formulário HTML é ​incorreto​ afirmar que: 
Apenas os formulários validados podem ser enviados/submetidos. 
 
Os formulários são compostos por tags que permitem a entrada e seleção de dados. Tal funcionalidade concede a este                                     
elemento a característica de interatividade, possibilitando que, a partir de ações do usuário, dados sejam                             
enviados/informações sejam cadastradas ou comportamentos e conteúdo da própria página sejam modificados – como                           
acontece, por exemplo, quando filtramos o resultado de uma pesquisa de produtos em um site de e-commerce. Embora                                   
existam diferentes tipos de campos de formulários, permitindo a inserção padronizada de diferentes tipos de dados, é                                 
prática recomendada validar os seus dados antes de serem enviados/submetidos. 
 Sobre a validação de formulários na HTML5, assinale a afirmativa verdadeira: 
A validação de formulários na HTML5 é habilitada por padrão. Entretanto, é possível desabilitar este recurso com a                                   
utilização de um atributo na tag <form>. 
Uma das grandes novidades da HTML5 foi implementar, nativamente, a validação de dados em um formulário − tarefa                                   
que, nas versões anteriores, só era possível no lado cliente, com a utilização de Javascript. 
Tema 3 
COMO A CSS FUNCIONA? 
A CSS, ou Folhas de Estilo em Cascata (​Cascading Style Sheets​), é uma linguagem de estilo que fornece total controle                                       
sobre a apresentação de um documento escrito em HTML. Com ela, é possível, por exemplo, alterar a forma e                                     
posicionamento dos elementos, as cores, tipos e tamanhos de fontes e muito mais. 
A CSS permite a aplicação seletiva de estilos a elementos em uma página HTML. Isso significa dizer que um ou mais                                         
estilos podem ser aplicados em um documento inteiro ou mesmo em apenas parte dele. Além disso, um mesmo tipo de                                       
elemento pode ter, ao longo do documento, diferentes estilos. 
Sintaxe da CSS 
Para aplicar um estilo CSS a um elemento específico, é necessário identificá-lo e apontar qual de suas propriedades                                   
queremos alterar e qual valor queremos atribuir-lhe. Essas três informações definem a sintaxe da CSS, conforme pode ser                                   
visto no exemplo a seguir. 
​Figura 1: Sintaxe da 
CSS. 
Tendo o exemplo anterior como base, podemos perceber que, para aplicarmos um estilo utilizando CSS, são necessários: 
● O ​seletor​: nesse caso, a tag HTML <p>; 
● Ao menos uma ​propriedade​: a cor de fundo (background-color); 
● Ao menos um ​valor​ para a propriedade: blue. 
Essa declaração de estilo faria com que todas as tags <p> do documento apresentassem a cor azul ao fundo. O exemplo                                         
utilizou apenas uma declaração (propriedade + valor), mas é possível inserir em conjunto várias outras. 
Além dos aspectos mencionados acima, há outros importantes quanto à sintaxe: 
A propriedade e seu valor devem ser separados por dois pontos “:”; 
Uma declaração deve ser separada da declaração subsequente com a utilização do ponto-e-vírgula “;”; 
O conjunto de estilos aplicados a um seletor é envolvido por chaves “{“ e “}”. 
Vamos ver a seguir um exemplo de duas propriedades dadas à tag <p> e o resultado dessas declarações no navegador. 
​Figura 2: 
Demonstração da aplicação de estilos. 
SELETORES 
Vimos nos exemplos anteriores um estilo sendo declarado em uma tag HTML <p>. Nós nos referimos a essa tag como                                       
sendo o seletor ao qual o estilo foi aplicado. Há muitos outros seletores disponíveis além daqueles correspondentes às tags                                     
HTML, conforme veremos a seguir. 
Seletores Class e ID 
O seletor de classe é definido a partir da declaração do atributo “class” em um elemento HTML. Já o de identificação é                                           
definido com o atributo “id”. 
Importante frisar que, embora um elemento possa ter mais de uma classe, terá somente um identificador. 
Em termos de nomenclatura para a definição do nome da classe ou do identificador, não existe uma regra a ser seguida.                                         
Procure utilizar nomes que façam sentido, que tenham relação com a função do elemento na página e que, de fato, ajude a                                           
identificá-lo ou classificá-lo. 
Logo abaixo, podemos ver um exemplo de sintaxe correspondente à declaração desses dois atributos na HTML e na CSS. 
Na primeira parte da imagem, é apresentado um fragmento de código HTML. Repare que uma mesma classe, a “texto                                     
vermelho”, foi atribuída à tag <h1> e a uma das tags <p>. Com isso, vemos que uma classe pode ser atribuída a mais de um                                                 
elemento. Agora note a sintaxe para atribuição de múltiplas classes a um elemento na segunda tag <p>, à qual foram                                       
atribuídas as classes “texto_descricao” e “texto_vermelho”. 
Em relação ao código CSS, veja que o seletor de ID é representado por uma “#” e o de class por um “.”, seguidos de seus                                                   
nomes. Além disso, foram apresentadas duas formas de sintaxe que produzirão o mesmo efeito. A diferença entre elas é                                     
que, na segunda, o nome da tag à qual a identificação ou classe foi atribuída precede o respectivo sinal. 
​Figura 3: Sintaxe 
de declaração de seletores de classe e identificação. 
Restrições e boas práticas na utilização do Identificador 
Embora não exista um padrão ou preferência quanto a utilizar o seletor “id” ou “class”, é importante frisar novamente que um                                         
“id” deve ser aplicado a apenas um elemento, enquanto a “class” pode ser aplicada a um ou vários elementos. 
Embora o navegador não faça uma verificação se um mesmo “id” foi utilizado em diferentes elementos, tal método pode                                     
trazer alguns problemas de estilização e comportamento, uma vez que esse seletor também é bastante usado pelo                                 
Javascript. Frente a isso, adote a boa prática de definir identificadores únicos. 
Seletores de atributo 
Esses seletores utilizam nomes de atributos dentro de colchetes, sendo possível combiná-los com valores. Abaixo são                               
mostrados alguns dos seletores de atributo disponíveis: 
● [checked]​ - Seleciona todos os elementos que possuem o atributo “checked”; 
● [type=’text’]​ - Seleciona todos os elementos do tipo “text”. 
Os seletores de atributo são bastante flexíveis, permitindo inúmeras combinações. Por exemplo, é possível usá-los paraselecionar todas as imagens com uma determinada extensão, selecionar todos os elementos com o atributo title contendo                                 
determinado valor etc. 
Seletores baseados em relacionamento 
É possível declarar estilos utilizando a relação entre os elementos. A tabela a seguir mostra os principais seletores baseados                                     
em relacionamento.Tabela 1: Principais seletores baseados em relacionamento. 
Para uma melhor compreensão quanto à descendência e parentesco mencionados acima, veja a figura abaixo. Essa é uma                                   
representação simbólica da Árvore DOM (representação estruturada do documento HTML em formato de árvore) contendo                             
elementos representando tags HTML. Veja ainda a explicação de cada relação e aplicação dos seletores baseados em                                 
relacionamento. 
 
 
Para uma melhor compreensão quanto à descendência e parentesco mencionados acima, veja a figura abaixo. Essa é uma                                   
representação simbólica da Árvore DOM (representação estruturada do documento HTML em formato de árvore) contendo                             
Seletor Seleção 
H1 P Qualquer elemento P que seja descendente (filho, neto etc.) de um elemento H1. 
H1 > P Qualquer elemento P que seja filho de um elemento H1. 
H1 + P Qualquer elemento P que seja o próximo irmão de um elemento H1 (ou seja, o próximo filho 
de um mesmo pai). 
elementos representando tags HTML. Veja ainda a explicação de cada relação e aplicação dos seletores baseados em                                 
relacionamento. 
 
​Figura 4: Relação 
entre elementos em uma página HTML. 
PROPRIEDADES 
Existem inúmeras propriedades CSS, desde as definidas pela sua especificação, ditas ​propriedades padrão​, até as                             
proprietárias​, que funcionam apenas em alguns navegadores. A fim de garantir uma maior compatibilidade, assim como                               
otimizar o desenvolvimento, deve-se sempre dar preferência às primeiras. A seguir são apresentadas algumas das                             
propriedades mais comuns da CSS. 
 
Propriedade Função 
Background Estilizar o fundo de elementos. Para tal há uma série de propriedades, além do 
atalho “Background”, como “background-color”, “background-image” etc. 
Border Controla as bordas de um elemento, sendo possível definir suas cores, espessuras, 
entre outras propriedades. 
Top, Bottom, Righ 
e Left 
Controlam o posicionamento, relativo ou absoluto, dos elementos em relação a 
outros elementos. 
Color Estila a cor do conteúdo textual de um elemento. 
Font-family, 
Font-size, 
Font-weight, etc. 
Há uma série de propriedades para estilizar o conteúdo textual de um elemento no 
que diz respeito à fonte, como a família de fontes, seu tamanho, peso (mais clara ou 
mais escura - negrito) etc. 
Height Definir a altura de um elemento. 
List-style, 
List-style-image, 
etc. 
Há algumas propriedades para estilizar as listas HTML. 
Margin Controla a distância em função da margem de um elemento para outro. 
Padding Controla a distância entre as bordas e o conteúdo de um elemento. 
Position Define como um elemento deve ser posicionado na página. 
 
 
Tabela 2: Lista de propriedades CSS mais comuns. 
INTEGRANDO A CSS À HTML 
Há três formas usuais de aplicar estilos em um documento HTML fazendo uso de CSS: Inline, Interna e Externa. Além                                       
dessas, a HTML5 permite ainda a aplicação em Escopo. Vamos conhecer um pouco mais de cada uma delas? 
CSS INLINE 
Essa forma implica em declarar o estilo CSS diretamente na tag, no código HTML. Veja a seguir um exemplo de um estilo                                           
apresentado anteriormente sendo aplicado de forma Inline. 
​Figura 5: Aplicação de 
estilo Inline. 
A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-e-vírgula “;”. Esse atributo                                 
pode ser usado em qualquer tag HTML. 
CSS INTERNA 
Também chamada de CSS Incorporada, é declarada na seção <head> do documento HTML. 
Text-... Muitas propriedades controlam o comportamento do conteúdo textual de um 
elemento, como alinhamento (justificado, centralizado etc.), aparência (sublinhado 
etc.) etc. 
Width Definir a largura de um elemento. 
Z-index Definir a profundidade de um elemento – usado, por exemplo, para sobreposição de 
elementos. 
​Figura 6: Aplicação de 
estilo CSS interna. 
A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-e-vírgula “;”. Esse atributo                                 
pode ser usado em qualquer tag HTML. 
CSS EXTERNA 
Nesse caso, os estilos são declarados em um arquivo externo, com extensão “.css” e vinculados ao documento HTML por                                     
meio da tag <link> ou da diretiva @import dentro da tag <head>. Ambos os exemplos podem ser vistos logo a seguir: 
 
CSS EM ESCOPO 
Essa forma de aplicação de estilo foi criada a partir da HTML5. Com ela, é possível aplicar estilos no âmbito de escopo, ou                                             
seja, específicos para as seções da página onde foram declarados, incluindo os seus elementos filhos. No código abaixo,                                   
a tag <p> receberá os estilos definidos, sendo a mesma regra válida para outros estilos e elementos que, porventura,                                     
venham a fazer parte da <div>. 
​Figura 8: 
Aplicação de estilo a nível de Escopo. 
EFEITO CASCATA 
Quando trabalhamos com CSS, é comum nos depararmos com a declaração conflitante de estilos, ou seja, diferentes                                 
definições de estilo para um mesmo elemento. Nessas situações, entra em ação o Efeito Cascata. Para entendermos a                                   
definição desse efeito, é preciso abordarmos outros dois conceitos: ​herança​ e ​especificidade​. 
Herança 
O CSS permite que a aplicação de propriedades a elementos pais seja herdada pelos seus elementos filhos. Peguemos                                   
como exemplo o código abaixo. 
​Figura 9: Exemplo 
de herança em CSS. 
O resultado do fragmento de código mostrado anteriormente mostrará tanto o texto solto quanto o texto dentro da tag <p>                                       
com a cor azul. Isso significa que a tag <p>herdou o estilo definido para o seu pai, a tag <div>. 
Essa capacidade de herança de estilos caracteriza o que chamamos de Efeito Cascata. 
Cabe destacar que nem todas as propriedades CSS podem ser herdadas pelos filhos. Um exemplo são as propriedades                                   
relacionadas à formatação das boxes (que veremos mais adiante), como largura, altura, entre outras. 
Especificidade 
Para entender o que é a especificidade no âmbito das folhas de estilo, vamos recorrer a mais um exemplo. 
​Figura 10: 
Exemplo de especificidade em CSS. 
Perceba que o fragmento da Figura 9 foi adaptado. Antes, era aplicado o conceito de herança, assim o texto dentro da tag                                           
filha assumia o estilo definido para o seu pai. Agora, há um estilo específico definido para todas as tags <p> que sejam filhas                                             
de tags <div>. Com isso, ao visualizarmos o resultado no navegador, teremos o texto solto na cor azul e o texto dentro da tag                                               
<p> na cor vermelha. 
Esse foi um exemplo simples. A CSS é bastante flexível e nos permite definir diferentes níveis de especificidade. Entretanto,                                     
é importante termos cuidado com a sobreposição de estilos – diferentes estilos definidos para um mesmo elemento em                                   
diferentes partes de nosso código CSS. A regra, nesse caso,é: prevalecerá o estilo mais específico. No exemplo acima, a                                       
primeira declaração (para a tag div) é generalizada; a segunda (div p), específica. 
Dicas sobre as regras de precedência 
A regra de precedência em relação às formas de inclusão da CSS segue a seguinte ordem: 
1. Os estilos Internos e de escopo têm precedência sobre estilos em arquivos externos; 
2. Os estilos Inline têm precedência sobre estilos internos, de escopo e externos. 
Quanto aos seletores, a regra de precedência segue a seguinte ordem: 
Seletores de elemento (utilização apenas do nome da tag) são os de menor precedência, por serem muito genéricos; 
Seletores de classe têm mais precedência que os de elemento; 
Seletores de identificação têm mais precedência que os de classe. 
!important 
Veja este novo exemplo: 
​Figura 11: Exemplo de aplicação do valor 
!important. 
Seguindo as regras de Especificidade, sua aplicação resultaria na apresentação do texto dentro da tag <p> na cor vermelha,                                     
pois sua declaração de estilo é mais específica que a utilizada para a tag <p> (texto azul), que é generalizada. Entretanto, a                                           
utilização do valor !important, que se enquadra no que chamados de ​css hack​, na declaração mais generalizada, faz com que                                       
esse estilo se sobreponha ao específico. Logo, o código acima resulta na apresentação do texto dentro da tag <p> na cor                                         
azul. 
CSS3 
A CSS, atualmente, está em sua terceira versão, a CSS3. Dentre as diversas novidades dessa versão, destacam-se: 
● Melhorias nos seletores, com novas possibilidades de seleção: primeiro e/ou último elemento, elementos pares ou                             
ímpares etc.; 
● Efeito gradiente e de sombra em textos e elementos; 
● Bordas arredondadas; 
● Manipulação de opacidade; 
● Controle de rotação e perspectiva; 
● Animações. 
VERIFICANDO O APRENDIZADO 
1. A respeito da integração HTML e CSS, assinale a afirmativa correta: 
Tanto a HTML quanto a CSS são renderizadas pelo navegador que, interpretando as tags de marcação e os estilos que lhes                                         
são aplicados, as exibe em tempo de execução/requisição pelo usuário. 
Tanto a HTML quanto a CSS são linguagens interpretadas diretamente pelo browser e que não precisam ser compiladas –                                     
exceto a CSS quando se utiliza pré-processadores. 
2. Sobre a especificidade, assinale a opção que corresponde ao estilo mais específico e que, consequentemente, será 
aplicado ao elemento < p > abaixo: 
< div > 
< p id = "identificador" class = "classe" > 
Texto do parágrafo. 
< /p > 
< /div > 
p#identificador{ background-color: red; } 
As regras que utilizam seletores têm maior precedência. Entretanto, quanto mais específico, maior a precedência. Logo, a                                 
opção c é mais específica que a opção b). 
Modulo 2 
CORES 
Com a utilização de CSS, podemos manipular as cores de elementos HTML, seja na aparência das caixas, seja na cor de                                         
texto. Para isso, há uma série de propriedades CSS disponíveis para diversos elementos, mas antes vamos abordar as                                   
formas de definição de cores. 
Formas de escrita de cores 
As cores em CSS podem ser escritas de três modos: 
 
 
 
TEXTO 
A estilização de textos com o uso de CSS é dividida em duas partes: 
Em linhas gerais, os navegadores aplicam estilos padrões quando renderizam conteúdos textuais. A seguir, serão vistas                               
algumas propriedades CSS que alteram esse comportamento padrão. 
O layout do texto – ou seja, espaçamento entre os caracteres e linhas; alinhamento em relação ao ​container​. 
Estilos das fontes – família, tamanho, efeitos como negrito etc. 
Em linhas gerais, os navegadores aplicam estilos padrões quando renderizam conteúdos textuais. A seguir, serão vistas                               
algumas propriedades CSS que alteram esse comportamento padrão. 
Alinhamento de Texto 
A propriedade text-align é usada para controlar o alinhamento do texto em razão do contêiner no qual está inserido. 
Tal propriedade pode assumir 4 valores: left, right, center e justify. Como os nomes indicam, essas propriedades alinham o                                     
texto à esquerda, direita, ao centro ou de forma justificada. 
● Com palavras-chave, onde podem ser usados os nomes das cores (seguindo as definidas pela 
especificação CSS) ou a notação hexadecimal. Ex.: blue, red, #FFFFFF etc; 
● Com um sistema de coordenada cúbica RGB, com as notações rgb() e rgba(); 
● Com um sistema de coordena cilíndrica HSL, com as notações hsl() e hsla(). 
Espaçamento entre linhas 
A propriedade line-height permite alterar o espaçamento vertical entre as linhas de texto. Seus valores possíveis são: 
● Normal – ​valor padrão do navegador (entre 1 e 1.2 em relação ao font-size, dependendo do navegador); 
● Número – ​valor inteiro ou decimal que será multiplicado ao tamanho da fonte; 
● Comprimento – ​valor unidades como pixels, pontos, “em” etc. 
paçamento entre letras e palavras 
As propriedades letter-spacing e word-spacing permitem alterar o espaçamento entre letras e/ou palavras. Elas podem                             
assumir valores de comprimento – “px”, “pt” etc. 
FONTES 
Em relação às fontes, há propriedades CSS para definir família, tamanho, estilo, entre outras possibilidades. Vamos conhecer                                 
as propriedades mais usadas? 
FONT-FAMILY 
Essa propriedade é utilizada para definir a família da fonte utilizada em página web ou em partes de seu conteúdo.                                       
Utilizando-a, é possível definir, por exemplo, desde uma única fonte a uma lista de fontes, onde os seus valores são                                       
declarados em ordem de importância, da esquerda para direita. Desse modo, caso uma determinada fonte não esteja                                 
disponível no dispositivo cliente, a próxima definida será usada, e assim sucessivamente. Caso nenhuma das fontes                               
definidas estejam disponíveis no cliente, o navegador fará uso de uma fonte padrão. 
Estes são exemplos de famílias de fonte: Arial, Verdana, “Times New Roman” (fontes com nomes compostos devem ser                                   
declaradas utilizando-se aspas), entre outras. As fontes citadas anteriormente e algumas outras formam o conjunto de                               
fontes chamadas de Fontes Seguras para Web (​Web Safe Fonts​). Sempre que possível, deve-se dar preferência à utilização                                   
dessas fontes “seguras”, pois possuem suporte pela maioria dos sistemas operacionais. 
FONT-SIZE 
A propriedade font-size é responsável por definir o tamanho do texto. Seus valores podem ser definidos com a utilização                                     
de diferentes unidades de medida, como pixels, porcentagem, “em” etc. 
FONT-STYLE 
Propriedade usada na estilização de textos aplicando o efeito de itálico. Seus valores possíveis são: normal (ou seja, tira o                                       
efeito do texto, sendo o estilo padrão de todo elemento), italic e oblique (uma versão mais inclinada em relação ao itálico). 
FONT-WEIGHT 
O peso de uma fonte é definido com a utilização dessa propriedade. Com ela, é possível aplicar o efeito de negrito em uma                                             
escala. Seus valores possíveis são: normal, bold, lighter e bolder (aumentam ou diminuem o peso da fonte em relação ao                                       
peso da fonte de seu elemento pai); e uma escala numérica que vai de 100 a 900. 
WEB FONTES 
As Web Fontes são um importante recurso em termos de tipografia. Se antes a sua estilização ficava restrita àquelasdisponíveis nos sistemas operacionais dos usuários, a partir da implementação da regra @font-face tornou-se possível a                               
utilização de Web Fontes. Essa nova propriedade permite a utilização de fontes que, ao serem definidas, são baixadas pelo                                     
navegador no momento de carregamento da página. Logo, sua utilização permite um controle maior do layout de uma página                                     
no que diz respeito às fontes, além da possibilidade de serem usadas fontes com maior apelo visual. 
Como utilizar a regra @font-face 
A declaração da regra @font-face é feita pela definição de duas principais propriedades: ​font-family e ​src​. Na primeira,                                   
definimos um nome para a família da fonte que estamos importando, usando-o ao longo do arquivo CSS. A segunda aponta                                       
para a url onde o arquivo da fonte se encontra. Vamos ver a seguir a fonte Awesome sendo declarada. 
​Figura 12: 
Declaração de Web Fonte. 
Como podemos observar, além das propriedades font-family e src, há outras que podem ser aplicadas às Web Fontes. Em                                     
relação à font-family, a partir do momento da sua declaração, o nome definido poderá ser utilizado para estilizar qualquer                                     
outro elemento ao longo do CSS – considere que podemos tanto utilizar uma única família de fontes para o documento                                       
HTML inteiro como a combinação de diferentes famílias. 
O código também mostra que as fontes incorporadas podem tanto estar hospedadas localmente quanto na internet. Além                                 
disso, há alguns outros elementos na declaração dos quais ainda não falamos. São eles: as funções ​local​ e ​format​. 
Cabe destacar também os diferentes tipos existentes de fontes web. Aprofundaremos esses elementos extra a seguir. 
 
A função local 
Essa função indica ao navegador que, antes de fazer o download da fonte definida, deverá verificar se ela já está disponível                                         
na máquina do usuário. 
 
A função format 
Também chamada de dica, essa função opcional é utilizada quando se deseja declarar vários formatos de fontes, indicando                                   
justamente o formato de cada uma. No exemplo acima, temos os formatos “woff”, “woff2”, “ttf” e “eot”. 
Tipos de Web Fontes 
Estão disponíveis atualmente alguns tipos de Web Fontes, cuja escolha deve considerar fatores como a compatibilidade com                                 
a maioria dos navegadores e o tamanho dos arquivos. Veja a seguir os tipos mais comuns web fontes. 
 
Tipo Navegadores x Versões (iniciais com suporte) 
Google Chrome Firefox nternet Explorer / Edge Safari Opera 
TTF/OTF 4.0 3.5 9.0 3.1 0.0 
WOFF 5.0 3.6 9.0 5.1 1.1 
WOFF2 36.0 35.0 - - 26.0 
Tabela 4: Tipos mais comuns de Web Fontes. 
Como visto na tabela, alguns tipos oferecem melhor suporte em relação aos navegadores mais atuais. Entretanto, não dão                                   
suporte às versões antigas. Isso reforça a recomendação anterior: considere sempre utilizar diferentes fontes para oferecer                               
uma melhor experiência aos usuários. 
ABREVIATURAS OU ATALHOS EM CSS 
As Folhas de Estilo permitem a aplicação de algumas propriedades utilizando abreviaturas ou atalhos. O exemplo a seguir                                   
mostra as duas formas de realizar uma mesma declaração: 
 
 
 
SVG 4.0 - - 3.2 9.0 
EOT - - 6.0 - - 
 
 
 
VERIFICANDO O APRENDIZADO 
1. Sobre a estilização de textos e fontes, os navegadores possuem estilos padrões para esses tipos de elemento. Logo, é 
correto dizer que: 
A CSS permite total controle sobre os elementos de texto e fonte. Com isso, todo o controle fica nas mãos do desenvolvedor,                                           
que poderá alterar qualquer aspecto desses elementos, tornando assim a página uniforme, uma vez que não dependerá dos                                   
estilos padrão dos navegadores, que são diferentes entre si. 
A CSS permite total controle sobre qualquer elemento em uma página. Deve-se ter em mente, ao utilizá-la, não só as                                       
preocupações com estética, mas também com usabilidade e acessibilidade, garantindo assim a melhor experiência possível                             
aos usuários. 
Assinale a afirmativa CORRETA quanto à utilização de web fontes em relação às fontes CSS padrões: 
Além de fornecerem mais opções, em termos visuais, as web fontes, quando usadas adequadamente, garantem uma menor                                 
degradação das páginas, uma vez que não haverá dependência do ambiente do usuário, quanto a esse possuir ou não a fonte                                         
definida. 
Comentário 
Parabéns!​ A alternativa ​"D"​ está correta. 
 
As web fontes permitem um maior controle visual sobre como cada usuário verá o site, diminuindo assim a dependência de                                       
fatores externos, como a disponibilidade de fontes no computador do visitante. 
Modulo 3 
BOX MODEL 
Nos módulos anteriores, vimos os conceitos básicos de CSS, sua sintaxe, seus elementos e suas formas de integração                                   
com HTML. Abordamos também como aprimorar o design de páginas com os estilos de cores, texto e fontes. 
Neste módulo, avançaremos um pouco mais e percorreremos os conceitos de Box Model (modelo de caixas ou                                 
retângulos), Pseudoclasses e Pseudo-elementos e Posicionamento. 
Nesse sentido, dentro do conceito de Box Model – que, em CSS, está relacionado a design e layout – nossos boxes possuem                                           
quatro componentes principais: margem (margin), borda (border), preenchimento (padding) e conteúdo (content). 
 
A imagem anterior nos ajuda a compreender a composição do Box Model de maneira prática. Repare que foram definidas                                     
3 caixas com o elemento <div> e, para cada uma delas, foram definidos diferentes estilos, como largura, altura e cor de                                         
fundo. Para a <div> com identificador “box_exemplo” foram declarados ainda valores para margin, padding, border e                               
content. 
MARGIN 
A margem, como indicado do lado direito da figura 13, fez com que um espaço fosse criado entre primeira, a segunda e a                                             
última div. Também criou um espaçamento entre a box exemplo e a lateral esquerda da página. As margens de um                                       
elemento podem ser controladas com as propriedades CSS margin-top, margin-bottom, margin-right e margin-left – além                             
do atalho margin, como visto no código de exemplo. 
BORDER 
A borda delimita a área do elemento - altura e largura. Além disso, permite que uma cor diferente seja definida para essas                                           
extensões do elemento. É controlada pela propriedade CSS border e derivadas – com as quais a largura, a cor e o tipo de                                             
borda podem ser definidos. 
O tamanho declarado para a borda é somado ao tamanho declarado para o elemento, compondo assim o seu tamanho                                     
final. 
PADDING 
Para entender a função do padding, repare, na figura anterior, que os textos da primeira e da última <div> estão colados no                                           
topo e na lateral esquerda. Entretanto, na div do meio, há um espaçamento em relação ao topo e à lateral esquerda. Esse                                           
espaço de preenchimento equivale ao padding. Assim como a margem, suas dimensões são a altura e largura. 
Atente-se para a seguinte diferença: margin diz respeito ao espaço entre elementos; já o padding refere-seao conteúdo                                   
interno do próprio elemento, além de fazer parte dele. Na prática, isso significa que a div #box_exemplo, cuja largura foi                                       
declarada como 400px e altura como 200px tem, na verdade, 500px de altura e 300px de largura. Ou seja, o padding                                         
aumentou suas dimensões: width + padding-right + padding-left => 400px + 50px + 50px = 500px height + padding-top +                                       
padding-bottom => 200px + 50px + 50px = 300px Para controlar o preenchimento de um elemento, são utilizadas as                                     
propriedades CSS padding-top, padding-bottom, padding-right e padding-left, além do atalho padding. 
CONTENT 
Essa é a área interna do elemento, ocupada pelo seu conteúdo. Suas dimensões são altura e largura. Além disso, sua cor                                         
de fundo (background), a cor da fonte (color) de seu conteúdo, sua largura (width, min-width, max-width) e altura (height,                                     
min-height, max-height) podem ser estilizadas com CSS. 
PSEUDOCLASSES E PSEUDO-ELEMENTOS 
Uma declaração CSS é composta pelo elemento que se deseja estilizar, pela propriedade a ser estilizada e pelo valor a ser                                         
atribuído. Além disso, vimos que o elemento pode ser definido de maneira ampla (utilizando-se o nome da tag), específica                                     
(pelo seu identificador único) e seletiva (com a utilização de classes). 
Há ainda a herança, onde um elemento filho pode herdar as propriedades de um elemento pai. Todos esses modos de                                       
definir estilo são bastante abrangentes. Entretanto, há ainda algumas formas especiais e muito úteis para se aplicar                                 
estilos: as pseudoclasses e os pseudo-elementos. Veremos a seguir as suas definições e como utilizá-las. 
Pseudoclasses 
As pseudoclasses são utilizadas para definir um estado especial de um elemento. Por exemplo: podemos mudar o estilo                                   
de um elemento ao passarmos o mouse sobre ele (evento mouseover). Esse novo estilo é temporário, ou seja, não                                     
corresponde ao seu estado natural. Também podemos mudar o estilo de um link que foi clicado, alterando sua cor ou                                       
alguma outra propriedade. 
A sintaxe para declaração da pseudoclasse é composta pela palavra-chave correspondente ao nome da pseudoclasse                             
precedido pelo sinal de dois pontos. Veja o exemplo a seguir: 
div:hover{background-color:#000000;} 
 
Pseudoclasse Como declarar Para que serve 
active a:active Selecionar todos os links ativos. 
checked nput:checked Selecionar todos os campos input checados. 
 
Pseudo-Elementos 
Os pseudo-elementos são palavras-chave que, adicionadas/relacionadas a um seletor, permitem que uma parte específica                           
dele seja estilizada. A imagem a seguir mostra duas declarações CSS, uma sem e outra com o uso de pseudo-elemento. Em                                         
ambas, é definido que a primeira letra de texto em um parágrafo tenha tamanho e cor diferentes do restante do texto nele                                           
contigo. 
​Figura 14: 
Exemplo de utilização de pseudo-elementos. 
Ao analisar, codificar e testar o código acima, você perceberá que, no primeiro parágrafo, foi necessário utilizar um elemento                                     
a mais, a tag <span>, ao redor da primeira letra do texto para poder estilizá-la. Já no segundo parágrafo, o mesmo estilo foi                                             
alcançado apenas com o uso do pseudo-elemento first-letter. A utilização do pseudo-elemento diminuir a quantidade de                               
código, tornado sua compreensão mais clara. 
first-child :first-child Selecionar todo primeiro item de lista. 
ast-child :last-child Selecionar todo último item de lista. 
hover div:hover Selecionar todas as divs no evento mouseover. 
Cabe, ainda, destacar um outro ponto do exemplo relacionado à sintaxe dos pseudo-elementos: neles são usados dois                                 
pontos duplos (ou dobrados) para a declaração. Isso é proposital, para diferenciá-los das pseudoclasses. 
 
Posicionamento 
Para tratarmos de posicionamento em CSS, precisaremos recorrer a alguns conceitos já vistos – sobretudo os relacionados                                 
ao Box Model, além de relembrarmos que os elementos HTML possuem padrões de estilo e comportamento naturais. Alguns                                   
desses padrões diferem um pouco de um navegador para outro. Além disso, eles podem ser modificados por CSS, onde as                                       
tais diferenças são resolvidas e, de fato, um padrão de comportamento pode ser definido. 
LAYOUT EM COLUNAS E GRID LAYOUT 
Esses dois conceitos são importantes quando tratamos da estrutura visual de páginas HTML. Em uma definição simplista,                                 
ambos tratam de como os elementos, boxes, podem ser posicionados e organizados em uma página. Veja na Figura 15, logo                                       
a seguir, a estrutura em colunas de uma página. 
Em termos de HTML, apenas utilizando boxes (header, footer, section, aside, nav, div etc.), os elementos ficariam empilhados                                   
uns sobre os outros. Para aplicar o layout visto na Figura 15 e posicionar os elementos na página, precisaremos utilizar CSS. 
 
A propriedade ​position 
Pseudo-elemento Exemplo Para que serve 
:after mg::after nserir conteúdo após o elemento indicado. 
:before h1::before nserir conteúdo antes do elemento indicado. 
:first::letter p::first-letter Selecionar a primeira letra do elemento indicado. 
:first-line p::first-line Selecionar a primeira linha do elemento indicado. 
:selection p::selection Seleciona a porção de um elemento que é selecionado pelo 
usuário. 
A propriedade CSS responsável pelo posicionamento é a “position”. Seus valores possíveis são: static, relative, fixed,                               
absolute e sticky. Além disso, as propriedades top, bottom, right e left são usadas em conjunto, a fim de definir os valores                                           
das respectivas distâncias e, consequentemente, do posicionamento. Tais propriedades, inclusive, só podem ser usadas                           
quando for definido um valor para position. 
POSITION STATIC 
Essa é a posição padrão dos elementos. Desse modo, elementos definidos como static ou sem a propriedade position são                                     
posicionados naturalmente, de acordo com o fluxo normal da página, não assumindo nenhuma localização especial.                             
Inclusive, as propriedades top, bottom, right e left não são refletidas em elementos estáticos. 
POSITION RELATIVE 
A definição da propriedade “position:relative;” para um elemento faz com que ele seja posicionado de modo relativo à sua                                     
posição normal. Com isso, ao definirmos valores para as propriedades top, bottom, right e left, ajustamos a sua posição                                     
em relação à sua posição natural. 
 
POSITION FIXED 
O valor ​fixed é utilizado quando desejamos definir uma posição fixa para um elemento na página. Com isso, independente                                     
do scroll, de rolarmos a página para cima ou para baixo, o elemento sempre permanecerá no mesmo local. As                                     
propriedades ​top, bottom, right e ​left devem ser usadas para definir o lugar onde o elemento será fixado. Uma curiosidade                                       
sobre esse elemento é que ele é posicionado em relação à ​viewport​/janela do navegador. Com isso, ele “flutuará” sobre osdemais conteúdos da página, ficando fixo onde foi colocado e não ocupando, assim, a posição original onde foi declarado                                     
no HTML. 
POSITION ABSOLUTE 
POSITION ABSOLUTE 
A posição “absolute” faz com que um elemento seja posicionado em relação à localização do seu elemento ancestral                                   
mais próximo – o qual também deverá estar posicionado (ou seja, não poderá ser ​static​). 
Quando o elemento definido com ​absolute for o primeiro elemento da página, ele então será posicionado em relação ao                                     
<body>. Com isso, tal elemento acompanhará a rolagem da página. 
POSITION STICKY 
Esse valor para a propriedade position faz com que um elemento seja posicionado com base na posição de rolagem da                                       
página (scroll). Com isso, seu comportamento varia entre o relativo e o fixado, dependendo da posição do scroll. 
Tal propriedade é mais recente, em termos de especificação, assim não possui suporte em todas as versões dos                                   
navegadores. É usada, normalmente, quando queremos criar um efeito de sobreposição de conteúdo. Na prática, o elemento                                 
é visualizado ao abrirmos uma página. Ao rolarmos para baixo, ele se mantém fixo, com os demais conteúdos passando sob                                       
ele. 
 
Modulo 4 
FRAMEWORKS CSS 
Como visto nos módulos anteriores, a CSS é uma tecnologia poderosa, flexível e, muitas vezes, complexa. São várias                                   
propriedades e muitos valores possíveis. Inúmeras combinações que podem, inclusive, sobreporem umas às outras. 
A marcação HTML tem um comportamento natural em relação aos elementos, além de pequenas variações de um                                 
navegador para outro. Por outro lado, há bastante similaridade em relação aos layouts de diversos sites. Os de                                   
e-commerce, por exemplo, costumam ter um layout bem parecido para facilitar a experiência do usuário ao trafegar entre                                   
um e outro. Nesses casos, é comum ser utilizado o ditado de que não é necessário reinventar a roda. Esse ditado,                                         
inclusive, é um bom ponto de partida para falarmos sobre Frameworks CSS, a começar pela sua definição. 
Nesse contexto, a maioria dos Frameworks CSS mantêm similaridades entre si, além de prós e contras específicos, que vão                                     
desde a facilidade de aprendizagem, ao suporte e à documentação disponíveis, entre outros fatores. 
Logo, a escolha de um Framework pode se dar por fatores objetivos, relacionados às suas características ou aos requisitos                                     
específicos de um determinado projeto, ou mesmo por fatores subjetivos, como gosto pessoal. Ao decidir utilizar um                                 
Framework, é fundamental ter em mente o quanto ele poderá auxiliá-lo em seu trabalho. 
Para isso, é importante conhecer suas as principais características, além das vantagens e desvantagens de cada opção. A                                   
seguir, três dos principais Frameworks CSS existentes serão apresentados: Bootstrap, Foundation e Semantic UI. 
 
BOOTSTRAP 
Ele foi desenvolvido pela equipe do Twitter em 2011 e, posteriormente, passou a ser mantido de modo independente. Sua                                     
licença é ​open source​ e, atualmente, é o framework CSS mais popular. 
Trata-se de um framework responsivo, baseado na premissa ​mobile-first – onde o foco inicial são os dispositivos móveis                                   
e, em seguida, os desktops. Possui componentes prontos para uso (​ready-to-use​) desenvolvidos em HTML, CSS e                               
Javascript. 
Sistema de Grid 
O Grid Layout é um sistema de layout generalizado. Com ênfase em linhas e colunas, pode parecer um retorno ao layout                                         
da tabela, mas há muito mais no layout da grade do que no layout da tabela (MEYER, 2017). 
Uma das principais características dos Frameworks CSS é o seu Sistema de Grids. Enquanto a Grid é um elemento de                                       
design, uma ferramenta que serve para ordenar elementos visuais, o Sistema de Grid em um Framework consiste em uma                                     
série de ​containers​, linhas e colunas que servem para arranjar e alinhar conteúdo. Embora compartilhem da mesma                                 
fundamentação teórica, há pequenas diferenças de implementação entre os Frameworks. 
A grid do Bootstrap, por exemplo, possui 12 colunas e 5 ​breakpoints responsivos, que são pontos de quebra nos quais o                                         
layout será ajustado para atender a diferentes resoluções de tela. Conforme visto na figura abaixo, são eles: extra small,                                     
small, medium, large e extra large. 
Na prática, esse sistema deve ser corretamente utilizado para que todos os elementos da página sejam alinhados e                                   
visualizados em diferentes tamanhos de tela. 
 
Figura 16 – Sistema de Grid do Bootstrap. Fonte: Bootstrap Grid System, 2020. 
Extra small 
<576px 
Small 
≥576px 
Medium 
≥768px 
Large 
≥992px 
Extra large 
≥1200px 
Max container width None (auto) 540px 720px 960px 140px 
Class prefix col- col-sm- col-md- col-lg- col-xl- 
# of columns 2 
Gutter width 30px (15px on each side of a column) 
Nestable Yes 
Column ordering Yes 
Como utilizar o Bootstrap 
Para utilizar o Bootstrap, é necessário incluir a sua biblioteca, composta por dois arquivos: um CSS e outro Javascript.                                     
Essa instalação é simples e pode ser feita pela inclusão dos respectivos arquivos diretamente na HTML. 
Outra forma de instalação é através de ferramentas gerenciadoras de pacotes, como ​npm ou ​gem​. Em termos de                                   
dependência, para a utilização completa de todas as suas funcionalidades, é necessário ainda incluir outras bibliotecas                               
Javascript, a Jquery e a Popper. 
Por último, é importante ter cuidado com as versões do Framework em termos de compatibilidade, tanto em relação a                                     
bibliotecas de terceiros às JS citadas acima, quanto em relação a funcionalidades em desuso/depreciadas. 
FOUNDATION 
O segundo Framework a ser abordado é o Foundation, criado em 2011 e que está entre os mais conhecidos e utilizados. É                                           
um framework responsivo, baseado na abordagem ​mobile-first​. Sua principal característica é fazer uso, nativo, do                             
pré-processador de CSS chamado SASS. 
Sistema de Grid 
O Sistema de Grid do Foundation também é composto por 12 colunas. Nas versões mais recentes, o sistema básico de                                       
grid foi substituído por um novo sistema, o XY Grid. Em tal sistema, novas funcionalidades foram adicionadas, como                                   
alinhamento vertical e horizontal, dimensionamento automático e grid vertical completa. 
Como utilizar o Foundation 
A forma de utilização do Foundation é semelhante à do Bootstrap: é preciso incluir um arquivo CSS e outro Javascript ou                                         
então utilizar um gerenciador de pacotes. Além disso, é recomendado também incluir a Biblioteca jQuery. 
A respeito da compatibilidade, aplica-se o que foi dito anteriormente: algumas funcionalidades são descontinuadas entre                             
uma versão ou outra. Logo, é preciso tomar cuidado para que nada deixe de funcionar ao atualizar versões. 
SEMANTIC UI 
Mais recente entre os 3 Frameworks aqui apresentados, o Semantic UI se destaca por utilizar, nativamente, um                                 
pré-processador CSS, o LESS, e a biblioteca Javascript Jquery. Também é um Framework ​opensource​. 
Uma importante particularidade desse Framework é que suas classes utilizam sintaxe de linguagem natural, como                             
substantivos, por exemplo, para vincular conceitos de maneira mais intuitiva. 
Como utilizar o Semantic UI 
A sua inclusão é semelhante às dos demais Frameworks vistos anteriormente, ou seja, por meio de arquivos CSS e JS, além                                         
da Biblioteca jQuery, ou via gerenciadores de pacotes. 
Outros Frameworks 
Além dos 3 frameworks vistos anteriormente, há vários outros disponíveis. Alguns dos mais conhecidos são: 
 
PURE 
Considerado o framework mais leve, foi desenvolvido pela Yahoo; 
MATERIALIZE CSS 
Baseado no Material Design, ambos criados pelo Google e utilizados em seus produtos; 
BULMA 
Framework baseado unicamente em CSS, não faz uso de Javascript; 
SKELETON 
Framework minimalista. Possui apenas 400 linhas de código. 
 
Em suma, como visto em suas definições e em seus exemplos de utilização, os Frameworks têm a mesma finalidade,                                     
servindo para as mesmas funções. Em outras palavras, tudo que é possível criar com um Framework também é possível                                     
com outro. 
Por outro lado, há pós e contras em cada um deles, como o tamanho do Framework e impactos no carregamento da página,                                           
facilidade ou dificuldade de aprendizagem e simplicidade de sintaxes. Há vários comparativos na internet que aprofundam                               
essa discussão, elencando os pontos fortes e fracos de cada Framework. 
Na prática, a recomendação é: sempre que possível, utilize um Framework. Escolha o que melhor se adequar à sua                                     
necessidade. Na dúvida por onde começar, escolha o mais utilizado – a final de contas, ele não deve ser o mais usado à toa. 
Vantagens e desvantagens da utilização de Frameworks 
Na prática, não existe uma recomendação definitiva sobre usar ou não um Framework em um projeto Web. Se, por um lado, a                                           
utilização de Frameworks ajuda a otimizar o tempo de desenvolvimento, por outro lado, tira um pouco do controle do                                     
programador sobre o que está sendo feito, uma vez que não é recomendado alterar o comportamento padrão dos códigos                                     
fornecidos pelos Frameworks. A lista abaixo traz alguns prós e contras citados mais comumente: 
 
Vantagens Desvantagens 
Padronização do código, 
muito válido, sobretudo, 
quando se trabalha em 
equipe; 
Tamanho / peso do Framework, que pode impactar no carregamento da 
página; 
Economia de tempo, uma 
vez que não é precisar criar 
odo o código CSS do zero; 
Restrições de design – lembre-se de que o framework possui um layout 
padrão, baseado em grids. Isso pode acabar limitando a imaginação no 
momento de criação do design ou impactando no tempo de 
desenvolvimento para que seja possível encaixar o layout criado no 
padrão estabelecido pelo Framework; 
Seguimento de padrões, já 
que os Frameworks estão 
sempre antenados às 
especificações e 
ecomendações oficiais; 
Curva de aprendizado – aprender a utilizar adequadamente um 
Framework pode levar algum tempo; 
 
Tema 4 
JavaScript 
Esta linguagem faz parte da ​tríade de tecnologias que compõe o ambiente Web​, juntando-se à ​HTML − que cuida da                                       
estrutura e do conteúdo das páginas − e ao ​CSS − responsável pela apresentação. ​Sua função, nesse ambiente, é cuidar do                                         
comportamento e da interatividade das páginas Web. Trata-se de uma linguagem de programação interpretada e                             
multiparadigma, uma vez que possui suporte à programação estruturada, orientada a objetos e funcional. 
O JavaScript, comumente chamado de JS, foi criado inicialmente para o ambiente Web, no lado cliente. Entretanto, evoluiu                                   
ao ponto de atualmente ser utilizado também no lado servidor, além de ser uma das principais linguagens para o                                     
desenvolvimento de aplicativos mobile. 
A interface DOM 
Iniciaremos nosso estudo de JavaScript entendendo o que é e como ​manipular a interface​, ou árvore, DOM. Isso auxiliará o                                       
entendimento de como essa linguagem se integra e interage com a HTML. 
A sigla ​DOM significa Modelo de Objeto de Documento. Trata-se de uma interface que permite a manipulação, via                                   
programação, de documentos HTML (e outros, como XML, por exemplo). ​Além de interface, é, também, comumente                               
chamado de árvore, por fornecer uma representação estruturada do documento nesse formato. 
A árvore DOM é composta por ​nós e ​objetos​, ambos possuindo ​propriedades e ​métodos​, além de eventos. Através dessa                                     
estrutura, é possível acessar, por exemplo, o conteúdo textual de um elemento − como a tag <p> −, recuperar e até mesmo                                           
alterar o seu valor. 
Embora frequentemente associados, o DOM não faz parte da linguagem JavaScript​, podendo também ser manipulado por                               
outras linguagens. Neste tema, porém ficaremos restritos à manipulação do DOM através do JavaScript. 
A Figura 1 ilustra a árvore DOM e seus elementos: 
Compatibilidade entre 
navegadores. 
Controle sobre o código – sendo obrigado a utilizar a estrutura definida 
pelo Framework, acabamos por perder o controle total sobre o código. 
Além disso, utilizar Frameworks sem uma boa base teórica sobre CSS 
pode acabar limitando o seu entendimento e aprendizado. 
​Figura 1: Árvore 
DOM (BARBOSA, 2017). 
 
Manipulando o DOM com JavaScript 
Por meio do JavaScript, é possível inserir dinamicamente, em ​tempo de execução​, novos elementos à árvore DOM, mesmo                                   
que estes não façam parte da estrutura inicial da página. Da mesma forma, é possível excluir e alterar elementos                                     
preexistentes ou dinamicamente criados. 
Esses elementos, porém, existirão somente enquanto durar a sessão atual do usuário. Ou seja, ​trata-se de uma                                 
manipulação dinâmica e dependente de estado, de ações e interações por parte do usuário, mas que se perderão quando                                     
ele sair da página. 
Incorporando o JavaScript à HTML 
A incorporação do JavaScript a páginas HTML pode ser feita de duas formas: 
Codigo no corpo da pagina 
Incluindo os códigos diretamente no corpo da página − dentro da seção <head> e da tag <script> 
 
Arquivos externos 
Através de arquivos externos, com extensão js, linkados ao documento também dentro da seção <head> 
 
Para a otimização do desempenho do carregamento da página, deve-se mover todo o código JavaScript para o seu final,                                     
após o fechamento da tag </body>. 
eja a seguir as duas formas citadas de inserção: 
 
1 ​<!doctype html> 
2 ​<html lang="pt-BR"> 
3 ​<head> 
4 ​<meta charset="utf-8"> 
5 ​<title>Incorporando Javascript em Páginas HTML</title> 
6 ​<!-- Incorporando um arquivo .js externo --> 
7 ​<script src="script.js"></script> 
8 ​</head> 
9 ​<body> 
10 ​<div id="exibe_resultado"> Resultado da Multiplicação: </div> 
11 ​</body> 
12 ​<!-- Incorporando códigos Javascript diretamente na página --> 
13 ​<script type="text/javascript"> 
14 ​//Com duas barras criamos um comentário de linha em Javascript 
15 ​//Comentários de mais de uma linha podem ser feitos dentro de /* */ 
16 
17 ​var variavel; //Declarando uma variável cujo nome é 'variavel' 
18 
19 ​variavel = 3 + 3; // Atribuindo valores e aplicando umaoperação matemática em uma 
variável 
20 
21 ​/* Utilizando a função nativa 'alert' para exibir uma caixa de 
22 ​diálogo na tela cujo conteúdo será o valor da variável 'variavel' */ 
23 ​alert(variavel); 
24 
25 ​var resultadoMultiplicacao = multiplique(10, 50); // chamando a função 'multiplique' 
passando dois valores - 10 e 50 
26 
27 ​//Manipulando a Árvore DOM a fim de exibir, dentro da DIV declarada no HTML, o resultado 
da multiplicação juntamente com o seu texto inicial 
28 ​var divLocal = document.getElementById('exibe_resultado'); 
29 ​/* 
30 ​Neste ponto a variavel divLocal é um objeto que representa a div declarada no HTML. 
31 ​Sendo um objeto é possível acessar seus atributos, como innerHTML, precedido do nome do 
objeto seguido de um '.' 
32 ​*/ 
33 ​divLocal.innerHTML += resultadoMultiplicacao; 
34 
35 ​//Definição da função 'multiplique' que recebe dois parâmetros - numero1 e numero2 
36 ​function multiplique(numero1, numero2){ 
37 
38 ​/* 
39 ​Declarando uma nova variável que guardará o resultado da operação de multiplicação; 
40 ​Iniciando a variável com o valor de 0. 
41 ​*/ 
42 ​var resultado = 0; 
43 
44 ​//Atribuindo à variável 'resultado' o valor resutante da multiplicação dos 2 parâmetros 
recebidos 
45 ​resultado = numero1 * numero2; 
46 
47 ​//Retornando (devolvendo) o valor da variável resultado 
48 ​return resultado; 
49 
50 ​} 
51 ​</script> 
52 ​</html> 
Figura 2: Formas de incorporação do JavaScript numa página HTML. 
 
Sintaxe JavaScript 
A Figura 2 mostra tanto as formas de inserção do JavaScript em uma página HTML (​linhas 7 e 13​) quanto alguns aspectos                                           
da sua ​sintaxe​. Tais aspectos serão vistos em detalhes a seguir, mas, antes de começarmos, é recomendado que você copie                                       
o código anterior e o execute – pode ser em seu computador ou utilizando uma ferramenta de codificação online, como o                                         
CodePen ou JSFiddle. Você pode copiar direto do box, ou utilizar o arquivo Figura 2. 
Variáveis 
São declaradas utilizando-se a palavra reservada ​“var”, sucedida pelo seu nome. Não devem ser utilizados caracteres                               
especiais como nomes de variáveis. 
Além disso, embora existam diferentes convenções, ​procure utilizar um padrão e segui-lo ao longo de todo o seu código                                     
para a nomeação das variáveis, sobretudo as compostas. 
Outra característica importante de uma variável em JS é que, por se tratar de uma linguagem fracamente tipada​, não é                                       
necessário declarar o tipo de dados. Com isso, uma variável que armazenará um número (inteiro, decimal etc.) e outra que                                       
armazenará uma palavra (​string​, char etc.) são declaradas da mesma forma. 
Após declaradas, as variáveis podem ser utilizadas sem a palavra reservada “var”, como visto nas ​linhas 19 e 33​. 
Atribuição 
As variáveis precisam ser declaradas antes de sua utilização. Entretanto, há uma forma simplificada, vista na ​linha 25​, na                                     
qual é feita uma atribuição de valores no momento de declaração da variável “resultadoMultiplicacao”. 
A respeito da atribuição de valores, é importante frisar que, ​embora declarados da mesma maneira, os tipos de dados são                                       
atribuídos de formas distintas. Um número, por exemplo, pode ser atribuído diretamente a uma variável, enquanto uma ​string                                   
precisará estar envolta em aspas – simples ou duplas. A ​linha 13​ mostra dois números sendo atribuídos à “variável”. 
Veja o exemplo a seguir, no qual atribuímos uma ​string​ a uma variável: 
var nomeDisciplina = “Javascript” 
Ponto e vírgula 
Repare o final de cada linha de código − todas foram terminadas com a utilização de um ​ponto e vírgula​. Diferentemente de                                           
outras linguagens, em JavaScript não é obrigatória a utilização de caracteres para indicar o final de uma linha de código,                                       
mas, seguindo uma linha de boas práticas, adote uma convenção e a utilize em todo o seu código. 
Outros elementos 
Ao longo do código apresentado na Figura 2, foram utilizados outros elementos. A seguir, na tabela 1, cada um deles será                                         
descrito: 
 
Tabela 1: Lista de elementos utilizados no código de exemplo. 
 
Considerações adicionais sobre o código utilizado como exemplo 
Volte ao seu código e faça a seguinte modificação: 
Mova o código que está entre as ​linhas 12 e 51​, inclusive, para dentro da seção <head>. 
Salve a alteração e carregue novamente sua página. 
Repare que o alerta é exibido, mas a div “exibe_resultado” não recebeu o valor de resultado da multiplicação. 
Elemento Para que serve Linha do código 
alert Exibir uma caixa de diálogo no navegador. Existem outras 
unções nativas de diálogo, inclusive para receber input de 
valores. 
23 
document.getElemen
ById 
Referenciar um elemento da árvore DOM através do valor do 
seu atributo “id”. Pesquise também sobre 
document.getElementByClassName. 
28 
nnerHTML Propriedade DOM relativa ao conteúdo de um elemento. 
Permite tanto a inclusão quanto a exclusão e a modificação 
do conteúdo do elemento. 
33 
+= Operador de atribuição composta. A linha em questão 
poderia ser escrita de forma simplificada, com esse operador, 
ou em sua forma completa, como: “divLocal.innerHTML = 
divLocal.innerHTML + resultadoMultiplicacao”. 
33 
unction Palavra reservada, utilizada para indicar que será declarada 
uma função. É procedida pelo nome da função e por 
parênteses. Caso receba parâmetros, eles devem ser 
declarados dentro dos parênteses. 
36 
eturn Palavra reservada, utilizada para indicar o conteúdo a ser 
etornado pela função. Nem todas as funções retornam 
valores. Logo, essa instrução só deve ser utilizada por 
unções que retornem algum resultado. 
48 
Isso acontece porque, quando o código está no início da página, ele é lido pelo navegador antes que o restante seja                                         
renderizado. 
Portanto, a tag <div>, por exemplo, ainda não foi carregada e não está presente na árvore DOM. 
Caso queira manter o seu código no início e ter o mesmo resultado de quando ele fica ao final, é necessário utilizar um                                             
evento dentro do mesmo, o “​onload​”, e modificar seu código para utilizá-lo. 
Modulo 2 
Estruturas de decisão 
 
Segundo Flanagan (2011), as ​estruturas de decisão​, também conhecidas como ​“condicionais”, são instruções que                           
executam ou pulam outras instruções dependendo do valor de uma expressão especificada. São os pontos de decisão do                                   
código, também conhecidos como ramos, uma vez que podem alterar o fluxo do código, criando um ou mais caminhos. 
Para melhor assimilação do conceito, vamos usar um exemplo a partir do código construído no módulo anterior: 
As orientações do programa diziam que deveria ser realizada a divisão de dois números inteiros positivos. 
 
Entretanto, o que acontece se o usuário inserir um número inteiro que não seja positivo? 
Ou como forçá-lo a inserir um número positivo? 
 
Para essa função, podemos utilizar uma condição. Ou seja: 
“... Caso o usuário insira um número inteiro não positivo, avise a ele que o número não é válido e peça que insira um número                                                 
válido ...” 
 
 
Nesse caso, o fluxo normal do programa é receber dois números positivos, calcular a divisão e exibir o resultado. Percebaque a condição cria um novo fluxo, um novo ramo, onde outro diálogo é exibido e o usuário, levado a inserir novamente o                                             
número. 
O fluxo normal e o fluxo resultado da condicional podem ser vistos na Figura 3, a seguir. Nela, são apresentados os                                         
passos correspondentes ao nosso exercício, separando as ações do programa e também as do usuário. 
Repare que a verificação “é um nº inteiro positivo” permite apenas duas respostas: “sim” e “não”. Tal condição, mediante a                                       
resposta fornecida, é responsável por seguir o fluxo normal do código ou o alternativo. 
​Figura 3: Fluxo 
normal e fluxo alternativo. 
Nas linguagens de programação, utilizamos as ​instruções condicionais para implementar o tipo de decisão apresentado no                               
exemplo. Em JavaScript, estão disponíveis as instruções " ​if/else​" e "​switch​". Tais instruções serão apresentadas a seguir. 
if 
A sintaxe da instrução "if/else" em JavaScript possui algumas formas. A primeira e mais simples é apresentada do seguinte                                     
modo: 
if (condição) instrução 
Nessa forma, é verificada uma única condição. Caso seja verdadeira, a instrução será executada. Do contrário, não. 
Antes de continuarmos, é importante destacar os elementos da instrução: 
Ela é iniciada com a palavra reservada “if”. 
Dentro de parênteses, é inserida a condição (ou condições, como veremos a seguir). 
Por fim, é inserida a instrução a ser executada caso a condição seja verdadeira. 
Outro detalhe importante: caso exista mais de uma instrução para ser executada, é necessário envolvê-las em chaves. Veja o                                     
exemplo: 
 
1 ​if (condição1 && condição2){ 
2 ​instrução1; 
3 ​instrução2; 
4 ​} 
Nesse segundo caso, além de ​mais de uma instrução​, também temos ​mais de uma condição​. Quando é necessário verificar                                     
mais de uma condição, em que cada uma delas precisará ser verdadeira, utilizamos os caracteres “​&&​”. 
Na prática, as instruções 1 e 2 só serão executadas caso as condições 1 e 2 sejam verdadeiras​. Vamos a outro exemplo: 
 
1 ​if (condição1 || condição2){ 
2 ​instrução1; 
3 ​instrução2; 
4 ​} 
Repare que, nesse código, os caracteres “&&” foram substituídos por ​“||”​. Esses últimos são utilizados ​quando uma OU outra                                     
condição precisa ser verdadeira para que as instruções condicionais sejam executadas. 
 
E o que acontece se quisermos verificar mais condições?  
 
Nesse caso, podemos fazer isso tanto para a forma onde todas precisam ser verdadeiras, e separadas por “&&”, quanto para                                       
a forma onde apenas uma deve ser verdadeira, separadas por “||”. Além disso, é possível, ainda, combinar, numa mesma                                     
verificação, os dois casos. Veja o exemplo: 
 
1 ​if ( (condição1 && condição2) || condição3){ 
2 ​instrução1; 
3 ​instrução2; 
4 ​} 
Nesse fragmento, temos as duas primeiras condições agrupadas por parênteses. A lógica aqui é: 
Execute as instruções 1 e 2 SE ambas forem verdadeiras OU se a condição 3 for verdadeira. 
Por fim, há outra forma: ​a de negação​. 
 
Ou seja, como verificar se uma condição é falsa (ou não verdadeira)? 
 
Veja a seguir: 
 
1 ​if (!condição1){ 
2 ​instrução1; 
3 ​instrução2; 
4 ​} 
O sinal ​“!”​ é utilizado para negar a condição. As instruções 1 e 2 serão executadas caso a condição 1 não seja verdadeira. 
else 
A instrução ​"else” acompanha a instrução ​"if"​. Logo, embora não seja obrigatória, como vimos nos exemplos, sempre que a                                     
primeira for utilizada, deve vir acompanhada da segunda. ​O "else" indica se alguma instrução deve ser executada caso a                                     
verificação feita com o "if" não seja atendida.​ Vejamos: 
If(número fornecido é inteiro e positivo){ 
 Guarde o número em uma variável; 
}else{ 
 Avise ao usuário que o número não é válido; 
 Solicite ao usuário que insira novamente um número; 
} 
Perceba que o "else" (senão) acompanha o "if" (se). Logo,​ SE as condições forem verdadeiras, faça isto. SENÃO, faça aquilo. 
else if 
Veja o exemplo a seguir: 
 
1 ​if (numero1 < 0){ 
2 ​instrução1; 
3 ​}else if(numero == 0){ 
4 ​ instrução2; 
5 ​}else{ 
6 ​ instrução3; 
7 ​} 
Repare que uma nova instrução foi utilizada no fragmento. Trata-se da ​"else if", utilizada quando queremos fazer                                 
verificações adicionais, sem agrupá-las todas dentro de um único "if"​. Além disso, repare que, ao utilizarmos essa forma,                                   
caso nenhuma das condições constantes no "if" e no(s) "if else" seja atendida, ao final a instrução "else" será executada                                       
obrigatoriamente. 
switch 
A instrução ​"switch" é bastante útil quando uma série de condições precisa ser verificada. É bastante similar à "else if".                                       
Vejamos: 
 
1 ​Switch(numero1){ 
2 ​Case < 0: 
3 ​instrução1; 
4 ​Break; 
5 ​Case == 0: 
6 ​instrução2; 
7 ​Break; 
8 ​Default: 
9 ​instrução3; 
10 ​Break; 
11 ​} 
Em linhas gerais, o código anterior é igual e tem a mesma função do visto no exemplo de "else if". Veja a seguir: 
Nele, após o "Swicth" dentro de parênteses, temos a condição a ser verificada. 
A seguir, temos os “Case”, em quantidade equivalente às condições que queremos verificar. 
Dentro de cada “Case” temos a(s) instrução(ões) e o comando “​Break​”. 
Por fim, temos a instrução “Default”, que será executada caso nenhuma das condições representadas pelos “Case” sejam                                 
atendidas. 
Estruturas de repetição 
Essas estruturas – também chamadas de ​laços – ​permitem que uma ação seja executada de forma repetitiva​. Em nosso                                     
exercício, por exemplo, temos uma ação recorrente, que é a de solicitar ao usuário que insira um número. Se fosse executada                                         
dentro de um laço, o nosso código diminuiria, facilitando o trabalho. 
A sintaxe de uma estrutura de repetição pode ser vista no fragmento de código apresentado na Figura 4, a seguir. Após ler o                                             
código e os comentários explicativos, execute-o e veja o resultado. Você pode copiar direto do box a seguir, ou utilizar o                                         
arquivo Figura 4. 
for 
Sobre a sintaxe apresentada na Figura 4, temos o laço ​“for”​, um dos presentes em JavaScript. Em sua forma mais comum,                                         
temos uma variável, que chamamos normalmente de ​contador​, que recebe um valor inicial (no exemplo, 0) e é incrementada                                     
(pelo “++”) até atingir uma condição (ser menor que 10). 
 
1 ​var contador; 
2 ​for (contador = 0; contador < 10; contador ++){ 
3 
4 ​ //As instruções incluídas aqui serão executadas 10 vezes 
5 
6 ​ /* 
7 ​ Serão exibidas 10 caixas de diálogo exibindo o valor da variável contador. 
8 ​ O primeiro número será 0 e o último será 9 (repare que começamos com a nossa 
9 ​ variável contador recebendo o número 0 e sendo incrementada até ser menor do que 10, 
10 ​ ou seja, até o número 9. 
11 ​ */ 
12 ​ alert(contador); 
13 ​} 
Figura 4: Estrutura de repetição em JavaScript. 
while 
Veja o fragmento a seguir para entender o comportamento do laço ​“while”​ (enquanto): 
 
1 ​var​ contador ​=​ 0​; 
2 ​while(​contador ​<​ 10​){ 
3 ​alert(​contador​); 
4 ​contador​++; 
5 ​} 
Esse código tem o mesmo resultado que o visto no exemplo utilizando o laço “for”. Sua sintaxe é simples: ​“Enquantouma                                         
condição fornecida for verdadeira, faça isso." 
do/while 
Embora semelhante ao laço "while", temos uma diferença fundamental entre eles: 
“do/while” 
A condição é testada no final. 
“while” 
A condição é testada no início. 
Com isso, pelo menos uma instrução será, obrigatoriamente, executada. Vejamos o exemplo: 
 
1 ​var​ contador ​=​ 0​; 
2 ​do​{ 
3 ​contador += 1; 
4 ​alert(contador); 
5 ​}while (contador < 10); 
Execute o código e veja a diferença em relação ao utilizado no “while”. 
for/in 
Esse laço, assim como os demais em uma linguagem de programação, é bastante utilizado com ​arrays (vetor ou matriz                                     
contendo dados não ordenados. Veremos sobre eles no próximo módulo). Normalmente, precisamos percorrer o conteúdo                             
de um ​array e manipular ou apenas exibir o seu valor. Para isso, podemos fazer uso de laços. Na Figura 5, a seguir, serão                                               
apresentados dois fragmentos de código para uma mesma função − um utilizando ​“for”​ e o outro, ​“for/in”​. 
 
1 ​var frutas = ['Laranja', 'Uva', 'Pera']; 
2 
3 
4 ​/*Imprimindo na caixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for'*/ 
5 ​for(var i = 0; i < frutas.length; i++){ 
6 ​ alert('Nome da Fruta contida no Array: ' + frutas[i]); 
7 ​} 
8 
9 ​/*Imprimindo na caixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for/in'*/ 
10 ​for(var fruta in frutas){ 
11 ​ alert('Nome da Fruta contida no Array: ' + frutas[fruta]); 
12 ​} 
Figura 5: Comparação entre os laços “for” e “for/in”. 
 
Analisando o código, é possível notar as diferenças de sintaxe entre os laços ​“for”​ e ​“for/in”​. 
No primeiro, em ​“for”​, definimos uma variável contador (​“i”​) e deveremos percorrer o ​array “frutas” começando em seu índice 0                                       
até o seu tamanho (​“length”​). 
x 
Já no ​“for/in”​, declaramos uma variável contador (“fruta”) e dizemos ao código que percorra o ​array imprimindo o seu conteúdo                                       
a partir do índice fornecido – nesse caso, a variável “fruta”. 
Modulo 3 
Vetores em JavaScript 
 
Um vetor é uma estrutura de dados simples utilizada para armazenamento de objetos do mesmo tipo. É chamado, na                                     
literatura relacionada a linguagens de programação, de ​array​. Nesse contexto, é normalmente tratado em conjunto com outra                                 
estrutura:​ a matriz​. Em linhas gerais: 
Um vetor é um ​array​ unidimensional. 
A matriz é um ​array​ multidimensional (um vetor de vetores). 
A função prática de um vetor é simplificar a utilização de variáveis. 
No exemplo do módulo anterior, vimos que eram necessárias duas variáveis para guardar os números solicitados ao usuário.                                   
Com a utilização de um vetor, porém, precisaríamos de apenas uma variável, de duas posições. 
Atenção 
Embora possa parecer sem importância o uso de ​arrays nesse caso, imagine, por exemplo, que seja necessário armazenar                                   
as notas de 50 alunos para, ao final, calcular as respectivas médias. Seriam necessárias 50 variáveis (ou apenas 1 ​array​). 
Saiba mais 
Cabe destacar, ainda, que os vetores são vistos também na Matemática: “Tabela organizada em linhas e colunas no formato                                     
m x n​, sendo​ m​ o número de linhas e​ n​, o de colunas.” 
Composição dos vetores 
Um vetor é composto por uma coleção de valores​, onde cada um deles é chamado de ​elemento​. Além disso, cada elemento                                         
possui uma ​posição numérica dentro do vetor, conhecida como ​índice​. Veja, no exemplo a seguir, usando notação da                                   
linguagem JavaScript, um ​array​ contendo nomes de frutas: 
 
1 ​var frutas = ['Laranja', 'Uva', 'Limão']; 
Nesse exemplo, “Laranja”, “Uva” e “Limão” são os elementos do vetor “frutas”. Considerando que o índice de um ​array                                     
inicia-se em 0, temos: o conteúdo do vetor “frutas” na posição/índice 0 é “Laranja”; na posição/índice 1 é “Uva” ; e na                                           
posição/índice 2 é “Limão”. 
A seguir, veremos como declarar e utilizar vetores na linguagem JavaScript. 
Criação de vetores em JavaScript 
Em JavaScript, os vetores não possuem tipo​, a exemplo do que vimos quando tratamos das variáveis. ​Logo, é possível criar                                       
um ​array​ composto por números, ​strings​, objetos e até mesmo outros ​arrays​. 
Em JS, um vetor pode ter, no máximo, 4.294.967.295 (232 – 2) elementos. Outra característica importante é que, em                                     
JavaScript, os ​arrays​ ​possuem tamanho dinâmico​, ou seja, não é necessário informar o tamanho do vetor ao declará-lo. 
Vejamos mais alguns exemplos de criação de vetores em JS: 
 
1 ​var alunos = []; //array vazio 
2 ​var alunos = ['Alex', 'Anna', 'João']; // array de strings 
3 ​var notas = [10.0, 9.5, 9.5]; // array de números decimais 
4 ​var mistura = ['Um', 2, 3, 'Quatro']; //array de diversos tipos de dados 
Outra forma de criação de vetores em JavaScript é usando o construtor (conceito relacionado à programação orientada a                                   
objetos) Array. Vejamos o exemplo: 
 
1 ​var alunos = new Array(); 
2 ​var alunos = new Array('Alex', 'Anna', 'João'); 
Acesso e exibição de elementos do vetor 
Em termos de acesso aos elementos de um ​array​, a forma mais simples é utilizando o seu índice. ​Vamos ao exemplo: 
 
1 ​var alunos = ['Alex', 'Anna', 'João']; // array de strings 
2 ​alert(alunos[0]); // exibirá “Alex” na caixa de diálogo 
● A função “alert”, imprimirá o conteúdo da posição zero do ​array​ “alunos”, ou seja, “Alex”; 
● Seguindo a mesma lógica, se quiséssemos imprimir “João”, utilizaríamos o índice 2; 
● Outra forma de acessar e exibir os elementos de um vetor é usando um laço de repetição. Veja novamente o                                       
exemplo contido na Figura 5.  
O JavaScript possui métodos nativos para tratamento de ​arrays​. Em termos de acesso e manipulação, veremos agora como                                   
utilizar o ​push​. Nos próximos tópicos, outros métodos serão apresentados. 
push 
Para compreender em que situações o método ​push pode ser útil, vamos voltar ao nosso vetor “alunos”. Imagine que, após                                       
ter sido declarado inicialmente com 3 valores, seja necessário incluir novos valores a esse ​array​, em tempo de execução. O                                       
método ​push​, cuja sintaxe pode ser vista logo a seguir, nos auxilia nessa tarefa. 
nome_do_array.push(valor) 
Usando nosso ​array​ de exemplo, poderíamos adicionar um novo elemento desta forma: 
 
1 ​alunos.push('Helena'); 
É possível, ainda, inserir múltiplos valores utilizando ​push​: 
 
1 ​alunos.push('Helena', 'Maria'); 
Outras formas de adicionar elementos a um vetor 
Como mencionado, há outras maneiras de adicionar elementos a um ​array de forma dinâmica. A primeira delas pode ser                                     
vista a seguir: 
 
1 ​frutas[frutas.length] = 'Maria'; 
Nesse caso, devemos utilizar o tamanho do ​array para informar que desejamos adicionar um novo elemento. Isso pode ser                                     
feito informando o número, caso o saibamos, ou de forma dinâmica, usando a propriedade ​length − que retorna justamente o                                       
tamanho do ​array​. Essa importante propriedade será apresentada logo adiante. 
splice 
O ​splice é um método multiuso em JavaScript. Ele serve tanto para ​excluir elementos de um ​array​, como veremos a seguir,                                         
como para ​substituir e inserir​. Sua sintaxeé: 
Array.splice(posição,0,novo_elemento,novo_elemento,...) 
Onde: 
● ‘posição’​ é o índice onde o novo elemento será incluído; 
● ‘0’​ indica ao método que nenhum elemento do ​array​ será excluído; 
● ‘novo_elemento’​ é o novo elemento que se deseja adicionar ao ​array​.  
Vejamos um exemplo prático: 
 
1 ​var alunos = ['Alex', 'Anna', 'João']; 
2 ​alunos.splice(3,0,'Helena'); 
3 ​alert(alunos); //imprimirá 'Alex', 'Anna', 'João', 'Helena' 
Além disso, com esse método também é possível ​substituir​ um dos elementos do ​array​. Veja o exemplo a seguir: 
 
1 ​var alunos = ['Alex', 'Anna', 'João']; 
2 ​alunos.splice(1,1,'Helena'); 
3 ​alert(alunos); //imprimirá 'Alex, 'Helena', 'João' 
Aqui, ao passarmos o número 1 como segundo parâmetro, informamos ao método que um elemento, o de índice 1, deveria                                       
ser excluído. Entretanto, como inserimos ao final o nome ‘Helena’, o método realizou a substituição do elemento excluído                                   
pelo novo elemento inserido.  
A propriedade ​length  
Uma das necessidades mais comuns quando se trabalha com ​arrays ​é saber o seu tamanho. Como vimos em alguns de                                       
nossos exemplos, em JavaScript está disponível a propriedade ​length​, que retorna o tamanho, ou número de elementos, de                                   
um ​array​. 
Sua sintaxe é: 
nome_do_array.length 
Remoção de elementos do vetor 
A remoção de elementos de um ​array​, em JavaScript, pode ser feita com a utilização do método nativo ​delete​. Vejamos                                       
como esse método funciona utilizando nosso ​array​ de exemplo: 
 
1 ​delete frutas[0]; 
Como visto, sua sintaxe é composta pelo nome do método, ​delete​, pelo nome do ​array e pelo ​índice do elemento que                                         
queremos remover. 
Esse método possui uma particularidade: embora o valor seja excluído do ​array​, este não é ‘reorganizado’, permanecendo                                 
com o mesmo tamanho. 
Faça o teste: 
Utilize o método ​delete​ para remover um elemento de um vetor. 
Em seguida imprima (utilizando ​alert​, por exemplo) o tamanho do ​array​ (usando a propriedade ​length​). 
Veja que o tamanho do ​array​ permanece igual ao inicial, antes da utilização do ​delete​. 
Isso acontece porque ​esse método não remove o valor, apenas o torna indefinido (​undefined​).  
Outros métodos para remover elementos do vetor 
A linguagem JavaScript possui, além de ​"​delete"​, outros 4 métodos para remoção de elementos, conforme veremos a seguir: 
pop 
Este método, que ​não recebe parâmetros​, remove um elemento do final do ​array​, atualizando seu tamanho​.​ Sua sintaxe é: 
frutas.pop(); 
shift 
Embora similar ao ​pop​, este método ​remove um elemento do início do ​array​. Após a remoção, este é ​reindexado (ou seja, o                                           
elemento de índice 1 passa a ser o de índice 0 e assim sucessivamente). Além disso, ​o tamanho do ​array também é                                           
atualizado.​ Sua sintaxe pode ser vista a seguir: 
frutas.shift(); 
splice 
Este método, introduzido anteriormente, pode ser usado para exclusão de elementos. Para tanto, ​ele recebe como                               
parâmetros a quantidade de elementos que se deseja eliminar e o índice a partir do qual estes serão excluídos​. A sintaxe a                                           
seguir demonstra a remoção de 2 elementos, a partir do índice 2, do ​array​ fornecido: 
var primos = [2,3,5,7,11,13,17]; 
primos.splice(2,2); 
alert(primos); //imprimirá 2,3,11,13,17 
Nesse método, para fins de remoção, ​o primeiro parâmetro indica o índice e o segundo, a quantidade de elementos a serem                                         
excluídos. 
Outras formas de remover elementos do vetor 
Existem outras maneiras para excluir elementos de um ​array​. Uma forma simples é ​determinar o tamanho, utilizando a                                   
propriedade ​length​, do ​array​.​ Isso fará com que este seja ​reduzido ao novo tamanho informado.​ Vejamos o exemplo prático: 
var primos = [2,3,5,7,11,13,17]; 
alert(primos.length); //imprimirá 7 
primos.length = 4; 
alert(primos.length); //imprimirá 4 
Nesse exemplo, ao definirmos o tamanho do ​array como 4, este será reduzido, sendo mantidos os elementos do índice 0 ao                                         
3 e excluídos os demais. 
Modulo 4 
Requisições assíncronas e síncronas 
 
O conceito de ​requisição​, no ambiente Web, ​diz respeito às informações solicitadas ou submetidas no lado cliente − através                                     
do navegador, por exemplo − ​e tratadas pelo lado servidor, que após processar a requisição devolverá uma resposta ao                                     
solicitante.​ Nesse sentido, são possíveis dois tipos de requisições: 
 Clique nas informações a seguir. 
Riquisições sincronicas 
Quando realizadas, estas bloqueiam o remetente. Ou seja, o cliente faz a requisição e fica impedido de realizar qualquer nova                                       
solicitação até que a anterior seja respondida pelo servidor. Com isso, só é possível realizar uma requisição de cada vez. 
Riquisições assíncronas  
Nestas não existe sincronismo. Logo, várias requisições podem ser realizadas em simultâneo, independentemente de ter                             
havido resposta do servidor às solicitações anteriores. 
Como as requisições assíncronas funcionam na prática 
Para melhor entendimento de como as requisições assíncronas funcionam na prática, tomemos como exemplo ​o ​feed das                                 
redes sociais​. Em tais páginas, novos conteúdos são carregados sem que seja necessário recarregar o navegador e,                                 
consequentemente, todo o conteúdo visto. 
Eventos como a rolagem de tela, por exemplo, fazem com que os conteúdos sejam carregados do servidor e exibidos na tela                                         
do dispositivo. 
AJAX - Requisições assíncronas em JavaScript 
Em JavaScript, quando falamos de requisições assíncronas, naturalmente falamos de ​AJAX​. Esse termo foi empregado pela                               
primeira vez em 2005 e engloba o uso não de uma, mas de várias tecnologias: ​HTML (ou XHTML), CSS, JavaScript, DOM,                                         
XML (e XSLT), além do elemento mais importante, o objeto XMLHttpRequest. 
A utilização de AJAX permite que as páginas e aplicações Web façam requisições a scripts do lado servidor e carreguem, de                                         
forma rápida e muitas vezes incremental, novos conteúdos sem que seja necessário recarregar a página inteira. 
Embora o “X” no acrônimo se refira a XML, esse não é o único formato disponível. Além dele, temos: ​o HTML, arquivos de                                             
texto e o JSON,​ sendo esse último o mais utilizado atualmente. Veremos sobre ele mais adiante.  
Em relação aos recursos para realização de requisições, há dois disponíveis em JS: ​o objeto XMLHttpRequest e ​a interface                                     
Fetch API​.  
XMLHttpRequest 
Inicialmente, foi implementado no navegador Internet Explorer através de um objeto do tipo ​ActiveX​. Posteriormente, outros                               
fabricantes fizeram suas implementações, dando origem ao ​XMLHttpRequest​, que se tornou o padrão atual. 
O XMLHttpRequest possui alguns métodos e propriedades. Alguns deles serão descritos após vermos um exemplo simples                               
de sua utilização: 
 
1 ​<!doctype html> 
2 ​<html lang="pt-BR"> 
3 ​<head> 
4 ​ <meta charset="utf-8"> 
5 ​ <title>Requisição XMLHttpRequest</title> 
6 ​</head> 
7 ​<body> 
8 ​ <h1>Imagens Aleatórios de Cachorros</h1> 
9 <p> A partir do click no botão abaixo uma nova imagem aleatória de cachorros será 
carregada utilizandorequisições assíncronas com XMLHttpRequest</p> 
10 
11 ​ <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" /> 
12 ​ <br/> 
13 ​ <button onclick="carregarImagens()">Carregar Imagens</button> 
14 ​</body> 
15 ​ <script type="text/javascript"> 
16 
17 ​ function carregarImagens(){ 
18 
19 ​ var xmlHttpRequest = new XMLHttpRequest(); 
20 ​ var url = "https://dog.ceo/api/breeds/image/random" 
21 
22 ​ xmlHttpRequest.open("GET", url, true); 
23 
24 ​ xmlHttpRequest.onreadystatechange = function() { 
25 ​ if (xmlHttpRequest.readyState == 3) { 
25 ​ console.log('Carregando o conteúdo'); 
27 ​ } 
28 ​ if (xmlHttpRequest.readyState == 4) { 
29 
30 ​ var jsonResponse = JSON.parse(xmlHttpRequest.responseText); 
31 
32 ​ console.log('Requisição Finalizada'); 
33 ​ console.log('Resultado da Requisição: ' + jsonResponse); 
34 ​ console.log('Resultado da Requisição: ' + jsonResponse.message); 
35 
36 ​ var imgDog = document.getElementById("img_dog"); 
37 ​ imgDog.src = jsonResponse.message; 
38 ​ } 
39 ​ }; 
40 
41 ​ xmlHttpRequest.send(null); 
42 
43 ​ } 
44 ​ </script> 
45 ​</html> 
46 
47 
48 
49 
Figura 6: Exemplo de requisição utilizando XMLHttpRequest. 
O código na Figura 6 contém tanto funcionalidades ​JavaScript vistas neste tema quanto algumas novas, além do                                 
XMLHttpRequest​, que veremos mais adiante. Ao utilizar esse código, você terá um exemplo real de dados sendo                                 
requisitados a um servidor − nesse caso, uma ​API que retorna imagens aleatórias de cachorros − e exibidos na página, sem                                         
que ela seja recarregada a cada nova requisição/click no botão. 
Por ora, vamos nos concentrar no ​XMLHttpRequest​. Utilizando as linhas contidas no código presente na figura anterior, veja: 
● Na linha 19 uma instância do objeto é criada. Esse é o primeiro passo para sua utilização. A partir desse ponto, toda                                           
referência deverá ser feita pelo nome da variável utilizada (em nosso exemplo, xmlHttpRequest);  
● A ​linha 22​ mostra a utilização do método ​open​, que recebe 3 parâmetros: 
O método de requisição dos dados. 
A url remota/do servidor que queremos acessar. 
O tipo de requisição – onde “​true​” define que será feita uma requisição assíncrona e “​false​”, uma síncrona. Esse argumento é                                         
opcional. Logo, pode não ser definido, assumindo o valor padrão “​true​”. 
● Continuando o código, na ​linha 24 temos a propriedade ​“onreadystatechange”​, que monitora o status da requisição                               
XMLHttpRequest – propriedade ​“readyState”​ − e especifica uma função a ser executada a cada mudança;  
● Repare, agora, ​na linha 25​: o status 3 significa que a requisição ainda está sendo processada. Logo, poderíamos, por                                     
exemplo, exibir em nossa tela uma mensagem (ou imagem, como é muito comum) avisando que a informação requisitada                                   
está sendo carregada. Perceba que, dependendo do tempo de resposta do servidor remoto, nem sempre será possível ver                                   
essa informação;  
● Já na ​linha 28 temos o tratamento do status quando ele for igual a 4, ou seja, quando a requisição estiver concluída.                                           
Além da propriedade ​“readyState”​, poderíamos também monitorar a propriedade ​“status”​, que armazena o código de                             
resposta do servidor Http utilizado pela XMLHttpRequest;  
● Seguindo o código de exemplo, na ​linha 30 vemos a propriedade ​“responseText”​. Além dela, está disponível também                                 
a ​“responseXML”​. Ambas dizem respeito a como trataremos o retorno da requisição: se como texto, no caso da primeira, ou                                       
como XML, no caso da segunda;   
● Ainda na ​linha 30​, repare que também foi utilizado outro método, o ​parse​. Esse método não pertence ao objeto                                     
XMLHttpRequest, mas este é necessário quando o recurso requisitado devolve o conteúdo em formato JSON;  
● Por fim, na ​linha 41​ é utilizado o método ​send​, que envia a requisição.  
Outros métodos e propriedades 
A Figura 6 mostra um exemplo simples do que é possível fazer utilizando AJAX. Além disso, apenas algumas propriedades e                                       
métodos foram vistos. 
API Fetch 
Essa API é, em termos conceituais, similar à XMLHttpRequest – ou seja, ​permite a realização de requisições assíncronas a                                     
scripts do lado servidor. Entretanto, por ser uma implementação mais recente, essa interface JavaScript apresenta algumas                               
vantagens, como: 
● O uso de ​promise​; 
● O fato de poder ser utilizado em outras tecnologias, como ​service workers​, por exemplo. 
A Figura 7 apresenta o mesmo exemplo utilizado na Figura 6, mas substituindo o XMLHttpRequest pela API Fetch. A seguir,                                       
alguns métodos e propriedades serão apresentados: 
 
1 ​<!doctype html> 
2 ​<html lang="pt-BR"> 
3 ​<head> 
4 ​ <meta charset="utf-8"> 
5 ​ <title>Requisição XMLHttpRequest</title> 
6 ​</head> 
7 ​<body> 
8 ​ <h1>Imagens Aleatórios de Cachorros</h1> 
9 <p>A partir do click no botão abaixo uma nova imagem aleatória de cachorros será 
carregada utilizando requisições assíncronas com XMLHttpRequest</p> 
10 
11 ​ <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" /> 
12 ​ <br/> 
13 ​ <button onclick="carregarImagens()">Carregar Imagens</button> 
14 ​</body> 
15 ​ <script type="text/javascript"> 
16 
17 ​ function carregarImagens(){ 
18 
19 ​ var url = "https://dog.ceo/api/breeds/image/random" 
20 ​ fetch(url, { 
21 ​ method: 'get' 
22 ​ }) 
23 ​ .then(function(response) { 
24 ​ response.json().then(function(data){ 
25 ​ console.log('Resultado da Requisição: ' + data.message); 
26 
27 ​ var imgDog = document.getElementById("img_dog"); 
28 ​ imgDog.src = data.message; 
29 ​ }); 
30 ​ }) 
31 ​ .catch(function(err) { 
32 ​ console.error('O seguinte erro ocorreu durante a requisição: ' + err); 
33 ​ }); 
34 
35 ​ } 
36 ​ </script> 
37 ​</html> 
38 
39 
40 
41 
Figura 7: Exemplo de requisição utilizando API Fetch. 
Em relação à sua sintaxe, podemos notar algumas semelhanças com a XMLHttpRequest: 
● URL do servidor remoto, definida na ​linha 19​ e utilizada na ​linha 21​; 
● Fetch options – em nosso exemplo utilizamos apenas um parâmetro, ​o método​. Tal parâmetro, inclusive, é                               
opcional. Veja a ​linha 21​, onde declaramos o ​GET​, que é o método padrão. Além desse parâmetro, há outros disponíveis; 
● Tipo de dado retornado pela requisição. Veja a ​linha 24​, onde foi utilizado o objeto correspondente ao tipo de dado                                       
retornado pela requisição – nesse caso, ​JSON​. Há outros tipos de objetos, como texto e até mesmo bytes, sendo possível,                                       
por exemplo, carregar imagens, arquivos pdf, entre outros. 
JSON 
JSON pode ser traduzido para Notação deObjetos JavaScript. Trata-se de um tipo, ou formatação, leve para troca de dados.                                       
Essa, inclusive, é sua principal vantagem em relação aos outros tipos. Além disso, destaca-se também a sua ​simplicidade​,                                   
tanto para ser interpretado por pessoas quanto por “máquinas”. 
A Figura 8 apresenta alguns exemplos da estrutura de um objeto JSON: 
 
Como visto na imagem, um objeto JSON tem as seguintes características: 
● É composto por um conjunto de pares nome/valor. Na imagem, “​status​” é o nome de um objeto e “​success​”, o seu                                         
valor. Esses pares são separados por dois pontos ​“:”​; 
● Para separar pares, valores ou objetos é utilizada a ​vírgula​; 
● O objeto e seus pares são englobados por chaves ​“{ }”​; 
● É possível definirmos ​arrays​. Esses são englobados por colchetes ​“[ ]”​.  
O JSON fornece suporte a uma gama de tipos de dados. Além disso, possui alguns métodos, como o ​JSON.parse()​, visto                                       
em um de nossos exemplos. 
Tema 5 
A LINGUAGEM PHP 
Fonte: Shutterstock | 
gdainti 
O ​PHP é uma linguagem de script ​open source de uso geral. Muito utilizada, é especialmente adequada para o                                     
desenvolvimento Web​ e pode ser embutida dentro do ​HTML (PHP)​. 
A explicação anterior consta no site oficial do PHP, de onde os fragmentos a seguir também foram retirados: 
O que distingue o PHP de algo como o ​JavaScript no lado do cliente é que o código é executado no servidor, gerando o 
HTML que é então enviado para o navegador. O navegador recebe os resultados da execução desse script, mas não sabe 
qual era o código-fonte (PHP). 
O PHP, como é conhecido atualmente, é na verdade o sucessor para um produto chamado PHP/FI. Criada em 1994 por 
Rasmus Lerdof, a primeira encarnação do PHP foi um simples conjunto de binários ​Common Gateway Interface (CGI) escrito 
em linguagem de programação C (PHP). 
Em junho de 1995, Rasmus liberou o código-fonte do PHP Tools para o público, o que permitiu que desenvolvedores 
usassem da forma como desejassem. Isso permitiu − e encorajou − usuários a fornecerem correções para bugs no código e, 
em geral, aperfeiçoá-lo. Em setembro do mesmo ano, Rasmus expandiu o PHP e − por um breve período − mudou o nome, 
referindo-se, agora, à ferramenta como FI, abreviação para "​Forms Interpreter​". A nova implementação incluiu algumas 
funcionalidades básicas do PHP como bem conhecemos hoje. Tinha variáveis no estilo Perl, interpretação automática de 
variáveis de formulários e sintaxe HTML embutida (PHP). 
PHP, s.d. 
Essas citações ajudam a entender o contexto e os propósitos iniciais da criação da linguagem. Como veremos a seguir, ​a                                       
primeira finalidade do PHP foi interpretar, do lado servidor, os formulários HTML, fornecendo, assim, dinamismo às                               
páginas Web​. Isso porque, com essa linguagem, é possível adicionar recursos como consulta a banco de dados,                                 
processamento e tratamento de dados e consumo de recursos externos − como ​APIs​ −, entre tantas outras possibilidades. 
Para descrevermos a linguagem PHP, é necessário começar pela sua ​sintaxe básica​, apresentando ​as variáveis​, ​os                               
operadores​ e ​as formas de leitura de dados a partir da integração com a HTML​. 
SINTAXE 
Tags PHP 
O script PHP deve ser iniciado pela tag “​<?php​” e fechado com a tag “​?>​”. Isso é necessário para que o servidor Web entenda                                               
qual código deve ser interpretado e qual deve ser apenas ​renderizado​, uma vez que tags HTML podem ser inseridas dentro                                       
de um arquivo contendo código PHP. Veja o exemplo a seguir: 
 
1 ​<!doctype html> 
2 ​<html lang="pt-BR"> 
3 ​<head>Primeiro código PHP com tags HTML</head> 
4 ​<body> 
5 ​<h1>Título do texto</h1> 
6 ​<p><?php echo "Olá, mundo"; ?></p> 
7 ​</body> 
8 ​</html> 
O código anterior poderia ser salvo como um script PHP. 
Por exemplo: “​ola_mundo.php​”. Ao serem interpretados pelo servidor, tanto o código HTML quanto o código PHP, dentro das                                   
tags ​<?php e ?>​, são convertidos em código HTML normal e renderizados no navegador. O servidor Web pode ser                                     
configurado para interpretar scripts PHP sem que seja necessário utilizar a extensão “​.php​”. Nesse caso, é usada outra                                   
extensão, ou nenhuma − isso é útil quando não queremos revelar a linguagem utilizada em nosso site. 
Término de instruções e comentários 
As instruções PHP devem ser, obrigatoriamente, ​terminadas com a utilização de ponto e vírgula​. Logo, ao final de cada                                     
comando, devemos indicar que ele foi terminado. 
Em relação aos comentários, temos duas opções: 
Os de uma linha são iniciados com duas barras: ​// 
Os de múltiplas linhas são delimitados por ​/*​ e ​*/ 
Veja a seguir os exemplos de finalização de comandos e de utilização de comentários: 
 
 1 ​<?php 
 2 ​//Comentários de uma linha são realizados com a utilização de barras duplas 
 3 
 4 ​/* 
 5 ​Cada comando deve ser terminado com ; 
 6 ​Abaixo temos alguns exemplos de término de comandos 
 7 ​*/ 
 8 
 9 ​echo "Olá, mundo"; 
10 ​$var1 = 2 + 2; 
11 
12 ​echo "O Resultado da soma é igual a: " . $var1; 
Variáveis em PHP 
As variáveis são um dos principais recursos em uma linguagem de programação. Em PHP, a definição de uma variável é feita                                         
com a utilização do símbolo “​$​” ​seguido do nome da mesma​. No código de exemplo anterior, a variável “​$var1​” foi declarada                                         
e, ao mesmo tempo, inicializada. 
Em PHP, diferentemente de linguagens como Java, não é necessário informar o tipo de variável. Tal fato concede ao PHP a                                         
característica de ​linguagem fracamente tipada​. Com isso, não há diferenças no momento da criação de variáveis para                                 
receber dados numéricos, textuais, alfanuméricos, entre outros. 
A respeito dos nomes das variáveis temos, ainda, as seguintes regras: 
Os nomes de variável são ​case-sensitive​. Logo, há diferença entre letras maiúsculas e minúsculas. 
Para ser válido, o nome da variável deve começar com uma letra ou um sublinhado (​underscore​). 
Após o primeiro ​caractere​ (letra ou sublinhado) podem ser utilizados letras, números e sublinhados. 
Atribuição de valores 
A atribuição de valores a variáveis em PHP é realizada com a utilização do sinal de igual “=”. Veja este novo exemplo: 
 
1 ​<?php 
2 ​$_nomeCurso = "Programação de Páginas Dinâmicas com PHP"; 
3 ​$ano_criacao = 1994; 
4 ​$flagLinguagemScript = true; 
Repare que diversos tipos de dados foram utilizados e atribuídos às variáveis declaradas. Além disso, diferentes convenções                                 
de nomeação foram aplicadas – início com ​underscore​; separação por ​underscore​; ​CamelCase​. É boa prática escolher um                                 
único padrão e utilizá-lo em todo o projeto. 
Atenção 
Em PHP, as variáveis não inicializadas possuem um valor padrão. Nas do tipo booleano, por exemplo, o valor padrão é false.                                         
Logo, é recomendado − e também uma boa prática − inicializar as variáveis antes de utilizá-las, embora isso não seja                                       
obrigatório. 
VARIÁVEIS DE REQUISIÇÃO HTTP 
Na linguagem PHP estão disponíveis algumas variáveis predefinidas – também chamadas de ​superglobais​. Entre elas, estão                               
as de requisição HTTP: ​$_REQUEST​, ​$_POST e ​$_GET​. Em linhas gerais,essas três variáveis têm a mesma função, ou seja,                                       
receber dados provenientes de formulários HTML ou de outras requisições HTTP que façam uso dos métodos POST e GET. 
Métodos de requisição HTTP 
A especificação do protocolo HTTP estabelece uma série de métodos de requisição cuja função é indicar qual ação deve ser                                       
executada por determinado recurso. Nesse sentido, cada um deles implementa uma diferente semântica. São nove os                               
métodos disponíveis: 
GET 
HEAD 
POST 
PUT 
DELETE 
CONNECT 
OPTIONS 
TRACE 
PATCH 
A seguir, veremos exemplos de utilização dos métodos GET e POST, que são os mais usados em programas PHP. 
MÉTODO GET 
Esse método é utilizado na requisição e na recuperação de recursos de um servidor, como uma página ou um arquivo,                                       
entre outros. Veja o exemplo de uma requisição GET: 
 
/endereco_servidor/script.php?var1=value1​&var2=​value2​&var3=​value3 
Figura 1: Exemplo de requisição com o método GET 
MÉTODO POST 
Esse método é usado no envio de dados para o servidor a fim de criar ou atualizar um recurso. A figura 2 mostra o corpo de                                                   
uma requisição feita com POST: 
 
POST /endereco_servidor/script.php 
Host: dominio.com.br 
var1=value1​&var2=​value2​&var3=​value3 
Figura 2: Exemplo de requisição com o método POST 
Assim como o GET, esse método pode ser utilizado em formulários HTML, com a vantagem de não deixar os dados                                       
transmitidos visíveis na barra de endereços do navegador – embora seja possível acessá-los analisando a requisição em                                 
si. 
Variável $_GET 
Em PHP, essa variável predefinida é um ​array associativo que contém as variáveis recebidas de métodos HTTP GET.                                   
Voltando ao exemplo da figura 1, no script “script1.php” as variáveis passadas seriam representadas da seguinte forma: 
 
<?php 
 
//Requisição GET: /endereco_servidor/script.php?var1=value1&var2=value2&var3=value3 
 
 
echo $_GET['var1']; //imprimiria value1 
echo $_GET['var2']; //imprimiria value2 
echo $_GET['var3']; //imprimiria value3 
Figura 3: Manipulando variáveis com ​$_GET 
Como visto na figura, no ​array ​$_GET os índices correspondem aos nomes das variáveis da ​query string submetida com o                                       
método GET, assim como seus valores. 
Variável $_POST 
A exemplo de ​$_GET​, a variável predefinida ​$_POST também é um ​array associativo. Entretanto, ela contém as variáveis                                   
recebidas através de métodos POST. 
Variável $_REQUEST 
É considerada "coringa", uma vez que exerce múltiplos papéis. Com ela, é possível receber tanto variáveis provenientes de                                   
métodos GET quanto POST – e também do método ​cookies​ (​$_COOKIE​). 
Sua utilização é semelhante ao que foi visto em ​$_GET​ e ​$_POST​. 
OPERADORES 
Um operador − no contexto de linguagens de programação ou mesmo em outras áreas, como na Matemática − tem a função                                         
de ​receber um ou mais valores e resultar em outro valor ou valores​. Por exemplo: 
2 + 2 = 4 
2 - 2 = 0 
2 * 2 = 4 
2 / 2 = 1 
Os sinais “​+​”, “​-​“, “​*​” e “​/​” representam as operações matemáticas de adição, subtração, multiplicação e divisão,                                 
respectivamente. Logo, são chamados de ​operadores aritméticos​. Em PHP, além dos operadores aritméticos, há outros                             
disponíveis. Veremos os principais a seguir: 
Operadores aritméticos 
Além dos mencionados no exemplo, também estão disponíveis em PHP outros quatro operadores aritméticos, sendo os dois                                 
a seguir os mais importantes: 
Tabela 1: Operadores aritméticos em PHP 
Esse tipo de operador é usado, sobretudo, com números (​int/integer e ​float​) para a realização de cálculos. Quando utilizado                                     
com outra forma de dado, é feita a conversão para o tipo numérico antes que a operação seja realizada. 
Operadores de atribuição 
São utilizados na atribuição de valores a variáveis. Além de casos simples, como o que vimos com o operador “​=​”, é possível                                           
realizar a combinação de operadores de atribuição com os aritméticos. Para ficar mais claro, vamos aos exemplos: 
Operador / Exemplo de utilização Para que serve 
% $var1 % $var2 Operador de módulo. Retorna o resto da divisão inte 
de $var1 por $var2 
* $var1 ** $var2 Operador exponencial. Retorna o resultado de $v 
elevado a $var2 
 
<?php 
 
$var1 = 4; //a variável foi inicializada com o valor de 4 
$var1 += 2; //com a utilização da combinação de operadores a variável $var1 passou a ter o 
valor de 6 (4 + 2) 
$var1 *= 2; //com a utilização da combinação de operadores a variável $var1 passou a ter o 
valor de 12 (4 + 2) * 2 
 
$var2 = "Programação"; 
$var2 .= " com PHP"; //com a utilização da combinação de operadores a variável $var2 passou a 
ter o conteúdo "Programação com PHP" 
 
$var = ($var4 = "Copie esses códigos") . " e pratique seus conhecimentos!" ; 
/* 
No exemplo acima o conteúdo da variável $var3 é igual a "Copie esses códigos e pratique seus 
conhecimentos!" 
Já a variável $var4 possui o conteúdo "Copie esses códigos" 
*/ 
Figura 4: Combinação de operadores de atribuição e aritméticos 
Operadores de comparação 
São utilizados para comparar dois valores. A tabela 2 apresenta os operadores disponíveis e suas funções: 
Operador / Exemplo de utilização Para que serve 
== $var1 == $var2 Verifica se $var1 é igual a $var2 
=== $var1 === $var2 Verifica se $var1 é idêntica a $var2. Nesse caso, além do va 
verifica se ambas são do mesmo tipo 
= $var1 != $var2 Verifica se $var1 é diferente de $var2 
<> $var1 <> $var2 
== $var1 !== $var2 Verifica se não são idênticas/iguais ou se não são do mes 
po 
< $var1 < $var2 Verifica se $var1 é menor que $var2 
Tabela 2: Operadores de comparação 
Dica 
A partir da versão 7 do PHP, um novo operador foi incluído, o “​spaceship​”, cuja forma de utilização é “​$var1<=> $var2​”. Ele                                           
retorna -1, 0 ou 1 quando ​$var1​ for, respectivamente, menor, igual ou maior que ​$var2​. 
Operadores lógicos 
São usados para combinar expressões lógicas. A tabela 3 mostra os operadores lógicos disponíveis em PHP: 
Tabela 3: Operadores lógicos 
Como visto, os operadores “​and​” / “​&&​” e “​or​” / “​||​” têm a mesma função. Entretanto, “​and​” e “​or​” têm maior precedência que                                             
seus equivalentes. 
Modulo 2 
ESTRUTURAS DE DECISÃO 
> $var1 > $var2 Verifica se $var1 é maior que $var2 
<= $var1 <= $var2 Verifica se $var1 é menor ou igual a $var2 
>= $var1 >= $var2 Verifica se $var1 é maior ou igual a $var2 
Operador / Exemplo de utilização Para que serve 
and $var1 ​and​ $var2 Retorna ​true​ se $var1 E $var2 forem verdadeiras 
or ​> $var1 ​or ​ $var2 Retorna ​true​ se $var1 OU $var2 forem verdadeiras 
xor $var1 ​xor ​ $var2 Retorna ​true se $var1 OU $var2 forem verdadei 
mas não ambas 
$var1 Retorna ​true​ se $var1 não for verdadeira 
&& $var1 && $var2 Retorna ​true​ se $var1 E $var2 forem verdadeiras 
 $var1 || $var2 Retorna true se $var1 OU $var2 forem verdadeiras 
Figura 5: Fluxo das 
estruturas de decisão 
A figura 5 demonstra o fluxo de uma ​estrutura de decisão​. Nela é possível ver que, a partir da verificação de uma condição, o                                               
programa se divide em dois caminhos possíveis. Esse é um exemplo simples, uma vez que várias condições podem ser                                     
verificadas ao mesmo tempo, assim como vários caminhos alternativos podem ser seguidos. 
Na linguagem de programação PHP, estãodisponíveis as seguintes estruturas de decisão: ​if​, ​else​, ​elseif/else if e ​switch​.                                   
Cada uma delas será vista a seguir. 
If 
A sintaxe da estrutura de controle ​if em PHP é composta pela condição (ou condições) a ser verificada e, caso seja                                         
verdadeira, é seguida da instrução (ou instruções) a ser executada. Logo, temos que as condições são avaliadas por seus                                     
valores booleanos, isto é, se são verdadeiras ou falsas. Vejamos este fragmento de código PHP: 
 
1 ​<?php 
2 
3 ​$var1 = 10; 
4 ​$var2 = 20; 
5 
6 ​if($var1 > $var2){ 
7 ​echo "$var1 é maior que $var2"; 
8 ​} 
No exemplo foi realizada apenas uma verificação – a comparação entre as duas variáveis definidas. Caso a primeira seja                                     
maior que a segunda, uma mensagem é exibida na tela. É possível também realizar outras verificações em um mesmo ​if​.                                       
Para isso, basta utilizar subgrupos. 
Antes de prosseguirmos, cabe destacar mais alguns elementos da sintaxe do ​if​: 
● A condição (ou condições) a ser avaliada deve ser envolvida por parênteses, sendo possível incluir subgrupos dentro                                 
de novos parênteses. 
● Múltiplas instruções devem ser envolvidas com chaves. No exemplo, como só há uma instrução a ser executada, as                                   
chaves são opcionais e podem ser omitidas. 
Else 
Para apresentar a estrutura ​else​, voltaremos ao exemplo anterior, no qual é verificado se uma variável era maior do que a                                         
outra e, em caso positivo, exibida uma mensagem. 
O que acontece em nosso programa caso a condição em questão não seja verdadeira? 
Qual retorno é exibido nesse caso? 
Execute o código e veja você mesmo: 
Como $var1 é menor que $var2, nada é exibido no navegador, já que a condição é falsa. Nessa situação, para imprimirmos                                         
uma mensagem informando que a condição é falsa, ou seja, que $var1 é menor que $var2, faremos uso do ​else​. Veja como                                           
ficaria nosso código nesse ponto: 
 
1 ​<?php 
2 
3 ​$var1 = 10; 
4 ​$var2 = 20; 
5 
6 ​if($var1 > $var2){ 
7 ​echo "$var1 é maior que $var2"; 
8 ​}else{ 
9 ​echo "$var1 é menor que $var2"; 
10 ​} 
● Como demonstrado no exemplo, a estrutura ​else tem a função de definir um fluxo alternativo ao nosso programa,                                   
caso uma determinada condição seja falsa. 
● Em relação à sua sintaxe, vale o que foi dito para ​if​, sobre múltiplas instruções precisarem ser envolvidas em chaves. 
Elseif /else if 
É uma combinação das duas instruções vistas. Logo, sua função é definir fluxo (ou fluxos) alternativo caso uma condição                                     
verificada com ​if seja falsa. Entretanto, ela permite ainda que uma nova condição (ou até mesmo condições) seja avaliada.                                     
Vamos ao exemplo de seu uso: 
 
 1 ​<?php 
 2 
 3 ​$var1 = 10; 
 4 ​$var2 = 10; 
 5 
 6 ​if($var1 > $var2){ 
 7 ​echo "$var1 é maior que $var2"; 
 8 ​}elseif($var1 < $var2){ 
 9 ​echo "$var1 é menor que $var2"; 
10 ​}else{ 
11 ​echo "$var1 e $var2 são iguais"; 
12 ​} 
● Repare que além da primeira verificação, com o ​if​, foi inserida uma segunda, com ​elseif​. Ao final, a instrução ​else                                       
representa o fluxo caso nem a condição do ​if​ e nem a do ​elseif​ sejam verdadeiras. 
● Sobre sua sintaxe, além do que já foi dito no ​if​, cabe destacar que não há limites de instruções ​elseif dentro de uma                                             
declaração ​if​. 
Switch 
Pode ser comparada a uma série de instruções ​if​, possuindo uma sintaxe um pouco diferente e usada sobretudo quando se                                       
deseja verificar diferentes valores, inúmeras vezes, em uma mesma variável. Vejamos sua sintaxe por meio de um novo                                   
exemplo: 
 
 1 ​<?php 
 2 
 3 ​switch($var1){ 
 4 ​case 10: 
 5 ​echo "var1 é igual a 10"; 
 6 ​break; 
 7 ​case 20: 
 8 ​echo "var1 é igual a 20"; 
 9 ​break; 
10 ​default: 
11 ​echo "var1 não é igual a 10 e nem a 20"; 
12 ​break; 
13 ​} 
● Com o ​switch temos uma série de verificações e, ao final, uma instrução padrão (​default​) a ser executada, caso                                     
nenhuma das condições seja verdadeira. 
Formas alternativas 
PHP permite que sejam utilizadas formas alternativas das instruções vistas. Em linhas gerais, troca-se a chave de abertura                                   
por dois pontos e a de fechamento pela palavra reservada “​end​” seguida do nome da instrução. Veja o exemplo: 
 
 1 ​<?php 
 2 
 3 ​$var1 = 10; 
 4 ​$var2 = 10; 
 5 
 6 ​if($var1 > $var2): 
 7 ​echo "$var1 é maior que $var2"; 
 8 ​elseif($var1 < $var2?): 
 9 ​echo "$var1 é menor que $var2"; 
10 ​else: 
11 ​echo "$var1 e $var2 são iguais"; 
12 ​endif; 
Essa sintaxe é muito utilizada quando misturamos código HTML e PHP. 
Outra sintaxe alternativa interessante presente no PHP é o ​operador ternário​. Através dele é possível avaliar uma condição e                                     
atribuir um valor de acordo com a validação. Veja o exemplo para ficar mais claro: 
 
1 ​<?php 
2 
3 ​$var1 = 10; 
4 ​$var2 = ($var1 >= 10) ? 11 : 9; 
5 ​echo $var2; //imprimirá 11 
● Note que uma condição foi verificada dentro de parênteses. Caso verdadeira, após o sinal “​?​” é atribuído o valor “​11​”.                                       
Caso negativa, após o sinal “​:​” é atribuído o valor “​9”​. 
ESTRUTURAS DE REPETIÇÃO 
As ​estruturas de repetição​, muitas vezes também chamadas de ​laços​, permitem que instruções ou trechos de códigos                                 
sejam executados de forma repetitiva. Sua sintaxe define as condições ou expressões que devem ser verificadas e, caso                                   
essas sejam verdadeiras, quais instruções devem ser executadas e por quantas vezes. A figura 6 apresenta o fluxo básico                                     
das estruturas de repetição. 
Em PHP estão disponíveis as seguintes estruturas: ​while​, ​do-while​, ​for​, ​foreach​. A seguir, cada uma delas será descrita. 
​Figura 6: Fluxo das estruturas de repetição 
While 
O laço ​while possui uma sintaxe simples: enquanto uma expressão for verdadeira, uma série de instruções será executada                                   
de forma repetida. Para imprimirmos na tela os números de 2 a 20, pulando de 2 em 2, poderíamos utilizar o seguinte código: 
 
 1 ​<?php 
 2 
 3 ​$i = 2; 
 4 ​while ($i <= 20) { 
 5 ​echo $i; 
 6 ​$i+=2; 
 7 ​echo "\n"; 
 8 ​} 
 9 
10 ​/*Sintaxe alternativa*/ 
11 ​$i = 2; 
12 ​while ($i <= 20): 
13 ​echo $i; 
14 ​$i+=2; 
15 ​echo "\n"; 
16 ​endwhile; 
Do-while 
Esse laço é semelhante ao anterior, exceto pelo fato de que a verificação, aqui, é feita ao final. Com isso, a primeira instrução                                             
dentro do laço sempre será executada. Veja o exemplo: 
 
1 ​<?php 
2 
3 ​$i = 2; 
4 ​do { 
5 ​echo $i; 
6 ​$i+=2; 
7 ​echo "\n"; 
8 ​}while ($i <= 20); 
For 
Esse laço possui sintaxe um pouco diferente do que vimos nos anteriores. Vamos ao exemplo: 
 
1 ​<?php 
2 
3 ​for ($i = 1; $i <= 20; $i++) { 
4 ​echo $i; 
5 ​echo "\n"; 
6 ​} 
Com o laço ​for​, temos três expressões sendo avaliadas. Considerando o exemplo anterior, temos: 
A primeira expressão − “​$i = 0​” − é avaliada, incondicionalmente, no início da repetição. 
A seguir, a cada interação, a segunda expressão − “​$i <= 20​” − é avaliada. Caso seja verdadeira, o loop continuará. 
Por último, ao final de cada interação, a terceira expressão − “​$i++​” − é avaliada e executada. 
Foreach 
A última estrutura de repetição que veremos em PHP é a ​foreach​. Esse laço é parecido com o ​for​, possuindo uma sintaxe                                           
mais simples e sendo muito propício para realizarinterações em ​arrays​. Veja o exemplo: 
 
 1 ​<?php 
 2 ​$carros = Array("Fusca", "Monza", "Passat"); 
 3 
 4 ​foreach($carros as $carro){ 
 5 ​echo $carro; 
 6 ​echo "\n"; 
 7 ​} 
 8 
 9 ​for ($i = 0; $i < count($carros); $i++) { 
10 ​echo $carros[$i]; 
11 ​echo "\n"; 
12 ​} 
Para fins de comparação e demonstração da diferença entre ambos, em nosso exemplo a mesma operação – imprimir os                                     
nomes dos carros – foi realizada tanto com o laço ​foreach​ quanto com o laço ​for​. 
Modulo 3 
VETORES 
Os vetores, ou ​arrays​, são variáveis que armazenam um grupo de itens relacionados. Observando o exemplo utilizado ao                                   
final do último módulo, vimos a variável “​$carros​” armazenar nomes de carros. 
Os ​arrays podem ser vistos, numa abstração com o nosso dia a dia, como listas escritas em uma folha: nela inserimos vários                                           
itens, de forma ordenada. Com isso, cada novo elemento é incluído ao final da lista – embora seja possível inseri-los também                                         
em outra ordem. Nas linguagens de programação em geral, e especificamente em PHP, os ​arrays funcionam exatamente                                 
dessa forma: ​uma lista ordenada na qual novos itens podem ser inseridos, assim como os existentes podem ser deletados                                     
ou substituídos. 
 
 
Os ​arrays são compostos por dois elementos principais: ​o item em si e ​o seu índice​, que é a posição que este ocupa dentro                                               
de um ​array​. Esse número se inicia em ​0​. Entretanto, os índices também podem ser formados por ​strings​. 
Em PHP estão presentes diferentes tipos de ​arrays​. São eles: 
Array​ numérico 
Índice composto por números inteiros 
Array​ associativo 
Índice composto por ​strings 
Array​ misto 
Índices numéricos e associativos 
Criação de ​arrays​ e atribuição de valores 
A linguagem PHP, por ser simples e bastante flexível, permite diferentes formas de declarar e atribuir valores em um ​array​.                                       
Não existe uma maneira melhor do que a outra − qualquer uma delas pode ser utilizada. Nesse sentido, cabe destacar a                                         
última forma: ​ela é bastante útil em situações nas quais não sabemos o tamanho do ​array ou a quantidade de itens que ele                                             
receberá. 
Ao estudar os exemplos, repare, ainda, nos comentários inseridos no código. Vamos a eles: 
 
<?php 
//Declarando um array vazio 
$carros = array(); 
 
//Primeira forma de declaração e atribuição de valores 
$carros = Array("Fusca", "Monza", "Passat"); 
 
//Segunda forma de declaração e atribuição de valores 
//Esta forma é semelhante à anterior, mas utilizando sintaxe similar a do Javascript 
$carros = ["Fusca", "Monza", "Passat"]; 
 
//Terceira forma de declaração e atribuição de valores 
$carros[0] = "Fusca"; 
$carros[1] = "Monza"; 
$carros[2] = "Passat"; 
 
//Quarta forma de declaração e atribuição de valores 
$carros[] = "Fusca"; 
$carros[] = "Monza"; 
$carros[] = "Passat"; 
Os ​arrays anteriores são ​numéricos​. Vejamos outros exemplos, agora com vetores ​associativos​. Repare que a principal                               
diferença é a utilização de ​strings​ no lugar de números para definir os seus índices. 
 
 1 ​<?php 
 2 ​//Primeira forma 
 3 ​$carros = array ( 
 4 ​'vw' => "Fusca", 
 5 ​'chevrolet' => "Monza", 
 6 ​'fiat' => "Tempra" 
 7 ​); 
 8 
 9 ​//Segunda forma 
10 ​$carros = [ 
11 ​'vw' => "Fusca", 
12 ​'chevrolet' => "Monza", 
13 ​'fiat' => "Tempra" 
14 ​]; 
15 
16 ​//Terceira forma 
17 ​$carros['vw'] = "Fusca"; 
18 ​$carros['chevrolet'] = "Monza"; 
19 ​$carros['fiat'] = "Tempra"; 
Por fim, veremos exemplos de ​array com índices ​numéricos e associativos​. Repare que a sintaxe é parecida com a vista na                                         
declaração dos associativos, ou seja, cada par “​índice/valor​” é separado por ‘​=>​’. Veja a seguir o exemplo e teste você                                       
mesmo o código em questão. Declare o ​array​, seus valores e depois imprima na tela. Vamos ao código: 
 
 1 ​<?php 
 2 ​$carros = array ( 
 3 ​'vw' => "Fusca", 
 4 ​0 => "Passat", 
 5 ​'chevrolet' => "Monza", 
 6 ​1 => "Chevette", 
 7 ​'fiat' => "Tempra", 
 8 ​2 => "Uno" 
 9 ​); 
10 ​//A impressão desse array gera a seguinte saída 
11 ​//Faça você mesmo: utilize a função print_r($carros); e veja o resultado em sua tela. 
12 ​/* 
13 ​Array 
14 ​( 
15 ​[vw] => Fusca 
16 ​[0] => Passat 
17 ​[chevrolet] => Monza 
18 ​[1] => Chevette 
19 ​[fiat] => Tempra 
20 ​[2] => Uno 
21 ​) 
22 ​*/ 
As formas vistas nos exemplos anteriores são as mais simples para a criação e inserção de elementos. Entretanto, a                                     
linguagem oferece outras formas, através do uso de funções como a ​array_push (que adiciona elementos ao final de um                                     
array​) e a ​array_unshifit​ (adiciona elementos no início de um ​array​). 
Remoção de elementos de um ​array 
Há algumas formas de remover elementos de um ​array​. 
A primeira é definindo o valor do elemento como vazio. Nesse caso, embora o valor do elemento seja removido, o seu índice                                           
permanece no vetor, que também mantém o seu tamanho inicial. 
Outra forma é fazendo uso de duas funções: unset e array_splice. 
O código a seguir − que como os demais é totalmente funcional e, portanto, deverá ser executado por você − contém                                         
exemplos de utilização das formas apresentadas. Seguem algumas observações sobre o código e o uso das funções: 
“​print_r​” 
A função “​print_r​” imprime os elementos de um ​array​. 
“​count​” 
A função “​count​” retorna o tamanho (quantidade de elementos) de um ​array​. Essa função, inclusive, é muito útil quando                                     
trabalhamos com vetores. 
“​unset​” 
A função “​unset​” recebe como parâmetro o ​array e índice ou índices que desejamos remover. Além disso, é possível também                                       
remover o vetor inteiro, passando-o como parâmetro e sem definir nenhum índice. 
“​array_splice​” 
A função “​array_splice​” recebe como parâmetros o ​array a ser manipulado, o ​offset (índice a partir do qual desejamos excluir                                       
elementos) e o ​length​ (quantidade de itens que queremos excluir). 
 
 1 ​<?php 
 2 ​$carros = array ( 
 3 ​'vw' => "Fusca", 
 4 ​0 => "Passat", 
 5 ​'chevrolet' => "Monza", 
 6 ​1 => "Chevette", 
 7 ​'fiat' => "Tempra", 
 8 ​2 => "Uno" 
 9 ​); 
10 ​print_r($carros); 
11 ​echo "O tamanho atual do array é: " . count($carros); 
12 ​echo "\n\n"; 
13 ​//Definindo o valor do índice 0 como vazio 
14 ​$carros[0] = ''; 
15 
16 ​print_r($carros); 
17 ​echo "O tamanho atual do array é: " . count($carros); 
18 ​echo "\n\n"; 
19 
20 ​//Removendo dois elementos do array com unset 
21 ​unset($carros['fiat'], $carros[1]); 
22 
23 ​print_r($carros); 
24 ​echo "O tamanho atual do array é: " . count($carros); 
25 ​echo "\n\n"; 
26 
27 ​//Removendo elementos do array com array_splice 
28 ​array_splice($carros, 1,2); 
29 
30 ​print_r($carros); 
31 ​echo "O tamanho atual do array é: " . count($carros); 
Arrays​ multidimensionais 
O ​array que será visto na letra “b”, a seguir, é ​multidimensional​. Ou seja, ele é composto por mais de uma dimensão – nesse                                               
caso, duas. Olhando para o exemplo, temos: 
● Dois índices principais, associativos, cujas chaves são ‘vermelhas’ e ‘cítricas’. 
● Cada uma dessas chaves possui um novo ​array​, numérico, que contém quatro elementos. 
Essas estruturas de dados são similares às vistas na disciplina de Matemática, onde temos também as ​matrizes​, que podemser chamadas de ​vetores de vetores​. Trazendo esse conceito ao contexto em questão, temos um ​array de ​arrays​, ou ​um                                       
array​ dentro de outro ​array​. 
FUNÇÕES 
Funções​, em linguagens de programação, são pedaços de código, encapsulados, que podem ser chamados em qualquer                               
outro trecho do programa ou do código. Em relação à sua sintaxe, uma função deve ter ​um nome, uma definição e uma                                           
posterior invocação à mesma. 
Em uma linguagem, as funções podem ser ​nativas − como a função “​print_r​”, utilizada em alguns exemplos anteriores −                                     
ou ​construídas pelo desenvolvedor​ – também chamadas de funções definidas pelo usuário. 
Funções em PHP 
O exemplo a seguir descreve a sintaxe de criação de uma função em PHP e a forma de invocá-la. 
 
 1 ​<?php 
 2 ​$num1 = 10; 
 3 ​$num2 = 15; 
 4 
 5 ​$num3 = soma($num1,$num2); 
 6 ​imprimir_resultado($num3); 
 7 
 8 
 9 ​function soma($numero1, $numero2) 
10 ​{ 
11 ​return $numero1 + $numero2; 
12 ​} 
13 ​function imprimir_resultado($numero) 
14 ​{ 
15 ​echo "O resultado da operação é igual a: " . $numero; 
16 ​} 
Como visto no exemplo (aproveite para executá-lo antes de continuar a leitura), a sintaxe de uma função contém os                                     
seguintes elementos: 
● Palavra reservada “​function​” seguida do nome da função. 
● Nome da função seguido de parênteses – “​()​”. Caso receba parâmetros, eles deverão ser declarados dentro dos                                 
parênteses. Do contrário, deverão ficar sem conteúdo. 
● Instruções da função envoltas em chaves – “​{}​”. 
As funções em PHP podem ou não retornar resultados. A primeira delas, “​soma​”, através do operador “​return​”, devolve o                                     
resultado da soma entre os dois parâmetros recebidos. Repare que a variável “$num3” recebe justamente esse resultado. Já                                   
a função “imprimir_resultado” não retorna valores, apenas imprimindo uma frase na tela. 
Atenção 
Outra particularidade em PHP é que ​as funções não precisam estar definidas para serem invocadas​. Repare que chamamos                                   
as duas antes mesmo de codificá-las. Devemos, porém, nos atentar para a quantidade de parâmetros a serem passados.                                   
Além disso, sua sintaxe é simples: “​nome-da-funcao(parâmetros)​” ou “​nome-da-funcao()​”. 
Nomenclaturas de funções e outras boas práticas 
A nomeação de funções em PHP segue as mesmas regras para a definição de variáveis, com alguns padrões utilizados e                                       
que são considerados como boas práticas. As mesmas dicas cabem, portanto, aqui: 
Você pode criar nomes de funções separando nomes compostos por ​underscore “_” ou como ​CamelCase​, por exemplo. 
Defina um padrão e siga-o por todo o seu código. 
Sobre a sintaxe da função, mais precisamente sobre o posicionamento da chave de abertura, há duas vertentes defendendo                                   
que: 
A chave de abertura deve ser inserida logo após o fechamento dos parênteses que guardam os parâmetros da função. 
A chave de abertura deve ser inserida na linha seguinte – essa foi a aplicada nos códigos anteriores. 
Por fim, outra boa prática recomendada: ​indente seu código − não só nas instruções inseridas dentro das funções, mas ao                                       
longo de todo o programa. Veja o código de exemplo e perceba que as instruções dentro da função não estão coladas no                                           
início da linha. ​Indentar um código ajuda na sua compreensão e no seu entendimento, além de deixar clara a hierarquia                                       
existente. 
Funções nativas 
A linguagem PHP disponibiliza uma série de ​funções nativas​, para as mais variadas necessidades. Há funções para a                                   
manipulação de ​arrays (como as que vimos nos exemplos anteriores), de ​strings​, de arquivos, de acesso de banco de dados,                                       
entre tantas outras. A documentação oficial da linguagem ou Manual do PHP é uma fonte extensa e que deve ser sempre                                         
consultada. 
Tema6  
SISTEMAS GERENCIADORES DE BANCOS DE DADOS 
 
Os bancos de dados são o ponto central de muitos sites, sistemas e aplicativos. Tais estruturas permitem o armazenamento                                     
e recuperação de qualquer tipo de informação, desde dados simples, como os posts de um blog pessoal, a dados altamente                                       
sensíveis, como os dados bancários ou financeiros, por exemplo. Nesse sentido, a linguagem de programação ​PHP oferece                                 
amplo suporte à integração com bancos de dados, sejam relacionais ou não, sejam suportados por diversos Sistemas                                 
Gerenciadores de Bancos de Dados (SGBD), como SQL Server, Oracle, MySQL e PostgreSQL – sendo esses dois últimos                                   
normalmente associados ao PHP. 
Inicialmente, antes de tratarmos da classe PDO e de sua utilização com dois dos principais SGBDs existentes, vamos                                   
observar um pouco mais esses sistemas e sua integração com PHP. 
MYSQL 
O MySQL é um sistema de gerenciamento de banco de dados criado em 1995. Inicialmente de código aberto, foi adquirido                                       
posteriormente pela Oracle, que, atualmente, mantém tanto uma versão GPL quanto uma versão comercial. Trata-se de                               
um dos SGBDs mais utilizados na web, sendo, normalmente, associado ao PHP, dada a facilidade de conexão entre                                   
ambos. 
 
POSTGRESQL 
O PostgreSQL é um SGBD de código aberto, atualmente disponível sob a licença BSD, criado em 1996. Enquanto o MySQL                                       
é um SGBD puramente relacional, o PostgreSQL é considerado um SGBD objeto-relacional. Na prática, essa diferença pode                                 
ser vista nas funcionalidades que o PostgreSQL possui, como a herança de tabelas e a sobreposição de funções. Outra                                     
diferença importante é que o PostgreSQL adere de forma mais próxima aos padrões SQL. 
A linguagem PHP também possui uma série de métodos e funções, habilitados através da extensão pgsql, para conexão                                   
com o Postgres. 
A exemplo do que fizemos com o MySQL, vejamos um código que utiliza funções PHP para conectar com o PostgresSQL                                       
e realizar uma instrução SQL de consulta de dados. 
 
 
>?php 
//Constantes para armazenamento das variáveis de conexão. 
define('HOST', '127.0.0.1'); 
define('DBNAME', 'test'); 
define('USER', 'user'); 
define('PASSWORD', 'psswd'); 
//Conectando com o Banco de dados 
$stringConn = "host=".HOST." dbname=".DBNAME." user=".USER." password=".PASSWORD; 
$conn = pg_connect($stringConn) or die( ' Ocorreu um erro e não foi possível conectar ao banco 
de dados.' ); 
//Realizando uma consulta no BD 
$instrucaoSQL = "Select nome, cpf, telefone From Cliente"; 
$result = pg_query( $conn, $instrucaoSQL ) or die(' Ocorreu um erro na execução da instrução: 
' . $instrucaoSQL ); 
//pg_query($dbcon, "SELECT id, nome FROM clientes"); 
//Imprimindo os dados da consulta 
while ($row = pg_fetch_array( $result )){ 
echo $row['nome'] . "\t"; 
echo $row['cpf'] . "\t"; 
echo $row['telefone'] . "\n"; 
} 
//Encerrando a conexão 
pg_close($conn); 
CONCEITOS BÁSICOS DA LINGUAGEM DE PROGRAMAÇÃO PHP 
A linguagem PHP é uma linguagem ​server side​, ou seja, atua no lado servidor, sobre um servidor web como o Apache, Nginx                                           
ou IIS. Trata-se de uma linguagem de script e que é gratuita, o que faz dela uma linguagemamplamente utilizada no                                         
Ambiente Web. 
Em relação à sua sintaxe, é possível combinar código PHP com tags HTML, ou utilizar apenas código PHP em um script. Tal                                           
código deverá estar entre a tag inicial “<?php” e a tag final “?>” – sendo essa última não obrigatória, quando houver apenas                                           
código PHP em um script. 
Tomando como base os exemplos de código acima, temos alguns recursos da linguagem sendo utilizados. A seguir, esses                                   
recursos serão revistos. 
CONSTANTES 
As constantes são identificadores ou nomes que contêm um valor único e imutável, ao contrário das variáveis que,                                   
conforme o nome indica, possuem valor variável ao longo de um programa. 
No exemplo, foram declaradas constantes para armazenarem as credenciais de acesso ao SGBD. A sintaxe de utilização                                 
de constantes é composta pela palavra reservada ​DEFINE​, seguida de parênteses, onde são incluídos o nome da                                 
constante e o seu valor. 
VARIÁVEIS 
As variáveis são objetos, ou espaços reservados na memória do computador, destinados a armazenarem e a exibirem os                                   
dados utilizados, e alterados, durante a execução de um programa. 
Em PHP, as variáveis são representadas por um $ seguido pelo seu nome, que é ​case-sensitive - ou seja, uma letra                                         
maiúscula é diferente de uma letra minúscula ($var é diferente de $Var). Em relação à declaração e atribuição de valores,                                       
ambos os processos podem ocorrer ao mesmo tempo. Veja no último exemplo que a variável $stringConn foi declarada                                   
(inserida pela primeira vez no código) ao mesmo tempo que recebeu um valor (processo de atribuição). Por último, as                                     
variáveis em PHP não possuem tipo. Logo, não é necessário indicar o tipo de dado a ser armazenado por uma variável. 
ESTRUTURAS DE DECISÃO E REPETIÇÃO 
Nos exemplos, foi vista a estrutura de repetição ​while​. Além dela, há outras estruturas de repetição disponíveis em PHP:                                     
do-while​, ​for​ e ​foreach​. 
A respeito das estruturas de decisão, estão disponíveis em PHP: ​if, else, elseif​ e ​switch​. 
ARRAYS 
Os arrays, ou vetores, são variáveis que guardam uma lista de itens relacionados. Tais variáveis são compostas pelo par                                     
índice/valor. A variável ​$row​, nos exemplos, é um ​array associativo, ou seja, seus índices são compostos por strings – o                                       
nome de cada coluna selecionada do banco de dados. Há ainda os ​arrays numéricos e os híbridos (​arrays com índices                                       
associativos e numéricos). 
FUNÇÕES 
As funções são pedaços de código que podem ser chamados a partir de qualquer parte do programa e que executam                                       
tarefas específicas. Além das funções definidas pelo usuário, em PHP estão disponíveis inúmeras funções nativas. Em                               
nossos exemplos, temos as funções ​define e ​echo​, além das relacionadas à conexão e ao manuseio de dados, como                                     
mysql_connect​ ou ​pg_connect​, ​mysql_query​ ou ​pg_query​, entre outras. 
EXTENSÕES, BIBLIOTECAS E CLASSES 
As extensões, bibliotecas e classes são um importante recurso presente na maioria das linguagens de programação. Através                                 
delas, é possível estender as funções básicas de uma linguagem, adicionando novos recursos para a execução de                                 
determinadas tarefas. 
Em relação à definição, em PHP temos as extensões, que são arquivos binários (no S.O. Windows, as ​.dll​, em S.O.s ​unix-like​,                                         
os ​.so​) que contêm bibliotecas. Já as bibliotecas são um conjunto de funções e/ou classes. As classes, então, dentro do                                       
paradigma de orientação a objetos, são um conjunto de códigos compostos por atributos e métodos. São exemplos de                                   
extensões os drivers para os SGBDs MySQL e PostgreSQL, que, quando habilitados, permitem a sua utilização com o PHP. 
PDO 
PDO, acrônimo para PHP Data Objects, ou Objetos de Dados PHP, e conforme definição vista anteriormente, é uma classe                                     
contida dentro de uma biblioteca e, por consequência, dentro de uma extensão. Ao referi-la, vamos chamá-la apenas de                                   
classe ao longo deste tema. 
Trata-se de uma interface leve para acesso a bancos de dados em PHP. Nesse sentido, cabe a cada banco de dados                                         
implementar a interface PDO a fim de expor os seus recursos e funções específicos que, então, ficarão disponíveis para                                     
serem utilizados através do código PHP. 
Figura 1: 
Funcionamento da Camada de Abstração 
Para utilizarmos a classe PDO, é necessário habilitar sua extensão no servidor web, ou seja, habilitar a extensão que contém                                       
o driver específico para cada banco de dados com os quais se deseja trabalhar. 
Dica 
Em relação à instalação e configuração da extensão PDO e drivers mencionados, há diversos tutoriais disponíveis na                                 
internet. Lembre-se de que esse processo é diferente de acordo com o Sistema Operacional utilizado. A seção Explore +                                     
contém algumas referências base para esse processo. 
Como mostrado na Figura 1, assim como nos códigos de exemplo relacionados à conexão e execução de instruções                                   
próprios do MySQL e do PostgreSQL, vistos anteriormente, a principal vantagem em se utilizar PDO no lugar das funções                                     
nativas do PHP para cada SGBD é o fato dessa extensão fornecer uma camada de abstração de acesso a dados. Em outras                                           
palavras, isso significa que: 
É possível utilizar os métodos e funções PDO independente do SGBD. 
 
Na prática, e voltando aos códigos PHP para integração com cada SGBD, perceba que, se fôssemos trocar o banco de dados                                         
utilizado, precisaríamos também mudar algumas linhas de código: as de conexão com o banco de dados; as de execução de                                       
query, entre outras não vistas nos exemplos. Entretanto, fazendo uso do PDO, só precisaríamos mudar, nessa situação, o                                   
nome do driver a ser utilizado – conforme poderá ser visto adiante. No mais, todas as funções de execução de query, de                                           
tratamento de resultados, e demais, permaneceriam exatamente iguais. 
DRIVERS PDO 
Atualmente, estão disponíveis 12 drivers PDO, ou seja, é possível utilizá-lo com doze diferentes SGBDs. A tabela 1 ilustra os                                       
drivers e os bancos de dados suportados. 
CONEXÃO COM O SGBD UTILIZANDO PDO 
A primeira ação necessária ao trabalharmos com banco de dados é realizar a conexão com o próprio. Para isso,                                     
utilizamos o construtor da classe PDO, que é responsável por criar uma instância de conexão. O fragmento abaixo                                   
demonstra a conexão com MySQL e com o PostgreSQL. 
$dsn = new PDO("mysql:host=localhost;dbname=test", $user, $pass); 
$dsn = new PDO("pgsql:host=localhost;dbname=test"; $user, $pass); 
Como pode ser visto, o que muda entre as duas instruções é o nome do drive/SGBD. Na primeira, temos “mysql” e na                                           
segunda “pgsql”. Além disso, outras opções/parâmetros podem ser passadas no construtor, como a ​porta​,por exemplo. 
Reforçando o que foi dito, caso precisássemos alterar o SGBD usado em nosso projeto, só precisaríamos modificar essas                                   
informações acima e todo o restante do código, relacionado ao ​database​, permaneceria inalterado. 
TRATAMENTO DE EXCEÇÕES 
Uma boa prática, em qualquer linguagem de programação, é tratar as possíveis exceções que possam ocorrer no código.                                   
Cada linguagem possui uma sintaxe própria, sendo muito comum na maioria a utilização da instrução “try/catch”. 
A maioria das linguagens de programação conta com instruções específicas para o tratamento de exceções. Em linhas                                 
gerais, temos uma exceção que pode ser ​lançada e ​capturada​, estando o respectivo código envolvido por um bloco ​try​, cuja                                       
sintaxe deve contar com, ao menos, um bloco ​catch ou ​finally​. Por fim, temos que o objeto lançado, ou seja, a exceção,                                           
precisa ser uma instância ou subclasse da classe ​Exception​. 
Em relação ao bloco ​catch​, podemos ter vários relacionados a um bloco ​try​, sendo cada um responsável pelo tratamento de                                       
um tipo de exceção. Já o conteúdo do bloco ​finally​ será sempre executado após o bloco ​try​ ou ​catch​. 
A partir de um dos exemplos acima, poderíamos utilizar o seguinte código, com tratamento de possíveis exceções, para                                   
realizar a conexão com o MySQL, por exemplo: 
 
<?php 
//Constantes para armazenamento das variáveis de conexão. 
define('HOST', '127.0.0.1'); 
define('PORT', '5432'); 
define('DBNAME', 'test'); 
define('USER', 'user'); 
define('PASSWORD', 'psswd'); 
try { 
$dsn = new PDO("mysql:host=". HOST . 
";port=".PORT.";dbname=" . DBNAME . ";user=" . USER . 
";password=" . PASSWORD); 
} catch (PDOException $e) { 
echo 'A conexão falhou e retornou a seguinte mensagem de erro: ' . $e->getMessage(); 
} 
ENCERRAMENTO DE CONEXÕES E CONEXÕES PERSISTENTES 
Para encerrar uma conexão aberta através de PDO, basta atribuir ​NULL à variável que contém a instância da classe. O                                       
mesmo deve ser feito com as variáveis que armazenam o resultado da execução dos métodos que executam instruções                                   
SQL, como ​Exec​ e ​Query​ – que serão vistos mais adiante. 
A linha a seguir demonstra o encerramento da conexão aberta no código anterior: 
 
//... 
$dsn = null; 
PDO oferece suporte a conexões persistentes – que, em linhas gerais, consiste em não encerrar uma conexão aberta com o                                       
SGBD ao final de execução de um script. Com isso, é possível fazer cache da conexão e reutilizá-la quando outros scripts                                         
requisitarem uma conexão semelhante (com as mesmas credenciais) a essa que ficou aberta. Para usar conexões                               
persistentes em PDO, é necessário incluir um parâmetro a mais no momento de criação da instância. Veja como ficaria o                                       
nosso exemplo de conexão com o PostgreSQL: 
 
<?php 
... 
try { 
$dsn = new PDO("pgsql:host=". HOST . 
";port=".PORT.";dbname=" . DBNAME . ";user=" . USER . 
";password=" . PASSWORD, array(PDO::ATTR_PERSISTENT => true)); 
} catch (PDOException $e) { 
echo 'A conexão falhou e retornou a seguinte mensagem de erro: ' . $e->getMessage(); 
} 
No vídeo a seguir, o especialista fará um resumo do módulo, descrevendo brevemente a classe PDO com ilustração da                                     
Figura 1 e demonstrando a conexão do PHP com MySQL e PostgreSQL, usando recursos de captura de telas. 
Modulo 2 
ORIENTAÇÃO A OBJETOS EM PHP 
Como mencionado, uma classe, em linguagens de programação, é um conceito vinculado ao paradigma de orientação a                                 
objetos. Logo, antes de descrever a classe PDO e seus métodos e, para um melhor entendimento, serão descritos os                                     
conceitos básicos de ​OO​ em PHP. 
O paradigma de orientação a objetos, na engenharia de software, representa uma mudança na forma de se construir                                   
programas: no lugar de um conjunto de procedimentos e variáveis agrupados por determinado contexto ou objetivo, muitas                                 
vezes, não organizados adequadamente, na O.O. temos uma visão mais próxima ao mundo real representada por objetos e                                   
estruturas (classes) com as quais temos maior familiaridade. 
CLASSES E OBJETOS 
Esses dois elementos são a base da programação orientada a objetos. As classes podem ser definidas como estruturas que                                     
definem um tipo de dados e podem ser compostas por atributos (variáveis) e por funções (métodos). Em alusão ao mundo                                       
real, são exemplos de classes: pessoas, produtos, veículos, imóveis etc. Assim como no mundo real, essas classes são                                   
compostas por características – os seus atributos. Por exemplo: uma pessoa possui nome, data de nascimento, CPF etc.                                   
Para acessar essas características, utilizamos métodos. Veja a representação dessa classe na figura abaixo: 
Figura 2: 
Diagrama de Classes – Classe Pessoa. 
A partir dessa Classe, poderíamos construir novas classes que compartilhassem os mesmos atributos e funcionalidades que                               
a Classe Pessoa, além de poderem possuir propriedades e funções próprias. Veja esse novo exemplo: 
Figura 3: 
Diagrama de Classes – Exemplo de Herança entre Classes. 
Esse compartilhamento de atributos e comportamentos, na orientação a objetos, recebe o nome de ​herança​. Logo, dentro                                 
desse conceito, é possível criar classes, como as classes Cliente e Funcionário, que além de herdarem características de                                   
uma classe “pai”, possuem ainda suas próprias características distintas – data de cadastro e data da primeira compra, em                                     
Cliente e data de admissão e cargo, em Funcionário. 
Há muito mais a ser visto sobre orientação a objetos. As considerações acima foram apresentadas de maneira resumida, a                                     
fim de iniciar esse assunto, ou mesmo revisá-lo, uma vez que utilizaremos alguns desses conceitos a seguir, quando                                   
abordarmos a Classe PDO, seus atributos e propriedades. 
Por fim, abaixo são demonstrados exemplos práticos, em PHP, da criação de classes e instanciação de objetos de uma                                     
classe. Entre cada exemplo, estão presentes explicações adicionais. Note ainda os comentários inseridos no código, pois                               
eles contêm algumas informações extras. 
 
<?php 
class Fruta 
//Propriedades ou atributos da Classe 
var $nome; 
var $tipo; 
//Construtor da Classe: Essa função é executada todas as vezes em que uma instância da classe 
é criada. 
//Como abaixo, essa função pode ser vazia. Ou seja, não realiza nenhuma ação. 
public function __construct(){ } 
public function setNome($nome) 
{ 
$this->nome = $nome; 
} 
public function getNome() 
{ 
return $this->nome; 
} 
public function setTipo($tipo) 
{ 
$this->tipo = $tipo; 
} 
public function getTipo() 
{ 
return $this->tipo; 
} 
} 
A partir dessa estrutura, a Classe “Fruta”, podemos declarar vários objetos “filhos” / provenientes dela mesma. Esses objetos                                   
também são chamados de instâncias e contêm valores distintos, uma vez que a estrutura é dinâmica. O próximo fragmento                                     
de exemplo demonstra a criação de alguns objetos oriundos da Classe “Fruta”. 
 
<?php 
include "fruta.class.php"; 
 
$fruta1 = new Fruta(); 
$fruta1->setNome("morango");$fruta1->setTipo("vermelha"); 
 
$fruta2 = new Fruta(); 
$fruta2->setNome("laranja"); 
$fruta2->setTipo("cítrica"); 
Como visto no código acima, a criação de novas “frutas”, ou de objetos da classe “Frutas”, é feita com a criação de uma                                             
variável que recebe o operador “new” seguido do nome da Classe. A partir desse ponto, essa variável em questão torna-se                                       
uma instância da classe. Na prática, essa instância possui os mesmos atributos e propriedades da classe da qual se                                     
originou. 
A CLASSE PDO E SEUS MÉTODOS 
A classe PDO é dividida em duas classes: a própria PDO e a PDOStatement. Enquanto a primeira contém métodos para                                       
conexão com os SGBDs, para o controle de transações e execução de queries; a segunda, PDOStatement, contém outros                                   
métodos relacionados às instruções executadas e ao seu retorno. 
Os códigos a seguir mostram as estruturas dessas classes. 
 
PDO { 
public __construct ( string $dsn [, string $username [, string $passwd [, array $options ]]] ) 
public beginTransaction ( void ) : bool 
public commit ( void ) : bool 
public errorCode ( void ) : string 
public errorInfo ( void ) : array 
public exec ( string $statement ) : int 
public getAttribute ( int $attribute ) : mixed 
public static getAvailableDrivers ( void ) : array 
public inTransaction ( void ) : bool 
public lastInsertId ([ string $name = NULL ] ) : string 
public prepare ( string $statement [, array $driver_options = array() ] ) : PDOStatement 
public query ( string $statement ) : PDOStatement 
public quote ( string $string [, int $parameter_type = PDO::PARAM_STR ] ) : string 
public rollBack ( void ) : bool 
public setAttribute ( int $attribute , mixed $value ) : bool 
} 
 
PDOStatement implements Traversable { 
/* Propriedades */ 
readonly string $queryString; 
 
/* Métodos */ 
public bindColumn ( mixed $column , mixed &$param [, int $type [, int $maxlen [, mixed 
$driverdata ]]] ) : bool 
public bindParam ( mixed $parameter , mixed &$variable [, int $data_type = PDO::PARAM_STR [, 
int $length [, mixed $driver_options ]]] ) : bool 
public bindValue ( mixed $parameter , mixed $value [, int $data_type = PDO::PARAM_STR ] ) : 
bool 
public closeCursor ( void ) : bool 
public columnCount ( void ) : int 
public debugDumpParams ( void ) : void 
public errorCode ( void ) : string 
public errorInfo ( void ) : array 
public execute ([ array $input_parameters = NULL ] ) : bool 
public fetch ([ int $fetch_style [, int $cursor_orientation = PDO::FETCH_ORI_NEXT [, int 
$cursor_offset = 0 ]]] ) : mixed 
public fetchAll ([ int $fetch_style [, mixed $fetch_argument [, array $ctor_args = array() ]]] 
) : array 
public fetchColumn ([ int $column_number = 0 ] ) : mixed 
public fetchObject ([ string $class_name = "stdClass" [, array $ctor_args ]] ) : mixed 
public getAttribute ( int $attribute ) : mixed 
public getColumnMeta ( int $column ) : array 
public nextRowset ( void ) : bool 
public rowCount ( void ) : int 
public setAttribute ( int $attribute , mixed $value ) : bool 
public setFetchMode ( int $mode ) : bool 
} 
MÉTODO EXEC 
Esse método pertencente à classe PDO, executa uma instrução SQL e retorna o número de linhas afetadas pela instrução.                                     
Sua sintaxe pode ser vista a seguir: 
 
<?php 
/*a variável $dsn, abaixo, corresponde à instação da classe PDO, inicializada na conexão com o 
BD*/ 
$qtdeLinhasAfetadas = $dsn->exec("Delete From Cliente Where codigo_cliente = 1"); 
echo "Quantidade de linhas afetadas: " . $qtdeLinhasAfetadas 
O código acima é funcional e complementar ao código anterior, uma vez que o método ​Exec deve ser invocado a partir da                                           
instância para a classe PDO (correspondente à variável $dsn em nosso código). 
Em relação às linhas afetadas, tal informação é útil para confirmarmos se a operação foi executada com sucesso. Logo,                                     
podemos utilizar uma estrutura de decisão, como ​“if”​, para verificar o conteúdo da variável $qtdeLinhasAfetadas. Caso                               
nenhuma linha tenha sido afetada, será retornado 0 (zero). Além disso, ​Exec pode retornar ainda o booleano ​FALSE ou                                     
então ​“”​ (vazio). 
Por fim, cabe destacar que esse método não retorna à quantidade de linhas afetadas quando for executada uma instrução                                     
SELECT – o que pode ser feito através do próximo método que veremos, o ​Query​. 
MÉTODO QUERY 
O método Query, também pertencente à classe PDO, tem função parecida com o método Exec. Entretanto, ele, além de                                     
executar uma instrução SQL, retorna – quando houver - um conjunto de resultados (​result set​) como um objeto                                   
PDOStatement. Em caso de falhas, é retornado o booleano ​FALSE​. Vejamos um exemplo de sua utilização: 
 
<?php 
$instrucaoSQL = "Select nome, cpf, telefone From Cliente"; 
//a variável $dsn, abaixo, corresponde à instação da classe PDO, inicializada na conexão com o 
BD 
$resultSet = $dsn->query($sql); 
while ($row = $resultSet->fetch()) { 
echo $row['nome'] . "\t"; 
echo $row['cpf'] . "\t"; 
echo $row['telefone'] . "\n"; 
} 
Perceba que, como o método retorna um objeto, é possível acessar seus índices na forma de índices de ​array​. Para isso,                                         
foi utilizado o método ​fetch​, um laço ​while​ que percorreu o ​result​ set retornado, imprimindo os dados selecionados. 
A respeito do método ​fetch​, que retorna um ​result set no formato de array numérico e associativo, há ainda outros                                       
disponíveis: o ​fetchAll, fetchColumn e ​fetchObject​. Além disso, esse método pode receber como parâmetro o tipo de                                 
retorno, ou seja, se deverá retornar um ​array associativo, numérico, associativo e numérico (que é o seu padrão por                                     
omissão), entre outros. Veja o exemplo de sua utilização retornando um ​array​ associativo: 
 
<?php 
//... 
while ($row = $resultSet->fetch(PDO::FETCH_ASSOC)) { 
//... 
} 
OUTROS MÉTODOS IMPORTANTES 
Além desses dois métodos apresentados, as Classes PDO e PDOStatment possuem outros importantes métodos, como o                               
Prepare​ e o ​Execute​, por exemplo. 
Considerando a sintaxe desses dois métodos, em comparação com o que vimos dos métodos ​Exec e ​Query​, é boa prática                                       
fazer uso de ambos no lugar dos dois primeiros. Para embasar tal afirmação, veremos alguns conceitos extras, a começar                                     
pelo ​SQL Injection​. 
SQL ​INJECTION 
O SQL ​Injection​, ou Injeção de SQL, é um tipo de ataque baseado na manipulação e alteração de instruções SQL. Tal ataque é                                             
possível devido a vulnerabilidades encontradas em aplicações e sistemas que aceitam dados de entrada sem fazer o devido                                   
tratamento, além de executarem a conexão e instruções SQL utilizando usuários com privilégios altos. 
Vejamos um exemplo prático, normalmente utilizado em formulários de login, onde poderia ser aplicada uma injeção de SQL. 
 
<?php 
//... 
//Realizando uma consulta no BD através do login e senha recebidos por POST 
$login = $_POST['login']; 
$pswd = $_POST['pswd']; 
$instrucaoSQL = "Select * From Usuario Where login = '$login' And password = '$pswd'"; 
$result = mysql_query( $instrucaoSQL ) or die(' Ocorreu um erro na execução da instrução: ' . 
$instrucaoSQL . ' ' . 
mysql_error() ); 
Perceba que, no código, o conteúdo das variáveis POST ‘login’ e ‘pswd’,equivalentes aos campos input de um formulário                                     
HTML para login, são recebidos no PHP e atribuídos a novas variáveis. A seguir, o conteúdo dessas variáveis é utilizado em                                         
uma instrução SQL. Veja o que poderia acontecer se no formulário HTML fossem inseridos valores diferentes do previsto,                                   
como, por exemplo, os seguintes valores: 
Figura 4: Exemplo de SQL 
Injection​ em um Formulário HTML. 
Os valores inseridos no formulário mostrado na Figura 4 seriam recebidos no código PHP da seguinte maneira: 
 
<?php 
//... 
//Realizando uma consulta no BD através do login e senha recebidos por POST 
$login = $_POST['login']; 
$pswd = $_POST['pswd']; 
$instrucaoSQL = "Select * From Usuario Where login = '' OR true = true;/* And password = 
'*/--'"; 
//... 
Veja que, no lugar dos valores esperados – login e senha –, seriam recebidos comandos que modificariam o sentido original                                       
da instrução SQL, no código PHP, permitindo assim o acesso ao sistema em questão. 
MÉTODOS ​PREPARE​ E ​EXECUTE 
Para resolver os problemas acima, de SQL Injection, poderíamos escrever alguns códigos em PHP. Em linhas gerais, esses                                   
códigos conteriam instruções para tratar os dados recebidos antes de utilizá-los em instruções SQL. Esse trabalho poderia                                 
ser maçante, já que precisaria prever e tratar diversas formas de códigos maliciosos. Para facilitar e resolver tais questões, a                                       
classe PDO possui um método chamado ​Prepare​. 
- O método ​Prepare​, como o nome indica, prepara uma instrução antes de ser executada, retornando um objeto do tipo                                       
statement​, que será então executado através do método Execute (pertencente à classe PDOStatement). 
- O método ​Prepare faz uso de um recurso chamado ​bind​. Tal recurso vincula a variável ou valor a ser utilizado na instrução                                             
SQL a uma outra variável (também pode ser utilizado o sinal “?”). Durante esse processo de preparação da instrução e ​bind                                         
dos valores, a classe PDO realiza, de forma interna, ou seja, sem que precisemos nos preocupar com eles, uma série de                                         
tratamentos para evitar a SQL ​Injection​. 
Vejamos um exemplo prático de utilização do método ​Prepare​: 
 
<?php 
//Constantes para armazenamento das variáveis de conexão. 
define('HOST', '127.0.0.1'); 
define('PORT', '5432'); 
define('DBNAME', 'test'); 
define('USER', 'user'); 
define('PASSWORD', 'psswd'); 
try { 
$dsn = new PDO("mysql:host=". HOST . 
";port=".PORT.";dbname=" . DBNAME . ";user=" . USER . 
";password=" . PASSWORD); 
} catch (PDOException $e) { 
echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage(); 
} 
 
//Realizando uma consulta no BD através do login e senha recebidos por POST 
$login = $_POST['login']; 
$pswd = $_POST['pswd']; 
 
$stmt = $dsn->prepare("Select * From Usuario Where login = :login And password = :password"); 
$stmt->execute([':login' => $login, ':password' => $pswd]); 
 
/*Aqui entraria o código para tratar o resultado da instrução SQL acima*/ 
 
//Destruindo o objecto statement e fechando a conexão 
$stmt = null; 
$dsn = null; 
Dica 
Repare no código que o método ​prepare recebe como parâmetro a instrução SQL a ser executada e que, nos lugares onde                                         
seriam utilizadas as variáveis PHP com os valores provenientes do formulário HTML, são usadas outras variáveis, chamadas                                 
parâmetros nomeados (​named parameters​). 
A seguir, o método ​execute faz o vínculo (​bind​) entre os ​named parameters e as variáveis PHP. O mesmo código acima                                         
poderia ser executado tendo o sinal de interrogação “?” no lugar dos parâmetros nomeados. Veja como ficaria esse                                   
fragmento de código: 
 
<?php 
//... 
 
$stmt = $dsn->prepare("Select * From Usuario Where login = ? And password = ?"); 
$stmt->execute([$login, $pswd]); 
 
//... 
UM POUCO DE PRÁTICA 
A fim de melhor assimilar o conteúdo apresentado até aqui, chegou a hora de praticar. Todos os códigos anteriores, usados                                       
como exemplos, são funcionais. Logo, a começar pelo código responsável pela conexão com o SGBD (e tomando o cuidado                                     
de alterar as credenciais, nas constantes PHP, para refletirem os dados de seu ambiente), copie e execute cada um deles                                       
relacionados à classe PDO. Veja, por exemplo, as diferenças, na prática, entre os métodos ​Exec e ​Query​; e entre esses dois                                         
métodos e os métodos ​Prepare e ​Execute​. Tente realizar uma mesma consulta ou instrução SQL usando os dois e analise o                                         
resultado. 
Modulo 3 
PREPARAÇÃO 
Este módulo terá caráter prático. Logo, todos os conceitos vistos nos módulos anteriores serão utilizados na confecção                                 
de um Formulário HTML, que enviará dados para um script PHP que os inserirá em um SGBD – nesse caso, no                                         
PostgreSQL, e de uma página para listagem desses mesmos dados. Cada etapa desse processo será apresentada em                                 
detalhes, desde a criação das tabelas no SGBD, passando pela criação do formulário HTML e chegando nos scripts PHP                                     
que farão a conexão e inserção dos dados através das classes PDO e PDOStatement. 
MOTIVAÇÃO 
Deverá ser criado um formulário para armazenar os dados de clientes, contendo o seu nome completo (obrigatório), o seu                                     
CPF (obrigatório; apenas os números), um endereço de e-mail válido (obrigatório) e sua data de nascimento (obrigatório;                                 
dia, mês e ano). Além disso, deverá ser criada uma listagem para exibição dos clientes cadastrados. 
ESQUEMATIZANDO O BANCO DE DADOS 
Os dados dos clientes deverão ser armazenados em uma tabela. Tal tabela deverá possuir um campo identificador,                                 
autoincremental e único. 
A instrução SQL abaixo contém um exemplo de como a tabela cliente pode ser criada. 
 
CREATE TABLE cliente ( 
id_cliente serial NOT NULL, 
nome_cliente varchar(255), 
cpf_cliente varchar(11), 
email_cliente varchar(255), 
data_nascimento_cliente timestamp, 
PRIMARY KEY (id_cliente) 
); 
CONFECCIONANDO O FORMULÁRIO HTML 
O formulário HTML deverá ser escrito utilizando a HTML5. Além disso, os campos deverão ser validados de acordo com                                     
seu tipo (quando possível), tamanho e obrigatoriedade de preenchimento. Poderá ser utilizado um framework CSS, como o                                 
Bootstrap, para uma melhor apresentação do cadastro. 
O código do formulário poderá ser visto ao final deste módulo, junto aos demais exemplos de código. Tal código poderá                                       
ser usado como template para desenvolvimentos similares. 
CONSIDERAÇÕES SOBRE O FORMULÁRIO HTML 
O formulário HTML possui elementos de ligação com o script PHP para o qual será submetido. A tabela 1 apresenta esses                                         
elementos, seus atributos e uma breve descrição. 
 
 
Em termos de boas práticas, é recomendado validar os dados a serem submetidos tanto no lado cliente, ou seja, no                                       
código HTML diretamente, com a utilização dos recursos introduzidos pela HTML5, ou através de Javascript, assim como                                 
no lado servidor. Com isso, caso a validação falhe, por algum motivo, do lado cliente, teremos a garantiade validação do                                         
lado servidor. Veremos a seguir como realizar a validação de nosso formulário nos dois ambientes – cliente e servidor. 
VALIDAÇÃO NO LADO CLIENTE – HTML5 
A partir da HTML5, é possível marcar um elemento como de preenchimento obrigatório fazendo uso do atributo ​required​.                                   
No código do formulário, visto ao final deste módulo, os campos “Nome”, “CPF”, “Endereço de E-mail” e “Data de                                     
Nascimento” receberam esse atributo. Além disso, foram incluídas outras regras de validação: o campo CPF precisa ter                                 
exatos 11 caracteres (definidos com o uso dos atributos ​minlength e ​maxlength​) e o endereço de e-mail precisa ser válido                                       
– tal validação é feita diretamente pela HTML, ao definirmos a tag ​<input>​ sendo do tipo (​type​) “email”. 
 
VALIDAÇÃO NO LADO CLIENTE – JAVASCRIPT 
Para validar formulários, antes da HTML5, era necessário utilizar funções em códigos escritos na linguagem Javascript.                               
Com isso, o formulário é verificado e, caso passe pelas validações, submetido ao servidor. Do contrário, a respectiva                                   
mensagem de falha é exibida, para as devidas correções. A validação do nosso formulário, utilizando Javascript, pode ser                                   
vista no código abaixo. 
 
function validarFormulario(formulario){ 
if(formulario.nome_cliente.value === "" || formulario.nome_cliente.value === null) { 
Lemento 
From 
Form 
nput 
Button ou input 
Atributo 
Action 
Method 
Name 
ype 
Obrigatório? 
Sim 
Nao. o padraõ e post 
Sim 
sim 
Descrição 
Contém a URL ou nome do script, 
quando na mesma pasta que o arquivo 
HTML, que processará o documento. 
Define o método HTTP a ser utilizado 
para transmissão dos dados – GET ou 
POST. 
Contém o nome do campo que será 
recebido no PHP como índice 
associativo no array $_GET, $_POST ou 
$_REQUEST. 
O valor “submit”, atribuído ao atributo 
type em um desses campos, cria o 
evento de envio do formulário. 
alert("O campo Nome não pode ficar vazio."); 
formulario.nome_cliente.focus(); 
return false; 
} 
if(formulario.cpf_cliente.value.length != 11) { 
alert("O campo CPF precisa ter 11 caracteres."); 
formulario.cpf_cliente.focus(); 
return false; 
} 
//o campo e-mail precisa ser válido, ou seja, deve : "@" e "." 
if(formulario.email_cliente.value.indexOf("@") == -1 || 
formulario.email_cliente.value.indexOf(".") == -1) { 
alert("O campo E-mail não é válido."); 
formulario.email_cliente.focus(); 
return false; 
} 
if(formulario.data_nascimento_cliente.value === "" || 
formulario.data_nascimento_cliente.value === null) { 
alert("O campo Data de Nascimento não pode ficar vazio."); 
formulario.data_nascimento_cliente.focus(); 
return false; 
} 
} 
Para utilizar a função Javascript acima, é necessário mudar um pouco o código do arquivo HTML que contém o                                     
formulário, removendo os atributos da HTML5, modificando o DocType para uma versão anterior da HTML, entre outros                                 
ajustes. Para facilitar, o código completo desse arquivo HTML foi adicionado ao final, junto aos demais códigos. 
 
 
O script PHP definido no atributo ​“action” da tag ​“form”​, no arquivo HTML, é o responsável por receber os dados do                                         
formulário, validar os dados recebidos, conectar com o banco de dados e inserir as informações. 
O atributo ​method​, do formulário HTML, define o método HTTP utilizado para a transmissão dos dados – POST ou GET,                                       
sendo POST o valor padrão, caso esse atributo seja omitido no formulário. Para tratar os dados transmitidos por cada um                                       
desses métodos, há uma variável global pré-definida em PHP: $_POST e $_GET. Além disso, há também a variável                                   
$_REQUEST, que recebe os dados transmitidos por ambos os métodos. 
Essas variáveis pré-definidas são, na verdade, um ​array associativo, cujos índices equivalem ao valor definido para o                                 
atributo ​name​, em cada campo do formulário. Logo, se um ​input no formulário HTML for definido com                                 
“name​=nome_cliente”, em PHP ele poderá ser lido dessa forma: $_REQUEST[‘nome_cliente’] - ou através de                           
$_POST[‘nome_cliente’] ou $_GET[‘nome_cliente’], dependendo do método utilizado. 
O script PHP que processa o formulário pode ser visto ao final deste módulo. Tal script realiza a conexão com o SGBD                                           
PostgreSQL, prepara a instrução SQL com o método ​Prepare e os insere no banco de dados através do método ​Execute​. Mais                                         
adiante, é realizada uma verificação e, em caso de sucesso ou erro, exibida uma mensagem correspondente. Por fim, tanto a                                       
instância de conexão PDO quanto o objeto PDOStatement são encerrados. 
LISTANDO OS DADOS CADASTRADOS 
Embora o objetivo principal fosse o formulário de inserção de dados no SGBD, é interessante vermos também a recuperação                                     
de informações e exibição em uma página HTML. Como dito, embora funcional, o código utilizado para listagem das                                   
informações tem caráter apenas de estudo. Em situações reais, uma série de cuidados, tanto estéticos como de padrões de                                     
codificação, devem ser utilizados. 
Nosso código de exemplo, que pode ser visto ao final do módulo, é composto por uma única página PHP contendo, tanto                                         
códigos de programação, quanto elementos HTML. Veja o código base no exemplo. 
CÓDIGOS DE EXEMPLO 
CÓDIGO DO FORMULÁRIO HTML PARA INSERÇÃO DE CLIENTES 
 
<!DOCTYPE html> 
<html> 
<head> 
<title>Formulário HTML - Cadastro de Clientes 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
rel="stylesheet" /> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<form action="processa_cliente.php" method="post"> 
<div class="row"> 
<div class="col-md-8"> 
<div class="card"> 
<div class="card-header"> 
<h3>Cadastro de Clientes</h3> 
</div> 
<div class="card-body"> 
<div class="form-group"> 
<label for="nome_cliente">Nome 
<input type="text" class="form-control" id="nome_cliente" name="nome_cliente" 
placeholder="Seu nome" required> 
</div> 
<div class="form-group"> 
<label for="cpf_cliente">CPF 
<input type="text" class="form-control" minlength="11" maxlength="11" id="cpf_cliente" 
name="cpf_cliente" placeholder="Seu CPF" title="Digite apenas números" required> 
</div> 
<div class="form-group"> 
<label for="email_cliente">Endereço de E-mail</label> 
<input type="email" class="form-control" id="email_cliente" name="email_cliente" 
aria-describedby="emailHelp" placeholder="Seu e-mail" required> 
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com 
ninguém. 
</div> 
<div class="form-group"> 
<label for="data_nascimento_cliente">Data de Nascimento <input type="date" 
class="form-control" id="data_nascimento_cliente" name="data_nascimento_cliente" 
placeholder="Sua data de nascimento" required> 
</div> 
<div class="form-group text-center"> 
<button type="submit" class="btn btn-primary">Enviar 
</div> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js">> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">></body> 
</html> 
CÓDIGO DO FORMULÁRIO COM VALIDAÇÃO EM JAVASCRIPT 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Formulário HTML - Cadastro de Clientes 
<meta charset="utf-8"> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
rel="stylesheet" /> 
<script type="text/javascript"> 
function validarFormulario(formulario){ 
//o código da função está no tópico “Validação no lado Cliente – Javascript” 
} 
</script> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<form action="processa_cliente.php" name="form_clientes" method="post" onsubmit="return 
validarFormulario(this);"> 
<div class="row"> 
<div class="col-md-8"> 
<div class="card"> 
<div class="card-header"> 
<h3>Cadastro de Clientes</h3> 
</div> 
<div class="card-body"> 
<div class="form-group"> 
<label for="nome_cliente">Nome</label> 
<input type="text" class="form-control" id="nome_cliente" name="nome_cliente" 
placeholder="Seu nome" > 
</div> 
<div class="form-group"> 
<label for="cpf_cliente">CPF</label> 
<input type="text" class="form-control" id="cpf_cliente" name="cpf_cliente" placeholder="Seu 
CPF" title="Digite apenas números" > 
</div> 
<div class="form-group"> 
<label for="email_cliente">Endereço de E-mail</label> 
<input type="text" class="form-control" id="email_cliente" name="email_cliente" 
placeholder="Seu e-mail" > 
</div> 
<div class="form-group"> 
<label for="data_nascimento_cliente">Data de Nascimento</label> 
<input type="text" class="form-control" id="data_nascimento_cliente" 
name="data_nascimento_cliente" placeholder="Sua data de nascimento" > 
</div> 
<div class="form-group text-center"> 
<button type="submit" class="btn btn-primary">Enviar</button> 
</div> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js">> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">> 
</body> 
</html> 
 
SCRIPT PHP PARA PROCESSAMENTO DO FORMULÁRIO HTML 
 
<?php 
/***VALIDAÇÃO DOS DADOS RECEBIDOS DO FORMULÁRIO ***/ 
if($_REQUEST['nome_cliente'] == ""){ 
echo "O campo Nome não pode ficar vazio."; 
exit; 
} 
if(strlen($_REQUEST['cpf_cliente']) != 11){ 
echo "O campo CPF precisa ter 11 caracteres."; 
exit; 
} 
if(!stripos($_REQUEST['email_cliente'], "@") || !stripos($_REQUEST['email_cliente'], ".")){ 
echo "O campo E-mail não é válido."; 
exit; 
} 
if($_REQUEST['data_nascimento_cliente'] == ""){ 
echo "O campo Data de Nascimento não pode ficar vazio."; 
exit; 
} 
/***FIM DA VALIDAÇÃO DOS DADOS RECEBIDOS DO FORMULÁRIO ***/ 
 
/***CONEXÃO COM O BD ***/ 
//Constantes para armazenamento das variáveis de conexão. 
define('HOST', '192.168.52.128'); 
define('PORT', '5432'); 
define('DBNAME', 'minimundo'); 
define('USER', 'postgres'); 
define('PASSWORD', '159753'); 
try { 
$dsn = new PDO("pgsql:host=". HOST . ";port=".PORT.";dbname=" . DBNAME . ";user=" . USER . 
";password=" . PASSWORD); 
} catch (PDOException $e) { 
echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage(); 
} 
/*** FIM DOS CÓDIGOS DE CONEXÃO COM O BD ***/ 
 
/***PREPARAÇÃO E INSERÇÃO NO BANCO DE DADOS ***/ 
$stmt = $dsn->prepare("INSERT INTO cliente(nome_cliente, cpf_cliente, email_cliente, 
data_nascimento_cliente) VALUES (?, ?, ?, ?) "); 
$resultSet = $stmt->execute([$_REQUEST['nome_cliente'], 
$_REQUEST['cpf_cliente'], $_REQUEST['email_cliente'], 
$_REQUEST['data_nascimento_cliente']]); 
if($resultSet){ 
echo "Os dados foram inseridos com sucesso."; 
}else{ 
echo "Ocorreu um erro e não foi possível inserir os dados."; 
} 
//Destruindo o objecto statement e fechando a conexão 
$stmt = null; 
$dsn = null; 
SCRIPT PHP PARA LISTAGEM DE CLIENTES 
 
<?php 
/***CONEXÃO COM O BD ***/ 
//O código de validação server side pode ser visto no exemplo de código 3. 
//Constantes para armazenamento das variáveis de conexão. 
define('HOST', '192.168.52.128'); 
define('PORT', '5432'); 
define('DBNAME', 'minimundo'); 
define('USER', 'postgres'); 
define('PASSWORD', '159753'); 
try { 
$dsn = new PDO("pgsql:host=". HOST . ";port=".PORT.";dbname=" . DBNAME . ";user=" . USER . 
";password=" . PASSWORD); 
} catch (PDOException $e) { 
echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage(); 
} 
/***PREPARAÇÃO E INSERÇÃO NO BANCO DE DADOS ***/ 
$instrucaoSQL = "Select id_cliente, nome_cliente, cpf_cliente, email_cliente, 
data_nascimento_cliente From cliente"; 
$resultSet = $dsn->query($instrucaoSQL); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Formulário HTML - Cadastro de Clientes</title> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
rel="stylesheet" /> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<div class="row"> 
<div class="col-md-8"> 
<div class="card"> 
<div class="card-header"> 
<h3>Listagem de Clientes</h3> 
</div> 
<div class="card-body"> 
<table class="table"> 
<thead class="thead-dark"> 
<tr> 
<th scope="col"># 
<th scope="col">Nome 
<th scope="col">CPF 
<th scope="col">E-mail 
<th scope="col">Data de Nascimento 
</tr> 
</thead> 
<tbody> 
<?php 
<while ($row = $resultSet->fetch(PDO::FETCH_ASSOC)): 
?>> 
<tr> 
<th scope="row"><?php echo $row['id_cliente']; ?></th> 
<td><?php echo $row['nome_cliente']; ?></td> 
<td><?php echo preg_replace("/(\d{3})(\d{3})(\d{3})(\d{2})/", "\$1.\$2.\$3-\$4", 
$row['cpf_cliente']); ?></td> 
<td><?php echo $row['email_cliente']; ?></td> 
<td><?php echo date('d/m/Y', strtotime($row['data_nascimento_cliente'])); ?></td> 
</tr> 
<?php> 
endwhile; 
?> 
</tbody> 
</table> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js">> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">> 
</body> 
</html>