Artículos
→ HTML →

Enlace a una parte concreta de la página

Creado: 21/Ene/2007 Actualizado: 07/Dic/2023

En varios artículos de Linea de Código hemos visto la importancia de los enlaces dentro de la World Wide Web y en particular dentro de la creación de páginas web HTML. Lo más normal suele ser el enlazar una página con otra. De esta forma, una vez que pulsemos en el enlace, nos posicionaremos en el principio de la página enlazada. Pero puede ser que lo que nos interese sea llevar al usuario a una parte en concreto del nuevo documento. Por lo que vamos a ver cómo podemos crear un enlace a una parte concreta de la página.

HTML nos proporciona un mecanismo mediante el cual podemos enlazarnos a una parte en concreto de la página.

Para ello lo primero que tenemos que hacer es definir un ancla (queda más bonito en ingles… anchor). Este será un punto de una página al cual querremos crear, posteriormente, un enlace.

En las primeras versiones de HTML para crear un ancla utilizábamos el elemento a de HTML y en especial su atributo name.

<a name="tema1"></a>Tema 1

En nuestro ejemplo hemos definido un ancla al que le hemos llamado «tema1». Ya que la parte en la que está posicionado dentro del documento sería la relativa al «Tema 1».

Si bien el estándar HTML ya no contempla el atributo name dentro del elemento a. Y para poder crear el ancla vamos a recurrir al atributo id sobre los elementos. Por ejemplo podemos hacerlo sobre un elemento de cabecera h2 de la siguiente forma.

<h2 id="tema1">Tema 1</h2>

Recuerda que el nombre identificador que le pongamos al ancla es muy importante, ya que será el mismo que tendremos que utilizar a la hora de realizar el enlace.

Una vez definido el ancla, lo siguiente será el realizar en enlace a dicho ancla. El elemento que necesitaremos en este caso es el mismo que para realizar el ancla, es decir, a. Si bien, ahora utilizaremos el atributo href. Atributo que se utiliza para indicar la URL del enlace.

Para crear un enlace al ancla, el valor del atributo href será el nombre de la página web que contenga el ancla, seguido de una almohadilla (#) y del nombre que le dimos al ancla.

De esta manera el enlace al «Tema 1» será de la siguiente forma:

<a href="#tema1">Enlace al Tema 1</a>

En este caso, antes de la almohadilla no hemos puesto ningún nombre de página. Ya que hemos asumido que el enlace y el ancla se encuentran dentro de la misma página. Si, por ejemplo, el ancla estuviese dentro de la página «historia.html», nuestro enlace a la parte concreta de la página quedaría de la siguiente forma:

<a href="historia.html#tema1">Enlace al Tema 1</a>

Con esto ya habremos conseguido crear un enlace a una parte concreta de la página con HTML.

Código Fuente

Descárgate el código fuente de Enlace a una parte concreta de la página
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Enlace a una parte concreta de la página

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Artículos
→ Groovy →

Hola Mundo en Groovy

Creado: 20/Ene/2007 Actualizado: 12/Ene/2025

Pongámonos manos a la obra y veamos que pasos hay que dar para hacer el primer programa con Groovy. Y claro, no podría ser otro que el programa de Hola Mundo.

Lo primero que tenemos que hacer es descargarnos e instalar el kit de desarrollo de Groovy. Para ello te tienes que leer el artículo Instalar Groovy, de nuestro Tutorial Groovy. En él se te explica como configurar de una manera muy sencilla el entorno.

Una vez tengamos nuestro entorno a punto, crearemos un fichero que llamaremos «Hola.groovy». Para ello podemos utilizar cualquier editor de textos.

La sentencia que sirve para volcar datos a consola es println(texto). Así, la línea de código que tendremos que poner en el fichero «Hola.groovy» será la siguiente:

println("Hola Mundo")

Para ejecutar el script deberemos de utilizar el script ant (groovy) que viene con el entorno de desarrollo. Tendremos que teclear lo siguiente en nuestra línea de comando:

groovy Hola.groovy
→ Groovy →

Tutorial Groovy – Instalar Groovy

Creado: Actualizado: 16/Dic/2025

 

<< Qué es Groovy | Indice del Tutorial | Primer desarrollo en Groovy >>

Si queremos empezar a desarrollar sobre un entorno Groovy, lo primero que tendremos que hacer es instalar su entorno de desarrollo. Los pasos para hacerlo son:

1. Descargarse Groovy

Para descargarse el entorno de desarrollo Groovy deberemos de ir a la página de Groovy y descargarnos la distribución que esté disponible. Esta es un fichero ZIP.

La distribución actual de Groovy es groovy-1.0

2. Descomprimir el fichero

Lo siguiente será descomprimir la distribución en nuestro ordenador. Por ejemplo, en un entorno Windows podría quedar instalado, si usamos el directorio por defecto, de la siguiente forma:

c:\\groovy-1.0\\bin

3. Configurar las variables de entorno

Para poder compilar y ejecutar nuestros script tenemos que configurar dos variables de entorno: JAVA_HOME y GROOVY_HOME.

En JAVA_HOME debemos indicarle cual es el directorio donde se encuentra la distribución de Java. Por ejemplo:

JAVA_HOME = c:\\Java\\jdk1.5.0_06

En GROOVY_HOME hay que indicarle donde está la distribución de Groovy instalada. Por ejemplo:

GROOVY_HOME = c:\\groovy-1.0

Con estos pasos ya tendremos instalado el entorno Groovy y podremos empezar a ejecutar y compilar nuestros ejemplos Groovy.

<< Qué es Groovy | Indice del Tutorial | Primer desarrollo en Groovy >>
→ Eventos →

Congreso OjoBuscador 2.0

Creado: 19/Ene/2007 Actualizado: 16/Dic/2025

Los próximos días 8 y 9 de marzo de 2007 se celebra en el Hotel Auditorium de Madrid el Congreso Ojo Buscador 2.0.

En este congreso se trataran temas varios temas orientados principalmente al mundo de los buscadores. Entre ellos el marketing on-line, el posicionamiento en buscadores, usabilidad, arquitectura de la información, e information retrieval.

Se cuenta con participaciones de gente de Google, Yahoo!, Ask, Microsoft,…

El precio es de 150€ si vas un día y 250€ si vas los dos.

Más información sobre el congreso

Artículos
→ CSS →

Letra capital

Creado: Actualizado: 11/Oct/2021

Cuando nos referimos a una letra capital hablamos del estilo que se le da a la primera letra de un párrafo. Mediante el lenguaje de hojas de estilo CSS podemos darle un formato a dicha letra, para que resalte del resto del contenido.

Lo que CSS nos ofrece es un pseudo-elemento para poder ser aplicado tanto a clases como a selectores. El pseudo-elemento en concreto que nos ofrece para gestionar la letra capital es first-letter.

De esta manera, el uso de la clase con el pseudo-elemento first-letter quedará de la siguiente forma.

.parrafo:first-letter {
  /* definición CSS */
}

Podremos aprovecharnos de todos los atributos de CSS para formatear la letra capital. Es decir, puedes aplicar todo lo que hemos explicado dentro de los ejemplos de CSS. Por ejemplo podemos hacerla más grande mediante font-size, o cambiar el color con color, o bien modificar su alineación mediante float,…

Así, nuestro código, para dar el formato a una letra capital, nos podría quedar de la siguiente forma, en la cual ponemos su tamaño al doble, lo alineamos a la izquierda y hacemos que el color de la letra sea rojo.

.parrafo:first-letter{
  font-size:200%;
  float:left;
  color:#f00;
}

Ahora que ya tenemos definido el código en CSS, solo nos quedará aplicar la clase que acabamos de definir sobre nuestro texto en HTML. Para aplicar la clase sobre algunos de los elementos HTML utilizaremos el atributo class. Este atributo lo vamos a asignar a un párrafo que hemos definido mediante un elemento p.

<p class="parrafo">Este es nuestro párrafo, el cual tendrá su primera letra como una letra capital</p>

Un código muy sencillo, pero a la vez muy útil para poder dar forma a las primeras letras de nuestros párrafos.

Código Fuente

Descárgate el código fuente de Letra capital
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
→ VBScript →

Fecha en castellano con VBScript

Creado: 18/Ene/2007 Actualizado: 23/Dic/2024

La idea de este ejemplo es el mostrar por pantalla una fecha con el formato domingo, 25 de agosto de 2002 mediante el lenguaje VBScript. Por defecto si usamos el objeto Date lo que obtendremos será el formato 25/08/02, del cual, mediante algunas funciones, podemos obtener acronimos de los días y los meses, eso si, en formato anglosajón.

Lo primero a realizar es separar en 3 partes la fecha. Para ello utilizaremos las siguientes funciones…

anno = Year(Date)
mes = Month(Date)
dia= Day (Date)

Tanto el año como el día van a quedar invariantes, pero el mes lo tenemos que formatear a una cadena de texto. La solución pasa por utilizar una estructura selectiva del tipo select case.

select case Month(Date)
  case 1
    document.write("Enero")
    ...
  case 12
    document.write("Diciembre")
end select

Para mostrar el día de la semana utilizaremos la función WeekDay() la cual nos devuelve un número indicando el día de la semana. Por defecto sigue la secuencia 1 para el Domingo, 2 para el Lunes,… y 7 para el sábado. Si queremos que la secuencia asigne el número 1 a otro día, tendremos que pasar dicho día a la función WeekDay() como segundo parámetro. Para esto podemos utilizar las constantes de VBScript vbMonday, vbTuesday, vbWednesday,…

De tal manera que a partir de dicho número y utilizando nuevamente una estructura select case mostraremos el día de la semana como una cadena de caracteres…

select case WeekDay(Date,vbMonday)
  case 1
    document.write("Lunes")
  ...
  case 7
    document.write("Domingo")
end select
Artículos
→ Javascript →

Cálculo del NIF en JavaScript

Creado: 16/Ene/2007 Actualizado: 20/May/2015

Este ejemplo es muy sencillo pero muy útil. Consiste en calcular la letra del NIF a partir del número del DNI dentro de una página web con la ayuda de JavaScript.

El procedimiento del calculo consiste en realizar el módulo de 23. Su resultado nos dará una posición en una secuencia de letras (TRWAGMYFPDXBNJZSQVHLCKE). La letra situada en dicha posición será la letra del NIF.

Nosotros creamos la ristra de letras en una variable.

var letras = 'TRWAGMYFPDXBNJZSQVHLCKE';

Sobre el número del DNI calculamos el módulo (%) de 23.

var numero = dni%23;

Y obtenemos la letra de la cadena. Para ello nos ayudamos de la función substring (caracterInicio,numeroCaracteres). Veamos como seria esta línea de código:

form1.letra.value = letras.substring(numero,numero+1);

Los datos los vamos a obtener de un formulario. Es por ello que cabe la posibilidad que el usuario nos introduzca datos erróneos (de manera intencionada o no). Para comprobar que el número introducido es correcto deberemos de comprobar que son 8 dígitos. Dicha comprobación la realizaremos mediante una expresión regular.

if (!/^d{8}$/.test(dni)) {
     alert ("El numero introducido no es valido");
     return false;
}

Ah, se me olvidaba. La función la ejecutaremos cuando el usuario abandone el campo del número (se supone, en un proceso normal, que para pasar al campo de la letra). Es por ello que utilizaremos el evento onBlur de dicho campo.

Código Fuente

Descárgate el código fuente de Cálculo del NIF en JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
→ CSS →

Enlaces subrayados arriba y abajo

Creado: 15/Ene/2007 Actualizado: 11/Oct/2021

Los enlaces por definición no tienen una representación tal cual. Si es verdad que por convención parece que el subrayado se ha hecho con esos méritos. Si bien, a partir de la llegada de las hojas de estilo CSS, la visualización de los enlaces pasa a ser muy variopinta: mostrando color de fondo, eliminado el subrayado, cambiando el icono al pasar sobre ellos,… En este caso vamos a ver cómo crear enlaces subrayados arriba y abajo.

En este caso no vamos a definir una clase que pueda ser utilizada. Sino que directamente vamos a redefinir el comportamiento de los enlaces HTML. Es decir, vamos a redefinir el comportamiento del elemento a.

Para ello simplemente bastará con definir una hoja de estilo con el elemento a.Veamos como quedaría:

a { 
  /*Definición de A*/
}

Esta definición de estilo del elemento a la colocaremos dentro del elemento style de nuestra página web.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Titulo Documento</title>
  <style>
    a {
      /*Definición de A*/
    }
  </style>
</head>
<body>

<!-- Documento HTML5 -->

</body>
</html>

En concreto vamos a redefinir el comportamiento de cuando pasemos el puntero por encima del enlace. Es decir, el selector hover. El código quedaría de la siguiente forma:

a:hover { 
  /*Definición de A*/
}

El atributo CSS que modifican el subrayado inferior y superior es el text-decoration. Y los valores con los que podemos jugar son overline, si queremos un subrayado por encima del texto y underline si queremos el subrayado por debajo del texto. En nuestro caso vamos a utilizar ambos.

El código para tener enlaces subrayados arriba y abajo quedaría de la siguiente forma:

a:hover { 
 text-decoration: overline underline; 
}

Ahora solo nos queda poner enlaces en la página donde tengamos definida esta hoja de estilo para poder tener enlaces subrayados arriba y abajo.

Código Fuente

Descárgate el código fuente de Enlaces subrayados arriba y abajo
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Artículos
→ HTML →

Lineas de separación en HTML

Creado: 14/Ene/2007 Actualizado: 25/Ago/2021

Seguro que muchas veces has entrado en una web y has visto que se utilizan líneas para separar los párrafos de texto. Algunas veces no dejan de ser simples líneas de un color uniforme, normalmente gris, pero otras veces llegan a ser verdaderas obras de arte.

Para poder ponerlas en nuestra web no hace falta que utilicemos imágenes pre-diseñadas por algún software gráfico. Tenemos una forma más sencilla para llevarlo a cabo.

Para poder hacer esto el lenguaje HTML nos proporciona la etiqueta HR. El mero hecho de poner esta etiqueta en una página hace que ya nos aparezca una línea de separación entre párrafos.

Veamos como sería una página HTML utilizando esto:




Texto del párrafo uno


Texto del párrafo dos

Si lo cargamos en nuestro navegador veremos que aparece una línea entre los dos párrafos. Esta línea ocupa, normalmente, de un lado a otro de la página.

Si queremos modificar las propiedades de la línea de separación HR el lenguajeHTML nos daba (y digo daba) un conjunto de atributos: width, noshade, size,… Pero todos ellos han quedado obsoletos dentro de la especificación. Ahora, para modificar su visualización, deberemos de utilizar las hojas de estilo CSS. Pero esto lo dejaremos para otro día…

Código Fuente

Descárgate el código fuente de Lineas de separación en HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Artículos
→ Java →

Números ascendentes en Java

Creado: Actualizado: 05/Jun/2015

Mediante este ejemplo se busca como conseguir una lista de números ascendentes, partiendo del 1, mediante el lenguaje de programación Java. Este ejemplo nos enseñará el uso básico de los bucles dentro de Java.

Lo primero que tenemos que hacer es crear una clase Java con un método main. Dentro de este método será donde codifiquemos nuestro ejemplo.

public class NumerosAscendente {

	public static void main(String[] args) {

	}
}

Para poder generar los número ascendentes nos vamos a apoyar en un bucle for. La estructura del bucle for es la siguiente:

for (incialización,condición,incremento){...}

Es por ello que si queremos sacar los 100 primeros números de forma ascendente la incialización deberá de ser a 1 y la condición se cumplirá cuando llegue a 100. El bucle for nos quedará de la siguiente forma:

for (int x=1;x<=100;x++){...}

Dentro del bucle deberemos de volcar el número a pantalla. En este caso nos apoyamos en la clase System.out y en su método .println(texto). Quedándonos finalmente el siguiente código:

for (int x=1;x<=100;x++){
	System.out.println(x);
}

Como podemos ver es un código muy sencillo para poder crear una lista de números ascendentes en Java.

Código Fuente

Descárgate el código fuente de Números ascendentes en Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java