1 / 33

Sesión 6

Sesión 6. XHTML e introducción a CSS. Ing. Jéber G. Martínez. HTML. 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.

cullen-tanner
Download Presentation

Sesión 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Sesión6 XHTML e introducción a CSS Ing. Jéber G. Martínez

  2. HTML • 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. HTML • 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 HypertextApplicationTechnologyWorkingGroup). • Primer borrador de HTML5 en el 2008. 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. XHTML La estructuraqueyaconoces…

  5. XHTML Reglasbásicas

  6. Etiquetas de HTML

  7. Elementos en línea y elementos de bloque

  8. Reglas XHTML…

  9. Reglas XHTML.

  10. Reglas XHTML.

  11. Reglas XHTML.

  12. Reglas XHTML.Las etiquetas SIEMPRE se cierran… inclusolassencillascomobr, img y hr

  13. Introducción a CSS • 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 • CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.

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

  16. Recuerda… • HTML = ESTRUCTURA • CSS = DISEÑO DE LA ESTRUCTURA

  17. CSS • 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: • a Adentro de la etiqueta HTML • b Adentro del documento • c Como un documento externo.

  18. CSS. Adentro del documento • Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> 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. CSS. Adentro del documento <html> <head> <title>Ejemplo de estilos CSS en el propio documento</title> <styletype="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html>

  20. CSS. Adentro de la etiqueta • 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. • <p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>

  21. HÁGAMOS CSS!!! • 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. Enlaces Recomendados: 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. CSS. Dentro de la etiqueta. • 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. • <h2 style=“font-family: Arial; font-size: 24px">Capítulo 1…</h2>

  25. Aprende a leer CSS comolenguajecomún: • El encabezado nivel 1 (H1) usa texto rojo: • h1 { color: red } • h1 { color: rgb(255,0,0) } • h1 { color: #ff0000 }

  26. Otroejemplo… • 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. Tip Master: Siempre coloca un punto y coma después de cada declaración en tu lista, INCLUSO EN LA ÚLTIMA.

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

  29. Estados de los enlaces… • 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. Tambiénpuedescombinarreglas… • 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. Clases: • 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… • <h2 class=“marcador">Capítulo 1…</h2>

  32. Clases: • .marcador { background-color: yellow;} • <h2 class=“marcador">Capítulo 1…</h2> Selector de Clase Punto Sin punto • <p class=“marcador">Hola soy un párrafo…</h2>

  33. Glosario de propiedadestipografías • font-family: establece la tipografía, puede ser sanso 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

More Related