html, css - uniandesisis3710/...tendencias: html semántico, css para la visualización, no uso de...
TRANSCRIPT
![Page 1: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/1.jpg)
HTML, CSSISIS 3710
![Page 2: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/2.jpg)
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)
![Page 3: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/3.jpg)
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>
![Page 4: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/4.jpg)
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)
![Page 5: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/5.jpg)
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>
![Page 6: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/6.jpg)
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
![Page 7: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/7.jpg)
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
![Page 8: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/8.jpg)
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
![Page 9: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/9.jpg)
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">
![Page 10: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/10.jpg)
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">
![Page 11: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/11.jpg)
Evolución de HTML
Websites: HTMLs enlazados por hiper vínculos
http://www.warnerbros.com/archive/spacejam/movie/jam.htm
![Page 12: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/12.jpg)
Evolución de HTML
Websites: HTMLs enlazados por hiper vínculos
http://www.warnerbros.com/archive/spacejam/movie/jam.htm
![Page 13: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/13.jpg)
Evolución de HTML
http://skavenger.byethost8.com/homerswebpage/
El infierno de los GIFs animados
![Page 14: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/14.jpg)
Evolución de HTML
http://skavenger.byethost8.com/homerswebpage/
El infierno de los GIFs animados
![Page 15: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/15.jpg)
Evolución de HTML
http://www.nrg.be/archived/
FLASH: multimedia a través de plugins
![Page 16: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/16.jpg)
Evolución de HTML
http://www.nrg.be/archived/
FLASH: multimedia a través de plugins
![Page 17: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/17.jpg)
Evolución de HTML
http://24hoursofhappy.com/
HTML5: multimedia sin el uso de plugins
![Page 18: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/18.jpg)
Evolución de HTML
HTML5: multimedia sin el uso de plugins
http://tridiv.com/
![Page 19: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/19.jpg)
Evolución de HTML
HTML5: multimedia sin el uso de plugins
http://tridiv.com/
![Page 20: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/20.jpg)
Evolución de HTML
HTML5: multimedia sin el uso de plugins
https://codepen.io/guttentag/full/tonFl/
![Page 21: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/21.jpg)
Evolución de HTML
HTML5: multimedia sin el uso de plugins
https://codepen.io/guttentag/full/tonFl/
![Page 22: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/22.jpg)
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
![Page 23: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/23.jpg)
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
![Page 24: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/24.jpg)
Evolución de HTML
https://codepen.io/dudleystorey/full/knqyK/
HTML5: multimedia sin el uso de plugins
![Page 25: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/25.jpg)
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>
![Page 26: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/26.jpg)
HTML 4.01
Layout basado en divs
![Page 27: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/27.jpg)
HTML 5
Tags con mas semántica
![Page 28: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/28.jpg)
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
![Page 29: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/29.jpg)
CSS: Fuentes para estilos
Reglas CSS (externas o internas)
Declaración en línea
Atributos visuales (HTML)
![Page 30: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/30.jpg)
HTML + CSS
HTML: Elementos y distribución CSS: atributos visuales
![Page 31: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/31.jpg)
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>
![Page 32: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/32.jpg)
HTML + CSS
![Page 33: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/33.jpg)
HTML + CSS
body {font-family: Arial, Verdana, sans-serif;}
h1, h2 {color: #ee3e80;}
p {color: #665544;}
![Page 34: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/34.jpg)
HTML + CSS
![Page 35: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/35.jpg)
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>
![Page 36: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/36.jpg)
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>
![Page 37: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/37.jpg)
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>
![Page 38: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/38.jpg)
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>
![Page 39: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/39.jpg)
CSS: Reglas y selectores
![Page 40: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/40.jpg)
CSS: Reglas y selectores
Regla CSS
![Page 41: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/41.jpg)
CSS: Reglas y selectores
Selector
Propiedad
Value
![Page 42: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/42.jpg)
CSS: Selectores
Selector por nombre (tag)
Selector por id
Selector por clase
Combinado
Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp
![Page 43: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/43.jpg)
CSS: Selectores
Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp
![Page 44: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/44.jpg)
CSS: Modelo de cajas
PaddingBorderMargin
Texto/ImágenesTransparente
Transparente
Contenido
![Page 45: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/45.jpg)
CSS: Modelo de cajas
Cuál es es ancho final del div ?
![Page 46: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/46.jpg)
CSS: Modelo de cajas
Cuál es es ancho final del div ?
32010 10 550 0
350
![Page 47: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/47.jpg)
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
![Page 48: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/48.jpg)
CSS: La propiedad display
block
block
block
- Cada elemento tiene su propio rectángulo (bloque)
- Los bloques se organizan de forma vertical
![Page 49: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/49.jpg)
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
![Page 50: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/50.jpg)
CSS: La propiedad display
![Page 51: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/51.jpg)
CSS: La propiedad display
![Page 52: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/52.jpg)
CSS: La propiedad display
![Page 53: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/53.jpg)
CSS: La propiedad display
Bloques Tipo inline
<div> <h1> - <h6> <p> <form> <header> <footer> <section>
<span> <a> <img> <li>
![Page 54: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/54.jpg)
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
![Page 55: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/55.jpg)
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
![Page 56: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/56.jpg)
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
![Page 57: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/57.jpg)
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
CSS: La propiedad position
![Page 58: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/58.jpg)
CSS: Plantillas
http://www.w3schools.com/css/css_rwd_templates.asp
![Page 59: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/59.jpg)
Frameworks
http://getbootstrap.com/
![Page 60: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/60.jpg)
Frameworks
http://foundation.zurb.com/
![Page 61: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/61.jpg)
Herramientas para validación
http://validator.w3.org/
![Page 62: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/62.jpg)
Herramientas para validación
http://validator.w3.org/
![Page 63: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/63.jpg)
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
![Page 64: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/64.jpg)
Problemas con navegadores
![Page 65: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/65.jpg)
Pruebas de compatibilidad
![Page 66: HTML, CSS - Uniandesisis3710/...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](https://reader030.vdocuments.mx/reader030/viewer/2022040115/5e5bdf4477dde52baf649310/html5/thumbnails/66.jpg)
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/