Livro - Programação Web

Prévia do material em texto

PROGRAMAÇÃO WEB
Ricardo Sonaglio Albano
Evandro Zatti
Te
cn
o
lo
g
ia
P
R
O
G
R
A
M
A
Ç
Ã
O
 W
E
B
R
ic
ar
d
o 
S
on
ag
lio
 A
lb
an
o
E
va
nd
ro
 Z
at
ti
Curitiba
2017
Programacao
Web
çã
Ricardo Sonaglio Albano 
Evandro Zatti 
Ficha Catalográfica elaborada pela Fael. Bibliotecária – Cassiana Souza CRB9/1501
A321e Albano, Ricardo Sonaglio
Programação web / Ricardo Sonaglio Albano, Evandro Zatti . – .
Curitiba: Fael, 2017.
350 p..: il.
ISBN 978-85-60531-94-3
1. Linguagem de programação 2. Internet I. Zatti, Evandro II. 
Título
CDD 005.1 
Direitos desta edição reservados à Fael.
É proibida a reprodução total ou parcial desta obra sem autorização expressa da Fael.
FAEL
Direção Acadêmica Francisco Carlos Sardo
Coordenação Editorial Raquel Andrade Lorenz
Revisão Editora Coletânea
Projeto Gráfico Sandro Niemicz
Capa Vitor Bernardo Backes Lopes
Imagem da Capa Shutterstock.com/Sentavio
Arte-Final Evelyn Caroline dos Santos Betim
Sumário
 Carta ao Aluno | 5
1. Introdução à Programação Web | 7
2. HTML | 25
3. CSS | 61
4. JQuery | 101
5. Softwares, Frameworks e Bootstrap | 135
6. PHP | 169
7. PHP Orientação a Objeto | 207
8. PHP: Acesso ao Banco de Dados | 243
9. Estudo de caso | 271
10. Estudo de Caso 2 | 313
 Conclusão | 339
 Gabarito | 341
 Referências | 345
Prezado(a) aluno(a),
O mercado de trabalho é carente de bons profissionais na 
área de desenvolvimento de sistemas, visto a deficiência da maioria 
em prover soluções, utilizar as melhores técnicas e implementá-las. 
Essa obra traz conceitos, exemplos e exercícios que buscam promo-
ver uma reflexão sobre o assunto e a importância do conhecimento 
numa área que expõe todas as fragilidades e expertise de negócio, a 
Carta ao Aluno
– 6 –
Programação Web
interface e a interação que é a web. Com mais de vinte anos de atuação na 
área de desenvolvimento de sistemas e banco de dados, reuni nesse material 
parte desse conhecimento, compartilhado com você para auxiliá-lo em seu 
desenvolvimento profissional.
1
Introdução à 
Programação Web
A velocidade do crescimento da internet e de todas as fer-
ramentas e recursos que advêm dessa tecnologia, modificaram 
profundamente não só a forma de comunicação entre as pessoas, 
mas a forma como interagem com um mundo muito mais digital 
e interconectado. E, desta forma, as organizações também se adap-
tam e transformam-se para continuar competitivas e inovadoras no 
seu segmento de atuação, exigindo profissionais capacitados para se 
adaptar aos novos e contínuos desafios tecnológicos.
Nesse contexto, o conhecimento e as habilidades dos desen-
volvedores web têm um papel fundamental na maneira como 
a internet é utilizada e em como isso se dará no futuro. Por esse 
motivo, esses profissionais devem estar sempre atentos às inovações, 
capacitando-se para desenvolver e adotar as últimas tecnologias, 
contribuindo assim com as novas tendências tecnológicas e com o 
futuro do mundo digital.
Ricardo Sonaglio Albano
Programação Web
– 8 –
Neste capítulo, contextualizaremos o mundo web, sua história, apli-
cações, desenvolvimento, as principais arquiteturas utilizadas e tendên-
cias futuras.
1.1 Introdução
A internet possui características que a diferenciam de qualquer outro 
meio de comunicação, e o exame de suas peculiaridades nos fornece impor-
tantes subsídios para melhor conhecer seu impacto e efeitos sobre as relações 
pessoais processadas por meio dela.
Antes de tudo, a internet não é um meio físico de comunicação, tangível 
e com dimensão facilmente determinável. Ela é uma gigantesca rede que com-
preende várias outras redes menores de computadores – é uma rede de redes.
Redes de computadores são constituídas por diversos computadores 
interligados, com o propósito de troca de dados, além de possibilitar a utili-
zação de recursos de computadores e periféricos fisicamente distantes, como 
o acesso à uma impressora instalada em um outro local, ou a pesquisa em 
um banco de dados remoto.
Muitas redes são locais ou fechadas. Algumas são constituídas por 
alguns computadores interligados, em um escritório ou um laboratório, 
por exemplo. Outras, por sua vez, estão conectadas à outras redes maiores 
que funcionam como elo de ligação entre elas e outras com finalidade 
semelhante, de maneira tal que permita a computadores de várias outras 
redes menores compartilhar dados entre si. Uma rede que interconecta 
diversas outras redes em escala global, proporcionando a todo computador 
pertencente a uma subrede o acesso a outro computador de outra subrede, 
é a internet.
1.2 Resumo sobre a evolução 
da Internet – a origem
A seguir será apresentado um breve resumo sobre os pontos mais impor-
tantes na história do mundo web.
– 9 –
Introdução à Programação Web
Quadro 1.1 – Resumo sobre a história da internet
Ano Descrição
1969 Projeto militar norte-americano desenvolvido pela Defense Advan-ced Research Project Agency (DARPA), denominado ARPANET.
1970
A Network Working Group (NWG) conclui o primeiro protocolo 
servidor a servidor (Host-to-Host protocol), chamado Network 
Control Protocol (NCP).
1972 Ray Tomlinson – criação do software básico de e-mail, com as funções de ler e enviar.
1974
Robert Kahn – criação do TCP para substituir o NCP.
Usado até hoje, o conjunto de protocolos Transmission Control 
Protocol / Internet Protocol (TCP/IP) é um padrão de comunica-
ção e endereçamento para toda e qualquer rede de computadores.
1977 Robert Kahn e Vint Cerf conseguiram realizar com sucesso a inter-ligação entre três redes de computadores.
1983 Toda a rede ARPANET adotou o protocolo TCP / IP. A inter-net nasceu.
1990
Tim Berners-Lee desenvolveu as três tecnologias fundamentais que 
continuam sendo a base da web atualmente: HyperText Markup 
Language (HTML), a linguagem de marcação (formatação) para a 
web; Uniform Resource Identifier (URI), mais comumente conhe-
cida como Uniform Resource Locator (URL), endereço único uti-
lizado para identificar cada recurso na web; e Hypertext Transfer 
Protocol (HTTP), o protocolo de transferência de hipertexto, que 
permite a recuperação de sites da web.
Também escreveu o primeiro editor de páginas da web / browser 
(WorldWideWeb.app) e o primeiro servidor web (“httpd”).
No final de 1990, a empresa CERN tornou pública a primeira 
página, utilizando o conceito de World Wide Web.
1995 A exploração comercial da internet é liberada no Brasil.
Fonte: Internet Society (s.d.); Computer History Museum (s.d); World Wide Web Foundation (s.d.).
Programação Web
– 10 –
 Saiba mais
Acesse
<http://www.evolutionoftheweb.com/#/evolution/day> e
<http://ceweb.br/linhadotempo/>
para visualizar a evolução da internet e suas ferramentas.
1.3 Diferenças entre internet, 
intranet e extranet
Os ambientes de comunicação são classificados em três tipos de redes:
 2 Internet − redes de computadores interligadas, seguindo um con-
junto de normas e protocolos para conectar milhões de usuários 
no mundo inteiro. Disponibiliza informação de forma pública, 
ligada a uma grande variedade de tecnologias (mensagens, redes 
sociais, sistemas de gerenciamento, armazenamento em nuvem 
etc.) e, por meio de todas as tecnologias disponíveis, promove 
o surgimento de novas redes corporativas, classificadas pelo seu 
nível de abrangência.
 2 Intranet − rede fechada. Uso exclusivo e restrito a um local físico 
e, portanto, desenvolvida e utilizada apenas internamente em uma 
empresa. Toda a sua estrutura e funcionamento é baseada nos pro-
tocolos, regras e aplicativos da internet. Surgiu com o objetivo de 
centralizar as informações corporativas, melhorar a comunicação, 
diminuir custos e manter o nível de segurança.
– 11 –
Introdução à Programação Web
Figura 1.1 – Exemplo de intranet
Fonte: Elaborada pelo autor.
 2 Extranet − rede formada entre uma ou mais redes, na qual uma 
empresa e seus parceiros (clientes, colaboradores, fornecedores, 
representantes, distribuidores etc.) conectam-se. Esse tipo de cone-xão utiliza-se da internet pública para acessar a Intranet, promo-
vendo o acesso à informação e a interação da empresa com seus 
colaboradores mundialmente.
Programação Web
– 12 –
Figura 1.2 – Exemplo de extranet
Fonte: Elaborada pelo autor.
1.3.1 Comparativo entre redes
Para melhor entendimento, segue comparativo englobando as principais 
características de cada ambiente.
– 13 –
Introdução à Programação Web
Quadro 1.2 – Comparativo geral sobre os tipos de redes e sua abrangência
Acesso Usuários Informação
INTERNET
Público Qualquer usuário Grande gama de infor-
mações disponíveis de 
forma pública
INTRANET
Restrito aos 
funcionários 
da empresa
Usuários da rede 
interna
Rede privada. Compar-
tilhamento ocorre ape-
nas dentro da empresa
EXTRANET
Restrito a 
clientes e 
parceiros
Redes conectadas 
ou autorizadas
Informações comparti-
lhadas entre empresas 
específicas. Rede mista 
(pública e privada)
Fonte: Elaborado pelo autor.
1.4 Web 2.0
Criada em 2004 por Tim O’Reilly (precursor e chefe-executivo da 
O’Reilly Media), a web 2.0 é uma quebra de paradigma, pois apesar de ser uma 
nova versão da internet, não visa à atualização de suas especificações técnicas, 
mas promove e potencializa as formas de tratamento do conteúdo dinâmico no 
que se refere a publicação, gerenciamento, compartilhamento e organização das 
informações, gerando um ambiente de interação, com promoção da colabora-
ção e participação dos usuários como geradores de conteúdo.
A web 2.0 também tem um importante papel na criação e disponibiliza-
ção de novas estratégias mercadológicas e sociais, com ferramentas e serviços 
mais intuitivos e fáceis de usar, como por exemplo as WIKIS (coleções de 
páginas interligadas que possibilitam que o usuário não só as consulte, mas 
também as edite), softwares colaborativos, blogs, redes sociais, fotos e vídeos.
Por causa dessa nova visão, isto é, o conceito de “web como plataforma”, 
para que uma página seja reconhecida como pertencente ao padrão web 2.0, 
deve possuir as seguintes características:
Programação Web
– 14 –
 2 fornecer experiência de conteúdo e dinamismo;
 2 promover a participação e interação do usuário de forma colaborativa;
 2 possibilitar a construção coletiva do conhecimento, promovendo o 
conceito de “inteligência coletiva”.
Esse último aspecto chama a atenção para uma nova tendência presente 
na web 2.0: a internet vista como uma plataforma de desenvolvimento e 
trabalho, com ênfase no desenvolvimento como uma “arquitetura de partici-
pação” (O’REILLY, 2005), que salienta que os desenvolvedores devem apro-
veitar ao máximo as inúmeras possibilidades geradas pela rede de inteligência 
coletiva no desenvolvimento de seus aplicativos.
No que se refere ao efeito da web 2.0 na área de desenvolvimento, 
O’Reilly (2005) salienta algumas características desejáveis que devem estar 
presentes nos aplicativos:
 2 versão Beta contínua (“The Perpetual Beta”) − todos os apli-
cativos devem ser desenvolvidos em um processo de evolução 
contínua, isto é, aberto a melhorias baseadas no comprometi-
mento e experiência de seus usuários, que devem ser tratados 
como codesenvolvedores;
 2 reutilização/programação modular − módulos, dados e 
serviços disponíveis para serem utilizados por terceiros (outros 
desenvolvedores), formando um ciclo de colaboração. Para que isso 
seja possível, é necessário estimular que a programação modular 
contenha um código simples e objetivo;
 2 monitoramento em tempo real do comportamento do usuário 
(“User eXperience − UX”) – avaliar quais recursos são usados e de 
que forma são usados, utilizando essa estratégia para a tomada de 
decisão quanto à descontinuação ou distribuição de um aplicativo;
 2 tratamento do software como serviço e não como produto − 
outra mudança de paradigma: não se adquire mais produtos (por 
exemplo, o pacote Microsoft Office), mas paga-se pela utilização de 
um serviço disponível on-line (por exemplo, o Microsoft Office 365).
– 15 –
Introdução à Programação Web
1.5 Arquitetura cliente/servidor
Baseia-se no princípio do sistema estruturado como um conjunto de 
processos cooperativos, proporcionando o compartilhamento de recursos e 
serviços. Há a presença de máquinas com maior poder de processamento e 
armazenamento que atuam como servidores, disponibilizando recursos que 
serão requisitados por diversos computadores distribuídos (clientes). Vale 
salientar que, no modelo cliente/servidor, a comunicação sempre ocorrerá 
por meio de mensagens, com protocolos de comunicação simples de requisi-
ção ou resposta.
Um servidor sempre está em contínua execução, aguardando, recebendo 
e fornecendo serviços distribuídos para as diversas solicitações simultâneas 
de seus clientes. Esta arquitetura pode ser desenvolvida apenas com servidor 
central ou com múltiplos servidores distribuídos.
Já o cliente é responsável por iniciar e terminar interações com o servi-
dor, por meio de requisições de serviços e no aguardo da resposta do servidor, 
além de exercer a função de entrada/saída de dados e de comunicação com o 
usuário, de forma transparente, mas sem que ele perceba toda a engrenagem 
existente para atender às suas demandas.
As vantagens desse tipo de arquitetura podem ser caracterizadas por 
alguns aspectos:
 2 manutenibilidade − permite que um servidor possa ser atualizado 
ou até mesmo realocado de forma transparente ao cliente;
 2 integridade e confiabilidade − como os dados são armazena-
dos no servidor, seu processo de atualização é simples e fácil de 
administrar;
 2 transparência − quando um usuário acessa/requisita qualquer 
recurso ao servidor, o tipo de processo executado deve ocorrer 
de forma imperceptível, independentemente da localização do 
servidor;
 2 segurança − por causa da centralização dos dados e recursos em 
servidores, é mais fácil implantar e manter políticas de segurança.
Programação Web
– 16 –
Figura 1.3 − Arquitetura cliente/servidor
Fonte: Shutterstock.com/dny3d.
1.6 Protocolos
Para que a comunicação entre servidor e clientes funcione, é necessário 
o uso de diversos protocolos que executam funções específicas na internet:
 2 Internet Protocol ou Protocolo de Internet (IP) − é o protocolo 
que define um endereço exclusivo para cada dispositivo conectado 
na internet (notebooks, tablets, celulares etc.);
 2 Protocolo de Controle de Transmissão (TCP) − é o protocolo 
padrão de comunicação da internet e também pode ser utilizado 
em redes privadas;
 2 Hypertext Transfer Protocol ou Protocolo de Transferência de 
Hipertexto (HTTP) − é o protocolo padrão dos navegadores da 
web. Usa o modelo baseado na arquitetura cliente/servidor;
– 17 –
Introdução à Programação Web
 2 File Transfer Protocol ou Protocolo de Transferência de Arquivo 
(FTP) − padrão utilizado em transferências de arquivos, responsá-
vel pelo controle do envio e recebimento de arquivos;
 2 Secure Sockets Layer ou Camada de Portas de Segurança (SSL) 
− atua como um protocolo de segurança que possui a função de 
verificar a identidade e o nível de confiança de um servidor. Garante 
aspectos de integridade, privacidade e autenticação. Foi substitu-
ído em grande parte pelo Transport Layer Security, ou Segurança 
da Camada de Transporte (TLS), um protocolo considerado mais 
eficiente, por proporcionar maior segurança em autenticação de 
mensagens, geração de chaves criptografadas e suporte a algoritmos 
mais atuais;
 2 Simple Mail Transfer Protocol ou Protocolo para Transferência 
de E-mail Simples (SMTP) − é o protocolo padrão que define 
como ocorrerá o envio de mensagens por meio da internet;
 2 Internet Message Access Protocol ou Protocolo de Acesso ao 
Correio da Internet (IMAP) − protocolo que realiza a manipu-
lação de acessos simultâneos em várias caixas de e-mail. Realiza a 
sincronização das caixas de e-mail do servidor e do cliente e não 
possui limitação de acesso;
 2 Post Office Protocol ou Protocolo dos Correios (POP3) − desen-
volvido para o recebimento de mensagens deservidores de e-mail. 
Tem sua utilização limitada a apenas uma caixa de e-mail.
1.7 Tendências futuras
O ritmo, a velocidade e a amplitude da geração de novas tecnologias 
exigem do profissional da área de Tecnologia da Informação (TI) grande 
dedicação, para que se mantenha sempre atualizado e apto para adaptar essas 
tecnologias nos ambientes organizacionais.
A seguir destacamos algumas dessas tecnologias que prometem mudan-
ças profundas em nosso cotidiano.
Programação Web
– 18 –
1.7.1 Web 3.0
A web 3.0 promete promover uma mudança fundamental, focando 
seus esforços na organização de forma inteligente de toda a informação/
conhecimento existente na internet – a web artificialmente inteligente. A 
W3C encabeça esse desafio, criando um grupo de cientistas que possuem a 
difícil tarefa de encontrar novas tecnologias que permitam que esse objetivo 
seja alcançado.
Utilizando-se de recursos poderosos, que unem a inteligência artificial e 
o conceito de “semantic web” (tecnologia semântica), toda e qualquer infor-
mação disponível será analisada, classificada e armazenada de tal forma que o 
computador poderá aprender o que significam os dados, e assim gerar resul-
tados mais inteligentes e precisos. É capaz ainda de compreender as necessida-
des reais de cada usuário e disponibilizar conteúdo personalizado, associando 
não só informações, como também experiências e conhecimento adquirido 
por meio da web 2.0.
1.7.2 A internet das coisas (IOT)
Alguns pesquisadores consideram que a existência do IOT já é um indí-
cio da presença da web 3.0 nos dias atuais. A Internet of Things (Internet das 
Coisas) é uma rede de objetos autônomos conectados à internet por meio de 
sensores incorporados, que permitem, por meio da coleta e troca de dados, 
sua monitoração e controle de forma remota.
A quantidade de objetos que utilizam a tecnologia IOT é imensa, 
incluindo quase tudo no mundo real, desde objetos da vida cotidiana (carros, 
celulares, calçados, relógios, cafeteiras, máquinas de lavar, refrigeradores, rou-
pas, fones de ouvido, lâmpadas etc.) até a aplicação em indústrias, transporte 
público, empresas aéreas, telecomunicação, dentre outros.
O principal objetivo em utilizar esta tecnologia é a monitoração de 
informações sobre status, localização, funcionalidades e problemas. Estas 
informações podem nos auxiliar na redução de desperdício e em melhorar 
significativamente a eficiência na utilização e operação. E mais além, demons-
trando um grande potencial de controle sobre como vivemos e trabalhamos.
– 19 –
Introdução à Programação Web
A realidade é que a IOT apresenta possibilidades intermináveis, cujo 
impacto ainda não é possível prever ou compreender por inteiro. No futuro, 
a nova regra será: “qualquer coisa que possa ser conectada, estará conectada”.
Figura 1.4 – Representação da tecnologia IOT
Fonte: Shutterstock.com/Macrovector.
1.7.3 Arquitetura Cloud-client computing
O conceito de cloud computing (computação em nuvem) já faz parte do 
cotidiano da maioria das pessoas e empresas. O servidor não fica mais situado 
em uma empresa, e sim baseado na internet, sendo utilizado como um ser-
viço contratado que permite que os usuários acessem arquivos, aplicativos e 
sistemas operacionais de qualquer lugar com acesso à internet.
A utilização de um data center em nuvem ou de diversos data centers 
interligados em substituição ao usual servidor, caracteriza-se por um novo 
modelo denominado client-cloud (cliente-nuvem). O uso de virtualização 
aumenta exponencialmente a eficiência, a capacidade de resposta às requisi-
ções de serviços e recursos, o compartilhamento e a flexibilidade de uso.
Programação Web
– 20 –
1.8 Conceitos importantes
A seguir serão apresentados alguns conceitos fundamentais para ambien-
tar o aluno aos temas que serão abordados ao longo deste livro.
 2 HTML: o Hypertext Markup Language (Linguagem de Marcação 
de Hipertexto) é a linguagem básica para o desenvolvimento de 
páginas para a web.
 2 HTML5: é a versão mais atual do HTML.
 2 CSS: linguagem de configuração visual de páginas; define o estilo.
 2 CSS3: versão mais atual do CSS.
 2 JavaScript: linguagem interpretada que é responsável pela defini-
ção do comportamento dos elementos de uma página. Por exem-
plo: o que deve ocorrer quando o usuário clica em um botão.
 2 JQuery: framework de JavaScript, isto é, uma biblioteca contendo 
funções e métodos para serem utilizados em JavaScript.
 2 Bootstrap: framework desenvolvido pelo Twitter, que aperfeiçoa 
o layout do CSS. Baseia-se na tecnologia mobile ou tecnologia res-
ponsiva, permitindo tratar o layout de uma página sem digitar uma 
linha de CSS.
 2 PHP: linguagem de programação web que permite o desenvolvi-
mento de sites dinâmicos. É um código executado apenas no servi-
dor, isto é, ele executa o programa PHP e retorna apenas a página 
HTML para o cliente.
 2 Sites responsivos: sites com layout adaptável a qualquer dispositivo.
1.9 Desenvolvimento em camadas
O desenvolvimento web está baseado em três camadas: informação, forma-
tação e comportamento. O desenvolvimento em camadas possibilita que cada 
camada seja independente uma da outra. Ou seja, se for necessário alterar a for-
mação de uma página, isso pode ser feito somente alterando o CSS, não necessi-
tando alterar o HTML, Javascript ou códigos de programação (Java, PHP etc.).
– 21 –
Introdução à Programação Web
 2 Primeira camada: informação − é a camada mais importante. Ela 
contém a base de tudo, ou seja, a informação, e está a cargo do 
HTML, que estrutura essa informação dando a ela significado. Sis-
temas, aplicações e robôs de pesquisa identificam esse significado e 
podem acessar e reutilizar essas informações. É requisito da internet 
que a informação esteja disponível a qualquer hora, lugar e acessível 
por qualquer dispositivo.
É importante ter em mente que nós, seres humanos, conseguimos 
distinguir facilmente em um texto o que é um título, um parágrafo, 
uma imagem etc. Mas o que ocorre com as máquinas que não 
possuem essa capacidade? E quando nos referimos a “máquina”, 
estamos falamos sobre navegadores, aplicações, sistemas de busca, 
smartphones etc. É por isso que o HTML é tão importante, pois é 
responsável por fazer essa identificação, “traduzindo” os elementos 
presentes na página (título, parágrafo, imagem etc.).
Deve-se ter em mente que, mesmo que a apresentação falhe (pro-
blemas no CSS ou JavaScript desabilitado no navegador), a infor-
mação requerida deve ser entregue, não importando o visual.
 2 Segunda camada: formatação – é responsável por controlar o 
visual, ou seja, como a informação será apresentada para o usuário. 
Essa responsabilidade fica a cargo do CSS. O CSS é a linguagem 
responsável por criar o visual. Ela formata o conteúdo por meio de 
regras. Essas regras controlam deste o tamanho da fonte, a cor do 
fundo da página, a posição do texto etc. Essa apresentação deverá 
funcionar independentemente do meio de acesso, podendo ser: siste-
mas de busca, aplicações, smartphones, tablets etc. Caso você esteja 
utilizando um leitor de tela, o CSS poderá controlar como a voz do 
leitor sairá pelas caixas de som. Tenha em mente que o CSS é respon-
sável pela apresentação do conteúdo em qualquer dispositivo.
 2 Terceira camada: comportamento – define-se nesta camada quais 
serão os comportamentos que cada elemento deverá possuir. Atual-
mente, o Javascript é o principal responsável por essa camada. Por 
meio do Javascript, definiremos se os elementos serão rotaciona-
dos, arrastados, dimensionados e como serão suas características. 
Programação Web
– 22 –
Resumindo, o Javascript controla os valores definidos pelo CSS e 
manipula estas propriedades.
Atualmente, o CSS3 também pode controlar alguns comporta-
mentos simples, como por exemplo, transições no estado do ele-
mento, animações etc.
Síntese
Neste capítulo foram discutidos tópicos introdutórios do mundo web, 
transitando desde a sua origem, com fins militares; sua evolução,interco-
nectando instituições de ensino; até o ponto em que se tornou uma rede 
mundial. Além disso, foram diferenciados os tipos de rede e seus ambientes 
de comunicação, verificando as principais diferenças entre internet, intranet e 
extranet. Navegamos também pelos tipos de comunicação conhecidos como 
protocolos (TCP/IP, HTTP etc.) e pela arquitetura cliente/servidor, distin-
guindo o papel de cada elemento no contexto.
Também abordamos as tendências futuras, como a internet das coisas, 
que revolucionará a forma como interagiremos no cotidiano, permitindo a 
comunicação com qualquer dispositivo.
Por fim, introduzimos alguns conceitos para os futuros profissionais de 
desenvolvimento web (sites responsivos, linguagem de marcação HTML, 
CSS, Framework etc.), e salientamos a importância do desenvolvimento em 
camadas, no qual cada componente de software está organizado de acordo 
com sua finalidade.
Atividades
1. Na arquitetura cliente/servidor, é característica de um servidor:
a) receber e responder a solicitações.
b) iniciar e terminar as conversações.
c) não prestar serviços distribuídos.
d) executar o software apenas quando for chamado.
– 23 –
Introdução à Programação Web
e) comunicar-se continuamente com outros servidores.
2. As redes aplicadas aos negócios são utilizadas pelas empresas com fina-
lidades comerciais e corporativas. Sobre estas redes, pode-se afirmar:
a) a intranet é uma rede interna, fechada e exclusiva, com acesso 
somente para os funcionários de uma determinada empresa, libe-
rado somente no ambiente de trabalho e em computadores regis-
trados na rede. Essa restrição do ambiente de trabalho é necessária, 
já que as intranets são necessariamente LANs construídas sobre a 
internet. Em outras palavras, não é possível acessar intranets de 
outro computador ligado à internet.
b) as intranets são redes restritas e fechadas a membros de um grupo 
ou funcionários de uma empresa. Uma intranet é uma versão par-
ticular da internet que funciona somente conectada a ela. Essa rede 
pode servir para troca de informação, mensagens instantâneas, 
fóruns ou sistemas de gerenciamento de sites ou serviços on-line.
c) uma extranet pode conectar funcionários de uma empresa que 
trabalham em escritórios diferentes ou pode facilitar a logística de 
pedidos justamente por interligar diferentes departamentos de uma 
mesma empresa em uma mesma rede, mas sempre numa configu-
ração de rede local.
d) a diferença entre intranet e extranet está em quem gerencia a rede 
e nos protocolos que utilizam. O funcionamento é o mesmo, a 
arquitetura da rede é a mesma, mas a extranet não utiliza os pro-
tocolos HTTP, SMTP e FTP. Além disso, em uma intranet, quem 
a gerencia é só uma empresa, enquanto que em uma extranet os 
gerentes são as várias empresas que compartilham a rede.
e) quando alguma informação da intranet é aberta a clientes ou for-
necedores da empresa, essa rede passa a ser chamada de extranet. 
A extranet é formada por redes privadas que compartilham uma 
rede entre si para facilitar pedidos, pagamentos e o que mais pre-
cisarem. Em uma extranet a empresa abre uma parte de sua rede 
para contato com o cliente ou permite uma interface de acesso dos 
fornecedores a rede.
Programação Web
– 24 –
3. A transferência de um arquivo de um computador local para um 
servidor na internet é denominada:
a) casting.
b) download.
c) upload.
d) backup.
e) SMTP.
4. Tim O’Reilly, um precursor do uso do termo web 2.0, define que:
I. o termo significa a mudança para uma internet como plata-
forma e um entendimento das regras para obter sucesso nesta 
nova plataforma.
II. a regra mais importante é o uso de aplicativos isolados, que se 
tornam melhores quanto mais são usados pelas pessoas, apro-
veitando a inteligência individual.
III. as regras referenciadas em I, feitas por O’Reilly, nunca foram 
discutidas, mesmo que de alguma outra forma, antes do sur-
gimento do termo web 2.0.
Assinale a alternativa que representa as afirmativas corretas:
a) somente a afirmativa I está correta.
b) somente a afirmativa II está correta.
c) somente a afirmativa III está correta.
d) as afirmativas I e II estão corretas.
e) todas as alternativas estão corretas.
2
HTML
A demanda por profissionais com conhecimento no desenvol-
vimento para web cresce a cada ano. Esses profissionais são alvo de 
empresas que buscam pessoas capazes de criar websites dinâmicos, 
responsivos e funcionais. O processo de desenvolvimento web refere-
-se à construção de sites que satisfaçam a necessidade do usuário.
Vale salientar que um site é diferente de outro. Cada um 
possui um público-alvo e objetivos diferentes. Sendo assim, para 
um profissional desta área, é exigida uma gama de conhecimentos, 
como: HTML, CSS, JavaScript, jQuery, linguagem de programa-
ção servidor (PHP, .NET, Java etc), usabilidade, entre outros. Afi-
nal, cada página tem suas características e são elas que representam 
a preferência do cliente.
Neste capítulo, serão abordados os seguintes assuntos: lin-
guagem HTML, finalidade, estrutura, tags principais, tags para cria-
ção de formulário e o funcionamento da característica de herança 
entre os elementos do HTML.
Ricardo Sonaglio Albano
Programação Web
– 26 –
 Saiba mais
Softwares utilizados neste capítulo:
Para que você possa acompanhar todos os códigos produzidos neste 
capítulo, é importante que você possua algum tipo de editor de texto 
simples, como o bloco de notas.
Sugestão:
Instale o Notepad++, que é um editor de texto com mais recursos 
que o bloco de notas. Obviamente, você pode optar pelo editor de 
sua preferência. Há diversos softwares e IDEs para desenvolvimento.
2.1 Introdução ao HTML
A sigla HTML significa Hyper Text Markup Language, ou seja, Lingua-
gem de Marcação de Hipertexto, tendo como finalidade a criação de páginas 
web. O HTML é a base do desenvolvimento web e toda a estrutura de um 
site é escrita em HTML. 
Por meio do HTML, podemos criar qualquer tipo de site (um buscador, 
um e-commerce, uma rede social) e inserir uma diversidade de recursos ao 
mesmo (textos, vídeos, imagens, sons etc).
É importante salientar que o HTML não é uma linguagem de 
programação, e sim, como o próprio nome diz, uma linguagem de marca-
ção. Esse é um equívoco bastante comum, pois o termo “programação” é 
bastante utilizado quando nos referimos ao desenvolvimento em HTML. 
Mas é necessário entender a diferença: Uma linguagem de programação 
deve ser capaz de fazer cálculos, mudar informações contidas em variáveis, 
tomar decisões, mudar o fluxo de execução. Algo que realmente não conse-
guimos fazer em HTML.
Atualmente, o HTML está na versão 5, com a implementação de novas 
funcionalidades que facilitam a criação de páginas com mais recursos, o que 
– 27 –
HTML
está de acordo com uma das principais características do HTML, que é a 
facilidade de compreensão e de implementação.
2.2 HTML5
O HTML5 surgiu em 2008, quando o W3C divulgou as primeiras 
especificações sobre a nova versão. Além de ser uma nova versão do HTML, 
é também um conjunto de tecnologias que permite a criação de aplicações 
mais poderosas.
A semântica é importante para que os programas possam utilizar melhor 
a informação distribuída na web. Antes do HTML5, não havia como identi-
ficar em uma página o que era cabeçalho, rodapé etc. Não havia uma tag com 
essa finalidade. Tudo era separado por meio de DIVs.
O HTML5 introduziu novos elementos (novas tags) que auxiliam os nave-
gadores a entenderem melhor as páginas que montam para o usuário. Além 
disso, com as novas tags, com valor semântico, os motores de busca têm maior 
compreensão sobre cada parte do site e, com isso, podem fazer inferências sob 
as informações de acordo com o sentido e o contexto, oferecendo aos usuários 
resultados mais relevantes. Inclusive, proporcionam um grande ganho para a 
acessibilidade. Seguem algumas das novidades presentes no HTML5:
 2 novas tags com significados semânticos que possibilitam maior 
acessibilidadeaos usuários;
 2 inclusão do elemento Canvas, que permite o desenho e renderiza-
ção de elementos gráficos usando JavaScript;
 2 maior compatibilidade com o CSS e o JavaScript;
 2 novos significados para alguns elementos;
 2 melhor tratamento de exceção;
 2 independência de plataforma;
 2 possibilidade de criar sites responsivos;
 2 redução da necessidade de plugins externos.
Programação Web
– 28 –
Figura 2.1 – Comparativo entre o uso de DIVs e as novas tags
Fonte: Elaborada pelo autor.
É importante afirmar que isso não significa que não usaremos mais o 
DIV no HTML5. O seu uso será apenas mais específico, não sendo mais 
utilizado de forma tão generalizada como antes. Por exemplo: ao diferenciar 
dois parágrafos em um SECTION, o DIV poderá ser usado.
2.3 W3C
Segundo o W3C Brasil,
o Consórcio World Wide Web (W3C) é um consórcio internacio-
nal no qual organizações filiadas, uma equipe em tempo integral e o 
público trabalham juntos para desenvolver padrões para a Web. Lide-
rado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o 
W3C tem como missão Conduzir a World Wide Web para que atinja 
todo seu potencial, desenvolvendo protocolos e diretrizes que garan-
tam seu crescimento de longo prazo.
2.4 Browser
Browser ou navegador é o software que permite a interação do usuá-
rio com a internet. É por meio dele que o usuário acessa todo o conteúdo 
– 29 –
HTML
disponível na rede. Os navegadores têm como função ler o código HTML, 
interpretá-lo e montar a página solicitada pelo usuário.
Há diversos Browsers disponíveis. Os mais conhecidos são: Chrome, 
Safari, Ópera, Internet Explorer e Mozilla Firefox.
Figura 2.2 − Logotipos dos navegadores
Fonte: AWS – Atomic Web Strategy.
2.4.1 Motores de renderização
Quantas vezes já nos deparamos com o mesmo site sendo apresentado 
de forma diferente em navegadores diferentes? Isso é comum. Mas por que 
isso acontece?
Os navegadores utilizam motores de renderização diferentes. A função 
do motor de renderização é justamente montar, desenhar a página. A página 
é composta de vários códigos que informam ao navegador o que e como deve 
ser feito. E cada motor de renderização interpreta esses códigos de uma forma.
Segue quadro com os motores de renderização dos principais navegadores.
Quadro 2.1 – Motores de renderização
Motor Browser
WebKit Safari, Google Chrome
EdgeHTML Microsoft Edge
Gecko Firefox
Presto Opera 7 e superior
Fonte: Elaborado pelo autor.
Programação Web
– 30 –
Vale salientar que uma página HTML é montada de cima para baixo, 
na ordem em que os componentes estão escritos no código. Nos casos onde o 
desenvolvimento da página necessite ser estruturado em colunas, será neces-
sário configurar sua ordem utilizando CSS. 
2.5 Estrutura básica do HTML
A seguir apresentamos, por meio de código, a estrutura básica de uma 
página HTML5.
<!DOCTYPE html>
<html>
 <head>
 <title>Título da página</title>
 </head>
 <body>
 Conteúdo que será exibido ao usuário
 </body>
</html>
Compreensão da estrutura da página:
 2 DOCTYPE − indica para o navegador a versão do HTML (especi-
ficação) que está sendo utilizada. Neste caso, o HTML5.
 2 HTML − o elemento principal da estrutura.
 2 HEAD − título da página, informações e configurações sobre a página. 
As informações contidas aqui não serão exibidas para o usuário.
 2 BODY − possui o conteúdo que será exibido no browser. Tudo que 
estiver dentro do BODY será exibido para o usuário.
2.5.1 Criação do primeiro exemplo prático
 2 Digite a estrutura a seguir no editor de texto.
<!DOCTYPE html>
<html>
 <head>
 <title>Estrutura Básica</title>
 </head>
– 31 –
HTML
 <body>
 Hello, World!!!
 </body>
</html>
 2 Salve o arquivo com um nome. Por exemplo, index.html.
 2 A extensão do arquivo é muito importante. Sempre deve ser defi-
nida como HTML. Essa extensão irá indicar ao navegador que o 
arquivo é uma página HTML.
 2 Para abrir o arquivo no navegador, vá até a pasta onde salvou o 
arquivo e clique com o botão direito sobre o arquivo. Escolha a 
opção “Abrir com” e então o navegador da sua preferência.
Figura 2.3 – Abrindo o arquivo
Fonte: Elaborada pelo autor.
 2 Resultado do código:
Figura 2.4 – Exemplo da estrutura básica do HTML
Fonte: Elaborada pelo autor.
Programação Web
– 32 –
2.6 Tag
Uma tag indica um elemento do HTML e é composta por um sinal de 
menor “<”, o nome do elemento e o sinal de maior “>”. Exemplo: <html>
Normalmente há uma tag de abertura <html> e a uma tag de fecha-
mento </html>. A tag de fechamento possui a uma barra “/” antes do nome 
do elemento. Mas existem algumas tags que não possuem fechamento. Por 
exemplo: a tag de quebra de linha (break row) <br>. Nestes casos, também 
pode ser utilizada a barra no final da própria tag <br />. Essas tags são conhe-
cidas como “self closing tags”.
Ao escrever o código HTML, deve-se ter atenção quanto à ordem de 
fechamento das tags. A primeira tag a ser aberta deverá ser a última a ser fechada.
Exemplos:
 2 Correto: <p> texto, texto <br/> <h2> Titulo </h2> </p>
 2 Incorreto: <p> texto, texto <br/> <h2> Titulo </p> </h2>
2.6.1 Atributo
As tags podem possuir atributos que são responsáveis por definir algu-
mas propriedades da tag. Estudaremos, detalhadamente, os atributos mais 
à frente.
Exemplos:
<p id=”resumo”>Este texto resume tudo</p>
<a href=”http://fael.edu.br/”>FAEL</a>
<table id=“notas”>
<li class=“itens”>
2.6.2 Tipos de elementos
Há, no HTML, dois tipos de elementos: os elementos de linha e os 
de bloco. São importantes pois interferirem no comportamento visual 
do elemento.
– 33 –
HTML
 2 Elementos de bloco: ocupam todo o espaço horizontal disponível, 
ou seja, ocupam a linha inteira da página. Os próximos elementos 
começarão na próxima linha livre. Elementos de bloco: div, h1 à 
h6, p, blockquote, ul, ol, form.
 2 Elementos de linha: ocupam apenas o espaço necessário. Novos 
elementos podem ocupar a mesma linha, caso haja espaço para isso. 
Elementos de linha: a, img, input, span.
Além disso, os elementos de linha não podem conter elementos de 
bloco. Já os elementos de bloco podem conter os elementos de linha. Por 
exemplo: uma lista ordenada (ol), pode conter uma imagem (img). Mas uma 
imagem não pode conter uma lista.
2.7 Principais tags
O quadro a seguir contém as principais tags utilizadas no desenvolvi-
mento de páginas web:
Quadro 2.2 – Tags
Tipo tags
Estrutural <html>, <head>, <title>, <body>
Meta informações <meta>
Script <script>, <noscript> 
Comentário <!-- [comentário] -->
Texto <p>, <br>
Título <h1> a <h6>
Listas <ol>, <ul>, <li>, <dl>
Links <a>
Imagens <img>
Tabelas <table>, <tr>, <td>
Negrito e Itálico <Strong>..</Strong> e <em>..</em>
Formulários <input>
Programação Web
– 34 –
Tipo tags
Outras <div> <span>
Fonte: Elaborado pelo autor.
Observação:
Vale salientar que as configurações de apresentação das tags (cor da fonte, 
tamanho da fonte, cor de fundo, bordas etc.) serão discutidas no próximo 
capítulo que tratará sobre o CSS.
 Saiba mais
Descubra mais sobre as tags , acessando o site do W3School: 
<https://www.w3schools.com/>. Nesse site você encontrará todas 
as tags e atributos do HTML5 com exemplos.
2.7.1 Meta
Segundo a especificação do W3C, a tag Meta representa vários tipos de 
metadados que não podem ser informados usando os elementos título, base, 
link, estilo e script. O principal atributo desta tag é o CHARSET. Ele indica 
o conjunto de caracteres que será usado na página. Atualmente utiliza-se 
o padrão UTF-8 de configuração para evitar a apresentação de caracteres 
desconfigurados, principalmente no que se refere à acentuação na página.
A tag Meta localiza-se dentro do cabeçalho da página <head>.
Exemplo:
<!DOCTYPE html>
<html>
 <head>
 <meta charset=”UTF-8”>
 <title>Exemplo COM tag META</title>
 </head>
 <body>
 Apresentação
 </body>
</html>
– 35 –
HTML
 Importante
A partir deste ponto, com raras exceções, os códigos serão apresen-
tados contendo somente a seção BODY do HTML, pois as demaisseções não sofrerão qualquer alteração. 
2.7.2 Script
A tag <script> é utilizada para declarar um trecho de código dentro de 
um documento HTML, permitindo a inserção de códigos, como por exem-
plo, um código JavaScript.
Exemplo: 
 <body>
 <script type=”text/javascript”>
 document.write(“Exemplo da tag Script”)
 </script>
 </body>
Resultado:
Figura 2.5 – Exemplo da tag script
Fonte: Elaborada pelo autor.
2.7.3 Comentários
Sempre é importante documentarmos o que estamos fazendo. Desta 
forma, ficará mais fácil para futuras manutenções. 
Programação Web
– 36 –
No HTML, para inserirmos um comentário, usamos a tag: <!-- [comen-
tário] -->
Exemplo:
 <head>
 <meta charset=”UTF-8”>
 <!-- Todo esse texto não aparecerá na página -->
 <title>Comentário</title>
 </head>
 <body>
 Vou escrever um texto que será comentário.
 <!-- Todo esse texto não aparecerá na página -->
 </body>
Resultado:
Figura 2.6 – Exemplo de comentário
Fonte: elaborada pelo autor.
Note que o texto presente no código “Todo esse texto não apare-
cerá na página”, realmente não aparece na tela. Ele é apenas um comen-
tário interno, utilizado para documentar o código da página e pode ser usado 
em qualquer parte do documento HTML. 
2.7.4 Parágrafo e quebra de linha
A tag <p>, representa um parágrafo de texto. Já a tag <br>, representa 
a quebra de linha. Em HTML, quando digitamos um texto e teclamos o 
ENTER, o navegador não interpreta esse ENTER como quebra de linha. 
Para isso deveremos utilizar a tag <br/>.
 Saiba mais
Gerando texto: quando você estiver desenvolvendo uma página
– 37 –
HTML
que ainda não possui um conteúdo definitivo e necessita testar a 
sua página, utilize um gerador de texto. No link <http://br.lipsum.
com/>, você pode gerar parágrafos, listas, palavras etc.
Exemplo: 
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. 
 Morbi ullamcorper nunc magna, at molestie mi 
ultrices sed. 
 Nulla nec tincidunt nunc, eget pulvinar neque. 
 </p>
 </body>
Resultado:
Figura 2.7 – Exemplo de parágrafo sem quebra de linha
Fonte: Elaborada pelo autor.
Note que o texto em HTML fez uso do ENTER, no final de cada linha, 
mas o navegador não reconhece como quebra de linha.
Adicionando a tag <br/>
Exemplo: 
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.<br/>
 Morbi ullamcorper nunc magna,at molestie mi 
ultrices sed.<br/>
 Nulla nec tincidunt nunc, eget pulvinar neque. 
<br/>
 </p>
 </body>
Programação Web
– 38 –
Resultado:
Figura 2.8 – Exemplo de parágrafo com quebra de linha
Fonte: Elaborada pelo autor.
Note que por meio do uso da tag <br /> no final das linhas, o navegador 
foi capaz de reconhecer a quebra de linha.
2.7.5 Títulos
Normalmente, dividimos o conteúdo de uma página por meio de títu-
los. Esses títulos possuem uma hierarquia, um nível de importância. Os mes-
mos são descritos como: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, nos quais a 
tag H1 é caracterizada por ser o título principal (maior relevância) da página. 
Já o H6, é o título de menor relevância.
Exemplo:
 <body>
 <h1>Título Principal</h1>
 <p> Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. </p>
 <h2>Título H2</h2>
 <p> Nunc nec gravida mauris. Donec quis tincidunt 
massa.</p>
 <h3>Título H3</h3>
 <p> Aliquam eget risus pretium, laoree, hendrerit 
velit. </p>
 <h4>Título H4</h4> 
– 39 –
HTML
 <p> Suspendisse ligula orci, accumsan non, 
molestie felis.</p>
 <h5>Título H5</h5>
 <p> Donec iaculis, orci quis varius accumsan, 
erat mauris.</p>
 <h6>Título H6</h6>
 <p> Sed vel mauris sit amet quam interdum 
elementum. </p>
 </body>
Resultado:
Figura 2.9 – Exemplo das tags de cabeçalho
Fonte: Elaborada pelo autor.
Programação Web
– 40 –
2.7.6 Listas
É um tipo de tag bastante utilizada e possui três tipos de lista: 
 2 listas ordenadas <ol>;
 2 listas não ordenadas <ul>;
 2 listas de definição <dl>.
Cada item da lista é um list, representado pela tag <li>.
Exemplo de lista ordenada:
 <body>
 <h1>Campeões Mundiais</h1>
 <ol>
 <li>Brasil</li>
 <li>Alemanha</li>
 <li>Itália</li>
 </ol>
 </body>
Resultado:
Figura 2.10 – Exemplo de listas ordenadas <ol>
Fonte: Elaborada pelo autor.
Ressaltamos que, por meio do CSS, poderemos alterar o tipo de nume-
ração (números romanos, letras) apresentado nas listas.
Exemplo de lista não-ordenada (apresentação do trecho):
– 41 –
HTML
 <body>
 <h1>Lista de compras</h1>
 <ol>
 <li>Arroz</li>
 <li>Feijão</li>
 <li>Massa</li>
 </ol>
 </body>
Resultado:
Figura 2.11 – Exemplo de listas não ordenadas <ul>
Fonte: Elaborada pelo autor.
É possível alterar os tipos de marcadores (círculo, quadrado, elipse), 
realizando a alteração por meio do CSS.
Exemplo de lista de definição:
 <body>
 <h1>Lista de termos</h1>
 <dl>
 <dt>Internet</dt>
 <dd>Rede de computadores mundial</
dd>
 <dt>HTML</dt>
 <dd>Linguagem de marcação</dd>
 </dl>
 </body>
Resultado:
Programação Web
– 42 –
Figura 2.12 – Exemplo de listas de definição <dl>
Fonte: Elaborada pelo autor.
2.7.7 Links
Por meio da tag <a> conseguimos definir links que direcionam o usuário 
para outras páginas ou para áreas específicas da própria página. Para essa tag, 
devemos usar o atributo HREF. É onde será definido o endereço (URL) que 
será acessado, quando o usuário clicar no texto de referência.
Exemplo:
 <body>
 <h1>Exemplo de link</h1>
 <a href=”http://www.fael.edu.br”>FAEL</a>
 </body>
Resultado:
Figura 2.13 – Exemplo link <a>
Fonte: Elaborada pelo autor.
– 43 –
HTML
Note que, ao clicarmos no texto FAEL, seremos direcionados para a 
página da Fael. Sendo que a página será aberta na aba atual do usuário. Mas 
também podemos adicionar o atributo target= “_blank” na tag e, assim, 
quando o usuário clicar no link, a página solicitada será aberta em uma 
nova aba.
Por exemplo: <a href=”http://www.fael.edu.br” target=”_
blank”>FAEL</a>
2.7.8 Imagens
Em HTML, inserimos imagens por meio da tag img. Essa tag possui os 
seguintes atributos:
 2 src (source / origem) − para indicar o nome do arquivo;
 2 width (largura) e height (altura) − define o tamanho da imagem em 
pixels. Vale salientar que o mais adequado é incluir a imagem na 
página já no tamanho desejado, sem redimensionar. O redimensio-
namento faz com que o navegador carregue a imagem no tamanho 
real do arquivo e depois altere para o tamanho desejado. E isso 
consome tempo. Caso haja a necessidade de redimensionar uma 
imagem, utilize um software de tratamento de imagem e salve com 
o tamanho desejado;
 2 alt − com este atributo podemos incluir um texto que será uma 
alternativa para pessoas com deficiência visual. Quando o usuário 
posicionar o mouse sobre a imagem, o navegador apresentará o 
texto contido no atributo alt.
Exemplo:
 <body>
 <img src=”imagens/fael.png” alt=”logo da 
instituição” />
 </body>
Resultado:
Programação Web
– 44 –
Figura 2.14 – Exemplo imagem <img>
Fonte: Elaborada pelo autor.
Vamos alterar a largura e altura da imagem para que possamos comparar.
Exemplo:
 <body>
 <h3>Imagem tamanho real</h3>
 <img src=”imagens/fael.png” alt=”logo da instituição” />
 <h3>Imagem com Altura e largura</h3>
 <img src=”imagens/fael.png” alt=”logo da 
instituição” width=”150” height=”150”/>
 </body>
Resultado:
Figura 2.15 – Exemplo da imagem <img> com redimensionamento
Fonte: Elaborada pelo autor.
– 45 –
HTML
Imagem com erro: caso ao incluir uma imagem seja apresentado o resul-
tado a seguir, isso significa que houve algum problema na tag, isto é, o nave-
gador não encontrou a imagem. Isso pode ter ocorrido por diversos motivos, 
tais como:
 2 o caminho da pasta está incorreto; 
 2 o nome do arquivo está errado;
 2 a extensão do arquivo está errada.
Figura 2.16 – Exemplo de uma imagem <img> com erro
Fonte: Elaborada pelo autor.
2.7.9 Tabelas
Nas páginas, é muito comum o uso do recurso de tabelas, sendo utilizada 
para diversas situações: apresentar informações, formulário, imagens, etc. 
Para construiruma tabela são necessárias as seguintes tags:
Quadro 2.3 – Tags usadas para criação de tabelas
Tag Função
<table> .. </table> Indica o início e o final da tabela. 
<tr> </tr> Início de uma linha na tabela. 
<th> </th> Indica que é uma coluna de cabeçalho
<td> </td> Define a coluna do corpo da tabela.
Fonte: Elaborado pelo autor.
Programação Web
– 46 –
Além disso, é possível mesclar linhas e colunas por meio dos atributos 
COLSPAN e ROWSPAN.
Exemplo 1:
 <body>
 <h3>Tabela simples</h3>
 <table>
 <tr>
 <th>Nome do Aluno</th>
 <th>Média</th>
 </tr>
 <tr>
 <td>Ana Silva</td>
 <td>9,0</td>
 </tr>
 <tr>
 <td>José Lima</td>
 <td>8,5</td>
 </tr>
 </table>
 </body>
Resultado:
Figura 2.17 – Exemplo de tabela <table>
Fonte: Elaborada pelo autor.
Exemplo 2:
No código a seguir, usamos o COLSPAN em duas colunas. Isso significa 
que ele mesclou as duas colunas em uma única coluna.
– 47 –
HTML
 <body>
 <h3>Tabela simples</h3>
 <table>
 <tr>
 <th>Mês</th>
 <th>Despesas</th>
 </tr>
 <tr>
 <td>Janeiro</td>
 <td>R$ 1.000,00</td>
 </tr>
 <tr>
 <td>Fevereiro</td>
 <td>R$ 1.200,00</td>
 </tr>
 <tr>
 <td colspan=”2”>2.200,00</td>
 </tr>
 </table>
 </body>
Resultado:
Figura 2.18 – Exemplo de tabela <table> com COLSPAN
Fonte: Elaborada pelo autor.
Exemplo 3:
Programação Web
– 48 –
Neste caso, usamos o ROWSPAN em duas linhas. Isso significa que ele 
mesclou as duas linhas em uma única linha.
 <body>
 <h3>Tabela simples</h3>
 <table>
 <tr>
 <th>Mês</th>
 <th>Despesas</th>
 <th>Economia</th>
 </tr>
 <tr>
 <td>Janeiro</td>
 <td>R$ 1.000,00</td>
 <td rowspan=”2”>R$ 150,00</td>
 </tr>
 <tr>
 <td>Fevereiro</td>
 <td>R$ 180,00</td>
 </tr>
 </table>
 </body>
Resultado:
Figura 2.19 – Exemplo de tabela <table> com ROWSPAN
Fonte: Elaborada pelo autor.
 Importante
