FULL STACK FRONTEND
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Clase 02 Clase 03 Clase 04
HTML 2 - Continuando con HTML HTML 3 - Multimedia y Tablas HTML 4 - Formularios y subida al
servidor
● Multimedia con HTML:
● Listas y enlaces. imágenes, video, audio, iframes. ● Formularios.
● Rutas absolutas y relativas. ● Tablas. ● Etiquetas semánticas.
● Elementos en bloque y en línea. ● Herramienta de inspección. ● Subida a un hosting gratuito.
● Validación de nuestro HTML.
Multimedia con HTML
Imágenes, video, audio, iframes
Imágenes
Para mostrar una imagen en una página tenemos dos formas de hacerlo. Una es usando la etiqueta <img> y otras es mediante
CSS (que veremos más adelante).
Esta etiqueta tiene dos atributos: el obligatorio src (de source) y alt (de alternative).
Utilizamos alt para:
● Personas con dificultades visuales (lectores de páginas Web).
● Cuando la imagen no se encuentra disponible.
Con height y width podemos definir el alto y el ancho de la imagen (siempre en píxeles):
Podemos utilizar una imagen como enlace combinando las etiquetas <a> e <img>
Favicon
Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista de marcadores
(favoritos). El tamaño en la barra de direcciones es de 16x16 píxeles.
Para agregarlo debemos tener la imagen .png que deseamos colocar como ícono en formato .ico, que se puede
convertir desde https://convertico.com/ y luego agregar en el head de nuestro documento HTML lo siguiente:
Los pasos para colocarlo son los siguientes:
1. Buscar o crear una imagen .png
2. Ingresar en https://convertico.com/
3. Seleccionar el archivo, convertirlo y descargarlo
4. En el head colocar la referencia con: link rel="icon" href="nombredelarchivo.ico"
Audio
La etiqueta <audio> acepta como atributos:
● preload: es usado en el elemento audio para almacenar temporalmente (buffering)
archivos de gran tamaño. + info
● src: puede ser una URL del archivo de audio o la ruta al archivo local + info
● controls: muestra los controles estándar para audio en una página web + info
● autoplay: hace que el audio se reproduzca automáticamente + info
● loop: hace que el audio se repita automáticamente + info
● muted: especifica que la salida de audio debe estar silenciada + info
Más información: https://www.w3schools.com/tags/tag_audio.asp
Video
La etiqueta <video> acepta como atributos:
● controls: permite activar los controles del player + info
● poster: muestra una imagen a modo de presentación + info
● autoplay, loop, muted, preload y src: misma función que en audio.
● height: establece la altura del reproductor de video (pixeles) + info
● width: establece el ancho del reproductor de video (pixeles) + info
Más información: https://www.w3schools.com/tags/tag_video.asp
Iframe
Se utiliza para incrustar otro documento HTML que se cargará en forma independiente
en la página actual. Podemos agregar: contenidos de terceros, interfaces de usuario,
videos de YouTube, mapas de Google Maps y banners de publicidad desde otro sitio.
● src: Indica la ruta del recurso a incrustar.
● width y height: ancho y alto.
● loading: Indica al navegador cuando cargar el <ifame>.
Iframe
Mapas de Google:
1. Ingresar a https://www.google.com.ar/maps
2. Buscar una dirección (ej: Pueyrredón 400).
3. Compartir – Insertar un mapa – Copiar HTML.
4. Pegar el código en nuestro editor.
Videos de YouTube:
5. Buscar un video en YouTube
6. Clic derecho en el video - Copiar código de inserción.
7. Pegar el código en nuestro editor.
También podremos colocar otros mapas gratuitos, contenido de
Spotify, Vimeo e inclusive incrustar otras páginas web.
Tablas
Tablas
● Las tablas se usan para representar datos.
● El ejemplo más común de tablas son los documentos de Excel.
● En HTML hay que definir una etiqueta para cada parte de la tabla.
● Las tablas no se usan para maquetar (hoy se maqueta por CSS).
<table>: Representa a todo el elemento tabla.
<tr>: Table row: representa una fila o registro.
<td>: Table data cell: representa a cada celda.
<th>: Table header: representa a una celda de
encabezado.
Tablas | Estructura básica
Tabla de 3 <tr> (filas), de las
cuales una de ellas tiene
encabezado <th> y dos
columnas, dadas por los <td>
Tablas | Colspan y Rowspan
Son atributos que permiten que una celda ocupe más de
una columna o más de una fila. Es lo que comúnmente
llamamos “combinar celdas”.
Las celdas (td) siempre van dentro de las filas (tr). Si
queremos agrupar celdas de una misma fila o columna
hay que agregar los siguientes atributos:
● colspan (column span = número de columnas a
abarcar)
● rowspan (row span = número de filas a abarcar).
Tablas | Colspan y Rowspan
Validar código HTML
Existen sitios para validar las páginas
HTML. Ejemplo: validator.w3.org
Copian el contenido de la página, la revisan,
verifican los errores y corrigen.
En el ejemplo se utilizó una etiqueta <h7>
que no existe y marca el error. Las
advertencias se muestran en amarillo y los
errores en rojo.
Tarea para el Proyecto:
● Familiarizarse con el uso de servicios hosting gratuitos.
● Buscar e incorporar elementos necesarios mediante iframe.
● Comprobar el código escrito en https://validator.w3.org o similares.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.
● Realizar los Ejercicios obligatorios.
Todo en el Aula Virtual.
Muchas gracias por tu atención.
Nos vemos pronto
