PROGRAMADOR WEB
APRESENTAÇÃ
O
UC1: 14/05 - 26/05
UC2: 27/05 - 09/06
UC3: 10/06 - 17/07
(07/07)
FUNDAMENTOS DA WEB
ANTES DE PROGRAMAR DE FATO, É INTERESSANTE ENTENDERMOS UM
POUCO DE COMO FUNCIONA A WEB:
• O que é HTTP/HTTPS;
• O que são front-end e back-end;
• Navegador, servidor e banco de dados.
FUNDAMENTOS DA WEB
COMO FUNCIONA O PROTOCOLO HTTP/HTTPS
O QUE É HTTP / HTTPS Imagine que o navegador faz um pedido
(requisição) e o servidor responde:
• HTTP (HyperText Transfer
Protocol) é o protocolo que Requisição:
permite a comunicação entre o • O navegador envia uma solicitação:
navegador (cliente) e o • → "Quero ver a página inicial do site
servidor na internet.Ele define youtube.com“
como as mensagens são enviadas
e recebidas, especialmente Resposta:
quando você acessa sites. • O servidor envia de volta:
• → "Aqui está o código HTML da página"
• HTTPS (HTTP Secure) é a versão
segura do HTTP.Ele faz a mesma
coisa, mas com um extra muito
importante: a criptografia dos
dados transmitidos.
FUNDAMENTOS DA WEB
O QUE MUDA COM O HTTPS:
Seus dados (como senha, número do cartão, etc.) são
protegidos contra espionagem durante a transmissão.
Ele usa protocolos como SSL/TLS para garantir:
• Confidencialidade (ninguém vê os dados)
• Integridade (dados não são alterados no caminho)
• Autenticidade (você está falando com o site certo)
Atualmente todos os sites sérios e confiáveis utilizam o
protocolo https:
FUNDAMENTOS DA WEB
O QUE É FRONT-END E BACK-END:
FRONT-END: BACK-END
É toda a parte visual com a qual O back-end é a parte invisível da
o usuário interage: botões, aplicação, mas essencial para seu
textos, imagens, formulários, funcionamento.
carrosséis, menus e muito mais. É responsável por toda a lógica
do sistema, onde ficam as regras
de negócio, o acesso ao banco de
dados, os controles de segurança
e outras funcionalidades que
fazem a aplicação funcionar
corretamente por trás das telas.
FUNDAMENTOS DA WEB
NAVEGADOR, SERVIDOR E BANCO DE DADOS:
NAVEGADOR: SERVIDOR BANCO DE DADOS
O navegador é o O servidor é um O banco de dados é
programa que usamos computador (ou onde ficam armazenadas
para acessar sites. sistema) que fornece todas as informações
informações para o de forma organizada.
navegador.
COMO OS TRÊS ESTÃO CONECTADOS
• Navegador envia: "Quero ver os
filmes em destaque“;
• Servidor recebe o pedido;
• O back-end no servidor consulta o
banco de dados;
• O servidor envia os dados ao
navegador;
• O navegador mostra os filmes na
O QUE VAMOS APRENDER
O OBJETIVO PRINCIPAL DO CURSO É:
Capacitar o aluno para atuar no desenvolvimento de aplicações web, tanto no
front-end (parte visual e interativa dos sites) quanto no back-end (lógica
por trás das funcionalidades, banco de dados e segurança).
O FOCO PRINCIPAL É:
• Desenvolver habilidades técnicas em linguagens como HTML, CSS, JavaScript,
e frameworks como React e Node.js.
• Ensinar boas práticas de programação, organização de código e uso de
controle de versões com Git e GitHub.
• Capacitar para o mercado de trabalho, com conhecimento prático para
desenvolver sistemas completos, integrando banco de dados e servidores.
O QUE VAMOS APRENDER
LINGUAGENS QUE SERÃO UTILIZADAS:
HTML CSS JavaScript
O QUE VAMOS APRENDER
O QUE SERÁ UTILIZADO PARA ESCREVERMOS OS CÓDIGOS:
O Visual Studio Code, conhecido como VS Code, é um
editor de código-fonte desenvolvido pela
Microsoft. Ele é amplamente utilizado por
programadores para escrever, editar e organizar
códigos de forma eficiente e intuitiva.
Sua popularidade se deve ao fato de ser uma
ferramenta leve, rápida, gratuita e compatível com
diversos sistemas operacionais (Windows, Linux e
macOS). Além disso, o VS Code permite uma
personalização completa, adaptando-se facilmente
às preferências e necessidades de cada
desenvolvedor.
https://code.visualstudio.com/d
ownload
VSCODE
VSCODE
1. Explorar:
• Função: Navegar pelos arquivos e pastas do seu
projeto.
• Podemos abrir, renomear, criar ou excluir
arquivos/pastas.
2. Pesquisar:
• Procurar palavras, trechos de código ou
expressões dentro de todos os arquivos do seu
projeto.
3. Extensões:
• Função: Instalar e gerenciar extensões para o
VS Code.
• Ex: Python, Prettier, GitLens, Live Server,
etc.
VSCODE
VSCODE
ALGUMAS EXTENSÕES INTERESSANTES PARA
INSTALAR NO VSCODE:
HTML
O QUE É O HTML:
HTML (HyperText Markup Language) é a linguagem de
marcação padrão usada para criar páginas na web. Ele
estrutura o conteúdo, definindo elementos como títulos,
parágrafos, links, imagens, listas, entre outros.
O HTML não é uma linguagem de programação, mas sim uma
linguagem de marcação — ou seja, ele descreve a
estrutura e o significado dos elementos em uma página.
POR QUE O HTML FOI CRIADO:
O HTML foi criado no início da década de 1990 para
resolver a necessidade de compartilhar documentos Tim Berners-
Lee
científicos entre pesquisadores por meio da internet.
Naquela época, a Web ainda não existia como conhecemos
hoje.
HTML
Desde 2014, o HTML passou a ser uma
especificação viva. Isso significa que
ele é continuamente atualizado (sem
versões fixas) pelo WHATWG, refletindo
as necessidades modernas da Web.
HTML
PÁGINA ESTRUTURADA COM HTML E CSS:
HTML
INICIANDO DE FATO COM A LINGUEM HTML:
HTML
INICIANDO DE FATO COM A LINGUEM HTML:
POR QUE USAR O .html:
1. Identificação pelo navegador: Quando você abre um arquivo .html no
navegador, ele entende que deve renderizar o conteúdo como uma página da
web e não como texto simples.
2. Reconhecimento pelo VS Code: O VS Code ativa recursos como destaque de
sintaxe, autocompletar e atalhos quando o arquivo tem a extensão .html.
3. Padrão da Web: É o formato reconhecido por servidores e por outros
desenvolvedores como sendo uma página HTML válida.
HTML
ESTRUTURA BASE DO HTML:
HTML
ESTRUTURA BASE DO HTML:
<!DOCTYPE html>
• Uma instrução especial (chamada doctype) que informa ao navegador que o
documento está usando a versão HTML5.
• Por que é importante? Garante que o navegador interprete o HTML corretamente.
HTML
ESTRUTURA BASE DO HTML:
<html lang=“en">
• O atributo lang="pt-br" indica que o conteúdo
está em português do Brasil, o que ajuda na
acessibilidade e nos buscadores (como o Google).
HTML
ESTRUTURA BASE DO HTML:
<head>...</head>
Contém metadados (informações sobre o documento, não visíveis na página).
Principais elementos dentro do <head>:
• <meta charset="UTF-8">: Permite usar acentos e caracteres especiais.
• <meta name="viewport"...>: Garante que o site funcione bem em
dispositivos móveis (tela responsiva).
• <title>: Define o título da aba do navegador.
HTML
ESTRUTURA BASE DO HTML:
<body>...</body>
• Contém todo o conteúdo visível da página: textos,
imagens, botões, links, vídeos etc.
• Tudo que o usuário vê e interage fica dentro da tag
<body>.
HTML
ELEMENTOS / TAGS:
As tags HTML (ou elementos) são usadas para
marcar e organizar o conteúdo de uma página.
Cada tag tem um propósito específico, como
mostrar um título, um parágrafo, uma imagem, um
link, etc.
ESTRUTURA DE UMA TAG COM CONTEÚDO:
Essas envolvem algum conteúdo visível ou
estrutural.
ESTRUTURA DE TAGS VAZIAS:
Atributos fornecem informações adicionais sobre
a tag.
HTML
ELEMENTOS / TAGS:
CABEÇALHO: OBSERVAÇÃO:
O <h1> representa o título principal da
página. Assim como em um livro você tem
apenas um título principal por capítulo, em
uma página web o <h1> deve indicar o assunto
central.
Leitores de tela usados por pessoas com
deficiência visual se baseiam na hierarquia
dos títulos (como <h1>, <h2>, etc.) para
Os elementos de cabeçalhos navegar rapidamente pelo conteúdo. Ter
vários <h1> pode confundir o leitor de tela.
permitem especificar que certas
partes do seu conteúdo são títulos
ou subtítulos.
HTML contém 6 níveis de título,
<h1> - <h6>, embora você
normalmente só use de 3 a 4:
HTML
ELEMENTOS / TAGS:
PARÁGRAFO
(<p></p>)
Define um paragrafo de texto
LINK
(<a></a>)
Cria um link para outra página ou site.
HTML
ELEMENTOS / TAGS:
IMAGEM
(<img>)
Exibe uma imagem.
PULAR LINHA
(<br>)
Quebra de linha. Não tem tag de fechamento.
HTML
EXEMPLO PRÁTICO:
HTML
EXEMPLO PRÁTICO:
HTML
ATRIBUTOS
Atributos são informações extras que você adiciona às
tags HTML para controlar o comportamento, a aparência ou
a identificação dos elementos.
Eles sempre vão dentro da tag de abertura e tem a
seguinte estrutura:
HTML
ELEMENTOS / TAGS:
LISTAS:
<ol> e <ul> = Listas
<ol> = Ordered List = lista numerada
<ul> = Unordered List = lista com
marcadores (bolinhas)
Ambas usam <li> para os itens da
lista.
Estrutura de listas ordenadas e não
ordenadas:
HTML
ELEMENTOS / TAGS:
FORMULÁRIO:
<form> = Formulário
Define a área onde o usuário
insere e envia dados.
<label> = Rótulo
É o nome descritivo de um campo.
Quando usamos for, ele se
conecta ao id do <input>
correspondente.
<input> = Campo de entrada
Permite que o usuário digite ou
selecione algo.
Estrutura de um formulário:
HTML
ELEMENTOS / TAGS:
FORMULÁRIO:
<form> = Formulário
Define a área onde o usuário insere
e envia dados.
<label> = Rótulo
É o nome descritivo de um campo.
Quando usamos for, ele se conecta
ao id do <input> correspondente.
<input> = Campo de entrada
Permite que o usuário digite ou
selecione algo.
Estrutura de um formulário:
HTML
ELEMENTOS / TAGS:
FORMULÁRIO:
<input> = Campo de entrada
Permite que o usuário digite ou selecione algo.
A tag input por padrão vem com alguns atributos, e o principal deles é o
type, que irá definir qual o tipo do campo de entrada (se será uma senha,
e-mail, datas, números...)
HTML
FORMULÁRIO:
<input> = Campo de entrada
Permite que o usuário digite ou selecione algo.
Podemos utilizar alguns atributos junto com a tag input para mudar o comportamento do campo
de entrada.
Por padrão a tag input vem com três atributos:
• type=“” – Define o tipo de entrada (texto, número, e-mail, senha...)
• name=“” – Nome do campo
• id=“” – Identificador único de cada elemento (não pode ter mais de um id com o mesmo
nome). Permite ser associado aos labels.
Existem também alguns atributos de validação:
required - Torna o campo obrigatório
maxlength=“10” - Limita o numero máximo de caracteres de um input
HTML
FORMULÁRIO:
<input> = Campo de entrada
Permite que o usuário digite ou selecione algo.
Podemos utilizar alguns atributos junto com a tag input para mudar o comportamento
do campo de entrada.
Atributos de usabilidade:
placeholder=“” - Mostra um texto de exemplo dentro do campo.
disabled – Desativa o campo
readonly – Permite que o usuário apenas leia aquele campo
HTML
SELEÇÃO DE OPÇÕES:
<select> e <option> = Usado para
criar menus suspensos.
<select> - Cria o menu
<option> - Define cada item
value=“” - é o atributo que será
enviado no formulário (utilizaremos
muito quando estivermos usando JS).
Fica na tag de abertura option
HTML
TABELAS
<table> = Cria uma tabela
<thead> - Parte superior da tabela
(geralmente os títulos das colunas)
<tbody> - Onde ficam os dados da
tabela / corpo da tabela
<tr> (table row) - Uma linha
<th> (table header) - Célula de
cabeçalho
<td> (table data) - Célula de dados
border=“1” – É um atributo antigo que
adiciona bordas visíveis a uma tabela
HTML.
HTML
ESTILIZAÇÃO DE TEXTO:
<strong> — Negrito semântico
Deixa o texto em negrito com ênfase de importância.
<em> — Itálico semântico
Coloca o texto em itálico, indicando ênfase sutil.
HTML
HTML SEMÂNTICO:
HTML Semântico consiste em utilizar
tags que têm um significado próprio e
descrevem a função do conteúdo que
envolvem. Diferente de tags genéricas
como <div> e <span>, que apenas
organizam visualmente a página, as
tags semânticas informam ao navegador
e aos desenvolvedores o propósito
daquele trecho. Por exemplo, <header>
identifica o cabeçalho da página,
<footer> representa o rodapé e
<article> é usado para um conteúdo
independente, como uma notícia ou post
de blog.
HTML
POR QUE UTILIZAR AS TAGS SEMÂNTICAS?
1 - Acessibilidade:
• Melhora a leitura por leitores de tela.
• Facilita a navegação para pessoas com deficiência.
2 - SEO (Otimização para buscadores):
• Ajuda motores de busca a entenderem melhor o conteúdo.
• Pode melhorar o posicionamento nos resultados de pesquisa.
3 - Manutenção do Código:
• Código mais organizado e legível.
• Facilita atualizações e colaboração entre desenvolvedores.
4 - Consistência e Padrões:
• Segue boas práticas de desenvolvimento.
• Garante uma estrutura mais coerente e padronizada no site.
HTML
TAGS SEMÂNTICAS:
<header></header>:
Define o cabeçalho de uma página ou de uma seção específica.
Geralmente, contém o logo, o título e o menu de navegação.
HTML
<footer></footer>:
Usada para o rodapé da página ou de uma seção. Geralmente, contém
informações de copyright, links de redes sociais e informações de
contato.
HTML
<article></article>:
Representa um conteúdo independente e isolado, como uma postagem de blog,
uma notícia ou uma publicação.
HTML
<section></section>:
Define uma seção de conteúdo relacionada. É usada para agrupar conteúdo
que tem um tema em comum dentro da página.
HTML
<nav></nav>:
Indica uma área de navegação na página, geralmente contendo links para
outras seções ou páginas.
HTML
<aside></aside>:
Utilizado para conteúdo relacionado, mas não essencial, ao conteúdo
principal, como uma barra lateral com links ou anúncios.
HTML
<figure></figure>:
A <figure> é usada para agrupar conteúdo de mídia (imagem, gráfico,
vídeo, etc.) com uma legenda opcional (<figcaption>), onde essa mídia é
relacionada ao conteúdo, mas independente dele.
HTML
<main></main>:
Representa o conteúdo principal da página. Ele deve ser único e conter a
informação central da página.
HTML
MESMO COM O HTML SEMANTICO, A DIV É
USADA?
Sim, mesmo com HTML semântico, a
<div> continua sendo útil quando:
• Não existe uma tag semântica
apropriada.
• É preciso aplicar estilos ou
scripts em blocos genéricos.
HTML
ATIVIDADE:
Você foi contratado(a) para desenvolver a página inicial de um blog
fictício chamado "Meu Diário de Viagens". O objetivo do site é
compartilhar experiências de viagens, com relatos, dicas, roteiros
e curiosidades de diferentes lugares do mundo.
O objetivo da atividade é criar uma página aplicando todos os elementos
(tags) que foram apresentadas até o momento junto com as tags semânticas.
