Estas aprendiendo html para montar una página web y aún no sabes cómo insertar imágenes en html. No temas, es algo muy sencillo y no hace falta ser un friki informático para poder hacerlo. Copiando los fragmentos de código que dejamos a continuación no hará falta saber mucho más:
Cómo poner imágenes en HTML
Lo primero de todo es tener muy claro que foto quieres subir a la web, si aún no te has decidido existen bancos de imágenes donde puedes comprar fotos en el tamaño en el que estés interesado.
Bancos gratuitos:
Bancos de pago:
- Fotolia
- Shutterstock
- DepositPhotos
- 123rf
El siguiente paso es acceder al código html de la web y tendrás que insertar el siguiente fragmento en el lugar dónde quieres que salga la fotografía:
<img src="/foto.jpg" alt="Título de la foto" height="12px" width="5px"/>
Y ahora dirás, ¿qué significan todas esas letras e iconos extraños? A continuación explicamos cada una de ellas:
- img src=: Este fragmento identifica dónde se encuentra la imagen, ya puede ser que esté subida en el servidor o en otra ubicación de internet. Dónde “/foto.jpg” es el nombre de la imagen que queremos que aparezca.
- alt=: En este fragmento se añadirá el título que identifica la imagen (el texto por el que Google reconocerá la imagen). Si en algún momento la imagen deja de funcionar, lo que los usuarios verán será este texto.
- height= y width=: Con estos fragmentos se identifican el alto (height) y el ancho (width) que tendrá la imagen. Estos se miden en píxeles.
Un pixel es la unidad más pequeña y diminuta de una imagen digital y está presente en un inmensurable número para formar una imagen completa.
Vamos a lanzarnos con una prueba –> yo quiero insertar esta imagen que se encuentra subida en nuestro servidor y está en esta URL: https://www.soloseoysem.es/blog/wp-content/uploads/Logo-SoloSEOySEM-positivo2.svg
Vamos a copiar el código que hemos puesto anteriormente:
<img src="https://www.soloseoysem.es/blog/wp-content/uploads/Logo-SoloSEOySEM-positivo2.svg" alt="banner home soloseoysem" width="1000" height="218″ />
En dónde pone img src= añadiremos la url de la imagen, en dónde pone alt= ponemos el título de la imagen y después pondremos el ancho y el largo (si no se añade el ancho y el largo, se pondrá el tamaño por defecto).
Si entráis en el código podréis verlo de esta manera:
Esto es un código básico, luego a la imagen podéis darle estilos, como alineado, bordes, etc.
Insertar una imagen en HTML no es algo muy difícil y aunque normalmente las fotos suelen añadirse a través de un gestor de contenidos como WordPress, hay veces que no queda más remedio que poner la imagen con código.
¿Tienes alguna duda sobre cómo poner imágenes en HTML? Pues no te cortes y pregúntanos escribiendo a info@soloseoysem.es.
