La Tecnología Principal de la Web

Cada sitio web que has visitado está construido con código HTML. Con este curso podrás construir tu
propia página web.
El código HTML se basa en etiquetas. Las etiquetas utilizan corchetes angulares < >.
Completa la etiqueta del elemento botón <button></button>
Los corchetes angulares < > rodean el nombre del elemento que deseas agregar a la página. Los
elementos como botones, texto e imágenes se añaden a las páginas web con diferentes etiquetas.
Puedes usar la etiqueta de imagen <img> para añadir imágenes a una página web.
Necesitas etiquetas HTML para añadir diferentes elementos a una página. Por ejemplo:
Botón: <button>
Imagen: <img>
Párrafo de texto: <p>
Tabla: <table>

La estructura de una página

web se construye en HTML.

Luego puedes darle estilo a la

página con CSS.

JavaScript se utiliza para

hacer que las páginas sean
interactivas.

¡Buen trabajo! Aprendiste

que:

⭐ El código HTML controla la estructura de una página web

⭐ Las etiquetas HTML se utilizan para añadir elementos a una página web

⭐ Algunos ejemplos de etiquetas HTML son <button>, <img>, <table> and <p>

El código HTML le indica al navegador (por ejemplo, Chrome, Safari, etc.) cómo mostrar una página
web.
En esta lección comenzarás a escribir, ejecutar y testear código HTML real para construir la estructura
de una página web.
Muchos elementos HTML requieren tanto etiquetas de apertura como de cierre. Para crear un botón
Like, el código es:
<button>Like</button>
Muchos elementos requieren tanto etiquetas de apertura como de cierre, también conocidas como
etiquetas contenedoras. El texto del párrafo es otro ejemplo.
<p>Once upon a time</p>
Un navegador web traduce el código HTML en página web

El texto en las páginas web se puede organizar en diferentes

secciones, con encabezados.
Los encabezados también ayudan a los motores de búsqueda como
Google a saber de qué trata tu página para mostrársela a las personas
adecuadas.

Los encabezados en HTML tienen diferentes niveles. <h1> define el encabezado más importante.
Puedes usar hast 6 niveles de encabezados en HTML. Las etiquetas para estos elementos de encabezado
son <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Todos los encabezados tienen etiqueta de apertura y de cierre.
Puedes combinar los encabezados con otros elementos:

<h1>Mexico Guide
</h1>
<p>
Introduction…</p>
<h2>
Food in Mexico</h2>
<p>Tacos…
</p>
<button>
Order now</button>

Algunos elementos HTML pueden ser definidos con solo una etiqueta. Se llaman etiquetas vacías. La
etiqueta de imagen <img> es un buen ejemplo de una etiqueta vacía, no requiere una etiqueta de cierre.
¡Una imagen vale más que mil palabras! Las páginas web con imágenes obtienen más visitas, se
posicionan mejor en los resultados de búsqueda y se comparten más en redes sociales.
Técnicamente, las imágenes no se insertan en una página web, se enlazan. La fuente (src) de la imagen
debe incluirse en la etiqueta.
<img src="image_location">
Debes indicarle al navegador dónde encontrar la imagen. La fuente (src) es la ubicación en Internet
donde se almacena la imagen.
<img src="http://www.img.jpg">
Los navegadores web solicitan información de la web para armar y mostrar las páginas web.
El código, los documentos y los archivos multimedia como imágenes y videos son reunidos por el
navegador para mostrar la página web resultante.
Los servidores web son computadoras que están siempre conectadas a Internet y escuchan
continuamente las solicitudes de información. La fuente (src) en la etiqueta de imagen apunta al servidor
donde se encuentra la imagen.
La URL (Uniform Resource Locator (Localizador Uniforme de Recursos)) es una ubicación (o
dirección) en la web. La URL de la imagen debe estar encerrada entre comillas simples o dobles.
<img src=”https://www.img.png”>
El icono de imagen rota se muestra generalmente en las páginas web cuando algo está mal con la
imagen.
El código a continuación contiene un error. Como resultado, la imagen no se mostrará en la página.
<img src=…>

Ahora puedes incluir 4 tipos

diferentes de elementos en
tus páginas web. Vamos a
poner esto en práctica.

El navegador web tendrá

dificultades para entender tu
código si hay errores. Esto
puede resultar en la falta de
elementos.
Los errores en el código HTML pueden incluir la falta de comillas, etiquetas y errores tipográficos en
general.
Las imágenes no requieren etiquetas de cierre. Una etiqueta (<img>) es suficiente para enlazar una
imagen a una página web. Las etiquetas de imagen son ejemplos de etiquetas vacías (no contenedoras).

Los comentarios ayudan a otros humanos a leer tu código.

Puedes agregar notas o explicaciones a tu código con la etiqueta de comentario: <!-- ... -->
<!-- Paragraph element below-->
<p>This product is awesome!</p>
Es una buena práctica usar comentarios en tu código HTML. Explican lo que hace el código. Los
comentarios ayudarán a otros (¡y a ti en el futuro!) a comprender el código. Los comentarios son
ignorados por los navegadores y no se muestran en la página web.
Puedes usar comentarios para desactivar temporalmente parte de tu código para que no se muestre en el
navegador.
<!--<button>OK</button>-->

HTML es un lenguaje que no distingue entre mayúsculas y minúsculas. Esto significa que el navegador
web entenderá las etiquetas tanto en mayúsculas como en minúsculas:
<P>Click to generate</p> <button>Generate</button>

El navegador web ignorará los espacios en blanco y los saltos de línea en tu código. Sin embargo, es una
buena práctica organizar tu código en diferentes líneas para que sea más fácil de leer para los humanos.
Los saltos de línea en elementos como el párrafo son ignorados por el navegador. Si necesitas crear un
salto de línea, <br> es la etiqueta a utilizar. <br> forzará un salto de línea.
Los elementos como los encabezados y párrafos se inician automáticamente en una nueva línea cuando
los creas.
¡Buen trabajo! Aprendiste que:

⭐ Los comentarios hacen que tu código sea más fácil de leer y entender.

⭐ La etiqueta <!-- --> te permite agregar comentarios a tu código.

⭐ La etiqueta <br> se utiliza para crear saltos de línea.

La etiqueta contenedora <body> se utiliza para agrupar todo lo que se muestra en una página cuando se
carga en un navegador. Las etiquetas de body son necesarias para que tu página sea compatible con
todos los navegadores web. Una página web solo puede contener un elemento de cuerpo. Todos los
elementos de contenido que necesitas mostrar (como párrafos, encabezados, botones e imágenes) deben
estar dentro de la etiqueta contenedora <body>.
La etiqueta de contenedor <body> debe englobar todos los elementos que se muestran en la página.
Cuando algunas etiquetas HTML se colocan dentro de otras, esto se llama anidamiento.

Los sitios web hacen más que simplemente mostrar contenido. La etiqueta de cabeza <head> se utiliza
para incluir información técnica sobre la página.
<head>
<meta name="author" content="Karolina">
</head>
<body>
<p>The content of the page</p>
</body>
Los elementos dentro de la etiqueta <head> no se ven directamente en la página web que se renderiza
en el navegador. En cambio, estos elementos proporcionan metadatos y recursos necesarios para el
correcto funcionamiento y presentación de la página. Aquí tienes una lista de algunos elementos
comunes que se encuentran dentro de la etiqueta <head> y su propósito:

1. <title>: Especifica el título de la página web que se muestra en la pestaña del navegador.

<title>Mi Página Web</title>

2. <meta>: Proporciona metadatos sobre el documento, como la codificación de caracteres,

descripción, palabras clave, y más.

<meta charset="UTF-8">
<meta name="description" content="Descripción de mi página web">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Nombre del Autor">

3. <link>: Vincula recursos externos como hojas de estilo CSS o iconos.

<link rel="stylesheet" href="estilos.css">

<link rel="icon" href="favicon.ico">

4. <style>: Contiene estilos CSS internos que se aplican a la página.

<style>
body {
font-family: Arial, sans-serif;
}
</style>

5. <script>: Incluye scripts de JavaScript que se ejecutan en la página.

<script src="script.js"></script>

6. <base>: Especifica una URL base para todas las URLs relativas en el documento.

<base href="http://www.ejemplo.com/">

7. <noscript>: Proporciona contenido alternativo para usuarios que tienen JavaScript deshabilitado.

<noscript>
Tu navegador no soporta JavaScript o está deshabilitado.
</noscript>
Estos elementos ayudan a definir el comportamiento, la apariencia y los recursos asociados con la
página web, pero no son visibles como contenido en la interfaz del usuario. El contenido visible de la
página web se coloca dentro de la etiqueta <body>.

Hoy en día, la mayoría de los profesionales web siempre envuelven su código HTML en etiquetas
<html>. La etiqueta <html> es una etiqueta contenedora. La cabeza y el cuerpo están anidados dentro
de las etiquetas <html>.

La indentación se considera una muy buena práctica para mejorar la legibilidad del código. La
indentación se refiere a los espacios al comienzo de las líneas.

⭐ Los documentos HTML se pueden organizar en cabeza y cuerpo

⭐ La etiqueta <body> garantiza la compatibilidad con todos los navegadores

⭐ La indentación ayuda a mejorar la legibilidad y, por lo tanto, la colaboración

El formateo de texto ayuda a los visitantes del sitio web a encontrar la información que están buscando.
El formateo de texto se utiliza para resaltar el contenido importante en una página y puede hacer que
tus páginas web sean más accesibles e inclusivas.

Las etiquetas de formato HTML se utilizan para cambiar cómo se muestra el texto.

La etiqueta de negrita <b> se utiliza para mostrar el texto en negrita. Las etiquetas de formato son
etiquetas contenedoras. Esto significa que se requieren tanto las etiquetas de apertura como las de cierre.

La etiqueta de cursiva <i> se utiliza para mostrar el texto en cursiva. La etiqueta de subrayado <u> se
utiliza para subrayar el texto.

Las etiquetas de formato se aplican al texto y están anidadas dentro de elementos.

<p>Movie: <i>E.T.</i></p>

Las páginas web están diseñadas para ser accesibles para personas con discapacidades. La accesibilidad
web se trata de hacer que los sitios web sean más inclusivos y eliminar barreras. Los lectores de pantalla
son programas que hacen que el contenido de un sitio web sea accesible para usuarios ciegos, con
discapacidad visual o con discapacidad de aprendizaje.

Hay algunas etiquetas de formato HTML que puedes utilizar para hacer que tus páginas web sean más
accesibles. La etiqueta de énfasis <strong> se utiliza para resaltar texto importante. El texto importante
se muestra en negrita, al igual que cuando se utiliza la etiqueta <b>. La diferencia es que la etiqueta
<strong> también tiene un significado y es utilizada por los lectores de pantalla.

La etiqueta de énfasis <em> se utiliza para definir texto enfatizado. El texto enfatizado se muestra en
cursiva, al igual que cuando se utiliza la etiqueta <i>. La diferencia es que el lector de pantalla resaltará
verbalmente las palabras.

Las etiquetas <strong> y <em> se consideran etiquetas de formato semántico porque añaden significado
al contenido. Pueden servir como una indicación de énfasis para un lector de pantalla.

⭐ Puedes usar anidamiento para hacer que el texto esté en negrita, cursiva y subrayado con las etiquetas
de formato <b>, <i> y <u>

⭐ Puedes hacer que tus páginas web sean más accesibles utilizando las etiquetas de formato semántico
<strong> y <em>

La Web no sería posible sin el Hipertexto. Hipertexto es lo que permite a los usuarios saltar de una
página web a otra a través de enlaces.

Hipertexto es texto que contiene un enlace a otra página. Las páginas web se llaman documentos
Hipertexto porque están conectadas por enlaces Hipertexto o hipervínculos.

Los hipervínculos permiten a los usuarios moverse de una página web a otra y compartir información
entre diferentes máquinas y sistemas

La etiqueta de anclaje <a> (etiqueta contenedora) se utiliza para crear un hipervínculo en una página
web.

Los hipervínculos se utilizan para enlazar una página web con otras. Para crear un enlace, necesitas
"href" para agregar la URL de destino. href significa referencia HiperTexto.

La URL debe estar encerrada entre comillas para funcionar sin errores. Si olvidas agregar href o las
comillas, la etiqueta <a> no creará un hipervínculo.

<a href=”url”>Z</a>

Las URLs pueden estar encerradas entre comillas simples (') o comillas dobles ("). No hay diferencia
siempre y cuando coincidan.

Puedes anidar hipervínculos dentro de otros elementos de

texto.
La parte de la URL que se mantiene igual para todas las páginas de un sitio web es el nombre de
dominio (por ejemplo, sololearn.com).
HTML significa HyperText Markup Language.
El término "HyperText" se debe a que las páginas web tienen enlaces. "Markup" se refiere a los
símbolos como </>.

⭐ Puedes insertar enlaces en páginas con la etiqueta de anclaje <a>

⭐ La etiqueta <a> puede estar anidada dentro de elementos de texto

⭐ La URL de destino se coloca con href

En el desarrollo web moderno, las listas son elementos muy útiles. Incluso puedes
usar listas para crear menús de navegación.

Una lista consiste en elementos de lista <li>, que son etiquetas contenedoras.

Las listas ordenadas <ol> se muestran con números (1, 2, 3...)

en lugar de símbolos de viñetas. Usa <ol> cuando los puntos tengan un cierto
orden, como instrucciones paso a paso.

1. Tea
2. Coffee
3. Milk

Las listas también son etiquetas de contenedor, con los elementos de lista anidados dentro.

Usa listas no ordenadas <ul> cuando el orden de los elementos no sea importante. Se
muestran con viñetas.

Cada elemento de la lista se mostrará en una nueva línea.

¿qué hay de malo en ese código?

  La URL debe estar entre comillas.

 En la etiqueta de apertura <a> falta el atributo href.

 Falta la etiqueta de cierre del hipervínculo.

⭐ Las listas están compuestas por elementos de lista <li>

⭐ Puedes agregar listas ordenadas <ol> y listas no ordenadas <ul> a las páginas web

⭐ Puedes anidar listas unas dentro de otras

Los atributos

Los atributos modifican los elementos HTML añadiendo información adicional.

Los atributos pueden ser opcionales o requeridos. Ya conoces algunos atributos requeridos. La etiqueta
de imagen requiere un atributo (src) para funcionar correctamente:
<img src="http://www.img.png">

Es una buena práctica describir lo que muestran las imágenes. El atributo alt (texto alternativo) se utiliza
para agregar descripciones de imágenes. El atributo alt se puede:
- leer en voz alta por lectores de pantalla
- mostrar cuando la imagen no se carga
- leer por motores de búsqueda

Agregar texto alternativo a las imágenes hace que tu página sea más accesible
<img src="img_boy.jpg" alt="Boy in a hat">
Para las etiquetas contenedoras, los atributos siempre van en la etiqueta de apertura. La etiqueta de
enlace es otro ejemplo de un elemento HTML que requiere un atributo (href) para funcionar
correctamente.
<a href="https://z.com">Z</a>

Puedes controlar el tamaño de las imágenes en tus páginas web. width es un atributo opcional.
height es otro atributo opcional para el elemento de imagen. Tanto width como height se miden en
píxeles de forma predeterminada.

Cuando se proporciona solo uno de los 2 atributos, el navegador calcula el otro utilizando la relación de
aspecto original de la imagen, para que no se estire ni se comprima. Cambiar la relación de aspecto de
una imagen causa distorsión, lo cual puede verse mal.

⭐ Puedes agregar atributos a los elementos HTML para proporcionar información adicional

⭐ Algunos atributos son necesarios para que el elemento funcione

⭐ Los atributos para etiquetas contenedoras siempre se colocan en la etiqueta de apertura

Navegación del sitio Web

La forma en que los visitantes navegan por un sitio web

depende de su diseño. Los sitios web pueden tener 2
formas:
- Sitios web de varias páginas
- Sitios web de una sola página
La forma en que los visitantes navegan por tu sitio web
tiene un gran impacto en: la experiencia del usuario, en
los ránkings de los motores de búsqueda y, por lo tanto,
incluso en las ventas.
Los sitios web de varias páginas están compuestos por
más de una página. Para navegar entre las páginas, el
navegador web debe cargar diferentes archivos HTML
La etiqueta de contenedor <nav> define un conjunto de enlaces que permiten al usuario navegar entre
las páginas de un sitio web.
Los enlaces a las diferentes páginas se agregan con la etiqueta de anclaje <a> y se anidan dentro de la
etiqueta de contenedor <nav>.
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>

El proyecto HTML para un sitio web de varias páginas está compuesto por diferentes documentos
HTML (o archivos). Los documentos HTML deben guardarse con la extensión de archivo correcta (tipo
de archivo) para que los navegadores web los reconozcan. La extensión para archivos HTML es .html.

Un sitio web de una sola página tiene todo su contenido en la página de inicio. Cualquier enlace de
navegación lleva al visitante a diferentes secciones (en lugar de cargar nuevas páginas).
Una página de inicio debe llamarse index.html para que el navegador web la encuentre y la cargue.
Es una buena práctica nombrar tu página de inicio como index.html para que el navegador web pueda
encontrarla y cargarla.
Para saltar a una parte específica de un sitio web de una sola página, primero debes marcar la sección
con el atributo id.
<h2 id="section-1">Section 1</h2>
El atributo id se utiliza para identificar el elemento al que deseas dirigirte con el enlace de navegación.
Cada valor del atributo id debe ser:
-único
-dentro de comillas

Una vez que el elemento al que deseas saltar ha sido

marcado con un id, puedes apuntarlo con una
etiqueta de ancla <a>
<a href="#s1">Go to S1</a>
<h2 id="s1">Section 1</h2>

El carácter de almohadilla (#) es necesario para

indicar al navegador web que nos estamos dirigiendo
a una sección de la misma página.

El diseño de sitios web de una sola página frente a

sitios web de varias páginas es una de las primeras
decisiones que debes tomar para un nuevo proyecto
de sitio web. Ambas opciones tienen sus ventajas y
desventajas, como descubrirás pronto en este curso.
⭐ Los sitios web pueden ser de 2 tipos diferentes: de una sola página o de varias páginas

⭐ Puedes crear enlaces de navegación como etiquetas <a> dentro de una etiqueta <nav>

⭐ Puedes enlazar partes específicas de una página dándoles un atributo id

FORMULARIOS

Puedes interactuar con los visitantes de tu sitio web y recopilar información de ellos utilizando
formularios. Puedes utilizar formularios para permitir a tus visitantes:
- ponerse en contacto contigo
- enviar pedidos, solicitudes y otra información
- crear una cuenta o registrarse
- y mucho más
Los formularios están compuestos por elementos de entrada
como campos de texto, casillas de verificación y botones de
envío. Estos elementos de entrada se anidan dentro de la
etiqueta contenedora <form>.
<form>
<!--input elements go here-->
</form>
El elemento de formulario más común es <input>. Existen
muchos tipos de elementos <input>, según el atributo type.
Los elementos del formulario se mostrarán en la misma línea a menos que utilicemos la etiqueta <br>.
Se pueden agregar texto a los diferentes elementos de entrada con la etiqueta <label>.
<form>
<label>email: </label>
<input type="text">
</form>
Se considera una buena práctica conectar el texto (label) con los elementos de entrada utilizando los
atributos for e id.
El atributo id se utiliza para identificar un elemento de entrada único. El atributo for apunta a y coincide
con el id de un elemento de entrada.
Para conectar texto y elementos de entrada, los valores de los
atributos id y for deben coincidir exactamente. ¿Qué atributo
se utiliza con qué elemento?
<label>: for
<input>: id
Conectar texto y elementos de entrada aumenta el área de
selección.
Conectar correctamente texto y campos de formulario
aumentará el área de selección y mejorará la accesibilidad.

⭐ Puedes agregar formularios a tus páginas web con la etiqueta de contenedor <form>

⭐ Los formularios están compuestos por elementos <input>

⭐ Puedes añadir texto a los diferentes campos de entrada de un formulario con etiqueta contenedora
<label>

Datos de Formulario

Un formulario HTML es una forma conveniente de enviar datos a

una base de datos alojada en un servidor. ¿Qué mostrará el
navegador? Un formulario con dos campos de entrada.

Se utiliza un botón de envío

(submit) para enviar los datos
de un formulario. El tipo de
entrada submit agrega un botón
al formulario.

Puedes usar la entrada de submit para enviar los datos del formulario a una base de datos alojada en un
servidor.
El atributo name se utiliza para hacer referencia a los datos después de enviar el formulario. Solo los
elementos de formulario con un atributo "name" pasarán sus valores a la base de datos al enviar un
formulario.
<form>
<input type="text" name="email">
<input type="text" name="city">
<input type="submit">
</form>

El atributo "name" se utiliza para colocar la

entrada del usuario en el campo correcto (columna) de la base de datos. Los atributos "name" deben
agregarse a los campos de entrada.

¿Cómo se hará referencia al campo de correo electrónico en

la base de datos?
con “em”.

El atributo value define los datos que se enviarán cuando se

seleccione la entrada. Los nombres y valores son necesarios para
almacenar correctamente la información en la base de datos. El
código HTML debe incluir dónde y qué poner en la base de datos.
dónde poner la información: name
qué información: value.

En el caso de los campos de texto, puedes usar el atributo value

para definir un valor predeterminado que se enviará a menos que el
usuario proporcione un valor diferente.

⭐ El tipo de entrada submit permite al usuario enviar datos del

formulario

⭐ El atributo name se utiliza para indicar a la base de datos dónde

almacenar los datos
⭐ El atributo value se utiliza para indicar a la base de datos qué almacenar

Menús Desplegables

Los menús desplegables hacen que tus formularios sean más eficientes, accesibles y organizados. Puedes
usar la etiqueta contenedora <select> para crear una lista desplegable.
La etiqueta contenedora <option> se utiliza dentro de una etiqueta <select> para agregar opciones para
el usuario.
Puedes utilizar el elemento <select> como parte
de un formulario para recopilar la entrada del
usuario.
Enviar un formulario envía información a una
base de datos. Se necesita el atributo "name"
para enviar los datos del formulario. El atributo
"name" se utiliza para indicar a la base de datos.
dónde almacenar los datos. Los datos se
enviarán cuando se envíe el formulario. Puedes
controlar los datos que envía cada opción con el
atributo value.
El atributo "selected" crea un menú desplegable
con una opción preseleccionada. La opción
preseleccionada se mostrará primero.
Puedes agregar texto a los menús desplegables. Texto y menús desplegables están conectados mediante
los atributos for e id, al igual que cualquier otro elemento de formulario.
Conectar correctamente las etiquetas y los campos de formulario aumentará el área de interacción y
mejorará la accesibilidad.
¿Qué atributo se usa con qué elemento?
<label> atributo for
<select> atributo id
Cuando las etiquetas y los campos de formulario están correctamente conectados, al hacer clic en el
texto se selecciona el campo de formulario.
El elemento <select> se puede utilizar en formularios en
combinación con elementos de entrada.

⭐ la etiqueta <select> se utiliza para crear un menú desplegable

⭐ la etiqueta <option> se utiliza para ofrecer opciones al usuario

⭐ puedes usar menús desplegables en formularios, en combinación con otros elementos de entrada.
 Videos
Los videos pueden cautivar e informar a los usuarios. Puedes usar la etiqueta contenedora <video> para
insertar archivos de video en una página web. Al igual que las imágenes, los videos se incrustan (o se
enlazan) en una página web. ¿Qué significa eso?
Se debe proporcionar la URL de origen (o ubicación) del video.
Puedes agregar archivos de video en diferentes formatos. Los formatos de video comunes son: MP4,
OGG y WebM. La etiqueta vacía <source> proporciona la ubicación y el formato del archivo de video.
El atributo src especifica la URL del archivo de video. El atributo type especifica el formato del archivo
de video.
Se necesitan diferentes formatos de video para garantizar la compatibilidad con diferentes navegadores y
dispositivos. La etiqueta <source> te permite agregar varios formatos. Cuando se incluyen diferentes
opciones de <source>, el navegador elegirá la primera que sea compatible.
¿Qué fuente elegirá el navegador si todas las opciones son
compatibles?
Cuando se proporciona más de una opción de fuente de video
en un elemento <video>, el navegador elegirá la primera
opción que sea compatible y pueda reproducir. Si ambas
opciones son compatibles, el navegador reproducirá la
primera opción listada.
Puedes agregar texto entre las etiquetas <video>. El texto solo se
mostrará en los navegadores que no admitan el elemento de video.
¿Qué mostrará el navegador si no se admiten las 2 opciones de
video? Video not supported
Puedes mostrar controles de reproducción/pausa, volumen y otros
controles de video con el atributo controls. Los controls de video
son opcionales.

⭐ La etiqueta <video> incrusta videos en páginas web.

⭐ La etiqueta <source> te permite agregar varios

archivos multimedia.

⭐ El atributo controls agrega controles de video predeterminados

Medios de audio
El sonido es otra forma de involucrar a tus visitantes, transmitir información y evocar emociones.
Puedes incrustar archivos de audio en páginas web con la etiqueta contenedora <audio>. Al igual que
con los videos, la etiqueta <source> se utiliza para agregar opciones de origen para el audio. La etiqueta
<source> es un ejemplo de etiqueta vacía porque no contiene contenido entre una etiqueta de apertura y
una de cierre; en su lugar, se cierra dentro de la misma etiqueta de apertura. Al igual que con los videos,
el atributo src agrega la URL del archivo de audio. El atributo type agrega el formato. Al igual que con
los videos, puedes agregar archivos de audio en diferentes formatos. Los formatos de audio comunes
son: MP3, OGG y WAV.
¿Cuál es la forma correcta de incluir múltiples opciones de origen de audio? Anidar todas las opciones
<source> dentro de <audio>.
Los atributos generalmente se presentan en el formato
nombre="valor". ¿Por qué el atributo controls es una
excepción?
El atributo controls en HTML es un ejemplo de un
atributo booleano. Los atributos booleanos son una
excepción al formato común nombre="valor" porque su
mera presencia en un elemento HTML significa
"verdadero" o "activo". No es necesario asignarles un
valor explícito porque tienen un comportamiento
predeterminado. Si están presentes en el elemento
HTML, su valor predeterminado es true. Puedes usar los
atributos autoplay, muted y loop para controlar el
comportamiento del elemento multimedia. Al igual que con controls, estos atributos tienen sus valores
predeterminados omitidos.
¿Cómo se comportará este video en el
navegador?

⭐ La etiqueta <audio> incrusta sonido en una

página web.

⭐ Los atributos autoplay, muted y loop

controlan el comportamiento del multimedia.

Diseño de página
El diseño de una página web puede mejorar la experiencia del usuario y hacer que el contenido sea más
legible. El cuerpo de una página web se puede dividir en 3 partes.
Encabezado: <header>
Contenido principal: <main>
Pie de página: <footer>
La etiqueta contenedora <header> generalmente contiene información
introductoria. El encabezado a menudo contiene enlaces de navegación, un menú y/o una barra de
búsqueda. Los elementos de marca como los logotipos
también se encuentran generalmente en el encabezado.
<header>
<!--Introductory information-->
</header>
La etiqueta de contenedor <main> se utiliza para
incluir el contenido principal de una página web.
La etiqueta de contenedor <footer> a menudo contiene
información de contacto, legal y enlaces.
Los elementos <header>, <main> y <footer> están
anidados dentro de la etiqueta contenedora <body>.
Los principiantes en el diseño y desarrollo web a
menudo confunden <header> con otros elementos HTML. Practiquemos un poco. ¿Cuál de los
siguientes elementos debe estar anidado dentro de <body>? El elemento <header>
¿Cuál de los siguientes elementos se utiliza para incluir información técnica sobre la página como
título, descripción, autor y palabras clave? El elemento <head>
¿Cuál de los siguientes elementos no se muestra al visitante en el navegador web? El elemento <head>
La construcción de un sitio web implica
dos áreas:
Front-end: Lo que los usuarios ven y con
lo que interactúan.
Back-end: Solicitudes de información,
servidores y bases de datos.

El desarrollador de front-end es quien está

a cargo del diseño web adaptativo
(responsive web design).
Responsabilidades del Desarrollador de Front-end: Se encarga de la parte visual y de la experiencia
del usuario en un sitio web. Esto incluye la estructura del HTML, los estilos con CSS, y la interactividad
con JavaScript.
HTML: Estructuración del contenido de la página web.
CSS: Aplicación de estilos y diseños responsivos para que el sitio web se vea bien en dispositivos de
diferentes tamaños.
JavaScript: Añadir interactividad y manejar el comportamiento dinámico del diseño en diferentes
dispositivos.
Diseño Web Adaptativo:
Utiliza técnicas como media queries en CSS para ajustar el diseño según el tamaño de la pantalla.
Emplea layouts fluidos y unidades relativas (como porcentajes y em) para que el diseño se adapte de
manera flexible a distintos tamaños de pantalla.
Implementa frameworks y librerías de CSS como Bootstrap, que facilitan la creación de sitios web
responsivos.
Comparación con el Desarrollador de Back-end:
Desarrollador de Back-end: Se enfoca en la lógica del servidor, gestión de bases de datos,
autenticación de usuarios, y otras funcionalidades del lado del servidor. No se ocupa del diseño y
presentación del sitio web en los navegadores.
Conclusión:
El desarrollador de front-end es el responsable del diseño web adaptativo, ya que se encarga de la parte
visual y de la experiencia del usuario, asegurándose de que el sitio web funcione y se vea bien en una
variedad de dispositivos y tamaños de pantalla.
En esta lección, aprenderás a estructurar páginas web con diseños
que mejoren la accesibilidad y faciliten la comprensión del
contenido tanto para los motores de búsqueda como para los
usuarios.
<article> representa una pieza de contenido independiente y
autónoma.
Un artículo es un contenido que tiene sentido por sí mismo.
La etiqueta <article> indica claramente lo que contiene. Se utiliza
para contenido como noticias y entradas de blog.

Entonces, <article> es un ejemplo de una etiqueta

semántica.
Las etiquetas de diseño como <header>, <main>, <footer>
y <article> son etiquetas semánticas porque proporcionan
información sobre lo que contienen.
<section> ayuda a descomponer el contenido en partes y es
una etiqueta semántica, una etiqueta contenedora y
normalmente incluye un encabezado de texto.
Una página web se puede dividir en secciones separadas
para introducción, información de contacto, etc. <section>
se puede utilizar para separar cada capítulo, noticia, etc.
<aside> se utiliza para contenido secundario, adicional o de alguna manera relacionado.

Puedes combinar estos elementos para crear un diseño semántico bien estructurado para tu contenido.
¿Qué elemento se debe utilizar para dividir una historia en capítulos? <section>
Las etiquetas semánticas no dan ningún efecto visual al contenido. Puedes anidar elementos de diseño
para crear páginas organizadas y accesibles.
Las etiquetas semánticas proporcionan información adicional a
motores de búsqueda y/o lectores de pantalla.
Anidar <aside> dentro de <article> te permite proporcionar
contenido adicional y relacionado específico para ese artículo. Esto
mejora la experiencia del usuario y hace que el contenido esté más
organizado.

⭐ <article> representa una pieza de contenido autónoma e

independiente.

⭐ <section> se utiliza para dividir el contenido en partes.

⭐ <aside> se utiliza para contenido secundario, adicional o de alguna

manera relacionado.
 El Atributo de Estilo
El atributo <style> en HTML se utiliza para aplicar estilos CSS directamente a un elemento específico
en el documento. Este atributo permite definir estilos de presentación como colores, fuentes, márgenes,
bordes y muchos otros, directamente dentro del HTML, en lugar de hacerlo en una hoja de estilo externa
o en una sección <style> dentro del documento HTML.
El atributo style sigue esta sintaxis básica:

Con el atributo de style, puedes personalizar completamente la presentación visual de tus sitios web,
desde la tipografía y los colores hasta el diseño y más. El atributo de estilo se puede utilizar para definir
propiedades como el color, el tamaño de fuente y la alineación.
El atributo de estilo puede facilitarte mucho la vida cuando se trata de dar formato. Puedes personalizar
múltiples propiedades al mismo tiempo. Solo separa cada par propiedad:valor con un punto y coma (;).
¿Qué mostrará este código? Un párrafo de texto rojo, alineado a la derecha.
<p style="color: red; text-align: right">Some text</p>
Puedes controlar el tamaño de fuente con la propiedad font-size.
Algunas propiedades de estilo requieren múltiples valores.
La propiedad border es un ejemplo de eso. La propiedad
border es una forma corta y simple de referirse a 3
subpropiedades diferentes. Por eso puede tomar 3 valores.
<p style="border:1px solid red">Some text</p>
La única subpropiedad de borde requerida es border-style. Si no se especifica el ancho, el valor
predeterminado será "medium". Si no se especifica el color, se aplicará el color del texto al borde.

Elementos de línea y en bloque

Cada elemento HTML es o bien en línea o en bloque.

Esto es una de las cosas más importantes para los diseñadores y desarrolladores web. ¡Echemos un
vistazo!
La propiedad border nos ayudará a ver la
diferencia entre estos 2 tipos de elementos HTML.
Los bordes de los diferentes elementos te ayudarán a identificar las diferencias.
Los elementos en bloque siempre comienzan en una nueva línea.
Los elementos en línea no comienzan en una nueva línea.
Los elementos en línea pueden estar anidados dentro de elementos en bloque.
Las etiquetas de salto de línea <br> se utilizan para forzar que los elementos en línea comiencen en una
nueva línea.

Elementos en Bloque
Comportamiento: Ocupan todo el ancho disponible de su contenedor principal y siempre comienzan en
una nueva línea.
Características:
Se extienden a lo largo de toda la línea.
Pueden contener otros elementos en bloque y en línea.
Crean una interrupción visible en el flujo del documento.
Ejemplos Comunes:
<div> <p> <h1> a <h6> <ul> y <ol> <li> <form> <header>, <footer>, <section>, <article>
Ejemplo:
<div>
<h1>Título</h1>
<p>Este es un párrafo dentro de un div</p>
</div>

Elementos en Línea
Comportamiento: Ocupan solo el espacio necesario para su contenido y no comienzan en una nueva
línea.
Características:
No interrumpen el flujo del documento.
Pueden contener solo otros elementos en línea y texto.
El ancho y alto no afectan el flujo del documento.

Ejemplos Comunes:
<span> <a> <img> <strong> <em> <b> <i> <u>
Ejemplo:
<p>Este es un <a href="#">enlace</a> y un <span>texto en línea</span> dentro de un párrafo</p>

Ejemplo Comparativo
<div style="border: 1px solid black; padding: 10px;">
<h2>Ejemplo de Elemento en Bloque</h2>
<p>Este es un párrafo dentro de un elemento en bloque</p>
</div>

<p>Texto en línea con un <span style="color: red;">span rojo</span> y un <a

href="#">enlace</a></p>
En el ejemplo comparativo, puedes ver cómo los elementos en bloque (<div>, <h2>, <p>) ocupan todo
el ancho y comienzan en una nueva línea, mientras que los elementos en línea (<span>, <a>) se ajustan
dentro del flujo del texto sin interrumpirlo.

Las etiquetas de salto de línea <br> generalmente se incluyen en los formularios. ¿Por qué? Los
elementos de formulario como <input> y <label> son elementos en línea.
⭐ Hay dos tipos de elementos HTML: en línea y en bloque

⭐ Los elementos en bloque siempre comienzan en una nueva línea

⭐ Los elementos en línea no comienzan en una nueva línea

Contenedor de División

Agrupar diferentes elementos HTML puede hacer que tus páginas se carguen más
rápido y sean más fáciles de personalizar y mantener.
El elemento <div> es un contenedor para elementos HTML que mantiene
organizadas tus páginas.
El elemento <div> siempre ocupa todo el ancho disponible. Esto significa que el
elemento <div> es un elemento de nivel de bloque.
El elemento <div> es un contenedor que agrupa contenido relacionado en una página
web, como una barra lateral o un menú de navegación. <div> no agrega significado al contenido porque
es una etiqueta semántica. <div> no agrega ningún efecto
visual a menos que le agregues un estilo. A menudo es
utilizado por los desarrolladores web para agrupar y
estilizar elementos HTML.
El estilo en un contenedor <div> se aplicará a todos sus
elementos anidados a menos que les des su propio estilo.

⭐ <div> es un contenedor que agrupa elementos

⭐ <div> es un elemento de nivel de bloque

⭐ <div> se utiliza para aplicar el mismo estilo a elementos agrupados

Tablas

Las tablas te ayudan a mostrar datos de una manera fácil de entender, comparar y
analizar. Puedes agregar una tabla a tu página web con la etiqueta contenedora
<table>. Una tabla de datos está hecha de filas y columnas.
Puedes agregar filas a una tabla con la etiqueta contenedora <tr>. Las filas están anidadas dentro de la
etiqueta <table>.
Puedes agregar celdas con la etiqueta de contenedor <td> (datos de tabla). Están anidadas dentro de las
filas.Se pueden agregar bordes a las tablas, filas y celdas con el atributo de estilo. Los elementos <td>
dentro de la misma fila se muestran en la misma línea, uno después del otro.
Las tablas generalmente incluyen encabezados. Un encabezado es una fila
especial en la parte superior de la tabla que se utiliza para etiquetar cada
columna.
Puedes crear celdas de encabezado con <th>
Tanto las etiquetas <td> como <th> se utilizan para agregar celdas a una
tabla. ¿Cuál es la diferencia?
Celda de encabezado de tabla: <th> Celda de datos de tabla: <td>

Puedes hacer celdas que ocupen varias filas

y/o columnas, utilizando los atributos
colspan y rowspan. Esto se llama fusionar
celdas. colspan es para el número de
columnas que una celda debe abarcar.
El atributo rowspan especifica el número de
filas que una celda debe abarcar. Puedes usar
rowspan para fusionar celdas verticalmente.

⭐ Agregar tablas a páginas web con la etiqueta de contenedor <table>

⭐ Agregar filas con la etiqueta de contenedor <tr>

⭐ Agregar celdas de datos con la etiqueta de contenedor <td>

⭐ Agregar celdas de encabezado con la etiqueta de contenedor <th>

 Introducción a JavaScript

A lo largo de este recorrido, has adquirido habilidades esenciales para crear y estructurar páginas web.
Desde el uso de etiquetas básicas hasta la incorporación de imágenes, enlaces y tablas, ahora tienes una
sólida base en el lenguaje de marcado fundamental para el desarrollo web.

Ahora que dominas HTML, es momento de dar el siguiente paso y adentrarte en el mundo de la
programación con JavaScript. Mientras que HTML se encarga de la estructura y el contenido de una
página web, JavaScript añade dinamismo e interactividad. Con JavaScript, podrás hacer que tus páginas
web sean más atractivas y funcionales, respondiendo a las acciones de los usuarios en tiempo real.

En esta próxima etapa, aprenderás los conceptos básicos de JavaScript, incluyendo variables, funciones,
eventos y manipulaciones del DOM (Document Object Model). Estos conocimientos te permitirán crear
experiencias de usuario más ricas y mejoradas, elevando tus habilidades de desarrollo web a un nuevo
nivel.

Prepárate para explorar las infinitas posibilidades que JavaScript ofrece y transformar tus páginas web
estáticas en aplicaciones web interactivas. ¡Vamos a empezar esta emocionante aventura en el mundo de
JavaScript!
El atributo onclick es un atributo HTML que se utiliza para ejecutar código JavaScript cuando se
produce un evento de clic en un elemento. Así que, aunque onclick se define en HTML, su propósito es
ejecutar JavaScript.

Por ejemplo, en HTML, puedes usar el atributo onclick de la siguiente manera:

<button onclick="alert('¡Hola, mundo!')">Haz clic aquí</button>
En este caso, el atributo onclick está definido en el elemento HTML <button>, pero el código que se
ejecuta cuando se hace clic en el botón es JavaScript (alert('¡Hola, mundo!')).

Una de las muchas acciones que puedes activar es la visualización de un mensaje de alerta.
<button onclik="alert('Message')">Click</button>

Puedes hacer que otros elementos HTML sean interactivos.

<img src="icon.jpg" onclick="alert('Hi')">
Una función es un fragmento de código que se puede "llamar" y reutilizar en un programa tantas veces
como sea necesario.
alert() es un ejemplo de una función que muestra un mensaje de alerta. El mensaje debe estar entre
comillas.

¡Hay tantas posibilidades con JavaScript!

¿Sabías que?
La web fue originalmente diseñada y desarrollada en la
Organización Europea para la Investigación Nuclear (CERN) en los años 90. El primer prototipo
permitió a los científicos compartir información entre diferentes universidades e institutos de
investigación de todo el mundo. La web ha evolucionado mucho desde que fue inventada en el CERN.

La primera iteración de la web era de solo lectura, sin

interacción ni elementos de diseño.
La segunda iteración, también conocida como web de
lectura y escritura, hizo que la web fuera social con
aplicaciones como YouTube, Facebook y Twitter, y
permitió al usuario convertirse en creador de
contenido.

Si bien internet y la web no son exactamente lo

mismo, los dos términos se utilizan a menudo
indistintamente. La web es la aplicación más grande
en internet.
¡HTML fue la elección perfecta! ¡Ahora que lo
sabes, hay mucho que puedes construir! Y ahora
podrás aprender más rápido otros lenguajes de
programación también.

⭐ JavaScript hace que tus páginas web sean interactivas

⭐ El atributo onclick activa acciones cuando un usuario hace clic un elemento

⭐ La función alert() genera un mensaje con un botón de OK