Semana 2

Etiquetas Básicas
 Semana 2
Etiquetas Básicas

APRENDIZAJE ESPERADO
El estudiante será capaz de:
• Elaborar diseño de HTML en base a sus características, considerando
etiquetas de hiperenlaces, listas, tablas, imágenes, audio y videos, con la
finalidad de utilizarlas en la creación de páginas web, teniendo en cuenta su
entorno de desarrollo.

Reservados todos los derechos Instituto Superior de Artes y Ciencias de la Comunicación S.A. No se permite copiar, reproducir, reeditar, descargar, publicar,
emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier
medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Instituto Superior de Artes y Ciencias de la Comunicación
S.A. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual.

IACC 2022 2
 Semana 2
Etiquetas Básicas

ÍNDICE
APRENDIZAJE ESPERADO ..................................................................................................................................................... 2
INTRODUCCIÓN ................................................................................................................................................................... 4
RESUMEN ............................................................................................................................................................................ 5
PALABRAS CLAVE ................................................................................................................................................................. 5
PREGUNTAS GATILLANTES ................................................................................................................................................... 5
1. ETIQUETAS BÁSICAS ......................................................................................................................................................... 6
1.1 ETIQUETA DE HIPERENLACES O HIPERLINK ........................................................................................................................ 6
1.2 ETIQUETA DE LISTAS ............................................................................................................................................................... 7
1.3 ETIQUETA DE TABLAS ............................................................................................................................................................. 9
2. ELEMENTOS MULTIMEDIA .............................................................................................................................................. 11
2.1 IMÁGENES ............................................................................................................................................................................. 11
2.2 AUDIO ................................................................................................................................................................................... 13
2.3 VIDEOS .................................................................................................................................................................................. 14
3. UTILIZACIÓN DE IMÁGENES ............................................................................................................................................ 15
3.1 MAPA DE IMÁGENES ............................................................................................................................................................ 16
4. UTILIZACIÓN DE AUDIO .................................................................................................................................................. 16
4.1 BGSOUND ............................................................................................................................................................................. 17
4.2 EMBED .................................................................................................................................................................................. 18
4.3 AUDIO ................................................................................................................................................................................... 19
5. UTILIZACIÓN DE VIDEO................................................................................................................................................... 22
5.1 EMBED .................................................................................................................................................................................. 22
5.2 VIDEO .................................................................................................................................................................................... 22
5.3 YOUTUBE .............................................................................................................................................................................. 24
6. UTILIZACIÓN DE OTROS ELEMENTOS .............................................................................................................................. 26
6.1 MARQUESINAS...................................................................................................................................................................... 26
6.2 OBJECT .................................................................................................................................................................................. 27
COMENTARIO FINAL .......................................................................................................................................................... 29
REFERENCIAS ..................................................................................................................................................................... 30

IACC 2022 3
 Semana 2
Etiquetas Básicas

INTRODUCCIÓN
En el presente contenido se revisará cómo incorporar a los sitios web, elementos altamente utilizados en
la actualidad, tales como: tablas, listas, videos, audios e imágenes.
Para trabajar y crear sitios webs y aplicaciones con HTML, no basta con conocer la estructura de una página
web, sino también el conjunto de etiquetas que permiten el manejo de recursos dentro de ellas, las que,
al ser aplicadas, permiten la incorporación de nuevas tecnologías.
Con esta entrega sobre el lenguaje HTML se conocerán los elementos básicos necesarios para incorporar
objetos en un sitio web, según la demanda actual del mercado.

IACC 2022 4
 Semana 2
Etiquetas Básicas

RESUMEN
En este contenido se revisarán las características propias del lenguaje HTML. Se pondrá el foco en el
desarrollo de páginas web, incorporando los elementos comunes más utilizados, como son las tablas y las
listas e imágenes, así como elementos multimedia representados por audio y video.
Todo ello forma parte de la versatilidad de HTML, que nos permite, de manera estructurada y sencilla, la
implementación de páginas web con presentaciones muy organizadas, lo que a su vez nos permite
desarrollar páginas web de fácil navegación para los usuarios.

PALABRAS CLAVE
• etiquetas
• hiperenlaces
• listas
• tablas
• imagen
• video
• audio

PREGUNTAS GATILLANTES
• ¿Cuáles son las etiquetas básicas utilizadas en la creación de un documento HTML?
• ¿Cómo se construyen hiperenlaces, listas y tablas en HTML?
• ¿Cómo se visualizan imágenes y se reproducen audios y videos en una página web?

IACC 2022 5
 Semana 2
Etiquetas Básicas

1. ETIQUETAS BÁSICAS
A partir de la versatilidad que provee el lenguaje HTML, al momento de diseñar una página web se potencia
el uso de la configuración de sus características, por medio de las etiquetas de hiperenlaces, la presentación
de listas, construcción de tablas, visualización de imágenes y mapas de imágenes; e incluso, el uso de
imágenes como hipervínculo a otros contenidos ubicados en páginas externas.

1.1 ETIQUETA DE HIPERENLACES O HIPERLINK

La etiqueta para crear hiperenlaces o hiperlink en HTML es <a>, la que se emplea para incluir un enlace en
una página. Sin embargo, no basta con usarla, ya que se debe agregar información del sitio de destino al
cual se redirigirá el contenido. Lo anterior, por medio del uso del atributo href que entregará el enlace
propiamente dicho.
De esta forma, cada vez que se desee agregar un hiperenlace se deberá utilizar la etiqueta <a> junto con
el atributo href, para indicar la dirección a la que apunta el enlace.

Veamos el siguiente ejemplo:

Figura 1. Ejemplo de hiperenlace o hiperlink

Fuente: IACC (2020)

IACC 2022 6
 Semana 2
Etiquetas Básicas

Se puede observar que, en el primer hiperenlace, al no estar especificado el atributo href, no se visualiza
como tal ni tampoco redirecciona a ningún otro lugar. El caso contrario se produce en el segundo
hiperenlace, en que sí aparece visualizado como hiperenlace, redireccionando al sitio oficial de Google.

1.2 ETIQUETA DE LISTAS

Cuando se requiere de la agrupación de palabras o frases en determinados conjuntos de elementos, se

puede organizar el contenido en listas, proporcionando más significado a la información presentada de
manera conjunta. El menú de navegación de un sitio web constituye un ejemplo de lo anterior.
Según Eguiluz (2017), el lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos, a
saber:
Listas no ordenadas: colección simple de elementos en la que no existe un orden entre ellos.
Listas ordenadas: colección de elementos enumerados y que, por lo tanto, importa su orden.
Listas de definición: conjunto de términos y definiciones similar a un diccionario.
Las listas no ordenadas son las que más se utilizan, dada su sencillez. La etiqueta <ul> encierra todos los
elementos de la lista; y la etiqueta <li>, cada uno de estos. Veamos en el siguiente ejemplo el uso de estas
etiquetas para conformar el menú de un sitio web:
En la siguiente imagen, la etiqueta <ul> encierra a todos los elementos de la lista que conforman al menú.
Dentro de ella y de manera anidada, se encuentran 7 etiquetas <li> para igual cantidad de elementos del
menú. Se observa que no existe un criterio de orden entre los elementos de la lista.

Figura 2. Ejemplo de listas no ordenadas

Fuente: IACC (2020)

IACC 2022 7
 Semana 2
Etiquetas Básicas

Por su parte, las listas ordenadas, tal como su nombre indica, simplemente es una lista similar a la anterior,
pero con la necesidad de presentar en una secuencia u orden los elementos que la contienen. Ejemplos de
ello son el índice de un libro o una secuencia de pasos. Para su implementación se utilizan las etiquetas
<ol>; y los elementos de la lista se definen mediante la etiqueta <li>, es decir, la misma que se utiliza en las
listas no ordenadas. Observemos el ejemplo que se muestra a continuación:

Figura 3. Ejemplo de listas ordenadas

Fuente: IACC (2020)

En el código presentado en la imagen anterior, se observa el uso de la etiqueta <ol> para indicar que
estamos en presencia de una lista ordenada, y dentro de ella, aparecen los elementos encerrados entre la
etiqueta <li> y su respectivo cierre </li>.
Finalmente, las listas de definición son las menos utilizadas actualmente, y se comportan como un
diccionario en donde a cada elemento de la lista se le asocia una definición. La etiqueta <dl> crea la lista
de definición y las etiquetas <dt> y <dd> definen el término y la descripción para cada elemento de la lista,
respectivamente. Observemos el código que se presenta a continuación:

Figura 4. Ejemplo de listas de definición

Fuente: IACC (2020)

IACC 2022 8
 Semana 2
Etiquetas Básicas

En el programa mostrado, se observa el uso de las etiquetas <dl> y </dl> para delimitar la lista de definición,
y adicionalmente, para cada término a definir se usan las etiquetas <dt> y <dd>, para identificar el término
y luego su descripción.

Pregunta:
¿Cómo explicarías las principales diferencias que existen entre los tipos de listas descritos
previamente?

1.3 ETIQUETA DE TABLAS

Otro elemento importante en una página web son las tablas. Las más sencillas se definen con solo tres
etiquetas:

• Para crear la tabla.

<table> • Encierra las filas y columnas de la tabla.

<tr> • Para crear cada fila.

<td> • Para crear cada columna .

Figura 5. Ejemplo de tabla sencilla
Fuente: IACC (2020)

IACC 2022 9
 Semana 2
Etiquetas Básicas

A continuación, se muestra el código HTML de una tabla sencilla:

Figura 6. HTML de una tabla sencilla

Fuente: IACC (2020)

La visualización de dicho código desde el navegador será:

Figura 7. Visualización de una tabla sencilla

Fuente: IACC (2020)

IACC 2022 10
 Semana 2
Etiquetas Básicas

Según Eguiluz (2017), las columnas a las que también se les llaman celdas, tienen asociados un conjunto
de atributos específicos que se detallan a continuación:

Atributo Detalle

abbr = “texto” Permite describir el contenido de la celda (su

uso principal es de apoyo a personas con
necesidades especiales).

headers = lista_de_id” Señala los títulos de las columnas y filas,

indicándose como una lista de valores del
atributo "id" de celdas.

scope ="col, row, Indica las celdas para las que esta celda será
colgroup, rowgroup" su cabecera.

colspan ="numero" Número de columnas que ocupa esta celda.

rowspan ="numero" Número de filas que ocupa esta celda.

Tabla 1. Atributos para columnas o celdas de tablas en HTML

Fuente: elaboración propia

Los atributos más utilizados son rowspan y colspan, los que se emplean para construir tablas complejas

2. ELEMENTOS MULTIMEDIA
Entre los recursos más utilizados dentro de una página web se encuentran imágenes, audios y videos, a los
que en conjunto se les llaman recursos multimedia. En HTML existe la posibilidad de mostrar videos
directamente desde el navegador, sin redireccionar a otro hipervínculo. A continuación, veremos cómo
incorporar dichos recursos a una página web.

2.1 IMÁGENES

Las imágenes representan uno de los elementos más importantes de las páginas web. Actualmente, todas
las páginas web las contienen. Una página HTML puede incorporar dos tipos de imágenes:

IACC 2022 11
 Semana 2
Etiquetas Básicas

Complementan la
información textual.

De contenido
Se incluyen
directamente en el
código HTML mediante
la etiqueta <img>
Tipos de imágenes
Son usadas en iconos
en listas, bordes
redondeados, fondos de
página.
Decorativas

