PDF de programación - HTML

HTML

Escuela Técnica Superior de Ingeniería de Telecomunicación

Universidad Rey Juan Carlos

gsyc-profes (arroba) gsyc.urjc.es

Febrero de 2018

GSyC - 2018

HTML

1

GSyC - 2018

HTML

2

©2018 GSyC
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0

Introducción a HTML (1)

Introducción a HTML

HTML Hypertext Markup Language es un lenguaje de
marcado, inicialmente se usa para que navegadores web
compongan páginas con diverso contenido: texto, enlaces,
imágenes, audio, vídeo, etc. Páginas estáticas: se editaban
generalmente a mano
El éxito de internet y HTML como interfaz de usuario hace
que a finales de los años 1990 aparezcan tecnologías que
permiten páginas web dinámicas: CGI, PHP, ASP...
En 1995, JavaScript permite programar scripts en el
navegador web, típicamente para componer código HTML
Muy importante: no confundir HTML con HTTP

GSyC - 2018

HTML

3

Introducción a HTML (2)

Introducción a HTML

A mediados de los años 2000 se desarrolla una nueva
generación de herramientas para facilitar la programación de
aplicaciones web: Ruby on Rails, Django...
En esta misma época, año 2005, la aparición de AJAX
permite que las aplicaciones web comiencen a semejarse a las
aplicaciones de escritorio
A principios de la década de 2010, la madurez de las
tecnologías web hace que empiecen a usarse también fuera del
navegador. JavaScript everywhere. Nodejs. HTML como
plataforma para interfaz gráfico en el escritorio

GSyC - 2018

HTML

4

Lenguajes de marcado

Lenguajes de marcado

HTML es un lenguaje de marcado: un sistema que permite incluir
metainformación en un documento, esto es, información sobre la
información

La metainformación tiene que distinguirse sintácticamente del
texto.
Es la evolución del lapiz azul con el que tradicionalmente se
editaban documentos cuando la tecnología era analógica

Ejemplo de lenguaje de marcado muy elemental: redacto un
documento en un procesador de textos, lo imprimo y alguien lo
revisa, incluyendo anotaciones a mano. Las anotaciones
(metainformación) se distingue fácilmente del texto original
Para hacer algo semejante de forma digital, es necesaria una
sintaxis que separe el texto de la metainformación

Ejemplos de lenguajes de marcado: troff, LaTeX, JsonML,
SGML, HTML, XML

GSyC - 2018

HTML

5

XML

Lenguajes de marcado

XML Extensible Markup Language
Es una forma de describir datos jerárquicamente. Estándar
para transferir información entre distintos sistemas sin tener
que adaptarlos a cada plataforma concreta, y de forma que
sea fácil de leer por un humano y fácil de procesar por un
ordenador
Creado en 1996 por el W3C (World Wide Web Consortium)
Dos versiones: XML 1.0 y XML 1.1
Algunos autores lo consideran un lenguaje de marcado, otros,
un metalenguaje de marcado
Proviene de SGML, Standard Generalized Markup Language,
norma ISO 8879:1986
SGML es un metalenguaje, un lenguaje para definir lenguajes
de marcado,

GSyC - 2018

HTML

6

Lenguajes de marcado

XML tiene una sintaxis muy similar a la de HTML porque
ambos provienen de SGML
XML y HTML no son lenguajes alternativos

XML está diseñado para describir y comunicar datos datos de
máquina a máquina
HTML está diseñado para presentar en pantalla datos con
formato. De máquina a persona

GSyC - 2018

HTML

7

Lenguajes de marcado

En HTML, como en cualquier lenguaje de marcado, es esencial
separar los aspectos semánticos del texto del formato de la
representación gráfica

Con la aparición de las plataformas móviles (smartphones y
tablets), esto se vuelve aún más importante
Las primeras versiones de HTML no eran muy rigurosas en
esto, pero se ha ido corrigiendo gradualmente en cada nueva
especificación

GSyC - 2018

HTML

8

Internet moderno: HTML

Versiones de HTML

HTML es la base de la World Wide Web, y por tanto, de la
internet moderna
Para los usuarios, WWW e internet son sinónimos. Pero
nosotros debemos distinguirlo

Internet antes del web:

Los predecesores de internet aparecen en los años 1960
TCP/IP se desarrolla durante la década de 1970

1 de enero de 1983: flag day en que la red ARPANET migra
desde NCP hasta TCP/IP

En la internet primitiva se usaban servicios como el correo
electrónico, ftp, telnet, usenet, gopher, irc y algunos otros

GSyC - 2018

HTML

9

Versiones de HTML (1)

Versiones de HTML

Años 1989-1991. Tim Berners-Lee, un físico del CERN
(European Organization for Nuclear Research, Conseil
Européen pour la Recherche Nucléaire) crea un sistema de
hipertexto para internet al que llama WWW, World Wide
Web.

Para ello desarrolla el lenguaje HTML junto con el protocolo
HTTP
Lo que en origen era un servicio más para un ámbito muy
específico, tiene un exito arrollador que cambia no solo
internet y la informática, sino las comunicaciones humanas
El resto de servicios de internet siguen diferenciándose del
WWW, pero casi todos ellos acaban teniendo un interfaz de
usuario web, lo que hace que el usuario lo perciba como la
misma cosa

