Avisar de contenido inadecuado
Expand

Crear Enlace

La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc...


Para incluir un Hyperenlace se utiliza la etiqueta <a></a> . El texto o imagen que se encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir que si pulsamos con el raton sobre él, se realzará la funcion de hiperenlace indicada por la etiqueta <a></a> .


Si el Hiperenlace está indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos.
Ejemplo Se vería como
<a href="http://www.descargabeta.com/" > Pulse para ir a la página de DescargaBeta </a> Pulse para ir a la página de DescargaBeta
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href , es decir, accederá a la página situada en http://www.descargabeta.com/


Lo mismo podríamos hacer con un gráfico.


Ejemplo Se vería como
Para buscar en Internet :
<a href="http://www.yahoo.com/" >
<img
src="yahoo.gif" ></a>
Para buscar en Internet : yahoo


Pulsando sobre la imagen se accedería a la pagina situada en http://www.yahoo.com/.


Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name .



Ejemplo:

<a name="seccion1" ></a>


Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará seccion1 . Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :


<a href="#seccion1">Primera Parte</a>

 


O también :


<a href="http://www.descargabeta.com/mipagina.htm#seccion1">Primera Parte </a>

 


Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet.



Ejemplo:

<a href="news://www.descargabeta.com/">Noticias de actualidad </a>


Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.



Ejemplo:

<a href="mailto:usuario@descargabeta.com"> Envíame tus sugerencias </a>


También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.


<a href="manual.zip">Pulsa aqui para llevarte una copia del manual. </a>
{
}
Expand

Atributos del texto

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segun el navegador que este vd. utilizando, verá el resultado correctamente o no.

Atributo Etiqueta Ejemplo
Negrita <b></b> <b> Texto de prueba </b>
Cursiva <i></i> <i> Texto de prueba </i>
Teletype <tt></tt> <tt> Texto de prueba </tt>
Subrayado <u></u> <u> Texto de prueba </u>
Tachado <s></s> <s> Texto de prueba </s>
Parpadeo <blink></blink> <blnk> Texto de prueba </blink>
Superindice <sup></sup> <sup> Texto de prueba </sup>
Subindice <sub></sub> <sub> Texto de prueba </sub>
Centrado <center></center> <center> Texto de prueba </center>

Por otro lado la etiqueta <font></font> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size , bgcolor y face .

 

size="valor"
Da al texto un tamaño en puntos determinado. size = + / - valor Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.

 

color="codigo de color"
Escribe el texto en el color cuyo codigo se especifica.

 

face="nombre de font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador.

 

Ejemplo
<font size="+2" color="#FF0000" face="Arial" > Texto de prueba </font>

 

Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

 

Ejemplo
<font size="+2" color="#FF0000" face="Arial"> Texto de prueba </font>

 

Para incluir comentarios en la página Web se utiliza la etiqueta <!-- -->.

Ejemplo :

 

<!-- Esto es un comentario sobre mi pagina Web -->

 

Los comentarios no seran mostrados por el navegador y son úitiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos más adelante que la etiqueta de comentario nos será de utilidad para incluir codigo JavaScript en nuestra página Web.

www.DescargaBeta.Com 
Expand

Varios links en una misma imágen

Hoy es posible linkear solo una o varias parte de una misma imagen a diferentes destinos, gracias al tag MAP.

Los mapas de imágenes convierten parte de la superficie de un .gif o .jpg en un link a otra dirección. La diferencia de enlazar la imagen a un url específico es que estaríamos tomando la totalidad de la superficie de la imagen, en cambio, utilizando las etiquetas MAP podemos especificar la forma, tamaño y coordenadas sobre la imagen.

Crear las etiquetas no será difícil, lo que puede llevar algo de tiempo es encontrar las coordenadas exactas. El código sería el siguiente:

<img SRC="nombredelarchivo.jpg" USEMAP="#ejemplo" BORDER=0 height=XXX width=XXX>
<MAP NAME="ejemplo">

Luego es necesario especificar la forma y tamaño del sector a linkear.
Las formas puede ser círculos (CIRCLE), rectángulo (RECT) o una polilínea (POLY), y se especifican en la etiqueta SHAPE.

Además, hay que incluir las coordenadas de la superficie de trabajo, relativas de la esquina superior izquierda de las imágenes.
En caso de un círculo serás tres números, separados por comas y entre paréntesis. Los dos primeros especifican las coordenadas X,Y y el tercero el radio.
Para los rectángulos tendremos cuatro valores, los dos primeros marcan las coordenadas del vértice superior izquierdo, y los restantes el ángulo opuesto.
Y para las polilíneas, se dan pares de valores por cada vértice. Obviamente, las dos ultimas deben coincidir con las dos primeras, para cerrar la polilínea.

<AREA SHAPE=CIRCLE COORDS="x,x,x" HREF="http://...">
<AREA SHAPE=RECT COORDS="x,x,x,x" HREF="http://...">
<AREA SHAPE=POLY COORDS="x,x,x,x,x,x,x,x...." HREF="http://...">

Para no volverse monos buscando las coordenadas correctas, existes pequeños programas que lo hacen por nosotros. Solo se debe abrir la imagen y especificar las áreas y los links, y por resultado el programa nos dará el código html listo para incluir en la página.

www.DescargaBeta.Com 

Expand

Código javascript para agregar a favoritos una pagina web

Si queremos facilitar la vuelta a nuestra página a quienes nos visiten, podemos hacer un link que agregue a sus favoritos nuestra página, usando javascript. El código es el siguiente:

Agregar a fávoritos:
<a href="javascript:window.external.AddFavorite('http://www.descargabeta.com','Mi web trata de...');"><b>Agrega esta web a tus favóritos!</b></a>

{
}
Expand

Javascript para recomendar página

El siguiente javascript permite incorporar un enlace para que nuestros visitantes puedan recomendar nuestra página a sus amigos (dentro del BODY):

<script language="javascript">
// Los mejores trucos para windows en http://www.descargabeta.com/
function mailpage()
{
  mail_str = "mailto:tunombre@descargabeta.com?subject=visita esta página. " document.title;
  mail_str = "&body=Hola. Te recomiendo que visites Infotrucos -- " document.title;
  mail_str = ". Enlace: " location.href;
  location.href = mail_str;
}
</script>
<a HREF="javascript:mailpage()">Recomendar por e-mail esta página</a>

Expand

Hipervinculos de texto en codigo html

para poder crear un hepervinculo o enlace en html conseguiremos el siguien codigo

<a href="http://www.descargabeta.com" target="main">Tu Texto</a><br />


Hipervinculo en la misma web o ventana


Ejemplo : Codigos Html

REsultados : le damos click y sale la opcion de que el hipervinculo se funde en la misma web

Hipervincunlo en una nueva ventana

ahora usaremos en siguiente codigo

<a href="http://www.descargabeta.com" target="_blank">tu texto</a><br />


Ejemplo: Codigos Html

Resultados : este enlace sale a una nueva ventana en opcion de Blank