HTML: Hyper Text Markup Language

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML: Hyper Text Markup Language"

Ernesto Olivera Velázquez
hace 6 años
Vistas:

1 HTML, CSS ISIS 3710

2 HTML: Hyper Text Markup Language HTML es el lenguaje de etiquetas usado en Internet para construir páginas web HTML fue introducido en la primer versión de WWW (Timothy Berners-Lee, CERN)

3 HTML: Hyper Text Markup Language <!DOCTYPE*html*PUBLIC* "4//W3C//DTD*XHTML*1.0*Transitional//EN"* " transitional.dtd"> <html> <head> <title> My*Home*Page </title> </head> <body> <h1>my*home*page*</h1>* <p> Welcome*to*my*home*page </p> </body> </html>

4 HTML: Hyper Text Markup Language <!DOCTYPE*html*PUBLIC* "4//W3C//DTD*XHTML*1.0*Transitional//EN"* " transitional.dtd"> <html> <head> <title> My*Home*Page </title> </head> <body> <h1>my*home*page*</h1>* <p> Welcome*to*my*home*page </p> </body> </html> Lenguaje/ Tipo de documento Etiqueta (Tag)

5 HTML: Hyper Text Markup Language <HTML> <head> <title>hola Mundo</title> </head> <body4bgcolor= # > <font4color= #ffffff 4> <H1>Hola Mundo</H1> </font> <hr> Contradicción:4Ejemplo de4entidad </body> </HTML>

6 HTML: Hyper Text Markup Language <HTML> <head> <title>hola Mundo</title> </head> <body4bgcolor= # > <font4color= #ffffff 4> <H1>Hola Mundo</H1> </font> <hr> Contradicción:4Ejemplo de4entidad </body> </HTML> Atributos visuales

7 HTML: Hyper Text Markup Language HTML y las páginas WEB ha evolucionado desde su introducción en 1991 Las especificaciones han sido mantenidas por el IETF de W3C Consortium. Recientemente por la WHATWG La version más reciente es HTML5

8 HTML: Hyper Text Markup Language Versión Año Estándares HTML (draft) HTML IETF RFC 1866 HTML HTML HTML ISO/IEC 15445:2000 XHTML XHTML HTML Estándar de IETD + WHATWG

9 HTML: Hyper Text Markup Language HTML 5 <!DOCTYPE html> <!DOCTYPE HTML PUBLIC HTML 4.01 Strict "-//W3C//DTD HTML 4.01//EN " html4/strict.dtd"> HTML 4.01 Transitional (deprecated elements like FONT) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " HTML 4.01 Frameset (transitional + frameset) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

10 HTML: Hyper Text Markup Language XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " xhtml1-frameset.dtd">

11 Evolución de HTML Websites: HTMLs enlazados por hiper vínculos

12 Evolución de HTML Websites: HTMLs enlazados por hiper vínculos

13 Evolución de HTML El infierno de los GIFs animados

14 Evolución de HTML El infierno de los GIFs animados

15 Evolución de HTML FLASH: multimedia a través de plugins

16 Evolución de HTML FLASH: multimedia a través de plugins

17 Evolución de HTML HTML5: multimedia sin el uso de plugins

18 Evolución de HTML HTML5: multimedia sin el uso de plugins

19 Evolución de HTML HTML5: multimedia sin el uso de plugins

20 Evolución de HTML HTML5: multimedia sin el uso de plugins

21 Evolución de HTML HTML5: multimedia sin el uso de plugins

22 Evolución de HTML HTML5: multimedia sin el uso de plugins

23 Evolución de HTML HTML5: multimedia sin el uso de plugins

24 Evolución de HTML HTML5: multimedia sin el uso de plugins

25 HTML 3.2 Layout basado en tablas <table> <td colspan= 3 3></td> <td></td> <td></td> <td></td> <table>3</table> <td colspan= 3 3></td> </table>

26 HTML 4.01 Layout basado en divs

27 HTML 5 Tags con mas semántica

28 HTML 5 Ya el objetivo no es (solo) mostrar hiper-textos; el objetivo es permitir la creación de experiencias e interfaces de usuario La WHATWG trabajó en HTML5 para la creación de aplicaciones Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos

29 CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración en línea Atributos visuales (HTML)

30 HTML + CSS HTML: Elementos y distribución CSS: atributos visuales

31 HTML + CSS <h1>from Garden to Plate</h1> <p>a <i>potager</i> is a French term for an ornamental vegetable or kitchen garden...</p> <h2>what to Plant</h2> <p>plants are chosen as much for their functionality as for their color and form...</p>

32 HTML + CSS

33 HTML + CSS body { font-family: Arial, Verdana, sans-serif;} h1, h2 { color: #ee3e80;} p { color: #665544;}

34 HTML + CSS

35 CSS: Fuentes para estilos <html> <head> <title>using External CSS</title> <link href="css/styles.css" type="text/css" rel="stylesheet"> </head> <body> <h1>potatoes</h1> <p>there are dozens of...</p> </body> </html>

36 CSS: Fuentes para estilos <html> <head> <title>using External CSS</title> <link href="css/styles.css" type="text/css" rel="stylesheet"> </head> <body> <h1>potatoes</h1> <p>there are dozens of...</p> </body> </html>

37 CSS: Fuentes para estilos <html> <head> <title>using External CSS</title> <link href="css/styles.css" type="text/css" rel="stylesheet"> </head> <body> <h1>potatoes</h1> <p>there are dozens of...</p> </body> </html>

38 CSS: Fuentes para estilos <head> <title>using Internal CSS</title> <style type="text/css"> body { font-family: arial; background-color: #rgb(185,179,175);} h1 { color: rgb(255,255,255);} </style> </head>

39 CSS: Reglas y selectores

40 CSS: Reglas y selectores Regla CSS

41 CSS: Reglas y selectores Selector Value Propiedad

42 CSS: Selectores Selector por nombre (tag) Selector por id Selector por clase Combinado Ejemplos tomados de

43 CSS: Selectores Ejemplos tomados de

44 CSS: Modelo de cajas Transparente Texto/Imágenes Margin Border Padding Contenido Transparente

45 CSS: Modelo de cajas Cuál es es ancho final del div?

46 CSS: Modelo de cajas Cuál es es ancho final del div?

47 CSS: La propiedad display - Los elementos visuales HTML en el árbol render son un área rectangular - El flujo del layout depende de la propiedad display que se puede controlar con CSS

48 CSS: La propiedad display block block block - Cada elemento tiene su propio rectángulo (bloque) - Los bloques se organizan de forma vertical

49 CSS: La propiedad display inline inline inline - Los elementos de tipo inline se organizan horizontalmente dentro de un bloque contenedor - El alto del bloque es el mismo del elemento inline mas alto - Los elementos se organizan en mas de una fila cuando el ancho no es suficiente

50 CSS: La propiedad display

51 CSS: La propiedad display

52 CSS: La propiedad display

53 CSS: La propiedad display Bloques <div> <h1> - <h6> <p> <form> <header> <footer> <section> Tipo inline <span> <a> <img> <li>

54 CSS: La propiedad position Absoluto - El elemento se excluye del flujo normal - La posición es absoluta, pero relativa al contenedor

55 CSS: La propiedad position Fijo - El elemento se excluye del flujo normal - La posición es absoluta, pero relativa al viewport

el elemento usando como referencia la posición normal

56 CSS: La propiedad position Relativo - La posición es relativa a su posición normal, es decir los atributos de posición, mueven el elemento usando como referencia la posición normal

57 CSS: La propiedad position

58 CSS: Plantillas

59 Frameworks

60 Frameworks

61 Herramientas para validación

62 Herramientas para validación

63 Problemas con navegadores La existencia de multiples estándares y multiples proveedores de navegadores ha generado problemas de compatibilidad HTML 3.2 surgió para evitar versiones propietarias de HTML Recientemente, El WHATWG ha trabajado con los diferentes proveedores para mantener un comportamiento consistente en HTML5

64 Problemas con navegadores

65 Pruebas de compatibilidad

66 Pruebas de compatibilidad Ghostlab: BrowserStack: SuaceLabs: CrossBrowserTesting: MogoTest: Litmus: TestingBot: Spoon: BrowserShots: Browsera: IE Net Renderer:

Documentos relacionados

Problemas típicos con HTML

Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla