<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria de Imagens</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 200px;
height: 150px;
margin: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Galeria de Imagens</h1>
<div class="gallery">
<img src="imagem1.jpg" alt="Imagem 1">
<img src="imagem2.jpg" alt="Imagem 2">
<img src="imagem3.jpg" alt="Imagem 3">
<img src="imagem4.jpg" alt="Imagem 4">
<img src="imagem5.jpg" alt="Imagem 5">
<img src="imagem6.jpg" alt="Imagem 6">
<img src="imagem7.jpg" alt="Imagem 7">
<img src="imagem8.jpg" alt="Imagem 8">
<img src="imagem9.jpg" alt="Imagem 9">
<img src="imagem10.jpg" alt="Imagem 10">
<img src="imagem11.jpg" alt="Imagem 11">
<img src="imagem12.jpg" alt="Imagem 12">
</div>
</body>
</html>
Explicação:
<!DOCTYPE html>: Declara o documento como HTML5.
<html lang="pt-BR">: Define o idioma do documento como Português do Brasil.
<head>: Contém metadados do documento.
<meta charset="UTF-8">: Define o charset como UTF-8 para suporte a caracteres especiais.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Define o viewport para responsividade.
<title>: Define o título da página, que aparece na aba do navegador.
<style>: Contém o CSS para estilizar a página.
<body>: Contém o conteúdo da página.
<h1>: Define um título de nível 1 para a galeria.
<div class="gallery">: Define um container para as imagens com a classe "gallery".
<img src="imagem1.jpg" alt="Imagem 1">: Insere uma imagem, definindo o atributo src com o caminho para o arquivo da imagem
e o atributo alt com um texto alternativo para acessibilidade. Repita este código para cada uma das 12 imagens,
alterando o nome do arquivo e o texto alternativo.
CSS: O código CSS dentro das tags <style> define o estilo da galeria:
.gallery:
display: flex: Define a exibição como flexbox para melhor controle de posicionamento.
flex-wrap: wrap: Permite que as imagens quebrem para uma nova linha se não couberem na largura do container.
justify-content: center: Centraliza as imagens horizontalmente dentro do container.
.gallery img:
width: 200px: Define a largura das imagens.
height: 150px: Define a altura das imagens.
margin: 10px: Adiciona uma margem de 10px em torno de cada imagem.
border: 1px solid #ccc: Adiciona uma borda cinza de 1px.
Observações:
Imagens: Substitua os nomes dos arquivos imagem1.jpg, imagem2.jpg, etc. pelos nomes reais das imagens que você irá usar.
Caminho das imagens: Certifique-se de que os caminhos para os arquivos das imagens estejam corretos em relação ao local onde
o arquivo HTML está salvo. Você pode usar caminhos relativos ou absolutos.
CSS: Personalize o CSS de acordo com seus requisitos para criar o estilo que você deseja para a galeria.