HTML: Elementos de Cores e Imagens

1. Introdução: A Importância do Visual na Web

O HTML, como vimos, é a estrutura esquelética da nossa página. Agora, é hora de dar vida a ela. Neste encontro, vamos aprender a adicionar cores e imagens para tornar nossas páginas web visualmente atraentes e funcionais. Uma boa escolha de cores e imagens não apenas melhora a estética, mas também a usabilidade e a performance do site.

2. Cores no Desenvolvimento Web (CSS Inline)

As cores podem ser aplicadas a textos, fundos e outros elementos diretamente nas tags HTML, utilizando o atributo style. Essa é a forma que vamos utilizar neste encontro para dar os primeiros passos na estilização.

Hexadecimal

É a forma mais utilizada. Consiste em um símbolo # seguido de seis caracteres (0-9, A-F) que representam a combinação de vermelho, verde e azul (RGB).

#000000 (preto)
#FFFFFF (branco)
#FF0000 (vermelho puro)

RGB (Red, Green, Blue)

Permite especificar a quantidade de cada cor primária usando valores de 0 a 255.

rgb(0, 0, 0) (preto)
rgb(255, 255, 255) (branco)
rgb(255, 0, 0) (vermelho puro)

Como aplicar cores com CSS Inline

Para aplicar um estilo, use o atributo style dentro da tag HTML. Para mudar a cor do texto, use a propriedade color. Para mudar a cor do fundo de um elemento, use a propriedade background-color.

Exemplo:

<p style="color: #336699;">Este parágrafo terá a cor azul.</p>
<h1 style="background-color: rgb(200, 200, 200);">Este cabeçalho terá um fundo cinza.</h1>

3. Imagens na Web

As imagens são elementos essenciais para qualquer página. No HTML, usamos a tag <img> para inserir uma imagem.

Tag <img>

É uma tag de fechamento automático. Possui atributos importantes:

src: (Source) O caminho (URL) para o arquivo da imagem.
alt: (Alternative Text) Texto alternativo que descreve a imagem. É crucial para a acessibilidade (leitores de tela) e para o SEO, além de ser exibido caso a imagem não carregue.

Exemplo:

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem para acessibilidade." />

Tipos de Imagens para Web:

A escolha do formato da imagem afeta a qualidade, o tamanho do arquivo e o tempo de carregamento da página.

JPEG/JPG: Ideal para fotos e imagens com muitas cores. Possui compressão com perdas, o que significa que o tamanho do arquivo é pequeno, mas a qualidade pode diminuir.
PNG: Ideal para imagens com transparência, logos e ícones. Possui compressão sem perdas, mantendo a qualidade, mas o tamanho do arquivo pode ser maior.
GIF: Usado para animações curtas e imagens com poucas cores.
SVG (Scalable Vector Graphics): Imagens vetoriais baseadas em XML, perfeitas para ícones, logos e ilustrações. Elas não perdem a qualidade ao serem redimensionadas e geralmente possuem um tamanho de arquivo muito pequeno.

Otimização de Imagens: Por que é importante?

Imagens pesadas são a principal causa de lentidão em sites. Otimizar uma imagem significa reduzir seu tamanho de arquivo sem comprometer significativamente a qualidade. Isso melhora a performance do site e a experiência do usuário.

Dicas de Otimização:

Escolha o formato correto para a sua imagem.
Comprima a imagem usando ferramentas online (TinyPNG, Compressor.io) ou softwares gráficos.
Redimensione a imagem para o tamanho exato em que ela será exibida na página.

4. Imagens de Fundo com CSS Inline

Além da tag <img>, podemos usar imagens como fundo de um elemento. Usamos o atributo style para aplicar a propriedade background-image.

background-image: Define a URL da imagem de fundo.
background-repeat: Controla como a imagem se repete. Valores comuns: no-repeat.
background-size: Ajusta o tamanho da imagem de fundo. Valores comuns: cover (cobre toda a área), contain (ajusta-se à área).
background-position: Posiciona a imagem. Valores comuns: center, top, bottom, left, right.

Exemplo:

<body style="background-image: url('caminho/para/fundo.jpg'); background-repeat: no-repeat; background-size: cover;">
    </body>

5. Atividade Prática: “O Designer Web”

Objetivo: Replicar visualmente um layout simples usando apenas HTML e as técnicas de cores e imagens com CSS Inline.

Desafio:

Você e seu grupo receberão uma imagem estática de um layout de tela.
Em seu editor de código, crie um novo arquivo HTML.
Analise o layout para identificar os seguintes elementos:
- As cores de fundo e de texto utilizadas.
- As imagens de conteúdo (que devem ser usadas com a tag <img>).
- As imagens que podem ser usadas como fundo de um elemento (com CSS Inline).
Utilize o conta-gotas do navegador ou uma ferramenta de edição de imagem para descobrir os códigos de cor em hexadecimal ou RGB.
Recrie o layout o mais fielmente possível, focando em como os elementos visuais são inseridos e manipulados no código, aplicando todos os estilos de forma inline.
Preste atenção à otimização das imagens que você usar.

Critérios de Sucesso:

Precisão na aplicação das cores.
Utilização correta da tag <img> e do background-image com CSS Inline.
Otimização das imagens utilizadas para a web.
Trabalho colaborativo em grupo para resolver o desafio.

6. Perguntas para Revisão

Qual é a principal diferença entre os formatos de imagem JPEG e PNG? Quando você usaria cada um?
Por que o atributo alt na tag <img> é tão importante?
Qual a principal razão para otimizar imagens em um site?
O que é um código hexadecimal de cor? Dê um exemplo.
Quais propriedades do CSS Inline você usaria para garantir que uma imagem de fundo ocupe toda a tela e não se repita?