INE5646 - Programação para Web

Aula 2 - Introdução ao Desenvolvimento Web + HTML

Professor: Eduardo Camilo Inacio

[Link]@[Link]
Departamento de Informática e Estatística (INE)

10 de Março de 2026
 Introdução

Desenvolvimento web

Desenvolver para a Web significa programar aplicações que executam em sistemas

Web
O que é um sistema Web?
WebSite
web (rede)
Site (sítio, lugar)
Conjunto de páginas web armazenadas em um servidor
Caráter informativo
Sistema Web
Softwares hospedados em servidores
Interação
Múltiplas funções
Solução tecnológica

Prof. Camilo · INE 5646 · 10 de Março de 2026 2 / 42

 Introdução

Perfis Web
Web designer
Tendencias de design para web

Conceitos de identidade visual

Entendimento de padrões de cores

Usabilidade e ferramentas de edição visual

Edição de vídeos

Criação de animações

Web developer
Contexto desta disciplina!

Prof. Camilo · INE 5646 · 10 de Março de 2026 3 / 42

 Introdução

Modelo cliente-servidor
Sistemas Web seguem uma arquitetura conhecida como cliente-servidor

Desenvolvimento web geralmente é focado

Lado cliente: desenvolvedor front-end
Lado servidor: desenvolvedor back-end

Vamos iniciar pelo front-end!

Prof. Camilo · INE 5646 · 10 de Março de 2026 4 / 42

 Introdução

Material extra

“Roteiros”
Carreiras de programação web
E além...
[Link]

Prof. Camilo · INE 5646 · 10 de Março de 2026 5 / 42

 Como construímos um site?

As três camadas do front-end

HTML Camada estrutural

CSS Camada de apresentação

JavaScript Camada comportamental

Prof. Camilo · INE 5646 · 10 de Março de 2026 6 / 42

 Como construímos um site?

Estrutura+Apresentação+Comportamento

Um website é composto de elementos de visualização:

Páginas HTML

Arquivos CSS

Arquivos de mídia (imagens)

Para definir comportamento dinâmico, usamos linguagens como JavaScript

Prof. Camilo · INE 5646 · 10 de Março de 2026 7 / 42

 Como construímos um site?

Criando o visual da página

A parte visual de uma aplicação web é de extrema importância para a experiência

do usuário

A definição da parte visual é um trabalho em conjunto de clientes, web designers e

desenvolvedores front-end

A tarefa do desenvolvedor front-end é traduzir os modelos definidos pelos

clientes/designers em HTML/CSS+JS

Prof. Camilo · INE 5646 · 10 de Março de 2026 8 / 42

 O Navegador

Aplicações “tradicionais” vs. Aplicações web

Aplicações “tradicionais”:
Usam interfaces gráficas de usuário
GUI: graphical user interface
Desde 1970 softwares acessam os framebuffers para a renderização das GUIs
GUI baseada em pixels (elementos de imagem) RGB
Programas usam ferramentas que facilitam a criação das GUIs:
Botões, tabelas, campos de texto, etc.

Prof. Camilo · INE 5646 · 10 de Março de 2026 9 / 42

 O Navegador

Aplicações “tradicionais” vs. Aplicações web

Aplicações “tradicionais”:
Usam interfaces gráficas de usuário
GUI: graphical user interface
Desde 1970 softwares acessam os framebuffers para a renderização das GUIs
GUI baseada em pixels (elementos de imagem) RGB
Programas usam ferramentas que facilitam a criação das GUIs:
Botões, tabelas, campos de texto, etc.

Aplicações web são diferentes!

Até HTML5 não era possível escrever pixels
Canvas
Aplicações são criadas a partir de documentos
Inicialmente múltiplos documentos (páginas) e formulários
Atualmente, em geral, usa-se JavaScript para gerar e atualizar documentos
dinamicamente!
Prof. Camilo · INE 5646 · 10 de Março de 2026 9 / 42
 O Navegador

O papel do navegador

Não, não é negociar especiarias ou descobrir novos continentes...

Estamos falando de outro tipo de navegador, o browser

Prof. Camilo · INE 5646 · 10 de Março de 2026 10 / 42

 O Navegador

O papel do navegador

