Aula 3
HTML/CSS
Listas Prof. Niltemberg Carvalho
Imagens
O que vamos ver hoje
● Imagens
Imagens HTML
● As imagens podem melhorar o design e a aparência de uma
página da web.
<img src="pic_trulli.jpg" alt="Italian Trulli">
Sintaxe de imagens HTML
● A tag <img> HTML é usada para inserir uma imagem em uma
página da web.
● A tag <img> é vazia, contém apenas atributos e não possui uma
tag de fechamento.
● A tag <img> tem dois atributos obrigatórios:
○ src - especifica o caminho para a imagem
○ alt - especifica um texto alternativo para a imagem
<img src="url" alt="alternatetext">
O atributo src
● O atributo src é obrigatório e especifica o caminho (URL) para a
imagem.
● OBS.: Quando uma página da web é carregada; é o navegador,
que pega a imagem de um servidor web e a insere na página.
Portanto, certifique-se de que a imagem realmente permaneça
no mesmo lugar em relação à página da web, caso contrário,
seus visitantes receberão um ícone de link quebrado.
● O ícone de link quebrado e o alt texto são mostrados se o
navegador não conseguir encontrar a imagem.
O atributo alt
● O atributo alt é obrigatório e fornece um texto alternativo para
uma imagem, se o usuário por algum motivo não puder
visualizá-la (devido à conexão lenta, um erro no atributo src ou
se o usuário usar um leitor de tela).
● O valor do atributo alt deve descrever a imagem:
<img src="[Link]" alt="logo do governo do estado do ceará">
OBS: Um leitor de tela é um programa de software que lê o código HTML
e permite ao usuário "ouvir" o conteúdo. Os leitores de tela são úteis para
pessoas com deficiência visual ou com dificuldades de aprendizagem.
Tamanho da imagem
● Os atributos width e height sempre definem a largura e a altura
da imagem em pixels.
<img src="[Link]" alt="logo do governo do estado
do ceará" width="500" height="600">
Imagens em outro servidor/site
● Alguns sites apontam para uma imagem em outro servidor.
● Para apontar para uma imagem em outro servidor, você deve
especificar um URL absoluto (completo) no atributo src:
<img
src="[Link]
jpg" alt="[Link]">
Formatos de imagens comuns
● Aqui estão os tipos de arquivo de imagem mais comuns, que
são compatíveis com todos os navegadores (Chrome, Edge,
Firefox, Safari, Opera):
Abreviação Formato de arquivo Extensão do arquivo
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Listas HTML
● As listas HTML permitem que os desenvolvedores da web
agrupem um conjunto de itens relacionados em listas.
Lista não ordenada
● Uma lista não ordenada começa com a tag <ul>. Cada item da
lista começa com a tag <li>.
● Os itens da lista serão marcados com marcadores (pequenos
círculos pretos) por padrão:
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Lista ordenada
● Uma lista ordenada começa com a tag <ol>. Cada item da lista
começa com a tag <li>.
● Os itens da lista serão marcados com números por padrão:
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Lista ordenada - O Atributo type
● O atributo type da tag <ol> define o tipo do marcador do item
da lista:
Tipo Descrição
type=”1” Itens da lista são ordenados com número (padrão)
type=”A” Itens da lista são ordenados com letras maiúsculas
type=”a” Itens da lista são ordenados com letras minúsculas
type=”I” Itens da lista são ordenados com números romanos maiúsculos
type=”i” Itens da lista são ordenados com números romanos minúsculos
Lista de descrição
● Uma lista de descrição é uma lista de termos, com uma
descrição de cada termo.
● A tag <dl> define a lista de descrição, a tag <dt> define o termo
(nome) e a tag <dd> descreve cada termo:
<dl>
<dt>Café</dt>
<dd>- bebida preto quente</dd>
<dt>Leite</dt>
<dd>- bebida branco frio </dd>
</dl>
Dúvidas ?