HTML

HTML HTML

Comentarioslink image 1

Para añadir un comentario a un html, se utiliza el siguiente código:

	

		
<!-- Comentario -->

	

	

		Copy

El HTML tiene que empezar con una etiqueta !DOCTYPE que indica al navegador la versión de HTML, con poner HTML el navegador entiende que es la 5

	

		
<!DOCTYPE html>

	

	

		Copy

A continuación se tiene que poner un contenedor con la etiqueta html con un atributo llamado lang que indica el idioma con el que se ha escrito la página

	

		
<!DOCTYPE html>
<html lang="es">
</html>

	

	

		Copy

Dentro se crean dos contenedores más, el de head y el de body

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
    </head>
    <body>
    </body>
</html>

	

	

		Copy

En el contenedor head va todo lo que el navegador necesita para poder cargar, mientras que en el body va todo lo que se va a ver en la página

Una de las etiquetas del head es meta que lleva un atributo llamado charset que indica el tipo de codificación del texto, normalmente es utf-8, utf-16.

Otro tipo de meta es el name="description" que es una descripción para los navegadores. Es importante para el SEO.

Otro tipo de meta es el name="robots" que es para los robots de los buscadores e indica si se puede seguir la página o no.

Otro atributo del head es title que indica el título que se ve en la pestaña.

Otro meta es name="viewport" que es para el responsive design.

Otra meta es name="theme-color" que es para el color de la barra de navegación.

Otra meta es el favicon que es el icono que se ve en la pestaña. Se escribe con la etiqueta link y el atributo type y href="path".

Unas etiquetas muy importantes para el SEO son todas las relacionadas con Open Graph que son las que se ven cuando se comparte un enlace en las redes sociales. Para esto una página muy útil es open graph, donde pones tu enlace y te dice cómo se vería en cada red social. Estas metas son

property="og:title" que es el título que se ve en las redes sociales.

property="og:description" que es la descripción que se ve en las redes sociales.

property="og:image" que es la imagen que se ve en las redes sociales.

property="og:image:alt" que es el texto alternativo de la imagen que se ve en las redes sociales.

Hay una etiqueta para el CSS que es link

En la página de Open Graph se pueden ver todas las etiquetas que se pueden poner en el head.

Otra etiqueta importante para el SEO es link rel="alternate" que es para indicar que hay una versión alternativa de la página, por ejemplo en otro idioma.

Otra etiqueta importante para el SEO es link rel="canonical" que es para indicar que hay una versión canónica de la página, por ejemplo en otro idioma.

Con las etiquetas style y script se puede escribir CSS y JavaScript en el html.

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
    </body>
</html>

	

	

		Copy

Bodylink image 3

Hay etiquetas contenedoras que ayudan a crear una estructura y llevan más etiquetas dentro. Y hay etiquetas contenedoras que son las que contienen el texto, imágenes, etc.

Etiquetas contenedoraslink image 4

Esta es la etiqueta para describir el header

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            Header
        </header>
    </body>
</html>

	

	

		Copy

Con la etiqueta nav se crea la navegación. Dentro de esta etiqueta se pueden poner enlaces con la etiqueta a y se puede poner un logo con la etiqueta img.

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
    </body>
</html>

	

	

		Copy
Enlaceslink image 7

Como en la navegación, los enlaces se crean con la etiqueta a y llevan un atributo href="path" que indica el enlace al que lleva el enlace. También llevan un atributo target="_blank" que indica que se abre en una nueva pestaña. Ademmás se puede poner el atributo rel="noreferer" que indica que no se pasa información de la página de la que viene el enlace.

	

		
<a href="path" target="_blank">Enlace</a>

	

	

		Copy

Si el enlace es un enlace a una sección de la página, se pone el atributo href="#id".

	

		
<a href="#id">Enlace</a>

	

	

		Copy

Por lo tanto, en otra parte de la página se tiene que poner un contenedor con el atributo id="id".

	

		
<div id="id">
</div>

	

	

		Copy

Si el enlace es un correo electrónico, se pone el atributo href="mailto:email".

	

		
<a href="mailto:email">Email</a>

	

	

		Copy

Si el enlace es un teléfono, se pone el atributo href="tel:phone".

	

		
<a href="tel:phone">Teléfono</a>

	

	

		Copy

Si lo que quieres es poner un enlace para abrir WhatsApp, se pone el atributo href="https://wa.me/phone".

	

		
<a href="https://wa.me/phone">WhatsApp</a>

	

	

		Copy

Mainlink image 8

Esta es la etiqueta para describir el main

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
        </main>
    </body>
</html>

	

	

		Copy

Esta es la etiqueta para describir el footer

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Sectionlink image 10

Dentro de main se pueden hacer secciones

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Articlelink image 11

Dentro de main se pueden haber artículos

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Divisorlink image 12

Cuando se nos han acabado las etiquetas semánticas, se puede utilizar la etiqueta div que es un contenedor genérico.

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Listas no ordenadas ul

Dentro de main se pueden haber listas no ordenadas, cada ítem de la lista tiene que tener la etiqueta li

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Listas ordenadas ol

Dentro de main se pueden haber listas ordenadas, cada ítem de la lista tiene que tener la etiqueta li

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                        <ol>
                            <li></li>
                        </ol>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Se puede cambiar el tipo de orden de la lista con el atributo type="a" para letras, type="i" para números romanos, type="1" para números arábigos.

	

		
<ol type="a">
    <li></li>
</ol>

	

	

		Copy

Si se quiere que el orden de la lista empiece en un número en concreto, se pone el atributo start="number".

	

		
<ol start="2">
    <li></li>
</ol>

	

	

		Copy

Si se quiere que el orden de la lista vaya en orden inverso, se pone el atributo reversed.

	

		
<ol reversed>
    <li></li>
</ol>

	

	

		Copy

Si queremos que un list item tenga un valor, se pone el atributo value="number".

	

		
<ol>
    <li value="2"></li>
</ol>

	

	

		Copy

Rol role

Cada una de las etiquetas que hemos visto antes tiene un rol, pero se puede cambiar el rol de cada una de ellas con la etiqueta role="rol".

	

		
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content="Descripción para los buscadores"/>
        <meta name="robots" content="index,folow"/>
        <title>Título pestaña</title>
        <meta name="viewport" content="width=device-width"/>
        <meta name="theme-color" content="#09f"/>
        <link rel="stulesheet" href="path"/>
        <link rel="icon" type="image/png" href="path"/>
        <meta property="og:title" content="Título para las redes sociales"/>
        <meta property="og:description" content="Descripción para las redes sociales"/>
        <meta property="og:image" content="path"/>
        <meta property="og:image:alt" content="Texto alternativo para la imagen"/>
        <link rel="alternate" href="path" hreflang="en"/>
        <link rel="canonical" href="path"/>
    </head>
    <body>
        <header>
            <nav>
                <a href="path">Enlace</a>
                <img src="path" alt="Texto alternativo"/>
            </nav>
        </header>
        <main>
            <section>
                <article>
                    <div>
                        <ul>
                            <li></li>
                        </ul>
                        <ol>
                            <li></li>
                        </ol>
                    </div>
                    <div role="list">
                        <div role="listitem">
                        </div>
                    </div>
                </article>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>

	

	

		Copy

Etiquetas de contenidolink image 13

Para crear un nuevo párrafo utilizamos la etiqueta <p></p>. Para darle énfasis a algo dentro de un párrafo podemos pensar en usar negrita (<b></b>), pero es mejor usar la etiqueta <strong></strong>, ya que la etiqueta b está **deprecada**.

Para crear un título tenemos las etiquetas h1, h2, h3, h4, h5, h6.

Para crear hipervínculos se usa la etiqueta a, el atributo href indica la dirección del hipervínculo. Si se pone una almohadilla # no se refresca la página

Etiquetas multimedialink image 14

Las etiquetas multimedia no tienen etiqueta de apertura y cierre, por ejemplo la etiqueta img no se escribe como <img></img> sino como <img/>. Esto es porque se reemplaza por una imagen. Por lo que en general las etiquetas reemplazables no tienen etiqueta de cierre.

Existen dos tipos de imágenes

  • Lossy (con pérdida): Estas imágenes pierden la calidad, pero son más ligeras. jpg, jpeg
  • Lossless (sin pérdida): Estas imágenes no pierden la calidad, pero son muy pesadas. GIF, PNG-8, PNG-24, SVG

Optimización de las imágeneslink image 15

El tamaño promedio debe ser de 70 KB

  • Tiny PNG: reduce el tamaño de la imagen
  • Verexif: Quita los metadatos de la imagen

Etiqueta img

Página para descargar imágenes gratuitas por internet pexels

La etiqueta img tiene el atributo src donde se indica la fuente.

	

		
&lt;img src="path"/&gt;

	

	

		Copy

El atributo alt donde se indica el texto alternativo.

	

		
&lt;img src="path" alt="Texto alternativo"/&gt;

	

	

		Copy

