Prévia do material em texto

Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 1 
 
SUMÁRIO 
O Ambiente Web Cliente X Servidor e as Tecnologias ........................................................................ 9 
Introdução .................................................................................................................................................. 9 
1. O ambiente web ....................................................................................................................... 9 
Modelo cliente X servidor ........................................................................................................................... 9 
Ambiente cliente X servidor ........................................................................................................................ 9 
Aplicações no modelo cliente X servidor .................................................................................................. 10 
Modelo de duas camadas ........................................................................................................................ 10 
Modelo de três camadas .......................................................................................................................... 11 
Camada de apresentação .................................................................................................................... 11 
Camada de Aplicação .......................................................................................................................... 11 
Camada de Dados ............................................................................................................................... 11 
Modelo de quatro camadas ...................................................................................................................... 12 
Ambiente web........................................................................................................................................... 13 
Cliente .................................................................................................................................................. 13 
Servidor web ........................................................................................................................................ 13 
Comunicação no ambiente web ............................................................................................................... 13 
Solicitação e resposta .............................................................................................................................. 14 
Client side X Server side .......................................................................................................................... 15 
2. O conceito de interface .......................................................................................................... 15 
Visão geral ............................................................................................................................................... 15 
A interface do lado cliente ........................................................................................................................ 16 
O conceito do design responsivo ............................................................................................................. 19 
Design responsivo ................................................................................................................................ 19 
A origem do design responsivo ............................................................................................................ 19 
Design responsivo na prática ............................................................................................................... 20 
Layouts fluidos ..................................................................................................................................... 20 
Media query.............................................................................................................................................. 21 
Scripts ...................................................................................................................................................... 22 
Design responsivo X design adaptativo ................................................................................................... 23 
Design responsivo ................................................................................................................................ 23 
Design adaptativo ................................................................................................................................. 23 
Mobile first ................................................................................................................................................ 23 
3. Tecnologias do lado cliente ................................................................................................... 24 
As tecnologias HTML ............................................................................................................................... 24 
HTML.................................................................................................................................................... 24 
HTML5.................................................................................................................................................. 26 
Outras tecnologias: CSS e JavaScript ..................................................................................................... 26 
CSS ...................................................................................................................................................... 26 
Sintaxe ................................................................................................................................................. 26 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 2 
 
Como inserir o CSS na página web ..................................................................................................... 27 
Seletores CSS ...................................................................................................................................... 27 
Boas práticas relacionadas à CSS ....................................................................................................... 27 
Outras considerações sobre a CSS ..................................................................................................... 27 
JavaScript................................................................................................................................................. 28 
Sintaxe ................................................................................................................................................. 28 
4. Tecnologias do lado servidor ................................................................................................. 28 
PHP: uma linguagem de programação server side .................................................................................. 28 
PHP ...................................................................................................................................................... 28 
Como o PHP funciona .......................................................................................................................... 29 
Anatomia de um script PHP ................................................................................................................. 29 
Sintaxe ................................................................................................................................................. 30 
Inclusão de scripts dentro de scripts .................................................................................................... 30 
Acesso ao sistema de arquivos ............................................................................................................30 
Páginas dinâmicas e acesso a dados ...................................................................................................... 31 
Páginas dinâmicas ............................................................................................................................... 31 
Acesso a dados .................................................................................................................................... 32 
Formas de acesso a dados .................................................................................................................. 32 
Considerações finais ................................................................................................................................ 32 
Referências .............................................................................................................................................. 33 
Explore + .................................................................................................................................................. 33 
Linguagem de Marcação de Hypertexto – HTML ............................................................................... 34 
Introdução ................................................................................................................................................ 34 
1. Estrutura de uma página Web ............................................................................................... 34 
Visão geral ............................................................................................................................................... 34 
O princípio da HTML ............................................................................................................................ 34 
A evolução da HTML: versões ............................................................................................................. 34 
Definição de tipos de documento - DTD ................................................................................................... 34 
Utilizando Doctypes – Document types ................................................................................................ 35 
Estrutura de uma página Web .................................................................................................................. 36 
Elementos obrigatórios ......................................................................................................................... 36 
Elementos básicos ............................................................................................................................... 37 
Funcionamento da HTML ......................................................................................................................... 37 
2. Tags HTML básicas ............................................................................................................... 37 
Visão geral ............................................................................................................................................... 37 
Aprofundando o conceito de tags ......................................................................................................... 37 
Declaração de tags .................................................................................................................................. 38 
Como declarar tags .............................................................................................................................. 38 
Tipos e composição das tags ................................................................................................................... 38 
Os atributos .......................................................................................................................................... 38 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 3 
 
Tags textuais ........................................................................................................................................ 39 
Tags semânticas .................................................................................................................................. 39 
Tags de formatação <strong> e <em> vs <b> e <i> ............................................................................. 40 
Tags obsoletas ..................................................................................................................................... 40 
3. Tags HTML complexas .......................................................................................................... 41 
Listas na HTML ........................................................................................................................................ 41 
Listas .................................................................................................................................................... 41 
Tabelas na HTML ..................................................................................................................................... 42 
Estrutura das Tabelas .......................................................................................................................... 43 
As tabelas e a semântica ..................................................................................................................... 43 
Mídias na HTML ....................................................................................................................................... 44 
Mídias: vídeo e áudio ........................................................................................................................... 44 
Teoria na prática .................................................................................................................................. 45 
4. Formulários em páginas Web ................................................................................................ 45 
Visão geral ............................................................................................................................................... 45 
Formulários: composição e validação .................................................................................................. 45 
Estrutura básica do formulário.................................................................................................................. 45 
Estrutura inicial do formulário ............................................................................................................... 45 
Conhecendo melhor os elementos e atributos do formulário ............................................................... 46 
Atributos do formulário ............................................................................................................................. 47 
O atributo “type” ................................................................................................................................... 47 
Novos atributos e tipos ......................................................................................................................... 47 
Validação de dados em formulários ......................................................................................................... 48 
Validação de formulários ...................................................................................................................... 48 
Como funciona a validação? ................................................................................................................ 48 
Tipos de validação ............................................................................................................................... 48 
Considerações finais ................................................................................................................................ 49 
Referências ..............................................................................................................................................49 
Explore + .................................................................................................................................................. 49 
Linguagem de Marcação e Estilos – CSS ........................................................................................... 50 
Introdução ................................................................................................................................................ 50 
1. Fundamentos da CSS ............................................................................................................ 50 
Visão geral ............................................................................................................................................... 50 
Como a CSS funciona? ........................................................................................................................ 50 
Sintaxe da CSS .................................................................................................................................... 50 
Seletores .................................................................................................................................................. 51 
Seletores class e id .............................................................................................................................. 51 
Restrições e boas práticas na utilização do identificador ..................................................................... 52 
Seletores de atributo ............................................................................................................................ 52 
Seletores baseados em relacionamento .............................................................................................. 53 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 4 
 
Propriedades CSS .................................................................................................................................... 53 
CSS e HTML ............................................................................................................................................ 54 
Integrando a CSS à HTML ................................................................................................................... 54 
Efeito cascata ....................................................................................................................................... 56 
Herança ................................................................................................................................................ 56 
Especificidade ...................................................................................................................................... 56 
Dicas sobre as regras de precedência ................................................................................................. 57 
CSS3 .................................................................................................................................................... 58 
2. CSS3 ...................................................................................................................................... 58 
Recursos de cores ................................................................................................................................... 58 
Cores .................................................................................................................................................... 58 
Formas de escrita de cores .................................................................................................................. 58 
Propriedades de cor ............................................................................................................................. 59 
Recursos de textos e fontes ..................................................................................................................... 59 
Texto .................................................................................................................................................... 59 
Alinhamento de texto ............................................................................................................................ 59 
Espaçamento entre linhas .................................................................................................................... 59 
Espaçamento entre letras e palavras ................................................................................................... 60 
Fontes .................................................................................................................................................. 60 
Web fontes ........................................................................................................................................... 60 
Como utilizar a regra @font-face .......................................................................................................... 61 
Tipos de Web Fontes ........................................................................................................................... 61 
Abreviaturas ou atalhos ............................................................................................................................ 62 
3. Conceitos avançados de CSS ............................................................................................... 62 
Conceitos de box model ........................................................................................................................... 62 
Conceitos de pseudoclasses e pseudoelementos.................................................................................... 64 
Pseudoclasses ..................................................................................................................................... 64 
Pseudoelementos ................................................................................................................................. 64 
Posicionamento .................................................................................................................................... 65 
Conceitos de layout .................................................................................................................................. 65 
Layout em colunas e Grid Layout ......................................................................................................... 65 
A propriedade position.......................................................................................................................... 66 
4. Frameworks CSS ................................................................................................................... 67 
Visão geral ............................................................................................................................................... 67 
Frameworks e CSS .............................................................................................................................. 67 
Frameworks.............................................................................................................................................. 68 
Bootstrap .............................................................................................................................................. 68 
Foundation ........................................................................................................................................... 69 
Semantic UI .......................................................................................................................................... 69 
Vantagens e desvantagens da utilização de frameworks ..................................................................... 70 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 5 
 
Considerações finais ................................................................................................................................71 
Referências .............................................................................................................................................. 71 
Explore + .................................................................................................................................................. 71 
Linguagem Javascript .......................................................................................................................... 72 
Introdução ................................................................................................................................................ 72 
1. Conceitos e sintaxe do Javascript ......................................................................................... 72 
Visão geral ............................................................................................................................................... 72 
JavaScript ............................................................................................................................................. 72 
Árvore DOM ............................................................................................................................................. 72 
A interface DOM ................................................................................................................................... 72 
Manipulando o DOM com JavaScript ................................................................................................... 73 
JavaScript e HTML ................................................................................................................................... 73 
Incorporando o JavaScript à HTML ...................................................................................................... 73 
Sintaxe e conceitos .................................................................................................................................. 74 
Sintaxe JavaScript ................................................................................................................................ 74 
Variáveis............................................................................................................................................... 75 
Atribuição ............................................................................................................................................. 75 
Ponto e vírgula ..................................................................................................................................... 75 
Outros elementos ................................................................................................................................. 76 
Teoria na prática ...................................................................................................................................... 76 
2. Estruturas de decisão e de repetição .................................................................................... 77 
Estruturas condicionais ............................................................................................................................ 77 
Estruturas de decisão ........................................................................................................................... 77 
If ........................................................................................................................................................... 79 
else ....................................................................................................................................................... 81 
else if .................................................................................................................................................... 81 
switch ................................................................................................................................................... 82 
Laços: estruturas de repetição ................................................................................................................. 82 
Estruturas de repetição ........................................................................................................................ 82 
for ......................................................................................................................................................... 82 
while ..................................................................................................................................................... 83 
do/while ................................................................................................................................................ 83 
for/in ..................................................................................................................................................... 83 
3. Vetores ................................................................................................................................... 84 
Visão geral ............................................................................................................................................... 84 
Vetores em JavaScript ......................................................................................................................... 84 
Composição e criação de vetores ............................................................................................................ 84 
Composição dos vetores ...................................................................................................................... 84 
Criação de vetores em JavaScript ........................................................................................................ 84 
Manipulação de vetores ........................................................................................................................... 85 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 6 
 
Acesso e exibição de elementos do vetor ............................................................................................ 85 
push...................................................................................................................................................... 85 
Outras formas de adicionar elementos a um vetor ............................................................................... 85 
splice .................................................................................................................................................... 85 
A propriedade length ............................................................................................................................ 86 
Remoção de elementos do vetor .......................................................................................................... 86 
Outros métodos para remover elementos do vetor .............................................................................. 86 
Outras formas de remover elementos do vetor .................................................................................... 87 
4. Ajax e JSON ........................................................................................................................... 87 
Visão geral ............................................................................................................................................... 87 
Requisições síncronas e assíncronas .................................................................................................. 87 
Como as requisições assíncronas funcionam na prática ..................................................................... 88 
Requisições assíncronas em JavaScript .................................................................................................. 88 
AJAX - Requisições assíncronas em JavaScript ..................................................................................88 
XMLHttpRequest .................................................................................................................................. 88 
Outros métodos e propriedades ........................................................................................................... 89 
API Fetch.............................................................................................................................................. 90 
JSON .................................................................................................................................................... 91 
Frameworks JavaScript ........................................................................................................................ 92 
Considerações finais ................................................................................................................................ 92 
Referências .............................................................................................................................................. 92 
Explore + .................................................................................................................................................. 92 
Programação de Páginas Dinâmicas Com PHP ................................................................................. 93 
Introdução ................................................................................................................................................ 93 
1. Conceitos básicos de PHP .................................................................................................... 93 
A linguagem PHP ..................................................................................................................................... 93 
A sintaxe PHP .......................................................................................................................................... 94 
Término de instruções e comentários .................................................................................................. 94 
Variáveis em PHP ................................................................................................................................ 94 
Atribuição de valores ............................................................................................................................ 95 
Entrada de dados: variáveis de requisição HTTP .................................................................................... 95 
Métodos de requisição HTTP ............................................................................................................... 95 
Método GET ......................................................................................................................................... 96 
Método POST ....................................................................................................................................... 96 
Variável $_GET .................................................................................................................................... 96 
Variável $_POST .................................................................................................................................. 96 
Variável $_REQUEST .......................................................................................................................... 97 
Operadores PHP ...................................................................................................................................... 97 
Operadores aritméticos ........................................................................................................................ 97 
Operadores de atribuição ..................................................................................................................... 97 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 7 
 
Operadores de comparação ................................................................................................................. 98 
Operadores lógicos .............................................................................................................................. 98 
2. Estruturas de decisão e de repetição .................................................................................... 99 
Condicionais: estruturas de decisão ......................................................................................................... 99 
if ......................................................................................................................................................... 100 
Else .................................................................................................................................................... 100 
Elseif/else if ........................................................................................................................................ 100 
Switch ................................................................................................................................................. 101 
Formas alternativas ............................................................................................................................ 101 
Laços: estruturas de repetição ............................................................................................................... 102 
While .................................................................................................................................................. 102 
Do-while ............................................................................................................................................. 103 
For ...................................................................................................................................................... 103 
Foreach .............................................................................................................................................. 103 
3. Vetores e funções ................................................................................................................ 104 
Arrays: vetores ....................................................................................................................................... 104 
Criação de arrays e atribuição de valores .......................................................................................... 104 
Remoção de elementos de um array ................................................................................................. 106 
Arrays multidimensionais.................................................................................................................... 106 
Teoria na prática ................................................................................................................................ 107 
Funções em PHP ................................................................................................................................... 108 
Nomenclaturas de funções e outras boas práticas ............................................................................. 109 
Funções nativas ................................................................................................................................. 109 
Considerações finais .............................................................................................................................. 109 
Referências ............................................................................................................................................ 109 
Explore + ................................................................................................................................................ 109 
Integração do PHP com banco de dados ..........................................................................................111 
Introdução .............................................................................................................................................. 111 
1. A Classe PDO em banco de dados ..................................................................................... 111 
Banco de dados e linguagem PHP ......................................................................................................... 111 
Sistemas Gerenciadores de Banco de Dados .................................................................................... 111 
Conceitos básicos da linguagem de programação PHP..................................................................... 112 
A Classe PDO ........................................................................................................................................ 114 
PDO.................................................................................................................................................... 114 
Drivers PDO ....................................................................................................................................... 115 
Conexão com o SGBD utilizando PDO .............................................................................................. 115 
Exceções em PHP ................................................................................................................................. 115 
Tratamento de exceções .................................................................................................................... 115 
Encerramento de conexões e conexões persistentes ............................................................................ 116 
Encerramento de conexões ................................................................................................................ 116 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 8 
 
