Uso de imagens e links com HTML
-
Upload
leonardo-soares -
Category
Education
-
view
413 -
download
2
description
Transcript of Uso de imagens e links com HTML
![Page 1: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/1.jpg)
INTR
ODUÇÃO AO H
TML –
LINKS, I
MAGENS E LI
STA
DE ITENS
PR
OF.
L EO
NA
RD
O S
OA
RE
S
Campus Garanhuns
![Page 2: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/2.jpg)
LINKS
• Âncoras para acessar outras partes de um site
• Tag <a>
![Page 3: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/3.jpg)
ATRIBUTOS DA TAG A
• Href•Descrição: usado para especificar a url que será carregada ao clicar no link
• Target•Descrição: usado para especificar onde o link será aberto•Valores: _blank, _self, _parent, _top
![Page 4: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/4.jpg)
EXEMPLO DE USO DA TAG A
• Exemplo:
<a href=‘index.html’ target=‘_parent’>Texto do link</a>
![Page 5: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/5.jpg)
IMAGENS
• Exibe uma imagem na página HTML
• Tag <img>
![Page 6: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/6.jpg)
ATRIBUTOS DA TAG IMG
• src• Descrição: especifica o caminho (pasta ou diretório)
onde encontra-se a imagem
• width• Descrição: especifica a largura da imagem
• height• Descrição: especifica a altura da imagem
• alt• Descrição: especifica o texto que irá aparecer quando
o mouse passar pela imagem
![Page 7: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/7.jpg)
EXEMPLO DO USO DA TAG IMG
<img src=‘audi.jpg’ alt=‘Versão…’
height=‘200px’ width=‘100px’>
![Page 8: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/8.jpg)
LINKS E IMAGENS
• É possível associar imagens a links
![Page 9: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/9.jpg)
EXERCÍCIO
1.Incluir uma imagem em uma página HTML
2.Associar um link a esta imagem
![Page 10: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/10.jpg)
LISTA DE ITENS NÃO ORDENADA
• Este é um exemplo de lista não ordenada
• Tag <ul> e vários <li>
![Page 11: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/11.jpg)
LISTA DE ITENS NÃO ORDENADA
• Exemplo:
<ul>
<li>Item 1.</li>
<li>Item 2.</li>
<li>Item 3.</li>
</ul>
![Page 12: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/12.jpg)
LISTA DE ITENS ORDENADA
• Este é um exemplo de lista ordenada
• Tag <ol> e vários <li>
![Page 13: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/13.jpg)
LISTA DE ITENS ORDENADA
• Exemplo:<ol>
<li>Item 1.</li>
<li>Item 2.</li>
<li>Item 3.</li>
</ol>
![Page 14: Uso de imagens e links com HTML](https://reader035.fdocumentos.tips/reader035/viewer/2022062300/5590b1c61a28abdf058b46dd/html5/thumbnails/14.jpg)
EXERCÍCIO
• Criem lista ordenadas e não ordenadas em vários itens
• Façam o uso de ambas as listas