Please enable JavaScript to use CodeHS

Documentación HTML

Básicos de HTML

Esqueleto de archivos HTML

Este es un sencillo esqueleto de archivo html que puedes utilizar para comenzar un proyecto. Para obtener información sobre etiquetas específicas, consulta más abajo.
<!DOCTYPE html>
<html>
	<head>
		<title>Your Page Title</title>
	</head>

	<body>
		<!--Dentro de la etiqueta body es donde pones todas las cosas chulas
		que quieras en tu página!-->
	</body>
</html>
La declaración !DOCTYPE debe ser lo primero en tu documento html. No es una etiqueta html, sino una instrucción para el navegador la versión de HTML en la que está escrita la página.

La etiqueta html indica al navegador que se trata de un documento html.

El elemento head es un contenedor para todos los elementos head que pueden incluir un título para un documento, scripts, estilos, etc. La etiqueta title define el título de la página.

El elemento body contiene todo el contenido de un documento HTML, como texto, hipervínculos, imágenes, tablas y listas.

Etiquetas

Las etiquetas HTML son palabras clave que definen cómo el navegador debe formatear y mostrar el contenido.
A basic HTML element starts like this:
<tag>
    It starts with an opening tag and ends with a closing tag.
    The closing tag has the same name as the opening tag, but with a /
    Everything inside should be indented one level.
</tag>

Atributos HTML

Se pueden añadir atributos a cualquier etiqueta para añadir más información sobre ella.
El formato general para añadir un atributo y un valor para el atributo es:
<tag attribute="value">Tag content here</tag>
Ejemplo HTML:
<img src="https://codehs.com/static/img/logo.png" height="50px">
Resultado de ejemplo:

Etiquetas de encabezado

Las etiquetas <h1> a <h6> se utilizan para definir encabezados HTML. <h1> define el encabezado encabezamiento más importante. <h6> define el encabezamiento menos importante. encabezado menos importante.

Ejemplo HTML:
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
Ejemplo de resultado:

Level 1 Header

Level 2 Header

Level 3 Header


Etiquetas básicas

La etiqueta <p> define un párrafo.
La etiqueta <em> muestra el texto en cursiva.
La etiqueta <strong> muestra el texto en negrita.

Ejemplo HTML:
<p>
    This is a paragraph where <em>this will display in italics</em>
    and <strong>this will display in bold</strong>.
</p>
Ejemplo de resultado:

This is a paragraph where this will display in italics and this will display in bold.


Etiquetas semánticas

Las siguientes etiquetas semánticas definen la estructura de una página HTML5:
  • <header>
  • <nav>
  • <main>
  • <article>
  • <section>
  • <aside>
  • <footer>

La etiqueta <strong> define texto fuertemente importante.
La etiqueta <em> enfatiza el texto.
La etiqueta <mark> resalta el texto.

Ejemplo HTML:
<p>
    This is text that is <strong>important</strong>.
    <br>
    This is text that needs <em>emphasized</em>.
    <br>
    This is text that needs <mark>highlighted</mark>.
</p>
Ejemplo Resultado:

This is text that is important.
This is text that needs emphasized.
This is text that needs highlighted.


Líneas horizontales

La etiqueta <hr<> define una ruptura temática con una regla horizontal.

Ejemplo HTML:
<p>
    This is a section about a certain theme.
</p>
<hr>
<p>
    This is a section about another theme separated from the previous section
    by a horizontal line that implies a thematic break in content.
</p>
Ejemplo Resultado:

This is a section about a certain theme.


This is a section about another theme separated from the previous section by a horizontal line that implies a thematic break in content.


Salto de línea

La etiqueta <br> introduce un salto de línea simple (sin línea horizontal).

Ejemplo de HTML:
<p>
    This is a section about a certain theme.
</p>
<br>
<p>
    This is another section that starts on a new line.
</p>
Ejemplo Resultado:

This is a section about a certain theme.


This is another section that starts on a new line.


La etiqueta <a> crea un hipervínculo que se utiliza para enlazar de una página a otra. El atributo href indica el destino del enlace.

