Enlaces en HTML by NESTicle 8Bit

Semana 2

Enlaces en HTML by NESTicle 8Bit

Semana 2

Hola a todos, hoy aprendern como insertar imgenes en un sitio web mediante la etiqueta <img>, es sin duda uno de los aspectos ms vistosos y atractivos de las paginas web. Nuestra carpeta de trabajo crearemos una carpeta llamada Imgenes donde descargaremos estas imgenes (o pueden usar algunas que ustedes prefieran):

http://i.imgur.com/WQcY3.jpg || http://i.imgur.com/5KYpE.jpg
y las guardaremos dentro de la carpeta que anteriormente hemos creado.

Ahora por fuera de la carpeta crearemos un archivo llamado imgenes.html donde le pondremos las etiquetas que hemos aprendido anteriormente.

La primera practica ser insertar una imagen dentro de la pagina web, mediante la etiqueta <img /> que no posee etiqueta de cierre, es parecida a la etiqueta <br/> y <hr/> que se cierran solas. <img src="imagenes/nocturne.jpg" /> Ahi lo que hicimos fue mediante la etiqueta <img> avisarle al navegador que aparecer una imagen mediante el atributo src de Source que nos permite localizar la imagen destino indicndole la ruta.

Enlaces en HTML by NESTicle 8Bit

Semana 2

Enlaces en HTML by NESTicle 8Bit

Semana 2

Atributo ALT
Veremos algunos atributos importantes que nos servirn a nosotros para el SEO del sitio, para cuando caduque la url o no este valida aparezca el texto del alt y los visitantes sepan que hubo ah. Otra propiedad que se le atribuye ltimamente es que algunos navegadores y sistemas operativos la utilizan para que las personas con minusvala en la vista, puedan or la descripcin de la imagen. Haremos un pequeo ejemplo donde pondremos una supuesta imagen que no existe para que vean el funcionamiento del atributo ALT. <img src="abc/123.jpg" alt="Imagen de 123" /> Y visualizado en el navegador quedara asi

Atributo TITLE
Este atributo ya lo conocemos, es para agregarle un ttulo a la imagen cuando pongamos el cursor sobre el elemento. <img src="imagenes/nocturne.jpg" alt="Nocturne title="Nocturne Pesadilla Eterna />

Enlaces en HTML by NESTicle 8Bit

Semana 2

Atributo WIDTH Y HEIGHT

Estos atributos los utilizaremos para redimensionar imgenes acomodando la altura (height) y la anchura (width), estas propiedades las utilizaremos mucho en CSS as que desde ya vayan jugando con ellas :D En la imagen anterior vamos a redimensionarla a 400px x 200px. <img src="imagenes/nocturne.jpg" height="200px width="300px" /> Y ahora lo visualizamos en el navegador.

Atributo BORDER
Sirve para darle un borde a la imagen de color negro (por defecto). <img src="imagenes/nocturne.jpg" border="15" />

Enlaces en HTML by NESTicle 8Bit

Semana 2

Atributo ALIGN
Sirve para alinear la imagen a la posicin que ustedes quieran, los valores posibles son: Align=left => Alineacin hacia la izquierda Align=right => Alineacin hacia la derecha Align=middle => Se centra dependiendo del texto Align=bottom => Alinea el texto debajo de la imagen Pueden ver los ejemplos en vivo desde el siguiente enlace

Enlace en las Imgenes

A veces es necesario ponerle a nuestras imgenes algn mensaje y que redireccione a alguna parte cuando se le da click, para lograr esto, juntaremos los conocimientos adquiridos en el anterior pdf y la de esta para lograr hacer una imagen un enlace.. Cmo?, con las etiquetas <a> y <img> Ahi lo que hicimos fue decirle a la etiqueta <img> que pusiera la imagen que hay en el enlace http://i.imgur.com/RtRbr.png y luego en la etiqueta <a> que se abriera google en una nueva ventana cuando se le presionara con un clic. Vemos el ejemplo en el navegador: