HTML

Introducción a HTML
¡Bienvenido al mundo del código! El año pasado, millones de estudiantes de nuestra

comunidad comenzaron con HTML. ¿Por qué? HTML es el esqueleto de todas las
páginas web. A menudo es el primer idioma que aprenden los desarrolladores,
especialistas en marketing y diseñadores y es fundamental para el trabajo de
desarrollo front-end. Si es la primera vez que tocas el código, estamos
entusiasmados por lo que estás a punto de crear.
Entonces, ¿qué es exactamente HTML? HTML proporciona estructura al contenido

que aparece en un sitio web, como imágenes , texto o vídeos . Haga clic derecho en
cualquier página de Internet, seleccione "Inspeccionar" y verá HTML en un panel de
su pantalla.
HTML significa lenguaje de marcado de hipertexto:
Un lenguaje de marcado es un lenguaje informático que define la estructura y

presentación del texto sin formato.
En HTML, la computadora puede interpretar texto sin formato que está
envuelto en elementos HTML .
Hipertexto es texto que se muestra en una computadora o dispositivo que
brinda acceso a otro texto a través de enlaces , también conocidos como
hipervínculos . Probablemente haya hecho clic en un par de hipervínculos en
su camino a este curso de Codecademy.
Aprender HTML es el primer paso para crear sitios web, pero incluso un poco de
conocimiento puede ayudarte a insertar fragmentos de código en plantillas de
boletines, blogs o sitios web. A medida que continúa aprendiendo, puede superponer
HTML con CSS y JavaScript para crear sitios web dinámicos y visualmente
atractivos. Pero por ahora, nos centraremos en cómo agregar y modificar contenido
básico en una página, como texto, imágenes y videos. No se preocupe si los sitios
web se ven feos: apenas estamos comenzando.
Anatomía HTML
HTML se compone de elementos . Estos elementos estructuran la página web y definen su contenido.
Echemos un vistazo a cómo están escritos.
El diagrama de la derecha muestra un elemento de párrafo HTML. Como podemos ver, el elemento
párrafo se compone de:
Una etiqueta de apertura ( <p>)
El contenido (“¡Hola mundo!”)

Una etiqueta de cierre ( </p>)
Una etiqueta y el contenido entre ellas se denomina elemento HTML. Hay muchas etiquetas que
podemos usar para organizar y mostrar texto y otro tipo de contenido, como imágenes.
Repasemos rápidamente cada parte del elemento que se muestra en la imagen:
Elemento HTML (o simplemente elemento): una unidad de contenido en un documento HTML

formada por etiquetas HTML y el texto o medio que contiene.
Etiqueta HTML: el nombre del elemento, rodeado por un corchete angular de apertura ( <) y
de cierre ( >).
Etiqueta de apertura: la primera etiqueta HTML utilizada para iniciar un elemento HTML. El
tipo de etiqueta está rodeado por corchetes angulares de apertura y cierre.
Contenido: la información (texto u otros elementos) contenida entre las etiquetas de apertura
y cierre de un elemento HTML.
Etiqueta de cierre: la segunda etiqueta HTML utilizada para finalizar un elemento HTML. Las
etiquetas de cierre tienen una barra diagonal ( /) dentro de ellas, directamente después del
corchete angular izquierdo.
Instrucciones
Estudie el diagrama de la derecha para conocer la anatomía de la sintaxis HTML. Cuando haya
terminado, continúe con el siguiente ejercicio.
El cuerpo
elementos elemento del cuerpo . Solo se puede mostrar en la pantalla el
contenido dentro de las etiquetas del cuerpo de apertura y cierre . Así es
como se ven las etiquetas del cuerpo de apertura y cierre:
<body>
</body>
Una vez que el archivo tiene un cuerpo, se pueden agregar al cuerpo

muchos tipos diferentes de contenido, incluidos texto, imágenes y
botones.
<body>
<p>What's up, doc?</p>
</body>
Estructura HTML
HTML está organizado como una colección de relaciones de árboles genealógicos. Como
vio en el último ejercicio, colocamos <p>etiquetas dentro de <body>etiquetas. Cuando un
elemento está contenido dentro de otro elemento, se considera hijo de ese elemento. Se
dice que el elemento hijo está anidado dentro del elemento padre .
<body>
<p>This paragraph is a child of the body</p>
</body>
En el ejemplo anterior, el <p>elemento está anidado dentro del <body>elemento. El

<p>elemento se considera hijo del <body>elemento y el <body>elemento se considera padre.
También puede ver que agregamos dos espacios de sangría (usando la spacebarra) para
una mejor lectura.
Dado que puede haber múltiples niveles de anidación, esta analogía puede extenderse a los
nietos, bisnietos y más allá. La relación entre los elementos y sus elementos ancestros y
descendientes se conoce como jerarquía .
Consideremos un ejemplo más complicado que utiliza algunas etiquetas nuevas:
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>
En este ejemplo, el <body>elemento es el padre del <div>elemento. Tanto los elementos

<h1>como <p>son hijos del <div>elemento. Debido a que los elementos <h1>y <p>están al
mismo nivel, se consideran hermanos y ambos nietos del <body>elemento.
Comprender la jerarquía HTML es importante porque los elementos secundarios pueden

heredar el comportamiento y el estilo de su elemento principal. Aprenderá más sobre la
jerarquía de páginas web cuando comience a profundizar en CSS.
Encabezamientos
Los títulos en HTML son similares a los títulos en otros tipos de medios. Por ejemplo, en los
periódicos, normalmente se utilizan títulos grandes para captar la atención del lector. Otras
veces, los títulos se utilizan para describir contenido, como el título de una película o un
artículo educativo.
HTML sigue un patrón similar. En HTML, hay seis encabezados o elementos de

encabezado diferentes . Los títulos se pueden utilizar para diversos fines, como títulos de
secciones, artículos u otras formas de contenido.
La siguiente es la lista de elementos de encabezado disponibles en HTML. Están ordenados

de mayor a menor tamaño.
<h1>- utilizado para los títulos principales. Todos los demás títulos más pequeños se
utilizan como subtítulos.
<h2>
<h3>
<h4>
<h5>
<h6>
El siguiente código de ejemplo utiliza un título destinado a captar la atención del lector.
Utiliza el encabezado más grande disponible, el elemento de encabezado principal:
<h1>BREAKING NEWS</h1>
divisiones
Uno de los elementos más populares en HTML es el <div>elemento. <div>es la abreviatura
de "división" o un contenedor que divide la página en secciones. Estas secciones son muy
útiles para agrupar elementos en su HTML.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
<div>Los s no tienen inherentemente una representación visual, pero son muy útiles cuando
queremos aplicar estilos personalizados a nuestros elementos HTML. <div>Los s nos
permiten agrupar elementos HTML para aplicar los mismos estilos a todos los elementos
HTML internos. También podemos diseñar el <div>elemento como un todo. Puedes ver
cómo se puede hacer esto en el curso Aprender CSS .
<div>Los mensajes pueden contener cualquier texto u otros elementos HTML, como
enlaces, imágenes o vídeos. Recuerde agregar siempre dos espacios de sangría cuando
anide elementos dentro de <div>s para una mejor legibilidad.
Atributos
Si queremos expandir la etiqueta de un elemento, podemos hacerlo usando un atributo. Los
atributos son contenido agregado a la etiqueta de apertura de un elemento y se pueden usar
de varias maneras diferentes, desde proporcionar información hasta cambiar el estilo. Los
atributos se componen de las dos partes siguientes:
El nombre del atributo

El valor del atributo
Un atributo comúnmente utilizado es el id. Podemos usar el idatributo para especificar

contenido diferente (como <div>s) y es realmente útil cuando usas un elemento más de una
vez. idLos mensajes de texto tienen varios propósitos diferentes en HTML, pero por ahora
nos centraremos en cómo pueden ayudarnos a identificar el contenido de nuestra página.
Cuando agregamos un ida a <div>, lo colocamos en la etiqueta de apertura:
<div id="intro">
<h1>Introduction</h1>
</div>
Mostrar texto
Si desea mostrar texto en HTML, puede utilizar un párrafo o intervalo :
Los párrafos ( <p>) contienen un bloque de texto sin formato.

<span>contiene fragmentos cortos de texto u otro HTML. Se utilizan para separar
pequeños fragmentos de contenido que están en la misma línea que otro contenido.
Eche un vistazo a cada uno de estos elementos en acción a continuación:
<div>
<h1>Technology</h1>
</div>
<div>
<p><span>Self-driving cars</span> are anticipated to replace up
to 2 million jobs over the next two decades.</p>
</div>
En el ejemplo anterior, hay dos diferentes <div>. El segundo <div>contiene un <p>con

<span>Self-driving cars</span>. Este <span>elemento separa los “automóviles
autónomos” del resto del texto del párrafo.
Es mejor utilizar un <span>elemento cuando desee apuntar a un contenido específico que

está en línea o en la misma línea que otro texto. Si desea dividir su contenido en bloques , es
mejor utilizar un archivo <div>.
Aplicar estilo al texto
También puedes aplicar estilo al texto usando etiquetas HTML. La <em>etiqueta enfatiza el
texto, mientras que la <strong>etiqueta resalta el texto importante.
Más adelante, cuando comience a diseñar sitios web, decidirá cómo desea que los
navegadores muestren el contenido dentro de <em>las <strong>etiquetas. Los navegadores,
sin embargo, tienen hojas de estilo integradas que generalmente aplicarán estilos a estas
etiquetas de las siguientes maneras:
La <em>etiqueta generalmente se mostrará con énfasis en cursiva .

Por lo general, se <strong>mostrarán con énfasis en negrita .
Eche un vistazo a cada estilo en acción:
<p><strong>The Nile River </strong> is the <em>longest</em> river

in the world, measuring over 6,850 kilometers long (approximately
4,260 miles).</p>
En este ejemplo, las etiquetas <strong>y <em>se utilizan para enfatizar el texto y producir lo
siguiente:
El río Nilo es el río más largo del mundo y mide más de 6.850 kilómetros de largo
(aproximadamente 4.260 millas).
Como podemos ver, “El río Nilo” está en negrita y “el más largo” en cursiva.
INTRODUCCIÓN A HTML
Saltos de línea
El espacio entre el código en un archivo HTML no afecta la posición de los elementos en el
navegador. Si está interesado en modificar el espaciado en el navegador, puede utilizar el
elemento de salto de línea<br> de HTML: .
El elemento de salto de línea es único porque solo se compone de una etiqueta inicial.
Puede usarlo en cualquier lugar dentro de su código HTML y se mostrará un salto de línea
en el navegador.
<p>The Nile River is the longest river <br> in the world,

measuring over 6,850 <br> kilometers long (approximately 4,260
<br> miles).</p>
El código del ejemplo anterior dará como resultado un resultado similar al siguiente:
El río Nilo es el río más largo

del mundo y mide más de 6.850
kilómetros de largo (aproximadamente 4.260
millas).
Listas desordenadas
Además de organizar el texto en forma de párrafo, también puedes mostrar el contenido en
una lista fácil de leer.
En HTML, puede utilizar una etiqueta de lista desordenada<ul> ( ) para crear una lista de
elementos sin ningún orden en particular. Una lista desordenada describe los elementos
individuales de la lista con una viñeta.
El <ul>elemento no debe contener texto sin formato y no formateará automáticamente el

texto sin formato en una lista desordenada de elementos. Los elementos de la lista
individuales deben agregarse a la lista desordenada usando la <li>etiqueta. La <li>etiqueta
de elemento de lista o se utiliza para describir un elemento en una lista.
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
En el ejemplo anterior, la lista se creó usando la <ul>etiqueta y todos los elementos

individuales de la lista se agregaron usando <li>etiquetas.
La salida se verá así:
Limas
Tortillas
Pollo
Listas ordenadas
Las listas ordenadas ( <ol>) son como listas desordenadas, excepto que cada elemento de
la lista está numerado. Son útiles cuando necesita enumerar diferentes pasos en un proceso
o clasificar elementos del primero al último.
Puede crear la lista ordenada con la <ol>etiqueta y luego agregar elementos de lista
individuales a la lista usando <li>etiquetas.
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>
La salida se verá así:
Precalienta el horno a 350 grados.

Mezcla harina integral, bicarbonato de sodio y sal.
Batir la mantequilla y el azúcar en un recipiente aparte.
Agrega los huevos y el extracto de vainilla al tazón.
Imágenes
Todos los elementos que has aprendido hasta ahora (títulos, párrafos, listas y espacios)
tienen una cosa en común: ¡están compuestos enteramente de texto! ¿Qué sucede si desea
agregar contenido a su página web que no esté compuesto de texto, como imágenes ?
La <img>etiqueta le permite agregar una imagen a una página web. La mayoría de los
elementos requieren etiquetas de apertura y cierre, pero la <img>etiqueta es una etiqueta de
cierre automático . Tenga en cuenta que el final de la <img>etiqueta tiene una barra diagonal
/. Las etiquetas de cierre automático pueden incluir u omitir la barra final; ambas se
mostrarán correctamente.
<img src="image-location.jpg" />
La <img>etiqueta tiene un atributo obligatorio llamado src. El src atributo debe establecerse
en la fuente de la imagen o en la ubicación de la imagen. En este caso, el valor de src debe
ser el localizador uniforme de recursos (URL) de la imagen. Una URL es la dirección web o
dirección local donde se almacena un archivo.
Alts de imagen
Parte de ser un desarrollador web excepcional es hacer que su sitio sea accesible para
usuarios de todos los orígenes. Para hacer que la Web sea más inclusiva, debemos
considerar qué sucede cuando las tecnologías de asistencia, como los lectores de pantalla,
se encuentran con etiquetas de imágenes .
El altatributo, que significa texto alternativo, aporta significado a las imágenes de nuestros
sitios. El altatributo se puede agregar a la etiqueta de imagen al igual que el srcatributo. El
valor de altdebe ser una descripción de la imagen.
<img src="#" alt="A field of yellow sunflowers" />
El altatributo también sirve para los siguientes propósitos:
Si una imagen no se carga en una página web, un usuario puede pasar el mouse
sobre el área originalmente destinada a la imagen y leer una breve descripción de la
imagen. Esto es posible gracias a la descripción que proporciona en el altatributo.
Los usuarios con discapacidad visual suelen navegar por la web con la ayuda de
software de lectura de pantalla. Cuando incluye el altatributo, el software de lectura
de pantalla puede leer la descripción de la imagen en voz alta para el usuario con
discapacidad visual.
El altatributo también juega un papel en la optimización de motores de búsqueda
(SEO), porque los motores de búsqueda no pueden "ver" las imágenes en los sitios
web mientras rastrean Internet. Tener alt atributos descriptivos puede mejorar la
clasificación de su sitio.
Si la imagen de la página web no transmite información significativa a un usuario (con

discapacidad visual o no), el altatributo debe dejarse vacío.
Vídeos
Además de imágenes, HTML también admite la visualización de vídeos . Al igual que el
<img>elemento, el <video>elemento requiere un srcatributo con un enlace a la fuente del
vídeo. Sin embargo, a diferencia del <img>elemento, el <video>elemento requiere una
etiqueta de apertura y de cierre.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>
En este ejemplo, la fuente del vídeo ( src) es "myVideo.mp4". La fuente puede ser un archivo
de vídeo alojado junto a su página web o una URL que apunte a un archivo de vídeo alojado
en otra página web.
Después del srcatributo, los atributos widthy heightse utilizan para establecer el tamaño del
vídeo que se muestra en el navegador. El controlsatributo indica al navegador que incluya
controles de vídeo básicos, como pausar y reproducir.
El texto, Video not supportedentre las etiquetas de video de apertura y cierre solo se
mostrará si el navegador no puede cargar el video.
Revisar
¡Felicitaciones por completar la primera lección de HTML! Está en el buen camino para
convertirse en un desarrollador web cualificado.
Repasemos lo que has aprendido hasta ahora:
HTML significa lenguaje de marcado de hipertexto y se utiliza para crear la

estructura y el contenido de una página web .
La mayoría de los elementos HTML contienen etiquetas de apertura y cierre con
texto sin formato u otras etiquetas HTML entre ellas.
Los elementos HTML se pueden anidar dentro de otros elementos. El elemento
encerrado es el hijo del elemento padre encerrado.
Cualquier contenido visible debe colocarse dentro de las <body>etiquetas de apertura
y cierre.
Los títulos y subtítulos, <h1>hasta <h6>las etiquetas, se utilizan para proporcionar
títulos para secciones de contenido.
<p>y <span>las <div>etiquetas especifican texto o bloques.
Las etiquetas <em>y <strong>se utilizan para enfatizar el texto.
Los saltos de línea se crean con la <br>etiqueta.
Las listas ordenadas ( <ol>) están numeradas y las listas desordenadas ( <ul>)
tienen viñetas.
Se pueden agregar imágenes ( <img>) y videos ( <video>) vinculando a una fuente
existente.
Aquí hay algunos recursos más para agregar a su kit de herramientas:
Documentos de Codecademy: HTML

Espacios de trabajo de Codecademy: HTML
Asegúrate de marcar estos enlaces como favoritos para tenerlos a tu disposición.
En la próxima lección, tomaremos el contenido que agregó a este sitio web y lo

transformaremos en un documento HTML que esté listo para publicarse en la web.
Preparándose para HTML
Ahora que conocemos algunos de los elementos HTML más comunes , es hora de aprender
a configurar un archivo HTML.
Los archivos HTML requieren ciertos elementos para configurar el documento

correctamente. Podemos informar a los navegadores web que estamos utilizando HTML
iniciando nuestro documento con una declaración de tipo de documento .
La declaración se ve así:
<!DOCTYPE html>
Esta declaración es una instrucción y debe ser la primera línea de código de su documento
HTML. Le dice al navegador qué tipo de documento esperar, junto con qué versión de HTML
se utiliza en el documento. Por ahora, el navegador asumirá correctamente que htmlin
<!DOCTYPE html>se refiere a HTML5, ya que es el estándar actual.
En el futuro, sin embargo, un nuevo estándar anulará a HTML5. Para asegurarse de que su
documento siempre se interprete correctamente, inclúyalo siempre <!DOCTYPE html>al
principio de sus documentos HTML.
Por último, el código HTML siempre se guarda en un archivo con extensión .html .
La etiqueta <html>
La <!DOCTYPE html>declaración proporciona al navegador dos datos (el tipo de documento y
la versión HTML esperada), pero en realidad no agrega ninguna estructura o contenido
HTML.
Para crear estructura y contenido HTML, debemos agregar <html>etiquetas de apertura y

cierre después de declarar <!DOCTYPE html>:
<!DOCTYPE html>
<html>
</html>
Todo lo que esté entre las etiquetas de apertura <html>y cierre </html>se interpretará como
código HTML. Sin estas etiquetas, es posible que los navegadores interpreten
incorrectamente su código HTML.
La cabeza
Hasta ahora has hecho dos cosas para configurar el archivo correctamente:
Declaró al navegador que su código es HTML con<!DOCTYPE html>

Se agregó el elemento HTML ( <html>) que contendrá el resto de su código.
Hemos agregado estos elementos a la página de Osos Pardos que creó anteriormente.
Ahora, proporcionemos también al navegador información sobre la página en sí. Podemos
hacer esto agregando un <head>elemento.
¿ Recuerdas la <body>etiqueta? El <head>elemento es parte de esta metáfora HTML. Va por

encima de nuestro <body>elemento.
El <head>elemento contiene los metadatos de una página web. Los metadatos son
información sobre la página que no se muestra directamente en la página web. A diferencia
de la información dentro de la <body>etiqueta, los metadatos en el encabezado son
información sobre la página misma. Verá un ejemplo de esto en el siguiente ejercicio.
Las etiquetas principales de apertura y cierre suelen aparecer como el primer elemento
después de la primera etiqueta HTML:
<head>
</head>
Títulos de página
¿Qué tipo de metadatos sobre la página web puede <head>contener el elemento?
Si navega al catálogo de Codecademy y mira en la parte superior de su navegador, notará las

palabras All Courses & Tutorials | Codecademy, que es el título de la página web.
La pestaña de un navegador muestra el título especificado en la <title>etiqueta. La

<title>etiqueta siempre está dentro del <head>.
<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
</html>
Si tuviéramos que abrir un archivo que contiene el código HTML en el ejemplo anterior, el
navegador mostraría las palabras My Coding Journalen la barra de título (o en el título de la
pestaña).
¿Dónde aparece el título?
¡Buen trabajo! Desafortunadamente, el panel del navegador utilizado por el entorno
Codecademy no tiene una barra de título, por lo que no se mostrará el título "Oso Pardo" que
escribió en el ejercicio anterior. Sin embargo, fuera del entorno de Codecademy, su título
aparecería como se muestra en el diagrama de la derecha.
Hasta ahora hemos aprendido sobre:
<!DOCTYPE html>, la declaración que especifica la versión de HTML para el navegador

Las <html>etiquetas que encierran todo su código HTML
La <head>etiqueta que contiene los metadatos de una página web, como su<title>
A continuación, aprenderá sobre nuevos tipos de elementos que van dentro del cuerpo.
Enlace a otras páginas web
Uno de los aspectos poderosos de HTML (y de Internet) es la capacidad de vincular a otras
páginas web.
Puede agregar enlaces a una página web agregando un elemento de anclaje<a> e incluyendo
el texto del enlace entre las etiquetas de apertura y cierre .
<a>This Is A Link To Wikipedia</a>
¡Espera un minuto! Técnicamente, el enlace del ejemplo anterior está incompleto. ¿Cómo se
supone que funciona exactamente el enlace anterior si no hay una URL que lleve a los
usuarios a la página real de Wikipedia?
El elemento ancla en el ejemplo anterior está incompleto sin el href atributo. Este atributo
significa referencia de hipervínculo y se utiliza para vincular a una ruta o la dirección donde
se encuentra un archivo (ya sea en su computadora o en otra ubicación). Las rutas
proporcionadas al href atributo suelen ser URL.
<a href="https://www.wikipedia.org/">This Is A Link To

Wikipedia</a>
En el ejemplo anterior, el href atributo se ha establecido en el valor de la URL

https://www.wikipedia.org/. El ejemplo ahora muestra el uso correcto de un elemento de
anclaje.
Al leer documentación técnica, es posible que te encuentres con el término hipervínculo . No

te preocupes, este es simplemente el término técnico para enlace. Estos términos se utilizan
a menudo indistintamente.
Abrir enlaces en una nueva ventana
¿Alguna vez hizo clic en un enlace y observó que la página web resultante se abría en una
nueva ventana del navegador? Si es así, puedes agradecer el atributo <a>del elemento
target.
El targetatributo especifica cómo debe abrirse un enlace.
Es posible que uno o más enlaces en su página web conduzcan a un sitio web
completamente diferente. En ese caso, es posible que desee que los usuarios lean el sitio
web vinculado, pero espere que regresen a su página web. ¡ Aquí es exactamente cuando el
targetatributo es útil!
Para que un enlace se abra en una nueva ventana, el targetatributo requiere un valor de
_blank. El targetatributo se puede agregar directamente a la etiqueta de apertura del
elemento ancla, al igual que el hrefatributo.
<a href="https://en.wikipedia.org/wiki/Brown_bear"
target="_blank">The Brown Bear</a>
En el ejemplo anterior, configurar el targetatributo en "_blank"indica al navegador que abra

la página de Wikipedia correspondiente en una nueva ventana.
En este ejercicio, utilizamos la terminología "abrir en una ventana nueva". Es probable que
esté utilizando un navegador moderno que abre sitios web en pestañas nuevas , en lugar de
ventanas nuevas. Antes de la llegada de los navegadores con pestañas, era necesario abrir
ventanas adicionales para ver más sitios web. El target="_blank"atributo, cuando se utiliza
en navegadores modernos, abrirá nuevos sitios web en una nueva pestaña.
Vincular a una página relativa
Hasta ahora ha aprendido cómo vincular a páginas web externas. Muchos sitios también
enlazan a páginas web internas como Inicio, Acerca de y Contacto.
Antes de aprender cómo vincular páginas internas, establezcamos dónde se almacenan

nuestros archivos. Al crear sitios web estáticos de varias páginas, los desarrolladores web
suelen almacenar archivos HTML en el directorio raíz o en una carpeta principal donde se
almacenan todos los archivos del proyecto. A medida que crece el tamaño de los proyectos
que crea, puede usar carpetas adicionales dentro de la carpeta principal del proyecto para
organizar su código.
project-folder/
|—— about.html
|—— contact.html
|—— index.html
El ejemplo anterior muestra tres archivos diferentes: about.html , contact.html e index.html

en una carpeta.
Los archivos HTML suelen almacenarse en la misma carpeta, como se muestra en el

