Las etiquetas HTML más usadas para escribir una historia

Voy a hacer un pequeño resumen de las principales etiquetas HTML que se utilizan para escribir las historias de los blogs de La Coctelera. En general, casi siempre hay una etiqueta de comienzo y otra de finalización, entre las cuales debe estar el texto al que se quiere aplicar la etiqueta.

Para enfatizar un texto (lo que normalmente quiere decir ponerlo en cursiva) se usa la siguiente etiqueta:

 <em> texto </em>
 

La Coctelera ya facilita un pequeño botón en la interfaz de escritura de nuevas historias para hacerlo. Yo, al principio, marcaba el punto donde quería comenzar a enfatizar y le daba al botón, con lo que aparecía la etiqueta inicial; luego marcaba el punto donde quería terminar y le daba de nuevo al botón, con lo que aparecía la etiqueta final. Más tarde me di cuenta de que si selecciono todo el texto que quiero enfatizar y le doy una única vez al botón aparecen ambas etiquetas.

Para resaltar un texto (lo que generalmente significa ponerlo en negrita) se usa la siguiente etiqueta:

 <strong> texto </strong>
 

La Coctelera también proporciona un botón en la interfaz para añadir estas etiquetas. Este botón funciona exactamente igual que el anterior.

Para tachar un texto se usan estas etiquetas:

 <del> texto </del>
 

Yo no las utilizo demasiado, pero pueden resultar útiles cuando corriges algo que has escrito y quieres mantener lo que había originalmente para que los lectores vean que es una corrección.

Para añadir un título se usa:

 <h1> texto </h1>
 

Estas etiquetas añadirían un título de nivel 1 (el más grande). De forma similar puedes añadir títulos de nivel 2, nivel 3, etc. cambiando la etiqueta h1 por h2, h3…

Para indicar que un texto es una cita textual se usan estas etiquetas:

 <blockquote> texto </blockquote>
 

La Coctelera también proporciona un botón con esta funcionalidad, que funciona como los de enfatizar y resaltar.

Una lista no numerada con varios puntos se escribiría de la siguiente forma:

 <ul>
 <li> texto </li>
 <li> texto </li>
 <li> texto </li>
 </ul>
 

Cada elemento de la lista va encerrado entre las etiquetas li mientras que la lista entera está encerrada por las etiquetas ul. Si quieres que los elementos estén numerados tienes que cambiar las etiquetas ul por etiquetas ol.

Para poner un acrónimo se utilizan estas etiquetas:

 <acronym title="significado"> texto </acronym>
 

El acrónimo aparecerá con un subrayado punteado pero, cuando pongas el ratón encima de él, aparecerá su significado tal cual lo hayas escrito en el atributo title.

Para añadir un enlace a otra página se usan estas etiquetas:

 <a href="dirección" title="descripción"> texto </a>
 

De esta manera, el texto se mostrará resaltado en otro color. Si pones el ratón sobre él aparecerá una descripción del enlace tal y como la hayas puesto en el atributo title. Si picas en el texto, entonces accederás a la página web cuya dirección has puesto en el atributo href. Resulta posible forzar a que se abra una nueva ventana del navegador al picar en el enlace. Basta con añadir un nuevo atributo a la etiqueta inicial:

 <a href="dirección" title="descripción" target="_new"> texto </a>
 

Pero esto suele resultar molesto para muchos lectores, así que es conveniente no utilizarlo si no es por una muy buena razón. De hecho, La Coctelera proporciona un botón para añadir enlaces, que funciona igual que el de las citas textuales, pero cuando lo usas sólo te pregunta por el atributo href, que es el único realmente vital para el enlace.

La Coctelera también te permite subir ficheros a la web. Cuando detecta que el fichero subido es una imagen te pregunta por la alineación que deseas: izquierda, derecha o centro. Entonces aparece un trozo de código como este:

 <img src="myfiles/condor/imagen.jpg" class="imgcen">
 

Este código indica que en ese punto va la imagen correspondiente al atributo src y que debe ir centrada (los tres valores posibles del atributo class en La Coctelera son imgcen, imgdcha e imgizqda). Una cosa importante a tener en cuenta es que la ruta al fichero de imagen que La Coctelera pone automáticamente no es completa, lo que puede resultar problemático para alguien que vea la historia desde fuera de La Coctelera. Por eso hay que completar siempre la dirección de esta manera:

 <img src="http:/www.lacoctelera.com/myfiles/condor/imagen.jpg" 
 class="imgcen">
 

Además, hay otros dos atributos que suelen resultar últiles con las imágenes. El atributo title permite añadir un texto explicativo que aparecerá cuando el lector ponga el ratón sobre la imagen. El atributo alt permite añadir un texto que aparecerá en lugar de la imagen si ésta no carga adecuadamente. Lo más práctico es poner el mismo texto en ambos atributos.

 <img src="…imagen.jpg" class="imgcen" title="texto" alt="texto">
 

Por último, está resultando bastante popular añadir videos de YouTube en algunas historias. Incrustar uno de estos videos es bastante simple, ya que la propia web de YouTube, al lado de cualquier video, muestra una pequeña línea identificada con el texto embed que contiene todo el código necesario. Sólo tienes que copiarlo y pegarlo en la historia:

 <object width="425" height="350">
 <param name="movie" value="http://www.youtube.com/...">

 <embed src="http://www.youtube.com/..." 
 type="application/x-shockwave-flash"
 width="425" height="350">

 </object>
 

La parte negativa que tiene hacer esto es que el blog tardará más tiempo en cargar, pues tiene que contactar primero con YouTube, lo que puede resultar algo molesto para los lectores con conexiones lentas.

Y con esto concluyo. Tan sólo me resta darle las gracias, una vez más, a mi amigo Pablo, ya que él fue quien me enseñó la gran mayoría de estas cosas.

Modificación (28/06/2006): Ayer descubrí que es posible utilizar los enlaces para mostrar direcciones de correo de tal forma que, cuando se pique en ellas, se abra el programa de correo electrónico en lugar del navegador web. Para ello, basta con añadir mailto: delante de la dirección.

 <a href="mailto:dirección"> dirección </a>
 

Por cierto, lo que comento sobre incrustar videos en una historia no es exclusivo de YouTube. Otras páginas de videos ofrecen la misma funcionalidad.

servido por condor 7 comentarios compártelo