Insertar imagen con HTML
Llego el momento de insertar nuestra primera imágen con HTML, ya sabemos como crear parrafos, saltos de linea, enlaces y ahora imagenes, nuestra pagina web quedará mucho mas vistosa y con mejor aspecto.
Como dijimos antes, todo en HTML se hace con etiquetas, la que sirve para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imágen.
Para insertar una imágen lo haremos así:
<img src="ubicación" alt="descripción" />
Opa! apareció un nuevo atributo, pero no te asustes, "alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella.
Vemos como queda en el editor HTML NVU, en la vista "Código fuente", si cambiamos a la pestaña "Vista preliminar" veremos el resultado final:
Ahí vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de todas las lecciones anteriores. Pero ¿que pasa si queremos crear un enlace en la imagen para que cuando hagamos clic en ella nos abra otra dirección? eso es lo que voy a explicar ahora :)
Crear enlace en imágen
Para crear un enlace en la imágen para que al hacer clic en ella nos abra otra pagina, solo debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma:
<a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a>
Bastante simple ¿no? ahora comenzaremos a ver estilos CSS, una tecnología que te ahorrara mucho trabajo, ya verás :)
Siguiente lección: estilos CSS
Mira el video de esta lección
Insertar imagen con HTML - Séptima Lección - ComoCrearUnSitioWeb.com from Lucas Muñoz on Vimeo.
Si tienes alguna duda puedes entrar al foro y registrarte para que te ayudemos entre todos.