ejemplo anterior. Si el navegador muestra actualmente index.html , también sabe que
about.html y contact.html están en la misma carpeta. Debido a que los archivos se
almacenan en la misma carpeta, podemos vincular páginas web entre sí mediante una ruta
relativa .
<a href="./contact.html">Contact</a>
En este ejemplo, la <a> etiqueta se utiliza con una ruta relativa para vincular desde el archivo
HTML actual al contact.html archivo en la misma carpeta. En la página web, Contact
aparecerá como un enlace.
Una ruta relativa es un nombre de archivo que muestra la ruta a un archivo local (un archivo
en el mismo sitio web, como ./index.html) versus una ruta absoluta (una URL completa,
como https://www.codecademy.com/learn/learn-htmlla que está almacenada en una
carpeta diferente). La ./ entrada ./index.html le dice al navegador que busque el archivo
en la carpeta actual.
Vinculación a voluntad
Probablemente haya visitado sitios web donde no todos los enlaces estaban compuestos de
texto. Quizás los enlaces en los que hizo clic eran imágenes o algún otro tipo de contenido.
Hasta ahora, hemos agregado enlaces que estaban compuestos únicamente de texto, como
el siguiente:
<a href="https://en.wikipedia.org/wiki/Opuntia"
target="_blank">Prickly Pear</a>
¡Sin embargo, los enlaces de solo texto disminuirían significativamente su flexibilidad como
desarrollador web!
Afortunadamente, HTML le permite convertir casi cualquier elemento en un enlace

envolviendo ese elemento con un elemento ancla. Con esta técnica, es posible convertir
imágenes en enlaces simplemente envolviendo el <img>elemento con un <a>elemento.
<a href="https://en.wikipedia.org/wiki/Opuntia"
target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg"
alt="A red prickly pear fruit"/></a>
En el ejemplo anterior, una imagen de una tuna se convirtió en un enlace envolviendo el

exterior del <img>elemento con un <a>elemento.
Vinculando a la misma página
En este punto, tenemos todo el contenido que queremos en nuestra página. Como tenemos
tanto contenido, no todo cabe en la pantalla. ¿Cómo hacemos que sea más fácil para un
usuario saltar a diferentes partes de nuestra página?
Cuando los usuarios visitan nuestro sitio, queremos que puedan hacer clic en un enlace y
que la página se desplace automáticamente a una sección específica.
Para vincular a un objetivo en la misma página, debemos darle al objetivo una identificación ,
como esta:
<p id="top">This is the top of the page!</p>

<h1 id="bottom">This is the bottom! </h1>
En este ejemplo, al <p>elemento se le asigna id"arriba" y al <h1>elemento se le asigna

"abajo". Se idpuede agregar un a la mayoría de los elementos de una página web.
Un iddebe ser descriptivo para que sea más fácil recordar el propósito de un enlace. El
enlace de destino es una cadena que contiene el #carácter y el elemento de destino id.
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>
En el ejemplo anterior, los enlaces a <p id="top">y <h1 id="bottom">están incrustados en

una lista ordenada. Estos enlaces aparecen en el navegador como una lista numerada de
enlaces. An ides especialmente útil para organizar contenido que pertenece a div!
Espacio en blanco
El resto de esta lección se centrará en algunas herramientas que utilizan los desarrolladores para
hacer que el código sea más fácil de interpretar.
A medida que crece el código de un archivo HTML, resulta cada vez más difícil realizar un
seguimiento de cómo se relacionan los elementos . Los programadores utilizan dos herramientas
para visualizar la relación entre elementos: espacios en blanco y sangría .
Ambas herramientas aprovechan el hecho de que la posición de los elementos en un navegador es

independiente de la cantidad de espacios en blanco o sangría en el archivo index.html .
Por ejemplo, si desea aumentar el espacio entre dos párrafos en su página web, no podrá lograrlo
agregando espacio entre los elementos de párrafo en el archivo index.html . El navegador ignora los
espacios en blanco en los archivos HTML cuando representa una página web, por lo que puede usarse
como herramienta para hacer que el código sea más fácil de leer y seguir.
¿Qué hace que el siguiente ejemplo sea difícil de leer?
<body><p>Paragraph 1</p><p>Paragraph 2</p></body>
Tienes que leer toda la línea para saber qué elementos están presentes. Compare el ejemplo anterior
con este:
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
Este ejemplo es más fácil de leer porque cada elemento está en su propia línea. Si bien el primer
ejemplo requería leer toda la línea de código para identificar los elementos, este ejemplo facilita la
identificación de la etiqueta del cuerpo y dos párrafos.
Un navegador muestra ambos ejemplos de la misma manera:
Paragraph 1
Paragraph 2
En el siguiente ejercicio aprenderá a utilizar la sangría para ayudar a visualizar elementos anidados.
Sangría
La segunda herramienta que utilizan los desarrolladores web para facilitar la lectura de la
estructura del código es la sangría . Los espacios se insertan usando las barras spacey
tabdel teclado.
El World Wide Web Consortium , o W3C, es responsable de mantener los estándares de

estilo de HTML. Al momento de escribir este artículo, el W3C recomienda 2 espacios de
sangría al escribir código HTML. Aunque su código funcionará sin exactamente dos
espacios, la mayoría de los desarrolladores web profesionales siguen este estándar. La
sangría se utiliza para visualizar fácilmente qué elementos están anidados dentro de otros
elementos.
<body>
<p>Paragraph 1</p>
<div>
<p>Paragraph 2</p>
</div>
</body>
En el ejemplo anterior, Paragraph las <div>etiquetas están anidadas dentro de la

<body>etiqueta, por lo que tienen dos espacios con sangría. El Paragraph 2 elemento está
anidado dentro de la <div> etiqueta, por lo que tiene una sangría de dos espacios
adicionales.
Comentarios
Los archivos HTML también le permiten agregar comentarios a su código.
Los comentarios comienzan con . Su navegador ignorará cualquier
carácter intermedio.

Incluir comentarios en su código es útil por muchas razones:
Le ayudan a usted (y a otros) a comprender su código si decide volver y revisarlo

mucho más adelante.
Le permiten experimentar con código nuevo, sin tener que eliminar el código antiguo.


<p>The following is a list of my favorite films:</p>
En este ejemplo, el comentario se utiliza para indicar que el siguiente texto constituye una
sección particular de la página.

En el ejemplo anterior, un elemento HTML válido (un elemento de párrafo) ha sido

"comentado". Esta práctica es útil cuando hay un código con el que desea experimentar o al
que desea volver en el futuro.
Etiquetas HTML
Ahora conoce todos los elementos básicos y la configuración que necesita para estructurar una
página HTML y agregar diferentes tipos de contenido. ¡Con la ayuda de CSS, muy pronto podrás crear
hermosos sitios web!
Si bien algunas etiquetas tienen un propósito muy específico, como las etiquetas de imagen y video,
la mayoría de las etiquetas se usan para describir el contenido que rodean, lo que nos ayuda a
modificar y diseñar nuestro contenido más adelante. Hay un número aparentemente infinito de
etiquetas para usar (muchas más de las que hemos enseñado). Saber cuándo usar cada uno se basa
en cómo desea describir el contenido de su HTML. Las etiquetas descriptivas y bien elegidas son la
clave para un desarrollo web de alta calidad. Puede encontrar una lista completa de etiquetas HTML
disponibles en la documentación de Mozilla .
Repasemos lo que has aprendido en esta lección:
La <!DOCTYPE html>declaración siempre debe ser la primera línea de código de sus archivos
HTML. Esto le permite al navegador saber qué versión de HTML esperar.
El <html>elemento contendrá todo su código HTML.
La información sobre la página web, como el título, pertenece dentro <head>de la página.
Puede agregar un título a su página web utilizando el <title>elemento dentro del
encabezado.
El título de una página web aparece en la pestaña de un navegador.
Las etiquetas de anclaje ( <a>) se utilizan para vincular a páginas internas, páginas externas o
contenido en la misma página.
Puede crear secciones en una página web y acceder a ellas usando <a> etiquetas y
agregando id mensajes a los elementos a los que desea saltar.

Los espacios en blanco entre elementos HTML ayudan a que el código sea más fácil de leer
sin cambiar la forma en que aparecen los elementos en el navegador.
La sangría también ayuda a que el código sea más fácil de leer. Hace visibles las relaciones
entre padres e hijos.
Los comentarios se escriben en HTML utilizando la siguiente sintaxis: .
¡Tómate un tiempo para editar el espacio de trabajo que creaste y observa cómo cambia!
Introducción a las tablas

Hay muchos sitios web en Internet que muestran información como precios de acciones,
resultados deportivos, datos de facturas y más. Estos datos son de naturaleza tabular, lo
que significa que una tabla suele ser la mejor manera de presentar los datos.
En esta parte del curso, aprenderemos a utilizar el <table> elemento HTML para presentar
información en una tabla bidimensional a los usuarios.
¡Empecemos!
Crear una tabla