Se incorporan mediante
hojas de estilo CSS.

Figura 8. Tipos de imágenes

Fuente: IACC (2020)

Los atributos asociados a la etiqueta <img> se detallan a continuación:

Atributo Uso

src = "url" Contiene URL de la imagen que se muestra.

alt = "texto" Descripción corta de la imagen.

longdesc = "url" Indica una URL en la que puede encontrarse

una descripción más detallada de la imagen.

name = "texto" Nombre de la imagen.

height = Especifica la altura con la que se mostrará la

"unidad_de_medida" imagen (no debe coincidir con la altura
original de la imagen).

width = Especifica la anchura con la que se mostrará

"unidad_de_medida" la imagen (no debe coincidir con la anchura
original de la imagen).

Tabla 2. Atributos de la etiqueta img

Fuente: https://uniwebsidad.com/libros/xhtml/capitulo-6

IACC 2022 12
 Semana 2
Etiquetas Básicas

El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que va a
mostrar. El atributo alt proporciona una descripción corta de la imagen. Tanto src como alt, son obligatorios
en la etiqueta <img>.

2.2 AUDIO

Para agregar audios (sonidos o música) a una página web, se utiliza la etiqueta <audio>, la que contempla
varios atributos que se presentan a continuación:

Atributo Valor Descripción

src Dirección URL Indica el audio a reproducir y es

atributo obligatorio si actúa como
etiqueta contenedora.

preload auto | metadata | none Indica cómo realizar la precarga del

audio.

mediagroup Nombre Establece un nombre para un grupo de

contenidos multimedia.

autoplay - Comienza a reproducir el audio

automáticamente.

loop - Vuelve a iniciar el audio cuando finaliza

su reproducción (bucle).

muted - Establece el audio sin sonido

(silenciado).

Tabla 3. Atributos para la etiqueta <audio>

Fuente: https://lenguajehtml.com/html/multimedia/etiquetas-html-de-audio/

IACC 2022 13
 Semana 2
Etiquetas Básicas

2.3 VIDEOS

Otro recurso multimedia ampliamente utilizado en páginas web, es el video, el cual puede mostrarse
directamente desde nuestro navegador, por medio del lenguaje HTML. Utilizando la etiqueta <video>,
unida a la etiqueta <source>, se puede implementar esta posibilidad.

En la etiqueta <video> se pueden utilizar los siguientes atributos:

Atributo Valor Descripción

src Dirección URL Video a reproducir. Obligatoria si

actúa como etiqueta contenedora.
poster Dirección URL Muestra una imagen a modo de
presentación.
preload Auto | metadata | none Indica cómo realizar la precarga del
video.
mediagroup Nombre Establece un nombre para un grupo
de contenidos multimedia.
autoplay - Comienza a reproducir el video
automáticamente.
loop - Vuelve a iniciar el video cuando
finaliza su reproducción (bucle).
muted - Establece el video sin sonido
(silenciado).
controls - Muestra los controles de
reproducción. Por defecto no se
muestran.
width Tamaño (en pixeles) Indica el tamaño en cantidad de
pixeles de ancho del video.
height Tamaño (en pixeles) Indica el tamaño en cantidad de
pixeles de alto del video.

Tabla 4. Atributos para la etiqueta video

Fuente: https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/

IACC 2022 14
 Semana 2
Etiquetas Básicas

3. UTILIZACIÓN DE IMÁGENES

Figura 9. Uso de la etiqueta <img>

Fuente: IACC (2020)

Veamos estos ejemplos:

Como img es una etiqueta vacía, no tiene etiqueta de cierre. Sin embargo, se deben incluir los caracteres
/> al final de la etiqueta.
En cuanto al formato de la imagen, se recomienda utilizar uno de los tres siguientes formatos gráficos
compatibles con todos los navegadores actuales: GIF, JPG y PNG.
Si el valor del atributo width o height se indica mediante un número entero, el navegador supone la unidad
de medida píxel.
También es posible indicar la anchura y altura en forma de porcentaje. En este caso, el porcentaje hace
referencia a la altura/anchura del elemento en el que está contenida la imagen. Si la imagen no se
encuentra dentro de ningún otro elemento, hace referencia a la anchura/altura total de la página.

