Archive for enero, 2011


Crear Anclas, enlaces dentro de una página

on 1 de enero de 2011 in HTML No Comments »

Para acceder a una posición dentro de un documento HTML lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:

<A NAME=»nombreancla»></A>

Este elemento es llamado Ancla y su uso es frecuente en páginas webs además de ser muy fácil su ejecución, basta con colocar en donde queramos el enlace el símbolo # seguido del nombre del ancla de esta manera:

<A HREF=»#nombreancla»>Ancla dentro de esta página</A>

Entonces al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla.

Ahora bien, si lo que queremos es acceder a un ancla de otra página hay que indicarlo al final de su URL. de esta forma:

<A HREF=»Direcciónwebotrapágina#nombreancla»>Ancla dentro de otra página</A>

 

 

Texto Intermitente

on 1 de enero de 2011 in HTML 2 Comments »






Este texto intermitente lo pones tú.

CODIGO HTML:

<html>
<head>
<script>
var mostrar=false;
function inter () {
col= (mostrar) ? ‘#000’ : ‘#fff’;
document.getElementById(‘txt’).style.color=col;
mostrar = !mostrar;
setTimeout(‘inter()’,500);
}
</script>
</head>
 
<body onload=»inter()»>
Este <span id=»txt»>texto intermitente</span> lo pones tú.
</body>
</html>

 

– TAMBIEN SE PUEDE HACER CON ESTA FUNCION JAVASCRIPT:

 
<script>
function Blink()
{
var ElemsBlink = document.getElementsByTagName(‘blink’);
for(var i=0;i<ElemsBlink.length;i++)
ElemsBlink[i].style.visibility = ElemsBlink[i].style.visibility
==’visible’ ?’hidden’:’visible’;
}
</script>
 
Después, pones en la etiqueta BODY lo siguiente:
<body onload=»setInterval(‘Blink()’,500)»>
 
Y finalmente, cualquier elemento que quieras que sea intermitente lo pones entre las etiquetas «blink», por ejemplo:
<blink>Texto Intermitente</blink>

Y se ve así:


Texto Intermitente

 

- ACTUALMENTE es más simple, aunque sólo está soportada por algunos navegadores

ASI MEJOR, VERDAD?

CODIGO HTML:

<p style="text-decoration: blink;">ASI MEJOR, VERDAD?</p>

Texto Movil

on 1 de enero de 2011 in HTML No Comments »

– TEXTO MOVIL DE DERECHA A IZQUIERDA:

Ponga aqui el texto

CODIGO HTML:

<MARQUEE>Ponga aqui el texto</MARQUEE>

 

– TEXTO MOVIL DE DERECHA A IZQUIERDA CON UN COLOR DE FONDO (BGCOLOR):

Ponga aqui el texto

CODIGO HTML:

<MARQUEE BGCOLOR=#FF4500>Ponga aqui el texto</MARQUEE>

 
– También puede ir acompañados de los atributos HEIGHT (alto) y WIDTH (ancho). Estos deben ir seguidos de un valor numerico el cual se mide en píxeles.

Ponga aqui el texto

CODIGO HTML:

<MARQUEE BGCOLOR=#FF4500 HEIGHT=25 WIDTH=50%>Ponga aqui el texto</MARQUEE>

 
– Se puede controlar el número de veces que queremos que salga el mensaje, y el sentido (de izquierda a derecha o al contrario), el primero se logra con el atributo LOOP, y el segundo con DIRECTION, el cual tiene dos valores RIGHT o LEFT, su valor por defecto es LEFT.

Ponga aqui el texto

CODIGO HTML:

<MARQUEE LOOP=10 DIRECTION=RIGHT >Ponga aqui el texto</MARQUEE>

 

– Y por último, el que choca a los costados y se detiene cuando apoyas el puntero del ratón.

Ponga aqui el texto

CODIGO HTML:

<span ><marquee scrollamount=5 onMouseOver=this.stop() onMouseOut=this.start() WIDTH=50% behavior=alternate /><font color=»#FF8C00″><b>Ponga aqui el texto</b></font></marquee><br /> </span>

 
*scrollamount = velocidad.
*WIDTH = tamaño de caja.
 

Cuadro con título y borde

on 1 de enero de 2011 in HTML 1 Comment »

Con el siguiente código HTML puedes crear la caja con un título y un borde alrededor de la caja, también puedes cambiar los valores cellpadding=»1″ para variar el grosor del borde la caja.

Titular del cuadro
Ponga aqui el contenido del cuadro

CODIGO HTML:

<table width=»220″ border=»0″ cellspacing=»0″ cellpadding=»1″>
<tr bgcolor=»#990033″ align=»center»>
<td><b><font color=»#FFFFFF»>Titular del cuadro</font></b></td>
</tr>
<tr bgcolor=»#990033″>
<td>
<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»4″>
<tr bgcolor=»#FFFFFF»>
<td>Ponga aqui el contenido del cuadro</td>
</tr>
</table>
</td>
</tr>
</table>

Botones Link

on 1 de enero de 2011 in HTML No Comments »

– PULSANDO SOBRE UN TEXTO:

Google

CODIGO HTML:
<a title=»Google» href=»http://www.google.es/» target=»_blank»>Google</a>

– PULSANDO SOBRE UN CUADRO DE TEXTO (BOTON):

CODIGO HTML:
<input onclick=»window.open(‘http://www.google.es/’, ‘width=800,height=600’);» type=»button» value=»Ir a Google» />

– PULSANDO SOBRE UN CUADRO DE TEXTO(BOTON) CON COLOR DE RELLENO:

CODIGO HTML:
<input style=»background-color: #e1c4ff; border: 1 solid #FF0000;» onclick=»self.location.href=(‘http://www.google.es’)» type=»button» value=»Google» />

 

Menú Desplegable 1

on 1 de enero de 2011 in HTML No Comments »

 

CODIGO HTML:

 

<form method=»post» action=»» name=»»>

<select name=»select15″ onChange=»window.open(this.options[this.selectedIndex].value,’ _blank ‘)»>

<OPTION VALUE=»http://www.tuweb.com/» SELECTED>Leer el periodico

<OPTION VALUE=»http://www.meneame.net/»>Meneame

<OPTION VALUE=»http://www.elcorreo.com/»>El Correo Digital

</select>

</form>
 

Quedaría así: