Programação Web [Livro Completo]

Prévia do material em texto

Tarley Francis de Lana Campos
Kleber de Jesus Dias
Fábio Santiago
Programação web
Tarley Francis de Lana Campos
Kleber de Jesus Dias
Fábio Santiago
Programação web
Campos, Tarley Francis de Lana;
Dias, Kleber de Jesus
Santiago, Fábio
Programação web. Sorocaba/SP, 2020. 116 f. Ed. 1.
Validador: Antônio Henrique Dalbem.
Instituto Cultural Newton Paiva Ferreira Ltda. | ED+ Content Hub, 2020.
Assuntos:
1. Arquitetura das aplicações Web;
2. HTML;
3. CSS;
4. JavaScript;
5. Layouts responsivos;
6. Frameworks.
Formato: digital.
Recurso: PDF e HTML.
Requisitos do sistema operacional:
• Windows 8.1 ou superior;
• Mac OSX 10.6 ou superior;
• Linux - ChromeOS.
Configurações técnicas:
• 2GB de memória RAM;
• 2.5GHz de processador;
• 10GB de espaço em disco.
Navegadores:
• Google Chrome – Versão mais atualizada;
• Mozilla Firefox – Versão mais atualizada.
Dispositivos móveis:
• iOS 10 ou superior;
• Android 5 ou superior.
Modo de acesso: área restrita - Ambiente Virtual de Aprendizagem.
Todos os direitos desta edição são reservados ao Centro Universitário Facens.
Rodovia Senador José Ermírio de Moraes, 1425, km 1,5 – Sorocaba/SP
CEP: 18.085-784 | tel.: 55 15 3238 1188
Nenhuma parte desta publicação poderá ser reproduzida por qualquer meio ou forma sem autorização.
A violação dos direitos autorais é crime estabelecido pela Lei n.º 9.610/98 e punido pelo artigo 184 do Código Penal.
Todas as imagens, vetores e ilustrações são creditados ao Shutterstock Inc., salvo quando indicada a referência.
Conteúdo
Unidade 1
Introdução à internet e suas tecnologias ........................................ 6
Unidade 2
Introdução ao HTML ......................................................................... 24
Unidade 3
Introdução ao CSS ............................................................................. 59
Unidade 4
Criando layouts responsivos ......................................................... 106
Unidade 5
Introdução ao JavaScript e ao DOM (Document Object Model) .... 146
Unidade 6
Fundamento de React .................................................................... 179
Unidade 7
Aplicações dinâmicas com o React ............................................... 195
Unidade 8
Desenvolvimento profissional ...................................................... 215
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
5
PALAVRAS DOS AUTORES
Todos querem um site! É fato que se você tem uma ideia fantástica e deseja atingir milhões de pessoas 
no mundo, um dos caminhos é a criação de uma aplicação Web, pois todos que possuem um dispositivo 
conectado à internet (com um navegador instalado) podem acessar a sua aplicação. Por este motivo, 
o número de sites espalhados pela internet está cada vez maior, porém os programadores Web não 
encontram uma formação acadêmica alinhada com as exigências do mercado de trabalho, especial-
mente os desenvolvedores front-end que trabalham com a experiência de visualização dos usuários. 
Isso faz com que os desenvolvedores Web estejam entre os profissionais mais procurados na área da 
tecnologia, com salários entre R$ 2 mil e R$ 5 mil.
Para preencher essa demanda do mercado, a disciplina forma profissionais alinhados com as novas 
tendências tecnológicas, apresentando frameworks e bibliotecas populares, capacitando na construção 
de sites e aplicações Web interativas, responsivas e integradas a um back-end e permitindo que você 
trabalhe em diferentes empresas e áreas.
Nesta disciplina, você vai adquirir habilidades únicas e necessárias para criar e desenvolver uma varie-
dade de sites e aplicativos Web. Ao final do curso você será capaz de:
• Conhecer a arquitetura das aplicações Web.
• Construir sites responsivos usando CSS, Flexbox e CSS Grid.
• Desenvolver sites interativos e aplicativos Web com interface rica (RIA) usando JavaScript e HTML.
• Conectar um aplicativo Web a um back-end para armazenamento e recuperação de informações.
• Aplicar os principais frameworks do mercado.
Esse é o primeiro passo para se tornar um profissional capaz de trabalhar com toda a pilha de desenvol-
vimento Web, chamado pelo mercado de desenvolvedor fullstack (palavra full significa completo e stack, 
pilha), um desenvolvedor com capacidade de trabalhar no front-end e no back-end. Durante o curso 
você desenvolverá dois projetos completos, um site e uma aplicação Web, gerando assim uma oportuni-
dade para demonstrar suas habilidades para empregadores e clientes.
Espero que os conhecimentos desta disciplina sejam significativos para você.
Seja bem-vindo e bons estudos!
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
6
Unidade 1 Introdução à internet 
e suas tecnologias
Objetivos de aprendizagem:
• Apresentar os aspectos relacionados à internet e suas tecnologias;
• Apresentar os fundamentos das redes de computadores, os conceitos de protocolos de comu-
nicação, a história e o funcionamento da internet, além da diferença entre site e aplicações web;
• Introduzir o aluno nas principais tecnologias da web;
• Apresentar o ambiente de desenvolvimento, bem como o primeiro estudo de caso cuja aplica-
bilidade será demonstrada nas unidades seguintes.
Tópicos de estudo:
• Arquitetura das aplicações web;
• Principais tecnologias da web;
• Ambiente de desenvolvimento e estudo de caso.
Iniciando os estudos:
A história da web inicia em um laboratório de física de partículas (CERN) perto de Genebra, na Suíça. Foi nesse 
local que o engenheiro de software Tim Berners-Lee percebeu a dificuldade de compartilhar informações.
Naqueles dias, havia informações diferentes em computadores diferentes, mas era necessário 
fazer logon em computadores diferentes para obter informações. Além disso, às vezes você preci-
sava aprender um programa diferente em cada computador. Muitas vezes, era mais fácil perguntar 
às pessoas quando elas estavam tomando café... (WORLD WIDE WEB FONDATION, 2019).
Tim achou uma maneira de resolver esse problema utilizando uma tecnologia emergente chamada 
hipertexto e viu que sua aplicação poderia ser ainda mais ampla, pois a internet já estava em uso desde 
1972 e possuía milhões de computadores conectados.
Em 1989, ele propôs a adoção de um grande banco de dados com hiperligações, neste momento se 
iniciou a World Wide Web (WWW), ou simplesmente web. Um meio de comunicação global no qual usuá-
rios podem ler e escrever através de computadores conectados à internet.
Segundo a matéria History of the Web (WORLD WIDE WEB FONDATION, 2019), “a Web nunca foi um projeto 
oficial do CERN, a proposta inicial de Tim não foi aceita pelo seu chefe na época, Mike Sendall. Somente 
em setembro de 1990, Mike conseguiu dar tempo a Tim para trabalhar no projeto. Ele começou a traba-
lhar usando um computador NeXT, um dos primeiros produtos de Steve Jobs”. Neste mesmo ano Tim 
construiu as ferramentas necessárias para o funcionamento da web (HTML, URI, HTTP), que continuam 
sendo a base da web atual. Essa unidade vai entrar em detalhes sobre essas tecnologias, explicando 
suas funções e como elas se integram.
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
7
Ao acessar a sua rede social favorita, alguém pode te questionar se você está navegando na internet ou 
na web? Parece ser uma pergunta simples de responder e um “tanto faz” é o suficiente. Mas internet 
e web são a mesma coisa? O termo web é usado erroneamente como sinônimo da própria internet. 
A web é apenas um serviço que utiliza a internet, assim como as mensagens de e-mail. A história da 
internet antecede bastante a da web.
Figura 1 - Tim Berners-Lee inventou a internet em 1989.
Fonte: disponível em: https://bit.ly/2OHqzdQ Acesso em: 12 dez. 2019.
https://bit.ly/2OHqzdQ
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
8
1 ARQUITETURA DAS APLICAÇÕES WEB
Assista
Acesse na plataforma o vídeo: Como funcionam as páginas web?
Quando você faz uma compra pela internet, em um dos diversos sistemasde vendas (Americanas, OLX, 
Netshoes, Submarino), você acessa um sistema executado em um computador remoto (servidor) conec-
tado à internet. Você utiliza um dispositivo também conectado à internet, por exemplo: smartphone, 
tablet, smart TV, notebook, PC. Seu dispositivo é considerado o cliente e o acesso é feito por meio de um 
navegador (browser).
Diferente de aplicações como Word e Excel que executam em seu computador sem a necessidade de se 
conectar a outra máquina, sistemas web são distribuídos, ou seja, parte do processamento é executado no 
cliente e a outra parte no servidor. Por esse motivo, aplicações web são classificadas como cliente-servidor 
(Figura 2 - Arquitetura cliente-servidor).
Cliente
Navegador
(browser) Internet Servidor
A figura acima ilustra o funcionamento de aplicações web. Um usuário em sua máquina-cliente, instala 
um navegador (Mozilla, Chrome ou Internet Explorer). Utilizando esse navegador, o usuário realiza soli-
citações para um servidor remoto, através da internet. Por sua vez, esse servidor recebe e processa as 
solicitações. Ao final do processamento, uma resposta é enviada para o usuário.
Figura 2 - Arquitetura cliente-servidor.
Fonte: elaborado pelo autor.
ED
+ 
Co
nt
en
t H
ub
 ©
 2
01
9
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
9
Aprofunde-se
Para mais informações sobre sistemas distribuídos e suas categorias, consulte o livro 
Sistemas distribuídos: conceitos e projeto, 5ª edição, 2013.
Título: Sistemas distribuídos: conceitos e projeto
https://bit.ly/33M6urh
De 1990 a 1995, os sites eram formados por documentos de hipertexto linkados, com limitações na apre-
sentação de seu conteúdo. O surgimento de plataformas de desenvolvimento (como Java, .Net, PHP) 
impulsionaram a capacidade computacional dos sites, suas informações não eram mais estáticas, agora 
eram capazes de fornecer e receber novas informações, surgia assim as aplicações baseadas na web 
(também chamadas de WebApps) (PRESSMAN; MAXIM, 2016).
E qual a diferença entre aplicativos web e sites web?
O termo site é geralmente utilizado para categorizar aplicações menos interativas, que apenas fornecem 
conteúdo. Possuem uma interface mais atrativa e o seu propósito é divulgar as informações de uma 
empresa, os dados de um produto ou as notícias de um determinado assunto. Exemplos: blogs, sites de 
notícia, sites institucionais, portais, landing pages e hotsites.
Aprofunde-se
Para mais informações sobre que tipos de sites você pode criar, acesse o site do Hostgator: 
https://bit.ly/2PagpBx
Já o termo aplicações web é utilizado para categorizar aplicações mais interativas, que fornecem e/ou 
recebem conteúdo. Possuem interface mais fácil de usar e o seu propósito é controlar as atividades de 
uma organização. Porém não há uma definição exata que diferencie claramente sites e aplicações web. 
Os tópicos discutidos na disciplina são importantes tanto para o desenvolvimento de sites quanto para 
o desenvolvimento de aplicações web.
https://bit.ly/33M6urh
https://bit.ly/2PagpBx
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
10
Aprofunde-se
Para saber como eram os layouts de sites antigos, acesse o endereço: https://bit.ly/2rVKXPp
Lá você informa o endereço do site e escolhe uma determinada data. Por exemplo, veja 
como era a página do Google em 02/12/1998.
Mas desenvolver WebApps possui as suas desvantagens:
• HTML é bom para telas estáticas, mas ruim para criar telas dinâmicas.
• A comunicação é sempre do cliente para o servidor, então para saber se alguma informação foi 
alterada no servidor, o cliente deve realizar uma nova requisição para o servidor.
• Existe uma diferença de comportamento entre os navegadores. Antigamente, essas diferenças 
eram maiores. Com o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse 
aspecto. Contudo, os desenvolvedores web ainda devem tomar cuidado com essas diferenças.
• Diferentes dispositivos (computadores, tablets, celulares, televisores), com diferentes reso-
luções e tamanhos de telas. Fala-se muito de design responsivo, aplicações web são ditas 
responsivas se elas estão preparadas para diferentes tamanhos de tela.
Porém mesmo com essas desvantagens, entre 1999 e 2001, houve a explosão na criação dos sites. Mas 
então, por que todo mundo quer um aplicativo web?
• Acesso universal: todos já possuem um navegador instalado, precisa apenas estar conectado 
à internet para acessar a aplicação.
Figura 3 - Página do Google em 02/12/1998.
Fonte: disponível em: https://bit.ly/2RfLC96 Acesso em: 16 dez. 2019.
https://bit.ly/2rVKXPp 
https://bit.ly/2RfLC96 
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
11
• Atualização de versão automática: o conteúdo vem de um servidor central, então se você 
atualizar a versão nesse servidor, todos os clientes imediatamente receberam essa nova versão.
As vantagens dos WebApps superam suas desvantagens. Por esse motivo, as empresas ainda investem 
nesse tipo de aplicação.
Reflita
Você teve uma ideia de um aplicativo para a web que vale milhões. Só tem um porém, você 
não tem as informações dos seus clientes, pois eles estão fora da internet.
Problema: quais navegadores, suas versões, sistemas operacionais e resoluções seu 
aplicativo deve atender?
Solução: a W3C Schools cataloga essas informações. Você pode se basear nestes dados 
para tomar a melhor decisão.
https://bit.ly/2OMhXD1
https://bit.ly/2Pd7b7J
https://bit.ly/2LyGNUX
2 PRINCIPAIS TECNOLOGIAS DA WEB
Como descrito no tópico anterior, a web usa uma arquitetura cliente-servidor, o que permite a troca de 
informações entre computadores de todo o mundo. Nesse modelo, o cliente solicita informações por 
meio de um endereço virtual e o servidor responde à solicitação com a resposta ao pedido enviado 
(MILETO; BERTAGNOLLI, 2014).
Esse endereço virtual é conhecido como URI (Uniform Resource Identifier). É um tipo de endereço exclu-
sivo e usado para identificar os recursos na web. Também é comumente chamado de URL (Uniform 
Resource Locator), endereço para localizar os recursos na web.
Esse endereço virtual é informado na barra de endereços do seu navegador e possui a seguinte sintaxe:
protocolo://dominio:porta/caminho/arquivo
Exemplos:
• 
• 
• 
https://bit.ly/2OMhXD1
https://bit.ly/2Pd7b7J
https://bit.ly/2LyGNUX
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
12
Assista
Acesse na plataforma o vídeo: A dinâmica da web
Da mesma forma que nós humanos criamos as linguagens (inglês, português, espanhol) para nos comu-
nicarmos, as máquinas precisam de um padrão de comunicação. Esse padrão é chamado de protocolo.
Os protocolos são responsáveis pelas seguintes tarefas (ALVES, 2014):
• Sincronização entre o transmissor e o receptor;
• Estabelecimento e término de conexões entre os dispositivos;
• Controle do fluxo de dados;
• Detecção e correção de erros;
• Retransmissão dos dados em caso de erro;
• Endereçamento de dispositivos.
O foco será no protocolo HTTP (HyperText Transfer Protocol), utilizado para a transferência de docu-
mentos de hipermídia (hipertexto).
protocolo://dominio:porta/caminho/arquivo
Aprofunde-se
Para mais informações sobre os demais protocolos disponíveis na internet, consulte o livro 
Desenvolvimento e Design de Sites, 1ª edição, página 15.
https://bit.ly/386DHBc
Após o protocolo, você deve identificar a máquina-servidora que contém o seu site ou aplicação web. Os 
dispositivos-clientes e as máquinas-servidoras são identificadas na rede através de endereços formados 
por sequências de números. Esses endereços são chamados de endereços IP. A princípio, para acessar 
uma página na web você deve conhecer o endereço IP do servidor. Por melhor que seja a sua memória, 
é praticamente impossível decorar o IP dos seus sites favoritos. A solução deste problema é associar 
endereços IP a domínios, que são nomes mais fáceis de memorizar, por exemplo:
172.217.162.164 = www.google.com.br
208.80.154.224= www.wikipedia.org
Os domínios são controlados por organizações geralmente vinculadas ao governo. Por exemplo, os 
domínios com o final .br são controlados e disponibilizados pelo Registro de Domínios para a Internet 
https://bit.ly/386DHBc
http://www.google.com.br
http://www.wikipedia.org
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
13
no Brasil (www.registro.br). Já a tradução do domínio para o endereço IP correspondente é feita pelos 
servidores DNS (Domain Name System).
Reflita
Você foi contratado para criar um site de uma empresa. Sua primeira tarefa é registrar um 
domínio para o seu site. Para isso, entre no www.registro.br e pesquise as possibilidades 
de nomes de domínios que ainda não foram registrados. Lembre-se que:
• A escolha de nome para o domínio deve ser compartilhada com o seu cliente;
• Escolha um nome fácil de memorizar, para facilitar o acesso dos seus usuários;
• Escolha um período de cobrança (1, 2, 3, 4, 5, 6, 7, 8, 9 ou 10 anos);
• Informe o valor cobrado para esse registro, pois seu cliente deve planejar o 
pagamento das renovações.
Para os dois últimos itens, acesse: https://registro.br/ajuda/pagamento-de-dominio/
Outra grande vantagem dos domínios é a transparência na troca de servidores. Veja a figura abaixo 
(Figura 4 - Compreendendo o funcionamento do domínio):
Cliente
Navegador
(browser) Servidor antigo
200.80.152.130
Servidor
DNS
Servidor novo
172.217.162.164
Internet 
www.goo
gle.
co
m.br
17
2.
21
7.
16
2.
16
4
Figura 4 - Compreendendo o funcionamento do domínio.
Fonte: elaborado pelo autor.
ED
+ 
Co
nt
en
t H
ub
 ©
 2
01
9
http://www.registro.br
https://registro.br/ajuda/pagamento-de-dominio/
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
14
Em alguns casos, é necessário trocar o servidor que hospeda a sua aplicação web. Como o seu cliente 
não utiliza IP para acessar esse servidor, essa troca é simples, você apenas troca o IP associado ao 
domínio no servidor DNS.
protocolo://dominio:porta/caminho/arquivo
Por fim, você deve informar o caminho do arquivo no servidor (diretórios e o nome do próprio arquivo). 
Esse arquivo pode ser uma imagem, um áudio, um vídeo, um HTML, um CSS, um JavaScript, um PHP, 
um binário etc.
Aprofunde-se
Para mais informações sobre os Identificadores de Recursos (URI), consulte o site MDN 
Web Docs - Identificando recursos na web.
https://mzl.la/2LnxnLD
O infográfico abaixo resume a dinâmica da web, todas as etapas que ocorrem quando um usuário 
digita uma URL no seu navegador.
https://mzl.la/2LnxnLD
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
15
ED
+ 
Co
nt
en
t H
ub
 ©
 2
