Como funciona

a Web
 O que vamos ver hoje

● Criação de repositório github

● Início do projeto Express
● Trabalhando com métodos HTTP
● Testes com Insomnia/Postman

Full Stack Node.js - Como funciona a Web

 COMO PODEMOS INICIAR UM
PROJETO COM GIT?

Full Stack Node.js - Como funciona a Web

 Lembram disso?

INDIVIDUAL
● Crie um repositório no Github
● Conecte ao repositório local:

git init
git remote add origin <url_repo>

Full Stack Node.js - Como funciona a Web

Agora vamos botar a mão na massa!
 Inicializando projeto Express

Inicializar projeto
npm init -y
Instalar Express
npm install express
Instalar nodemon
npm install nodemon

Full Stack Node.js - Como funciona a Web

 VOCÊ SABE O QUE É CRUD?

Full Stack Node.js - Como funciona a Web

CRUD

Funcionalidades Métodos HTTP

CREATE POST
READ GET
UPDATE PUT
DELETE DELETE

Full Stack Node.js - Como funciona a Web

 Atividade

● Inicialize o servidor Express

● Crie uma rota GET para /usuario
● Crie uma rota POST para /usuario que adiciona um novo usuário na
lista
● Crie uma rota PUT para /usuario/:id que edita um usuário da lista
● Crie uma rota DELETE para /usuario/:id que exclua um usuário da
lista

Full Stack Node.js - Como funciona a Web

 Para ir além

➔ Documentação: Express - Roteamento

https://expressjs.com/pt-br/guide/routing.html

Full Stack Node.js - Como funciona a Web

Arquitetura
cliente-servidor
 Dentro do contexto do
desenvolvimento web, esta
arquitetura se refere a um
modelo de comunicação que
liga vários dispositivos a um
servidor através da Internet.

Arquitetura cliente-servidor
 O que chamamos de cliente?
São os dispositivos que fazem solicitações de
serviços ou recursos a um servidor.

Podem ser: um computador, um telefone

celular, um tablet, um console de videogame,
ou qualquer outro dispositivo que possa se
conectar a uma rede.

Dentro da Internet, o cliente costuma acessar

estes serviços e recursos através de um Dispositivos
navegador web.

Arquitetura cliente-servidor 13
 O que chamamos de servidor?
É o que fornece os serviços e recursos que os
clientes acessam. Em outras palavras, é aquele
que responde aos pedidos dos clientes.

É importante notar que o mesmo computador

pode ser cliente e servidor simultaneamente.

Na verdade, é a coisa mais comum no ambiente

de desenvolvimento de um website ou
aplicação web.

Arquitetura cliente-servidor 14
 Os pedidos (requests)
São as solicitações que fazemos através do navegador (o cliente) para um
servidor. Por exemplo, a página do Facebook é armazenada em seus servidores.

PEDIDO /
REQUEST

SERVIDOR
CLIENTE

INTERNET

www.facebook.com
www.facebook.com

Arquitetura cliente-servidor 15
 O que vai dentro do request?
São muitas informações, mas vamos listar algumas que são importantes:

● URL: Essa provavelmente você conhece, os famosos endereços do site.

Dessa forma que iremos dizer quem é o destinatário (Servidor) da nossa
requisição.
● Data
● Navegador que está fazendo a requisição
● Seu IP: Uma identificação do seu computador na internet.

Arquitetura cliente-servidor 16
 As respostas (responses)
O servidor recebe nosso pedido, processa-o e envia como resultado uma
resposta ao cliente (navegador). Neste exemplo, ele devolverá a página inicial
do site.

CLIENTE SERVIDOR

INTERNET

www.facebook.com
www.facebook.com

RESPOSTA /
RESPONSE

Arquitetura cliente-servidor 17
 O que vai dentro do response?
Aqui as informações são parecidas com a da request. Então também teremos
URL, Data e afins. Porém com uma exceção:

● Body (Conteúdo): Aqui vai o conteúdo da página que o cliente havia

solicitado. É aqui que tem o vídeo, as imagens e textos que aparece
nos sites.

Arquitetura cliente-servidor 18
 Por que é importante saber este
fluxo de Request-Response? Porque
no mundo do desenvolvimento
web, a maioria das aplicações tem
duas pontas: o front-end e o
back-end.

Arquitetura cliente-servidor
 O front-end
É tudo o que acontece no lado do cliente (no navegador).
Isso inclui todos os elementos gráficos que compõem a interface do site e
também parte de sua funcionalidade.
As linguagens utilizadas são: HTML para a estrutura, CSS para os estilos visuais
e JavaScript para a interação dentro do site.

CLIENTE
FRONT-END

Arquitetura cliente-servidor 20
 O back-end
É tudo o que acontece no lado do servidor.
Isso inclui todo o funcionamento interno e a lógica do site. É o que permite que
todas as solicitações requisitadas pelo cliente sejam carregadas.
Podemos encontrar: bancos de dados como MySQL e MongoDB, linguagens
como PHP e JavaScript para sites dinâmicos, frameworks (estruturas de
trabalho) como Express e Laravel.

SERVIDOR
BACKEND

Arquitetura cliente-servidor 21
 Hoje existe a possibilidade de executar
o JavaScript no lado do servidor,
permitindo programar na mesma
linguagem tanto no front-end como no
back-end, tornando o processo de
desenvolvimento mais fluido.

Arquitetura cliente-servidor
Introdução
a HTTP
 HTTP (Hyper Text Transfer
Protocol)
é o protocolo que gerencia as
transações web entre clientes
e servidores.

Introdução a HTTP
 O que é uma URI?
O protocolo HTTP permite a transferência de informação na web através dos
endereços web, tecnicamente chamadas URI.

Uma URI (identificador de recursos uniformes) é um bloco de texto que

se escreve na barra de endereços de um navegador web e é composto por
duas partes: a URL e a URN.

URI

URL URN

Arquiteturaacliente-servidor
Introdução HTTP 25
 Componentes de uma URI
URL
Indica onde se encontra o recurso que
desejamos obter e sempre começa com um
protocolo. Neste caso, HTTP.

http://www.digitalhouse.com/br/perguntas-frequentes
URN
É o nome exato do recurso uniforme.
O nome do domínio e, algumas vezes, o
nome do recurso.

Arquiteturaacliente-servidor
Introdução HTTP 26
 Dentro dessa estrutura de
comunicação, falamos de request a
cada vez que o cliente solicita um
recurso ao servidor, e de response a
cada vez que o servidor devolve
uma resposta para o cliente.

Introdução a HTTP
 Como viaja a informação
Cada vez que fazemos um pedido ou recebemos uma resposta utilizando o
protocolo HTTP, são enviadas informações importantes sobre eles.
A informação viaja através dos headers ou cabeçalhos, que são partes de
texto, contendo a informação requerida pelo cliente ou pelo servidor.

PEDIDO / REQUEST RESPOSTA / RESPONSE

Arquiteturaacliente-servidor
Introdução HTTP 28
 Como viaja a informação
Além dos cabeçalhos, temos o body ou corpo da mensagem, que é onde estará
a informação em si do pedido ou sua resposta.

No caso do pedido, pode ser o conteúdo de um formulário. No caso

de uma resposta, pode ser o código da página que solicitamos.

REQUEST SERVIDOR
CLIENTE HEADER

BODY

RESPONSE
HEADER

BODY

Arquiteturaacliente-servidor
Introdução HTTP 29
 Métodos de request
O protocolo HTTP define métodos de pedido. Cada método representa
uma ação e, embora compartilhem algumas características, implementam
funcionalidades diferentes entre si. Os métodos mais utilizados por este
protocolo são:

GET
É usado para pedir informações ao servidor de um recurso específico. Cada vez
que escrevemos um endereço no navegador ou clicamos em um link, estamos
utilizando o método GET. No caso de querer enviar informação ao servidor
usando este método, ela viajará através da URL.

Arquiteturaacliente-servidor
Introdução HTTP 30
 Métodos de request

POST
Usada para enviar dados para o servidor. Este método é mais seguro que o
GET, já que a informação não viaja através da URL.

DELETE
Apaga um recurso existente no servidor. Quando eliminamos um post no
Facebook, por exemplo, estamos utilizando este método.

Arquiteturaacliente-servidor
Introdução HTTP 31
 Métodos de request

PUT
É muito parecido com o POST. Usado para substituir toda a informação atual
de um recurso existente no servidor.

PATCH
Similar ao PUT. É utilizado para aplicar modificações parciais a um recurso
no servidor.

PUT e PATCH geralmente são o mesmo. Escolher entre um e outro vai

depender do contexto e o que queremos implementar na nossa aplicação.
Ao editar um post ou um perfil, estamos usando um destes dois métodos.

Arquiteturaacliente-servidor
Introdução HTTP 32
 Métodos de request
Resumidamente, temos 5 métodos e cada um deles têm um propósito.

GET Solicitar dados

POST Enviar/criar um dado

HTTP MÉTODOS PUT Substituir um dado

Modificar parcialmente
PATCH
um dado

DELETE Apagar um dado

Introdução a HTTP
 Códigos de estado HTTP
Cada vez que o servidor recebe um pedido ou request, este emite um código
de estado que indica, de forma resumida, o estado da resposta HTTP. O código
tem três dígitos. O primeiro representa um dos 5 tipos de resposta possíveis:

● 1__ Respostas informativas

● 2__ Respostas de sucesso
● 3__ Redirecionamentos
● 4__ Erros do cliente
● 5__ Erros do servidor

Arquiteturaacliente-servidor
Introdução HTTP 34
 Códigos de estado HTTP
Alguns dos códigos mais usados são:

● 200: OK → O pedido foi concluído com êxito.

● 301: Moved Permanently → O recurso foi movido.
● 302: Found → O recurso foi encontrado.
● 304: Not Modified → O recurso não mudou, será carregado do cache.
● 400: Bad Request → O pedido foi mal-feito.
● 401: Unauthorized → Não foi autorizado, seguramente deve se autenticar.
● 403: Forbidden → O pedido foi proibido e não deve ser repetido.
● 404: Not Found → O recurso não foi encontrado.
● 500: Internal Server Error → Houve um erro no servidor.
● 503: Service Unavailable → O serviço solicitado não está disponível.
● 550: Permission denied → Permissão negada.

Arquiteturaacliente-servidor
Introdução HTTP 35
 HTTPS é um protocolo
melhorado do HTTP. Usando
este protocolo, o servidor
codifica a sessão com um
certificado digital.

Introdução a HTTP
Introdução
ao Express
 Express é um framework
que facilita e agiliza o
desenvolvimento de
aplicações web com Node.js.

Arquitetura
Introduçãocliente-servidor
ao Express 38
 O que é um framework?
Um framework é um ambiente de trabalho que traz resolvidas uma série de
tarefas, automatizando assim o desenvolvimento de qualquer aplicação.

O framework do Node.js é usado principalmente pela produtividade que

fornece, assim como por sua escalabilidade e velocidade.

Express é um dos mais populares e estáveis do ambiente Node.js e é muito

utilizado tanto para aplicações web como mobile.

Introdução ao Express 39
 Como usar Express?
O primeiro passo é instalar a biblioteca em um projeto Node.js inicializado. Ou
seja, temos que ter executado previamente npm init e ter criado o arquivo
package.json.
Com o próximo comando, estaremos guardando, na propriedade
dependencies do arquivo package.json, uma referência à biblioteca que
estamos instalando.

_> npm install express

Depois, quem quiser clonar o projeto, poderá instalar todas as dependências

necessárias para que funcione, com o comando npm install.

Arquitetura
Introduçãocliente-servidor
ao Express 40
 Como usar Express?
Uma vez instalado o Express, temos que importar o módulo no nosso
entry-point, que normalmente é um arquivo chamado: app.js.

{} const express = require('express');

O retorno dessa linha é uma função que encapsula toda a funcionalidade do

Express. Para poder começar a usar, falta executar essa função.
O próximo passo, então, será criar uma variável nova e guardar nela a
execução de express, para ter todos os métodos da biblioteca disponíveis.

{} const app = express();

Arquitetura
Introduçãocliente-servidor
ao Express 41
 Cada vez que tivermos que
trabalhar com Express,
precisamos instalá-lo dentro
do projeto que estamos
desenvolvendo.

Arquitetura
Introduçãocliente-servidor
ao Express 42
Servidor HTTP
no Express
 Uma das tantas funcionalidades que o
Express oferece é a possibilidade de
levantar um servidor web de maneira
muito simples e em poucos passos.

Arquitetura cliente-servidor 44
 {código}
Importamos o módulo do
Express e guardamos a
const express = require('express');
função que nos é retornada
const app = express(); na constante express.

app.get('/', (req, res) => {

res.send('Olá mundo!');
});

app.listen(3000, () =>
console.log('Servidor executando')
);

Arquitetura cliente-servidor 45
 {código}
Executamos a função e
guardamos o objeto que é
const express = require('express'); devolvido na constante app.
const app = express();
Agora, através dela, vamos ter
acesso a todas as
propriedades e métodos que
app.get('/', (req, res) => { têm no Express.
res.send('Olá mundo!');
});

app.listen(3000, () =>
console.log('Servidor executando')
);

Arquitetura cliente-servidor 46
 {código}
const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Olá mundo!');
Para o objeto app, chamamos
}); o método listen, que cuidará
de subir o servidor.

app.listen(3000, () => Recebe dois parâmetros: a

porta e, opcionalmente, um
console.log('Servidor executando') callback, que será executada
se o servidor terminar de
); iniciar.

Arquitetura cliente-servidor 47
 Com o servidor em execução, só nos
falta definir as rotas para começar a
tratar as respostas da nossa
aplicação.

Arquitetura cliente-servidor 48
 {código}
const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Olá mundo!'); Do objeto app, invocamos o
método get.
});

app.listen(3000, () =>
console.log('Servidor executando')
);

Arquitetura cliente-servidor 49
 {código}
O método recebe dois
const express = require('express'); parâmetros:
const app = express(); O primeiro é uma string, que
define a URL da rota.
O segundo é um callback
app.get('/', (req, res) => { com dois parâmetros: request
res.send('Olá mundo!'); (req) e response (res).

}); req conterá todas as

propriedades e métodos do
pedido que chegou.
app.listen(3000, () =>
res conterá todas as
console.log('Servidor corriendo') propriedades e métodos da
resposta que vamos enviar.
);

Arquitetura cliente-servidor 50
 {código}
const express = require('express');
const app = express();

O nome dos parâmetros do

app.get('/', (req, res) => { callback podem ser o que
res.send('Olá mundo!'); quisermos.

}); Costuma-se usar req para

request e res para response.

app.listen(3000, () =>
console.log('Servidor executando')
);

Arquitetura cliente-servidor 51
 {código}
const express = require('express');
const app = express();
Dentro do callback, definimos
a resposta que enviaremos.
app.get('/', (req, res) => { Do objeto res (response),
res.send('Olá mundo!'); invocamos o método send.
Como parâmetro, passamos o
});
que queremos mostrar no
navegador. Neste caso, o
texto: Olá mundo!
app.listen(3000, () =>
console.log('Servidor executando')
);

Arquitetura cliente-servidor 52
Rotas em
Express
 Através do sistema de roteamento
do Express, podemos definir como
a nossa aplicação vai responder
segundo o método HTTP e a rota
que for solicitada ao servidor.

Rotas em Express
 Definindo uma rota
O Express nos traz uma estrutura simples para definir cada uma das rotas que
estaremos atendendo e as respostas que serão enviadas pela nossa aplicação.

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 55
 Definindo uma rota
O primeiro objeto que vemos é o app, este guarda a execução do Express e
contém a maior parte da sua funcionalidade.

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 56
 Definindo uma rota
Em seguida, precisamos colocar o método HTTP que queremos atender. Pode
ser, por exemplo: get, post, put, patch ou delete.

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 57
 Definindo uma rota
Como primeiro parâmetro da função, temos uma string, que representa a rota
para a qual o nosso cliente fez a requisição. Neste caso, se trata da raiz ou
home do sistema.

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 58
 Definindo uma rota
Como segundo parâmetro, temos a callback, que se encarregará de responder
à requisição.
● req → Representa a requisição do cliente.
● res → Representa a resposta do servidor.
Ambos são objetos que o Express nos fornece e conterão toda a informação e
funcionalidade necessária para trabalhar os pedidos e respostas.

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 59
 Definindo uma rota
Finalmente, dentro da callback, definiremos a lógica de manipulação para
responder à requisição do cliente.
Neste caso, utilizamos o método send() do objeto res (response) para enviar
uma resposta de texto ao navegador (cliente).

app.get('/', (req, res) => {

{} res.send('Olá mundo!');
});

Arquitetura cliente-servidor 60
 Definindo uma rota
Não será necessário sempre colocar o conteúdo diretamente dentro do método.
Como todo método, o send() pode receber uma variável como parâmetro.

app.get('/', (req, res) => {

const content = 'Página principal';
{}
res.send(content);
});

Arquitetura cliente-servidor 61
Send File
 O método sendFile() é parte do
objeto de resposta do Express.

Nos permite enviar facilmente

arquivos existentes em nosso
servidor como resposta às
requisições do cliente.

Arquitetura cliente-servidor 63
 Respondendo com um arquivo
Até agora conhecíamos o método send(), que nos permitia enviar texto ou
HTML manualmente.
O problema é que enviar uma página inteira dessa forma é complicado, porque
teríamos que colocar todo o seu código dentro do método.

app.get('/', (req, res) => {

{} res.send('<h1>Olá mundo!</h1>');
});

Estrutura de pastas e Send File 64

 Respondendo com um arquivo
O Express nos fornece outro método, sendFile(), que nos permite enviar um
arquivo existente em nosso servidor.

const path = require('path');

{} app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, '/views/index.html'));
});

Estrutura de pastas e Send File 65

 Respondendo com um arquivo
O sendFile() aceita como parâmetro um caminho absoluto para o arquivo
que vamos enviar.
Para gerar essa rota, a primeira coisa de que precisamos é o módulo de path.
Este é um módulo nativo e portanto não é necessário instalá-lo.

const path = require('path');

{} app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, '/views/index.html'));
});

Estrutura de pastas e Send File 66

 Respondendo com um arquivo
Dentro do método sendFile(), usamos o método join(), que nos fornece o
caminho. Este método cuidará de juntar as peças do nosso percurso, tendo em
conta o sistema operacional em que nos encontramos (Mac, Windows ou Linux).
Dentro do join() colocarmos, separados por vírgulas, os trechos de nossa rota.

const path = require('path');

{} app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, '/views/index.html'));
});

Estrutura de pastas e Send File 67

 Respondendo com um arquivo
__dirname é uma constante Node.js que se refere ao diretório arquivo que está
sendo executado.
/views/index.html é o caminho relativo para o arquivo que queremos enviar.
Neste caso, dentro da pasta de visualizações, o arquivo index.html.

const path = require('path');

{} app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, '/views/index.html'));
});

Estrutura de pastas e Send File 68

Criando a
estrutura de
um site
Tipografia e Google Fonts

● font-family
● font-size
● font-weight
Atividade

● Identificar seções no layout

○ Header
○ Main
○ Footer
Atividade

● Crie a pasta dhnews

● Crie o arquivo index.html
● Faça o HTML e CSS de
acordo com o layout
● Adicione o projeto no github
Para ir além

➔ W3Schools
http://w3schools.com

➔ MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/HTML
Introdução
a HTML
 1. Analisar um website
Índice
2. Fluxo de um website

Introducción a HTML 75
75
Introducción
Arquitetura a HTML
cliente-servidor
 Analisar um
1 website

Introducción a HTML 76
76
Introducción
Arquitetura a HTML
cliente-servidor
 Analisar um website
Antes de começarmos a analisar a linguagem, vamos iniciar com uma análise de
um website.

Introdução acliente-servidor
HTML a HTML 77
77
Introducción
Arquitetura
 Analisar um website
Se imaginássemos e destacássemos as caixas que fazem parte deste site,
veríamos algo assim (3 grandes divisões):

Introdução acliente-servidor
HTML a HTML 78
78
Introducción
Arquitetura
 Analisar um website
Se fizermos o mesmo com as informações dentro dessas 3 grandes caixas,
provavelmente teremos algo parecido com isto:

Introdução acliente-servidor
HTML a HTML 79
79
Introducción
Arquitetura
 Isto nos leva à conclusão de que
cada elemento HTML produz
um componente visual no
navegador.

Arquitetura cliente-servidor 80
 Fluxo de um
2 website

Introducción a HTML 81
81
Introducción
Arquitetura a HTML
cliente-servidor
 Fluxo de um website
Uma das finalidades deste módulo é que possamos entender como os
elementos HTML interagem uns com os outros.
E para fazer isso, precisaremos da ajuda de algumas ferramentas que
aprenderemos logo nas próximas aulas, por enquanto vamos seguir a seguinte
regra:

Se um item ocupar toda a tela (de ponta a ponta), o próximo

item no código cairá para o primeiro lugar disponível.
Precisamos nos atentar a tais dimensões e outras regras de 100%
posicionamento para reproduzirmos exatamente o resultado
esperado no site.

No exemplo ao lado, o bloco verde, por natureza, ocupa 100% da

largura da página, e assim o elemento cinza ao invés de ficar
ao seu lado, “cai” para a linha de baixo.

Introdução acliente-servidor
HTML a HTML 82
82
Introducción
Arquitetura
 Fluxo de um website
Alguns elementos que vamos incorporar em nossos sites já ocupam 100% da
largura de nossa tela, é por isso que veremos que quase todos os elementos
são colocados um abaixo do outro.

100%

conteúdo
Alguns elementos, por padrão, vão ocupar
apenas seu conteúdo (como o elemento
roxo). Entraremos em mais detalhes sobre
100%
eles mais tarde.

100%

Introdução acliente-servidor
HTML a HTML 83
83
Introducción
Arquitetura
 100%

Fluxo de um website
Nos próximos tópicos, fornecemos uma ajuda de
memória para que tenhamos uma referência de
quanto espaço cada elemento ocupa na tela. O
lembrete estará localizado no canto superior
direito, como neste slide.

Introdução acliente-servidor
HTML a HTML 84
84
Introducción
Arquitetura
Tags, atributos e
estrutura básica
 1. Estrutura de uma página
2. Sintaxe Elementar
Índice
3. Estrutura básica de um
documento HTML

Tags, atributos
Arquitetura e estrutura básica
cliente-servidor 86
 Estrutura de uma
1 página web

Tags, atributos
Arquitetura e estrutura básica
cliente-servidor 87
Como é que
normalmente vemos
um website?
Tags, atributos e estrutura básica 88
E o que está por
trás do que vemos
no navegador?
Tags, atributos e estrutura básica 89
 HTML
Hyper Linguagem de marcação de hipertexto.

Text Composto por ELEMENTOS

formado por LABELS e ATRIBUTOS
Markup
Language

Tags, atributos e estrutura básica 90

 2 Sintaxe Elementar

Tags, atributos
Arquitetura e estrutura básica
cliente-servidor 91
 Sintaxe de um elemento

<h1> … </h1>
Tag de abertura Tag de fechamento
Indica o início de um Indica o fim de um
elemento, ele deve elemento, ele deve
sempre começar com o sempre começar com o
sinal menor < e terminar símbolo menor seguido
com o sinal maior >. da barra </ e terminar
O nome da etiqueta deve com o sinal maior >.
estar dentro. O nome vai dentro.

Tags, atributos e estrutura básica 92

 Sintaxe de um elemento

<h1 align="center"> ... </h1>

Atributos Valores Conteúdo

Estas são Eles nos permitem Tudo o que
configurações de definir as escrevemos entre as
elementos adicionais configurações. etiquetas de abertura
que ajustam o seu Serão sempre escritas e fechamento de um
comportamento de entre aspas " " e depois elemento irá compor o
várias maneiras. um sinal de igual =. seu conteúdo.

Tags, atributos e estrutura básica 93

 Revisão:
ELEMENTO

<h1 align="center"> ABERTURA

Olá Mundo CONTEÚDO

</h1> ENCERRAMENTO

Como é composto um elemento?

1. Uma tag de abertura
a. Opcionalmente um ou mais atributos
2. O conteúdo
3. Uma tag de fechamento. Alguns itens não o têm.

Tags, atributos e estrutura básica 94

 Estrutura básica de
3 um documento HTML

Tags, atributos
Arquitetura e estrutura básica
cliente-servidor 95
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Tenetur deserunt molestiae
numquam veritatis ea ut
praesentium explicabo atque
maxime a eaque, aut id
consequuntur. Et nemo non
perspiciatis eum!</p>
</body>
</html>
Tags, atributos e estrutura básica 96
 <!DOCTYPE html> VERSÃO HTML
<html> TOPO DA PÁGINA
<head>
<meta charset="utf-8"> CONFIGURAÇÃO
DA PÁGINA
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Tenetur deserunt molestiae
numquam veritatis ea ut CONTEÚDO
praesentium explicabo atque DA PÁGINA

maxime a eaque, aut id

consequuntur. Et nemo non
perspiciatis eum!</p>
</body>
</html> FINAL DA PÁGINA

Tags, atributos e estrutura básica 97

 Elementos
de linha e
de bloco
Elementos de linha e de bloco
 Quando falamos em visualização
e comportamento dos elementos
de HTML, existem dois grandes
grupos: os elementos de bloco e
os de linha.

Arquiteturade
Elementos cliente-servidor
linha e de bloco 99
 1. Elementos de bloco
Índice 2. Elementos de linha
3. A propriedade display

Arquiteturade
Elementos cliente-servidor
linha e de bloco 100
 1 Elementos de bloco

Arquiteturade
Elementos cliente-servidor
linha e de bloco 101
 Elementos de bloco
Os elementos de bloco tentam ocupar 100% da largura do site. Visualmente,
eles geram uma quebra de linha. Isso porque, ao ocupar toda a largura
disponível, não deixam espaço para que entre outro elemento.

Um elemento de bloco

Outro elemento de bloco

Um último elemento de bloco

Arquiteturade
Elementos cliente-servidor
linha e de bloco 102
 Tags de bloco
As tags <div> são um exemplo de tags de bloco muito utilizadas, já que
permitem gerar divisões em nosso site.

<div>Um elemento de bloco</div>

html <div>Outro elemento de bloco</div>
<div>Um último elemento de bloco</div>

Arquiteturade
Elementos cliente-servidor
linha e de bloco 103
 2 Elementos de linha

Arquiteturade
Elementos cliente-servidor
linha e de bloco 104
 Elementos de linha
Os elementos de linha determinam seu tamanho com base no conteúdo
que carregam. Isso quer dizer que podem ficar um ao lado do outro em
toda a largura do site. Se o conteúdo ultrapassar a linha, ele continua na
linha de baixo.

Umas palavras Outras palavras Mais

palavras por aqui

Arquiteturade
Elementos cliente-servidor
linha e de bloco 105
 Tags de linha
As tags <span> são tags de linha e frequentemente usadas para conter partes
de textos. Assim, eles podem ser estilizados de forma independente ao bloco
de código que pertencem.

<span>Umas palavras</span>
html <span>Outras palavras</span>
<span>Mais palavras por aqui</span>

Arquiteturade
Elementos cliente-servidor
linha e de bloco 106
 3 A propriedade display

Arquiteturade
Elementos cliente-servidor
linha e de bloco 107
 A propriedade display
Usando a propriedade display do CSS, podemos alterar a disposição do
elemento que queremos. Os valores que essa propriedade pode receber são:
block, inline, inline-block e none.

.em-linha { display: inline; }

.de-bloco { display: block; }
html
.de-bloco-em-linha { display: inline-block; }
.oculto { display: none; }

Arquiteturade
Elementos cliente-servidor
linha e de bloco 108
 Disposições de elementos
Inline
Define um elemento com comportamento de linha. Ou seja, não recebe
algumas propriedades do modelo de caixa.

Block
Define um elemento com comportamento de bloco. Pode receber
propriedades do modelo de caixa.

Arquiteturade
Elementos cliente-servidor
linha e de bloco 109
 Disposições de elementos
Inline-block
Define um elemento com comportamento de semi-bloco. Pode receber
propriedades tanto do modelo de caixa quanto de elementos de linha.

None
Define a exibição de um elemento como oculta. Ou seja, o elemento continua
existindo dentro da estrutura do HTML, porém deixa de ser visível ao usuário
no site.

Arquiteturade
Elementos cliente-servidor
linha e de bloco 110
Listas
 1. Listas ordenadas
Índice 2. Listas desordenadas
3. Listas aninhadas

Arquitetura
Listas cliente-servidor 112
 Listas
1 ordenadas

Arquitetura
Listas cliente-servidor 113
 Listas ordenadas
As listas ordenadas nos permitem enumerar itens de maneira consecutiva. Por
padrão, a numeração inicia em 1 e aumenta com cada novo item.

<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

Arquitetura
Listas cliente-servidor 114
 Listas ordenadas
As listas ordenadas aparecerão da seguinte forma no navegador:

1. Primeiro item
2. Segundo item
3. Terceiro item

Arquitetura
Listas cliente-servidor 115
 Listas ordenadas

html <ol type="1"> ... </ol>

Nos permite alterar Valores

o tipo de marcação
da lista ● Numérico (1)
● Alfabético (A)
● Numérico romano (I)

Arquitetura
Listas cliente-servidor 116
 Listas ordenadas

html <ol start="20"> ... </ol>

Atributo → start Valor

Nos permite definir Pode ser qualquer número
onde começa a positivo ou negativo
contagem numérica

Arquitetura
Listas cliente-servidor 117
 Listas ordenadas
Usando o atributo “start”, nós modificamos o número pelo qual se iniciará a
contagem da lista:

20. Primeiro item

21. Segundo item
22. Terceiro item

Arquitetura
Listas cliente-servidor 118
 Listas
2 desordenadas

Arquitetura
Listas cliente-servidor 119
 Listas desordenadas
As listas desordenadas também nos permitem listar itens. A diferença é que,
por padrão, ela irá gerar uma marcação do tipo “círculo” para cada novo item
que for adicionado.

<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>

Arquitetura
Listas cliente-servidor 120
 Listas desordenadas
As listas desordenadas aparecerão da seguinte forma no navegador:

• Primeiro item
• Segundo item
• Terceiro item

Arquitetura
Listas cliente-servidor 121
 Listas desordenadas

html <ul type="disc"> ... </ul>

Atributo → type Valor

Nos permite alterar ● disc (●)
o tipo de marcação ● circle (○)
da lista ● square (◼)
● upper-roman (I)
● lower-alpha (a)
● none

Arquitetura
Listas cliente-servidor 122
 Listas
3 aninhadas

Arquitetura
Listas cliente-servidor 123
 Listas aninhadas
As listas aninhadas nos permitem criar vários níveis de hierarquia e
organização. Podemos aninhá-los como quisermos e gerar os níveis de que
precisamos.
<ul>
<li>
Lembrete para viagem: Dentro de uma tag <ol> ou
<ol> <ul> só podem haver
<li>Identidade</li> elementos <li>.
<li>Passagens</li>
</ol> As listas podem ser aninhadas
adicionando um <ul> ou <ol>
</li>
dentro de um <li>.
<li>Ligar para a Assist Card</li>
<li>Adaptador para celular</li>
</ul>
Arquitetura
Listas cliente-servidor 124
 Listas aninhadas
A listas aninhadas aparecerão da seguinte maneira no navegador:

● Lembrete para viagem:

1. Identidade
2. Passagens
● Ligar para a Assist Card
● Adaptador para celular

Arquitetura
Listas cliente-servidor 125
Tag de Configuração e Texto

Tags de
configuração
e texto
 1. Configuração de caracteres
Índice
2. Tags de texto

Arquitetura cliente-servidor 127

 Configuração
1 de caracteres

Arquitetura cliente-servidor 128

 Configuração de caracteres
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Configuração da página
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>

Arquitetura cliente-servidor 129

 Configuração de caracteres
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> Configuração de caracteres
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>

Arquitetura cliente-servidor 130

 Estrutura do código
Atributo → charset
Permite definir a codificação de caracteres a utilizar. HTML
funciona por ‘default’ em inglês, quando queremos utilizar
caracteres de outros idiomas, devemos especificá-los.

html <meta charset="utf-8">

Etiqueta → meta Valor → utf-8

Permite definir propriedades da página que O padrão Unicode (UTF-8) foi projetado
não podem ser definidas em outras para permitir a exibição correta dos
etiquetas como <title>, <link> ou <style>. caracteres usados pela maioria dos
São geralmente dados sobre o conteúdo, idiomas e disciplinas técnicas no
sua descrição, autor, caracteres, etc. mundo moderno.

Arquitetura cliente-servidor 131

 Exemplo de HTML com charset UTF-8

Este é um parágrafo que possui muitos acentos: á, é, í, ó, ú. Deu tudo certo?

Você vê algum caractere estranho?
Temos outro parágrafo de teste. O hipopótamo é um ávido consumidor de
sabão. Sou fã do órgão alemão.
Outra vez. O hipopótamo é um ávido consumidor de sabão. Sou fã do órgão
alemão.

😊👌
Arquitetura cliente-servidor 132
 Exemplo de HTML sem charset UTF-8

Este é um parágrafo que possui muitos acentos: á, é, Ã, ó, ú. Deu tudo
certo? Você vá algum caractere estranho?
Temos outro parágrafo de teste. O hipopótamo é um ávido consumidor de
sab±o. Sou f± do ³rg±o alem±o.
Outra vez. O hipopótamo é um ávido consumidor de sab±o. Sou f± do
³rg±o alem±o.

💥
😱
Arquitetura cliente-servidor 133
 Etiquetas
2 de texto

Arquitetura cliente-servidor 134

 Estrutura de cabeçalhos

Os elementos de cabeçalhos implementam seis níveis de cabeçalho no

documento, <h1> sendo o mais importante, e <h6> o menos importante. Um
elemento de cabeçalho descreve brevemente o tópico da seção que apresenta:

<h1>Título Principal</h1>
<h2>Título Secundário</h2>
<h3>Cabeçalho nível 3</h3>
html
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>

Arquitetura cliente-servidor 135

 Estrutura de cabeçalho

Assim são visualizados cada nível de cabeçalho no navegador:

Cabeçalho nivel 1
Cabeçalho nivel 2
Cabeçalho nivel 3
Cabeçalho nivel 4
Cabeçalho nivel 5
Cabeçalho nivel 6

Arquitetura cliente-servidor 136

 “ O elemento <h1>, por
recomendação da W3C, só
deve ser utilizado uma vez

”
por documento HTML.

Arquitetura cliente-servidor 137

 Elementos de parágrafo

Os elementos de parágrafo <p>, permitem-nos distribuir o texto em

parágrafos. Podemos usar quantos precisarmos.

<p>Este é um parágrafo, ele pode ter todo o texto que

precisamos.</p>
html
<p>O navegador irá adicionar espaço vertical entre cada um
dos parágrafos que escrevemos.</p>

Arquitetura cliente-servidor 138

 Rotas,
hiperlinks e
imagens
 1. Rotas
Índice 2. Hiperlinks
3. Imagens

Arquitetura cliente-servidor 140

 1 Rotas

Arquitetura cliente-servidor 141

 O que é uma rota
É uma direção ou caminho (também conhecido como o termo em inglês “path”),
que permitirá ao navegador encontrar um recurso. Esse recurso pode ser outra
página web, uma imagem, um vídeo ou qualquer outro tipo de arquivo.
No caso de links, a rota indica a direção para a qual o navegador deve nos levar
quando clicamos nele.

Rota absoluta Rota relativa

Posso acessar esse recurso de onde quer Depende de onde eu estou no momento,
que eu esteja. ou seja, é relativo à minha posição atual.

https://www.google.com ../imagens/fotoPerfil.jpg

Arquitetura cliente-servidor 142

 Exemplo de rota absoluta
Uma imagem que está hospedada em uma url. Eu posso acessá-la
independente de onde esteja navegando naquele momento.
A rota, isso é, o acesso a essa imagem, sempre será o mesmo.

https://umwebsite.com/imagens/imagem1.jpg

Arquitetura cliente-servidor 143

 Exemplo de rota relativa
Uma imagem que está hospedada em uma determinada pasta pode ser
acessada utilizando uma rota relativa.
Por exemplo, para acessar uma imagem que se encontra na mesma pasta
que o arquivo atual, a rota simplesmente deve fazer referência ao nome do
arquivo da imagem, já que ambos estão no mesmo lugar.

meuProjeto
O caminho relativo de umArquivo.js para
umaImagem.jpg ficaria da seguinte forma:
umArquivo.js

umaImagem.jpg umaImagem.jpg

Arquitetura cliente-servidor 144

 Exemplo de rota relativa
Para acessar uma imagem que se encontra numa pasta inferior a do arquivo
atual, devemos escrever o nome da pasta onde está a imagem, seguido de
barra / e o nome do arquivo da imagem que queremos.

meuProjeto

umArquivo.js Caminho relativo de umArquivo.js até umaImagem.jpg:

imagens imagens/umaImagem.jpg
umaImagem.jpg

Arquitetura cliente-servidor 145

 Exemplo de rota relativa
Se houver mais pastas inferiores, devemos escrever o nome das pastas uma
a uma separando-as por barra /, até chegar no arquivo da imagem.

meuProjeto

umArquivo.js Caminho relativo de umArquivo.js até umaImagem.jpg:

imagens
imagens/icones/umaImagem.jpg
icones

umaImagem.jpg

Arquitetura cliente-servidor 146

 Exemplo de rota relativa
Para acessar uma imagem que se encontra numa pasta no mesmo nível que o
arquivo atual, devemos sair da pasta em que estamos e depois entrar na
correspondente. Para voltar um nível atrás, usamos dois pontos seguidos .. .

js
Caminho relativo de umArquivo.js até umaImagem.jpg:
umArquivo.js
../imagens/umaImagem.jpg
imagens

umaImagem.jpg

Arquitetura cliente-servidor 147

 2 Hiperlinks

Arquitetura cliente-servidor 148

 Hiperlinks
Através da tag <a> poderemos criar os nossos links.

Rota
Aqui podemos especificar uma rota absoluta
(como no exemplo abaixo) ou uma rota relativa.

html <a href="https://www.google.com">Redirecionar ao Google</a>

Atributo → href Texto

Utilizamos este atributo para Aqui podemos escrever o texto que vai
indicar o destino do nosso link. ser visto pelo usuário. Ou inserir outros
elementos HTML, como imagens.

Arquitetura cliente-servidor 149

 Tipos de links
Externos
Endereços que estão fora do nosso site devem sempre ser absolutos.

html <a href="https://www.youtube.com">Ir para o YouTube</a>

Locais
Para recursos dentro do nosso site, recomenda-se o uso de rotas relativas.

html <a href="inicio.html">Início</a>

Arquitetura cliente-servidor 150

 Tipos de links
Âncoras
Servem para fazer referência a uma determinada parte de uma página, como
uma seção ou título, e podem estar combinadas com os links anteriores.
Iniciam com o carácter # e fazem referência à propriedade id .

html <a href="#biografia">Biografia</a>

html <a href="https://www.site.com/#contato">Contato</a>

html <a href="sobre.html#nossa-equipe">Nossa equipe</a>

Arquitetura cliente-servidor 151

 Tipos de links
E-mail
Ao clicar nele, será aberto um programa padrão de e-mail para enviar uma
mensagem de e-mail ao endereço determinado.

html <a href="mailto:[email protected]">Enviar mensagem</a>

Telefone
Parecido com o caso anterior, se estivermos usando nosso celular e clicarmos
no link, será iniciada uma chamada para o número de telefone indicado.

html <a href="tel:1145678899">Atendimento por telefone!</a>

Arquitetura cliente-servidor 152

 3 Imagens

Arquitetura cliente-servidor 153

 Fonte de uma imagem
Dentro do nosso documento HTML, podemos adicionar imagens através da tag
<img>. Essa tag nos permite “chamar” as imagens, ou seja, fazer referência ao
lugar onde estão alocadas para aparecer no browser.

html <img src="img/fotoPerfil.jpg">

Atributo → src Rota

Utilizado para indicar onde a imagem Aqui podemos especificar uma rota absoluta
está localizada. (como no exemplo acima) ou relativa.

Arquitetura cliente-servidor 154

 Texto alternativo
Nos permite adicionar uma descrição a uma imagem e também:
● Ajudar os motores de busca a compreender a imagem;
● Mostrar um texto caso a imagem não carregue;
● Dar contexto para pessoas com deficiência visual.

html <img src="img/fotoPerfil.jpg" alt="Sua imagem de perfil">

Atributo → alt Texto

Esse atributo nos permite Deve conter uma breve descrição de
especificar o texto alternativo. até 125 caracteres sobre a imagem
que deveria ser exibida.

Arquitetura cliente-servidor 155

 Quando a imagem não carrega...
Como dissemos, se por alguma razão a imagem não carregar, o navegador
poderá mostrar o texto alternativo.
A visualização pode mudar de acordo com cada navegador.

Sua imagem de perfil

Arquitetura cliente-servidor 156

 Largura
O atributo width nos permite indicar a largura da imagem (não é obrigatório).
Os valores podem ser tanto em pixels (escrevemos apenas o número) quanto
em porcentagem (com o símbolo % no final).

html <img width="320" src="img/fotoPerfil.jpg">

Atributo → width
Esse atributo nos permite
especificar a largura da imagem.

Arquitetura cliente-servidor 157

 Altura
O atributo height nos permite indicar a altura da imagem (não é obrigatório).
Os valores podem ser tanto em pixels (escrevemos apenas o número) quanto
em porcentagem (com o símbolo % no final).

html <img height="560" src="img/fotoPerfil.jpg">

Atributo → height
Esse atributo nos permite
especificar a altura da imagem.

Arquitetura cliente-servidor 158

Introdução
à semântica
 1. HTML semântico
Índice
2. Tags semânticas

Arquitetura
Introdução àcliente-servidor
semântica 160
 HTML
1 semântico

Arquitetura
Introdução àcliente-servidor
semântica 161
 O que é a semântica?
O uso correto de nossas tags, do ponto de vista semântico, permite reforçar o
significado do conteúdo do nosso site.
Dessa forma, podemos ser mais específicos ao incluir conteúdo entre as tags, e
assim, criar um código mais amigável ao mecanismo de busca.

Arquitetura
Introdução àcliente-servidor
semântica 162
 “ Incorporar tags semânticas em
nosso código ajuda muito ao

”
posicionamento de SEO.

Arquitetura
Introdução àcliente-servidor
semântica 163
 Tags
2 semânticas

Arquitetura
Introdução àcliente-servidor
semântica 164
 Tag <strong>
Através desta tag, estamos dizendo aos mecanismos de busca que o elemento
é importante. Por padrão, o texto aparecerá em negrito.

html <b>Texto a destacar</b>

Esta tag converte o texto em negrito. NÃO é semântica.

html <strong>Texto a destacar</strong>

Esta tag converte o texto em negrito e diz ao mecanismo de busca que é

importante. É semântica.

Arquitetura
Introdução àcliente-servidor
semântica 165
 Tag <em>
Com esta tag, nós estamos dizendo ao mecanismo de busca que o elemento
tem uma ênfase. Por padrão, o texto ficará em itálico.

html <i>Palavra importante</i>

Esta tag converte o texto em itálico. NÃO é semântica.

html <em>Palavra importante</em>

Esta tag converte o texto em itálico e diz ao mecanismo de busca que ele leva
mais ênfase do que o restante. É semântica.

Arquitetura
Introdução àcliente-servidor
semântica 166
 Tag <mark>
Esta tag semântica nos permite destacar uma parte do texto que seja
relevante. Serve para chamar a atenção do leitor. Por padrão, ele será visto
com um fundo amarelo.

html <mark>parte do texto a ressaltar</mark>

No navegador, a parte do texto a ressaltar vai ficar visível assim :)

Arquitetura
Introdução àcliente-servidor
semântica 167
 Tag <cite>
Esta tag indica o título ou parte de uma “obra”. Ex: um livro, uma pintura, uma
música, um filme, uma série de TV, etc.

html <cite>Parte da obra a citar</cite>

Arquitetura
Introdução àcliente-servidor
semântica 168
 Tag <abbr>
Esta tag é usada para representar uma abreviação ou sigla. Quando você
passa o mouse por cima da sigla, aparece o significado dela, o qual definimos
no atributo title.

html <abbr title=“Digital House”>DH</abbr>

Ao passar o mouse em cima da sigla “DH” no navegador, aparecerá o texto

“Digital House” para o usuário.

Arquitetura
Introdução àcliente-servidor
semântica 169
 Outras tags semânticas

html <section>...</section>

Esta tag define uma seção de conteúdo.

html <article>...</article>

Esta tag define um fragmento de informação dentro de uma seção.

Arquitetura
Introdução àcliente-servidor
semântica 170
 Outras tags semânticas

html <header>...</header>

Esta tag define o cabeçalho de um determinado conteúdo ou documento.

html <footer>...</footer>

Esta tag define o rodapé de um determinado conteúdo ou documento.

Arquitetura
Introdução àcliente-servidor
semântica 171
 Estrutura
de um site

Estrutura de um site
 Conhecer as tags e suas
combinações vão nos ajudar
a transformar um desenho
gráfico em um código
organizado e compreensível
de maneira simples.

Arquitetura cliente-servidor 173

 O ponto de partida
Normalmente, quando vamos começar a desenvolver o código de um site, nós
temos como ponto de partida um desenho ou wireframe dele.

Arquitetura cliente-servidor 174

 Os blocos principais
Nossa primeira tarefa será definir quais são os blocos principais do site.
Geralmente, são eles: a header, a navegação, as seções e o rodapé.

Header

Section

Section

Footer

Arquitetura cliente-servidor 175

 Os blocos principais
Definido os blocos principais, podemos então começar a estrutura do nosso
site. Todo o conteúdo do site ficará dentro da tag <body>.

<header>
<!-- Conteúdo da header -->
</header>
<section>
<!-- Conteúdo do carrossel -->
</section>
html
<section>
<!-- Conteúdo dos produtos destaques -->
</section>
<footer>
<!-- Conteúdo do footer -->
</footer>
Arquitetura cliente-servidor 176
 O conteúdo de cada bloco
Nossa segunda tarefa será definir os elementos que serão necessários dentro
da divisão de cada bloco.

1 3

2 4

Arquitetura cliente-servidor 177

 O cabeçalho
Neste caso, haverá uma divisão para o logotipo e para a navegação do site.
Também podíamos ter usado outra <nav> para separar o cadastro do resto.
<header>
<div><img src="/img/logo.jpg" alt="Logo da empresa"></div>
<nav>
<ul>
<li><a href="#">Produtos</a></li>
<li><a href="#">Serviços</a></li>
html
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Criar conta</a></li>
</ul>
</nav>
</header>
Arquitetura cliente-servidor 178
 O carrossel de produtos
Aqui nós podemos imaginar cada produto do carrossel como se fosse um
artigo. Dentro dele, teremos uma imagem, um título e uma descrição.

<section>
<article>
<img src="/img/prod-1.jpg" alt="Título do produto">
<h3>Título do produto</h3>
<p>Descrição do produto</p>
</article>
html
<article>
<img src="/img/prod-2.jpg" alt="Título do produto">
<h3>Título do produto</h3>
<p>Descrição do produto</p>
</article>
</section>
Arquitetura cliente-servidor 179
 Os produtos destacados
Por mais que sejam diferentes, esta seção é muito parecida com a anterior.
Cada produto será um artigo e dentro teremos a imagem, o título, a descrição
e, nesse caso, um link para ver mais.

<section>
<article>
<img src="/img/prod-1.jpg" alt="Título do produto">
<h3>Título do produto</h3>
<p>Descrição do produto</p>
html
<a href="#">ver mais</a>
</article>
<article><!-- Produto 2 --></article>
<article><!-- Produto 3 --></article>
</section>
Arquitetura cliente-servidor 180
 O rodapé da página
Para o rodapé da página, teremos novamente a imagem do logotipo e, em
seguida, vários grupos ou seções de links.

<footer>
<div><img src="/img/logo.jpg" alt="Logo da empresa"></div>
<section>
<h2>Produtos</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
html
<li><a href="#">Link 3</a></li>
</ul>
</section>
<section><!-- Conteúdo de “Serviços” --></section>
<section><!-- Conteúdo de “Sobre” --></section>
<section><!-- Conteúdo de “Redes Sociais” --></section>
</footer>

Arquitetura cliente-servidor 181

 Existem diversas maneiras de montar
a estrutura de um site. O importante
é que o código final esteja organizado
e seja evidente o que cada elemento
que escolhemos faz.

Arquitetura cliente-servidor 182

 Agregando
estilos

Estrutura de um site
O que vimos essa semana

● CSS
● Tipografia
● Cores
● Background
O que vamos ver hoje

● Boas práticas com CSS

● Background-image
● Prática com figma
Vamos validar alguns conhecimentos
básicos de HTML e CSS?
Background-image

● background-image
● background-size
● background-position
Agora vamos botar a mão na massa!
Atividade

● Crie a pasta lovt

● Crie o arquivo index.html
● Crie a pasta css/ com o arquivo style.css
● Crie a pasta img/ e extraia as imagens do
figma
● Construa a página com HTML e CSS
● Não esqueça de adicionar o projeto no github
PROJETO INTEGRADOR - SPRINT 1

1ª sprint do projeto integrador:

Os grupos deverão criar e pensar no sistema a ser
desenvolvido. A ideia é documentar layouts, fluxos e
processos para a facilitação do desenvolvimento.
Para ir além

➔ W3Schools
http://w3schools.com

➔ MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/HTML
Introdução
a CSS
 1. Vinculação com HTML
Índice 2. As regras de CSS
3. Os seletores de CSS

Arquitetura
Introdução acliente-servidor
CSS 193
 Vinculação
1 com HTML

Arquitetura
Introdução acliente-servidor
CSS 194
 O que CSS significa?

Cascading Style Sheets

Folhas de estilo em cascata

Arquitetura
Introdução acliente-servidor
CSS 195
 Para que servem as folhas de estilo?
As folhas de estilo servem para estilizar o nosso conteúdo HTML. Com o CSS,
podemos modificar as cores, o background, as tipografias, larguras, alturas...
Também podemos gerar animações e transições.
Contamos com 3 métodos para vincular nossos arquivos CSS com o
documento HTML.

Arquitetura
Introdução acliente-servidor
CSS 196
 Vinculação externa RECOMEN
DADA 🤓☝

Essa é a mais utilizada, já que escrevemos todos os nossos estilos em um

arquivo CSS. Feito isso, vinculamos esse arquivo usando a tag <link> dentro do
<head> do nosso documento.
Atributo + valor
Indica a relação entre os documentos a serem
ligados. O valor é sempre o mesmo.

html <link href="css/estilos.css" rel="stylesheet">

Atributo + valor
Rota de localização da minha folha de estilo.

Arquitetura
Introdução acliente-servidor
CSS 197
 NÃO RECO
Vinculação interna 😕👎
MENDADA

É feita através da tag <style> dentro do <head>.

<head>
<meta charset="UTF-8">
<style>
html
body {background: blue}
</style>
</head>

Arquitetura
Introdução acliente-servidor
CSS 198
 NÃO RECO
Vinculação em linha 😕👎
MENDADA

Usando o atributo style em cada elemento do nosso HTML.

html <p style="color: red">...</p>

Arquitetura
Introdução acliente-servidor
CSS 199
 As regras
2 de CSS

Arquitetura
Introdução acliente-servidor
CSS 200
 O que são as regras de CSS?
Uma regra de CSS é um conjunto de instruções que se aplicam a um
determinado elemento para agregar estilos.

Seletor
Indica sobre qual ou quais
elementos aplicaremos a regra.

css body { font-family: sans-serif }

Propriedade Valor
Define qual propriedade do(s) Especificará o comportamento que
elemento(s) vamos modificar. a propriedade vai ter.

Arquitetura
Introdução acliente-servidor
CSS 201
 Como se escrevem?
Primeiro escrevemos o seletor (ou seletores, caso haja mais de um), seguido de
chaves {} para indicar onde começam as regras.
Cada regra é composta por uma propriedade e seu valor correspondente,
separados por dois pontos :.
Finalmente, podemos adicionar outras regras para o mesmo elemento, basta
separá-las com um ponto e vírgula ;.

body {
background-color: purple;
css font-family: sans-serif;
text-align: center;
}

Arquitetura
Introdução acliente-servidor
CSS 202
 Os seletores de
3 CSS

Arquitetura
Introdução acliente-servidor
CSS 203
 Seletores de ID
Este seletor irá selecionar o elemento HTML que é associado ao atributo ID.
Recomenda-se a utilização de nomes únicos para cada id e não repetí-los ao
longo do documento.

html <h3 id="saudacao">Olá!</h3>

Para chamá-lo a partir do CSS, usamos o # seguido do nome do ID.

css #saudacao { color: blue }

Arquitetura
Introdução acliente-servidor
CSS 204
 Seletores de classe
Este seletor irá chamar o elemento HTML que é associado a um atributo
CLASS.
Podemos atribuir o número de classes que queremos a um mesmo elemento.
Para fazer isso, só precisamos separá-los com um espaço.

html <h3 class="titulo noticias">Notícias</h3>

Para chamá-lo a partir do CSS, usamos o . seguido do nome da classe.

css .titulo { font-size: 22px }

Arquitetura
Introdução acliente-servidor
CSS 205
 Seletores de tag
Este seletor vai chamar o elemento HTML com o mesmo nome da tag que
chamamos do nosso CSS.

html <p>Primeiro parágrafo</p>

Para chamá-lo a partir do CSS, usamos o nome da tag.

css p { color: gray }

Arquitetura
Introdução acliente-servidor
CSS 206
 Seletores combinados
Estes seletores afetam o(s) elemento(s) que cumprem todas as condições
estabelecidas. No exemplo a seguir, vamos chamar o elemento h2 designado
para a classe subtítulo.

html <h2 class="subtitulo">Subtítulo</h2>

Para chamá-los a partir do CSS, você só precisa adicionar um seletor ao lado

do outro, cada um com a sintaxe correspondente (id, classe ou tag).

css h2.subtitulo { color: yellow }

Arquitetura
Introdução acliente-servidor
CSS 207
 Seletores descendentes
Estes seletores servem para agregar especificidade. No exemplo a seguir,
vamos chamar o elemento li que está dentro da ul com o id lista.
Para chamá-los a partir do CSS, escrevemos os seletores separados por um
espaço (o da direita sempre será o que está dentro da esquerda).

<ul id="lista">
html <li>Primeiro item</li>
</ul>

css ul#lista li { text-align: center }

Arquitetura
Introdução acliente-servidor
CSS 208
 “ O CSS sempre vai priorizar
os seletores mais específicos

”
para aplicar os estilos.

Arquitetura
Introdução acliente-servidor
CSS 209
Propriedades
tipográficas
 Propriedades tipográficas
Existem muitas propriedades de CSS que nos permitem manipular os
elementos do HTML à vontade.
Se tivéssemos que agrupar essas propriedades, poderíamos fazer assim:

● Fontes
● Fundos
● Tamanhos
● Posicionamento
● Visualização
● Comportamento
● Interface
● Outros

Arquitetura cliente-servidor 211

 font-family
Permite escolher a família tipográfica que queremos usar. Como valor, recebe
o nome da fonte que queremos usar.
Para que funcione, a fonte deve existir no computador do usuário, ou devemos
usar uma webfont.
Podemos colocar mais de uma fonte, separando a adicionais por vírgulas. No
caso da primeira não estar disponível, será carregada a segunda e assim
sucessivamente.

p {
css font-family: Arial, sans-serif;
}

Arquitetura cliente-servidor 212

 font-size
Permite definir o tamanho tipográfico.
Recebe um valor numérico acompanhado da unidade de medida. As unidades
de medida mais habituais podem ser: px, em e rem.

p {
css font-size: 23px;
}

Arquitetura cliente-servidor 213

 font-style
Define o estilo de fonte. Recebe os valores italic, normal e oblique.
Para alguns elementos, como <em>, o valor padrão será italic.

p {
css font-style: normal;
}

Arquitetura cliente-servidor 214

 font-weight
Define o peso da fonte. Recebe os valores bold, lighter, normal, entre outros.
Também pode receber um valor numérico, que é incrementado de 100 em 100.
Para algumas tags, o valor padrão será bold.

p {
css font-weight: 500;
}

Arquitetura cliente-servidor 215

 text-align
Permite definir o alinhamento do texto. Os valores que recebe são center, left,
right, inherit e justify. O valor padrão para todos os elementos é left.

p {
css text-align: justify;
}

Arquitetura cliente-servidor 216

 text-decoration
Permite escolher um tipo de decoração para o texto. Recebe os valores
line-through, underline, overline e none.
Para alguns elementos, como os links, o valor padrão será underline.

p {
css text-decoration: underline;
}

Arquitetura cliente-servidor 217

 line-height
Permite definir a altura de cada linha do textos. Frequentemente, também é
chamado de espaçamento entre linhas.
Recebe um valor numérico, acompanhado da unidade de medida e, em geral,
está relacionado com o tamanho da letra, o font-size.

p {
css line-height: 20px;
}

Arquitetura cliente-servidor 218

Cores e
background
 1. Cores
Índice
2. Background

Arquitetura
Cores e background
cliente-servidor 220
 1 Cores

Arquitetura
Cores e background
cliente-servidor 221
 Formatos de cor
Os seguintes formatos podem ser aplicados a qualquer propriedade CSS que
receba cor:
Nome (podemos identificar as cores pelo seu nome em inglês, veja todos aqui)
purple
Hexadecimal
#f05331
RGB
rgb(255, 100, 50)
RGBA
rgba(122, 50, 125, 0.5). O último número representa a opacidade que o elemento
terá e varia de 0 a 1. Quanto menor o número, maior a transparência.

Arquitetura
Cores e background
cliente-servidor 222
 Cor do texto
O atributo color nos permite atribuir uma cor ao texto de um elemento.
Recebe como valor qualquer dos formatos de cor permitidos.

css h2 { color: purple }

css h2 { color: #3459ff }

css p { color: rgb(12, 34, 32) }

Arquitetura
Cores e background
cliente-servidor 223
 Cor de fundo
O atributo background-color nos permite atribuir uma cor para o fundo de um
elemento.
Ele recebe como valor qualquer um dos formatos de cor permitidos (como
vimos anteriormente).

css p { background-color: tomato }

css p { background-color: #3459ff }

css p { background-color: rgb(12, 34, 32) }

Arquitetura
Cores e background
cliente-servidor 224
 Opacidade
Através do atributo opacity damos transparência a todo o elemento, e não
apenas o seu background.

css p { opacity: 0.5 }

Valor
O valor representa a porcentagem de
opacidade que queremos dar ao elemento.
Os valores vão de 0 a 1. Isso quer dizer que 0.5
representa 50% de opacidade.

Arquitetura
Cores e background
cliente-servidor 225
 2 Background

Arquitetura
Cores e background
cliente-servidor 226
 background-image
Permite atribuir uma imagem de fundo ao elemento, definindo o caminho
através da url.

css body { background-image: url('../img/bicicleta.jpg') }

Arquitetura
Cores e background
cliente-servidor 227
 background-repeat
Permite controlar se, e como, a imagem vai ser repetida. Recebe os valores:
repeat, no repeat, repeat-x, repeat-y, round e space.

css body { background-repeat: repeat-x }

Arquitetura
Cores e background
cliente-servidor 228
 background-position
Permite mover a imagem dentro do elemento e decidir onde posicioná-la.
Recebe como valores: tamanhos em pixels ou porcentagem, right, bottom, left,
top. Podemos lhe atribuir um ou dois valores. O primeiro trata da posição no
eixo x, e o segundo a posição no eixo y.

css body { background-position: right top }

Arquitetura
Cores e background
cliente-servidor 229
 background-attachment
Permite definir se a imagem de fundo se moverá junto com a página durante o
scroll ou se permanecerá fixa. Recebe como valor: fixed, scroll, inherit e initial.

css body { background-attachment: fixed }

Arquitetura
Cores e background
cliente-servidor 230
 background-size
Permite definir o tamanho da imagem de fundo. Recebe como valor: contain,
cover, inherit, assim como tamanhos em pixels ou porcentagem, indicando
com o primeiro valor a largura, e com o segundo a altura.

css body { background-size: 130px }

Arquitetura
Cores e background
cliente-servidor 231
Layouts
responsivos
O que vamos ver hoje

● Inspetor de elementos
● Menu responsivo
● Prática com @media
Atividade

Continuação do Projeto LOVT

● Utilize medidas relativas e media queries para
deixar a página responsiva
● Crie um menu com 3 links visiveis no desktop e
substitua por um button toggle no mobile
Para ir além

➔ W3Schools
http://w3schools.com

➔ MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/HTML
Modelo
de caixa
 1. Modelo de caixa
2. width e height
3. padding
Índice
4. border
5. margin
6. box-sizing

Arquitetura cliente-servidor 237

 1 Modelo de caixa

Arquitetura cliente-servidor 238

 Em HTML, todos os elementos são
representados por caixas. Cada
caixa é composta por conteúdo,
preenchimento, borda e margem.

Arquitetura cliente-servidor 239

 Modelo de caixa
Através do CSS, podemos manipular todas essas propriedades para mudar a
aparência de cada elemento. Por sua vez, essas propriedades podem ser
aplicadas de maneira diferente aos quatro lados de cada caixa (top, right,
bottom e left).
As propriedades do modelo de caixa se aplicam apenas a elementos de bloco e
semi-bloco.

top
margin (margem)

border (borda)

right
elemento

left
padding (preenchimento) HTML
content (conteúdo)

bottom

Arquitetura cliente-servidor 240

 2 width e height

Arquitetura cliente-servidor 241

 Propriedade width
Se um elemento não tiver a propriedade width declarada, a largura será igual a
100% de seu container pai, desde que seja um elemento de bloco.
Para atribuir valor a esta propriedade, podemos fazer isso usando a medida de
porcentagens (%) ou pixels (px).

div {
css width: 120px;
}

Arquitetura cliente-servidor 242

 Propriedade height
Se um elemento não tiver a propriedade height declarada, a altura será igual à
altura do seu conteúdo interno. Seja um elemento de bloco ou de linha.
Para atribuir valor a esta propriedade, podemos fazer isso usando a medida de
porcentagens (%) ou pixels (px).
Para a altura dos elementos recomenda-se usar porcentagem.

div {
css height: 130px;
}

Arquitetura cliente-servidor 243

 Width e height em um elemento

Este é um bloco.
height: 120px

div {
background-color: blue;
css width: 130px;
height: 120px;
}

width: 130px

Arquitetura cliente-servidor 244

 3 padding

Arquitetura cliente-servidor 245

 Propriedade padding
É o espaço de preenchimento que podemos agregar entre o conteúdo do
elemento e sua borda. Em outras palavras, é a margem interna do elemento.

padding: 12px padding: 12px

Esse é um bloco. Esse é um bloco.

padding: 20px
padding: 12px
padding: 12px

padding: 20px
height

height
padding: 12px padding: 12px

width width
Arquitetura cliente-servidor 246
 Propriedade padding
Podemos atribuir valor a esta propriedade usando a medida em pixels (px),
indicando 1 valor para os 4 lados da caixa.

css div { padding: 12px; }

Único valor
Isso quer dizer que uma margem interna de 12px
será aplicada em todos os lados.

Arquitetura cliente-servidor 247

 Propriedade padding
Também podemos fazer com 2 valores. O primeiro vai indicar o padding de
cima e de baixo, e o segundo indicará o padding da esquerda e da direita.

css div { padding: 12px 20px; }

Dois valores
12px de padding para cima e para baixo.
20px de padding para esquerda e para direita.

Arquitetura cliente-servidor 248

 Propriedade padding
Também podemos fazer com 3 valores. O primeiro vai indicar o padding de
cima, o segundo da esquerda e da direita e o terceiro será o de baixo.

css div { padding: 12px 20px 18px; }

Três valores
12px de padding para cima.
20px de padding para esquerda e direita.
18px de padding para baixo.

Arquitetura cliente-servidor 249

 Propriedade padding
Por último, podemos utilizar 4 valores que representarão os quatro lados
individualmente. Começaremos pelo valor de cima e seguiremos em sentido
horário (direita, embaixo, esquerda).

css div { padding: 12px 15px 18px 21px; }

Quatro valores
12px de padding para cima.
15px de padding para direita.
18px de padding para baixo.
21px de padding para esquerda.

Arquitetura cliente-servidor 250

 Propriedades abreviadas
Em todas as propriedades de estilo, como margin e padding, podemos escrever
1, 2, 3 ou 4 valores.

1 valor 2 valores 3 valores 4 valores

TOP A A A A
RIGHT

padding: padding: padding: padding:

LEFT

A A;
A B A B;
B B A B C;
B D A B C D;
B

BOTTOM A A C C

Arquitetura cliente-servidor 251

 5 border

Arquitetura cliente-servidor 252

 Propriedade border
Refere-se à borda do elemento. Fica entre o conteúdo e a margem.

border: 3px
padding
Esse é um bloco.
border: 3px

border: 3px
padding

padding
padding

border: 3px

Arquitetura cliente-servidor 253

 Propriedade border
Para atribuir valor a essa propriedade, fazemos isso definindo o estilo da linha,
seu tamanho e sua cor.
O estilo da linha pode ser solid, dotted, dashed ou double.
A espessura da linha pode ser qualquer unidade de medida de CSS.
A cor pode ser qualquer cor válida de CSS.

Espessura

css div { border: solid 3px yellow }

Estilo de linha Cor

Arquitetura cliente-servidor 254

 6 margin

Arquitetura cliente-servidor 255

 Propriedade margin
Refere-se à margem exterior do elemento. Serve para separar uma caixa
da outra.

margin: 15px margin: 20px

padding padding
Esse é um bloco. Esse é um bloco.

margin: 15px
margin: 15px
margin: 15px

margin: 15px
padding

padding
padding

padding
padding padding
margin: 15px margin: 20px

Arquitetura cliente-servidor 256

 Propriedade margin
Para atribuir valor a essa propriedade, podemos usar a medida em pixels (px),
indicando 1 valor para os 4 lados da caixa.

css div { margin: 15px }

Único valor
Isso quer dizer que uma margem externa de 15px
será aplicada em todos os lados.

Arquitetura cliente-servidor 257

 Propriedade margin
Da mesma maneira que com o padding, podemos também declarar 2, 3 e até 4
valores para a propriedade.

css div { margin: 20px 15px }

css div { margin: 20px 15px 30px }

css div { margin: 20px 15px 30px 25px }

Arquitetura cliente-servidor 258

 7 box-sizing

Arquitetura cliente-servidor 259

 Calculando a largura e a altura
Para poder calcular a largura e altura margin
total de um elemento, temos que
padding
somar todas as propriedades que
vimos antes. Esse é um bloco.

Como podem imaginar, fazer esse

padding
padding

margin
margin
cálculo para saber quanto espaço um
elemento vai ocupar no total é
bastante trabalhoso.
Por isso, a propriedade box-sizing
padding
nos ajuda com esse cálculo.
margin
15px + 3px + 12px + 150px + 12px + 3px + 15px

largura final = 210px

Arquitetura cliente-servidor 260
 box-sizing: content-box
Por padrão, seu valor será content-box, e o comportamento será de aplicar a
largura e altura que definirmos ao conteúdo do elemento.

margin
padding

Conteúdo
height

padding
padding

margin
margin

padding
margin

width
Arquitetura cliente-servidor 261
 box-sizing: border-box
Se usarmos o valor border-box, a altura e largura que indicarmos abrangerá o
conteúdo, padding e borda do elemento, deixando apenas a margem de fora.

margin
padding

Conteúdo
height

padding
padding

margin
margin

padding
margin

width
Arquitetura cliente-servidor 262
 box-sizing: border-box
margin
padding
div {
Esse é um bloco.
width: 150px;

padding
padding

margin
margin

height: 130px;
padding: 12px;
border: solid 3px yellow;
padding
margin: 15px;
margin
box-sizing: border-box;
15px + 150px + 15px
}
largura total = 180px

Arquitetura cliente-servidor 263

 É uma prática muito comum
aplicar box-sizing: border-box a
todos os elementos do site com a
seguinte linha de código:
* { box-sizing: border-box }

Arquitetura cliente-servidor 264

Viewports
 1. Tag viewport
Índice
2. Dev tools

Arquitetura
Viewports cliente-servidor 266
 1 Tag viewport

Arquitetura
Viewports cliente-servidor 267
 Tag viewport
A tag <meta> viewport passa ao browser instruções de como se deve
dimensionar e escalar a página web ao carregar.
Esta é a estrutura básica desta tag. Em alguns casos, pode ser que ela carregue
mais informações.

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

Arquitetura
Viewports cliente-servidor 268
 Tag viewport

SEM tag viewport COM tag viewport

Arquitetura
Viewports cliente-servidor 269
 2 Dev tools

Arquitetura
Viewports cliente-servidor 270
 Dev tools
Nos permitem inspecionar o código de qualquer site e realizar modificações
sobre ele.
Essas alterações só ficam visíveis para nós de maneira local. Uma vez que
atualizamos o site, a visualização volta para como estava inicialmente.
Para acessá-las, podemos clicar com o botão direito do mouse e selecionar a
opção “Inspecionar”. Também podemos acessar com F12 ou Cmd+i.

Arquitetura
Viewports cliente-servidor 271
 Vendo a página em diferentes tamanhos
Também nos permitem manipular a largura da viewport e simular como seria a
exibição de uma página em dispositivos com diferentes tamanhos de tela,
como por exemplo, tablet ou celular.

Arquitetura
Viewports cliente-servidor 272
 Seções das dev tools

Acessos rápidos
e seções das
ferramentas de
desenvolvedor. Estrutura HTML do site.

Podemos editar os
elementos dando duplo
clique em cima deles.

CSS utilizado pelo site.

Modelo de caixa
do elemento
selecionado.

Arquitetura
Viewports cliente-servidor 273
Medidas
relativas
 As medidas relativas são
aquelas que levam em conta o
contexto onde se encontram.

Se o contexto mudar, estas

medidas mudarão com ele.

Arquitetura cliente-servidor 275

 O contexto
Dependendo de qual medida estamos falando, o número que colocaremos
será relativo ao:
● Container pai.
● Tamanho da fonte do site.
● Tamanho da fonte do container pai.
● Tamanho da viewport (tela).
Se tomarmos as porcentagens como exemplo, podemos dizer que são uma
unidade relativa, já que 30% de largura não será o mesmo para um elemento
que está dentro de um container de 2000px de largura, que para um container
de 1000px de largura.

Arquitetura cliente-servidor 276

 1. Porcentagens
Índice 2. em e rem
3. vw e vh

Arquitetura cliente-servidor 277

 1 Porcentagens

Arquitetura cliente-servidor 278

 As porcentagens
Qualquer medida relativa expressa em porcentagem sempre estará
relacionada com a medida (no mesmo eixo) do elemento pai que o contém.
Se o container pai mede 300px de largura e atribuímos uma largura de 50% ao
elemento filho, essa medida será 150px (os 50% da largura do pai).
Nota: não é recomendado usar porcentagens para a altura de um elemento.

.elementoPai { width: 300px }

css
.elementoFilho { width: 50% } // Será 150px

Arquitetura cliente-servidor 279

 Calculando a porcentagem
Uma boa ferramenta para calcular ou traduzir pixels para porcentagem, é
usando uma regra de 3 simples.
Para cada elemento do container pai, o cálculo seria:
elemento filho * 100 / elemento pai = porcentagem

width:
width: 300px width: 700px
200px

Container pai width: 1200px

Arquitetura cliente-servidor 280

 Porcentagens
Então, se calcularmos cada elemento, ficaria assim:
300 * 100 / 1200 = 25%
700 * 100 / 1200 = 58.33%
200 * 100 / 1200 = 16.66%

width:
width: 25% width: 58,33%
16,66%

Container pai width: 1200px

Arquitetura cliente-servidor 281

 2 em e rem

Arquitetura cliente-servidor 282

 Como funcionam os ems
Os ems são sempre relativos ao elemento pai. Tomarão como valor de
referência a propriedade font-size.
O ponto de referência inicial é o valor do font-size do elemento <html>, que
por padrão é 16px. O resto dos elementos terão 1em de font-size, que
equivale ao mesmo valor que tenha o pai.
Se atribuirmos 1.5em ao font-size de qualquer elemento, o tamanho resultante
será o valor do pai multiplicado pelo valor em ems → 16px * 1.5 = 24px.

css p { font-size: 1.5em } // 16px * 1.5 = 24px

Arquitetura cliente-servidor 283

 Como funcionam os ems
Se utilizarmos ems em uma propriedade que não seja font-size, será usado
para o cálculo o font-size do elemento que estamos modificando.
Em geral, utilizamos este tipo de unidade para tudo que seja relacionado a
tipografia, embora também possamos aplicá-lo a outras propriedades, como
margin e padding, para que variem em função dos tamanhos das fontes.

p {
font-size: 20px;
css line-height: 2em; // 20px * 2 = 40px
padding: 1.5em; // 20px * 1.5 = 30px
}

Arquitetura cliente-servidor 284

 Calculando os ems dos elementos
Por padrão, o <html> terá 16px de font-size e os demais elementos 1em.
Sendo assim, todos os elementos do site terão 16px de font-size.

<html> → font-size: 16px

<body> → font-size: 1em → 16px
<div> → font-size: 1em → 16px
<p> → font-size: 1em → 16px
<strong>Olá!</strong> → font-size: 1em → 16px
</p>
</div>
</body>
</html>

Arquitetura cliente-servidor 285

 Calculando os ems dos elementos
Se mudarmos o font-size da <div> para 2em, este terá 2 vezes o tamanho do
font-size do seu pai.
Assim, a <div> e todos seus filhos terão 32px de font-size.

<html> → font-size: 16px

<body> → font-size: 1em → 16px
<div> → font-size: 2em → 16px * 2 → 32px
<p> → font-size: 1em → 32px
<strong>Olá!</strong> → font-size: 1em → 32px
</p>
</div>
</body>
</html>

Arquitetura cliente-servidor 286

 Calculando os ems dos elementos
Pensando nisso, se para a tag <p> for atribuída uma font-size de 1.5em, o
cálculo se fará com base no tamanho do seu pai, a <div>: 32px * 1.5 = 48px.
Novamente, todos os filhos de <p> herdarão esse tamanho de fonte.

<html> → font-size: 16px

<body> → font-size: 1em
<div> → font-size: 2em → 32px
<p> → font-size: 1.5em → 32px * 1.5 → 48px
<strong>Olá!</strong> → font-size: 1em → 48px
</p>
</div>
</body>
</html>

Arquitetura cliente-servidor 287

 Calculando os ems dos elementos
Se agora alterarmos o font-size do elemento <html> para 10px, todos os
elementos mudarão de tamanho, sem ter modificado diretamente seu
font-size.

<html> → font-size: 10px

<body> → font-size: 1em → 10px
<div> → font-size: 2em → 20px
<p> → font-size: 1.5em → 30px
<strong>Olá!</strong> → font-size: 1em → 30px
</p>
</div>
</body>
</html>

Arquitetura cliente-servidor 288

 Como funcionam os rems RECOMEND
ADO

Como você deve ter percebido, usar ems pode ser muito complicado.
Os rems funcionam de forma muito parecida aos ems, com a diferença de que
sempre tomarão como base o tamanho de font size do elemento <html>.
Isto quer dizer que o tamanho expressado em rems não modificará o font-size
dos elementos filhos, nem será afetado pela mudança do font-size do
elemento pai.
Em geral, é melhor usar rems ao invés de ems, já que conservamos as
vantagens de uma unidade relativa, enquanto evitamos fazer cálculos
complexos e ficar dependentes de como são afetados os elementos entre si.

css p { font-size: 1.5rem }

Arquitetura cliente-servidor 289

 Calculando os ems dos elementos
Levando em conta o que vimos antes, podemos atribuir diferentes valores aos
elementos sem que estes afetem outros. Todos os elementos terão como base
o tamanho do font-size do elemento <html>.

<html> → font-size: 16px

<body> → font-size: 2rem → 16px * 2 → 32px
<div> → font-size: 3rem → 16px * 3 → 48px
<p> → font-size: 1rem → 16px
<strong>Olá!</strong> → font-size: 0.5rem → 16px * 0.5 → 8px
</p>
</div>
</body>
</html>

Arquitetura cliente-servidor 290

 3 vw e vh

Arquitetura cliente-servidor 291

 Medidas de viewport
O viewport é o espaço visível que tem o navegador para mostrar o site.
Isto quer dizer que podemos utilizar medidas relativas a este espaço para
poder determinar o tamanho de certos elementos.

Viewport

Arquitetura cliente-servidor 292

 Viewport width e viewport height
vw, ou viewport width, é relativa à largura total do viewport.
vh, ou viewport height, é relativa à altura total do viewport.
Ambas as medidas são expressas como porcentagem do total, ou seja, 50vh
será equivalente a 50% da altura disponível no viewport.

div {
width: 25vw; // 25% da largura disponível
css
height: 50vh; // 50% da altura disponível
}

Arquitetura cliente-servidor 293

 Visualizando vh e vw
Qualquer medida expressa em viewport width (vw) ou viewport height (vh),
tomará sempre como referência o viewport do documento.

width: 25vw;
height: 50vh;

100vh
100vw

Arquitetura cliente-servidor 294

Media
queries
 1. Media queries
Índice
2. Estratégias de desenho

Arquitetura cliente-servidor 296

 1 Media queries

Arquitetura cliente-servidor 297

 Media queries
Um conjunto de regras CSS que permitem reorganizar o conteúdo dependendo
das condições de visualização do documento.
A maior parte dos nossos estilos estarão fora das media queries. Isso porque,
dentro de cada media query, nós escrevemos apenas aquilo que precisamos
ajustar para determinado tamanho de tela.
Elas devem ser sempre escritas no final da nossa folha do CSS.

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

Arquitetura cliente-servidor 298

 min-width
Ao especificar o min-width, estamos indicando que determinada regra só será
aplicada se o viewport tiver uma largura mínima de N pixels.
O mesmo que dizer → “Desta largura para cima”.

@media (min-width: 460px){

body {
css background: red;
}
}

Arquitetura cliente-servidor 299

 max-width
Ao especificar o max-width, estamos indicando que determinada regra só será
aplicada se o viewport tiver uma largura máxima de N pixels.
O mesmo que dizer → “Desta largura para baixo”.

@media (max-width: 768px){

body {
css background: yellow;
}
}

Arquitetura cliente-servidor 300

 Orientação
Ao especificar a orientação (retrato ou paisagem), estamos indicando que
determinada regra só será aplicada se houver uma largura máxima de N pixels
e o dispositivo estiver em posição vertical/horizontal.

@media (max-width: 460px) and (orientation: landscape){

body {
css background: blue;
}
}

Arquitetura cliente-servidor 301

 Estratégias
2 de desenho

Arquitetura cliente-servidor 302

 Mobile first RECOMEND
ADO

Quando utilizamos mobile first como estratégia de desenho, a ideia é

determinar de maneira geral as regras CSS para telas pequenas e, através das
media queries, declarar o comportamento que os elementos terão em
viewports maiores.

Arquitetura cliente-servidor 303

 Mobile first

body {
background: red;
}
@media (min-width: 460px){
css /* Tablets */
}
@media (min-width: 768px){
/* Laptop */
}

Arquitetura cliente-servidor 304

 Mobile last NÃO RECO
MENDADO

Quando utilizamos mobile last como estratégia de desenho, nós

determinamos de maneira geral as regras CSS para telas grandes e, através das
media queries, declaramos o comportamento que os elementos terão em
viewports menores.

Arquitetura cliente-servidor 305

 Mobile last

body {
background: red;
}
@media (max-width: 768px){
css /* Tablets */
}
@media (max-width: 460px){
/* Smartphones */
}

Arquitetura cliente-servidor 306

 Breakpoints
Chamamos de breakpoints os pontos de quebra a cada salto de tamanho sobre
o qual aplicamos uma media query. Não existe uma regra fixa sobre qual usar,
mas vamos deixar aqui exemplos dos mais utilizados:

Arquitetura cliente-servidor 307

Posicionamento
com Flexbox
O que vamos ver hoje

● Propriedades principais do Flexbox

● Atividade com figma e flexbox
Flexbox - Propriedades principais

flex-direction: row | row-reverse | column | column-reverse

flex-wrap: nowrap | wrap | wrap-reverse

justify-content: flex-start | flex-end | center | space-between | space-around

align-items: flex-start | flex-end | center | baseline | stretch

Atividade - Shoes Store

● Utilize tags semânticas (nav, section, article)

● Posicione os elementos com flexbox
Para ir além

➔ Flexbox froggy
https://flexboxfroggy.com/#pt-br

➔ MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/HTML
Estrutura
básica de
Flexbox
 Flexbox propõe uma estrutura
baseada na utilização de um
container pai (Flex-container)
e seus elementos filhos
(Flex-items).

Estrutura básica de Flexbox 314

314
 Trabalhando com Flexbox
Para começar a trabalhar com Flexbox, teremos que definir um flex-container.
Para isso, usamos a propriedade display com o valor flex.
Desta forma, estamos habilitando um container flex para trabalhar com os
filhos diretos do elemento.
A propriedade display também pode receber o valor inline-flex.

.container-pai {
css display: flex;
}

Estrutura básica de Flexbox 315

315
 Estrutura básica
Quando falamos de um flex-container, estamos falando de um elemento
HTML que contém um ou mais elementos. Chamamos esses elementos
aninhados de flex-items.
É no flex-container que definimos a maior parte das propriedades flex.

flex-container

flex-items

Estrutura básica de Flexbox 316

316
 flex-wrap
Por padrão, os elementos filhos de um container flex tentarão entrar na
mesma linha.

Para deixar claro ao container que ele deve respeitar a largura definida de
seus filhos, usamos a propriedade flex-wrap com o valor wrap.

Estrutura básica de Flexbox 317

317
 flex-wrap
A propriedade flex-wrap com o valor wrap permitirá que os itens fiquem da
largura definida, e os que entrarem na linha vão para a linha seguinte.

flex-wrap também pode receber os valores nowrap e wrap-reverse.

.container-pai {
display: flex;
css
flex-wrap: wrap;
}

Estrutura básica de Flexbox 318

318
 flex-items
Um flex-item, por sua vez, pode se converter em um flex-container.
Para isso, só precisamos atribuir a regra display:flex para que assim seus
elementos filhos passem a ser flex-items.

.elemento-filho {
css display: flex;
}

Estrutura básica de Flexbox 319

319
Os eixos
 1. Eixos em Flexbox
2. flex-direction
Índice 3. justify-content
4. align-items

Estrutura básica de Flexbox 321

321
 Eixos em
1 Flexbox

Os eixos 322
 O Flexbox trabalha com dois eixos para
desenvolver todo o seu fluxo interno:
o eixo X e o eixo Y.
Conforme decidirmos ordenar os
elementos, chamaremos um de main
axis e o outro de cross axis.

Os eixos 323
323
 Eixos em Flexbox
Quando trabalhamos em fluxo flex, falamos do eixo principal (main axis) e do
eixo transversal (cross axis). O conceito de trabalho do flexbox é baseado em
uma única direção, ou seja, os elementos são distribuídos em linhas
horizontais ou em colunas verticais.
Ao definirmos o eixo principal do nosso flex container, determinamos o fluxo
que os elementos terão dentro do container. Eles serão ordenados com base
no eixo que definimos.

1
cross axis

main axis
1 2 2
main axis cross axis

Os eixos 324
324
 2 flex-direction

Os eixos 325
 flex-direction
Com esta propriedade, definimos o main axis do container (eixo principal), que
pode ser tanto horizontal como vertical. O cross axis (eixo transversal), será a
direção perpendicular ao main axis.

1 2 3 1 3

2 2
3 2 1 3 1

Os eixos 326
326
 flex-direction: row
Os itens se dispõem no eixo x, da esquerda para a direita.
Se não declararmos a propriedade de direcionamento flex-direction para o
container, o valor padrão será row.

cross axis 1 2 3

flex-start main axis flex-end

Os eixos 327
327
 flex-direction: row-reverse
Os itens se dispõem no eixo x, da direita para a esquerda.

cross axis 3 2 1

flex-end main axis flex-start

Os eixos 328
328
 flex-direction: column
Os itens se dispõem no eixo y, de cima para baixo.

flex-end main axis flex-start

1
2
3

cross axis
Os eixos 329
329
 flex-direction: column-reverse
Os itens estão dispostos no eixo y, de baixo para cima.

main axis flex-end

3
2
1
flex-start

cross axis

Os eixos 330
330
 Flexbox nos dá duas propriedades para
alinhar facilmente os elementos:
Através do main axis com justify-content.
Através do cross axis com align-items.

Os eixos 331
331
 3 justify-content

Os eixos 332
 justify-content
Com esta propriedade, alinhamos os itens ao longo do main axis.
Se é horizontal, eles serão alinhados em função da linha.
Se for vertical, eles serão alinhados de acordo com a coluna.

flex-start

flex-end
Os eixos 333
333
 justify-content: flex-start
Os itens ficam alinhados com o início do main axis que definimos.
Se não declararmos o justify-content ao container, o valor padrão será
flex-start.

flex-start

flex-end
1 2 3

Os eixos 334
334
 justify-content: flex-end
Os itens ficam alinhados com o final do main axis que definimos.

flex-start

flex-end
1 2 3

Os eixos 335
335
 justify-content: center
Os itens ficam alinhados ao centro do main axis.

flex-start

flex-end
1 2 3

Os eixos 336
336
 justify-content: space-between
Os itens se distribuem de maneira uniforme dentro do container.
O primeiro item será enviado ao início do main axis e o último item ao final.
O espaço livre se dividirá igualmente para separar os itens.

flex-start

flex-end
1 2 3

Os eixos 337
337
 justify-content: space-around
Os itens se distribuem de maneira uniforme dentro do container.
O espaço livre disponível será dividido igualmente entre todos os elementos.
O primeiro item terá uma unidade de espaço entre a borda do container, e duas
unidades de espaço entre o seguinte item, isso é, seu próprio espaço somado ao
espaço do sucessor. O mesmo acontece com o último item.

flex-start

flex-end
1 2 3

Os eixos 338
338
 4 align-items

Os eixos 339
 align-items
Com esta propriedade, alinhamos os itens ao longo do cross axis.
Se não declararmos essa propriedade, o valor padrão é stretch.

flex-start
cross axis

flex-end

Os eixos 340
340
 align-items: stretch
Os itens se ajustam para cobrir todo o container.
Se o eixo transversal for vertical, eles são ajustados de acordo com a coluna.
Se o eixo transversal for horizontal, eles são ajustados de acordo com a linha.

flex-start
cross axis

1 2 3

flex-end

Os eixos 341
341
 align-items: flex-start
Os itens ficam alinhados ao início do cross-axis.

flex-start

cross axis 1 2 3

flex-end

Os eixos 342
342
 align-items: flex-end
Os itens ficam alinhados ao final do cross-axis.

flex-start

cross axis

1 2 3
flex-end

Os eixos 343
343
 align-items: center
Os itens ficam alinhados ao centro do cross-axis.

flex-start

cross axis

1 2 3

flex-end

Os eixos 344
344
Os itens em
Flexbox
 Flexbox nos dá a possibilidade de
aplicar propriedades diretamente a
cada item para poder manipulá-las
separadamente e ter mais controle.

Estrutura básica de Flexbox 346

346
 1. order
Índice 2. flex-grow
3. align-self

Os itens em Flexbox 347

347
 1 order

Os itens em Flexbox 348

348
 order
Com essa propriedade, controlamos a ordem de cada item, independente da
ordem original que eles tenham na estrutura HTML.
Essa propriedade recebe como valor um número inteiro, positivo ou
negativo.

.caixa {
css order: 1;
}

Estrutura básica de Flexbox 349

349
 order: número positivo
Se atribuirmos à caixa Q (que possui a classe caixa-q) a propriedade order
com valor 1, ela passará ao final da fila por ser o número mais alto.
Por padrão, o valor da ordem de cada item é 0.

.caixa-q {
css order: 1;
}

Q M D M D Q
order: 1

Estrutura básica de Flexbox 350

350
 order: número negativo
Se agora atribuirmos à caixa D, a propriedade order com valor -1, ela passará
ao início da fila, colocando o item com a menor ordem primeiro.

.caixa-d {
css order: -1;
}

M D Q D M Q
order: -1

Estrutura básica de Flexbox 351

351
 As caixas serão ordenadas
respeitando a sequência
dos números negativos para
os positivos.

Estrutura básica de Flexbox 352

352
 2 flex-grow

Os itens em Flexbox 353

353
 flex-grow
Com essa propriedade, definimos quanto um item pode crescer se houver
espaço livre no container.
Configura um crescimento flexível para o item.

flex-grow

Estrutura básica de Flexbox 354

354
 flex-grow
Se ambos os itens tiverem a propriedade flex-grow com valor 1, à medida que
o container for ampliado, eles cobrirão o espaço disponível em partes iguais.

.caixa-a, .caixa-b {
css flex-grow: 1;
}

A B A B

Estrutura básica de Flexbox 355

355
 flex-grow
Se um único item tiver a propriedade flex-grow, ele tentará ocupar o espaço
livre disponível à medida que o container for aumentado, de acordo com a
proporção que definimos com o valor.

.caixa-b {
css flex-grow: 1;
}

A B A B

Estrutura básica de Flexbox 356

356
 flex-grow
O número que atribuímos ao flex-grow determina quanto espaço disponível
no container flexível esse item deve ocupar.
1 equivale a 100% do espaço disponível e 0 equivale a 0%.
Podemos usar qualquer valor entre esses dois, como 0.25 para 25%.

flex-grow

0 0 0.75 0 0.25

Estrutura básica de Flexbox 357

357
 3 align-self

Os itens em Flexbox 358

358
 align-self
Nos permite alinhar, sobre o cross axis, cada item ao qual aplicamos essa
propriedade, independentemente do alinhamento que foi definido no
container flex com align-items.

flex-start

flex-end

Estrutura básica de Flexbox 359

359
 align-self: flex-end
Com flex-end, o item fica alinhado ao final do cross axis.

.container-pai {
align-items: flex-start;
}
css .caixa-dois {
align-self: flex-end;
}

flex-start

1 3
2
flex-end
Estrutura básica de Flexbox 360
360
 align-self: center
Com center, o item fica alinhado ao centro do cross axis.

.container-pai {
align-items: flex-start;
}
css .caixa-dois {
align-self: center;
}

flex-start

1 3
center
2
flex-end
Estrutura básica de Flexbox 361
361
 align-self: flex-start
Com flex-start, o item fica alinhado ao início do cross axis.

.container-pai {
align-items: flex-end;
}
css .caixa-dois {
align-self: flex-start;
}

flex-start

2
1 3
flex-end
Estrutura básica de Flexbox 362
362
 align-self: stretch
Com stretch, o item se ajusta até cobrir todo o cross axis, desde que não
tenha uma altura definida e o container pai tenha a regra flex-wrap: wrap.

.caixa-um, .caixa-tres {
align-self: flex-start;
}
css .caixa-dois {
align-self: stretch;
}

flex-start

1 3
2
flex-end

Estrutura básica de Flexbox 363

363
 Essas propriedades serão aplicadas
aos flex-items sempre e quando o
container pai for um flex-container.

Estrutura básica de Flexbox 364

364
Formulários
O que vamos ver hoje

● Validação - Campos obrigatórios

● Inspecionar dados enviados (POST)
Formulário - Campos obrigatórios

Para indicar que um campo tem preenchimento obrigatório basta adicionar o

atributo required no input. Não precisa atribuir valor.

<input type="text" name="nome" required>

Formulário - Campos obrigatórios

A validação é feita quando o usuário tenta enviar o formulário.

Caso o campo obrigatório esteja vazio, aparece um aviso para o usuário preencher antes do envio.
Atividade - Shoes Store

● Crie o formulário da página Trabalhe

Conosco com método POST.
● Campos obrigatórios:
○ Nome
○ Email
○ Telefone
○ Departamento
● Inspecione a página e envie o formulário
para ver os dados enviados.
Para ir além

➔ Mais sobre formulário HTML

https://developer.mozilla.org/pt-BR/docs/Learn/Forms/How_to_structure_a_web_form

➔ Validação de campos
https://developer.mozilla.org/pt-BR/docs/Learn/Forms/Form_validation
Formulários
HTML
 1. O que é um formulário?
Índice
2. Elementos do formulário

Formulários HTML 372

372
 O que é um
1 formulário?

Formulários HTML 373

373
 Os formulários são elementos do
HTML que nos permitem pedir
dados ao usuário para, então,
podermos validar e processar.

Os eixos 374
374
 Como funcionam
Para que um formulário funcione corretamente, são necessárias as 3 instâncias
a seguir:

CAPTURAR VALIDAR PROCESSAR

HTML JS + Node.js Node.js

Os eixos 375
375
 Como funcionam
Na aula de hoje, nos preocupamos com a parte de HTML, ou seja, com a
aparência correta do formulário e a captura da informação.
Mais adiante, veremos como validar e processar a informação.

CAPTURAR VALIDAR PROCESSAR

HTML JS + Node Node

Os eixos 376
376
 Elementos do
2 formulário

Formulários HTML 377

377
 A tag <form>
É a tag mais importante. Sem isso, o formulário não funciona.
Todos os componentes que queremos incluir estão entre estas duas tags:
<form> e </form>.

<form action="/registro" method="POST">

html <!-- Aqui vão os campos do formulário -->
</form>

Os eixos 378
378
 Os atributos de <form>
Essa tag possui dois atributos: action e method.
Cada um cumpre um objetivo particular:

● action define a rota em que será processada a informação capturada.

● method define como a informação será enviada. Na versão atual do HTML,
há apenas dois valores possíveis: GET e POST.

<form action="/registro" method="POST">

html <!-- Aqui vão os campos do formulário -->
</form>

Os eixos 379
379
 O elemento <input>
É um elemento multifuncional. Alterando o valor do atributo type, podemos
obter diferentes tipos de campos.
O atributo name identifica o campo e o diferencia dos demais campos.
É importante saber que os elementos que não têm name não serão enviados.

<form action="/registro" method="POST">

<input type="text" name="usuario">
<input type="password" name="senha">
html <input type="email" name="email">
<input type="tel" name="telefone">
<input type="number" name="idade">
</form>

Os eixos 380
380
 O elemento <label>
Serve para associar um texto descritivo a um determinado campo.

for conteúdo
Associa o label com um campo Contém o texto que será exibido e indica as
através da sua propriedade id. informações que o usuário deve preencher no campo.

<label for="nome">Nome:</label>
html
<input type="text" name="nome" id="nome">

id do campo
Para que o label seja associado, o campo que queremos associar
deve possuir um id com o mesmo valor usado no for do label.

Os eixos 381
381
 O elemento <label>
Em geral, cada campo ou grupo de campos terá seu label associado.
Quando o usuário clicar no label, será ativado automaticamente o campo ao
qual ele corresponde.

<form action="/registro" method="POST">

<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">

html <label for="email">E-mail:</label>

<input type="email" name="email" id="email">

<label for="telefone">Telefone:</label>
<input type="tel" name="telefone" id="telefone">
</form>

Os eixos 382
382
Radio
buttons e
checkboxes
 1. Radio buttons
Índice
2. Checkboxes

Radio buttons e checkboxes 384

384
 1 Radio buttons

Radio buttons e checkboxes 385

385
 Type radio
Representa uma opção 🔘 que pode ser selecionada com um clique.
Para criar um elemento do tipo radio, usamos um input cujo atributo type
tenha valor radio.
Podemos agrupar vários elementos do tipo radio, sendo que o usuário poderá
escolher apenas uma opção dentre eles. Para agrupá-los, declaramos o mesmo
valor para o atributo name em todos os elementos.

<input type="radio" name="tipo-pagamento" value="Dinheiro">

html <input type="radio" name="tipo-pagamento" value="Débito">
<input type="radio" name="tipo-pagamento" value="Crédito">

Os eixos 386
386
 Propriedades e valores
type value
Cria um botão do tipo radio. Aqui vai a informação que será enviada caso
o usuário selecione esse radio-button.

<input type="radio" name="tipo-pagamento" value="Dinheiro">

html
<input type="radio" name="tipo-pagamento" value="Débito" checked>

name checked
Para que o usuário possa selecionar somente uma É opcional, faz com que o radio-button
opção, temos que atribuir o mesmo nome a todos os apareça pré-selecionado.
inputs do tipo radio que sejam do mesmo grupo.

Os eixos 387
387
 Como vemos no navegador
Os inputs do tipo radio ficarão visíveis dessa forma:

Escolha o método de pagamento:

Dinheiro
Débito
Crédito

Os eixos 388
388
 2 Checkboxes

Radio buttons e checkboxes 389

389
 Type checkbox
Representa uma opção ⏹ que ao clicarmos será selecionada, e se clicarmos
novamente, a seleção será anulada.
Para criar um elemento do tipo checkbox, usamos um input cujo atributo
type tenha valor checkbox.
Podemos agrupar elementos do tipo checkbox e, nesse caso, o usuário poderá
selecionar mais de uma opção. Para agrupá-los, todos os elementos devem ter
o mesmo valor no atributo name.

<input type="checkbox" name="hobbies" value="Música">

html <input type="checkbox" name="hobbies" value="Pintura">
<input type="checkbox" name="hobbies" value="Jogos">

Os eixos 390
390
 Propriedades e valores
type value
Cria um botão do tipo checkbox. Aqui vai a informação que será enviada
caso o usuário selecione esse checkbox.

<input type="checkbox" name="hobbies" value="Pintura">

html
<input type="checkbox" name="hobbies" value="Jogos" checked>

name checked
Para que o usuário possa selecionar mais de uma É opcional, faz com que o
opção, temos que atribuir o mesmo nome a todos os checkbox apareça pré-selecionado.
inputs do tipo checkbox que sejam do mesmo grupo.

Os eixos 391
391
 Outra maneira de usar
O checkbox pode ser útil para coletar informações que respondem a
perguntas simples do tipo sim/não ou verdadeiro/falso.
Nesse caso, não é necessário atribuir um valor, já que, se a opção for
selecionada, será enviado o valor “on”.

<label for="termos">Aceito os termos.</label>

html
<input type="checkbox" name="termos">

<label for="newsletter">Quero assinar a newsletter!</label>

html
<input type="checkbox" name="newsletter">

Os eixos 392
392
 Como vemos no navegador
Os inputs do tipo checkbox ficarão visíveis dessa forma:

Quais são seus hobbies?

Música
Pintura
Jogos

Os eixos 393
393
Formulários
avançados
 O elemento <textarea>
Os campos anteriores, especialmente os de texto, são pensados para receber
pouca informação, geralmente, apenas uma linha. Já o textarea nos permite
escrever textos maiores, com várias linhas.

Diferente do input, o textarea tem tag de abertura e de fechamento.

<form action="/contact" method="POST">

<label for="comentario">Deixe seu comentário:</label>
html
<textarea name="comentario" id="comentario">Conteúdo</textarea>
</form>

Formulários Avançados 395

395
 O elemento <select>
Esse elemento nos permite adicionar um componente que mostra opções.
Como o resto dos campos, deve conter o parâmetro name para ser enviado.

<form action="/colors" method="GET">

<label>Selecione uma cor:</label>
<select name="color">
<option value="red">Vermelho</option>
html <option value="green">Verde</option>
<option value="blue">Azul</option>
<option value="yellow">Amarelo</option>
</select>
</form>

Formulários Avançados 396

396
 O elemento <option>
As opções de um select são representadas por elementos option.
Os elementos option têm tag de abertura e fechamento.
value selected
É o valor que será enviado É opcional e se encarrega de deixar a opção
pelo formulário. pré-selecionada ao usuário.

<option value="red" selected>Vermelho</option>

html
<option value="green">Verde</option>

Conteúdo da opção
É o que o usuário verá ao abrir o select.

Formulários Avançados 397

397
 O elemento <button>
Nos permite criar um botão. Usamos a propriedade type para definirmos o tipo:
● Um botão do tipo reset reinicia o formulário, voltando ao seu estado inicial.
● Um botão do tipo submit faz o envio do formulário.
● Um botão do tipo button, por padrão não realiza nenhuma ação. Mas
podemos adicionar alguma com ajuda do JavaScript.
<form action="" method="">
<label for="usuario">Usuário:</label>
<input type="text" name="usuario">
html
<button type="reset">Cancelar</button>
<button type="submit">Enviar</button>
</form>

Formulários Avançados 398

398
 Exemplo

<form action="/login" method="POST">

<p>
<label>Nome:</label>
<input type="text" name="usuario">
</p>
<p> Nome:
html <label>E-mail:</label>
<input type="email" name="email"> E-mail:
</p>
<p>
<button type="submit">Enviar</button>
Enviar
</p>
</form>

Formulários Avançados 399

399
 O input de data
Nos permite entrar com uma data incluindo ano, mês e dia.
Para criar um elemento do tipo date, usamos um input cujo atributo type
tenha valor date.
Dentro dos atributos do elemento, a data sempre é formatada como
aaaa-mm-dd, por exemplo 2021-02-14. Por fora, ela terá o formato que
corresponde ao idioma do usuário.

html <input type="date" name="data">

Formulários Avançados 400

400
 Propriedades e valores
min
type É opcional. Nos permite definir a data
Cria um input do tipo date. mínima que pode ser escolhida.

html <input type="date" name="fecha" value="2021-07-22" min="2018-01-01" max="2022-12-31">

value max
Se precisamos mostrar uma data É opcional. Nos permite definir
padrão, usamos o atributo value. a data máxima que pode
ser escolhida.

Formulários Avançados 401

401
 Como vemos no navegador
Os inputs do tipo date serão vistos de maneira diferente em cada navegador,
mas o aspecto geral será parecido com o seguinte:

Data de aniversário: mm / dd / aaaa

Formulários Avançados 402

402
 O input de arquivos
Nos permite fazer upload de um ou mais arquivos do computador.
Para criar um elemento do tipo file, usamos um input cujo atributo type tenha
valor file.

<label>Selecionar uma imagem de perfil:</label>

html
<input type="file" name="avatar" accept=".jpg" multiple>

Formulários Avançados 403

403
 Propriedades e valores
accept
type Nos permite definir que tipo
Cria um input do tipo file. de arquivos serão aceitos.

html <input type="file" name="avatar" accept=".jpg" multiple>

multiple
Por padrão, permite carregar somente um arquivo.
Se quisermos aceitar mais de um, usamos multiple.

Formulários Avançados 404

404
 Como vemos no navegador
Os inputs do tipo file serão exibidos da seguinte maneira:

Selecionar uma imagem de perfil:

Escolher arquivo Nenhum arquivo escolhido

Formulários Avançados 405

405
 Para continuar aprendendo
Os inputs são um dos elementos mais versáteis do HTML, e existem muitas
variáveis além das que iremos ver no curso.

Recomendamos que você siga estudando sobre

os inputs e seus atributos por aqui: <input>

Formulários Avançados 406

406
 Pseudo
seletores
 1. Pseudo seletores
Índice 2. Pseudo classes
3. Pseudo elementos

Pseudo seletores 408

408
 1 Pseudo seletores

Pseudo seletores 409

409
 Os pseudo seletores nos permitem
controlar eventos especiais de um
elemento. Geralmente, são aplicados
sobre um seletor já existente.

Os eixos 410
410
 Pseudo seletores
Estão divididos em dois grandes grupos:

As pseudo classes, que nos permitem aplicar estilos em função:

● dos estados dos elementos;
● da localização dentro da estrutura do HTML;
● da presença de certos atributos de HTML.

Os pseudo elementos, que nos permitem criar elementos a partir do CSS sem
ter que modificar a estrutura do HTML.

Os eixos 411
411
 2 Pseudo classes

Pseudo seletores 412

412
 Pseudo classes
As pseudo classes são aplicadas aos seletores que já conhecemos.
Normalmente, escrevemos o nome do seletor primeiro, seguido de dois pontos
: e a pseudo classe que queremos utilizar.
Algumas pseudo classes podem ser aplicadas a qualquer elemento HTML, mas
existem outras que só se aplicam em elementos específicos.

seletor:pseudo-classe {
css propriedade: valor;
}

Os eixos 413
413
 Pseudo classes dos links
Os links são um dos elementos que possuem pseudo classes específicas.
Neste caso, são elas :link , :visited, :hover e :active

a:link,
a:visited {
color: rgb(98, 8, 194);
font-weight: bold;
}
css
a:hover,
a:active {
color:rgb(136, 11, 74);
}

Os eixos 414
414
 Pseudo classe :link
É utilizada para aplicar estilo aos links <a></a> que tenham a propriedade href.
Os estilos definidos pela pseudo classe :link serão anulados por qualquer
pseudo classe posterior relacionada com o link (:visited, :hover ou :active)
que tenha ao menos a mesma especificidade.

a:link {
background-color: rgb(234, 0, 255);
css border-color: rgb(161, 17, 89);
color: red;
}

Os eixos 415
415
 Pseudo classe :visited
É utilizada para aplicar estilo aos links <a></a> que tenham sido visitados
ao menos uma vez pelo usuário.
Seus estilos também poderão ser anulados pelos demais pseudo seletores de
links.

a:visited {
background-color: rgb(234, 0, 255);
css border-color: rgb(161, 17, 89);
color: red;
}

Os eixos 416
416
 Pseudo classe :hover
Apesar deste pseudo seletor estar relacionado com os links, ele pode ser
aplicado a qualquer outro elemento de HTML.

É utilizado para aplicar estilo a qualquer elemento quando o usuário

posicionar o cursor do mouse sobre ele.
Quando aplicado a um link, seus estilos também poderão ser anulados pelos
demais pseudo seletores de links.

a:hover {
css background-color: gold;
}

Os eixos 417
417
 Pseudo classe :active
É utilizado para aplicar estilo aos links <a></a> que estão sendo clicados
pelo usuário. Normalmente, utilizamos para fazer a animação do click.
Seus estilos também poderão ser anulados pelos demais pseudo seletores
de links.

a:active {
background-color: rgb(234, 0, 255);
css border-color: rgb(161, 17, 89);
color: red;
}

Os eixos 418
418
 Pseudo classes dos inputs
Os inputs também são elementos que possuem pseudo classes específicos.
Neste caso, elas são :focus , :enabled, :disabled e :target

input:focus { border-color: orange; }

css input:disabled { background-color: gray; }

:target { font-weight: bold; }

Os eixos 419
419
 Pseudo classe :focus
É aplicado quando um elemento tem o foco do cursor, ou seja, quando o
cursor se encontra dentro do elemento em questão.
O caso mais normal é quando o usuário está completando um campo de
um formulário.

input:focus {
color: orange;
css
font-weight: bold;
}

Os eixos 420
420
 Pseudo classe :disabled
É aplicado quando um elemento está desabilitado, ou seja, quando possui a
propriedade disabled.
Normalmente, é utilizado para dar estilos aos campos que não se podem
completar em um formulário ou a opções que estão desativadas.

input:disabled {
css background-color: gray;
}

Os eixos 421
421
 Para continuar aprendendo
Existem muitos outros pseudo seletores com possibilidades diversas na hora
de definir estilos.

Recomendamos esse material para você

continuar estudando pseudo classes:
índice de pseudo classes

Os eixos 422
422
 3 Pseudo elementos

Pseudo seletores 423

423
 Pseudo elementos
Os pseudo elementos também são usados juntos aos seletores de CSS.
Para usá-los, escrevemos o nome do seletor primeiro, seguido duas vezes de
dois pontos :: e o pseudo elemento que queremos utilizar.
Os mais utilizados são ::before e ::after, mas existem muitos outros como
::first-letter e ::first-line.

seletor::pseudo-elemento {
css propriedade: valor;
}

Os eixos 424
424
 Pseudo elemento ::before
É utilizado junto com a propriedade content para introduzir conteúdo no
documento HTML usando o CSS.
Esse novo conteúdo aparecerá antes do conteúdo interno do elemento.

div::before {
content: "Isso será renderizado antes do elemento";
css
color: red;
}

Os eixos 425
425
 Pseudo elemento ::after
É utilizado junto com a propriedade content para introduzir conteúdo no
documento HTML usando o CSS.
Esse novo conteúdo aparecerá depois do conteúdo interno do elemento.

div::after {
content: "Isso será renderizado depois do elemento";
css
color: red;
}

Os eixos 426
426
 Como fica no navegador?
Por padrão, ::before e ::after são elementos de linha, então eles aparecerão
antes ou depois do conteúdo existente. No entanto, nós podemos
transformá-los em elementos de bloco e manipulá-los de outra maneira.

div::before {
content: "Aparece no começo.";
color: red;
} Aparece no começo.
css Esse é o texto que
div::after { está dentro da div.
content: "Aparece no final.";
Aparece no final.
color: blue;
}

Formulários Avançados 427

427
 Sintaxe geral
Levando em conta tudo o que aprendemos sobre seletores e pseudo seletores,
a ordem para escrever uma regra de CSS é a seguinte:

seletor #id .class :pseudoclasse ::pseudoelemento [atributo] {

propriedade: valor;
css propriedade: valor;
propriedade: valor;
}

Os eixos 428
428
Organizando
e animando
elementos
 Posicionamento relativo

.caixa-1 {
position: relative;
css left: 100px;
top: 50px;
}

Arquitetura cliente-servidor 430

 Posicionamento absoluto

.caixa-2 {
position: absolute;
css right: 100px;
bottom: 50px;
}

Arquitetura cliente-servidor 431

 Posicionamento Fixo

.buttonFucsia {
position: fixed;
css right: 50px;
bottom: 50px;
}

Arquitetura cliente-servidor 432

 Exemplo de z-index

1 .caixa-1 { … }
.caixa-2 {
2 css position: relative;
z-index: 10;
}

Arquitetura cliente-servidor 433

 Exemplo de transição

button {
background-color: #eaeaea;
color: #000;
css transition-property:
background-color, color; Sem transiction Com transiction

transition-duration: 0.5s;
}

Arquitetura cliente-servidor 434

 Animação: aa forma longa

@keyframes fantasma {
0% { opacity: 0% }
css 25% { transform: translateY(-20px); opacity: 100% }
100% { opacity: 0% }
}

Arquitetura cliente-servidor 435

 Animação: a forma abreviada

.fantasma {
css animation: fantasma 3s infinite;
}

Arquitetura cliente-servidor 436

Posicionamento
 1. Posicionamento relativo
Índice 2. Posicionamento absoluto
3. Posicionamento fixo

Arquitetura cliente-servidor 438

 Mover elementos
O posicionamento nos permite mover um elemento a partir de sua posição
original para uma nova posição.
Também nos permite sobrepor elementos.

Arquitetura cliente-servidor 439

 Pontos de referência
Cada um dos elementos da nossa página web tem quatro pontos de referência,
e esses são seus lados: superior, direito, inferior e esquerdo. No CSS, serão
top, right, bottom e left.

Arquitetura cliente-servidor 440

 Pontos de referência
Quando movemos um elemento tomando um lado como referência,
empurramos o elemento se o número é positivo ou puxamos ele se o
número é negativo.

Arquitetura cliente-servidor 441

 Posicionamento
1 relativo

Arquitetura cliente-servidor 442

 “ O posicionamento relativo nos
permite mover um elemento a
partir da sua posição original para
uma nova posição.

”
Arquitetura cliente-servidor 443
 Posicionamento relativo
Quando movemos uma caixa, o ponto de referência será seu próprio lado. Ao
posicionar a caixa 1 de maneira relativa, o espaço que ocupava
originalmente seguirá ocupado. Isto quer dizer que os elementos que
estejam ao seu lado (caixa 2) não vão ser afetados por esta modificação.

.caixa-1 {
position: relative;
css left: 100px;
top: 50px;
}

Arquitetura cliente-servidor 444

 Quando usamos?
Normalmente, usamos o posicionamento relativo quando queremos mover
um elemento sem modificar o fluxo original dos demais que estão ao
seu redor.

Arquitetura cliente-servidor 445

 Posicionamento
2 absoluto

Arquitetura cliente-servidor 446

 “ O posicionamento absoluto nos
permite mover um elemento
tomando como referência os

”
lados do body.

Arquitetura cliente-servidor 447

 Posicionamento absoluto
Com o posicionamento absoluto, os pontos de referência serão os lados do
body. Quando movemos uma caixa de maneira absoluta, o espaço que
ocupava ficará vazio e outros elementos poderão ocupá-lo.

.caixa-2 {
position: absolute;
css right: 100px;
bottom: 50px;
}

Arquitetura cliente-servidor 448

 Position relative + Position absolute
Se nossas caixas (filhas) estão dentro de outra caixa (pai), o ponto de referência
seguirá sendo o body, a menos que tornemos relativa a posição de seu pai.

div { position: relative }

.caixa-2 {
css position: absolute;
right: 100px;
top: 50px;
}

Arquitetura cliente-servidor 449

 Quando usamos?
Quando queremos tirar um elemento do fluxo normal e posicioná-lo em um
ponto fixo em relação ao container pai ou ao body.

Arquitetura cliente-servidor 450

 3 Posicionamento fixo

Arquitetura cliente-servidor 451

 “ O posicionamento fixo nos
permite mover um elemento
tomando como referência a

”
janela do navegador.

Arquitetura cliente-servidor 452

 Posicionamento Fixo
Com o posicionamento fixo, os pontos de referência serão os lados da janela
do navegador. Não importa o quanto a página é rolada para cima ou para
baixo, o elemento sempre se manterá fixo em relação à janela do navegador.

.botaoFucsia {
position: fixed;
css right: 50px;
bottom: 50px;
}

Arquitetura cliente-servidor 453

 Quando usamos?
Quando queremos que um elemento siga o usuário à medida que este navega
pelo site. Por exemplo, um botão fixo para ter sempre disponível a opção de
criar um novo produto.

.criarProduto {
position: fixed;
css right: 50px;
bottom: 50px;
}

Arquitetura cliente-servidor 454

z-index
 “ O z-index nos permite
alterar a ordem das
“camadas” dentro de

”
um documento HTML.

Arquitetura cliente-servidor 456

 z-index
Essa propriedade controla como empilhar as camadas em CSS.
Podemos considerar que cada elemento está em uma camada diferente e que
essas camadas seguem a ordem em que aparecem os elementos no HTML.

1
<div class="caixa-1">1</div>
2 html <div class="caixa-2">2</div>
<div class="caixa-3">3</div>
3

Arquitetura cliente-servidor 457

 Exemplo de z-index

Só podemos modificar o z-index dos

elementos que tenham posicionamento:
1 relative, absolute ou fixed.

2
.caixa-1 {
css position: relative;
}
3

Arquitetura cliente-servidor 458

 Exemplo de z-index

Qualquer elemento ao qual atribuimos

position relative, absolute ou fixed, será
exibido por cima dos demais e terá um
1 valor de z-index igual a 0.

2 .caixa-1 {
position: relative;
css left: 100px;
top: 50px;
3
}

Arquitetura cliente-servidor 459

 Exemplo de z-index

Se adicionarmos a propriedade z-index à

segunda caixa com valor 10, ela ficará à
frente das demais caixas, já que agora tem
1 o maior valor.

.caixa-1 { … }
2
.caixa-2 {
css
position: relative;
3 z-index: 10;
}

Arquitetura cliente-servidor 460

Transiçõ
es
 Transições
Ao criar transições, podemos modificar o valor de uma propriedade de maneira
gradual. Para isso, precisamos de algumas coisas: uma propriedade com um
valor inicial, uma interação pelo qual este valor será modificado e o novo valor
que executará esta propriedade.

Arquitetura cliente-servidor 462

 Valor inicial
Primeiro, vamos ter que determinar qual é o elemento que queremos
manipular e a que propriedade queremos agregar um efeito. Por exemplo, a
cor de fundo e a cor do texto.

button {
background-color: #eaeaea;
css
color: #000
}

Arquitetura cliente-servidor 463

 Interação
Também precisaremos determinar sob que interação este elemento vai mudar
o valor de sua propriedade. Neste caso, vamos fazê-lo quando colocamos o
cursor sobre o elemento com a pseudo-classe :hover.

button:hover {
background-color: #1a73e8;
css
color: #fff
}

Arquitetura cliente-servidor 464

 Valores de transição
Por último, voltamos ao seletor do elemento. Aqui, adicionamos algo
importante: o valor da propriedade transition. Os valores que podemos
utilizar para as transições são vários.
transition-property
Para definir os nomes das propriedades CSS onde o efeito de transição deve
ser aplicado. Podemos incluir várias, separadas por vírgulas.
transition-duration
Para estabelecer o tempo que deve durar a transição. Por padrão, o valor é de
0s (0 segundos) ou 0ms (0 milissegundos). Isso quer dizer que não terá
nenhuma animação.

Arquitetura cliente-servidor 465

 Valores de transição

button {
background-color: #eaeaea;
color: #000;
css
transition-property: background-color, color;
transition-duration: 0.5s;
}

Arquitetura cliente-servidor 466

 Propriedade reduzida
Existe uma versão mais curta para determinar quais propriedades e que
duração terão o efeito. Para isso, utilizamos a propriedade transition.

button {
background-color: #eaeaea;
color: #000;
css transition:
background-color 0.5s,
color 0.5s;
}

Arquitetura cliente-servidor 467

 Resultado

Arquitetura cliente-servidor 468

 Muitas propiedades
O que podemos fazer se quisermos criar uma transição para todas as
propriedades que forem alteradas? Para isso, podemos utilizar a palavra
reservada all.

button {
background-color: #1a73e8;
css color: #fff;
transition: all 0.5s
}

Arquitetura cliente-servidor 469

Animações
 Criando uma animação
No CSS, podemos criar uma animação que pode ser reutilizada. Assim como
nas transições, devemos indicar como serão os diferentes valores, mas desta
vez durante toda a animação nos pontos que queremos. Todas as
animações vão de 0% a 100%. Isto quer dizer que podemos determinar o
início, o final, como qualquer outro ponto entre estes dois valores.

Arquitetura cliente-servidor 471

 Criando uma animação
Em primeiro lugar, temos que criar uma animação em si. Para isso, vamos usar
a palavra reservada @keyframes e dar a ela um nome. Neste exemplo, o nome
será fantasma.

@keyframes fantasma {
css /* Aqui definimos os pontos da animação */
}

Arquitetura cliente-servidor 472

 Criando uma animação
Dentro das chaves, iremos modificando os valores de determinadas
propriedades ao longo da animação: de 0 a 100% nos pontos que queremos.

@keyframes fantasma {
0% { opacity: 0% }
css 25% { transform: translateY(-20px); opacity: 100% }
100% { opacity: 0% }
}

Arquitetura cliente-servidor 473

 Atribuindo uma animação
Por último, voltamos para o seletor do elemento. Algumas das propriedades
para configurar uma animação são as seguintes:
animation-name
Para definir qual é a animação que queremos utilizar.
animation-duration
Para estabelecer o tempo que deve durar a animação. O valor pode ser em
segundos (s) ou milissegundos (ms).
animation-iteration-count
Para definir a quantidade de vezes que se repetirá a animação. Pode ser um
número ou a palavra infinite, para que se reproduza infinitamente.

Arquitetura cliente-servidor 474

 A forma reduzida
Existe uma versão mais curta para determinar as diferentes propriedades em
uma mesma linha. Para isso, utilizamos a propriedade animation.

.fantasma {
css animation: fantasma 3s infinite;
}

Arquitetura cliente-servidor 475

 Resultado
Se tudo correu bem, obteremos a seguinte animação:

Arquitetura cliente-servidor 476

www.digitalhouse.com/br