Estructura básica de una pagina web en HTML

1. Introducción a HTML
HTML es el lenguaje que se emplea para crear páginas web.
Un código escrito en este lenguaje es, básicamente, un texto que el
navegador (Internet Explorer, Firefox, Google Chrome, Opera o cualquier
otro) mostrará en formato página web.
Este texto puede generar color, tamaño y fuente de letra, fondos
imágenes, hiperenlaces y entradas de dato, así como listas de selección,
botones, etc., determinados y configurados mediante los identificadores, también
llamados tags(HTML es un lenguaje para escribir páginas de hipertexto definido
por tags. Los tags, a veces llamados "etiquetas" en español, son los "comandos"
que los programas navegadores leen e interpretan para armar y dar forma a las
páginas de Internet).
Un identificador o un tag es una marca que permite fijar los atributos del tamaño,
posición y comportamiento del texto y/o las imágenes de la página web.
Por regla general, los identificadores constan de una apertura (cuando se
establecen sus características) y un cierre (cuando deben dejar de hacer efecto) y
restablecer las características originales); sin embargo, por su propia naturaleza
algunos identificadores no tienen cierre.
El formato base de un identificador es <identificador [atributo]>.
Esto significa que para incluir un identificador en un código fuente HTML se teclea
el paréntesis angular apuntando a la izquierda <, el nombre del identificador, los
atributos si proceden (sin corchetes) y el paréntesis angular apuntando a la
derecha >.
Para cerrar el identificador, se usa el formato </identificador> sin atributos, pero
incluyendo la barra / entre el primer paréntesis angular y el nombre del
identificador.
El texto comprendido entre ambos identificadores (el de apertura y el de cierre es
el que se verá afectado por dichos identificadores.
Los identificadores de texto, de imágenes e hiperenlaces se pueden combinar
para mejorar el resultado final.

2. A su vez, en un identificador, los distintos atributos tanto opcionales como
obligatorios (algunos lo son) pueden combinarse en la misma línea o en otras
líneas, a fin de obtener el efecto deseado en cada momento.
Existen muchos atributos y algunos tags que tienen un efecto redundante y que
no todo el mundo conoce.
Existe una serie de tags que han sido desaprobados por el consorcio W3C.
Simplemente es una mera referencia. Aunque si es importante que conozca a
fondo, y emplee adecuadamente, las hojas de estilo en cascada.
Para escribir un código en HTML, necesitaremos un editor de texto plano, es
decir, que no introduzca caracteres no deseados en el código. Por ejemplo, el bloc
de notas de Windows (salvo, claro está, que usted use otro sistema operativo).
Sublime Text-
Más adelante cuando se encuentre más familiarizado con la edición de texto
plano, podrá optar por otros editores más potentes y flexibles, pero, al principio, el
bloc de notas resulta muy cómodo y el Sublimetext para linux.
HTML realmente no es un lenguaje de programación, en el estricto sentido de la
palabra, ya que por su propia naturaleza, no implementa algunas funciones
básicas de cualquier lenguaje de programación, como, por ejemplo, acceso a base
de datos, funciones de edición gráfica, etc.
Sin embargo, resulta imprescindible para introducirse en el diseño de
páginas web.
HTML no es sensible al uso de mayúsculas y minúsculas. Funcionará igual si
tecleamos los tags y sus parámetros (también llamados atributos) en mayúsculas,
minúsculas o combinación de ambas. Por supuesto, esta norma (como todas en la
vida) tiene una excepción.
Como regla general, nos acostumbraremos a escribir los tags y sus atributos (así
como los valores de estos) en minúsculas. La razón de esto es que, después de
estudiar HTML y DHTML, podremos estudiar PHP y éste Sí obliga al uso de
minúsculas así que mejor nos vayamos acostumbrando.

3. En cualquier caso hablaremos de HTML como lenguaje por excelencia para la
creación de páginas web. Hoy en día, todas las páginas que encontramos en la
red implementan además, otras tecnologías, como son CSS, JavaScript, Jquery,
AJAX, JSON, PHP, ASP, etc.
Sin embargo, absolutamente todas tienen una base de HTML sobre la cual, a su
vez, se implementan esas otras tecnologías.
Por lo tanto, si queremos dedicarnos al diseño y creación de páginas web ya sea
para crear nuestra propia página o para trabajar en el sector es imprescindible un
profundo conocimiento de HTML.
Este documento está diseñado para enseñarle a crear sus propias páginas web y
a publicarlas. En este terreno empezamos desde el principio y luego vamos
incrementando progresivamente la dificultad de los temas tratados.
EL ESQUELETO BÁSICO DE HTML
C ó m o c r e a r u n a p á g i n a W e b
Para crear un verdadero documento HTML comenzará con tres elementos
contenedores:
 <html>
 <head>
 <body>
Estos tres se combinan para describir la estructura básica de la página:

4.  <html>: Este elemento envuelve todo el contenido de la página (excepto
la DTD definición de tipo de documento (Document Type Definition DTD), que se
sitúa al inicio del documento HTML)
 <head>: Este elemento designa la parte de encabezado del documento.
Puede incluir información opcional sobre la página Web, como puede ser el título
(el navegador lo muestra en la barra de título), palabras clave de búsqueda
opcionales y una hoja de estilo opcional.
 <body>: Este elemento alberga el contenido de su página Web, es decir,
aquello que queremos que aparezca en el área de navegación del navegador..
Sólo hay una manera correcta de combinar estos tres elementos. He aquí su
colocación exacta, con el doctype al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...)
muestran dónde insertaría la información adicional.
Una vez colocado el esqueleto HTML, debe añadir dos conectores más a la
mezcla.
Toda página Web requiere un elemento <title> en la sección del encabezado. A
continuación, deberá crear un contenedor para el texto en la sección del cuerpo de
texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un párrafo.
Veamos con más detalle los elementos que hay que agregar:
 <title>: Establece el título de la página Web, el cual tiene varias funciones. Primero,
