Contextualizacioón delas diferentes etiquetas que se manejan en HTML5 y CSS

2. Evolución
SGML Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado
Generalizado” es un sistema diseñado para crear formatos de documentos a través de su
marcado estructural.
•SGML hace hincapié únicamente en la estructura del documento
•Este sistema ya tenía estructura de documento jerárquica y definiciones de tipos de documentos
•La Organización Internacional de Estándares (ISO) normalizó este lenguaje ISO 8879:1986
HTML = HyperText Markup Language
•1991: Tim Berners-Lee publica por primera vez la definición de HTLM Tags
•Es un subconjunto de SGML
•22 elementos
•Crea la World Wide Web y el primer navegador web ViolaWWW (textual y sobre UNIX)
1993-1995: Se trabajó y estableció el estándar para las características básicas de HTML 2.0
(RFC 1866)
•Tim Berners-Lee y Dan Connolly
•Grupo de trabajo de HTML del IETF (Internet Engineering Task Force)

3. Evolución
1995: En marzo el W3C publica el borrador de HTML 3.0
•Extensión de las características de HTML 2.0 para soportar tablas, flujos de texto alrededor De las
imágenes y fórmulas matemáticas
•Gran diferencia entre las versiones, la estandarización y el desarrollo de toda la propuesta Parecía
poco manejable
Enero 1997: HTML 3.2
•IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, y Sun
Microsystems
•Incluye soporte para tablas, applets, flujos de texto alrededor de las imágenes, subíndices o
superíndices
Diciembre 1997: HTML 4.0
•Opciones de soporte para multimedia
•Lenguajes de scripting
•Hojas de estilo
•Facilidades para la impresión
•Documentos más accesibles para usuarios con discapacidades
•Internacionalización
•XForms 1.0

4. Evolución
Diciembre 1999: HTML 4.01
•Se incluyen correcciones a errores detectados
•La recomendación establece que los agentes que soporten este lenguaje, deben admitir a
las versiones anteriores
•La creación de nuevos elementos de marcado han llevado a grandes problemas de
interoperabilidad
2004: el W3C crea el grupo de trabajo sobre HTML para definir la versión 5. Se paralizan los
trabajos dando prioridad al XHTML.
4 de Junio 2004: Se crea WHATWG (Web Hypertext Application Technology Working Group)
en respuesta a la paralización de HTML por el W3C. Formado por Apple, Mozilla Foundation y
Opera Software.

5. Evolución
10 de Abril 2007: el WHATWG propone al W3C que adopte su
especificación de HTML5
9 de Mayo 2007: el W3C relanza el grupo de trabajo en HTML y adopta la
especificación HTML5
22 de enero 2008: Primer borrador oficial
Enero 2011: El WHATWG renombra el HTML5 a HTML, pero W3C continua
con el nombre HTML5. Se crea el Logo de HTML5

7. HTML
• Es un lenguaje de marcado en
el que un conjunto de
etiquetas organizan e
identifican cada elemento de
un código de texto que
proporciona la estructura de un
página web. (MEDIActive, 2014)

8. •New semantic elements like
<header>, <footer>, <article>, and
<section>.
•New attributes of form elements
like number, date, time, calendar,
and range.
•New graphic elements: <svg> and
<canvas>.
•New multimedia elements: <audio>
and <video>.
New HTML5
Elements
•HTML Geolocation
•HTML Drag and Drop
•HTML Local Storage
•HTML Application Cache
•HTML Web Workers
•HTML SSE
New HTML5 API's
(Application
Programming
Interfaces)
http://www.w3schools.com/html/html_intro.asp

9. Elementos de HTML5:
estructura

10. •Etiqueta <title> Titulo o nombre de la página OBLIGATORIA <title>Museo
realidad aumentada de la Etnia Zenú – TOTÓ</title>
•Etiqueta <link> permite enlazar documentos a otros recursos, generalmente
hojas de estilo y scripts. El destino se define con el atributo “href”.
OBLIGATORIAMENTE debe tener el atributo “rel”. <link rel=StyleSheet
href="styleaplicacion1.css" type="text/css" media=screen>
•Etiqueta <script> permite la inserción de códigos script, como puede ser
JavaScript en un documento web del lado del cliente. El código se puede
insertar directamente entre las etiquetas o haciendo referencia a un documento
externo el cual contiene el código script a ejecutar. <script src =
"https://code.jquery.com/jquery-1.11.2.min.js"></script><script type="text/javascript"
src="script.js"></script>
<head>
media=screen, El atributo
especifica qué medios de
comunicación/dispositivos
se utilizaran para
optimizar el recurso

