jueves, 12 de febrero de 2009

Tags XHTML no muy utilizadas Parte 1

Saludos a todos despues de una realmente laaarrrrgaaaa temporada de estar sin hacer nada(por falta de tiempo, no por flojera), parece que los animos me estan volviendo asi que sin mas empiezo con este post en el que veremos algunas etiquetas xhtml muy utiles y un tanto desconocidas.



INTRO

Para los mas inexpertos decir etiquetas XHTML no quiere decir que no sirvan para el HTML, el XHTML es en su forma mas sencilla HTML con un formato estricto que hay que cumplir.

nota: Esta info la saque despues de leer el manual de XHTML que pueden encontrar en librosweb.es, esto por si algun lector curioso desea ahondar mas sobre una etiqueta o conocer mejor lo que es el lenguaje XHTML.

Antes de pasar de lleno a lo de las etiquetas me gustaria mencionar que HTML y por ende XHTML clasifica a todos sus elementos (etiquetas) en dos grupos:

Elementos de linea y Elementos de bloque

Esta clasificacion puede que sin conocerla ya la habran deducido, los elementos de bloque son tales como las etiquetas div las cuales cuando las declaramos podemos observar que ocupan todo el espacio disponible hasta el final de linea aunque su contenido no llegue al final de esta, por otro lado los elementos de linea solo ocupan el espacio necesario para mostrar su contenido, un ejemplo de este tipo de elemento es la etiqueta span.

SINTAXIS

Este es el formato que debe de cumplir un docuemnto XHTML como se menciono anteriormente y es lo que diferencia el HTML del XHTML ya que el primero no es tan riguroso cuando se trata de cumplir sus reglas de formato como lo es el segundo.

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Valido para HTML y XHTML: <p>Hola <a> esto es un link<a> dentro de un parrafo <p>

Valido para HTML pero incorrecto en XHTML: <p>Hola <a> esto es un link<p> dentro de un parrafo <a>

2) Los nombres de las etiquetas y atributos siempre se escriben en minusculas.

3) El valor de los atribustos siempre se encierra con comillas

Valido para HTML y XHTML: <a href="www.google.com">google<a>

Valido para HTML incorrecto en XHTML: <a href=www.google.com>google<a>

4) Los atributos no se pueden comprimir

Valido para HTML y XHTML: <dl compact="compact"> ... <dl>

Valido para HTML incorrecto en XHTML: <dl compact> ... <dl>

5) Toda etiqueta que se abre siempre debera cerrarse

Ahora bien ya terminadas estas aclaraciones preliminares vamosnos de lleno con las etiquetas.

TEXTO


<em> Etiqueta de enfasis generalmente pone el texto en cursiva

<blockquote>
Aumenta la sangria al texto que contiene, es una de las etiquetas mas utilez en lo que a presentacion consierne


<abbr> Muestra un borde inferior punteado

<code> Se usa para resaltar con otro tipo de letra el codigo fuente que agregamos a una pagina, es simplemente un detalle estetico :)


ENLACES


<a href="/">inicio<a> Este es un truco muy sencillo que usa direcciones relativas para volver a la pagina de inicio.

//Enlace directo a la segunda seccion de la pagina
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion"> Enlace a la segunda seccion de la pagina 1 </a>

  • Los enlaces directos a secciones tambien funcionan con el atributo id de cualquier elemento, esto quiere decir que si un elemento digamos un parrafo tiene como id la palabra inicio podemos referenciarlo desde un enlace.
< p id="inicio">parrafo inicio ... texto ...</p> ... texto ... <a href="#inicio">volver a parrafo inicial<a>

se recomienda usar los atributos id de los elementos existentes a crear secciones dentro de la pagina xhtml.

  • Otro tipo de enlaces que define xhtml son <script> y <link>, estos sonusados para enlazar los recursos que se deben de cargar automaticamente.
  • Aunque la etiqueta <script> permite enlazar varios lenguajes de programacion, el uso mas comun es para enlazar un archivo javascript, a diferencia de html en xhtml cuando se incluye codigo javascript en la propia pagina, se debe de insertar dentro de una seccion llamada CDATA. Para ello el codigo JS se debe de encerrar entre <![CDATA[ y ]]> como vemos a continuacion:
<script type="text/javascript">
//<![CDATA[
window.onload=function(){alert ("la pagina se a cargado completamente")}
//]]>
</script>

  • La etiqueta <link> solamente se puede incluir dentro de la cabecera del documento.
Enlaces e-Mail

  • Envio de correo electronico a varias direcciones: <a href="mailto:nom@direccion.com, otro_nom@direccion.com">correo</a>
  • Añadir asunto inicial al corro electronico: <a href="mailto:nom@direccion.com?subject=Pedir informes">mas informacion</a>
  • Añadir un texto inicial en el cuerpo dl correo electronico:<a href="mailto:nom@direccion.com?body=Quisiera pedir informes sobre sus productos">mas informacion</a>
  • Aunque mailtopueda parecer una ventaja su uso esta descontinuado.
Enlazar a un archivo FTP:
< a href="ftp://ftp.ejem.com/ruta/archivo.rar" title="Archivo de las canciones de chicachu">

  • Elazar el favicon, el favicon o icono para favoritos es el pequeño icono que muestran las paginas en varias partes del navegador: <link rel="shortcut icon" href="/favicon.ico" type="image/ico"/>
  • Enlazar un archivo RSS: <link rel="alternate" type="application/rss+xml" title="Resumen de todos los articulos del blog" href="/feed.xml">
  • indicar que existe una version de la pagina en otro idioma: <link lang="es" xml:lang="es" title="El tutorial en español" type="text/html" rel="alternate" hreflang="es" href="http://www.ejemplo.com/tutorial/espanol.html"/> recordar que todo este codigo debera ir dentro de las etiquetas de cabecera.
  • Indicar que existe una pagina que es indice de la pagina actual: <link rel="start" title="El indice del tutoeial" type="text/html" href="http://www.ejemplo.com/tutorial/indice.html" />