Índice

Introducción.............................................................................3

Historia de HTML.....................................................................4

Versiones de HTML.................................................................6

¿Qué son las páginas web y los sitios web?...........................7

¿Qué es CSS y para qué sirve?..............................................8

Ejemplos de CSS...................................................................10

Conclusión.............................................................................13

Bibliografía.............................................................................14

Introducción

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), es un lenguaje de programación para la elaboración de páginas web, basado en el uso de etiquetas encerradas por corchetes angulares (<>) el cual se utiliza para traducir la estructura y la información en forma de texto, con la posibilidad de agregar objetos como imágenes, videos etc. Se ha convertido en el lenguaje de marca más importante a día de hoy, gracias al crecimiento de Internet, la necesidad de ofrecer servicios remotamente y en definitiva, la necesidad de poder ofrecer fácilmente información de una forma elegante y sin morir en el intento. En la actualidad el HTML es complementado por otras tecnologías como las Hojas de Estilo en Cascada (CSS), el JavaScript entre otras.

Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

2

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.

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

3

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 oficial se publicó el 22 de enero de 2008. Debido a la fuerza 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.

4

Versiones de HTML

El primero en salir fue el HTML 1, sin embargo no fue considerado un estándar, por lo que muchas veces se considera al HTML 2 como la primera versión del HTML.

HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional.

HTML 3.2: Esta versión se lanzó en el año de 1997 gracias al organismo de estandarización llamado W3C (World Wide Web Consortium). El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0: Lanzada en 1998. 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.

HTML 4.01: salió a la luz en 1999 como una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

HTML 5: quinta revisión importante del lenguaje básico de la World Wide Web, el cual especifica dos variantes de sintaxis para HTML: el clásico HTML (text/html), y la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estándar aun no es tan utilizado pero su potencial es mucho mayor a las versiones anteriores, el cual incluye interesantes mejoras como nuevos elementos y etiquetas.

5

¿Qué son las páginas web y los sitios web?

Los sitios web, también llamados sites en inglés, son lugares dentro de la Web con una dirección única e irrepetible, a los que podemos acceder en busca de información.

Están formados por una o varias páginas Web entre sí por hipervínculos, y cuentan con una página Web principal llamada home page o Portal, que, dicho en otras palabras, es la puerta de entrada al sitio, en donde se exponen los contenidos principales del mismo.

Los sitios de internet son de las más diversas clases, así podemos encontrar sitios de comercio, deportes, finanzas, literatura, espectáculos, educación, o bien para realizar compras, entre otros servicios.

Como medio, los sitios web son similares a las películas, a la televisión o a las revistas, en que también crean y manipulan imágenes digitales y texto, pero un sitio web es también un medio de comunicación. La diferencia principal entre un sitio web y los medios tradicionales es que un sitio web está en una red de ordenadores (Internet) y está codificado de manera que permite que los usuarios interactúen con él. Una vez en un sitio web, puedes realizar compras, búsquedas, enviar mensajes, y otras actividades interactivas.

Diferencia entre sitio web y página web

A veces se utiliza erróneamente el término página web para referirse a sitio web. Una página web es parte de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados páginas web.

Si lo comparáramos con un libro, un sitio web sería el libro entero y una página web de ese sitio web sería un capítulo de ese libro. El título del libro sería el nombre del dominio del sitio web. Un capítulo, al igual que una página web, tiene un nombre que lo define. Decimos que sería un capítulo y no una página del libro porque a menudo es necesario desplazarse hacia bajo en la pantalla para ver todo el contenido de una página web, al igual que en un libro te desplazas a través de varias páginas para ver todo el contenido de un capítulo. El índice de los capítulos del libro sería el equivalente al mapa del sitio web (sitemap en inglés).

6

¿Qué es CSS y para qué sirve?

CSS son las siglas en inglés de Cascading Style Sheets, que en castellano significa hojas de estilo en cascada.

CSS es un lenguaje que funciona junto con HTML, el cual nos permite controlar el diseño y la estética de nuestro sitio web editando unas pocas líneas de código. De esta manera podremos por ejemplo cambiar el tamaño y color del texto, establecer márgenes e interlineados, trabajar con imágenes, colocar con precisión elementos dentro de una página web y mucho más.

Si estás interesado en aprender CSS es importante que tengas por lo menos unos conocimientos básicos de HTML.

¿Necesito algún programa?

Al igual que con otros lenguajes de programación web, lo único que necesitas para trabajar con CSS es un programa editor de texto simple, como por ejemplo el Bloc de notas de Windows o su equivalente en otro sistema operativo (Gedit - Linux o TextEdit - Mac).

La información de estilo CSS (llamada también hoja de estilos o código css) puede guardarse en el mismo documento al que se quiere aplicar o en un archivo aparte con la extensión .css (ejemplo.css).

¿Cómo funciona CSS?

La sintaxis de CSS es bastante sencilla, ya que utiliza algunas palabras del inglés para nombrar a sus electores, atributos y valores.

Selectores: Con selectores nos referimos a los elemento a los que se le aplica CSS, por ejemplo un párrafo (etiqueta HTML <p>).

Atributos: Los atributos son las propiedades de dicho elemento. Por ejemplo el color, el tamaño, el grosor, etc. Si quisiéramos cambiar el color de un párrafo, seleccionaríamos el atributo color y elegiríamos el color que quisiéramos (rojo, azul, verde, etc.).

Valores: Con valores nos refierimos a las características del atributo. Siguiendo con el ejemplo del párrafo, red (rojo) sería el valor del atributo color.

p {color: red;} = Selector {atributo: valor;}

o también <p style="color: red;">párrafo</p>

Selector = p (Selecciona las etiquetas HTML <p> = párrafo)

7

Atributo = color

Valor = red

Fíjate que el atributo y el valor están separados con dos puntos (:) y llevan un punto y coma al final (;). A su vez ambos están rodeados por llaves ({}).

Formas de usar CSS

El CSS puede aplicarse de tres formas diferentes: en línea, en un hoja de estilos interna o en una hoja de estilos externa.

1. CSS en línea (inline):

Se trata de insertar el CSS directamente dentro de una etiqueta HTML, o sea en la misma línea.

Esta forma no es la más adecuada, porque si tuviéramos que aplicar CSS en línea a cada elemento de la página el código sería demasiado largo. Esta forma de aplicar estilos es recomendable usarla solamente para dar formato a un elemento específico, por ejemplo si quieres cambiar el estilo de un único párrafo en todo el sitio web.

2. Hoja de estilos interna:

En el caso de una hoja de estilos internas, agregamos el CSS en el mismo archivo al que queremos aplicarlo, pero entre las etiquetas <style type="text/css"> </style> y a su vez dentro de las etiquetas <head></head>.

La letra "a" representa a los enlaces (etiqueta HTML <a>) y quiere decir que el CSS se aplicará a esa etiqueta HTML. Este ejemplo agregaría a los enlaces un color azul, una fuente tipo arial y un subrayado. Si este código CSS lo escribiéramos en la página de contactos (contactos.html), afectaría solamente a la página de contactos.

3. Hojas de estilo externas:

Cuando utilizamos una hoja de estilos externa, debemos guardar el código CSS en un archivo aparte con la extensión .css (estilos.css). Esta hoja de estilos podemos aplicarla a todas las páginas de nuestro sitio web y así controlar el diseño desde un único archivo CSS. Para que esto funcione, debemos enlazar las páginas a las que queremos aplicar el CSS (index.html, contacto.html, etc.) al archivo CSS que contiene los estilos (estilos.css). El enlace deberíamos agregarlo entre las etiquetas <head></head>.

8

Ejemplos de CSS

Las tres formas más conocidas de dar estilo a un documento son las siguientes:

-Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

<html>

<head>

<title>Título</title>

<link rel="stylesheet" type="text/css"

href="http://www.w3.org/css/officeFloats.css" />

</head>

<body>

.

.

.

.

</body>

</html>

-Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

<html>

<head>

<title>hoja de estilo interna</title>

<style type="text/css">

9

body {

padding-left: 11em;

font-family: Georgia, "Times New Roman", serif;

color: red;

background-color: #d8da3d;

}

h1 {

font-family: Helvetica, Geneva, Arial, sans-serif;

}

</style>

</head>

<body>

<h1>Aquí se aplicará el estilo de letra para el Título</h1>

</body>

</html>

-Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

Algunas normas básicas a la hora de crear una CSS son las siguientes:

En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:

h1, h2, h3 {

color: red;

}

o lo que es lo mismo

10

h1 {color: red;}

h2 {color: red;}

h3 {color: red;}

La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.

p {text-align:center;color:red}

Normalmente se describe una propiedad por línea, de la siguiente manera:

h1 {

padding-left: 11em;

font-family: Georgia, "Times New Roman",Times, serif;

color: red;

background-color: #d8da3d;

}

El valor, en este caso red, establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.

p {font-family: "sans serif";}

11

Conclusión

El código HTML revolucionó el internet, permitiendo compartir información de manera eficaz. El auge del Flash ha pasado, y hemos vuelto a las bases: el código HTML. En la actualidad todos navegan en la WEB por lo que saber cómo funcionan los sitios web e incluso poder editar o hacer uno utilizando códigos es o se convertirá una herramienta muy útil para nosotros pues nos permitirá compartir información con todo el mundo aunque sea de una forma muy básica porque aunque los códigos HTML no comprendan toda la página son la esencia de la misma.

12

Bibliografía

-Romero Gómez, Antonio. Computación Creativa I. México D.F. Editorial Éxodo, 2014.

-LIBROSWE: Introducción a XTHML [en línea].2015. [Consulta: 1 abril 2015]. Disponible en: http://librosweb.es/libro/xhtml/capitulo_1.html

- Ernesto Castrejón. WebAdictos: Breve Historia del HTML [en línea]. 2012. [Consulta: 1 abril 2015]. Disponible en: http://webadictos.com/2012/12/30/breve-historia-del-html/

-MASADELANTE: ¿Cuál es la diferencia entre un sitio y una página web? - Definición de Sitio web y Página web [en línea]. [Consulta: 1 abril 2015]. Disponible en: http://www.masadelante.com/faqs/sitio-web

-Maquetar Web: ¿Qué es CSS y para que sirve? [en línea]. [Consulta: 1 abril 2015]. Disponible en: http://www.maquetarweb.com/2013/01/que-es-css-y-para-que-sirve.html

- W3C: Guía Breve de CSS [en línea]. [Consulta: 1 abril 2015]. Disponible en: http://www.w3c.es/Divulgacion/GuiasBreves/ejemplos/CSS/EjemploCSS1

13