Este documento explica cómo crear enlaces que abren ventanas emergentes en un sitio web. Muestra el código HTML necesario para crear un enlace que abre una nueva ventana al hacer clic, permitiendo definir su tamaño y página de destino. También explica cómo modificar ese código para cambiar el tamaño de la ventana o apuntarla a una página interna en lugar de una externa. El proceso implica copiar el código HTML, pegarlo donde se quiera colocar el enlace en el editor, y guardar los cambios.

1. Ventanas Emergentes Curso: Diseño de sitio web

2. Empecemos... Abrimos la administración del campus y vamos a la administración del sitio web En este tutorial veremos la utilidad de colocar, en un link común, la posibilidad de que se despliegue una ventana con información, sin que el usuario salga de la página que está visitando. la llamaremos ventana emergente , porque aparece superpuesta a la de navegación actual, y puede cerrarse sin perjuicio de seguir el ”paseo”.

3. Seleccionamos la página en la cual queremos que se abra la ventana emergente, para editarla

4. Vamos a suponer que queremos abrir un link que muestre el sitio web del Ministerio de Nación, en una ventana nueva Ubicamos el cursor en el espacio en el que queremos colocar el link.

5. Vamos a necesitar tener copiado (y disponible en el portapapeles) este texto que nos servirá para hacer el link. <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1, width= 300 ,height= 400 '); return false; &quot; href=&quot; http://www.me.gov.ar &quot; target=&quot;_blank&quot;> Ministerio </a> No es necesario entender el código! Basta con copiarlo tal cual, sin modificar los espacios, comillas y signos. Lo que está en rojo…después lo vemos

6. Para pegarlo, buscamos en la barra de menú el icono para pegar, pero el que tiene la letra ” H ” (que indica H TML, es decir, el código de las páginas web) y hacemos clic En la ventana Insertar texto HTML pegamos el código previamente copiado y presionamos Insertar

7. Notemos que ahora se lee el texto ”Ministerio” y ya se ve como un enlace No olvidemos ir al pie de la página y presionar ” Modificar ” para guardar los cambios

8. Volvemos a la vista de usuario para ver el resultado...

9. Un paso más allá <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1, width=300 , height=400 '); return false;&quot; href=&quot;http://www.me.gov.ar&quot; target=&quot;_blank&quot;> Ministerio </a> Para editar el código y poder definir el tamaño de la ventana emergente, basta con modificar estos datos: Pixeles de ancho Pixeles de largo

10. Dos pasos más allá <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=300,height=400'); return false;&quot; href= &quot;http://www.educ.ar&quot; target=&quot;_blank&quot;> el portal educar </a> Y esto es para editar el código y elegir otro sitio como destino del link Dirección o sitio web destino (va pegado a las comillas!) Texto que se mostrará como link. Puede ser una palabra o más (cuidado con usar acentos y caracteres especiales, ya que estamos en la vista de código puro).

11. Y la frutilla del postre ¿Qué tal si queremos que en la ventana emergente aparezca una información propia? Volvamos al listado de páginas del sitio...

12. Elegimos la página que se verá emergente y sobre ella presionamos usando el botón derecho del mouse Del menú contextual que se activa seleccionamos “ Copiar dirección del enlace ”

13. Veamos el contenido de los que acabamos de copiar... javascript:VerNovedad2(' http://infd.e-ducativa.com/sitio/upload/html/12.html ') Para eso lo pegamos en el bloc de notas Esta es la dirección de destino para reemplazar en nuestro código original <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=500,height=600'); return false;&quot; href= &quot;http://infd.e-ducativa.com/sitio/upload/html/12.html&quot; target=&quot;_blank&quot;> Jornada La Rioja </a>

14. Veamos el resultado...

15. Tenemos que tener el código copiado en texto sin formato ( bloc de notas es lo mejor ) para poder modificarlo ( dimensiones de la ventana emergente y página de destino ) Tenemos que tener también los datos a modificar (tamaño, dirección web...para poder usarlos en ese código que tendremos a mano) En la página en la que queremos crear el enlace a la ventana emergente, desde el editor, colocamos el cursor en el punto que lo queremos insertar Pegamos el código con el botón para pegar código ( H ) y presionamos insertar No olvidemos el clic en “ Modificar ” Resumiendo ¡Y listo! A rodar...