Curso Tutorial de xHTML

En la Primer Entrega, vimos algunas etiquetas básicas de nuestras páginas xHTML, seguiremos ahora profundizando con algunas otras.

Etiquetas de Encabezados

Las etiquetas para Encabezados (Headings) hoy día han recuperado importancia debido al Posicionamiento en Buscadores, si bien estuvieron desde el comienzo la mayoría no encontraba diferencia entre usar un Parrafo con fuente grande o usar las H1, H2, ..etc. Hoy día, tal como comentamos en nuestros Tutoriales de Posicionamiento Web, las etiquetas Heading, se utilizan para dar mayor o menor importancia a los titulos de nuestras textos y temas expuestos en nuestras páginas web, por otra parte los buscadores como Google, Yahoo, etc, leen estas etiquetas para dar o no prioridad al texto que ellas encierran, y posicionar nuestras web de mejor manera cuando alguien busca esas palabras.

H1, h2, h3 al h6

Son 6 niveles donde únicamente cambia la importancia del texto que enmarcan.

Ejemplo:

Saltos de Línea

Esta Etiqueta <br /> permite establecer un Salto de Línea (bajar de renglon), a diferencia de las anteriores no es necesario abrir y cerrar, solamente es necesario incluirla donde queremos saltar la línea

Ejemplo:

Creando Enlaces o Vínculos

Una de las etiquetas más importantes de xHTML es <A>, que permite vincular (Link) una página con otra, o subir o bajar dentro de una misma página.

Su formato básico es:

href permite indicar una página a la cual queremos ir

texto es el texto que quedara subrayado y donde se debe dar click para ir a link

Ejemplo:

Todas las etiquetas que hemos mencionado, tienen otros Parámetros o Atributos que aun no hemos mencionado, pero en esta etiqueta <a> especialmente veremos algunos que son más que importante.

target permite definir si al dar click se abre ese link en la misma ventana, en una nueva o en un marco especifico. En el ejemplo anterior, si damos click, la página se abre en la misma ventana, en el siguiente ejemplo:

Solo cambia el target, indicandosele _blank, lo que hace que al dar click se abrirá el link en una nueva página.

title permite definir un titulo para ese link, ejemplo:

Este texto es el que aparece cuando posicionamos el Mouse sobre el link, sin dar click, es el llamado Tooltip.

Insertando Imágenes

Otra de las etiquetas más utilizadas es la de inserción de imágenes, se llama <img>, su formato básico es:

Ejemplo:

Esta etiqueta también tiene parámetros o atributos adicionales que se le pueden aplicar, algunos son:

width indica el ancho de la imágen, si no lo especificamos tomara la cantidad de pixeles que tiene ese archivo.

height indica el alto de la imágen, si no se especifica toma el del archivo.

En ambos casos tanto para width, como para height siempre es mejor reducir, o ampliar imágenes con un programa como Photoshop, ya que obligar el tamaño mediante xHTML con estos parámetros causa mayor perdida de calidad.

alt es el texto alternativo, es el que aparece si la imágen no esta disponible por alguna razón, o si en nuestro navegador tenemos configurado para no mostrar imágenes. Hoy día es un atributo importante para el Posicionamiento Web, ya que los buscadores como no pueden reconocer la figura que esta en la imágen utilizan el texto de esta etiqueta alt.

title al igual que en el link, es un texto que aparece cuando ubicamos el Mouse sobre la imágen.

border indica el grosor del borde de la imágen

vspace indica el margen vertical, entre la imágen y los textos u otras imágenes que lo rodean

hspace indica el margen horizontal.

align indica la alineación de esa imágen dentro de la página o parrafo. Puede ser por ejemplo left (izquierda), rigth (derecha)

Un ejemplo más completo con todos los parámetros seria:

Este ejemplo mostrara el logotipo con un ancho de 250 y alto de 200, al pasar el Mouse sobre la imágen aparecera el texto ”Logotipo de la empresa, presione sobre la imágen para ampliar” y si la imágen no se ve aparecera en su lugar el texto ”Logotipo de la Empresa”, la imágen se alineara a la derecha y tendrá un margen vertical de 5 pixeles y horizontal de 10 pixeles.

Usando Tablas

Las tablas son el mejor recurso para tabular datos, por ejemplo un Reporte de usuarios, un listado de productos, etc, cualquier lista con varias columnas. Lamentablemente las tablas también son usadas para maquetar sitios, o sea disponer imágenes, textos etc, esta no es la finalidad de las tablas y es un uso incorrecto de las mismás que no debería realizarse, para esos casos es mejor utilizar CSS, como explicamos en nuestros Tutoriales de CSS.

Su formato básico es:

Las tablas estan formadas por varias etiquetas, como ven en el ejemplo anterior.

<table> comienza una tabla y </table> la finaliza. Las tablas estan formadas por una o más filas.

<tr> comienza una fila y </tr> finaliza la fila. La fila puede estar formada por una o más columnas.

<td> comienza una columna y </td> finaliza una columna.

La tabla del ejemplo luce así:

Como ven los tags xHTML del ejemplo en texto ahora se presentan gráficamente de izquierda a derecha, fila por fila.

Al igual que los Tags anteiores, las etiquetas de las tablas pueden tener atributos o parámetros para cambiar su forma de presentación.

border indica el grosor del borde de la tabla. Ejemplo <table border=”2”>

cellpadding indica el margen que hay entre el borde de la celda y su contenido

cellspacing indica el margen que hay entre celda y celda

También se puede aplicar la etiqueta align para alinear la tabla a la derecha, así <table align=”right”>, o alinear al centro el contenido de una celda aplicandolo así <td align=”center”>

En la próxima entrega seguimos profundizando en el tema.

Ver Primera Parte