Ejemplo de HTML:
<a href = "https://google.com">Google</a>
Resultado de ejemplo:
Google

Imágenes

La etiqueta <img> define una imagen en una página HTML.

El atributo src indica de dónde procede la imagen y puede ser una ruta de directorio a una foto guardada en tu ordenador o la url de una imagen en Internet, como en el ejemplo siguiente. También puedes subir tus propias fotos a CodeHS para utilizarlas en tu programa. Consulta las instrucciones para hacerlo ¡aquí!

El atributo alt especifica el texto alternativo que se mostrará si la imagen no puede cargarse.

Los atributos width y height especifican la anchura y la altura de la imagen.


Ejemplo HTML:
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">
Ejemplo Resultado:
Image not found

Listas

La etiqueta <ul> define una lista desordenada (viñetas)
La etiqueta <ol> define una lista ordenada (lista numerada)
La etiqueta <li> define un único elemento de lista dentro de una lista

Ejemplo HTML:
<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ol>
<ul>
    <li>Item A</li>
    <li>
        Item B
        <ol>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ol>
    </li>
    <li>Item C</li>
</ul>
Ejemplo de resultado:
  1. Item one
  2. Item two
  3. Item three
  • Item A
  • Item B
    1. Subitem 1
    2. Subitem 2
  • Item C

Tablas

La etiqueta <table> define un elemento de tabla que puede contener varias filas de tabla individuales.
La etiqueta <thead> agrupa la información de cabecera de la tabla.
La etiqueta <tbody> agrupa la información del cuerpo de la tabla. La etiqueta <tr>. define una única fila de la tabla. El elemento tr puede contener varias celdas de información.
La etiqueta <th> define una cabecera de tabla. define una cabecera de tabla. Las etiquetas th se suelen utilizar en la primera fila de la tabla para mostrar las cabeceras de cada columna.
La etiqueta <td> define un elemento de datos de tabla, una única celda de información. Los elementos td van dentro de una fila de tabla.
El atributo borde define el grosor del borde de la tabla (por defecto es sin borde)

Ejemplo HTML:
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Favorite Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sam</td>
            <td>Purple</td>
        </tr>
        <tr>
            <td>Taylor</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>
Ejemplo de resultado:
Name Favorite Color
Sam Purple
Taylor Orange

Comentarios

La etiqueta de comentario se utiliza para insertar notas útiles en el código HTML. Los comentarios no se muestran en la página web resultante, sólo están ahí para el lector del código.

Utilizar comentarios en tu código puede ayudarte a mantener un código limpio, claro y comprensible.
<!-- Tu comentario va aquí. -->

<!-- Esta sección de la página web enlaza con otras partes del sitio -->
<a href="about.html">About</a>
<a href="home.html">Home</a>

Incorporación de iframes

La etiqueta <iframe> incrusta una página HTML dentro de otra página HTML. Suelen utilizarse para insertar contenido de otra fuente, como tweets, vídeos o anuncios.

El atributo src indica de dónde procede la página HTML y es la url de una página HTML en Internet, como en el ejemplo siguiente.

Los atributos anchura y altura especifican la anchura y la altura de la ventana iframe.

Ejemplo HTML:
<iframe src = "https://codehs.com" width="400px" height="400px"></iframe>

Básicos del CSS

Estilos en línea

El atributo style de un elemento te permite aplicar estilo a ese único elemento.
El formato para el atributo style es:
<tagname style="property: value;">
Puedes añadir varios estilos a un mismo elemento:
style="property1: value1; property2: value2;"
Ejemplo HTML:
<h3 style="background-color:LightBlue;">My Journal</h3>
<p style="background-color:LightYellow; font-size:15px;">Today I walked my puppy at the park and made my own website.</p>
Ejemplo Resultado:

My Journal

Today I walked my puppy at the park and made my own website.


Para obtener una lista completa de las propiedades y valores que se pueden utilizar, ve a Propiedades CSS.

Añadir CSS a una página HTML

En lugar de añadir un atributo de estilo a cada elemento, podemos utilizar código CSS para seleccionar y varios elementos a la vez.
El código CSS va dentro de la etiqueta <style> que va en el elemento <head>.
El estilo está separado del contenido de la página. Como son metadatos sobre el contenido, deben estar en el encabezamiento.
Ejemplo:
<head>
    <title>Your Page Title</title>
    <style>
        /*
         * This will select all h1 elements
         * and give them a font size of 30px
         * and a color of red.
         */
        h1 {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <h1>CodeHS</h1>
</body>
Resultado:

CodeHS


Añadir CSS externo

En lugar de poner todas nuestras reglas CSS en una etiqueta style, también es posible añadir código CSS escrito en un archivo separado. El archivo debe ser un archivo .css, como my_style.css
El archivo CSS externo debe añadirse a la página mediante una etiqueta <link> en el <head> de la página HTML.
Ejemplo:
my_page.html
<html>
    <head>
        <title>Your Page Title</title>
        <link rel="stylesheet" type="text/css" href="my_style.css">
    </head>
    <body>
        <h1>CodeHS</h1>
    </body>
</html>
my_style.css
/*
 * Esto seleccionará todos los elementos h1
 * y les dará un tamaño de fuente de 30px
 * y un color rojo.
 */
h1 {
    font-size: 30px;
    color: red;
}
Resultado:

CodeHS


Sintaxis CSS

En CSS, el selector define a qué elementos HTML se aplica la regla CSS. Las declaraciones CSS están dentro de llaves y definen el estilo. Las propiedades son los elementos a los que se aplica el estilo y el valor de una propiedad es cómo se aplica el estilo a la característica.
/* Formato general */
selector {
    property: value;
    property: value;
}

/*
 * En esta regla CSS, h1 es el selector, y cada línea
 * dentro de las llaves es una declaración CSS.
 *
 * Esta regla seleccionará todos los elementos h1, establecerá su propiedad font-size
 * a 60px, y su propiedad color a rojo.
 */
h1 {
    font-size: 60px;
    color: red;
}
Para obtener una lista completa de las propiedades y valores que se pueden utilizar, ve a Propiedades CSS.

Comentarios CSS

Es importante añadir comentarios a tu código CSS para explicar al lector qué hace cada regla. Los comentarios son ignorados por el navegador cuando la página página. Los comentarios están ahí para ayudar al lector del código a entender lo que está pasando.

Un comentario CSS empieza por /* y termina por */.
Ejemplo:
h1 {
    /* Esto es un comentario de una sola línea */
    color: red;
}

/*
 * Este es un comentario multilínea que
 * abarca varias líneas
 */
h2 {
    color: green;
}

Selección por etiqueta

Podemos seleccionar elementos html para aplicarles estilo por su etiqueta. Si usamos una etiqueta como selector, se seleccionan todos los elementos con esa etiqueta.
/*
 * Esta regla CSS seleccionará todas las imágenes
 * y su altura se fijará en 200 píxeles
 */

img {
    height: 200px;
}

Selección por clase

La clase es un atributo que podemos añadir a las etiquetas html para dar estilo a un grupo de elementos. Si utilizamos una clase como selector, se seleccionan todos los elementos que comparten esa clase.

El estilo de clase prevalece sobre el estilo de etiqueta en caso de conflicto. En otras palabras, si una regla de selección por etiqueta dice que el elemento debe ser rojo, y una regla de selección por clase dice que el mismo elemento debe ser verde, la regla de clase prevalece y el elemento será verde.
Puedes añadir una clase a una etiqueta de la siguiente manera:
<tag class="class-name"></tag>

Puedes añadir varias clases a una etiqueta separando los nombres de las clases con espacios:
<tag class="class1 class2 class3"></tag>

Nombres de clase
  • No pueden empezar por un número
  • Deben ir todos en minúsculas
  • Debe usar guiones (-) entre las palabras, por ejemplo, "class-name"
  • Debe ser descriptivo
Para seleccionar todos los elementos con la misma clase, el selector CSS debe tener un punto seguido del nombre de la clase:
.class-name
Ejemplo:
<head>
    <title>Your Page Title</title>
    <style>
        /*
         * Esta regla se aplicará a todos los elementos con
         * la clase "alerta
         */
        .alert {
            color: red;
        }

        /*
         * Esta regla sólo se aplicará a los elementos <h1>.
         * con la clase "alert"
         */
        h1.alert {
            font-size: 20px;
        }

        /*
         * Esta regla se aplicará a todos los elementos con la clase
         * clase "morning-greeting"
         */
        .morning-greeting {
            background-color: LightYellow;
        }
    </style>
</head>
<body>
    <h1 class="alert morning-greeting">Good Morning!</h1>
    <p class="alert">Hi!</p>
</body>
Resultado:

Good Morning!

Hi!


Selección por ID

id es un atributo que podemos añadir a una etiqueta HTML para dar estilo a ese elemento concreto.
Un elemento sólo puede tener un id y el id de un elemento debe ser único.
Sólo debe haber una etiqueta con un id determinado en cualquier página web.
Si utilizas el ID como selector, seleccionarás el único elemento que tenga ese ID.

El estilo id prevalece sobre el estilo etiqueta y el estilo clase en caso de conflicto. En otras palabras, si una regla de selección por etiqueta dice que el elemento debe ser rojo, y una regla de selección por clase dice que el mismo elemento debe ser verde, y una regla de selección por id dice que el mismo elemento debe ser amarillo, la regla id prevalece y el elemento será amarillo.
Puedes añadir un id a una etiqueta de la siguiente manera:
<tag id="id-name"></tag>

nombres id:
  • No pueden empezar por un número
  • Deben ir en minúsculas
  • Debe usar guiones entre las palabras, es decir, "id-name"
  • Debe ser descriptivo
Para seleccionar un elemento con un id específico, el selector CSS debe tener un hashtag seguido del nombre del id:
#id-name
Ejemplo:
<head>
    <title>Your Page Title</title>
    <style>
        /*
         * Esta regla se aplicará al elemento único
         * con el id "logo"
         */
        #logo {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="logo">CodeHS</h1>
</body>
Resultado:

CodeHS


Divs

Los divs se utilizan para agrupar varios elementos HTML diferentes en un solo bloque. Un div crea un nuevo bloque de elementos, un bloque siempre empieza en una nueva línea y ocupa todo el ancho disponible en su contenedor.
Agrupar elementos en un div nos permite dar estilo a ese bloque como una unidad.
Ejemplo de HTML:
<div id="block-one">
    <h3>Welcome</h3>
    <p>Welcome to my web page.</p>
</div>
<div id="block-two">
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>
Ejemplo CSS:
#block-one {
    color: red;
}

