Livro-Texto I - Programação Web Responsiva

Prévia do material em texto

Autor: Prof. Luiz Carlos Machi Lozano
Colaboradoras: Profa. Vanessa Santos Lessa
 Profa. Christiane Mazur Doi
Programação Web 
Responsiva
Professor conteudista: Luiz Carlos Machi Lozano
Mestre em Engenharia de Produção pela Universidade Paulista (UNIP), em 2017; graduado em Sistemas 
de Informação, pela mesma universidade, em 2015. Desde 2017 é integrante ativo do grupo de pesquisa de 
engenharia de software aplicada à criação de sistemas críticos, elaborando, orientando e implementando 
pesquisas, inclusive de alunos em programas de iniciação científica. Em 2018, mudou seu enfoque da pesquisa 
para o ensino e passou a ministrar disciplinas para os cursos de Ciência da Computação e de Sistemas de 
Informação na UNIP. Em 2019, iniciou sua jornada como professor titular do curso de pós-graduação em 
Engenharia de Software na UNIP.
© Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por qualquer forma e/ou 
quaisquer meios (eletrônico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem 
permissão escrita da Universidade Paulista.
Dados Internacionais de Catalogação na Publicação (CIP)
L925p Lozano, Luiz Carlos Machi.
Programação Web Responsiva / Luiz Carlos Machi Lozano. – São 
Paulo: Editora Sol, 2021.
184 p., il.
Nota: este volume está publicado nos Cadernos de Estudos e 
Pesquisas da UNIP, Série Didática, ISSN 1517-9230.
1. Web. 2. Tag. 3. CSS3. I. Título.
CDU 800.92
U511.45 – 21
Prof. Dr. João Carlos Di Genio
Reitor
Prof. Fábio Romeu de Carvalho
Vice-Reitor de Planejamento, Administração e Finanças
Profa. Melânia Dalla Torre
Vice-Reitora de Unidades Universitárias
Profa. Dra. Marília Ancona-Lopez
Vice-Reitora de Pós-Graduação e Pesquisa
Profa. Dra. Marília Ancona-Lopez
Vice-Reitora de Graduação
Unip Interativa – EaD
Profa. Elisabete Brihy 
Prof. Marcello Vannini
Prof. Dr. Luiz Felipe Scabar
Prof. Ivan Daliberto Frugoli
 Material Didático – EaD
 Comissão editorial: 
 Dra. Angélica L. Carlini (UNIP)
 Dr. Ivan Dias da Motta (CESUMAR)
 Dra. Kátia Mosorov Alonso (UFMT)
 Apoio:
 Profa. Cláudia Regina Baptista – EaD
 Profa. Deise Alcantara Carreiro – Comissão de Qualificação e Avaliação de Cursos
 Projeto gráfico:
 Prof. Alexandre Ponzetto
 Revisão:
 Kleber Souza
 Lucas Ricardi
Sumário
Programação Web Responsiva
APRESENTAÇÃO ......................................................................................................................................................9
INTRODUÇÃO ...........................................................................................................................................................9
Unidade I
1 INTRODUÇÃO .................................................................................................................................................... 11
1.1 O que é web? .......................................................................................................................................... 11
1.2 Como funciona a web? ...................................................................................................................... 15
1.3 Preparando ambiente de trabalho................................................................................................. 15
1.4 Ambiente de Desenvolvimento Integrado (IDE) – editores de texto ............................... 16
1.4.1 Notepad++ ................................................................................................................................................ 16
1.4.2 Sublime ....................................................................................................................................................... 16
1.4.3 Microsoft Visual Studio Code ............................................................................................................ 17
1.5 Personalizando o Editor ..................................................................................................................... 18
1.6 Criando o primeiro arquivo .............................................................................................................. 19
2 INICIANDO COM O HTML5 .......................................................................................................................... 20
2.1 O que é o HTML? ................................................................................................................................... 20
2.2 Criando o primeiro projeto ............................................................................................................... 20
2.3 DOCTYPE................................................................................................................................................... 22
2.4 TAG <html> ............................................................................................................................................ 22
2.5 User-agents e atributo lang ............................................................................................................. 23
2.6 TAG <head> ............................................................................................................................................ 23
2.7 Metatag charset .................................................................................................................................... 24
2.8 TAG <title> ............................................................................................................................................. 24
2.9 TAG <body> ............................................................................................................................................ 26
2.10 TAG <p> ................................................................................................................................................. 27
2.11 TAG <span> .......................................................................................................................................... 28
2.12 TAG <strong> ...................................................................................................................................... 29
2.13 TAG <em> ............................................................................................................................................. 29
2.14 TAG <h> ................................................................................................................................................ 30
2.15 TAG <br> ............................................................................................................................................... 33
2.16 TAG <header> ..................................................................................................................................... 33
2.17 TAG <section> .................................................................................................................................... 34
2.18 TAG <article> ...................................................................................................................................... 34
3 AVANÇANDO COM O HTML5 ...................................................................................................................... 36
3.1 Criando links ........................................................................................................................................... 36
3.2 Lista ordenada ....................................................................................................................................... 45
3.3 Lista não ordenada .............................................................................................................................. 46
4 APROFUNDANDO COM O HTML5 ............................................................................................................. 47
4.1 Lista de links ...........................................................................................................................................47
4.2 TAG <aside> ........................................................................................................................................... 48
4.3 TAG <main> ........................................................................................................................................... 48
4.4 Imagens .................................................................................................................................................... 49
4.5 TAG <figure> .......................................................................................................................................... 53
4.6 TAG <footer> ......................................................................................................................................... 54
4.7 TAG <time> ............................................................................................................................................ 55
4.8 TAG <cite> e TAG <q> ....................................................................................................................... 55
4.9 Links em imagens ................................................................................................................................. 56
4.10 Trabalhando com tabelas ................................................................................................................ 57
4.11 TAG <div> ............................................................................................................................................. 58
4.12 TAG <font> .......................................................................................................................................... 59
4.13 Style background color ................................................................................................................... 59
4.14 Explicações sobre o código das cores ........................................................................................ 62
4.15 Formulários .......................................................................................................................................... 65
Unidade II
5 INICIANDO COM O CSS3 .............................................................................................................................. 85
5.1 Criando e organizando o projeto ................................................................................................... 85
5.2 Chamando o CSS3 ............................................................................................................................... 87
5.3 Sintaxe do CSS....................................................................................................................................... 88
5.4 Estilizando o <body> com as propriedades de background .............................................. 88
5.5 Utilizando fontes de terceiros ......................................................................................................... 95
5.6 Inserindo e estilizando o <main> e aprendendo sobre o canal alpha ........................... 98
5.7 Containers <div> e classificação de tag ...................................................................................100
5.8 Estilizando tags de título ................................................................................................................102
5.9 Inserindo vídeo na nossa página .................................................................................................103
5.10 Estilizando a tag <article>, fazendo um primeiro artigo, e utilizando 
a tag <hr> ....................................................................................................................................................105
5.11 Trabalhando com estilização de tabelas .................................................................................107
6 AVANÇANDO COM O CSS3 .......................................................................................................................109
6.1 Nova paginação ..................................................................................................................................109
6.2 Criando menus ....................................................................................................................................110
6.3 Pseudoclasse e pseudoelemento ..................................................................................................114
6.4 Estilizando o texto .............................................................................................................................115
6.4.1 Text-align .................................................................................................................................................117
6.4.2 Text-decoration ..................................................................................................................................... 118
6.4.3 Text-transform ....................................................................................................................................... 119
6.4.4 Text-indent ............................................................................................................................................. 120
6.4.5 Letter-spacing ....................................................................................................................................... 120
6.4.6 Line-height ..............................................................................................................................................121
6.4.7 Text-direction ........................................................................................................................................ 122
6.4.8 Word-spacing ........................................................................................................................................ 122
6.4.9 Text-shadow .......................................................................................................................................... 123
6.5 Estilizando fontes ...............................................................................................................................124
6.5.1 Font-family ............................................................................................................................................. 125
6.5.2 Font-style ................................................................................................................................................ 126
6.5.3 Font-size .................................................................................................................................................. 127
Unidade III
7 JAVASCRIPT .....................................................................................................................................................135
7.1 O que é o JavaScript .........................................................................................................................135
7.2 Iniciando com o JavaScript ............................................................................................................136
7.3 JavaScript em arquivo externo .....................................................................................................138
7.4 Eventos ...................................................................................................................................................142
7.5 Função.....................................................................................................................................................143
7.6 DOM .........................................................................................................................................................144
7.6.1 Métodos ................................................................................................................................................... 144
8BOOTSTRAP ......................................................................................................................................................151
8.1 O que é Bootstrap ..............................................................................................................................151
8.2 Instalando o Bootstrap ....................................................................................................................151
8.3 Criando um menu responsivo .......................................................................................................158
8.4 Criando um menu responsivo do zero .......................................................................................161
8.5 Criando um menu responsivo utilizando a documentação do Bootstrap ..................171
9
APRESENTAÇÃO
Caro aluno,
O desenvolvimento da web é fundamental para o entendimento dos conceitos referentes à área 
de front-end. Ela está presente em nosso dia a dia e, a cada momento, há aumento da necessidade de 
desenvolvimento de aplicações para essa plataforma.
Esta disciplina aborda os conceitos básicos do surgimento da internet e sua evolução a caminho do 
mundo interconectado que vivenciamos atualmente.
Este livro-texto inicia com o estudo sobre a linguagem de marcação HTML em sua versão 5, 
em que são destacadas e implementadas as principais tags utilizadas para o desenvolvimento 
de uma página web. Em seguida, mostra-se o funcionamento das folhas de estilo por meio 
do estudo do CSS em sua versão 3. Mais adiante, aborda-se a linguagem de programação 
JavaScript com os intuitos de dar interatividade às páginas e de criar sites responsivos. Para 
finalizar, unem-se os conhecimentos adquiridos anteriormente em HTML, CSS e JavaScript 
para o estudo do framework Bootstrap.
Os objetivos aqui incluem capacitar os futuros desenvolvedores a empregarem as técnicas 
e as práticas fundamentais que envolvem o desenvolvimento web e instruí-los a aplicarem o 
conhecimento das atividades de programação web responsiva em suas vidas profissionais, nas 
empresas e nas instituições. Com intuito de alcançar essas finalidades, precisamos compreender 
o papel do desenvolvimento web no contexto da ciência da computação e as formas de 
desenvolvimento front-end.
Bons estudos!
INTRODUÇÃO
Vivemos em um mundo no qual a internet é acessada por uma quantidade gigantesca de 
pessoas diariamente. Podemos dizer que, para algumas atividades, o seu uso é essencial e que 
sem ela milhares de empresas sequer existiriam. O cientista da computação é peça fundamental 
nesse cenário, pois ele trabalha efetivamente no desenvolvimento de novas tecnologias e de 
soluções para a evolução dessa plataforma. A cada dia as corporações investem mais na área da 
computação a fim de conquistarem vantagens competitivas e de estarem um passo à frente no 
mundo dos negócios.
Neste livro-texto, abordaremos desde os conceitos básicos do desenvolvimento HTML até conteúdos 
mais avançados utilizando o CSS, o JavaScript e o framework Bootstrap. A divisão aqui será efetuada em 
três unidades, que abordarão o seguinte:
•	 Unidade I: o conceito de internet e seu surgimento, a estrutura básica de uma página web e as 
principais tags utilizadas nessa linguagem de marcação.
10
•	 Unidade II: o uso de folhas de estilo com o CSS e detalhes da customização das páginas web de 
maneira estruturada e dinâmica.
•	 Unidade III: o emprego da linguagem de programação JavaScript com intuito de inserir 
interatividade nas páginas web, criando páginas responsivas. Utilizaremos também o Bootstrap, o 
framework mais usado no mundo de desenvolvimento web.
11
PROGRAMAÇÃO WEB RESPONSIVA
Unidade I
1 INTRODUÇÃO
1.1 O que é web?
Antes de entendermos o que é a web, precisamos compreender como ela surgiu. Portanto, vamos 
voltar algumas décadas e analisar certos fatos. Em meados das décadas de 1960 e de 1970, estava 
acontecendo no mundo a chamada Guerra Fria, que você já deve conhecer das aulas de história.
 Observação
Chamamos de Guerra Fria o período que se estendeu de 1945, final da 
Segunda Guerra Mundial, até 1991, com a extinção da União das Repúblicas 
Socialistas Soviéticas, a URSS. Vale notar que alguns autores consideram 
que o final da Guerra Fria ocorreu em 1989, com a queda do Muro de Berlim.
A história da humanidade mostra que sempre houve avanços e evoluções em meio a grandes conflitos. 
Com a internet não foi diferente: no período citado, ela começou a ser rascunhada, mas para fins ligados 
à comunicação militar. Em meados de 1962, Joseph Licklider, engenheiro do Instituto Tecnológico de 
Massachusetts (MIT), começava a planejar como seria a internet da maneira como a conhecemos hoje. 
Sete anos mais tarde, em 1969, com o surgimento da Arpanet, tivemos o “nascimento” da internet 
(BARROS, 2013).
Na década de 1980, o termo internet começou a se popularizar. Além disso, seu uso teve ampla 
expansão. O que era inicialmente uma aplicação destinada somente a fins de comunicação militar 
passou a ser uma rede de conhecimento que interligava universidades do mundo todo (BARROS, 2013).
Na década de 1990, a internet tem seu uso disseminado em larga escala por meio dos personal 
computers (PCs). Em 1992, cria-se o world wide web, o famoso www, visando a gerar hipertextos que 
possibilitassem o trabalho em grupo em um mesmo documento. Eram utilizados CDs de provedores 
que, muitas vezes, eram entregues em nossas residências pelos correios. Precisávamos deles para que 
pudéssemos acessar a internet discada, em que era necessária uma linha de telefone fixo ligada a um 
modem. Tais provedores faziam o link entre nossas linhas telefônicas e a internet (BARROS, 2013).
No final da década de 1990 e no início dos anos 2000, a web 1.0 começava a brilhar e determinados 
sites ganhavam fama e popularidade. Nessa época, tínhamos o Orkut, uma rede social associada ao 
Google que foi criada em 2004 e desativada em 2014.
12
Unidade I
Figura 1 – Screenshot de uma página de comunidade do Orkut
Também faz parte desse período o MSN Messenger, que não tem relação com o Messenger do 
Facebook. Era um sistema de troca de mensagens da Microsoft por meio do qual as pessoas podiam 
conversar com amigos e parentes. Tratava-se de algo similar ao atual WhatsApp, mas que podia ser 
usado apenas no PC. Para um usuário acessar o MSN, bastava que ele tivesse uma conta de e-mail do 
Hotmail. Observando a figura a seguir, podemos ver como era a interface da primeira versão do MSN, 
antes de ser repaginado por volta de 2005.
Figura 2 – Tela de contatos do MSN
13
PROGRAMAÇÃO WEB RESPONSIVA
O MSN evoluiu no tempo e, em 2010, passou ser chamado de Windows Live Messenger. Essa versão 
tinha uma aparência distinta da versão original. Nela, houve a inserção de diversos recursos novos. 
Naquela época, não havia a circulação das memes que temos hoje e boa parte do humor na internet 
era feita por meio de charges, muitas delas disponibilizadas em sites específicos e compartilhadas via 
e-mail. Um exemplo disso é o Humortadela, ilustrado na figura a seguir, um dos sites de humor mais 
famosos da época.
Figura 3 – Screenshot do site Humortadela
A UOL, uma empresa nacional de conteúdo, serviços e produtos da internet, tal qual a conhecemos 
atualmente, ainda não existia. No seu início, como podemos ver na figura a seguir, ela exibia uma 
mistura de assuntos, chats, anúncios e jogos, ou seja, tratava-se de um mix de situações diversas.
14
Unidade I
Figura 4 – Screenshot da página UOL, em 2002
Nesse momento, o Cadê?, visualizado na figura a seguir, era um site de busca que representava uma 
alternativa brasileira ao Google. Ele foi comprado pelo Yahoo! e absorvido pelo buscador deles.
Figura 5 – Screenshot da página Cadê?
15
PROGRAMAÇÃO WEB RESPONSIVA
1.2 Como funciona a web?
Explicando de maneira objetiva, entrar em um site é como acessar um arquivo de outro computador 
por intermédio de algumas ferramentas. Nesse sentido, podemos visualizar,na figura a seguir, como 
funciona o fluxo de dados de forma simplificada e ignorando várias etapas intermediárias, mas sem que 
isso comprometa uma visão macro da situação.
Browser
Servidor
Site
Figura 6 – Esquema de funcionamento da web
Digamos que, por exemplo, você esteja acessando um site que mostre fotos de gatinhos em seu 
celular. Para executar tal feito, seu celular instalou previamente um navegador, também chamado de 
browser. O navegador é um programa que tem como objetivo acessar e exibir páginas da web.
Logo após acessar o navegador e digitar a URL desejada, que pode ser, por exemplo, 
www.fotosdegatinhos.com.br, o browser entra em contato com um servidor da web que procura os 
arquivos do site que estavam nele guardados. Em seguida, o servidor devolve ao navegador os arquivos 
solicitados. No entanto, o browser enxerga primeiramente a página HTML que veio com os arquivos e, a 
partir dela, ele acessa os outros arquivos.
Após o navegador estar de posse dos arquivos é que você consegue manipulá-los e interagir com o 
site, ou seja, é possível baixá-los ou enviá-los de maneira visual e dinâmica, não importando a plataforma 
que esteja usando.
1.3 Preparando ambiente de trabalho
Agora que já conhecemos um pouco da história que engloba a tecnologia com a qual iremos 
trabalhar, temos propriedade suficiente para aprendermos os primeiros passos no desenvolvimento web. 
Assim, prepararemos o nosso ambiente de trabalho utilizando ferramentas que irão propiciar maior 
produtividade ao desenvolvimento de nossas páginas web.
A seguir, veremos um passo a passo dos primeiros contatos com a linguagem de forma didática e 
eficaz para o aprendizado. Siga-os tomando nota das explicações, quando necessário.
16
Unidade I
1.4 Ambiente de Desenvolvimento Integrado (IDE) – editores de texto
É fundamental escolhermos adequadamente o IDE (Integrated Development Environment ou 
Ambiente de Desenvolvimento Integrado) com o qual iremos trabalhar no desenvolvimento de nossas 
habilidades, o que inclui a definição do editor de texto. Por mais que seja possível utilizar apenas o bloco 
de notas do Windows, isso não é recomendável, pois há uma grande possibilidade de erros inadvertidos 
aparecerem e passarem despercebidos.
Existe uma gama enorme de IDEs. A seguir, listaremos os mais utilizados no mercado. Assim, será 
possível se enquadrar na versão que mais lhe agrade. No decorrer dos estudos, utilizaremos o ambiente 
do Microsoft Visual Studio Code.
1.4.1 Notepad++
O Notepad++ é uma ferramenta gratuita para editar código-fonte e que apresenta suporte para 
vários idiomas.
Muitas pessoas avaliam o Notepad++ como um excelente editor, pois ele é simples e leve e cumpre 
o que promete de maneira rápida.
Figura 7 – Opções para download do Notepad++
1.4.2 Sublime
O sublime é outro editor de texto muito utilizado no mercado. Trata-se de uma ferramenta bastante 
completa, que disponibiliza recursos capazes de facilitar a codificação de projetos.
Muitos avaliam que sua única desvantagem se refere ao valor da licença, que custa cerca de 80 dólares.
17
PROGRAMAÇÃO WEB RESPONSIVA
Figura 8 – Opções para download do Sublime
1.4.3 Microsoft Visual Studio Code
O Visual Studio Code é uma versão mais leve do Microsoft Visual Studio voltada para o 
desenvolvimento web. Trata-se de uma ferramenta veloz e eficiente, que tem conexão direta com o 
GitHub, outra ferramenta muito poderosa de desenvolvimento e de versionamento de códigos.
Há desenvolvedores que avaliam que o Microsoft Visual Studio Code é mais potente do que o Sublime 
e, além disso, tem a vantagem de ser distribuído gratuitamente. Com ele também é possível usar vários 
plugins para outras linguagens de programação, como, por exemplo, a linguagem Python.
Figura 9 – Opções para download do MS-USC
18
Unidade I
 Saiba mais
Neste material, utilizaremos como base a ferramenta do Microsoft 
Visual Studio Code, que pode ser adquirida gratuitamente por meio do 
seguinte site:
Disponível em: https://code.visualstudio.com/. Acesso em: 19 abr. 2021.
1.5 Personalizando o editor
Agora que apresentamos as principais ferramentas utilizadas no desenvolvimento web, chegou a 
hora de prepararmos o ambiente de trabalho. A tela inicial da ferramenta apresenta diversas opções, 
entre elas Color theme, que possibilita a alteração das cores do tema.
Figura 10 – Tela inicial do Microsoft Visual Studio Code
Por padrão, utilizaremos o tema Light (Visual Studio). Como essa configuração é apenas visual, é 
possível configurar o ambiente conforme suas próprias preferências.
19
PROGRAMAÇÃO WEB RESPONSIVA
Figura 11 – Tela de escolha de tema do Microsoft Visual Studio Code
1.6 Criando o primeiro arquivo
Para criar o primeiro arquivo no Visual Studio Code, selecione a opção “File” e depois “New File”, 
conforme mostrado na imagem a seguir.
Figura 12 – Criação de novo arquivo no Microsoft Visual Studio Code
Após a criação do novo arquivo, estamos com o ambiente pronto para trabalhar nos arquivos do 
nosso projeto. Nesse caso, o arquivo ainda não foi salvo e está com nome Untitled-1. Podemos salvá-lo 
com diversas extensões, sendo que as mais conhecidas são txt, php, HTML, css e js. As três últimas serão 
utilizadas com grande frequência no decorrer deste material.
Figura 13 – Criação de novo arquivo no Microsoft Visual Studio Code
20
Unidade I
Agora que você já está com o ambiente pronto para o desenvolvimento de seus projetos, podemos 
seguir à próxima etapa: iniciar a elaboração de páginas utilizando HTML.
2 INICIANDO COM O HTML5
2.1 O que é o HTML?
A linguagem de marcação conhecida como HTML foi criada pelo físico e cientista da computação 
britânico Tim Berners-Lee. Seu acrônimo HTML significa: HyperText Markup Language, o que pode ser 
traduzido diretamente para o português como “Linguagem de Marcação de Hipertexto”.
O HTML pode ser considerado o componente básico em uma página web, visto que ele possibilita 
inserir o conteúdo em um site. Isso estabelece uma estrutura que pode ser avaliada como fundamental, 
gerando significado para informações e as organiza dentro de uma página (FLATSCHART, 2011). De modo 
geral, podemos dizer que uma página web (ou webpage) é escrita utilizando-se o padrão HTML.
O hipertexto é definido como um sistema ou documento composto de blocos de informação 
distintos, como textos, imagens, vídeos e sons, que podem ser interligados por meio de associações 
(FLATSCHART, 2011).
Observe a seguinte situação: quando visitamos uma página web, percebemos diferentes tipos 
e tamanhos de informações, como títulos, parágrafos, imagens, vídeos e sons, dentre outros 
elementos. Tal estrutura é feita pelo HTML. No início da web, as páginas eram, de certa maneira, 
simples, pois continham somente uma espécie de esqueleto do HTML. Isso mudou muito. Hoje, 
podemos inserir nessas páginas elementos diversos, como JavaScript e Css, que ajudam a dar vida 
ao que visualizamos.
Por meio do HTML, o navegador consegue fazer a leitura e renderizar os conteúdos dos arquivos, 
interpretando-os e devolvendo ao navegador algo que pode ser, de fato, compreendido pelo usuário 
final (MAZZA, 2014).
De agora em diante, estudaremos os elementos que existem dentro de uma página web. De modo 
específico, nesta unidade, veremos as estruturas que compõem uma página HTML.
2.2 Criando o primeiro projeto
Com sua IDE configurada e pronta para o trabalho, chegou a hora de entendermos o básico da 
estrutura do HTML. Para isso, vamos, detalhadamente, acrescentar recursos principais e explicar suas 
funções. Começaremos com um novo projeto.
Na aba “File”, selecione a opção “New File” ou apenas use as teclas de atalho CRTL + N. Criaremos 
uma pasta com o intuito de armazenar o projeto. Para isso, em sua área de trabalho, crie uma pasta 
chamada projeto_html. Dentro dela, iremos salvar o novo arquivo que criamos anteriormente.
21
PROGRAMAÇÃO WEB RESPONSIVA
Figura 14 – Criação de nova pasta na área de trabalho do Microsoft Windows
No Microsoft VisualStudio Code, selecione as opções “File” e “Save As” e salve seu arquivo com o 
nome index e a extensão HTML, conforme mostrado na imagem a seguir.
 Observação
No decorrer deste livro-texto explicaremos melhor porque utilizar o 
nome index.html. No momento, basta sabermos que arquivo inicial do 
projeto deve ter esse nome para que o servidor possa localizar o ponto 
de início do site.
Figura 15 – Gravação do arquivo index.html no Microsoft Visual Studio Code
22
Unidade I
2.3 DOCTYPE
Agora, já estamos prontos para começar a estruturar nosso código. Devemos lembrar que não 
apresentaremos neste livro-texto o termo programar quando estivermos falando de HTML, pois 
não se trata de uma linguagem de programação, mas de uma linguagem de marcação. Logo, nesse 
caso, temos uma linguagem que não executa comandos lógicos, ela apenas realiza alterações 
visuais sem complexidade.
Começaremos com o DOCTYPE. Para isso, digite o comando indicado na figura a seguir.
Figura 16 – DOCTYPE
O DOCTYPE destina-se a ser uma marcação para o navegador e para outras ferramentas (Google, 
por exemplo) entenderem qual é o tipo de código que está sendo usado. No caso, significa dizer que o 
navegador irá escrever em HTML.
2.4 TAG <html>
O HTML é estruturado de maneira hierárquica, de modo que um elemento é inserido em outro 
e assim sucessivamente, o que divide as tags. Elas são o equivalente aos comandos de linguagem 
de programação. Porém, no HTML, como dito anteriormente, não existem comandos, mas pontos de 
marcação, e esses recebem o nome de tag em blocos de fácil visualização. Logo, para efetivamente 
começarmos a escrever as tags dentro do arquivo HTML é necessário abrir a tag principal, que no caso 
é a tag <html>.
Figura 17 – Abrindo e fechando a tag <html>
Praticamente todas as tags utilizadas no HTML precisam ser abertas e fechadas, ou seja, devemos 
ter <inicio> e </fim> para diferenciar início de fim. De maneira mais simples, no </fim>, utilizamos o 
mesmo nome da tag, mas adicionando o caractere “/”.
23
PROGRAMAÇÃO WEB RESPONSIVA
Dentro da tag <html> fica concentrado todo o restante da estrutura da página, como outras tags e 
outros elementos, que serão filhos da tag <html>.
 Observação
Uma página HTML é composta de diversas tags, porém as tags <html> 
e </html> são responsáveis, respectivamente, pelo início e pelo fim de uma 
página. Portanto, todas as demais tags devem ser inseridas entre as tags de 
início e fim do HTML.
2.5 User-agents e atributo lang
Os user-agents funcionam como usuários robôs dos navegadores ou de ferramentas de busca e 
fazem a varredura do conteúdo dos sites. Assim, quanto mais aderente a eles a página estiver, maior é a 
chance de o site ser recomendado por eles nos buscadores.
Nesse sentido, dizemos aos user-agents qual é a linguagem nativa do documento, ou seja, em qual 
idioma os leitores do site encontram o conteúdo que nele está disposto. Para isso, utilizamos o elemento 
lang dentro da tag <html>. No entanto, é preciso salientar que não se trata de um elemento restrito 
à tag <html>, isto é, que pode ser usado a qualquer momento para indicar trechos do site em outro 
idioma, por exemplo.
Figura 18 – Utilizando elemento lang dentro da tag <html>
2.6 TAG <head>
O HTML pode ser comparado ao corpo humano, pois seus elementos base são cabeça e corpo. Nesse 
momento, concentraremos nossos esforços na cabeça. Dentro da cabeça do HTML, assim como no corpo 
humano, temos vários elementos inteligentes da página: eles são chamados de metadados.
Para inserirmos esses dados inteligentes na página, precisamos, primeiramente, ter uma cabeça. Isso 
é feito pela inserção da tag <head>.
24
Unidade I
Figura 19 – Abertura e fechamento da tag <head>
2.7 Metatag charset
Havendo uma cabeça conseguiremos colocar os metadados necessários na página com o que 
chamamos em HTML de Metatag. Trata-se de tags que possuem metadados, mas que se diferenciam das 
demais, pois não necessitam ser fechadas. Começaremos com a Metatag charset.
Figura 20 – Metatag charset
A Metatag charset é responsável por informar ao navegador quais são os tipos de caracteres que a 
página utiliza, ou seja, os acentos e as pontuações necessários para escrever corretamente em português. 
Precisamos lembrar que utilizamos em nossa região demográfica o utf-8 como padrão, mas, dependendo 
da região do planeta, existem outros padrões.
2.8 TAG <title>
Ainda, tratando de elementos especiais da nossa página, daremos um título (aquele nome que 
aparece na aba do navegador). Para isso, utilizaremos a tag <title>.
25
PROGRAMAÇÃO WEB RESPONSIVA
Figura 21 – Tag <title>
Se quisermos ver a alteração feita na página, precisaremos salvar o arquivo. Para isso, no menu “file”, 
selecione a opção “salvar”, ou apenas utilize as teclas de atalho “Ctrl+S”.
Note que na pasta onde criamos o projeto aparece um arquivo chamado de index.html, que será lido 
automaticamente pelo navegador principal instalado em seu computador. No caso da máquina aqui 
utilizada é o Chrome, mas poderia ser qualquer navegador.
Figura 22 – Arquivo index.html dentro da pasta do projeto
Se você clicar no arquivo index.html, o navegador será aberto e será apresentada a página inicial do 
projeto. Até o momento, ela está em branco, mas podemos perceber que a aba do navegador exibirá a 
mensagem que foi inserida dentro da tag <title>. Portanto, o título da página que foi criada.
26
Unidade I
Figura 23 – Arquivo index.html aberto no navegador
2.9 TAG <body>
Já tratamos da cabeça do HTML. Agora, partiremos para o corpo utilizando a tag <body>. 
Efetivamente, o conteúdo da página ficará dentro da tag <body>. Pelo fato de a página ainda não 
possuir a tag <body>, quando o arquivo index.html foi aberto na sessão anterior, ela não apresentou 
nenhum conteúdo. A partir desse momento, focaremos em inseri-lo.
Na tag <body> entrarão todos os elementos que o usuário do site de fato vai visualizar na página, 
por exemplo, textos, tabelas, artigos e imagens.
Figura 24 – Tag <body> vazia
Podemos escrever dentro da tag <body> e verificar no navegador se algo acontece na página. Para 
isso, digitamos um texto qualquer dentro da tag <body>.
Figura 25 – Texto não formatado dentro da tag <body>
Ao executarmos a página index.html no navegador ou ao atualizarmos o navegador com ela aberta, 
poderemos notar que o texto digitado já aparecerá no corpo da página. Logicamente, ele ainda não 
estará formatado. No entanto, iremos, nas próximas etapas, aprender a formatá-lo e a configurar novas 
tags para deixarmos a página com visual mais atraente.
27
PROGRAMAÇÃO WEB RESPONSIVA
Figura 26 – Apresentação de texto não formatado dentro da tag <body>
Adicionaremos outra linha ao texto que foi inserido dentro da tag <body>, conforme mostrado na 
imagem a seguir.
Figura 27 – Texto não formatado com duas linhas dentro da tag <body>
Agora ao executarmos ou ao atualizarmos a página index.html no navegador, notaremos que 
os textos inseridos nas linhas 8 e 9 do bloco de códigos da página index.html foram apresentados 
na mesma linha dentro do navegador. Isso se dá porque estamos trabalhando com um texto não 
formatado. Há algumas tags que podem ser utilizadas para melhor formatação e padronização do 
texto nas páginas HTML.
Figura 28 – Apresentação de texto não formatado com duas linhas dentro da tag <body>
2.10 TAG <p>
Introduziremos nosso primeiro parágrafo ao projeto. Agora, não deixaremos o texto sem formatação, 
pois ele deixará de estar no meio da tag <body> e passará a ficar dentro de um parágrafo, no caso, tag <p>.
Figura 29 – Utilização da tag <p>
A tag <p> é utilizada na criação de parágrafos e ajuda o navegador a entender do que se trata 
exatamente aquele trecho de texto. Note que abrimos e fechamos a tag na mesma linha.
28
Unidade I
Figura 30 – Site em execução após inserir a tag <p>
Inseriremos outro parágrafo em nossa página, a fim de acrescentarmos informações. Já fizemos isso 
anteriormente, mas sem utilizar um parágrafo dentrodo <body>. Agora, faremos conforme mostrado 
na figura a seguir.
Figura 31 – Utilização de dois parágrafos dentro do <body>
O site em execução após a utilização dos dois parágrafos ficará da forma mostrada a seguir.
Figura 32 – Site em execução após a inserção da segunda tag <p>
Vemos que cada parágrafo utiliza o seu próprio espaço. Logo, usam-se dois parágrafos para inserir 
informações em duas linhas distintas. Iremos abordar posteriormente tags para a quebra de linha e 
outras parametrizações, mas é importante que entendamos o funcionamento da tag <p>, pois ela 
é muito utilizada.
2.11 TAG <span>
O próximo elemento que podemos colocar em nosso site, pensando no futuro, é também associado a 
um container. Um container é um bloco isolado do resto de outros elementos, assim como em um navio 
cargueiro no qual existem vários containers que levam produtos diferentes.
Figura 33 – Utilização da tag <span>
29
PROGRAMAÇÃO WEB RESPONSIVA
Podemos notar que, nesse momento, visualmente a tag <span> não altera nada em nossa página. 
Mais adiante, iremos utilizá-la quando abordarmos os conceitos relativos ao CSS (Cascading Style 
Sheets ou Folhas de Estilo em Cascata). Veremos que elas podem criar identidades visuais para cada 
bloco <span> que tivermos.
2.12 TAG <strong>
Se for necessário deixar alguma parte do texto em negrito, usamos a tag <strong> para cumprir 
essa função.
Figura 34 – Utilização da tag <strong>
Note que, ao atualizar o seu navegador (ou apertar F5), a palavra “pizzas” aparece em negrito.
Figura 35 – Site em execução com utilização da tag <strong>
2.13 TAG <em>
Caso você precise utilizar o recurso itálico no texto, existe a tag <em> para cumprir essa função.
Figura 36 – Utilização da tag <em>
Observe no seu navegador que a palavra “parágrafo” ficou em itálico.
Figura 37 – Site em execução com utilização da tag <em>
30
Unidade I
Veja também que, durante a produção do código, é necessário tomar cuidado com a indentação, ou 
seja, com os espaços que antecedem o código, para que sua visualização seja melhor identificada.
Figura 38 – Código-fonte indentado
Veja que a tag <html> está alinhada com o seu fechamento </html>. Enquanto a tag <head> está 
alinhada com o seu fechamento </head>. Já a tag <body> está alinhada com o seu fechamento 
</body>. A esse alinhamento entre as tags ou mesmo dentro de um bloco de código em alguma 
linguagem de programação, damos o nome indentação.
2.14 TAG <h>
Para inserirmos títulos e subtítulos, temos a tag <h>. Devemos ressaltar que ela sempre deve ser 
adicionada na tag <body>, como mostrado no código a seguir.
Figura 39 – Exemplo de utilização da tag <h1>
Note no seu navegador que a palavra “Pizzas”, que foi inserida dentro da tag <h1>, ficou com um 
padrão diferente de um parágrafo comum, ela está com o estilo de um título.
Figura 40 – Site em execução com a utilização da tag <h1>
31
PROGRAMAÇÃO WEB RESPONSIVA
Quando falamos de títulos e de subtítulos podemos percorrer a tag <h>, indo de <h1> até <h6>, 
sendo que <h1> é o título com maior nível hierárquico e <h6> é o menor subtítulo.
Figura 41 – Exemplo de utilização da tag <h1> até a tag <h6>
Observe no seu navegador que, além de títulos, foram criados subtítulos em cada uma das tags.
Figura 42 – Execução no navegador de exemplo de utilização da tag <h1> até a tag <h6>
Intercalaremos parágrafos aos títulos e subtítulos que criamos. Para isso, fazemos uma mescla das 
tags utilizadas para trabalhar com texto.
32
Unidade I
Figura 43 – Exemplo intercalando tags de texto
Ao atualizar o site no navegador, você, provavelmente, terá algo parecido com o que se apresenta 
a seguir.
Figura 44 – Execução no navegador de exemplo intercalando tags de texto
33
PROGRAMAÇÃO WEB RESPONSIVA
2.15 TAG <br>
Por enquanto, o site ainda não é bonito e muito menos responsivo, mas isso ocorre porque estamos 
apenas começando nossos estudos sobre o HTML. Um recurso que você pode estar querendo adicionar 
ao projeto é a tecla “Enter” no texto, ou seja, trata-se de responder à seguinte pergunta: como podemos 
fazer para pular linhas?
A tag responsável por fazer isso é a tag <br>. Veja que ela não precisa ser fechada.
Figura 45 – Exemplo de utilização da tag <br>
Observe, na figura a seguir, a diferença vista no navegador em comparação ao que 
tínhamos anteriormente em nossa página. Obviamente, quanto mais tags <br> inserirmos, mais 
espaço daremos.
Figura 46 – Execução da página com exemplo de utilização da tag <br>
2.16 TAG <header>
Para melhorar a visualização de nosso texto, podemos utilizar a tag <header>, que não deve ser 
confundida com a tag <head>, pois sua função é completamente diferente. O <header> nada mais é do 
que um cabeçalho que antecede um texto ou um formulário. Utilizá-lo deixa o código limpo e eficiente. 
Devemos ressaltar que essa tag se situa dentro do <body>.
34
Unidade I
Figura 47 – Exemplo de utilização da tag <header>
Verificamos que, visualmente, a tag <header> em nada altera a nossa página. No entanto, como 
mencionado, ela deixa o código mais limpo e estruturado e auxilia os user-agents na classificação do 
conteúdo da página nos buscadores da internet.
2.17 TAG <section>
Para dividir nosso texto em seções bem definidas, existe o elemento <section>, que representa 
uma seção dentro de um documento, por exemplo, uma parte de um texto que terá outras etapas 
posteriormente. Comumente, é colocado um título dentro da seção para diferenciá-la das outras.
Figura 48 – Exemplo de utilização da tag <section>
O tag <section> é mais um elemento que visualmente não tem efeitos significativos, mas 
que, dentro do código, serve para fins de organização e auxilia os user-agents na classificação 
do conteúdo.
2.18 TAG <article>
Utilizamos o elemento <article> na hora de elaborar algum conteúdo que não precisa ter ligação 
direta com outro para fazer sentido em um documento HTML, como, por exemplo, um artigo de blog ou 
uma postagem em rede social.
Figura 49 – Exemplo de utilização da tag <article>
A tag <article> é outro elemento que não tem efeitos visuais, mas que, dentro do código, serve para 
fins de organização e auxilia os user-agents na classificação do conteúdo.
35
PROGRAMAÇÃO WEB RESPONSIVA
Agora que já conhecemos as principais tags utilizadas no desenvolvimento de uma página HTML, 
vamos ver, na figura a seguir, como ficou a nossa página index.html.
Figura 50 – Código-fonte da página index.html atualizado
Visivelmente, não conseguimos notar a diferença entre o que é um artigo, uma seção ou um 
cabeçalho. Mas essa falta de percepção irá acabar logo. No nosso primeiro site, estamos experimentando 
elementos que são fundamentais, mas as tags estudadas serão importantíssimas no momento em que 
tivermos um aprofundamento maior no desenvolvimento de nossas páginas web em HTML.
A seguir, podemos ver a página web que criamos, que é exatamente aquela devida ao código-fonte 
mencionado na figura anterior.
36
Unidade I
Figura 51 – Execução da página index.html atualizado
3 AVANÇANDO COM O HTML5
3.1 Criando links
Além das formas básicas aqui expostas para alterarmos textos, há outras maneiras de realizarmos 
tais modificações.
Muitas vezes, temos a necessidade de ligar um conteúdo a outro (ou uma página a outra). Para fazermos 
isso, precisamos de algum elemento de hyperlink. Um deles é a tag <a>, cujos principais atributos são:
•	 href: indica uma URL que será carregada.
•	 target: indica onde a página será carregada (se na mesma janela do navegador ou em outra).
•	 name: indica links dentro da própria página (por exemplo, ao clicar no link “voltar ao topo”, você 
será remetido para um elemento no topo da página).
37
PROGRAMAÇÃO WEB RESPONSIVA
 Lembrete
Nesta etapa do projeto básico de uma página HTML, utilizaremos os 
conceitos abordados no tópico anterior, que incluem as tags <html>, 
<head> e <body>, entre outras.
Dentro da pasta do projeto criada anteriormente, criaremos uma subpasta chamada de “Páginas”.
Figura52 – Criação de pasta chamada de “Páginas”
Dentro da pasta “Páginas”, criaremos um arquivo HTML sem precisar do Microsoft Visual Studio 
Code. Para isso, geraremos um arquivo TXT e mudaremos a sua extensão.
Clique com o botão direito do mouse em qualquer lugar da tela dentro da pasta “Páginas” e selecione 
a opção “Novo” e depois “Documento de Texto”, conforme figura a seguir.
Figura 53 – Criação de arquivo fora do Microsoft Visual Studio Code
38
Unidade I
Colocaremos o nome “sabores”.
Figura 54 – Renomear o arquivo para “sabores”
 Observação
Estamos elaborando o arquivo fora do Microsoft Visual Studio Code 
para mostrar que podemos criar arquivos HTML utilizando um simples 
editor de texto. Se você estiver usando outro sistema operacional, poderá 
utilizar o editor de texto padrão do sistema.
Altere o modo de exibição do Windows para “Detalhes”, conforme imagem a seguir, e verifique que 
o arquivo “sabores” que criamos tem extensão (tipagem) de documento de texto.
Figura 55 – Alteração de modo de exibição dos arquivos do Windows
Após alterarmos a visualização dos arquivos do Windows, podemos confirmar que o arquivo 
“sabores” é do tipo documento de texto, conforme mostrado na sequência.
Figura 56 – Exibição do arquivo “sabores” dentro da pasta “Páginas” do projeto
Agora, entre no arquivo sabores.txt que acabamos de criar e vá na opção “Arquivo” e depois “Salvar 
Como” do Bloco de Notas, conforme mostrado a seguir.
39
PROGRAMAÇÃO WEB RESPONSIVA
Figura 57 – Opções do Menu “Arquivo” do Bloco de Notas
Vamos alterar o tipo de arquivo para “Todos os arquivos”, conforme mostrado a seguir.
Figura 58 – Alteração do tipo do arquivo
Após modificarmos para “Todos os arquivos”, alteraremos o nome do nosso arquivo para 
sabores.html, inserindo a extensão HTML ao nome. Ao fazermos isso, vincularemos o arquivo à 
tipagem HTML.
40
Unidade I
Figura 59 – Alteração da extensão do nome do arquivo para HTML
Vemos que foi criado um segundo arquivo, o sabores.html. Excluiremos o arquivo sabores.txt criado 
inicialmente, deixando apenas o arquivo sabores.html na pasta “Páginas” do nosso projeto.
Figura 60 – Exibição de arquivo sabores.html com sabores.txt criado anteriormente
Editaremos o nosso arquivo utilizando o Bloco de Notas para mostrar que podemos editar um arquivo 
HTML com um editor de arquivos simples. Faremos isso uma única vez neste livro-texto, pois, nas demais 
alterações e criações de arquivos, utilizaremos a ferramenta Microsoft Visual Studio Code.
Clique com o botão direito do mouse no arquivo sabores.html, selecione a opção “Abrir com” e 
depois “Bloco de notas”, conforme mostrado na imagem a seguir.
Figura 61 – Abrindo arquivo sabores.html com Bloco de Notas
41
PROGRAMAÇÃO WEB RESPONSIVA
Criaremos a estrutura básica de um arquivo HTML dentro do nosso arquivo sabores.html, conforme 
aprendemos até aqui, ou seja, inserindo as tags <html>, <head>, <body>, <title> e <h1>.
Figura 62 – Página sabores.html editada no Bloco de Notas
Após salvar o arquivo, execute-o no navegador. Veja que o navegador irá exibir uma página que tem 
um título na aba superior e uma tag <h1>, também utilizada para título, mas dentro do corpo da página.
Figura 63 – Página sabores.html executada no navegador
Se abrirmos o arquivo sabores.html com o Microsoft Visual Studio Code, clicando com o lado direito 
do mouse em sabores.html e selecionando a opção “Abrir com” e depois “Visual Studio Code”, notaremos 
que o nosso arquivo tem a estrutura que criamos no Bloco de Notas. No entanto, o Visual Studio Code 
possui indentações, contagem de linhas e diversos recursos que nos auxiliam quando trabalhamos com 
páginas HTML. Portanto, de agora em diante, trabalharemos em nossos projetos apenas com o Microsoft 
Visual Studio Code.
42
Unidade I
Figura 64 – Página sabores.html aberta no Microsoft Visual Studio Code
Agora, voltamos a editar o arquivo index.html para começarmos a trabalhar com links. Primeiramente, 
faremos o link entre páginas diferentes. Dentro do <body>, coloque o código indicado na figura a seguir.
Figura 65 – Link na página index.html que aponta para a página sabores.html
Note que dentro da tag colocamos o caminho segundo o qual se encontra a página que queremos 
acessar. Em seguida, inserimos um nome para o link e fechamos a tag <a>. Se, por um acaso, trocarmos 
de local, a página (ou talvez o nome dela), o link não funcionará.
Figura 66 – Página index.html executada no navegador
Observe que, ao clicarmos no link, seremos levados diretamente para a página “sabores”. No entanto, 
a página index é substituída pela “sabores”. Caso a intenção seja abrir uma nova aba com a página 
“sabores”, deixando ainda aberta a página index, precisaremos adicionar o elemento target no link, 
conforme mostrado na imagem a seguir.
43
PROGRAMAÇÃO WEB RESPONSIVA
Figura 67 – Elemento target adicionado ao link
Note que, ao clicarmos no link, a página “sabores” será aberta em uma nova aba.
Figura 68 – Página sabores.html aberta por meio do link que utiliza elemento target
De agora em diante, vamos trabalhar de uma maneira diferente com links: criaremos um link para 
nossa própria página. Você já deve ter notado que a nossa página index já está grande o suficiente 
para aparecer uma barra de rolagem em sua lateral. Isso significa que, em determinado momento, 
podemos querer que o usuário vá direto a determinado ponto da página que ele pode não ter 
visualização no momento por conta da barra de rolagem. Para isso, criamos um link âncora e 
depois um link que chama a âncora.
Vamos por partes. Inicialmente, coloque a âncora mostrada a seguir no código, logo depois 
do <body>.
Figura 69 – Link âncora criado no início da página, logo após a abertura do <body>
Note que, pela primeira vez, utilizamos o recurso comentário dentro de nosso código. Ao escrevermos 
dentro do <!-- e do -->, fizemos um comentário no código, que não será exibido na página, mas que 
ajudará quem posteriormente ler o código a entender o motivo de aquela tag estar ali.
Depois, coloque o código indicado na figura a seguir antes do final do <body>.
Figura 70 – Link para a âncora criada no fim da página
Veja que foi criado um link no final da página com o texto “Vai para o topo da página”. Ao 
clicarmos nele, seremos direcionados para a âncora que criamos anteriormente com o nome topo. 
Veja que o “#topo” criado no link dentro do <href> vai diretamente para a referência topo que 
criamos na âncora.
44
Unidade I
Figura 71 – Site em execução com link para o âncora no fim da página
Podemos também fazer o link com uma página de algum outro site específico. Para isso, utilizamos um 
recurso bem parecido com o que foi usado no início na página “sabores”. No entanto, em vez de usarmos 
esse caminho, colocaremos o link da web para outro site, conforme código mostrado na figura a seguir.
Figura 72 – Link para página externa
Observe que utilizamos a tag <br>, pois, se tivéssemos inserido apenas os links, eles ficariam 
encavalados um ao lado do outro. Ao testar o link, seremos redirecionados para uma nova aba do 
navegador com o site externo em execução.
Figura 73 – Página em execução com links criados
45
PROGRAMAÇÃO WEB RESPONSIVA
3.2 Lista ordenada
Agora que o site já tem uma página exclusiva para os sabores de pizzas, podemos listar todos os 
sabores desejados. Para isso, utilizaremos os elementos <ol> e <li> a fim de montarmos uma lista 
numerada dentro da página de sabores, conforme código mostrado na figura a seguir.
Figura 74 – Criação de uma lista de sabores de pizzas na página sabores.html
Como resultado, no nosso navegador teremos uma lista bem completa de sabores de pizzas, conforme 
mostrado na figura a seguir.
46
Unidade I
Figura 75 – Site em execução com lista de sabores na página sabores.html
3.3 Lista não ordenada
Agora que já aprendemos a fazer listas numeradas, ou ordenadas, podemos também fazer listas 
não numeradas utilizando os elementos <ul> e <li>. Nesse sentido, veja o código mostradona figura a 
seguir, ainda na página “sabores”.
Figura 76 – Criação de uma lista de sabores não ordenada em sabores.html
47
PROGRAMAÇÃO WEB RESPONSIVA
Temos, assim, uma lista não numerada (não ordenada) de sabores de pizza doces, conforme mostrado 
na figura a seguir.
Figura 77 – Site em execução com lista de sabores não ordenada na página sabores.html
4 APROFUNDANDO COM O HTML5
4.1 Lista de links
Com o conhecimento adquirido até o momento, você deve estar se perguntando: e se eu quiser fazer 
uma lista de links? Isso é possível, mas, para tanto, precisamos articular alguns conceitos que aprendemos.
Para fazê-lo, utilizamos o elemento <nav>. Dentro da página index.html, criaremos uma lista de 
links conforme mostrado no código da figura a seguir.
Figura 78 – Lista de links dentro da página index.html
48
Unidade I
Podemos declarar o <nav> em qualquer lugar que contenha uma lista de links. Ele representa uma 
seção na página que aponta para outras áreas ou páginas.
Figura 79 – Página index.html executada no navegador com lista de links
4.2 TAG <aside>
Quando utilizamos uma lista de links relacionada com o conteúdo que estamos discutindo na 
página, que poderia ser separado do conteúdo principal, mas que apresenta uma ligação tangencial 
com tal conteúdo, usamos o elemento <aside>. Muitas vezes, quanto precisamos escrever um glossário 
ou os links relacionados, também empregamos esse recurso, que visualmente não muda a aparência do 
conteúdo, mas diz ao navegador do que se tratam os links.
Figura 80 – Tag <aside> que visualmente não altera nada na página
4.3 TAG <main>
O elemento <main> diz para o navegador qual é o conteúdo principal, de maior relevância, do site. 
Uma página bem construída possui apenas um elemento <main>. O uso dessa tag também não gera 
efeitos visuais aparentes. Contudo, trata-se de um elemento de extrema importância para o Google, por 
exemplo, pois ele conseguirá saber qual é o conteúdo principal da sua página. Como no nosso caso o 
conteúdo principal refere-se às pizzas, deixaremos o <main> da forma apresentada na figura a seguir.
49
PROGRAMAÇÃO WEB RESPONSIVA
Figura 81 – Tag <main> que visualmente não altera nada na página
4.4 Imagens
Agora, chegamos a uma etapa bastante aguardada, começaremos a inserir imagens no nosso site. 
Para isso, utilizaremos a tag <img>, que apresenta as seguintes características:
•	 src: aponta o caminho da imagem nas pastas do projeto do seu site.
•	 alt: utilizado por deficientes visuais e/ou quando a imagem não é carregada corretamente no site. 
Trata-se de um recurso específico no qual a imagem é descrita por um texto.
•	 height: insere a altura da imagem na página. Trata-se de um recurso de extrema importância para 
o navegador alocar previamente um espaço à imagem ser carregada.
•	 width: define a largura da imagem. Trata-se também de um recurso de extrema importância para 
o navegador alocar previamente um espaço à imagem ser carregada.
É necessário ressaltar que existia ainda o elemento <border>. Entretanto, esse recurso foi 
descontinuado no HTML5 e, por enquanto, funciona somente no navegador Mozilla Firefox.
Para começarmos nosso trabalho com imagens, retornaremos à pasta do nosso projeto e 
criaremos uma subpasta para elas. Essa nova pasta será chamada de “Imagens”, conforme mostrado 
na figura a seguir.
Figura 82 – Criação de uma pasta para o armazenamento das imagens do site
50
Unidade I
Precisaremos fazer o download de alguma imagem para inserir em nossa página. Você pode utilizar 
uma imagem de sua preferência ou seguir os passos desenvolvidos a seguir para conseguir uma.
 Saiba mais
A fim de adquirir imagens gratuitas, acesse o site a seguir.
Disponível em: https://pixabay.com/. Acesso em: 19 abr. 2021.
Figura 83 – Site pixabay.com, próprio para fazer download de imagens gratuitas
É possível digitar a palavra “pizza” na barra de busca do site. Com isso, você será direcionado 
para outra página do site, que disponibiliza centenas de imagens de pizzas, conforme mostrado na 
figura a seguir.
Figura 84 – Busca por pizza no site Pixabay
51
PROGRAMAÇÃO WEB RESPONSIVA
Escolha a imagem que queira utilizar no site e clique nela. Você será direcionado para outra página 
na qual aparecerá apenas a imagem selecionada.
Figura 85 – Imagem da pizza escolhida no site Pixabay
Ao lado direito, aparecerá o botão “Free Download”. Clique nele para fazer o download da imagem 
selecionada. Na sequência, irá surgir a opção para escolher a resolução da imagem. Escolha a menor 
disponível, pois, quanto maior for a resolução da imagem, mais lenta a página ficará.
Figura 86 – Imagem da pizza escolhida no site Pixabay
Opte, no caso, pela resolução 640x426. Caso não apareça exatamente essa resolução, selecione, 
como dissemos, a menor resolução possível. A imagem ficará disponível na pasta de downloads do 
Windows, conforme mostrado na figura a seguir.
Figura 87 – Pasta de downloads do Windows após efetuar o download da imagem selecionada
52
Unidade I
Clique com o botão direito do mouse na imagem, selecione a opção renomear e renomeie-a para 
pizza1. Note que, nos detalhes, podemos verificar que ela é do tipo jpg, conforme mostrado na coluna 
“Tipo” da figura a seguir.
Figura 88 – Pasta de downloads do Windows após 
renomearmos para pizza1 a imagem selecionada
Copiaremos essa imagem para a pasta de imagens que criamos dentro da pasta do nosso projeto. 
Finalizada essa cópia, nossa pasta de imagens ficará da seguinte maneira.
Figura 89 – Pasta de imagens do projeto
Agora que já escolhemos uma imagem para o site, iremos inserir o código mostrado na figura a 
seguir no início da tag <body> do arquivo index.
Figura 90 – Link para a imagem pizza1.jpg dentro da página index.html
Assim, ao atualizarmos nosso navegador, notaremos a presença da imagem que colocamos na pasta, 
conforme mostrado na figura a seguir.
53
PROGRAMAÇÃO WEB RESPONSIVA
Figura 91 – Página index.html executada após a inserção da imagem
Caso seja necessário, altere os valores de tamanho e de largura para ajustar o tamanho da imagem 
corretamente no seu site. Ao longo dos próximos tópicos, será ensinado como fazemos para colocar a 
imagem como background. Abordaremos essa situação quando estivermos estilizando as páginas com 
o uso do CSS3.
4.5 TAG <figure>
Já que colocamos uma imagem, é necessário dizer ao navegador do que se trata tal inserção. Então, 
utilizaremos o elemento <figure>, conforme mostrado na figura a seguir.
Figura 92 – Tag <figure>
Visualmente, a tag <figure> não altera nada na página. Assim, usaremos o elemento <figcaption> 
para adicionarmos também uma descrição a ela.
Figura 93 – Tag <figcaption>
54
Unidade I
Após inserirmos o <figcaption>, nossa página index.html ficará conforme mostrado na figura 
a seguir.
Figura 94 – Site em execução no navegador após inserirmos o elemento
4.6 TAG <footer>
Estamos já na finalização de nosso primeiro contato com o HTML. Logo, chegou o momento de 
aprendermos a colocar as informações que ficam no rodapé do site, local onde geralmente estão o nome 
do criador, os direitos, o ano e as informações adicionais. O elemento que usamos para isso é o <footer>. 
Ele se encontra no final da página, conforme mostrado na figura a seguir.
Figura 95 – Tag <footer> no final da tag <body> da página index.html
Ao final da página index.html, encontraremos os dados inseridos dentro do elemento <footer>. 
Precisamos lembrar que os dados que vemos aparecem pelo fato de eles estarem dentro das tags 
<p>, visto que o <footer> visualmente não altera em nada a página. Trata-se mais de uma tag que 
refina a página e serve como referência para os user-agents localizarem a página nos navegadores e 
nos buscadores.
55
PROGRAMAÇÃO WEB RESPONSIVA
Figura 96 – Final da página index.html em execução
Nosso site ainda apresenta um visual retrô, dos anos de 1990. Por enquanto não faz muita diferença 
colocarmos as informações no <footer>, pois parecem apenas mais dados do site. Contudo,quando 
começarmos a trabalhar o visual da nossa página, o <footer> fará todo o sentido.
4.7 TAG <time>
O HTML apresenta também uma tag para o tempo, a tag <time>. Já que colocamos no <footer> a 
data de publicação do site, nada mais justo do que dizer para o navegador que essa informação não é 
apenas um texto, mas sim uma data.
Figura 97 – Tag <time>
Nesse momento, a tag <time> não muda o visual observado no navegador.
4.8 TAG <cite> e TAG <q>
Enquanto elaboramos nosso site, pode ser necessário o uso de material de terceiros, e esse precisa 
ser referenciado. Nesse sentido, podemos fazer citações a conteúdos que não foram escritos pelo autor 
principal. Para isso, normalmente utilizamos o elemento <cite> em conjunto com <q>, responsável por 
apresentar o conteúdo retirado de outra fonte.
Figura 98 – Tags <q> e <cite>
Ao executarmos a página index.html após a inserção das tags <q> e <cite>, teremos o resultado 
mostrado na figura a seguir.
56
Unidade I
Figura 99 – Site em execução no navegador utilizando as tags <q> e <cite>
4.9 Links em imagens
Em determinado momento, podemos querer associar imagens do nosso site a conteúdos que se 
encontram fora de nossa página. Para vermos como isso pode ser feito, vamos voltar a trabalhar com a 
imagem da pizza, associando-a a um link que irá direcionar o leitor à página que remete ao conteúdo 
adicional da imagem.
Figura 100 – Link para a página sabores.html dentro da imagem pizza1.jpg
Note que trabalhamos bastante com a imagem da pizza. Por meio de pequenas alterações, fomos 
agregando elementos que deram novas funcionalidades ao nosso conteúdo. Veja o fluxo que seguimos 
até o momento na figura a seguir.
<figure>
<figure>
<a>
</figure>
</figure>
</a>
<figure> </figure>
<img>
<img>
<img>
<img>
<figcaption>
</figcaption>
<figcaption>
</figcaption>
Figura 101 – Fluxograma explicando código da tag <figure>
Observe que agora, em seu navegador, ao passar o mouse pela imagem, aparece aquela conhecida 
“mãozinha”, que significa que aquilo é um link clicável. Então, ao clicar, você será redirecionado para outra página.
57
PROGRAMAÇÃO WEB RESPONSIVA
Neste passo, a seu critério, é possível utilizar o atributo target=“_blank” para abrir o link em outra aba.
4.10 Trabalhando com tabelas
Em determinado momento, precisaremos utilizar tabelas para descrever algum conteúdo. A forma 
mais prática de fazermos isso é com o uso da tag <table> em conjunto com as tags <tr>, <th> e <td>.
 Lembrete
Vale lembrarmos as funções das tags descritas a seguir.
• tag <tr>: define uma linha da tabela.
• tag <th>: define uma célula de título.
• tag <td>: define uma célula da tabela.
Coloque o complemento mostrado na figura a seguir na página “sabores”.
Figura 102 – Criação de tabela dentro da página sabores.html
Podemos observar o resultado obtido no nosso navegador. Vemos que o conteúdo está descentralizado. 
Entretanto, vamos arrumar isso quando trabalharmos com o CSS3, na próxima unidade deste livro-texto.
58
Unidade I
Figura 103 – Trecho final da página sabores.html executado no navegador, com ênfase na tabela desenvolvida
4.11 TAG <div>
Você lembra quando falamos de seções? Pois bem, a tag <div> é responsável por dividir nossa página 
em seções. Ela faz divisões não apenas no texto, mas em todo o conteúdo, ou seja, pode ser usada 
como forma de particionar o nosso conteúdo. Esse elemento será fundamental quando estudarmos o 
framework Bootstrap.
Figura 104 – Implementação da tag <div> na página index.html
59
PROGRAMAÇÃO WEB RESPONSIVA
Visualmente, ainda não é possível ver as mudanças no navegador, mas, assim que aprendermos o 
CSS, conseguiremos padronizar essas tags de maneira personalizada e individualizada.
4.12 TAG <font>
Em HTML, temos uma tag para definir a formatação das fontes de nossas páginas. Embora atualmente 
não seja comum padronizar as famílias de fontes e de estilos dentro do HTML, veremos, posteriormente, 
que o CSS3 é utilizado para esses fins e iremos abordar aqui as padronizações básicas possíveis dentro 
do HTML. Dentro da página index.html, logo após a tag <figure> criada anteriormente, inseriremos o 
parágrafo mostrado na figura a seguir.
Figura 105 – Implementação da tag <font> na página index.html
Ao executarmos nossa página no navegador, veremos o resultado mostrado na figura a seguir. Note 
que o tipo, o tamanho e a cor da fonte foram alterados no parágrafo inserido.
Figura 106 – Página index.html executada no navegador após inserção do parágrafo com padronização de fonte
4.13 Style background color
Podemos alterar a cor de diversos elementos. Começaremos com o fundo de nossas páginas dentro 
do HTML. Apesar de essa configuração normalmente ser feita dentro do CSS3, mostraremos, a seguir, 
como fazê-la diretamente no HTML.
60
Unidade I
Acesse a página sabores.html e faça a alteração mostrada na figura a seguir.
Figura 107 – Alteração da cor de fundo dentro do body da página sabores.html
Após realizar a alteração no <body>, ao executar a página no navegador, teremos o resultado 
mostrado na figura a seguir.
Figura 108 – Página sabores.html executada no navegador após a alteração da cor de fundo
Podemos alterar a cor do background de outros elementos, como, por exemplo, o elemento <h1>, 
conforme mostrado no código da figura a seguir.
Figura 109 – Alteração da cor de fundo dentro do elemento <h1>
Após realizarmos a alteração no elemento <h1>, ao executar a página no navegador, teremos o 
resultado mostrado na figura a seguir.
61
PROGRAMAÇÃO WEB RESPONSIVA
Figura 110 – Página sabores.html executada no navegador após a alteração da cor de fundo do elemento <h1>
Para finalizarmos a alteração de cores dentro do HTML em nosso material, lembrando que outros 
elementos, além dos mencionados, podem ter a cor do background mudada, alteraremos a cor de uma 
tabela. Portanto, na página sabores.html, iremos modificar a cor da tabela que criamos anteriormente.
Figura 111 – Alteração da cor de fundo dentro do elemento <table>
Após realizarmos a alteração no elemento <table>, ao executarmos a página no navegador, teremos 
o resultado mostrado na figura a seguir.
62
Unidade I
Figura 112 – Página sabores.html executada no navegador após a alteração da cor de fundo do elemento <table>
4.14 Explicações sobre o código das cores
Vamos agora entender um pouco mais sobre a tabela de cores que utilizamos em nossas páginas 
HTML. Abriremos o Paint 3D do Windows 10, conforme mostrado na figura a seguir.
Figura 113 – Tela inicial do Microsoft Paint 3D do Windows 10
63
PROGRAMAÇÃO WEB RESPONSIVA
No canto inferior direito, você vai encontrar um botão chamado de “Adicionar cor”. Clique nele e será 
direcionado para a tela mostrada na figura a seguir.
Figura 114 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10
Note que foi aberta uma janela que disponibiliza várias informações sobre cores, aí está o segredo 
das cores. Ao arrastarmos o quadradinho mostrado na figura a seguir para outro lugar, teremos outra 
cor e outros códigos irão aparecer. Vamos entender, em breve, o motivo de isso acontecer.
Figura 115 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10 após alteração de cor
Para nosso exemplo, escolhemos um tom de rosa que tem determinados códigos. A fim de entendê-los, 
é necessário sabermos que a quantidade total de tons de cada cor é especificamente 255. Assim, as cores 
que trabalhamos são o tão falado trio RGB, que são tons de vermelho, verde e azul, que nada mais são 
do que as cores primárias.
64
Unidade I
Para um vermelho puro, temos R = 255; G = 0; B = 0. Faça o teste no Paint e veja qual cor aparece 
se colocarmos 255 no vermelho, 0 no verde e 0 no azul.
Figura 116 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10 após a alteração de cor para vermelho
Note que, além de a cor mudar para o vermelho mais puro, digamos assim, aquele campo chamado 
de “Hexa” mudou. Vamos entender como isso funciona.
Os códigosde cores HTML possuem seis valores hexadecimais. No caso do exemplo, temos F249A3. 
Tais letras representam 2 para o vermelho, 2 para o verde e 2 para azul, ou seja, F2 é a quantidade de 
vermelho, 49 é a quantidade de verde e A3 é a quantidade de azul. Os valores começam a partir de 00 e 
vão até o FF, pois, de acordo com os números hexadecimais, só é possível contar de 0 até F.
No CSS3, será possível trabalharmos com três tipos de códigos para chamarmos as cores, poderemos 
chamá-las pelo nome, pelo código RGB ou por seu código Hexa. Nos exemplos anteriores, em que 
alteramos o background color, eles foram alterados pelo nome, mas poderíamos ter utilizado o código 
RGB ou mesmo o Hexa.
Figura 117 – Tabela de cores
65
PROGRAMAÇÃO WEB RESPONSIVA
 Saiba mais
Para conhecer diversas cores extras com seus respectivos nomes, códigos 
hexadecimais e códigos RGB, acesse:
CELKE. Tabela de cores HTML (nome, hexadecimal e RGB). Celke, 1º jan. 
2018. Disponível em: https://cutt.ly/vvIudjX. Acesso em: 19 abr. 2021.
4.15 Formulários
Os formulários são usados para permitir a entrada de dados pelos usuários. Em HTML5, há diferentes 
tipos de campos de entrada, tais como: campo de texto simples, campo de texto longo (múltiplas linhas), 
data, caixa de seleção, caixa de marcação etc.
Agora, criaremos uma nova página dentro do nosso projeto. Ela será chamada de delivery.html e sua 
localização estará dentro da pasta “Páginas”.
Figura 118 – Página delivery.html criada dentro da pasta “Página”
Para exercitarmos o aprendizado no tópico de links, também criaremos um link dentro da 
página index.html, na lista de links que criamos, para, assim, abrirmos a página delivery indicada 
na figura a seguir.
Figura 119 – Link dentro da lista de links na página index.html
A página delivery.html precisa ser editada. Para isso, iremos criar, dentro dela, a estrutura básica de 
uma página HTML, conforme aprendemos até o momento.
66
Unidade I
Figura 120 – Link dentro da lista de links na página index.html
Vamos aprender como usar cada tipo de campo dentro de um formulário. Inseriremos um formulário 
dentro do <body> na página delivery.html. A tag utilizada para os formulários é <form>. Introduziremos 
também um título, dentro da tag <h1>.
Figura 121 – Utilização da tag <form> dentro da página delivery.html
Agora que inserimos um formulário na página utilizando a tag <form>, precisamos entender 
todos os atributos que esse elemento possui para, assim, conseguirmos concluir a inserção do 
formulário, visto que a tag <form> sozinha não altera em nada o visual da página. Ela apresenta 
os seguintes atributos:
• name: nome do formulário.
• id: identificação de qualquer outro elemento HTML.
• action: função que define qual página será chamada quando o formulário for enviado. Geralmente, 
é um script em uma linguagem server-side, como PHP e JSP.
• method: com o valor get, envia os dados do formulário pela URL; já com o valor post, envia os 
dados implicitamente, modo não visível ao usuário.
• rnctype: usado para fazer o upload de arquivos, quando é definido o valor multipart/form-data.
67
PROGRAMAÇÃO WEB RESPONSIVA
Criaremos um campo para receber um texto simples, ou seja, <input type=”text” />. Ele será criado 
com tamanho de 40 caracteres, comprimento máximo de 150 caracteres, nome = “endereço” e texto 
padrão da caixa igual a “Digite o endereço”, conforme mostrado na figura a seguir.
Figura 122 – Criação de um campo para receber endereço dentro do formulário
Nosso formulário deverá ficar da forma mostrada na figura a seguir.
Figura 123 – Site em execução no navegador após criação de um campo para receber endereço dentro do formulário
Criaremos um campo para receber uma data, ou seja, <input type=”date” />. Ele será criado com 
nome = “data_pedido”, conforme mostrado na figura a seguir.
Figura 124 – Criação de um campo para receber data dentro do formulário
Nosso formulário deverá ficar da maneira mostrada na figura a seguir.
Figura 125 – Site em execução no navegador após criação de um campo para receber data dentro do formulário
Note que, ao clicar dentro do campo “Data do Pedido”, é aberto automaticamente um calendário no 
qual o usuário pode navegar e escolher o dia, o mês e o ano desejados, sem precisar utilizar o teclado, 
apenas com clique no mouse.
68
Unidade I
Figura 126 – Site em execução no navegador demonstrando o campo de data criado no formulário
Criaremos um campo para receber uma senha, ou seja, <input type=”password” />. Ele será criado 
com nome = “senha”, conforme mostrado na imagem a seguir.
Figura 127 – Criação de um campo para receber senha dentro do formulário
Inseriremos o elemento <br> entre os campos endereço, data_pedido e senha em nosso formulário.
Figura 128 – Inserção de <br> entre os campos do formulário
Nosso formulário deverá ficar da forma mostrada na figura a seguir.
Figura 129 – Site em execução no navegador após a criação de um campo 
para a senha e a inserção da tag <br> entre os campos dentro do formulário
69
PROGRAMAÇÃO WEB RESPONSIVA
Podemos notar que, ao digitarmos algum valor no campo “Senha de Autorização” que criamos, ele 
aparecerá com caracteres especiais por conta de o campo ser do tipo “password”.
Figura 130 – Site em execução no navegador mostrando o campo de senha criado no formulário
Criaremos um campo para receber data e hora, ou seja, <input type=”datetime-local”/>. Ele será 
criado com nome = “datahora_pedido”, conforme imagem a seguir:
Figura 131 – Criação de um campo para receber data e hora dentro do formulário
Nosso formulário deverá ficar da forma mostrada na figura a seguir.
Figura 132 – Site em execução no navegador após a criação de um campo para receber data e hora dentro do formulário
Note que, ao clicarmos dentro do campo “Data e Hora do Pedido”, é aberto automaticamente um 
calendário onde o usuário pode navegar escolhendo o dia, o mês, o ano e o horário desejados, sem 
precisar utilizar o teclado, apenas com clique no mouse.
70
Unidade I
Figura 133 – Site em execução no navegador mostrando o campo de data e hora criado no formulário
Criaremos uma caixa de marcação única, ou seja, <input type=”radio” />. Ele será criado com nome = 
“alternativa”. O exemplo a seguir exibe 4 opções para que o usuário selecione apenas uma. Observe que o 
atributo name tem que ser igual para todas as caixas, havendo mudanças apenas nos atributos value e id.
Figura 134 – Criação da caixa de marcação
Nosso formulário deverá ficar da forma mostrada na figura a seguir. Note que a caixa de marcação, 
da maneira como a criamos, aceita apenas que uma opção seja selecionada por vez.
Figura 135 – Site em execução no navegador após a criação da caixa de marcação
Criaremos uma caixa de marcação múltipla, ou seja, <input type=”checkbox”/>. O campo será criado 
com nome = “alternativa”. O exemplo mostrado na figura a seguir exibe quatro opções para que o 
71
PROGRAMAÇÃO WEB RESPONSIVA
usuário selecione uma ou mais. Observe que o atributo name tem que ser igual para todas as caixas, 
havendo mudanças apenas nos atributos value e id.
Figura 136 – Criação da caixa de marcação múltipla
Nosso formulário deverá ficar da forma mostrada na figura a seguir. Note que a caixa de marcação 
múltipla aceita que várias opções sejam selecionadas ao mesmo tempo.
Figura 137 – Site em execução no navegador após a criação da caixa de marcação múltipla
Para alguns tipos de informações comuns em formulários, o HTML5 possui tipos específicos de 
input, que funcionam da mesma forma que o input do tipo text. Isso existe para dar semântica 
(significado) ao campo de entrada. Caso contrário, usando apenas o tipo text, seria mais difícil 
trabalharmos com diferentes números de telefones, por exemplo.
Inseriremos um campo para trabalhar com números de telefone, conforme mostrado na 
figura a seguir.
Figura 138 – Criação da caixa para o telefone
Nosso formulário deverá ficar da forma mostrada na figura a seguir.
72
Unidade I
Figura 139 – Site