HTML, CSS Y JAVASCRIPT

1.- INTRODUCCIÓN
En el desarrollo de páginas web hay tres tecnologías que intervienen
directamente, sin tener en cuenta los lenguajes de servidor.
 HTML: Lenguaje de marcas que es interpretado por el navegador web para
presentarnos el contenido en pantalla. Es el protagonista principal sobre el que
finalmente radica el resultado final del desarrollo web.
 CSS: Es la parte encargada de gestionar la apariencia de los elementos que el
lenguaje HTML dispone sobre nuestra página web. Su evolución ha sido tan
espectacular que actualmente no se concibe un sitio sin una hoja de estilos que
administre y organice el contenido del documento HTML.
 JavaScript: Lenguaje encargado de agregar interactividad y dinamismo al sitio
web. Igual que ocurre con CSS, ahora mismo es prácticamente imposible
diseñar una página web de cierta magnitud sin incorporar código JavaScript.

El software necesario para un desarrollador web se puede dividir en dos grupos

bien diferenciados: editor web y navegador web.

Un editor web es un tipo de software que tiene como función agilizar la tarea
de codificación de los documentos o lenguajes de marcas o lenguajes de programación
implicados en el desarrollo web: HTML, XHTML, CSS, JavaScript, PHP, Python, JSON,
etc. Existen multitud de editores web: Visual Studio Code, UltraEdit, WebStorm, Atom,
Geany, NotePad++, Sublime Texxt, Aptana Studio, etc.

El navegador web es el software necesario para mostrar la página web. No

todos los navegadores interpretan el código de la misma forma, siendo la
compatibilidad entre los diferentes navegadores uno de los problemas de los
desarrolladores web. Entre los navegadores más utilizados se encuentran Mozilla
Firefox, Google Chrome, Microsoft Edge y Safari.

 Estructura de un sitio web

Antes de comenzar a codificar e implementar una página web, es
recomendable disponer de una estructura de directorios o carpetas donde tener
organizados todos los elementos que pueden conformar nuestro sitio web. Los tipos
de ficheros que pueden aparecer en una página web sencilla son:
a) Ficheros o documentos HTML: Son los archivos que almacenan el código HTML
de una página web. Estos ficheros están generados normalmente con un editor
web y tienen como extensión .html o .htm.
b) Hojas de estilos: Son los archivos que recogen el código CSS u hoja de estilos
que se le aplica a un documento HTML. Estos ficheros tienen extensión .css.
c) Ficheros JavaScript: Archivos que almacenan los programas en JavaScript que
necesita nuestro sitio web. Estos ficheros, al igual que los dos anteriores,
también podrían estar generados con un editor web y tiene extensión .js.

1
 d) Multimedia: Archivos multimedia tales como iconos, imágenes, fotografías,
vídeos, música, etcétera. Las extensiones de estos ficheros son del
tipo .jpg, .png, .fig, .ico, .mp3, .mp4, etcétera.

También hemos de tener en cuenta que, si queremos que esta web esté
disponible para todo el mundo, habrá que publicarla en un servidor web.

2.- EL LENGUAJE HTML. EVOLUCIÓN HISTÓRICA

HTML son las siglas de HyperText Markup Language (lenguaje de marcado de
hipertexto). Una página web es un documento HTML. No solo puede contener texto,
también es posible la inserción de elementos multimedia como vídeos, sonidos e
imágenes. Es importante no confundir un lenguaje de marcado con un lenguaje de
programación; los lenguajes de marcado carecen de instrucciones de control de flujo,
variables, operadores, funciones y demás características propias de un lenguaje de
programación.

HTML es el lenguaje utilizado para crear páginas web, siendo un estándar

reconocido en todos los navegadores. Está gestionado por el W3C (World Wide Web
Consortium), dedicado a la estandarización de la web para lograr que esta sea
accesible, universal, fiable, fácil de usar y de uso libre. HTML es gratuito, ninguna
persona ni empresa debe pagar por utilizarlo.
Fue desarrollado en el CERN por Tim Berners Lee como el lenguaje de marcado
capaz de proporcionar un mecanismo sencillo, flexible y universal para almacenar y
transmitir información entre distintos sistemas informáticos.
La especificación actual de HTML se encuentra disponible en
http://www.w3.org/html. Desde su nacimiento ha pasado por diversas modificaciones
que han ido mejorando las capacidades del lenguaje, incorporando nuevas etiquetas,
eliminando otras y adaptándose a las capacidades tecnológicas del momento.

La primera descripción de HTML nació en 1991, fue una primera versión en la

que se describían un total de 18 elementos básicos con los que conformar un
documento HTML.
En 1995, el Internet Engineering Task Force (IETF) creó el primer estándar Oficial,
HTML 2.0. A partir del año siguiente, el W3C se encargó de publicar los estándares de
HTML.
A principios de 1997, aparece la versión HTML 3.2, publicada por el W3C. Incorpora
los applets de Java, pequeños programas escritos en lenguaje Java que puede
incrustarse en un documento HTML permitiendo obtener una gran variedad de efectos
en las páginas web.
El 24 de abril de 1998 se publica HTML 4.0, que presenta como novedades las
tablas complejas, mejoras en los formularios, hojas de estilo, añadir script y mejora de
accesibilidad. HTML 4.01 surge a finales de 1999 como actualización y revisión de
HTML 4.0, aunque no aporta novedades relevantes.
En el año 2000 se publica la primera versión de XHTML, adaptación del lenguaje
HTML 4.01 al lenguaje XML.
En 2014 se publica HTML 5, estableciendo nuevos elementos.

2
3.- EL PROTOCOLO HTTP
La comunicación web en Internet tiene como elemento principal al protocolo
HTTP (Hypertext Transfer Protocol), protocolo de transferencia de hipertexto. Este
protocolo es el encargado de transferir el código HTML de una página web a nuestro
navegador; asimismo, HTTP establece la forma y modo en la que se establecen las
comunicaciones entre cliente y servidor. En esta comunicación, intervienen:
 Navegador web: Es el software que utiliza el usuario (cliente) para realizar una
petición al servidor.
 Servidor: El servidor web es la máquina remota que recibe la petición HTTP por
parte del cliente y devuelve el código HTML.
 Puerto: Interfaz de comunicación entre cliente y servidor, estos puertos están
definidos por números, siendo el 80 el puerto por defecto para protocolo HTTP.
 Cookies: Información almacenada en el navegador del cliente por parte del
servidor web. Son pequeñas porciones de datos muy útiles para consultar y
recordar información previa del usuario o de la conexión.
 URL: Siglas en inglés de Uniform Resource Locator, no es más que una cadena de
caracteres representada con un formato determinado y que identifica un recurso
único del World Wide Web (principalmente una página web).

Cuando la transferencia de información requiere cierto nivel de seguridad, se usa

una variante del protocolo HTTP denominada HTTPS (Hypertext Transfer Protocol
Secure).

Desde que un usuario escribe una URL en el navegador, hasta que se muestra la
página web, suceden una serie de pasos:
 Lo primero que hace el navegador es analizar la URL para separar las diferentes
partes que la conforman:
o Protocolo: http.
o Dominio: dirección de la pagina web
o Puerto: Al no especificarse, se usa el puerto por defecto para el
protocolo http, el puerto 80.
 El siguiente paso será convertir el nombre de dominio en una dirección IP. El
servidor DNS recibe la petición e identifica cuál es la dirección IP del servidor
que se corresponde con el dominio, es lo que se conoce como resolución de
nombres.
 El navegador web ya tiene todos los datos para abrir una conexión TCP/IP
contra el servidor, especificando la IP de este, el protocolo y el puerto.
 El servidor web analiza, procesa la petición y retorna un documento HTML con
la información solicitada.
 El navegador interpreta el código HTML recibido y lo muestra en pantalla.

3
4.- ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Un documento HTML está construido a partir de etiquetas, que dan lugar a
elementos, que a su vez engloban atributos, valores y contenido. No todos los
elementos disponen de etiquetas de inicio y etiquetas de cierre. Hay ciertos tipos de
elementos que, al no albergar contenido, no llevan etiqueta de cierre, un ejemplo es el
elemento que inserta una nueva línea en un documento: <br>.

La estructura de un documento HTML está compuesta básicamente por dos partes

bien diferenciadas, cabecera y cuerpo:
 Cabecera: Representada por la etiqueta <head>, es la parte encargada de recoger
información referente al documento HTML. Se trata de información no visible en el
navegador.
 Cuerpo: Es la parte principal del documento, la que engloba todo el contenido que
se muestra en una página web. Está representada por la etiqueta <body>.

La etiqueta <!DOCTYPE> indica al navegador la versión de HTML utilizada. En

nuestro caso, <!DOCTYPE html> indica un documento HTML versión 5.

La etiqueta <!-- --> se utiliza esta etiqueta para agregar comentarios dentro del
código HTML, cualquier texto que esté incluido dentro de esta etiqueta no se mostrará
en nuestra página web. Es una buena práctica poner comentarios, facilitando el
mantenimiento de la página web.

Existen en torno a 100 etiquetas en HTML. Algunas de las más comunes son:
 <html>: Esta etiqueta engloba o representa el inicio y el fin de un documento
HTML.
 <head>: Es la etiqueta que define el inicio y el fin de la cabecera del documento
HTML.

4
 <body>: Etiqueta que engloba el cuerpo del documento HTML, cualquier contenido
o información que vayamos a mostrar en nuestra página web debe estar codificado
dentro de esta etiqueta.
 <meta>: Esta etiqueta define las propiedades del documento HTML. Por norma
general, esta etiqueta recoge datos tales como autor, descripción de la página,
palabras claves, software o editor con el que se ha generado el documento y tipo
de contenido. Los atributos y uso de esta etiqueta son:
o name: Dependiendo del valor de este atributo estaremos describiendo una
información u otra:
 author para definir el autor de la página web
 description para describir el contenido del sitio web
 generator para establecer el nombre del editor HTML que estamos
utilizando
 keywords para definir las palabras claves que identifican el
contenido de la página web.
o http-equiv: Maneja información que se envía al servidor en la cabecera
http.
o content: contiene el valor de la propiedad indicada por name.
 <title>: Etiqueta que define el título o nombre de la página web. Este nombre es el
que aparece en la barra de título de las ventanas. Es obligatorio definir esta
etiqueta dentro de <head>.

Ejemplos:
<head>
<meta charset="UTF-8>
<meta name="author" content="Alicia y Mª Jesús">
<meta name="description" content="Página de Aplicaciones Web">
<meta name="keywords" content="web webl.0 web2.0 Joomla Moodle">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Aplicaciones</title>
</head>

 <a>: Se emplea para generar un enlace a otra página o recurso. Su atributo más
importante es href (Especifica la URL o ruta a la que hace referencia el enlace).
Ejemplo de cómo crear un enlace o hipervínculo:
<a href="http://www.google.es">Google</a>

 <h1>-<h6>: Etiquetas utilizadas para generar títulos o encabezados de ciertas

partes de nuestra página web que necesitan ser resaltados de alguna forma.
o Hay seis niveles de encabezado, siendo <h1> el más importante y <h6> el de
menor importancia. Este elemento únicamente soporta el atributo align
que determina la alineación del encabezado, sus posibles valores son left,
center, right y justify, que representan izquierda, centro, derecha y
justificado, respectivamente. Este atributo ha sido eliminado de la
especificación de HTML5, en su lugar se recomienda el uso de CSS.

5
 <div>: Etiqueta utilizada en la maquetación web. Se le conoce comúnmente con el
nombre de capa. Su funcionalidad principal es la de agrupar o dividir en secciones
los diferentes elementos que forman parte de documento HTML y así aplicarle
estilos CSS de forma conjunta.

 <strong>: Texto en negrita.

 <em>: Texto en cursiva.

 <br>: Inserta un salto de línea dentro de un párrafo. Es una etiqueta vacía.

Además de los atributos específicos de cada etiqueta, existen unos atributos de

carácter general que se pueden aplicar a casi cualquier etiqueta.
 class: Especifica la clase o las clases a las que pertenece el elemento en cuestión. Es
un atributo muy útil a la hora de aplicar un estilo CSS a un conjunto de elementos o
bien para hacer referencia de forma conjunta e interactuar usando JavaScript. Los
valores de este atributo deben comenzar con una letra mayúscula o minúscula
seguido de cualquier letra, número o guiones.
 id: Atributo que se usa para declarar un identificador único para cada elemento.
 style: El valor de este atributo especifica directamente el estilo CSS que se aplicará
al elemento en cuestión. Este valor estará formado por propiedades CSS separadas
por punto y coma.
 title: Atributo que se usa para mostrar información extra acerca del elemento que
lo contiene. Esta información aparecerá como un pequeño mensaje emergente al
situar el ratón sobre el elemento.

Ejemplo:
<div class="clase1" id="texto1" style="border-
color:#FF0000;color:red; font-size:12px" title="Mensaje
emergente"> Esto es un ejemplo </div>