HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de...

HTML, CSSISIS 3710

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)

<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.dtd">

<title>My*Home*Page

</title></head><body>

Welcome*to*my*home*page</p>

</body></html>

<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.dtd">

<title>My*Home*Page

</title></head><body>

Welcome*to*my*home*page</p>

</body></html>

Lenguaje/ Tipo de documento

Etiqueta (Tag)

<title>Hola Mundo</title></head><body4bgcolor=“#000000”4>

<font4color=‘#ffffff’4><H1>Hola Mundo</H1>

</font><hr>Contradicción:4Ejemplo de4entidad

</body></HTML>

<title>Hola Mundo</title></head><body4bgcolor=“#000000”4>

<font4color=‘#ffffff’4><H1>Hola Mundo</H1>

</font><hr>Contradicción:4Ejemplo de4entidad

</body></HTML>

Atributos visuales

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

Versión Año Estándares

HTML (draft) 1991-1994

HTML 2.0 1995 IETF RFC 1866

HTML 3.2 1996

HTML 4.0 1997

HTML 4.01 1999 ISO/IEC 15445:2000

XHTML 1.0 2000

XHTML 1.1 2001

HTML 5 2014 Estándar de IETD + WHATWG

HTML: Hyper Text Markup Language HTML 5

<!DOCTYPE html>

HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/

html4/strict.dtd">

HTML 4.01 Transitional (deprecated elements like FONT) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://

www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset (transitional + frameset)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://

www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Evolución de HTML

Websites: HTMLs enlazados por hiper vínculos

http://www.warnerbros.com/archive/spacejam/movie/jam.htm

Evolución de HTML

Websites: HTMLs enlazados por hiper vínculos

http://www.warnerbros.com/archive/spacejam/movie/jam.htm

Evolución de HTML

http://skavenger.byethost8.com/homerswebpage/

El infierno de los GIFs animados

Evolución de HTML

http://skavenger.byethost8.com/homerswebpage/

El infierno de los GIFs animados

Evolución de HTML

http://www.nrg.be/archived/

FLASH: multimedia a través de plugins

Evolución de HTML

http://www.nrg.be/archived/

FLASH: multimedia a través de plugins

Evolución de HTML

http://24hoursofhappy.com/

HTML5: multimedia sin el uso de plugins

Evolución de HTML

http://tridiv.com/

Evolución de HTML

http://tridiv.com/

Evolución de HTML

https://codepen.io/guttentag/full/tonFl/

Evolución de HTML

https://codepen.io/guttentag/full/tonFl/

Evolución de HTML

https://codepen.io/dudleystorey/full/knqyK/

Evolución de HTML

HTML 3.2

Layout basado en tablas

<table>

</table>

HTML 4.01

Layout basado en divs

HTML 5

Tags con mas semántica

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

CSS: Fuentes para estilos

Reglas CSS (externas o internas)

Declaración en línea

Atributos visuales (HTML)

HTML + CSS

HTML: Elementos y distribución CSS: atributos visuales

HTML + CSS

<h1>From Garden to Plate</h1><p>A <i>potager</i> is a French term for

an ornamental vegetable or kitchengarden...</p>

<h2>What to Plant</h2><p>Plants are chosen as much for their

functionality as for their color andform...</p>

HTML + CSS

body {font-family: Arial, Verdana, sans-serif;}

h1, h2 {color: #ee3e80;}

p {color: #665544;}

HTML + CSS

<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>

</head><body><h1>Potatoes</h1><p>There are dozens of...</p>

</body></html>

</head><body><h1>Potatoes</h1><p>There are dozens of...</p></body></html>

<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>

CSS: Reglas y selectores

Regla CSS

CSS: Reglas y selectores

Selector

Propiedad

CSS: Selectores

Selector por nombre (tag)

Selector por id

Selector por clase

Combinado

Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp

CSS: Selectores

Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp

CSS: Modelo de cajas

PaddingBorderMargin

Texto/ImágenesTransparente

Transparente

Contenido

Cuál es es ancho final del div ?

32010 10 550 0

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

- Cada elemento tiene su propio rectángulo (bloque)

- Los bloques se organizan de forma vertical

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

inline inline

Bloques Tipo inline

CSS: La propiedad position

Absoluto - El elemento se excluye del flujo normal

- La posición es absoluta, pero relativa al contenedor

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Fijo - El elemento se excluye del flujo normal

- La posición es absoluta, pero relativa al viewport

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

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

CSS: Plantillas

http://www.w3schools.com/css/css_rwd_templates.asp

Frameworks

http://getbootstrap.com/

Frameworks

http://foundation.zurb.com/

Herramientas para validación

http://validator.w3.org/

Herramientas para validación

http://validator.w3.org/

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

Problemas con navegadores

Pruebas de compatibilidad

Ghostlab: BrowserStack: SuaceLabs: CrossBrowserTesting: MogoTest: Litmus: TestingBot: Spoon:

BrowserShots: Browsera: IE Net Renderer:

http://vanamco.com/ghostlab/ http://www.browserstack.com/ https://saucelabs.com/home http://crossbrowsertesting.com/ http://mogotest.com/ http://litmus.com/page-tests http://testingbot.com/ http://spoon.net/browsers/

http://browsershots.org/ http://www.browsera.com/ http://netrenderer.com/

HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de...

Documents

Transcript of HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de...

Apresentação HTML e CSS

HTML&CSS 3 - Introduction to CSS

Caelum HTML Css Javascript Php

HTML Css Javascript Php

Introdução ao HTML e CSS

Apostila html,xhtml e css

2 html,xhtml e css

Aprenda HTML e CSS

HTML, CSS & Style Guides

Apresentacao html css

Apostila- html e css - josewilker.comjosewilker.com/material_didatico/webdesign/apostila_html_02.pdf · aPOstiLA DE html, xhtml e cSs . Índice HTML ... você aprenda o básico primeiro,

HTML, Xhtml e Css

HTML, CSS e JQuery Wendell Silva Soares. Sumário HTML CSS JQuery Referências.

HTML Css Javascript

Tutorial de HTML & Css. Apostila Sobre HTML e Css

Front-end treinamento html/css

Curso HTML e CSS

HTML 5 e CSS 3

2113040917 apostila html-css

Apostila html / css