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.

Instalando nuestro propio servidor web con WampServer

En Tecnologías Web – El primer paso, hablamos de la conveniencia de instalar nuestro propio servidor web local, de modo que dispusiéramos de un entorno cómodo en el que poder practicar los conceptos que fuéramos adquiriendo.

Sugerimos un par de paquetes que incluían, en una única instalación, el lote completo AMP (Apache – MySQL – PHP), necesario para mantener una web conforme a los estándares actuales basados en software de código abierto.

Hoy mostraremos los pasos necesarios para poner en servicio uno de esos paquetes: WampServer para la plataforma Microsoft Windows.

Podemos descargar el software en la página web del desarrollador. En el momento de escribir este artículo, la última versión disponible es la 2.1 Elegiremos la opción de 32 bits o 64 bits dependiendo de la arquitectura de nuestro sistema operativo.

Hacemos doble clic sobre el fichero descargado para iniciar la instalación del programa.

Esta pantalla nos muestra las distintas versiones de los componentes software que se instalarán. Proseguimos pulsando “Next”.

Aceptamos las condiciones de la licencia y proseguimos.

Por defecto la aplicación se instalará en c:\wamp. A no ser que tengamos un motivo particular por el que cambiarlo, dejamos esta opción tal cual está.

A mí me gusta que quede un icono en el escritorio, y así se lo indico al programa de instalación. Si queréis que esté en la barra de acceso rápido, marcad la otra casilla.

Revisamos las opciones que hemos elegido y, si estamos de acuerdo con ellas, pulsamos sobre el botón “Install”.

El programa de instalación ha detectado la presencia de Firefox y nos pregunta si queremos que sea nuestro navegador por defecto cuando utilicemos WampServer. Si es nuestro deseo, aceptamos.

Aquí nos pide que introduzcamos la dirección de nuestro servidor de correo para que PHP la utilice cuando lo requiera. Obviamos, por el momento, estos datos pulsando sobre “Next”.

Concluye la instalación del software. Si estamos ansiosos por empezar a utilizarlo inmediatamente, dejamos la marca en “Launch WampServer 2 now”.

Una vez arranquemos el programa, nos aparecerá un nuevo icono en el área de notificación de Windows, abajo a la derecha, simbolizando una W. Llegados a este punto debemos saber que, aunque el programa esté arrancado, el servidor web no estará activo aún.

Tenemos dos formas de interactuar con el icono de WampServer: con los botones izquierdo o derecho del ratón.

Comenzamos pulsando con el botón derecho sobre el icono, apareciéndonos el siguiente menú:

Hacemos clic sobre “Language” y elegimos el idioma español.

Pulsamos ahora con el botón izquierdo sobre el icono para mostrar el menú principal de WampServer 2.1.

Activamos el servidor web pulsando sobre la última opción, “Encender”. Si, una vez hecho esto, pasamos el ratón sobre el icono veremos que aparece el texto “WAMPSERVER – Servidor activo”.

Ha llegado el momento de la prueba de fuego. Para referenciar al servidor instalado en nuestro equipo utilizamos la palabra localhost. Escribamos, pues, en el navegador de internet, la siguiente dirección:

http://localhost

Si todo ha ido bien, nos aparecerá la página por defecto que tiene el servidor web, algo así como esto:

¡Enhorabuena, el servidor web está funcionando!

Javier Montero

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.