Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 9na-Entrega enlaces Webs

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 2029

Para esta novena entrega les traigo los tipos de enlaces que se pueden utilizar para tu página web creada con HTML. Una de las partes fundamentales de la red.

Podemos definir los enlaces en varios tipos:

Enlaces locales:

Son los que se utilizan para las páginas contenidas en nuestros sitios webs a los que se accede desde el directorio raíz.

Enlaces internos:

Se utilizan en referencia a algún sector de nuestra web. Si nuestra página web es muy larga es probable que ésto nos sea de utilidad.

Enlaces remotos.

Son los que están apuntados a otros sitios web (la sintaxis es igual a la de los sites locales)

Enlaces con archivos.

Se usan para tener acceso a la descarga de un fichero.

Enlaces con direcciones de correo.

Abren nuestro cliente de correo electrónico para enviar un mail (No recomendado, porque a veces el visitante no tiene un cliente de correo configurado).

Ejemplos de enlaces locales:

Resultado -> Click Aquí

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Enlaces Locales</title>
<meta name="description" content="Como crear enlaces web.">
<meta name="keywords" content="Enlaces">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

<p>Esto es un enlace interno: <a href="/pruebas/pruebas/HTML/probarPracticas.html">Aquí se coloca una descripcion que es el texto que muestra el enlace</a></p>

</body>
</html>

La etiqueta que se utiliza para el enlace es la "href" y entre medio de las mismas una descripción.

Enlaces internos, para estos se sigue utilizando la etiqueta HREF pero ahora referencia a un link interno que se encuentra adentro de nuestra misma página. Como vamos a ver en el siguiente ejemplo:

Resultado -> Click Aquí 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<a name="inicio"></a>
<a href="#final">Ir al final de la web</a>

<p>Acceso a los contenidos</p>
<ol>
    <li><a href="#maqu1">CPU</a></li>
	<li><a href="#maqu2">CPU</a></li>
	<li><a href="#maqu3">CPU</a></li>
</ol>

<h1><a name="maqu1"></a>CPU1</h1>
<p>Problema: Virus y Cambio de antivirus<br><br><br>
Fecha: 22.06.2011<br><br><br>
Fue recibido por: Nahuel<br><br><br>
Dejó: Una pelota de basquet<br><br><br>
Se reparó: Cambio el disco rígido.<br><br><br>
Estado: Reparado<br><br><br>
Retirado por: Propietarios<br><br><br></p>
<h1><a name="maqu2"></a>CPU2</h1>
<p>Problema: Falla General Peligro Atómico<br><br><br>
Fecha: 28.07.2015<br><br><br>
Fue recibido por: Charly<br><br><br>
Dejó: Mochila azul<br><br><br>
Se reparó: Cambio de flex.<br><br><br>
Estado: Completamente reparado<br><br><br>
Retirado por: Propietarios<br><br><br>
En la fecha: 12.05.2010<br><br><br>
Precio: 150</p>
<h1><a name="maqu3"></a>CPU3</h1>
<p>Problema:Retiro<br><br><br>
Fecha: 21-06-2011 19:37:36<br><br><br>
Fue recibido por: JAVIER<br><br><br>
Dejó:<br><br><br>
Se reparó: NO HA SIDO VISTO POR EL SERVICIO TECNICO<br><br><br>
Estado: LLENAR<br><br><br>
Retirado por: LLENAR<br><br><br>
En la fecha: LLENAR<br><br><br>
Precio: LLENAR<br><br><br>
En la fecha: 12.05.2010</p>

<a name="final">Este es el fin de la web</a><a href="#inicio"> Volver al linicio</a>

</body>
</html>

Como vemos al empezar el código que se ve en el site, que a estas alturas ya debemos saber que es todo lo que está dentro de la etiqueta "body" (aunque ya vamos a ver que en la cabecera se van a colocar muchas líneas). Se inicia con una etiqueta "a" y como se puede ver sigue de un atributo "name", ése es el que vamos a utilizar para acceder (o sea es el vínculo de destino), luego continúa con otra "a" que va hasta el final "href#" (con numeral o almohadilla) es la que vamos a usar para crear el vínculo interno. Si nos vamos hasta el final del código nos vamos a encontrar con una etiqueta "a" que dice "final" que referencia a la anterior.

Enlaces Remotos:

Se usan para acceder a otros sitios que no están en la raíz de nuestro host.

Resultado -> Click Aquí

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enlaces Externos o Remotos</title>
</head>

<p>Estos se usan para acceder a otros sites y a diferencia del local se coloca la URL del sitIO completo</p>

<h1 align="center"><a href="http://www.google.com.ar/">Ir a google</a></h1>

<body>
</body>
</html>

Ya vamos a ver otros atributos que se le pueden colocar a la etiqueta, como por ejemplo para que se abra una pestaña nueva o abra otra ventana en el navegador.

Enlaces a archivos

Resultado -> Click Aquí

Te permiten la descarga de archivos y generalmente lo vamos a usar para los archivos: TXT, RAR, DOC, DOCX , PDF, EXE (aunque no se recomienda),etc.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enlaces con archivos</title>
</head>
<body>

<p align="center">Descargar archivos</p>
<ul>
	<li><a href="/enlaces-archivos/Archivo.rar">Descargar</a></li>
</ul>

</body>
</html>

Enlaces de correo electrónico.

Para abrir tu cliente de correo con el destinatario al que se le va a enviar el correo se utiliza la misma etiqueta "a" seguido de la etiqueta "href" y conjuntamente de la dirección de correo se escribe "mailtoo:". Como se puede ver en el siguiente:

Resultado -> Click Aquí 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enlace a correo electrónico</title>
</head>

<a href="mailto:
 Esta dirección de correo electrónico está protegida contra spambots. Usted necesita tener Javascript activado para poder verla.
 "> Enviame un correo</a>

<body>
</body>
</html>

 

Oops... que es lo que se muestra en lo anterior, no se pone tanto código en realidad: Como estoy usando dreamweaver cuando copio y pego el código tiene algunas cosillas que el usuario no ve, como se ve en el anterior, se ejecuta una función a través de javascript.

Adicionalmente se podrían usar otros parámetros, como por ejemplo que te complete el asunto del envío y se vea automáticamente cliente  de correos, pero como dije antes es una técnica que ya no se usa :) .

Epero que sirva, saludos, Ch4rl1X!