ELECTIVA DE FORMACION INTEGRAL 3

JAIME ANDRES PEA TOVAR

CORPORACION UNIFICADA NACIONAL DE EDUCACION SUPERIOR

IBAGUE
2015

1 Qu es HTML?
Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las
pginas web de Internet". Ms concretamente, HTML es el lenguaje con el que se
"escriben" la mayora de pginas web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los
programas que utilizan los diseadores generan pginas escritas en HTML y los
navegadores que utilizamos los usuarios muestran las pginas web despus de leer
su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de
diseo, es muy fcil de aprender y escribir por parte de las personas. En realidad,
HTML son las siglas de HyperText Markup Language y ms adelante se ver el
significado de cada una de estas palabras.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas
define un organismo sin nimo de lucro llamado World Wide Web Consortium, ms
conocido como W3C. Como se trata de un estndar reconocido por todas las
empresas relacionadas con el mundo de Internet, una misma pgina HTML se
visualiza de forma muy similar en cualquier navegador de cualquier sistema
operativo.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido
universalmente y que permite publicar informacin de forma global". Desde su
creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente
para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas
aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.

2 Aspectos del HTML

Aplicaciones Web
Una aplicacin Web es un sitio Web que contiene pginas con contenido sin
determinar, parcialmente o en su totalidad. El contenido final de una pgina se
determina slo cuando el usuario solicita una pgina del servidor Web. Dado que el
contenido final de la pgina vara de una peticin a otra en funcin de las acciones
del visitante, este tipo de pgina se denomina pgina dinmica.
Las aplicaciones Web se crean en respuesta a diversas necesidades o problemas.
En esta seccin se describen los usos ms habituales de las aplicaciones Web y se
proporciona un ejemplo sencillo.

Usos comunes de las aplicaciones Web

Las aplicaciones Web pueden tener numerosos usos tanto para los visitantes como
para los ingenieros de desarrollo, entre otros:

Permitir a los usuarios localizar informacin de forma rpida y sencilla en un

sitio Web en el que se almacena gran cantidad de contenido.

Este tipo de aplicacin Web ofrece a los visitantes la posibilidad de buscar

contenido, organizarlo y navegar por l de la manera que estimen oportuna. Algunos
ejemplos son: las intranets de las empresas, Microsoft MSDN
(www.msdn.microsoft.com) y Amazon.com (www.amazon.com).

Recoger, guardar y analizar datos suministrados por los visitantes de los

sitios.

En el pasado, los datos introducidos en los formularios HTML se enviaban como

mensajes de correo electrnico a los empleados o a aplicaciones CGI para su
procesamiento. Una aplicacin Web permite guardar datos de formularios
directamente en una base de datos, adems de extraer datos y crear informes
basados en la Web para su anlisis. Ejemplos de ello son las pginas de los bancos
en lnea, las pginas de tiendas en lnea, las encuestas y los formularios con datos
suministrados por el usuario.

Actualizar sitios Web cuyo contenido cambia constantemente.

Una aplicacin Web evita al diseador Web tener que actualizar continuamente el
cdigo HTML del sitio. Los proveedores de contenido, como los editores de noticias,
proporcionan el contenido a la aplicacin Web y sta actualiza el sitio
automticamente. Entre los ejemplos figuran Economist (www.economist.com) y
CNN (www.cnn.com).
Funcionamiento de una aplicacin Web
Una aplicacin Web es un conjunto de pginas Web estticas y dinmicas. Una
pgina Web esttica es aqulla que no cambia cuando un usuario la solicita: el
servidor Web enva la pgina al navegador Web solicitante sin modificarla. Por el
contrario, el servidor modifica las pginas Web dinmicas antes de enviarlas al
navegador solicitante. La naturaleza cambiante de este tipo de pgina es la que le
da el nombre de dinmica.
Por ejemplo, podra disear una pgina para que mostrara los resultados del
programa de salud y dejara cierta informacin fuera (como el nombre del empleado
y sus resultados) para calcularla cuando la pgina la solicite un empleado en
particular.
En las siguientes secciones se describe con mayor detalle el funcionamiento de las
aplicaciones Web.

