Un carroussel de imágenes en HTML

Código HTML

En primer lugar creá un «div», y dentro del div colocá las imágenes. Tratá de que todas las imágenes tengan el mismo tamaño.

<div class=»contenedor»>
<img src=»imagen1.jpg» alt=»imagen1″>
<img src=»imagen2.jpg» alt=»imagen2″>
<img src=»imagen3.jpg» alt=»imagen3″>
</div>

Código CSS

Hacé que el div tenga una estructura de grid, con tantas columnas como imágenes.
Pero el secreto está en que todas las columnas tengan 100% de ancho.
Luego agregamos las propiedades animation y position.
Y finalizamos con la definición de los @keyframes

.contenedor {
display: grid;
grid-template-rows: 200px;
grid-template-columns: 100% 100% 100%;
animation: carrousel 15s infinite;
position: relative;
}
@keyframes carrousel {
from { right: 0%; }
50% { right: 100%;
Seguir leyendo

Guía del programador web

Diccionario HTML

https://www.entramar.mvl.edu.ar/diccionario-html
Diccionario CSS

https://www.entramar.mvl.edu.ar/diccionario-css
Página para editar y probar código https://replit.com
Página para subir imágenes https://es.imgbb.com
Selector de colores

https://www.google.com/search?q=color+picker
Una barra de navegación en HTML https://www.entramar.mvl.edu.ar/una-barra-de-navegacion-en-html
Un carrousel de imágenes en HTML https://www.entramar.mvl.edu.ar/un-carroussel-de-imagenes-en-html

 …

Seguir leyendo

Diccionario CSS

 

Selectores de etiqueta p { }
Selectores de clase .clase { }
Selectores de id .id { }
Pseudoselector «mouse over» :hover { }
Pseudoselector «al hacer clic» :active { }

 

Color de texto color: blue;
color: #0000FF;
color: rgb(0, 0, 256);
Color de fondo background-color: lightblue;
Ancho y alto width: 20%;
height: 120px;
Bordes border: 2px solid black;
Ancho / Estilo / Color
Estilos: solid, dotted, dashed, double, groove
Bordes redondeados border-radius: 10px;
Sombreados box-shadow: 5px 10px 20px red;
Desplazamiento horizontal / Desplazamiento vertical /  Ancho del difuminado / Color
Márgenes margin: 10px 5px 10px 5px;
o
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
Relleno padding:
Seguir leyendo

Diccionario HTML

Estructura básica <!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width»>
<title>Título de la pestaña del navegador</title>
<link href=»style.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<!–Comentario–>
</body>
</html>
Secciones principales <header></header>
<main></main>
<footer></footer>
Otras secciones <section></section>
<article></article>
<div></div>
Párrafo <p></p>
Texto destacado <span></span>
Niveles de encabezado <h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Lista no ordenada <ul></ul>
<ul type=”disc”> genera viñetas con forma de disco
<ul type=”square”> genera viñetas cuadradas
Lista ordenada <ol></ol>
<ol type=”A”> genera listas ordenadas alfabéticamente
Lista (ítems) <li></li>
Imágenes <img src=»link_a_la_imagen» alt=»descripcion_de_la_imagen»>
Enlaces <a href=»link_al_enlace»>Página externa</a>
<a href=”#seccion_interna”>Sección interna</a>
Código incrustado <iframe></iframe>
Videos de YouTube, Mapas de Google Maps, Audios de SoundCloud, Presentaciones
Seguir leyendo

Una barra de navegación en HTML

Código HTML

Una barra de navegación puede ir en cualquier lugar de la página, pero en general se coloca arriba, en el header, antes del encabezado principal (h1).
En HTML se usan las etiquetas <nav> y </nav> para delimitarla.
Y dentro del bloque nav construimos una lista no ordenada con los ítems que queremos que haya en el menú.
Además, a cada ítem le agregamos un link para que al hacer clic nos lleve a la sección de la página que queramos.

<header>
<nav>
<ul>
<li><a href=»#inicio»>Inicio</a></li>
<li><a href=»#productos»>Productos</a></li>
<li><a href=»#contacto»>Contacto</a></li>
</ul>
</nav>
<h1>Título de la página</h1>
</header>
<main>
<h2 id=»inicio»></h2>
<h2 id=»productos»></h2>
<h2 id=»contacto»></h2>
</main>

Código CSS

¿Cómo hacemos …

Seguir leyendo

Dictados gráficos

Los «dictados gráficos» son una actividad educativa que combina elementos de lenguaje y arte para fomentar la creatividad y el desarrollo de habilidades cognitivas y motoras en los niños. En lugar de escribir palabras o frases, los niños crean representaciones visuales. Estas actividades también estimulan y desarrollan las habilidades de percepción visual en diferentes planos: derecha-izquierda, arriba-abajo, diagonal ascendente y descendente-derecha, diagonal ascendente y descendente-izquierda.

Replicar estos ejercicios perceptivo-motores de lateralidad y orientación espacial estimulan y desarrollan la estructuración espacial en el papel. Las actividades contribuyen a la interiorización y maduración de las nociones espaciales, así como al afianzamiento de la distribución y de la posición en el espacio.

La …

Seguir leyendo

Lenguaje de programación. Primeros pasos en la escuela Emma

Los niños y niñas de esta edad tienen una mente curiosa y están ansiosos por aprender, por lo que es un buen momento para empezar a construir una base sólida en pensamiento computacional.

Los estudiantes de la Escuela Primaria Municipal, Emma Pérez Ferreira comenzaron a dar los primeros pasos en lenguaje de programación. Compartimos la secuencia de experiencias llevadas a cabo en las últimas clases…

Realizaron diversas actividades transitando un paso a paso para afianzar conceptos.

Comenzaron aprendiendo el Concepto de Algoritmo:  es una serie de pasos o instrucciones ordenadas que se siguen para resolver un problema o realizar una tarea específica. Un algoritmo es como una receta que se …

Seguir leyendo