Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El elemento HTML <img> incrusta una imagen dentro de un documento. A continuación, veremos cómo funciona.
La etiqueta <img> va siempre dentro del contenedor <body>, pues es un elemento visible.
<img src=“ubicación de la imagen” alt=“descripción de la imagen”>
Con esta misma estructura, podemos utilizar el siguiente ejemplo de un estudiante cansado:
<img src=“https://www.ipp.edu.pe/blog/wp-content/uploads/2020/05/shutterstock_1489158410.jpg” alt=“estudiante cansado”>
Al añadir el código que acabamos de crear a un documento, la imagen que se mostrará en el navegador es la siguiente:
La etiqueta img cuenta con dos atributos, el atributo “src” y el segundo atributo es “alt”. Ambos son importantes.
El atributo de “src” es para mostrar en dónde se encuentra la imagen que vamos a incrustar. Las imágenes se pueden obtener de alguna carpeta o una URL que obtengamos de internet.
alt sirve para agregar una descripción a nuestra imagen. Esto es útil por cuestiones de SEO y también para accesibilidad (por ejemplo para personas con visión reducida).
Aporte creado por: María del Pilar Chavez, Brayan Mamani
Aportes 955
Preguntas 157
La razón por la cuál la imagen se “rueda” un poquito de su posición original es porque la etiqueta <figure> trae unos márgenes por defecto, los cuales son de 40px a los lados izquierdo y derecho y 16px arriba y abajo. Antes de usar esta etiqueta, lo mejor es resetear sus estilos:
figure {
margin: 0;
}
Imagino que esto se verá en el módulo de CSS 😃
Bueno esto va quedando así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="Lista de frutas, verduras y carnes con deliciosas recetas"
/>
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>Soy la lista del super!</title>
</head>
<body>
<header>
<nav>
<a href="#">Lista</a>
</nav>
</header>
<main>
<h1>Soy la lista del super!</h1>
<ul>
<li>Frutas</li>
<ol>
<li>
<img
src="./public/img/sandia.jpg"
alt="Es la imagen de una Sandía"
width="50"
/>
<a
href="https://www.elespanol.com/cocinillas/recetas/20170623/recetas-ultrafaciles-refrescarte-base-sandia/1000903959597_30.html"
>Sandía</a
>
</li>
<li>
<img
src="./public/img/uvas.jpg"
alt="Es la imagen de unas uvas"
width="50"
/>
<a
href="https://cookpad.com/co/recetas/115099-mermelada-de-uvas-casera"
>Uvas</a
>
</li>
<li>
<img
src="./public/img/peras.jpg"
alt="Es la imagen de unas peras"
width="50"
/>
<a
href="https://antojandoando.com/recetas/postres-y-panaderia/peras-en-almibar/"
>Peras</a
>
</li>
</ol>
<li>Carnes</li>
<ol>
<li>
<img
src="./public/img/bistec.jpg"
alt="Es la imagen de un bistec"
width="50"
/>
<a
href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/bistec-con-papas/"
>Bistec</a
>
</li>
<li>
<img
src="./public/img/pollo.jpg"
alt="Es la imagen de un pollo asado"
width="50"
/>
<a
href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/recetas-de-pollo-faciles/"
>Pollo</a
>
</li>
<li>
<img
src="./public/img/costillas_cerdo.jpg"
alt="Costillas de Cerdo asado"
width="50"
/>
<a href="https://www.youtube.com/watch?v=peJi_0fx3PM"
>Costillas de Cerdo</a
>
</li>
</ol>
<li>
Verduras
<ol>
<li>
<img
src="./public/img/brocoli.jpeg"
alt="Imagen de un Brócoli"
width="50"
/>
<a href="https://www.youtube.com/watch?v=J8dayLLFSVM">Brócoli</a>
</li>
<li>
<img
src="./public/img/papa.png"
alt="Papas Criollas"
width="50"
/>
<a
href="https://antojandoando.com/recetas/papas/papas-en-mantequilla/"
>Papas Criollas</a
>
</li>
<li>
<img
src="./public/img/platano.jpg"
alt="Imagen de Plátanos"
width="50"
/>
<a
href="https://www.quericavida.com/recetas/empanadas-de-platano-maduro-y-queso/21b4e266-eff2-4870-8b10-875045b015bb"
>Plátano</a
>
</li>
</ol>
</li>
</ul>
</main>
<footer>
<p>Developer Eduerpj ©2020</p>
</footer>
</body>
</html>
Una forma de optimizar nuestro sitio web con las imagenes o iframes, es colocando en la etiqueta img el atributo loading con el valor lazy.
<img loading="lazy" src="manzana.png" alt="People">
Atributo loading
El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores:
Un dato curioso sobre Instagram y Alts en imágenes:
Desde hace unos años, Facebook incorpora en sus productos una forma dinámica de asignar tags a las fotos. En este ejemplo (puede inspeccionar una imagen en Instagram y buscar la etiqueta img) automágicamente crea un alt con el nombre del usuario, las personas etiquetadas y, lo más interesante: un texto que dice lo que podría contener la imagen. Y como pueden ver, la predicción es buena contando personas.
[Inserte gif de ¡Nos destruirán a todos! aquí debajo]
Si ya hicieron el curso de GIT y GITHUB, pueden utilizar esas tecnologías para ayudarse en los demás cursos 😃 Por ejemplo, yo tengo una rama con el código que hace Diego en cada clase, y otra rama donde voy desarrollando el código de mi lista de supermercado
Hay una forma de poder generar la estructura básica de nuestro index sin que tengamos que codearlo todo:
¡ + tab o html:5 + Tab
Se recomienda descargar los tamaños de imágenes grande, mediano y pequeña. Luego las tratamos en Tinypng.
La etiqueta imagen nos ayuda a poder renderizar las imágenes, tiene 2 atributos, el primero es source src para decirle en donde se encuentra la imagen que queremos enseñar. Tenemos dos formas, podemos sacar la imagen de alguna carpeta o podemos sacar la imagen de alguna url que tengamos en internet. El segundo atributo es alt que es una descripción que le vamos a dar a la imagen y esto nos sirve para dos cosas: primero, cuando la imagen no se logre renderizar va poder decir ahí cual es la descripción de esa imagen en caso de que no se vea, el segundo es que el alt nos ayuda para temas de accesibilidad. Ambos son importantes
<img src="" alt="">
<img src="./small.jpg" alt="Es una imagen de un perrito" />
La etiqueta de imagen no es la única que tenemos, hay otra que se llama figure, esto nos ayuda para poder generar un contenedor para la imagen.
<figure>
<img src="./small.jpg" alt="Es una imagen de un perrito" />
</figure>
Las carpetas de nuestros proyectos no pueden tener espacios en sus nombres. También es importante colocar la información de la imagen en el atributo alt para que si por algún motivo no se llega a cargar en el navegador se muestre la información suministrada. Además de ser necesaria para temas de accesibilidad.
.
Les dejo mi ejercicio, pueden entrar a ver el repositorio y lo cambios de los archivos en este link: https://github.com/DaverSoGT/Curso-Definitivo-HTML-y-CSS/tree/lista
La etiqueta <img> va dentro de <body> + <main> + <section> y la etiqueta va así:
<img src=“” alt=“”>
La etiqueta img cuenta con dos atributos, el atributo “src” y el segundo atributo es “alt” ambos son importantes.
El atributo de “src” es para decirle en donde se encuentra la imagen que queremos enseñar, las imágenes se pueden sacar de alguna carpeta o alguna url que tengamos en internet.
Poniendo src=“./ solito VSCode te dará el nombre en donde esta ubicada tu imagen, solo das click y listo.
NOTA: En caso de que el nombre de tu imagen lleve algún espacio deberas sustituir ese espacio con un guion o guion medio.
<alt sirve para poner la descripción de nuestra imagen y también nos ayuda con temas de accesibilidad. Es importante poner alt.
Minuto 2:31, el profesor agarra las imágenes y las arrastra desde una carpeta a la página tinypng
Ya que estamos trabajando desde (WSL en mi caso) y en el curso de prework no se menciona, no hay forma desde el VScode de arrastrar las imágenes directo a la página tinypng, ya que el acceso queda denegado.
Luego de 30 min dando vueltas para saber que estaba pasando, porque no podía acceder a la carpeta pics y arrastrar las imágenes encontré que en VScode hay un atajo para abrir la carpeta en la cual estás trabajando desde WSL. Por si a alguien le paso lo mismo dejo la imagen, En caso de que alguien sepa como arrastras un archivo desde el VScode a Windows por favor avisar.
No me gusto mucho hacer una lista del super así que hice un lista de zapatos por marca usando 3 marcas diferentes
Hola amigos, les comparto el reto No. 2, usé la etiqueta <br> para el salto de línea, y adicionalmente a la etiqueta <img> le coloque los atributos width y height para modificar el tamaño de las imágenes directamente. (Intencionalmente ocacione un daño en la primera imagen para probar el atributo alt.
.
.
Para este tipo de ejercicios les recomiendo usar lorempixel y les irá generando imágenes de acuerdo a la selección que hayan puesto incluyendo el tamaño.
Por ejemplo, yo seleccioné Sports:
Y cada que refrescan les genera una nueva, espero les funcione 😃
Recomiendo ingresar a la documentación
https://devdocs.io/html/element/img
Como quedó:
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<p>desafio</p>
</header>
<main>
<section>
<h1>Soy la lista del super!</h1>
<ul>
<li>Frutas</li>
<ol>
<section>
<li>Manzana</li>
<figure>
<img src="https://lh3.googleusercontent.com/proxy/ZJIOVy5DpzARIFpU12vUUHCbgz7rEAyusd_cbtM6McMm1Ks1mgYVhKXI0qZTLV5zo8GOW0e3p98Ave0DtVsejlmqwZHQBOthkFm8KRNlRIQISefbkcHqjwQOdnWVQ-4jrlYfMv08unq79WGvBvmpqHeAGfBhd4uz-avjdNClCRyqJmSsk4I" width="150px" height="150px" alt="Una manzana">
</figure>
</section>
<section>
<li>Plátano</li>
<figure>
<img src="https://thumbs.dreamstime.com/b/pl%C3%A1tano-pelado-2514268.jpg" width="150px" height="150px" alt="">
</figure>
</section>
</ol>
<li>Carnes</li>
<ol>
<section>
<li>Pollo</li>
<figure>
<img src="https://img.vixdata.io/pd/jpg-large/es/sites/default/files/imj/elgranchef/p/pollo-a-la-francesa.jpg" width="150px" height="150px" alt="">
</figure>
</section>
<section>
<li>Carne molida</li>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Hackfleisch-1.jpg/1200px-Hackfleisch-1.jpg" width="150px" height="150px" alt="">
</figure>
</section>
</ol>
<li>Verduras</li>
<ol>
<section>
<li>Limón</li>
<figure>
<img src="https://cdn2.actitudfem.com/files/limon.jpg" width="150px" height="150px" alt="">
</figure>
</section>
<section>
<li><a href="https://www.recetasgratis.net/Zanahoria-busqCate-1.html">Zanahoria</a></li>
<figure>
<img src="https://img.freepik.com/foto-gratis/zanahorias-frescas-aisladas_43284-1682.jpg?size=626&ext=jpg" width="150px" height="150px" alt="">
</figure>
</section>
</ol>
</ul>
</section>
</main>
<footer>
<p>creado con amor</p>
</footer>
</body>
</html>
esta es mi lista de pendientes 😛
🖼 <img/> a diferencia de la gran mayoría de las demás etiquetas de HMTL, no necesita una etiqueta de cierre.
Hola querida comunidad, quisiera compartirles un gran dato que aprendí en un punto de mi carrera como diseñador grafico. El programa Adobe Lightroom nos funciona perfectamente para optimizar las imágenes, ya que nos permite en las opciones de exportación configurar el formato, tamaño, metadatos, proporción, incluso limitar la misma en el peso de la imagen. vean en la imagen podrán observar las opciones que podemos editar en Adobe Lightroom y en la parte inferior una prueba de la optimización que hice con esa imagen en específico, mas de 5MB lo convertí a menos de 400kb, el sacrificio fue el 50% del tamaño, la resolución es casi la misma, ni se nota. Espero les ayude en sus proyectos, saludos!
¿Que es mas recomendable? utilizar en <img> rutas de url es decir de una pagina web, o utilizar imágenes que tenga descargadas ¿que es mejor para la web?
Otro atributo para img es title
.
Nos sirve para que cuando le pasemos el cursor a la imagen por encima, va a ver el nombre de esa imagen
.
<img src="laruta" alt="nombreencasodequelaimagenserompa" title="nombredelaimagen">
Enserio que es muy frustrante cuando ves que alguien ya va muy avanzado. Yo en lo personal solo estoy repasando algunas cosas, pero hay algunos que apenas están aprendiendo. Esto es para todos los que ya saben mucho más de lo debido: NO COMENTEN SUS AVANCES. Solo hacen que los que estén aprendiendo se frustren. Y para los que están aprendiendo pueden mandarme mensaje con alguna duda y con todo gusto les ayudare.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description"
content="Esta página web te recuerda tu lista de compras del supermercado" />
<meta name="robots" content="index, follow" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Mi Súper lista</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header></header>
<main>
<h1>Mi lista de compras</h1>
<p>Esto es lo que debo traer del supermercado:</p>
<section>
<ul>
<li id="Frutas"><strong>Frutas</strong></li>
<ol>
<li>Naranjas </li>
<img src="naranja.webp" alt="imagen de Naranjas" />
<li>Mandarinas</li>
<img src="mandarina.webp" alt="Imagen de mandarinas">
<li>Duraznos</li>
<img src="duraznos.webp" alt="Imagen de duraznos">
</ol>
<br />
<li id="Verduras"><strong>Verduras</strong></li>
<ol>
<li>Lechuga</li>
<img src="lechuga.webp" alt="Imagen de una lechuga">
<li>Tomates</li>
<img src="tomate.webp" alt="Imagen de tomates">
<li>Espinaca</li>
<img src="espinaca.webp" alt="Imagen de una espinaca">
</ol>
<br />
<li id="Carnes"><strong>Carnes</strong></li>
<ol>
<li><a href="https://www.youtube.com/watch?v=38L3mD5UcSA">
Churrasco de res</a></li>
<img src="churrasco.webp" alt="Imagen de un churrasco de res">
<li>Pechuga de pollo</li>
<img src="pechugas.webp" alt="Imagen de una pechuga de pollo">
<li>Lomo de cerdo</li>
<img src="lomo.webp" alt="Imagen de lomo de cerdo">
</ol>
</ul>
</section>
</main>
</body>
</html>
2 Shorcuts para generar la estructura básica del sitio:
! + TAB
html:5 + TAB
El figcaption quedo pendiente no se explico.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt=“Elephant at sunset”>
<figcaption>An elephant at sunset</figcaption>
</figure>
Si bien sí que es importante, como dice Diego, saber tirar el código “a mano”, también es importante conocer los recursos que nos pueden ayudar a agilizar nuestro proceso de escritura de código - el shortcut que utiliza es gracias a que VSC trae instalado Emmet, que te da una serie de atajos para trabajar mejor y más rápido- les comparto este recurso:
Creo que mis imágenes son muy grandes 😅😅 aunque sí cumplen con el peso.
Listo!
Información resumida de esta clase
#EstudiantesDePlatzi
Es importante hacer las líneas de nuestro Index por nosotros mismos
!tabulador = Esto genera la estructura básica de nuestro Index, se conoce como un Shortcode
<img> es la etiqueta que nos ayuda a renderizar una imagen y posee dos atributos
src = aquí ponemos donde está la imagen
alt = Aquí ponemos una descripción de la imagen y nos ayuda con la accesibilidad
El nombre de las carpetas o los archivos no deben de llevar un espacio, si queremos dos palabras las separamos por “_”
Bueno aquí dejo el mío, le agregué un hover para resaltar las imagenes cuando pasar el mouse por ellas.
También les dejo el cógido por si quieren checar que fue lo que hice.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<style>
body{
display: flex;
justify-content: center;
background: rgb(68, 68, 68);
color: orange;
font-family: century gothic;
}
.main-container img{
width: 100px;
height: 75px;
object-fit: cover;
border-radius: 20px;
z-index: 1;
}
.main-container img:hover{
width: 170px;
height: 120px;
border: 6px solid coral;
}
p:nth-child(1){
font-size: 30px;
}
p a{
color: aliceblue;
}
.diego {
font-style: italic;
font-weight: bold;
font-size: 35px;
color: rgb(255, 255, 255);
}
.main-container{
display: flex;
justify-content: space-between;
margin-right: 20px;
}
ul li{
align-items: start;
width: 150px;
margin: 15px 15px;
}
ul li a{
text-decoration: none;
padding: 5px;
color: rgb(255, 255, 255);
font-size: large;
}
.tipo{
color: rgb(0, 0, 0);
font-weight: bold;
text-align: center;
}
.lista a:hover{
color: rgb(255, 255, 255);
cursor: pointer;
background: rgb(201, 90, 0);
border-radius: 8px;
font-weight: bold;
position: absolute;
}
</style>
</head>
<body>
<main>
<div>
</div>
<p>Mi lista del super para:<br> <span class="diego"> Diego de Granda</span></p>
<ul class="main-container">
<div>
<li class="tipo">FRUTAS</li>
<ol class="lista">
<li><a href="https://www.kiwilimon.com/tips/tips-de-cocina/tips-de-platillos/18-recetas-con-mango-para-aprovechar-la-temporada-al-maximo">Mango</a></li>
<img src="./img/mango.jfif" alt="Mango">
<li><a href="https://www.kiwilimon.com/tips/tips-de-cocina/tips-de-platillos/pan-con-queso-kiwi-y-almendras-tostadas">Kiwi</a></li>
<img src="./img/kiw.jfif" alt="Kiwi">
<li><a href="https://www.kiwilimon.com/receta/carnes-y-aves/lomo-relleno-con-salsa-de-tamarindo">Tamarindo</a></li>
<img src="./img/tamar.jfif" alt="Tamarindo">
</ol>
</div>
<div>
<li class="tipo">CARNES</li>
<ol class="lista">
<li><a href="https://www.kiwilimon.com/tips/tips-de-cocina/tips-de-platillos/15-deliciosos-platillos-con-carne-molida-para-toda-ocasion">Carne Molida</a></li>
<img src="./img/molida.jfif" alt="Molida">
<li><a href="https://www.kiwilimon.com/tips/tips-de-cocina/tecnicas-de-coccion/8-recetas-para-disfrutar-de-un-toque-de-sabor-ahumado">Chuleta</a></li>
<img src="./img/chule.jfif" alt="Chuleta">
<li><a href="https://www.kiwilimon.com/receta/carnes-y-aves/res/guisados-de-carne/sandwich-de-falda-de-res">Falda de Res</a></li>
<img src="./img/falda.jfif" alt="falda de Res">
</ol>
</div>
<div>
<li class="tipo"> REPOSTERIA </li>
<ol class="lista">
<li><a href="https://www.kiwilimon.com/receta/panes/rosca-de-reyes-de-harina-para-hot-cakes">Harina</a></li>
<img src="./img/harina.jfif" alt="Harina">
<li><a href="https://www.kiwilimon.com/tips/tips-de-cocina/tips-de-platillos/7-increibles-formas-de-hacer-pastel-de-chocolate">Chocolate</a></li>
<img src="./img/choco.jfif" alt="chocolate">
<li><a href="https://www.kiwilimon.com/receta/postres/pays/pays-de-nuez/pay-frio-de-nuez">Nuez</a></li>
<img src="./img/nuez.jfif" alt="Nuez">
</ol>
</div>
</ul>
<p>Todas las recetas aquí mostradas son parte <a href="www.kiwilimon.com">Kiwilimon</a></p>
</main>
</body>
</html>
La etiqueta <figure> nos ayuda a poder generar un contenedor para la imagen quedando de la siguiente forma:
<figure>
<img src=“” alt=“”/>
</figure>
Seguiré mejorando!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Esta página te mostrará fotos de gatos" />
<meta name="robots" content="index,follow">
<title>Es mi pagina</title>
<meta name="viewport" content="width=device-wirdth, inictial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
</article>
<p>Desafio!</p>
<section>
</section>
<h1> Lista de super! </h1>
<ul>
<li><h2>Compras</h2></li>
</ul>
<ol>
<li><a href="https://www.hogarmania.com/cocina/recetas/salsas/salsa-tomate-casera-facil-minutos-33491.html ">-Tomate</a> </li>
<figure>
<img src="./claseImg/pics/tomate.jpg"width="100" alt="esto es un tomate">
<figcaption>Ejemplo</figcaption>
</figure>
<li><a href="https://www.mamalatinatips.com/es/2018/07/agua-fresca-de-guayaba.html">-Guayaba</a></li>
<figure>
<img src="./claseImg/pics/guayaba.jpg"width="100" alt="esto es un guayaba">
<figcaption>Ejemplo</figcaption>
</figure>
<li><a href="https://cookpad.com/es/recetas/8202723-tarta-de-pera-postre-muy-facil-economico-y-delicioso">-Pera</a></li>
<figure>
<img src="./claseImg/pics/pera.jpg"width="100" alt="esto es un pera">
<figcaption>Ejemplo</figcaption>
</figure>
<li><a href="https://www.divinacocina.es/flan-sandia-facil-rapido-sin-horno/">-Sandia</a></li>
<figure>
<img src="./claseImg/pics/sandia.jpg"width="100" alt="esto es un sandia">
<figcaption>Ejemplo</figcaption>
</figure>
</ol>
</main>
<footer>
</footer>
<p> Creado con amor</p><!-- comentario -->
</body>
</html>|
No hice una lista de compras con productos mas bien de otras cositas.
.
Codigo HTML
.
Codigo CSS
Yo hice un sitio web con la preparación de mi comida favorita (la peruana)
Asi me quedo el ejercicio:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Aqui puedes encontrar las mejores recetas para tus pizzas en casa">
<meta name="robots" content="index, fullow">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<title>Lista del super</title>
</head>
<body>
<header>
<h1>Inventario !</h1>
</header>
<nav class="nav-container">
<div class="div-container">
<h3>Frutas</h3>
<ul>
<li>Manzana <a href="https://tinyurl.com/2bgvs4hj" target="_blank">🍎</a></li>
<li>Banana <a href="https://tinyurl.com/2ydnbxom" target="_blank">🍌</a></li>
<li>Pera <a href="https://tinyurl.com/25g3dobm" target="_blank">🍐</a></li>
</ul>
</div>
<div class="div-container">
<h3>Verduras</h3>
<ul>
<li>Cebulla <a href="https://tinyurl.com/2bkyw74j" target="_blank">🧅</a></li>
<li>Broculi <a href="https://tinyurl.com/27r34768" target="_blank">🥦</a></li>
<li>Zanahoria <a href="https://tinyurl.com/2xkg55vh" target="_blank">🥕</a></li>
</ul>
</div>
<div class="div-container">
<h3>Vestimenta</h3>
<ul>
<li>Remera <a href="https://tinyurl.com/27mlbl57" target="_blank">👕</a></li>
<li>Gorra <a href="https://tinyurl.com/2829moch" target="_blank">🧢</a></li>
<li>Pantalon <a href="https://tinyurl.com/2ybwayx7" target="_blank">👖</a></li>
</ul>
</div>
</nav>
<section class="section-container">
<h3>Imagenes de referencia</h3>
<div class="img-container">
<img src="https://t1.uc.ltmcdn.com/es/posts/6/6/4/que_vitaminas_tiene_la_manzana_51466_600_square.jpg" alt="Manzanas" class="img">
<img src="https://cdn.agroempresario.com/images/posts/3b1c8d94cd0b3ad2ccad64bf2b46810e8f7463e87934e778_840.jpg" alt="Bananas" class="img">
<img src="https://imagenes.20minutos.es/files/og_thumbnail/uploads/imagenes/2020/07/23/propiedades-de-la-pera.jpeg" alt="Peras" class="img">
<img src="https://static.tuasaude.com/media/article/xf/rh/cebolla_49324.jpg" alt="Cebollas" class="img">
<img src="https://tinyurl.com/264dp22a" alt="Brocolis" class="img">
<img src="https://mejorconsalud.as.com/wp-content/uploads/2015/08/comer-muchas-zanahorias-768x512.jpg" alt="Zanahorias" class="img">
<img src="https://tinyurl.com/28upgd7r" alt="Remeras" class="img">
<img src="https://cf.shopee.com.ar/file/274508414f448a2137b337e5cae6fc37" alt="Gorras" class="img">
<img src="https://orsobianco.com.ar/wp-content/uploads/2021/11/verde-claro-3-300x300.jpg" alt="Pantalones" class="img">
</div>
</section>
<footer>
<h6>Developer Sebastian Asenjo © 2022</h6>
</footer>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand";
background-color: beige;
}
h1{
text-align: center;
margin-bottom: 50px;
margin-top: 40px;
}
.nav-container{
display: flex;
width: 600px;
margin: auto;
justify-content: space-between;
}
.div-container h3{
text-align: center;
}
.div-container ul{
list-style: none;
padding: 10px;
text-align: center;
}
.div-container li{
margin-top: 10px;
}
.div-container li>a{
text-decoration: none;
margin-left: 5px;
}
.section-container h3{
text-align: center;
}
.img-container{
display: flex;
margin: auto;
justify-content: center;
padding-left: 15px;
width: 120px;
height: 120px;
}
.img-container img{
margin-left: 15px;
object-fit: cover;
border-radius: 8%;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
.img{
width: 100%;
}
footer{
margin-top:50px;
width:100%;
text-align: center;
}
Comparto mi solución al reto:
Hola! Entre a este link para que vean como va quedando mi proyecto de lista de supermercado.
Pueden ver el codigo en mi repositorio:
Les compartó lo que hice aquí, ya esta con CSS pero creo que es entendible.
Para los curiosos esto es lo que pasa cuando la imagen no la encuentran
Si quieres que la imagen también al seleccionarla te envié al link que previamente se había seleccionado para las recetas es solo poner la etiqueta <img> dentro de la etiqueta <a> es decir:
<a href=“sitio de referencia”>
<img src=“dirección de imagen” alt=“descripción en caso de error”>
</a>
Una herramienta que de momento nos puede servir para estos ejercicios y quizás también para el maquetado de uno que otro proyecto es el Editor de Fotos que trae integrado Windows (clic derecho sobre la imagen > Editar con Fotos), desde aquí podemos cortar fotos a escalas que nos vaya a servir en determinado momento, sin caer en la necesidad de talvez usar una clase de CSS para redimensionar recursos. Por ejemplo para este ejercicio de la clase, basta con recortar a “Ajuste Cuadrado” o cualquiera que deseen en cada una de las imágenes, y guardarlas así, para que al llamarlas con la etiqueta <img> y ajustando un poco con su atributo width, nos aparezca un poco ordenado el asunto. A estas alturas no hemos llegado a tópicos como paddings o márgenes, así que está bien si no está bien distribuido, poco a poco vamos aprendiendo cosas nuevas. Con lo aprendido hasta ahora (repito, sin recurrir a otros recursos como los de CSS) más o menos salen estos resultados, por si a más de alguno le salen medias revueltas las imágenes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="This is a grocery shopping list" />
<meta name="robots" content="index,follow" />
<title>grocery shopping list</title>
<meta name="viewport" content="width=device-width, inicial-scale=1.0" />
<link rel="stylesheet" href="#">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<section>
<article>
<h1>This is the most common list of a grocery shopping list</h1>
<p>Thism list is just to be handy when you don't remmember what you need.</p>
</article>
</section>
<ul>
<li>Fruts</li>
<ol>
<li>
<img src="./imgs/appless.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/12298/apple-crumble-pie/?internalSource=hub%20recipe&referringContentType=Search&clickId=cardslot%204" target="_blank">
Apples
</a>
</li>
<li>
<img src="./imgs/grapes.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/24378/green-grape-salad/" target="_blank">
Grapes
</a>
</li>
<li>
<img src="./imgs/bananas.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/232953/frozen-banana-bites/" target="_blank">
Banana
</a>
</li>
<li>
<img src="./imgs/mango.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/10059/spicy-mango-salsa/" target="_blank">
Mango
</a>
</li>
<li>
<img src="./imgs/oranges.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/23537/white-sangria/" target="_blank">
Oranges
</a>
</li>
<li>
<img src="./imgs/tomatos.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/218465/tarte-aux-moutarde-french-tomato-and-mustard-pie/" target="_blank">
Tomato
</a>
</li>
</ol>
<li>Vegetables</li>
<ol>
<li>
<img src="./imgs/onions.jpg" alt="apples" width="100" height="100" />
<a href=""https://www.allrecipes.com/recipe/82659/old-fashioned-onion-rings/ target="_blank">
Onion
</a>
</li>
<li>
<img src="./imgs/carrots.jpg" alt="apples" width="100" height="100" />
<a href="https://www.allrecipes.com/recipe/25553/moist-carrot-cake/" target="_blank">
Carrot
</a>>
</li>
<li>
<img src="./imgs/potatos.jpg" alt="apples" width="100" height="100" />
<a href="https://www.bettycrocker.com/recipes/hash-brown-potato-bake/d5f23c5e-ac24-4b18-a89a-a13fa6aba391" target="_blank">
Potato
</a>
</li>
<img src="./imgs/capsicums.jpg" alt="apples" width="100" height="100" />
<a href="https://recipes.timesofindia.com/recipes/capsicum-curry/rs55614201.cms" target="_blank">
<li>Capsicum</li>
</a>
</ol>
</ul>
</main>
<footer>
<p>Thanks for being here</p>
</footer>
</body>
</html>
done!
La clase 14 debe ser la clase 13 y la 13 la 14
La clase 12, deberias la 14 yla 14 la 12 XD
Así me quedó agregando un poco de CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafío Lista de compras</title>
<style>
main section article ul{
display: flex;
justify-content: space-around;
}
ol li,a {
display: flex;
align-items: center;
}
ol li{
list-style: decimal;
}
</style>
</head>
<body>
<head>
<h1>Lista de Compras</h1>
</head>
<main>
<section>
<article>
<ul>
<li>
<p>Frutas</p>
<ol>
<li>
<a target="_blank"
href="https://www.kiwilimon.com/receta/postres/pays/pays-de-manzana/pay-de-manzana-casero">Manzana
<figure>
<img width="50px" src="*imgInternet*" alt="Manzana">
</figure>
</a>
</li>
<li>Platano
<figure>
<img width="50px" src="*imgInternet*g" alt="Platano">
</figure>
</li>
<li>Mango
<figure>
<img width="50px" src="*imgInternet*" alt="Mango">
</figure>
</li>
<li>Sandía
<figure>
<img width="50px" src="*imgInternet*" alt="Sandía">
</figure>
</li>
</ol>
</li>
<li>
<p>Carnes</p>
<ol>
<li>Pollo
<figure>
<img width="50px" src="*imgInternet*" alt="Pollo">
</figure>
</li>
<li>Carne Molida
<figure>
<img width="50px" src="*imgInternet*g" alt="Carne Molida">
</figure>
</li>
</ol>
</li>
<li>
<p>Verduras</p>
<ol>
<li>Tomate
<figure>
<img width="50px" src="*imgInternet*" alt="Tomate">
</figure>
</li>
<li>Limón
<figure>
<img width="50px" src="*imgInternet*g" alt="Limón">
</figure>
</li>
<li>Cebolla
<figure>
<img width="50px" src="*imgInternet*" alt="Cebolla">
</figure>
</li>
<li>Zanahoria
<figure>
<img width="50px" src="*imgInternet*" alt="Zanahoria">
</figure>
</li>
<li>Pepino
<figure>
<img width="50px" src="*imgInternet*" alt="Pepino">
</figure>
</li>
</ol>
</li>
<li>
<p>Lacteos</p>
<ol>
<li>Leche
<figure>
<img width="50px" src="*imgInternet*">
</figure>
</li>
<li>Helado
<figure>
<img width="50px" src="*imgInternet*" alt="Helado">
</figure>
</li>
</ol>
</li>
</ul>
</article>
</section>
</main>
</body>
</html>
ok tarea
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compras</title>
</head>
<body>
<h1>Compras supermercado 😁</h1>
<nav>
<ul>
<li><strong>Verduras</strong></li>
<ol>
<li>Mazorca 🌽</li>
<li>Pepino 🥒</li>
<li>Tomates 🍅</li>
<img src="./imagenes/tomates.jpg" alt="Tomates" width="10%">
</ol>
</ul>
<ul>
<li><strong>Frutas</strong></li>
<ol>
<li>Sandia 🍉</li>
<li>Uvas 🍇</li>
<li>Piña 🍍</li>
<img src="./imagenes/pina.jpg" alt="Piña" width="10%">
<li>Fresas 🍓</li>
</ol>
</ul>
<ul>
<li><strong>Carnes</strong></li>
<img src="./imagenes/carne.jpg" width = "15%" alt="Carnes frias">
<ol>
<a href="https://www.youtube.com/watch?v=chhI-LYDchA" target="_blank">
<li>CANGREBURGER 🍔</li>
</a>
<li>Costilla 🍖</li>
<li>Carne molida 🥩</li>
<li>Camarones 🍤</li>
<li>Pollo🍗</li>
</ol>
</ul>
<p> <strong>!!!Ya quedo, ahora no vas a olvidar la mitad de las cosas en el super!!!</strong> 😎</p>
</nav>
</body>
</html>
Mi lista:
Mi código:
<!DOCTYPE html>
<html lang="es">
<!--Es la etiqueta "padre" donde vivirá nuestro proyecto. El atributo lang establece el idioma del sitio web. Debemos usarlo para que el navegador pueda traducir nuestra página-->
<head>
<meta charset="UTF-8">
<!--Este atributo nos ayuda a la hora de incluir caracteres especiales y emojis en nuestro proyecto-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--Nos ayuda a trabajar en proyectos reponsive-->
<meta name="description" content="Esta página un proyecto de HTML y CSS">
<!--Muestra una descripción de nuestro sitio en los buscadores-->
<meta name="robots" content="index,follow">
<!--Le dice a los robots de los navegadores que rastreen nuestra página y la muestran en las búsquedas-->
<meta name="keywords" content="HTML, CSS, Javascript">
<!--Define palabras clave para motores de busqueda-->
<meta name="author" content="Andres Badillo">
<!--Define el autor de la pagina-->
<title>Es mi página</title>
<!--Título de nuestra página, no confundir con los H1-H6. Este titulo es el que ves en la pestaña del navegador-->
<link rel="shortcut icon" href="./assets/html_css.png">
<!--Inserta el favicon en la pestaña deñ navegador-->
<link rel="stylesheet" href="./css/style.css">
<!--Linkea/Enlaza archivos de estilos u otros archivos que necesitemos en nuestro proyecto-->
</head>
<body>
<header> <!--Etiqueta contenedora del encabezado de la pagina-->
<nav> <!--Barra de navegacion-->
<h1>Soy la lista del super!</h1>
</nav>
</header>
<main> <!--Contenido principal-->
<section> <!--para agregar secciones-->
<ul>
<li>Frutas
<ol>
<li>
<a href="https://www.youtube.com/watch?v=SU9Fa8M26AI" target="_blank">Uvas 🍇</a>
<figure>
<img src="./assets/frutas/uvas_small.jpg" alt="Uvas" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=NetLtTIaXEc" target="_blank">Peras 🍐</a>
<figure>
<img src="./assets/frutas/peras_small.jpg" alt="Peras" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=yYFuyL9xzl0" target="_blank">Kiwi 🥝</a>
<figure>
<img src="./assets/frutas/kiwi_small.jpg" alt="Kiwi" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=yEMWUPVbhj0" target="_blank">Manzanas 🍎</a>
<figure>
<img src="./assets/frutas/manzanas_small.jpg" alt="Manzas" height="100px" width="100px">
</figure>
</li>
<p></p>
</ol>
</li>
<li>Carnes
<ol>
<li>
<a href="https://www.youtube.com/watch?v=aHw_zH6BC0w" target="_blank">Carne 🥩</a>
<figure>
<img src="./assets/carnes/carne_small.jpg" alt="Carne" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=qk-jV61NYRQ" target="_blank">Pollo 🍗</a>
<figure>
<img src="./assets/carnes/pescado_small.jpg" alt="Pollo" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=QMmQ3xEZLxE" target="_blank">Pescado 🐟</a>
<figure>
<img src="./assets/carnes/pescado_small.jpg" alt="Pescado" height="100px" width="100px">
</figure>
</li>
<p></p>
</ol>
</li>
<li>Verduras
<ol>
<li>
<a href="https://www.youtube.com/watch?v=VDi0k59JrKc" target="_blank">Zanahoria 🥕</a>
<figure>
<img src="./assets/verduras/zanahoria_small.jpg" alt="Zanahoria" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=IUzE6x-b3GM" target="_blank">Arveja 🟢</a>
<figure>
<img src="./assets/verduras/arveja_small.jpg" alt="Arveja" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=Tk3Q7ekZjLs" target="_blank">Habichuela 🥬</a>
<figure>
<img src="./assets/verduras/habichuela_small.jpg" alt="" height="100px" width="100px">
</figure>
</li>
<li>
<a href="https://www.youtube.com/watch?v=LyYkA6tdMsU" target="_blank">Tomate 🍅</a>
<figure>
<img src="./assets/verduras/tomates_small.jpg" alt="Tomate" height="100px" width="100px">
</figure>
</li>
<p></p>
</ol>
</li>
</ul>
</section>
</main>
<footer> <!--Pie de pagina-->
<p>Creado con amor por: </p><a href="https://www.andresbadillo.co/" target="_blank">Andrés Badillo</a>
</footer>
</body>
</html>
img contiene dos atributos
src: hace referencia a la ubicacion de la imagen ruta o url
alt: es la descripcion de la imagen en dado caso que esta no sea encontrada por el buscador.
por otra parte, la etiqueta figure es el contendero para la etiqueta imagen.
Así me quedo 😄
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf=8"/>
<meta name="description" content="Esta pag. te mostrara fotos de cats"/>
<meta name="robots" content="index,fallow"/>
<title>Primer proyecto</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css"/>
</head>
<body bgcolor="#FFEE58 ">
<header>
<nav></nav>
</header>
<main>
<h1>Lista de compras del supermercado</h1>
<section>
<article>
</article>
</section>
<h3><a href="https://es.wikipedia.org/wiki/%C3%89tica_de_comer_carne"> Carnes </a></h3>
<img src="./Imagenes/carnes.jpg" alt="Imangen de carnes"/>
<ul>
<li>1 kg. de carne de pollo</li>
<li>1 kg. de carne de chancho</li>
<li>1 kg. de carne de chancho</li>
</ul>
<h3><a href="https://es.wikipedia.org/wiki/Fruta"> Frutas </a></h3>
<img src="./Imagenes/frutas.jpg" alt="Imagen de frutas"/>
<ul>
<li>1 kg. de manzana</li>
<li>1 kg. de naranja</li>
<li>1 kg. de durazno</li>
</ul>
<h3><a href="https://es.wikipedia.org/wiki/Higiene_de_manos"> Útiles para el aseo personal </a></h3>
<img src="./Imagenes/aseo.jpg" alt="Imagen de utiles de aseo"/>
<ul>
<li>Papel higiénico</li>
<li> jabón </li>
<li> shampoos </li>
<li> desinfectante</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
Resultado 😄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<!-- todavia no vamos aqui -->
</header>
<main>
<h1>Mi Lista de Super con imagenes!</h1>
<ul>
<p><h1>Frutas</h1></p>
<li><h2>Manzana</h2></li>
<figure><img src="./img/manzana.png" alt="Manzana" style="width: 250px;"></figure>
<li><h2>Limon</h2></li>
<figure><img src="./img/limon.png" alt="Limon" style="width: 250px;"></figure>
<li><h2>Papaya</h2></li>
<figure><img src="./img/papaya.png" alt="Papaya" style="width: 250px;"></figure>
</ul>
<br>
<ul>
<p><h1>Verduras</h1></p>
<li><h2>Zanahoria</h2></li>
<figure><img src="./img/zanahoria.png" alt="Zanahoria" style="width: 250px;"></figure>
<li><h2>Tomate</h2></li>
<figure><img src="./img/tomate.png" alt="Tomate" style="width: 250px;"></figure>
<li><h2>lechuga</h2></li>
<figure><img src="./img/lechuga.png" alt="lechuga" style="width: 250px;"></figure>
</ul>
<br>
<ul>
<p><h1>Carnes</h1></p>
<li><h2>Pollo</h2></li>
<figure><img src="./img/pollo.png" alt="" style="width: 250px;"></figure>
<li><h2>Cerdo</h2></li>
<figure><img src="./img/cerda.png" alt="" style="width: 250px;"></figure>
<li><h2>Res</h2></li>
<figure><img src="./img/res.png" alt="" style="width: 250px;"></figure>
</ul>
</main>
<footer>
<!-- todavia no vamos aqui -->
</footer>
</body>
</html>
No es mucho, pero es trabajo honesto.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Lista SuperMercado</title>
<link rel=“stylesheet” href="">
</head>
<body>
<header>
<h1>LISTA DEL SUPER MERCADO</h1>
</header>
<main>
<ul>
<li>Frutas:</li>
<ol>
<li>Manzana</li>
<figure>
<img src="./manzana.jpg" alt="" width=“50px”>
</figure>
<li>Fresas</li>
<figure>
<img src="./fresas.jpg" alt="" width=“50px”>
</figure>
</ol>
</ul>
<ul>
<li>Carnes:</li>
<ol>
<li>Pollo</li>
<figure>
<img src="./pollo.jpg" alt="" width=“50px”>
</figure>
<li>Carne Molida</li>
<figure>
<img src="./carne_molida.jpg" alt="" width=“50px”>
</figure>
</ol>
</ul>
<ul>
<li>Verduras:</li>
<ol>
<li>Tomate</li>
<figure>
<img src="./Tomate-Lancero.jpg" alt="" width=“50px”>
</figure>
<li>Limon <a href=“https://www.youtube.com/watch?v=90zVxooQYZM&ab_channel=MeHueleAQuemao” target="_blank">.Receta para hacer agua de panela</a></li>
<figure>
<img src="./limon.jpg" alt="" width=“50px”>
</figure>
</ol>
</ul>
</main>
<footer>
<p>Hecho por una principiante con muchas ganas de aprender 😍.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!---->
<meta name="description" content="Esta es una página en donde se podra crear una lista de compras">
<meta name="robots" content="index-unfollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supermarket list 🛒</title>
<link rel="stylesheet" href="style.css">
</head
<body>
<header>
<h1>Items❗❗</h1>
</header>
<main>
<ul>
<li>Fruits</li>
<ol>
<li><img src="./img/apple.jpg" alt="Red apple"></li>
<li><img src="./img/watermelon.jpg" alt="Watermelon"></li>
</ol>
<li>Meats</li>
<ol>
<li><a href="https://antojandoando.com/recetas/aves/sudado-de-pollo/"><img src="./img/Chicken.jpg" alt="Chicken"></a></li>
<li><img src="./img/Fish.jpg" alt="Fish"></li>
</ol>
<li>Vegetables</li>
<ol>
<li><img src="./img/Carrot.jpg" alt="Carrot"></li>
<li><img src="./img/Potato.jpg" alt="Potato"></li>
</ol>
</ul>
</main>
<footer>
created with love at Platzi 💚
</footer>
</body>
</html>
Así va mi lista navideña :3
Para los que quieran que el enlace quede dentro de la imagen, la sintaxis debe ser la siguiente:
<li> <a> <img> Texto </a> </li>
Les comparto lo que realice:
Costo pero dio resultados
Hola, les comento el proceso que hice para el reto aplicando todo lo aprendido, espero que les sea de utilidad.
Aquí dejo mi código HTML:
Por aquí mi CSS aunque no es gran cosa, no me quise complicar:
Y donde si me quise complicar y añadirle algo de interacción fue en el JavaScript e hice que cada vez que se le hiciera click en un producto, saliera su imagen al lado:
Aquí les dejo el enlace a la página desplegada en GitHub Pages por si quieren verlo en funcionamiento: https://robefernandez22.github.io/curso-html-css/lista-super/
Bueno, aquí mi desafío, le agregué las imágenes, luego de comprimirlas en tinypng, además les cambié el tamaño para hacerlas ver más pequeñas.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Lista del Súper</title>
<link rel=“stylesheet” href=“CSS/styles.css”>
</head>
<body>
<header>
<p>Desafío</p>
</header>
<main>
<section>
<h1>
Lista del Super!
</h1>
<ul>
<li>Granos</li>
<ol>
<br>
<li>
<a href="https://www.quericavida.com/recetas/frijoles-colombianos/f58e4db7-9529-4aac-8d99-c92f0933efeb" target="_blank">Fríjoles</a>
<figure>
<img src="./PICTURES/frijol.jpg" alt="imagen de frijoles" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.recetasgratis.net/receta-de-deliciosos-garbanzos-guisados-50762.html" target="_blank">Garbanzos</a>
<figure>
<img src="./PICTURES/garbanzo.jpg" alt="imagen de garbanzos" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.directoalpaladar.com/recetas-de-legumbres-y-verduras/como-hacer-lentejas-guisadas-receta" target="_blank">Lentejas</a>
<figure>
<img src="./PICTURES/lentejas.jpg" alt="imagen de lentejas" width="150px" height="100px">
</figure>
</li>
</br>
</ol>
<li>Frutas y Verduras</li>
<ol>
<br>
<li>
<a href="https://www.recetasgratis.net/receta-de-crema-de-cebolla-para-4-personas-43768.html" target="_blank">Cebolla</a>
<figure>
<img src="./PICTURES/cebolla.jpg" alt="imagen de cebolla" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.gallinablanca.es/receta/crema-de-pimientos-rojos/" target="_blank">Pimentón</a>
<figure>
<img src="./PICTURES/pimenton.jpg" alt="imagen de pimenton" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.comedera.com/sopa-de-tomate-casera/" target="_blank">Tomate</a>
<figure>
<img src="./PICTURES/tomate.jpg" alt="imagen de tomates" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.directoalpaladar.com/recetas-de-sopas-y-cremas/receta-basica-de-crema-de-zanahoria-cuando-menos-es-mas" target="_blank">Zanahoria</a>
<figure>
<img src="./PICTURES/zanahoria.jpg" alt="imagen de zanahoria" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.colombia.com/gastronomia/recetas-internacionales/crema-de-apio-r38" target="_blank">Apio</a>
<figure>
<img src="./PICTURES/apio.jpg" alt="imagen de apio" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.piloncilloyvainilla.com/crema-de-brocoli-sin-crema/" target="_blank">Brocoli</a>
<figure>
<img src="./PICTURES/brocoli.jpg" alt="imagen de brocoli" width="150px" height="100px">
</figure>
</li>
<li>
<a href="https://www.mycolombianrecipes.com/es/crema-de-aguacate/" target="_blank">Aguacate</a>
<figure>
<img src="./PICTURES/aguacate.jpg" alt="imagen de aguacate" width="150px" height="100px">
</figure>
</li>
</br>
</ol>
</ul>
</section>
</main>
<footer>
<h3>
Todo Fresco
</h3>
</footer>
</body>
</html>
creo que esta clase va antes de la anterior, me perdi un poco hasta que mire esta clase
Para los que no sepan achicar sus imagenes yo uso este codigo "heigth="100 " y el "width="100 " el valor del numero yo use 100 porque eran muy grades mis fotos pero ustedes usen el que quieran vallan probando y experimentando . saludos
Tarea terminada:
Aquí una pequeña lista de tecnologías.
El profe es un crack, explica demasiado bien todo, profe lo quiero mucho oyo?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Esta pagina de mostrara fotos de gatitos"/>
<meta name="robots" content="index, follow"/>
<title>Lista de super</title>
</head>
<body>
<header>
<h1>Soy una lista de super ♥♥♥</h1>
</header>
<main>
<section>
<article>
<ul>
<li>
Frutas
<ol>
<li>
<a href="https://www.cocinafacil.com.mx/search/kiwi">Kiwis 🥝</a>
<figure>
<img src="./pics/kiwi.jpg" alt="Kiwis"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/recetas/postres-con-fresas/">Fresas 🍓</a>
<figure>
<img src="./pics/fresa.jpg" alt="Fresa"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/recetas/recetas-durazno/">Duraznos 🍑</a>
<figure>
<img src="./pics/durazno.jpg" alt="Duraznos"/>
</figure>
</li>
</ol>
</li>
<br/><br/>
<li>
Carnes
<ol>
<li>
<a href="https://www.cocinafacil.com.mx/search/pollo">Pollo 🐓</a>
<figure>
<img src="./pics/pollo.jpg" alt="Pollo"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/search/carne">Res 🐄</a>
<figure>
<img src="./pics/carne.jpg" alt="Res"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/search/pescado">Pescado 🐟</a>
<figure>
<img src="./pics/pes.jpg" alt="Pescado"/>
</figure>
</li>
</ol>
</li>
<br/><br/>
<li>
Verdura
<ol>
<li>
<a href="https://www.cocinafacil.com.mx/search/papa">Papa 🥔</a>
<figure>
<img src="./pics/papa.jpg" alt="Papa"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/search/zanahoria">Zanahoria 🥕</a>
<figure>
<img src="./pics/zanahoria.jpg" alt="Zanahoria"/>
</figure>
</li>
<li>
<a href="https://www.cocinafacil.com.mx/search/champi%C3%B1ones">Champiñones 🍄</a>
<figure>
<img src="./pics/champ.jpg" alt="Champiñones"/>
</figure>
</li>
</ol>
</li>
</ul>
</article>
</section>
</main>
<footer>
<h4>Hecho con amorts ♥♥♥</h4>
</footer>
</body>
</html>
RETO CLASE 13:
ETIQUETA IMG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Esta página te mostrará imágenes de mi lista para el Supermercado">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagenes</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<p>RETO 2</p>
<nav></nav>
</header>
<main>
<h1>Lista con imágenes para el Supermercado !!!</h1>
<ul>
<li>FRUTAS</li>
</ul>
<ol>
<li value="1">Piña 🍍</li>
<figure>
<img src="./pics/picsTinypng/pinaSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<li>Manzana 🍎</li>
<figure>
<img src="./pics/picsTinypng/manzanaSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<li>Platano 🍌</li>
<figure>
<img src="./pics/picsTinypng/platanoSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
</ol>
<ul>
<li>CARNES</li>
</ul>
<ol>
<li value="1">Pollo 🍗</li>
<figure>
<img src="./pics/picsTinypng/polloSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<li>Pescado 🐟</li>
<figure>
<img src="./pics/picsTinypng/pescadoSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<li>Pulpa 🥩</li>
<figure>
<img src="./pics/picsTinypng/carneSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
</ol>
<ul>
<li>VERDURAS</li>
</ul>
<ol>
<li value="1">Zanahoria 🥕</li>
<figure>
<img src="./pics/picsTinypng/zanahoriaSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<li>Lechuga 🥬</li>
<figure>
<img src="./pics/picsTinypng/lechugaSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
<a
href="https://www.google.com/search?q=receta+de+comidas&rlz=1C1ALOY_esBO990BO990&sxsrf=ALiCzsa7B4Qa93GL3o42-PT8XS2fvZuTVg%3A1651772822425&ei=lg10YsvMGZqH5OUPhIey-A4&ved=0ahUKEwjL79Gi9cj3AhWaA7kGHYSDDO8Q4dUDCA4&uact=5&oq=receta+de+comidas&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEOgcIIxCwAxAnOgcIABBHELADOgcIABCwAxBDOgQIIxAnOgsIABCABBCxAxCDAToLCC4QgAQQsQMQgwE6DgguEIAEELEDEIMBENQCOggIABCxAxCDAToNCC4QsQMQgwEQ1AIQQzoECAAQQzoICC4QgAQQsQM6CAgAEIAEELEDOgoIABCxAxCDARBDOgcIABCxAxBDSgQIQRgASgQIRhgAUI0HWIoiYIAmaANwAXgAgAHrAogBjRaSAQgxLjExLjMuMpgBAKABAcgBCsABAQ&sclient=gws-wiz">
<li>Tomate 🍅</li>
</a>
<figure>
<img src="./pics/picsTinypng/tomateSmall.jpg" width="150px" height="150px"
alt="Es una imagen de una piña">
</figure>
</ol>
</main>
<footer>
<p>Creado con 💜 por Abidan</p>
</footer>
</body>
</html>
En pexels encontre imagenes muy lindas para usar y agregarlo al codigo fue mas facil de lo que creia
Mi pequeńo aporte
Mi aporte para este reto 😃
Hola, aquí les comparto como quedo mi lista del super mercado
Así vamos
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista del Súper!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Lista del Súper!</h1>
</header>
<main>
<div class="Frutas">
<ul>
<li>Frutas</li>
<ol>
<li>Manzanas</li>
<img src="https://s1.eestatic.com/2021/09/17/ciencia/nutricion/612699746_208614860_1706x960.jpg" alt="Manzanas">
<li>Mandarinas</li>
<img src="https://libbys.es/wordpress/wp-content/uploads/2018/12/mandarina.jpg" alt="Mandarinas">
<li>Bananos</li>
<img src="https://www.uniban.com/images/banano/Manzano_Banana_uniban.jpg" alt="Bananos">
</ol>
</ul>
</div>
<ul>
<li>Carnes</li>
<ol>
<li>Pollo</li>
<img src="https://www.cocinayvino.com/wp-content/uploads/2021/01/www.cocinayvino.com-como-lograr-un-pollo-al-horno-bien-hecho-pollo-crudo-e1610403209730-1024x576.jpg" alt="pollo">
<li>Cerdo</li>
<img src="https://imgmedia.buenazo.pe/640x345/buenazo/original/2021/03/15/604f6af21cbca03d786ce6af.jpg" alt="Cerdo">
<li><a href="https://www.google.com/search?rlz=1C5CHFA_enCO992CO992&q=pasta+bolo%C3%B1esa&sa=X&ved=2ahUKEwiG6Jivior2AhX5SDABHb1cDdEQ7xYoAHoECAEQNw&biw=1200&bih=588&dpr=1">Carne molida</a></li>
<img src="https://dam.cocinafacil.com.mx/wp-content/uploads/2021/03/carne-molida.jpg" alt="Carne Molida">
</ol>
</ul>
<ul>
<li>Verduras</li>
<ol>
<li>Cebolla</li>
<img src="https://agroactivocol.com/wp-content/uploads/2020/07/cebolla-yellow-1.jpg" alt="Cebolla">
<li>Papas</li>
<img src="https://nacionfarma.com/wp-content/uploads/2021/06/Beneficios-de-comer-papas.jpg" alt="Papas">
<li>Tomates</li>
<img src="https://www.65ymas.com/uploads/s1/22/69/84/tomate.jpeg" alt="Tomates">
</ol>
</ul>
</main>
<footer>
Creado por fonsick
</footer>
</body>
</html>
CSS
body {
background: rgb(241, 239, 239);
}
header {
text-align: center;
}
main {
display: flex;
justify-content: space-around;
width: 100%;
}
main ul li {
padding-top: 24px;
}
img {
object-fit: cover;
width: 120px;
height: 80px;
}
footer {
margin: 16px 150px;
}
Aplicando lo aprendido sobre las imágenes al reto inicial.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esta página te mostrará fotos de gatos">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="./css/style.css">
<title>Desafío 1: Lista de súper 🚚 </title>
</head>
<body>
<h1>Súper lista de mercado </h1>
<ul>
<li>Carnes: 🍖 </li>
<ol>
<li>Carne de res 🐄 </li>
<figure>
<img src="./images/carne_res.jpg" alt="Filetes de carne de res" width="200px">
</figure>
<li>Carne de cerdo 🐖 </li>
<figure>
<img src="./images/carne_cerdo.jpg" alt="Filetes de carne de cerdo" width="200px">
</figure>
<li>Carne de pollo 🐔 </li>
<figure>
<img src="./images/carne_pollo.jpg" alt="Cortes de carne de pollo" width="200px">
</figure>
</ol>
</ul>
<ul>
<li>Frutas 🌳 : </li>
<ol>
<li>Manzana 🍏 </li>
<figure>
<img src="./images/manzana.jpeg" alt="Fruta manzana" width="200px">
</figure>
<li>Piña 🍍 </li>
<figure>
<img src="./images/piña.jpeg" alt="Fruta piña" width="200px">
</figure>
<li>Mango 🥭 </li>
<figure>
<img src="./images/mango.jpg" alt="Fruta mango" width="200px">
</figure>
</ol>
</ul>
<ul>
<li>Complementos: </li>
<ol>
<li>Arroz 🍙 </li>
<figure>
<img src="./images/arroz_diana.jpg" alt="Paca de arroz" width="200px">
</figure>
<li> <a href="https://www.youtube.com/watch?v=BDqeVnxFoa8" target="_blank" rel="noopener noreferrer"> Pastas 🍝 </a> </li>
</ol>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="esta es una lista de los productos que incuentra en el supermercado">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Desafio</title>
</head>
<body>
<header></header>
<main>
<h1>lista del super</h1>
<ul>
<li> <h3>frutas</h3>
<ol>
<li>Carambola ⭐<p><img src="img/frutas/carambola/small.jpg" alt=""></p> </li>
<li>sandia 🍉 <p><img src="img/frutas/sandia/small.jpg" alt=""> </p> </li>
<li>tomate 🍅 <p><img src="img/frutas/tomate/small.jpg" alt=""> </p> </li>
</ol>
</li>
<li> <h3>carnes</h3>
<ol>
<li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">
res 🥩 <p><img src="./img/carnes/pescado/small.jpg" alt=""></p></a></li>
<li>pollo 🍗 <p><img src="./img/carnes/pollo/small.jpg" alt=""></p></li>
<li>pescado 🐟<p><img src="./img/carnes/res/small.jpg" alt=""></p></li>
</ol>
</li>
<li> <h3>verduras</h3>
<ol>
<li>cebolla 🧅 <p><img src="./img/verduras/cebolla/small.jpg" alt=""></p> </li>
<li>brocoli 🥦 <p><img src="./img/verduras/brocoli/small.jpg" alt=""></p> </li>
<li>lechuga 🥬 <p><img src="./img/verduras/lechuga/small.jpg" alt=""></p> </li>
</ol>
</li>
</ul>
</main>
<footer></footer>
</body>
</html>
Aqui mi practica de esta clase, no hice una lista de compras pero si una pequeña guia de ejercicios con imagenes.
Me encanto este ejercicio porque entiendo para que sirve cada etiqueta
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?