Ir a otra página. Redirigir a otra página usando JavaScript. Se abre en una nueva ventana

En este artículo, nos gustaría presentarle algunas de las bibliotecas de JavaScript más útiles que se pueden utilizar para animar el contenido de aplicaciones web. Estas bibliotecas están diseñadas para crear animaciones para menús desplegables, elementos deslizantes, animaciones de paralaje e incluso fuentes.

Y lo principal es que todo está al 100%. recursos gratuitos con abierto código fuente, para que puedas utilizarlos en cualquiera de tus proyectos.

1.Dyanamic.js

Simplemente habilite Dynamics.js en la página y luego podrá animar. Propiedades CSS para cualquiera elemento DOM. También podrás animar propiedades SVG.

Dynamics.js contiene su propia propiedad setTimeout. La razón es que requestAnimationFrame y setTimeout tienen un comportamiento diferente. Propiedad apoyada por todos Objetos JavaScript. Se ha probado la compatibilidad de la biblioteca con Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

2. AnimatePlus

Una poderosa biblioteca de JavaScript que te ayuda a animar propiedades CSS y atributos SVG.

Animate Plus es ideal para organizar una interacción rápida de todos los controles de la interfaz, así como largas secuencias de animación para dispositivos móviles y de escritorio.

3. Cta.js

Una biblioteca JavaScript potente y compacta para animar cualquier elemento (“acción”) dentro de cualquier otro elemento (“efecto”) de la página.

4. Bip.js

Beep.js es un conjunto de herramientas para crear sintetizadores JavaScript basados ​​en navegador utilizando la API WebAudio.

5. Iconate.js

Una poderosa biblioteca de JavaScript para animación y transformación de íconos en varios navegadores. iconate.js también admite plantillas modulares AMD y CommonJS.

6.Animador doméstico

Una biblioteca de JavaScript para mostrar pequeños elementos de animación ASCII en comentarios DOM. Esta es una biblioteca independiente que usa solo JavaScript (la animación se realiza en nodos de comentarios, solo en el DOM).

7.día lluvioso

Rainyday.js le permite crear efectos de gotas de lluvia de aspecto realista sobre vidrio utilizando lienzos HTML5 y JavaScript. La biblioteca incluye una API extensible y detección de errores integrada.

Rainyday.js utiliza el poder de HTML5, por lo que es compatible con la mayoría de los navegadores modernos.

8. Anima.js

Anima.js te permite utilizar retrasos y duraciones, incluso para animaciones CSS. La biblioteca utiliza transformaciones CSS y transformaciones 3D para crear animaciones. habilitando Javascript. Puede iniciar, detener, cancelar animaciones e incluso crear efectos basados ​​en eventos.

9. parpadearTitle.js

BlinkTitle.js puede crear un título HTML parpadeante, una alerta o una notificación en el título.

10. Snabbt.js

La biblioteca Javascript está diseñada para mover elementos, desplazar, rotar, escalar, sesgar y cambiar el tamaño. Gracias a las operaciones de multiplicación de matrices, las transformaciones se pueden combinar en cualquier combinación que desees. Entonces resultado final especificado utilizando matrices de transformación CSS3.

11. Vivus

Vivus es una clase JavaScript compacta (sin dependencias) para animaciones SVG mediante dibujo. Vivus contiene muchos varios efectos animación, se ha implementado la capacidad de crear un script personalizado.

12. Impulso

Una biblioteca de JavaScript para construir interacciones dinámicas basadas en física real, con énfasis en dispositivos móviles. En lugar de propiedades de animación que especifican un período de tiempo, Impulse cambia de posición y velocidad. no contiene gran cantidad dependencias. No requiere jQuery, pero puede interactuar muy bien con él.

13. Ani.js

AniJS es una biblioteca de JavaScript declarativa para manejar animaciones CSS. Está completamente documentado y es fácil de usar.

14. Rebote.js

Una herramienta para crear hermosas animaciones de fotogramas clave basadas en CSS3. Agregue un componente, seleccione una opción y obtenga una URL corta o exporte el código a CSS.

15. Etiqueta.js

