Microsoft Expression Web: hipervínculos
En este capítulo, aprenderemos a utilizar hipervínculos en su sitio web. Una de las cosas que hace que la web sea tan expansiva es la capacidad de las páginas web para enlazarse con otras páginas web.Hyperlinks o enlaces se encuentran en casi todas las páginas web.
Los hipervínculos también permiten a los usuarios hacer clic e ir a una página diferente, un lugar dentro de una página, una imagen u otra ubicación en Internet por completo. A continuación se muestran algunas de las características importantes del hipervínculo:
Las herramientas y opciones de hipervínculos de Expression Web hacen que sea muy fácil trabajar con hipervínculos.
Las vistas e informes de hipervínculos de Expression Web también facilitan la búsqueda y reparación de enlaces rotos e incorrectos.
Un hipervínculo puede ser una palabra, un grupo de palabras o una imagen que, al hacer clic, lo llevará a un nuevo documento o un lugar dentro del documento actual.
Etiqueta de ancla
En HTML, <a>La etiqueta, que se conoce como etiqueta de anclaje, se usa para crear un enlace a otro documento. Un ancla puede apuntar a otra página html, una imagen, un documento de texto o un archivo pdf, entre otros. Aquí está el código básico de un ancla<a> etiqueta.
<a href = "url">Text to be displayed as link<a>En <a> etiqueta, el atributo "href" se utiliza para dirigir el enlace al documento, y las palabras entre la apertura y el cierre de la etiqueta de anclaje se mostrarán como un hipervínculo.
Cuando mueves el cursor sobre un enlace en una página web, la flecha se convertirá en una pequeña mano.
Una URL es una dirección que especifica un protocolo, un servidor web y una ruta de archivo.
Hay dos tipos de URL, absolute y relative. Unabsolute URL contiene una dirección completa mientras que un relative URLfalta una o más partes de la dirección. Sin embargo, el navegador web obtiene la información que falta de la página que contiene la URL.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que usaremos ambos absolute y relative URLs.
Step 1 - Primero, abra el index.html página y agregue las siguientes líneas en el main content sección.
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>A continuación se muestra la implementación completa de index.html página.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css">
#left-nav ul li a:hover {
color: #000000; background-color: #116611;
}
#left-nav ul li a:hover {
color: #000000; background-color: #66FF99;
}
</style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"> </div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 2 - Guardemos la página web y verá el texto en la sección de contenido principal.
Step 3 - En la Vista de diseño, haga clic con el botón derecho en Google y luego seleccione Hipervínculo ... en el menú que abrirá el Insert Hyperlink diálogo.
Step 4- En el campo Dirección, especifique la URL de la página de inicio de Google y haga clic en Aceptar. Del mismo modo, haga clic con el botón derecho en YouTube en la vista de diseño y seleccione Hipervínculo ...
Step 5- En el campo Dirección, especifique la URL de la página de inicio de YouTube y haga clic en Aceptar. Ahora, haga clic con el botón derecho relativo en la "Página de inicio 2" y seleccione Hipervínculo ... en el menú que abrirá el cuadro de diálogo Insertar hipervínculo.
Step 6- Para la ruta relativa, seleccione index_2.html en el campo de dirección y Expression Web obtendrá la ruta restante del archivo index.html, porque ambos archivos están en el mismo directorio. Haga clic en Aceptar.
Como puede verse, estas palabras ahora están subrayadas, lo que significa que se crean hipervínculos.
Step 7- El color de fuente predeterminado es azul y el color de fuente predeterminado para hipervínculos también es azul. Para cambiar el color predeterminado del hipervínculo, seleccione cualquiera de los hipervínculos y vaya alFormat menú y seleccione Background… opción de menú.
Ahora verá el siguiente cuadro de diálogo.
Step 8 - Cambiemos el color del hipervínculo a verde.
En la siguiente captura de pantalla, verá que el color del hipervínculo ha cambiado a verde.
Step 9 - Permítanos ahora obtener una vista previa de esta página web en un navegador.
Si hace clic en el enlace de Google, lo dirigirá a la página de inicio de Google.
Step 10- De manera similar, si vuelve a la página de inicio y hace clic en el enlace de YouTube, lo dirigirá a la página de inicio de YouTube. Volvamos a la página de inicio.
Haga clic en el Home Page 2 enlace y verá que abre el index_2.hmtl file.