01
9�������������
������������������
����
1 2
4
5
3
Cliente digita a URL 
(o endereço) no seu 
navegador
É solicitado a um servidor DNS o 
endereço IP do servidor
O navegador solicita 
um recurso (página) 
ao servidor encontrado 
(via HTTP ou HTTPS)
O servidor localiza e 
processa a requisição 
(utilizando linguagens 
como C# , Java e PHP)
Devolve o IP do 
servidor solicitado
6
7
O servidor responde à 
requisição (com HTML, 
CSS, JavaScript e outros)
O navegador interpreta a 
resposta e exibe ao cliente
Reflita
Eu posso criar uma aplicação web que rode somente na rede local (LAN) da minha 
empresa?
A resposta é sim, esse tipo de aplicação é comum nas empresas, principalmente por 
causa dos benefícios de atualização de versão e por não precisar instalar softwares nas 
máquinas-clientes. Lembre-se, para uma aplicação ser considerada como web ela deve ter 
um servidor central e ser acessada por um navegador.
Infográfico 1 - Etapas de uma requisição no navegador.
Fonte: elaborado pelo autor.
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
16
3 AMBIENTE DE DESENVOLVIMENTO E ESTUDO DE CASO
Assista
Acesse na plataforma o vídeo: Chega de conversa, agora é mão na massa
Durante o curso, você vai criar e executar códigos na IDE Repl.it, uma poderosa, simples e gratuita plata-
forma para programação. Foi criada para educadores, alunos e desenvolvedores. Poderosa por permitir 
a programação em mais de 50 tipos de linguagens. Simples por executar diretamente no seu navegador, 
sem a necessidade de instalar nenhum outro software. Acesse a IDE no endereço: https://repl.it/
Outras vantagens de se utilizar o Repl.it:
• Fácil instalação e configuração (Trabalho/Laboratório/Casa). Você precisa de um navegador.
• Padronização: sua máquina será idêntica ao do professor e dos demais alunos, evitando assim 
os problemas causados por diferenças de sistemas operacionais e/ou configurações de máquina.
• Sem restrições na rede (Proxy, Firewall etc.) que você pode encontrar no seu ambiente de 
trabalho.
• Ambiente colaborativo: você pode compartilhar o código com o professor ou com outros 
alunos para resolução de problemas ou para trabalhos em grupo.
Figura 5 - Página inicial da ferramenta Repl.it.
Fonte: disponível em: https://repl.it/ Acesso em: 12 dez. 2019.
https://repl.it/
https://repl.it/
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
17
Recomenda-se criar um usuário na ferramenta, para isso clique em Sign up. Dessa forma seus projetos 
serão gravados e você pode retornar a eles para estudos futuros ou apresentação para seus emprega-
dores e clientes.
A IDE possui os 3 componentes necessários para o desenvolvimento web: (1) um navegador de sistema 
de arquivos, (2) um editor de texto e (3) um terminal que exibe o resultado do nosso código (Figura 6 - 
Componentes da IDE Repl.it).
Você pode compartilhar seu código através do botão .
E pode visualizar o resultado clicando no botão .
É neste ambiente que você vai implementar o seu primeiro estudo de caso, um site para a divulgação de 
produtos. Esse site possui uma representação online dos produtos que são vendidos na loja física. Há 
quatro categorias (games, telefonia, PCs e eletrônicos) e vários produtos para cada categoria, onde os 
compradores online podem navegar. Os detalhes de cada produto devem ser fornecidos (ou seja, nome, 
imagem, descrição, preço).
Aprofunde-se
Uma aplicação web pode ser classificada de diferentes maneiras. O estudo de caso descrito 
acima, por exemplo, é um site de conteúdo. Para saber mais sobre as outras categorias, 
consulte o livro Desenvolvimento de Software II – Introdução ao desenvolvimento Web 
com HTLM, CSS, JavaScript e PHP. Página 9.
https://integrada.minhabiblioteca.com.br/books/9788582601969
Figura 6 - Componentes da IDE Repl.it.
Fonte: disponível em: https://repl.it/ Acesso em: 12 dez. 2019.
https://integrada.minhabiblioteca.com.br/books/9788582601969
https://repl.it/
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
18
Aprofunde-se
Repl.it é um dos vários IDEs que você pode utilizar para desenvolver sites e/ou aplicações 
Web. Outro exemplo de IDE online é a Cloud9: https://aws.amazon.com/pt/cloud9/ Adquirida 
pela Amazon e totalmente integrada com os demais serviços da sua plataforma (AWS).
Também há IDEs offline, que você instala em seu computador, por exemplo: WebStorm, 
Visual Studio Code, Atom IDE, Brackets e Komodo Edit. Você encontra um estudo comparativo 
delas no endereço: http://tiny.cc/dmichz
O sistema deve operar em ambiente multi-browser com compatibilidade mínima nos seguintes 
ambientes: Google Chrome e Mozilla Firefox.
Abaixo, é exibido o protótipo da tela principal do site:
Caixa de texto Categoria 1
Logo
Categoria 2
Texto que introduz o negócio e o serviço para o 
usuário e permite ao usuário navegar para 
qualquer uma das quatro categorias de produtos.
[Imagem] [Imagem]
Categoria 3 Categoria 4
[Imagem] [Imagem]
© COPYRIGHT 2019, INSTITUTO CULTURAL NEWTON PAIVA FERREIRA LTDA.
Título do site
Figura 7 - Tela inicial do estudo de caso.
Fonte: elaborado pelo autor.
https://aws.amazon.com/pt/cloud9/ 
http://tiny.cc/dmichz 
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
19
A página inicial do site éo ponto de entrada para o aplicativo. Ela introduz o negócio e o serviço para o 
usuário e permite ao usuário navegar para qualquer uma das quatro categorias de produtos. Ao clicar 
em uma das categorias, o usuário é enviado para a segunda tela:
Categoria 1
Categoria 2
Categoria 3
Categoria 4
Logo
© COPYRIGHT 2019, INSTITUTO CULTURAL NEWTON PAIVA FERREIRA LTDA.
Título do site
[Imagem do produto] [Nome do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Nome do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Nome do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Nome do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Nome do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Imagem do produto]
[Imagem do produto]
[Imagem do produto]
[Imagem do produto]
A página de listagem de produtos exibe os produtos da categoria selecionada. A partir desta página, um 
usuário pode visualizar todas as informações do produto e adicionar qualquer um dos produtos listados 
no carrinho de compras. Um usuário também pode navegar para qualquer uma das categorias fornecidas.
Figura 8 - Listagem de produtos.
Fonte: elaborado pelo autor.
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
20
Aprofunde-se
A fase inicial de um projeto de software envolve a coleta de informações para compreender 
o problema que deve ser resolvido, essa fase é chamada de levantamento de requisitos. 
Existem diversos métodos e técnicas para extrair as informações dos clientes a fim de 
atender as suas expectativas e necessidades. Dentre eles está a Prototipagem, um método 
simples e muito efetivo, que gera uma grande quantidade de informação visual e impede 
que fatores importantes não sejam esquecidos.
Se você gostou do método de Prototipagem, saiba que existem ferramentas que 
auxiliam na criação de protótipos interativos. Seguem abaixo alguns exemplos e os seus 
respectivos sites:
• Sketch: https://www.sketchapp.com/
• AdobeXD: http://tiny.cc/wwmchz
• Invision: https://www.invisionapp.com/
• Marvel: https://marvelapp.com/
• Zeplin: https://zeplin.io/
Para saber mais sobre a Prototipagem, consulte o livro Engenharia de Software, página 45: 
http://tiny.cc/tmjchz
https://www.sketchapp.com/
http://tiny.cc/wwmchz
https://www.invisionapp.com/
https://marvelapp.com/
https://zeplin.io/
http://tiny.cc/tmjchz
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
21
CONSIDERAÇÕES FINAIS
Parabéns, você concluiu a unidade 1 desta disciplina e deu o primeiro passo para a criação de sites web. 
Nesta unidade você aprendeu:
• Sobre os desafios de se construir aplicações web e as vantagens de se ter esse tipo de apli-
cação na internet e/ou intranet;
• O formato das URIs/URLs;
• O que é um protocolo de comunicação e sua importância para os sistemas distribuídos;
• As etapas de uma requisição HTTP;
• Como registrar um domínio para o seu site.
Além de ter o primeiro contato com a IDE Repl.it e de se familiarizar com o estudo de caso que vamos 
construir nas próximas unidades. Agora, siga em frente!
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
22
GLOSSÁRIO
Blog: é um espaço de conteúdo com uma estrutura mais simples, mas que pode conter vários recursos 
de mídia para apresentação das informações (HOSTGATOR, 2019).
CSS (Cascading Style Sheets): são utilizados para descrever a aparência ou apresentar o conteúdo da 
página web (MDN WEB DOCS, 2019).
Hotsites: sites com o objetivo de divulgar um produto/serviço/evento de maneira específica.
HTML (HyperText Markup Language): é a linguagem usada para descrever e definir o conteúdo de uma 
página web em um formato estruturado (MDN WEB DOCS, 2019).
IDE (Ambiente de Desenvolvimento Integrado): é um software que auxilia nas tarefas de desenvolvi-
mento de software.
Internet: a internet é, na verdade, um agrupamento de diversas redes WAN (ALVES, 2014).
Java: é uma linguagem de programação e plataforma computacional lançada pela primeira vez pela Sun 
Microsystems em 1995. Essa tecnologia é usada para desenvolver aplicações que tornam a web mais 
divertida e útil. O Java não é a mesma coisa que o javascript., que é uma tecnologia simples, usada para 
criar páginas web e só é executado no seu browser (JAVA, 2019).
JavaScript: é uma linguagem de script, desenvolvida em 1995 por Brendan Eich, da Netscape, com 
base em outra linguagem, denominada EMACScript. Inicialmente ela foi chamada de LiveScript. Essa 
linguagem é utilizada na criação de pequenas rotinas (scripts) que podem ser inseridas no corpo de 
documentos HTML (ALVES, 2014).
LAN: rede em que os dispositivos estão localizados em uma área delimitada e geralmente concen-
trados no mesmo local, como uma pequena empresa, um escritório ou uma casa. Essa rede possui uma 
distância de 10 metros a 1 quilômetro (ALVES, 2014).
Landing pages: em tradução livre “páginas de aterrissagem”, são sites com a função de contribuir para 
a execução e sucesso de uma campanha de marketing digital. A página deve ser leve, abrir rapidamente, 
possuir uma estrutura bem simples e manter seu foco na captação dos dados (HOSTGATOR, 2019).
MAN: rede em que os dispositivos existem em maior número (milhares) e ocupam uma área maior, 
como uma cidade. Essa rede possui uma distância de 3 a 10 quilômetros (ALVES, 2014).
.Net: é um ambiente de execução gerenciado para Windows que oferece uma variedade de serviços aos 
aplicativos em execução (MICROSOFT, 2019).
PHP: é uma linguagem de programação em formato de script, muito utilizada na construção de sites 
dinâmicos e que é executada no lado do servidor (server side) (ALVES, 2014).
WAN: rede em que os dispositivos não possuem delimitação de área, estendendo-se além de cidades, 
estados e países (ALVES, 2014).
WWW (World Wide Web ou Ampla Rede Mundial): chamada frequentemente somente pelo termo “web”, 
é um meio de comunicação global no qual usuários podem ler e escrever através de computadores 
conectados à internet.
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
23
REFERÊNCIAS
ALVES, W. P. Desenvolvimento e Design de Sites. 1. ed. São Paulo: Érica, 2014.
HOSTGATOR. Tipos de sites, 2019. Disponível em: https://www.hostgator.com.br/blog/tipos-de-sites/ 
Acesso em: 09 nov. 2019.
JAVA. O que é o Java? Disponível em: https://java.com/pt_BR/about/whatis_java.jsp Acesso em: 11 out. 2019.
MDN WEB DOCS. Tecnologia para desenvolvedores web. Disponível em: https://developer.mozilla.org/
pt-BR/docs/Web Acesso em: 13 out. 2019.
MICROSOFT. Introdução ao .NET Framework, 2019. Disponível em: https://docs.microsoft.com/pt-br/
dotnet/framework/get-started/ Acesso em: 11 out. 2019.
MILETO, E.; BERTAGNOLLI, S. de C. Desenvolvimento de Software II: Introdução ao desenvolvimento 
Web com HTML, CSS, JavaScript e PHP. [S.l.]: Bookman, 2014.
PRESSMAN, R. S.; MAXIM, B. R. Engenharia de software: Uma abordagem profissional. 8. ed. São Paulo: 
Bookman, 2016.
WORLD WIDE WEB FONDATION. History of the Web. Disponível em: https://webfoundation.org/about/
vision/history-of-the-web/ Acesso em: 05 out. 2019.
https://www.hostgator.com.br/blog/tipos-de-sites/ 
https://java.com/pt_BR/about/whatis_java.jsp
https://developer.mozilla.org/pt-BR/docs/Web
https://developer.mozilla.org/pt-BR/docs/Web
https://docs.microsoft.com/pt-br/dotnet/framework/get-started/
https://docs.microsoft.com/pt-br/dotnet/framework/get-started/
https://webfoundation.org/about/vision/history-of-the-web/
https://webfoundation.org/about/vision/history-of-the-web/
Programação web | Unidade 2 - Introdução ao HTML
24
Unidade 2 
Introdução ao HTML
Objetivos de aprendizagem:
• Ensinar os conceitos básicos da linguagem HTML, além da estrutura básica de um documento HTML;
• Ensinar as principais tags do HTML e seus atributos;
• Ensinar a solucionar problemas nas páginas HTML através da inspeção de código pelo navegador.
Tópicos de estudo:
• Conceitos da linguagem HTML;
• Principais tags HTML;
• Solução de problemasnas páginas HTML.
Iniciando os estudos:
Para publicar um documento na web, você precisa de um servidor dedicado (que funciona 24 horas por dia 
interruptamente). É nesse servidor que você coloca sua página de internet, um arquivo de texto geralmente 
escrito na linguagem HTML. Seus usuários, distribuídos por todo o mundo, acessam sua página por meio 
de um navegador, que se comunica com o servidor através do protocolo HTTP. O servidor usa o protocolo 
HTTP para enviar o HTML ao cliente. O HTML informa ao navegador (Mozilla, Chrome, Microsoft Edge) como 
exibir o conteúdo ao usuário.
O infográfico abaixo ilustra todo o fluxo de requisição ao servidor e a apresentação de sua resposta:
Programação web | Unidade 2 - Introdução ao HTML
25
���������������������
��������������������
O que acontece quando você solicita uma página na web? A imagem abaixo apresenta todas as etapas que 
a sua solicitação percorre e todo o trabalho pelo seu navegador.
O usuário clica em um 
link no navegador.
O navegador monta uma 
requisição HTTP e envia 
para o servidor.
O navegador traduz o 
HTML em formato visual 
para o usuário.
O servidor monta uma resposta HTTP 
e a envia para o cliente. No corpo da 
resposta HTTP vai o documento HTML.
O servidor encontra a 
página solicitada.
HTTP request
HTTP request
HTTP response
HTML
Páginas HTML
HTML
Usuário Navegador Servidor
Veja que o navegador tem duas tarefas importantes, comunicar-se com o servidor e interpretar o código 
HTML, exibindo a página ao usuário. Por esse motivo, o termo cliente é utilizado tanto para falar do 
usuário quanto do navegador, já que o navegador faz aquilo que o usuário solicitou.
Esta unidade está focada nos fundamentos da linguagem HTML. Aqui você vai aprender o que é uma tag HTML, 
quais são as principais tags do HTML e como você pode identificar problemas no código de suas páginas.
Infográfico 1 - HTTP e HTML - Fluxo de requisição 
e resposta do servidor.
ED
+ 
Co
nt
en
t H
ub
 ©
 2
01
9
Programação web | Unidade 2 - Introdução ao HTML
26
1 CONCEITOS DA LINGUAGEM HTML
Assista
Acesse na plataforma o vídeo: Introdução ao HTML
A linguagem HTML (sigla de HyperText Markup Language – Linguagem de Marcação de Hipertexto) é 
responsável pela criação de documentos para a web, comumente conhecidos como páginas. Sua origem 
remonta a uma linguagem mais antiga denominada SGML (Standard Generalized Markup Language – 
em tradução livre, Linguagem Padrão de Marcação Generalizada) (ALVES, 2014).
O HTML está na versão 5, essa especificação da linguagem foi apresentada no início de 2008 pela World 
Wide Web Consortium, porém trata-se de um trabalho a seis mãos entre a Mozilla Fondation, Apple e a 
Opera Software, que em abril de 2007 enviou uma proposta a W3C para evoluir a linguagem HTML 4.01.
Os dois principais objetivos da nova versão são:
1. Adição de elementos, atributos e comportamentos;
2. Um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites 
mais diversos e poderosos.
Essa versão possibilitou a eliminação de plug-ins necessários aos navegadores, como o Adobe Flash ou 
Java Applet, para que o conteúdo multimídia pudesse ser apresentado. Essa versão foi tão bem aceita pela 
comunidade de desenvolvedores web, que rapidamente se tornou um tema favorito de artigos e livros.
Aprofunde-se
Você já viu o seriado Todo Mundo Odeia o Chris? No desenvolvimento web Todo Mundo 
Odeia o Adobe Flash, em 2010 Steve Jobs publicou no site da Apple um texto intitulado 
Pensamentos sobre o Flash onde listou algumas das razões para não utilizar o Adobe Flash 
em aparelhos como o iPad ou iPhone. No texto ele mesmo conclui que o HTML5 substitui 
o Adobe Flash e critica o fato de que os produtos da Adobe Flash são 100% proprietários.
“Nós realmente acreditamos que todos os padrões pertencentes à web deveriam ser 
abertos. Em vez de usar Flash, a Apple adotou o HTML5, CSS e JavaScript – todos padrões 
abertos” (G1, 2010).
Outro ponto destacado é a segurança: “Recentemente, a Symantec destacou o Flash por 
possuir um dos piores recordes de segurança em 2009. Nós também sabemos que o Flash 
é a razão número um para crash nos Macs” (G1, 2010).
Para saber mais, acesse o endereço: http://tiny.cc/gtz8gz
Programação web | Unidade 2 - Introdução ao HTML
27
Mas você deve entender que HTML não é uma linguagem de programação, ele não gera um programa 
autônomo como PHP, Java ou C#. HTML é mais bem classificado como uma linguagem de formatação 
de texto ou definição da estrutura do conteúdo de um documento.
Outro fator que distingue o HTML das outras linguagens é que ele não possui estruturas de controle, 
estruturas de repetição, procedimentos, funções ou chamada de rotinas do sistema operacional. Para 
se ter esse tipo de recurso é necessário utilizar a linguagem JavaScript, mas até o JavaScript possui limi-
tações impostas por motivos de segurança (ALVES, 2014).
De acordo com Alves (2014), algumas características da linguagem HTML podem ser destacadas:
• Independência de plataforma (hardware e software), o que torna possível a qualquer tipo de 
computador ler e interpretar o conteúdo de uma página escrita em HTML.
• Não é monopolizada por uma pessoa ou por uma empresa, privada ou do governo.
• Os arquivos resultantes são pequenos, vinculados entre si pelos hiperlinks definidos na estru-
tura dos documentos. O tamanho reduzido viabiliza a transmissão com velocidade aceitável, 
mesmo em meios de comunicação de baixa velocidade, como a conexão discada por linha 
telefônica comum.
• A linguagem foi desenvolvida para ser utilizada na web e não para um equipamento/sistema 
operacional específico.
• Não necessita de um editor especial, já que é possível utilizar o Bloco de notas, o WordPad ou 
qualquer outro programa de edição de texto capaz de gravar arquivos em um padrão de texto 
sem formatação, conhecido como “texto puro”.
A linguagem HTML consiste em uma série de elementos chamados de tags, que você usa para delimitar 
ou agrupar diferentes partes do conteúdo para que ele apareça ou atue de determinada maneira. As 
tags podem transformar uma palavra ou imagem num hiperlink, podem colocar palavras em itálico, 
podem aumentar ou diminuir a fonte e assim por diante (MDN, 2019). Por exemplo, veja o texto abaixo:
Quem nunca errou nunca experimentou nada novo. Albert Einstein
Se você deseja criar uma linha para o texto e outra para o autor, você pode utilizar a tag de parágrafo 
(<p>), conforme código abaixo:
<p>Quem nunca errou nunca experimentou nada novo.</p><p>Albert Einstein</p>
Seu navegador entende que deve criar dois parágrafos. Então o texto é exibido no seguinte formato:
Figura 1 - Navegador exibindo a tag de parágrafo.
ED
+ 
Co
nt
en
t H
ub
 ©
 2
01
9
Programação web | Unidade 2 - Introdução ao HTML
28
Como visto anteriormente, a sintaxe básica de um elemento HTML possui quatro partes:
1. Abrindo a tag: também chamada de tag de abertura, pois inicia o efeito do elemento HTML (no 
caso acima, onde começa o parágrafo), consiste no nome do elemento (no exemplo acima, p), 
envolvido entre os sinais < e >.
2. Fechando a tag: também chamado de tag de fechamento, pois indica onde o efeito do 
elemento acaba, segue o mesmo formato do elemento de abertura, porém com uma barra (/) 
antes do nome do elemento.
3. Conteúdo: conteúdo do elemento, que para a tag <p> é o texto do parágrafo.
4. Elemento: o elemento HTML é o conjunto dos itens tag de abertura + conteúdo + tag de 
fechamento.
Reflita
Você cria uma página HTML e pode esquecer de fechar uma tag corretamente. Qual é o 
resultado ao executar sua página no navegador?
Fique tranquilo, um dos erros mais comuns de iniciantes é esquecer de incluir uma tag 
de fechamento. Em alguns casos, o navegador consegue corrigir essa falha sozinho, 
porém nunca conte com isso, pois alguns elementos do HTML irão produzir resultados 
inesperados e/ou erros se você esquecer a tag de fechamento, por exemplo: quebra de 
layout ou erro na exibição deum componente.
Figura 2 - Sintaxe de um elemento HTML.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
29
Uma tag também pode ter um ou mais atributos:
Atributos são informações extras do elemento, em alguns casos podem alterar o desenho no navegador. Por 
exemplo, o atributo hidden faz com que o nome do autor (Albert Einstein) não seja exibido no navegador 
(ou seja, ele oculta o elemento). Hidden é um atributo com sintaxe simples, porém é possível ter atributos 
mais complexos, com um nome, um sinal de = e um valor envolvido por aspas. Conforme figura abaixo:
O atributo acima (com nome lang e valor pt-br) informa para o navegador que o conteúdo do parágrafo 
está em português do Brasil. Esse atributo foi utilizado para exemplo e não é necessariamente útil para 
o navegador, também não gera nenhum efeito no desenho do parágrafo. Veja que os atributos hidden 
e lang são separados por um espaço entre eles, essa é a forma correta de adicionar vários atributos a 
um elemento HTML.
Você também pode colocar elementos dentro de elementos, isso é chamado de elementos aninhados. Por 
exemplo, você pode enfatizar um texto importante dentro do parágrafo utilizando o elemento <strong>.
Figura 4 - Atributo lang da tag de parágrafo.
Fonte: elaborado pelo autor.
Figura 3 - Atributo hidden da tag de parágrafo.
Fonte: elaborado pelo autor.
Figura 5 - Elemento strong aninhado ao parágrafo.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
30
O resultado deste código no navegador é:
Fique atento a um detalhe, os elementos devem abrir e fechar na ordem correta. No exemplo acima, primeiro 
foi aberta a tag <p> e em seguida a tag <strong>. Portanto, você deve primeiro fechar a tag </strong> e 
depois a tag </p>.
Em resumo, a ordem é: <p> <strong> </strong> </p>. Caso você não siga a ordem correta, seu nave-
gador vai tentar resolver, o que pode levar a resultados inesperados.
Alguns elementos não possuem um conteúdo interno, eles são chamados de elementos vazios, nesse caso 
o elemento não possui uma tag de fechamento. Um exemplo de elemento vazio é a imagem (<img>), sua 
proposta é exibir uma imagem na página HTML no lugar onde o seu código é escrito, veja o exemplo abaixo:
Veja que a tag <img> possui dois atributos, src que especifica a URL da imagem e alt que fornece um 
texto alternativo para a imagem caso não seja possível visualizá-la (devido à conexão lenta, URL errada 
ou se o usuário usar um leitor de tela), mas não existe uma tag </img> para fechar o elemento, pois não 
existe a necessidade de conteúdo interno para o desenho das imagens.
Figura 6 - Resultado do elemento strong 
aninhado ao parágrafo.
Fonte: elaborado pelo autor.
Figura 7 - Elemento imagem <img>.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
31
O resultado do código acima é:
Aprofunde-se
Para mais informações sobre o elemento de imagem (<img>), consulte o livro 
Desenvolvimento e Design de Sites, 1ª Edição. Capítulo 4 – Imagens e Vínculos.
https://integrada.minhabiblioteca.com.br/books/9788536519012
Até o momento você viu elementos HTML individuais, porém um documento HTML básico deve conter 
a seguinte estrutura:
Figura 8 - Resultado do elemento <img>.
Fonte: elaborado pelo autor.
Figura 9 - Estrutura básica de um documento HTML.
Fonte: elaborado pelo autor.
https://integrada.minhabiblioteca.com.br/books/9788536519012
Programação web | Unidade 2 - Introdução ao HTML
32
<!DOCTYPE html> (linha 1): é uma instrução para o navegador informando em qual versão 
do HTML a página foi escrita. Nesse caso, você está informando que a página foi escrita em 
HTML5, última versão do HTML.
<html> (linha 2): início do conteúdo do documento HTML, também conhecido como elemento raiz.
<head></head> (linha 3 a 7): elemento que armazena todas as informações da página que 
não fazem parte do conteúdo, ou seja, não são visíveis para o cliente. Exemplo: título do docu-
mento, scripts, estilos, metainformações etc.
<meta charset=”utf-8”> (linha 4): especifica o conjunto de caracteres utilizados no documento. 
No caso, este documento está utilizando utf-8. Essa configuração pode resolver problemas na 
exibição de palavras com cedilha (ç) ou com acentuação.
<meta name=”viewport” content=”width=device-width”> (linha 5): fornece ao navegador 
instruções sobre as dimensões da página. No caso, a largura da página vai seguir a largura 
da tela do dispositivo. Dessa forma, você consegue criar páginas que atendam às dimensões 
de smartphones, tablets ou notebooks. Veja a diferença de uma página sem e com viewport, 
acessada por um smartphone.
Quem nunca errou nunca experimentou
nada novo.
Quem nunca errou nunca experimentou nada novo.
Com viewportSem viewport
<title> </title> (linha 6): define o título da página que aparece na guia do navegador. Essa 
informação também é utilizada quando a página é adicionada aos favoritos do navegador.
Figura 10 - Exemplo de página sem viewport e com 
viewport, todas acessadas por um smartphone.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
33
<body> </body> (linha 8 a 16): corpo do documento, contém todo o conteúdo visível ao cliente. 
Por exemplo: texto, imagens, vídeos etc.
</html> (linha 17): informa o navegador que o documento HTML chegou ao fim.
Se você quiser experimentar um pouco da linguagem HTML, acesse o código fonte do exemplo acima 
no endereço:
https://repl.it/@Fbricadede/primeira-pagina
Você pode ver como o navegador apresenta o documento clicando no botão e então, editar o 
código e visualizar as mudanças. Caso você cometa um erro, fique tranquilo: ao editar o código o projeto 
será copiado para a sua conta, dessa forma você sempre vai ter o código inicial no endereço acima.
Altere o título da página, crie elementos de parágrafo, edite os atributos dos elementos, altere a imagem 
da logo, crie imagens. É praticando que se aprende a programar.
Aprofunde-se
Para mais informações sobre o cabeçalho (<head>) e os metadados (<meta>) do HTML, 
acesse o site: https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/
The_head_metadata_in_HTML
2 PRINCIPAIS TAGS DO HTML
Assista
Acesse na plataforma o vídeo: Principais tags do HTML
Nesta seção você vai aprender os principais elementos HTML para a construção das suas páginas.
2.1 CABEÇALHO E TÍTULO
O elemento de cabeçalho permite definir títulos e subtítulos como em um livro. Esse elemento possui 
6 níveis: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, todos colocam o estilo do texto em negrito, porém cada 
nível possui um determinado tamanho de fonte. O lado esquerdo da imagem abaixo, apresenta o código 
HTML com os 6 níveis de cabeçalho, já o lado direito, mostra o resultado desse código no navegador.
https://repl.it/@Fbricadede/primeira-pagina
https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML
https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML
Programação web | Unidade 2 - Introdução ao HTML
34
O código acima foi disponibilizado no endereço: https://repl.it/@Fbricadede/cabecalho-titulo
2.2 LINKS
Os elementos de link são encontrados em quase todas as páginas web. Os links permitem que o usuário 
navegue entre diferentes páginas da internet. Os links são definidos pela tag <a>, abreviação de âncora. 
Um exemplo de utilização é exibido abaixo:
O atributo href especifica o endereço de destino. O conteúdo é a parte visível no HTML. Ao clicar no texto 
do link, você será enviado para o endereço especificado no atributo href.
Figura 11 - Exemplo de cabeçalho e título.
Fonte: elaborado pelo autor.
Figura 12 - Exemplo da tag link.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/cabecalho-titulo
Programação web | Unidade 2 - Introdução ao HTML
35
Veja que o primeiro link possui um caminho completo, dessa forma você pode redirecionar o usuário 
para uma página externa ao seu site. Já osegundo link usa um caminho relativo, esse redireciona o 
usuário para o arquivo “pagina2.html” que está no mesmo site.
O código foi disponibilizado em: https://repl.it/@Fbricadede/exemplo-link
2.3 LISTA
Existem dois tipos de lista, as ordenadas (iniciadas com a tag <ol>) e as não ordenadas (iniciadas com a tag 
<ul>). Independentemente do tipo de lista, seus itens devem utilizar a tag <li>. Como o exemplo abaixo:
O código foi disponibilizado em: https://repl.it/@Fbricadede/exemplo-lista
Aprofunde-se
Para saber mais sobre a criação de listas em HTML, consulte o livro Desenvolvimento e 
Design de Sites, 1ª Edição. Capítulo 3 – Textos e Listas, página 43.
https://integrada.minhabiblioteca.com.br/books/9788536519012
Figura 13 - Exemplo de listas.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/exemplo-link
https://repl.it/@Fbricadede/exemplo-lista
https://integrada.minhabiblioteca.com.br/books/9788536519012
Programação web | Unidade 2 - Introdução ao HTML
36
2.4 TABELAS
Uma tabela HTML é definida com a tag <table>. Cada linha da tabela é definida com a tag <tr>. O cabe-
çalho da tabela é definido com a tag <th>, o que coloca os títulos em negrito e centralizados. Os dados 
da tabela são definidos com a tag <td>. Veja o exemplo abaixo:
O código acima foi disponibilizado em: https://repl.it/@Fbricadede/exemplo-tabela
Aprofunde-se
Existe uma filosofia para a não utilização de Tabelas HTML para criação de layouts. Seu 
nome é Tableless (Table + less = Tableless). Para entender o que é essa filosofia e se os 
seus sites são tableless, acesse o endereço: https://tableless.com.br/o-que-etableless/
Você pode utilizar o atributo colspan nas tags <th> ou <td>, para mesclar colunas da sua tabela. Para 
mesclar linhas, você deve utilizar o atributo rowspan também nas tags <th> ou <td>.
Outras tags úteis são:
• <caption>: define um título para a tabela.
• <thead>: agrupa linhas de cabeçalho em uma tabela.
Figura 14 - Exemplo de tabela.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/exemplo-tabela
https://tableless.com.br/o-que-etableless/
Programação web | Unidade 2 - Introdução ao HTML
37
• <tbody>: agrupa linhas de conteúdo em uma tabela.
• <tfoot>: agrupa linhas de rodapé em uma tabela.
Para ver um exemplo mais complexo de tabela, acesse o endereço: https://repl.it/@Fbricadede/tabela-completa
Reflita
Depois de aprender sobre as tabelas HTML e ver o quanto é fácil alinhar o conteúdo utilizando 
linhas e colunas, você pode sentir uma vontade incontrolável de organizar toda a estrutura 
do seu site (cabeçalho, menu, corpo e rodapé), inclusive utilizando tabelas dentro de tabelas. 
Em pouco tempo você vai ver que tabelas deixam seu código bagunçado, difícil de ler e de 
alterar. O motivo é que o elemento <table> não foi projetado para organizar a estrutura do 
seu site, esse elemento foi criado para exibir dados tabulares. Portanto, não use tabelas 
para organização de componentes na tela.
Aprofunde-se
Para saber mais sobre as tabelas HTML, consulte o livro Desenvolvimento e Design de 
Sites, 1ª Edição. Capítulo 5 – Tabelas e Formulários, página 61.
https://integrada.minhabiblioteca.com.br/books/9788536519012
https://repl.it/@Fbricadede/tabela-completa
https://integrada.minhabiblioteca.com.br/books/9788536519012
Programação web | Unidade 2 - Introdução ao HTML
38
2.5 LAYOUTS
A partir do HTML5, surgiram elementos que definem as diferentes partes do seu site, esses elementos são:
Cabeçalho (<header>)
Navegação (<nav>)
Rodapé (<footer>)
Conteúdo (<aside>)
Seção (<section>)
Artigo (<article>)
<header>: define um cabeçalho para o site ou seção. O cabeçalho contém o conteúdo introdu-
tório do site, como logotipo e título.
<nav>: define um espaço para os links de navegação da página.
<section>: define uma seção da página com elementos agrupados. Uma seção pode conter 
texto, imagem, tabela, vídeo etc.
<article>: define um texto independente, como uma matéria, um artigo etc.
<aside>: define o conteúdo principal do site.
<footer>: define um rodapé para o site. Pode conter informações sobre autor, direitos auto-
rais, outros links etc. 
<details>: define um conteúdo que pode ter seus detalhes ocultados ou exibidos conforme 
solicitação.
<summary>: usado com o elemento <details> para exibir um resumo ou legenda do conteúdo 
do elemento <details>.
Figura 15 - Elementos de layout do HTML5.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
39
No endereço https://repl.it/@Fbricadede/layout você encontra um exemplo de código que utiliza todos 
os elementos descritos acima. Veja que as tags não tratam posicionamento dos elementos na tela, elas 
apenas definem as diferentes partes da página.
Para definir tamanhos e posicionamento você deve utilizar a linguagem CSS.
2.6 FORMULÁRIOS E CAMPOS DE ENTRADA
Formulários HTML permitem a entrada de dados a partir de um navegador. São utilizados para obter 
informações do usuário e podem conter campos de texto, botões, caixas de seleção e lista de opções. A 
imagem abaixo apresenta um exemplo de formulário HTML.
As informações acima serão enviadas para o servidor web. Você pode receber e gravá-las em um banco 
de dados ou enviá-las por e-mail. O código do formulário acima foi disponibilizado em: https://repl.it/@
Fbricadede/formulario-login
Para criar um formulário, use o elemento:
<form>
...
Elementos do formulário (campo texto, botões etc.)
...
</form>
Para adicionar um campo texto ao formulário, você deve utilizar o elemento <input>. Conforme código 
abaixo:
<form>
<input />
</form>
Figura 16 - Exemplo de formulário HTML.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/layout
https://repl.it/@Fbricadede/formulario-login
https://repl.it/@Fbricadede/formulario-login
Programação web | Unidade 2 - Introdução ao HTML
40
O elemento <input> possui o atributo type, um importante atributo que define o tipo do campo de 
entrada. No código abaixo você vai criar dois tipos de campos, um de login e outro de senha.
<form>
 Login: <input type=”text”/>
 Senha: <input type=”password” />
</form>
A lista abaixo apresenta os diferentes tipos de campo texto que você pode utilizar:
<input type=”button”/>: define um botão. O HTML permite a criação de botões utilizando um elemento 
mais descritivo para essa tarefa, o elemento <button>. Veja o exemplo abaixo:
<form>
<input type=”button” value=”Botão”/>
 <button>Outro botão</button>
</form>
O resultado é muito semelhante, porém a segunda é mais clara para alguém que está lendo o seu 
código, fica a seu critério escolher:
<input type=”checkbox”/>: permite que o usuário selecione zero ou mais opções de um número limi-
tado de opções. Por exemplo:
<form>
Qual a sua linguagem preferida:
 <input type=”checkbox” name=”linguagem”/>JavaScript
 <input type=”checkbox” name=”linguagem”/>C#
 <input type=”checkbox” name=”linguagem”/>PHP
 <input type=”checkbox” name=”linguagem”/>Java
</form>
Você pode utilizar o atributo checked para indicar quais campos devem ser pré-selecionados quando a 
página for carregada.
<input type=”color”/>: define um campo para seleção de uma cor.
<input type=”date”/>: define um campo para seleção de uma data. Você pode usar os atributos min e 
max para atribuir restrições às datas, por exemplo:
Figura 17 - Exemplo de botões.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
41
<form>
Data nascimento:
<input type=”date” min=”2000-01-01” max=”2018-12-31” />
</form>
<input type=”datetime-local”/>: define um campo para seleção de uma data e hora.
<input type=”email”/>: define um campo para entrada de e-mail. Dependendo do navegador, o 
formato do e-mail é validado automaticamente. Já alguns smartphones apresentam a tecla .com que 
facilita a digitação de e-mails.
<input type=”file”/>: define um campo para a seleção de arquivos para upload para o servidor.
<input type=”hidden”/>: define um campo invisível para o usuário, porém podearmazenar algum 
valor da sua página.
<input type=”image”/>: define uma imagem como um botão de envio.
<input type=”month”/>: define um campo da entrada de mês e ano.
<input type=”number”/>: define um campo de entrada numérico. Você pode restringir o valor mínimo 
e máximo utilizando os respectivos atributos min e max. Por exemplo:
<form>
Escolha um número de 1 a 10:
<input type=”number” min=”1” max=”10” />
</form>
<input type=”password”/>: define um campo senha.
<input type=”radio”/>: permite que o usuário selecione uma opção dentro de um número limitado. 
Por exemplo:
<form>
<input type=”radio” name=”sexo” checked/>Masculino
<input type=”radio” name=”sexo”/>Feminino
<input type=”radio” name=”sexo”/>Outros
</form>
O resultado é:
Veja que o primeiro campo “Masculino” possui um atributo checked, esse atributo indica que esse 
campo deve ser pré-selecionado quando a página é carregada.
Figura 18 - Exemplo de input radio.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
42
<input type=”range”/>: cria um controle deslizante para a seleção de um determinado número em 
um limite. Você define o limite utilizando os atributos min e max. O incremento do valor é definido pelo 
atributo step.
<form>
0 <input type=”range” min=”0” max=”100” step=”10”/> 100
</form>
O resultado é:
<input type=”reset”/>: cria um botão que permite redefinir o valor de todos os campos do formulário 
para o seu valor padrão.
<input type=”search”/>: define um campo de pesquisa que se comporta como um campo de texto 
simples.
<input type=”submit”/>: cria um botão que permite enviar todos os dados do formulário para uma 
página no servidor. A página é especificada no atributo action do formulário, conforme exemplo abaixo:
<form action=”/principal.html”>
<p>
Campo texto: <input type=”text”/>
</p>
<input type=”submit” type=”Enviar”/>
</form>
Se o atributo action não for informado, as informações serão enviadas para a página atual.
Você também pode utilizar o atributo target do formulário para definir se os dados devem ser enviados 
em uma nova aba do navegador (valor _blank) ou na janela atual (valor _self). O valor padrão é _self.
Por padrão, o formulário utiliza o método GET do protocolo HTTP para enviar as informações para o 
servidor, nesse método as informações são passadas na URL. Exemplo:
https://formulario-login--fbricadede.repl.co/principal.html?login=fabrica&senha=123
Veja que os dados ficam visíveis no navegador para o nosso usuário (inclusive a senha). Para evitar isso, 
você pode trocar para o método POST do HTTP. Para isso utilize o atributo method do formulário com 
o valor post.
Segue com os atributos target e method:
Figura 19 - Exemplo de controle deslizante.
Fonte: elaborado pelo autor.
https://formulario-login--fbricadede.repl.co/principal.html?login=fabrica&senha=123
Programação web | Unidade 2 - Introdução ao HTML
43
<form action=”/principal.html” target=”_blank” method=”POST”>
<p>
Login: <input type=”text” name=”login”/>
</p>
<p>
Senha: <input type=”password” name=”senha”/>
</p>
<p>
<input type=”reset” value=”Limpar”/>
<input type=”submit” value=”Enviar”/>
</p>
</form>
Reflita
Ao desenvolver seus formulários, você pode ser um pouco negligente na escolha do 
método de envio (GET ou POST).
Isso pode gerar problemas na sua aplicação ou na perda de uma funcionalidade muito útil 
para o seu usuário, a de adicionar a URL nos favoritos do navegador.
Gaste um tempo analisando o método de envio. A checklist abaixo pode te auxiliar:
GET
Neste método, os dados do formulário ficam visíveis na URL do navegador em pares de 
(nome=valor). Você deve usar esse método quando:
• Não existe risco de ultrapassar o limite de caracteres da URL (2048 caracteres);
• Os dados não são confidenciais (pois eles ficam visíveis no navegador);
• For útil (para os usuários) registrar a URL nos favoritos.
POST
Neste método os dados não ficaram visíveis. Você deve usar esse método quando:
• É necessário enviar grandes quantidades de dados (o POST não possui limitações 
de tamanho);
• Não é necessário registrar nos favoritos;
• As informações são confidenciais.
<input type=”tel”/>: define um campo para a entrada de telefone. Você pode utilizar o atributo 
pattern para validar se o formato do telefone está correto. Por exemplo:
<form action=”/principal.html” target=”_blank” method=”POST”>
<input type=”tel” pattern=”9[0-9]{4}-[0-9]{4}”/>
</form>
Programação web | Unidade 2 - Introdução ao HTML
44
No exemplo acima, o navegador não vai permitir enviar números que não são de celulares, exemplo: 
98811-2233 (vai enviar), 3388-8899 (não vai enviar).
<input type=”text”/>: define um campo de texto simples.
<input type=”time”/>: define um campo para entrada de hora e minuto.
<input type=”url”/>: define um campo para a entrada de uma URL. Dependendo do navegador, esse 
campo é validado automaticamente. Alguns smartphones apresentam a tecla .com que facilita a digi-
tação da URL.
<input type=”week”/>: define um campo para a entrada de semana e ano.
Os campos de entrada de texto <input> possuem outros importantes atributos, abaixo você aprenderá alguns:
Outros atributos importantes do elemento <input>
Atributo Descrição
disabled Define que o campo está desabilitado. 
readonly Define que o campo é somente leitura.
maxlenght Limita a quantidade máxima de caracteres que o campo aceita.
required Define que o campo é obrigatório. Dependendo do navegador, ao tentar enviar os dados, uma 
mensagem é exibida para o usuário.
size Define o tamanho do campo com base em caracteres.
value Define um valor para o campo. No caso dos botões submit, reset e button, o atributo value define o 
texto dos botões. 
placeholder Especifica uma dica para o usuário sobre como ele deve preencher o campo. A dica é exibida enquanto o 
campo não possui valor, assim que o usuário insere o primeiro caractere ele desaparece.
name Identifica a informação para que ela seja acessada no servidor.
id Define um identificador para o campo em todo o documento HTML. O valor deve ser único.
Reflita
Os tipos color, date, datetime-local, email, month, number, range, search, tel, 
time, url e week foram introduzidos no HTML5. Caso você execute sua página em um 
navegador que não suporta o HTML5, esses elementos serão exibidos como um campo 
de texto simples (“text”). Esse não é um problema, pois as versões atuais dos navegadores 
Mozilla, Chrome, Edge e Opera possuem suporte ao HTML5. Porém, tome cuidado com 
as diferenças de comportamento nos navegadores. Por exemplo, avalie como os campos 
date, datetime-local e month são apresentados no Mozilla e no Chrome. Veja também 
como o campo email é validado no Mozilla e no Chrome.
O elemento <input> já resolve a maioria dos seus problemas, mas o HTML não se limita a eles. Agora você 
vai aprender sobre os elementos diferentes dos <input>. O primeiro é o campo de seleção (<select>):
Tabela 1 - Outros atributos importantes 
do elemento <input>.
Programação web | Unidade 2 - Introdução ao HTML
45
Esse campo exibe uma lista suspensa, os elementos da lista são definidos pelo elemento <option>. Para 
definir uma das opções como selecionada, utilize o atributo selected.
<form>
Região do Brasil:
 <select name=”uf”>
 <option>Norte</option>
 <option>Nordeste</option>
 <option>Centro-Oeste</option>
 <option selected>Sudeste</option>
 <option>Sul</option>
 </select>
</form>
Por padrão, o usuário pode selecionar somente um elemento da lista. Para permitir a seleção de múlti-
plos elementos, utilize o atributo multiple.
<form>
Qual a sua matéria preferida:
 <select name=”disciplinas” multiple size=”5”>
 <option>Linguagens de programação</option>
 <option>Programação para dispositivos móveis</option>
 <option>Algoritmos</option>
 <option selected>Programação web</option>
 <option>Outras</option>
 </select>
</form>
Figura 20 - Exemplo decampo de seleção.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
46
O resultado do código acima é:
Veja que é possível definir a quantidade de elementos exibidos utilizando o atributo size. No exemplo 
acima definimos que todos os cinco elementos devem ser exibidos.
O próximo elemento <datalist> é uma das novidades do HTML5, ele é semelhante ao <select>, porém à 
medida que o usuário digita no campo, a lista é filtrada automaticamente. Veja o exemplo:
<form>
Selecione um navegador:
 <input list=”navegadores”/>
 <datalist id=”navegadores”>
 <option value=”Internet Explorer”>
 <option value=”Firefox”>
 <option value=”Chrome”>
 <option value=”Opera”>
 <option value=”Safari”>
 </datalist>
</form>
O resultado do código acima é:
Figura 21 - Exemplo de campo de seleção múltipla.
Fonte: elaborado pelo autor.
Figura 22 – Exemplo de datalist.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
47
Veja que o elemento <input> é necessário para o funcionamento do componente.
Primeiro, você deve criar a lista (<datalist>) com as opções possíveis (<option>). Para relacionar o campo 
texto aos dados, você deve ter o mesmo valor para o atributo id (<datalist>) e o atributo list (<input>).
Por fim, o elemento <textarea> define um campo de entrada que permite a digitação de várias linhas, 
coisa que o elemento <input> não permite. Por exemplo:
<form>
Observações:<br/>
 <textarea name=”observacao” rows=”10” cols=”30”>Este é o valor padrão para o 
campo observação</textarea>
</form>
O resultado é:
O atributo rows define a quantidade de linhas visíveis, cols define a quantidade de colunas. No Chrome 
você pode alterar o tamanho do componente apenas arrastando o canto inferior direito.
Um formulário completo, com todos os elementos descritos nesta seção, foi disponibilizado em:
https://repl.it/@Fbricadede/formulario-completo
Figura 23 – Exemplo de textarea.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/formulario-completo
Programação web | Unidade 2 - Introdução ao HTML
48
Aprofunde-se
O elemento canvas é talvez a maior novidade apresentada pelo HTML5, pois permite 
a construção de elementos gráficos na página web com comandos simples. Para saber 
mais sobre esse elemento, consulte o livro Desenvolvimento e Design de Sites, 1ª Edição. 
Capítulo 2 – Linguagem HTML, página 34. 
https://integrada.minhabiblioteca.com.br/books/9788536519012
3 SOLUÇÃO DE PROBLEMAS NAS PÁGINAS HTML
Assista
Acesse na plataforma o vídeo: Depurando o HTML
Aprofunde-se
Para mais informações sobre o serviço da W3C para validação de documentos, acesse os 
endereços:
https://medium.com/@erretres/codepen-and-w3c-markup-validation-service-fbb62f1de568
https://validator.w3.org/docs/
Você viu que escrever código em HTML é muito fácil, mas alguns erros podem acontecer à medida que 
suas páginas começam a ficar maiores e mais complexas. Esta seção apresenta algumas ferramentas 
que podem te ajudar a encontrar e corrigir erros nas suas páginas HTML.
A linguagem HTML é muito mais permissiva do que outras de programação, ou seja, um navegador 
exibe a página mesmo que ela tenha erros de sintaxe. Os navegadores possuem regras para interpretar 
as marcações que estão incorretas, claro que isso pode gerar um resultado que você não esperava, em 
resumo, um problema na sua página. O site MDN web docs explica o motivo do HTML ser assim:
O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir 
que as pessoas publicassem seu conteúdo era mais importante do que garantir que a sintaxe esti-
vesse absolutamente correta. A web provavelmente não seria tão popular como é hoje, se tivesse 
sido mais rigorosa desde o início (MDN, 2019).
https://integrada.minhabiblioteca.com.br/books/9788536519012
https://medium.com/@erretres/codepen-and-w3c-markup-validation-service-fbb62f1de568
https://validator.w3.org/docs/
Programação web | Unidade 2 - Introdução ao HTML
49
Veja na prática essa natureza permissiva do HTML. Acesse o código: https://repl.it/@Fbricadede/depurando-html
Esse código possui três erros comuns: elementos não fechados, elementos mal aninhados e atributos 
não fechados.
Agora abra o código em um navegador para ver o seguinte resultado:
Figura 24 - Exemplo de depuração HTML.
Fonte: elaborado pelo autor.
Figura 25 - Visualização do exemplo de depuração do HTML.
Fonte: elaborado pelo autor.
https://repl.it/@Fbricadede/depurando-html
Programação web | Unidade 2 - Introdução ao HTML
50
Os problemas da página são:
• Parágrafo e listas não possuem tags de fechamento: conforme imagem acima, isso não afetou 
o desenho da página, pois o navegador inferiu onde cada elemento deveria terminar.
• <strong> não possui tag de fechamento: veja que neste caso o navegador não conseguiu 
resolver e todo o texto foi destacado.
• Elementos mal aninhados: <strong><em></strong></em>. Neste caso, foi aplicado o estilo 
negrito e itálico a um texto que não deveria ter formatação.
• Valor do atributo href não possui as aspas de fechamento: neste caso o elemento link não foi 
exibido na tela.
Navegadores modernos possuem um conjunto de ferramentas para inspecionar código HTML, como 
a DevTools, ferramenta disponível para Internet Explorer, Firefox, Chrome, Safari e Opera. No Firefox, 
você pode ativar a ferramenta de três formas:
• Usando teclado: Ctrl + Shift + I.
• Usando o menu do navegador: Menu > Web Developer > Inspector.
• Usando o mouse: clique com o botão direito na página e selecione “Inspect Element” no menu 
que aparece.
Ao ativar a ferramenta DevTools, você vai ver o resultado do HTML em uma página em execução. 
Conforme imagem abaixo:
A ferramenta disponibiliza três funcionalidades para lhe ajudar a depurar o HTML:
1. Selecionar elemento da página.
2. Pesquisar elemento no HTML.
3. Adicionar nos elementos.
Figura 26 - Inspecionando o HTML com o DevTools.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
51
1
32
Ao clicar em algum elemento com o botão direito do mouse, outras funcionalidades são exibidas:
Por exemplo, permite que você crie elementos no HTML (Create New Node), duplique (Duplicate Node) 
ou exclua um elemento selecionado (Delete Node). Você também pode realizar alterações no código 
exibido pelo navegador (Edit As HTML), os resultados são exibidos imediatamente.
Figura 27 - Funcionalidades para depurar HTML.
Fonte: elaborado pelo autor.
Figura 28 - Outras funcionalidades da ferramenta DevTools.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
52
Você pode fazer todas as alterações que quiser usando o DevTools, porém essas alterações não são salvas 
no seu HTML. Se você teclar Ctrl + F5, sua página será recarregada e todas as alterações serão perdidas.
O Inspect é apenas para identificar problemas e simular correções. Ao final, as correções devem ser 
replicadas para o seu arquivo HTML.
Utilizando o Inspect, você verá como o navegador resolveu os erros de HTML. Em resumo:
• Os parágrafos e itens da lista receberam tags de fechamento.
Figura 29 - Editando o HTML diretamente na página.
Fonte: elaborado pelo autor.
Figura 30 - Navegador resolvendo erros de parágrafos e itens da lista.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
53
• O elemento <strong> foi fechado antes do início do próximo <li>, deixando todo o texto em negrito.
• Já o aninhamento incorreto, foi corrigido pelo navegador da seguinte forma:
• O elemento de link foi excluído por completo do HTML.
Figura 31 - Navegador resolvendo erros do elemento <strong>.
Fonte: elaborado pelo autor.
Figura 32 - Navegador resolvendo erros de aninhamento incorreto.
Fonte: elaborado pelo autor.
Figura 33 - Navegador não desenha o elemento de link.
Fonte: elaborado pelo autor.
Programação web | Unidade 2 - Introdução ao HTML
54
A verificação acima foi feita utilizandoo Firefox, outros navegadores podem levar a resultados diferentes.
Reflita
Você já sabe que existem diferenças entre os navegadores, porém as diferenças estão 
diminuindo a cada ano. Mas a execução dos testes acima em um Internet Explorer ou no 
Chrome podem ter um resultado diferente?
Para obter essa resposta, execute o código HTML nos navegadores e inspecione o código 
utilizando o DevTools.
O DevTools deve ser utilizado para a verificação de erros pontuais no código. Para uma validação mais 
completa do seu HTML, com o objetivo de verificar se está bem escrito, a melhor estratégia é utilizar o 
serviço da W3C para validação de documentos, que se encontra no endereço: https://validator.w3.org/
O funcionamento é simples, você fornece a URL da sua página (aba Validate by URI) ou pode fazer o 
upload do seu arquivo HTML (aba Validade by File Upload) ou pode inserir o código diretamente na ferra-
menta (aba Validade by Direct Input).
Para realizar a validação no código descrito acima, digite a URL do seu projeto no campo “Address”, por 
exemplo: https://repl.it/@Fbricadede/depurando-html Em seguida, clique em “Check”. A seguinte lista de 
erros e avisos é exibida:
Figura 34 - W3C Markup Validation Service.
Fonte: disponível em: https://validator.w3.org/ Acesso em: 17 dez. 2019.
https://validator.w3.org/
https://repl.it/@Fbricadede/depurando-html
https://validator.w3.org/
Programação web | Unidade 2 - Introdução ao HTML
55
Veja que a ferramenta descreve o erro e a linha onde ele ocorre. As mensagens podem não ser claras a 
princípio, mas com o tempo você vai conseguir identificar rapidamente o erro.
A grande vantagem dessa ferramenta é que em poucos segundos você pode validar um documento 
HTML grande e complexo. Em seguida, você pode utilizar a ferramenta DevTools para investigar cada 
um dos erros.
Aprofunde-se
Para mais informações sobre a ferramenta DevTools, acesse o endereço:
https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_
desenvolvimento_do_navegador
Figura 35 - Lista de erros apresentados pela ferramenta.
Fonte: elaborado pelo autor.
https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador
https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador
Programação web | Unidade 2 - Introdução ao HTML
56
CONSIDERAÇÕES FINAIS
Parabéns, você concluiu a unidade 2 desta disciplina e já pode iniciar a construção do estudo de caso.
Nesta unidade você se familiarizou com a linguagem HTML e adquiriu um pouco de prática escrevendo 
alguns elementos HTML na ferramenta Repl.it. Também aprendeu a utilizar as ferramentas de depu-
ração para encontrar problemas em HTML. Continue firme nos estudos!
Programação web | Unidade 2 - Introdução ao HTML
57
GLOSSÁRIO
C#: é uma linguagem elegante, orientada a objeto e fortemente tipada, que permite que os desenvol-
vedores criem uma variedade de aplicativos robustos e seguros executados no .NET Framework. Você 
pode usar C# para criar aplicativos de cliente do Windows, serviços Web XML, componentes distribuídos, 
aplicativos cliente-servidor, aplicativos de banco de dados e muito, muito mais (MICROSOFT, 2015).
CSS (Cascading Style Sheets): é uma linguagem declarativa que controla a apresentação visual de páginas 
web em um navegador. O navegador aplica as declarações de estilo CSS aos elementos selecionados 
para exibi-los apropriadamente. Uma declaração de estilo contém as propriedades e seus valores, que 
determinam a aparência de uma página web (MDN, 2019).
HTTP (Hypertext Transfer Protocol): é um protocolo de camada de aplicação para transmissão de docu-
mentos hipermídia, como o HTML. Foi desenvolvido para comunicação entre navegadores web e servi-
dores web, porém pode ser utilizado para outros propósitos também. Segue um modelo cliente-servidor 
clássico, onde um cliente abre uma conexão, executa uma requisição e espera até receber uma resposta. 
É também um protocolo sem estado ou stateless protocol, que significa que o servidor não mantém 
nenhum dado entre duas requisições (state). Apesar de ser frequentemente baseado em uma camada 
TCP/IP, pode ser utilizado em qualquer camada de transporte confiável, ou seja, um protocolo que não 
perde mensagens silenciosamente como o UDP (MDN, 2019).
Internet: a internet é, na verdade, um agrupamento de diversas redes WAN (ALVES, 2014).
Java: é uma linguagem de programação e plataforma computacional lançada pela primeira vez pela Sun 
Microsystems em 1995. Essa tecnologia é usada para desenvolver aplicações que tornam a web mais 
divertida e útil. O Java não é a mesma coisa que o JavaScript, que é uma tecnologia simples usada para 
criar páginas web e só é executado no seu browser (JAVA, 2019).
PHP: é uma linguagem de programação em formato de script, muito utilizada na construção de sites 
dinâmicos e que é executada no lado do servidor (server side) (ALVES, 2014).
Tag: em HTML a tag é usada para criar um elemento. O nome de um elemento HTML é o nome usado 
entre colchetes angulares como <p> para criar parágrafos. Note que ao fechar uma tag ela tem uma 
barra antes de seu nome (</p>) e que em elementos vazios a tag final não é requerida e nem permitida. 
Se os atributos não forem mencionados, os valores padrões serão usados em cada caso (MDN, 2019).
URL/URI: a URI (Uniform Resource Identifier ou Identificador Uniforme de Recursos) é uma string 
(sequência de caracteres) que se refere a um recurso. A mais comum é a URL, que identifica o recurso 
localizando-o na web. URNs, em contraste, referem-se a um recurso pelo nome, em dado namespace. 
Ex.: o ISBN de um livro (MDN, 2019).
Programação web | Unidade 2 - Introdução ao HTML
58
REFERÊNCIAS
ALVES, W. P. Desenvolvimento e Design de Sites. 1. ed. São Paulo: Érica, 2014.
G1. Steve Jobs explica razões para não usar Flash em iPhone e iPad, 2010. Disponível em: http://
g1.globo.com/tecnologia/noticia/2010/04/steve-jobs-explica-razoes-para-nao-usar-flash-em-iphone-e-ipad.
html Acesso em: 25 nov. 2019.
JAVA. O que é o Java? Disponível em: https://java.com/pt_BR/about/whatis_java.jsp Acesso em: 11 out. 2019.
MDN. Debugging HTML. Disponível em: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduc-
tion_to_HTML/Debugging_HTML Acesso em: 25 out. 2019.
MDN. Glossário. Disponível em: https://developer.mozilla.org/pt-BR/docs/Glossario Acesso em: 24 out. 2019.
MDN. HTML básico. Disponível em: https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_
with_the_web/HTML_basico Acesso em: 20 out. 2019.
MDN. HTTP. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/HTTP Acesso em: 20 out. 2019.
MDN. O que está no cabeçalho? Metadados em HTML. Disponível em: https://developer.mozilla.org/
pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML Acesso em: 21 out. 2019.
MICROSOFT. Introdução à linguagem C# e ao .NET Framework, 2015. Disponível em: https://docs.
microsoft.com/pt-br/dotnet/csharp/getting-started/introduction-to-the-csharp-language-and-the-net-fra-
mework Acesso em: 24 out. 2019.
MILETO, E. ; BERTAGNOLLI, S. D. C. Desenvolvimento de Software II: Introdução ao desenvolvimento 
web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014 
TABLELESS. O que é Tableless?, 2005. Disponível em: https://tableless.com.br/o-que-etableless/ Acesso 
em: 02 nov. 2019.
W3C. Documentation for the W3C Markup Validator. Disponível em: https://validator.w3.org/docs/ 
Acesso em: 25 out. 2019.
W3SCHOOL. HTML Element Reference, 2019. Disponível em: https://www.w3schools.com/tags/default.
asp Acesso em: 20 out. 2019.
http://g1.globo.com/tecnologia/noticia/2010/04/steve-jobs-explica-razoes-para-nao-usar-flash-em-iphone-e-ipad.html
http://g1.globo.com/tecnologia/noticia/2010/04/steve-jobs-explica-razoes-para-nao-usar-flash-em-iphone-e-ipad.html
http://g1.globo.com/tecnologia/noticia/2010/04/steve-jobs-explica-razoes-para-nao-usar-flash-em-iphone-e-ipad.html
https://java.com/pt_BR/about/whatis_java.jsp