Como Colocar Foto Lado A Lado

Como Colocar Foto Lado a Lado no HTML

Introdução

Hoje em dia, muitos sites e blogs precisam exibir imagens de maneira organizada e harmoniosa. Uma das formas mais eficazes para isso é alinhar duas ou mais fotos lado a lado em uma única linha. No entanto, fazer isso usando HTML pode ser um desafio. Este artigo vai te ensinar como colocar fotos lado a lado utilizando HTML puro com algumas dicas de CSS.

Preparando as Imagens

Antes de começar a codificar no HTML e CSS, é importante que suas imagens estejam prontas e organizadas na estrutura do seu projeto. Cada imagem deve estar em um diretório específico ou em uma pasta estática dentro da raiz do projeto para que o navegador possa carregá-las corretamente.

Por exemplo, suponha que você tenha duas imagens chamadas `imagem1.jpg` e `imagem2.jpg`, ambos localizados na pasta `imagens`.

Código HTML Básico

Para colocar as fotos lado a lado, você pode usar uma tabela (`

`), ou até mesmo a estrutura flexível do CSS (usando `

`). Aqui estão exemplos de cada um desses métodos:

Usando Divs com Flexbox

Flexbox é uma boa opção para alinhar itens em uma linha horizontal.

“`html

“`

No CSS, você pode adicionar as seguintes regras para alinhar as fotos lado a lado:

“`css
.container {
display: flex;
}
“`

Usando Tabelas

Embora não seja o método mais moderno, tabelas também podem ser usadas de maneira simples.

“`html

“`

Usando Divs com Grid Layout

O método CSS grid também pode ser usado para alinhar as imagens lado a lado.

“`html

“`

No CSS, adicione:

“`css
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
“`

Personalização e Responsividade

Para que as imagens se comportem de maneira adequada em diferentes dispositivos e resoluções, é importante considerar a responsividade. Você pode ajustar a largura das divs ou tabelas para que se adaptem automaticamente às janelas do usuário.

Adicione uma regra de CSS que define uma largura máxima ou mínima:

“`css
.container img {
max-width: 100%;
}
“`

Conclusão

Colocar fotos lado a lado no HTML é algo simples e pode ser feito de várias maneiras. Flexbox, tabelas e o layout grid são as abordagens mais modernas e práticas para alcançar esse objetivo. Em qualquer caso, sempre lembre-se de usar descrições (`alt`) para as imagens para melhorar a acessibilidade do seu site.

Com esses exemplos e dicas, você já pode começar a alinhar suas fotos lado a lado de forma profissional em sua página web ou blog.