Introdução à Programação Web

Prévia do material em texto

FELIPE CAVALARO
PROGRAMAÇÃO PARA WEB
PROGRAMAÇÃO PARA WEB
2023
Felipe Cavalaro
PRESIDENTE 
Frei Thiago Alexandre Hayakawa, OFM
DIRETOR GERAL 
Jorge Apóstolos Siarcos 
REITOR 
Frei Gilberto Gonçalves Garcia, OFM 
VICE-REITOR 
Frei Thiago Alexandre Hayakawa, OFM
PRÓ-REITOR DE ADMINISTRAÇÃO E PLANEJAMENTO 
Adriel de Moura Cabral 
PRÓ-REITOR DE ENSINO, PESQUISA E EXTENSÃO 
Dilnei Giseli Lorenzi 
COORDENADOR DO NÚCLEO DE EDUCAÇÃO A DISTÂNCIA - NEAD 
Franklin Portela Correia
CENTRO DE INOVAÇÃO E SOLUÇÕES EDUCACIONAIS - CISE
Franklin Portela Correia
PROJETO GRÁFICO
Centro de Inovação e Soluções Educacionais - CISE
CAPA
Centro de Inovação e Soluções Educacionais - CISE
DIAGRAMADOR
Lucas Ichimaru Testa
© 2023 Universidade São Francisco
Avenida São Francisco de Assis, 218
CEP 12916-900 – Bragança Paulista/SP
CASA NOSSA SENHORA DA PAZ – AÇÃO SOCIAL FRANCISCANA, PROVÍNCIA 
FRANCISCANA DA IMACULADA CONCEIÇÃO DO BRASIL – 
ORDEM DOS FRADES MENORES
FELIPE CAVALARO
Mestre em Educação pelo Programa de Pós-Graduação Stricto Sensu da Universida-
de São Francisco. Possui pós-graduação em nível de Especialização (Lato sensu) em 
Docência Universitária pela FAE Centro Universitário e graduação em Engenharia de 
Computação pela Universidade São Francisco. Professor da Universidade São Francis-
co, lecionando principalmente nos cursos de Engenharia de Computação e Análise e 
Desenvolvimento de Sistemas. Atua também em capacitações de tecnologias educacio-
nais para professores do ensino superior
O AUTOR
SUMÁRIO
UNIDADE 01: INTRODUÇÃO AS APLICAÇÕES WEB COM HTML E CSS ........6
1. Introdução as aplicações Web ............................................................................6
2. HTML ...................................................................................................................8
3. CSS .....................................................................................................................13
6
1
Introdução as Aplicações Web com HTML e CSS UNIDADE 1
INTRODUÇÃO AS APLICAÇÕES 
WEB COM HTML E CSS
INTRODUÇÃO
Cada vez utilizamos dispositivos conectados, ou seja, em casa, no trabalho ou outros 
locais que frequentamos interagimos com dispositivos conectados na internet, que pos-
suem diversos tamanhos, poder computacional e diferentes maneiras de interação (voz, 
sons, toque, entre outros).
Segundo a Associação Brasileira de Internet das Coisas (2022), em até 2025, mais de 
27 bilhões de dispositivos já estão conectados e se conversam no mundo. Portanto, um 
mercado já grande com possível expansão que irá necessitar de desenvolvedor para criar 
softwares que façam a interação com o usuário (front-end) e/ou que fazem a parte interna 
(back-end), como por exemplo, o tratamento dos dados. Dessa forma, serão mostrados 
a seguir os alguns conceitos e linguagens fundamentais para se desenvolver aplicações 
voltadas para dispositivos conectados que permitem fazer a navegação pela web.
1. INTRODUÇÃO AS APLICAÇÕES WEB
Um desenvolvedor pode criar diversas aplicações em linguagens diferentes para o mais 
variado fim, mas este texto será focado em sistemas cliente-servidor, conforme é mos-
trado Figura 1, a qual mais caracteriza os sistemas para web, ou seja, em sistemas que 
há um dispositivo chamado de servidor que executa uma aplicação para fornecer um 
serviço aos clientes que também são aplicações ligadas por uma rede de comunicação.
Servidor
Internet
Cliente
Cliente
Cliente
Figura 01. Modelo Cliente-Servidor
Fo
nt
e:
 e
la
bo
ra
da
 p