Figura 10. Uso de la etiqueta <img> con dimensiones en porcentaje

Fuente: IACC (2020)

El ejemplo anterior mezcla los dos tipos de medidas que se pueden utilizar, para indicar que la foto tiene
una anchura igual al 30% de la anchura del elemento <div> que la contiene, y una altura de 350 píxeles. Si
solamente se establece uno de los parámetros, el navegador calcula el otro para mantener la proporción
de la imagen.

IACC 2022 15
 Semana 2
Etiquetas Básicas

Pregunta

¿A qué crees que se debe la importancia de aprender sobre la creación de imágenes para las páginas
web?

3.1 MAPA DE IMÁGENES

Según el Manual Web (s.f.-a), los mapas de imágenes nos permiten crear un conjunto de enlaces dentro
de una imagen o bien enlazar una parte en concreto de una imagen. Para ello HTML nos ofrece el elemento
map. La estructura del elemento map es la siguiente:

Figura 11. Uso de la etiqueta <map>

Fuente: https://www.manualweb.net/html/mapas-html/

En el ejemplo, la etiqueta map anida un conjunto de elementos area. Estos elementos serán los que
establezcan las zonas enlazables dentro de la imagen. Es importante saber que el mapa en sí no tiene una
imagen asociada, si no que tendremos que asociar un elemento img al mapa para conseguir tener las áreas
enlazables.

4. UTILIZACIÓN DE AUDIO
A continuación, se describen las tres etiquetas utilizadas para insertar archivos de audio en HTML:
<bgsound>, <embed> (ambas obsoletas, la última aún utilizada) y <audio> (incorporada en HTML5).

IACC 2022 16
 Semana 2
Etiquetas Básicas

4.1 BGSOUND

La etiqueta bgsound (propiedad de Microsoft) incorpora sonidos de fondo en una página web, sonidos que
se ejecutan automáticamente al cargarse la página. Admite los formatos de audio MID y WAV, aunque
generalmente también acepta AU y MP3, en versiones actuales del navegador o mediante plugins de uso
general.

Su sintaxis general, con sus atributos más importantes, es del tipo:

<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>

Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede
ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del
servidor web o una URL completa que localice el fichero en Internet.
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el
valor infinite, el fichero se reproducirá indefinidamente.
• balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la
potencia o intensidad con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores
pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre
los dos altavoces.
• volume="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000
(mínimo) y 0 (máximo). No es soportado por los equipos MAC.

Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>

Enlace de interés
Esta función no forma parte de los estándares, por lo que actualmente se encuentra en desuso.
Para más información, visite:
https://developer.mozilla.org/es/docs/Web/HTML/Element/bgsound
https://runebook.dev/es/docs/html/element/bgsound

IACC 2022 17
 Semana 2
Etiquetas Básicas

4.2 EMBED

Nestcape Navigator implementó la etiqueta embed para incorporar archivos de audio. Es ésta una etiqueta
de carácter general, que se usa para la inclusión en las páginas web de todos aquellos archivos ajenos al
navegador y que necesitan por lo tanto la ejecución de algún plugin para su interpretación.

Figura 12. Ejemplo de uso de etiqueta <embed> para colocar un audio

Fuente: https://www.w3docs.com/learn-html/html-embed-tag.html

La sintaxis general de la etiqueta embed es del tipo:

<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>

Los atributos utilizados en el ejemplo son los siguientes:

Atributo Descripción

Declara el tipo de archivo de audio que estamos usando, con lo que el

type="tipo_archivo" navegador web puede ejecutar el programa o plugin adecuado para la
reproducción del archivo. Puede ser audio/midi, audio/wav, etc.

