domingo, 27 de enero de 2013

Crear un botón "Volver Arriba" con HTML

Siempre me ha llamado poderosamente la atención la posibilidad de controlar modems GSM por el puerto serie de un servidor. Las posibilidades son grandes, siendo especialmente interesante la utilidad de enviar por SMS parámetros del sistema operativo, como carga de CPU, estado de la memoria, etc.

Como estoy más familiarizado con PHP y HTML, es la vía que tomé, aunque como veremos más adelante, no es sencillo. Poco a poco iremos desvelando algunos trucos para llevar el proyecto a cabo, pero ahora vamos a crear un elemento para nuestra web que aunque útil, suele pasar desapercibido, y siempre es bienvenido, el botón "Volver al Inicio" o "Back to Top". Este nos será de especial utilidad cuando tengamos una página que nos devuelva una larga lista de resultados.

En esencia es una etiqueta HTML de enlace <a> a la que añadimos la instrucción de "volver arriba" parametrizando el hipervínculo con: #top .La etiqueta de apertura quedaría así:

<a href="#top">

Tras esto incluiremos nuestro texto, por ejemplo "Back to Top" y por supuesto que no se nos olvide cerrar la etiqueta <a>, quedaría así:

<a href="#top">Back to Top</a>

Colocamos esta etiqueta en cualquier parte de nuestra web, siempre dentro del body:

<html>
<head>...</head>
<body>

<a href="#top">Back to Top</a>

</body>
</html>

Puedes ver un ejemplo de este tutorial desde este enlace.

Y esto es todo, en el próximo post veremos como hacer el "Back to Top" un poco más elegante, con CSS e imágenes.