Sticker.js es una biblioteca de JavaScript que le permite crear efectos de pegatinas despegables. La biblioteca funciona la mayor parte del tiempo. navegadores populares, que admiten CSS3 (incluido IE10+). Distribuido bajo la licencia MIT.

16. Wow.js

WOW.js muestra animación CSS a medida que se desplaza hacia abajo en la página. De forma predeterminada, debes usar esta acción para ejecutar animate.css, pero puedes cambiar esta configuración fácilmente.

17. Paralaje.js

Parallax.js es una solución compacta para crear efectos de paralaje. La biblioteca también funciona en teléfonos inteligentes y tabletas (con giroscopio o detector de movimiento de hardware). Parallax.js tiene varias opciones para personalizar el efecto utilizando "atributos de datos" o mediante JavaScript. La biblioteca puede funcionar de forma independiente o como Complemento jQuery y Zepto (existen dos versiones).

Breve descripción general bibliotecas prometedoras y complementos de JavaScript para animación.

1. Guión2

Scripty2 es un banco de trabajo de JavaScript potente y flexible que te ayuda a crear tu propio y hermoso efecto visual o interfaz de usuario.

Ejemplo de uso

Incluye la línea en tu código HTML:

Las siguientes líneas se utilizan en la página de demostración de scripty2.

//Para el efecto serpiente en las tarjetas en la demostración document.observe("cards:snake", function())( var d = 20; nombres.sortBy(Math.random).each(function(card, index)( $ (tarjeta) .morph("margin-left:"+[-300,300,-150,150]+"px;margin-top:"+ (272+(index-names.length/2)*d)+"px;left :371px; índice z:"+índice, ( propiedadTransiciones: ( margenIzquierdo: "espejo", margenTop: "bouncePast", izquierda: "swingFromTo", zIndex: zIndexTransition ), duración:2 )).morph("margin-top :272px; izquierda:"+(371+(index-names.length/2)*d)+"px", ( propiedadTransiciones: ( marginTop: "easeInCirc", izquierda: "lineal"), duración:1, retraso: index/15 )).morph("margin-top:"+(272-(index-names.length/2)*d)+"px;left:371px", ( propertyTransitions: ( marginTop: "easeOutCirc", left : "lineal " ), duración:1 ) ));

(función())( document.fire("tarjetas:serpiente"); )).delay(2);

Ejemplo de uso

))(); Es una biblioteca potente pero fácil de usar que permite agregar animaciones impresionantes a sitios web sin comprometer los estándares ni la compatibilidad. Con un tamaño aproximado de 25 KB, el paquete jsAnim es una herramienta importante para una aplicación tan pequeña. Encender

siguientes lineas a tu código: Crear un archivo

principal.js

y copie el siguiente código en él. Administrador Var = nuevo jsAnimManager(); aniMe = document.getElementById("animateMe"); aniMe.style.position = "relativo"; var anim = manager.createAnimObject("animateMe"); anim.add((propiedad: Prop.left, hasta: 500, duración: 2000)); Un complemento simple que solo tiene dos métodos clave, sprite() y pan() . Ambos métodos son para animación de propiedades simples. CSS de fondo imágenes de elementos. La diferencia entre estos dos métodos es que una imagen 'sprite' contiene dos o más 'cuadros' de animación, mientras que una imagen 'panorámica' contiene uno. imagen continua, que repite las transiciones de izquierda a derecha. Generalmente, en caso sencillo, se puede utilizar archivos png para ello (con o sin transparencia). puedes usar gif transparente Para Explorador de Internet 6, aunque no se verá muy bien. Su elemento HTML debe tener más HTML elemento y el método sprite() cambia la posición imagen de fondo según el elemento HTML.

Ejemplo de uso

He aquí un ejemplo sencillo. El siguiente método anima uno de los pájaros a volar por la página. El método 'sprite' reúne tres fotogramas en imagen png con transparencia, en la que cada cuadro se coloca de lado a lado:

Ahora sólo necesitas crear un div llamado 'pájaro', dale tamaño correcto(180×180 píxeles en en este caso), y animarlo usando duende(). Las dos opciones que hay que configurar son 'fps' (cuadros por segundo) y 'no_of_frames', es decir, tres fotogramas para nuestra imagen:

$("#bird").sprite((fps: 12, no_of_frames: 3));

Para "atraer" imágenes al cursor del mouse cuando se hace clic en la pantalla, use:

$("#bird").sprite((fps: 12, no_of_frames: 3)).activeOnClick().active(); $("cuerpo").flyToTap();

El método active() hace que este sprite sea el sprite activo cuando se carga la página; de lo contrario, un sprite con activeOnClick() solo se activará cuando se haga clic en él.

El método $("body").flyToTap() rastrea un toque en la página, después de lo cual el movimiento actual finaliza y el objeto se mueve a la ubicación del toque. Después de unos segundos, se comienza a utilizar el método de movimiento aleatorio.

4.$fx()

$fx() es una pequeña biblioteca Javascript independiente para animar elementos HTML. No requiere ninguna otra biblioteca para funcionar y debería funcionar bien junto con otras bibliotecas (Prototype, JQuery, herramientas Moo, etc.)

$fx() te permite cambiar cualquier propiedad CSS a lo largo de la animación, permitiéndote reproducir efectos de animación de forma secuencial, es decir, de la forma que desees. $fx() también maneja la gestión del temporizador y hace que el proceso de animación sea simple y elegante.

$fx() también ofrece la posibilidad de combinar configuraciones de propiedades CSS para combinar efectos y le permite configurar múltiples devoluciones de llamada, lo que agrega flexibilidad al uso de la biblioteca.

Ejemplo de aplicación

Cómo agregar y animar un efecto simple

Primero, necesitamos un elemento. Cualquier elemento servirá (por ejemplo, :). Luego puede llamar a $fx() y pasar una referencia al elemento.

$fx("miDiv")

Luego agregamos efectos llamando a $fxAdd(...) .

$fx("myDiv").fxAdd((tipo: "fontSize", de: 12, a: 72, paso: 1, retraso: 20));

¡Ahora vamos a lanzar!

$fx("myDiv").fxAdd((tipo: "fontSize", de: 12, a: 72, paso: 1, retraso: 20)).fxRun(null,-1);

5.moo.fx

moo.fx es una biblioteca de efectos JavaScript súper liviana y ultra pequeña que se utiliza en ambiente de trabajo prototipo.js o mootools.

Es muy fácil de usar, ultrarrápido, compatible con todos los navegadores, proporciona control de modificación de cualquier propiedad CSS de cualquier elemento HTML, incluidos los colores, tiene una verificación incorporada que evita que el usuario interrumpa el efecto con numerosos y locos clics del botón del mouse. Optimizado para crear tanto como sea posible. tamaño más pequeño código, nuevo moo.fx Brinda la oportunidad de crear cualquier tipo de efectos.

Ejemplo de uso

El siguiente código se utiliza para crear una bola que se puede arrastrar en pagina de inicio moo.fx.

Var bola = $("encabezado").getElement("h1");

var ballfx = new Fx.Styles(ball, (duración: 1000, "transición": Fx.Transitions.Elastic.easeOut)); new Drag.Base(ball, ( onComplete: function())( ballfx.start(("arriba": 13, "izquierda": 358)); ) )); Una pequeña biblioteca de JavaScript que puede facilitar tu trabajo gráficos vectoriales en proyectos web. Si desea crear su propio gráfico o widget para rotar y recortar imágenes, por ejemplo, entonces

esta biblioteca te ayudará a resolver el problema de forma sencilla y sencilla. Raphael utiliza SVG y VML como base para crear gráficos. entonces todos objeto gráfico, que se creará, también es un objeto DOM y se le puede vincular un controlador Eventos de JavaScript o modificar cuando

Ejemplo de uso

trabajo adicional

. El objetivo principal de Raphael es hacer que el trabajo con gráficos vectoriales sea compatible con todos los navegadores y sea fácil de usar.

Demostración de animación realizada con esta maravillosa biblioteca.

El siguiente código se utiliza para transformar un círculo en una elipse mientras se mueve simultáneamente de un lugar a otro:

// Elipse (función () ( r.circle(40, 90, 20).attr(guionado); r.ellipse(140, 90, 20, 10).attr((relleno: "ninguno", trazo: "# 666", "stroke-dasharray": "- ", rotación: 45)); var el = r.ellipse(40, 90, 20, 20).attr((relleno: "none", trazo: "#fff" , "ancho de carrera": 2)), elattrs = [(ry: 10, cx: 140, rotación: 45), (ry: 20, cx: 40, rotación: 0)], ahora = 0; 90).node.onclick = function () ( el.animate(elattrs, 1000); if (ahora == 2) (ahora = 0; ) )(); Puede encontrar una demostración de otros efectos de animación en la página de inicio de la biblioteca. Este es un motor vectorial OpenSource para animación en elementos graficos HTML5. ráfaga proporciona similar a FLASH, sistema de animación. Burst utiliza un motor JavaScript muy compacto, que permite que las animaciones se carguen rápidamente y el proceso se puede controlar mediante métodos simples JavaScript.

Ejemplo de uso

Burst le permite crear rápidamente cadenas complejas de animaciones y conectarlas fácilmente para visualizarlas y administrarlas en cualquier aplicación web.

Burst.timeline("fiesta", 0, 800, 1, falso) .shape("globo", "globo3.svg", "svg", 0, 0, .5, 0) .shape("pastel", " cake2.svg", "svg", 0, 0, 1, 0) .track("izquierda") .key(1, -320, "easeInOutQuad") .key(200, 0) .shape("globo") .track("arriba") .key(0,320) .key(100,320) .key(800, -320) .track("izquierda") .key(0,0) .key(100, 0, "easeOutBounce") .clave(800,120);

Burst.start("fiesta;", function())( alert("¡Hora de acostarse!"); ));

Explosión.play();

8. Biblioteca Canvas 3d JS (C3DL) Canvas 3D JS Libary (C3DL) es una biblioteca de JavaScript que facilita la creación de aplicaciones 3D que utilizan WebGL. Proporciona un conjunto de clases para matemáticas, objetos y escenas 3D que hacen que WebGL sea más accesible para los desarrolladores que incorporan contenido 3D en sus aplicaciones, pero que no quieren profundizar en las matemáticas 3D para lograr sus objetivos. Con el término "animación" nos referimos más a menudo a películas animadas, los "dibujos animados" que amamos desde la infancia. Pero si miras

diccionario explicativo

, luego aprendemos que traducido del francés significa "renacimiento", "animación". Y aquí resulta que este significado se adapta con sorprendente precisión no sólo a la industria cinematográfica, sino también a las tecnologías web. El uso de varios efectos de animación (transiciones, movimientos, transformaciones, etc.) "anima" significativamente el sitio web, le permite controlar la atención del usuario, cambiándolo al elemento requerido y dándole ciertas señales visuales. Hablando de animación, no se pueden dejar de mencionar los conocidos 12 principios formulados por los animadores del estudio Disney, cuyo uso es sumamente importante para el desarrollo razonable y

uso de calidad efectos de animación. detrás y está siendo reemplazado gradualmente en las páginas web por scripts Java más potentes y flexibles. Y si decide utilizar seriamente la animación en su sitio web, debe confiar en JavaScript. Y para poder elegir bien la biblioteca, hice la reseña de hoy.

Dynamics.jsComenzaré con Dynamics.js. Esta es una biblioteca seria y poderosa que le permite crear animaciones físicamente precisas (como animaciones armónicas). oscilaciones amortiguadas puntos en la página principal del sitio). La biblioteca es capaz de gestionar las propiedades de cualquier elemento DOM. Dynamics.js se utiliza para crear menús, botones, indicadores de procesos, marcadores. En este caso, se dispone de una amplia variedad de parámetros, como la frecuencia, la disminución de la amortiguación, parámetros que caracterizan la elasticidad o la duración del proceso, etc.

Cta.jsLa biblioteca de pequeño tamaño cta.js está diseñada para crear efectos de animación del tipo "acción-efecto" en la página, es decir. Pasar el cursor o hacer clic con el puntero del mouse sobre un objeto produce un efecto específico. Es muy conveniente usarlo al desarrollar interfaces en mosaico, cuando hacer clic en un elemento conduce a su expansión en el formulario. ventana modal, página completa o como diapositiva de la barra lateral.

Beep.jsUna biblioteca interesante que utiliza la API WebAudio para crear un sintetizador de música en una página. Puede usarse para desarrollar un libro de texto de música en línea o como un juguete divertido.

