Imagenes
En esta parte del curso aprenderas a cómo colocar imagenes. En este sentido, tendremos que usar la etiqueta <img> junto con su atributo <src>. El atributo src contiene una ruta que apunta a la imagen que deseas mostrar en la página, que puede ser una URL relativa o absoluta.
Por ejemplo, si la imagen que deseas poner se encuentra en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:
<img src="Imagen.png">
En cambio, si la tienes en otra carpeta, tendrás que colocar lo siguiente:
<img src="Imagenes/Imagen1.png">
Si tienes una referencia absoluta, escribiras la siguiente estructura:
<img src="https://www.example.e/ejem/ejemplo1.jpg">
Atributo alt
Es aquella descripción textual que tiene la imagen para usarla en situaciones en donde la imagen no puede ser vista o tarda demasiado por una conexión lenta a internet.
<img src="Imagenes/Imagen1.png alt="Esta es una imagen que no existe">
Y se vería de la siguiente forma:
Ancho y altura
Para especificar las dimensiones de una imagen, se utilizan los atributos <width> y <height>
Tendremos el siguiente ejemplo:
<img src="ImagenesHtml/Imagen.png" width="380px" height="240px">
La cual se mostraria así:
Vídeos
En esta parte del curso aprenderas a cómo colocar vídeos de una forma muy básica.
En este sentido, tendremos que usar la etiqueta <video> junto con su atributo <src>. Recordemos que la etiqueta <src> contiene una ruta que apunta hacia el vídeo que deseas mostrar en la página, que puede ser una URL relativa o absoluta.
Esta es la estructura base de cómo se inserta un vídeo:
<video src="video.mp4"></video>
Si deseas mostrar un vídeo de YouTube en tu página web, tienes que realizar lo siguente:
- Ve al video de YouTube que deseas insertar.
- Haz clic en el botón "Compartir" debajo del video.
- Selecciona "Insertar".
- Copia el código proporcionado por YouTube.
Este es un ejemplo de un vídeo usando el código que nos da YouTube
Atributos
Los atributos más utilizados a la hora de insertar un vídeo, son los siguientes:
| Atributo | Descripción |
|---|---|
| autoplay | Comienza a reproducir el video automáticamente. |
| loop | Vuelve a iniciar el video cuando finaliza su reproducción |
| muted | Establece que el video se reproduzca con sonido muteado |
| controls | Muestra los controles de reproducción. |
| poster | Muestra una imagen a modo de presentación. |
para alumnos de UPIICSA