DesDig Aula 05

•

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

Você também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

Você viu 3, do total de 29 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

Você também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

Você viu 6, do total de 29 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

Você também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

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ê também pode ser Premium ajudando estudantes

Você viu 9, do total de 29 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

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Design Gráfico

8.740 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
Html - imagens
Imagem
Para adicionar uma logo ou inserir 
imagem HTML no seu site, você 
precisará de:
● Uma ou diversas imagens 
( .jpg, .png, .gif, etc.).
● Acesso ao servidor (mas só 
quando uparmos pra web, 
deixemos para dps!).
Imagem
Para inserir imagem no HTML utilize o 
código a seguir:
<img src="imagem.jpg" alt="Texto sobre 
a imagem" width=60 height=40>
<img src="imagem.jpg" alt="Texto sobre 
a imagem" width=60 height=40>
Img
Significa “imagem”.
Está tag informa ao navegador onde a 
imagem deve ser localizada no seu site.
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
Obs: no seu computador não use essa 
parte: .../ do código
Deixe apenas
<img src="img/imagem.jpg" alt="Texto 
sobre a imagem">
IMG SRC
Img vem de imagem e src de “source” 
(origem): 
Este comando é inserido no comando 
IMG.
O comando Source informa ao 
navegador qual o caminho para a 
imagem. 
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
IMG SRC
É recomendado armazenar as imagens 
em um diretório chamado “imagens” ou 
“img”, por exemplo. 
imagens/nomedaimagem.jpg 
img/nomedaimagem.jpg. 
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
ALT
Significa “alternate text”.
Este texto será exibido quando a 
imagem não carregar.
É importante quando se trata de SEO e 
pode ter grande impacto no 
ranqueamento do seu site nos 
mecanismos de busca. 
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
IMAGEM: Alt
O alt tag explica do que se trata a 
imagem e também aparece quando o 
usuários passa o mouse em cima da 
imagem.
Isso também é utilizado para a 
navegação de pessoas com 
dificuldades visuais.
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
"Texto sobre a imagem"
Aqui você insere o texto que 
descreve a sua imagem.
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
Width
Indica a largura da sua imagem em 
pixels e pode variar de 1 a qualquer 
outro número. 
<img src=".../img/imagem.jpg" 
alt="Texto sobre a imagem" width=60 
height=40>
Height
Indica a altura das imagens em pixels. 
As regras seguem as mesmas da 
largura. 
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Imagens</h2>
<img src="pega o endereço de uma img 
ai" alt=" width="104" height="142">
</body>
</html>
Height
Indica a altura das imagens em pixels. 
As regras seguem as mesmas da 
largura. 
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Imagens</h2>
<img src="pega o endereço de uma img 
ai" alt=" width="104" height="142">
</body>
</html>
LINKS
Função do HTML que permite inserir 
os hiperlinks em diversos elementos, 
como textos e imagens. 
LINKS
Um link precisa sempre apontar para uma 
URL (endereço) existente em seu site. 
Caso contrário, você poderá obter uma 
mensagem de erro 404.
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>links</h2>
<a href="url">site do didi</a>
</body>
</html>
LINKS: tag <a>
No HTML, os links são definidos pela 
tag <a>. 
Dentro dessa tag incluímos o atributo 
href (Hypertext Reference), que é o 
endereço de destino do link. 
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>links</h2>
<a 
href="https://www.diegomellodias.co
m.br/">site do didi</a>
</body>
</html>
https://www.diegomellodias.com.br/
https://www.diegomellodias.com.br/
LINKS: tag <a>
Dessa forma, a sintaxe básica do 
HTML link é:
<a href="url">Exemplo</a>
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>links</h2>
<a 
href="https://www.diegomellodias.co
m.br/">site do didi</a>
</body>
</html>
LINKS: tag <a>
Se eu quiser entrar em algum link 
dentro do meu servidor, eu escrevo o 
nome do arquivo.
<a href="servicos.html">Exemplo</a>,
Teste ai!
Crie um novo arquivo de html
<!DOCTYPE html>
<html>
<body>
<h2>links</h2>
<a href="servicos.html">serviços</a>
</body>
</html>
Atributo Target
O atributo target especifica onde 
abrir o documento vinculado.
O atributo de destino pode ter um 
dos seguintes valores:
_blank - abre o documento 
vinculado em uma nova janela ou 
guia
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Atributo Target</h2>
<a 
href="https://www.diegomellodias.com.br/" 
target="_blank">site do didi</a> 
</body>
</html>
Atributo Target
O atributo target especifica onde 
abrir o documento vinculado.
O atributo de destino pode ter um 
dos seguintes valores:
_self - abre o documento vinculado 
na mesma janela / guia em que foi 
clicado (este é o padrão)
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Atributo Target</h2>
<a 
href="https://www.diegomellodias.com.br/" 
target="_self">site do didi</a> 
</body>
</html>
LINKAR UMA IMAGEM
_parent - abre o documento 
vinculado no quadro pai
Se não tiver um quadro pai, vai 
funcionar como o _self
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Atributo Target</h2>
<a 
href="https://www.diegomellodias.com.br/" 
target="_parent">site do didi</a> 
</body>
</html>
LINKAR UMA IMAGEM
_top - abre o documento vinculado 
no corpo inteiro da janela
nome do quadro - Abre o 
documento vinculado em um 
quadro nomeado
Se não tiver uma configuração de 
quadro, abrirá como _self
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Atributo Target</h2>
<a 
href="https://www.diegomellodias.com.br/" 
target="_top">site do didi</a> 
</body>
</html>
IMAGEM COM LINK
<a href=”endereço”><img 
src=”endereço da imagem” 
alt=”Descrição da imagem”/></a>
endereço: é o endereço do site ou 
página que você quer que se abra ao 
clicar na imagem.
endereço da imagem: é a url da 
imagem.
Teste ai!
<!DOCTYPE html>
<html>
<body>
<h2>Imagens com link</h2>
<a 
href="http://www.diegomellodias.com.br" 
target="_blank">
 <img 
src="https://i.ibb.co/87TXX4r/New-Proje
ct-1.png" alt="Bundia">
</a>
</body>
</html>
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>
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