Rainyday.jsIncreíble hermoso efecto lluvia con gotas diferentes tamaños, fluyendo hacia abajo. Sin embargo, en mi opinión, las gotas grandes carecen de realismo (¿quizás la misma física que está presente en Dynamics.js?). Sin embargo, la API existente le permite crear propios objetos y controlar su comportamiento, creando efectos aún más increíbles.

Dom-Animator.jsDom-Animator.js es el llamado " el huevo de Pascua"(el huevo de Pascua). El efecto que produce no es visible a simple vista, es decir. para aquellos que ven la página en una ventana de navegador normal. Pero quienes analicen tu código lo verán en la consola (si aún no entiendes de qué estamos hablando, aquí tienes un vídeo que te lo aclarará todo).

FamousFamous es una biblioteca JS basada en eventos para crear animaciones modernas. Tiene un poderoso núcleo geométrico que le permite manipular varios objetos 3D (puntuales y volumétricos), aplicarles fuerzas y aceleraciones, imponer restricciones y controlar colisiones.

Bounce.jsNo está mal biblioteca de javascript para crear animaciones impresionantes con usando CSS. Le permite aplicar a objetos. varios tipos movimiento, rotación, escalamiento y transformación.

Snabbt.jsLigero y biblioteca rapida, que, según los desarrolladores, ofrece 60 fps incluso en dispositivos móviles. Usando matrices Transformaciones CSS le permite mover, rotar, escalar y realizar otras manipulaciones con objetos. También permite aplicar efectos especiales a objetos que llamen la atención, los cuales pueden usarse al completar formularios.

RekapiRekapi te permite usar ambos animación css fotogramas clave (@regla de fotogramas clave) y animación DOM usando JavaScript. Esta biblioteca le permite crear objetos dinámicos bastante complejos, como circulares y gráficos de líneas, líneas de tiempo y otros elementos de la interfaz de usuario.

ShiftyShifty es una biblioteca que contiene todo lo que necesitas para una animación completa personal clave(el llamado "hermanamiento"), y la cantidad de objetos puede ser simplemente enorme. Es una biblioteca de bajo nivel que se puede utilizar como núcleo para plataformas o bibliotecas de nivel superior. En realidad, Shifty se utiliza como núcleo del Rekapi antes mencionado.

En este artículo te contaré cómo puedes redirigir a un usuario de una página web a otra con usando javascript. También daré algunos ejemplos simples Redirección JS.

Puedes redirigir a un usuario de una página web a cualquier otra de varias formas. Incluyendo la actualización de metadatos HTML y la redirección del lado del servidor. Por ejemplo, usar un archivo .htaccess, PHP y usar la redirección del lado del cliente a través de JavaScript.

Pero tenga en cuenta que los redireccionamientos inesperados que ocurren en medio de otra actividad resultan molestos para los visitantes. Por lo tanto, debes utilizar una redirección sólo si es realmente necesaria y si tiene sentido desde el punto de vista del usuario.

Veamos cómo se puede utilizar JavaScript para redirigir al usuario a otra página.

Redireccionamiento automático de JavaScript a otra página

Si desea redirigir automáticamente al usuario de una página (URL1) a otra página (URL2), puede utilizar el siguiente código:

ventana.ubicación.href = "URL2";

Debe pegar el código anterior en la primera página (URL1). Reemplace URL2 con dirección requerida páginas. Es mejor colocar este código dentro del elemento (en lugar de en la parte inferior de la página) para que la página se redirija antes de que el navegador comience a mostrarla.

SUGERENCIA: Si está utilizando JavaScript en línea (es decir, sin un archivo .js externo), asegúrese de poner código javascript a etiquetas.

Redirigir a otra página después de X segundos

En este ejemplo, realizaremos una redirección js a otra página algún tiempo después de que la página se haya cargado. Por ejemplo, si necesita redirigir a un visitante a pagina de inicio después de que se muestre la página de bienvenida durante 5 segundos:

setTimeout(function())( ventana.ubicación.href = "url de la página de inicio"; ), 5 * 1000);

Debe pegar el siguiente código JavaScript en la página de bienvenida. Recuerde reemplazar la URL de la página de inicio con la URL de la página de inicio.