Você deve ter percebido que as tabelas desenvolvidas não apresen-
tam bordas. Esse tipo de configuração é realizado pelo CSS.
– 49 –
HTML
2.7.10 Negrito, itálico e caracteres especiais
Para adicionar a formatação negrito e itálico utiliza-se, respectivamente, 
as tags <strong> e <em>.
Exemplo:
 <body>
 <p>Atualmente utiliza-se a tag <strong>STRONG</
strong><br/></p>
 <p>E para itálico é utilizada a tag <em> EM </em>
 <p>Para mostrar uma tag &lt;p&gt; usamos 
caracteres especiais</p>
 <p>&copy; 2017 − FAEL</p>
 </body>
Resultado:
Figura 2.20 – Exemplo negrito <STRONG>, itálico <EM>
Fonte: Elaborada pelo autor.
Note que dentro do texto é apresentado “tag <p>”. Como isso é possível? 
Por que o navegador não interpretou essa tag? O segredo é a utilização dos 
caracteres especiais “&lt;” que impedem que o navegador reconheça o texto 
como uma tag.
2.7.11 Formulário
Importante elemento utilizado para a interatividade do usuário com a 
página. É por meio do formulário que as informações fornecidas pelo usuário 
serão repassadas para o servidor.
Programação Web
– 50 –
Os formulários são compostos por campos que devem ser preenchidos 
pelo usuário e enviados para o servidor onde está hospedado o site. Mas o que 
ocorre quando enviamos um formulário? 
 2 O usuário preenche o formulário e o envia;
 2 O navegador empacota os dados e os envia para o servidor web;
 2 O servidor web recebe os dados e encaminha para a aplicação que 
processará os dados;
 2 A aplicação processa os dados, criando a nova página e reenvia para 
o servidor;
 2 O servidor envia esta nova página para o browser;
 2 O browser exibe esta nova página para o usuário.
Para criarmos um formulário usamos as tags <form> </form> e, seme-
lhante à tag <table>, a tag de formulário sempre será utilizada com outras 
tags para a composição do formulário. A tag <form> possui alguns atributos 
importantes que são apresentados no quadro a seguir:
Quadro 2.4 – Atributos da tag <form>
Atributo Função
Action
Especifica qual a ação será realizada quando o usu-
ário clicar no botão Submit. Normalmente aponta 
para um script que irá receber e decodificar os 
resultados ou ficará vazio, caso a ação seja reali-
zada na própria página onde está o formulário.
autocomplete Indica se os campos poderão ser autocompletados. O padrão é ON.
Enctype
Determina como os dados do formulário são codi-
ficados. Esse atributo é opcional e deve ser usado 
quando vamos fazer upload de arquivos. 
Enctype=”multipart/form-data”
method Define qual método será usado para o envio dos dados do formulário (GET/POST).
– 51 –
HTML
Atributo Função
name
O nome do formulário. É importante, caso tenha-
mos mais de um formulário sendo utilizado na 
mesma página
novalidate Desativa a validação de envio de formulário, caso haja algum campo com validação.
Fonte: Elaborado pelo autor.
Vamos falar mais sobre o atributo Method. Ele possui dois valores GET 
ou POST. Veja a diferença entre os dois:
 2 o GET é o método padrão. Os dados serão enviados através da 
URL do browser, ou seja, ficarão expostos. É utilizado quando 
nenhuma informação sigilosa for enviada. 
 2 o POST oferece maior segurança, pois a transferência dos dados 
para o servidor não estará visível na URL. Além disso, possibilita a 
transmissão de uma maior quantidade de informações.
Quadro 2.5 – Tags para elementos do formulário
Elementos do formulário
Tag Descrição
Input Principal tag para criação de componentes de formu-lário. 
TextArea 
Campo com várias linhas para preenchimento do 
usuário. Possui os atributos: ROWS (número de 
linhas) e COLS (número de colunas).
Label Texto que será exibido juntamente com o elemento INPUT.
Fieldset Cria um grupo com os elementos.
Legend Define um texto para o grupo criado no Fieldset.
Select Elemento para criarmos a opção de seleção para o usuário.
OptGroup Cria um subgrupo dentro da seleção.
Programação Web
– 52 –
Elementos do formulário
Tag Descrição
Option Define os itens para a seleção.
Button Cria botões.
Fonte: Elaborado pelo autor.
As tags de formulário possuem diversos atributos. A seguir apresentare-
mos um quadro contendo os principais atributos.
Quadro 2.6 – Principais atributos dos elementos de formulário
Atributo Função
Type
Utilizada na tag <input>, determina qual o tipo de 
componente será exibido. Não é usado nos demais 
elementos
disabled
Campo somente para leitura. O seu conteúdo não 
será enviado para o formulário. O usuário não 
consegue editar esse campo.
maxlength Define o número máximo de caracteres que o componente poderá receber.
Size
Tamanho do campo na tela. Se SIZE for menor 
que MAXLENGTH, será apresentado um rola-
mento na tela.
Min Número mínimo de caracteres do campo.
readonly
Campo somente para leitura. O seu conteúdo será 
enviado para o formulário. O usuário não conse-
gue editar o campo.
required Indica se o campo é de preenchimento obrigatório ou não.
Value
Determina o conteúdo do campo. Este atributo 
armazena o valor que o usuário digitar. Também 
usado para mostrar algum valor para o usuário.
– 53 –
HTML
Atributo Função
placeholder Mostra texto no campo e quando o usuário clicar o texto desaparece.
Fonte: Elaborado pelo autor.
No quadro a seguir, veremos os principais tipos de campos que pode-
mos criar com a tag INPUT. O tipo de campo será definido por meio do 
atributo TYPE.
Quadro 2.7 – Principais tipos de componentes da tag <input>
Atributo Função
text Indica que o campo será um texto. 
password Indica que o campo será uma senha. Os caracteres digitados não serão mostrados.
submit Botão padrão para enviar os dados do formulário.
reset Botão que limpa todos os campos do formulário.
radio Cria o componente com opções, onde o usuário poderá selecionar um dos itens.
checkbox Cria o componente com opções, onde o usuário poderá selecionar vários itens.
date Cria um campo data.
datetime-local Cria campo do tipo data com base na data e hora do computador do usuário.
time Cria campo do tipo hora com base na data e hora do servidor.
image Campo para armazenar uma imagem.
email Campo para receber um e-mail. 
button Criaum botão. Pode ser usado no lugar do sub-mit.
color Cria um campo para trabalhar com cores. Possui uma paleta com todas as cores.
Programação Web
– 54 –
Atributo Função
file Cria um campo que possibilita selecionar um arquivo.
hidden
Campo escondido/oculto. Útil quando precisa-
mos ter um campo no formulário sem que o usu-
ário visualize. 
number Campo que receberá somente números.
url Campo para URL.
Fonte: Elaborado pelo autor.
Exemplo:
– 55 –
HTML
Resultado:
Figura 2.21 – Exemplo de formulário (navegador Opera)
Fonte: Elaborada pelo autor.
Programação Web
– 56 –
2.7.12 Outras tags e atributos
A finalidade das tags e os atributos desta seção serão melhor compreen-
didos quando trabalharmos com CSS.
Tags SPAN e DIV:
 2 tag <div> − utilizada para criar um container (box) no documento 
HTML. Tem como objetivo agrupar elementos da página para 
configurações de apresentação com o CSS.
 2 tag <span> − utilizada para criar um container em linha no docu-
mento HTML. Tem como objetivo agrupar elementos da página 
para configurações de apresentação com o CSS.
O elemento SPAN é semelhante ao elemento DIV. A diferença é que o 
SPAN é um elemento de linha e o DIV é um elemento de bloco. Normal-
mente são utilizados juntamente com os atributos CLASS e/ou ID.
Atributos ID e class:
São atributos utilizados para identificar os elementos, na configuração 
de apresentação por meio do CSS. E visualmente não apresentarão alteração 
na página.
 2 Class: pode ser usado o mesmo identificador para vários elemen-
tos. Por exemplo: criar uma tabela com o nome dos amigos e seus 
apelidos, ressaltando o apelido com uma cor diferente. Para isso, 
precisamos criar o mesmo identificador para vários elementos.
 2 ID: mesma função do class, mas só pode existir um elemento com a 
mesma identificação. Por exemplo: queremos diferenciar um pará-
grafo de outro, contendo o título e o texto. Para isso, será necessário 
criar um identificador diferente para cada parágrafo.
2.8 Novas tags do HTML5 (PESO 01)
Com a nova versão HTML5, surgiram novas tags que adicionaram 
novos recursos e facilidades para o desenvolvimento web. As mais utilizadas 
serão apresentadas no quadro a seguir:
– 57 –
HTML
Quadro 2.8 – Novas tags do HTML5
Tag Finalidade
header Define o cabeçalho da página, de uma seção. 
nav Define a área de navegação do site. Normalmente é com-posta por links com as principais páginas ou seções.
article Define uma parte da página que tem uma composição de artigo, texto, redação etc.
section
Define uma seção da página que pode conter outros ele-
mentos. Por exemplo, há uma área no site para um deter-
minado assunto onde há links, menu, conteúdo, imagens 
etc. Isso tudo é agrupado na SECTION.
aside
Refere-se à área lateral do site. Contém assuntos não rela-
cionados ao assunto principal do site. Podendo ser utili-
zado para publicidade e banners.
footer Define o rodapé da página de uma seção.
Fonte: Elaborado pelo autor.
Vale salientar que as tags têm valor semântico, isto é, não irão alterar 
a apresentação do site. Sendo assim, apresentaremos exemplos de seu uso 
quando estivermos tratando do tema CSS.
2.9 Herança no HTML
Quando possuímos um elemento (filho), dentro de outro elemento 
(pai), ocorre o que chamamos de herança. Um elemento-pai pode conter 
vários elementos-filhos. Por exemplo: um item de lista <li> é filho de um 
elemento de uma lista ordenada <ol> ou de uma lista não-ordenada <ul>. O 
parágrafo <p> dentro do corpo da página <body> também seria um exemplo 
de herança.
Esse conceito é importante para entendermos o comportamento dos 
elementos no momento da configuração de uma página. Por exemplo: há 
uma página com dois parágrafos. Um dentro do outro. Ao atribuir uma cor 
Programação Web
– 58 –
de fundo ao parágrafo-pai, automaticamente o parágrafo-filho herdará essa 
cor. Esse conceito de herança é conhecido como “NEST”.
 Exercício de fixação
Com o intuito de praticar o conteúdo abordado neste capítulo, 
desenvolva um site com duas páginas. O conteúdo de cada página 
será o seguinte:
1) Index.html: página principal, contendo informações sobre um 
assunto a sua escolha. 
Estrutura a ser apresentada na página:
 2 o título da página deverá ser sobre o tema do site;
 2 o menu deverá conter os links para a própria página (index.
html) e para a página de contato (contato.html);
 2 sobre o assunto, adicione:
 2 no mínimo 4 parágrafos, sobre o tema escolhido;
 2 duas ou três imagens sobre o tema;
 2 uma tabela.
 2 adicione, após o assunto, alguns links para redes sociais e 
sites de busca de sua preferência;
 2 no final, coloque um rodapé com o nome do autor do site.
2) Contato.html: segunda página, contendo um formulário de 
contato do usuário com o site. Adicione os campos que julgar 
mais apropriado.
Síntese
Nesse capítulo, abordamos a importância do HTML para o desenvol-
vimento web, que é linguagem de programação base para toda a criação de 
– 59 –
HTML
aplicações web. Estudamos a estrutura básica de uma página e as novas tags 
presentes no HTML5, versão que possibilita o desenvolvimento de aplicações 
com mais recursos. Além disso, discutimos o padrão que o W3C sugere para 
o desenvolvimento de páginas web.
Também aprendemos sobre as tags necessárias para a criação de formu-
lários, que são um meio de interação e comunicação do site com o usuário 
final. Os conhecimentos adquiridos com esse material permitem que o aluno 
seja capaz de desenvolver plenamente sites utilizando HTML.
Atividades
1. Assinale a alternativa que apresenta a linguagem de marcação (tags) 
responsável pela formatação de textos, dados, imagens e tabelas de 
uma página na internet.
a) Javascript.
b) JQuery.
c) HTML.
d) CSS.
e) PHP.
2. Um programa elaborado na linguagem HTML apresenta a seguinte 
linha: <!DOCTYPE HTML>
Sobre essa linha, é correto afirmar que a mesma:
a) indica que o arquivo com o programa-fonte possui a extensão doc.
b) deve vir sempre após a tag.
c) é uma tag que define o nome do arquivo que possui o programa.
d) especifica ao navegador o tipo de documento HTML que ele vai 
renderizar.
e) não atende corretamente à linguagem HTML, que não aceita o 
símbolo ! em seus comandos.
Programação Web
– 60 –
3. Em HTML, as tags <UL> e <LI> permitem criar listas
a) de interrogação.
b) ordenadas.
c) não-ordenadas.
d) de definição.
e) de frames.
4. Um dos elementos mais utilizados no formulário do HTML é o 
input. Por meio dele, o usuário pode enviar dados para o servidor. 
Sobre o input, analise o código a seguir e assinale a alternativa correta.
<input type=”text” name=”nome” value=”html5” maxlength = 
“20” size = “30”>
a) O tamanho da caixa de texto será 20.
b) O nome da variável que armazenará a informação inserida pelo 
usuário será “html5”.
c) Caso o usuário não insira uma informação, o valor padrão utilizado 
será “nome”.
d) A quantidade máxima de caracteres que o usuário poderá digitar 
é 30.
e) O código cria uma caixa de texto.
3
CSS
Neste capítulo, apresentaremos uma importante e indis-
pensável ferramenta para os desenvolvedores Web: o CSS, cuja efici-
ência comprovada e grande popularidade ao longo dos anos fez com 
que se tornasse parte do processo de desenvolvimento Web. Isso 
promoveu o total controle visual de sites, facilitando tanto na cons-
trução de novos layouts quanto na manutenção futura, de maneira 
prática, rápida e eficaz.
Neste capítulo, são abordados os seguintes assuntos: seleto-
res, propriedades e atalhos, ordem de aplicação, Box Model e for-
mas de inserção do CSS em páginas HTML. 
Ricardo Sonaglio Albano
Programação Web
– 62 –
 Saiba mais
Para acompanhar todos os códigos produzidos neste capítulo, é 
importante ter algum tipo de editor de texto simples, por exemplo, 
o Bloco de Notas. No entanto, é possível optar pelo editor de sua 
preferência. Há diversos softwares e IDEs para desenvolvimento.
Sugestão: Instale o Notepad++, que é um editor de texto com mais 
recursos que o Bloco de Notas.
3.1Introdução ao CSS
O Cascading Style Sheets (CSS – folha de estilo em cascata) é o respon-
sável por controlar o visual das páginas, ou seja, como é exibido o conteúdo 
criado pelo HTML. Essa formatação é aplicada em diferentes dispositivos, 
como computadores, smartphones, tablets, TVs, etc.
O CSS controla desde como um texto será impresso, como será exibido 
em um dispositivo e, até mesmo, a forma como o som será transmitido pelas 
caixas de som. 
É importante ressaltar que o CSS faz mais do que controlar DIVs, cor de 
fundo, formatação de texto ou imagens. Ele dispõe de recursos que possibili-
tam que a informação seja apresentada da maneira mais adequada para cada 
tipo de dispositivo. E essa é sua principal responsabilidade.
Conforme o próprio nome indica – folha de estilo em cascata –, as for-
matações são executadas em cascata, o que significa que o navegador inter-
preta as regras exatamente na ordem em que elas se encontram declaradas no 
arquivo CSS, ou seja, de cima para baixo.
3.2 Sintaxe do CSS
A sintaxe do CSS é bastante simples e totalmente baseada em regras. 
Cada regra é subdividida em seletor, propriedade e valor.
– 63 –
CSS
Sintaxe: seletor { propriedade: valor; }
Em que:
 2 seletor − elemento, atributo ou uma estrutura HTML.
 2 propriedade − definição da característica do seletor que quere-
mos alterar.
 2 valor − determinação do valor que queremos que a propriedade do 
seletor assuma.
Exemplo: p { background: blue;}
Nesse caso, estamos alterando no seletor P (parágrafo), a propriedade 
Background (cor de fundo) para o valor Blue (azul). Vale salientar, que essa 
regra será aplicada a todos os parágrafos da página. 
É importante ressaltar que toda a regra CSS termina com o ponto e 
vírgula (;). Além disso, em uma mesma regra, podemos alterar mais de uma 
propriedade do mesmo seletor.
Exemplo: p { background: blue; font-size: 18pt; }
No exemplo, incluímos a propriedade font-size, que se refere ao tamanho 
do fonte. 
3.3 CSS3
A versão CSS3 adicionou novos recursos. A seguir, há uma lista das 
principais novidades adicionadas, segundo o W3C.
 2 Selecionar:
 2 primeiro e último elemento; 
 2 elementos pares ou ímpares; 
 2 elementos específicos de determinado grupo de elementos.
 2 Gradiente em textos e elementos.
 2 Bordas arredondadas.
Programação Web
– 64 –
 2 Sombras em texto e elementos.
 2 Manipulação de opacidade. 
 2 Controle de rotação.
 2 Controle de perspectiva.
 2 Animação.
 2 Controle básico de 3D.
 2 Estruturação independentemente da posição no código HTML.
3.4 Seletor
Como já vimos, um seletor pode ser um elemento, um atributo ou uma 
estrutura (DIV) em HTML. O CSS permite alguns tipos de seletores: sim-
ples, encadeado, agrupado e complexo.
3.4.1 Seletor encadeado
Ocorre quando definimos um seletor que faz parte de um elemento que 
por sua vez está dentro de outro elemento. 
Exemplo: table strong a { color: yellow; }
No exemplo, estamos aplicando à propriedade COLOR o valor YELLOW 
para o seletor A, que está contido em um STRONG, que por sua vez está den-
tro de um TABLE. Essa regra não afetará os demais links da página.
3.4.2 Seletor agrupado
Usamos um seletor agrupado para aplicarmos a mesma configuração 
para diversos elementos HTML diferentes. 
Exemplo: p, table { font-size:18pt;}
No caso, estamos aplicando na propriedade font-size o valor 18pt para 
os seletores P e table. Assim, todos os parágrafos e tabelas terão o mesmo 
tamanho de fonte.
– 65 –
CSS
3.4.3 Seletor complexo
Por meio de um seletor complexo, podemos criar combinações entre os 
elementos que antes do CSS3 não seriam possíveis. Pense no seguinte cená-
rio: é necessário fazer uma configuração a ser aplicada em todas as tabelas que 
se encontram abaixo de uma H6. Como poderíamos fazer essa alteração de 
maneira rápida e eficiente? Simples. Usando o seletor complexo.
Exemplo: h6 + table { color: black; }
No exemplo, estamos indicando que queremos selecionar as tabelas 
(table) que se localizam abaixo de um cabeçalho (H6) e aplicar a cor (color) 
preta (black).
 Saiba mais
No site do W3C, há a lista com todos os seletores comple-
xos que podemos utilizar: <https://www.w3.org/TR/css3-
-selectors/#selectors>.
3.5 Como usar o CSS
Já sabemos o que é CSS, o que é uma regra, um seletor e os tipos de sele-
tores. Conhecemos o que é uma propriedade, um valor. Mas como utilizar 
o CSS ao HTML? Para a aplicação das regras CSS no HTML existem três 
opções diferentes, conforme segue.
 2 Em linha (inline): a regra CSS é adicionada diretamente no ele-
mento que receberá a ação. 
 2 Interna (incorporado): inserção da regra CSS no cabeçalho da 
página HTML. Essas regras serão aplicadas na página inteira. 
 2 Externas (linkado): as regras CSS são inseridas em um arquivo sepa-
rado do HTML. Nesse formato podemos usar um mesmo arquivo de 
configuração para diversas páginas HTML. Esse tipo é recomendado 
para padronização de sites, permitindo o reaproveitamento do código.
Programação Web
– 66 –
Vale salientar que existe uma hierarquia, isto é, uma ordem de impor-
tância na forma de declaração do CSS. Uma declaração inline tem maior 
precedência sobre a incorporado. E incorporado tem maior precedência sobre 
uma regra linkado.
3.5.1 Em linha – inline
Essa declaração é realizada diretamente no elemento. Para isso, usaremos 
o atributo style. Observe um exemplo de aplicação de cor de fundo para o 
corpo da página (body):
Exemplo: 
 <body style=”background:gray;”>
 <p>
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. <br/>
 Morbi ullamcorper nunc magna, at molestie mi 
ultrices sed. <br/>
 Nulla nec tincidunt nunc, eget pulvinar neque. 
<br/>
 </p>
 <h1>Campeões Mundiais</h1>
 <ol>
 <li>Brasil</li>
 <li>Alemanha</li>
 <li>Itália</li>
 </ol>
 </body>
Resultado:
– 67 –
CSS
Figura 3.1 – CSS inline
Fonte: Elaborada pelo autor.
3.5.2 Interna
Essa declaração é realizada no cabeçalho (head) da página. Para isso, 
usaremos a tag style. Para tanto, utilizamos o exemplo anterior:
<!DOCTYPE html>
<html lang=”pt-br”>
 <head>
 <meta charset=”UTF-8”>
 <title>Interno</title>
 <style type=”text/css”> 
 body { 
 background:gray; 
 } 
 </style>
Programação Web
– 68 –
 </head>
 <body>
 . . . 
 </body>
</html>
O código do CSS está inserido no cabeçalho. Para isso, foi adicionada 
a tag style. Um atributo da tag é o tipo de script que será utilizado. No caso, 
estamos indicando que será um script CSS (type=”text/css”).
Resultado:
Figura 3.2 – CSS interno
Fonte: Elaborada pelo autor.
3.5.3 Externa
Para utilizarmos uma declaração externa do CSS, deveremos ter um 
arquivo com extensão (.css). No arquivo HTML que usará o CSS, devere-
mos fazer referência a esse arquivo através da tag link, no cabeçalho (head) da 
página. Vamos fazer o mesmo exemplo anterior.
Exemplo: fonte HTML
<body>
<!DOCTYPE html>
<html lang=”pt-br”>
 <head>
 <meta charset=”UTF-8”>
– 69 –
CSS
 <title>Externo</title>
 <link rel=”stylesheet” type=”text/css” 
href=”CSSinterno.css” />
 </head>
 <body>
 . . . 
 </body>
</html>
Arquivo CSS:
@CHARSET “ISO-8859-1”;
body {
 background: gray;
} 
Resultado:
Figura 3.3 – CSS externo
Fonte: Elaborada pelo autor.
Note que o código do CSS está contido em um arquivo separado 
(CSSinterno.css). Pode ser nomeado conforme sua preferência. Normal-
mente, utiliza-se estilo.css. No cabeçalho do HTML, fizemos a referência ao 
arquivo CSSinterno.css, por meio da tag link.
Também é possível inserir comentários em arquivos CSS. A sintaxe é 
a mesma da maioria das linguagens de programação. Inicia com o “/*”, e 
termina com “*/”.
Programação Web
– 70 –
3.6 Trabalhando com cores
Há três maneiras de atribuirmos cores aos elementos de uma página.
 2 Nome da cor: a cor é atribuída pelo nome da cor. 
Exemplo: p { background-color: red; }
 2 Sistema RGB: atribui-se a cor pela combinação entre as cores red, 
green e blue. Os valores podem variar entre 0 e 255. 
Exemplo: p { background-color: rgb(100,10,20); }
 2 Hexadecimal: a cor é atribuída, também, pela combinação entre 
red, green e blue. Só que os valores são informados em hexadecimal. 
Exemplo: p {background-color: “#ff0000”;}
 Saiba mais
É possível consultar a tabela de cores em diversos sites da web. Pro-
cure o termo “código de cores HTML” e encontrará diversos sites 
com os códigos em hexadecimal, RGB, etc.
3.7 Trabalhando com margem, 
espaçamento e borda
A margem (margin) é o espaço entre um componente e os demais 
componentes. Podemos alterar a margem superior (top), inferior (bottom), 
esquerda (left) e direita (right).
Quadro 3.1 – Propriedades da margem
Valores possíveis Função Propriedade
Auto, tamanho, % Especifica a margem superior do elemento margin-top
Auto, tamanho, % Especifica a margem da esquerda do elemento margin-left
– 71 –
CSS
Valores possíveis Função Propriedade
Auto, tamanho, % Especifica a margem da direita do elemento margin-right
Auto, tamanho, % Especifica a margem inferior do elemento margin-bottom
Fonte: Elaborado pelo autor.
O espaçamento (padding) é o espaço entre o componente e a sua borda. Tam-
bém possibilita a alteração do espaçamento superior, inferior, esquerda e direita.
Quadro 3.2 – Propriedades do espaçamento
Valores possíveis Função Propriedade
Auto, tamanho, % Especifica o espaçamento supe-rior do elemento padding-top
Auto, tamanho, % Especifica o espaçamento da esquerda do elemento padding-left
Auto, tamanho, % Especifica o espaçamento da direita do elemento padding-right
Auto, tamanho, % Especifica o espaçamento inferior do elemento padding-bottom
Fonte: Elaborado pelo autor.
A borda (border) é a linha entre o espaçamento (padding) e a margem 
(margin) do componente. Também apresenta as propriedades superior, infe-
rior, esquerda e direita.
Quadro 3.3 – Propriedades da borda
Parâmetros Função Propriedade
border-width, 
border-style, border-
-color
Especifica as propriedades para as 
bordas inferior, superior, esquerda 
e direita. Podemos configurar a 
largura (width), o estilo da borda 
(style) e a cor da borda (color)
Border-bottom,
Border-top,
Border-left;
Border-Right
Programação Web
– 72 –
Parâmetros Função Propriedade
border-color Especifica a cor em: top, left, right, bottom border-???-color
border-style Especifica o estilo da borda border-???-style
Thin, medium, 
thick, length Especifica a largura da borda border-???-width
Color Especifica a cor das quatro bordas border-color
None, hidden,dotted, 
dashed, solid, dou-
ble, groove, ridge, 
inset, outset
Especifica o estilo das quatro bor-
das. Pode ser especificado de uma 
até as quatro bordas
border-style
Thin, medium, 
thick, length
Especifica o estilo das quatro bor-
das. Pode ser especificado de uma 
até as quatro bordas
border-width
Fonte: Elaborado pelo autor.
Exemplo HTML:
<!DOCTYPE html>
<html lang=”pt-br”>
 <head>
 <meta charset=”UTF-8”>
 <title>Margem, espaçamento e borda</title>
 <link rel=”stylesheet” type=”text/css”
 href=”CSSMarginPaddingBorder.css”/>
 </head>
 <body>
 <h2>Exemplo de Margem, espaçamento e borda</h2>
 <h3>Exemplo de Margem, espaçamento e borda</h3>
 <h4>Exemplo de Margem, espaçamento e borda</h4>
 <h5>Exemplo de Margem, espaçamento e borda</h5>
 </body>
</html>
– 73 –
CSS
Exemplo CSS:
body { background: #F5F5DC; }
h2 { border-width : 2px 4px 6px 8px; /*top left 
bottom right */
 border-style: solid;
 border-color: #A52A2A; }
h3 { border-top-width: 2px;
 border-left-width: 4px;
 border-right-width: 6px;
 border-bottom-width: 8px;
 border-style: dotted dashed solid double;
 border-color: #CD5C5C; }
h4 { border-width: 2px 4px 6px 8px;
 border-style: solid;
 border-color: #B03060; 
 padding: 6px 10px 14px 18px;
 margin: 4px 6px 8px 10px; }
h5 { border: 2px double blue;
 padding: 6px;
 margin: 4px; }
Resultado:
Figura 3.4 – Margem, espaçamento e borda
Fonte: Elaborada pelo autor.
Programação Web
– 74 –
3.8 Trabalhando com o plano de fundo
A propriedade background permite a manipulação do plano de fundo 
dos elementos HTML.
Quadro 3.4 – Propriedades do background
Valores possíveis Descrição Propriedade
Scroll, fixed Especifica se uma imagem de fundo é fixa ou rola com o página
b a c k g r o u n d -
-attachment
rgb, hex, name, 
transparent
Configura a cor do fundo de um 
elemento
b a c k g r o u n d -
-color
url, none Configura uma imagem como plano de fundo
b a c k g r o u n d -
-image
top left, top center, 
top right, center 
left, center center, 
center right, bottom 
left, bottom center, 
bottom right
Configura a posição inicial de 
uma imagem de plano de fundo
b a c k g r o u n d -
-position
Repeat, repeat-x, 
repeat-y, no-repeat
Estabelece se/como uma imagem 
de plano de fundo será repetida
b a c k g r o u n d -
-repeat
Fonte: Elaborado pelo autor.
Exemplo HTML:
<body>
 <p>
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. <br>
 Vestibulum blandit sapien justo, sed 
bibendum varius in. <br> 
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. <br>
 Vestibulum blandit sapien justo, sed 
bibendum varius in. <br>
 Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. <br>
– 75 –
CSS
 Vestibulum blandit sapien justo, sed 
bibendum varius in. <br>
 </p>
 <h1>Campeões Mundiais</h1>
 <ol>
 <li>Brasil</li>
 <li>Alemanha</li>
 <li>Itália</li>
 </ol>
</body>
CSS:
body {background-image: url(“imagens/matrix1.jpg”);}
p { background-image: url(“imagens/carro1.jpg”);
 background-repeat: no-repeat;}
Resultado:
Figura 3.5 – Background
Fonte: Elaborada pelo autor.
Importante: quando você desenvolver esse exemplo, irá notar que a 
imagem do fundo da página está sendo repetida de modo horizontal e verti-
cal. Já a imagem de fundo do parágrafo não apresenta repetição. Isso ocorre 
devido à propriedade: background-repeat: no-repeat;.
Programação Web
– 76 –
3.9 Trabalhando com texto
A propriedade text permite a manipulação dos textos dos elementos 
HTML.
Quadro 3.5 – Propriedades do text
Parâmetros Função Propriedade
RGB, hexadecimal, 
name Indica a cor do texto Color
Left, right, center, 
justify Alinha o texto do elemento text-align
None, underline, 
overline, line-through, 
blink
Adiciona decoração ao texto text-decoration
Length, % Recua a primeira linha de um texto text-indent
None, color, length Adiciona uma sombra no texto do elemento text-shadow
None, capitalize, 
uppercase, lowercase
Controla as letras em um ele-
mento text-transform
Fonte: Elaborado pelo autor.
Exemplo HTML:
<body>
 <h2>Exemplo </h2>
 <h3>Exemplo </h3>
 <h4>exemplo </h4>
 <h5>Exemplo </h5>
</body>
Exemplo CSS:
h2 { text-align: center;}
h3 { text-decoration: underline; }
h4 { text-transform: capitalize;}
h5 { text-shadow:3px 2px red; }
Resultado:
– 77 –
CSS
Figura 3.6 – Text
Fonte: Elaborada pelo autor.
3.10 Trabalhando com fonte
A propriedade font, permite a manipulação da família de fonte dos ele-
mentos HTML.
Quadro 3.6 – Propriedades do font
Parâmetros Função Propriedade
family-name
generic-family
Lista com as famílias de fontes que 
podem ser usadas no elemento font-family
Small, médium, large, 
length, % Especifica o tamanho de fonte font-size
Normal, italic, 
oblique Especifica o estilo da fonte font-style
Normal, bold, bolder, 
lighter, 100 a 900 Especifica o peso de uma fonte font-weight
Fonte: Elaborado pelo autor.
Há dois tipos de nomes de família: 
Programação Web
– 78 –
 2 Família genérica (generic-family): grupo de fontes com aspectos 
semelhantes (“Serif ” ou “Monospace”).
 2 Família de fontes (family-name): fontes específicas (“Times New 
Roman” ou “Arial”).
Quadro 3.7 – Família de fontes
Descrição Família de fontes Família genérica
As fontes Serif têm peque-
nas linhas no final de alguns 
caracteres
Times New Roman, 
Georgia Serif
Fontes sem as linhas no final 
dos caracteres Arial Sans-serif
Todos os caracteres possuem 
o mesmo tamanho Courier New Monospace
Fonte: Elaborado pelo autor.