032.3 Lección 1
Certificación: |
Conceptos básicos de desarrollo web |
---|---|
Versión: |
1.0 |
Tema: |
032 Marcado de documentos HTML |
Objetivo: |
032.3 Referencias HTML y recursos incrustados |
Lección: |
1 de 1 |
Introducción
Cualquier página web moderna rara vez está formada solo por texto. Comprende muchos otros tipos de contenidos, como imágenes, audio, video e incluso otros documentos HTML. Junto con el contenido externo, los documentos HTML pueden contener enlaces a otros documentos, lo que hace que la experiencia de navegar por Internet mucho más simple.
Contenido incrustado
El intercambio de archivos es posible a través de Internet sin páginas web escritas en HTML, entonces, ¿por qué HTML es el formato elegido para documentos web y no PDF o cualquier otro formato de procesamiento de texto? Una razón importante es que HTML mantiene sus recursos multimedia en archivos separados. En un entorno como Internet, donde la información a menudo es redundante y se distribuye en diferentes ubicaciones, es importante evitar transferencias de datos innecesarias. La mayoría de las veces, las nuevas versiones de una página web extraen las mismas imágenes y otros archivos de soporte que las versiones anteriores, por lo que el navegador web puede utilizar los archivos recuperados anteriormente en lugar de copiar todo de nuevo. Además, mantener los archivos separados facilita la personalización del contenido multimedia de acuerdo con las características del cliente, como su ubicación, tamaño de pantalla y velocidad de conexión.
Imágenes
El tipo más común de contenido incrustado son las imágenes que acompañan al texto. Las imágenes se guardan por separado y se hace referencia a ellas dentro del archivo HTML con la etiqueta <img>
:
<img src="logo.png">
La etiqueta <img>
no requiere una etiqueta de cierre. La propiedad src
indica la ubicación de origen del archivo de imagen. En este ejemplo, el archivo de imagen logo.png
debe estar ubicado en el mismo directorio que el archivo HTML; de lo contrario, el navegador no podrá mostrarlo. La propiedad de ubicación de origen acepta rutas relativas, por lo que la notación de puntos se puede utilizar para indicar la ruta a la imagen:
<img src="../logo.png">
Los dos puntos indican que la imagen se encuentra dentro del directorio principal en relación con el directorio donde está el archivo HTML. Si el nombre de archivo ../logo.png
se usa dentro de un archivo HTML cuya URL es http://example.com/library/periodicals/index.html
, el navegador solicitará el archivo de imagen en la dirección http://example.com/library/logo.png
.
La notación de puntos también se aplica si el archivo HTML no es un archivo real en el sistema de archivos; el navegador HTML interpreta la URL como si fuera una ruta a un archivo, pero es el trabajo del servidor HTTP decidir si esa ruta se refiere a un archivo o al contenido generado dinámicamente. El dominio y la ruta adecuada se agregan automáticamente a todas las solicitudes al servidor, en caso de que el archivo HTML provenga de una solicitud HTTP. Del mismo modo, el navegador abrirá la imagen adecuada si el archivo HTML se abrió directamente desde el sistema de archivos local.
Las ubicaciones de origen que comienzan con una barra inclinada /
se tratan como rutas absolutas. Las rutas absolutas tienen información completa de las ubicaciones de la imagen, por lo que funcionan independientemente de la ubicación del documento HTML. Si el archivo de imagen se encuentra en otro servidor, que será el caso cuando se utilice una Content Delivery Network (Red de entrega de contenido) (CDN), también se debe incluir el nombre de dominio.
Note
|
Las redes de entrega de contenido están compuestas por servidores distribuidos geográficamente que almacenan contenido estático para otros sitios web. Ayudan a mejorar el rendimiento y la disponibilidad de los sitios de mayor acceso. |
Si la imagen no se puede cargar, el navegador HTML mostrará el texto proporcionado por el atributo alt
en lugar de la imagen. Por ejemplo:
<img src="logo.png" alt="The Company logo">
El atributo alt
también es importante para la accesibilidad. Los navegadores de solo texto y los lectores de pantalla lo utilizan como descripción de la imagen correspondiente.
Tipos de imágenes
Los navegadores web pueden mostrar todos los tipos de imágenes populares, como JPEG, PNG, GIF y SVG. Las dimensiones de las imágenes se detectan tan pronto como se cargan las imágenes, pero se pueden predefinir con los atributos width
y height
:
<img src="logo.png" alt="The Company logo" width="300" height="100">
La única razón para incluir atributos de dimensión en la etiqueta <img>
es evitar romper el diseño cuando la imagen tarda demasiado en cargarse o cuando no se puede cargar en absoluto. El uso de los atributos width
y height
para cambiar las dimensiones originales de la imagen puede generar resultados no deseados:
-
Las imágenes se distorsionarán cuando el tamaño original sea más pequeño que las nuevas dimensiones o cuando la nueva relación de proporción difiera del original.
-
Reducir el tamaño de las imágenes grandes utiliza un ancho de banda adicional que resultará en tiempos de carga más largos.
SVG es el único formato que no sufre estos efectos, porque toda su información gráfica se almacena en coordenadas numéricas muy adecuadas para escalar y sus dimensiones no afectan el tamaño del archivo (de ahí el nombre Scalable Vector Graphics ó Gráficos vectoriales escalables). Por ejemplo, solo la posición, las dimensiones laterales y la información de color son necesarias para dibujar un rectángulo en SVG. El valor particular de cada píxel se renderizará dinámicamente posteriormente. De hecho, las imágenes SVG son similares a los archivos HTML, en el sentido de que sus elementos gráficos también se definen mediante etiquetas en un archivo de texto. Los archivos SVG están pensados para representar dibujos de bordes definidos, como gráficos o diagramas.
Las imágenes que no se ajusten a estos criterios deben almacenarse como bitmaps (mapas de bits). A diferencia de los formatos de imagen basados en vectores, los mapas de bits almacenan información de color para cada píxel de la imagen de antemano. El almacenamiento del valor de color para cada píxel de la imagen genera una gran cantidad de datos, por lo que los mapas de bits generalmente se almacenan en formatos comprimidos, como JPEG, PNG o GIF.
Se recomienda el formato JPEG para fotografías, porque su algoritmo de compresión produce buenos resultados para sombras y fondos borrosos. Para imágenes en las que predominan los colores sólidos, el formato PNG es más apropiado. Por lo tanto, se debe elegir el formato PNG cuando sea necesario convertir una imagen vectorial en un mapa de bits.
El formato GIF ofrece la calidad de imagen más baja de todos los formatos de mapa de bits populares. Sin embargo, todavía se usa ampliamente debido a su soporte para animaciones. De hecho, muchos sitios web emplean archivos GIF para mostrar videos cortos, pero existen mejores formas de mostrar contenido de video.
Audio y video
Los contenidos de audio y video se pueden agregar a un documento HTML más o menos de la misma manera que las imágenes. Como era de esperar, la etiqueta para agregar audio es <audio>
y la etiqueta para agregar video es <video>
. Obviamente, los navegadores de solo texto no pueden reproducir contenido multimedia, por lo que las etiquetas <audio>
y <video>
emplean la etiqueta de cierre para contener el texto utilizado como respaldo para el elemento que no se pudo mostrar. Por ejemplo:
<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>
Si el navegador no admite la etiqueta <audio>
, en su lugar se mostrará la línea “Unable to play recording.mp3”. El uso de etiquetas de cierre </audio>
o </video>
permite que una página web incluya contenido alternativo más elaborado que la simple línea de texto permitida por el atributo alt
de la etiqueta <img>
.
El atributo src
para las etiquetas <audio>
y <video>
funciona de la misma manera que para la etiqueta <img>
, pero también acepta URL que apunta a una transmisión en vivo. El navegador se encarga de almacenar en búfer, decodificar y mostrar el contenido a medida que se recibe. El atributo controls
muestra los controles de reproducción. Sin él, el visitante no podrá pausar, rebobinar ni controlar la reproducción.
Contenido genérico
Un documento HTML se puede anidar en otro documento HTML, de manera similar a la inserción de una imagen en un documento HTML, pero usando la etiqueta <iframe>
:
<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>
Los navegadores de solo texto más simples no admiten la etiqueta <iframe>
y, en su lugar, mostrarán el texto adjunto. Al igual que con las etiquetas multimedia, el atributo src
establece la ubicación de origen del documento anidado. Los atributos width
y height
se pueden agregar para cambiar las dimensiones predeterminadas del elemento iframe
.
El atributo name
permite hacer referencia al iframe y cambiar el documento anidado. Sin este atributo, el documento anidado no se puede cambiar. Se puede usar un elemento anchor
para cargar un documento desde otra ubicación dentro de un iframe en lugar de la ventana actual del navegador.
Enlaces
El elemento de la página comúnmente denominado link (enlace web) también se conoce con el término técnico anchor, de ahí el uso de la etiqueta <a>
. El anchor conduce a otra ubicación, que puede ser cualquier dirección admitida por el navegador. La ubicación está indicada por el atributo href
(hyperlink reference):
<a href="contact.html">Contact Information</a>
La ubicación se puede escribir como una ruta relativa o absoluta, como con los contenidos incrustados discutidos anteriormente. Solo el contenido de texto adjunto (por ejemplo, Contact Information
) es visible para el visitante, generalmente como texto azul subrayado en el que se puede hacer clic de forma predeterminada, pero el elemento que se muestra sobre el enlace también puede ser cualquier otro contenido visible, como imágenes:
<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>
Se pueden agregar prefijos especiales a la ubicación para indicarle al navegador cómo abrirlo. Si el anchor apunta a una dirección de correo electrónico, por ejemplo, su atributo href
debe incluir el prefijo mailto:
:
<a href="mailto:info@lpi.org">Contact by email</a>
El prefijo tel:
indica un número de teléfono. Es particularmente útil para los visitantes que ven la página en dispositivos móviles:
<a href="tel:+123456789">Contact by phone</a>
Cuando se hace clic en el enlace, el navegador abre el contenido de la ubicación con la aplicación asociada.
El uso más común del anchor es cargar otros documentos web. De forma predeterminada, el navegador reemplazará el documento HTML actual con contenido en la nueva ubicación. Este comportamiento se puede modificar utilizando el atributo target
. El objetivo _blank
, por ejemplo, le dice al navegador que abra la ubicación dada en una nueva ventana o nueva pestaña del navegador, dependiendo de las preferencias del visitante:
<a href="contact.html" target="_blank">Contact Information</a>
El objetivo _self
es el predeterminado cuando no se proporciona el atributo target
. Hace que el documento referenciado reemplace al documento actual.
Otros tipos de objetivos están relacionados con el elemento <iframe>
. Para cargar un documento referenciado dentro de un elemento <iframe>
, el atributo target
debe apuntar al nombre del elemento iframe:
<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>
<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>
El elemento iframe funciona como una ventana de navegador distinta, por lo que cualquier enlace cargado desde el documento dentro del iframe reemplazará solo el contenido del iframe. Para cambiar ese comportamiento, los elementos de anclaje dentro del documento enmarcado también pueden usar el atributo target
. El destino _parent
, cuando se usa dentro de un documento enmarcado, hará que la ubicación referenciada reemplace el documento principal que contiene la etiqueta <iframe>
. Por ejemplo, el documento gallery.html
incrustado podría contener un anchor que se carga a sí mismo mientras reemplaza el documento principal:
<p><a href="gallery.html" target="_parent">Open as parent document</a></p>
Los documentos HTML admiten varios niveles de anidamiento con la etiqueta <iframe>
. El destino _top
, cuando se usa en un anchor dentro de un documento enmarcado, hará que la ubicación referenciada reemplace al documento principal en la ventana del navegador, independientemente de si es el padre inmediato del <iframe>
correspondiente o un antepasado adicional de vuelta en la cadena.
Ubicaciones dentro de los documentos
La dirección de un documento HTML puede contener opcionalmente un fragmento que se puede utilizar para identificar un recurso dentro del documento. Este fragmento, también conocido como URL anchor, es una cadena que sigue un signo de almohadilla #
al final de la URL. Por ejemplo, la palabra History
es el anchor en la URL https://en.wikipedia.org/wiki/Internet#History
.
Cuando la URL tiene un ancla, el navegador se desplazará al elemento correspondiente en el documento: es decir, el elemento cuyo atributo id
es igual al ancla en la URL. En el caso de la URL dada, https://en.wikipedia.org/wiki/Internet#History
, el navegador saltará directamente a la sección “History”. Examinando el código HTML de la página, encontramos que el título de la sección tiene el atributo id
correspondiente:
<span class="mw-headline" id="History">History</span>
Los anchor de URL se pueden usar en el atributo href
de la etiqueta <a>
, ya sea cuando apuntan a páginas externas o cuando apuntan a ubicaciones dentro de la página actual. En el último caso, basta con comenzar con el signo de almohadilla con el fragmento de URL, como en <a href="#History">History</a>
.
Warning
|
El atributo |
Hay formas de personalizar cómo reaccionará el navegador a los anchor de URL. Es posible, por ejemplo, escribir una función de JavaScript que escuche el evento de ventana hashchange y active una acción personalizada, como una animación o una solicitud HTTP. Sin embargo, vale la pena señalar que el fragmento de URL nunca se envía al servidor con la URL, por lo que el servidor HTTP no puede usarlo como identificador.
Ejercicios guiados
-
El documento HTML ubicado en
http://www.lpi.org/articles/linux/index.html
tiene una etiqueta<img>
cuyo atributosrc
apunta a../logo.png
. ¿Cuál es la dirección absoluta a esta imagen? -
Nombra dos razones por las que el atributo
alt
es importante en las etiquetas<img>
. -
¿Qué formato de imagen proporciona una buena calidad y mantiene el tamaño del archivo pequeño cuando se usa para fotografías con puntos borrosos y con muchos colores y sombras?
-
En lugar de utilizar un proveedor externo como Youtube, ¿qué etiqueta HTML le permite incrustar un archivo de video en un documento HTML utilizando solo funciones HTML estándar?
Ejercicios de exploración
-
Suponga que un documento HTML tiene el hipervínculo
<a href="pic1.jpeg">First picture</a>
y el elemento iframe<iframe name="gallery"></iframe>
. ¿Cómo podría modificar la etiqueta de hipervínculo para que la imagen a la que apunta se cargue dentro del elemento iframe dado después de que el usuario haga clic en el enlace? -
¿Qué sucederá cuando el visitante haga clic en un hipervínculo en un documento dentro de un iframe y el hipervínculo tiene el atributo de destino establecido en
_self
? -
Observe que el anchor de URL para la segunda sección de su página HTML no funciona. ¿Cuál es la causa probable de este error?
Resumen
Esta lección cubre cómo agregar imágenes y otro contenido multimedia usando las etiquetas HTML adecuadas. Además, el lector aprende las diferentes formas en que se pueden utilizar los hipervínculos para cargar otros documentos y señalar ubicaciones específicas dentro de una página. La lección pasa por los siguientes conceptos y procedimientos:
-
La etiqueta
<img>
y sus principales atributos:src
yalt
. -
Rutas de URL relativas y absolutas.
-
Formatos de imágenes populares para la Web y sus características.
-
Las etiquetas multimedia
<audio>
y<video>
. -
Cómo insertar documentos anidados con la etiqueta
<iframe>
. -
La etiqueta de hipervínculo
<a>
, su atributohref
y objetivos especiales. -
Cómo utilizar fragmentos de URL, también conocidos como anclajes hash.
Respuestas a los ejercicios guiados
-
El documento HTML ubicado en
http://www.lpi.org/articles/linux/index.html
tiene una etiqueta<img>
cuyo atributosrc
apunta a../logo.png
. ¿Cuál es la dirección absoluta a esta imagen?http://www.lpi.org/articles/logo.png
-
Nombra dos razones por las que el atributo
alt
es importante en las etiquetas<img>
.Los navegadores de solo texto podrán mostrar una descripción de la imagen que falta. Los lectores de pantalla utilizan el atributo
alt
para describir la imagen. -
¿Qué formato de imagen proporciona una buena calidad y mantiene el tamaño del archivo pequeño cuando se usa para fotografías con puntos borrosos y con muchos colores y sombras?
El formato JPEG.
-
En lugar de utilizar un proveedor externo como Youtube, ¿qué etiqueta HTML le permite incrustar un archivo de video en un documento HTML utilizando solo funciones HTML estándar?
La etiqueta
<video>
.
Respuestas a los ejercicios de exploración
-
Suponga que un documento HTML tiene el hipervínculo
<a href="pic1.jpeg">First picture</a>
y el elemento iframe<iframe name="gallery"></iframe>
. ¿Cómo podría modificar la etiqueta de hipervínculo para que la imagen a la que apunta se cargue dentro del elemento iframe dado después de que el usuario haga clic en el enlace?Usando el atributo
target
de la etiquetaa
:<a href="pic1.jpeg" target="gallery">First picture</a>
. -
¿Qué sucederá cuando el visitante haga clic en un hipervínculo en un documento dentro de un iframe y el hipervínculo tiene el atributo de destino establecido en
_self
?El documento se cargará dentro del mismo iframe, que es el comportamiento predeterminado.
-
Observe que el anchor de URL para la segunda sección de su página HTML no funciona. ¿Cuál es la causa probable de este error?
El fragmento de URL después del signo de almohadilla no coincide con el atributo
id
en el elemento correspondiente a la segunda sección, o el atributoid
del elemento no está presente.