¡Fotos con
Estilo! Dominando Imágenes y <div>s con CSS
PRIMERAS
MODIFICACIONES PARA EL PROYECTO 1
1. Objetivos de la Clase:
·
Comprender el propósito y uso de la etiqueta
<img>.
·
Aprender cómo insertar imágenes en una página
web.
·
Explorar diferentes atributos de la etiqueta
<img> (especialmente src, alt, width y height).
·
Entender el uso del elemento <div> como
contenedor.
·
Aprender a usar CSS para controlar el tamaño,
la posición, los bordes y otros estilos de imágenes y <div>s.
·
Familiarizarse con las propiedades de CSS como
border-radius, width, height, margin, padding.
2. Introducción a la importancia de la accesibilidad web
(atributo alt).
Herramientas:CodePen (https://codepen.io/)
Pregunta: ¿Por qué son importantes las imágenes en una
página web? (Atraen la atención, ilustran el contenido, etc.)
Breve Repaso:
·
¿Qué saben sobre HTML y CSS hasta ahora?
·
Recordar rápidamente las etiquetas HTML básicas
(como <html>, <head>, <body>, <p>), y las etiquetas semanticas
·
Recordar brevemente cómo enlazar CSS a un
archivo HTML.
3. Etiqueta IMG
El Poder de la Etiqueta <img>
¿Qué es la Etiqueta <img>?
La etiqueta <img> es la encargada de mostrar imágenes
en una página web. A diferencia de otras etiquetas, no tiene etiqueta de
cierre.
Atributo src: El atributo src especifica la URL
(dirección) de la imagen que se va a mostrar.
Ejercicio 1 en CodePen: Copiar la estructura html
del proyecto 1 en Codepen
Dentro del <body>, Busque la etiqueta <img> y
remplace toda esa linea con la que le corresponde a usted sea un jovencito o
una jovencita, tal como debe quedar en su proyecto de examen de periodo.
<img
src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg">
Atributo alt: Explica que el atributo alt proporciona
un texto alternativo para la imagen. Es muy importante para la accesibilidad
(para personas con discapacidad visual) y para el SEO (motores de búsqueda).
Ejercicio 2 en CodePen: Agreguen el atributo
alt a la etiqueta <img>:
<img
src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg"
alt="Foto de Javier">
Atributos width y height: Explica que estos
atributos controlan el tamaño de la imagen. Es mejor usar CSS para esto (más
adelante), pero es importante conocerlos.
Ejercicio en CodePen: Agreguen los atributos
width y height a la etiqueta <img>:
<img
src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg"
alt="Foto de Javier" width="200" height="200">
Experimenten con diferentes valores en width="200" height="200".
4. <div>s: Los Contenedores Mágicos
¿Qué es un <div>?
Ejercicio 3 en CodePen: Crea un nuevo
<div> alrededor de la etiqueta <img>:
<div>
<img
src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg"
alt="Foto de Javier" width="200" height="200">
</div>
Pregunta: ¿Ven algún cambio en la página? (Probablemente
no, porque no hemos aplicado estilos).
5. Clases y IDs: Las clases y los IDs se usan para
seleccionar elementos HTML específicos y aplicarles estilos CSS.
Agrega una clase al <div>:
<div class="profile-picture">
<img
src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg"
alt="Foto de Javier" width="200" height="200">
</div>
Ahora podemos usar la clase profile-picture para aplicar
estilos a este <div> específico.
CSS: ¡Estilo para Imágenes y <div>s!
CSS Básico:
Enlazar CSS a HTML (usando la etiqueta <style> dentro
del <head>, o un archivo CSS externo). En CodePen, pueden escribir CSS
directamente en el panel de CSS.
Estilizando el <div>:
En el panel de CSS, escribe las siguientes reglas para la
clase profile-picture:
.profile-picture {
margin-top: 20px;
/* Espacio arriba */
text-align: center;
/* Centrar el contenido (la imagen) */
}
Explicación qué hacen cada una de estas propiedades.
Estilizando la Imagen:
Agrega las siguientes reglas para la etiqueta <img>
dentro del <div> con clase profile-picture:
.profile-picture img {
width: 150px; /*
Ancho */
height: 150px; /*
Alto */
border-radius: 50%;
/* Hace la imagen circular */
border: 3px solid
#4CAF50; /* Borde verde */
}
Explicación de cada una de estas propiedades:
·
width y height: Controlan el tamaño de la
imagen.
·
border-radius: Redondea las esquinas de la
imagen. 50% la convierte en un círculo.
·
border: Crea un borde alrededor de la imagen.
(tamaño, estilo, color)
Experimentar con diferentes valores para estas propiedades.
Por ejemplo:
·
Cambiar el color del borde.
·
Hacer el borde más grueso o más delgado.
·
Cambiar el border-radius a diferentes valores
(por ejemplo, 10px) para crear esquinas redondeadas.
margin y padding: Explicar cómo margin añade espacio fuera
del borde de un elemento, y padding añade espacio dentro del borde.
Ejemplo:
.profile-picture {
margin-top: 30px;
padding: 10px;
background-color:
#f0f0f0; /* Un fondo gris claro para ver el padding */
}
Experimentar con margin y padding en el <div> y en la
imagen.
Revisión y Desafío
·
¿Para qué sirve la etiqueta <img>?
·
¿Qué es el atributo alt y por qué es
importante?
·
¿Qué es un <div> y cómo se usa?
·
¿Cómo se usan las clases CSS para aplicar
estilos a elementos específicos?
7. Desafío: Tarea para la proxima clase
En su USB crear pagina con otra imagen dentro de un nuevo
div
Que le apliquen estilos CSS diferentes a la nueva imagen
(por ejemplo, un borde de otro color, un tamaño diferente, etc.).
Que centren la nueva imagen en la página usando CSS.
8. CODIGO PLANTILLA MODIFICACION 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página de Presentación</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
text-align: center;
}
.profile-picture {
margin-top: 20px;
}
.profile-picture img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #4CAF50;
}
</style>
</head>
<body>
<header>
<h1>¡Hola, soy Javier!</h1>
</header>
<div class="profile-picture">
<img src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg" alt="Foto de perfil">
</div>
<div>
<p>
Soy un apasionado de la tecnología y la informatica. Me encanta aprender, crear y compartir mis conocimientos con los demás.
Si deseas saber más sobre mí o trabajar juntos, no dudes en contactarme.
</p>
</div>
<div>
<a href="https://facebook.com/" target="_blank">Facebook</a>
<a href="https://twitter.com/" target="_blank">Twitter</a>
<a href="https://linkedin.com/" target="_blank">LinkedIn</a>
</div>
</body>
</html>