Procesamiento de pginas Web estticas

Un sitio Web esttico consta de un conjunto de pginas y de archivos HTML
relacionados alojados en un equipo que ejecuta un servidor Web.
Un servidor Web es un software que suministra pginas Web en respuesta a las
peticiones de los navegadores Web. La peticin de una pgina se genera cuando el
usuario hace clic en un vnculo de una pgina Web, elige un marcador en un
navegador o introduce una URL en el cuadro de texto Direccin del navegador.
El contenido final de una pgina Web esttica lo determina el diseador de la pgina
y no cambia cuando se solicita la pgina. A continuacin se incluye un ejemplo:
1<html>
2
3

<head>
<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

</body>

9</html>
El diseador escribe todas y cada una de las lneas de cdigo HTML de la pgina
antes de colocarla en el servidor. El cdigo HTML no cambia una vez colocado en
el servidor y por ello, este tipo de pginas se denomina pgina esttica.
Nota: En sentido estricto, una pgina esttica puede no ser esttica en absoluto.
Por ejemplo, una imagen de sustitucin o contenido de Flash (un archivo SWF)
puede hacer que una pgina esttica tome vida. No obstante, en esta gua se habla
de pgina esttica cuando sta se enva al navegador sin modificaciones.
Cuando el servidor Web recibe una peticin de una pgina esttica, el servidor lee
la solicitud, localiza la pgina y la enva al navegador solicitante, como se muestra
en el siguiente ejemplo:

1. El navegador Web solicita la pgina esttica.

2. El servidor localiza la pgina.
3. El servidor Web enva la pgina al navegador solicitante.
En el caso de las aplicaciones Web, algunas lneas de cdigo no estn
determinadas cuando el usuario solicita la pgina. Estas lneas deben determinarse
mediante algn mecanismo antes de enviar la pgina al navegador. En la siguiente
seccin se describe dicho mecanismo.
Procesamiento de pginas dinmicas
Cuando un servidor Web recibe una peticin para mostrar una pgina Web esttica,
el servidor la enva directamente al navegador que la solicita. Cuando el servidor
Web recibe una peticin para mostrar una pgina dinmica, sin embargo, reacciona
de distinta forma: transfiere la pgina a un software especial encargado de finalizar
la pgina. Este software especial se denomina servidor de aplicaciones.
El servidor de aplicaciones lee el cdigo de la pgina, finaliza la pgina en funcin
de las instrucciones del cdigo y elimina el cdigo de la pgina. El resultado es una
pgina esttica que el servidor de aplicaciones devuelve al servidor Web, que a su
vez la enva al navegador solicitante. Lo nico que el navegador recibe cuando llega
la pgina es cdigo HTML puro. A continuacin se incluye una vista de este proceso:

1. El navegador Web solicita la pgina dinmica.

2. El servidor Web localiza la pgina y la enva al servidor de aplicaciones.
3. El servidor de aplicaciones busca instrucciones en la pgina y la termina.
4. El servidor de aplicaciones pasa la pgina terminada al servidor Web.
5. El servidor Web enva la pgina finalizada al navegador solicitante.
Acceso a una base de datos
Un servidor de aplicaciones le permite trabajar con recursos del lado del servidor,
como las bases de datos. Por ejemplo, una pgina dinmica puede indicar al
servidor de aplicaciones que extraiga datos de una base de datos y los inserte en el
cdigo HTML de la pgina.
El uso de una base de datos para almacenar contenido permite separar el diseo
del sitio Web del contenido que se desea mostrar a los usuarios del sitio. En lugar
de escribir archivos HTML individuales para cada pgina, slo se necesita escribir
una pgina o plantilla para los distintos tipos de informacin que se desea
presentar. Posteriormente, podr cargar contenido en una base de datos y,
seguidamente, hacer que el sitio Web recupere el contenido en respuesta a una
solicitud del usuario. Tambin puede actualizar la informacin en un nico origen y,

posteriormente, implantar ese cambio en todo el sitio Web sin necesidad de editar
manualmente cada pgina. Puede utilizar Adobe Dreamweaver para disear
formularios Web que inserten, actualicen o eliminen datos de la base de datos.
La instruccin para extraer datos de una base de datos recibe el nombre de consulta
de base de datos. Una consulta consta de criterios de bsqueda expresados en un
lenguaje de base de datos denominado SQL (Structured Query Language, lenguaje
de consulta estructurado). La consulta SQL se escribe en los scripts o etiquetas del
lado del servidor de la pgina.
Un servidor de aplicaciones no se puede comunicar directamente con una base de
datos porque el formato de esta ltima impide que se descifren los datos, de una
forma bastante similar a cuando un documento de Microsoft Word no puede
descifrarse al abrirlo con el Bloc de Notas o BBEdit. El servidor de aplicaciones slo
se puede comunicar con la base de datos a travs de un controlador que acte de
intermediario con la base de datos: el software acta entonces como un intrprete
entre el servidor de aplicaciones y la base de datos.
Una vez que el controlador establece la comunicacin, la consulta se ejecuta en la
base de datos y se crea un juego de registros. Un juego de registros es un conjunto
de datos extrados de una o varias tablas de una base de datos. El juego de registros
se devuelve al servidor de aplicaciones, que emplea los datos para completar la
pgina.
A continuacin se ofrece una consulta de base de datos sencilla escrita en SQL:
1SELECT lastname, firstname, fitpoints
2FROM employees
Esta instruccin crea un juego de registros de tres columnas y lo completa con filas
que contienen el apellido, el nombre y los puntos de forma fsica de todos los
empleados de la base de datos.
En el siguiente ejemplo se muestra el proceso de consulta de base de datos y de
devolucin de los datos al navegador:

1. El navegador Web solicita la pgina dinmica.

2. El servidor Web localiza la pgina y la enva al servidor de aplicaciones.
3. El servidor de aplicaciones busca instrucciones en la pgina.
4. El servidor de aplicaciones enva la consulta al controlador de la base de datos.
5. El controlador ejecuta la consulta en la base de datos.
6. El juego de registros se devuelve al controlador.
7. El controlador pasa el juego de registros al servidor de aplicaciones.
8. El servidor de aplicaciones inserta los datos en una pgina y luego pasa la pgina
al servidor Web.
9. El servidor Web enva la pgina finalizada al navegador solicitante.
Puede utilizar prcticamente cualquier base de datos con su aplicacin Web,
siempre y cuando se haya instalado el controlador de base de datos correcto en el
servidor.
Si tiene intencin de desarrollar pequeas aplicaciones de bajo coste, puede utilizar
una base de datos basada en archivos, como las que permite crear Microsoft
Access. En cambio, si desea desarrollar aplicaciones empresariales crticas, puede

utilizar una base de datos basada en servidor, como las que permite crear Microsoft
SQL Server, Oracle 9i o MySQL.
Si la base de datos est situada en un sistema distinto del servidor Web, asegrese
de disponer de una conexin rpida entre ambos sistemas para que la aplicacin
Web pueda funcionar de forma rpida y eficiente.
Creacin de pginas dinmicas
La creacin de una pgina dinmica implica, en primer lugar, escribir el cdigo
HTML y, seguidamente, aadir los scripts o etiquetas del lado del servidor al cdigo
HTML para crear la pgina dinmica. Al visualizar el cdigo resultante, el lenguaje
aparece incrustado en el cdigo HTML de la pgina. Por esta razn, estos lenguajes
se conocen como lenguajes de programacin incrustados en HTML. En el siguiente
ejemplo bsico se utiliza ColdFusion Markup Language (CFML):
Nota: La compatibilidad con CFML se ha eliminado de Dreamweaver CC y versiones
posteriores.
1 <html>
2
3

<head>
<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

<!--- embedded instructions start here --->

<cfset department="Sales">

10

<cfoutput>

11

<p>Be sure to visit our #department# page.</p>

12

</cfoutput>

13

<!--- embedded instructions end here --->

14

</body>

15</html>
Las instrucciones incrustadas de esta pgina realizan las siguientes acciones:
1. Crean una variable denominada department y le asignan la cadena "Sales".

2. Inserta el valor de la variable, "Sales", en el cdigo HTML.

El servidor de aplicaciones devuelve la siguiente pgina al servidor Web:
1 <html>
2

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

<p>Be sure to visit our Sales page.</p>

</body>

10</html>
El servidor Web enva la pgina al navegador solicitante, que la muestra de la
siguiente forma:
About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our Sales page.
La utilizacin de un lenguaje basado en etiquetas o en scripts se decide en funcin
de la tecnologa de servidor disponible en el servidor. A continuacin se enumeran
los lenguajes ms utilizados para las tecnologas de servidor que admite
Dreamweaver:
Tecnologa de servidor

Lenguaje

ColdFusion

ColdFusion Markup Language (CFML)

Active Server Pages (ASP) VBScript

JavaScript
PHP

PHP

Dreamweaver puede crear los scripts (archivos de comando) o las etiquetas del lado
del servidor necesarias para que sus pginas funcionen, o puede escribirlos usted
manualmente en el entorno de programacin de Dreamweaver.

Terminologa de aplicaciones Web

En esta seccin se definen trminos utilizados con frecuencia relacionados con las
aplicaciones Web.
Servidor de aplicaciones
Software que ayuda al servidor Web a procesar las pginas que contienen scripts o
etiquetas del lado del servidor. Cuando se solicita al servidor una pgina de este
tipo, el servidor Web pasa la pgina al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Entre los servidores de aplicaciones
ms comunes figuran ColdFusion y PHP.
Base de datos
Conjunto de datos almacenados en tablas. Cada fila de una tabla constituye un
registro de datos, y cada columna constituye un campo del registro, como se indica
en el siguiente ejemplo:

Controlador de base de datos

Software que acta como intrprete entre una aplicacin Web y una base de datos.
Los datos de una base de datos se almacenan en un formato propio de dicha base
de datos. Un controlador de base de datos permite a la aplicacin Web leer y
manipular datos que, de otro modo, resultaran indescifrables.
Sistema de administracin de base de datos
(DBMS o sistema de base de datos) Software que se utiliza para crear y manipular
bases de datos. Entre los sistemas de bases de datos ms habituales figuran
Microsoft Access, Oracle 9i y MySQL.
Consulta de base de datos
Operacin mediante la cual se extrae un juego de registros de una base de datos.
Una consulta consta de criterios de bsqueda expresados en un lenguaje de base
de datos denominado SQL. Por ejemplo, la consulta puede especificar que slo se
incluyan determinadas columnas o determinados registros en el juego de registros.
Pgina dinmica

Pgina Web personalizada por el servidor de aplicaciones antes de que la pgina

se enve a un navegador.
Juego de registros
Conjunto de datos extrados de una o varias tablas de una base de datos, como se
ilustra en el siguiente ejemplo:

Base de datos relacional

Base de datos que contiene mltiples tablas que comparten datos. La siguiente base
de datos es relacional porque dos tablas comparten la columna DepartmentID.

Tecnologa de servidor
Tecnologa que utiliza un servidor de aplicaciones para modificar pginas dinmicas
en tiempo de ejecucin.
El entorno de desarrollo de Dreamweaver admite las siguientes tecnologas de
servidor:

Adobe ColdFusion

Microsoft Active Server Pages (ASP)

PHP: Hypertext Preprocessor (PHP)

Tambin puede utilizar el entorno de programacin de Dreamweaver para

desarrollar pginas para cualquier otra tecnologa de servidor no incluida en la lista.
Pgina esttica
Pgina Web que el servidor de aplicaciones no modifica antes de que la pgina se
enve a un navegador.
Aplicacin Web
Sitio Web que contiene pginas con contenido sin determinar, parcialmente o en su
totalidad. El contenido final de estas pginas se determina slo cuando un visitante
solicita una pgina del servidor Web. Dado que el contenido final de la pgina vara
de una peticin a otra en funcin de las acciones del visitante, este tipo de pgina
se denomina pgina dinmica.
Servidor Web
Software que suministra pginas Web en respuesta a las peticiones de los
navegadores Web. La peticin de una pgina se genera cuando un visitante hace
clic en un vnculo de una pgina Web en el navegador, elige un marcador en el
navegador o introduce un URL en el cuadro de texto Direccin del navegador.
Entre los servidores Web ms utilizados se incluyen Microsoft Internet Information
Server (IIS) y Apache HTTP Server.

3 HISTORIA DEL HTML

La historia completa de HTML es tan interesante como larga, por lo que a
continuacin se muestra su historia resumida a partir de la informacin que se puede
encontrar en la Wikipedia.
El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee, trabajador
del CERN (Organizacin Europea para la Investigacin Nuclear) propuso un nuevo
sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito de
la informtica, el "hipertexto" permita que los usuarios accedieran a la informacin
relacionada con los documentos electrnicos que estaban visualizando. De cierta
manera, los primitivos sistemas de "hipertexto" podran asimilarse a los enlaces de
las pginas web actuales.

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. Despus de unir sus fuerzas con el ingeniero de sistemas Robert
Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).
El primer documento formal con la descripcin de HTML se public en 1991 bajo el
nombre HTML Tags (Etiquetas HTML) y todava hoy puede ser consultado online a
modo de reliquia informtica.
La primera propuesta oficial para convertir HTML en un estndar 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
imgenes, tablas y formularios) ninguna de las dos propuestas de estndar,
llamadas HTML y HTML+ consiguieron convertirse en estndar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue
publicar, el 22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar de
su nombre, HTML 2.0 es el primer estndar oficial de HTML.
A partir de 1996, los estndares de HTML los publica otro organismo de
estandarizacin llamado W3C (World Wide Web Consortium). La versin HTML 3.2
se public el 14 de Enero de 1997 y es la primera recomendacin de HTML
publicada por el W3C. Esta revisin incorpora los ltimos avances de las pginas
web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de
las imgenes.
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la
publicacin original del 18 de Diciembre de 1997) y supone un gran salto desde las
versiones anteriores. Entre sus novedades ms destacadas se encuentran las hojas
de estilos CSS, la posibilidad de incluir pequeos programas o scripts en las pginas
web, mejora de la accesibilidad de las pginas diseadas, tablas complejas y
mejoras en los formularios.
La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y se
denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin HTML
4.0, por lo que no incluye novedades significativas.
Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se
detuvo y el W3C se centr en el desarrollo del estndar XHTML. Por este motivo,
en el ao 2004, las empresas Apple, Mozilla y Opera mostraron su preocupacin
por la falta de inters del W3C en HTML y decidieron organizarse en una nueva
asociacin llamada WHATWG (Web Hypertext Application Technology Working
Group).
La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo
primer borrador oficial se public el 22 de enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicacin 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
estandarizacin de XHTML, una versin avanzada de HTML y basada en XML. La
primera versin 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 adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene
casi todas sus etiquetas y caractersticas, pero aade algunas restricciones y
elementos propios de XML. La versin XHTML 1.1 ya ha sido publicada en forma
de borrador y pretende modularizar XHTML. Tambin ha sido publicado el borrador
de XHTML 2.0, que supondr un cambio muy importante respecto de las anteriores
versiones de XHTML.

4 ESTRUCTURA DE UN DOCUMENTO HTML.

Estructurar
La forma ms sencilla de estructurar un texto consiste en separarlo por prrafos.
Adems, HTML permite incluir ttulos que delimitan cada una de las secciones.
Prrafos
Una de las etiquetas ms utilizadas de HTML es la etiqueta <p>, que permite definir
los prrafos que forman el texto de una pgina. Para delimitar el texto de un prrafo,
se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>

<head>
<title>Ejemplo de texto estructurado con prrafos</title>
</head>

<body>
<p>Este es el texto que forma el primer prrafo de la pgina.
Los prrafos pueden ocupar varias lneas y el navegador se encarga
de ajustar su longitud al tamao de la ventana.</p>

<p>El segundo prrafo de la pgina tambin se define encerrando

su texto con la etiqueta p. El navegador tambin se encarga de
separar automticamente cada prrafo.</p>
</body>

</html>
El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

Ejemplo de texto HTML estructurado con prrafos

La siguiente tabla recoge la definicin formal de la etiqueta <p>:
Etiqueta

<p>

Atributos comunes bsicos, internacionalizacin y eventos

Atributos propios Tipo de elemento

Bloque

Descripcin

Delimita el contenido de un prrafo de texto

Los prrafos creados con HTML son elementos de bloque, por lo que siempre
ocupan toda la anchura de la ventana del navegador. Adems, no tienen atributos
especficos, pero s que se les pueden asignar los atributos comunes de HTML
bsicos, de internacionalizacin y de eventos.
3.1.2. Secciones
Las pginas HTML habituales suelen tener una estructura ms compleja que la que
se puede crear solamente mediante prrafos. De hecho, es habitual que las pginas
se dividan en diferentes secciones jerrquicas.
Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la
pgina. HTML permite crear secciones de hasta seis niveles de importancia. De esta
forma, aunque una pgina puede definir cualquier nmero de secciones, slo puede
incluir seis niveles jerrquicos.
Las etiquetas que definen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5>
y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir
los titulares de la pgina. La importancia del resto de etiquetas es descendiente, de
forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos
importantes de la pgina.
A continuacin se muestra la definicin formal de la etiqueta <h1>, siendo idntica
la definicin del resto de etiquetas referidas a los ttulos de seccin:
Etiqueta

<h1>

Atributos
comunes

bsicos, internacionalizacin y eventos

Atributos propios Tipo de elemento Bloque

Descripcin

Define los ttulos de las secciones de mayor importancia de la

pgina.

Al igual que la etiqueta <p>, las etiquetas de ttulo de seccin son elementos de
bloque y no tienen atributos especficos.
Las etiquetas <h1>, ..., <h6> definen ttulos de seccin, no secciones completas.
Por este motivo, no es necesario encerrar los contenidos de una seccin con su
etiqueta correspondiente. Solamente se debe encerrar con las etiquetas <h1>, ...,
<h6> los ttulos de cada seccin.
El siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:
<html>

<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>

<body>
<h1>Titular de la pgina</h1>

<p>Prrafo de introduccin...</p>

<h2>La primera sub-seccin</h2>

<p>Prrafo de contenido...</p>

<h2>Otra subseccin</h2>

<p>Ms prrafos de contenido...</p>

</body>

</html>
Los navegadores muestran el ejemplo anterior de la siguiente manera:

Ejemplo de texto HTML estructurado con prrafos y secciones

Los navegadores asignan de forma automticamente el tamao del ttulo de cada
seccin en funcin de su importancia. As, los ttulos de seccin <h1> se muestran
con el tamao de letra ms grande, ya que son el nivel jerrquico superior, mientras
que los ttulos de seccin <h6> se visualizan con un tamao de letra muy pequeo,
adecuado para el nivel jerrquico de menor importancia.
Evidentemente, el aspecto que los navegadores aplican por defecto a los ttulos de
seccin se puede modificar utilizando las hojas de estilos de CSS. La siguiente
imagen muestra el tamao por defecto con el que los navegadores muestran cada
titular:

Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6

5 SINTAXIS DE LOS ELEMENTOS HTML.

SINTAXIS DE LAS ETIQUETAS HTML
El lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible
escribir sus etiquetas y atributos de muchas formas diferentes. Las etiquetas por
ejemplo podan escribirse en maysculas, en minsculas e incluso combinando
maysculas y minsculas. El valor de los atributos de las etiquetas se podan indicar

con y sin comillas ("). Adems, el orden en el que se abran y cerraban las etiquetas
no era importante.
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final
son pginas con un cdigo HTML desordenado, difcil de mantener y muy poco
profesional. Afortunadamente, XHTML soluciona estos problemas aadiendo
ciertas normas en la forma de escribir las etiquetas y atributos.
A continuacin se muestran las cinco restricciones bsicas que introduce XHTML
respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un prrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un prrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en
minsculas:
Ejemplo correcto en XHTML:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<P>Este es un prrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un prrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy
habituales.

5) Todas las etiquetas deben cerrarse siempre:

La mayora de etiquetas HTML encierran un contenido de texto entre la etiqueta de
apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas
"etiquetas vacas" no necesitan encerrar ningn texto.
La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva lnea,
tal y como se ver ms adelante. Por sus caractersticas, la etiqueta <br> nunca
encierra ningn contenido de texto.
Como el estndar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que
se incluya la etiqueta <br> se debera cerrar de forma seguida: <br></br>. Para que
el cdigo resulte ms cmodo de escribir, XHTML permite en estos casos escribir
de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.
En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede
utilizar la sintaxis <br/> para indicar que es una etiqueta vaca que se abre y se
cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la
posicin del carcter /.
Ejemplo correcto en XHTML:
<br/>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<br>
Adems de estas cinco restricciones bsicas, XHTML incluye otros cambios ms
avanzados respecto a HTML:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en
blanco que se encuentran antes y despus del valor. Adems, se eliminan
todos los espacios en blanco sobrantes dentro del valor de un atributo. En
otras palabras, si en el interior de un atributo se incluyen varios espacios en
blanco seguidos, se eliminan todos salvo un nico espacio en blanco utilizado
para separar las diferentes palabras.
2. Como se explicar ms adelante al hablar de la etiqueta <script>, el cdigo
JavaScript debe encerrarse entre unas etiquetas especiales (<![CDATA[ y
]]>) para evitar que el navegador interprete de forma errnea caracteres
como & y <.
3. Las pginas XHTML deben prescindir del atributo name para identificar de
forma nica a los elementos. En su lugar, siempre debe utilizarse el atributo
id. De hecho, en la versin 1.0 del estndar XHTML, el atributo name se ha
declarado obsoleto para las etiquetas a, applet, form, frame, iframe, img y
map.

6 ELEMENTOS HTML
Adems de etiquetas y atributos, HTML define el trmino elemento para referirse a
las partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en
realidad un elemento HTML es mucho ms que una etiqueta, ya que est formado
por:

Una etiqueta de apertura.

Cero o ms atributos.

Texto encerrado por la etiqueta.

Una etiqueta de cierre.

El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML

no pueden encerrar ningn texto. El siguiente esquema muestra un elemento HTML,
formado por una etiqueta <p>, atributos y contenidos de texto:

Figura 2.7 Esquema de las partes que componen un elemento HTML

La estructura mostrada en el esquema anterior es un elemento HTML ya que
comienza con una etiqueta de apertura (<p>), contiene cero o ms atributos
(class="normal"), dispone de un contenido de texto (Esto es un prrafo) y finaliza
con una etiqueta de cierre (</p>).
Por tanto, si una pgina web tiene dos prrafos de texto, la pgina contiene dos
elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p>
de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual
intercambiar las palabras "elemento" y "etiqueta".
Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos:
elementos en lnea (inline elements en ingls) y elementos de bloque (block
elements en ingls).
La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan
el espacio disponible en la pgina. Los elementos de bloque siempre empiezan en
una nueva lnea y ocupan todo el espacio disponible hasta el final de la lnea,

aunque sus contenidos no lleguen hasta el final de la lnea. Por su parte, los
elementos en lnea slo ocupan el espacio necesario para mostrar sus contenidos.
Si se considera el siguiente ejemplo:
<html>

<head>
<title>Ejemplo de elementos en lnea y elementos de bloque</title>
</head>

<body>
<p>Los prrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en lnea</a>
<p>Dentro de un prrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en lnea.</p>
</body>

</html>
La siguiente imagen muestra cmo visualizan los navegadores el cdigo HTML
anterior (mediante CSS se han aadido bordes que muestran el espacio ocupado
por cada elemento):

Diferencias entre elementos en lnea y elementos de bloque

El primer prrafo contiene un texto corto que slo ocupa la mitad de la anchura de
la ventana del navegador. No obstante, el espacio reservado por el navegador para

el primer prrafo llega hasta el final de esa lnea, por lo que resulta evidente que los
elementos <p> son elementos de bloque.
Por otra parte, el primer enlace del ejemplo anterior tambin tiene un texto corto que
ocupa solamente la mitad de la anchura de la ventana del navegador. En este caso,
el navegador slo reserva para el enlace el sitio necesario para mostrar sus
contenidos. Si se aade otro enlace en esa misma lnea, se mostrara a continuacin
del primer enlace. Por tanto, los elementos <a> son elementos en lnea.
Por ltimo, el segundo prrafo sigue ocupando todo el espacio disponible hasta el
final de cada lnea (por ser un elemento de bloque) y el enlace que se encuentra
dentro del prrafo slo ocupa el sitio necesario para mostrar sus contenidos (por ser
un elemento en lnea).
La mayora de elementos de bloque pueden contener en su interior elementos en
lnea y otros elementos de bloque. Los elementos en lnea slo pueden contener
texto u otros elementos en lnea. En otras palabras, un elemento de bloque no
puede aparecer dentro de un elemento en lnea. En cambio, un elemento en lnea
puede aparecer dentro de un elemento de bloque y dentro de otro elemento en lnea.
Los elementos en lnea definidos por HTML son: a, abbr, acronym, b, basefont, bdo,
big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small,
span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML son: address, blockquote, center, dir,
div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript,
ol, p, pre, table, ul.
Los siguientes elementos tambin se considera que son de bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque segn las circunstancias:
button, del, iframe, ins, map, object, script.

7 REFERENCIAS DE CARCTER.
Referencia de caracteres
Una referencia de caracteres es una pequea pieza de cdigo usada para
representar ciertos caracteres en documentos HTML. Principalmente usada para
insertar smbolos que no pertenecen al juego de caracteres (o en muchos casos,
smbolos difciles de ingresar), las referencias de caracteres pueden insertarse
utilizando una expresin regular. De echo, cada referencia de caracteres puede
insertarse de tres formas diferentes:

Por su nombre de entidad: Cada referencia de caracteres tiene una entidad

asignada. El formato apra insertar un smbolo por su nombre de entidad est

compuesto por un smbolo "&" seguido de su nombre de entidad y un punto

y coma (";"). Por ejemplo, el smbolo de la libra esterlina ("") puede ser
insertado como "&pound;".

Por su valor decimal: Tal como con las entidades, un nmero nico es
asociado con cada referencia de caracteres. El formato es compuesto por un
smbolo "&" seguido de un signo numeral ("#"), el nmero asociado y un punto
y coma (";"). Por ejemplo, el smbolo de la libra esterlina ("") puede ser
insertado como "&#163;".

Por su valor hexadecimal: Este mtodo funciona exactamente como el del

valor decimalcon la diferencia que el nmero se escribe en formato
hexadecimal y una "x" (en minscula) se agrega a continuacin del signo
numeral ("#"). Las letras en el nmero hexadecimal deben ir en maysculas.
Por ejemplo, el smbolo de la libra esterlina ("") puede ser insertado como
"&#xA3;".

Muchos navegadores no proveen soporte para todas las entidades de caracteres y

usualmente representan un cuadrado blanco ("") o un signo de pregunta ("?" "")
en su lugar. Por otra parte, la notacin hexadecimal para referencias de caracteres
tampoco es soportada por muchos navegadores, lo que la hace una forma poco
fiable de reproducir smbolos. Dicho esto, queda claro que la mejor forma de
representar referencias de caracteres es a travs de la noracin decimal.