Trabajando con etiquetas imágenes y vinculos

En esta nueva lección aprenderemos a utilizar las etiquetas de enlace e insertar imágenes, etiquetas muy necesarios en nuestro camino de Diseñar Sitios Webs.

Empezaremos primero con las etiquetas de imagen

Etiqueta IMG: insertar imágenes

Uno de los elementos más usado en el diseño de páginas web son las imágenes.

La etiqueta que nos permite insertar imágenes es <img>, es una de las pocas etiquetas que carece de cierre.

Veamos un ejemplo de como aplicar:

Como vemos, esta etiqueta necesita que le asignemos un atributo src, con la ruta donde se encuentra la imagen.

También podemos añadir rutas de imágenes que están en la web, aquí la presente animación :

El resultado sería:

Tener en cuenta que si la web dejará de funcionar o no tengamos acceso a internet no podremos visualizarlo.

Atributos de la etiqueta IMG

Atributo ALT

Es opcional, E}entre comillas se escribe el texto que se mostrará si la imagen no carga o no existe.

Este atributo es más usado para posicionar las imágenes (SEO), es muy usado en posicionamiento Web.

Ancho y Alto: width height

Otro de los atributos que podemos usar son los atributos width y height para especificar una medida de la imagen, ejemplo:

Tener en cuenta que es recomendable aplicar sólo uno de ellos (ancho ó alto) para mantener la proporcionalidad en el diseño de la imagen.

De no aplicarse se mostrará en tamaño original.

 

Centrar imágenes

Para centrar imágenes podemos utilizar la etiqueta <center> … </center>

 

Vínculos entre páginas HTML

Para crear vínculos entre páginas HTML podemos aplicar la etiqueta <a>, su aplicación sería la siguiente:

Tener en cuenta que debemos de haber creado la página productos.html

Atributo TARGET

_self

Este atributo es aplicado cuando deseamos la página se visualice en la misma ventana, es el valor por defecto

_blank

indica nueva ventana

 

Vinculo dentro de una página HTML

En HTML 5, para dirigir un enlace a un lugar de la misma página, añadimos un identificador id al elemento al que se desea vincular.

Primeramente vamos a declarar mediante un ID la sección de destino

Luego a nuestro enlace añadimos:

 

Vínculos a páginas HTML con ID específico

Podemos utilizar la etiqueta de vínculo <a> junto al enlace de un lugar en específico dentro de un archivo HTML externo, su aplicación sería:

Primero en página HTML donde deseamos nos lleve el enlace creamos el ID:

Luego en la página HTML donde aplicaremos el vinculo, añadiremos:

 

Practica 01

Enlazar hoja de estilos CSS a un documento HTML

Para crear una hoja de estilos CSS en nuestro dreamweaver nos vamos a Archivo / Nuevo, elegimos CSS

aparecerá la ventana de la hoja de estilos css

Ahora vamos a guardarlo, presionamos la combinación de teclas CTRL + S (Guardar), lo guardamos dentro del directorio CSS con el nombre estilo

Ahora nos vamos al HTML y vinculamos con la hoja de estilos CSS. Si estamos la ultima versión del dreamweaver que trabaja con el EMMET podemos scribir link y puego presionar TAB

Cuando vinculamos archivos HTML y CSS notamos que en la parte superior se muestra de la siguiente manera:

Primer trabajo

La vista final deberá ser el siguiente Click Aquí

Segundo Trabajo

Aquí la vista del segundo trabajo Click Aquí

Descargar imágenes

Para descargar las imágenes desde aquí