Introducción:
En este post veremos los siguientes puntos:
- ¿Cómo insertar una imagen en HTML?
- ¿Cómo colocar una imagen en el <body> (cuerpo o background)?
- ¿Cómo insertar una imagen a un elemento (etiqueta) <button>?
- ¿Cómo insertar una imagen en un <input>?
El objetivo es aprender distintas formas de insertar una imagen en una página web, bien sin más preámbulo empecemos.
Insertar imagen en HTML (insert image in html)
Para insertar una imagen en HTML usamos la etiqueta <img> de la siguiente forma:
<!-- Insertando imagen en HTML --> <img src="Image/Avatar(Ney_Nehimy)2017_fondo blanco.png" alt="Ney">
Donde:
src: El src o (source) es la url o ruta de la ubicación de la imagen.
alt: Es usado para describir la imagen, esta descripción es visible cuando nuestra imagen no carga.
colocar imagen en el <body> (place image in <body>)
Bueno, para poner una imagen de fondo en HTML vamos a usar un poco de CSS. En el siguiente ejemplo veremos como poner una imagen en el <body> desde el archivo HTML.
<!-- Insertando imagen en el body -->
<style>
body{
background-image: url('Image/minions(Ney).svg');
}
</style>
Insertar imagen en el elemento <button> (insert image in <button>)
En este caso lo que buscamos es que la imagen funcione como un botón, es decir que al hacer clic en la imagen se ejecute algo.
En este ejemplo al hacer clic el la imagen nos va a redirigir a otro enlace.
<!-- Incrustando imagen en un elemento <button> -->
<button name="button">
<a href="https://twitter.com/ney01010">
<img class="button-img" src="Image/NekoGrande1.png">
</a>
</button>
Insertar imagen en el elemento <input> (insert image in <input>)
<input type = «image»> indica que una imagen funcione como un botón, en este ejemplo también vamos a redirigir a la misma url del ejemplo anterior; pero esta vez con el <input>.
<!-- Incrustando imagen en un elemento <input> -->
<form action="https://twitter.com/ney01010">
<input type="image" src="Image/icono_ney.png" alt="ImageNey" class="HeadNey">
</form>
Captura
Aquí, vemos como queda cada una de las imágenes que insertamos mediante código, no que muy bonito; pero esto es solo una practica, no solo para insertar una imagen sino también para usar distintas etiquetas o elementos de HTML.
Nota:
Para ver estos ejemplos ejecutados o funcionando clic aquí.
También puedes descargar el código HTML y CSS con todos los ejemplos y las imágenes en este enlace.
Extra:
Finalmente para saber como funcionan las rutas relativas o absolutas en HTML clic en
Rutas, directorios y archivos en html.
