«Talento Tech»

Front End
Js
CLASE 2
Clase N° 2: Listas, Enlaces,
Multimedia y Tablas
Temario:
1. Listas y Enlaces
○ Tipos de Listas en HTML
■ Introducción a las listas ordenadas (<ol>) y desordenadas (<ul>).
■ Definición y uso de listas de definición (<dl>).
○ Creación de Enlaces en HTML
■ Uso de la etiqueta <a> para crear hipervínculos.
■ Enlaces a otras páginas, correos electrónicos y archivos.
2. Rutas Absolutas y Relativas
○ Diferencias entre rutas absolutas y relativas.
○ Mejores prácticas para organizar los archivos de un proyecto web utilizando
rutas relativas.
3. Elementos en Bloque y en Línea
○ Características y ejemplos de elementos en bloque.
○ Características y ejemplos de elementos en línea.
4. Multimedia con HTML
○ Inserción de Imágenes
■ Uso de la etiqueta <img> y sus atributos src y alt.
■ Uso de height y width para ajustar el tamaño de las imágenes.
○ Inserción de Audio
■ Uso de la etiqueta <audio> y atributos clave como controls,
autoplay, y loop.
○ Inserción de Video
■ Uso de la etiqueta <video> y atributos como controls, poster,
height, y width.
○ Uso de Iframes
 ■ Cómo insertar documentos, videos y mapas utilizando la etiqueta
<iframe>.
5. Accesibilidad en Multimedia
○ Atributos alt y Subtítulos en Video
■ Importancia del atributo alt en imágenes para la accesibilidad.
■ Cómo agregar subtítulos a los videos utilizando la etiqueta <track>.
6. Tablas en HTML
○ Estructura Básica de una Tabla
■ Uso de las etiquetas <table>, <tr>, <td>, y <th>.
○ Combinar Celdas en Tablas
■ Uso de los atributos colspan y rowspan para combinar celdas en
tablas.
○ Buenas Prácticas en el Uso de Tablas
■ Consejos para mantener las tablas accesibles y bien estructuradas.
Listas y enlaces.
Listas y enlaces
Las listas en HTML se utilizan para agrupar elementos relacionados de manera ordenada o
desordenada. Existen tres tipos principales de listas en HTML:

Tipos de listas en HTML:

● Listas ordenadas (<ol>): Este tipo de lista numera automáticamente cada

elemento de la misma. Es de gran utilidad cuando el orden de los elementos es
relevante para la programación.

Ejemplo:

<ol>
<li>Encender la computadora</li>
<li>Abrir el navegador</li>
<li>Acceder al sitio web</li>
</ol>

● Listas desordenadas (<ul>): Este tipo de lista ubicará los elementos con viñetas,
sin importar el orden de aparición de los mismos.

Ejemplo:

<ul>
<li>Pantalla de 15 pulgadas</li>
<li>Batería de larga duración</li>
<li>Procesador Intel i7</li>
</ul>

● Listas de definición (<dl>): Estas listas se utilizan para definir términos y

descripciones. Cada término (<dt>) puede tener una o más descripciones (<dd>).
Ejemplo:

<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado utilizado para estructurar contenido en la
web.</dd>

<dt>CSS</dt>
<dd>Lenguaje utilizado para aplicar estilos y diseño a las páginas
web.</dd>

<dt>JavaScript</dt>
<dd>Lenguaje de programación utilizado para añadir interactividad a
las páginas web.</dd>
</dl>

Enlaces en HTML
Los enlaces (<a>) -o más comúnmente conocidos por su término en inglés “links”- son
fundamentales para la navegación en la web. Los hipervínculos permiten a quienes
navegan por un sitio web moverse entre diferentes páginas y recursos. Veamos algunos
ejemplos de cómo funciona esta etiqueta:

● Enlaces a otras páginas o sitios web:

Ejemplo:

<a href="https://www.ejemplo.com">Visita nuestro sitio web</a>

● Enlaces a direcciones de correos electrónicos:

Ejemplo:

<a href="mailto:[email protected]">Enviar correo</a>

 ● Enlaces a archivos:

Ejemplo:

<a href="documento.pdf" download>Descargar documento</a>

¿Qué es HREF en HTML?

El atributo href (Hypertext Reference) se utiliza en la etiqueta <a> para definir el destino de
un enlace en HTML. Es el responsable de indicar la URL o la ruta a la que se dirigirá el
usuario al hacer clic en el enlace. El valor de href puede ser una URL completa (ruta
absoluta) o una ruta relativa a un archivo en el mismo servidor.

¿Para qué funciona HREF?

● Permite crear enlaces que redirigen a otras páginas web, archivos, secciones dentro
de la misma página, o incluso direcciones de correo electrónico.
● Es fundamental para la navegación en sitios web, ya que conecta diferentes
recursos.

Ejemplo de uso:

<a href="https://www.ejemplo.com">Visitar Ejemplo</a>

Este enlace lleva al usuario a "www.ejemplo.com".

Rutas absolutas y relativas
Definición de rutas en HTML
Las rutas son esenciales para enlazar correctamente archivos, imágenes, estilos, y scripts
en una página web. Hay dos tipos de rutas principales:

● Rutas absolutas:
○ Una ruta absoluta especifica la ubicación completa de un archivo desde la
raíz del servidor. Siempre comienza con "http://" o "https://" y permite dirigir a
sitios web externos al sitio web.

Ejemplo:

<a href="https://www.ejemplo.com/imagen.jpg">Ver imagen</a>

● Rutas relativas:
○ Una ruta relativa se basa en la ubicación del archivo HTML actual. Es más
flexible, ya que se adapta a cambios en la estructura de las carpetas.

Ejemplo:

<a href="imagenes/imagen.jpg">Ver imagen</a>

Organización de Archivos

● Mejores Prácticas:
○ Colocar las imágenes en una carpeta separada (imagenes/ o images/).
○ Guardar los estilos en una carpeta css/ y los scripts en una carpeta js/.
○ Utilizar rutas relativas para facilitar la movilidad del proyecto.
Elementos en Bloque y en Línea
Elementos en Bloque (block)

Los elementos en bloque siempre empiezan en una nueva línea y ocupan todo el ancho
disponible. Estos elementos suelen usarse para estructurar secciones completas de
contenido.

● Ejemplos Comunes:
○ <div> Un contenedor genérico para agrupar elementos.
○ <h1> - <h6>: Encabezados de diferentes niveles.
○ <p>: Define un párrafo.
○ <ul> y <ol>: Listas.

Elementos en Línea (inline)

Los elementos en línea no comienzan en una nueva línea y solo ocupan el espacio
necesario. Se utilizan para definir partes de un texto o elementos pequeños.

● Ejemplos Comunes:
○ <span>: Un contenedor genérico para agrupar texto.
○ <a>: Enlaces.
○ <strong>: Define texto en negrita.
○ <em>: Define texto en cursiva.
Multimedia con HTML
Inserción de Imágenes

Las imágenes se insertan en HTML utilizando la etiqueta <img>. Es fundamental siempre

proporcionar un texto alternativo con el atributo alt para mejorar la accesibilidad.

Ejemplo:

<img src="imagen.jpg" alt="Descripción de la imagen" width="600"

height="400">

Inserción de Audio
HTML5 permite insertar archivos de audio directamente en la página web utilizando la
etiqueta <audio>.

● Atributos Comunes:
○ controls: Muestra los controles de reproducción.
○ autoplay: Reproduce automáticamente el audio al cargar la página.
○ loop: Reproduce el audio en un bucle continuo.

Ejemplo:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta la reproducción de audio.
</audio>
Inserción de Video

Los videos también se pueden insertar en HTML5 utilizando la etiqueta <video>.

● Atributos Comunes:
○ controls: Muestra los controles de reproducción.
○ poster: Muestra una imagen antes de que se reproduzca el video.
○ autoplay: Reproduce automáticamente el video al cargar la página.

Ejemplo:

<video controls poster="preview.jpg" width="600" height="400">

<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la reproducción de video.
</video>

Uso de Iframes

La etiqueta <iframe> permite insertar otro documento HTML, como un mapa de Google o
un video de YouTube, dentro de la página.

Ejemplo:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560"

height="315" frameborder="0" allowfullscreen></iframe>
Accesibilidad en Multimedia
Atributos alt y Subtítulos en Video

Es crucial para la accesibilidad que todas las imágenes incluyan un atributo alt que
describa su contenido. Para videos, se deben añadir subtítulos utilizando la etiqueta
<track>.

Ejemplo para Imágenes:

<img src="imagen.jpg" alt="Descripción detallada de la imagen">

Ejemplo para Subtítulos en Video:

<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitulos.vtt" kind="subtitles" srclang="es"
label="Español">
</video>
Tablas en HTML
Estructura Básica de una Tabla

Las tablas en HTML se construyen utilizando la etiqueta <table>. Dentro de esta, se

definen las filas con <tr> y las celdas con <td> para datos normales o <th> para
encabezados.

Ejemplo:

<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</table>
Combinar Celdas en Tablas
Se pueden combinar celdas en tablas utilizando los atributos colspan y rowspan.

Ejemplo:

<table>
<tr>
<th rowspan="2">Nombre</th>
<th colspan="2">Contacto</th>
</tr>
<tr>
<td>Teléfono</td>
<td>Email</td>
</tr>
<tr>
<td>Ana</td>
<td>123456789</td>
<td>[email protected]</td>
</tr>
</table>

Buenas Prácticas en el Uso de Tablas

● Mantener las tablas accesibles:
○ Usar scope en <th> para mejorar la accesibilidad.
○ Incluir un resumen o descripción para tablas complejas utilizando el atributo
summary.
● Estructurar las tablas correctamente:
○ Evitar tablas anidadas, ya que pueden complicar la accesibilidad y el
mantenimiento del código.
Ejercicio Práctico #1:
Lista de Navegación.
1. Crear una barra de navegación usando la etiqueta <nav>.
2. El <nav> debe contener una lista desordenada con enlaces
Ejemplo: "Inicio", "Productos", "Contacto".
Estos enlaces deberán simular una navegación interna en la página.

Ejercicio 2: Inserción de Imagen y Video

●
Insertar una imagen en formato .png en el <header> para representar el logo del
proyecto
● Insertar una imagen y un iframe o video representativo en una <section> dentro del
<main>.
Asegurarse de agregar atributos alt para la imagen y subtítulos para el video.

Pasos detallados:

1. Descargar la Imagen:
○ Busca una imagen adecuada para tu logo y guárdala en la misma
carpeta que tu archivo HTML.
○ Renombra la imagen como logo.png.
2. Descargar el Video y Subtítulos:
○ Encuentra un video representativo que quieras incluir en tu
proyecto y descárgalo.
○ Guarda el video en la misma carpeta y nómbralo video.mp4.
○ Si el video no tiene subtítulos, puedes crear un archivo de
subtítulos (.vtt) o utilizar uno disponible, y nombrarlo
subtitulos.vtt.
3. Incorporar la Imagen y Video en el HTML:
○ Inserta la imagen en el <header> utilizando la etiqueta <img>.
○ Inserta el video en el <main> utilizando la etiqueta <video> con
el atributo controls, y asegúrate de incluir los subtítulos con la
etiqueta <track>.