el
o 
au
to
r.
7
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
A aplicação mais utilizada para acessar os servidores web pelos dispositivos clientes são 
os navegadores (browsers) que permitem que o usuário navegue pelos variados protoco-
los usados na internet. De forma simplificada, quando você está usando o navegador do 
seu computador, ele é um cliente que está conectado ao servidor através da internet. Toda 
vez que você pesquisa em seu mecanismo de busca é realizada uma solicitação para o 
servidor por intermédio de um recurso específico de comunicação (porta) e o servidor 
envia essa resposta para o cliente apresentando para você através do navegador.
Para toda essa navegabilidade, é necessário o uso de alguns protocolos de comunicação 
da internet. Inicialmente, quando digitamos a URL (Uniform Resource Locator) no nave-
gador, também conhecido como endereço, utiliza-se o protocolo DNS (Domain Name 
System) para traduzir o domínio (endereço eletrônico) para o endereço IP (Internet Proto-
col) do servidor web, fazendo uma analogia quando digitamos o endereço de uma rua e 
obtemos o CEP. Após esse processo, a transferência de informações (hipertexto) ocorre 
normalmente pelo protocolo HTTP (HyperText Trasnfer Protocol), que tradicionalmente 
utiliza a porta 80 (porta padrão) ou a porta 443 quando usa o protocolo com criptografia. 
Outros protocolos e modelos são necessários para entender por completo como funciona 
a internet, entretanto, o objetivo é trazer um conteúdo introdutório para fundamentar o de-
senvolvimento que será promovido adiante e assim que for necessário se aprofundar em 
algum tema ou acrescentar um novo, ele será agregado ao assunto proposto.
SAIBA MAIS
Conheça melhor como funciona o mecanismo da internet lendo livros ou procurando mate-
riais sobre os assuntos:
 ` Redes de Computadores: aborda de forma mais aprofundada o modelo cliente-servidor e 
outros modelos, assim como o funcionamento dos principais protocolos de comunicação 
como TCP, UDP, IP, HTTP, FTP, entre outros.
 ` Sistemas Distribuídos: permite detalhar o funcionamento dos sistemas contendo compu-
tadores independentes e apresentam para o usuário como um único computador.
Antes de iniciar a codificar uma aplicação web, é importante verificar as tecnologias que 
serão ou poderão ser utilizadas, assim como, os usuários que irão utilizar e as tarefas 
que irão realizar, também se terão dados armazenados e como isso será realizado. É 
claro que isso não é exclusividade do desenvolvimento de uma aplicação web e esse 
compreensão terá mais amplitude quando o desenvolvedor adquirir mais experiência, 
mas a realização dessas análises pode poupar tempo de desenvolvimento e retrabalho. 
Um outro ponto importante é a escolha da ferramenta de desenvolvimento conhecida 
como IDE (Integrated Development Envirenment) que poder um simples editor de texto, 
como Notepad para Windows ou Nano no Linux, que praticamente não agrega para o 
desenvolvedor, até ferramentas como Eclipse, NetBeans, VS Code, Notepad++, Editor 
Online CodePad, entre outras ferramentas que auxiliam o desenvolvedor no seu dia a 
dia. Busque conhecer as principais utilizadas e escolha a que mais adeque ao seu estilo 
de desenvolvimento.
8
1
Introdução as Aplicações Web com HTML e CSS
SAIBA MAIS
As principais IDEs estão disponíveis para uso ou download em:
Eclipse - https://www.eclipse.org/downloads/; Acesso em: 25 abr. 2023. 
NetBeans - https://netbeans.apache.org/; Acesso em: 25 abr. 2023. 
VS Code - https://code.visualstudio.com/; Acesso em: 25 abr. 2023.
Notepad++ - https://notepad-plus-plus.org/downloads/; Acesso em: 25 abr. 2023.
CodePad - https://codepad.co/playground. Acesso em: 25 abr. 2023.
2. HTML
Segundo Miletto e Bertagnolli (2014, p. 62), “HTML, ou HyperText Markup Language, 
é uma linguagem de marcação utilizada para criar páginas acessadas a partir de um 
navegador. A característica principal dessas páginas é que elas utilizam hipertexto para 
viabilizar a navegação”.
Observe a Figura 2 contendo o Código 1 abaixo que apresenta um exemplo simples de 
um arquivo HTML.
Figura 02. Código 1: Exemplo de arquivo HTML
01
02
03
04
05
06
07
08
09
10
 
 Codigo 1 
 
 
 
 Exemplo HTML
 Alo Mundo!
 
Fonte: elaborada pelo autor.
O Código 1 mostra vários elementoscompostos por TAGs que são palavras específicas 
juntamente com os sinais de menor (), sendo que no HTML, na maioria das 
vezes elas aparecem aos pares, a primeira indicando seu início e a segunda (contendo 
também a barra “/” após o sinal de menor “”, fazendo que o texto contido seja ignorado pelo navegador no momento da 
apresentação da página, como é mostrado na Figura 3 após salvar o texto contido no 
Código 1 no arquivo com extensão HTML e aberto no navegador.
Figura 03. Resultado apresentado pelo navegador do Código 1
Ainda na Código 1, na linha 07 há a TAG h1 que representa um título no seu maior 
formato, pois existem outros níveis de título. O resultado desse elemento pode ser ob-
servado na Figura 3 apresentando o texto “Exemplo HTML”. Já na linha 08 existe uma 
TAG p que indica um parágrafo como pode ser visualizado na Figura 3 que mostra o 
texto “Alo Mundo!”.
Apesar de todas as TAGs estejam escritas em letras minúsculas, o HTML é uma lingua-
gem case insensitive, portanto, não diferencia as TAGs escritas em minúsculas ou mai-
úsculas, sejam partes delas ou totalmente. Outro ponto que vale informar é que essa 
linguagem ignora espaços e quebras de linhas entre os códigos, portanto, a tabulação e 
quebra de linhas são utilizadas como organização do código, ou seja, uma boa prática, 
mas não influencia no resultado.
Alguns desenvolvedores acrescentam na primeira linha do arquivo HTML a declaração 
 ou para informar para o navegador que a versão utilizada 
é a 5 (cinco), para evitar com que um navegador tente abrir um documento não suportado, 
entretanto, isso acaba não sendo muito adotado, pois todos navegadores populares em suas 
versões atuais suportam essa versão.
10
1
Introdução as Aplicações Web com HTML e CSS
Existem diversas outras TAG que podem ser utilizadas no HTML, no Quadro 1 são apre-
sentadas as principais delas.
Quadro 01. Principais TAGs dos principais elementos do HTML
TAG DESCRIÇÃO
h1 a h6 Título do documento que possui 6 níveis, sendo o maior nível 1 e o menor o nível 6.
br Quebra de linha
ul Lista com itens não ordenados
ol Lista com itens ordenados
li Itens da lista ordenada ou não ordenada
a Ancoragem (vínculo) para outras páginas (links)
img Insere imagem
table Tabela
tr Linha de uma tabela
th Coluna do cabeçalho da tabela
td Coluna do dado da tabela
hr Divisão na horizontal
Fonte: elaborado pelo autor.
A Figura 4 apresenta o Código 2 contendo um exemplo do uso das principais TAGs 
mostradas no Quadro 1.
Figura 04. Código 2: Exemplo utilizando as principais TAGs do HTML
01
02
03
04
05
06
07
08
09
10
11
12
13
14
 
 Codigo 2
 
 
 Principais TAGs
 Abaixo serão mostrados
 as principais TAGs do HTML:
 
 Lista ordenada de linguagens
 
 Linguagem de Marcação
11
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 Folha de Estilo
 
 Lista não ordenada de linguagens
 
 HTML
 CSS
 JavaScript
 
 
 Tabela
 Site com outrasTAGs de HTML:
 
 
 Site
 Link
 
 
 W3 Schools
 https://www.w3schools.com
 
 
 Editor HTML
 https://html-css-js.com/
 
 
 Saiba mais
 
Fonte: elaborada pelo autor.
12
1
Introdução as Aplicações Web com HTML e CSS
O resultado do Código 2 será mostrado no navegador de acordo com que é mostrado 
na Figura 5.
Figura 05. Resultado apresentado pelo navegador do Código 2
Fonte: elaborada pelo autor.
Analise no Código 2, que as TAGs entre as linhas 01 e 06 já foram apresentadas no Códi-
go 1, na linha 08 e 09 também não são TAGs novas, mas destaco a diferença entre dois 
parágrafos e uma quebra de linha (linha 25), nos dois casos ocorreu a quebra do texto, 
mas a primeira se comportou como parágrafo (deixando um espaço um texto e o outro) e 
o segundo o espaçamento entre texto praticamente não ocorre, portanto, há diferença en-
tre fazer dois parágrafos e um parágrafo com quebra de linha (TAG br), observe também 
que a TAG br não aparece aos pares como as TAGs apresentadas no Código 1.
A TAG img contida entre as linhas 09 e 11 faz a inserção de uma imagem GIF na página. 
Repare que além da TAG há os atributos src, alt, width e height. Atributos são palavras es-
peciais utilizadas nas TAGs de abertura para configurar o elemento, neste caso, o atributo 
src indica onde está a imagem que será inserida, alt é um texto utilizado caso a imagem 
não consiga ser inserida na página ou utilizado como recurso de acessibilidade aos defi-
cientes visuais, width para a largura da imagem e height a sua altura em pixels. Acrescen-
13
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
tando que no atributo src pode ser utilizado o caminho absoluto (apresentando o caminho/
endereço completo) ou o caminho relativo (utilizando somente o nome do arquivo e suas 
pastas após a pasta raiz do site). Neste exemplo foi utilizado o caminho absoluto, pois 
é uma imagem hospedada em outro servidor, mas poderia ter sido utilizada somente o 
nome do arquivo se a imagem estivesse salva na mesma pasta do arquivo html.
Entre as linhas 13 e 16 foi apresentada uma lista ordenada com dois itens, observe 
que ela é diferente em relação a lista não ordenada entre as linhas 18 e 22, notando-se 
principalmente que na lista não ordenada são inseridos marcadores e a lista ordenada 
há uma numeração indicação a ordem dos itens, conforme mostrado na Figura 5.
Na linha 23 há um divisor horizontal criado pela TAG hr que apresenta uma linha ho-
rizontal na tela. Entre as linhas 26 e 39 está sendo criada uma tabela com o atributo 
border de valor 1 para se configurar uma borda de 1 pixel. Entre esse elemento há as 
TAGs tr que indica uma nova linha (que foi utilizada três vezes), a primeira linha possui 
um cabeçalho da tabela com as TAG th apresentando o site e link (ficando em negrito, 
conforme a Figura 5), em seguida, foram inseridas duas linhas, uma com os dados do 
“W3 Schools” e outra com “Editor HTML” utilizando a TAG td.
Por fim, na linha 40 foi inserido um vínculo com o texto “Saiba mais”, também conhecido 
como ancoragem, que permite inserir um link através do atributo href, para realizar um 
redirecionamento para um link externo, pagina no mesmo servidor ou parte da mesma 
página. Neste caso, foi utilizado para direcionar a um vídeo disponível na internet. Veja 
na Figura 5, que a formatação do texto contendo um vínculo fica diferente dos demais 
elementos anteriores.
Existem outrasTAGs e atributos úteis no HTML para o desenvolvedor de aplicação 
web, entretanto, será mostrado a seguir o conceito da folha de estilo CSS e depois será 
retomado esses pontos ainda não abordados para fazer o melhor uso desses recursos.
3. CSS
Segundo Alves (2021), o CSS traz uma solução para o problema de inserir atributos de 
formação nas próprias TAGs do HTML, pois:
Um dos principais problemas apresentados por essa técnica é a necessida-
de de repetir o mesmo trecho de código de formatação em todas as pági-
nas que compõem um site. Para evitar esse retrabalho, foram introduzidas 
as folhas de estilo CSS (Cascading Style Sheets, em português Folhas de 
Estilo em Cascata), que permitem, além de recursos de formatação mais 
avançados, a possibilidade de reutilização em vários documentos HTML. 
Quando um estilo é alterado, todas as páginas que o utilizam são atualiza-
das automaticamente ao serem visualizadas (ALVES, 2021, p. 28).
Portanto, é possível criar um arquivo contendo a formatação para cada elemento HTML 
e utilizar esse arquivo como padrão de formatação em diversas páginas. Para compre-
ender melhor a diferença, observe a Figura 3 contendo o Código 3 com uma formação 
CSS incorporada.
14
1
Introdução as Aplicações Web com HTML e CSS
Figura 06. Código 3: Exemplo de formatação CSS incorporada
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
 Codigo 3
 
 
 h2{ color: blue; }
	 	 p{	color:	#ff0000;	}
 #p2{ font-weight: bold;}
 .p3{ 
 font-family: Tahoma;
 font-size: 20px;
 }
 
 Aula CSS
 Paragrafo 1
 Paragrafo 2
 Paragrafo 3 
 
Fonte: elaborada pelo autor.
Fo
nt
e:
 e
la
bo
ra
da
 p
el
o 
au
to
r.
O resultado do Código 3 será mostrado no navegador de acordo com que é mostrado 
na Figura 7.
Figura 07. Resultado apresentado pelo navegador do Código 3
15
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
Fonte: elaborada pelo autor.
Na Figura 6 que possui o Código 3, entre as linhas 04 e 12 há a TAG style que permite inserir 
formatações CSS. Observe que ela possui a seguinte sintaxe: seletor{propriedade: valor;}, 
portanto, é necessário indicar um seletor (o que será formatado), a propriedade (o que será 
modificado) e valor (qual o valor da propriedade que deseja ser atribuído). O primeiro seletor, 
na linha 05, está selecionando todos os elementos h2 e alterando a cor do texto para azul. No 
segundo seletor, na linha 06, selecionou-se todos os parágrafos (p) e também alterou a cor 
do texto, mas dessa vez utilizou-se um código de cor do sistema de cor RGB, portanto, todos 
os parágrafos terão sua cor do texto alterada para vermelho. Na linha 7, utilizou um seletor 
de id, onde acrescenta-se antes do nome do id o símbolo “#”, observe que para esse seletor 
funcionar é necessário acrescentar o atributo id, conforme ocorreu na linha 15, neste seletor 
alterou a formatação da letra para negrito, conforme pode ser notado na Figura 7.
Por fim, entre as linhas 08 e 11 está selecionando a classe através do símbolo ponto “.” 
antes do nome da classe. Assim como o seletor de id, a classe também é um atributo 
que deve ser indicado na TAG que deverá receber a formatação, conforme pode se 
notar na linha 16. A formatação indicada nesse seletor é para modificar a fonte para 
“Tahoma” e o tamanho para 20 pixels, conforme pode ser observado na Figura 7.
Analise que a seleção por meio do elemento permitiu aplicar a todos os elementos a formata-
ção deseja, podendo especificar mais quando se utilizada a classe e sendo mais específico 
ainda quando se utilizada o id, informando que a mesma classe pode ser utilizada por vários 
elementos, entretanto, não pode haver o mesmo id para mais de um elemento, portanto, cada 
elemento que possuir id, eles devem ser diferentes. Outro ponto que pode ser útil para o de-
senvolvedor é que pode ser aplicado mais de uma classe para o mesmo elemento.
O uso do CSS incorporado apresentado no Código 3, conforme mencionado anteriormente, 
traz o problema de ter a necessidade de copiar a formatação para outros arquivos em HTML 
e complicações de manutenção, pois em cada arquivo HTML possui a sua formatação, por 
isso, o arquivo CSS linkado traz mais benefício, fazendo com que a formatação fique em um 
arquivo e todos os arquivos HTML que irão utilizar essa formatação são linkados a ele. Na 
Figura 8 há um exemplo no Código 4 contendo o texto do arquivo CSS e a Figura 9 possui o 
Código 5 contendo o arquivo HTML linkado com o arquivo CSS.
Figura 08. Código 4: Arquivo CSS
01
02
03
04
05
06
07
h2{ color: blue; }
p{	color:	#ff0000;	}
#p2{ font-weight: bold;}
.p3{ 
 font-family: Tahoma;
 font-size: 20px;
}
16
1
Introdução as Aplicações Web com HTML e CSS
Figura 09. Código 5: Arquivo HTML com CSS Linkado
01
02
03
04
05
06
07
08
09
10
11
12
 
 Codigo 5
 
 
 
 Aula CSS
 Paragrafo 1
 Paragrafo 2
 Paragrafo 3 
 
Fonte: elaborada pelo autor.
Fonte: elaborada pelo autor.
Neste caso, o Código 4 e 5 juntos fazem o equivalente ao Código 3, mas agora o Código 
4 pode ser reutilizado por outro arquivo HTML e caso precise de alteração, é necessário 
realizar somente no arquivo CSS, sem ter que abrir todos os arquivos HTML e fazer a 
alteração um por um. Para isso, observe que o Código 4 possui toda a formatação que 
estava entre a TAG style do Código 3 (linhas 05 e 11) e no Código 5 foi removido a TAG 
style e acrescentado na linha 04 a TAG link com atributo rel para indicar que é uma folha 
de estilo e também o atributo href indicando o nome do arquivo contendo a formatação 
que será utilizada. Isso faz com que o arquivo “stylesheet.css” esteja linkado com esse 
arquivo HTML, ou seja, aplique a formatação no arquivo HTML.
Alguns seletores, propriedades e valores do CSS já foram apresentados nos Códigos 3 
e 4, mas o Quadro 2 traz os principais seletores do CSS e o Quadro 3 informa as prin-
cipais propriedades do CSS.
Quadro 02. Principais seletores do CSS
SELETOR DESCRIÇÃO
* Seleciona todos os elementos
#id1 Seleciona o elemento com o identificador id1
.classe1 Seleciona o elemento com a classe classe1
elemento1 Seleciona todos os elementos elemento1
elemento1.classe1 Seleciona todos os elementos elemento1 com a classe classe1
elemento1,elemento2 Seleciona todos os elementos elemento1 e todos os elementos elemento2
elemento1 elemento2 Seleciona todos os elementos elemento2 dentro dos elementos elemento1
elemento1:estado1 Seleciona todos os elementos elemento1 que possuem o estado1 do elemento selecionado
17
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
Fonte: elaborada pelo autor.
SAIBA MAIS
Quando um elemento possui mais de uma formatação em CSS aplicada, pode provocar 
conflitos, mas como saber qual formatação deve ser aplicada? Cada seletor do CSS possui 
um “peso” chamado de especificidade que permitem os navegadores definirem quais valores 
de propriedades serão mais relevantes para o elemento. Para saber mais e como calcular 
procure sobre especificidade do CSS.
Quadro 03. Principais propriedades do CSS
PROPRIEDADE DESCRIÇÃO
color Define a cor do texto
font-family Define a família da fonte
font-size Define o tamanho da fonte
font-weight Determina o peso da fonte, usada para inserir negrito (bold)
font-style Determina o estilo da fonte, usada para inserir itálico (italic)
text-align Define o tipo de alinhamento do texto como alinhado à esquerda, direita, centrali-
zado ou justificado.
text-shadow Determina a sobra de um texto
width Determina a largura do elemento
height Determina a altura do elemento
border Determina a espessura, estilo e cor da borda do elementomargin Define a margem do elemento (espaço na parte de fora do elemento)
padding Define a espaçamento do elemento (espaço na parte de dentro do elemento)
float Define se o elemento irá flutuar a esquerda, direita ou não flutuar.
background Determina os efeitos de plano de fundo dos elementos.
top Determina a posição vertical específica do elemento com referência na parte superiora.
bottom Determina a posição vertical específica do elemento com referência na parte inferiora.
position Define como o elemento será posicionado na página.
scroll-margin Determina as margens da rolagem de um elemento.
Para demonstrar o funcionamento de alguns seletores e propriedades dos Quadros 2 e 
3, o Quadro 4 acrescenta algumas outras TAGs HTML de divisões e quadros que são 
úteis para o desenvolvimento do visual de uma página web.
Quadro 04. TAGs do HTML de divisões e quadros
TAG DESCRIÇÃO
div Elemento para agrupar elementos com objetivo genérico.
header Elemento para agrupar elementos do cabeçalho da página
footer Elemento para agrupar elementos do rodapé da página
nav Elemento para agrupar elementos da navegação (menu) da página
aside Elemento para agrupar elementos do conteúdo de apoio (adicional) da página
18
1
Introdução as Aplicações Web com HTML e CSS
article Elemento para agrupar elementos do artigo da página
section Elemento para agrupar elementos da seção da página
main Elemento para agrupar elementos do conteúdo principal da página
iframe Elemento que permite que um código HTML seja exibido, sendo muito utilizado para 
páginas, vídeos, documentos de outras páginas.
TAG DESCRIÇÃO
Fonte: elaborado pelo autor.
O Código 6 na Figura 10 traz alguns desses elementos do HTML contidos no Quadro 4 
e também no Código 7 na Figura 11 possui alguns seletores presentes no Quadro 2 e 
propriedades do CSS inclusas no Quadro 3.
Figura 10. Código 6: Arquivo HTML 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
 
 Codigo 6
 
 
 
 
 PROGRAMAÇÃO PARA WEB
 
 
 
 HTML
 CSS
 JavaScript
 PHP
 Django
 
 
 
 Assunto Complementar
 BStrap
19
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 React
 Angular
 
 
 
 
 HTML
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 CSS
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 JavaScript
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 PHP
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 Django
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
20
1
Introdução as Aplicações Web com HTML e CSS
52
53
54
55
56
57
58
 
 
 
 Universidade São Francisco
 
 
Fonte: elaborado pelo autor.
De uma forma sintetizada, o Código 6 está criando uma página com cabeçalho na parte 
superiora, no centro da página há o menu de navegação e outro complementar nas late-
rais, o conteúdo principal subdividido em seções, por fim, na parte inferior da página há 
um rodapé. Observe também que o Código 6 está aplicando a formatação do Código 7.
Figura 11. Código 7: Arquivo CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
/* Codigo7.css */
header{
 font-family: fantasy;
 text-shadow: 5px 5px black;
 font-size: xxx-large;
 top: 0;
}
nav{
				position:	fixed;
 width: 150px;
 border-right: 2px green solid;
 height: 100%;
}
main{
 margin-top: 60px;
 height: 75%;
 margin-bottom: 60px;
21
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
Fonte: elaborado pelo autor.
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
}
section{
 margin-right: 160px;
 margin-left: 160px;
 padding: 10px;
 border-bottom: 2px green solid;
}
aside{
	 float:	right;
 width: 150px;
}
footer{
 font-family: sans-serif;
 bottom: 0px;
}
section p{ color: green; }
.quadro{
 background-color: green;
 border-radius: 10px;
 color: white;
	 position:	fixed;
 width: 100%;
 padding: 5px;
}
.verde{ color: green; }
.centro{ text-align: center;}
section:target {scroll-margin-top: 60px;}
22
1
Introdução as Aplicações Web com HTML e CSS
De uma maneira resumida, o Código 7 está formatando elementos de divisão como 
header, nav, main, section, aside e footer, assim como classe nomeadas como quadro, 
verde e centro, entre outros seletores para atender a necessidade de ter uma página 
apresentada na Figura 12.
Figura 12. Resultado apresentado pelo navegador do Código 6 e 7
Fonte: elaborado pelo autor.
Agora se aprofundando mais nos Códigos 6 e 7 para uma melhor compreensão, par-
tindo da parte superiora da página. No Código 6, entre as linhas 2 e 5 está definindo o 
título da página (Codigo 6) e linkando o arquivo Codigo7.css com o arquivo HTML para 
utilizar a formatação do arquivo CSS.
Ainda no Código 6 no corpo da página foi criado um elemento de cabeçalho (divisão) 
entre as linhas 7 e 9 com o texto “PROGRAMAÇÃO PARA WEB”, observe que foi 
adicionado o atributo classe que possui duas classes (quadro e centro) que são apli-
cados nestes elementos. Para compreensão do resultado obtido na parte superiora 
da Figura 12 é necessário migrar para o Código 7, mais especificamente nas forma-
tações aplicadas sobre o elemento. No Código 7, na primeira linha somente há um 
comentário entre /* */ e na linha 2 há o primeiro seletor (header) que tem formatação 
sobre o elemento, fazendo com que a família de fonte seja “fantasy”, em seguida, é 
aplicado uma sombra no texto de cor preta com deslocamento de 5 pixels para baixo 
e direita, na próxima propriedade é estabelecido o tamanho da fonte utilizando o valor 
xxx-large e neste seletor, por fim, na linha 6, estabelece que o elemento estará no 
topo da página. Como há duas classes neste elemento da página HTML, passaremos 
a analisar a linha 34 que possui a classe quadro contendo a primeira propriedade que 
define a cor de fundo para verde, em seguida, na linha 36 é definido o arredonda-
mento das bordas em 10 pixels, depois, na linha 37 informa que a cor do texto será 
branca, o posicionamento será fixado, sua largura será 100% (preencherá as laterais 
23
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
da página) e por fim, na linha 40, está determinando que o espaçamento do elemento 
será de 5 pixels. Para finalizar a formatação aplicada, a classe presente na linha 43 
faz com que o texto seja alinhado ao centro do elemento.
Voltando ao Código 6, entre as linhas 10 e 18 há uma divisão de navegação (nav) que 
possui uma lista não ordenada contendo 5 itens. Observe que cada item da lista possui 
um elemento âncora que permite, ao ser clicado, deslocar para o identificador do texto 
principal, concedendo assim, uma facilidade na navegação. Atente-se também que o 
elemento nav possui uma classe centro que formata todos esses textos ao centro do 
elemento. Há também no Código7, especificamente na linha 8, um seletor que define o 
elemento como fixo, ajusta sua largura para 150 píxels, configura uma borda direita ver-
de com 2 pixels de espessura sólida e uma altura de 100% fazendo com que preencha 
toda a página verticalmente.
Na sequência, no Código 6, linha 19, a divisão aside possui um título h4 e três parágra-
fos contendo em cada um, uma âncora que leva para links externos. Analise que esse 
elemento possui as classes verde (que muda a cor do texto para verde) e centro (que 
centraliza o texto no elemento). Possui também uma formatação na linha 25 do Código 
7, que faz com que o elemento flutue a direita e tenha uma largura de 150 pixels, fa-
zendo assim um menu que se desloca com o texto, pois está flutuando ao movimentar 
a barra de rolagem.
Mais adiante, no Código 6, entre as linhas 26 e 53, é criada uma divisão principal e um 
artigo, sendo que no artigo há cinco seções com identificadores para serem localizado 
pela âncora contida no elemento nav. Em cada seção, além do identificador, há um título 
h2 e quatro parágrafos para exemplificar textos do assunto. Com relação a formatação 
deste trecho da página, no Código 7, há um seletor na linha 14 que configura uma mar-
gem superior de 60 pixels, altura de 75% da página e margem inferior de 60 pixels. Há 
também na linha 19 um seletor que insere a margem direita e esquerda de 160 pixels, 
um espaçamento no elemento de 10 pixels e uma borda inferior na cor verde de 2 pixels 
de espessura sólida. Em seguida, possui um seletor na linha 33 que seleciona todos os 
parágrafos contidos em um elemento de seção e configura a cor do texto para verde. 
Por fim, dispõe na linha 44 um seletor de seção com estado ativo atual e configurando 
uma margem superior da rolagem para 60 pixels, fazendo com que o deslocamento do 
texto na âncora não fique atrás do cabeçalho.
Retornando no Código 6, entre as linhas 54 e 56, há uma divisão de rodapé que contém a 
formatação da classe quadro e centro, fazendo a mesma formatação aplicada no cabeça-
lho, portanto, um fundo verde, borda arredondada de 10 pixels, cor de fonte branca, posição 
fixada com 100% de largura, espaçamento de 5 pixels e texto alinhado ao centro. No Códi-
go 7, na linha 29, também há um seletor que faz com que o elemento tenha uma família de 
fonte sans-serif e um configuração que estabelece o elemento no inferior da página.
Observe que para criar essa página foram criados vários elementos e diversas for-
matação no arquivo CSS, algumas dessas formatações foram utilizadas por diversos 
elementos e outras por elementos específicos, portanto, para se elaborar uma página é 
importante um esboço inicial, pois muitas formatações podem ser reutilizadas encurtan-
do linhas de código de formatação por meio de um bom planejamento.
24
1
Introdução as Aplicações Web com HTML e CSS
Nos códigos CSS apresentados até o momento foram utilizadas algumas propriedades 
que precisaram de unidades de medidas, como um tamanho da fonte, largura ou altura 
de um elemento, entre outras propriedades. O CSS disponibiliza diversas unidades 
relativas e absolutas onde algumas são destacadas no Quadro 5.
Quadro 05. Unidades de medidas no CSS
UNIDADE DESCRIÇÃO
px Unidade absoluta pixel. É a menor unidade da tela do dispositivo.
pt Unidade absoluta ponto. É equivalente a 1.66 pixels.
pc Unidade absoluta paica. É equivalente a 12 pontos.
in Unidade absoluta polegada.
cm Unidade absoluta centímetro.
mm Unidade absoluta milímetro.
em Unidade relativa, onde 1em é igual ao tamanho do elemento pai (qual está dentro)
rem Unidade relativa, onde 1rem é igual ao tamanho padrão da fonte da raiz do documento 
(normalmente 16px)
vw Unidade relativa, onde 1vw representa 1% da largura da janela do navegador
vh Unidade relativa, onde 1vh representa 1% da altura da janela do navegador
vmin Unidade relativa, sendo que 1vmin é 1% da menor dimensão da janela do navegador
vmax Unidade relativa, sendo que 1vmax é 1% da maior dimensão da janela do navegador
% Unidade relativa que é calculada pelo tamanho do elemento pai (qual está dentro)
Fonte: elaborado pelo autor.
Como pode-se observar na Tabela 5, existem unidades absolutas que caracterizam 
por não ter influência de outros fatores para sua unidade de medida, portanto, o valor 
será sempre o mesmo independentemente do tamanho da tela ou outras influências. Já 
nas unidades relativas terão relação com outros fatores, pois são utilizadas como um 
escalar em relação as dimensões de outros elementos. Diante dos mais diversos dis-
positivos utilizados atualmente, com os mais variados tamanhos de telas, as unidades 
relativas são os mais utilizados pelo designer responsivo, onde o design web oferecido 
para apresentar o conteúdo da página se adapta para diversos tamanhos de dispositi-
vos, janelas e telas.
Para o desenvolvedor web obter produtividade no seu dia a dia, essa formatação da 
página web pode ser facilitada por meio do uso de alguns frameworks para desenvolvi-
mento de aplicações web como o Bootstrap.
SAIBA MAIS
O site oficial do framework Bootstrap é https://getbootstrap.com/ (acesso em: 25 abr. 2023) a 
qual está possível para conferir a documentação e outros tutoriais a disposição.
No caso do Bootstrap basta visitar o site oficial e os passos do tópico “Getting Started”. 
Para esse exemplo utilizaremos o CDN (Content Delivery Network) para utilizar essa 
ferramenta, conforme mostra o Código 8 na Figura 13.
https://getbootstrap.com/
25
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
SAIBA MAIS
CDN é uma rede de entrega de conteúdo, ou seja, são servidores geograficamente distribuídos 
para disponibilizar um conteúdo, assim, acaba proporcionando uma entrega mais rápida para o 
usuário e hospedagem segura sem custo. Portanto, basta o desenvolvedor inserir o link do CDN 
para usufruir do conteúdo sem se preocupar com correções de bug e outros inconvenientes.
Figura 13. Código 8: Arquivo HTML utilizando o framework Bootstrap
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 Codigo 8
 
 
 
 
 
 PROGRAMAÇÃO PARA WEB
 
 
 HTML
 
 
 CSS
 
 
 JavaScript
 
 
 PHP
 
 
 Django
 
 
 
 
 
 
 
 HTML
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 
 
 CSS
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 
 
26
1
Introdução as Aplicações Web com HTML e CSS
48
49
50
51
52
53
54
55
56
57
5859
60
61
62
63
64
65
66
67
68
69
70
71
 JavaScript
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 
 
 PHP
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 
 
 Django
 Lorem ipsumLorem ipsum
 Lorem ipsumLorem ipsum
 
 
 
 
 
Fonte: elaborado pelo autor.
No Código 8, nas linhas 4 e 7 foi adicionado o link para o arquivo CSS do bootstrap na versão 
5.3.0 e o arquivo JavaScript também necessário para que o framework funcione adequada-
mente, ambos os links do CDN foram inseridos conforme a documentação da ferramenta.
Na linha 10 foi inserida uma divisão de navegação identificada como menu e aplicado 
as classes navbar e bg-primary-subtle do bootstrap para que a formatação aplicada 
seja de uma barra de navegação com cor de fundo azul. Na sequência, as linhas 11 e 
12 possuem uma âncora que possui uma formatação de classe nav-brand e text-pri-
mary-emphasis, que realiza a formatação do tópico da página “PROGRAMAÇÃO PARA 
WEB” e aplica uma cor de texto azul.
Adiante, na linha é criada uma lista não ordenada com as classes nav e nav-pills que 
configuram a posição e formatação dos elementos do menu. Na sequência há cinco 
itens na lista que possuem a classe nav-item e cada item possui uma âncora com a 
classe nav-link e uma referência para o identificador do tópico.
Na parte do conteúdo, que é iniciada na linha 31 com o elemento main que contém a 
classe container para realizar formatações de espaçamento, margem e texto. Na linha 
seguinte, há uma divisão com identificador dados que possui os atributos data-bs-spy 
e data-bs-target para que a ocorra a rolagem do conteúdo de acordo com as seleções 
dos itens do menu.
Dentro da divisão dados possui cinco divisões de seção, cada um com seu identificador 
(assunto abordado) e a classe card aplicando a formatação que faz uma borda cinza entre 
o texto, dentro da seção há um artigo que aplicasse a classe card-body para realizar um 
espaçamento entre o texto e a borda, por fim, dentro do artigo há um título h2 que possui 
a classe text-primary para deixar a cor do texto azul e os parágrafos com exemplificando 
um texto. O resultado obtido do Código 8 no navegador é apresentado na Figura 14.
27
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
Fonte: elaborado pelo autor.
Figura 14. Resultado apresentado pelo navegador do Código 8
Observe que todas as classes utilizadas foram obtidas pelo framework bootstrap. Essa 
ferramenta oferece diversas formatações e para conhecer quais estão disponíveis e o 
que ela representa é necessário consultar a documentação na versão desejada, pois a 
cada versionamento essa nomenclatura pode sofrer modificação. De uma forma geral, 
esse tipo de ferramenta acelera a produtividade do desenvolvedor, pois permite eco-
nomizar tempo que poderia ter sido gasto produzindo códigos de formatação CSS já 
criados para partes comuns de aplicações web.
SAIBA MAIS
Existem vários outros frameworks em CSS similares que podem ser utilizados para o desen-
volvedor fron-end como:
 ` Foundation (disponível em https://get.foundation/): é uma classe de estruturas de front-end 
não apenas para sites, mas também para aplicativos e e-mails.
 ` Semantic UI (disponível em https://semantic-ui.com/): é uma estrutura CSS com o objetivo 
de criar interfaces de usuário intuitivas. Essa estrutura usa nomes de classe que são ób-
vios para ajudar a facilitar o processo de aprendizado.
 ` Pure CSS (disponível em https://purecss.io/): é um conjunto de pequenos módulos CSS res-
ponsivos que você pode usar em todos os projetos da web.
CONCLUSÃO
Apesar do HTML e CSS serem somente o fundamento da programação para web, es-
ses formatos já permitem mostrar o conteúdo da página web de forma amigável. O bom 
desenvolvedor não precisa conhecer todos elementos, atributos, seletores, proprieda-
des e valores do HTML e CSS, mas os principais apresentados aqui neste documento e 
principalmente o utilizar ferramentas que intensifiquem a produtividade do desenvolve-
dor, reduzindo o tempo de criação e aumentando a qualidade do produto final.
https://get.foundation/
https://semantic-ui.com/
https://purecss.io/
28
1
Introdução as Aplicações Web com HTML e CSS
REFERÊNCIAS BIBLIOGRÁFICAS
ASSOCIAÇÃO BRASILEIRA DE INTERNET DAS COISAS (ABINC). IoT: até 2025, mais de 27 bilhões de dis-
positivos estarão conectados. ABINC, 2022. Disponível em: https://abinc.org.br/iot-ate-2025-mais-de-27-bi-
lhoes-de-dispositivos-estarao-conectados/. Acesso em 20 fev. 2023.
ALVES, W. P. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021.
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II: introdução ao desenvolvimento 
web com HTML, CSS, javascript e PHP (Tekne). Porto Alegre: Bookman, 2014.
29
1
U
ni
ve
rs
id
ad
e 
S
ão
 F
ra
nc
is
co
Programação para Web
	Introdução as Aplicações Web com HTML e CSS
	1. Introdução as aplicações Web
	2. HTML
	3. CSS