El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Para poder crear una página, debemos tener un editor de textos como por ejemplo el Blog de notas. Una vez generada la página creada, colocamos el nombre con extensión HTML. Por ejemplo mipagina.html
Las etiquetas mencionadas funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
El texto de la etiqueta de preferencia se recomienda que vaya en minú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 cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.) Por tanto, la estructura queda de la siguiente 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, algunas consideraciones:
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, si que tengamos que pulsar el retorno del carro (Enter). Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <p> y </p>.
El texto puede tener uasn cabezeras, comprendidas entre las etiquetas <h1> y </h1>, <h2> y </h2>, etc. (hasta el número 6). El tamaño mayor es el correspondiente al número 1.
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 (líneas horizontales), 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.
Ejemplo practico
En el editor de textos copie lo siguiente:
| <html> <head> <title>Mi primer ejercicio</title> </head> <body> <h1><center>Primera página</center></h1> <hr> <p>Esta es mi primera página, aunque todavia es muy sencilla. Como el editor de lenguaje HTML no es dificil, pronto estaré en condiciones de hacer cosas mas interesantes.</p> <p>Aquí va un segundo párrafo. Bla, bla, bla...</p> </body> </html> |
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. Vea en la practica desarrollada cómo está la etiqueta <center> dentro de la etiqueta <h1>. Es muy importante, en todos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirian errores.
Guardamos el archivo en el procesador de textos con el nombre de practica01.html y lo cargamos en el navegador. Este será el resultado.
No hay comentarios:
Publicar un comentario