DesDig Aula 05 2

•

IBMR

0

Raphaela Lima

12.04.2022

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 12 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 12 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 12 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Design Gráfico

8.568 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Design Digital aula 
05.2,kkkj
Html - Listas e Cores
LISTAS:
As listas são muito importantes 
quando queremos listar alguns itens 
no site e também para a criação de 
menu de navegação.
LISTAS: Ordenadas
Uma lista ordenada começa com a tag 
<ol> e seus respectivos itens da lista 
ficam dentro da tag <li>. 
Por padrão as listas ordenadas são 
ordenadas por números, mas também 
iremos ver como ordená-la por outros 
métodos.
Teste ai!
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 <body>
<ol>
<li>Nome</li>
<li>Telefone</li>
<li>Endereço</li>
<li>País</li>
</ol>
</body>
</html>
LISTAS: Ordenadas (letras)
Podemos ordenar também por letras, 
basta em colocar <ol type="a">.
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 <body>
<ol type="a">
<li>Nome</li>
<li>Telefone</li>
<li>Endereço</li>
<li>País</li>
</ol>
</body>
</html>
LISTAS: Ordenadas (romanos)
Podemos ordenar também por letras, 
basta em colocar <ol type="I">.
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
<body>
<ol type="I">
<li>Nome</li>
<li>Telefone</li>
<li>Casa</li>
<li>Estado</li>
</ol>
</body>
</html>
LISTAS: Por Definição
As Listas por definição são um pouco 
mais diferentes.
Elas criam uma hierarquia.
Elas são representadas pela tag <dl>, 
seguido de <dt> e<dd>, ficando assim 
no código:
<html>
<head>
<title>Listas em HTML</title>
</head>
 <body>
<dl>
<dt>Frutas</dt>
<dd> Pera</dd>
<dd> Uva</dd>
<dt> Bebidas</dt>
<dd> coquinha geladinha</dd>
<dd> lágrimas de alunos</dd>
</dl>
</body>
</html>
LISTAS: Desordenadas
Já as Listas desordenadas são iniciadas 
com a tag <ul> e são representadas 
por pequenos “bullets”, vamos ao 
código:
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
<body>
<ul>
<li>Nome</li>
<li>Telefone</li>
<li>Casa</li>
<li>Estado</li>
</ul>
</body>
</html>
Cor do fundo de texto 
Para colocar a cor no h1 escreva
<h1 
style="background-color:acorquequis
er;">vermeio(?)</h1>
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
<body>
<h1 style="background-color:#c73267;">vermeio(?)</h1>
<h1 style="background-color:Orange;">laranja</h1>
<h1 style="background-color:DodgerBlue;">azul claro</h1>
<h1 style="background-color:MediumSeaGreen;">verdin</h1>
<h1 style="background-color:Gray;">cinza</h1>
<h1 style="background-color:SlateBlue;">azul (?)</h1>
<h1 style="background-color:Violet;">Violeta</h1>
<h1 style="background-color:LightGray;">cinza claro</h1>
</body>
</html>
Cor do TEXTO
Para colocar a cor no h1 escreva
<h1 
style="background-color:acorquequis
er;">vermeio(?)</h1>
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
<body>
<h3 style="color:Tomato;">oie BRASILSIL</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim 
veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Cor do TEXTO
Para colocar a cor no h1 escreva
<h1 style="color: sua cor ;">sua 
mensagem</h3>
Pro paragrafo é a mesma coisa, mas 
usa-se p ao invés de h1
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
<body>
<h3 style="color:Tomato;">oie BRASILSIL</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim 
veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Cor do BG
Para colocar a cor no fundo escreva
 <body 
style="background-color:corquequiser
;">
<!DOCTYPE html>
<html>
<head>
<title>Listas em HTML</title>
</head>
 
 <body style="background-color:grey;">
 <h1>Sucos</h1>
 <p>Nós temos mais de 10 tipos de suco para vocês!</p>
 </body>
</html>
</body>
</html>
Trabs
➔ Faça uma cópia daquele site 
que trabalhamos.
➔ Crie links para uma página 
online.
➔ Crie 2 links para outras 
páginas suas (mesmo 
servidor)
➔ Crie um menu (lista por 
definição) com hierarquias.
➔ Crie uma imagem com link