26 mayo 2007

Información para imágenes y enlaces (título)


¿Quieres añadir una breve información a los enlaces e imágenes de tu blog que aparezca al pasar el ratón sobre ellos? Es muy muy sencillo, sólo tienes que añadir title="XXX" tras la dirección URL del enlace o imagen:


<a href="URL" title="XXX"> xxx </a>


Y si quieres que se abra en una pestaña o ventana nueva, detrás de ese atributo, como sigue:

<a href="URL" target="_blank" title="XXX"> xxx </a>



Si se trata de una imagen, haremos lo mismo:

<img src="URL" title="XXX">



Podéis comprobar el "efecto" situando el ratón sobre la imagen inferior de mi firma; no es instantáneo, hay que esperar unos segundos.

23 mayo 2007

Enlace "arriba" o "top" = marca


Navegando por la red nos encontramos con bastante frecuencia páginas en las que hay enlaces del tipo "arriba" cuando hemos llegado al final de la página y que nos dirigen a la parte superior de la misma; otras veces son enlaces para ir a una parte concreta del contenido de un artículo, por ejemplo. ¿Cómo se consigue eso? Técnicamente se le denomina marca. Es bastante sencillo y podemos utilizarlo siempre que queramos, dentro de nuestros posts o entradas, o en la propia plantilla. Si queréis comprobar el efecto, dirigiros al final de mi página y hace click sobre el letrero móvil que hay con el título del blog, os dirigirá arriba del blog.


Para conseguir este "efecto" tenemos que crear el enlace que nos dirige al lugar deseado y la marca (dirección) a donde debe dirigirse el enlace. Lo haremos en 2 pasos:

  1. Buscamos el sitio exacto donde queremos que el enlace nos diriga, en el caso de mi página es el letrero de bienvenida al blog. Ahí debemos crear la marca, con el siguiente código:



    <a name="XXX">XXXX</a>



    Aquí he creado yo una marca, con este código. Si os dirigís al final de esta entrada y hacéis click en "Arriba", comprobaréis que sube hasta ahí.

  2. Nos iremos al sitio exacto donde queramos poner el enlace (en los ejemplos que os he puesto aqí, el final del blog, o el final de la entrada) e incluiremos un código de enlace con el símbolo # delante del nombre de la marca, así:



    <a href="#nombre de la marca">XXX</a>;


El nombre que escribáis en la marca, por ejemplo, arriba (name="arriba") será el mismo que escribáis en el enlace (href="#arriba"). Lo que escribáis entre las etiquetas <a ...> XXX </a> será aquello que se vea en la página, ya sea una sola palabra o, como ocurre en mi blog, una imagen. En el segundo caso pondremos el código de la imagen (img src...) entredichas etiquetas, que en el caso concreto de la marca sería éste:




<a name="arriba"><img src="direccion URL"></a>



A su vez dicha imagen puede ser un enlace, la marca no interfiere en él. Quedaría así:



<a name="arriba"><a href="direccion URL"><img src="direccion URL"></a></a>




En cuanto al enlace a esa marca, también podemos utilizar una imagen (una flecha hacia arriba, por ejemplo), pero nunca un enlace desde dicha imagen (la referencia "#arrriba" es un enlace en sí misma). Para incluir una imagen:



<a href="#arriba"><img src="direccion URL"></a>




Autorretrato, Van Gogh


Haz click aquí para subir arriba



Añadido de última hora: no repitáis el nombre de una marca dentro del mismo blog(con añadirle un número es suficiente para cambiarlo),ya que el enlace nos dirigirá al primero que aparezca en la página (aquí, por ejemplo, dirigía a la parte superior de la página y no al lugar indicado de esta misma entrada).

11 mayo 2007

Algunos códigos de texto para las entradas


Tras el comentario de Silvia en la entrada anterior de esta categoría, me he decidido a poneros aquí los códigos html que se usan para editar el texto de nuestras entradas. Ella comenta que no le funciona el editor de texto. No sé a qué se deberá exactamente; espero que se le solucione pronto. Por si tenéis el mismo problema o simplemente sentís curiosidad por conocerlos,a continuación tenéis los más usuales:



Itálica o cursiva



<span style="font-style:italic;">Itálica o cursiva</span>


<i>Italica o cursiva</i>



Negrita

<span style="font-weight:bold;">Negrita </span>


<b>Negrita <b>



para citar texto



<blockquote>para citar texto </blockquote>




Para cambiar de color



<span style="color: rgb(255, 0, 0);">Para cambiar de color (aqui­, rojo)</span>



Para cambiar el tamaño de la letra:

muy pequeño

<span style="font-size:78%;">muy pequeño</span>

pequeño

<span style="font-size:85%;"> pequeño</span>

normal (es el que sale por defecto)
grande

<span style="font-size:130%;">grande</span>

muy grande

<span style="font-size:180%;">muy grande</span>




Como veis, el tamaño va en porcentajes (%), basta con encontrar el que queramos e incluirlo en el código.

Si lo que queremos es cambiar la fuente:



Arial

<span style="font-family: arial;">Arial</span>


Courier

<span style="font-family: courier new;">Courier</span>


Georgia

<span style="font-family: georgia;">Georgia</span>


Lucida Grande

<span style="font-family: lucida grande;">Lucida Grande</span>


Times

<span style="font-family: times new roman;">Times</span>


Trebuchet

<span style="font-family: trebuchet ms;">Trebuchet</span>


Verdana

<span style="font-family: verdana;">Verdana</span>


Webdings

<span style="font-family: webdings;">Webdings</span>



Alienación del texto:

Para justificar texto


<div style="text-align: justify;">Para justificar texto</div>



Para alinear texto a la izquierda (nos saldrá siempre así por defecto)



<div style="text-align: left;">Para alinear texto a la izquierda (nos saldrá siempre así por defecto)</div>


Para centrar texto



<div style="text-align: center;">Para centrar texto </div>



Para alinear texto a la derecha




<div style="text-align: right;">Para alinear texto a la derecha </div>



Para
saltar

de

línea:





<br>



Para cambiar de párrafo


lo que significa que no sólo saltamos de línea sino que el espaciado entre líneas aumenta a un espaciado del 1.5 del Word, para que nos hagamos una idea.


A comparar con estas otras líneas, en las el espaciado entre líneas es el mínimo que puede haber, frente al anterior, más grande. ¿Veis la diferencia?

<p>Para cambiar de parrafo</p>




  • para crear
  • una lista
  • de "viñetas",
  • como lo llama el editor de textos
  • de blogger.



<ul><li>para crear</li><li>una lista</li><li>de "vinetas",</li><li>como lo llama el editor de textos</li><li>de blogger.</li></ul>



  • y si dentro de ella
    • necesitamos
    • crear una nueva
    • lista
      • aquí tenemos
      • cómo hacerlo
        • así.




<ul><li>y si dentro de ella</li><ul><li>necesitamos</li><li>crear una nueva</li><li>lista</li><ul><li>aqui­ tenemos</li><li>como hacerlo</li><ul><li>asi­.</li></ul></ul></ul></ul>



  1. Si lo que queremos
  2. es una lista numérica
  3. Aquí podemos ver cómo
    1. incluyendo una lista
    2. dentro de otra
      1. y una tercera
      2. también




<ol><li>Si lo que queremos</li><li>es una lista numérica</li><li>Aqui­ podemos ver como</li><ol><li>incluyendo una lista

</li><li>dentro de otra</li><ol><li>y una tercera</li><li>tambien

</li></ol></ol></ol>