UNIDAD TEMÁTICA 01

ELABORACIÓN DE PÁGINAS
WEB. HTML.

TEMA 2
INTRODUCCIONES A HTML Y
XHTML
 TEMA 2: INTRODUCCIONES A HTML Y XHTML

Contenido
1. Introducción ........................................................................................................................................ 3
1.1. Historia de HTML y XHTML ................................................................................................ 3
1.2. Definiciones .............................................................................................................................. 4
1.2.1. El Lenguaje HTML ....................................................................................................... 4
1.2.2. Versiones HTML............................................................................................................ 4
1.2.3. El lenguaje XHTML ...................................................................................................... 5
1.2.4. El lenguaje CSS .............................................................................................................. 6
1.3. Herramientas ........................................................................................................................... 6
1.3.1. Navegadores ................................................................................................................... 6
1.3.2. URL (Uniform Resource Locator)................................................................................ 7
1.3.3. Editor de textos .............................................................................................................. 9
1.4. Esquema de funcionamiento modelo cliente-servidor ........................................................ 10
1.4.1. Cliente web ................................................................................................................... 10
1.4.2. Servidor web ................................................................................................................. 11

UT 01: Elaboración de páginas web. HTML 2

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1. Introducción
1.1. Historia de HTML y XHTML

Pasado

Ya hemos visto en el tema anterior que los lenguajes de marcas son

bastante antiguos, y sus inicios se pueden situar realmente con el lenguaje SGML
(Standard Generalized Markup Language). Este lenguaje en realidad nunca llegó
al gran público, aunque sigue existiendo y usándose en entornos muy
específicos.

Los lenguajes de marcas se popularizaron gracias a la llegada de Internet.

Presente

El lenguaje de marcas más usado y conocido hoy es HTML (HyperText

Markup Language). Ha ido cambiando mucho a lo largo del tiempo. La versión
más actual es la conocida como HTML5.

El fundamento de Internet y todas las tecnologías asociadas se basa en

estándares abiertos e independientes de la tecnología. El organismo que regula
estos estándares sin ninguna contrapartida a cambio es el World Wide Web
Consortium (W3C). Todos sus estándares (que ellos llaman Technical Reports)
pueden descargarse gratuitamente en su web.

Futuro

El futuro sigue estando en sistemas abiertos, que facilitan la competencia

y benefician al usuario. La web ha tenido un crecimiento exponencial debido a las
plataformas móviles, que han multiplicado los accesos a las páginas web y que
también han dificultado el diseño web. Hablaremos más de ello en el tema sobre
CSS Cascade Style Sheet.

UT 01: Elaboración de páginas web. HTML 3

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1.2. Definiciones
Empecemos por la definición de Lenguaje Informático: aquel que nos
sirve para transmitir una información a un ordenador para que este haga algo.
“Lenguaje” indica que nos comunicaremos con el ordenador por medio de
palabras y signos de escritura. Los ordenadores no entienden más que una serie
limitada de instrucciones, que hay que usar siempre de la misma manera, sin
salirse de unas reglas.

HTML y CSS son lenguajes informáticos simples, es decir, lo que nosotros

le transmitimos al ordenador, es lo que este hace directamente.

Existen también lenguajes informáticos más complejos o de

programación, algunos de ellos relacionados con la creación de páginas web.

Aunque en sí es un lenguaje informático, HTML no deja de ser más que

una manera de dar formato a los textos e imágenes que pretendemos ver por
pantalla.

1.2.1. El Lenguaje HTML

Es el principal lenguaje informático con el que se escriben las páginas
web. Las páginas web son vistas por el usuario mediante unos programas
llamados navegadores o "browsers". Por tanto, HTML es el lenguaje que usan los
navegadores para mostrar las páginas webs al usuario.

Permite insertar textos, sonidos e imágenes y combinarlos a nuestro

gusto. Además, permite introducir referencias a otras páginas Web por medio de
los enlaces hipertexto.

1.2.2. Versiones HTML

Con el tiempo se han ido creando distintas versiones, que han tratado de
estandarizar este lenguaje, de forma que las páginas puedan verse igual en los

UT 01: Elaboración de páginas web. HTML 4

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

diferentes navegadores y dispositivos.

• HTML 3.2, W3C Recommendation, 14 January 1997, Dave Raggett, Author
• HTML 4.01, W3C Recommendation, 24 December 1999, Dave
Raggett, Arnaud Le Hors,Ian Jacobs, Editors
• HTML5, W3C Recommendation, 28 October 2014.

Para más información:

• HTML: http://www.w3.org/community/webed/wiki/HTML/Specifications
• HTML5:
o Recomendación HTML5 publicado en Octubre del 2014.
o http://www.w3.org/html/wiki/FAQs#When_can_I_use_HTML5.3F
o http://es.wikipedia.org/wiki/HTML5

1.2.3. El lenguaje XHTML

