Resumo Páginas 23-32
3.5.2 Caracteres Especiais em HTML
Além do copyright, HTML possui uma variedade de caracteres especiais para representar símbolos, acentuações e outras entidades. Por exemplo:
- “<” representa “<” (menor que).
- “>” representa “>” (maior que).
- “&” representa “&” (e comercial).
- ” ” representa um espaço não quebrável.
Exemplo 3: Utilizando Caracteres Especiais para Símbolos Matemáticos
Considere a expressão matemática “a < b + c.” Para exibir isso corretamente em HTML, usamos:
htmlCopy codea < b + c
4. Imagens e Gráficos
4.1 Diferenças entre os formatos dos gráficos
Existem três formatos comuns para gráficos na web: GIF, JPEG e PNG. Cada formato tem suas particularidades e aplicações específicas, principalmente relacionadas à compressão de imagens para transmissão na internet.
4.1.1 O formato GIF
O formato GIF é adequado para desenhos, botões e gráficos com poucas cores. Ele utiliza o algoritmo de compressão LZW para reduzir o tamanho da imagem.
4.1.2 O formato JPEG
O formato JPEG é ideal para fotografias devido à sua ampla gama de cores. Utiliza um algoritmo complexo para comprimir imagens, removendo cores de partes menos perceptíveis.
4.1.3 O formato PNG
O formato PNG combina as melhores qualidades de GIF e JPEG, sendo considerado por alguns como o formato futuro.
Exemplo 4: Aplicação de Diferentes Formatos de Imagens
Considere uma situação em que temos um desenho (GIF), uma fotografia (JPEG) e um gráfico com transparência (PNG) em uma página HTML:
htmlCopy code<img src="desenho.gif" alt="Desenho animado">
<img src="foto.jpg" alt="Fotografia de paisagem">
<img src="grafico.png" alt="Gráfico com transparência">
4.2 Inclusão de Imagens numa Página Web
Em HTML, há diversas formas para inserir e controlar a posição de imagens numa página. Uma abordagem comum é a utilização de elementos <img>.
4.2.1 Imagens do Tipo INLINE
Uma imagem do tipo inline é aquela que se posiciona entre o texto de uma página.
htmlCopy code<p>
<img src="imagem1.jpg" alt="Descrição da imagem 1">
Texto associado à imagem 1.
</p>
<p>
<img src="imagem2.jpg" alt="Descrição da imagem 2">
Texto associado à imagem 2.
</p>
4.2.2 Definição do Tamanho de uma Imagem
O tamanho de uma imagem pode ser parametrizado através dos atributos height e width. Estes atributos não modificam o tamanho do arquivo, mas afetam o espaço ocupado na página.
htmlCopy code<img src="imagem3.jpg" alt="Descrição da imagem 3" height="200" width="300">
4.2.3 Alinhamento das Imagens Relativamente ao Texto
Para controlar o arranjo do texto em relação à imagem, utiliza-se o atributo align com os valores left ou right.
htmlCopy code<img src="imagem4.jpg" alt="Descrição da imagem 4" align="left">
Texto alinhado à direita da imagem.
4.2.4 Alinhamento Vertical
O alinhamento vertical de uma imagem pode ser controlado com os valores “top”, “middle” e “bottom”.
htmlCopy code<img src="imagem5.jpg" alt="Descrição da imagem 5" align="top">
Texto com alinhamento superior à imagem.
4.2.5 Imagem Sem Texto
Quando uma imagem é independente do texto, cria-se um parágrafo isolado.
htmlCopy code<p align="center">
<img src="imagem6.jpg" alt="Descrição da imagem 6">
</p>
4.2.6 Formatações Adicionais para Imagens do Tipo INLINE
4.2.6.1 Legenda Alternativa à Visualização da Imagem
Adicionar a legenda alternativa é fundamental para casos em que a imagem não pode ser exibida.
htmlCopy code<img src="imagem7.jpg" alt="Descrição da imagem 7" title="Legenda da imagem 7">
4.2.6.2 Adicionar uma Bordadura à Imagem
Para adicionar uma bordadura a um gráfico, utiliza-se o atributo border.
htmlCopy code<img src="imagem8.jpg" alt="Descrição da imagem 8" border="5">
4.2.6.3 Imagens Responsivas
Tornar as imagens responsivas é crucial para uma experiência consistente em diferentes dispositivos.
htmlCopy code<img src="imagem9.jpg" alt="Descrição da imagem 9" class="imagem-responsiva">
CSS:
cssCopy code.imagem-responsiva {
max-width: 100%;
height: auto;
}
4.2.6.4 Galeria de Imagens
Criar uma galeria de imagens pode ser alcançado com facilidade usando listas e CSS.
htmlCopy code<ul class="galeria">
<li><img src="foto1.jpg" alt="Foto 1"></li>
<li><img src="foto2.jpg" alt="Foto 2"></li>
<li><img src="foto3.jpg" alt="Foto 3"></li>
</ul>
CSS:
cssCopy code.galeria {
list-style: none;
display: flex;
}
.galeria li {
margin: 10px;
}
4.2.6.5 Efeitos de Hover
Adicionar efeitos de hover às imagens pode tornar a experiência mais interativa.
htmlCopy code<img src="imagem10.jpg" alt="Descrição da imagem 10" class="efeito-hover">
CSS:
cssCopy code.efeito-hover:hover {
opacity: 0.8;
transition: opacity 0.5s ease-in-out;
}
Estes exemplos adicionais demonstram a versatilidade e aplicação prática dos conceitos discutidos anteriormente. A próxima seção continuará explorando