11. Etiqueta <meta>
•Los elementos META se utilizan para especificar
información sobre el propio documento:
•Atributo name
•Atributo content
•Atributo charset
<meta charset="UTF-8">
<meta name="description" content="Información de la etnia Zenú">
<meta name="viewport" content="width=device-width, initial-scale=1">

12. Etiqueta <style>
• Permite definir características
de estilo dentro del propio
documento.
• Atributo media (por defecto
asume “all”)
• Atributo type (por defecto
asume “text/css”)
• Atributo title
<style>
body { color: black;
background: white; }
em {color: red; }
</style>

13. <body>
•Define el cuerpo de un documento.
Dentro del cuerpo del documento se
incluye todo el contenido del mismo, por
ej. textos, enlaces, imágenes, tablas, etc.

14. Etiqueta <section>
•Representa una sección genérica de un
documento. Es una agrupación temática de
contenido, generalmente con encabezados.
Etiqueta <nav>
•Representa una sección del documento que
contiene enlaces a otras páginas o partes, es
la sección de navegación.
<section>
<h1>Bora bora</h1>
<p>Isla principal caracterizada por su
mar turquesa y sus hoteles sobre el
mar.</p>
</section>
<nav>
<h1>Menú</h1>
<ul>
<li>
<a
href=“articulos.html">Articulos</a>
</li>
<li>
<a
href=“actualidad.html">Actualidad<
/a></li>
<li>
<a
href=“sucesos.html">Sucesos</a></l
i>
</ul>
</nav>

15. Etiquetas <h1>, <h2>,
<h3>, <h4>, <h5> y <h6>
•Representan «títulos» de su sección, el h1
representa el de más rango y el h6 el de
menos.
Etiqueta <header>
•Sirve para mostrar información de cabecera
útil para un documento u otras secciones
principales
<header>
<img src="Imagenes/logoMAMHVE.jpg"
style="width:160px;height:124px;float:left"
alt="logo MAMHVE" title="logo MAMHVE">
<h1 id="site-title">Museo realidad
aumentada de la Etnia Zenú – TOTÓ</h1>
<h2 id="site-description">Visualización de
las muestras arqueológicas y antropológicas
de la etnia Zenú</h2>
</header>

16. Etiquetas <footer>
•Representa el pie de un documento o sección. La información que se suele añadir en
este bloque es el autor del documento, enlaces a contenido relacionado, información
de copyright, avisos legales, etc.
Etiquetas <address>
•Se utiliza para proporcionar información de algún contacto relacionado con el
contenido, por ejemplo autores de un determinado artículo.

17. Etiquetas de texto
•<p>
•Representa un párrafo de texto
•<pre>
•Representa un párrafo preformateado, mantiene los saltos de línea, los espacios
en blanco, los tabuladores.
•<blockquote>
•Es un bloque que contiene una cita de otra fuente

19. Listas en HTML
•Existen tres tipos de listas: ordenadas, sin ordenar (o de viñetas) y de definición
•Lista ordenadas: etiqueta <ol> (ordered list) designa a toda la lista y cada
elemento se indica mediante <li>
•Listas no ordenadas (viñetas): etiqueta <ul> (unordered list) designa a toda la
lista y cada elemento se indica mediante <li>
•Listas de definición: pensadas para diccionarios, glosarios, etc. <dl> para la lista
completa, <dt> el término a definir y <dd> la definición
http://www.w3schools.com/html/html_lists.asp

22. Enlaces en HTML
• Etiqueta a: representa a los enlaces
• Atributo href: contiene la URL a donde queremos enlazar
• Atributo title: descripción del sitio web al que enlazamos.
HTML Links - Syntax

23. Local Links

24. Elementos de HTML5: multimedia
•Imágenes mediante la etiqueta img con atributos:
•src (obligatorio): define la imagen que se desea mostrar teniendo en cuenta la
ruta.
•alt (obligatorio): descripción alternativa a la imagen que veremos cuando se pase
el ratón sobre la misma y cuando no ha sido posible cargar dicha imagen. También
se utiliza por navegadores de texto