src="ruta_archivo" Establece la ruta en la que se encuentra el archivo de audio a reproducir.

La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta

IACC 2022 18
 Semana 2
Etiquetas Básicas

respecto el sistema de carpetas del servidor web o una URL completa que
localice el fichero en Internet.

width="w" Determina el ancho visible de la consola, en píxeles.

height="h" Determina el alto visible de la consola, en píxeles.

Tabla 5. Atributos de la etiqueta <embed>

Fuente: https://www.htmlquick.com/es/reference/tags/embed.html

4.3 AUDIO
Veamos cómo configurar un audio en una página web:

<audio src="audio.mp3"></audio>

De esa manera, se iniciará la reproducción del contenido del archivo audio.mp3, pero no se visualizará
nada en pantalla asociado a dicho recurso. Para mostrar controles, de manera que el usuario pueda
accionar el sonido por medio del botón play, se deberá agregar el atributo controls. Veamos el siguiente
código:

Figura 13. Ejemplo de uso de la etiqueta audio

Fuente: IACC (2020b)

Con el atributo controls, el audio solo se escuchará cuando se presione el botón play, y se mostrará la
pantalla así:

IACC 2022 19
 Semana 2
Etiquetas Básicas

Figura 14. Visualización de ejemplo de uso de la etiqueta audio

Fuente: IACC (2020b)

Con el atributo preload=”none” indicamos que no precargue ningún elemento. Se descargará solo cuando
el usuario pulse los controles de reproducción, evitando el consumo de ancho de banda, salvo que el
usuario así lo desee.

La etiqueta <audio> también se puede usar como etiqueta contenedora e incluir varias etiquetas HTML
para proporcionar mayor compatibilidad o capacidades adicionales.

Etiqueta Atributos Descripción

<source> src, type Establece un archivo de audio, o lo

añade como alternativa.

<track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo

añade como alternativa.

Tabla 6. Etiquetas HTML contenidas dentro de la etiqueta audio

Fuente: https://lenguajehtml.com/html/multimedia/etiquetas-html-de-audio/

En la tabla anterior, se observa que, en el caso que se desee establecer el archivo de audio al que se asociará
la etiqueta <audio>, se ocupa a su vez la etiqueta <source>. De manera similar, en el caso que se requiera
especificar un archivo de subtítulos se utilizará mediante la etiqueta <track>.

IACC 2022 20
 Semana 2
Etiquetas Básicas

Para lograr mayor compatibilidad con los diversos navegadores desde los que se accede a una página web
que incluya audio, se puede usar la etiqueta <source> para agregar diversos formatos alternativos, tales
como archivos con extensión .ogg, .opus, entre otros. Veamos un ejemplo de este caso:

Figura 15. Ejemplo de uso de etiquetas HTML contenidas dentro de la etiqueta audio
Fuente: IACC (2020b)

Figura 16. Ejemplo de uso de etiqueta <embed> para colocar un video

Fuente: https://www.w3docs.com/learn-html/html-embed-tag.html

IACC 2022 21
 Semana 2
Etiquetas Básicas

El navegador intentará reproducir el archivo de audio en formato opus. En caso de no ser soportado por el
navegador, intentará reproducir el formato ogg; y de no soportarlo, reproducirá el formato MP3.

5. UTILIZACIÓN DE VIDEO
A continuación, se describen las etiquetas utilizadas para insertar archivos de video en HTML: <embed> y
<video>, así como el uso de archivos de video disponibles desde YouTube.

5.1 EMBED

Esta etiqueta, antes explicada para archivos de audio, se usa para insertar cualquier archivo multimedia. A
continuación, se muestra un ejemplo de su uso para colocar un video en la página web.

5.2 VIDEO

Ahora bien, veamos cómo podemos colocar un video llamado pelicula.mp4 en una página web:
<video src="pelicula.mp4" width="640" height="480"></video>

Esta instrucción mostrará en el navegador el primer fotograma del video con un tamaño de 640x480, por
lo que se apreciará como una imagen, ya que no hemos especificado el atributo control ni la
autoreproducción. Si especificamos el atributo controls, al final de la previsualización del video, aparece el
menú de controles con el botón play. Así se verá en el navegador:

IACC 2022 22
 Semana 2
Etiquetas Básicas

Figura 17. Imagen del vídeo insertado usando el atributo controls

Fuente: IACC (2020b)

Otros ejemplos de uso de atributos en la etiqueta <video>:

<video src="video.mp4" poster="inicio.jpg" controls></video>

En este ejemplo, se visualizará la imagen de presentación llamada inicio.jpg, hasta que el usuario solicite
reproducir el video llamado video.mp4, por medio del botón play.

<video src="video.mp4" autoplay muted loop></video>

Para este caso, el video se reproduce de manera automática apenas se carga la página en el navegador,
pero sin audio activado (mute) y en bucle.

En el segundo ejemplo, tenemos un video que se reproduce automáticamente al cargar la página, en

silencio y en bucle, es decir, reproduciéndose una y otra vez cada vez que llega al fin.

Al igual que la etiqueta <audio>, la etiqueta <video> se puede usar como etiqueta contenedora e incluir
varias etiquetas HTML, para proporcionar mayor compatibilidad o capacidades adicionales.

IACC 2022 23
 Semana 2
Etiquetas Básicas

Etiqueta Atributos Descripción

<source> src, type Establece un archivo de video o lo

añade como alternativa.

<track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo

añade como alternativa.

Tabla 7. Etiquetas HTML contenidas dentro de la etiqueta <video>.

Fuente: https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/

Al utilizar la etiqueta <video> como contenedora, podemos incluir etiquetas <source> en su interior para
tener mayor compatibilidad con otros navegadores, tal como se muestra en el siguiente ejemplo:

Figura 18. Ejemplo de uso de etiqueta <video> como etiqueta contenedora junto a la etiqueta <source>
Fuente: IACC (2020b)

5.3 YOUTUBE

A continuación, se muestran los pasos para insertar un video de YouTube en tu página web:
1. Ubica en YouTube el video a insertar en la página.
2. Haz clic en Compartir (justo debajo del video).

IACC 2022 24
Semana 2
Etiquetas Básicas

Figura 19. Ubicación de la acción Compartir

Fuente: elaboración propia, tomado de la pantalla de YouTube

1. Elegir la opción para insertar.

2. Ajustar las opciones para insertar en la ventana de código <embed> y hacer clic en COPIAR.

3. Incluir o “embeber” el video en la página, pegando el código HTML copiado en el paso anterior. El
código incrustado como ejemplo es el siguiente:

Figura 20. Ubicación de la acción Insertar

Fuente: elaboración propia, tomado de la pantalla de YouTube

IACC 2022 25
 Semana 2
Etiquetas Básicas

Código
<iframe width="560" height="315" src="https://www.youtube.com/embed/hfTYrdYuNKA"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-
write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

6. UTILIZACIÓN DE OTROS ELEMENTOS

Hemos visto como un elemento HTML consiste normalmente en una etiqueta de inicio y otra de
finalización, con el contenido insertado entre ellas. Según Garro (2014), HTML define el
término elemento para referirse a las partes que componen los documentos HTML.
Los elementos se clasifican en dos grupos: elementos en línea o inline elements y elementos en
bloque o block elements. Ambos se diferencian en la forma en la que ocupan el espacio disponible en la
página: los elementos en bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible
hasta el final de la línea, mientras que los elementos en línea sólo ocupan el espacio necesario para mostrar
sus contenidos.

Figura 21. Código HTML que se debe copiar

Fuente: elaboración propia, tomado de la pantalla de YouTube

6.1 MARQUESINAS

IACC 2022 26
 Semana 2