Antes de mostrar datos, primero debemos crear la tabla que contendrá los datos utilizando
el <table>elemento.
<table>
</table>
El <table> elemento contendrá todos los datos tabulares que planeamos mostrar.
Filas de la tabla
En muchos programas que usan tablas, la tabla ya está predefinida, lo que significa que
contiene las filas, columnas y celdas que contendrán los datos . En HTML, se deben crear
todos estos componentes.
El primer paso para ingresar datos en la tabla es agregar filas usando el elemento de fila de
la tabla<tr> : .
<table>
<tr>
</tr>
<tr>
</tr>
</table>
En el ejemplo anterior, se agregaron dos filas a la tabla.
Datos de la tabla
Las filas no son suficientes para agregar datos a una tabla. También se debe definir cada
elemento de la celda. En HTML, puede agregar datos utilizando el elemento de datos de la
tabla<td> : .
<table>
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
En el ejemplo anterior, se ingresaron dos puntos de datos ( 73 y ) en la única fila que existe.
81 Al agregar dos puntos de datos, creamos dos celdas de datos.
Si la tabla se mostrará en el navegador, mostraría una tabla con una fila y dos columnas.
Encabezados de tabla
Los datos de la tabla no tienen mucho sentido sin títulos que describan lo que representan
los datos.
Para agregar títulos a filas y columnas, puede utilizar el elemento de encabezado de

tabla<th> : .
El elemento de encabezado de tabla se usa igual que un elemento de datos de tabla,

excepto con un título relevante. Al igual que los datos de una tabla, un encabezado de tabla
debe colocarse dentro de una fila de la tabla.
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
¿Qué pasó en el código anterior?
Primero, se agregó una nueva fila para contener los tres encabezados: un encabezado en
blanco, un Saturday encabezado y un Sunday encabezado. El encabezado en blanco crea la
celda de tabla adicional necesaria para alinear los encabezados de la tabla correctamente
sobre los datos a los que corresponden.
En la segunda fila, se agregó un encabezado de tabla como título de fila: Temperature.
Cuando se renderice, este código tendrá un aspecto similar a la imagen siguiente:
Tenga en cuenta también el uso del scope atributo, que puede tomar uno de dos valores:
row- este valor deja claro que el encabezado es para una fila.
col- este valor deja claro que el encabezado es para una columna.
El código HTML para tablas puede parecer un poco extraño al principio, pero analizarlo pieza
por pieza ayuda a que el código sea más comprensible.
Bordes de mesa
Hasta ahora, las tablas que has creado han sido un poco difíciles de leer porque no tienen
bordes.
En versiones anteriores de HTML, se podía agregar un borde a una tabla usando el border
atributo y estableciéndose igual a un número entero. Este número entero representaría el
grosor del borde.
<table border="1">
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
El código del ejemplo anterior está obsoleto , así que no lo utilices. Su objetivo es ilustrar
convenciones más antiguas con las que puede encontrarse al leer el código de otros
desarrolladores.
Es probable que el navegador aún interprete su código correctamente si usa el border

atributo, pero eso no significa que deba usarse.
Usamos CSS para agregar estilo a los documentos HTML, porque nos ayuda a separar la
estructura de una página de su apariencia. Puede aprender más sobre CSS en nuestros
cursos de CSS.
Puede lograr el mismo efecto de borde de tabla usando CSS.
table, td {
border: 1px solid black;
}
El código del ejemplo anterior utiliza CSS en lugar de HTML para mostrar los bordes de la
tabla.
Columnas de expansión
¿Qué pasa si la tabla contiene datos que abarcan varias columnas?
Por ejemplo, un calendario personal podría tener eventos que abarquen varias horas o
incluso varios días.
Los datos pueden abarcar columnas utilizando el colspanatributo. El atributo acepta un

número entero (mayor o igual a 1) para indicar el número de columnas que abarca.
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td colspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>
En el ejemplo anterior, los datos Out of Town abarcan los encabezados de la tabla Monday y
utilizando el valor (dos columnas). Los datos aparecen sólo bajo el título.Tuesday 2 Back in
Town Wednesday
Filas ampliadas
Los datos también pueden abarcar varias filas utilizando el rowspanatributo.
El rowspanatributo se utiliza para datos que abarcan varias filas (quizás un evento dura
varias horas en un día determinado). Acepta un número entero (mayor o igual a 1) para
indicar el número de filas que abarca.
<table>
<tr> 
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr> 
<th>Morning</th>
<td rowspan="2">Work</td>
<td rowspan="3">Relax</td>
</tr>
<tr> 
<th>Afternoon</th>
</tr>
<tr> 
<th>Evening</th>
<td>Dinner</td>
</tr>
</table>
En el ejemplo anterior, hay cuatro filas:
La primera fila contiene una celda vacía y los encabezados de dos columnas .
La segunda fila contiene el Morningencabezado de la fila, junto con Work, que abarca
dos filas debajo de la Saturdaycolumna. La entrada "Relax" ocupa tres filas debajo de
la Sundaycolumna.
La tercera fila sólo contiene el Afternoonencabezado de la fila.
La cuarta fila solo contiene la Dinnerentrada, ya que "Relax" se extiende hasta la
celda al lado.
Si desea ver cómo el navegador interpreta el código anterior, no dude en copiarlo y pegarlo
en el editor de código para comprenderlo un poco mejor.
Cuerpo de la mesa
Con el tiempo, una tabla puede crecer hasta contener una gran cantidad de datos y volverse
muy larga. Cuando esto sucede, la mesa se puede dividir en secciones para que sea más
fácil de manejar.
Las mesas largas se pueden dividir utilizando el elemento del cuerpo de la mesa<tbody> : .
El <tbody>elemento debe contener todos los datos de la tabla, excluyendo los encabezados
de la tabla (más sobre esto en un ejercicio posterior).
<table>
<tbody>
<tr>
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>Morning</th>
</tr>
<tr>
<th>Afternoon</th>
</tr>
<tr>
<th>Evening</th>
<td>Dinner</td>
</tr>
</tbody>
</table>
En el ejemplo anterior, todos los datos de la tabla están contenidos dentro de un elemento
del cuerpo de la tabla. Sin embargo, tenga en cuenta que los títulos también se mantuvieron
en el cuerpo de la tabla; cambiaremos esto en el siguiente ejercicio.
Cabeza de mesa
En el último ejercicio, los títulos de la tabla se mantuvieron dentro del cuerpo de la tabla. Sin
embargo, cuando el cuerpo de una tabla está seccionado, también tiene sentido seccionar
los encabezados de las columnas de la tabla usando el <thead>elemento.
<table>
<thead>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Morning</th>
</tr>
<tr>
<th scope="row">Afternoon</th>
</tr>
<tr>
<th scope="row">Evening</th>
<td>Dinner</td>
</tr>
</tbody>
</table>
El <thead> elemento debe contener todos los datos de la tabla, excluyendo los encabezados
de la tabla (más sobre esto en un ejercicio posterior).
Además, solo los encabezados de las columnas van debajo del <thead>elemento. Podemos
usar el scope atributo en <th>elementos para indicar si un <th>elemento se está usando
como "row"encabezado o "col"encabezado.
Pie de página
Con este elemento también se puede seccionar la parte inferior de una mesa larga <tfoot>.
<table>
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
<th>Costs</th>
</tr>
</thead>
<tbody>
<tr>
<th>Q1</th>
<td>$10M</td>
<td>$7.5M</td>
</tr>
<tr>
<th>Q2</th>
<td>$12M</td>
<td>$5M</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$22M</td>
<td>$12.5M</td>
</tr>
</tfoot>
</table>
En el ejemplo anterior, el pie de página contiene los totales de los datos de la tabla. Los pies
de página se utilizan a menudo para contener sumas, diferencias y otros resultados de
datos.
Estilo con CSS

Las tablas , por defecto, son muy sosas. No tienen bordes, el color de fuente es negro y el
tipo de letra es el mismo que se utiliza para otros elementos HTML .
CSS , u hojas de estilo en cascada, es un lenguaje que los desarrolladores web utilizan para
diseñar el contenido HTML de una página web. Puede utilizar CSS para aplicar estilo a las
tablas. Específicamente, puede diseñar los diversos aspectos mencionados anteriormente.
table, th, td {
border: 1px solid black;
font-family: Arial, sans-serif;
text-align: center;
}
El código del ejemplo anterior muestra solo algunos de los diversos aspectos de la tabla a
los que puede aplicar estilos utilizando propiedades CSS.
Revisar
¡Gran trabajo! En esta lección, aprendimos cómo crear una tabla, agregar datos y dividir la tabla en
partes más pequeñas para facilitar su lectura.
Repasemos lo que hemos aprendido hasta ahora:
El <table>elemento crea una tabla.
El <tr> elemento agrega filas a una tabla.
Para agregar datos a una fila, puede usar el <td>elemento.
Los títulos de las tablas aclaran el significado de los datos. Los encabezados se agregan con
el <th>elemento.
Los datos de la tabla pueden abarcar columnas usando el colspan atributo.
Los datos de la tabla pueden abarcar filas usando el rowspan atributo.
Las tablas se pueden dividir en tres secciones principales: encabezado, cuerpo y pie de
página.
El encabezado de una tabla se crea con el <thead>elemento.
El cuerpo de una tabla se crea con el <tbody>elemento.
El pie de página de una tabla se crea con el <tfoot>elemento.
Todas las propiedades de CSS que aprendió en este curso se pueden aplicar a tablas y sus
datos.
¡Felicitaciones por completar tablas HTML!
Introducción a los formularios HTML