#block-two {
    color: blue;
}

Ejemplo Resultado:

Welcome

Welcome to my web page.

  • Home
  • About

Spans

Los espacios se utilizan para agrupar trozos más pequeños de código HTML en línea. Los espacios no crean un nuevo bloque, sino que se suelen utilizar para añadir estilo a un pequeño trozo de HTML dentro de una línea (como una línea en un párrafo).
Ejemplo de HTML:
<p>This is a <span class="big">paragraph</span> of <span class="small">text</span></p>
Ejemplo CSS:
.big {
    font-size: 20px;
}

.small {
    font-size: 8px;
}
Ejemplo Resultado:

This is a paragraph of text

Propiedades CSS

Esta sección cubre algunas de las propiedades y valores CSS más utilizados. Para obtener una lista completa de las posibles propiedades y valores CSS, visita W3 Schools.

Color

Los Colores CSS pueden ser:
  • Un nombre de color válido, como "Blue" o "DarkGreen"
  • Un valor RGB, como "rgb(255, 0, 0)"
  • Un código de color HEX, como "#68ff00"

Nombres de colores

Nombres de colores comunes:
  • red
  • orange
  • yellow
  • green
  • blue
  • cyan
  • indigo
  • black
  • white
Los nombres no distinguen entre mayúsculas y minúsculas. "RED" es lo mismo que "red".
Hay 140 nombres de color válidos. Consulta una lista completa de todos los nombres aquí
Ejemplo:
p {
    color: blue;
}
Resultado:

Hello

Colores RGB

HTML y CSS representan los colores con el sistema de codificación de colores RGB (Red Green Blue).
Cada color se puede hacer simplemente mezclando diferentes cantidades de rojo, verde y azul.

Los valores de color RGB se pueden especificar en CSS utilizando "rgb(red, green, blue)"
  • Cada valor puede estar entre 0 y 255, ambos inclusive.
  • rgb(255, 0, 0) sería rojo
  • rgb(255, 255, 255) sería el blanco
  • rgb(0, 0, 0) sería negro
  • .
Ejemplo:
p {
    color: rgb(255, 0, 0);
}
Resultado:

Hola

Valores hexadecimales del color

También podemos representar los colores RGB mediante valores hexadecimales. 6 dígitos hexadecimales componen un color:
  • Los dos primeros dígitos hexadecimales especifican la cantidad de ROJO en el color
  • Los dos dígitos hexadecimales siguientes especifican la cantidad de VERDE en el color
  • Los dos últimos dígitos hexadecimales especifican la cantidad de AZUL en el color
  • Cada dígito puede ser un valor de 0 a F, siendo 0 el menor y F el mayor
  • "#ff0000" sería rojo
  • "#ffffff" sería blanco
  • "#000000" sería negro
Ejemplo:
p {
    color: #0000ff;
}
Resultado:

Hola

Seleccionador de colores

Utiliza este selector de color para encontrar el color exacto que deseas para tu página web:

Texto y fuente

color: color del texto en el elemento HTML seleccionado
font-size: tamaño de la fuente (por ejemplo, 30px)
font-family: familia de fuente (por ejemplo, Arial or Times)
font-style: estilo de fuente (por ejemplo, cursiva o normal)
font-weight: grosor de la fuente (negrita o negrita, o un valor de 100 a 900)
text-align: establece la alineación horizontal del texto (centro, izquierda, derecha)
<head>
    <title>Your Page Title</title>
    <style>
        h1 {
            font-size: 100px;
            font-weight: bold;
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to my blog!</h1>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools

Fondo

background-color: color de fondo del elemento HTML seleccionado
background-image: especifica una o más imágenes de fondo
background-repeat: establece cuántas veces se repetirá la imagen de fondo
<head>
    <title>Your Page Title</title>
    <style>
        body {
            background-image: url("sandpaper.gif");
        }
    </style>
</head>
<body>
    <h1>Welcome to my blog!</h1>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools

Borde

¡Las propiedades de borde nos permiten crear bordes alrededor de cualquier elemento HTML!
border-color: establece el color del borde para los cuatro lados del borde
border-width: establece la anchura del borde para los cuatro lados del borde
border-style: establece el estilo del borde para los cuatro lados del borde (sólido, punteado, discontinuo, doble)
border-size: establece el tamaño del borde para los cuatro lados del borde
border-right-color: establece el color del borde derecho
border-right-width: establece el ancho del borde derecho
border-right-style: establece el estilo del borde derecho (sólido, punteado, discontinuo, doble)
border-right-size: establece el tamaño del borde derecho
border-left-color: establece el color del borde izquierdo
border-left-width: establece el ancho del borde izquierdo
border-left-style: establece el estilo del borde izquierdo (sólido, punteado, discontinuo, doble)
border-left-size: establece el tamaño del borde izquierdo
border-top-color: establece el color del borde superior
border-top-width: establece el ancho del borde superior
border-top-style: establece el estilo del borde superior (sólido, punteado, discontinuo, doble)
border-top-size: establece el tamaño del borde superior
border-bottom-color: establece el color del borde inferior
border-bottom-width: establece el ancho del borde inferior
border-bottom-style: establece el estilo del borde inferior (sólido, punteado, discontinuo, doble)
border-bottom-size: establece el tamaño del borde inferior
<head>
    <title>Your Page Title</title>
    <style>
        h1 {
            border-color: green;
            border-width: 2px;
            border-style: dashed;
        }
    </style>
</head>
<body>
    <h1>I love using CodeHS!</h1>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools

Margen

El margen es la cantidad de espacio entre un elemento y los elementos que lo rodean. El margen se establece con un valor de píxeles, pero también se puede establecer en automático.
Establecer el margen en automático centra el elemento dentro de su contenedor.
margin: abreviatura para establecer el margen superior, derecho, inferior e izquierdo (en ese orden)
margin-top: establece el margen para la parte superior del contenedor
margin-right: establece el margen para la derecha del contenedor
margen inferior margin-bottom: establece el margen para la parte inferior del contenedor
margen izquierdo margin-left: establece el margen para la izquierda del contenedor
<head>
    <title>Your Page Title</title>
    <style>
        h1 {
            margin: auto;
        }
        p {
            margin: 10px 20px 10px 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to my blog!</h1>
    <p>Here I will write about my life and adventures.</p>
</body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools

Relleno

El relleno es la cantidad de espacio entre el contenido del elemento y el borde del elemento. El relleno se establece con un valor de píxeles.
A diferencia del margen, no se puede establecer en automático.
padding: abreviatura para establecer el relleno superior, derecho, inferior e izquierdo (en ese orden)

padding-top:
establece el relleno para la parte superior del contenedor.
padding-right: establece el relleno para la parte derecha del contenedor.
padding-bottom: establece el relleno para la parte inferior del contenedor
padding-left: establece el relleno para la izquierda del contenedor
    <head>
        <title>Your Page Title</title>
        <style>
            h1 {
                margin: auto;
                padding-top: 15px;
                padding-bottom: 15 px;
            }
            p {
                margin: 10px 20px 10px 20px;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to my blog!</h1>
        <p>Here I will write about my life and adventures.</p>
    </body>
Para obtener una lista completa de las posibles propiedades y valores CSS, visita W3 Schools

Transformar

La propiedad transformar establece una transformación 2D or 3D en un elemento. Esto puede sesgar, rotar, trasladar o escalar un elemento web.
transform: skew(x, y) sesga un elemento a lo largo del eje x, del eje y, o de ambos.
transform: scale(x, y) escala un elemento a lo largo del eje x, del eje y, o de ambos.

transform: rotate(angle in degrees)
gira un elemento en función de un parámetro angular

transform: translate(x, y) traslada o reposiciona un elemento a lo largo del eje x, y, o ambos
    <head>
        <title>Your Page Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                padding: 32px;
                background-color: blue;
            }
            .skew {
                transform: skew(10deg, 25deg);
            }
            .rotate {
                transform: rotate(90deg);
            }
            .scale {
                transform: scale(2, 1);
            }
            .translate {
                transform: translate(30px, 40px);
            }
        </style>
    </head>
    <body>
        <div class="skew"></div>
        <div class="rotate"></div>
        <div class="scale"></div>
        <div class="translate"></div>
    </body>
Para obtener una lista completa de posibles propiedades y valores CSS, visita W3 Schools

Bootstrap

Básicos de Bootstrap

Bootstrap es una biblioteca gratuita para crear páginas web profesionales, adaptables y móviles. Bootstrap proporciona varios componentes HTML prefabricados y clases CSS que puedes utilizar para que tus páginas tengan un aspecto limpio y profesional en todos los dispositivos.

Añadir Bootstrap

Para añadir Bootstrap a tu página web, sólo tienes que añadir unas cuantas etiquetas al elemento head para importar el código CSS y JavaScript de Bootstrap.
Aquí tienes la plantilla inicial para una página Bootstrap:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS de Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <!-- CSS de los iconos de Bootstrap -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

        <!-- JavaScript de Bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    <body>
        <!-- Tu código HTML aquí&>
    </body>
</html>

Más Bootstrap

Para consultar la documentación completa de Bootstrap, visita el Sitio de documentación de Bootstrap