Não, não é negociar especiarias ou descobrir novos continentes...

Estamos falando de outro tipo de navegador, o browser

Esse personagem é o Bowser....

Prof. Camilo · INE 5646 · 10 de Março de 2026 10 / 42

 O Navegador

O papel do navegador

Não, não é negociar especiarias ou descobrir novos continentes...

Estamos falando de outro tipo de navegador, o browser

Prof. Camilo · INE 5646 · 10 de Março de 2026 10 / 42

 O Navegador

O papel do navegador

É um software (aplicação) para acessar páginas web

Locais ou remotas (WWW)

Responsável por obter conteúdo (fetch) e apresentá-lo ao usuário (renderizar)

As páginas web são escritas em HTML (veremos mais sobre HTML na aula de hoje!)
Os arquivos HTML podem apontar outros recursos, como imagens, vídeos, JavaScript e
CSS

Os navegadores lêem e interpretam o HTML, renderizando a página de acordo com o

que é descrito no HTML...
O navegador precisa também saber interpretar os demais recursos apontados pelo
HTML

Prof. Camilo · INE 5646 · 10 de Março de 2026 11 / 42

 O Navegador

O acesso às páginas web

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

1. Você digita a URL no navegador

(endereço que você quer acessar)

[Link]

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

[Link]

GET html

2. O navegador pede ao servidor que

contém o site para que envie o documento

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

[Link]

HTML

3. O servidor responde ao

navegador com o HTML

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

[Link]

GET ...

4. O navegador lê o HTML e pede

ao servidor os demais recursos

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

5. O servidor responde as

requisições do navegador

[Link]

...

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 O Navegador

O acesso às páginas web

6. Ao obter os recursos, o na-

vegador renderiza a página web

[Link]

Prof. Camilo · INE 5646 · 10 de Março de 2026 12 / 42

 HMTL

As três camadas do front-end

HTML Camada estrutural

CSS Camada de apresentação

JavaScript Camada comportamental

Prof. Camilo · INE 5646 · 10 de Março de 2026 13 / 42

 HMTL

As três camadas do front-end

HTML Camada estrutural

CSS Camada de apresentação

JavaScript Camada comportamental

Prof. Camilo · INE 5646 · 10 de Março de 2026 13 / 42

 HMTL

HTML

Hypertext Markup Language, criada por Tim

Berners-Lee
Primeira versão em 1995 (W3C) – HTML 2.0
W3C?
World Wide Web Consortium (W3C)
É uma comunidade internacional que
desenvolve padrões abertos para garantir o
crescimento da Web à longo prazo
Versão atual é a HTML5, cuja primeira versão Tim Berners-Lee
oficial é de 2014

Prof. Camilo · INE 5646 · 10 de Março de 2026 14 / 42

 HMTL

O que é o HTML?

HTML é processado pelos navegadores para gerar a visualização da página

Logo, o HTML define como cada elemento da página deve ser visualizado

HTML é uma linguagem de marcação

É uma linguagem declarativa

Não é linguagem de programação!

Prof. Camilo · INE 5646 · 10 de Março de 2026 15 / 42

 HMTL

Outro exemplo de linguagem de marcação

Outras linguagens de marcação?

Markup language (ML em HTML)

Exemplo: Markdown

Muito usado para fazer o README em repositórios

[Link]

Prof. Camilo · INE 5646 · 10 de Março de 2026 16 / 42

 HMTL

Exemplo Markdown

# LEIA-ME
Este é um exemplo de arquivo markdown.
> **Destaque**: Podemos dar destaque usando
,→ marcações...

# Títulos
## Há vários níveis
### Assim como no HTML
#### Não é mesmo?

Também podemos escrever e formatar, com

,→ **negrito**, *itálico*, ou ***ambos***.

Podemos ter listas ordenadas:

1. Primeiro
1. Segundo
1. Terceiro

Ou não ordenadas:

- Um item qualquer

Prof. Camilo · INE 5646 · 10 de Março de 2026 17 / 42

 HMTL

Como é um arquivo HTML?

Um documento escrito em HTML normalmente é salvo em um arquivo com extensão

.html
Ex: [Link]

É um arquivo de texto que contém:

As informações que se deseja mostrar ao usuário

As marcações, i.e., as chamadas tags HTML.

Prof. Camilo · INE 5646 · 10 de Março de 2026 18 / 42

 HMTL

Quais as marcações do HTML?

Marcações: tags HTML

Tags devem ser cercadas por < e >:

A maioria das tags devem ser fechadas quando o seu conteúdo termina:
<title> Esse é o título </title>

Comentários são iniciados com !-- e temina com --:

<!-- isso é um comentário! -->

Prof. Camilo · INE 5646 · 10 de Março de 2026 19 / 42

 HMTL

Elementos HTML

A página HTML é construída pelos chamados “elementos”

Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final
Logo, o conteúdo de um elemento HTML é a informação localizada entre a tag inicial e
a tag final

tag de abertura tag de fechamento

<p>Um texto qualquer</p>
conteúdo
elemento

Prof. Camilo · INE 5646 · 10 de Março de 2026 20 / 42

 HMTL

Atributos

Elementos podem ter atributos

Um atributo sempre deve ter:
Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já
tiver um).
O nome do atributo, seguido por um sinal de igual.
Aspas de abertura e fechamento, envolvendo todo o valor do atributo.

Atributo
<p class="classeParagrafo"> Um texto qualquer </p>

Prof. Camilo · INE 5646 · 10 de Março de 2026 21 / 42

 HMTL

Aninhamento

Código HTML:
<p>Um texto <strong>em negrito</strong> nesta página.</p>

Resultado:

Prof. Camilo · INE 5646 · 10 de Março de 2026 22 / 42

 HMTL

Apenas tags?

HTML é apenas um conjunto de tags colocadas junto ao texto?

Não apenas, mas também... As tags fazem a marcação

Mas também temos a parte do hipertexto!

Imagem

Vídeo

Links

Prof. Camilo · INE 5646 · 10 de Março de 2026 23 / 42

 HMTL

HTML – Boilerplate

<!DOCTYPE html> HTML boilerplate

<html>
<head> Uma página HTML vazia...
<title></title>
</head>
<body>
Mas com os elementos básicos
</body>
</html> Geralmente os editores já criam
automáticamente

Prof. Camilo · INE 5646 · 10 de Março de 2026 24 / 42

 HMTL

DOCTYPE

Instrução DOCTYPE
O DOCTYPE não é uma tag HTML, mas uma
<!DOCTYPE html>
<html> instrução especial
<head>
<title></title> Responsável por indicar ao navegador qual
</head>
<body> versão do HTML deve ser utilizada para
</body>
</html> renderizar a página
Indica ao navegador a versão HTML5

Prof. Camilo · INE 5646 · 10 de Março de 2026 25 / 42

 HMTL

Tag <html>

Um documento HTML deve ser aberto com a tag

<html> e fechado com a tag </html>
<!DOCTYPE html>
<html>
Sua composição mínima inclui um elemento
<head>
<title></title>
head seguido por um elemento body
</head>
<body> Este elemento deve ser aberto logo após a
</body>
</html> instrução DOCTYPE
Todos os demais elementos devem ser inseridos
dentro da TAG <html>

Prof. Camilo · INE 5646 · 10 de Março de 2026 26 / 42

 HMTL

Idioma do documento

Tag <html> com atributo lang

O atributo lang presente na tag html indica o
<!DOCTYPE html> idioma do documento
<html lang="pt-br">
<head> Essa informação é importante?
<title></title>
</head> Ajuda os buscadores a encontrarem resultados
<body>
</body>
em idiomas específicos
</html> Pode ser usado por leitores de tela para que
troquem o perfil de idioma e possam utilizar a
pronúncia correta

Prof. Camilo · INE 5646 · 10 de Março de 2026 27 / 42

 HMTL

Tag <head>

<!DOCTYPE html>
Representa o cabeçalho do documento, ou seja,
<html lang="pt-br">
<head>
tudo que vem antes do texto
<title></title>
</head> Contém informações sobre o documento
<body>
</body> (metainformações) que são de interesse
</html>
somente do navegador

Prof. Camilo · INE 5646 · 10 de Março de 2026 28 / 42

 HMTL

Tag <title>

<!DOCTYPE html>
<html lang="pt-br">
Permite especificar o título do documento,
<head>
<title></title>
sendo definida dentro do <head>
</head>
<body> Normalmente será exibido na barra de título do
</body>
</html> navegador ou na aba do documento

Prof. Camilo · INE 5646 · 10 de Março de 2026 29 / 42

 HMTL

Tag <body>

<!DOCTYPE html>
Essa tag contém o corpo do documento
<html lang="pt-br">
<head> Tudo que é exibido pelo navegador deve estar
<title></title>
</head> dentro da tag <body>
<body>
</body> Ex: Parágrafos, títulos, listas, tabelas, imagens,
</html>
etc..

Prof. Camilo · INE 5646 · 10 de Março de 2026 30 / 42

 HMTL

HTML – Boilerplate 2

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>

</body>
</html>

<meta charset="utf-8">

Define a codificação do conjunto de caracteres utilizado no arquivo HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

Serve para garantir que a página seja renderizada na largura do viewport

Prof. Camilo · INE 5646 · 10 de Março de 2026 31 / 42

 HMTL

Títulos: renderizados no viewport

HTML:
<!-- Há até 6 níveis -->
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>
<h3>Título nível 3</h3>
<h4>Título nível 4</h4>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 32 / 42

 HMTL

Parágrafos

HTML:
<p>Isto é um parágrafo...</p>
<p>Aqui inicia outro parágrafo.</p>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 33 / 42

 HMTL

Listas não ordenadas

HTML:
<ul>
<li>Item</li>
<li>Outro</li>
<li>Mais um</li>
</ul>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 34 / 42

 HMTL

Listas ordenadas
HTML:
<ol>
<li>Item</li>
<li>Outro</li>
<li>Mais um</li>
</ol>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 35 / 42

 HMTL

Listas ordenadas: valor inicial

HTML:
<ol start="25">
<li>Item</li>
<li>Outro</li>
<li>Mais um</li>
</ol>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 36 / 42

 HMTL

Listas ordenadas: tipos

HTML:
<ol type="a">
<li>Item</li>
<li>Outro</li>
<li>Mais um</li>
</ol>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 37 / 42

 HMTL

Listas descritivas
HTML:
<dl>
<dt>Tópico</dt>
<dd>Descrição do tópico</dd>
<dt>Mais um tópico</dt>
<dd>Descrição de mais um tópico</dd>
<dd>Descrição alternativa de mais um tópico</dd>
</dl>

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 38 / 42

 HMTL

Imagens

<img src="images/[Link]" alt="Foto de Ismael">

Inclui uma imagem na página na posição onde aparece

A imagem incluída é o arquivo apontado pelo atributo src (source)

O atributo alt (alternativo) é um texto informado como uma alternativa à imagem e

serve para:
Ajudar na acessibilidade (o texto alternativo pode ser lido)
Se houver algum erro na imagem que a impeça de ser exibida, o navegador vai exibir o
texto alternativo em seu lugar

Prof. Camilo · INE 5646 · 10 de Março de 2026 39 / 42

 HMTL

Imagens - Exemplo
HTML:
Aqui temos um exemplo da imagem do Bowser:<br>
<img src="images/[Link]" alt="Imagem do Bowser. Não é um browser...">

Resultado (renderização):

Prof. Camilo · INE 5646 · 10 de Março de 2026 40 / 42

 Créditos

Créditos

Este material foi construído com base em materiais disponibilizados por excelentes
professores!
Materiais prévios de INE5646 disponibilizados pelos professores:
Leandro Komosinski
Mateus Grellert
Ricardo Vilella
Cursos relacionados à programação para Web na Stanford University:
CS193X: Web Programming Fundamentals (Spring 2017)
Victoria Kirst
CS142: Web Applications (Spring 2022)
Mendel Rosenblum

Prof. Camilo · INE 5646 · 10 de Março de 2026 41 / 42

 Créditos

Referências

Logos dos browsers: [Link]

Imagem Bowser: [Link]

Bowser_Stock_Art_2021.png

Imagem barcos:
[Link]

Imagem browser: [Link]

Imagem servidor:
[Link]

Prof. Camilo · INE 5646 · 10 de Março de 2026 42 / 42