Programación III
Desarrollo Web Frontend
Edición 2023
Universidad Tecnológica Nacional
Facultad Regional Paraná
Multimedia
Atributos globales
Tablas
Formularios
Multimedia
Con la versión 5 de HTML se añaden características con soporte nativo para la reproducción
de audio y/o video en el navegador.
<video>
Permite agregar un archivo de video al contenido de nuestra página.
Se comporta de forma similar a <image>.
<audio>
Permite agregar un archivo de audio al contenido de nuestra página.
Se comporta de forma similar a <video>.
Multimedia (Continuación..)
Con la versión 5 de HTML se añaden características con soporte nativo para la reproducción
de audio y/o video en el navegador.
Atributos
src URL o Path al archivo de audio.
●
controls Habilita los controles básicos de reproducción multimedia (Iniciar, detener y volumen)
●
autoplay Activa la reproducción automática del audio / video mientras se carga el resto de la pá
●
loop El audio / video vuelve a comenzar una vez finalizado.
●
muted El audio / video se reproduce sin sonido por defecto.
●
poster URL hacia una imagen que se mostrará en la previsualización del audio / video.
●
Multimedia (Continuación..)
Ejemplo de un archivo de video insertado en nuestra página web
El tamaño del reproductor puede modificarse a través de los atributos
height y width
Multimedia
Atributos globales
Tablas
Formularios
Atributos globales
Los atributos globales son atributos comunes a todos los elementos HTML. Particularmente
nos centraremos en dos.
class. Permite definir una lista de clases separada por espacios. Las clases permiten que
●
CSS y JavaScript puedan seleccionar y acceder a estos elementos.
●id. Define un identificador único para el elemento HTML. El identificador debe ser único en
todo el documento HTML. Permite seleccionar y acceder a este elemento al igual que las
clases.
Multimedia
Atributos globales
Tablas
Formularios
Tablas
El elemento tabla HTML permite representar datos en dos o más dimensiones.
El tamaño que ocupa una tabla está determinado por su contenido. Aunque esto puede
modificarse a través de atributos de estilo como veremos más adelante.
¿Como definimos una tabla?
El contenido de la tabla está delimitado por las etiquetas <table></table>.
✔
El contenedor <tr> (table row) permita crear una fila.
✔
✔El contenedor más pequeño dentro de una tabla es el elemento <td> (table data). Este
elemento representa una celda y permite el crecimiento de la fila.
Es importante recordar que NO debemos utilizar tablas para el posicionamiento de una página. Este método ha
dejado de utilizarse desde HTML 4.
Tablas (Continuación..)
Ejemplo de tabla de una fila y tres columnas
Ejemplo de tabla de dos filas y tres columnas
Tablas (Continuación..)
Encabezados
Los encabezados funcionan de igual forma que las etiquetas <td>, solo se diferencian en que
denotan la celda como un encabezado y no como una celda normal.
Son útiles ya que permiten reconocer rápidamente los datos de un conjunto de filas o
columnas.
Tablas (Continuación..)
Caption
La etiqueta <caption> es la encargada de darle un título descriptivo a la tabla.
Tablas (Continuación..)
El atributo colspan permite expandir horizontalmente una celda.
En este ejemplo la última celda con el valor TOTAL ocupa el tamaño de
3 celdas por el atributo colspan=’3’
Se añaden estilos para resaltar el ancho de celda y alinear su contenido
Multimedia
Atributos globales
Tablas
Formularios
Formularios
Los formularios en HTML (<form>) representan una sección del documento que contiene
elementos interactivos que permiten al usuario enviar información a un servidor web.
Atributos
●autocomplete (HTML5) → permite al navegador completar automáticamente los elementos
de un formulario.
●off: el usuario debe ingresar explícitamente cada valor en cada campo del formulario
●on: el navegador puede completar automáticamente las entradas del formulario.
on
off
Seleccionando el campo del formulario ( on focus ) vemos la diferencia del atributo autocomplete
on/off
Formularios (Continuación..)
Atributos
●action → URI de un programa que procesa la información que se envía desde el formulario.
●method → metodo HTTP que usa el navegador para enviar el formulario.
●post: los datos del formulario son incluidos en el cuerpo del formulario y enviados al servidor.
●get: los datos del formulario son agregados en la URI del atributo action, separados por el
carácter ‘?’. La URI resultante será enviada al servidor.
Un elemento <button> o <input> de tipo sub
Formularios (Continuación..)
Enviando los datos del formulario a través del método GET vemos que los datos viajan a en
la URL al servidor.
Un formulario que utiliza el método POST envía los datos dentro del paquete HTTP enviado
al servidor.
Formularios (Continuación..)
Atributos
●enctype → permite definir el tipo MIME del contenido del formulario enviado al servidor.
●application/x-www-form-urlencoded. Valor por defecto si el atributo no se especifica.
multipart/form-data. Necesario si necesitamos enviar datos binarios (archivos) al servidor
●
desde un elemento <input> de tipo file.
●text/plain (HTML 5)
Formularios (Continuación..)
El elemento <input> permite el ingreso de datos de distinto tipo (type) en un formulario.
Input types
<input type="button">
●
<input type="checkbox">
●
Formularios (Continuación..)
Input types
<input type="radio">
●
<input type="date">
●
Formularios (Continuación..)
Input types
<input type="file">
●
<input type="text">
●
<input type=”password”>
●
Formularios (Continuación..)
Input types
<input type="range">
●
Formularios (Continuación..)
Otros input types
Permite seleccionar un color de una paleta de colores.
<input type="color">
●
Dependiendo el navegador valida automáticamente que el contenido
<input type="email">
●
Define un elemento input oculto o no visible al usuario.
<input type="hidden">
●
Define un elemento input de tipo numérico.
<input type="number">
●
Define un botón que permite limpiar / reiniciar el formulario.
<input type="reset">
●
Define un botón que enviar la información del formulario.
<input type="submit">
●
Formularios (Continuación..)
Input Attributes
A los elementos <input> de un formulario se le pueden definir ciertos atributos con el fin de
especificar un determinado comportamiento.
●value. Define un valor inicial para el elemento input.
●readonly. Define el campo como de solo lectura. El usuario no puede modificar su
contenido, aunque sí copiarlo.
Formularios (Continuación..)
Input Attributes
●disabled. Especifica que el elemento esta deshabilitado. Un elemento deshabilitado es
inutilizable y no permite ser seleccionado.
●size. Define el ancho visible, en caracteres, del componente input.
Formularios (Continuación..)
Input Attributes
●maxlength. Especifica la cantidad máxima de caracteres del elemento input.
●min - max. Especifican el valor mínimo y
máximo del componente.
Formularios (Continuación..)
Input Attributes
●multiple. Permite al usuario ingresar más de un valor en el elemento input.
●placeholder. Permite definir una corta descripción sobre el elemento input, que puede
ser relacionada a su contenido o el formato del mismo.
Formularios (Continuación..)
El componente <label> permite definir una etiqueta para ciertos elementos del formulario.
Utilizar este componente junto a elementos <input>, entre otros, permite lo siguiente:
Útil para los usuarios con lectores de pantalla, ya que leerá en voz alta la etiqueta cuando el
●
usuario se concentre en el elemento de entrada.
●Ayuda a los usuarios que tienen dificultades para hacer clic en regiones muy pequeñas
(como botones de opción o casillas de verificación), ya que cuando el usuario hace clic en el
texto, cambia el botón de opción o casilla de verificación.
<label> posee un atributo for que debe ser igual al valor del atributo id del componente <input>
Formularios (Continuación..)
El componente <select> define un conjunto de opciones de una lista desplegable.
●El elemento <option> permite definir una opción de la lista. Por defecto siempre se
selecciona la primera opción.
Utilizando el atributo size podemos definir la cantidad de opciones a mostrar.
●
Formularios (Continuación..)
Podemos modificar la selección por defecto utilizando el atributo selected sobre alguna
●
opción.
●El atributo multiple permite seleccionar más de una opción. La selección múltiple se
realiza presionando la tecla Ctrl (Control).
Formularios (Continuación..)
El componente <textarea> define una caja de texto de múltiples líneas.
●El atributo row especifica la cantidad de líneas visibles.
●El atributo col especifica el ancho del área de texto.
●Permite re-dimensionar su tamaño desde el control inferior derecho del componente.
¿Consultas?
