<head></head>

<!DOCTYPE html>
<HTML lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Esta página te mostrará gatitos"/>
        <meta name="robots" content="index,follow" />
        <title> Esta es mi página</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href"./CSS/style.css">
    </head>

Index y su estructura básica:<body></body>

estructura básica:

<body>
        <header>
            <nav>

            </nav>
        </header>
        <main>

        </main>
        <footer>

        </footer>
    </body>
</HTML>

etiquetas útiles dentro de <main></main>

<main>
   <section>
      <article>

      </article>
   </section>
      <ul>
        <li>Soy una manzana</li>
      </ul>
      <ol>
				<li>Soy una manzana enlistada con números </li>
			</ol>
</main>

<section></section>
- <article></article>
<ul></ul>
- (Unorganized list)
- <li></li> (lo va a listar con bullet points)
<ol></ol>
- Ordered list
- <li></li> Lo va a listar con números (porque es una lista ordenanda)

otras etiquetas útiles

<p> </p>
- Son párrafos
<h1> </h1>
- Desde h1 hasta h6, tenemos diferentes tipos de tamaños y letras
<a href="#">Soy un link</a>
- Significa que las palabras "Soy un link" me van a redirigir a la url que yo ponga en #. Si no pongo #, me recarga la página en la que estoy.

<p> Soy un texto</p>
        <h1>Soy un título</h1>
        <h2>Soy otro título</h2>
        <h3>Soy un título más</h3>
        <h6>Soy un título h6</h6>
        <a href="#">Soy un link</a>

Desafío:

he decidido hacer un recetario según la disponibilidad de frutas y verduras

<!DOCTYPE html>
<HTML lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Esta página te mostrará comida deliciosa según la diponibilidad de ingredientes"/>
        <meta name="robots" content="index,follow" />
        <title> Recetario según alimento</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href"./CSS/style.css">
    </head>
    <body>
        <header>
            <h1> Lista de Alimentos & Recetas </h1>
            <nav>
            </nav>
        </header>
        <main>
            <section>
                <ul>
                    <li> <h3>Frutas</h3> </li>
                        <ol>
                            <li> <a href="<https://www.diezminutos.es/estilo-de-vida/g25853042/7-recetas-saludables-y-deliciosas-con-manzanas-crimson-snow/>" target="_blanck">
                                Manzanas </a>
                            </li>
                            <li> <a href="<https://hoycomemossano.com/2019/02/mousse-ligera-de-mandarina-sin-azucar.html>" target="_blanck">
                                Mandarina </a>
                            </li>
                            <li> <a href="<https://dulcesdiabeticos.com/chips-de-platano-saludables-al-horno/>" target="_blanck">
                                Bananos </a>
                            </li>
                        </ol>
                </ul>
                <ul>
                    <li> <h3>Verduras</h3> </li>
                        <ol>
                            <li> <a href="<https://www.youtube.com/watch?v=eifAmKzeB3k>" target="_blanck">
                                Zanahorias</a>
                            </li>
                            <li> <a href="<https://www.pizcadesabor.com/palitos-de-zucchini-al-horno-con-mayonesa-de-sriracha/>" target="_blanck">
                                Zucchini</a>
                            </li>
                            <li> <a href="<https://www.cocinafacil.com.mx/recetas-de-comida/receta/esparragos-con-reduccion-de-balsamico/>" target="_black">
                                Espárragos </a>
                            </li>
                        </ol>
                </ul>

            </section>
    </body>
</HTML>

Tipos de imágenes

info relevante

70kb - Tamaño de imagen ideal

dónde comprimir imágenes

Tiny PNG
Compressor.io
Convertio - de PNG, JPG a SVG
Squoosh
Optimizilla
IloveIMG
directamente en Photoshop

dónde conseguir imágenes

quitar metadatos

Verefix

<aside> 💡 esta sección fue construida a partir de la recopilación de varios aportes en los foros de Platzi //créditos a: @Davermx, @alvertkevin, @alexdicant//

</aside>

Etiqueta img

<aside> 💡 Dentro de body, está main, section, y <figure></figure> aquella etiqueta va a contener nuestra etiqueta de imagen

</aside>

<body>
    <main>
        <section>
            <figure>
                <img src="./pics/tinified/small.jpg" alt="Esta es una imagen de un pan con aguacate y espinaca">
            </figure>
        </section>
    </main>
</body>