El atributo title donde se indica el título de la imagen, que sirve para que cuando dejemos el ratón encima de la imagen aparezca el título, también sirve para el SEO, para que los buscadores sepan de qué trata la imagen.

	

		
&lt;img src="path" alt="Texto alternativo" title="Título"/&gt;

	

	

		Copy

También podemos poner el atributo width y height para indicar el tamaño de la imagen, pero es mejor no ponerlo y dejar que el navegador lo calcule

	

		
&lt;img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/&gt;

	

	

		Copy

Con el atributo hidden se puede ocultar la imagen. Lo cual es muy útil para cuando queremos que una imagen aparezca después de que el usuario haga una acción. Así con el JavaScript podemos quitar el atributo hidden y la imagen aparecerá.

	

		
&lt;img src="path" alt="Texto alternativo" title="Título" hidden/&gt;

	

	

		Copy

Para que las páginas se carguen más rápido, se puede poner el atributo loading="lazy" que hace que la imagen se cargue cuando el usuario se acerca a ella.

	

		
&lt;img src="path" alt="Texto alternativo" title="Título" loading="lazy"/&gt;

	

	

		Copy

**Importante!** No hay que poner el atributo loading="lazy" en las imágenes que son importantes para el SEO, como por ejemplo el logo. Ni tampoco en las imágenes que están al inicio de la página web porque si no se verá un parpadeo

Etiqueta figure

Esta etiqueta nos permite crear un contenedor para la imagen, por ejemplo nos permite añadir una descripción, para ello se necesita usar la etiqueta figcapture

	

		
&lt;figure&gt;
    &lt;img src="path" alt="Texto alternativo" title="Título"/&gt;
    &lt;figcaption&gt;Descripción&lt;/figcaption&gt;
&lt;/figure&gt;

	

	

		Copy

Etiqueta video

Con esta etiqueta se pueden añadir vídeos, para ello se usa el atributo src. Para que aparezcan los botones de reproducción hay que poner el atributo controls. El último atributo es preload="auto", esto es para que el vídeo se empiece a descargar cuando se empieza a cargar la página, así cuando lo va a reproducir el usuario ya tiene mucho cargado y tardará menos en reproducirse.

	

		
&lt;video src="path" controls preload="auto"&gt;
&lt;/video&gt;

	

	

		Copy

Si quieres que empiece a reproducirse en un minuto determinado, en src justo después de la fuente hay que poner #t=xx,yy

	

		
&lt;video src="path#t=1,2" controls&gt;
&lt;/video&gt;

	

	

		Copy

Si el vídeo está en varios formatos, la fuente hay que ponerla dentro de una etiqueta llamada source, ahí se indican las distintas posibles fuentes del vídeo. El navegador decidirá qué fuente usar. Esto es porque hay navegadores que reproducen mejor unos vídeos u otros

	

		
&lt;video controls&gt;
    &lt;source src="path" type="video/mp4"/&gt;
    &lt;source src="path" type="video/webm"/&gt;
&lt;/video&gt;

	

	

		Copy

Si no queremos que haya controles de reproducción y que el video se reproduzca automáticamente, se pone el atributo autoplay.

	

		
&lt;video src="path" autoplay&gt;
&lt;/video&gt;

	

	

		Copy

Pero para no molestar al usuario podemos hacer que se reproduzca sin sonido, para ello se pone el atributo muted.

	

		
&lt;video src="path" autoplay muted&gt;
&lt;/video&gt;

	

	

		Copy

Si queremos que el video se reproduzca en bucle, se pone el atributo loop.

	

		
&lt;video src="path" autoplay muted loop&gt;
&lt;/video&gt;

	

	

		Copy

Esto es muy útil para poner un video de fondo en una página web.

Para cambiar la imagen del vídeo cuando no se está reproduciendo, se pone el atributo poster="path".

	

		
&lt;video src="path" autoplay muted loop poster="path"&gt;
&lt;/video&gt;

	

	

		Copy

Etiqueta audio

Para reproducir audio se usa la etiqueta audio, para ello se usa el atributo src.

	

		
&lt;audio src="path"&gt;
&lt;/audio&gt;

	

	

		Copy

Para que aparezcan los controles de reproducción se pone el atributo controls.

	

		
&lt;audio src="path" controls&gt;
&lt;/audio&gt;

	

	

		Copy

Si queremos que el audio se reproduzca automáticamente, se pone el atributo autoplay.

	

		
&lt;audio src="path" autoplay&gt;
&lt;/audio&gt;

	

	

		Copy

Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.

	

		
&lt;audio src="path" autoplay loop&gt;
&lt;/audio&gt;

	

	

		Copy

Si queremos que el audio se reproduzca en bucle, se pone el atributo loop.

	

		
&lt;audio src="path" autoplay loop&gt;
&lt;/audio&gt;

	

	

		Copy

Etiqueta iframe

Cuando compartimos un vídeo de youtube nos da la opción de copiar el código. Esto genera un código html que tiene la etiqueta iframe. Esta etiqueta sirve para incrustar contenido de otras páginas web.

	

		
&lt;iframe src="path"&gt;
&lt;/iframe&gt;

	

	

		Copy

Hemos hablado de la página de YouTube, pero podríamos incrustar cualquier página. Aunque hay algunas páginas que no permiten esto.

Etiqueta dialog

Habrás visto que mucha gente en sus portfolios pone sus proyectos y cuando pinchas en él se te abre un cuadro de diálogo con más información, o en galerías de imágenes cuando pinchas en una imagen se te abre un cuadro de diálogo con la imagen más grande. Esto se hace con la etiqueta dialog.

	

		
&lt;dialog&gt;
&lt;/dialog&gt;

	

	

		Copy

Dentro puedes poner lo que quieras, por ejemplo un título, un texto, una imagen, etc.

	

		
&lt;dialog id="id"&gt;
    &lt;h1&gt;Título&lt;/h1&gt;
    &lt;p&gt;Texto&lt;/p&gt;
    &lt;img src="path" alt="Texto alternativo"/&gt;
&lt;/dialog&gt;

	

	

		Copy

Para que se abra el cuadro de diálogo, se puede poner un botón dentro de un script.

	

		
&lt;dialog id="dialog"&gt;
    &lt;h1&gt;Título&lt;/h1&gt;
    &lt;p&gt;Texto&lt;/p&gt;
    &lt;img src="path" alt="Texto alternativo"/&gt;
&lt;/dialog&gt;
 
&lt;button id="open"&gt;
    Abrir
&lt;/button&gt;
 
&lt;script&gt;
    window.open.addEventListener("click", () =&gt; {
        window.dialog.showModal();
    });
&lt;/script&gt;

	

	

		Copy

Formularioslink image 16

Para crear un formulario lo hacemos con la etiqueta form, dentro de esta etiqueta se ponen los campos del formulario. El atributo action indica a dónde se envía el formulario. El atributo method indica el método de envío, puede ser get o post. El atributo name indica el nombre del formulario, esto es útil para el JavaScript.

	

		
&lt;form action="path" method="post" name="name"&gt;
&lt;/form&gt;

	

	

		Copy

Agrupación de elementoslink image 17

Con la etiqueta fieldset se pueden agrupar elementos de un formulario. Dentro de esta etiqueta se ponen los elementos del formulario. El atributo legend indica el título del grupo de elementos.

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

Labellink image 18

Con la etiqueta label se crea una etiqueta para un elemento del formulario. El atributo for indica el id del elemento del formulario al que hace referencia.

A continuación se pone el elemento del formulario, por ejemplo input.

Hay que especificar el type, que puede ser de tipo text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.

Si el input hay que introducirlo obligatoriamente, se puede añadir el atributo required.

Si el usuario ya había introducido un valor en el input, mediante el atributo autocomplete se puede indicar que se rellene automáticamente.

Con el atributo pattern se puede especificar una expresión regular para validar el input. Por ejemplo para validar si el correo o el teléfono son correctos.

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
 
        &lt;label for="id"&gt;Nombre:&lt;/label&gt;
        &lt;input type="text" id="id" name="name" placeholder="Nombre" required autocomplete="on"/&gt;
        
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

Otra manera de especificar el input de una label es poner el input dentro de la label. Ahora no es necesario el atributo for porque se entiende que la label hace referencia al input que está dentro.

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
 
        &lt;label&gt;Nombre:
            &lt;input type="text" id="id" name="name" placeholder="Nombre" required/&gt;
        &lt;/label&gt;
        
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

Selectlink image 19

Con la etiqueta select se crea un desplegable. Dentro de esta etiqueta se ponen las opciones del desplegable con la etiqueta option. El atributo value indica el valor de la opción. El atributo selected indica la opción que está seleccionada por defecto.

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
 
        &lt;label&gt;Nombre:
            &lt;input type="text" id="id" name="name" placeholder="Nombre" required/&gt;
        &lt;/label&gt;
 
        &lt;label&gt;País:
            &lt;select name="country"&gt;
                &lt;option value="es"&gt;España&lt;/option&gt;
                &lt;option value="fr"&gt;Francia&lt;/option&gt;
                &lt;option value="it" selected&gt;Italia&lt;/option&gt;
            &lt;/select&gt;
        &lt;/label&gt;
        
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

En caso de tener muchas opciones, se puede usar la etiqueta datalist para crear una lista de opciones, de esta manera, cuando el usuario va escribiendo una de las opciones de la lista, se le van mostrando las opciones que coinciden con lo que ha escrito. Dentro de esta etiqueta se ponen las opciones con la etiqueta option. El atributo value indica el valor de la opción.

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
 
        &lt;label&gt;Nombre:
            &lt;input type="text" id="id" name="name" placeholder="Nombre" required/&gt;
        &lt;/label&gt;
 
        &lt;label&gt;País:
            &lt;input type="text" list="countries" name="country"/&gt;
            &lt;datalist id="countries"&gt;
                &lt;option value="es"&gt;España&lt;/option&gt;
                &lt;option value="fr"&gt;Francia&lt;/option&gt;
                &lt;option value="it"&gt;Italia&lt;/option&gt;
            &lt;/datalist&gt;
        &lt;/label&gt;
        
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

Enviarlink image 20

Para enviar el formulario se usa la etiqueta input con el atributo type="submit".

	

		
&lt;form action="path" method="post" name="name"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Título&lt;/legend&gt;
 
        &lt;label&gt;Nombre:
            &lt;input type="text" id="id" name="name" placeholder="Nombre" required/&gt;
        &lt;/label&gt;
        
        &lt;input type="submit" value="Enviar"/&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

	

	

		Copy

Detailslink image 21

Si se quieren hacer secciones de texto que normalmente estén contraidas, como por ejemplo una sección de preguntas frecuentes, podemos usar la etiqueta details. Dentro de esta etiqueta se pone la etiqueta summary que es el título de la sección. Y dentro de la etiqueta details se pone el texto de la sección.

	

		
&lt;details&gt;
    &lt;summary&gt;Título&lt;/summary&gt;
    &lt;p&gt;Texto&lt;/p&gt;
&lt;/details&gt;

	

	

		Copy

Si queremos que alguno aparezca por defecto, se pone el atributo open.

	

		
&lt;details open&gt;
    &lt;summary&gt;Título&lt;/summary&gt;
    &lt;p&gt;Texto&lt;/p&gt;
&lt;/details&gt;

	

	

		Copy

Seguir leyendo

Últimos posts -->

¿Has visto estos proyectos?

Horeca chatbot

Horeca chatbot Horeca chatbot
Python
LangChain
PostgreSQL
PGVector
React
Kubernetes
Docker
GitHub Actions

Chatbot conversacional para cocineros de hoteles y restaurantes. Un cocinero, jefe de cocina o camaeror de un hotel o restaurante puede hablar con el chatbot para obtener información de recetas y menús. Pero además implementa agentes, con los cuales puede editar o crear nuevas recetas o menús

Naviground

Naviground Naviground

Subtify

Subtify Subtify
Python
Whisper
Spaces

Generador de subtítulos para videos en el idioma que desees. Además a cada persona le pone su subtítulo de un color

Ver proyecto

arrow svg

Ver código

arrow svg
Ver todos los proyectos -->

¿Quieres aplicar la IA en tu proyecto? Contactame!

¿Quieres mejorar con estos tips?

Últimos tips -->

Usa esto en local

Los espacios de Hugging Face nos permite ejecutar modelos con demos muy sencillas, pero ¿qué pasa si la demo se rompe? O si el usuario la elimina? Por ello he creado contenedores docker con algunos espacios interesantes, para poder usarlos de manera local, pase lo que pase. De hecho, es posible que si pinchas en alún botón de ver proyecto te lleve a un espacio que no funciona.

Flow edit

Flow edit Flow edit

Edita imágenes con este modelo de Flow. Basándose en SD3 o FLUX puedes editar cualquier imagen y generar nuevas

Ver proyecto

arrow svg

Ver código

arrow svg

FLUX.1-RealismLora

FLUX.1-RealismLora FLUX.1-RealismLora
Ver todos los contenedores -->

¿Quieres aplicar la IA en tu proyecto? Contactame!

¿Quieres entrenar tu modelo con estos datasets?

short-jokes-dataset

Dataset de chistes en inglés

opus100

Dataset con traducciones de inglés a español

netflix_titles

Dataset con películas y series de Netflix

Ver más datasets -->