Introducción
En una página web en Internet, es probable que vea una breve cadena de texto o una imagen, que al hacer clic en otra página web se mostraría en su navegador, reemplazando la persona que usted estaban viendo. Tal texto o imagen se llama hipervínculo. Nuestro interés en este artículo es ver cómo construir tales hipervínculos.
Para una página web larga, también se puede usar un enlace para mover la página a una posición vertical diferente. Por ejemplo, puede tener una página web larga, que comienza con un menú. Cuando haga clic en un elemento de menú, la sección que tiene los detalles del elemento del menú llegará a la parte superior de la ventana del navegador; La poción del menú ahora estará por encima de la ventana del navegador y no la verá. En este caso, hacer clic en el elemento del menú hace que la página salte a la sección de los detalles del menú.
Un hipervínculo a veces se conoce como un enlace.
Nota: Si usted No puedo ver el código o si cree que falta algo (enlace roto), solo contácteme en [email protected]. Es decir, contácteme para obtener el más mínimo problema que tiene sobre lo que se ha escrito.
recursos web
Cualquier elemento que reside solo en el servidor, que puede ver o escuchar en el navegador hay un recurso web. Un ejemplo de un recurso web es un documento XHTML. Un documento XHTML es el archivo XHTML en el servidor. En el navegador, ve un documento XHTML como página web. Otros ejemplos de recursos web son una imagen, un video clip o sonido (música). En el servidor, un archivo de imagen contiene una imagen, un archivo de video contiene un videoclip y un archivo de sonido contiene el sonido.
Se puede usar un hipervínculo para llevar un recurso web al navegador. En el caso de un documento XHTML, ve una nueva página web en el navegador. En el caso de una imagen, cuando hace clic en el hipervínculo, todo en igualdad de condiciones, vería una nueva página web que muestra solo esa imagen y nada más (sin texto). En el caso de un videoclip, cuando hace clic en el hipervínculo, todo en igualdad de condiciones, se abrirá una página web en blanco, y luego verá el clip (en movimiento y el sonido) en una ventana separada de la nueva página web en blanco.
Anchors de origen y destino
Un hipervínculo tiene lo que se llama un ancla de origen y un ancla de destino. El ancla de origen es el elemento (texto o imagen) en el que hace clic. El ancla de destino es el recurso web que aparece en la ventana del navegador (para reemplazar la página web, tenía el enlace en el que hizo clic).
El ancla de destino también puede ser una posición vertical en la misma página web Tener el enlace que hizo clic. En la introducción anterior, di un ejemplo, donde hablé sobre un menú y los detalles del menú debajo de la sección del menú en la misma página web. Al hacer clic en un elemento de menú, lleva sus detalles, que pueden estar en un elemento de párrafo XHTML (
) en la parte superior de la página. En este caso, el elemento de párrafo XHTML es el ancla de destino. Cuando el ancla de destino es una parte de la misma página web, esa parte es en realidad un elemento XHTML (por ejemplo, la regla horizontal).
A continuación, primero consideraremos hipervínculos que llaman recursos web al navegador antes de nosotros Considere los hipervínculos de la página que salta a una posición vertical diferente. Llamo al primer grupo de hipervínculos, hipervínculos simples. Llamo al segundo grupo de hipervínculos, Jump Hyperlinks.
Localizador de recursos uniformes
Un localizador de recursos uniforme abreviado a URL es un tipo de dirección que escribe en la barra de direcciones de Su navegador para recibir una página web. Un ejemplo, es
http://www.somewebsite.com/apage.htm
Aquí, la dirección del sitio web es http://www.somewebsitee.com. Apage.htm es un documento XHTML en un directorio (carpeta) en el servidor. Tenga en cuenta la barra de reenvío que separa la dirección del sitio web y el documento XHTML.
URL y directorios de servidor
Un servidor web normalmente tiene documentos XHTML en los directorios. Los directorios están en una jerarquía o un árbol de directorio. El directorio raíz tiene el documento XHTML que representa el sitio web; Esta es la página principal. Este documento tiene uno de los siguientes cuatro nombres:
index.htm, index.html, default.htm o default.html.
Entonces, cuando diseña su sitio web, está en casa La página debe tener uno de los cuatro nombres anteriores. Este nombre no aparece en la URL. Siempre que escriba la dirección del sitio web (URL) como la siguiente, la página de inicio aparecerá (venga) el navegador:
http://www.somewebsite.com
Como puede ver, ninguno de los cuatro nombres posibles anteriores aparecería en la URL.
Ahora, los directorios se indican en la URL mediante cortes de avance. Considere la siguiente URL:
http://www.somewebsite.com/folder1/folder2/apage.htm
Aquí la página de inicio está en el directorio raíz, que tiene uno F el por encima de cuatro nombres. El nombre no está indicado en la URL. La primera parte de la URL, es decir, http://www.somewebsite.com, llamaría a la página de inicio cuando se escriba solo la parte en la barra de direcciones del navegador. En la URL de arriba, la carpeta1 es un subcirector de primer nivel. La carpeta2 es un subcirectorio de segundo nivel. El archivo (página web), apage.htm está en la carpeta Sub Director2. Acceda al archivo en cualquier directorio de esta manera, al agregarlo al final de la URL después de la ruta del directorio. Una URL generalmente tiene una dirección de sitio, nombres de carpetas separadas por cortes de reenvío y un nombre de archivo de la página web. No puede tener dos nombres de archivos de página web en una URL.
No solo necesita tener solo la página de inicio en el directorio raíz. Puede tener otras páginas web en el directorio raíz. Estas páginas tendrían cualquier nombre, pero con la extensión .htm o .html.
Suponga que tiene una página, llamada especial.htm, en el directorio raíz en el servidor, si desea esta página En el navegador, escribiría lo siguiente en la barra de direcciones del navegador:
http://www.somewebsite.com/special.htm
Comienza con la dirección del sitio; Esto es seguido por una barra de reenvío y luego el nombre del archivo. La primera barra de reenvío única de la URL indica que el siguiente elemento es un directorio de primer nivel o el nombre de un archivo en el directorio raíz.
Los recursos web como se mencionó anteriormente se puede describir mediante una URL donde el URL se puede describir en que el URL se puede describir en que el URL se puede describir. El último elemento de la URL es el nombre del archivo del recurso web. Antes de continuar, sepa que puede llamar a un recurso web al navegador, escribiendo la URL del recurso web en la barra de direcciones y luego haga clic en Go. El localizador de recursos uniformes (URL) forma un componente de un hipervínculo como veremos a continuación.
Hyperlink
Aquí, me refiero a un hipervínculo que trae un recurso web desde El servidor al navegador del cliente.
El elemento A
El elemento A se usa para definir un hipervínculo o un hipervínculo de salto. En su forma más simple, la sintaxis del elemento A es:
contenido
arriba, la etiqueta de inicio es:
Comienza con el abierto soporte de ángulo. Esto es seguido inmediatamente por la letra ‘A’ en minúsculas. A continuación, tienes un atributo. El nombre del atributo es href; El valor del atributo es una URL, p. http://www.somewebsite.com/apage.htm. Este valor debe estar en cotizaciones (ya sea doble o simple).
Mirando la sintaxis, vemos que después de la etiqueta de inicio tenemos el contenido. El contenido es texto o una imagen (consideraremos el caso de una imagen más adelante). El texto es solo texto simple, como productos, para un sitio web que vende productos. Después del contenido, debe tener la etiqueta final. Recuerde, con XHTML, todos los nombres de etiquetas y nombres de atributos están en minúsculas; Entonces, A para la etiqueta de inicio o finalización debe estar en minúsculas. Un ejemplo del elemento A es
productos>/a>
cuando escribe esto en el elemento corporal de su página web o dentro de cualquier elemento (por ejemplo, elemento de párrafo) en el cuerpo Elemento, el usuario verá la palabra, productos, subrayado en el navegador.
Las etiquetas del elemento A no aparecen en la página web en el navegador. Es el contenido que aparece y subrayado, por defecto. Para el ejemplo anterior, cuando el usuario haga clic en el contenido, los productos, la página de productos aparecerá en el navegador que reemplaza la página que tenía el enlace. Tenga en cuenta que el nombre de archivo de la URL, del elemento A anterior, es, Products.htm. Este archivo es el archivo que se descarga del servidor al cliente y se muestra en el navegador.
Así es como se usa el elemento A como hipervínculo para descargar recursos web al navegador. Todo lo que tiene que hacer es tener el nombre del archivo de recursos como el último elemento de la URL del elemento HREF. Recuerde, los nombres de los atributos son sensibles a mayúsculas y el nombre HREF debe estar en minúsculas. La URL también tiene la ruta del directorio al recurso web (como se explicó anteriormente).
Para el elemento A, un significa ancla.
Un elemento A de esta manera, se forma, se forma Un simple hipervínculo. Primero veamos cómo se implementa el hipervínculo simple, antes de ver el hipervínculo de salto. Antes de hacer eso, veamos algunas reglas que rigen la URL como el valor del atributo HREF.
en el mismo directorio
Recuerde que los recursos web son archivos en directorios en el servidor. Un documento XHTML es el recurso web; En el navegador del cliente, es una página web; Mientras que en el navegador del cliente, hay dos instancias del contenido del archivo: uno en el archivo en el servidor y el otro que se muestra en el navegador. Un archivo de sonido es un recurso web; En el navegador es sonido (música) que escuchas. Un archivo de video clip es un recurso web; En el navegador, ves una imagen en movimiento y escuchas sonido. Solo tenga en cuenta que un archivo de video clip tiene imagen en movimiento y sonido, todo en una unidad. Utilizaremos solo el recurso web de documentos XHTML para nuestros ejemplos. Mientras que en el navegador, hay dos instancias de un contenido de recursos web: uno en un directorio en el servidor y el otro (exactamente el mismo) en el navegador del cliente.
Si el archivo que está buscando es En el mismo directorio que el archivo (documento XHTML) se muestra actualmente en el navegador, luego para un hipervínculo en la página en el navegador para acceder al archivo que está buscando, todo lo que necesita en el valor (URL) del atributo HREF es es el nombre del archivo. Digamos que tiene una página que tiene un hipervínculo y la página se muestra actualmente en el navegador del cliente. Supongamos que cuando haga clic en este enlace, el documento XHTML se descargará y mostrará está en el mismo directorio en el servidor que el archivo se muestra actualmente. Digamos que el nombre del archivo que se descargará es Products.htm. En este caso, el elemento A sería:
Productos
Por lo tanto, todo lo que necesita como valor del atributo HREF es solo la melena (incluida la extensión .htm) del archivo. También puede preceder al nombre del archivo con la parte izquierda de la URL completa, pero esto no es necesario ya que ambos archivos están en el mismo directorio. Llamemos a este directorio, el directorio actual.
Lo que hemos dicho en esta sección con respecto al nombre del archivo es aplicable a otros recursos web.
Sub directorio al directorio actual
Aquí hablamos sobre el caso, donde el archivo que se descargará se encuentra en un subdirector al directorio actual. En este caso, para el valor del atributo HREF, precede al nombre del archivo con los nombres subirectoriales que existen debajo del directorio actual. Imagen que el directorio actual tiene un subdirector inmediato llamado Dir3. También suponga que el directorio DIR3 tiene un subdirector inmediato llamado Dir4. Suponga que el archivo, products.htm está en Dir4. Para descargar (y haber mostrado automáticamente) el archivo, Products.htm, tendrá:
Productos
Separa los nombres de los directores entre sí con una barra de reenvío. No comienzas con un corte hacia adelante. Comenzando con una barra de avance tiene un significado especial (ver más abajo). El último nombre del directorio se separa del nombre del archivo con una barra de reenvío. Puede preceder al valor del atributo href con el resto de la parte izquierda de la URL, pero esto no es necesario.
cualquier directorio
para el valor de su atributo href, puede identificar el directorio raíz por la barra de avance, /. Desde la barra de avance, puede escribir la ruta de cualquier archivo. Suponga que para la situación anterior, tenía un directorio llamado Dir1 justo dentro del directorio raíz. Suponga que dentro de Dir1 tiene DIR2 e Inside Dir2, tiene Dir3.
También suponga que su directorio actual es Dir3. Suponga que cuando se hace clic en su enlace, mostraría un archivo llamado, Furniture.htm que reside en Dir1. Su enlace para el archivo en el directorio actual sería
muebles
Puede ver cómo comenzar el valor del atributo HREF con una barra de reenvío, se refiere al directorio raíz (¿usted está usted? tener el archivo de la página de inicio). Puede preceder a la barra de inicio hacia adelante aquí con la parte izquierda de la URL completa, pero eso no es necesario.
Implementar un hipervínculo
por la palabra, hipervínculo, aquí , Me refiero a un hipervínculo simple como se describió anteriormente. Usaré dos documentos XHTML simples (páginas web) para la ilustración. Este es el primer documento:
Ejemplo
Productos>/a>
El código anterior tiene un enlace. Puede guardar el código anterior con un nombre de archivo como, uno.htm. Cuando se hace clic en el enlace, el archivo que debe mostrar debe residir en el directorio actual y debe llamarse, Products.htm. Para probar el código, puede escribir (copiar y pegar) el siguiente archivo y guardarlo en el mismo directorio que el archivo uno.htm con el nombre, products.htm.
productos
Los productos se encuentran en esta página.
Este archivo es el segundo documento mencionado anteriormente.
Jump Hyperlink
Un hipervínculo de salto es Mi vocabulario para un hipervínculo que, cuando se hace clic, lo llevará a una posición vertical diferente de la misma página. Para lograr esto, el ancla de origen y el ancla de destino deben estar en la misma página. Con el hipervínculo simple, el ancla de origen es el elemento A de la página actual y el ancla de destino es un recurso web.
Con el hipervínculo de salto, el ancla de origen es un elemento A y el ancla de destino es cualquiera Elemento XHTML, ambos en la misma página. Sin embargo, aquí, el elemento de anclaje de destino tiene una identificación. Esta identificación también debe estar presente en el elemento de origen. Ilustramos esto con un ejemplo. Suponga que tiene una página web larga. Suponga que en la parte superior de la página web, tiene una lista de menú, y uno de los elementos de la lista es “la computadora”. Suponga que en la página tiene los detalles de la computadora en un elemento de párrafo. Suponga que el archivo largo se llama mypage.html.
El elemento del menú sería algo así como:
El párrafo El elemento abajo a continuación en la página sería algo así como:
Detalles de la computadora: Microprocesador: 4GHz, RAM: 256MB
La mayoría de los elementos XHTML pueden tener un atributo de ID como se indica en el párrafo Elemento anterior (ID significa identificación). El propósito es diferenciar un elemento de otro. Por ejemplo, es posible que tenga dos elementos de párrafo con el mismo contenido. La mejor manera de diferenciarlos es con una identificación. El valor del atributo de identificación siempre debe ser cotizaciones (simple o doble). El valor siempre debe comenzar con una letra (
arriba, la identificación es “C1”. El valor del atributo href del ancla de origen es una URL que termina con lo que se llama, el identificador de fragmentos. En el El caso anterior, la URL es la acortada, myPage.html (estamos tratando con la misma página). Esto es seguido por el carácter # especial y luego la ID, “C1”, del elemento de párrafo. La identificación después del carácter # se llama identificador de fragmento. El personaje # separa el identificador de fragmento de la URL en el valor del atributo HREF.
Entonces, para el hipervínculo de salto, el ancla de origen debe tener un identificador de fragmentos y el ancla de destino debe tener una identificación . El valor de esta identificación también es el identificador de fragmentos.
Puede probar las reglas anteriores con el siguiente código:
“http://www.w3.org/tr/ xhtml1/dtd/xhtml1 strict.dtd “>
página larga
la computadora
/>
/>
Detalles de la computadora: microprocesador: 4GHz, RAM: 256MB
/>
/>
Los elementos de ruptura de línea simplemente hacen que la página sea larga agregando líneas en blanco.
Punto vertical en otra página
Algunas buenas noticias aquí: es posible que haga clic en un enlace en una página y vaya a una vertical particular posición en una página diferente. Todavía usa la técnica de hipervínculo de salto, pero aquí, la URL en el ancla de origen debe ser la de la página diferente. El elemento XHTML en la página diferente debe tener y valor de identificación. En la página actual, el identificador de fragmentos del ancla de origen debe ser este valor de identificación.
Es decir, para los conceptos básicos de hipervínculo XHTML. Ha sido un largo viaje. Valió la pena. Tomamos un descanso ahora y continuamos en la siguiente parte de la serie.
