Logo Passei Direto
Buscar

Front-end com HTML e CSS

breadcrumb-separator

Exatas

User badge image
Joao Angeliski

em

Ferramentas de estudo

Mostrar todas

Conteúdos escolhidos para você

Aulas do Módulo 2 - Programação Básica
34 pág.

Aulas do Módulo 2 - Programação Básica

UB

Apostila de HTML e CSS
67 pág.

Apostila de HTML e CSS

FEPI

Aplicação de layout HTMLCSS
15 pág.

Aplicação de layout HTMLCSS

MULTIVIX

Aula 16 Aplicação de layout HTMLCSS Exercício
4 pág.

Aula 16 Aplicação de layout HTMLCSS Exercício

IESB

Apostila-Programacao-WEB_HTML_CSS
100 pág.

Apostila-Programacao-WEB_HTML_CSS

Perguntas dessa disciplina

Qual é o principal objetivo de se aplicar "Estilos" (por exemplo, Título 1, Título 2, Corpo de texto) em um editor de texto que é utilizado comumente

Podemos utilizar formatações CSS de diferentes formas, como escrita direta no atributo da tag, de forma inline, em um trecho delimitado pela tag style

ESTÁCIO

A HTML semântica é uma abordagem para desenvolver páginas da web qua atribui significado estrutural aos elementos html. Em vez de usar tags apenas ...

Pergunta 3 HTML, CSS e JavaScript são o triunvirato da maioria dos desenvolvimentos front-end da web; desenvolvedores os usam para codificar como ...

UNIVESP

Muitas vezes podemos copiar os códigos ou digitar, mas, se interessar, principalmente, pelo conceito, o código em si pode ser encontrado em vários ...

Material
Buscar
páginas com resultados encontrados.
páginas com resultados encontrados.
left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Conteúdos escolhidos para você

Aulas do Módulo 2 - Programação Básica
34 pág.

Aulas do Módulo 2 - Programação Básica

UB

Apostila de HTML e CSS
67 pág.

Apostila de HTML e CSS

FEPI

Aplicação de layout HTMLCSS
15 pág.

Aplicação de layout HTMLCSS

MULTIVIX

Aula 16 Aplicação de layout HTMLCSS Exercício
4 pág.

Aula 16 Aplicação de layout HTMLCSS Exercício

IESB

Apostila-Programacao-WEB_HTML_CSS
100 pág.

Apostila-Programacao-WEB_HTML_CSS

Perguntas dessa disciplina

Qual é o principal objetivo de se aplicar "Estilos" (por exemplo, Título 1, Título 2, Corpo de texto) em um editor de texto que é utilizado comumente

Podemos utilizar formatações CSS de diferentes formas, como escrita direta no atributo da tag, de forma inline, em um trecho delimitado pela tag style

ESTÁCIO

A HTML semântica é uma abordagem para desenvolver páginas da web qua atribui significado estrutural aos elementos html. Em vez de usar tags apenas ...

Pergunta 3 HTML, CSS e JavaScript são o triunvirato da maioria dos desenvolvimentos front-end da web; desenvolvedores os usam para codificar como ...

UNIVESP

Muitas vezes podemos copiar os códigos ou digitar, mas, se interessar, principalmente, pelo conceito, o código em si pode ser encontrado em vários ...

Prévia do material em texto

1
Prof. Ederson Cichaczewski
Programação Visual
Aula 3
Conversa Inicial
Front-end com HTML e HTML 5
Linguagem de definição de estilos CSS
Definições de responsividade e usabilidade
Aplicações visuais para web
Nesta aula, vamos destacar:
HTML e HTML 5
Introdução ao CSS 3
Utilização do CSS 3
Aspectos avançados com CSS 3
Aplicações com CSS 3
Conceitos de HTML e HTML 5
A web é baseada em hipertexto
Navegador é o aplicativo que serve para 
visualizar e navegar nas páginas web
O navegador localiza a página
por meio da sua URL
World Wide Web
Protocolo Domínio Caminho do arquivo Arquivo
http://www.grupoa.com.br/tekne/livrodesenvolv2/material.html
2
É uma linguagem de marcação para
descrição da estrutura de uma página
Cada elemento tem um nome, que 
corresponde a uma tag, entre os
sinais de menor que e maior que < >
A tag deve ser fechada com /
HTML
(Linguagem de Marcação de Hipertexto) Principais tags
Estrutura: <html>, <head>, <body>
Títulos, cabeçalhos e parágrafos: <title>, 
<h1> a <h6> e <p>
HTML
<html>
<head>
<title>Título da Página</title>
</head>
<body>
...conteúdo da sua página...
</body>
</html>
É a versão mais atual, que traz novos 
recursos e é compatível com elementos
de código das versões anteriores
Possui tags com significados semânticos
A tag html que identifica
um código HTML 5 é: 
<!DOCTYPE HTML>
HTML 5
É uma linguagem para a formatação e a 
aparência da página
Especificam-se as fontes de texto, as cores, 
as bordas, os planos de fundo, as margens, 
layouts diferenciados etc.
Pode ser aplicado diretamente nas
tags estruturais, dentro da tag <style>
ou em um arquivo .css separado
CSS (Folhas de Estilo em Cascata)
Site de conteúdo: apenas exibe conteúdo
de determinada área de forma linear
Site de registro de dados: utiliza como 
recurso principal formulários, que são 
preenchidos pelos usuários
Portal: compreende um conjunto de páginas
Aplicação orientada à transação: neste 
modelo, o usuário envia solicitações que a 
aplicação processa em um banco de dados
Design da página web – classificações
Visibilidade: o designer deve garantir que os 
objetos sejam corretamente visualizados pelos 
usuários
Consistência: todas as funções, exibições, 
comandos e menus precisam apresentar o 
mesmo visual e comportamento
Familiaridade: é importante utilizar sinais e 
símbolos que sejam facilmente reconhecidos 
pelo usuário
Affordance: design intuitivo, em
que os itens são autoexplicativos
Princípios para um bom design
3
Conhecendo o CSS
A ideia principal do uso do CSS é
separar o conteúdo do documento
(escrito em HTML/HTML 5) da
apresentação do documento
(escrita em CSS)
Isso é feito por meio de um conjunto de 
regras (estilos) que são aplicadas aos 
elementos das páginas web (tags)
CSS 3 e HTML 5
Tudo que deve sobrar, quando a folha de 
estilo é removida, é o texto que provê a 
informação e os elementos de HTML que 
descrevem a estrutura do documento
Regra de ouro do design CSS 
É colocada dentro da região da tag <body>, 
definida como atributos das tags html 
normais
O escopo do estilo inline vale
somente para um elemento da página.
Tem prioridade 1, ou seja, mais alta
Exemplo:
<p style=“color: green;”> Inline </p>
Folha de estilo interna – inline
É usada dentro do contêiner da tag <head> 
por meio de uma tag <style> com atributo 
type
O escopo do estilo incorporado vale para 
todas as tags de certo tipo no arquivo HTML. 
Tem prioridade 2, média
Exemplo:
<head><style type=“text/css”>
p{ color: green;} </style></head>
Folha de estilo interna – incorporada
Usa-se a tag <link> para vincular a
folha de estilos externa no contêiner
<head> do arquivo HTML:
<link rel=“stylesheet” type=“text/css” 
ref=“styles.css” />
Pode ser compartilhada por múltiplos 
documentos html. Tem prioridade 3,
mais baixa
Folha de estilo externa
4
Nome de um elemento HTML.
Exemplo: h1 (aplicável a todos h1)
Variável: associada às tags no arquivo HTML 
por meio do atributo class. No arquivo CSS, 
usa-se um ponto (.) na frente da variável
ID: semelhante à variável,
mas definida pelo caractere #
Folha de estilo externa – seletores
Relaciona nomes das tags,
das variáveis e/ou IDs criadas
Exemplo: 
body {
font-family: "Arial", sans-serif; }
.titulo1 { 
color: red;}
#corpo{
color: blue; }
Folha de estilo externa – arquivo CSS
Serve para definir parâmetros de 
espaçamento e formação dos elementos
Box model (modelo de caixas)
Fonte:
Miletto; Bertagnolli, 2014, p. 99.
margin-top
margin-top
border-top
border-top
padding-top
padding-top
width
height
p
ad
d
in
g
-to
p
b
o
rd
er-to
p
m
arg
in
-to
p
m
ar
g
in
-t
o
p
b
o
rd
er
-t
o
p
p
ad
d
in
g
-t
o
p
Utilização do CSS
A definição X11 estabelece
131 nomes de cores
Configuração pelo valor RGB
Porcentagem: rgb(42.8%, 50.3%, 57.5%)
Valor inteiro: rgb(255, 127, 0)
Valor hexadecimal: #FF7F00
Cores
Modelo de matiz-saturação-luminância HSL: 
hsl(0, 100%, 50%)
Transparência com o 4º parâmetro alfa, 
valores entre 0 e 1:
rgba(255, 127, 31, 0.5)
hsla(120, 90%, 50%, 0.3)
Cores
5
<main>
Seções do HTML 5 
header: cabeçalho
article: artigo
main: apenas 1
h1 a h6: títulos
nav: menus
footer: rodapé
Layout
<header>
<article>
<article>
<footer>
<nav>
background-image  url(arquivo) 
background-color  cor
background-position  top, center, bottom, 
left, center, right
background-repeat  repeat-x, repeat-y, 
repeat, no-repeat
background-attachment  scroll, fixed
Background (plano de fundo)
font-size 
tam-abs: xx-small, x-small, small, medium, 
large, x-large, xx-large
tam-relat: larger, smaller
tamanho: valor em pontos (pt)
percent: valor percentual em relação ao 
padrão
Fontes
font-family  fonte, genérica
(famílias genéricas: serif, sans-serif,
cursive, fantasy, monospace)
font-weight  normal, bold, bolder, lighter, 
100-900
font-style  normal, italic, oblique
Fontes
letter-spacing  normal, valor em px ou pt
line-height  normal, valor em px ou pt, 
percentual
text-align  left, right, center, justify 
vertical-align  top, middle, bottom
Textos
text-decoration  none, underline, 
overline, line-through, blink
text-ident  valor, percentual
text-transform  none, capitalize, 
uppercase, lowercase
word-spacing  normal,
valor em px ou pt
Textos
6
border-width  border-bottom-width,
border-left-width, border-right-width,
border-top-width
border-color  border-bottom-color,
border-left-color, border-right-color,
border-top-color
border-style  border-bottom-style,
border-left-style, border-right-style,
border-top-style
padding  padding-bottom, padding-left, 
padding-right, padding-top
Box model
height  auto, valor em px, valor percentual
width  auto, valor em px, valor percentual
Exemplo: 
<div style = “width: 20%; height: 150px;”>
Dimensões
position  absolute, relative, static
left  auto, valor em px, valor percentual
right  auto, valor em px, valor percentual
top  auto, valor em px, valor percentual
bottom  auto, valor em px, valor percentual
visibility  inherit, visible, hidden
z-index  nº da camada
Posicionamento
Aspectos avançados com CSS
É relativo a outros elementos
1 cm de distância em um computador parece 
pouco, mas em um smartphone é bastante
Valor em “em”: significa que é múltiplo do 
tamanho da fonte padrão, 16px (pixels)
Valor em “ex”: corresponde à altura de um x 
minúsculo
Posicionamento relativo
“em” aplicado a outras dimensões ou 
distâncias, para o posicionamento:
.text {float: right; width: 44 em;}
“ex” aplicado para o posicionamento:
.super {position: relative; top: -1 ex;}
Posicionamento relativo – exemplos
7
A propriedade float faz elementos 
posicionados de forma relativa 
flutuarem para determinada direção
float  none, left, right
Exemplo:
.info {float: left; width: 7 em;}
Posicionamento relativo – float
display  especifica como um elemento
será criado e disposto na tela
Valores: inline, block, none
overflow  especifica se o elemento
será cortado quando ultrapassar suacaixa
Valores: visible, hidden, scroll, auto, inherit
clear  indica o lado de uma caixa
çw43çque não pode ser adjacente à outra
Valores: none, left, right, both
CSS – propriedades adicionais
transform
rotate, ex: transform: rotate(20deg);
scale, scaleX, scaleY
translate, translateX, translateY
Transformações geométricas 2D
Fonte: W3Schools, 2022.
ORIGINALORIGINAL
ORIGINAL
TRANSFORMED
TRANSFORMED
transform
rotate3d, ex: 
transform: rotate3d(1,0,0,60deg);
scale3d, scaleZ
translate3d, translateZ
matrix3d
Transformações geométricas 3D
Aplicações com CSS
<!DOCTYPE html>
<html>
<head> 
<title> A Biblioteca </title> 
</head>
<body>
<h1> Minha Biblioteca WEB </h1> 
<p> Aqui estão os livros da minha coleção. </p>
</body>
</html>
Página Minha Biblioteca
8
Adicionando seções do HTML 5
<!DOCTYPE html>
<html>
<head> 
<title> A Biblioteca </title> 
</head>
<body>
<header> <h1> Minha Biblioteca WEB </h1> </header> 
<section id="main">
<p> Aqui estão os livros da minha coleção. </p> </section> 
<footer> </footer>
</body>
</html>
Adicionando um arquivo CSS
<!DOCTYPE html>
<html>
 <head> 
 <title> A Biblioteca </title> 
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header> <h1> Minha Biblioteca WEB </h1> </header> 
 <section id="main">
 <p> Aqui estão os livros da minha coleção. </p> </section> 
 <footer> </footer>
 </body>