GSyC - 2018

HTML

10

Versiones de HTML (2)

Versiones de HTML

Año 1995. HTML 2.0. Publicado por el IETF (Internet
Engineering Task Force). Añade formularios, tablas, y soporte
para internacionalización, entre otros
Año 1997. HTML 3.2. Guerra de los navegadores. Microsoft
Internet Explorer y Netscape Navigator intentaban prevalecer
en el mercado, añadiendo características propias. HTML 3.2
busca que ambos navegadores vuelvan a ser compatibles.
Añade características muy desacertadas, como la etiqueta font
y el atributo color

GSyC - 2018

HTML

11

Versiones de HTML (3)

Versiones de HTML

Versión 4.0. Año 1997
Normaliza el uso de marcos frames, disponible desde Netscape
Navigator 2 (año 1995)
Los marcos eran documentos HTML dentro de documentos
HTML. Concepto problemático, han ido desapareciendo
Tres variantes de HTML 4.0

Strict, donde se prohiben elementos obsoletos
Transitional, que admite elementos obsoletos
Frameset, solo marcos

Versión 4.1. Año 2000
La versión más usada, hasta la aparición de HTML 5

GSyC - 2018

HTML

12

Versiones de HTML (4)

Versiones de HTML

Año 2004. El W3C decide abandonar HTML y migrar a
XHTML

XHTML: Extensible Hypertext Markup Language. Lenguaje
muy similar a HTML, pero que sigue estrictamente la sintaxis
de XML

El desarrollo de HTML lo retoma el WHATWG (Web
Hypertext Application Technology Working Group: Google
Apple, Mozilla, Opera)
Año 2008. Primer borrador de HTML 5 publicado por
WHATWG
Año 2009. El W3C abandona XHTML y vuelve a HTML5

GSyC - 2018

HTML

13

Versiones de HTML

Versiones de HTML (5)
Año 2014. HTML 5.0

Define de forma precisa qué hacer con páginas incorrectas
Muchas mejoras en interoperabilidad
Mucho mejor soporte para dispositivos móviles
Audio y video
Gráficos vectoriales
Muchas APIs nuevas, como la geolocalización

Año 2016. HTML 5.1

En la actualidad cualquier desarrollo debería centrarse en HTML 5

La compatibilidad con HTML 4 es bastante buena
Existen técnicas y herramientas que permiten que páginas
HTML 5 se muestren correctamente en navegadores antiguos

Toda la información contenida en las transparencias de esta
asignatura es válida en HTML 4 y HTML 5, salvo indicación
contraria

GSyC - 2018

HTML

14

Adobe Flash

Versiones de HTML

Otra de las grandes ventajas de HTML 5 es que permite prescindir
de Flash

Adobe Flash es una plataforma software desarrollada por
Adobe Systems para mostrar animaciones, gráficos vectoriales,
vídeos, audio, contenido interactivo...
Muy popular entre los años 2000 y 2010
Muy problemático. Ya en el año 2000 se publican artículos
como Flash: 99 % Bad, (J.Nielsen)
No estándar. Dependencia del fabricante. Anima a desarrollar
contenido centrado en la apariencia gráfica externa, no en la
usabilidad y la semántica
No soportado por Apple

Anunciada su desaparición oficial para el año 2020

GSyC - 2018

HTML

15

Sintaxis de HTML

Sintaxis de HTML

Un documento HTML está formado por

Declaración de tipo
Un elemento html, que contiene

Un elemento head, que contiene

Título
Codificación de caracteres

Un elemento body

<!DOCTYPE html>
<html>

<head>

<title>Hola mundo en HTML</title>
<meta charset="utf-8">

</head>
<body>

</body>

</html>

Hola, mundo.

GSyC - 2018

HTML

16

Sintaxis de HTML

Algunas etiquetas de estos elementos se pueden omitir en
ciertas circunstancias y el documento sigue siendo válido,
quedan sobreentendidas (head, body, html). Pero siempre es
preferible ponerlo todo
Otros elementos como el título y la codificación de caracteres
son obligatorios. Si se omiten, herramientas como
https://validator.w3.org nos indicarán que el
documento es erróneo

A pesar de eso, los navegadores podrán mostrar el documento
de forma satisfactoria, con lo que es muy habitual que nadie se
preocupe de corregir estos errores
El problema se agrava cuando distintos navegadores tratan los
errores de forma distinta

GSyC - 2018

HTML

17

DOCTYPE

Sintaxis de HTML

La declaración <!DOCTYPE html> es obligatoria al comienzo de un
documento HTML 5

En rigor no es parte de HTML (no es un elemento HTML)
sino una instrucción que le dice al navegador que lo que viene
a continuación es un documento HTML, versión 5

En HTML 4.x y anteriores, esto era más complicado
Ejemplos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

GSyC - 2018

HTML

18

Case insensitive

Sintaxis de HTML

HTML es insensible a mayúsculas (case insensitive), aunque lo
habitual es usar siempre las minúsculas.
Hay una excepción:

<!DOCTYPE html>
<!doctype html>

Ambas formas son idénticas y correctas, pero lo habitual es usar la
primera, posiblemente por influencia de XHTML