You are on page 1of 6

Ejemplo de código HTML

<HTML>

<HEAD>

<TITLE>Un Titulo para el Browser de turno </TITLE>

</HEAD>

<BODY>

<!-- Aqui va todo lo chachi -->

<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>

<P> <IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato Felix
">Hoola.

<P>Esto es un parrafo con informacion

super importante. Notese que las lineas salen pegadas aun dejando

espacios, saltos de linea, etc. <BR> &#161 Si pongo esto

si <STRONG>cambia </STRONG> de linea!

<P>Otro parrafo, esto ya es un poco rollo.

<H3>Pongamos un subtítulo<H3>

<P>Por cierto, &#191 que paso con las <A HREF= "#pepe ">anclas</A>?

<HR>

<UL>

<LI> Esto es una lista no ordenada.

<LI> Las listas quedan mejor si tienen varios elementos.

</UL>

Me voy al <A HREF= "http://www.iac.es/home.html ">IAC</A>.

<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A


NAME="pepe">anchor.</A>

.....................................................
.....................................................

</BODY>

</HTML>

Tu visualizador lo vería así.

El HTML se basa en una serie de etiquetas (``tags''), que casi siempre hay una al
principio y otra al final. Lo que si es común a todas es que están englobadas en los
símbolos em mayor que y menor que, de forma: <etiqueta>. Veamos las del ejemplo en
detalle:

Curso Tutorial de xHTML

Conceptos Básicos de xHTML - Parte 2


Tutorial por Jorge Oyhenard (elQuique) de Developers Live

Luego de la Primer Parte, donde comenzamos a introducirnos en el xHTML, abordamos


ahora la continuación con etiquetas como encabezados, vínculos y tablas.

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:
<h1>Curso Tutorial de xHTML</h2> \\ este seria el titulo
<h2>Conceptos Básicos de xHTML</h2> \\ este seria el subtitulo

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:

<p>Este texto si bien es un parrafo, tendrá un salto de línea, justo acá<br />
y este otro texto se ve en a línea inferior</p>

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:

<a href.=”página”>texto</a>

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:

<a href=”http://www.tallerwebmaster.com”>Para visitar la web de Taller Webmaster,


click acá</a>

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:

<a href=”http://www.tallerwebmaster.com” target=”_blank”>Para visitar la web de


Taller Webmaster, click acá</a>

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:

<a href=”http://www.tallerwebmaster.com” target=”_blank” title=”Visitar Taller


Webmaster”>Para visitar la web de Taller Webmaster, click acá</a>
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:

<img src=”archivo_imagen”>

Ejemplo:

<img src=”logotipo.gif”>

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:

<img src=”logotipo.gif” width=”250” height=”200” title=”Logotipo de la empresa,


presione sobre la imágen para ampliar” alt=”Logotipo de la Empresa” align=”right”
vspace=”5” hspace=”10”>
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:

<table>
<tr>
<td>datos columna 1 en la fila 1</td>
<td>datos columna 2 en la fila 1</td>
</tr>
<tr>
<td>datos columna 1 en la fila 2</td>
<td>datos columna 2 en la fila 2</td>
</tr>
</table>

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í:

Datos columna 1 en la fila 1 Datos columna 2 en la fila 1


Datos columna 1 en la fila 2 Datos columna 2 en la fila 2

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”>