los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante
crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú
Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor
de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un
fragmento del contenido de la página.

5.  <p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño
espacio entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido a mi sitio Web</title>
</head>
<body>
<p></p>
</body>
</html>
Si abre este documento en un navegador Web, verá que la página está vacía,
pero ahora aparece el título.
Cuando un navegador muestra una página Web, el título se presenta en la parte
superior de la ventana, con el texto al final. Si el suyo utiliza la navegación por
pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla para futuras
páginas. La estructura básica está en su lugar; simplemente necesita cambiar el
título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen dos partes
claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.
Vamos hacer es crear una carpeta, dentro de "documentos", para almacenar los
ficheros de prueba que vayamos a usar.
A esta carpeta la llamaremos practica1.html en el resto de los ejercicios. Con la
carpeta abierta, haga doble clic sobre el ícono que representa al bloc de notas o
sublimetext. Se le abrirá un documento en blanco.

6. ESCRIBA EL SIGUIENTE TEXTO:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>
Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.
Es vital que la extensión sea .html, ya que sólo por la extensión el sistema
operativo reconoce este archivo como un documento web, y no como un simple y
archivo de texto.
El nombre del archivo deberá escribirse como está, en minúsculas y sin espacios
ni caracteres especiales.
Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo
usaremos para separar el nombre de la extensión y el guion bajo.
El nombre podrá contener letras y números, pero deberá empezar por una letra.
Así mismo, nos abstendremos de meter en el nombre de un archivo letras
acentuadas, eñes, cedillas, o cualquier otro carácter de algún alfabeto local.
Únicamente se admiten los caracteres del alfabeto internacional (ingles).
Elementos HTML y DOCTYPES válidos
Definición y uso
La etiqueta <html> le dice al navegador que este es un documento HTML.
La etiqueta <html> representa la raíz de un documento HTML.

7. La etiqueta <html> es el contenedor para todos los demás elementos HTML (a
excepción de la etiqueta <! DOCTYPE>).
HTML <!DOCTYPE> Declaración
La declaración <! DOCTYPE> debe ser lo primero en su documento HTML, antes
de la etiqueta <html>. La declaración <! DOCTYPE> no es una etiqueta HTML; es
una instrucción para el navegador web sobre en qué versión de HTML está escrita
la página.
Consejo: Siempre agregue la declaración <! DOCTYPE> a sus documentos
HTML, para que el navegador sepa qué tipo de documento esperar.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
CÓDIGO DE LA CABECERA:
<head>
<title>
Título de la página
</title>
</head>
Al igual que el código general, la cabecera tiene un principio indicado
por <head> y un final indicado por </head>.
Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas.
Como decíamos antes, en la cabecera incluiremos algunos datos generales de
configuración de la página. En esta plantilla sólo hemos incluido el título de la
página.

8. El título de la página se incluye entre los tags <title> y </title>, que indican,
respectivamente, el comienzo y final de dicho título.
El título es un literal (una cadena de texto) que aparecerá en la barra de título del
navegador en tiempo de ejecución (cuando se ejecute la página), tal como
muestra el detalle de la figura siguiente:
Quiero recalcar que este título es solamente eso: un texto libre para que aparezca
en la página y no tiene nada que ver con el nombre que le dimos al fichero.
Una vez completado el head, pasamos a la segunda sección de toda la página
web: el body o cuerpo.
El body incluye, tal como lo mencionaba anteriormente, todo lo que queramos
visualizar en el área de navegación.
Se inicia con el tag <body> y se finaliza con el tag </body>. Como vemos en el
archivo que hemos creado, de momento no hemos incluido nada.
Por esta razón, al ejecutar la página, se ve el área de navegación vacía. Dentro
del body iremos metiendo código e iremos visualizando los resultados.
Lo primero que vamos hacer es incluir texto en la página para que se muestre en
el área de navegación.
Para ello, cierre el navegador y, dentro de la carpeta en la que está trabajando,
arrastre el ícono de plantilla.html sobre el bloc de notas. De esta forma, se abrirá
el bloc de notas y cargará el código fuente que había tecleado anteriormente.
En la zona del código reservada para body de la página entre las
líneas <body> y </body> teclee lo siguiente:
Esto es una línea de texto.
Por lo tanto, su código quedará como sigue:

9. <!DOCTYPE html>
<html>
<head>
<title>
Título de la página
</title>
</head>
<body>
Esto es una línea de texto
</body>
</html>
A continuación haga clic en el menú ARCHIVO y, dentro de éste, elija la opción
GUARDAR COMO … asegúrese de guardarlo en su carpeta.
Como nombre de fichero ponga texto-simple.html. Una vez guardado, cierre el
bloc de notas o sublimetext y ejecute el fichero haciendo doble clic sobre su ícono.
El resultado en la pantalla será como el que se muestra:
en Window.
Historia de HTML
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee,
trabajador del CERN(Organización Europea para la Investigación Nuclear)
propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito
de la informática, el "hipertexto" permitía que los usuarios accedieran a la
información relacionada con los documentos electrónicos que estaban
visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían
asimilarse a los enlaces de las páginas web actuales.

10. Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo
presentó a una convocatoria organizada para desarrollar un sistema
de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de
sistemas Robert Cailliau, presentaron la propuesta ganadora
llamada WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el
nombre HTML Tags(Etiquetas HTML) y todavía hoy puede ser consultado online a
modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en
1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se
consiguieron avances significativos (en esta época se definieron las etiquetas para
imágenes, tablas y formularios) ninguna de las dos propuestas de estándar,
llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue
publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de
su nombre, HTML 2.0 es el primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de
estandarización llamado W3C(World Wide Web Consortium). La versión HTML 3.2
se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML
publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas
web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor
de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la
publicación original del 18 de Diciembre de 1997) y supone un gran salto desde
las versiones anteriores. Entre sus novedades más destacadas se encuentran las
hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las
páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas
complejas y mejoras en los formularios.
La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y
se denomina HTML 4.01. Se trata de una revisión y actualización de la versión
HTML 4.0, por lo que no incluye novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se
detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo,
en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación
por la falta de interés del W3C en HTML y decidieron organizarse en una nueva
asociación llamada WHATWG (Web Hypertext Application Technology Working
Group).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5,
cuyo primer borrador oficialse publicó el 22 de enero de 2008. Debido a la fuerza

11. de las empresas que forman el grupo WHATWG y a la publicación de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad
estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la
estandarización de XHTML, una versión avanzada de HTML y basada en XML. La
primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero
de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que
mantiene casi todas sus etiquetas y características, pero añade algunas
restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido
publicada en forma de borrador y pretende modularizar XHTML. También ha sido
publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante
respecto de las anteriores versiones de XHTML.
HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es
más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es
descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que
a su vez, también es descendiente de SGML).
Figura 1.1 Esquema de la evolución de HTML y XHTML
Las páginas y documentos creados con XHTML son muy similares a las páginas y
documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o
viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque
no existe una conclusión ampliamente aceptada.
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen
XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y
XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.

12. HTML y CSS
Originalmente, las páginas HTML sólo incluían información sobre sus contenidos
de texto e imágenes. Con el desarrollo del estándar HTML, las páginas empezaron
a incluir también información sobre el aspecto de sus contenidos: tipos de letra,
colores y márgenes.
La posterior aparición de tecnologías como JavaScript, provocaron que las
páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts)
que se utilizan para crear páginas web dinámicas.
Incluir en una misma página HTML los contenidos, el diseño y la programación
complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño
de la página web son responsabilidad de diferentes personas, por lo que es
conveniente separarlos.
CSS es el mecanismo que permite separar los contenidos definidos mediante
XHTML y el aspecto que deben presentar esos contenidos:
Figura 1.2 Esquema de la separación de los contenidos y su presentación
Una ventaja añadida de la separación de los contenidos y su presentación es que
los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las
diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles,
impresoras y dispositivos utilizados por personas discapacitadas.
De esta forma, utilizando exclusivamente XHTML se crean páginas
web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a
partir de las páginas XHTML correctas.