WEBDESIGN

https://webdesign.ranoya.com

departamento de design | UFPE

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

WORKSHOPS

WORKSHOPS

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

WEBDESIGN

departamento de design | UFPE

https://webdesign.ranoya.com

WORKSHOPS

WORKSHOPS

Designers deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

Criar suas próprias ferramentas usadas para projetar;

1

Porquê, então?

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

c7tb6bu

TURMA /CLASSROOM

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL

WEBDESIGN

departamento de design | UFPE

https://webdesign.ranoya.com

WORKSHOPS

O TECIDO DAS TECNOLOGIAS CRIATIVAS

AULA

Designers deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

Por quê, então?

Criar suas próprias ferramentas usadas para projetar;

1

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

c7tb6bu

TURMA /CLASSROOM

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL

WEBDESIGN

departamento de design | UFPE

https://webdesign.ranoya.com

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Por quê, então?

Criar suas próprias ferramentas usadas para projetar;

1

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

Por quê, então?

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Por quê, então?

2

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Por quê, então?

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGOS

HTML + CSS

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

1

4

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

CÓDIGOS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

CÓDIGOS

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

1

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

PARTE DO CÓDIGO QUE É PROCESSADO NO COMPUTADOR DO USUÁRIO
HTML, CSS, JAVASCRIPT

FRONT-END

1

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

FRONT-END

BACK-END

PARTE DO CÓDIGO QUE É PROCESSADO EM UM SERVIDOR ONLINE
PHP, JAVA, C#, .NET

GERA UM CÓDIGO FRONT-END E ENVIA PARA O COMPUTADOR DO USUÁRIO

PARTE DO CÓDIGO QUE É PROCESSADO NO COMPUTADOR DO USUÁRIO
HTML, CSS, JAVASCRIPT

1

4

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

A REDE

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
index.html

1

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
index.html

1

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

index.html
index.html

?

1

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

1:N

index.html

?

1

N

1

O QUE ISSO SIGNIFICA?

VOCÊ PRECISA SER ECONÔMICO COM OS RECURSOS QUE UTILIZA NO SEU CÓDIGO. VOCÊ NUNCA SABE QUANTAS PESSOAS ESTÃO UTILIZANDO O BACK-END AO MESMO TEMPO.

1

A REDE

N

1:N

O QUE ISSO SIGNIFICA?

VOCÊ PRECISA SER ECONÔMICO COM OS RECURSOS QUE UTILIZA NO SEU CÓDIGO. VOCÊ NUNCA SABE QUANTAS PESSOAS ESTÃO UTILIZANDO O BACK-END AO MESMO TEMPO.

1

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

LAYOUT

FRONT-END + BACK-END

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

A REDE

1:N

O QUE ISSO SIGNIFICA?

VOCÊ PRECISA SER ECONÔMICO COM OS RECURSOS QUE UTILIZA NO SEU CÓDIGO. VOCÊ NUNCA SABE QUANTAS PESSOAS ESTÃO UTILIZANDO O BACK-END AO MESMO TEMPO.

LAYOUT

FRONT-END + BACK-END

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

PROBLEMA ESTRATÉGICO

DESIGN DE INFORMAÇÃOO

LAYOUT

PROBLEMA ESTRATÉGICO

DESIGN DE INFORMAÇÃOO

PROBLEMA CONSTRUTIVO

HTML, CSS, EDITORAÇÃOE PROGRAMAÇÃO

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LAYOUT

PROBLEMA ESTRATÉGICO

DESIGN DE INFORMAÇÃOO

PROBLEMA CONSTRUTIVO

HTML, CSS, EDITORAÇÃO E PROGRAMAÇÃO

PROBLEMA TECNOLÓGICO

TECNOLOGIA DE INFORMAÇÃO (TI)
 

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LAYOUT

PROBLEMA ESTRATÉGICO

DESIGN DE INFORMAÇÃOO

PROBLEMA CONSTRUTIVO

HTML, CSS, EDITORAÇÃOE PROGRAMAÇÃO

PROBLEMA TECNOLÓGICO

TECNOLOGIA DE INFORMAÇÃO (TI)
 

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

LAYOUT

PROBLEMA ESTRATÉGICO

DESIGN DE INFORMAÇÃOO

PROBLEMA CONSTRUTIVO

HTML, CSS, EDITORAÇÃOE PROGRAMAÇÃO

PROBLEMA TECNOLÓGICO

TECNOLOGIA DE INFORMAÇÃO (TI)
 

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

DIFERENÇAS ENTRE

DISPOSITIVOS DE I/O

E RECURSOS

DISPONÍVEIS

LAYOUT

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

LARGURA DE BANDA
E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS

DIFERENÇAS ENTRE

DISPOSITIVOS DE I/O

E RECURSOS

DISPONÍVEIS

LAYOUT

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

LARGURA DE BANDA
E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS

DIFERENÇAS ENTRE

DISPOSITIVOS DE I/O

E RECURSOS

DISPONÍVEIS

INCOMPATIBILIDADE DE SOFTWARE

INCOMPATIBILIDADE DE SOFTWARE

LAYOUT

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

INCOMPATIBILIDADE DE SOFTWARE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

RESPOSTA DO SERVIDOR

HTML, CSS, JAVASCRIPT

INTERPRETAÇÃO DO NAVEGADOR

IMAGENS, TEXTOS, VÍDEOS, ETC.

SERVIÇO

EXECUÇÃO

PROJETO

LAYOUT

Layout

Webserver / Webhost

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

CÓDIGO BACK-END

CÓDIGO FRONT-END

LAYOUT

CONTEÚDO

PROPÓSITO

RESPOSTA DO SERVIDOR

HTML, CSS, JAVASCRIPT

INTERPRETAÇÃO DO NAVEGADOR

IMAGENS, TEXTOS, VÍDEOS, ETC.

SERVIÇO

PROJETO

EXECUÇÃO

LAYOUT

Layout

Webserver / Webhost

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

CÓDIGO BACK-END

CÓDIGO FRONT-END

LAYOUT

CONTEÚDO

PROPÓSITO

RESPOSTA DO SERVIDOR

HTML, CSS, JAVASCRIPT

INTERPRETAÇÃO DO NAVEGADOR

IMAGENS, TEXTOS, VÍDEOS, ETC.

SERVIÇO

EXECUÇÃO

PROJETO

NEGÓCIOS, EMPREENDEDORES

COMUNICAÇÃO SOCIAL, PRODUTORES

DESIGN DE INFORMAÇÃO, DESIGNERS

WEBDESIGN (CONSTRUÇÃO TÉCNICA)

COMPUTAÇÃO / ENGENHARIA

LAYOUT

Layout

Webserver / Webhost

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

CÓDIGO BACK-END

CÓDIGO FRONT-END

LAYOUT

CONTEÚDO

PROPÓSITO

RESPOSTA DO SERVIDOR

HTML, CSS, JAVASCRIPT

INTERPRETAÇÃO DO NAVEGADOR

IMAGENS, TEXTOS, VÍDEOS, ETC.

SERVIÇO

EXECUÇÃO

PROJETO

NEGÓCIOS, EMPREENDEDORES

COMUNICAÇÃO SOCIAL, PRODUTORES

DESIGN DE INFORMAÇÃO, DESIGNERS

WEBDESIGN (CONSTRUÇÃO TÉCNICA)

COMPUTAÇÃO / ENGENHARIA

ARQUIVOS

códigos

imagens

jpeg

gif

png
svg
webp

texto puro (.txt) sem formatação encodificado em utf-8

AULA SOBRE
ARQUIVOS
DE CÓDIGO

LAYOUT

Layout

Webserver / Webhost

FRONT-END + BACK-END

LIMITAÇÕES
TÉCNICAS

FRONT-END

BACK-END

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

CÓDIGO BACK-END

CÓDIGO FRONT-END

LAYOUT

CONTEÚDO

PROPÓSITO

RESPOSTA DO SERVIDOR

HTML, CSS, JAVASCRIPT

INTERPRETAÇÃO DO NAVEGADOR

IMAGENS, TEXTOS, VÍDEOS, ETC.

SERVIÇO

EXECUÇÃO

PROJETO

NEGÓCIOS, EMPREENDEDORES

COMUNICAÇÃO SOCIAL, PRODUTORES

DESIGN DE INFORMAÇÃO, DESIGNERS

WEBDESIGN (CONSTRUÇÃO TÉCNICA)

COMPUTAÇÃO / ENGENHARIA

ARQUIVOS

códigos

imagens

jpeg

gif

png
svg
webp

texto puro (.txt) sem formatação encodificado em utf-8


SISTEMA DE REFERÊNCIA ABSOLUTA

AULA SOBRE
ARQUIVOS
DE CÓDIGO

ARQUIVOS

códigos

imagens

jpeg

gif

png
svg
webp

texto puro (.txt) sem formatação encodificado em utf-8


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

AULA SOBRE
ARQUIVOS
DE CÓDIGO

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../
../pastaA

documento.pdf

../pastaA/pdfs/document.pdf

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../
../pastaA
../pastaA/novo.html

documento.pdf

../pastaA/pdfs/document.pdf

teste.html

index.html

./pastaA/pdfs/document.pdf

ARQUIVOS


SISTEMA DE REFERÊNCIA ABSOLUTA

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

https://www.meusite.com.br/imagem.jpg

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../
../pastaA
../pastaA/novo.html

documento.pdf

../pastaA/pdfs/document.pdf

teste.html

index.html

./pastaA/pdfs/document.pdf

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

PROTOCOLO DE COMUNICAÇÃO
HTTP, HTTPS, FTP, FTPS, ETC...

DOMÍNIO

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

index.html

./index.html

imagens

./imagens

logo.jpg

foto.jpg

./imagens/logo.jpg

pastaB

pastaA

novo.html

pdfs

arquivos

../
../pastaA
../pastaA/novo.html

documento.pdf

../pastaA/pdfs/document.pdf

teste.html

index.html

./pastaA/pdfs/document.pdf

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DOMÍNIO

PROTOCOLO DE COMUNICAÇÃO
HTTP, HTTPS, FTP, FTPS, ETC...

DIRETÓRIO DENTRO DO WEBSERVER

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DOMÍNIO

DIRETÓRIO DENTRO DO WEBSERVER

ARQUIVO DENTRO DO WEBSERVER

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DIRETÓRIO DENTRO DO WEBSERVER

ARQUIVO DENTRO DO WEBSERVER

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

ARQUIVO DENTRO DO WEBSERVER

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

>

<

CÓDIGO HTML

PARTE 2

CÓDIGO HTML

PARTE 2

>

<

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

CÓDIGO HTML

PARTE 2

>

<

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<b>texto</b>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<b>texto</b>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card">Este parágrafo tem um
  

 </p>

</div>

O QUE SÃO TAGS HTML?

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

O QUE SÃO TAGS HTML?

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

<p id="pg1">
  Parágrafo 1
</p>
  
<p id="pg2">
  Parágrafo 2
</p>

TAGS PARALELAS NO DOM

ERRO SINTÁTICO / ESTRUTURAL

O QUE SÃO TAGS HTML?

TAGS PARALELAS NO DOM

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

<a href="./arquivo.html" id="link1">texto</a>
<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

<a href="doc.html" class="link">
 <p>Este parágrafo possui um
   <b class="forte">texto</b>
   em negrito
 </p>
</a>
<div id="bloco2">
 Segundo parágrafo
</div>

O CÓDIGO HTML COMO ELE NORMALMENTE FICA

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

<a href="doc.html" class="link">
 <p>Este parágrafo possui um
   <b class="forte">texto</b>
   em negrito
 </p>
</a>
<div id="bloco2">
 Segundo parágrafo
</div>

O CÓDIGO HTML COMO ELE NORMALMENTE FICA

O QUE SÃO TAGS HTML?

EXERCÍCIOS

ESTRUTURA

PROPRIEDADES

ESTRUTURA

PROPRIEDADES

Exercícios voltados para a sintaxe e a estrutura de tags HTML

Exercícios voltados para os atributos e propriedades das tags HTML

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

A PARTE VISÍVEL

<BODY>

<HEAD>

META-INFORMAÇÃO

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

A PARTE VISÍVEL

<BODY>

<HEAD>

META-INFORMAÇÃO

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

<BODY>

A PARTE VISÍVEL

<HEAD>

META-INFORMAÇÃO

<HTML>


<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

<BODY>

A PARTE VISÍVEL

<HEAD>

META-INFORMAÇÃO

<HTML>


<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

<head>
  
  <title>Meu Site</title>
  <meta name="description" content="meu primeiro site">
  <meta name="author" content="Guilherme Ranoya">
  
  <style>
  
    p {
      color: red;
    }
  
  </style>
  
  <script>
  
    console.log("hello world");
    
  </script>
  
</head>

<BODY>

A PARTE VISÍVEL

<HEAD>

META-INFORMAÇÃO

<HTML>


<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

<head>
  
  <title>Meu Site</title>
  <meta name="description" content="meu primeiro site">
  <meta name="author" content="Guilherme Ranoya">
  
  <style>
  
    p {
      color: red;
    }
  
  </style>
  
  <script>
  
    console.log("hello world");
    
  </script>
  
</head>

title

meta

style

link

script


<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

<head>
  
  <title>Meu Site</title>
  <meta name="description" content="meu primeiro site">
  <meta name="author" content="Guilherme Ranoya">
  
  <style>
  
    p {
      color: red;
    }
  
  </style>
  
  <script>
  
    console.log("hello world");
    
  </script>
  
</head>

title

meta

style

link

script

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

<head>
  
  <title>Meu Site</title>
  <meta name="description" content="meu primeiro site">
  <meta name="author" content="Guilherme Ranoya">
  
  <style>
  
    p {
      color: red;
    }
  
  </style>
  
  <script>
  
    console.log("hello world");
    
  </script>
  
</head>

title

meta

style

link

script

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

TIPOS

inline

block

form

AS TAGS USADAS NO <BODY> SÃO DIVIDIDAS EM TRÊS CATEGORIAS: TAGS DE CONTEÚDO TEXTUAL (INLINE), TAGS DE CONSTRUÇÃO DE BLOCOS (BLOCK), E TAGS PARA CONSTRUÇÃO DE FORMULÁRIOS (FORMS)


<html>
    
  
  
  
  <head>
    [...]
  </head>
  
  
  
  
  
  <body>
    [...]
  </body>
  
  
</html>

TAGS

head

body

html

<head>
  
  <title>Meu Site</title>
  <meta name="description" content="meu primeiro site">
  <meta name="author" content="Guilherme Ranoya">
  
  <style>
  
    p {
      color: red;
    }
  
  </style>
  
  <script>
  
    console.log("hello world");
    
  </script>
  
</head>

title

meta

style

link

script

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

TIPOS

inline

block

form

AS TAGS USADAS NO <BODY> SÃO DIVIDIDAS EM TRÊS CATEGORIAS: TAGS DE CONTEÚDO TEXTUAL (INLINE), TAGS DE CONSTRUÇÃO DE BLOCOS (BLOCK), E TAGS PARA CONSTRUÇÃO DE FORMULÁRIOS (FORMS)

i

img

span

strong

a

b

br

em

TAGS

head

body

html

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

TIPOS

inline

block

form

AS TAGS USADAS NO <BODY> SÃO DIVIDIDAS EM TRÊS CATEGORIAS: TAGS DE CONTEÚDO TEXTUAL (INLINE), TAGS DE CONSTRUÇÃO DE BLOCOS (BLOCK), E TAGS PARA CONSTRUÇÃO DE FORMULÁRIOS (FORMS)

title

meta

style

link

script

i

img

span

strong

a

b

br

em

p

svg

table

canvas

div

h1-h6

th

td

tr

TAGS

head

body

html

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

TIPOS

inline

block

form

AS TAGS USADAS NO <BODY> SÃO DIVIDIDAS EM TRÊS CATEGORIAS: TAGS DE CONTEÚDO TEXTUAL (INLINE), TAGS DE CONSTRUÇÃO DE BLOCOS (BLOCK), E TAGS PARA CONSTRUÇÃO DE FORMULÁRIOS (FORMS)

title

meta

style

link

script

i

img

span

strong

a

b

br

em

p

svg

table

canvas

div

h1-h6

th