En el año 2000 el W3C publica XHTML 1.0: es una reformulación de HTML
4.0 (1998) en XML. El objetivo era mejorar las deficiencias que tenía HTML en
aquel momento, incorporando las ventajas que aportaba un nuevo lenguaje
recién creado, el XML.

W3C siguió trabajando por este camino en un nuevo lenguaje XHTML 2.0,
pero que ya no era compatible ni con el HTML, ni siquiera con XHTML 1.0.

En 2009 el consorcio W3C decide poner fin al desarrollo del estándar

XHTML 2.0 a favor de HTML5.

Existen otros lenguajes que se introdujeron para superar algunos

inconvenientes de HTML, ya que este lenguaje se queda corto para organizar,
optimizar y automatizar el funcionamiento de las webs. Ejemplos de estas son
CSS y JavaScript.

UT 01: Elaboración de páginas web. HTML 5

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1.2.4. El lenguaje CSS

Se ocupa principalmente del estilo y diseño de la página.

Indicar con HTML aspectos de la página como colores, tamaños, el lugar

que ocupa cada elemento, etc. puede resultar bastante complicado, y además no
siempre es posible. Por ello se creó el lenguaje CSS, con el cual definimos el estilo
que tendrá cada elemento de la página.

Con CSS indicamos el lugar y el espacio que ocupará cada elemento en la

misma, los colores, los tamaños y tipos de letra, y todo lo referente a la
maquetación y diseño de los elementos que la componen, así como otros
elementos del estilo y composición.

HTML y CSS aunque son dos lenguajes distintos, se complementan. Es por

eso por lo que los estudiaremos conjuntamente.

1.3. Herramientas
En este apartado vamos a ver lo que necesitaremos para seguir este
manual y poder realizar los ejemplos que pongamos.

1.3.1. Navegadores
Como es obvio, necesitamos al menos un navegador para ver los
resultados de nuestro trabajo, aunque en realidad es conveniente tener
instalados varios navegadores. No todos los navegadores funcionan de la misma
manera ni muestran las páginas igual. Puede haber pequeñas (o grandes)
diferencias entre uno y otro. Debemos contrastar los resultados en varios de
ellos para garantizar el correcto desarrollo de nuestros programas. Necesitamos
evidentemente tener instalados los navegadores más usados por los internautas
y que abarquen prácticamente la totalidad de cuota de mercado, para
asegurarnos que nuestra página la verán igual (o de forma muy parecida) la gran
mayoría de los internautas.

UT 01: Elaboración de páginas web. HTML 6

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1.3.2. URL (Uniform Resource Locator)

La URL define objetos en una red de Internet. En ella se contienen datos sobre:
• Servicio o protocolo. Indica el protocolo o servicio utilizado para acceder
al recurso (http, https, mailto, ftp, telnet, etc.)
• Host o nodo de la red. Es el nombre de dominio o la dirección IP que
identifica el servidor donde se encuentra el recurso.
• Puerto (Opcional). Indica el número de puerto utilizado para acceder al
recurso en el servidor. Si no se especifica, se utiliza el puerto
predeterminado para el protocolo. Por ejemplo, 80 para HTTP y 443
para HTTPS.
• Path del Fichero o Ruta. Especifica la ubicación exacta del recurso en el
servidor, incluyendo nombres de directorios y el nombre del archivo. En
el siguiente ejemplo, "/download/aspdoc.zip" es la ruta.

Estructura: Servicio://[host]:[puerto]/[path del fichero]

Ejemplo. http://microsoft.com/download/aspdoc.zip

• HTTP (Hypertext Transfer Protocol): es el protocolo utilizado para acceder a

páginas web y otros recursos en la World Wide Web. Las direcciones web que
comienzan con "http://" indican que se debe utilizar este protocolo para
recuperar la página o recurso.
• HTTPS (Hypertext Transfer Protocol Secure): similar a HTTP, pero con
seguridad adicional mediante cifrado SSL/TLS. Se utiliza para conexiones
seguras, como transacciones en línea y acceso a cuentas personales. Las
direcciones web que comienzan con "https://" indican que se utiliza este
protocolo.
• FTP (File Transfer Protocol): es un protocolo utilizado para transferir archivos
entre un cliente y un servidor en una red. Se utiliza comúnmente para cargar y
descargar archivos en servidores web o servidores de archivos. Las direcciones
que comienzan con "ftp://" indican el uso de este protocolo.

UT 01: Elaboración de páginas web. HTML 7

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

• Mailto: no es un protocolo de acceso a recursos web, sino una forma de

especificar direcciones de correo electrónico en las URL. Cuando se hace clic en
un enlace "mailto:", se abre el programa de correo electrónico predeterminado
del usuario con la dirección de correo electrónico prellenada.
• Telnet: es un protocolo que permite el acceso remoto a otros sistemas a través
de la red. Se utiliza para administrar servidores y dispositivos de red de forma
remota. Las direcciones que comienzan con "telnet://" indican que se utilizará
el protocolo Telnet.

Tipos de URL. Absolutas y relativas.

• Absolutas: especifican un path completo.
• Relativas: especifican un path relativo a la url del documento.

Debes saber:
./ para indicar el directorio actual
../ para ir al directorio inmediatamente superior ../../ sube dos directorios

ELEMENTO VALOR
Página origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Página web llamada pagina2.html y que se encuentra en el mismo
Página a llamar
directorio ruta3
URL Absoluta http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html
URL Relativa pagina2.html o ./pagina2.html (./ indica directorio actual)

Página origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Página web llamada pagina2.html y que se encuentra en el
Página a llamar
directorio superior llamado ruta2
URL Absoluta http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL Relativa ../pagina2.html

UT 01: Elaboración de páginas web. HTML 8

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

Página origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Página web llamada pagina2.html y que se encuentra en el
Página a llamar
directorio superior llamado ruta1
URL Absoluta http://www.ejemplo.com/ruta1/pagina2.html
URL Relativa ../../pagina2.html

Página origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Página web llamada pagina2.html y que se encuentra en un
Página a llamar
directorio inferior llamado ruta4
URL Absoluta http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/pagina2.html
URL Relativa ruta4/pagina2.html

1.3.3. Editor de textos

Los textos escritos de código fuente en los lenguajes HTML y CSS debemos
guardarlos en archivos, por lo que necesitamos un editor de textos plano.

Cualquier editor de texto sin formato vale, eso sí, los ficheros deben tener
extensión html. Se pueden encontrar documentos html con extensión htm, estos
ficheros son iguales y no hay diferencia entre ellos. La extensión htm existe
porque anteriormente el nombre de las extensiones estaba limitado a 3
caracteres.

En principio puede servirnos el bloc de notas de Windows. Lo

encontrarás (suponiendo que tienes Windows) en inicio / programas / accesorios.

Existen editores de html más avanzados que, por ejemplo, codifican las
etiquetas con algún sistema de colores, uno de los más utilizados hoy en día es
Visual Studio Code.

Otros editores: Sublime Text, Netbeans, JetBrains Webstorm, Kompozer,

Aptana Studio, CoffeeCup Free Editor, Brackets, TextWrangler y Notepad++.

UT 01: Elaboración de páginas web. HTML 9

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1.4. Esquema de funcionamiento modelo cliente-servidor

La Web funciona siguiendo el denominado modelo cliente-servidor,

habitual en las aplicaciones que funcionan en una red: existe un servidor, que es
quien presta el servicio, y un cliente, que es quien lo recibe.

1.4.1. Cliente web

El cliente web es un programa (navegador web) con el que el usuario

interacciona para solicitar a un servidor web el envío de páginas de información.
Estas páginas se transfieren mediante el protocolo HTTP o HTTPS.

Las páginas que se reciben son documentos de texto codificados en

lenguaje HTML. El cliente web debe interpretar estos documentos para
mostrárselos al usuario en el formato adecuado.

Entre los clientes web (también conocidos como visualizadores o

navegadores) más usuales están: Mozilla Firefox, Microsoft Internet Explorer,
Microsfot Edge, Opera, Safari y Google Chrome. La mayoría de ellos soportan
también otros protocolos, como por ejemplo el FTP (File Transfer Protocol), para
la transferencia de ficheros.

UT 01: Elaboración de páginas web. HTML 10

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

1.4.2. Servidor web

El servidor web es un programa que está permanentemente escuchando

las peticiones de conexión de los clientes. También se ocupa de controlar los
aspectos de seguridad, comprobando si el usuario tiene acceso a los documentos.

El proceso desde que el usuario solicita una página hasta que el cliente
web se la muestra con el formato adecuado, es el siguiente:

1. El usuario especifica en el cliente web la dirección (URL) de la página que desea

consultar.

2. El cliente establece la conexión con el servidor web (por ejemplo, Apache).

3. El cliente solicita la página deseada.

4. El servidor busca la página que ha sido solicitada en su sistema de ficheros:

• Si la encuentra, la envía al cliente junto al código 200 (operación OK)

• En caso contrario, devuelve un código de error (ejemplo: código

404, recurso no encontrado)

5. El cliente interpreta los códigos HTML y muestra la página al usuario.

Si la petición necesita la generación dinámica de una página HTML, por

ejemplo, por necesitar hacer una consulta a una base de datos, debe haber un
intérprete del lenguaje utilizado (p.ej. PHP o ASP) en el servidor, que interactúa
con un programa que maneja la base de datos y va generando páginas en HTML
que se envían al cliente.

6. Se cierra la conexión.

UT 01: Elaboración de páginas web. HTML 11

 TEMA 2: INTRODUCCIONES A HTML Y XHTML

Este contenido está bajo la licencia CC-BY-NC-SA. Ha sido elaborado gracias a

un curso cedido por la Consejería de Educación y Deporte de la Comunidad de Madrid.
En el presente documento se han hecho algunas adaptaciones sobre los contenidos
originales, modificando o añadiendo conceptos y ejercicios prácticos.

UT 01: Elaboración de páginas web. HTML 12