Clase 03. HTML 3
Cargado por
Ana Laura GarciaClase 03. HTML 3
Cargado por
Ana Laura GarciaFULL STACK PYTHON
Clase 3
HTML 3
Multimedia y Tablas
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, ● Formularios.
● Rutas absolutas y relativas. iframes. ● Etiquetas semánticas.
● Elementos en bloque y en ● Tablas. ● Subida a un hosting
línea. ● Herramienta de inspección. 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 el
elemento <img/> y otras es mediante CSS (que veremos más adelante).
Esta etiqueta requiere de dos atributos obligatorios: src (de source) y alt (de alternative).
Utilizamos alt para:
● Posicionamiento en buscadores (extrayendo palabras clave).
● 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:
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 [Link] 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 [Link]
3. Seleccionar el archivo, convertirlo y descargarlo
4. En el head colocar la referencia con: link rel="icon" href="[Link]"
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: [Link]
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: [Link]
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.
● width y height: ancho y alto.
● frameborder: 0: sin borde y 1: con borde
● scrolling: habilita las barras de desplazamiento si el contenido no cabe
en el iframe. Con “yes” aparecen siempre, con “auto” aparecen sólo si es
necesario y con “no” no aparecerán nunca.
Iframe
Mapas de Google:
1. Ingresar a [Link]
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:
1. Buscar un video en YouTube
2. Clic derecho en el video - Copiar código de
inserción.
3. 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 columnas (td) siempre van dentro de las
filas (tr). Si queremos agrupar celdas de una
misma celda o columna hay que agregar los
siguientes atributos:
● colspan (column span = número de
celdas a abarcar)
● rowspan (row span = número de celdas a
abarcar).
Tablas | Colspan y Rowspan
Validar código HTML
Existen sitios para validar las
páginas HTML. Ejemplo:
[Link]
Copian el contenido de la página,
la chequean, verifican los errores
y corrigen.
Ahí se usó una etiqueta <h7> que
no existe y aquí marca el error.
Las advertencias se muestran en
amarillo y los errores en rojo.
Inspeccionar páginas
Se puede inspeccionar
sitios web para corregir
errores. Para hacer eso, se
debe hacer clic con el
botón derecho en la web y
seleccionar Inspeccionar o
presionar F12.
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 [Link] 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