</html>
body{
 background-color: #ccddaa;
 font-family: Arial, Helvetica, sans-serif;
 color: #330066;}
Arquivo CSS externo
h1{
font-family: Verdana, sans-serif;
font-size: 16pt;
color: blue;
text-align: center; 
text-decoration: underline;
border-style: solid; 
border-color: green;
border-width: medium; }
Adicionando borda e sublinhado ao título
#main{
font-family: Arial, sans-serif;
font-size: 14pt;
color: red; }
Configurando cor e fonte do
texto no section id main
Usar posicionamento relativo
Usar dimensões em porcentagem
Dividir o layout horizontal (largura) com 73% 
para o conteúdo e 27% para o menu lateral: 
width: 27%;
Imagens com redimensionamento automático: 
img{ max-width: 100%; height: auto;}
Página centralizada e largura máxima: #main { 
max-width: 960px; margin: 0 auto; }
Dicas para página responsiva
9
Logotipo sempre aponta
para a página principal
Destacar links já visitados
Destacar campos ativos
Colocar uma cor de fundo
em imagens de fundo
Dicas de usabilidade
Evitar textos longos no conteúdo
Evitar sublinhar textos que não são links
Usar textos alinhados à esquerda em
vez de alinhamento justificado
Usar espaçamento entre linhas igual
a 1.5 vezes o tamanho da fonte
Dicas de usabilidade
Facilita a escrita de código HTML e CSS, 
marcando com cores distintas partes do 
código
Possui o recurso de autocompletar a escrita
Auxilia na indentação do código
Insere automaticamente
o código HTML padrão 
Exemplo utilizando o framework Bootstrap
Página web com o Visual Studio 2022
Ir para opção Novo  Arquivo...
Página web com o Visual Studio 2022
Abrir a opção Página HTML
Página web com o Visual Studio 2022
Já inclui a estrutura de código
inicial de uma página HTML 5
Página web com o Visual Studio 2022
10
Incluir dentro da tag <head> o código para 
adicionar o framework Bootstrap à página
Página web com o Visual Studio 2022
 <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
Adicionar uma barra de navegação do 
framework Bootstrap na tag <body>
Página web com o Visual Studio 2022
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Meu Site</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
</nav>
Adicionar um cabeçalho e um texto, como
um conteúdo da página, na tag <body>
Página web com o Visual Studio 2022
 
<div class="container-fluid">
 <h1>Minha Página HTML com Bootstrap</h1>
 <p>Bootstrap é um framework web com código-fonte aberto para desenvolvimento de 
componentes de interface e front-end para sites e aplicações web usando HTML, CSS e 
JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do 
usuário em um site amigável e responsivo.</p>
 </div>
Ir ao menu Arquivo e clicar com o
mouse na opção Exibir no Navegador
Página web com o Visual Studio 2022

Mais conteúdos dessa disciplina