INSERTAR IMAGEN, SONIDO Y VIDEO EN HTML

INSERTAR IMÁGENES

Para poner una imagen simple en una página web, utilizamos el elemento <img>.

Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

<img src="dinosaur.jpg">

Si la imagen estaba en el subdirectorio, images o imagenes, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores SEO), entonces deberías incrustar la imagen así:

<img src="images/dinosaur.jpg">

<img src="imagenes/dinosaur.jpg">

y así sucesivamente.

INSERTAR SONIDO

1. Coloca la propiedad control a la etiqueta de audio para mostrar los controles de reproducir, pausar, volumen, etc.
2. En la etiqueta source debes colocar el audio a reproducir, y tipo de formato.
3. Debes de agregar un mensaje para indicar los casos en el que el navegar no soporte audio de html.

ejemplo:

Entre las etiquetas body coloca el código siguiente para agregar el reproductor de audio.

1 2 3 4

<audio controls>     <source src="forelisa.mp3" type="audio/mp3">         Tu navegador no soporta audio HTML5. </audio> Ejecuta tu archivo html (con o sin ejecutar en un servidor) y podrás observar un reproductor como el siguiente. El diseño es por defecto del explorador. INSERTAR VIDEO Un primer ejemplo muy básico para colocar un video en nuestra página web: <video src="video.mp4" width="640" height="480"></video> Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x480, pero se verá como una imagen, ya que no muestra los controles del video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos controls o autoplay. Otro ejemplos básicos para colocar videos en nuestra página: <!-- Ejemplo 1 --> <video src="video.webm" poster="presentacion.jpg" controls></video> <!-- Ejemplo 2 --> <video src="video.mp4" autoplay muted loop></video> En este caso cargamos un video, pero que no se mostrará porque se ha indicado que se utilice una imagen de presentación que se mostrará hasta que el usuario pulse en el botón de reproducir de los controles. En el segundo ejemplo, tenemos un video que se reproduce automáticamente al cargar la página, en silencio y en bucle, iniciándose una y otra vez. Acceso a segundos concretos  Utilizando los fragmentos multimedia se pueden conseguir algunas acciones interesantes, como por ejemplo especificar el momento concreto del video (o audio) en el que se quiere empezar a reproducir o terminar de reproducir. Veamos unos ejemplos: <!-- Ejemplo 1 --> <video autoplay controls src="video.mp4#t=15"></video> <!-- Ejemplo 2 --> <video autoplay controls src="video.mp4#t=25,45"></video> En el primer caso, reproducimos el video a partir del segundo 15 del mismo, mientras que en el segundo caso, reproducimos el video a partir del segundo 25 y terminará de reproducirse en el segundo 45.

TABLAS EN HTML EJERCICIOS INTRODUCTORIOS

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con un ejemplo:

<table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos previamente. Aquí se hace evidente como las celdas, que han sido numeradas de acuerdo a su aparición en el código, siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.

 CELDAS DE ENCABEZADO

Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. 

En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.

<table > <tr> <th>Hoy</th> <th>Mañana</th> <th>Domingo</th> </tr> <tr> <td>Soleado</td> <td>Mayormente soleado</td> <td>Parcialmente nublado</td> </tr> <tr> <td>19°C</td> <td>17°C</td> <td>12°C</td> </tr> <tr> <td>E 13 km/h</td> <td>E 11 km/h</td> <td>S 16 km/h</td> </tr> </table>

Hoy	Mañana	Domingo
Soleado	Mayormente soleado	Parcialmente nublado
19°C	17°C	12°C
E 13 km/h	E 11 km/h	S 16 km/h

COMO CREAR UNA PAGINA WEB COMPLETA CON HTML

https://www.youtube.com/watch?v=yJcoqOBklK4

https://www.youtube.com/watch?v=9l1hicPrRNM

https://www.youtube.com/watch?v=qDEoCxwJ21Q

https://www.youtube.com/watch?v=LP9MBIj-u_0

https://www.youtube.com/watch?v=C-BJWFWpJjA

https://www.youtube.com/watch?v=r78ua8t3MLw

https://www.youtube.com/watch?v=PaoCTSK8V9M