Clase 3 - Enlaces y Etiquetas Multimedia

Clase 3: Enlaces y etiquetas multimedias
El hipervínculo Anchor
Hasta el momento trabajamos sobre documentos HTML

independientes, conociendo diversos tags y cómo es su aplicación en
el desarrollo web.
Es hora de conectar a estos documentos entre sí, aprovechando el

sistema de hipervínculos.
Un hipervínculo permite enlazar documentos HTML entre sí, pudiendo dirigirnos desde uno de ellos
(index.html), hacia el otro (empresa.html), a través de un simple “clic” del mouse o “tap” en pantallas táctiles. Es
la esencia por la cual nació el lenguaje HTML en 1989.
Y para realizar esta tarea, disponemos del elemento HTML Anchor <a>, el cual es configurable y permite
establecer diferentes tipos de hipervínculos, según la necesidad del caso.
index.html empresa.html
<a href=”empresa.html”>Empresa</a>
atributo href (hyperlink reference)
documento HTML a vincular

Texto que describa el hipervínculo
Definimos el tag <a> en nuestro

documento HTML, y su tag de cierre.
Agregamos el atributo href, y le

asignamos como valor, el nombre del
documento HTML con el cual
establecemos el enlace.
Entre el tag <a> y </a>, definimos un

nombre para este hipervínculo, y listo;
ya tenemos enlazado un documento
HTML con otro.
Existen diferentes tipos de hipervínculos que podemos establecer a través de este tag:
Tipo de hipervínculo Descripción
internos del podemos definir hipervínculos que se realizan dentro del mismo documento
documento HTML. Aquí interfieren dos tipos de atributos.
a otro documento Como vimos en el ejemplo anterior, podemos establecer un hipervínculo

interno entre dos documentos HTML alojados en el mismo servidor.
podemos establecer un hipervínculo hacia otro sitio web, definiendo su URL

a una URL
o algún documento HTML perteneciente a dicho sitio.
podemos establecer un hipervínculo hacia documentos externos: PDF, el

a otros documentos
archivo de instalación de un software, un documento ofimático, etcétera.
Permite definir si el destino del hipervínculo a visitar se realizará en la

destino
misma pestaña del navegador web o en una nueva pestaña.
Rutas
Qué es una ruta
Es una dirección o camino (también conocido con el término inglés path), que le
va a permitir al navegador encontrar un recurso. Ese recurso puede ser otra
página web, una imagen, un video o cualquier otro tipo de archivo.
En el caso de los enlaces, la ruta indica la dirección a la que tiene que llevarnos
el navegador cuando pulsamos sobre él.
Ruta absoluta Ruta relativa
https://www.google.com ../imagenes/perfil.jpg
Ejemplo de ruta absoluta
Si tenemos una imagen que está alojada en una URL, podemos acceder a ella
sin importar el lugar en el que esté navegando en ese momento. Su ruta, es
decir, el acceso hacia ese recurso, es siempre el mismo.
https://unsitioweb.com/imagenes/imagen1.jpg
Ejemplos de ruta relativa
Para acceder a una imagen que se encuentra en la misma carpeta que el
archivo original, la ruta simplemente debe hacer referencia al nombre del otro
archivo ya que ambos archivos comparten el mismo lugar.
miProyecto
ruta desde unArchivo.js hacia unaImagen.jpg:
unArchivo.js
unaImagen.jpg
unaImagen.jpg
Para acceder a una imagen que se encuentra en una carpeta inferior a la del
archivo original deberíamos descender un nivel. Eso lo hacemos con la barra /.
miProyecto
unArchivo.js
imagenes/unaImagen.jpg
imagenes
unaImagen.jpg
Si hubiese más carpetas inferiores, solo se debería ir accediendo una a una
utilizando las barras /, hasta llegar a la imagen.
miProyecto
unArchivo.js
imagenes
imagenes/iconos/unaImagen.jpg
iconos
unaImagen.jpg
Para acceder a una imagen que se encuentra en una carpeta a la misma
altura a la del archivo original, deberemos salir de la actual y luego entrar en la
correspondiente. Para ir un nivel hacia atrás, usamos dos puntos seguidos .. .
js
unArchivo.js
../imagenes/unaImagen.jpg
imagenes
unaImagen.jpg
Otros hipervínculos
Hipervínculos externos
Los hipervínculos externos se establecen definiendo la URL completa hacia donde

queremos redirigir al usuario cuando haga clic en dicho enlace. El gráfico muestra cómo
se establece un hipervínculo hacia el portal web de la Universidad.
Y, en este ejemplo, no redireccionamos al usuario a una página

específica, sino a la página principal del portal. El servidor web
resolverá cuál documento HTML mostrar.
Hipervínculos internos
Debemos definir dentro del mismo documento, En el hipervínculo Anchor, definimos en su

en algún elemento HTML de este, un atributo atributo href el nombre creado en el atributo ID
id. En dicho atributo, hay que especificar un del elemento HTML de destino, anteponiendo
nombre que permita identificarlo unívocamente el caracter (#).
dentro del documento HTML. El navegador web se desplazará hasta esa
posición del documento ante un clic en dicho
hipervínculo.
Sirven para hacer referencia a un fragmento o elemento dentro de una página; como
puede ser una sección o un titular y pueden combinarse con las anteriores. Inician
con el caracter # y hacen referencia a la propiedad id .
html <a href="#biografia">Biografía</a>
html <a href="https://www.sitio.com/#contacto">Contacto</a>
html <a href="nosotros.html#nuestro-equipo">Nuestro equipo</a>

Aquí contamos con un ejemplo del

uso de hipervínculos internos.
Este tipo de hipervínculos son muy

comunes en documentos HTML con
mucho contenido de texto e
imágenes.
Suelen contar con un menú de

navegación, o índice superior que
organiza su contenido y facilita la
navegación al usuario.
Hipervínculo a otros documentos
También podemos definir un hipervínculo hacia un
documento de otro tipo (PDF, Aplicación, archivo de
imagen o de video, etcétera), interno o externo.
En este caso, el navegador web resolverá si puede

visualizarlo o no. En caso de que no pueda visualizarlo,
forzará la descarga del documento en el dispositivo o
computadora del usuario.
Hipervínculo de descarga
En cualquiera de estos casos, si no queremos que el navegador web intente visualizar el documento o
aplicación en el web browser, podemos sumar el atributo booleano download, para que se fuerce la
descarga de estos documentos o archivos en general.
Destino del hipervínculo
Hasta ahora, todos los hipervínculos
Destino del Descripción
que generamos, abren el archivo o hipervínculo
documento de destino en la misma
carga la URL en el mismo contexto de
_self
pestaña del navegador web. navegación. (por defecto)
carga la URL en un nuevo contexto de

_blank
navegación. (una nueva pestaña)
Pero existe un atributo adicional
para el tag Anchor, que permite carga la URL en el contexto de navegación padre.
_parent
Si un contexto padre no existe, recurre a _self.
definir un destino diferente para el
carga la URL en el contexto de navegación más
hipervínculo en cuestión: el atributo _top
alto. Si este contexto no existe, recurre a _self.
target.
_self y _blank son los dos más
utilizados hoy. Este último, abría
antiguamente el hipervínculo de
destino en una nueva ventana del
navegador web, porque no existían las
pestañas.
Hoy se comporta abriendo el

hipervínculo en una nueva pestaña, a
menos que el usuario cambie esta
configuración desde las preferencias de
su navegador web.
Hipervínculos convencionales
Hipervínculos convencionales
La mayoría de los ejemplos abordados hasta aquí, El hipervínculo hacia una URL externa, se
hacen referencia a hipervínculos convencionales, referencia usando el protocolo HTTP:
como son los casos de:
● documento HTML en el mismo host En cambio, un hipervínculo hacia una dirección de
● hipervínculos internos correo electrónico, utiliza el protocolo Mailto:
Y mayormente, en el uso de hipervínculos a través

de sitios y aplicaciones web, siempre se utilizaron
dos posibles destinos para estos:
● una URL
● una dirección de correo electrónico
Hipervínculos convencionales 💡
En los inicios de la internet comercial, existían otros De igual forma, el protocolo mailto: tiene hoy un
protocolos como ser FTP: - GOPHER: - NEWS:, pero uso bastante limitado, por la proliferación de otros
desaparecieron con el tiempo por la popularidad del medios de comunicación más directos, como ser
protocolo http: y en algunos casos, como el del WhatsApp 💬o BOTs 🤖de atención al público.
protocolo FTP, por cuestiones de seguridad.
Además, el uso del correo electrónico se concentra
Los navegadores web discontinuaron el soporte hoy en un servicio de webmail y no en una
nativo que le daban originalmente al protocolo FTP. aplicación cliente de correo como Outlook o
Thunderbird.
¡A practicar!
Nuestro trabajo será crear tres párrafos de los siguientes sitios web,
que se vea de la siguiente manera:
Facebook
Instagram
Olé
Pero, ojo, el ejercicio no termina ahí. Queremos que cada palabra sea
un hipervínculo hacia la página correspondiente de cada sitio.
URL Schemes
URL Schemes
Además de los hipervínculos tradicionales que aprendimos hasta el

momento, existen una serie de hipervínculos denominados URI
Schemes y URL Schemes.
Los mismos permiten definir hipervínculos desde y hacia otro tipo de

aplicaciones de software, más allá de los hipervínculos convencionales
del navegador web.
URL Schemes
El navegador web cuenta con URL Schemes propias, para acceder a

diferentes configuraciones o módulos del mismo. Por ejemplo, acceder
a la configuración de chrome:
O para verificar la versión del mismo:

URL Schemes
También existen otros URL Schemes, que nos
permiten desde un hipervínculo generado en
un documento HTML, abrir aplicaciones
nativas instaladas en el sistema operativo, o
ejecutar acciones avanzadas sobre otros sitios
o aplicaciones web.
Un ejemplo común, que usamos a menudo

Todo esto, utilizando la estructura del tag estos últimos años, es abrir la aplicación de
Anchor, junto al hipervínculo correspondiente. Zoom para conectarnos a una clase, a partir de
un hipervínculo web.
URL Schemes
Y si bien, podemos sacar mucho provecho de los URL

Schemes desde una aplicación web ejecutándose en
una computadora, el mayor provecho de estos
modernos hipervínculos se dan cuando utilizamos una
web desde un dispositivo móvil.
Puede parecer sin sentido su implementación pero

recordemos que hoy más del 60% de los sitios web se
visitan desde un dispositivo móvil.
URL Schemes en acción
Llamar por teléfono
El hipervínculo tel: permite definir

un número de teléfono en el mismo
para que, al pulsar dicho link, se
inicie una llamada telefónica.
En computadoras o dispositivos móviles, el navegador web se ocupará de

informarle al S.O. el intento de llamar por teléfono a alguien, y el S.O. resolverá
la forma de realizar dicho llamado.
Enviar un mensaje de texto
Una vía de comunicación poco utilizada, pero aún vigente, es la

posibilidad de enviar un SMS, utilizando el URL scheme homónimo.
Definimos el nro. de teléfono de destino, y hasta podemos concatenar

el texto predeterminado del mensaje a enviar.
Comunicarnos vía Skype
Otro sistema de comunicación que perdió popularidad pero que aún conserva su URL scheme,
es Skype. En este, disponemos de varias formas de comunicación, como ser:
Llamado convencional (audio)
Videollamado (activa el video del usuario al llamar)
Llamado/Videollamado grupal
Mensajes vía WhatsApp
Una opción muy vigente y utilizada en los tiempos actuales: mensaje vía
WhatsApp. Funciona tanto en computadoras de escritorio (vía WhatsApp
Web), como en dispositivos móviles, abriendo la app de WhatsApp, lista
para enviar un mensaje.
Mensajes vía Twitter
Twitter cuenta con varias interacciones vía URL

Schemes, como ser:
visitar una cuenta de Twitter
Escribir un mensaje
Escribir un mensaje arrobando a una cuenta
Consultar tuits sobre un hashtag específico
URL Schemes y los Mapas
La generación de hipervínculos personalizados que refieren a
direcciones de un mapa, puede tener algunas mínimas
diferencias específicamente en las plataformas móviles.
Esto suele darse cuando queremos abrir una dirección específica

mediante Latitud y Longitud.
Los mapas de Google y de Apple cuentan con sus propias

particularidades, y por ello tal vez debamos recurrir a una URL
oficial en determinados casos, en lugar de URL Scheme.
Formas de referenciar una URL en los
mapas de Apple o Google Maps.
En una computadora de escritorio, se

abrirá la URL de cada mapa con la
dirección especificada mediante Latitud
y Longitud.
En dispositivos móviles, abrirá la

aplicación de mapas nativa.
En los dispositivos móviles funcionan hoy, tanto las URL convencionales,
como también el hipervínculo maps:. La otra opción, geo:, fue perdiendo
popularidad y mantenimiento con el tiempo.
Te invitamos a investigar más el ecosistema robusto de las URL Schemes

en mapas, porque las opciones a crear son varias y pueden realmente
destacar el desarrollo de un sitio o aplicación web.
Te invitamos también a averiguar la dirección IP

de tu computadora, para que puedas aprovechar
tu dispositivo móvil y acceder a través de la
misma IP:PUERTO, al proyecto web que estés
ejecutando con LIVE SERVER.
De esta forma podrás hacer pruebas de las URL

Schemes desde tu teléfono móvil, iniciando
aplicaciones nativas instaladas en éste.
Etiquetas Multimedia
Las etiquetas multimedia son una parte esencial de

cualquier archivo multimedia en línea, como imágenes,
videos y audio. Estas etiquetas proporcionan información
adicional sobre el contenido multimedia y ayudan a los
usuarios a encontrar y comprender mejor el contenido.
Etiquetas Multimedia
Las etiquetas multimedia son importantes por varias razones:
1. Ayudan en la organización: Las etiquetas multimedia ayudan a organizar el contenido multimedia y

facilitan la búsqueda de los usuarios. Los motores de búsqueda utilizan etiquetas para indexar contenido y
facilitar su acceso a los usuarios.
2. Proporcionan información adicional: Las etiquetas multimedia proporcionan información adicional sobre
el contenido multimedia, como el título, la descripción, las palabras clave, la fecha y la ubicación. Esto ayuda
a los usuarios a entender mejor el contenido y su contexto.
3. Mejoran la accesibilidad: Las etiquetas multimedia también mejoran la accesibilidad para las personas con
discapacidades visuales o auditivas. Las etiquetas proporcionan descripciones de texto alternativo y
subtítulos, lo que ayuda a estas personas a acceder al contenido multimedia.
4. Aumentan la visibilidad: Las etiquetas multimedia también ayudan a aumentar la visibilidad del contenido
en línea. Los motores de búsqueda utilizan etiquetas para indexar el contenido, lo que aumenta las
posibilidades de que los usuarios encuentren y accedan al contenido.
5. Permiten la personalización: Las etiquetas multimedia también permiten la personalización del contenido
en línea. Los usuarios pueden buscar y filtrar contenido en función de sus intereses y preferencias utilizando
etiquetas específicas.
Hipervínculos en otros elementos HTML
Hipervínculos en otros elementos HTML 🔗
El elemento Anchor es un elemento contenedor.
Como su función principal es establecer un

hipervínculo o enlace hacia otro documento HTML o
recurso, está preparado para poder contener a otros
elementos HTML y que éstos sean el punto de
referencia para navegar hacia otro recurso web.
Para ello, reemplazamos el texto descriptivo del

hipervínculo con, por ejemplo, un tag HTML <img>.
Hipervínculos en otros elementos HTML
Si deseamos sumar el atributo target a la ecuación del

hipervínculo a través de la imagen, podemos hacerlo sin
ningún problema.
El mismo deberá ser definido siempre dentro del tag Anchor, y

no dentro del tag <img>.
Imágenes
Fuente de una imagen
Dentro de nuestro documento HTML podemos agregar imágenes a través de la
etiqueta <img>. Esta etiqueta nos permite invocar las imágenes, es decir, hacer
referencia al lugar donde están alojadas para que aparezcan en el navegador.
html <img src="img/fotoPerfil.jpg">
atributo → src Ruta

Se utiliza para indicar el destino en Aquí podremos especificar una ruta absoluta
donde está alojada nuestra imagen. (como en el ejemplo) o una relativa.
Texto alternativo
Nos ayuda a darle una descripción a la imagen y también nos permite:
● Ayudar a que los buscadores entiendan la imagen.
● Mostrar un texto si la imagen no carga.
● Darle contexto a las personas con discapacidades visuales.
html <img src="img/fotoPerfil.jpg" alt="Tu imagen de perfil">
atributo → alt Texto

Este atributo nos permite Debe contener una descripción corta
especificar el texto alternativo. de la imagen que deberíamos estar
viendo. Soporta 125 caracteres.
Cuando la imagen no carga...
Como dijimos, en caso de que por alguna razón la imagen no cargue, el
navegador podrá mostrar el texto alternativo.
Según qué navegador estemos usando, puede verse distinto.
Tu imagen de perfil
Ancho de la imagen
Nos permite indicar el ancho de nuestra imagen. No es obligatorio.
Los valores pueden ser tanto en píxeles (solo escribimos el número) como en
porcentajes (con el símbolo % al final).
html <img width="320" src="img/fotoPerfil.jpg">
atributo → width
Este atributo nos permite
especificar el ancho de la imagen.
Alto de la imagen
Nos permite indicar el alto de nuestra imagen. No es obligatorio.
Los valores pueden ser tanto en píxeles (solo escribimos el número) como en
porcentajes (con el símbolo % al final).
html <img height="560" src="img/fotoPerfil.jpg">
atributo → height
Este atributo nos permite
especificar el alto de la imagen.
Imágenes
El tag HTML <img>, es el elemento que

permite insertar imágenes en un
documento HTML.
A diferencia de los otros elementos HTML

vistos hasta el momento, <img> no posee
un tag de cierre.
Imágenes
Para agregar la imagen a visualizar, debemos recurrir a un tag específico, denominado src (source).
Dentro de este atributo se indica la imagen a mostrar, pudiendo especificar una ruta relativa (subcarpeta
dentro del proyecto HTML), o una ruta absoluta (URL completa de la imagen a visualizar).
Ruta absoluta Ruta relativa

Estructura de un documento HTML
Con el archivo de imagen definido en el atributo src, ya podemos

visualizar la misma en el documento HTML.
El tag <img> es otro elemento definido como inline. Solo ocupa el
ancho definido, en este caso, por la imagen que contiene.
Podemos verificar esto utilizando el botón Inspeccionar elemento

de las Herramientas para Desarrollador.
Estructura de un documento HTML
Algunos aspectos técnicos, para recordar:
● Las imágenes en HTML responden a su propio tamaño. Si el ancho de esta es

menor al de la página, quedará un espacio del lado izquierdo
● Su ancho busca rellenar siempre el espacio del documento HTML, desde la

izquierda hacia la derecha, y su alto es automáticamente proporcional al ancho
● Viewport no restringe el ancho de la imagen al de la pantalla. Debemos limitarlo

nosotros utilizando una clase CSS
● Si agregas dos imágenes consecutivas, y estas son pequeñas, su propiedad inline

hará que se visualicen de forma consecutiva
Tipos de formatos multimedia para web
Las imágenes en la web soportan actualmente una
cantidad importante de formatos, estándares y otros más
específicos (o propietarios).
Formatos estándar Formatos específicos
JPG WebP
BMP JPEG 2000
GIF SVG
GIF animado AVIF
PNG
TIFF otros, propietarios o privados…
ICO
Tipos de formatos multimedia para web
Formato Compresión Transparencia Calidad Tamaño de archivo Soporte
JPG Con pérdida No Buena Pequeño Amplio
WebP Con pérdida o sin pérdida Sí Buena Variable Amplio
BMP Sin pérdida No Excelente Grande Limitado
JPEG 2000 Con pérdida o sin pérdida Sí Excelente Variable Limitado
GIF Sin pérdida Sí Limitada Pequeño Animaciones
SVG Sin pérdida Sí Variable Pequeño Gráficos Vectoriales
GIF animado Sin pérdida Sí Limitada Variable Animaciones
AVIF Con pérdida o sin pérdida Sí Excelente Variable Limitado
PNG Sin pérdida Sí Buena Variable Amplio
TIFF Sin pérdida o con pérdida Sí Variable Variable Amplio
ICO Sin pérdida Sí Buena Pequeño Iconos y favicon

Optimizacion de Imagenes
Las imágenes optimizadas ayudan a la velocidad y rendimiento de nuestro sitio. Al mismo tiempo que ayudan
al posicionamiento de nuestro sitio SEO.
Algunas recomendaciones para imágenes son:
Elegir el formato correcto, ciertamente las imágenes svg como los gif son tipos de imágenes altamente
recomendadas aunque limitadas. Las imágenes como JPG, suelen ser pesadas y las PNG, suelen ser aún más.
Aunque nos benefician ya que nos permite sumar imágenes más trabajadas a nuestro proyecto.
Comprimir los archivos para ellos tenemos varias herramientas en línea.
Utilizar las dimensiones y los estilos adecuados, se recomienda que ya sea filtros o tamaños sean trabajados
con antelación. y se usan herramientas como CSS en última instancia.
Considerar mostrar imágenes a través de CDN. Para que ocupen menos tamaño, se recomienda subir las
imágenes a bancos de imágenes y llamarlos desde ese lugar.
Optimizacion de Imagenes
Algunas herramientas que pueden ayudarnos a esto:
https://www.iloveimg.com/es https://compressor.io/
https://www.imagerecycle.com/es/ https://squoosh.app/
https://kraken.io/ https://www.img2go.com/compress-image
https://imagecompressor.com/es/ https://www.jpeg.io/
https://tinypng.com/ https://www.websiteplanet.com/webtools
/imagecompressor/
https://optimole.com/
https://www.imgonline.com.ua/eng/compr
ess-image.php
¡A practicar!
Crea tu archivo index.html en blanco, ponle de título “Práctica con
imágenes enlazadas”.
Queremos que, al hacer clic en una imagen, la misma nos lleve hacia
google.com. Es decir que, al pasar el mouse por encima de la imagen,
deberíamos ver la "manito" indicándonos que ese elemento es un
hipervínculo. La URL de la imagen que debemos usar es la siguiente:
https://bit.ly/2WDMapV
Tag <figure>
tag <figure>
Si bien se relaciona con el flujo principal, su posición es
independiente de éste. Se trata de una imagen, una
ilustración, un diagrama, un fragmento de código, o un
esquema al que se hace referencia en el texto principal,
pero que se puede mover a otra página o a un apéndice
sin que afecte al flujo principal.
Dentro de ella posee el tag <img> y el tag <figcaption>

que sirve como pie de imagen de la misma.
Pruébalo en W3S
Tag <Audio>
El tag <audio>
El tag <audio> es la herramienta con la cual podemos integrar archivos de audio en un
sitio web. Su estructura es sencilla, y se apoya en una serie de atributos que nos
ayudan a ajustar las propiedades de reproducción.
El tag <audio>
Los atributos más importantes que podemos incluir en este tag, son:
Atributo Descripción
src Atributo donde especificamos la ruta, local o remota, del archivo de audio que debe reproducir.
controls(*) Atributo booleano para visualizar los controles predeterminados de esta etiqueta.
preload Atributo booleano que define si se genera un buffer, antes de la reproducción del archivo.
autoplay Atributo booleano que define si el archivo de audio se reproduce automáticamente o no.
muted Atributo booleano que define si el reproductor de audio se inicializa en modo mute.
loop Atributo booleano que define si el audio se debe reproducir o no en modo continuo.
volume Atributo para definir el volumen. Sus valores van de 0 a 1.0, soportando decimales como escala de volumen del 0 a 100.
type Atributo que permite definir el MIME Type del archivo: “audio/x-wav”, “audio/mpeg”, “audio/mp4”, “application/ogg”
(*) si no controlamos la lógica del elemento <audio> desde JavaScript, este atributo debe definirse de manera
predeterminada.
El tag <audio>
Su incorporación en un documento
HTML es fácil de realizar.
Debemos agregar su atributo src y

el path del archivo a reproducir,
más el atributo controls, como
elementos mínimos.
El tag <audio>
Visualización del reproductor con un archivo de audio

correctamente configurado.
Si debemos agregar varios atributos, lo hacemos

uno contiguo al otro. Y, como siempre, los atributos Visualización del reproductor sin un archivo de audio
configurado, o con un archivo corrompido.
no requieren un orden específico.
Pruébalo en W3Schools
El tag <audio>
Play/Pause integrado
(*) Tiempo transcurrido/total
Progreso interactivo
control de volumen/mute
Velocidad de reproducción/Descarga
(*) Cuando realizamos streaming de señal, el tiempo a visualizar corresponde al transcurrido desde que se pulsó Play.
El tag <video>
El tag Video
El tag <video> nos permite sumar archivos de video a un sitio web. Su
estructura es igual de sencilla que el tag <audio>, y posee casi los mismos
atributos que este último los cuales nos ayudan a ajustar sus propiedades de
reproducción.
El tag Video
👈 Su visualización predeterminada,
cuando lo definimos en un documento
HTML, sin un video cargado.
Su visualización en el documento HTML

cuando ya tiene un video configurado. 👉
Pruébalo en W3Schools
El tag Video
Dentro de las opciones de video, podemos modificar su

velocidad de reproducción, descargar el archivo de video, y
hasta ver el mismo en modo PiP.
A su vez, el tag video genera una vista previa del archivo

configurado para rellenar el espacio del elemento HTML,
aunque también podemos configurar una portada dedicada.
El tag Video
poster es el nombre del atributo que permite definir una imagen en los formatos
aceptados por HTML5, para que la misma se visualice mientras el video no es
reproducido.
El tag <iframe>
El tag <iframe>
El tag <iframe> también se comporta como un tag
contenedor, aunque en este caso, su estructura
permite incrustar otros elementos los cuales pueden
provenir del mismo sitio donde nos encontramos, o
de sitios web externos.
Por ejemplo, podemos insertar un documento

HTML diferente, una imagen, video, o cualquier otro
tipo de contenido que sea soportado por el
naveador web, configurando algunas propiedades
mínimas de este elemento.
El tag <iframe>
Sus atributos más utilizados, son: En el atributo src podemos definir

width la ruta del documento o recurso
height que deseamos visualizar en este
frameborder tag.
src
El tag <iframe>
Dentro de los recursos que acepta

el atributo src, también podemos
definir sitios web, aunque
algunos específicos configuran el
servidor web para que no puedan
cargarse recursos en un tag
<iframe>.
El tag <iframe>
<iframe> es utilizado para compartir recursos de un sitio web en otros

lugares. Youtube permite insertar sus videos en otras web, usando código
HTML generado dentro de un tag <iframe> dedicado. La próxima clase lo
analizamos técnicamente y lo implementamos con prácticas.
El tag <iframe>
No todos los sitios web permiten visualizar su
contenido en <iframe> de terceras partes.
Cuando encontramos un rechazo, iframe muestra un
mensaje como la imagen inferior.
Y si necesitamos bloquear en nuestro sitio web el

consumo de contenido remoto, podemos hacerlo
desde el archivo .HTACCESS, desde JavaScript, o
desde otro lenguaje de programación como ser PHP.
Visita este link para ver ejemplos.
¡A practicar!
Continuando el ejercicio de la semana pasada, esta semana
avanzaremos un poco más con el siguiente figma de referencia, la
idea será reconocer cuáles podrían ser los diferentes elementos o
etiquetas que aprendimos en esta clase y que corresponden a ese
resultado visual.
Una vez hecho esto, su tarea será trasladar aquello que idearon pero
ahora utilizando etiquetas HTML y sumarlo a lo aprendido en la clase
anterior.
Muchas gracias.

Clase 3 - Enlaces y Etiquetas Multimedia

Cargado por

Copyright:

Formatos disponibles

Clase 3 - Enlaces y Etiquetas Multimedia

Cargado por

Información del documento

Título 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

Clase 3 - Enlaces y Etiquetas Multimedia

Cargado por

Copyright:

Formatos disponibles

Clase 3: Enlaces y etiquetas multimedias

Hasta el momento trabajamos sobre documentos HTML

Es hora de conectar a estos documentos entre sí, aprovechando el

atributo href (hyperlink reference)

documento HTML a vincular

Definimos el tag <a> en nuestro

Agregamos el atributo href, y le

Entre el tag <a> y </a>, definimos un

Tipo de hipervínculo Descripción

a otro documento Como vimos en el ejemplo anterior, podemos establecer un hipervínculo

podemos establecer un hipervínculo hacia otro sitio web, definiendo su URL

podemos establecer un hipervínculo hacia documentos externos: PDF, el

Permite definir si el destino del hipervínculo a visitar se realizará en la

Ruta absoluta Ruta relativa

Los hipervínculos externos se establecen definiendo la URL completa hacia donde

Y, en este ejemplo, no redireccionamos al usuario a una página

Debemos definir dentro del mismo documento, En el hipervínculo Anchor, definimos en su

html <a href="#biografia">Biografía</a>

html <a href="https://www.sitio.com/#contacto">Contacto</a>

html <a href="nosotros.html#nuestro-equipo">Nuestro equipo</a>

Aquí contamos con un ejemplo del

Este tipo de hipervínculos son muy

Suelen contar con un menú de

En este caso, el navegador web resolverá si puede

carga la URL en un nuevo contexto de

Hoy se comporta abriendo el

Y mayormente, en el uso de hipervínculos a través

Además de los hipervínculos tradicionales que aprendimos hasta el

Los mismos permiten definir hipervínculos desde y hacia otro tipo de

El navegador web cuenta con URL Schemes propias, para acceder a

O para verificar la versión del mismo:

Un ejemplo común, que usamos a menudo

Y si bien, podemos sacar mucho provecho de los URL

Puede parecer sin sentido su implementación pero

El hipervínculo tel: permite definir

En computadoras o dispositivos móviles, el navegador web se ocupará de

Una vía de comunicación poco utilizada, pero aún vigente, es la

Definimos el nro. de teléfono de destino, y hasta podemos concatenar

Twitter cuenta con varias interacciones vía URL

Esto suele darse cuando queremos abrir una dirección específica

Los mapas de Google y de Apple cuentan con sus propias

En una computadora de escritorio, se

En dispositivos móviles, abrirá la

Te invitamos a investigar más el ecosistema robusto de las URL Schemes

Te invitamos también a averiguar la dirección IP

De esta forma podrás hacer pruebas de las URL

Las etiquetas multimedia son una parte esencial de

1. Ayudan en la organización: Las etiquetas multimedia ayudan a organizar el contenido multimedia y

El elemento Anchor es un elemento contenedor.

Como su función principal es establecer un

Para ello, reemplazamos el texto descriptivo del

Si deseamos sumar el atributo target a la ecuación del

El mismo deberá ser definido siempre dentro del tag Anchor, y

html <img src="img/fotoPerfil.jpg">

atributo → src Ruta

html <img src="img/fotoPerfil.jpg" alt="Tu imagen de perfil">

atributo → alt Texto

html <img width="320" src="img/fotoPerfil.jpg">

html <img height="560" src="img/fotoPerfil.jpg">