Utilidades

Plantilla de enlaces


<A HREF="dirección">texto</A>


Por ejemplo, esta página se enlaza así

Utilidades


Para que el enlace se abra en una página nueva la plantilla es


<A HREF="dirección" target="_blank">texto</A>


Para que aparezcan los signos <> en este texto y no se interprete su contenido como etiqueta HTML se escribe sin espacios intermedios entre & y ;

< (less than) & l t ;
> (greater than) & g t ;





Uso de notas con enlaces de retroceso


Podemos añadir notas a pie de página (en realidad a cualquier sitio del texto de una página) e incluir un enlace de retroceso desde la nota al lugar de partida.

Por ejemplo si pinchamos en el enlace


(1)


nos lleva a la Nota 1 y pinchando en el enlace Subir 1 volvemos al punto de origen. Eso nos permite saltar a cualquier punto del texto de la página o de otra página y volver desde ese punto al de origen.

Consiste en añadir anclas mediante la plantilla


<A NAME="Nombre">Nombre</A>


en el lugar de llegada llamado Nombre (por ejemplo, Nota 2)

y colocar un enlace con la plantilla


<A HREF="dirección#Nombre">Nombre</A>


en el lugar de salida. Basta escribir "#Nombre" si se permanece dentro de la misma página.

Las plantillas para esta página son

<A HREF="#Nota 1"><B><I>(1)</I></B></A><A NAME="Subir 1"></A>


y


<A NAME="Nota 1"></A><B>Nota 1:</B>

<I>o o o</I>

<A HREF="http://o o o/" target="_blank">o o o</A>

<A HREF="#Subir 1"><B><I> (Subir 1)</I></B></A>

Nota 1:

o o o

o o o

(Subir 1)









Uso de tooltip

(Funciona bien para Firefox, con algún problema en Safari o Chrome)

Podemos hacer aparecer cuadros flotantes sobre el texto y que incluyan imágenes, texto o ambos.

Por ejemplo, ésta:


movimiento en una imagen estáticaLa imagen no es una animación, pero parece moverse cuando no se la mira directamente.

Haga clic en el enlace para ver la imagen en otra ventana

o ésta:

[*] Estas ventanas flotantes funcionan correctamente con Firefox, pero no con otros navegadores. Puede enviar un comentario a mi correo surscrd@gmail.com

Para ello, es necesario incluir en la plantilla instrucciones como éstas para el tipo de enlace llamado a.tooltip o a.tooltip2 variando la anchura, el color de fondo o el tipo de letra

a.tooltip span {
display: none;
padding: 2px 3px;
margin-left: 8px;
width: 410px;
}
a.tooltip:hover span{
display: inline;
position: absolute;
background:#e0e0e0;
border: 1px solid ;
color: #000000;
}

a.tooltip2 span {
display: none;
padding: 2px 3px;
margin-left: 8px;
width: 410px;
}
a.tooltip2:hover span{
display: inline;
position: absolute;
background:#e0e0e0;
border: 1px solid ;
color: #000000;
}


y escribiendo los enlaces según las siguientes plantillas

<a class="tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPyP6gb-kvgpDzINgKPdNjI6TmrSOXNMoiyi_sPyXtyQQ7pZqktJ6Azu1bxkp3OFoKh4wOVcmEfyzmZEy9f88sNnb3S15-aNsZRzixkNkLnjYddsRae3SSrFVFaOTYc3XP1nGoid0nNVH/s1600-h/ilusion-optica-grande.jpg" target="_blank"><b>movimiento en una imagen estática</b><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPyP6gb-kvgpDzINgKPdNjI6TmrSOXNMoiyi_sPyXtyQQ7pZqktJ6Azu1bxkp3OFoKh4wOVcmEfyzmZEy9f88sNnb3S15-aNsZRzixkNkLnjYddsRae3SSrFVFaOTYc3XP1nGoid0nNVH/s400/ilusion-optica-grande.jpg"><b>La imagen no es una animación, pero parece moverse cuando no se la mira directamente.<br/><br/>Haga clic en el enlace para ver la imagen en otra ventana</b></span></a>


<a class="tooltip2" ><b>[*]</b><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMV8Kpb8bMrGn3kODji7gatipTINgmBn45RXsrf07L5-8632ZDZKC1UE2L2RElsUZ1Fsv5Hd5mDvlzaKJi22t2Pv6mesUeDyByN-LboDgjwDyl0n4R6ji8T6M0iYnxmeEz5HnlcsEZQW3k/s800/Sc!%20mini.gif"> Estas ventanas flotantes funcionan correctamente con Firefox, pero no con otros navegadores. Puede enviar un comentario a mi correo <b>surscrd@gmail.com</b></span></a>

que corresponden a los datos de las ventanas del ejemplo.



Pruebas de tooltip


1


Ilusión ópticaIlusión óptica





2

una imagen coloreadaSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana

una prueba sin imagenSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana

una prueba sin imagenSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana





3

a.tooltip4 span {
display: none;
padding: 2px 3px;
margin-left: 8px;
width: 410px;
}
a.tooltip4:hover span{
display: inline;
position: absolute;
right: 0;
background:#f3f3f3;
border: 1px solid ; ;
color: #000000;
}

una imagen coloreadaSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana

una prueba sin imagenSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana

una prueba sin imagenSi miramos al centro de los círculos durante unos segundos y seguidamente al punto central de la figura veremos un círculo del color complementario.

Haga clic en el enlace para ver la imagen en otra ventana





Pruebas 2


----
1

Pero lo más llamativo son las conocidas como ilusiones ópticas. Podemos creer ver movimiento en una imagen estáticaLa imagen no es una animación, pero parece moverse cuando no se la mira directamente.

Haga clic en el enlace para ver la imagen en otra ventana o falsas espiralesLa imagen está formada por círculos, no por espirales.

Haga clic en el enlace para ver la imagen en otra ventana o que colores iguales son diferentesLas dos casillas A y B tienen el mismo tono de gris. Podemos comprobarlo en Ilusiones ópticas 4

Haga clic en el enlace para ver la imagen en otra ventana.

Pero lo más llamativo son las conocidas como ilusiones ópticas. Podemos creer ver movimiento en una imagen estáticaLa imagen no es una animación, pero parece moverse cuando no se la mira directamente.

Haga clic en el enlace para ver la imagen en otra ventana o falsas espiralesLa imagen está formada por círculos, no por espirales.

Haga clic en el enlace para ver la imagen en otra ventana o que colores iguales son diferentesLas dos casillas A y B tienen el mismo tono de gris. Podemos comprobarlo en Ilusiones ópticas 4

Haga clic en el enlace para ver la imagen en otra ventana.


-----


movimiento en una imagen estáticaLa imagen no es una animación, pero parece moverse cuando no se la mira directamente.

Haga clic en el enlace para ver la imagen en otra ventana







-----

Iniciales grandes

Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes Para incluir iniciales grandes


Añadir en HTML de Posts

.dropcaps {
float:left;
color:#000088;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}


y


<span class="dropcaps">P</span><b>


para el ejemplo




Resaltar


Ejemplo


O bien

<span style="background-color: rgb(255, 255, 0);">Ejemplo</span>

(\(\
(-.-) ZZZZZ
o(")(")









Aristóteles, gif animado [Ver»]
ccc.

ddd


Aristóteles, gif animado [Ver»]
ccc.

ddd