Seleccionar página

Hola buenos días a todos, seguimos con el apartado de Guía HTML, categoría de Diseño web, y en concreto la creación de imágenes y enlaces, os mostraré pequeños trucos para una mejor accesibilidad en estos elementos en una web. Espero que os guste.

Guía HTML -Enlaces

Para incluir un enlace en un entorno HTML se hace con el siguiente código:

<a href=”url”>Texto (Pincha aquí) </a>

Si queremos ir moviéndonos por una misma página de un site web tendremos que crear marcadores para luego hacer referencia a ellos. Estos marcadores yo los llamaría pos-it virtuales que se pueden referenciar en un momento determinado.

El código para crear estos marcadores es  con el código:

<a name=”parte1″>Texto (Pincha aquí) </a>

* Este enlace no estará subrayado como un enlace como tal simplemente es un marcador.

Ejemplo: W3Schools

Para dirigimos a este tipo de marcadores tenemos que poner el código similar al primero que he mostrado pero cambia el tipo de url.

<a href=”#parte1″>Texto (Pincha aquí) </a>

En vez de poner una dirección http://… ponemos el nombre del marcador incluyendo delante de este una almohadilla (#).

Esto es muy utilizado en algunas páginas que incluyen un enlace llamado VOLVER ARRIBA o VOLVER AL MENÚ.

Para terminar este apartado quiero comentaros, el destino que yo suelo utilizar, una página web suele ir a los enlaces en una misma ventana perdiendo la página origen que estaba el enlace para que no ocurra eso deberemos de poner el atributo TARGET, este atributo tiene distintos valores.

  • _blank: Enlace que se abrirá en una pestaña nueva. (Es la más recomendable)

El resto son para el uso de frames, forma de crear webs ya obsoleta

  • _parent
  • _self
  • _top

Guía HTML -Imágenes

Las imágenes son uno de los pocos elementos que contienen etiquetas NO PAREADAS, ¿que significa?,  pues quiere decir que no está compuesto por 2 etiquetas como el enlace, sino que solo tiene uno. Aquí os muestro la diferencia:

Enlace: <a name=”parte1″>Texto (Pincha aquí) </a>

Imagen: <img src=”url de la imagen”/>

Para que se valide correctamente la imagen en la web de W3C deberemos incluir el atributo ALT, que se utiliza para que si por si acaso se elimina la imagen saber que imagen iría ahí, también favorece la accesibilidad. Entonces quedaría así:

<img src=”url de la imagen” alt=”descripción de la imagen”/>

Ejemplo terminado:

<img src=”http://www.jardinmadera.es/images/stories/virtuemart/product/casita_madera_brest.jpg” alt=”casita de madera”/>

Entonces los usuarios verán esto:

Casita de madera

Ejemplo de imagen

Espero que os haya gustado y servido. Haz tus pruebas y comentas el resultado. Y si tenéis alguna duda respecto a los códigos podéis acudir a la web de w3School o ponerme un comentario.

Un saludo.

Regi