HTML: Estructura básica de una página web

Objetivo: presentar la estructura de una página web.

Revisemos el código del artículo anterior:

<!DOCTYPE html>
<html>
<head>
<title>Mi primerísima página web</title>
</head>
<body>
Entre esto y un sitio web completo, no media más que trabajo...
</body>
</html>

En la primera línea nos encontramos la definición de tipo de documento (DTD).

<!DOCTYPE html>

Quédate con la idea de que sirve para informar al navegador de que el código contenido en la página se rige bajo los estándares del recientemente aparecido HTML5. Muy simple y fácil de recordar, pero hasta hace nada era compleja, larga e imposible de retener en la cabeza. Cuando hablemos de la evolución de la web lo entenderás mejor.

A continuación podemos localizar un bloque delimitado por etiquetas.

<html>
...
...
</html>

El alma del lenguaje HTML son las etiquetas.

Las etiquetas, rodeadas entre los símbolos < y > poseen cada una una significación particular que iremos mostrando en las sucesivas entregas. Arriba vemos, destacada, la etiqueta <html>.

Por lo general, siempre que aparece una etiqueta tiene que existir otra igual más adelante, de modo que entre las dos determinan el bloque sobre el que ejercen su función. Por ejemplo, existe una etiqueta que provoca que el texto se escriba en negrita. Todo el texto que esté comprendido entre la etiqueta de apertura y la de cierre se verá afectado por la etiqueta y, en consecuencia, se mostrará en negrita.

Una etiqueta de cierre presenta una diferencia respecto a la de apertura, y es que después del símbolo < inicial figura una barra inclinada / (la que está sobre el número 7, el slash). Fíjate, en el código de arriba, que la etiqueta <html> se cierra, abajo del todo, con </html>.

Las etiquetas pueden escribirse indistintamente en mayúsculas o minúsculas. No obstante, te recomiendo que lo hagas siempre del segundo modo, como en el ejemplo. Aunque la última especificación de HTML permite el uso de ambas, indistintamente, deberás ser riguroso en el uso de minúsculas si optas por versiones basadas en XML.

La función de la etiqueta <html> es delimitar el principio y el final de todo el código HTML. La abrimos justo al comienzo (después del DTD) y la cerramos al final.

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Dentro del bloque formado por una etiqueta de apertura y otra de cierre pueden existir otros bloques de etiquetas. Observa cómo, dentro de <html></html>, figuran dos bloques independientes, uno determinado por el par de etiquetas <head></head> y otro por el par <body></body>: la cabeza y el cuerpo, respectivamente, de nuestra página HTML.

<head>
<title>Mi primerísima página web</title>
</head>

Una de las funciones de la cabeza es indicar el título de la página. Para hacerlo, insertamos dentro de <head> </head> el par de etiquetas <title></title>. El texto que escribamos entre estas será el título de la página.

<body>
Entre esto y un sitio web completo, no media más que trabajo...
</body>

Dentro del cuerpo de la página aparece el contenido en sí de la misma, como puedes observar.

Hemos presentado la estructura básica de una página web. Fíjate que han sido relativamente muchas líneas para una única que devolverá el navegador. Por eso te dije, en la entrega anterior, que guardases una copia como plantilla. Las páginas que creemos tendrán esa misma estructura básica, y así nos ahorraremos tener que repetir todo el código común.

Javier Montero Gabarró


Fecha de la última revisión: 19 de octubre de 2012


http://elclubdelautodidacta.es/wp/2011/08/html-estructura-basica-de-una-pagina-web/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML #1: Nuestra primera página web

Objetivo: escribir una primera página web.

Comenzamos la nueva serie HTML, englobada dentro de la categoría general Tecnologías Web, en la que mostraremos los rudimentos de la programación web en su forma más primordial e inmediata: el lenguaje de marcado de hipertexto, HTML (HyperText Markup Language).

Al igual que el resto de las series de ECDA, su contenido será fundamentalmente práctico y centrado en un conjunto reducido de conceptos, facilitando así su asimilación y estimulando el apetito por otros conocimientos. La teoría será el cemento que enlace cada pieza del puzzle, pero siempre aparecerá supeditada a los contenidos prácticos, y no a la inversa. No hay otra manera de aprender.

Todo lo que necesitarás, de momento, será un simple editor de textos. Elige el que prefieras.

Crea un nuevo fichero y vuelca en él el siguiente contenido como texto plano:

<!DOCTYPE html>
<html>
<head>
<title>Mi primerísima página web</title>
</head>
<body>
Entre esto y un sitio web completo, no media más que trabajo...
</body>
</html>

Guarda el archivo en una carpeta para tus prácticas y ponle un nombre, como html-1.html, por ejemplo.

Los ficheros HTML tienen por extensión .html o .htm. Elegir una u otra es opcional, aunque no está mal tratar de ser consistente y emplear siempre la misma.

Realiza ahora una segunda copia del fichero y denomínala plantilla.html. Te servirá como modelo y evitará que tengas que escribir siempre la parte común de todo fichero HTML.

Para visualizar en el navegador los ficheros HTML que creemos no será necesario subir las páginas a un servidor. Bastará con acceder a la carpeta que las contiene y hacer doble clic sobre ellas, lo que provocará que se arranque el navegador y muestre el efecto del código contenido en el archivo.

Pruébalo. Si nunca has generado una página web antes, permítete disfrutar de la emoción de la primera vez.

Has dado un gran paso. En la siguiente entrega explicaremos qué significa la simbología que ha hecho posible esta primera página.

Javier Montero Gabarró


Fecha de la última revisión: 5 de octubre de 2012


http://elclubdelautodidacta.es/wp/2011/08/html-1-nuestra-primera-pagina-web/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

Tecnologías Web – El primer paso

Tanto si queremos aprender a programar en HTML, enredar en las entrañas de un CMS como WordPress, o experimentar la programación de scripts PHP, lo primero que debemos hacer es prepararnos un entorno de pruebas en condiciones.

Estamos hablando de tecnologías web y esta palabra es la clave de todo. Todo esto cobra sentido únicamente dentro de un servidor web; sin él hay poco que hacer.

Quizás ya dispongamos de un dominio propio en algun hosting. En ese caso ya tendríamos un espacio en el que experimentar con estas tecnologías. Desde luego, con las limitaciones que nos imponga nuestro proveedor, algo siempre a tener en cuenta a la hora de decidirse por uno o por otro.

Pero lo más recomendable es, sin lugar a dudas, que nos instalemos nuestro propio servidor web y configuremos un entorno ágil en el que podamos enredar sin miedo. Si, además, tenemos un hosting, dispondremos de la plataforma experimental perfecta antes de subir los archivos definitivos a la web.

Preparar un servidor web puede ser algo laborioso y no al alcance de cualquiera: hay que instalar, como poco, Apache, la base de datos MySQL y el soporte para el lenguaje PHP (trío conocido como AMP: Apache, MySQL, PHP).

Pero el primer paso no es siempre el más duro, tranquilos… Afortunadamente, existen productos que se ocupan de realizar todas estas tareas por nosotros, de modo que no tengamos que preocuparnos lo más mínimo por esos detalles.

Voy a recomendar dos de ellos y dejo a cada uno la libre elección:

WampServer (Windows)
XAMPP (Multiplataforma, opción recomendada si vais a seguir los cursos desde Linux).

La instalación es sencilla y podéis atreveros con ella sin mucha historia. No obstante, mañana publicaré un artículo indicando el proceso de instalación de WampServer 2.1 para la plataforma Windows.

Javier Montero

Tecnologías Web

Comenzamos en El Club del Autodidacta una nueva serie de artículos orientada al estudio de las tecnologías relacionadas con la web. Tocaremos temas que van desde la instalación de servidores web en diversas plataformas hasta la administración de sistemas de gestión de contenidos como WordPress o Joomla, pasando por la programación en PHP o la creación de hojas de estilo CSS.

La metodología será la misma que en el resto del blog: se tratarán pequeñas dosis conceptuales en cada artículo, facilitando así la asimilación con el mínimo esfuerzo y máxima motivación. Gradualmente, y con constancia, iremos logrando un cuerpo de conocimiento sólido y conectado.

Algunas series estarán organizadas en capítulos (HTML, PHP,…), empezando prácticamente desde cero, y otras mostrarán temáticas de contenido y dificultad aleatorios. Aún así, intentaremos que cada artículo quede perfectamente situado en el mapa global, de modo que incluso el principiante pueda saber ubicarlo para recurrir a él tan pronto sus conocimientos avancen y se lo permitan.

Espero que sea de vuestro interés y que esta información pueda ayudaros a construir sitios web interesantes e imaginativos.

Javier Montero Gabarró


Fecha de la última revisión: 6 de septiembre de 2012


http://elclubdelautodidacta.es/wp/2011/08/tecnologias-web/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies