Haga una transición a la página html. Redirigir a otra página usando JavaScript

En esta lección hablaremos de cómo hacer un enlace en HTML. Los enlaces se utilizan con mucha frecuencia en los sitios web; le permiten pasar de una página de un sitio web a otra. La peculiaridad de los enlaces es que pueden conducir no sólo a una página web, sino también a archivos, imágenes, etc.

Los enlaces pueden ser internos y externos. Los enlaces internos conducen a páginas y archivos dentro de un sitio. Los enlaces externos conducen a sitios, documentos y archivos de terceros. Al mismo tiempo, estos tipos de enlaces se establecen de forma casi idéntica.

Cómo hacer un enlace en HTML, ejemplos.

1. HREF— es responsable de hacia dónde debe conducir el enlace. Un enlace estándar se especifica de la siguiente manera: Texto del enlace.

2. OBJETIVO— es responsable de la ventana en la que se abrirá el documento. De forma predeterminada, se abre un nuevo documento en la ventana actual del navegador. El atributo "destino" le permite abrir un enlace en una nueva ventana del navegador. Este atributo tiene los siguientes parámetros:

• _blank: carga la página en una nueva ventana;
• _self: carga la página en la ventana actual;
• _parent: carga la página en el marco principal;
• _top: cancela todos los marcos y carga la página en una nueva ventana.

3. NOMBRE- se utiliza para navegar a un área específica dentro de una página. Después del símbolo de almohadilla, la palabra clave (marcador o etiqueta) se indica entre comillas. Para ir a esta etiqueta, utilice el enlace en el que está escrita esta etiqueta.

Ir al sitio web

Ir al sitio web

Lecciones gratuitas de WordPress

Ejemplo 4: Imágenes como enlaces.

Ir al texto

Texto de la página...

En este ejemplo, la página está etiquetada como "lista" usando el atributo "nombre". Vincular a esta etiqueta lo llevará a un área específica de la página.

Descargar archivo

Escribir una carta

Puede establecer el color de los enlaces utilizando los atributos que se especifican en la etiqueta "cuerpo" como parámetros. Considere estos atributos:

• enlace: enlace no visitado, de forma predeterminada se muestra en azul;
• alink: enlace activo, rojo por defecto;
• vlink: enlace visitado, morado por defecto.

...

Así, hemos descubierto el principio mediante el cual se crean enlaces en HTML. A los enlaces se les pueden dar estilos específicos. Puedes verlo en la lección siguiendo el enlace.

Todos los usuarios que de una forma u otra están conectados con los sitios web, su creación o edición, se enfrentan cada día a la creación de enlaces a diversos materiales. Y probablemente cada uno de ellos sepa cómo y con qué etiqueta HTML hacer un enlace a cualquier material en Internet.

Sin embargo, no todo el mundo sabe cómo vincular a una determinada parte de la página. Esto puede resultar muy útil si escribe artículos extensos. Al inicio del post puedes hacer un índice, desde cada línea del cual luego puedes hacer un enlace a una parte del texto tanto en la misma página como en cualquier otra.

Para comprender lo que queremos decir, mire el diseño de nuestras instrucciones recientes sobre. En la parte superior de la página hay un menú de este tipo, en el que se crean enlaces a un lugar específico de la página.

Cómo vincular a una ubicación específica en la página actual

1. Asigna un ancla a una parte de la página.

El primer paso es asignar un llamado "ancla" a la parte de la página a la que se debe redirigir al usuario al hacer clic en el enlace. Para hacer esto, inserte el siguiente código antes del texto en esta parte de la página

Texto de la página...

donde en lugar de “ancla” inserta cualquier palabra que preferentemente coincida con el significado del párrafo al que te refieres.

2. Enlace al ancla

Lo segundo que debe hacer es vincular al "ancla" establecido en el primer párrafo en ese lugar de la página desde donde cree que el usuario podría querer ir a la parte del texto al que está vinculando. Por ejemplo, podría ser un índice al principio de un artículo. El enlace de anclaje se ve así

donde “ancla” reemplaza con la palabra que elegiste en el primer párrafo del artículo.

Cómo vincular a una parte específica de otra página

De la misma manera que comentamos anteriormente, puedes vincular no solo a parte del texto en la misma página, sino también a un lugar específico en cualquier otra página. Lo principal es que tienes la oportunidad de colocar un "ancla" allí. Esto se hace de la siguiente manera:

1. Asigne un "ancla" a la página del destinatario.

Como en el párrafo anterior, asigna un “ancla” a la parte deseada de la página a la que el usuario debe ir al hacer clic en el enlace, seguirá teniendo el mismo aspecto:

Texto de la página...

donde en lugar de "ancla" deberás insertar cualquier palabra que desees.

2. Enlace al ancla de otra página.

Como en el caso anterior, sólo necesitas poner un enlace al “ancla” que creaste anteriormente. La única diferencia es que al vincular a parte de otra página es necesario agregar su URL al código, que como resultado se verá así

Texto del enlace

donde en lugar de "dirección de la página" debe sustituir, respectivamente, la URL de la página a la que está enlazando, y en lugar de "anclar" el texto que seleccionó al crear el "ancla".

Buenos días a todos, mis 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 del 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.

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

La etiqueta emparejada es responsable del hipervínculo, pero por sí sola 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á, en este ejemplo escribí que cuando hace 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 encuentran dentro de un directorio, es decir, un sitio, y los enlaces externos conducen a algún 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

1. Abra el archivo pushkin.html en Notepad++
2. Ahora busca la palabra foto y envuélvela en etiquetas.<un href> .
3. ¡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:

¿Qué hemos hecho ahora? E hicimos lo siguiente: dado que la ruta a la foto se encuentra en una carpeta img separada, que se encuentra en la misma carpeta que el archivo pushkin.html, en el valor del atributo primero debemos escribir 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.

¿Así que cómo? ¿Todo claro? Si pasa algo, no dudes en preguntar.

Transiciones externas

Y por supuesto, no podemos dejar de mencionar los enlaces externos, tras hacer clic en ellos seremos redirigidos a un sitio completamente diferente. Pero aquí no hay nada complicado. El punto es que pongas la dirección completa del sitio o página web en el valor href. Mostré un ejemplo con Yandex arriba. Pero aquí hay otro ejemplo:

Estudiaré para convertirme en maestro de proyectos sociales.

Aquí llegamos a una página específica de un 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.

El atributo de destino con el valor "_blank" nos ayudará con esto. Aquí no hay nada complicado. 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. Debe tener un aspecto como este:

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

Si la página html está ubicada en otra carpeta, deberá especificar la ruta desde esta página html. Por ejemplo, si la carpeta de nuestro sitio contiene las páginas index.html y pattern.html, y colocamos la página kontact.html en la carpeta kon, y luego especificamos la ruta desde la página index.html a la página kontact.html, escribe lo siguiente: (todas las carpetas se indican mediante /).

Paso 2.

Todo lo que tenemos que hacer es colocar contenido diferente en diferentes páginas html.

Deje que se publiquen fotografías de plantillas con sus breves características en nuestra página principal en la página de patrones. html: solo habrá fotografías de las plantillas y en la página kontact.html, nuestra dirección de correo electrónico.

Comencemos con la página index.html. Ábrelo en el Bloc de notas.

Busque en el código de la página la parte del código responsable del contenido. Ahora dice lo siguiente: Como aquí tendremos fotografías de plantillas y sus descripciones, lo más conveniente es colocar las fotografías en una columna y las descripciones en otra. Por ejemplo, tomemos dos plantillas, lo que significa que nuestra tabla constará de 2 filas y 2 columnas (puedes hacer tantas como quieras). Entonces, cambiemos esta parte de la siguiente manera: ahora insertaremos fotos de las plantillas en la primera columna y sus descripciones en la segunda. Hay una etiqueta para insertar fotos en HTML. , es único, es decir no es necesario cerrarlo. Para indicar qué imagen insertar, esta etiqueta tiene un parámetro src, cuyo valor es la ruta a la imagen.

La página index.html está lista. Echemos un vistazo a la página Pattern.html. Decidimos simplemente colocarle fotografías de las plantillas.

Ábrelo en el Bloc de notas y en lugar de las palabras “Aquí hay contenido”, inserta un título, imágenes y algo de texto, para que todo quede centrado en la etiqueta. agregar atributo alinear="centro" Etiquetas denota un párrafo (es decir, texto separado de otros elementos por sangrías en la parte superior e inferior).

Finalmente, en la página kontact.html indicaremos nuestro correo electrónico. Hagamos esto de dos maneras iguales: