Está en la página 1de 14

Cómo se escribe una página web

1.- Presentación

Las páginas web son documentos electrónicos escritos, con un lenguaje de marcado o etiquetado
llamado HTML. HTML es un lenguaje y como cualquier lenguaje para aprenderlo hace falta tiempo y esfuerzo.

El secreto para aprenderlo es muy simple, practica, practica y práctica. HTML tiene su vocabulario y su gramática.
El vocabulario son las etiquetas que se pueden emplear. La gramática son las reglas que establecen cómo se
deben emplear las etiquetas para escribir un documento.

En esta semana vas a aprender la estructura básica de una página web, lo que se suele conocer como el esqueleto
de una página, además, vas a aprender también a crear listas, para incluir información en una página web de forma
ordenada y vas a aprender lo que quizás, es lo más importante de las páginas web los enlaces o vínculos.

Los enlaces se emplean para crear el hipertexto, la característica principal que define a la web. Las páginas web se
pueden escribir con cualquier editor de textos, no hace falta un programa sofisticado para escribir páginas web, por
ejemplo, en Microsoft Windows, podrías usar el bloc de notas. Sin embargo, esta semana vas a aprender a utilizar
un editor de textos, que posee una serie de características que te ayudarán a escribir las páginas web de una
forma más rápida y con menos errores.

Espero que disfrutes aprendiendo todo lo que hemos preparado para esta semana.
 

2.-  El desarrollo web

En este vídeo que forma parte del curso: Introducción al desarrollo web, te voy a explicar qué es el desarrollo web.

En primer lugar, cuando se habla de desarrollo web, mucha gente lo confunde o lo mezcla con el diseño web. Que
quede claro desde un principio que son actividades distintas, que en un proyecto web deberían ser realizadas por
personas diferentes pero, es muy normal que en proyectos web pequeños, realizados por una o dos personas, el
diseño y el desarrollo web pueden ser realizados por la misma persona.

Este vídeo pertenece al curso Introducción al desarrollo web, por tanto, el contenido de este vídeo se puede
entender también como una explicación del contenido de todo este curso.

Vamos a ver las diferencias que existen entre el diseño y el desarrollo web.

El diseño web se refiere al diseño visual de un sitio web o de una página web y con frecuencia implica el diseño de
los elementos gráficos de la página. En el diseño se tienen en cuenta elementos gráficos como la tipografía, los
colores, los tamaños y las proporciones.

El diseño se suele realizar con una herramienta gráfica como Adobe Photoshop o GIMP y proporciona el marco
para la presentación y el comportamiento de la página. El producto final del diseño web no suele contener código.
El diseño de la página puede ser una simple imagen en formato png, por ejemplo, es utilizado por el mismo
diseñador o por otra persona como base para el código de la página web. El diseño de la página se divide, se
trocea, en partes que se pueden representar mediante código HTML, CSS o se convierten en elementos
puramente gráficos. La persona que realiza el diseño de un sitio web se le suele llamar el diseñador.

Por otro lado, el desarrollo web se refiere a la programación necesaria para construir una aplicación o sitio web. Se
suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor, que funcionan de
forma independiente y emplean tecnologías distintas, aunque muchas veces, también interactúan por lo que
también se habla de programación de la parte cliente-servidor.
Para el desarrollo de la parte cliente, los conocimientos que se necesitan tener son, por un lado, HTML y CSS para
la creación de las páginas web, y por otro lado JavaScript y el DOM, para la programación de la parte cliente.

El desarrollo de la parte servidor se refiere a la programación necesaria para construir el back-end de un sitio. El
back-end en la parte del sitio web que no ven los visitantes de un sitio web pero que es necesario para poder
presentar la información correcta en el formato correcto a los visitantes. En el desarrollo de la parte servidor se
emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusion para acceder a una base de datos
y recuperar la información necesaria para visualizar una página web.

Por tanto, el desarrollo web también cubre el diseño y desarrollo de las bases de datos y como una aplicación web
está al alcance de cualquiera, también es necesario tener en cuenta la correcta seguridad del producto final. La
persona que realiza el desarrollo web se le suele llamar el desarrollador.

El siguiente gráfico extraído de la Wikipedia, resume las principales tecnologías que se han empleado y se
emplean en la actualidad en el desarrollo web. Por un lado, tenemos las tecnologías del lado del cliente entre los
que destacan HTML, CSS y JavaScript, por otro, tenemos las tecnologías del lado del servidor entre las que
destacan CGI, PHP, ASP y JSP. Podemos ver que todas estas tecnologías surgieron a mediados de los años 90 y
su uso continúa hasta la actualidad.

Para comprender un poco más las diferencias que existen entre un diseñador web y un desarrollador web vamos a
ver la siguiente infografía. Esta infografía es una simplificación y en algunos aspectos puede llegar a ser cómica,
pero algunos datos que contiene sí que son interesantes. La parte que se refiere a la forma de vestir y de
comportarse es un poco simplista y no aporta nada interesante, sin embargo, en la segunda parte podemos
encontrar datos que provienen de la oficina de estadísticas de empleo de los Estados Unidos.

Por un lado, destaca el hecho de que hay más puestos de trabajo de desarrollador web que de diseñador web.
Esto concuerda con el sentido común ya que, en un proyecto normal, la fase de desarrollo requiere un mayor
esfuerzo que la fase de diseño, por lo que es necesario una mayor mano de obra.

Por otro lado, destacan los salarios que recibe cada uno, ya que el salario del desarrollador web, casi dobla al del
diseñador web.

