SEMANA 3 – PROGRAMACIÓN WEB I

PROGRAMACIÓN WEB I

SEMANA 3
Autoría de HTML

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
Reservados
forma o por todos los derechos
cualquier Instituto Superior
medio (electrónico, de Artes
mecánico, y Ciencias
fotocopia, de la uComunicación
grabación S.A.. No seprevia
otros) sin autorización permite copiar,
y por reproducir,
escrito reeditar,
de Instituto descargar,
Superior de
publicar, emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión
Artes y Ciencias de la Comunicación S.A. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual. 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 IACC-2020
de dichos derechos puede constituir un delito contra la propiedad intelectual.
1
SEMANA 3 – PROGRAMACIÓN WEB I

1.

APRENDIZAJES ESPERADOS
El estudiante será capaz de:

• Elaborar diseño HTML, utilizando conjuntos de

marcos (Frame, Iframe), de etiquetas multimedia
(audio, video) y de formularios.

IACC-2020
2
SEMANA 3 – PROGRAMACIÓN WEB I

APRENDIZAJES ESPERADOS ................................................................................................................. 2

INTRODUCCIÓN ................................................................................................................................... 4
1. CONJUNTO DE MARCOS (IFRAME) .............................................................................................. 5
2. ETIQUETAS MULTIMEDIA ............................................................................................................ 7
2.1 ETIQUETAS DE AUDIO ..................................................................................................... 7
2.2 ETIQUETAS DE VIDEO .................................................................................................... 10
3. ETIQUETAS DE FORMULARIOS .................................................................................................. 15
3.1. CAMPOS DE ENTRADA DE DATOS ................................................................................. 17
COMENTARIO FINAL.......................................................................................................................... 21
REFERENCIAS ..................................................................................................................................... 22

IACC-2020
3
SEMANA 3 – PROGRAMACIÓN WEB I

INTRODUCCIÓN
En el presente contenido se revisará cómo aplicadas, permiten la incorporación de
incorporar a los sitios web, elementos nuevas tecnologías.
altamente utilizados en la actualidad, tales
como: videos, audios e imágenes. Con esta entrega sobre el lenguaje HTML se
conocerán los elementos básicos necesarios
Para trabajar y crear sitios webs y aplicaciones para incorporar objetos en un sitio web,
con HTML, no basta con conocer la estructura según la demanda actual del mercado.
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

IACC-2020
4
SEMANA 3 – PROGRAMACIÓN WEB I

1. CONJUNTO DE MARCOS (IFRAME)

Los conjuntos de marcos, también llamados marcos en línea, corresponden a un tipo especial de
etiqueta denominada <iframe>, que es utilizada para incrustar contenido externo a la página. Este
servicio es proporcionado por empresas como Youtube, SlideShare y otras similares, quienes
entregan, por medio de un enlace o contenido especial, la posibilidad de obtener videos, audios o
imágenes en formatos que sean reconocidos por los navegadores.

Esta etiqueta permite crear un recuadro, que en su interior va a tener una dirección URL de otra
página web, documento o recurso que queramos cargar en él, siendo la etiqueta más utilizada para
todo tipo de contenido externo.

Veamos un ejemplo extraído del servicio YouTube:

Ejemplo de etiqueta

En el código presentado, se utiliza un conjunto de marco para mostrar un video de YouTube por
medio del enlace que nos entrega dicho servicio, para que sea publicado en el sitio web. Para ver
y/o copiar el enlace desde YouTube se debe presionar la opción compartir en el video. En la siguiente
imagen se ve la ubicación de dicha opción:

IACC-2020
5
SEMANA 3 – PROGRAMACIÓN WEB I

Cómo obtener link de YouTube

Finalmente, la visualización en nuestra página web será como se muestra a continuación:

Visualización de link externo en página web

PREGUNTA

¿Cómo explicarías la importancia de dominar la creación de la

etiqueta <iframe>?

IACC-2020
6
SEMANA 3 – PROGRAMACIÓN WEB I

2. ETIQUETAS MULTIMEDIA
Entre los recursos más utilizados dentro de una página web se encuentran 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.

• La etiqueta tiene como finalidad organizar el lenguaje, para

indicar dónde comienza y dónde termina la aplicación de la
etiqueta que se está usando

2.1 ETIQUETAS DE 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).
controls - Muestra los controles de reproducción, los que no se
muestras por defecto.

Atributos para la etiqueta <audio>

Fuente: https://bit.ly/36dcMRR

IACC-2020
7
SEMANA 3 – PROGRAMACIÓN WEB I

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 de el botón play, se deberá agregar el atributo controls.
Veamos el siguiente código:

Ejemplo de uso de la etiqueta audio

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

IACC-2020
8
SEMANA 3 – PROGRAMACIÓN WEB I

Visualización de ejemplo de uso de la etiqueta audio

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, Establece un archivo de subtítulos o lo añade como alternativa.
kind, default

Etiquetas HMTL contenidas dentro de la etiqueta audio

Fuente: https://bit.ly/2TreT1O

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 mediante la etiqueta <track>.

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

IACC-2020
9
SEMANA 3 – PROGRAMACIÓN WEB I

alternativos, tales como archivos con extensión .ogg, .opus, entre otros. Veamos un ejemplo de este
caso:

Ejemplo de uso de etiquetas HMTL contenidas dentro de la etiqueta audio

En este ejemplo, 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 vorbis; y en caso de tampoco
soportarlo, reproducirá el formato MP3.

PREGUNTA

¿Por qué crees que es importante conocer los diferentes atributos

que posee la etiqueta de audio?

2.2 ETIQUETAS DE VIDEO

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:

IACC-2020
10
SEMANA 3 – PROGRAMACIÓN WEB I

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.

Atributos para la etiqueta video

Fuente: https://bit.ly/2sw5Hhy

• Si lo que se quiere es insertar videos desde YouTube, Vimeo

u otro servicio de video, se debe utilizar la etiqueta
<iframe> en lugar de la etiqueta <video>. Lo anterior,
debido a que se trata de servicios que ofrecen contenido
externo para ser incrustado, mediante un enlace que
requiere de un plugin externo instalado en el navegador.

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>

IACC-2020
11
SEMANA 3 – PROGRAMACIÓN WEB I

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 hemos especificado el atributo control ni la auto
reproducción. Así de verá en el navegador:

Imagen del video insertado

Veamos lo mismo con el atributo controls especificado, en el que al final de la previsualización del
video, aparece el menú de controles con el botón play:

IACC-2020
12
SEMANA 3 – PROGRAMACIÓN WEB I

Imagen del video insertado usando el tributo controls

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.

IACC-2020
13
SEMANA 3 – PROGRAMACIÓN WEB I

<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.

Etiqueta Atributos Descripción

<source> src, type Establece un archivo de video o lo añade como
alternativa.
<track> src, srclang, label, kind, Establece un archivo de subtítulos o lo añade como
default alternativa.
Etiquetas HMTL contenidas dentro de la etiqueta <video>. Fuente: https://bit.ly/2FQ0vIk

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

Ejemplo de uso de etiqueta <video> como etiqueta contenedora junto a la etiqueta <source>

IACC-2020
14
SEMANA 3 – PROGRAMACIÓN WEB I

En esta página los navegadores no mostrarán todos los contenidos a la vez, sino que se realizará de
la siguiente manera:

• Primero intentará mostrar el primer formato (MP4), en el caso

Primera
opción
de que no lo logre, pasa a la siguiente alternativa.

• Luego, intentará mostrar el formato (WEBM), y de igual

Segunda
opción
manera, si este tampoco es soportado, pasa a la siguiente línea.

• Ahora, intentará mostrar el formato (OGV), y de no ser

Tercera
opción
posible, la descarta y pasa a la siguiente línea.

• En el caso de que el navegador no soporte HTML5, mostrará la

Cuarta opción imagen denominada imagen.png.

• Si finalmente, se trata de un navegador sin capacidad de multimedia,

Última opción mostrará el texto: "Su navegador no soporta contenido multimedia".

Así, logramos presentar una solución contemplando todas las alternativas posibles.

PREGUNTA

¿Cómo describirías tú la importancia de incluir etiquetas <source>

en las etiquetas de video?

3. ETIQUETAS DE FORMULARIOS
Seguramente, en más de una oportunidad has visitado una página web en la cual se te solicita el
llenado de un conjunto de información requerida por el sitio web, pues bien, a eso se le llama
formulario, y con ellos se establece un mecanismo en el que el usuario pueda introducir información
en una página web de forma bastante sencilla e intuitiva. Luego, el sitio web puede procesarla de

IACC-2020
15
SEMANA 3 – PROGRAMACIÓN WEB I

forma correcta e incorporarla a una base de datos, enviarla por email o procesarla para mostrar
información final al usuario.

En relación al elemento formulario, existe la etiqueta contenedora <form>, la que dispone de varios
atributos para utilizar:

Atributo Valor Descripción

action URL Dirección URL del back-end, donde se enviará la información
del formulario.
method get | post Método HTTP de envío. GET a través de URL, POST para envío
extenso.
name Nombre Nombre del formulario. Útil para procesar posteriormente.
target Destino Nombre del lugar donde se abrirá el formulario. \_blank para
nueva pestaña.
enctype Tipo Codificación para el envío del formulario. Importante para
envío de archivos.
accept- Codificación Fuerza a utilizar una codificación en los parámetros de texto
charset del formulario.
autocomplete on | off Activa o desactiva el autocompletado para todos los campos
del formulario.
novalidate - Con este atributo presente, el formulario obvia la validación
HTML5.

Atributos de la etiqueta <form>

Fuente: https://bit.ly/36VLIrn

Los tres primeros son denominados atributos base y su uso se explica a continuación:

• Contiene la dirección • Define el tipo de • Especifica el nombre

donde se enviarán los
datos al pulsar enviar.
En caso de omisión, se
enviarían a la propia
página actual,
volviéndola a cargar.
método HTTP a utilizar. del formulario para
Se usa el método GET cuando se requiera
cuando se desea que los referenciarlo.
datos se envíen en la
propia URL. En caso
contrario, POST.

action method name

IACC-2020
16
SEMANA 3 – PROGRAMACIÓN WEB I

PREGUNTA

¿A qué crees que se deba la denominación de estos atributos como

“atributos base”?

3.1. CAMPOS DE ENTRADA DE DATOS

Para la entrada de datos se cuenta con la etiqueta <input>, cuyo mayor uso es como campo de
texto. A su vez, cuenta con una gran cantidad de atributos, siendo los más generales los siguientes:

Atributo Valor Descripción

type Tipo de campo Indica el tipo de campo del que se trata.
name Nombre del campo Indica el nombre del campo para hacer referencia más
tarde.
value Valor por defecto Indica el valor inicial que tendrá ese campo de datos.
form nombre del Asocia este campo de datos con un formulario
formulario específico.
placeholder Sugerencia Indica una sugerencia al usuario antes de escribir.
size Número (cantidad Tamaño visual (número de caracteres) del campo de
de caracteres) datos.
autocomplete on | off Activa o desactiva el autocompletado para este
campo.
autofocus - Establece el foco (coloca el cursor) en este campo al
cargar la página.

Atributos más generales para la etiqueta <input>

Fuente: https://bit.ly/2TrhbOs

El atributo type permite indicar qué tipo de campo de dato mostrará el navegador, pudiendo
especificar los siguientes:

IACC-2020
17
SEMANA 3 – PROGRAMACIÓN WEB I

text Para datos de tipo texto

Para datos de tipo

Atributo tipe number
numérico

date Para datos de tipo fecha

Por medio del atributo name, se le asigna un nombre al campo de texto.

Podemos apreciar la implementación de la entrada de datos con la etiqueta <input> en el siguiente

ejemplo:

Ejemplo de formulario implementado con la etiqueta <input>>

Al ejecutar el código para ser visualizado en el navegador, se aprecia así:

Visualización de ejemplo de formulario implementado con la etiqueta <input>>

IACC-2020
18
SEMANA 3 – PROGRAMACIÓN WEB I

En este ejemplo, se implementa un formulario sencillo para solicitar el nombre completo al usuario
mediante la etiqueta <input type="text">, y luego se muestra el botón enviar el formulario con la
etiqueta <input type="submit">. Con la misma etiqueta <input> se logran ambos propósitos, según
el valor indicado en el atributo type.

3.1.1 TIPOS DE DATOS A OBTENER EN EL FORMULARIO

Es importante considerar que el diseño del formulario debe funcionar de tal manera que los usuarios
puedan cargar la información de una manera cómoda e intuitiva, con la mayor información posible
sobre cómo introducir los datos solicitados y evitando la inconsistencia. Es por ello, que quien
elabora el formulario, debe determinar el tipo de datos que va a solicitar, para así identificar el tipo
de dato que más se acomoda a cada contexto. Manz (2016) nos proporciona el siguiente cuadro
resumen, que presenta ejemplos para diferentes requerimientos de información a obtener por
medio de formularios y la correspondiente etiqueta y su atributo necesario:

Información a obtener Ejemplos Etiqueta y atributo a utilizar

Información de texto
Números o cantidades
Fechas u horas
Verdadero/falso
Opción única
Varias opciones
Opción única abierta
Selección de color
Selección de archivo
Nombres, apellidos,
direcciones físicas...
Edades, precios, cuantías...
Fecha de nacimiento, inicio de
evento...
Si/No, Opción A/B, ON/OFF...
Elegir una opción de 2 o más
posibles
Elegir varias opciones de 2 o
más posibles
Elegir una opción o indicar una
propia
Escoger un color o tonalidad
Escoger un archivo para enviar
<input>
<textarea>
<input> para números
<input> para fechas
<input type="checkbox">
<input type="radio">
<select>
<select multiple>
<input type="checkbox">
<datalist>
<input type="color">
<input type="file">

Resumen de los tipos de datos

Fuente: https://bit.ly/2FQZakx

IACC-2020
19
SEMANA 3 – PROGRAMACIÓN WEB I

• Al usar la etiqueta <form> en el diseño de formularios, recuerda

que debes usar los atributos base: action, method y name para
indicar la dirección donde se enviarán los datos, el tipo de método
HTTP y el nombre del formulario, respectivamente.

Para complementar este aprendizaje, se invita a

visitar el siguiente enlace, en que encontrará un
video explicativo de como insertar videos de
YouTube y agregar íconos en una página HTML:

https://youtu.be/lyopO8-4f18

IACC-2020
20
SEMANA 3 – PROGRAMACIÓN WEB I

COMENTARIO FINAL
Los sitios web existentes incorporan una serie de recursos altamente difundidos por ese medio,
tales como audios, videos e imágenes, lo que les permite entregar contenidos de una manera rápida
y versátil.

Gracias a la evolución del lenguaje HTML, lo anterior es una tarea simple de realizar, implementando
las etiquetas y atributos que hemos estudiado en el presente contenido: tales como:<iframe>,
<audio>, <video>, entre otras. El dominio de todos estos elementos permitirá desarrollar páginas
web que cumplan con las expectativas de quienes demandan el desarrollo de sus sitios en la web,
que complementado con el conocimiento de hojas de estilo en cascada (CSS) y el diseño adaptable
de sitios web que veremos más adelante, lograrán que el estudiante cuente con las competencias
actuales requeridas en el mundo de la programación web.

IACC-2020
21
SEMANA 3 – PROGRAMACIÓN WEB I

REFERENCIAS
Manz, J. (2016). Lenguaje HTML - Documentación sobre el lenguaje HTML. Recuperado

de: https://bit.ly/3aoU258

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

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

IACC-2020
22
SEMANA 3 – PROGRAMACIÓN WEB I

IACC-2020
23