Conexões persistentes ....................................................................................................................... 116 
2. Métodos da Classe PDO...................................................................................................... 117 
Programação orientada a objetos em PHP ............................................................................................ 117 
Orientação a objetos em PHP ............................................................................................................ 117 
Classes e objetos ............................................................................................................................... 117 
Os métodos da Classe PDO .................................................................................................................. 119 
A Classe PDO e seus métodos .......................................................................................................... 119 
Método EXEC ..................................................................................................................................... 120 
Método Query ..................................................................................................................................... 121 
Outros métodos importantes .............................................................................................................. 121 
O Ataque SQL injection .......................................................................................................................... 121 
SQL injection ...................................................................................................................................... 121 
Métodos Prepare e Execute ............................................................................................................... 122 
3. Construir uma aplicação com banco de dados ................................................................... 123 
Primeiros passos .................................................................................................................................... 123 
Preparação ......................................................................................................................................... 123 
Motivação ........................................................................................................................................... 124 
Esquematizando o banco de dados ................................................................................................... 124 
O formulário HTML e o script PHP ......................................................................................................... 124 
Confeccionando o formulário HTML ................................................................................................... 124 
Codificando o script PHP que processará o formulário ...................................................................... 125 
Recuperação da informação .................................................................................................................. 126 
Listando os dados cadastrados .......................................................................................................... 126 
Códigos: exemplos práticos ................................................................................................................... 126 
Código do formulário HTML para inserção de clientes ....................................................................... 126 
Código do formulário com validação em Javascript ........................................................................... 127 
Script PHP para processamento do formulário HTML ........................................................................ 128 
Script PHP para listagem de clientes ................................................................................................. 128 
Considerações finais .............................................................................................................................. 129 
Referências ............................................................................................................................................ 129 
Explore + ................................................................................................................................................ 130 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 9 
 
Desenvolvimento Web em HTML5, CSS, 
Javascript e PHP 
O Ambiente Web Cliente X Servidor e as Tecnologias 
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. 
1. O ambiente web 
Modelo cliente X servidor 
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. 
Ambiente 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 imagem a seguir. 
Desenvolvimento Web em HTML5, CSS, Javascripte PHP 
Marcio Quirino - 10 
 
 
Arquitetura cliente X servidor em uma rede interna. 
Aplicações no modelo cliente X servidor 
Esse modelo 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 duas, três e quatro (ou N) camadas. 
Modelo de duas camadas 
Nesse 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 desse 
modelo as aplicações desktop instaladas em cada computador cliente que se comunicam com um servidor 
na mesma rede. A imagem que segue exemplifica esse tipo de rede. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 11 
 
 
Modelo de duas camadas. 
Modelo de três camadas 
Esse 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, foi incluída 
uma camada a mais, a camada de aplicação. Com isso, as responsabilidades de cada camada ficaram 
assim divididas: 
Camada de apresentação 
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 pelas 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 três camadas: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 12 
 
 
Modelo de três camadas. 
Modelo de quatro camadas 
O grande avanço obtido nesse 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. Nesse modelo, a divisão de 
responsabilidades ficou desta forma: 
 
Veja um exemplo do modelo de quatro camadas: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 13 
 
 
Modelo de quatro camadas. 
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. 
Comentário 
É importante destacar um aspecto quando tratamos do ambiente web: a comunicação. 
Até aqui, vimos que esse ambiente é composto pelo: 
Cliente 
Utiliza um navegador ou aplicativo e consome serviços hospedados em um servidor web. 
Servidor web 
Sua estrutura pode comportar tanto as camadas de apresentação, aplicação e dados 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, nesse 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 imagem seguinte, podemos ver um exemplo de comunicação no ambiente 
web. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 14 
 
 
Comunicação no ambiente web. 
No exemplo apresentado, temos de um lado o cliente que, com um desktop ou smartphone, faz a 
requisição, através da internet, de um serviço — representada pelo arquivo Listar-TV.php — a um servidor. 
O servidor web, após processar a requisição, retorna a informação solicitada, representada pelo arquivo 
Listagem-TV.php. Com isso, 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 15 
 
 
Processo de solicitação (request) e resposta (response). 
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 e códigos disponibilizados no lado cliente (nesse caso, o dispositivo 
utilizado por um usuário para fazer uma requisição) e no lado servidor. 
2. O conceito de interface 
Visão geral 
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 por meio de linha de comando e, 
posteriormente, também mediante interfaces gráficas (Graphical User Interface - GUI). Segundo Morais 
(2014), no início, a interação foi, de certo modo, primária, deixando um pouco de lado o ser humano, por 
não existir um estudo aprofundado desses aspectos. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 16 
 
 
A interface do lado cliente 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 17 
 
 
Sobre essa variedade nas características dos dispositivos utilizados como interface para o acesso a 
aplicações no ambiente web, é necessário garantir a usabilidade, ou seja, que sejam desenvolvidos 
sistemas fáceis de usar e de aprender, além de flexíveis. Em complemento a esse conceito, e partindo do 
ponto de vista da usabilidade, esta deve estar alinhada ao conceito de design responsivo, o qual deverá 
permitir que as páginas web e consequentemente as aplicações web respondam a qualquer dispositivo sem 
perda de informações por parte do usuário. 
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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 18 
 
 
Tabela: Estatísticas mundiais sobre resolução de telas de dispositivos. Alexandre Paixão. 
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 imagem a seguir. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 19 
 
 
Estatísticas sobre resoluções de telas de dispositivos - Brasil. 
O conceitodo design responsivo 
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, na plataforma e na orientação do dispositivo por ele utilizado. 
Comentário 
Essa definição, na prática, implica que a página web/aplicação acessada deve ser capaz de, automaticamente, 
responder às preferências do usuário e, com isso, evitar que seja necessário construir diferentes versões de uma 
mesma página/aplicação para diferentes tipos e tamanhos de dispositivos. 
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 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 20 
 
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 (menor ponto que forma uma imagem digital). 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 em vez 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 21 
 
 
Além dos valores percentuais, há outras unidades de medidas flexíveis, 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). 
Saiba mais 
Além das unidades, fixas e flexíveis já mencionadas, há ainda outras disponíveis. A listagem completa pode 
ser acessada no site do W3C – CSS Units. 
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 ao longo do nosso estudo. 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. 
Comentário 
Nesse contexto, media query é a utilização de media types (tipos de mídia) a partir de uma ou mais expressões 
para definir formatações para dispositivos diversos. Com o seu uso podemos, por exemplo, definir que determinado 
estilo de um ou mais elementos seja aplicado apenas a dispositivos cuja largura máxima de tela seja igual ou menor 
que 600px. 
A imagem seguinte mostra um fragmento de código em que 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 360px. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 22 
 
 
Exemplo de declaração de media query. 
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 360px. 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. 
Atenção! 
Outras expressões podem ser utilizadas, além da demonstrada acima, como a definição do tipo de mídia (media 
type) — ou seja, um estilo que se aplica apenas a um ou mais tipos de documento, como a versão para impressão de 
uma página web, por exemplo — e a combinação entre escalas de valores. 
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. 
Essa 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 mais importante é a de atualização dinâmica de conteúdo — e não só do 
conteúdo, mas também da apresentação dele. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 23 
 
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), em que, 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 — 
por meio, 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, em que são previstos 
pontos de quebra para que a página se adapte às seis diferentes dimensões utilizadas. 
Resumindo 
Poderíamos ainda dizer que o design responsivo é mais complexo, porém mais flexível. Já o adaptativo, mais 
trabalhoso, embora menos flexível. 
Como dito, no design responsivo é preciso criar uma série de combinações de media query para que 
o layout se adapte aos mais variados tamanhos de tela. Já no adaptativo, imaginemos uma situação em que 
foram definidos os seguintes layouts e quebras: 360px, 720px, 900px, 1080px, 1440px e 1800px. Caso a 
largura da tela do dispositivo seja superior a 360px e inferior a 720px — por exemplo, 700px —, serácarregado o layout de 360px, que equivale, praticamente, à sua metade. É possível imaginar que, nesse 
caso, o resultado não seja visualmente muito agradável ou otimizado. 
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 se parte 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): 
As páginas web são projetadas tendo em vista dispositivos desktop e telas maiores e, 
posteriormente, adaptadas para dispositivos móveis e telas menores. 
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. 
 
 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 24 
 
3. Tecnologias do lado cliente 
As tecnologias HTML 
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 nos seguintes 
tipos: 
Estruturais 
Juntamente com o elemento de definição do DocType, como pode ser visto na imagem seguinte, 
compõem a estrutura obrigatória de uma página web. 
 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 25 
 
 
Tags de conteúdo de uma página web. 
Semânticas 
Relacionadas 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 imagem a seguir: 
 
Tags estruturais básicas de uma página web. 
Como visto na imagem apresentada, as tags < header >, < nav >, < main > e < footer > desempenham 
papel semântico, uma vez que estruturam a página em seções. Como seus nomes indicam, elas separam o 
conteúdo em partes lógicas que formam o esqueleto da maioria das páginas HTML, ou seja: cabeçalho, 
menu de navegação, conteúdo principal e rodapé. Logo, tags de parágrafo, imagem, entre outras, são 
inseridas dentro de cada uma dessas seções, formando assim um documento HTML completo. 
Saiba mais 
Uma listagem completa de tags e atributos (usados para adicionar características a uma tag) pode ser 
encontrada no site do W3C. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 26 
 
HTML5 
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: 
• 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 - áudio e vídeo. 
Outras tecnologias: CSS e JavaScript 
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. 
Dica 
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 em que 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. 
Por exemplo, para alterar a cor da fonte de um texto inserido em um parágrafo, poderíamos utilizar 
uma das variações apresentadas na imagem a seguir. 
 
Exemplo de aplicação de CSS. 
No exemplo apresentado, 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 27 
 
Como inserir o CSS na página web 
Há quatro formas de inserir o CSS em um documento: 
Inline 
Os estilos, neste caso, são aplicados com 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 
Essa 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. 
Exemplo 
Vamos imaginar a situação oposta: temos um site cujo layout (topo, rodapé e menu, por exemplo) é comum 
em todas as suas páginas – arquivos .html independentes. Ao usarmos as formas inline e interna, precisaríamos 
replicar um mesmo código em todas as páginas. Imagine agora ter que fazer alguma alteração ou inclusão, tal operação 
precisaria ser repetida inúmeras vezes. Em contrapartida, se usarmos um arquivo externo e o linkarmos em todas as 
páginas, precisaremos trabalhar apenas em um único código, tornando-o muito mais fácil de ser mantido e ainda 
diminuindo consideravelmente nosso trabalho. 
Outra boa prática, tendo em vista o desempenho do carregamento da página web é compactar o 
arquivo — normalmente chamamos este processo de minificação. Existem softwares e até mesmo sites 
que fazem esse trabalho, queconsiste em, resumidamente, diminuir os espaços e as linhas no arquivo .css, 
reduzindo assim o seu tamanho final. 
Outras considerações sobre a CSS 
Uma nova funcionalidade tem ganhado bastante espaço ultimamente no que diz respeito à CSS: os 
pré-processadores, como Sass, Less, Stylus etc. 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 por meio 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 28 
 
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.). 
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. 
Mensagem 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. 
4. Tecnologias do lado servidor 
PHP: uma linguagem de programação server side 
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 isso 
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 estudo. 
PHP 
PHP (Hypertext Preprocessor) é 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 — apenas 10 anos 
depois da sua criação. 
Saiba mais 
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 do foco nos scripts no lado servidor, é possível também utilizar o PHP por meio 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 29 
 
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 1: O código PHP gerado é interpretado pelo servidor. 
• Etapa 2: Esse código é convertido em formato HTML. 
• Etapa 3: O código é 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 imagem a seguir 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”. 
 
Exemplos de código PHP. 
No primeiro código da imagem, 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, 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 30 
 
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 parte da imagem, temos um exemplo de código em que são definidas duas variáveis, 
$nome e $email, que recebem dois valores enviados de um formulário HTML, por meio 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 ao código PHP. 
Sintaxe 
Veja a seguir um resumo sobre a sintaxe do PHP: 
Variáveis 
No PHP, as variáveis são criadas com a utilização do símbolo de cifrão ($). Além disso, PHP é case 
sensitive, ou seja, sensível a letras maiúsculas e minúsculas, pois faz diferença quando utilizamos uma e 
outra. 
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 
No PHP, há suporte às condicionais if, else, if e else ternários, if else e switch. 
Laços de repetição 
No PHP estão disponíveis os laços for, foreach, while e do-while. 
Funções e métodos 
O código PHP possui uma grande quantidade de funções e métodos nativos. 
Inclusão de scripts dentro de scripts 
O PHP permite a inclusão de um script dentro de outro script. Isso é muito útil, sobretudo se 
pensarmos no paradigma de orientação a objetos, em que temos, em um programa, diversas classes, 
codificadas em diferentes scripts. Logo, sempre que precisarmos fazer uso de uma dessas classes, de seus 
métodos ou atributos, basta incluí-la no script desejado. Para incluir um script em outro, o PHP disponibiliza 
algumas funções: 
• Include 
• Require 
• Include once 
• Require_once 
Acesso ao sistema de arquivos 
Por meio do PHP é possível ter acesso ao sistema de arquivos do servidor web. Com isso, pode-se 
por exemplo, manipular arquivos e diretórios, desde a simples listagem à inclusão ou exclusão de dados. 
DesenvolvimentoWeb em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 31 
 
Páginas dinâmicas e acesso a 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, com um 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 mediante um formulário. Para prosseguirmos, é importante definirmos o que são páginas dinâmicas. A 
melhor forma de fazer isso, porém, é definindo o que seria o seu antônimo, ou seja, as páginas estáticas. 
HTML + JavaScript + CSS, sem conexão com uma linguagem de programação, formam o que 
podemos chamar de páginas estáticas. Embora seja até possível termos um site inteiro composto 
por páginas estáticas, isso seria muito trabalhoso e também nada usual. 
Mas e agora? Qual o próximo nível? O que fazer a seguir? A resposta para essas perguntas está no 
que abordaremos a seguir: páginas dinâmicas e acesso a dados. 
Exemplo 
Imagine um site que tenha, por exemplo, dez páginas. Agora imagine que esse site tenha a mesma estrutura 
visual, o mesmo cabeçalho, menu, rodapé e outros pontos em comum. Pense em um blog, por exemplo, onde o que 
muda são os conteúdos dos posts. No site estático, teríamos que escrever dez diferentes arquivos HTML, modificando 
o conteúdo em cada um deles, diretamente nas tags HTML, e só conseguiríamos reaproveitar os estilos e a 
interatividade de navegador utilizando CSS e JavaScript externos. Entretanto, todo o conteúdo precisaria ser digitado 
e muito código HTML repetido. Todo esse trabalho nos ajuda a entender o que são páginas estáticas. 
Ainda utilizando o exemplo de um blog, imagine que você deseja receber comentários em seus posts, 
deseja que seus visitantes possam interagir com você e vice-versa. Como fazer isso? A resposta, como 
você já deve imaginar, é: páginas dinâmicas. 
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 a seguir apresenta um pequeno resumo comparativo 
entre as páginas estáticas e dinâmicas. 
 
Tabela: Comparativo entre páginas estáticas e dinâmicas. 
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 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 32 
 
conteúdo por meio dela. Já no site estático, será preciso modificar diretamente o código HTML, tornando 
necessário alguém com conhecimento técnico para isso. 
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 em que diversas informações podem 
ser armazenadas e posteriormente recuperadas. 
Para realizar a gestão desses 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: por meio das APIs (Application Programming Interface) XMLHttpRequest e Fetch API. A 
primeira é amplamente utilizada, sendo a forma mais comum de realizar essa 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, mediante algum evento no navegador, normalmente 
originado em uma ação disparada pelo usuário, é enviada 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. 
Considerações finais 
Ao longo deste estudo, vimos como o modelo cliente X servidor, inicialmente restrito às redes internas 
das empresas, evoluiu tanto nos diferentes modelos de camadas quanto na migração para a internet. Novas 
tecnologias foram criadas no lado cliente — linguagens de marcação; folhas de estilo; linguagens de script 
— e também no lado servidor — linguagens de script; bancos de dados; páginas dinâmicas —, criando o 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 33 
 
ambiente web como o conhecemos atualmente, caracterizado pelas tecnologias que formam sua base e 
pela preocupação com a melhor experiência possível para os usuários. 
Referências 
BENYON, D. Interação humano-computador. São Paulo: Pearson Prentice Hall, 2011. 
STAT COUNTER GLOBAL STATS. Screen resolution stats Brazil. S. d. 
FRIEDMAN, V. Responsive web design: what it is and how to use it. Smashing Magazine, 11 ago. 
2018. Consultado na internet em: 13 jun. 2022. 
MOZILLA. MDN web docs: CSS Preprocessor. S. d. 
PAIXÃO, A. Notas de aula sobre ambiente web cliente X servidor e as tecnologias do professor 
alexandre paixão. Disponível sob licença Creative Commons BR Atribuição – CC BY, 2020. 
SILVA, M. S. Web design responsivo: aprenda a criar sites que se adaptam automaticamente a 
qualquer dispositivo, desde desktop até telefones celulares. São Paulo: Novatec, 2014. 
WROBLEWSKI, L. Mobile first. S. d. 
W3SCHOOLS. CSS reference. S. d. 
Explore + 
Confira as indicações que separamos especialmente para você! 
Leia o livro Design de interação: além da interação homem-computador, escrito por Jennifer Preece, 
Yvonne Rogers e Helen Sharp, da Editora John Wiley e Sons. 
Leia o livro Interação humano-computador, escrito por Simone Diniz Junqueira Barboza e Bruno 
Santana da Silva, da Editora Elsevier. 
Visite o tópico CSS Units no site do W3C e conheça a lista completa das unidades de medidas da 
CSS. Conforme mencionado, a CSS possuiuma série de unidades de medidas para expressar tamanho, 
sendo esse associado a propriedades como “width”, “margin”, entre outros. Estão disponíveis unidades de 
tamanho absoluto, como centímetros, milímetros, pixels etc. e também unidades de tamanho relativo, como 
“em”, “ex”, entre outros. 
Assim como a maioria das tecnologias, a CSS possui um guia de referência oficial. Como esse guia 
é mantido pelo W3C, entre no site para acessá-lo e conhecer a sua especificação e todos os detalhes a ela 
relacionados. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 34 
 
Linguagem de Marcação de Hypertexto – HTML 
Introdução 
O objetivo principal de uma linguagem de marcação de hypertexto, e mais especificamente da HTML 
– que será usada como linguagem padrão e alvo de nosso estudo –, é o de estruturar o conteúdo de um 
documento. Este conteúdo pode ser composto de textos, figuras, tabelas etc. 
Estrutura, por sua vez, pode ser definida como a organização dos elementos de conteúdo. Para 
realizar essa função, a HTML faz uso de um sistema hierárquico de elementos chamados de tags. 
1. Estrutura de uma página Web 
Visão geral 
O princípio da HTML 
A especificação da HTML foi criada 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 World Wide 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 diferentes 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 
1991 HTML Tim Berners-Lee cria a HTML 
1995 HTML 2 Grupo de Trabalho HTML define a HTML 2.0 
1997 HTML 3.2 W3C publica a Recomendação HTML 3.2 
1999 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 
Tabela: Histórico de versões da HTML. 
Cada versão lançada da HTML representa algum tipo de evolução em relação à versão anterior: 
formalização de regras e características; correção de problemas de compatibilidade; criação de novas tags; 
suporte a novos recursos etc. 
Definição de tipos de documento - DTD 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 35 
 
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 (Document Type Definition), que é uma lista de elementos, atributos e 
requisitos relacionados a 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 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. 
A especificação da HTML 4, por exemplo, previa três tipos de Doctypes: Strict, Transitional e 
Frameset. Vamos conhecer cada uma delas? 
Strict 
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 
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; 
• 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 36 
 
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 vimos, 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 a seguir: 
<!doctype html> 
<html> 
 <head> 
 </head> 
 <body> 
 </body> 
</html> 
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 é 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 imagem anterior, é possível perceber que as demais tags estão contidas dentro da tag raiz, 
<html>. 
Comentário 
Antecipando um conteúdo que será visto mais adiante, cabe destacar outro elemento importante referente à 
tag raiz: o atributo lang. Este, propositalmente, não foi inserido na Figura Estrutura básica de uma página Web, uma 
vez que ainda não tratamos dos conceitos de atributo.Por ora, cabe dizer que este atributo global (por ser declarado 
na tag raiz) deve ser utilizado para definir o idioma da página – podendo também ser aplicado a outras tags, definindo 
o idioma delas. Alguns exemplos de sua declaração: 
<html lang=”en-US” > 
<html lang=”en-GB” > 
<html lang=”pt” > 
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 contém as tags que serão usadas para manter todo o documento 
funcionando e em ordem. 
Na tabela a seguir visualizamos as tags que fazem parte do 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ínculo de folhas de estilo ao documento − quando elas são declaradas 
diretamente no documento. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 37 
 
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 na tag <body>. 
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: 
A. Cabeçalho 
• Uma área inicial, logo na parte superior da página. Normalmente vemos um título, uma logomarca ou 
algo do tipo. 
B. 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. 
C. Conteúdo 
• O conteúdo principal da página, que pode ser dividido em subseções. 
D. Barra Lateral 
• Pode conter tanto links de navegação quanto informações adicionais que forneçam complemento ao 
conteúdo principal. 
E. 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. 
Funcionamento da 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 no 
que chamamos de interpretação e renderização. 
2. Tags HTML básicas 
Visão geral 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 38 
 
Um dos exercícios propostos, consistia em inserir na estrutura básica de tags da HTML − mais 
precisamente dentro da tag <body> −, um texto qualquer e, a seguir, salvar e carregar esta página no 
navegador. Como pôde ser visto, o navegador exibiu o texto, que provavelmente era curto. 
Agora, tente imaginar o site de um portal de notícias com todo o conteúdo amontoado dentro da tag 
<body>. 
Embora exibido pelo navegador, tudo seria uma grande bagunça, uma confusão. No lugar disso, 
imagine que seja possível dizer ao navegador que determinado conteúdo é o título de uma seção, sendo 
procedido de um parágrafo que diga respeito a tal seção. Você ainda pode ir além, inserindo uma imagem 
e vários outros elementos. Para isso servem as tags. 
Declaração de tags 
Como declarar 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. 
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. 
Atenção! 
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. 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 39 
 
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. 
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: 
 
Ao analisara figura, é 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 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 40 
 
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. 
Veja outras tags e suas respectivas funções: 
Tag Descrição/Função 
<article> 
Inclui 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. 
<hr> 
Insere uma linha horizontal no documento. Normalmente é utilizada quando se pretende alterar a temática de um 
texto. 
 
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: 
1. <b>: aplica o efeito de negrito em um texto; 
2. <strong>: aplica o efeito de negrito em um texto e o marca como importante; 
3. <i>: aplica o efeito de itálico em um texto; 
4. <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, que transformam o texto em áudio, e normalmente são 
utilizados por pessoas com deficiência visual. 
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 pelo seguinte motivo: 
1. Em primeiro lugar, porque provavelmente foram substituídas por novas tags, com melhor 
semântica. 
2. 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. 
 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 41 
 
Tag Função 
<applet> Identifica 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. 
<image> Ancestral da tag <img>, era usada nas primeiras versões HTML para a inserção de imagens. 
 
Atualmente consideradas obsoletas, as tags <center> e <font> ainda são usadas em muitas páginas 
HTML. Ambas se enquadram no conceito de que não é função da HTML cuidar da apresentação. Logo, as 
duas foram substituídas por propriedades CSS. 
3. Tags HTML complexas 
Listas na HTML 
Neste módulo, daremos continuidade à estruturação de conteúdo com a utilização de tags. Novas 
tags para a representação de novos tipos de conteúdo serão apresentadas: as listas, as tabelas, os vídeos 
e os áudios. 
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, veja: 
• Ordenadas 
o Usadas quando desejamos listar dados com a necessidade de representar a sua ordenação 
de forma numérica ou alfabética. 
• Não ordenadas 
o Usadas quando não há necessidade de listar ordenadamente. 
• De definição 
o Usadas quando precisamos listar itens e atribuirmos uma descrição a eles. 
 
Outra característica importante das listas é que a sua marcação HTML é composta por uma tag de 
container, ou tag “pai”, e por seus itens ou “filhos”. Além disso, a lista de definição possui ainda um terceiro 
item, que é justamente o utilizado para descrevê-lo. Veja na tabela a seguir cada tipo de lista: 
Tipo Tag Container Tag Item Tag Descrição 
Ordenadas <ol> <li> -- 
Não Ordenadas <ul> <li> -- 
Definição <dl> <dt> <dd> 
 
Veja a seguir exemplos de como as tags são utilizadas e seu resultado na tela: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 42 
 
 
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 de CSS. 
Atenção! 
Este elemento permite que sejam criadas listas dentro de listas – as chamadas listas aninhadas (nested lists). 
Tabelas na HTML 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 43 
 
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: 
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 nas quais é 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. 
Comentário 
Ao final deste módulo teremos a oportunidade de praticarmos um pouco mais e vermos como esses atributos 
funcionam. 
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 já visto, chegou a hora de 
codificarmos. No editor de texto, comece criando uma nova seção no seu HTML e insira: 
1. uma tabela simples; 
2. uma tabela que contenha título; 
3. uma tabela com cabeçalho e rodapé; 
4. uma tabela com linhas e colunas expandidas; 
5. um exemplo completo; 
6. salve o arquivo e veja o resultado no navegador. 
Veja a demonstração: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 44 
 
 
Mídias na HTML 
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, são usadas as tags <video> e <audio>, veja: 
<video src= “http://www.youtube.com/watch?v=20SHvU@PKsM” controle></video> 
<audio src= “/audios/sample.ogg” controls autoplay loop></audio> 
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”. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 45 
 
Teoria na 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> 
4. Formulários em páginas Web 
Visão geral 
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. 
Exemplo 
Usamos formulários, por exemplo, quando: visitamos um site e desejamos solicitar uma informação adicional 
ou um serviço; nos cadastramos para receber e-mails com ofertas ou realizar uma reclamação. 
Ao longo deste módulo, veremos os elementos básicos necessários para a construção de formulários 
HTML. 
Estrutura básica do formulário 
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: 
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 formulário, limpar os 
dados etc. 
label Usado para definir um título, uma legenda, que descreva para que serve cada campo do formulário. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 46 
 
Conhecendo melhor os elementos e atributos do formulário 
Na próxima imagem temos o fragmento HTML correspondente a um formulário. Nela é possível ver 
as tags já mencionadas, assim como algumas tipificações nos campos e novos atributos. Falaremos sobre 
ambos a seguir: 
 
É 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 nesta tabela: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 47 
 
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> for 
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> type 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. 
 
Atributos do formulário 
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: 
1. Password 
• Mascara o textocom asteriscos. 
2. Hidden 
• Esconde o campo para não ser exibido no navegador. 
3. Checkbox 
• Usado para seleção de valor através de click/check. 
4. Radio 
• 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”. 
5. Submit 
• Associada à tag <button>, dispara o evento que envia/submete o formulário. 
6. Reset 
• Associada à tag <button>, dispara o evento que limpa os valores do formulário. 
7. 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, 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: 
 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 48 
 
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. 
required Determinar se um campo é obrigatório. Utilizado na validação dos dados de um formulário. 
autofocus Fixar o foco no campo. 
Utilizado quando desejamos que, ao carregar o formulário, 
um determinado campo seja focado. 
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 linguagem 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 formato esperado para um 
campo. 
 
Tipos 
Tipo Função Comentário 
tel Inserir números de telefone. 
Para uma melhor usabilidade, deve ser usado em conjunto com o atributo 
pattern. 
datetime 
Inserir datas com o fuso horário em 
UTC a partir de um calendário. 
 
date 
Inserir datas sem fuso horário a partir 
de um calendário. 
 
number Inserir números. 
Cria um componente diferente do imput normal, em que, por meio de 
setas, os números podem ser incrementados ou decrementados. 
 
Uma lista completa dos atributos e tipos pode ser encontrada nas referências mencionadas na seção 
Explore +. 
Validação de dados em formulários 
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. 
Exemplo 
Imagine que podemos permitir a inserção de uma data de nascimento através da digitação de valores ou a 
partir da seleção em um elemento do tipo calendário. Agora pense em quem vai receber as informações provenientes 
do formulário. Em um campo de texto simples, sem nenhum tipo de padrão, serão recebidas as mais variadas 
combinações de dados. 
Por exemplo: 01 de janeiro de 1980; 01/01/1980; 01011980 etc. Imaginando esse cenário, é possível entender 
a importância da validação das informações. 
Como funciona a validação? 
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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 49 
 