25. Elementos de HTML5: multimedia
•El elemento <figure> es un contenedor de elementos gráficos como fotos, listados de
código, ilustraciones, etc.
•Se utiliza de forma conjunta con <figcaption> para asignarle un titular.
http://www.w3schools.com/html/html_images.asp

26. Elementos de HTML5: multimedia
•<Audio> permite reproducir música en el sitio web
•src: define el archivo de sonido a reproducir.
•Atributo controls: añade un reproductor
•Atributo autoplay: el archivo de sonido se reproduce al cargar la página (NO RECOMENDADO)
•Elemento <source>: permite establecer varios archivos de audio a un mismo reproductor:
•Con el atributo type se establece el tipo de audio
•Atributo codecs permite introducir el tipo de codecs del archivo
http://www.w3schools.com/html/html5_audio.asp

27. Elementos de HTML5: multimedia
•<video> permite reproducir un video en el sitio web
•src: define el archivo de sonido a reproducir.
•Atributo controls: añade un reproductor
•Elemento <source>: permite establecer varios archivos de video en un mismo reproductor:
•Con el atributo type se establece el tipo de audio
•Atributo codecs permite introducir el tipo de codecs del archivo
http://www.w3schools.com/html/html5_video.asp

28. Elementos de HTML5: tabla
•<table> define la tabla
•<tr> define las filas
•<td> define las celdas
•<th> define las cabeceras de la tabla
•<caption> define un título para la tabla
http://www.w3schools.com/html/html_tables.asp

29. Elementos de HTML5: formularios
•<form> define un formulario
•<input> define las entradas al formulario
•Atributo type que permite definir diferentes tipos de datos en el formulario (text, number, email,
date, url, checkbox, button…)
•Hay que añadir comportamiento a los formularios

31. BARTOLOMÉ, S. (2014). Historia de la Web: los navegadores. Páginas web HTML / XHTML y hojas de estilo CSS. Recuperado
el 22 de noviembre de 2014 de http://www.mclibre.org/consultar/htmlcss/otros/otros_historia_navegadores.html
HIDALGO, Y. y RODRIGUEZ, R. (2013). La web semántica: una breve revisión. Rev cuba ciencinformat [online]. 2013, vol.7,
n.1. pp. 76-85. Recuperado de: http://scielo.sld.cu/scielo.php?script=sci_arttext&pid=S2227-
18992013000100009&lng=es&nrm=iso
Blog, CEU Informática. (2014). Ranking de navegadores de internet más usados para 2014. Recuperada el día 17 de
Noviembre de 2014. http://blog.uchceu.es/informatica/ranking-de-navegadores-de-internet-para-2014/
González, M. (2014). ¿Cuáles son los navegadores y buscadores que más se utilizan en el mundo?. Recuperado el 16 de
Noviembre de 2014 de http://www.webyposicionamientoseo.com/cuales-son-los-navegadores-y-buscadores-que-mas-se-
utilizan-en-el-mundo.blog
Mundonets.com. (2014). Estadísticas de los navegadores más usados a Marzo 2014. Recuperada el día 16 de Noviembre de
http://www.mundonets.com/tecnologia/estadisticas-de-los-navegadores-mas-usados-a-marzo-2014/
Pelayo, C. (2016). Diseño de sitios usando Web 2.0. Tema 3. Evolución de la Web. Material de estudio.
UNIR
Proeduca. (2010). Recuperada el día 16 de noviembre de 2014 de
http://3.bp.blogspot.com/_UQOvmzrOXfk/TN7QGjc0gbI/AAAAAAAAAAQ/vYN0UUk8VEY/s320/Navegadores+PNG.png
Statcounter. (s.f). StatCounter Global Stats. Recuperada el día 17 de Noviembre de 2014 de
http://gs.statcounter.com/#browser-ww-monthly-201309-201311-map
StatCounter Global Stats. (2012). StatCounter: Evolution of the Worldwide Browser Landscape.
https://www.youtube.com/watch?v=jtBlvutR9cU
VELAZCO, R. (2014). 20 años de historia de los principales navegadores. Recuperado el 22 de noviembre de 2014 de
http://www.softzone.es/2014/08/18/20-anos-de-historia-de-los-principales-navegadores/