Ing. Jéber G. Martínez. HTML: Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente,

Presentación del tema: "Ing. Jéber G. Martínez. HTML: Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente,"— Transcripción de la presentación:

1 Ing. Jéber G. Martínez

2 HTML: Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org), más conocido como W3C. La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01.

3 Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (http://www.whatwg.org/) (Web Hypertext Application Technology Working Group).http://www.whatwg.org/ Primer borrador de HTML5 en el 2008. http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/ De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se publicó el 26 de Enero de 2000

4

5

6

7

8

9

10

11

12

13 Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imágenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes. Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.

14 CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.

15 El mantenimiento de un Sitio Web es más sencillo. Se pueden crear sitios para diferentes plataformas como dispositivos móviles o impresoras. Ahorro de tiempo en cambios «de fondo». Compatibilidad con navegadores modernos. Amigable con Motores de Búsqueda (GOOGLE).

16 HTML = ESTRUCTURA CSS = DISEÑO DE LA ESTRUCTURA

17 CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. La versión más avanzada es CSS3. Nosotros veremos CSS2.1 y CSS3. CSS se puede usar de 3 maneras: aAdentro de la etiqueta HTML b Adentro del documento cComo un documento externo.

18 Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta de HTML y solamente se pueden incluir en la sección HEAD.¿CUÁNDO? Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.INCONVENIENTES El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

19 Ejemplo de estilos CSS en el propio documento p { color: black; font-family: Verdana; } Un párrafo de texto.

20 El método para incluir estilos CSS en documentos HTML dentro de la etiqueta es el menos recomendado. Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto. Un párrafo de texto.

21 Sintaxis:

22 Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. Propiedad: permite modificar el aspecto de una característica del elemento. Valor: indica el nuevo valor de la característica modificada en el elemento.

23 www.typetester.org Generador de fuentes. www.google.com/webfonts Tipografías a prueba de todo. www.cssplay.co.uk Diseñador Web CSS entusiasta con claros ejemplos divididos por categorías. www.csszengarden.com Experimento mundial de cómo un documento de HTML fue transformado por CSS por diseñadores de todo el mundo.

24 El menos utilizado puesto que no aprovecha las ventajas de CASCADA del CSS… se utiliza directa ADENTRO DE LA ETIQUETA HTML, no necesita predefinirse en el HEAD. Capítulo 1…

25 El encabezado nivel 1 (H1) usa texto rojo: h1 { color: red } h1 { color: rgb(255,0,0) } h1 { color: #ff0000 }

26 El encabezado nivel 1 (H1) tiene texto rojo, su tipografía es Georgia y el tamaño es 24px. h1 { color: red; font-family: Georgia; font-size: 24px; }

27 Siempre coloca un punto y coma después de cada declaración en tu lista, INCLUSO EN LA ÚLTIMA.

28

29 Todo enlace tiene 4 estados: link, visited, hover y active En CSS esto se traduce a: a:link { color: red; } a:visited { color: darkred; } a:hover { color: hotpink; } a:active { color: fuchsia; }

30 Si tuvieras… h1 { color: red; } h2 { color: red; } h3 { color: red; } Es como si dijeras… El encabezado 1 tiene texto rojo, el encabezado 2 tiene texto rojo, el encabezado 3 tiene texto rojo… En vez de eso puedes decir… el encabezado 1, encabezado 2 y encabezado 3 tienen texto rojo así… h1, h2, h3 { color: red; }

31 Puedes crear tus propios estilos que a su vez pueden aplicarse a CUALQUIER ETIQUETA HTML… Por ejemplo, supongamos que quiero hacer un estilo que pueda usar donde yo quiera para resaltar un texto, a este le puedo nombrar así «marcador». La única diferencia es que ahora el selector lleva un puntito antes:.marcador { background-color: yellow;} Para aplicar una clase, tengo que escribir directamente en la etiqueta HTML que quiero una clase… Capítulo 1…

32 .marcador { background-color: yellow;} Capítulo 1… Punto Sin punto Selector de Clase Hola soy un párrafo…

33 font-family: establece la tipografía, puede ser sans o serif básicamente, aunque ya pueden cargarse nuevas tipografías por métodos secundarios. font-weight: el peso de la tipografía. VALORES: normal, bold, bolder, lighter, inherit font-variant: establece si serán todas mayúsculas o no. VALORES: normal, small-caps, inherit font-style: Itálica u oblicua. VALORES: normal, italic, oblique, inherit font-size: Tamaño de la tipografía. VALORES: pixeles, smaller, larger, xx-small, x-small, small, medium, large, x-large, xx-large, inherit