Las formas son parte de la vida cotidiana. Cuando usamos una forma física en la vida real,
escribimos información y se la damos a alguien para que la procese. Piense en las veces
que ha tenido que completar información para varias solicitudes, como un trabajo o una
cuenta bancaria, o entregar una tarjeta de sugerencias completa: ¡cada instancia es un
formulario!
Al igual que un formulario físico, un <form>elemento HTML se encarga de recopilar

información para enviarla a otro lugar. Cada vez que navegamos por Internet nos topamos
con multitud de formularios y es posible que ni siquiera nos demos cuenta. Existe una buena
posibilidad de que si estás escribiendo en un campo de texto o proporcionando una entrada,
el campo en el que estás escribiendo sea parte de un <form>!
En esta lección, repasaremos la estructura y la sintaxis de a <form>y los muchos elementos

que lo pueblan.
Cómo funciona un formulario
Podemos pensar en Internet como una red de computadoras que envían y reciben
información. Las computadoras necesitan una solicitud HTTP para saber cómo
comunicarse. La solicitud HTTP indica a la computadora receptora cómo manejar la
información entrante. Puede encontrar más información en nuestro artículo sobre
solicitudes HTTP .
El <form>elemento es una gran herramienta para recopilar información, pero luego

necesitamos enviar esa información a otro lugar para su procesamiento. Necesitamos
proporcionar al <form>elemento tanto la ubicación de dónde <form>va la información como
qué solicitud HTTP realizar. Eche un vistazo al ejemplo <form>a continuación:
<form action="/example.html" method="POST">

</form>
En el ejemplo anterior, hemos creado el esqueleto para <form>que enviará información a
example.html como una solicitud POST:
El actionatributo determina dónde se envía la información.

Al methodatributo se le asigna un verbo HTTP que se incluye en la solicitud HTTP.
Nota: Los verbos HTTP como POST no necesitan estar en mayúscula para que la solicitud
funcione, pero lo hacen fuera de convención. En el ejemplo anterior podríamos haber escrito
method="post"y aún funcionaría.
El <form>elemento también puede contener elementos secundarios. Por ejemplo, sería útil
proporcionar un encabezado para que los usuarios sepan de qué <form>se trata. También
podríamos agregar un párrafo para brindar aún más detalles. Veamos un ejemplo de esto en
código:

<h1>Creating a form</h1>
<p>Looks like you want to learn how to create an HTML form.
Well, the best way to learn is to play around with it.</p>
</form>
El ejemplo anterior no recopila ninguna entrada del usuario, pero lo haremos en el siguiente
ejercicio. Por ahora, ¡practiquemos cómo crear la base de un HTML <form>!
Entrada de texto
Si queremos crear un campo de entrada en nuestro <form>, necesitaremos la ayuda del <input>elemento.
El <input> elemento tiene un type atributo que determina cómo se representa en la página web y qué tipo de datos puede
aceptar.
El primer valor del type atributo que vamos a explorar es "text". Cuando creamos un <input>elemento con type="text", genera
un campo de texto en el que los usuarios pueden escribir. Tenga en cuenta que el valor predeterminado de type es "text".
También es importante que incluyamos un name atributo para el <input>; sin el name atributo, la información contenida en el
<input>no se enviará cuando se <form>envíe. Explicaremos más sobre los envíos y el botón de enviar en un ejercicio posterior.
Por ahora, examinemos el siguiente código que produce un campo de entrada de texto:

<input type="text" name="first-text-field">
</form>
Aquí hay una captura de pantalla de cómo se ve el formulario renderizado en una página web para el navegador Chrome
(diferentes navegadores tienen una representación predeterminada diferente). Cuando se cargue inicialmente, será un cuadro
vacío:
Después de que los usuarios escriben en el <input>elemento, el valor del value atributo se convierte en lo que se escribe en el
campo de texto. El valor del value atributo se empareja con el valor del name atributo y se envía como texto cuando se envía el
formulario. Por ejemplo, si un usuario escribió "detalles importantes" en el campo de texto creado por nuestro <input>elemento:
Cuando se envía el formulario, el texto: "first-text-field=important details"se envía a /example.html porque el valor del name
atributo es "first-text-field"y el valor de value es "important details".
También podríamos asignar un valor predeterminado para el value atributo para que los usuarios tengan un campo de texto
precargado cuando vean por primera vez el formulario renderizado, así:

<input type="text" name="first-text-field" value="already pre-filled">
</form>
Lo que representa:
¡Es hora de poner este conocimiento en práctica!
Agregar una etiqueta

En el ejercicio anterior creamos un <input>elemento pero no incluimos nada que explique <input>para qué se utiliza.
Para que un usuario identifique correctamente, <input>utilizamos el <label>elemento con el nombre apropiado.
El <label>elemento tiene una etiqueta de apertura y cierre y muestra texto escrito entre las etiquetas de apertura y cierre.
Para asociar a <label>y an <input>, se <input>necesita un id atributo. Luego asignamos el for atributo del
<label>elemento con el valor del id atributo de <input>, así:

<label for="meal">What do you want to eat?</label>
<br>
<input type="text" name="food" id="meal">
</form>
El código anterior representa:

¡Mira, ahora los usuarios saben para qué <input>sirve el elemento! Otro beneficio de usar el <label>elemento es que
cuando se hace clic en este elemento, <input>se resalta/selecciona el correspondiente.
¡Veamos el <label>elemento en acción!
Entrada de contraseña
Piense en todas esas veces que tenemos que poner información confidencial, como una contraseña o PIN, en un archivo
<form>. ¡No queremos que nuestra información sea vista por nadie que mire por encima de nuestro hombro!
¡Afortunadamente, tenemos el type="password"atributo para <input>!
Un <input type ="password">elemento reemplazará el texto ingresado con otro carácter como un asterisco (*) o un
punto (•). El siguiente código proporciona un ejemplo de cómo crear un campo de contraseña:
<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>
Después de que un usuario escriba en el campo, se verá así:
Aunque el campo de contraseña oscurece el texto de la contraseña, cuando se envía el formulario, se envía el valor del texto.
En otras palabras, si se escribe "hunter2" en el campo de contraseña, se envía "user-password=hunter2" junto con el resto de la
información del formulario.
Entrada de números
Ahora hemos repasado dos typeatributos <input>relacionados con el texto. Pero es posible que queramos que nuestros
usuarios escriban un número, en cuyo caso podemos establecer el typeatributo en... (lo adivinaste) "number"....
Al configurar type="number"un <input>podemos restringir lo que los usuarios escriben en el campo de entrada a solo
números (y algunos caracteres especiales como -, +y .). También podemos proporcionar un stepatributo que crea flechas
dentro del campo de entrada para aumentar o disminuir según el valor del stepatributo. A continuación se muestra el código
necesario para representar un campo de entrada para números:
<form>
<label for="years"> Years of experience: </label>
<input id="years" name="years" type="number" step="1">
</form>
Lo que representa:
Ahora es el momento de aplicar este conocimiento.
Entrada de rango
Usar un <input type="number"> es excelente si queremos permitir a los usuarios escribir cualquier número que elijan.
Pero, si quisiéramos limitar los números que nuestros usuarios pueden escribir, podríamos considerar usar un type valor
diferente. Otra opción que podríamos usar es configurar type lo "range"que crea un control deslizante.
Para establecer los valores mínimo y máximo del control deslizante asignamos valores al atributo min y max del <input>.
También podríamos controlar qué tan suave y fluido funciona el control deslizante asignando step un valor al atributo. Los
valores más pequeños step harán que el control deslizante se mueva con mayor fluidez, mientras que step los valores
más grandes harán que el control deslizante se mueva más notablemente. Eche un vistazo al código para crear un control
deslizante:
<form>
<label for="volume"> Volume Control</label>
<input id="volume" name="volume" type="range" min="0" max="100"
step="1">
</form>
El código anterior representa:
En el ejemplo anterior, cada vez que el control deslizante se mueve uno, el valor del <input>atributo value cambia.
Entrada de casilla de verificación

