Creación de la
Estructura HTML
- Instrucciones:
- "Abran su editor de texto y creen un nuevo
archivo llamado index.html."
- "Vamos a escribir la estructura básica de
HTML:"
- Guía Paso a Paso HTML:
Paso
1: Escribe la estructura básica:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Mi
Galería</title>
</head>
<body>
</body>
</html>
Paso 2: Crea el header:
<header>
<h1>Galería de Imágenes</h1>
</header>
Paso 3: Crea la sección gallery con las
imágenes.
<section
class="gallery">
<img src="imgs/img01.jpg" alt="Imagen
1">
<img src="imgs/img02.jpg" alt="Imagen
2">
<img src="imgs/img03.jpg" alt="Imagen
3">
</section>
Paso
4: Crea el footer:
<footer>
<p>© 2024 Mi Galería. Todos los
derechos reservados.</p>
</footer>
- Guía Paso a Paso APLICAR CSS:
·
"Ahora vamos a
darle estilo a nuestra galería con CSS.
·
Agregaremos un
bloque <style> dentro de la etiqueta <head>."
Paso 5: Agrega el
bloque <style>:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Galería</title>
<style>
/*Aquí
vienen las reglas css */
</style>
</head>
Paso 6: Estilo básico del body: dentro de las
etiquetas <style> y </style> escribimos (copiar y pegar)…
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
Paso 7: Estilo del header:
header
{
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
header
h1 {
margin: 0;
font-size: 2em;
}
Paso 8: Estilo de la gallery:
.gallery
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
gap: 15px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.gallery
img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s
ease;
}
.gallery
img:hover {
transform: scale(1.05);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
Paso 9: Estilo
del footer:
footer
{
text-align: center;
padding: 10px 0;
background-color: #4CAF50;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
Paso 10: Guarde como html y ejecute la pagina
No hay comentarios:
Publicar un comentario