Usamos el método setTimeout para indicarle al script que redireccione después de 5 segundos (multiplique 5 por 1000 para convertir segundos a milisegundos).

CONSEJO: B Significados de JavaScript Los tiempos siempre se calculan en milisegundos.

Redirigir a otra página según la condición

Por ejemplo, puede redirigir según el navegador del visitante (aunque no se recomienda), el tamaño de la pantalla, la hora del día u otra condición.

Utilice el siguiente código para redirigir a los visitantes que cumplan una determinada condición:

if (CONDICIÓN) ( ventana.ubicación.href = "redirect-url"; )

Por ejemplo, este código redirige a los visitantes a otra página si el ancho de su pantalla es inferior a 600 píxeles:

si (pantalla.ancho< 600) { window.location.href = "redirect-url"; }

Redirigir a otra página según las acciones del usuario

El último ejemplo demuestra cómo reorientar a un visitante en función de sus acciones. Puede vincular una redirección js a cualquier tipo de acción del usuario. EN en este ejemplo Para simplificar, manejaremos el clic del botón.

El siguiente código redirigirá al visitante a página de destino después de hacer clic en #mibotón:

document.getElementById("mybutton").onclick = función() ( window.location.href = "redirect-url"; );

Puedes hacer lo mismo usando el siguiente código:

Ir a la página de inicio

También puedes asociar una redirección con cualquier evento o acción del usuario. Sólo recuerde asegurarse de que sus redireccionamientos no frustren a los usuarios.

Intenté mirar todo posibles casos js redirige a otra página. Si alguna vez me encuentro con otros escenarios, los agregaré a este artículo.

La traducción del artículo "Redirigir a otra página con JavaScript" fue preparada por el amigable equipo del proyecto.

Bueno Malo

En este artículo veremos varias maneras Redirección JS. Exploremos las opciones de redireccionamiento alternativo para cuando JavaScript esté deshabilitado. Y también el impacto del uso...

Buenos días a todos, mi queridos amigos y lectores. Espero que hayas decidido participar en mi concurso y ya estés escribiendo sobre tu viaje en el blog. Bueno, me gustaría continuar nuestro estudio. lenguaje html Y hoy me gustaría hablarles sobre uno de los componentes más importantes: los hipervínculos.

Sí, sin esos hipervínculos Internet no sería tan conveniente. No, estoy mintiendo. No sería nada fácil navegar. ¿Te imaginas Internet sin ellos? Yo personalmente no.

Y hoy aprenderemos cómo insertar un hipervínculo en html. Pero primero me gustaría preguntarle: ¿Sabe qué es un hipervínculo y en qué se diferencia de un enlace normal? Aquí todo es realmente sencillo: un enlace es un simple dato que remite a un documento. Al mismo tiempo, no puedes hacer clic en este texto (no pasará nada), pero sabes dónde buscar información.

Ejemplo: Puede descubrir cómo resaltar el cabello en Photoshop en //site/adobe-photoshop/kak-vydelit-volosy/

Un hipervínculo es el mismo texto, solo que su esencia es que puede hacer clic en este texto y acceder a la página, sitio o cualquier otro objeto deseado. Además, el texto en sí puede ser cualquier cosa, mientras que la dirección está escrita por separado en el interior y puede ser completamente diferente. Pero sea como fuere, en el habla coloquial todavía se les llama simplemente enlaces. Aquí hay un ejemplo de un hipervínculo:

Puedes leer sobre cómo resaltar correctamente el cabello en Photoshop en uno de mis tutoriales.

Ah, bueno. Buena teoría. Ahora pasemos a la práctica y veamos cuáles son los responsables de todos estos asuntos.

Responsable del hipervínculo etiqueta emparejada, pero en sí mismo no representa nada. Siempre va en conjunto con un atributo. Y en este caso, necesitamos escribir constantemente este mismo href. En el valor del atributo ponemos el enlace al propio recurso deseado. Y en el contenido mismo escribimos el texto en sí, en el que debería poder hacer clic (funciona al hacer clic). Mira el ejemplo y creo que lo entenderás todo.

motor de búsqueda yandex