Hasta ahora, los tipos de entradas que hemos permitido eran todas opciones únicas. Pero, ¿qué pasaría si presentáramos
múltiples opciones a los usuarios y les permitiéramos seleccionar cualquier cantidad de opciones? ¡Parece que podríamos usar
casillas de verificación! En a <form>usaríamos el <input>elemento y estableceríamos type="checkbox". Examine el
código utilizado para crear varias casillas de verificación:
<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox"
value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox"
value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox"
value="anchovy">
</form>
Lo que representa:
Observe en el ejemplo proporcionado:
Hay valores asignados al value atributo de las casillas de verificación. Estos valores no son visibles en el
formulario en sí, por eso es importante que usemos un asociado <label>para identificar la casilla de verificación.
cada uno <input>tiene el mismo valor para el name atributo. Usar lo mismo name para cada casilla de
verificación agrupa los <input>s. Sin embargo, cada uno <input>tiene un exclusivo id para combinar con un
archivo <label>.
Muy bien, ¡es hora de usar casillas de verificación en nuestro código!
Entrada del botón de opción

Las casillas de verificación funcionan bien si queremos presentar a los usuarios múltiples opciones y permitirles elegir una o
más de ellas. Sin embargo, hay casos en los que queremos presentar múltiples opciones y solo permitir una selección, como
preguntar a los usuarios si están de acuerdo o no con los términos y condiciones. Repasemos el código utilizado para crear
botones de opción:
<form>
<p>What is sum of 1 + 1?</p>
<input type="radio" id="two" name="answer" value="2">
<label for="two">2</label>
<br>
<input type="radio" id="eleven" name="answer" value="11">
<label for="eleven">11</label>
</form>
Lo que representa:
Observe en el fragmento de código que los botones de opción (como las casillas de verificación) no muestran su valor.
Tenemos un asociado <label>para representar el valor del botón de radio. Para agrupar botones de opción, les asignamos lo
mismo name y solo se puede seleccionar un botón de opción de ese grupo.
Veamos esto en acción creando nuestros propios botones de opción.
La lista desplegable
Los botones de opción son geniales si queremos que nuestros usuarios elijan una opción entre algunas opciones
visibles, ¡pero imagina si tuviéramos una lista completa de opciones! Esta situación podría llevar rápidamente a
que haya muchos botones de opción a los que realizar un seguimiento.
Una solución alternativa es utilizar una lista desplegable para permitir a nuestros usuarios elegir una opción de
una lista organizada. Aquí está el código para crear un menú desplegable:
<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
<option value="salad">Salad</option>
<option value="ramen">Ramen</option>
<option value="tacos">Tacos</option>
</select>
</form>
Lo que representa:
Y si hacemos clic en el campo que contiene la primera opción, se revela la lista:
Observe en el código que estamos usando el elemento <select>para crear la lista desplegable. Para
completar la lista desplegable, agregamos varios <option> elementos, cada uno con un value atributo. De
forma predeterminada, sólo se puede seleccionar una de estas opciones.
El texto representado es el texto incluido entre las <option>etiquetas de apertura y cierre. Sin embargo, es el
valor del value atributo el que se utiliza en <form> el envío (observe la diferencia en el texto y value las
mayúsculas). Cuando se <form>envía, la información de este campo de entrada se enviará utilizando el name
del <select>y el value del elegido <option>. Por ejemplo, si un usuario selecciona Pizza en la lista
desplegable, la información se enviará como "lunch=pizza".
Entrada de lista de datos

Incluso si tenemos una lista desplegable organizada, si la lista tiene muchas opciones, podría resultar tedioso
para los usuarios desplazarse por toda la lista para localizar una opción. Ahí es donde <datalist>resulta útil
utilizar el elemento.
Se <datalist>utiliza con un <input type="text">elemento. Crea <input>un campo de texto en el
que los usuarios pueden escribir y filtrar opciones desde el archivo <datalist>. Repasemos un ejemplo
concreto:
<form>
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city">
<datalist id="cities">
<option value="New York City"></option>
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
<option value="Melbourne"></option>
<option value="Other"></option>
</datalist>
</form>
Observe que en el código anterior tenemos un <input>atributo list. El <input>está asociado a
<datalist>través del atributo <input>'s list y id del <datalist>.
A partir del código proporcionado, se representa el siguiente formulario:
Y cuando se selecciona el campo
Si <select>bien <datalist>comparten algunas similitudes, existen algunas diferencias importantes. En el
<input>elemento asociado, los usuarios pueden escribir en el campo de entrada para buscar una opción en
particular. Si ninguno de los <option>s coincide, el usuario aún puede usar lo que escribió. Cuando se envía el
formulario, el valor de los <input> name y value de la opción seleccionada, o lo que el usuario escribió, se
envía como un par.
elemento de área de texto

Un <input>elemento type="text"crea un campo de entrada de una sola fila para que los usuarios escriban
información. Sin embargo, hay casos en los que los usuarios necesitan escribir más información, como una
publicación de blog. En tales casos, en lugar de usar un <input>, podríamos usar <textarea>.
El <textarea>elemento se utiliza para crear un campo de texto más grande para que los usuarios escriban
más texto. Podemos agregar los atributos rows y cols determinar la cantidad de filas y columnas para el
archivo <textarea>. Echar un vistazo:
<form>
<label for="blog">New Blog Post: </label>
<br>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
</form>
En el código anterior, un vacío <textarea>de 5 filas por 30 columnas se representa en la página de la
siguiente manera:
Si quisiéramos un campo de texto aún más grande, podríamos hacer clic y arrastrar en la esquina inferior
derecha para expandirlo.
Cuando enviamos el formulario, el valor de <textarea>es el texto escrito dentro del cuadro. Si queremos
agregar un valor predeterminado, <textarea>lo incluiríamos dentro de las etiquetas de apertura y cierre de
esta manera:
<textarea>Adding default text</textarea>
Este código generará un <textarea> mensaje que contiene texto precargado: "Agregar texto
predeterminado".
Pero no confíe sólo en nuestra palabra, ¡probémoslo!
Enviar formulario
Recuerde, el propósito de un formulario es recopilar la información que se enviará. Esa es la función
del botón de enviar: los usuarios hacen clic en él cuando terminan de completar la información
<form>y están listos para enviarlo. Ahora que hemos repasado cómo crear varios elementos de
entrada, ¡repasamos cómo crear un botón de envío!
Para crear un botón de envío en un <form>, usaremos el <input>elemento confiable y lo
configuraremos type en "submit". Por ejemplo:
<form>
<input type="submit" value="Send">
</form>
Lo que representa:
Observe en el fragmento de código que lo value asignado a <input>aparece como texto en el
botón de enviar. Si no hay un value atributo, el texto predeterminado Submit aparece en el
botón.
¡Agreguemos ahora este elemento para <form>completar nuestro s!
Revisar
<form>¡Buen trabajo interactuando con un elemento extremadamente común y útil !
En esta lección repasamos:
El propósito de a <form>es permitir a los usuarios ingresar información y enviarla.
El <form>atributo action determina dónde va la información del formulario.
El <form>atributo method determina cómo se envía y procesa la información.

Para agregar campos para que los usuarios ingresen información, usamos el
<input>elemento y configuramos el type atributo en un campo de nuestra elección:
La configuración type para "text"crea un campo de una sola fila para la entrada
de texto.
La configuración type para "password"crea un campo de una sola fila que censura
la entrada de texto.
La configuración type para "number"crea un campo de una sola fila para la entrada
de números.
La configuración type para "range"crea un control deslizante para seleccionar
entre un rango de números.

La configuración type para "checkbox"crea una única casilla de verificación que
se puede combinar con otras casillas de verificación.

La configuración type para "radio"crea un botón de opción que se puede
emparejar con otros botones de opción.

Establecer type y "text"agregar el list atributo emparejará el <input>con un
<datalist>elemento si el list de <input>y el idde <datalist>son iguales.
La configuración type para "submit"crea un botón de envío.
Un <select>elemento se completa con <option>elementos y representa una selección de
lista desplegable.
Un <datalist>elemento se completa con <option>elementos y funciona con un
<input>para buscar opciones.
Un <textarea>elemento es un campo de entrada de texto que tiene un área personalizable.
Cuando <form>se envía a, los name campos que aceptan entradas y los value de esos
campos se envían como name=value pares.
El uso del <form>elemento junto con los otros elementos enumerados anteriormente nos permite
crear sitios que toman en consideración los deseos y necesidades de nuestros usuarios. ¡Aprovecha
la oportunidad de tomar lo que has aprendido y aplicarlo!
Introducción a la validación de formularios HTML

¿Alguna vez te has preguntado cómo funciona realmente una página de inicio de sesión? ¿O por qué
la combinación de un nombre de usuario y una contraseña te da acceso a un sitio web? Las
respuestas están en la validación . La validación es el concepto de comparar los datos
proporcionados por el usuario con los datos requeridos.
Hay diferentes tipos de validación. Un tipo es la validación del lado del servidor , esto sucede cuando
los datos se envían a otra máquina (normalmente un servidor) para su validación. Un ejemplo de este
tipo de validación es el uso de una página de inicio de sesión. El formulario en la página de inicio de
sesión acepta el ingreso de nombre de usuario y contraseña, luego envía los datos a un servidor que
verifica que el par coincida correctamente.
Por otro lado, utilizamos la validación del lado del cliente si queremos comprobar los datos en el
navegador (el cliente). Esta validación se produce antes de que se envíen los datos al servidor.
Diferentes navegadores implementan la validación del lado del cliente de manera diferente, pero
conducen al mismo resultado.
Los diferentes navegadores comparten los beneficios de utilizar la validación integrada del lado del
cliente de HTML5. Nos ahorra tiempo al tener que enviar información al servidor y esperar a que el
servidor envíe confirmación o rechazo de los datos. Esto también puede ayudarnos a proteger
nuestro servidor de códigos o datos maliciosos de un usuario malintencionado. También nos permite
brindar comentarios rápidamente a los usuarios sobre campos específicos en lugar de tener que
completar un formulario nuevamente si los datos que ingresaron en el formulario fueron rechazados.
En esta lección, aprenderemos cómo agregar algunas comprobaciones de validación a nuestros

<form>correos electrónicos.
Requerir una entrada

A veces tenemos campos en nuestros <form>correos electrónicos que no son
opcionales, es decir, se debe proporcionar información antes de que podamos

enviarla. Para hacer cumplir esta regla, podemos agregar el required atributo a
un <input>elemento.
Toma por ejemplo:

<label for="allergies">Do you have any dietary
restrictions?</label>
<br>
<input id="allergies" name="allergies"
type="text" required>
<br>
<input type="submit" value="Submit">
</form>
Esto genera un cuadro de texto, y si intentamos enviarlo <form>sin completarlo,
obtenemos este mensaje:
El estilo del mensaje varía de un navegador a otro; la imagen de arriba muestra el

mensaje en un navegador Chrome. También continuaremos mostrando estos
mensajes tal como aparecen en Chrome en ejercicios posteriores.
Establecer un mínimo y un máximo

Otra validación incorporada que podemos usar es asignar un valor mínimo o
máximo para un campo numérico, por ejemplo, <input type="number">y <input
type="range">. Para establecer un valor mínimo aceptable, usamos el minatributo y

asignamos un valor. Por otro lado, para establecer un valor máximo aceptable,
asignamos maxun valor al atributo. Veamos esto en código:
<label for="guests">Enter # of guests:</label>
<input id="guests" name="guests" type="number" min="1" max="4">
<input type="submit" value="Submit">
</form>
Si un usuario intenta enviar una entrada menor que 1, aparecerá una advertencia:
Aparecerá un mensaje similar si un usuario intenta ingresar un número mayor que 4.

Veamos ahora esta acción.

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

Introducción a HTML

¡Bienvenido al mundo del código! El año pasado, millones de estudiantes de nuestra

Entonces, ¿qué es exactamente HTML? HTML proporciona estructura al contenido

HTML significa lenguaje de marcado de hipertexto:

​ Un lenguaje de marcado es un lenguaje informático que define la estructura y

​ Una etiqueta de apertura ( <p>)

​ El contenido (“¡Hola mundo!”)

Repasemos rápidamente cada parte del elemento que se muestra en la imagen:

​ Elemento HTML (o simplemente elemento): una unidad de contenido en un documento HTML

corchete angular izquierdo.

Una vez que el archivo tiene un cuerpo, se pueden agregar al cuerpo

En el ejemplo anterior, el <p>elemento está anidado dentro del <body>elemento. El

Consideremos un ejemplo más complicado que utiliza algunas etiquetas nuevas:

En este ejemplo, el <body>elemento es el padre del <div>elemento. Tanto los elementos

Comprender la jerarquía HTML es importante porque los elementos secundarios pueden

HTML sigue un patrón similar. En HTML, hay seis encabezados o elementos de

La siguiente es la lista de elementos de encabezado disponibles en HTML. Están ordenados

​ El nombre del atributo

Un atributo comúnmente utilizado es el id. Podemos usar el idatributo para especificar

Cuando agregamos un ida a <div>, lo colocamos en la etiqueta de apertura:

​ Los párrafos ( <p>) contienen un bloque de texto sin formato.

Eche un vistazo a cada uno de estos elementos en acción a continuación:

En el ejemplo anterior, hay dos diferentes <div>. El segundo <div>contiene un <p>con

Es mejor utilizar un <span>elemento cuando desee apuntar a un contenido específico que

​ La <em>etiqueta generalmente se mostrará con énfasis en cursiva .

Eche un vistazo a cada estilo en acción:

<p><strong>The Nile River </strong> is the <em>longest</em> river

<p>The Nile River is the longest river <br> in the world,

El río Nilo es el río más largo

El <ul>elemento no debe contener texto sin formato y no formateará automáticamente el

En el ejemplo anterior, la lista se creó usando la <ul>etiqueta y todos los elementos

La salida se verá así:

<li>Preheat the oven to 350 degrees.</li>

<li>Mix whole wheat flour, baking soda, and salt.</li>

<li>Cream the butter, sugar in separate bowl.</li>

<li>Add eggs and vanilla extract to bowl.</li>

La salida se verá así:

​ Precalienta el horno a 350 grados.

<img src="image-location.jpg" />

<img src="#" alt="A field of yellow sunflowers" />

El altatributo también sirve para los siguientes propósitos:

Si la imagen de la página web no transmite información significativa a un usuario (con

<video src="myVideo.mp4" width="320" height="240" controls>

Video not supported

Repasemos lo que has aprendido hasta ahora:

​ HTML significa lenguaje de marcado de hipertexto y se utiliza para crear la

Aquí hay algunos recursos más para agregar a su kit de herramientas:

​ Documentos de Codecademy: HTML

Asegúrate de marcar estos enlaces como favoritos para tenerlos a tu disposición.

En la próxima lección, tomaremos el contenido que agregó a este sitio web y lo

Los archivos HTML requieren ciertos elementos para configurar el documento

Para crear estructura y contenido HTML, debemos agregar <html>etiquetas de apertura y

​ Declaró al navegador que su código es HTML con<!DOCTYPE html>

¿ Recuerdas la <body>etiqueta? El <head>elemento es parte de esta metáfora HTML. Va por

Si navega al catálogo de Codecademy y mira en la parte superior de su navegador, notará las

La pestaña de un navegador muestra el título especificado en la <title>etiqueta. La

Hasta ahora hemos aprendido sobre:

​ <!DOCTYPE html>, la declaración que especifica la versión de HTML para el navegador

<a>This Is A Link To Wikipedia</a>

Un lenguaje de marcado es un lenguaje informático que define la estructura y

Una etiqueta de apertura ( <p>)

El contenido (“¡Hola mundo!”)

Elemento HTML (o simplemente elemento): una unidad de contenido en un documento HTML

El nombre del atributo

Los párrafos ( <p>) contienen un bloque de texto sin formato.

La <em>etiqueta generalmente se mostrará con énfasis en cursiva .

Precalienta el horno a 350 grados.

HTML significa lenguaje de marcado de hipertexto y se utiliza para crear la

Documentos de Codecademy: HTML

Declaró al navegador que su código es HTML con<!DOCTYPE html>

<!DOCTYPE html>, la declaración que especifica la versión de HTML para el navegador

Le ayudan a usted (y a otros) a comprender su código si decide volver y revisarlo

El <html>elemento contendrá todo su código HTML.

Puede agregar un título a su página web utilizando el <title>elemento dentro del

El <table>elemento crea una tabla.

El <tr> elemento agrega filas a una tabla.

Para agregar datos a una fila, puede usar el <td>elemento.

Los datos de la tabla pueden abarcar filas usando el rowspan atributo.

El encabezado de una tabla se crea con el <thead>elemento.

El cuerpo de una tabla se crea con el <tbody>elemento.

El pie de página de una tabla se crea con el <tfoot>elemento.

El actionatributo determina dónde se envía la información.