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)
HTML: Hyper Text Markup Language
<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.dtd">
<html><head>
<title>My*Home*Page
</title></head><body>
<h1>My*Home*Page*</h1>*<p>
Welcome*to*my*home*page</p>
</body></html>
HTML: Hyper Text Markup Language
<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.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)
HTML: Hyper Text Markup Language
<HTML><head>
<title>Hola Mundo</title></head><body4bgcolor=“#000000”4>
<font4color=‘#ffffff’4><H1>Hola Mundo</H1>
</font><hr>Contradicción:4Ejemplo de4entidad
</body></HTML>
HTML: Hyper Text Markup Language
<HTML><head>
<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: 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
HTML: Hyper Text Markup Language
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">
HTML: Hyper Text Markup Language
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
HTML5: multimedia sin el uso de plugins
http://tridiv.com/
Evolución de HTML
HTML5: multimedia sin el uso de plugins
http://tridiv.com/
Evolución de HTML
HTML5: multimedia sin el uso de plugins
https://codepen.io/guttentag/full/tonFl/
Evolución de HTML
HTML5: multimedia sin el uso de plugins
https://codepen.io/guttentag/full/tonFl/
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
HTML 3.2
Layout basado en tablas
<table>
</table>
<td colspan=“3”3></td>
<td></td> <td></td> <td></td>
<td colspan=“3”3></td>
<table>3</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
HTML + CSS
body {font-family: Arial, Verdana, sans-serif;}
h1, h2 {color: #ee3e80;}
p {color: #665544;}
HTML + CSS
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>
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>
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>
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>
CSS: Reglas y selectores
CSS: Reglas y selectores
Regla CSS
CSS: Reglas y selectores
Selector
Propiedad
Value
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
CSS: Modelo de cajas
Cuál es es ancho final del div ?
CSS: Modelo de cajas
Cuál es es ancho final del div ?
32010 10 550 0
350
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
CSS: La propiedad display
block
block
block
- Cada elemento tiene su propio rectángulo (bloque)
- Los bloques se organizan de forma vertical
CSS: La propiedad display
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
CSS: La propiedad display
CSS: La propiedad display
CSS: La propiedad display
CSS: La propiedad display
Bloques Tipo inline
<div> <h1> - <h6> <p> <form> <header> <footer> <section>
<span> <a> <img> <li>
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
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
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
CSS: La propiedad position
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
CSS: La propiedad position
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
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/