|
Desarrollo: Código HTML: Introducción |
El HTML no es un lenguaje de programación
como el Basic o el Pascal, sino un lenguaje descriptivo con el cual es posible codificar
un hipertexto de manera tal que los programas navegadores lo entiendan. Esta codificación
se lleva a cabo a través de determinadas etiquetas, más conocidas como tags, que dan
forma al documento.
A continuación se explica las funciónes que cumplen los principales tags y las distintas
aplicaciones que tienen los mismos:
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la
siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por
claridad, se usarán en los siguientes ejemplos sólamente las mayúsculas
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el
documento HTML debe estar entre las etiquetas <HTML> y </HTML>
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales
El encabezamiento, comprendido entre las
etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas
<BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla
principal, principalmente el título del documento, comprendido entre las etiquetas
<TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido,
pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda
de direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto,
imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando
escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que
éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos
separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que no tiene
su correspondiente etiqueta de
cierre </P>)
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y
</H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número
indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes
experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se
logra.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>. Nos
centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta
<HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya
horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el
fondo, como se puede observar a continuación:
En el procesador de texto copiamos lo siguiente:
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. Como el
lenguaje HTML no es dificil, pronto estare en condiciones de hacer
cosas mas interesantes.
<P> Aqui va un segundo parrafo.
</BODY>
</HTML>
Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad,
pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es
el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de
otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta
<H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre
vayan en el orden correcto, pues de lo contrario se producirían errores.
Para obtener más información sobre la función que cumple cada uno de los tags y las
distintas aplicaciones que tienen, visitá el Sitio http://www.wmaestro.com
Tutorial escrito por Francisco Arocena
Webmaster del Sitio Web Maestro
http://www.wmaestro.com