La Estructura de un apágina Web en HTML.
Más de una vez os habréis tropezado, bien por curiosidad o bien por error al pulsar el boton equivocado, con una pantalla lleeeena de numerajos y letruchas que ni por asomo parecen las tripas de una web. Los mas aventureros habréis entrado en esa sala prohibida para insertar algunos fragmentos de código para vuestro contador, estadísticas, etc, pensando "como esto no chute....como me cargue mi querida pagina...va a ver ese Jorgens lo que es bueno" je je je. Pues bien, vamos a desmenuzar la estructura de una pagina web para ir perdiendole el miedo.
Toda página web, (en lo sucesivo, al mencionar página web, me referiré a las basadas en el HTML), por complicada que parezca, se divide en dos partes bien diferentes a las que llamaremos Cabecera (HEAD) y Cuerpo (BODY). Además, todas empiezan y acaban con la palabra mágica HTML. Para que os hagáis una idea, esto sería una página web con todas las de la Ley, eso si, vacia.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Buscando un simil, podríamos decir que todo el código va metido en un armario llamado HTML que tiene dos compartimentos separados, uno llamado HEAD y otro llamado BODY.
El código correspondiente a la cabecera (HEAD) tendrá que ir siempre entre <HEAD> que indica inicio de la cabecera, y </HEAD> que indica el fin de la cabecera (se diferencian por la barra que tiene delante el que indica fin: / ).
Lo mismo ocurre con el Cuerpo (BODY), cuyo código ha de estar siempre entre las líneas <BODY> que indica comienzo del Cuerpo, y la línea </BODY> que indica su final. Con esto ya os habréis dado cuenta de que la barra "/" indica final de una parte, no?
Existen cosillas que SOLO podremos meter en el encabezado y otras cosas que solo funcionarán en el cuerpo, pero eso lo iremos viendo conforme avancemos.
Os muestro abajo el código de una página web vacia, pero con algunas cosillas más. Este código es el que tiene una página de esas que creais con FrontPage, Dreamweaver o programas por el estilo, nada más empezar, es decir, cuando aún no habéis metido nada en ella.
Vemos en este código las palabras mágicas comentadas antes, HTML, HEAD, BODY y sus correspondientes cierres con la barra "/". A estas palabras y a algunas otras las llamaremos comandos, y a lo que vaya encerrado con los simbolos < y > etiquetas.
Aparecen algunas cosillas nuevas. Podemos ver algunas líneas dentro de la cabecera, como son:
<title>Untitled Document</title> y
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
La primera es la línea que indica el título de esa página y la segunda es una de las famosas Metatags, que se utilizan para ser encontrado en los buscadores y que ya hemos visto en la sección "Las Metatags".
Con lo que ya hemos visto, sabríamos facilmente ponerle un título a cada una de nuestras páginas, no? Solo habría que entrar a ver el código de nuestra página y escribirlo entre los comandos <title> y </title>. Este título es distinto para cada una de las páginas que forman nuestra web y es lo que aparece escrito en la barra superior del navegador (en la franja azul). Eso si, si usais páginas con marcos o frames, solo se verá en esa barra el título de la página principal, pero a pesar de eso, conviene ponerselo a todas.
Otra cosa que nos puede llamar la atención es lo que aparece justo al lado de la etiqueta <body>. En el ejemplo que os he puesto aparece:
<body bgcolor="#FFFFFF">
bgcolor indica el color de fondo y #FFFFF es el código de un color en concreto. Vemos que se pueden escribir algunas cosillas antes de cerrar la etiqueta del body con la flechita >.
El resultado de ese código, como antes comenté, es NADA, pues aún no tiene nada visible, a parte de un título en la parte superior del navegador y un color de fondo (en este caso #FFFFFF, blanco), pero como ireis adivinando, ya sabemos que el título y los metatags van en el encabezado de las páginas, es decir, entre <HEAD> y </HEAD>.
No estaría mal que os asomárais a ver el código de alguna de vuestras páginas y reconocierais los comandos vistos, distinguiendo el encabezado y el cuerpo, observando como empieza y acaba con <HTML> y </HTML> respectivamente, verificando que el título es el que queréis para esa página y finalmente, que todos los Metatags están dentro del encabezado, es decir, entre <HEAD> y </HEAD> y no fuera de este, donde carecen de sentido.
Por supuesto, además del título y las Metatags, pueden haber más cosas en vuestra página, pero las veremos más adelante. Recordar que, ahora que sabéis donde introducir estos Metatags, quizás sería un buen momento para leeros la sección "Las Metatags" en la sección "Promoción" y poner la página en condiciones aprovechando de paso para familiarizaros con lo explicado.
|
Importancia de..