td

tr

textarea

form

input

label

select

option

TAGS

head

body

html

<body>
  
  <div class="bloco">
    
    <p>
      Este é um parágrafo.
    </p>
    
    <p>
      Este é um parágrafo com um <a href="../">link</a>.
    </p>
    
  </div>
  
</body>

TIPOS

inline

block

form

title

meta

p

svg

table

canvas

div

h1-h6

th

td

tr

textarea

form

input

label

select

option

}

{

CÓDIGO CSS

PARTE 3

CÓDIGO CSS

PARTE 3

}

{

TAGS

head

body

html

TIPOS

inline

block

form

title

meta

p

svg

table

canvas

div

h1-h6

th

td

tr

textarea

form

input

label

select

option

}

{

CÓDIGO CSS

PARTE 3

CÓDIGO CSS

PARTE 3

}

{

AS INSTRUÇÕES CSS CONTROLAM AS PROPRIEDADES E CARACTERÍSTICAS DE CADA TAG OU ELEMENTO HTML

O QUE É CSS?

AS INSTRUÇÕES CSS CONTROLAM AS PROPRIEDADES E CARACTERÍSTICAS DE CADA TAG OU ELEMENTO HTML

CONTEÚDO

O QUE É CSS?

É ATRAVÉS DO CSS QUE MODIFICAMOS OS ELEMENTOS E LHE DAMOS A FORMA DESEJADA

CÓDIGO CSS

PARTE 3

}

{

AS INSTRUÇÕES CSS CONTROLAM AS PROPRIEDADES E CARACTERÍSTICAS DE CADA TAG OU ELEMENTO HTML

CONTEÚDO

O QUE É CSS?

É ATRAVÉS DO CSS QUE MODIFICAMOS OS ELEMENTOS E LHE DAMOS A FORMA DESEJADA

3 FORMAS DE APLICAÇÃO

DEFINIÇÃO VIA TAG <STYLE>

DEFINIÇÃO INLINE

DEFINIÇÃO EM ARQUIVO
EXTERNO

<head>
  <style>
    a {
      color: red;
    }
  </style>
</head>
<a style="color: red;">teste</a>
<link rel="stylesheet" type="text/css" href="estilo.css">
a {
  color: red;
}

AS INSTRUÇÕES CSS CONTROLAM AS PROPRIEDADES E CARACTERÍSTICAS DE CADA TAG OU ELEMENTO HTML

O QUE É CSS?

É ATRAVÉS DO CSS QUE MODIFICAMOS OS ELEMENTOS E LHE DAMOS A FORMA DESEJADA

3 FORMAS DE APLICAÇÃO

DEFINIÇÃO VIA TAG <STYLE>

DEFINIÇÃO INLINE

DEFINIÇÃO EM ARQUIVO
EXTERNO

<head>
  <style>
    a {
      color: red;
    }
  </style>
</head>
<a style="color: red;">teste</a>
<link rel="stylesheet" type="text/css" href="estilo.css">
a {
  color: red;
}

meu link

AS INSTRUÇÕES CSS CONTROLAM AS PROPRIEDADES E CARACTERÍSTICAS DE CADA TAG OU ELEMENTO HTML

CONTEÚDO

O QUE É CSS?

É ATRAVÉS DO CSS QUE MODIFICAMOS OS ELEMENTOS E LHE DAMOS A FORMA DESEJADA

3 FORMAS DE APLICAÇÃO

DEFINIÇÃO VIA TAG <STYLE>

DEFINIÇÃO INLINE

DEFINIÇÃO EM ARQUIVO
EXTERNO

<head>
  <style>
    a {
      color: red;
    }
  </style>
</head>
<a style="color: red;">teste</a>
<link rel="stylesheet" type="text/css" href="estilo.css">
a {
  color: red;
}

meu link

<head>
  <style>
    a {
      color: red;
      text-decoration: none;
    }
  </style>
</head>

meu link

meu link

<head>
  <style>
    a {
      color: red;
      text-decoration: none;
    }
    
    a:hover {
      background-color: white;
    }
  </style>
</head>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</p>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</p>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</p>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</p>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

p.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</a>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

OVERRIDE

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA">
  texto
</p>

texto

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</a>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

OVERRIDE

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA">
  texto
</p>

texto

.borda {
  border: 1px solid red;
}

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA borda">
  texto
</p>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</a>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

OVERRIDE

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA">
  texto
</p>

texto

.borda {
  border: 1px solid red;
}

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA borda">
  texto
</p>

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</a>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

OVERRIDE

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA">
  texto
</p>

texto

.borda {
  border: 1px solid red;
}

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA borda"
   style="background-color: white;">
  texto
</p>

COMPORTAMENTO

<div class="tipoA">
  texto
</p>

.tipoA {
  color: red;
}

.tipoA:hover {
  background-color: white;
}

seletor:comportamento { }

SINTAXE

TAG

CLASS

ID

a {
  color: red;
}

<a href="./pg1.html">1</a>

<a href="./pg2.html">2</a>

<a href="./pg3.html">3</a>

tag { }

SELETORES

.classe { }

.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

#id { }

#unico {
  color: red;
}

<a id="unico" href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p class="tipoA">texto</a>

OPERADORES LÓGICOS

tag#id.classe[.classe][.classe] { }

p#unico.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</a>

seletor[,seletor][,seletor] { }

p#unico, a.tipoA {
  color: red;
}

<a href="./pg1.html">1</a>

<a class="tipoA" href="./pg2.html">2</a>

<p id="unico" class="tipoA">texto</p>

seletor[ seletor][ seletor] { }

.tipoA a {
  color: red;
}

<p class="tipoA">
  <a href="./pg1.html">1</a>
</p>

<p>
  <a class="tipoA" href="./pg2.html">2</a>
</p>

<a class="tipoA" href="./pg2.html">
  <p>texto</p>
</a>

OVERRIDE

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA">
  texto
</p>

texto

.borda {
  border: 1px solid red;
}

.tipoA {
  color: red;
}

.tipoA {
  text-decoration: underline;
}

<p class="tipoA borda"
   style="background-color: white;">
  texto
</p>

COMPORTAMENTO

.tipoA {
  color: red;
}

.tipoA:hover {
  background-color: white;
}

<div class="tipoA">
  texto
</p>

seletor:comportamento { }

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID


WIDTH


HEIGHT


MARGIN


PADDING


BORDER

SINTAXE

texto

COMPORTAMENTO

.tipoA {
  color: red;
}

.tipoA:hover {
  background-color: white;
}

<div class="tipoA">
  texto
</p>

seletor:comportamento { }

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID


WIDTH


HEIGHT


MARGIN


PADDING


BORDER


POSITION


DISPLAY


FLOAT


TOP


BOTTOM


LEFT


RIGHT


Z-INDEX


MARGIN

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID


WIDTH


HEIGHT


MARGIN


PADDING


BORDER


POSITION


DISPLAY


FLOAT


TOP


BOTTOM


LEFT


RIGHT


Z-INDEX


MARGIN


FONT-FAMILY


FONT-SIZE


FONT-WEIGHT


FONT-STYLE


LINE-HEIGHT

LETTER-
SPACING


TEXT-ALIGN

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID


POSITION


DISPLAY


FLOAT


TOP


BOTTOM


LEFT


RIGHT


Z-INDEX


MARGIN


FONT-FAMILY


FONT-SIZE


FONT-WEIGHT


FONT-STYLE


LINE-HEIGHT

LETTER-
SPACING


TEXT-ALIGN

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID


FONT-FAMILY


FONT-SIZE


FONT-WEIGHT


FONT-STYLE


LINE-HEIGHT

LETTER-
SPACING


TEXT-ALIGN

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID

PROPRIEDADES

DIMENSIO
NAMENTO

POSICIO
NAMENTO


TIPOGRAFIA

DETALHA
MENTO


TRANSIÇÃO


ANIMAÇÃO

DIRETRIZES
E FUNÇÕES


GRID

COPYRIGHT © 2017
GUILHERME RANOYA

Webdesign Audio

By Guilherme Ranoya

Made with Slides.com

Webdesign Audio

Disciplina de Webdesign na sua versão Storytelling

  • 1,487

More from Guilherme Ranoya