Como comprenderás, en este ejemplo escribí que cuando haces clic en un fragmento de texto " motor de búsqueda Yandex", la persona será dirigida a la dirección escrita en el valor del atributo href.

Creo que muchos de ustedes saben que existen enlaces internos y externos. Los enlaces internos se realizan dentro de un directorio, es decir, un sitio web, y los enlaces externos conducen a algunos recurso de terceros. Y ahora te mostraré cómo hacer ambas cosas.

Archivo en la misma carpeta

Pero dicha transición funcionará siempre que el archivo al que está vinculando esté ubicado en la misma carpeta que el archivo en el que está colocando el vínculo. Para otras opciones, todo es un poco diferente.

Archivo en otra carpeta

Abra el archivo pushkin.html en Notepad++

Ahora busca la palabra foto y envuélvela en etiquetas..

¡Ahora atención! En el valor del atributo especificamos la ruta relativa al archivo que se está editando, es decir, el propio pushkin.html. Deberías terminar con algo como esto:

Foto

¿Qué hemos hecho ahora? E hicimos lo siguiente: dado que el camino hacia la fotografía pasa por carpeta separada img, que se encuentra en la misma carpeta que el archivo pushkin.html, luego en el valor del atributo tenemos que escribir primero el nombre de la carpeta, y luego, mediante una barra (/), el nombre completo del documento (en nuestro caso, fotografías).

Ahora guarde y ejecute el archivo pushkin.html en su navegador. Verá que la palabra "Foto" se resaltó en azul y se puede hacer clic en ella, lo que significa que al hacer clic en este enlace se nos dirigirá al archivo fofo.jpg, que se encuentra en la carpeta img.

Entonces ¿cómo? ¿Está todo claro? Si pasa algo, no dudes en preguntar.

Transiciones externas

Y por supuesto no podemos evitar mencionar enlaces externos, después de hacer clic en el cual seremos llevados a un sitio completamente diferente. Pero aquí no hay nada complicado. El punto es que agregas el valor href dirección completa sitio o página web. Mostré un ejemplo con Yandex arriba. Pero aquí hay otro ejemplo:

Estudiaré para convertirme en maestro de proyectos sociales.

Aquí llegamos a pagina especifica sitio específico.

Se abre en una nueva ventana

De forma predeterminada, cuando hace clic en un enlace, el documento se abre en la misma ventana que su página, es decir. Tu página se cerrará de golpe. Y esto no es bueno. En particular, para blogs o proyectos de contenido promocionados, se recomienda que al hacer clic en un enlace, el documento se abra en una nueva ventana o pestaña sin cerrar la página.

Esto nos ayudará atributo objetivo con el valor "_blank". No hay nada complicado aquí. Sólo necesitarás insertar esto dentro de la etiqueta de apertura. después del valor del atributo href. Tomemos ese extracto del archivo lukomorye.html, donde hicimos un enlace a la página pushkin.html, solo que ahora escribiremos este mismo atributo. Debería verse así:

Del poema Ruslan y Lyudmila (Autor - A.S. Pushkin)

Bueno, aquí todo está claro. Ahora cuando haces clic en el contenido página deseada se abre en una nueva ventana. Esto es muy necesario, porque si no lo registras, el usuario simplemente abandonará tu página. Y así, en cualquier caso, permanecerá en él, sólo si no lo cierra específicamente. Intenta hacer todo tú mismo, simplemente haz todo hermoso con tus propias manos. No es necesario copiar y pegar.

Bueno, algo como esto. Parece que te he contado todo lo más importante, pero si quieres avanzar en esta dirección y aprender HTML y CSS para crear sitios web, blogs e incluso tiendas online profesionales, asegúrate de ver un excelente curso en vídeo sobre este tema. Las lecciones son realmente excelentes y están realmente dirigidas a personas que todavía están poco familiarizadas con la creación de sitios web o no.

Bueno, esto concluye nuestra lección de hoy. Espero que te haya gustado mi artículo y te alegrará que te conviertas en mi lector habitual. Así que no olvides suscribirte a las actualizaciones de mi blog para no perderte nada interesante. Bueno, te deseo éxito en todos tus esfuerzos. ¡Adiós!

Saludos cordiales, Dmitri Kostin.