Plantilla de enlaces<A HREF="dirección">texto</A>
Por ejemplo, esta página se enlaza así
UtilidadesPara 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 retrocesoPodemos 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>
(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ática
La 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 ventanao ésta:
[*]
Estas ventanas flotantes funcionan correctamente con Firefox, pero no con otros navegadores. Puede enviar un comentario a mi correo surscrd@gmail.comPara 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 óptica2
una imagen coloreada
Si 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 ventanauna 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 ventanauna 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 ventana3
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 ventanauna 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 ventanauna 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 ventanaPruebas 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 espirales
La 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 diferentes
Las 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 grandesPara 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
ResaltarEjemploO bien
<span style="background-color: rgb(255, 255, 0);">Ejemplo</span> (\(\
(-.-) ZZZZZ
o(")(")
Aristóteles, gif animado
[Ver»]
ccc.
dddAristóteles, gif animado
[Ver»]
ccc.
ddd
La imagen no es una animación, pero parece moverse cuando no se la mira directamente.
Si 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.
La imagen está formada por círculos, no por espirales.
Las dos casillas A y B tienen el mismo tono de gris. Podemos comprobarlo en Ilusiones ópticas 4
