Puedes ver el contenido de este vídeo junto con su curso en el modo vídeo (similar a Udemy) si pulsas aquí.

Imágenes en HTML

Por ahora todo lo que hemos visto en HTML está relacionado con texto.

Es hora de que vayamos un poquito más allá y veamos temas relacionados con las imágenes y como incluirlas en nuestra página.

1 – Acceso a las imágenes.

Para acceder a nuestras imágenes debemos de tener en cuenta donde están ubicadas, estas pueden estar ubicadas en internet. Por lo que deberemos utilizar la URL que nos proporciona el navegador.

O, por el contrario, y el caso común, estarán ubicadas en nuestro servidor, u ordenador en este caso.

En nuestro caso, las tenemos en una carpeta llamada “img”. ¿Y porque digo esto?

Es importante tenerlo en cuenta, ya que para acceder necesitamos saber su ruta absoluta o relativa.

1.1   – Rutas absolutas y relativas

Cuando accedemos a un fichero:

  1. Ruta relativa
    • Para ubicar un fichero en una ruta relativa, debemos empezar a indicar donde se sitúa ese fichero partiendo en la posición que nos encontramos. En nuestro caso la ruta será “img/imagen1.jpg”
  1. Ruta absoluta
    • Si utilizamos una ruta absoluta, debemos partir del directorio raíz de nuestro ordenador, como puede ser “C:/users/NetMentor/Cursos/ProgramacionWeb/Video03/Ejemplo/img/imagen1.jpg”

ruta relativa y absoluta

En el mundo laboral depende mucho de que se este haciendo decidiremos si una ruta u otra, ya que por ejemplo, en los entornos de finanzas, requieren dejar un fichero en cierta carpeta, en ese caso, se utilizaría absoluta, mientras que para las imágenes de nuestra página web, podríamos utilizar relativa.

2 - Insertar una imagen en nuestro HTML

Para insertar una imagen tenemos que indicar la etiqueta <img> y una vez tenemos esa etiqueta, debemos indicar el atributo src el cual nos indica la ubicación de la imagen. Ya sea online o dentro de nuestro ordenador.

<img src="img/imagen1.jpg" />
<br/>
<img src="https://www.netmentor.es/Imagen/30d887b1-420d-44b2-abcd-4d5de48be70c.jpg"/>

3 - Atributos adicionales para las imágenes

Por supuesto disponemos de una serie de atributos adicionales para complementar a una imagen.

No son muy comunes de usar ya que normalmente lo realizaremos todo en estilos css, pero aún asi, pueden ser utilizados

  1. Atirbutos de tamaño
    • Si por ejemplo queremos cambiar el tamaño de una imagen, podemos indicar el atributo width y height los cuales indican altura y anchura para ambos podemos incluir el numero en pixeles, o en porcentaje.
<img src="img/imagen1.jpg" width="300" height="400" />
  1. Texto Alternativo
    • Cuando incluimos una imagen es recomendable incluir la etiqueta alt la cual nos indica un texto alternativo en caso de que la imagen no se pueda cargar.
    • Además, esta etiqueta alt, es la que utilizan principalmente los motores de búsqueda cuando buscamos imágenes en internet.
<img src="img/imagen1.jpg" width="300" height="400" alt="imagen ejemplo insertar imagnes en html" />

Uso del bloqueador de anuncios adblock

Hola!

Primero de todo bienvenido a la web de NetMentor donde podrás aprender programación en C# y .NET desde un nivel de principiante hasta más avanzado.


Yo entiendo que utilices un bloqueador de anuncios como AdBlock, Ublock o el propio navegador Brave. Pero te tengo que pedir por favor que desactives el bloqueador para esta web.


Intento personalmente no poner mucha publicidad, la justa para pagar el servidor y por supuesto que no sea intrusiva; Si pese a ello piensas que es intrusiva siempre me puedes escribir por privado o por Twitter a @NetMentorTW.


Si ya lo has desactivado, por favor recarga la página.


Un saludo y muchas gracias por tu colaboración

© copyright 2024 NetMentor | Todos los derechos reservados | RSS Feed

Buy me a coffee Invitame a un café