Etiquetas Básicas

Según el sitio MarcaGo (2022) una marquesina es una ventana donde se mostrará texto en movimiento.
Es totalmente personalizable, pudiendo el usuario modificar la velocidad, tipografía (tamaño, color, tipo) y
sobre todo, que sucederá al mostrarse todo el texto como tal. Se implementa utilizando la etiqueta
<marquee>.
La etiqueta básica de una marquesina es la siguiente:
<marquee> Texto que se desplaza </marquee>
Se pueden configurar propiedades como el alto, el ancho, la dirección, tal como se muestra a continuación:

Código
<marquee direction=”right” width=50%> Texto que se desplaza </marquee>

6.2 OBJECT

Como regla general, la etiqueta object va a dirigir la acción hacia un plugin, programa o componente
externo encargado de la reproducción del fichero, que suele ser algún tipo de control ActiveX.
Mediante object se llama al objeto, se declara su URL y sus principales propiedades generales. La
etiqueta object incluye un conjunto de etiquetas especiales, param, donde se van pasando los valores que
se necesitan para un correcto funcionamiento del elemento multimedia.

La etiqueta tiene la siguiente forma:

Código
<object atributo1="valor1"....atributoN="valorN">
<param name="nombre" value="valor">
<param name="nombre" value="valor">
...
</object>

IACC 2022 27
 Semana 2
Etiquetas Básicas

La etiqueta <param> representa un parámetro, siempre se incluye dentro de la etiqueta <object> y sus
atributos son name y value. El valor del atributo name indica el tipo de parámetro a modificar, mientras
que el atributo value indica el valor que tomará ese parámetro.

Entre los atributos de la etiqueta object encontramos:

Atributo Descripción

La dirección de la fuente, escrita como una URL válida. Al menos uno de

data
los dos atributos, data o type, deben estar definidos.

name Establece el nombre de un contexto de navegación válido.

width="w" Determina el ancho del recurso mostrado, en píxeles.

height="h" Determina el alto del recurso mostrado, en píxeles.

Es el tipo de contenido del recurso contenido mediante datos. Al menos

Type
uno de los dos atributos, data o type , deben estar definidos.

Tabla 8. Atributos más comunes de la etiqueta <object>

Fuente: IACC (2020b)

IACC 2022 28
 Semana 2
Etiquetas Básicas

COMENTARIO FINAL
Actualmente, los sitios web incorporan una cantidad de elementos comunes, como son las imágenes,
tablas, listas, entre otros.
En la revisión de este contenido, se ha podido conocer dichos elementos y su incorporación en una página
web mediante el lenguaje HTML.
Todos estos aprendizajes constituyen la base para desarrollar, no solo el resto de los contenidos de la
asignatura, sino también, para incorporar elementos indispensables para el perfil profesional de esta
carrera, para el que es altamente demandado el conocimiento sobre el desarrollo de páginas web.

IACC 2022 29
 Semana 2
Etiquetas Básicas

REFERENCIAS

Eguiluz, J. (2017). Introducción a XHTML. https://uniwebsidad.com/libros/xhtml

Garro, A. (2014). XHTML. https://www.arkaitzgarro.com/xhtml/index.html

Hernández, J. (2020). Lenguaje HTML5. https://lenguajehtml.com/html/

IACC (2020). Características del HTML. Programación Web I. Semana 2.

IACC (2020b). Autoría de HTML. Programación Web I. Semana 3.

Manual Web (s.f.-a). Mapas HTML. Tutorial Html. https://www.manualweb.net/html/mapas-html/

Ponce, D. (s.f.-a). ELEMENTO EMBED. https://www.htmlquick.com/es/reference/tags/embed.html

W3docs (s.f.-a). Etiqueta HTML <embed>. https://www.w3docs.com/learn-html/html-embed-tag.html

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2022). Etiquetas Básicas. Programación Web I. Semana 2.

IACC 2022 30