1. Que verifica se o dado inserido em um campo é consistente com o seu tipo e/ou padrão 
(pattern). 
2. Que verifica se um campo obrigatório foi preenchido. 
Exemplo 
Quanto à primeira validação, podemos citar novamente o elemento input do tipo “e-mail”. 
Um endereço de e-mail é um dado que possui uma formatação pré-definida: precisa ter o “@”; precisa ter a 
extensão de domínio “.com / .com.br” etc. 
Logo, declarar uma tag input com o type “e-mail” faz com que, naturalmente, seja validado o seu conteúdo. 
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”. 
Atenção! 
O comportamento padrão da HTML5 é validar os dados quando ocorre o envio do formulário. Entretanto, é 
possível desativar essa funcionalidade. Para isso, deve ser atribuído o atributo “novalidate” à tag <form>. 
Considerações finais 
Vimos os conceitos de linguagens de marcação, mais especificamente da HTML. Ao longo dos 
tópicos, além dos conceitos e de sua história, conhecemos a sua estrutura e os elementos que compõem a 
linguagem de marcação, como tags e atributos, e para melhor fixação de cada conteúdo, utilizamos 
exercícios práticos. 
Referências 
FREEMAN, E.; ROBSON, E. Use a Cabeça! Programação em HTML5: desenvolvendo aplicativos 
para web com Javacript. Rio de Janeiro: Alta Books, 2014. 
W3SCHOOLS. HTML Tutorial. 
NEWCOMB, S.; KIPP, N.; NEWCOMB, V. The “HyTime” Hypermedia/Time-Based Document 
Structuring Language. Communications of the ACM, n. 11, vol. 34, p. 67-83, 1991. 
Explore + 
Confira as indicações que separamos especialmente para você! 
Pesquise o texto: Estrutura de documentos e sites − MDN. 
Para conhecer as referências das tags HTML, leia: HTML Element Reference − W3Schools. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 50 
 
Linguagem de Marcação e Estilos – CSS 
Introdução 
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. 
No ambiente web, a HTML é a linguagem responsável pela estrutura do conteúdo de uma página. 
Embora também seja capaz de organizar o conteúdo visualmente, é função da CSS cuidar desse aspecto e 
de tudo relacionado ao estilo e layout da página. 
Com a CSS, é possível, por exemplo, alterar a forma e o posicionamento dos elementos, as cores, 
tipos e tamanhos de fontes, e muito mais. 
1. Fundamentos da CSS 
Visão geral 
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. Por meio dela, é possível, 
por exemplo,alterar a forma e o posicionamento dos elementos, as cores, os 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. 
 
Tendo o exemplo anterior como base, podemos perceber que, para aplicarmos um estilo utilizando 
CSS, são necessários: 
1. O seletor: nesse caso, a tag HTML < p >. 
2. Ao menos uma propriedade: a cor de fundo (background-color). 
3. 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 com relação à sintaxe: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 51 
 
1. A propriedade e seu valor devem ser separados por dois pontos “:”. 
2. Uma declaração deve ser separada da declaração subsequente com a utilização do ponto e vírgula “;”. 
3. O conjunto de estilos aplicados a um seletor é envolvido por chaves “{“ e “}”. 
Vamos ver a seguir um exemplo de duas propriedades atribuídas à tag < p > e o resultado dessas 
declarações no navegador. 
 
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. Existem 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 
seletor de identificação é definido com o atributo id. 
Atenção! 
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, ajudem 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. Em seguida, 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 é 
representado por um “.”, sendo seguidos de seus nomes. Além disso, foram apresentadas duas formas de 
sintaxe que produzirão o mesmo efeito. A diferença entre ambas é que, na segunda, o nome da tag à qual 
a identificação ou classe foi atribuída precede o respectivo sinal. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 52 
 
 
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 verifique 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 53 
 
[type=’text’] - seleciona todos os elementos do tipo text. 
Os seletores de atributo são flexíveis, permitindo inúmeras combinações. Por exemplo, é possível 
usá-los para selecionar 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. 
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). 
 
Para uma melhor compreensão quanto à descendência e ao parentesco mencionados, 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. 
 
Propriedades CSS 
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. 
 
 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 54 
 
Propriedade Função 
Background 
Estabiliza 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. 
Série de propriedades usada 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 Define a altura de um elemento. 
List-style, List-style-image etc. Propriedades usadas 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. 
Text-... 
Muitas propriedades controlam o comportamento do conteúdo textual de um 
elemento, como alinhamento (justificado, centralizado etc.), aparência (sublinhado 
etc.) etc. 
Width Define a largura de um elemento. 
Z-index 
Define a profundidade de um elemento – usado, por exemplo, para sobreposição de 
elementos. 
 
CSS e HTML 
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.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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 55 
 
 
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. Por meio dela, é possível aplicar estilos no 
âmbito de escopo, ou seja, específicos para as seções da página em que 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 >. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 56 
 
 
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 
A CSS permite que a aplicação de propriedades a elementos pais seja herdada pelos seus elementos 
filhos. Tomemos como exemplo o código abaixo. 
 
O resultado do fragmento de código 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 herdar 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 57 
 
 
Perceba que o fragmento da figura exemplo de herança em CSS 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 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, ou seja, 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 esta 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 esta ordem: 
1. Seletores de elemento (utilização apenas do nome da tag) são os de menor precedência, por 
serem muito genéricos. 
2. Seletores de classe têm mais precedência que os de elemento. 
3. Seletores de identificação têm mais precedência que os de classe. 
Veja este novo exemplo: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 58 
 
 
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: 
1. Melhorias nos seletores, com novas possibilidades de seleção: primeiro e/ou último elemento, 
elementos pares ou ímpares etc. 
2. Efeito gradiente e de sombra em textos e elementos. 
3. Bordas arredondadas. 
4. Manipulação de opacidade. 
5. Controle de rotação e perspectiva. 
6. Animações. 
2. CSS3 
Recursos de cores 
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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 59 
 
1. Com palavras-chave, nas quais podem ser usados os nomes das cores (seguindo as 
definidas pela especificação CSS) ou a notação hexadecimal. Por exemplo: blue, red, 
#FFFFFF etc. 
2. Com um sistema de coordenada cúbica RGB, com as notações rgb() e rgba(). 
3. Com um sistema de coordena cilíndrica HSL, com as notações hsl() e hsla(). 
Propriedades de cor 
Essas propriedades se referem a quais elementos podemos definir cores. 
Veja na tabela a seguir as principais propriedades relacionadas à cor, bem como os elementos aos 
quais podem ser aplicadas. 
Propriedade Serve para definir Onde pode ser utilizada 
color Cor de textos 
Elementos que contenham texto, como <h1> ... <h6>, <p>, <header>, 
<section> etc. 
background-color Cor de fundo de elementos Aplica-se a qualquer elemento HTML. 
border-color Cor da borda Aplica-se a qualquer elemento HTML. 
outline-color Cor da borda externa Aplica-se a qualquer elemento HTML. 
 
Recursos de textos e fontes 
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. 
Veja a seguir algumas propriedades CSS que alteram esse comportamento padrão. 
O layout do texto 
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. 
Vamos conhecer, a seguir, 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 container no qual 
está inserido. 
Tal propriedade pode assumir quatro valores: left, right, center e justify. Como os nomes indicam, 
essas propriedades alinham o texto à esquerda, à direita, ao centro ou de forma justificada. 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 60 
 
A maneira mais recomendada para declarar o espaçamento entre linhas é utilizando o valor em 
número. Desse modo, o espaçamento será o resultado da multiplicação do valor definido pelo tamanho da 
fonte. 
Exemplo 
Line-height: 1.5; font-size: 12px; onde valor 1.5 será multiplicado pelovalor da propriedade font-size, resultando 
no valor de 18px de espaçamento. 
Espaçamento entre letras e palavras 
As propriedades letter-spacing e word-spacing permitem alterar o espaçamento entre letras e/ou 
palavras. 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 essa propriedade, é 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 
determinada fonte não esteja disponível no dispositivo cliente, a próxima fonte definida será usada, e assim 
sucessivamente. Caso nenhuma das fontes definidas esteja disponível 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. Essas fontes e algumas outras formam o conjunto chamado 
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, além de porcentagem 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 de 100 a 900. 
Existem boas práticas e cuidados a serem levados em consideração quando se trabalha com 
estilização de fontes usando CSS. Um desses cuidados diz respeito ao controle sobre a possível degradação 
que pode ocorrer na página. Portanto, deve-se tomar os devidos cuidados optando pela utilização de uma 
lista de fontes e mantendo por último as fontes genéricas, como Serif, Sans Serif e Monospace. Desse modo, 
haverá maior garantia e controle sobre o que o usuário verá como resultado. 
Web fontes 
As Web Fontes são um importante recurso em termos de tipografia. Se antes a sua estilização ficava 
restrita àquelas disponí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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 61 
 
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 na qual o arquivo da fonte se encontra. Vamos ver a seguir a 
fonte Awesome sendo declarada. 
 
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á 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 web fontes. 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 de web fontes. 
Tipo 
Navegadores x Versões (iniciais com suporte) 
Google Chrome Firefox Internet Explorer / Edge Safari Opera 
TTF/OTF 4.0 3.5 9.0 3.1 10.0 
WOFF 5.0 3.6 9.0 5.1 11.1 
WOFF2 36.0 35.0 -- -- 26.0 
SVG 4.0 -- -- 3.2 9.0 
EOT -- -- 6.0 -- -- 
 
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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 62 
 
Atenção! 
Considere sempre utilizar diferentes fontes para oferecer uma melhor experiência aos usuários. 
Abreviaturas ou atalhos 
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: 
 
3. Conceitos avançados de CSS 
Conceitos de 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 Pseudoelementos e Posicionamento. 
Os elementos de uma página web são representados por uma caixa que possui o formato de um 
retângulo. Uma boa analogia aqui seria compararmos a marcação HTML a brinquedos de bloco. 
Nos brinquedos de bloco, por exemplo, há peças de diferentes tamanhos, larguras, alturas, cores e 
formatos. Tendo em mãos tais elementos, é nosso papel montá-los, encaixá-los de forma harmoniosa para, 
ao final, obtermos o resultado esperado. 
Para chegar a esse resultado, é importante entendermos o comportamento, a composição e as 
características de cada bloco, assim como os estilos que podem receber. 
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). 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 63 
 
 
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 Componentes do Box Model, 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 
esquerdada 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 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-se ao 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 64 
 
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. 
Conceitos de pseudoclasses e pseudoelementos 
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). 
Um elemento filho pode, ainda, herdar as propriedades de um elemento pai. Todos esses modos de 
definir estilo são bastante abrangentes. Entretanto, existem algumas formas especiais e muito úteis para se 
aplicar estilos: as pseudoclasses e os pseudoelementos. 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 Seleciona todos os links ativos. 
:checked input:checked Seleciona todos os campos input checados. 
:first-child li:first-child Seleciona todo primeiro item de lista. 
:last-child li:last-child Seleciona todo último item de lista. 
:hover div:hover Seleciona todas as divs no evento mouseover. 
 
Pseudoelementos 
Os pseudoelementos 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 pseudoelemento. Em ambas, é definido que a primeira letra de texto em um parágrafo 
tenha tamanho e cor diferentes do restante do texto. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 65 
 
 
 
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 pseudoelemento first-letter. 
A utilização do pseudoelemento diminui a quantidade de código, tornando sua compreensão mais clara. 
Cabe destacar outro ponto do exemplo relacionado à sintaxe dos pseudoelementos: neles são 
usados dois pontos duplos (ou dobrados) para a declaração. Esse uso proposital é para diferenciá-los das 
pseudoclasses. 
Pseudo-elemento Exemplo Para que serve 
::after img::after Inserir conteúdo após o elemento indicado. 
::before h1::before Inserir 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. 
 
Posicionamento 
Para tratarmos de posicionamento em CSS, precisaremos recorrer a alguns conceitos já vistos – 
sobretudo aos 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, podem ser modificados por CSS, onde as tais diferenças são resolvidas e, de fato, 
um padrão de comportamento pode ser definido. 
Conceitos de layout 
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 layout CSS em colunas, logo a seguir, a estrutura em colunas de uma página. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 66 
 
 
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 layout CSS em 
colunas e posicionar os elementos na página, precisaremos utilizar CSS. 
A propriedade position 
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. A seguir, 
apresentaremos cada uma dessas cinco propriedades. 
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 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 67 
 
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, independentemente 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 
no qual o elemento será fixado. Esse elemento é posicionado em relaçãoà viewport/janela do navegador. 
Com isso, ele “flutuará” sobre os demais conteúdos da página, ficando fixo onde foi colocado e não 
ocupando, assim, a posição original na qual foi declarado no HTML. 
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 como 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. 
4. Frameworks CSS 
Visão geral 
Frameworks e 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 podem, inclusive, se 
sobrepor 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 sites 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. 
Frameworks podem ser definidos como um conjunto de componentes reutilizáveis que permitem a 
otimização do processo de programação. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 68 
 
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. 
Frameworks 
Bootstrap 
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 – cujo 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. Esses breakpoints 
são: 
• Extra small 
• Small 
• Medium 
• Large 
• 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. 
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 é por meio 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 69 
 
Por último, é importante ter cuidado com as versões do framework em termos de compatibilidade, 
tanto em relação a bibliotecas de terceiros quanto em relação a funcionalidades em desuso/depreciadas. 
Comentário 
O Bootstrap possui inúmeras classes predefinidas para as mais diversas necessidades. Para utilizá-las, é 
preciso combiná-las com uma marcação HTML predefinida, conforme documentação oficial. Por exemplo: há uma 
classe que pode ser aplicada em tabelas para criar o efeito zebra (alternância de cores entre as linhas da tabela), a 
“.table-striped”. Para usar essa classe, basta incluir seu nome no atributo class de uma tabela. 
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 de 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. 
Comentário 
Em termos de recursos extras, destaca-se nesse framework a existência de recursos específicos para a criação 
de HTML responsivo para e-mail. Trata-se do Foundation for Emails. 
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 
open source. 
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 à 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, sendo os mais conhecidos 
os seguintes: 
Pure 
Considerado o framework mais leve, foi desenvolvido pela Yahoo. 
MaterializeCSS 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 70 
 
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á prós e contras em cada um deles, como tamanho do framework e seus 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, é recomendável, sempre que possível, utilizar um framework. Escolha aquele que melhor 
se adequar à sua necessidade. Na dúvida, escolha o mais utilizado – afinal 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 seguir, 
listaremos algumas vantagens, bem como desvantagens, que são citadas de maneira mais comumente. 
Como vantagens, podemos destacar: 
1. Padronização do código 
✓ Muito válido, sobretudo quando se trabalha em equipe. 
2. Economia de tempo 
✓ Não é preciso criar todo o código CSS do zero. 
3. Seguimento de padrões 
✓ Os frameworks estão sempre antenados às especificações e recomendações oficiais. 
4. Compatibilidade entre navegadores 
✓ Funcionam em diferentes navegadores. 
A seguir, listaremos algumas desvantagens: 
1. Tamanho/peso do framework 
✓ Pode impactar no carregamento da página. 
2. 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. 
3. Curva de aprendizado 
✓ Aprender a utilizar adequadamente um framework pode levar algum tempo. 
4. 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 limitar 
o seu entendimento e aprendizado. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 71 
 
Considerações finais 
Este estudo nos apresentou a CSS, linguagem de estilo responsável pela camada visual em uma 
página web e pela consequente separação entre apresentação e conteúdo. Ao longo dos tópicos, foram 
apresentadas a sua definição, sua sintaxe, seus elementos, suas propriedades e formas de integração com 
HTML. Alguns aspectos foram abordados de maneira mais aprofundada, como as propriedades 
relacionadas a textos e às fontes, as pseudoclasses, os pseudoelementos e os conceitos de box model e 
de posicionamento. Ao final, um importante recurso foi descrito – os frameworks CSS. Toda a abordagem 
teórica foi permeada por exemplos e alguns exercícios a fim de estimular a aplicação prática e uma melhor 
assimilação dos conteúdos apresentados. 
Referências 
Meyer, E.; WEYL, E. CSS: The Definitive Guide. [s.l.]: O’Reilly Media, Inc., 2017. 
Explore + 
Para aprofundar seus conhecimentos sobre o Sistema de Grids, recomendamos a leitura do livro 
CSS: The Definitive Guide, de Eric Meyer e Estelle Weyl. Indicamos também a página da W3Schools, que 
disponibiliza inúmeros tutoriais sobre os mais diversos assuntos relacionados ao desenvolvimento web. 
Busque por: 
CSS Pseudoclasses; 
Google Fonts; 
CSS RGB Color; 
CSS HSL Color. 
Indicamos também uma galeria de web fontes da Google com suporte em todos os navegadores, 
chamada de Google Fonts. Mozilla também disponibiliza diversos tutoriais e artigos de suporte ao 
desenvolvimento web. Sugerimos a leitura de: 
Fundamental text and font styling; 
CSS Media Queries. 
Se quiser praticar a elaboração de códigos e visualizar a renderização no navegador, indicamos dois 
recursos on-line: o Codepen e o JSFiddle. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 72 
 
Linguagem Javascript 
Introdução 
Segundo Flanagan (2011), JavaScript é a linguagem de programação da Web mais utilizada pelos 
sites. Além disso, todos os navegadores - estejam eles em desktops, jogos, consoles, tablets ou 
smartphones - incluem interpretadores JavaScript, fazendo dele a linguagem de programação mais 
onipresente da história. 
Ao longo deste tema, veremos os conceitos básicos e as principais funcionalidades do JavaScript. 
Além disso, aprenderemos a integrá-lo às páginas HTML e a utilizá-lo - desde tarefas básicas, como 
manipular a interface DOM, a tarefas mais complexas, como transmitir dados entre o cliente e o servidor de 
forma assíncrona. 
1. Conceitos e sintaxe do Javascript 
Visão geral 
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. 
Atenção! 
Embora possuam nomes parecidos, as linguagens de programação JavaScript e Java não têm nenhuma 
relação. 
Árvore DOM 
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 (Document Object Model) 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. Por meio 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, ficaremos restritos à manipulação do DOM por 
meio do JavaScript. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 73 
 
A imagem a seguir ilustra a árvore DOM e seus elementos: 
 
Á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 eles 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 
quese perderão quando ele sair da página. 
Dica 
Com JavaScript, é possível até mesmo manipular os estilos de um documento, de forma similar ao que é feito 
via CSS. 
JavaScript e HTML 
Incorporando o JavaScript à HTML 
A incorporação do JavaScript a páginas HTML pode ser feita de duas formas: 
1. Códigos no corpo da página 
Incluindo os códigos diretamente no corpo da página − dentro da seção <head> e da tag <script>. 
2. Arquivos externos 
Mediante 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>. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 74 
 
Deve-se tomar cuidado para não mover códigos ou scripts incluídos que sejam necessários à correta 
visualização ou aos comportamentos da página, já que os códigos movidos para o final só serão lidos e 
interpretados após todo o restante da página. 
Veja a seguir as duas formas citadas de inserção: 
<head> 
 <meta charset="utf-8"> 
 <title>Incorporando Javascript em Páginas HTML</title> 
 <!-- Incorporando um arquivo .js externo --> 
 <script src="script.js"></script> 
</head> 
<body> 
 <div id="exibe_resultado"> Resultado da Multiplicação: </div> 
</body> 
 <!-- Incorporando códigos Javascript diretamente na página --> 
 <script type="text/javascript"> 
 //Com duas barras criamos um comentário de linha em Javascript 
 //Comentários de mais de uma linha podem ser feitos dentro de /* */ 
 
//Declarando uma variável cujo nome é 'variavel' 
 var variavel; 
 
// Atribuindo valores e aplicando uma operação matemática em uma variável 
 variavel = 3 + 3; 
 
 /* Utilizando a função nativa 'alert' para exibir uma caixa de 
 diálogo na tela cujo conteúdo será o valor da variável 'variavel' */ 
 alert(variavel); 
 
// chamando a função 'multiplique' passando dois valores - 10 e 50 
 var resultadoMultiplicacao = multiplique(10, 50); 
 
//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 
 var divLocal = document.getElementById('exibe_resultado'); 
 
/* 
 Neste ponto a variavel divLocal é um objeto que representa a div declarada no HTML. 
Sendo um objeto é possível acessar seus atributos, como innerHTML, precedido do nome do 
objeto seguido de um '.' 
 */ 
 divLocal.innerHTML += resultadoMultiplicacao; 
 
 //Definição da função 'multiplique' que recebe dois parâmetros - numero1 e numero2 
 function multiplique(numero1, numero2){ 
 
 /* 
Declarando uma nova variável que guardará o resultado da operação de 
multiplicação; 
 Iniciando a variável com o valor de 0. 
 */ 
 var resultado = 0; 
 
//Atribuindo à variável 'resultado' o valor resutante da multiplicação dos 2 
parâmetros recebidos 
 resultado = numero1 * numero2; 
 
 //Retornando (devolvendo) o valor da variável resultado 
 return resultado; 
 
 } 
 </script> 
</html> 
Sintaxe e conceitos 
Sintaxe JavaScript 
O código anterior 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 on-line, como o CodePen ou JSFiddle. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 75 
 
Serão utilizados os números das linhas do editor, vistos na imagem anterior, para facilitar a 
localização dos fragmentos e elementos abordados. 
Dica 
Existem duas formas de inserir comentários no código JavaScript: para os comentários de apenas uma linha, 
utilizam-se as duas barras “//”. Para os de múltiplas linhas, utiliza-se “/*” e “*/”. Veja, por exemplo, as linhas 14, 15, 21 
e 22. 
A seguir vamos conhecer a sintaxe de Javascript, na qual serão utilizados os números das linhas do 
editor do código anteriomente mencionado para facilitar a localização dos fragmentos e elementos 
abordados. 
 
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. 
Na linha 25, a palavra composta “resultado multiplicação” foi transformada em uma variável por meio 
do padrão camelcase, ou seja, a segunda palavra (e demais palavras, quando for o caso) é iniciada com a 
primeira letra em maiúsculo. 
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. 
Exemplo 
Um número 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 a “variável”. 
Ao atribuirmos uma string a uma variável, obtemos: 
var nomeDisciplina = “Javascript” = 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 76 
 
Outros elementos 
Ao longo do código apresentado anteriormente, foram utilizados outros elementos. Na tabela a 
seguir, cada um deles será descrito: 
Elemento Para que serve 
Linha do 
código 
alert 
Exibir uma caixa de diálogo no navegador. Existem outras funções nativas de 
diálogo, inclusive para receber input de valores. 
23 
document.getElementById 
Referenciar um elemento da árvore DOM através do valor do seu atributo “id”. 
Pesquise também sobre document.getElementByClassName. 
28 
innerHTML 
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 
function 
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 
return 
Palavra reservada, utilizada para indicar o conteúdo a ser retornado pela função. 
Nem todas as funções retornam valores. Logo, essa instrução só deve ser utilizada 
por funções que retornem algum resultado. 
48 
 
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. 
• 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 dele, o “onload”, e modificar seu código para utilizá-lo. 
black 
Teoria na prática 
Ao longo deste tema, os exercícios práticos serão fundamentais para a fixação do conteúdo visto. 
Partindo do código utilizado no tópico “Incorporando o JavaScript à HTML”, modifique-o da seguinte forma: 
Peça ao usuário para inserir dois números inteiros positivos; 
Armazene os números inseridos pelo usuário em duas variáveis; 
Crie uma função para dividir números inteiros; 
Exiba na tela uma caixa de diálogo com o resultado da divisão precedido pela frase “O resultado da 
divisão é igual a:”. 
Caso queira ir além, crie uma calculadora para realizar as quatro operações matemáticas. Nesse 
caso, você precisará pedir ao usuário que escolha a operação a ser realizada, além dos números de entrada. 
<!doctype html> 
<html lang="pt-BR"> 
<head> 
 <meta charset="utf-8"> 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 77 
 
 <title>Praticando Javascript - Exercício 1</title> 
</head> 
<body> 
 
</body> 
 
 <script type="text/javascript"> 
 
 var numero1 = prompt("Insira o primeiro número: "); 
 var numero2 = prompt("Insira o segundo número: "); 
 
 var resultadoDivisao = divida(numero1, numero2); 
 
 alert('O resultado da divisão é igual a: ' + resultadoDivisao); 
 
 function divida(numero1, numero2){ 
 
 var resultado = 0; 
 
 resultado = numero1 / numero2; 
 
 return resultado; 
 
 } 
 </script> 
</html> 
2. Estruturas de decisão e de repetição 
Estruturas condicionais 
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 que vamos a seguir: 
<head> 
 <meta charset="utf-8"> 
 <title>Incorporando Javascript em Páginas HTML</title> 
 <!-- Incorporando um arquivo .js externo --> 
 <script src="script.js"></script> 
</head> 
<body> 
 <div id="exibe_resultado"> Resultado da Multiplicação: </div> 
</body> 
 <!-- Incorporando códigos Javascript diretamente na página --> 
 <script type="text/javascript"> 
 //Com duas barras criamos um comentário de linha em Javascript 
 //Comentários de mais de uma linha podem ser feitos dentro de /* */ 
 
//Declarando uma variável cujo nome é 'variavel' 
 var variavel; 
 
// Atribuindo valores e aplicando uma operação matemática em uma variável 
 variavel = 3 + 3; 
 
 /* Utilizando a função nativa 'alert' para exibir uma caixa de 
 diálogo na tela cujo conteúdo será o valor da variável 'variavel' */ 
 alert(variavel); 
 
// chamando a função 'multiplique' passando dois valores - 10 e 50 
 var resultadoMultiplicacao = multiplique(10, 50); 
 
//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 
 var divLocal = document.getElementById('exibe_resultado'); 
 
/* 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 78 
 
 Neste ponto a variavel divLocal é um objeto que representa a div declarada no HTML. 
Sendo um objeto é possível acessar seus atributos, como innerHTML, precedido do nome do 
objeto seguido de um '.' 
 */ 
 divLocal.innerHTML += resultadoMultiplicacao; 
 
 //Definição da função 'multiplique' que recebe dois parâmetros - numero1 e numero2 
 function multiplique(numero1, numero2){ 
 
 /* 
Declarando uma nova variável que guardará o resultado da operação de 
multiplicação; 
 Iniciando a variável com o valor de 0. 
 */ 
 var resultado = 0; 
 
//Atribuindo à variável 'resultado' o valor resutante da multiplicação dos 2 
parâmetros recebidos 
 resultado = numero1 * numero2; 
 
 //Retornando (devolvendo) o valor da variável resultado 
 return resultado; 
 
 } 
 </script> 
</html> 
As orientações do programa dizem que deve ser realizada a divisão de dois números inteiros 
positivos. 
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, se o usuário inserir um número inteiro 
não positivo, avisar que o número não é válido, solicitando que seja inserido 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. Perceba que a condição cria um fluxo, um novo ramo, em que 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 imagem a seguir. Nela, são 
apresentados os passos correspondentes ao nosso exercício, separando as ações do programa e 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. 
Dica 
O fluxograma de exemplo foi simplificado para fornecer mais detalhes. Logo, a respectiva notação padrão não 
foi utilizada em sua confecção. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 79 
 
 
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" como 
veremos 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 80 
 
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: 
• É iniciada com a palavra reservada “if”. 
• É inserida, dentro de parênteses, a condição (ou condições, como veremos mais adiante). 
• É 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: 
if (condição1 && condição2){ 
 instrução1; 
 instrução2; 
} 
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: 
if (condição1 || condição2){ 
 instrução1; 
 instrução2; 
} 
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 em que todas precisam ser verdadeiras, 
separadas por “&&”, quanto paraa forma em que apenas uma deve ser verdadeira, separadas por “||”. Além 
disso, é possível combinar os dois casos na mesma verificação. Veja o exemplo: 
if ((condição1 && condição2) || condição3){ 
 instrução1; 
 instrução2; 
} 
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. 
Como verificar se uma condição é falsa (ou não verdadeira)? 
Veremos a seguir: 
if (!condição1){ 
 instrução1; 
 instrução2; 
} 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 81 
 
else 
A instrução "else” acompanha a instrução "if". 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. 
É importante mencionar que no último fragmento foi utilizado, de modo proposital, português-
estruturado nas condições e instruções. Isso porque, mais adiante, você mesmo codificará esse "if/else" em 
JavaScript. 
else if 
Vejamos o exemplo a seguir: 
if (numero1 < 0){ 
 instrução1; 
 }else if(numero == 0){ 
 instrução2; 
 }else{ 
 instrução3; 
} 
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, a instrução "else" será executada obrigatoriamente ao final. 
Otimize os códigos presentes nos emuladores anteriores, usando o else if. Como exemplo, 
apresentamos o código do primeiro emulador modificado, no qual as 4 estruturas de decisão com if foram 
transformadas em uma única estrutura de decisão. 
Note que antes eram geradas duas saídas redundantes (“a é maior que b” e “b é menor que a”), pois 
tratavam-se de 4 estruturas independentes e por isso todas elas eram avaliadas. 
Isso não ocorrerá mais com o uso de uma estrutura de decisão composta de if e else if, pois quando 
a primeira condição verdadeira for encontrada (“a é maior que b”), nenhuma das outras condições será 
avaliada: 
var a = 10; 
var b = 3; 
console.log ("if com uma única condição:"); 
if (a > b){ 
 console.log("a é maior que b"); 
} else if (a == b){ 
 console.log("a é igual a b"); 
} else if (a < b){ 
 console.log("a é menor que b"); 
} else if (b < a){ 
 console.log("b é menor que a"); 
} 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 82 
 
switch 
A instrução "switch" é bastante útil quando uma série de condições precisa ser verificada. É bastante 
similar à "else if". Vejamos: 
switch(numero1){ 
 case 0: 
 instrução1; 
 break; 
 case 1: 
 instrução2; 
 break; 
 default: 
 instrução3; 
 break; 
 } 
De maneira geral, o switch é usado quando temos uma série de condições, nas quais diversos 
valores para a mesma variável são avaliados. A seguir, detalhamos o código anterior: 
• No código anterior, 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. 
• A seguir, 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. 
Laços: estruturas de repetição 
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 no 
emulador seguinte. Após ler o código e os comentários explicativos, execute-o e veja o resultado. 
for 
Sobre a sintaxe apresentada no emulado a seguir, 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). 
var contador; 
for (contador = 0; contador < 10; contador ++){ 
 //As instruções incluídas aqui serão executadas 10 vezes 
 /* 
 Será exibido o valor da variável contador 10 vezes 
 no Console. O primeiro número será 0 e o último será 9 
 (repare que começamos com a nossa variável contador 
 recebendo o número 0 e sendo incrementada 
 até ser menor do que 10, ou seja, até o número 9. 
 */ 
 console.log(contador); 
} 
Algumas variações possíveis nesse código seriam iniciar o contador em 1, por exemplo (o mais usual, 
em programação, é iniciarmos nossos índices em zero), ou irmos até o número 10. Ou seja, no lugar do 
sinal de menor, utilizaríamos o “menor igual”, dessa forma: “<= 10”. Teste no emulador anterior essas 
variações e veja as diferenças. 
A seguir, veremos as outras estruturas de repetição, além do “for”, presentes na linguagem 
JavaScript. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 83 
 
while 
Veja o fragmento a seguir para entender o comportamento do laço “while” (enquanto): 
var contador = 0; 
while (contador < 10){ 
 console.log(contador); 
 contador++; 
} 
Esse código tem o mesmo resultado que o visto no exemplo utilizando o laço “for”. Sua sintaxe é 
simples: “Enquanto uma condição fornecida for verdadeira, faça isso." Clique em Executar no emulador 
acima e verifique! 
do/while 
Embora semelhante ao laço "while", temos uma diferença fundamental entre eles: 
1. “do/while” 
A condição é testada no final. 
2. “while” 
A condição é testada no início. 
Com isso, pelo menos uma vez a instrução (ou as instruções) do laço “do/while” será, 
obrigatoriamente, executada. Vejamos o exemplo: 
var contador = 0; 
do{ 
 console.log(contador); 
 contador += 1; 
} while (contador < 10); 
Execute o código no emulador anterior e veja que o resultado é exatamente o mesmo do código 
usando “while”. 
Agora, modifique a última linha do código do laço “do/while” para: 
} while (contador < 0); 
Execute novamente o código e perceba que apesar da condição nunca ter sido verdadeira, o bloco 
de instruções do laço foi executado uma vez. Essa é a diferença entre o laço “do/while” e o laço “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 emulador seguinte serão apresentados dois fragmentos de código 
para uma mesma função − um utilizando “for” e o outro, “for/in”. 
var frutas = ['Laranja', 'Uva', 'Pera']; 
 
/*Imprimindo na caixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for'*/ 
for(var i = 0; i < frutas.length; i++){ 
 console.log('Nome da Fruta contida no Array: ' + frutas[i]); 
} 
 
/*Imprimindo nacaixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for/in'*/ 
for(var fruta in frutas){ 
 console.log('Nome da Fruta contida no Array: ' + frutas[fruta]); 
} 
Analisando o código, é possível notar as diferenças de sintaxe entre os laços “for” e “for/in”. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 84 
 
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”). 
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”. 
3. Vetores 
Visão geral 
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: 
1. Um vetor é um array unidimensional. 
2. 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. 
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). 
Os vetores também são vistos 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 e criação de vetores 
Composição dos vetores 
Um vetor é composto por uma coleção de valores, e 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: 
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 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: 
var alunos = []; //array vazio 
var alunos = ['Alex', 'Anna', 'João']; // array de strings 
var notas = [10.0, 9.5, 9.5]; // array de números decimais 
var mistura = ['Um', 2, 3, 'Quatro']; //array de diversos tipos de dados 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 85 
 
Outra forma de criação de vetores em JavaScript é usando o construtor (conceito relacionado à 
programação orientada a objetos) Array. Vejamos o exemplo: 
var alunos = new Array(); 
var alunos = new Array('Alex', 'Anna', 'João'); 
Manipulação de vetores 
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: 
var alunos = ['Alex', 'Anna', 'João']; // array de strings 
alert(alunos[0]); // exibirá “Alex” na caixa de diálogo 
Observe e entenda o seguinte: 
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 no emulador de código do tópico for/in no módulo anterior. 
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 nos auxilia nessa tarefa. Sua sintaxe é: 
nome_do_array.push(valor) 
Usando nosso array de exemplo, poderíamos adicionar um novo elemento desta forma: 
alunos.push('Helena'); 
É possível, ainda, inserir múltiplos valores utilizando push: 
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: 
alunos[alunos.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,...) 
Em que: 
‘posição’ é o índice onde o novo elemento será incluído; 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 86 
 
‘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: 
var alunos = ['Alex', 'Anna', 'João']; 
alunos.splice(3,0,'Helena'); 
console.log(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: 
var alunos = ['Alex', 'Anna', 'João']; 
alunos.splice(1,1,'Helena'); 
Console.log(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: 
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. 
• Imprima (utilizando console.log, 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 removerelementos do vetor 
A linguagem JavaScript possui, além de "delete", outros 3 métodos para remoção de elementos, 
conforme veremos a seguir: 
1. pop 
• Este método, que não recebe parâmetros, remove um elemento do final do array, atualizando seu 
tamanho. Sua sintaxe é: 
frutas.pop(); 
2. shift 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 87 
 
• 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(); 
3. 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); 
console.log(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 do array utilizando a propriedade length. Isso fará com que ele seja reduzido ao novo tamanho 
informado. 
var primos = [2,3,5,7,11,13,17]; 
alert(primos.length); //imprimirá 7 
primos.length = 4; 
 
Nesse exemplo, ao definirmos o tamanho do array como 4, ele será reduzido, sendo mantidos os 
elementos do índice 0 ao 3 e excluídos os demais. 
Existe, ainda, outro método para a remoção de elementos de um array: filter. Entretanto, ele não 
modifica o vetor original, mas cria um novo a partir dele. Esse método utiliza uma sintaxe mais complexa, 
assim como conceitos e funções de call-back que fogem ao escopo deste tema. 
4. Ajax e JSON 
Visão geral 
Requisições síncronas e assíncronas 
O conceito de requisição, no ambiente Web, diz respeito às informações solicitadas ou submetidas 
no lado cliente − por meio 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: 
1. Requisições síncronas 
• Quando realizadas, 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. 
2. Requisições assíncronas 
• Quando realizadas, não são dotadas de sincronismo. Logo, várias requisições podem ser realizadas 
em simultâneo, independentemente de ter havido resposta do servidor às solicitações anteriores. 
Em comparação com as requisições síncronas, deve-se dar preferência à utilização das assíncronas. 
Isso porque estas não apresentam os problemas de desempenho e congelamento do fluxo da aplicação, 
naturais das síncronas. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 88 
 
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. 
Requisições assíncronas em JavaScript 
AJAX - Requisições assíncronas em JavaScript 
Em JavaScript, quando falamos de requisições assíncronas, naturalmente falamos de AJAX 
(Asynchronous JavaScript and XML). 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 por meio de um objeto do tipo ActiveX. 
Posteriormente, outros fabricantes fizeram suas implementações, dando origem ao XMLHttpRequest, que 
se tornou o padrão atual. 
Versões antigas do Internet Explorer só possuem suporte ao ActiveX. 
O XMLHttpRequest possui alguns métodos e propriedades. Alguns deles serão descritos após 
vermos um exemplo simples de sua utilização: 
<!doctype html> 
<html lang="pt-BR"> 
<head> 
 <meta charset="utf-8"> 
 <title>Requisição XMLHttpRequest</title> 
</head> 
<body> 
 <h1>Imagens Aleatórios de Cachorros</h1> 
 <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> 
 
 <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" /> 
 <br/> 
 <button onclick="carregarImagens()">Carregar Imagens</button> 
</body> 
 <script type="text/javascript"> 
 
 function carregarImagens(){ 
 
 var xmlHttpRequest = new XMLHttpRequest(); 
 var url = "https://dog.ceo/api/breeds/image/random" 
 
 xmlHttpRequest.open("GET", url, true); 
 
 xmlHttpRequest.onreadystatechange = function() { 
 if (xmlHttpRequest.readyState == 3) { 
 console.log('Carregando o conteúdo'); 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 89 
 
 } 
 if (xmlHttpRequest.readyState == 4) { 
 
 var jsonResponse = JSON.parse(xmlHttpRequest.responseText); 
 
 console.log('Requisição Finalizada'); 
 console.log('Resultado da Requisição: ' + jsonResponse); 
 console.log('Resultado da Requisição: ' + jsonResponse.message); 
 
 var imgDog = document.getElementById("img_dog"); 
 imgDog.src = jsonResponse.message; 
 } 
 }; 
 
 xmlHttpRequest.send(null); 
 
 } 
 </script> 
</html> 
 
O código anterior contém tanto funcionalidades JavaScript vistas neste conteúdo 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 visto 
anteriormente, observe: 
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 e 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; 
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 
O código anterior mostra um exemplo simples do que é possível fazer utilizando AJAX. Além disso, 
apenas algumas propriedades e métodos foram vistos. 
Saiba mais 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 90 
 
Na seção “Explore +”, estão disponíveis sugestões de conteúdo que permitirão um aprofundamento nesse 
tema. É recomendável a leitura desse material, assim como a implementação e até mesmo modificação do código 
anterior para uma melhor assimilação do conteúdo. 
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: 
1. O uso de promise; 
2. O fato de poder ser utilizado em outras tecnologias, como service workers, por exemplo. 
O código a seguir apresenta o mesmo exemplo utilizado no tópico XMLHttpRequest, mas substituindo 
o XMLHttpRequest pela API Fetch. A seguir, alguns métodos e propriedades serão apresentados: 
<!doctype html> 
<html lang="pt-BR"> 
<head> 
 <meta charset="utf-8"> 
 <title>Requisição XMLHttpRequest</title> 
</head> 
<body> 
 <h1>Imagens Aleatórios de Cachorros</h1> 
 <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> 
 
 <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" /> 
 <br/> 
 <button onclick="carregarImagens()">Carregar Imagens</button> 
</body> 
 <script type="text/javascript"> 
 
 function carregarImagens(){ 
 
 var url = "https://dog.ceo/api/breeds/image/random" 
 fetch(url, { 
 method: 'get' 
 }) 
 .then(function(response) { 
 response.json().then(function(data){ 
 console.log('Resultado da Requisição: ' + data.message); 
 
 var imgDog = document.getElementById("img_dog"); 
 imgDog.src = data.message; 
 }); 
 }) 
 .catch(function(err) { 
 console.error('O seguinte erro ocorreu durante a requisição: ' + err); 
 }); 
 
 } 
 </script> 
</html> 
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 20; 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 91 
 
Ainda em relação à sintaxe, merece destaque a forma, própria, como a API Fetch trata a requisição 
(request) e o seu retorno (response): quando o método fetch é executado, ele retorna uma promessa 
(promise) que resolve a resposta (response) à requisição, sendo esta bem-sucedida ou não. 
JSON 
JSON pode ser traduzido para Notação de Objetos 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”. 
O JSON, embora normalmente associado ao JavaScript – tendo sido definido, inclusive, na 
especificação ECMA-262, de dezembro de 1999 –, é um formato de texto, independente de linguagem de 
programação. Essa facilidade de uso em qualquer linguagem contribuiu para que se tornasse um dos 
formatos mais utilizados para a troca de dados. 
A imagem a seguir apresenta alguns exemplos da estrutura de um objeto JSON: 
 
Estrutura de objetos 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 “:”; 
• Utiliza a vírgula para separar pares, valores ou objetos; 
• O objeto e seus pares são englobados por chaves “{ }”; 
• É possível definirmos arrays, que 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. 
Saiba mais 
A seção “Explore+” sugere materiais adicionais sobre o tema. A leitura desse material é fortemente 
recomendada. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 92 
 
Frameworks JavaScript 
A exemplo do que vimos nas demais tecnologias do lado cliente, no ambiente Web, existem inúmeros 
frameworks disponíveis também para JavaScript. 
Saiba mais 
Embora não faça parte do escopo deste conteúdo, cabe destacar que a utilização desses recursos é uma 
grande aliada no desenvolvimento Web. Logo, sempre que possível, é recomendada. 
Considerações finais 
Neste conteúdo, abordamos a linguagem de programação lado cliente do JavaScript. Ao longo dos 
módulos, vimos conceitos e sintaxes − propriamente ditos ou a ela relacionados −, como a interface DOM e 
as requisições assíncronas, desde as formas de inclusão em arquivos HTML à declaração e utilização de 
variáveis. 
Estudamos, ainda, outras estruturas de dados, como os arrays, e os conceitos de programação 
relacionados à função das estruturas de decisão e de repetição, bem como suas aplicações em JavaScript. 
Ao final, pudemos conhecer alguns recursos avançados, como o AJAX e o JSON. Para maior compreensão 
do tema, cada módulo foi amparado com a apresentação de exemplos práticos e funcionais. Assim, temos 
certeza de que os conhecimentos sobre o JavaScript aqui consolidados o ajudarão em sua vida acadêmica 
e profissional. 
Referências 
BARBOSA, A. DOM. Publicado em: 4 set. 2017. 
FLANAGAN, D. JavaScript: The Definitive Guide. Califórnia: O’Reilly Media, 2011. 
RAUSCHMAYER, A. Speaking JavaScript. Califórnia: O’Reilly Media, 2014. 
Explore + 
Para saber mais sobre DOM, leia os textos: 
Modelo de Objeto de Documento (DOM) e Examples of Web and XML development using the DOM, 
da comunidade Mozilla. 
What is the Document Object Model, THE HTML DOM Document Object e JavaScript HTML DOM, 
do site W3schools. 
Acesse a jQuery, uma biblioteca de funções JavaScript. 
Leia AJAX −The XMLHttpRequest Object, do site W3 schools. 
Para aprender mais sobre JSON, leia: 
JSON – Introduction, do site W3schools. 
JSON e Trabalhando com JSON, da comunidade Mozilla. 
Acesse os sites das comunidades CodePen e JSFiddle para testar códigos HTML, CSS e JavaScript. 
Para aprofundar seus conhecimentos, leia: Promise; JavaScript – Método Filter; Fetch API e Usando 
Fetch, da comunidade Mozilla. 
Leiao texto Introdução aos service workers, de Matt Gaunt. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 93 
 
Programação de Páginas Dinâmicas Com PHP 
Introdução 
Como veremos neste tema, PHP é uma linguagem server side, gratuita e multiplataforma. Logo, para 
ser executada, precisa de um servidor com suporte à linguagem. Entre os mais utilizados estão o Apache, 
o IIS (da Microsoft) e o Nginx. A configuração desses ambientes exige um conhecimento 
intermediário/avançado e pode ser realizada tanto localmente − em computadores pessoais − quanto em 
servidores por meio de serviços contratados. 
É possível encontrar diversos tutoriais disponíveis na Internet que orientam durante o processo de 
configuração do ambiente PHP. 
Normalmente, o ambiente relacionado ao PHP é chamado de AMP, onde temos a combinação de 
três diferentes tecnologias comumente associadas: Apache (Servidor), Mysql ou MariaDB (Sistema 
Gerenciador de Banco de Dados) e PHP. Uma opção simples para configuração do AMP em computadores 
pessoais e que não requer instalação, já que pode ser apenas executada, é o XAMPP. Outra alternativa aos 
editores e servidor mencionados são os interpretadores on-line, como PHPTester, Write PHP Online e Online 
PHP Editor. 
Vamos começar nossa jornada acessando os códigos-fontes originais propostos para o aprendizado 
de PHP. Baixe o arquivo aqui, descompactando-o em seu dispositivo. Assim, você poderá utilizar os códigos 
como material de apoio ao longo do tema! 
1. Conceitos básicos de PHP 
A linguagem PHP 
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). 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 94 
 
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. 
A sintaxe 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: 
<!doctype html> 
<html lang="pt-BR"> 
<head>Primeiro código PHP com tags HTML</head> 
<body> 
 <h1>Título do texto</h1> 
 <p><?php echo "Olá, mundo"; ?></p> 
</body> 
</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 , 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 os exemplos de finalização de comandos e de utilização de comentários: 
<?php 
//Comentários de uma linha são realizados com a utilização de barras duplas 
 
/* 
Cada comando deve ser terminado com ; 
Abaixo temos alguns exemplos de término de comandos 
*/ 
 
echo "Olá, mundo\n"; 
$var1 = 2 + 2; 
 
echo "O Resultado da soma é igual a: " . $var1; 
 
Repare que a tag de fechamento “?>” não é obrigatória quando temos apenas código PHP em um script. 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 95 
 
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. 
Atenção! 
O único cuidado diz respeito ao momento de atribuição de valores, já que dados do tipo string, por exemplo, 
precisam ser envolvidos por aspas duplas (“ ”) ou simples (‘ ’). 
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 utilizadas 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: 
<?php 
 $_nomeCurso = "Programação de Páginas Dinâmicas com PHP"; 
 $ano_criacao = 1994; 
 $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. 
Entrada de dados: variáveis de requisição HTTP 
Superglobais 
Diversas variáveis predefinidas no PHP são "superglobais", o que significa que elas estão disponíveis em todos 
os escopos para todo o script. Não há necessidade de fazer global $variable para acessá-lo dentro de funções ou 
métodos. Estasvariáveis superglobais são: $GLOBALS. 
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: 
1. GET 
2. HEAD 
3. POST 
4. PUT 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 96 
 
5. DELETE 
6. CONNECT 
7. OPTIONS 
8. TRACE 
9. PATCH 
Além dos métodos aqui mencionados, o protocolo HTTP possui, ainda, uma série de outras 
propriedades relevantes no que tange à programação Web. Recomenda-se, portanto, uma leitura mais 
aprofundada sobre esse protocolo. 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 
Este 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=value&var#=value3 
 
Como visto na imagem, a requisição GET é composta pelo endereço (URL e URI) e pela query string 
– pares de nome/valores (var1=value1, ...). 
Em linhas gerais, não deve ser utilizado quando estamos lidando com informações sensíveis, uma 
vez que a query string fica visível na barra de endereços do navegador. Outra característica importante 
desse método é que ele pode ser usado a partir de formulários HTML. 
Método POST 
Este método é usado no envio de dados para o servidor a fim de criar ou atualizar um recurso. O 
código seguinte 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 
 
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 “Exemplo de uma requisição GET”, no script “script.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 
 
Como visto anteriormente, 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 por meio de métodos POST. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 97 
 
Variável $_REQUEST 
É considerada "curinga", 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. 
Cookies 
É um fragmento reduzido de dados que fica armazenado no navegador do usuário, proveniente de um servidor 
Web. São normalmente usados para fins de gerenciamento de sessões, armazenamento de preferências do usuário 
ou rastreamento. 
Operadores PHP 
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. 
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: 
Operador: % 
Exemplo de utilização: $var1 % $var2 
Para que serve: operador de módulo. Retorna o resto da divisão inteira de $var1 por $var2. 
Operador: ** 
Exemplo de utilização: $var1 ** $var2 
Para que serve: operador exponencial. Retorna o resultado de $var1 elevado a $var2. 
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. 
<?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" 
*/ 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 98 
 
Repare nos comentários inseridos na imagem, onde o resultado de cada combinação é explicado. 
Para melhor fixação, copie os exemplos e os execute. Tente também alterar os valores ou realizar outras 
combinações. 
Operadores de comparação 
São utilizados para comparar dois valores. Veja a seguir os operadores disponíveis e suas funções. 
== 
$var1 == $var2 
Verifica se $var1 é igual a $var2 
=== 
$var1 === $var2 
Verifica se $var1 é idêntica a $var2. Nesse caso, além do valor, verifica se ambas são do mesmo tipo 
!= 
$var1 != $var2 
Verifica se $var1 é diferente de $var2 
<> 
$var1 <> $var2 
Verifica se $var1 é diferente de $var2 
!== 
$var1 !== $var2 
Verifica se não são idênticas/iguais ou se não são do mesmo tipo 
< 
$var1 < $var2 
Verifica se $var1 é menor que $var2 
> 
$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 
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. Veja a seguir os operadores lógicos disponíveis em 
PHP. 
and 
$var1 and $var2 
Retorna true se $var1 E $var2 forem verdadeiras 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 99 
 
or 
$var1 or $var2 
Retorna true se $var1 OU $var2 forem verdadeiras 
xor 
$var1 xor $var2 
Retorna true se $var1 OU $var2 forem verdadeiras, 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 
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.Saiba mais 
Além dos operadores apresentados, há outros disponíveis em PHP, como os bit a bit (bitwise) e os de controle 
de error. Na seção “Explore+”, destacamos um site que contém a lista completa de operadores. 
2. Estruturas de decisão e de repetição 
Condicionais: estruturas de decisão 
 
A figura anterior 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 100 
 
if 
As estruturas de decisão e de repetição são recursos importantes em uma linguagem de 
programação. Com elas, é possível mudar o fluxo de um programa por meio de verificações (estruturas de 
decisão) e também executar diversas vezes partes do programa (estruturas de repetição). A seguir, veremos 
como utilizá-las em PHP. 
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 a seguir: 
<?php 
 
 $var1 = 10; 
 $var2 = 20; 
 
 if($var1 > $var2){ 
 echo "$var1 é maior que $var2"; 
 } 
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? 
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: 
<?php 
 
 $var1 = 10; 
 $var2 = 10; 
 
 if($var1 > $var2){ 
 echo "$var1 é maior que $var2"; 
 }elseif($var1 < $var2){ 
 echo "$var1 é menor que $var2"; 
 }else{ 
 echo "$var1 e $var2 são iguais"; 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 101 
 
 } 
 
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 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: 
<?php 
 
 switch($var1){ 
 case 10: 
 echo "var1 é igual a 10"; 
 case 20: 
 echo "var1 é igual a 20"; 
 break; 
 default: 
 echo "var1 não é igual a 10 e nem a 20"; 
 break; 
 } 
 
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. Para fins de prática, modifique o valor da variável 
$var1 no emulador anterior, execute o código e veja o resultado obtido. 
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: 
<?php 
 
 $var1 = 10; 
 $var2 = 10; 
 
 if($var1 > $var2): 
 echo "$var1 é maior que $var2"; 
 elseif($var1 < $var2): 
 echo "$var1 é menor que $var2"; 
 else: 
 echo "$var1 e $var2 são iguais"; 
 endif; 
 
Essa sintaxe é muito utilizada quando misturamos código HTML e PHP. 
Outra sintaxe alternativa interessante presente no PHP é o operador ternário. Por meio dele é 
possível avaliar uma condição e atribuir um valor de acordo com a validação. Veja o exemplo para ficar mais 
claro: 
<?php 
 
 $var1 = 10; 
 $var2 = ($var1 >= 10) ? 11 : 9; 
 echo $var2; //imprimirá 11 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 102 
 
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”. Execute novamente o código no 
emulador acima, mas antes modifique o valor da variável $var1. Analise o resultado obtido. 
Laços: 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 próxima figura 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, 
descreveremos cada uma delas. 
 
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: 
<?php 
 
 $i = 2; 
 while ($i <= 20) { 
 echo $i; 
 $i+=2; 
 echo "\n"; 
 } 
 
 /*Sintaxe alternativa*/ 
 $i = 2; 
 while ($i <= 20): 
 echo $i; 
 $i+=2; 
 echo "\n"; 
 endwhile; 
 
Repare que, no exemplo foram mostradas a forma normal e a forma alternativa do laço while – 
também presente nas demais estruturas de repetição em PHP. Para praticar, tente alterar a condição no 
emulador anterior e veja o resultado, executando o código novamente. 
O comando echo “\n” é utilizado para imprimir uma linha em branco quando o script é executado via 
linha de comando. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 103 
 
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: 
<?php 
 
 $i = 2; 
 do { 
 echo $i; 
 $i+=2; 
 echo "\n"; 
 }while ($i <= 20); 
 
For 
Esse laço possui sintaxe um pouco diferente do que vimos nos anteriores. Vamos ao exemplo: 
<?php 
 
 for ($i = 1; $i <= 20; $i++) { 
 echo $i; 
 echo "\n"; 
 } 
 
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. 
Outra possibilidade nesse laçoé avaliar múltiplas expressões, que deverão ser separadas por 
vírgulas. Além disso, também é possível inserir expressões vazias. 
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 realizar interações em arrays. Veja o 
exemplo: 
<?php 
 $carros = Array("Fusca", "Monza", "Passat"); 
 
 foreach($carros as $carro){ 
 echo $carro; 
 echo "\n"; 
 } 
 
 for ($i = 0; $i < count($carros); $i++) { 
 echo $carros[$i]; 
 echo "\n"; 
 } 
 
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. 
Saiba mais 
Além dessas estruturas, em PHP estão disponíveis outros comandos relacionados às estruturas de repetição, 
como o break e o continue. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 104 
 
3. Vetores e funções 
Arrays: 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 desta 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: 
1. array numérico 
Índice composto por números inteiros. 
2. array associativo 
Índice composto por strings. 
3. array misto 
Índices numéricos e associativos. 
O mesmo vale para os elementos de um vetor: podemos tanto ter strings quanto números, entre 
outros tipos de dados, como arrays de arrays. 
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"; 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 105 
 
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. 
<?php 
 //Primeira forma 
 $carros = array ( 
 'vw' => "Fusca", 
 'chevrolet' => "Monza", 
 'fiat' => "Tempra" 
 ); 
 
 //Segunda forma 
 $carros = [ 
 'vw' => "Fusca", 
 'chevrolet' => "Monza", 
 'fiat' => "Tempra" 
 ]; 
 
 //Terceira forma 
 $carros['vw'] = "Fusca"; 
 $carros['chevrolet'] = "Monza"; 
 $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 ‘=>’. 
Vamos ao código: 
<?php 
 $carros = array ( 
 'vw' => "Fusca", 
 0 => "Passat", 
 'chevrolet' => "Monza", 
 1 => "Chevette", 
 'fiat' => "Tempra", 
 2 => "Uno" 
 ); 
 //A impressão desse array gera a seguinte saída 
 /* 
 Array 
 ( 
 [vw] => Fusca 
 [0] => Passat 
 [chevrolet] => Monza 
 [1] => Chevette 
 [fiat] => Tempra 
 [2] => Uno 
 ) 
 */ 
 
Vamos praticar mais um pouco! No código do emulador anterior, insira a seguinte linha em seu final: 
print_r($carros); 
Após isso, execute o código novamente e veja que o array será impresso no campo INPUT do 
emulador. 
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, por meio do uso de funções como a array_push 
(que adiciona elementos ao final de um array) e a array_unshift (adiciona elementos no início de um array). 
Saiba mais 
Além dessas, há funções que permitem gerar novos vetores, combinar vetores existentes e muito mais. 
Pesquise nos sites indicados no Explore+. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 106 
 
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). 
<?php 
 $carros = array ( 
 'vw' => "Fusca", 
 0 => "Passat", 
 'chevrolet' => "Monza", 
 1 => "Chevette", 
 'fiat' => "Tempra", 
 2 => "Uno" 
 ); 
 print_r($carros); 
 echo "O tamanho atual do array é: " . count($carros); 
 echo "\n\n"; 
 //Definindo o valor do índice 0 como vazio 
 $carros[0] = ''; 
 
 print_r($carros); 
 echo "O tamanho atual do array é: " . count($carros); 
 echo "\n\n"; 
 
 //Removendo dois elementos do array com unset 
 unset($carros['fiat'], $carros[1]); 
 
 print_r($carros); 
 echo "O tamanho atual do array é: " . count($carros); 
 echo "\n\n"; 
 
 //Removendo elementos do array com array_splice 
 array_splice($carros, 1,2); 
 
 print_r($carros); 
 echo "O tamanho atual do array é: " . count($carros); 
Arrays multidimensionais 
O array que será visto no exemplo 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’. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 107 
 
• Cada uma dessas chaves possui um novo array numérico, que contém quatro elementos. 
blackTeoria na prática 
A melhor forma de fixar conteúdos quando se aprende uma linguagem de programação é praticando 
os conceitos estudados. Por isso, no código do emulador anterior, faça o seguinte: 
1) Crie mais um array dentro do array $frutas, para armazenar outro tipo de fruta: 
Frutas tropicais: goiaba, maracujá, banana e manga. 
2) Altere o código para que o array seja impresso na tela (campo CONSOLE do emulador). 
3) Execute novamente o código e compare o que será impresso no campo CONSOLE do emulador 
com o conteúdo do botão ”Mostrar solução” abaixo. 
<?php 
 $frutas = array ( 
 "vermelhas" => array( 
 "melancia", 
 "cereja", 
 "framboesa", 
 "morango" 
 ), 
 "tropicais" => array( 
 "goiaba", 
 "maracujá", 
 "banana", 
 "manga" 
 ), 
 
 "citricas" => array( 
 "laranja", 
 "limao", 
 "abacaxi", 
 "mexerica" 
 ), 
 ); 
 print_r($frutas); 
 
// Saída 
 
Array 
( 
 [vermelhas] => Array 
 ( 
 [0] => melancia 
 [1] => cereja 
 [2] => framboesa 
 [3] => morango 
 ) 
 
 [tropicais] => Array 
 ( 
 [0] => goiaba 
 [1] => maracujá 
 [2] => banana 
 [3] => manga 
 ) 
 
 [citricas] => Array 
 ( 
 [0] => laranja 
 [1] => limao 
 [2] => abacaxi 
 [3] => mexerica 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 108 
 
 ) 
) 
 
Essas estruturas de dados são similares às vistas na disciplina de Matemática, na qual temos 
também as matrizes, que podem ser 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 em PHP 
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. 
Dica 
Em termos práticos, pense nas funções como um código criado para resolver problemas singulares ou executar 
tarefas específicas. Além disso, tenha em mente que esses códigos poderão ser usados mais de uma vez ao longo do 
seu projeto. Logo, em vez de reescrever um mesmo código, faça uso de funções. 
O exemplo a seguir descreve a sintaxe de criação de uma função em PHP e a forma de invocá-la. 
<?php 
 $num1 = 10; 
 $num2 = 15; 
 
 $num3 = soma($num1,$num2); 
 imprimir_resultado($num3); 
 
 
 function soma($numero1, $numero2) 
 { 
 return $numero1 + $numero2; 
 } 
 function imprimir_resultado($numero) 
 { 
 echo "O resultado da operação é igual a: " . $numero; 
 } 
 
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”, por meio 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()”. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 109 
 
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. 
Saiba mais 
A Zend, fabricante norte-americana de software orientado para PHP, é uma das empresas mais conhecidas e 
relevantes sobre o assunto. Além de um Framework bastante conhecido, que leva o seu nome, ela também é 
responsável pela certificação profissional PHP mais importante do mercado. Entre todo o material que disponibiliza, há 
um manual de boas práticas com uma série de convenções relacionadas à produção de código em PHP. Vale a pena 
a leitura desse material, conforme sugerido na seção “Explore +”. 
Considerações finais 
Neste tema, apresentamos a programação de páginas dinâmicas utilizando PHP, linguagem de script 
server side. Ao longo de três módulos, por meio da explanação de conceitos e da aplicação de exemplos 
práticos e funcionais, vimos a criação de variáveis e atribuição de valores, alguns dos operadores disponíveis 
e a manipulação de variáveis recebidas de métodos HTTP POST e GET. Listamos, ainda, as estruturas de 
decisão e de repetição disponíveis na linguagem e, por fim, descrevemos os recursos de vetor array e 
funções. 
Referências 
PHP. Manual do PHP: o que é o PHP? Consultado na Internet em: 16 ago. 2020. 
Explore + 
Para saber mais sobre JavaScript, leia o livro JavaScript: The Definitive Guide, de David Flanagan. 
Acesse o site Apache Friends para aprofundar seus conhecimentos sobre o XAMPP, o mais popular 
ambiente de desenvolvimento PHP. 
Para testar seus códigos PHP, utilize os sites On-line PHP Editor, PHPTester e Write PHP On-line. 
Acesse o Manual do PHP e leia os textos: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 110 
 
O que as referências fazem 
Escopo de variáveis 
Precedência de operadores 
Operadores 
for 
break 
continue 
Visite o site da comunidade Mozilla e pesquise sobre os temas: HTTP; GET; e POST. 
Acesse o site W3Schools e leia: The GET method e The POST method. 
Leia o manual Zend Framework coding standard for PHP, da Zend Framework. 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 111 
 
Integração do PHP com banco de dados 
Introdução 
Ao longo deste conteúdo, veremos como integrar o PHP com banco de dados fazendo uso da Classe 
PDO (PHP Data Objects), uma interface de acesso a databases. 
Veremossua instalação, conceitos básicos, formas de utilização com MySQL e PostgreSQL, bem 
como utilização de dois dos seus principais métodos. Tudo isso apoiados em exemplos práticos. 
Ao final, desenvolveremos um formulário HTML para a inclusão de informações em um banco de 
dados. 
Vamos começar nossa jornada acessando os códigos-fontes originais propostos para o aprendizado 
de PHP com PDO. Baixe o arquivo, descompactando-o em seu dispositivo. Assim, você poderá utilizar os 
códigos como material de apoio ao longo do tema. 
1. A Classe PDO em banco de dados 
Banco de dados e linguagem PHP 
Os bancos de dados são o ponto central de muitos sites, sistemas e aplicativos. Tais estruturas 
permitem o armazenamento e a 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. 
Sistemas Gerenciadores de Banco de Dados 
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. 
Em PHP, estão disponíveis vários métodos e funções, através da extensão que leva o mesmo nome 
do SGBD, para conexão e execução de instruções SQL no MySQL. 
Para fins de comparação, o código abaixo demonstra a conexão com o MySQL e a execução de uma 
instrução de consulta SQL utilizando as funções PHP específicas para o SGBD em questão. 
<?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 Servidor 
$conn = mysqli_connect(HOST, USER, PASSWORD, DBNAME) or die( ' Não foi possível conectar.' ); 
 
//Realizando uma consulta no BD 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 112 
 
$instrucaoSQL = "Select nome, cpf, telefone From Cliente"; 
$stmt = mysqli_prepare($conn, $instrucaoSQL); 
mysqli_stmt_bind_result($stmt, $nome, $cpf, $tel); 
mysqli_stmt_execute($stmt); 
 
while (mysqli_stmt_fetch($stmt)) { 
 echo $nome . "\t"; 
 echo $cpf . "\t"; 
 echo $tel . "\n"; 
} 
 
//Encerrando a conexão 
mysqli_close($conn); 
 
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 
linguagem amplamente utilizada no ambiente web. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 113 
 
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 “ ” – sendo essa última não obrigatória, quando 
houver apenas código PHP em um script. 
Tomando como base os exemplos de código anteriores, 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 determinadastarefas. 
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. 
Dica 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 114 
 
Consulte o Manual do PHP para uma lista completa de todas as suas extensões. 
A Classe PDO 
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 material. 
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. 
 
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. 
Na seção “Explore+”, separamos algumas referências base para esse processo. 
Como mostrado na imagem Funcionamento da Camada de Abstração, 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 as funções PDO independentemente 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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 115 
 
Drivers PDO 
Atualmente, estão disponíveis 12 drivers PDO, ou seja, é possível utilizá-lo com doze diferentes 
SGBDs. A tabela a seguir ilustra os drivers e os bancos de dados suportados. Vejamos! 
Driver SGBD Suportados 
PDO_CUBRID Cubrid 
PDO_DBLIB FreeTDS / Microsoft SQL Server / Sybase 
PDO_FIREBIRD Firebird 
PDO_IBM IBM DB2 
PDO_INFORMIX IBM Informix Dynamic Server 
PDO_MYSQL MySQL 3.x/4.x/5.x 
PDO_OCI Oracle Call Interface 
PDO_ODBC ODBC v3 (IBM DB2, unixODBC e win32 ODBC) 
PDO_PGSQL PostgreSQL 
PDO_SQLITE SQLite 3 e SQLite 2 
PDO_SQLSRV Microsoft SQL Server / SQL Azure 
PDO_4D 4D 
 
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 passados 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. 
Exceções em PHP 
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 (throw) e capturada (catch), 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. 
O tratamento de exceções é uma prática recomendadíssima em qualquer código produzido. Além de 
informar ao usuário ou mesmo ao desenvolvedor que um erro ocorreu e que, com isso, o programa não 
funcionará de acordo com o esperado, o tratamento de exceções possibilita também que outras partes do 
programa permaneçam funcionais ou que o programa não seja encerrado de forma inesperada, mesmo que 
um erro tenha ocorrido. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 116 
 
A partir de um dos exemplos anteriores, 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 
Encerramento de conexões 
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; 
 
Conexões persistentes 
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(); 
} 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 117 
 
2. Métodos da Classe PDO 
Programação orientada a objetos em PHPOrientaçã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 melhor 
entendimento, serão descritos os conceitos básicos de OO (orientação a objeto) 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 OO 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 imagem a seguir: 
 
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, a 
seguir, o próximo exemplo: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 118 
 
 
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. 
Comentário 
Há muito mais a ser visto sobre orientação a objetos. As considerações apresentadas anteriormente 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, a seguir, serão demonstrados exemplos práticos, em PHP, da criação de classes. Note 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; 
} 
} 
 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 119 
 
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. 
Veja a seguir um exemplo de criação de objeto oriundo da Classe “Fruta” e utilização dos métodos 
dessa classe através do objeto criado. 
// instanciando um objeto da classe Fruta 
$fruta1 = new Fruta(); 
// utilizando o objeto criado para chamar o método “setNome” 
$fruta1->setNome("morango"); 
// utilizando o objeto criado para chamar o método “setTipo” 
$fruta1->setTipo("vermelha"); 
// utilizando o comando “echo” para imprimir o resultado da chamada ao método “getNome” 
echo $fruta1->getNome(); 
// utilizando o comando “echo” para imprimir o resultado da chamada ao método “getTipo” 
echo $fruta1->getTipo(); 
 
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. 
Vamos praticar mais um pouco? Utilize o emulador abaixo, que contém o código da classe “Fruta” 
visto anteriormente. Após o código da classe, instancie novos objetos “Fruta” e utilize os seus métodos, 
como demonstrado no código anterior. Lembre-se de utilizar o comando “echo” para imprimir o valor de 
retorno dos métodos “getNome” e “getTipo”. 
<?php 
class Fruta{ 
 var $nome; 
 var $tipo; 
 
 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; 
 } 
} 
 
Os métodos da Classe PDO 
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. Vejamos! 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 120 
 
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 ) : mixedpublic getColumnMeta ( int $column ) : array 
 public nextRowset ( void ) : bool 
 public rowCount ( void ) : int 
 public setAttribute ( int $attribute , mixed $value ) : bool 
 public setFetchMode ( int $mode ) : bool 
} 
 
A seguir, conheça melhor os métodos: 
Método EXEC 
Este 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 apresentado é funcional e complementar ao código demonstrado anteriormente, 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). 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 121 
 
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 resultset 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. 
O Ataque 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 as 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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 122 
 
<?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, por exemplo, os seguintes valores: 
 
Exemplo de SQL injection em um formulário HTML. 
Os valores inseridos no formulário mostrado na imagem anterior 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). Ele 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: 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 123 
 
<?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; 
 
Fique atento à dica a seguir: 
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). 
O método Execute faz o vínculo (bind) entre os namedparameters e as variáveis PHP. O mesmo 
código apresentado anteriormente poderia ser executado tendo o sinal de interrogação “?” no lugar dos 
parâmetros nomeados. Veja, a seguir, como ficaria esse fragmento de código: 
<?php 
//... 
 
$stmt = $dsn->prepare("Select * From Usuario Where login = ? And password = ?"); 
$stmt->execute([$login, $pswd]); 
 
//... 
3. Construir uma aplicação com banco de dados 
Primeiros passos 
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. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 124 
 
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, autoincremento e único. 
O formulário HTML e o script PHP 
A instrução SQL a seguir contém um exemplo de como a tabela cliente pode ser criada, observe: 
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) 
); 
 
A seguir, temos uma dica para você! 
Dica 
A sintaxe completa da instrução “Create Table”, para o PostgreSQL, pode ser vista em seu próprio manual. 
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 a seguir apresenta esses elementos, seus atributos e uma breve descrição. 
Elemento Atributo Obrigatório? Descrição 
form action Sim 
Contém a URL ou nome do script, quando na mesma pasta que o 
arquivo HTML, que processará o documento. 
form method Não. O padrão é POST 
Define o método HTTP a ser utilizado para transmissão dos dados – 
GET ou POST. 
input name Sim 
Contém o nome do campo que será recebido no PHP como índice 
associativo no array $_GET, $_POST ou $_REQUEST. 
button ou input type Sim 
O valor “submit”, atribuído ao atributo type em um desses campos, 
cria o evento de envio do formulário. 
 
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 garantia de 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 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 125 
 
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 a seguir: 
function validarFormulario(formulario){ 
 if(formulario.nome_cliente.value === "" || formulario.nome_cliente.value === null) { 
 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. 
Codificando o script PHP que processará o formulário 
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. 
Dica 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 126 
 
Normalmente, em cenários reais, são utilizados padrões de projeto, como o MVC (Model-View-Controller), e 
paradigmas como a orientação a objetos, para realizar a integração entre a HTML, o PHP e o banco de dados. Tais 
questões foram deixadas de lado em nosso cenário, por estarem fora do escopo deste conteúdo. Entretanto, é 
recomendado estudar sobre esses padrões e paradigmas a fim de aplicá-los, garantindo assim maior qualidade ao 
código gerado, além de outros benefícios. 
O script PHP que processa o formulário pode servisto 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. 
 
Recuperação da informação 
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. 
Nossos códigos de exemplo, que podem ser vistos ao final do módulo, são compostos por uma única 
página PHP contendo tanto códigos de programação quanto elementos HTML. Veja os códigos base nos 
exemplos. 
Códigos: exemplos práticos 
Código do formulário HTML para inserção de clientes 
Veja o código de exemplo a seguir: 
<!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 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 127 
 
 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 
Veja o código de exemplo a seguir: 
<!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">> 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 128 
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">> 
 </body> 
</html > 
 
Script PHP para processamento do formulário HTML 
Veja o código de exemplo a seguir: 
<?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 
Veja o código de exemplo a seguir: 
<?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(); 
} 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 129 
 
/***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> 
 <th scope="col">Nome</th> 
 <th scope="col">CPF</th> 
 <th scope="col">E-mail</th> 
 <th scope="col">Data de Nascimento</th> 
 </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> 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
</body> 
</html> 
 
Considerações finais 
Ao longo deste conteúdo, cujo propósito foi apresentar as funcionalidades da linguagem de 
programação PHP para integração com bancos de dados, demonstramos alguns recursos da linguagem. 
Alguns diretamente voltados para esse propósito, como as funções de conexão específicas com os SGBDs 
MySQL e PostgreSQL, além da classe PDO e alguns de seus métodos, outros relacionados à linguagem 
em si, como as constantes, as funções, as extensões, o tratamento de exceções, e o paradigma de 
orientação a objetos. 
Ao final, cada um desses conceitos foi aplicado na construção de um formulário e de uma listagem 
HTML que insere e recupera informações de uma base de dados. 
Referências 
PHP. Manual do PHP. Publicado em: 5 ago. 2020. Consultado na internet em: 15 set. 2022. 
Desenvolvimento Web em HTML5, CSS, Javascript e PHP 
Marcio Quirino - 130 
 
Explore + 
Para saber mais sobre os assuntos explorados conteúdo, pesquise: 
PHP. Mysql., no Manual do PHP. 
PHP. PostgreSQL, no Manual do PHP. 
PHP. Data Objects., no Manual do PHP. 
O PHP possui algumas funções específicas para vários SGBDs, através das quais é possível realizar 
a conexão com o banco de dados e executar instruções SQL. Além disso, há funções próprias para a 
recuperação de dados, como as que transformam o conjunto de resultados em arrays numéricos ou 
associativos. O Manual do PHP contém a listagem dessas funções, assim como exemplos de sua utilização. 
Cabe ressaltar que, no lugar da utilização dessas funções específicas, deve-se dar preferência ao uso da 
Classe PDO como camada abstração para esse fim. Nesse mesmo manual, não deixe de ler também 
maiores informações sobre o método Fetch e equivalentes.