La siguiente infografía se vuelven a comparar el diseñador y el desarrollador web. En esta infografía vuelve a
aparecer la comparación del número de puestos de trabajo y del salario medio, pero también se comparan las
aptitudes principales de uno y otro. Un diseñador web necesita intuición, creatividad e imaginación, mientras que un
desarrollador web necesita lógica, pensamiento lineal y técnica.

También es interesante el apartado en el que se hace referencia a los estudios requeridos. Un diseñador gráfico o
diseñador web necesita una titulación en diseño gráfico, bellas artes o producción multimedia, mientras que un
desarrollador web necesita experiencia en programación.

Para finalizar, una infografía (Un sitio web diseñado) en la que se resume el esfuerzo y el tiempo necesario, para el
desarrollo de un sitio web normal. La infografía está disponible en castellano y divide el desarrollo de un sitio web
en las siguientes fases: contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento. Además, se
muestra la interacción del equipo de desarrollo con el cliente. En general, estoy de acuerdo con este gráfico y creo
que puede ayudar a la gente que no sabe qué es el desarrollo web, a entender todo lo que comprende. Sin
embargo, hay un elemento con el que no estoy de acuerdo. Para un sitio web tipo escaparate o de promoción sí
que es normal que la fase de diseño requiera la mayor parte del esfuerzo de creación del sitio web, sin embargo,
en la creación de sitios web que realmente son aplicaciones web, la fase de desarrollo es la que se lleva la mayor
parte del esfuerzo y con mucha diferencia. Por tanto, este gráfico es muy interesante en cuanto a las fases en las
que se puede descomponer la creación de un sitio web y en cuanto a los hitos que se deben de cumplir. Pero el
tiempo y el esfuerzo representados no son muy significativos desde mi punto de vista.

Para finalizar te dejo una pregunta: todas las fases aquí plasmadas son necesarias y si no se realiza una de ellas,
el proyecto de creación de un sitio web fallará pero, si hiciéramos un ejercicio de abstracción y permitiéramos que
una o varias fases no se realizasen, ¿qué fase no se podría eliminar de este diagrama? Es decir, ¿qué fase es
esencial?
Para terminar con este vídeo, me gustaría que vieses este vídeo (Steve Ballmer - Web developers) de Steve
Ballmer, director ejecutivo de Microsoft y su continuación que comprenderás correctamente, si antes has visto el
primer vídeo.

¿Cómo se te ha quedado el cuerpo después de ver estos vídeos?

Aspectos clave
Muchas veces se confunden los términos desarrollo web y diseño web y se piensa que el diseño web incluye el
desarrollo completo de una página web. Y no es así.
El siguiente vídeo aclara la confusión que existe entre diseño web y desarrollo web, explica las características
principales del diseño web, las características principales del desarrollo web, las principales tecnologías que se
emplean en el desarrollo web, y el ciclo de desarrollo de un sitio web (contacto inicial, planificación, contenido,
diseño, desarrollo y lanzamiento).

3. Prototipado: wireframes, mockups y prototipos

Hola mi nombre es Olga Carreras, soy consultora en experiencia de usuario, especializada en usabilidad,
accesibilidad y arquitectura de información y en este vídeo os voy a explicar la importancia de prototipar una
aplicación web, antes de comenzar a implementarla y a recomendar los recursos que os ayuden a plantear con
éxito vuestros propios prototipos.

Soy la autora del blog “Usable y accesible”, donde comparto la experiencia y los conocimientos que he ido
acumulando desde que comencé a participar en desarrollos web en el año noventa y nueve.

Antes de empezar, estas son las direcciones de mi blog y de mi web en las que puedes encontrar información
sobre mí y sobre mi trabajo, así como artículos y recursos relacionados con la experiencia de usuario. Podéis
contactar conmigo a través de mi web o de mi cuenta de Twitter.

La responsabilidad de un arquitecto de información es, tal y como la explica Jesse Garrett en su conocido libro los
elementos de la experiencia de usuario, identificar los objetivos del proyecto y las necesidades de los usuarios,
especificar las funcionalidades y requerimientos de la aplicación web, definir y diseñar los sistemas de navegación,
organización, etiquetado y búsqueda, y finalmente, realizar el prototipado de la aplicación, que es lo que vamos a
tratar en este vídeo. Nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la
información de manera efectiva.

De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comienza a
construirse, los arquitectos de información, nos valemos de la diagramación y el prototipado para especificar cuál
será la organización, estructura, navegación y funcionamiento de la aplicación web. Es decir, al igual que ellos,
realizamos planos y maquetas del sitio antes de que esté comienza a construirse.

Los planos son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de
contenido o flujo o mapa web. Será una constante a lo largo del vídeo que os indique los diferentes nombres que
recibe un mismo tipo de diagramación o maqueta, por diferentes autores los denominan de diferente manera y no
es una terminología que esté claramente asentada todavía.

A la hora de realizar la diagramación de una aplicación web, lo más importante es que sea comprensible y refleje
con claridad la estructura, el flujo de navegación y la relación entre los elementos.

Existen diferentes propuestas para realizar la diagramación de una aplicación web. Un vocabulario muy utilizado y
que os recomiendo conocer es el vocabulario visual para describir arquitectura de información y diseño de
interacción de James Garrett, uno de cuyos libros os recomendaba anteriormente. Garrett es un destacado
arquitecto de información, muy conocido por acuñar el término Ajax, en el año 2005.

El diagrama que veis en pantalla es un ejemplo de diagramación de Garrett de la aplicación web Yahoo Mail. En su
artículo podréis descargar librerías para aplicar su vocabulario con diferentes aplicaciones como PowerPoint o
Visio, pero como he dicho, no es la única propuesta que existe. Lo más importante es que la diagramación sea
clara y comprensible y por ello, es muy recomendable incluir una leyenda con los símbolos utilizados.
Además de estos libros, os recomiendo el artículo "La diagramación en la arquitectura de la información" de Ronda
León, en el recopila diferentes propuestas de vocabularios, entre, ellos el suyo propio.

Las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura,
organización e interacción a nivel de página. Vamos a ver que hay diferentes tipos y qué distinguimos entre
prototipos de baja fidelidad y de alta fidelidad.

En ningún caso se debe incluir diseño gráfico en ningún prototipo, que se realiza en etapas posteriores y que es
algo que es importante aclararle al cliente, cuando se le presenta el prototipo. No se deben utilizar colores, salvo
los estrictamente necesarios y por ello, usamos gamas de grises. Los prototipos de baja fidelidad son dibujos
estáticos, hablamos de sketching cuando realizamos bocetos de forma rápida informal en lápiz y papel para
transmitir una idea o concepto con rapidez y claridad. Es una técnica muy útil en las entrevistas iniciales con el
cliente para comunicar conceptos, proponerle alternativas un problema, durante un brainstorming o en las
reuniones internas con un equipo de trabajo.

Antes de comenzar un prototipo más elaborado, es conveniente comenzar con este tipo de bocetos para trabajar
ágilmente con varias ideas, ir esquematizando las páginas y definir las diferentes zonas de la misma.

Os recomiendo como libro de referencia "Sketching User Experiences" de Bill Buxton. Un wireframe es más
elaborado e incluye el inventariado de contenido, es decir, qué contenido debe de estar presente en cada página.
Los elementos de la misma como cabeceras, enlaces, listas, formularios, etcétera. El etiquetado de los vínculos o
de los títulos, el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la
estrategia de navegación y la priorización de los contenidos dentro de la misma. Wireframe así mismo, debería
incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo debe demostrarse o para
definir su comportamiento funcional.

Cuando tenemos una secuencia de wireframes, hablamos de un storyboard. Los prototipos funcionales son
prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso
interactivo de una o varias tareas. Son prototipos y maquetas dinámicas normalmente en HTML que simulan o
tienen implementadas partes del sistema final a desarrollar, como observamos en este ejemplo.

Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los
usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web. Os recomiendo la lectura
de mi artículo, “Arquitectura de información fundamentos” y el libro “Arquitectura de información entornos web” de
Mario Pérez Montoro Gutiérrez.

La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital. En
primer lugar, el equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. El
cliente además, ve y comprende cómo será la aplicación mucho mejor que si se ofrece descrita en un documento.
El prototipado evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo,
ayuda especificar los requerimientos a detectar inconsistencias o falta de funcionalidad y se convierte en un
complemento de gran valor en el análisis.

En segundo lugar, el prototipo se modifica con facilidad y rapidez. Se evitan así modificaciones posteriores, mucho
más costosas cuando la aplicación ya se está implementando, de modo que se reducen costes y tiempos.

Y, en tercer lugar, también permite realizar pruebas de usabilidad, como test con usuarios en etapas tempranas del
proyecto. De este modo, se detectan y solucionan los problemas antes de comenzar su implementación y el
resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los
usuarios.

Mi experiencia me dice que los beneficios de prototipar una aplicación web justifican con creces el tiempo que se
invierte en él, pues se reducen la medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad
del resultado y la satisfacción del cliente y el usuario final.

Además de las referencias que os he ido dando a lo largo del vídeo, os recomiendo mi artículo “Wireframes”, donde
se incluyen referencias de interés, entre las que os recomiendo el artículo, “Prototipado” de la Fundación Sidar y el
blog “Wireframes”, donde encontráis ejemplos, plantillas, herramientas y otros recursos. También puede seros útil
el glosario de usabilidad y accesibilidad para consultar aspectos terminológicos. Aquí tenéis también otras dos
presentaciones sobre prototipado que os pueden ser de utilidad y dónde podéis ver más ejemplos.

Para terminar, me gustaría daros cinco consejos básicos para realizar un buen prototipo y que se resumen en,
sencillez y claridad, hazlo en blanco y negro, representa los tamaños y proporciones de los bloques de contenido,
ten en cuenta las pautas de usabilidad y accesibilidad y sobre todo diseña para tus usuarios.

En resumen, en este vídeo hemos hablado de la importancia de prototipar una aplicación web, antes de realizar su
diseño gráfico o comenzar su implementación y cómo a su vez, el prototipado no debe comenzarse, sin haber
definido primero los objetivos del sitio, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura
de información de la aplicación web.

Hemos visto que se distingue entre planos y maquetas los planos o blueprints, diagramas de contenido o flujo o
mapa web sirven para mostrar la estructura de la aplicación y su flujo de navegación. Por su parte, las maquetas
son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e
interacción a nivel de página.

Hemos visto también que se distingue entre prototipos de baja fidelidad, que son estáticos y prototipos de alta
fidelidad, que son dinámicos.

Hemos recomendado comenzar con un Sketch, es decir, un boceto rápido informal con lápiz y papel y después, un
Wireframe representará con más detalle la aplicación, incluyendo notas asociadas a los elementos, sobre cómo se
deben mostrar y su comportamiento funcional.

Por último, los prototipos funcionales son maquetas dinámicas, normalmente en HTML, que simulan o tienen
implementadas partes del sistema final a desarrollar. Hemos visto que la terminología es muy variada y no siempre
unívoca, pues todavía no está claramente asentada y por ello, al consultar la bibliografía y las referencias os
recomiendo que nos centréis en aspectos terminológicos, sino en las recomendaciones para realizar buenos
diagramas y prototipos de vuestras aplicaciones web.

Aspectos clave
En el vídeo El desarrollo web se han mostrado las principales fases del desarrollo de un sitio web. En la segunda
fase, "Planificación", aparecían los hitos "Wireframes" y "Revisión Wireframes".
En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla,
aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual
de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de
aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir
el contenido, funcionalidad y comportamiento de un sitio web o de una página web.
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se
explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes
tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una
aplicación o sitio web.

4. Historia de HTML

Si ya has visto las dos partes de la vídeo "Historia de la web: su nacimiento 2", sabrás que Tim Berners-Lee es
considerado el padre de la web porque desarrolló las tres tecnologías fundamentales en las que se basa la
web, HTML Hypertext Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear, para
escribir los documentos o páginas web, URL Uniform Resource Locator, el localizador de recursos uniforme, el
sistema de localización o direccionamiento de los documentos web y HTTP, Hypertext Transfer Protocol, el
protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los
documentos web por Internet.
Lo que nos interesa para este vídeo es que Tim Berners-Lee desarrolló la primera versión del lenguaje HTML. En
este vídeo te voy a explicar la evolución del lenguaje HTML durante sus primeros años. La mejor información sobre
los primeros años del lenguaje HTML, la podemos encontrar en el libro "Raggett on HTML 4", del año 1998.
Afortunadamente, existe una versión online (http://www.w3.org/People/Raggett/book4/ch02.HTML) del capítulo 2 de
este libro, el capítulo que está dedicado a contar la historia de HTML.

Dave Raggett, uno de los autores de este libro, fue el editor de la especificación del lenguaje HTML durante
muchos años, así que, lo que nos cuenta en su libro lo sabe por haber sido protagonista de ello en primera
persona.

Tim Berners-Lee desarrolló el lenguaje HTML a partir de SGML, Standard Generalized Markup Language, un
estándar ISO del año 1986, que se emplea para la organización y etiquetado de textos. El lenguaje XML sirve para
especificar las reglas de etiquetado de documentos y no impone en sí, ningún conjunto de etiquetas en especial,
por tanto, SGML es equivalente al actual XML. Como podemos ver en este ejemplo, un documento creado según
SGML se parece bastante a HTML, o mejor dicho HTML se parece a SGML, ya que SGML es anterior a HTML.

El uso de una pareja de etiquetas para marcar partes del texto en HTML está tomado directamente de SGML, al
igual que ciertas etiquetas como p, los encabezados h1, h2 etcétera, o las etiquetas de lista como ol, ul y li, que
eran muy comunes en lenguajes creados a partir de SGML. Sin embargo, lo que SGML no incluía y sí que es una
invención propia de Tim Berners-Lee, es la etiqueta a con el enlace href para los enlaces o hipervínculos.

Recordemos que en noviembre de 1990, se suele fijar como el nacimiento de la web. Tim Berners-Lee publicó su
primer sitio web y realizó la primera conexión desde un navegador mientras trabajaba en CERN, el Laboratorio
Europeo de Investigación en Física de Partículas en Suiza.

Voy a emplear el siguiente diagrama para seguir la evolución del lenguaje HTML. En la parte superior se muestra la
evolución del lenguaje HTML, mientras que en la parte inferior, se muestra la evolución de los navegadores más
populares, por ahora nos vamos a fijar en los primeros años del lenguaje HTML, hasta la publicación de la versión
4.

Las primeras versiones de HTML no fueron estandarizadas, en parte, porque su uso no estaba muy extendido, así
que no era necesaria una estandarización formal. El primer intento de estandarización lo encontramos en el
borrador Hypertext Markup Language de junio de 1993, escrito por Tim Berners-Lee y Daniel Connolly, Este
documento se considera la primera versión del lenguaje HTML, la 1.0.

Daniel Connolly desarrolló el primer DTD de HTML, como podemos leer en este mensaje de junio de 1992. Esta
primera versión de HTML no disponía de algunos elementos que son imprescindibles hoy en día en las páginas
web, como las tablas y los formularios, y por otro lado, permitía crear documentos que hoy en día no son válidos,
como este ejemplo en el que no aparece, ni la etiqueta head, ni la etiqueta body y la etiqueta title, está escrita al
mismo nivel que el resto del contenido de la página.

En julio de 1993, se comenzó a trabajar en la especificación de la siguiente versión de HTML, que dio lugar
a HTML Plus, en noviembre de 1993, que nunca llegó a estandarizarse. HTML Plus estaba compuesto de
encabezados, párrafos, listas, figuras, tablas, formularios, texto preformateado y fórmulas matemáticas. La principal
novedad de HTMLPlus es que incorporaba por primera vez las tablas y los formularios. Por cierto, si se revisa el
documento de HTML Plus, se pueden encontrar algunas cosas curiosas, como la propuesta de la etiqueta FIG, con
la etiqueta CAPTION, para definir figuras. Y, ¿por qué es curioso? Muy sencillo, estas dos etiquetas finalmente no
formaron parte del estándar de HTML, sin embargo, en HTML5, la nueva versión de HTML, incorpora como
novedades las etiquetas figure y Freak caption, que son muy parecidas a cig y caption.

Otra curiosidad de HTML Plus, es que incorporaba la posibilidad de definir ecuaciones matemáticas en HTML. Esta
característica al final no se incluyó en HTML, pero dio lugar a un lenguaje totalmente independiente, llamado
MathML, que ya va por la tercera versión.

Quizás te estés preguntando, ¿llegó a existir un navegador que aceptase las nuevas etiquetas de HTML Plus? Sí,
por supuesto, se llamaba Arena y era un navegador desarrollado como prueba de concepto para mostrar las
nuevas posibilidades de HTML.
En octubre de 1994, se funda el W3C el World Wide Web Consortium, que a partir de entonces se encargará del
desarrollo de las tecnologías que mueven la web.

Y por fin, llegamos a noviembre de 1995, cuando se publica HTML 2.0, la primera versión de HTML que fue
realmente un estándar. Een concreto fue un request for comments, aún no era una recomendación del W3C.
Mientras tanto empezó a fraguarse la primera guerra de los navegadores entre Microsoft y Netscape.

Un elemento de esta guerra fue la inclusión de ciertas características especiales en los navegadores para
distinguirlos de la competencia. Así por ejemplo Netscape inventó la etiqueta blink, mientras que Microsoft inventó
la etiqueta marquee. Ambas etiquetas no han formado parte del estándar en ningún momento y no se deben
emplear.

En enero de 1997, se publicó a HTML 3.2, la primera versión estandarizada por el W3C y en diciembre de 1999, se
publicó la última revisión HTML 4.01.

¿Qué pasó a continuación? El W3C abandonó el desarrollo de HTML y concentró todos sus esfuerzos en el
desarrollo de XML, un metalenguaje que define unas reglas para definir otros lenguajes. En enero de 2000, se
publicó XHTML 1.0, una reformulación de HTML 4, utilizando como base XML 1.0. XHTML 1.0 era
como HTML 4.01, tenía las mismas etiquetas, pero imponía unas reglas más estrictas para que los documentos
fueran válidos. Y una revisión de XHTML 1.0 fue publicada en agosto de 2002, sin embargo, XHTML no triunfó y la
gente seguía usando HTML, ¿por qué? Seguramente porque XHTML era muy estricto y la gente no estaba
preparada para ello.

Así que, en el año 2004, un grupo llamado WHATWG y formado por Apple, Mozilla y Opera se forma y comienza el
desarrollo de una HTML más cercano a la gente. El W3C rectifica, cancela el desarrollo de XHTML y se une a
WHATWG para desarrollar HTML5.

Si quieres saber más sobre el nacimiento de HTML5 y cómo fue que el W3C canceló el desarrollo de XHTML y ya
por último si quieres leer alguna cosa más sobre la historia del lenguaje HTML, por ejemplo, para contrastar todo lo
que te he contado aquí, te recomiendo estas dos lecturas:

W3C; The Basics of HTML - The History of JTML WHATWG HTML: 1.5 History

Aspectos clave
El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.
En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros
lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de
XHTML y apostó por HTML5.

5. HTML: conceptos básicos (parte 1)

6. HTML: conceptos básicos (parte 2)

Recuerda que con el lenguaje HTML solo se describe la estructura y el contenido que puede ser texto, imágenes,
vídeos y otros componentes de las páginas web, con HTML no se define la presentación visual de las páginas web.

En la primera parte de este video tutorial vimos la sintaxis del elemento, el componente básico de una página web.
Una página web está compuesta por un conjunto de elementos escritos en un orden concreto. Recuerda que un
elemento se compone de una etiqueta inicial o de apertura y una etiqueta final o de cierre. Con todas las etiquetas
que vimos en la primera parte de este video tutorial ya podemos hacer páginas web sencillas, pero atención, lo que
vamos a ver a continuación es una simplificación, para que sea más fácil de entender. En otro vídeo veremos
detalles adicionales que son necesarios para que una página web sea realmente correcta.

Para escribir el código de una página web, es decir, para escribir el código HTML no necesitas ningún programa
especial. En este vídeo vamos a empezar a usar el bloc de notas, vamos a hacer la primera página web con el bloc
de notas. Recuerda que la etiqueta principal de una página web es la etiqueta HTML. La etiqueta HTML debe de
encerrar todo el contenido de la página web. A mí me gusta, cuando escribo el código HTML, escribir cuando
escribo la etiqueta de inicio, escribo automáticamente la etiqueta de cierre, así no se me olvida, no es obligatorio,
pero es un consejo que te doy.

A continuación, dentro de la etiqueta HTML, dentro de la página web, la siguiente parte, la primera parte es la
cabecera la sección head. La sección head recuerda que se escribe información, los metadatos que definen cómo
se va a procesar la página web, cómo se va a visualizar, pero normalmente en el head, no se escribe nada que
deba de aparecer visualmente en la página web. Por ahora lo único que sabemos escribir es la etiqueta title, que es
el título de la página web. Le voy a poner de título, "Érase una vez HTML" y recuerda, si hemos abierto la etiqueta
title, debemos de cerrarla. Después del head, tenemos el apartado body, el cuerpo de la página. Todo lo que
escribamos aquí en el body, sí que se va a ver, se va a pintar en la página web. En el body podemos emplear las
etiquetas de encabezados o títulos h1, h2, h3, las de párrafo, la etiqueta p y las otras dos etiquetas strong y em que
vimos en el vídeo tutorial anterior.

En primer lugar, voy a escribir un título, h1, el título principal de mi página, que voy a repetir el mismo título que he
escrito aquí. Esto no es obligatorio, el título de la h1 no tiene por qué coincidir con el título de toda la página, pero sí
que suele ser lo normal. Y a continuación, después del título principal, después del h1, voy a tener el título del
primer capítulo, por llamarlo así, de esta página y para ello voy a emplear el título de nivel 2, el h2, y vamos a tener
un primer capítulo, un primer apartado, que he llamado "El padre".

En "El padre", dentro de este apartado, tenemos un primer párrafo, en el que escribimos, "El padre de la web Tim
Berners-Lee, es también el padre del lenguaje HTML" y a continuación, cierro el párrafo.

Algunas indicaciones sobre el formato. En HTML podríamos todo el documento escribirlo en una sola línea, yo
podría escribir mi código así y visualmente obtendría el mismo resultado, no habría ningún cambio, lo que ocurre es
que, normalmente el código se separa tal como lo estoy haciendo yo, para que sea más fácil de leer, pero como
digo, no es obligatorio.

Otra cosa que se suele hacer es separar a veces el código del margen izquierdo con unos espacios en blanco,
como acabo de hacer, o con el tabulador. Esto tampoco influye en la visualización de la página, es simplemente
una cuestión de estilo personal, según el autor, según el desarrollador web, cada uno tiene su propio estilo. Y a
continuación, coloco, escribo otro título, "La estandarización" que, a su vez va a tener un párrafo, "El
lenguaje HTML está estandarizado por el W3C, el World Wide Web Consortium".

Yo esta página ya la podría almacenar, la voy a almacenar aquí, en esta carpeta, "Idesweb", que tengo en mi
escritorio, Guardar como, busco la carpeta en el escritorio y le voy a poner un nombre, esta va a ser mi primera
página, por ejemplo, le pongo "Página 1.HTML", la extensión de las páginas web es HTML o HTM y muy importante
aquí en el bloc de notas, debemos que cambiar el tipo, por defecto nos intenta almacenar los ficheros en formato
texto, documentos de texto, con la extensión .txt, y para que nos respete la extensión .HTML, debemos de
cambiarlo a todos los archivos. Esto recuerda lo bien, porque si usas el bloc de notas se te olvidará más de una vez
y se guardará el fichero con formato .txt y luego no se verá bien. Y luego, esta lista desplegable, Codificación, es
muy importante. Tenemos distintos tipos de codificación, es muy importante, pero también complejo de entender,
esto te lo explicaré más adelante, en otro vídeo tutorial, por ahora lo puedes dejar en el valor por defecto, ANSI o lo
puedes cambiar al valor que le recomendaré en el futuro, que es el UTF 8, así que lo podríamos ya cambiar a UTF
8. Lo guardamos y ya tenemos nuestra primera página.

Si nos vamos a la carta donde lo guardado tengo un fichero "Página 1.HTML" que podemos ver que aparece con el
icono de Google Chrome. ¿Por qué aparece con ese icono? Pues porque es el navegador que tengo configurado
por defecto en mi sistema operativo. Le damos a abrir y ya se abre la página y aquí vemos un fallo. Estoy viendo un
fallo, porque este texto, que es un párrafo, debería de aparecer así, sin embargo, aparece con el mismo formato
que este título, que es un h2.

¿Qué está pasando aquí? Si nos vamos a ver el código fuente veremos que he cometido un error: este h2, aquí no
está cerrado, ha habido un problema en algún momento y el párrafo tampoco lo he cerrado, se ve que me ha ido a
la línea de arriba y he cometido un error. Como no estaba cerrado, ¿qué ocurría? El h2 empezaba aquí y
continuaba, continuaba y este párrafo también se le aplicaba el h2, y por eso, salía con el mismo formato visual. Si
ahora le damos a recargar la página, veremos que ya se ha arreglado.
¿Qué más cosas podríamos hacer aquí? Podríamos usar las etiquetas strong y em, que hemos visto en el vídeo
tutorial, por ejemplo, "Tim Berners-Lee" lo podría etiquetar o marcar con strong y el "Word Wide Web Consortium"
lo podría etiquetar con em, de enfatizado. Lo guardo, recargo y vemos que efectivamente "Tim Berners-Lee"
aparece destacado en negrita y "World Wide Web" también aparece destacado, pero en este caso, en cursiva.
Estos dos estilos visuales, negrita y cursiva, son los estilos por defecto que aplica el navegador, pero más adelante,
cuando lleguemos a las hojas de estilo en cascada, a CSS, veremos cómo esto lo podemos cambiar. Por ahora, no
nos tenemos que preocupar por el formato con el que aparece.

Vamos a ver cómo se ve la página con otro navegador. Yo tengo instalados varios navegadores y podemos abrir
esta página con otro navegador, en Windows. Nos vamos al menú Abrir con y yo podría seleccionar otro
navegador, por ejemplo, voy a abrirlo con Internet Explorer, a ver si se abre, aquí lo tenemos, y vemos que el
aspecto es muy parecido a como veíamos con Google Chrome, no nos debería de sorprender, se debe de ver
exactamente igual. Ahí está digamos la gracia de la web y del lenguaje HTML, que se pueda ver igual en distintas
plataformas, en distintos sistemas operativos.

Ahora, te animo a que escribas tu primera página web por ti mismo. Puede ser esta que yo he hecho o puedes
intentar escribir una más complicada. Para esta primera página he usado un editor sencillo, en el bloc de notas. En
la próxima parte de este video tutorial, voy a usar un programa más potente.

Aspectos clave
En el siguiente vídeo se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows. ¿A
que nunca hubieses imaginado que con el humilde Bloc de Notas se podían crear páginas web?
7. HTML: conceptos básicos (parte 3)

En la parte anterior de este vídeo tutorial hemos creado una página web sencilla con el editor de textos, bloc de
notas, del sistema operativo Microsoft Windows.

En este vídeo vamos a usar un editor más potente, Notepad Plus Plus, para seguir editando nuestra página web.

Notepad Plus Plus es un editor de textos gratuito para los sistemas operativos Microsoft Windows que se distribuye
bajo licencia GPL. Notepad Plus Plus, lo puedes descargar desde su sitio web en diferentes formatos, incluso te
puedes descargar el código fuente, por si te atreves a modificarlo.

Es muy ligero y rápido y dispone de interesantes características, como Sintax highlight, opción que colorea la
sintaxis del código que escribimos, la opción de Autocompletar etiquetas o el soporte de diferentes juegos de
caracteres, incluyendo Unicode. Además Notepad Plus Plus, dispone de un gran conjunto de plugins, que amplía
sus funciones.

Vamos a continuar con la página web, que hicimos en el vídeo tutorial anterior y la vamos a usar de ejemplo, para
aprender a trabajar con Notepad Plus Plus. Una vez que tengas instalado este programa en tu sistema operativo,
cuando selecciones un fichero cualquiera y pulses el botón derecho del ratón, te aparecerá una opción, edit with
Notepad Plus Plus, que te permite abrir rápidamente un fichero en Notepad Plus Plus.

Aquí tenemos la página web que hicimos en el vídeo tutorial anterior y vamos a añadirle algo más, por ejemplo,
aquí, a continuación de HTML, vamos a escribir "Hypertext, Markup Language" y lo voy a etiquetar con la etiqueta
em, de énfasis. Cuando yo empiece a escribir la etiqueta em y la cierro, automáticamente este programa me
escribe la etiqueta final o de cierre, que yo puedo cortarla y colocarla fácilmente al final del texto que quiero
etiquetar. Esta opción está disponible en Notepad Plus Plus, si tenemos instalado el plugin text fx, en concreto, esta
opción, la de cerrar automáticamente las etiquetas, la tenemos disponible en el menú text fx, settings, la opción
auto close, XHTML/XML tag, si yo la desactivo, cuando ahora escriba una etiqueta nueva, como vemos, no se
cierra, la tengo que cerrar yo manualmente, sin embargo, si la vuelvo a activar text fx, settings, auto close, ahora
escribo un párrafo y se cierra automáticamente.

Vamos a escribir algo más en la página web, "La versión actual de HTML es la 5, aunque no está completada" y
"Se espera que esté terminada en el año 2014". Voy a etiquetar al "año 2014", lo voy a destacar con la etiqueta
strong. Otra opción que tiene este programa es pulsar la opción Control + y me sale una lista para autocompletar la
etiqueta. Como yo he escrito str, se me va a la lista de etiquetas HTML y a la lista de atributos, a la posición str, y
ya me aparece la etiqueta strong, que la puedo seleccionar, se me cierra automáticamente, la corto y la pego a
continuación.

Como vemos es muy potente y estas opciones ayudan bastante. Otra opción muy interesante es el emparejamiento
de etiquetas: yo puedo seleccionar una etiqueta, por ejemplo, este párrafo y me marca, me selecciona dónde está
la etiqueta de cierre correspondiente, o aquí esta etiqueta strong, se cierra en esta posición, y también puedo, si así
lo deseo, cerrar ciertas partes de la página, por ejemplo, aquí yo podría cerrar el body y podría también cerrar el
head. Podría dejar solamente HTML o voy abriendo, voy desplegando las distintas partes de la página, que
necesite.

Por supuesto, tenemos también opciones típicas de cualquier editor como es, numerar las líneas del código y aquí
abajo en la barra de estado inferior, tenemos la longitud del fichero, cuántas líneas tiene y en qué posición actual
se encuentra el cursor. Muy importantes son estos dos valores que vemos aquí abajo, 2 windows, esto me indica el
formato de los saltos de línea, esto yo lo puedo modificar en cualquier momento, en el menú editar, conversión fin
de línea, puedo convertir a otros formatos, como este fichero está en formato 2\Windows, lo puedo convertir a
formato Unix o a formato Macintosh y muy importante, también es la opción, el valor que vemos aquí UTF 8, me
indica el juego de caracteres del fichero. Esto lo puedo cambiar a través del menú codificación, puedo convertir el
fichero a otros formatos, pero esto ya lo veremos más adelante en otro vídeo sobre el juego de caracteres.
Para finalizar. Puedo lanzar, puedo ver esta página web en un navegador y lanzarla directamente desde Notepad
Plus Plus. Para ello me voy al menú Ejecutar, realmente no vamos a ejecutar la página, esto no es código, pero lo
que vamos a hacer es lanzar la página, que se cargue automáticamente, que se visualice en un navegador. Aquí
nos aparecen los navegadores más usuales, que, por supuesto, para usar estas opciones debemos de tener estos
navegadores instalados en nuestro sistema operativo. Por ejemplo, voy a lanzar esta página, voy a ver cómo se ve
en Chrome. Simplemente selecciona aquí, espero unos segundos y se me abre la página en el navegador Google
Chrome, y podemos ver el texto que yo he añadido, y como aparece aquí, enfatizado este texto, y este texto en
negrita, porque en mi código yo he marcado Hypertext Markup Language, lo he marcado con la etiqueta em, y año
2014, lo he marcado, lo etiquetado con la etiqueta strong.

Y con esto finaliza este vídeo en el que hemos visto cómo editar una página web con el programa Notepad Plus
Plus. Hemos visto algunas características interesantes que nos ayudan a escribir el código HTML, como el
coloreado era sintaxis, el cierre automático de las etiquetas, la opción de autocompletar las etiquetas y los atributos
y el emparejamiento de la etiqueta inicial con la etiqueta final.

Aspectos clave
En el siguiente vídeo se explica la creación de una página sencilla con Notepad++, un editor que posee ciertas
características que ayudan a la escritura de HTML.

8. HTML: conceptos básicos (parte 4)

En las tres partes anteriores de este vídeo tutorial sobre los conceptos básicos de HTML hemos visto algunos
aspectos de su vocabulario, es decir, de las palabras que forman el lenguaje y de su gramática, es decir, sus reglas
que nos indican cómo podemos combinar sus palabras, su vocabulario para formar de estos complejos.

Respecto al vocabulario, por ahora, solo conocemos estas etiquetas. Respecto a la gramática, vamos a repasar las
principales reglas que debes de tener en cuenta.

Muy importante, en HTML 5 algunas de estas reglas se han relajado y ya no es necesario aplicarlas pero, yo te
aconsejo, que las sigas aplicando, ya que unas veces tendrás que escribir o mantener páginas web desarrolladas
con HTML 4, XHTML 1 o HTML 5. Así que, para que no te líes, te voy a dar las reglas que siempre son válidas en
las tres versiones.

En primer lugar, las etiquetas siempre se tienen que cerrar, por ejemplo, este fragmento de HTML es incorrecto
porque la etiqueta strong y la etiqueta p no están cerradas.

Este otro fragmento es correcto porque todas las etiquetas están correctamente cerradas.

Los elementos anidados deben tener un correcto orden de apertura-cierre, el que se abre último, debe cerrarse
primero. Este fragmento de HTML es incorrecto, porque la etiqueta p, se ha abierto antes que la etiqueta strong,
por lo que la etiqueta p, se debe cerrar después que la etiqueta strong, no antes.

Este fragmento, este segundo fragmento si quieres correcto, los elementos p y strong están correctamente
anidados.

Por otro lado, según la versión de HTML que se utilice, las etiquetas se pueden escribir en mayúsculas y
minúsculas o solo en minúsculas, yo te recomiendo escribir las etiquetas siempre en minúsculas, aunque se
puedan escribir en mayúsculas. Los valores de los atributos deben siempre ir encerrados entre comillas simples o
dobles. En alguna versión de HTML los valores de los atributos se pueden escribir sin comillas, sin embargo, esto
es incorrecto en otras versiones, por lo que siempre hay que encerrar los valores de los atributos entre comillas
dobles o comillas simples.

Para los nombres de los ficheros de las páginas web, lo mejor es que te limites a utilizar las letras del alfabeto
inglés, números, el guión y el guión bajo. Sí, se pueden usar más caracteres, pero te pueden dar problemas en
algunas situaciones y la extensión de las páginas web es .htm o .html.
Ahora te propongo que veas el vídeo, "Errores web: El título de la página", de poco más de cuatro minutos de
duración. En este vídeo te explico para qué se usa el título la etiqueta title de una página web, y te muestro algunos
errores típicos que se cometen en muchos sitios web. También, te recomiendo que leas el artículo dedicado al
lenguaje HTML ("HTML"), que puedes encontrar en la Wikipedia, con lo visto en estos vídeos, no deberías tener
problemas para entender la mayor parte de lo que se cuenta en este artículo. También te recomiendo que leas el
"HTML/training" que ofrece el W3C.Hemos visto muy poco de HTML, veremos más cosas en otros vídeos, pero,
puedes intentar aprender algo más por tu cuenta. Este sitio web está en inglés, pero algunos de los materiales, los
podemos encontrar traducidos al español. Por supuesto, recuerda el sitio web "w3schools, en este sitio puedes
encontrar un apartado de tutoriales, consulta el tutorial sobre HTML, al menos, el apartado sobre conceptos
básicos.

En la página del W3C puedes encontrar mucha información sobre HTML pero, recuerda, es un sitio web dirigido a
profesionales y expertos, no para principiantes. Puedes consultar la especificación oficial de HTML 5, que, por
ahora, es un documento de trabajo y no estará completada hasta el año 2014 por lo que puede sufrir numerosos
cambios de aquí a entonces.

En la especificación de HTML 5 puedes consultar la lista de elementos organizados por categoría o la lista
alfabética de los elementos y la lista alfabética de los atributos, no te tienes que aprender estas listas de memoria,
por supuesto, solo tienes que intentar que te suenen algunos de los nombres de los elementos y de los atributos y
saber dónde encontrar estas listas para volver a ellas cuando las necesites.

Ahora te propongo dos ejercicios. Primero, te propongo que aprendas por ti mismo las etiquetas de HTML que son
necesarias para crear listas no numeradas y numeradas. A continuación, intenta hacer una página web que sea tu
currículum, puede tener una apariencia similar a este ejemplo que te muestro. Normalmente cuando explico lo que
hemos visto en este vídeo tutorial, lo primero que me preguntan los alumnos, a continuación, es:

 ¿Cómo le cambió el color, el tamaño o el tipo de letra al texto?

Por ahora, no podemos, recuerda que HTML solo define la estructura y el contenido de las páginas web, no la
presentación. Paciencia, eso lo haremos cuando lleguemos al tema de CSS, las hojas de estilo en cascada que
nos permitirán definir la presentación de nuestras páginas web.

Aspectos clave
En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:

 Etiquetas siempre cerradas.


 Documentos bien formados.
 Etiquetas en minúsculas.
 Valores de los atributos siempre entre comillas.

También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.
9. HTML: listas (1)

10. HTML: enlaces

11. HTML: problemas con los editores

12. HTML: tres errores típicos


13. [A+] Prototipos visuales de alta fidelidad