sesión 6
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
SESIÓN 6XHTML 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.
• 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.
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 Hypertext Application Technology Working Group).
• 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
XHTML La estructura que ya conoces…
XHTML Reglas básicas
Etiquetas de HTML
Elementos en línea y elementos de bloque
Reglas XHTML…
Reglas XHTML.
Reglas XHTML.
Reglas XHTML.
Reglas XHTML.Las etiquetas SIEMPRE se cierran… incluso las sencillas como br, img y hr
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.
CSS
• CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.
¿Por qué CSS?
• 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).
Recuerda…
• HTML = ESTRUCTURA
• CSS = DISEÑO DE LA ESTRUCTURA
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 HTMLb Adentro del documento c Como un documento externo.
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.
CSS. Adentro del documento
<html>
<head><title>Ejemplo de estilos CSS en el propio documento</title><style type="text/css">p { color: black; font-family: Verdana; }</style></head><body><p>Un párrafo de texto.</p></body></html>
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>
• Sintaxis:
HÁGAMOS CSS!!!
▪ 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.
Enlaces Recomendados:www.typetester.org Generador de fuentes.
www.google.com/webfonts Tipografías a prueba de todo.
www.cssplay.co.ukDiseñ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.
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>
Aprende a leer CSS como lenguaje común:
• El encabezado nivel 1 (H1) usa texto rojo:
h1 { color: red }
h1 { color: rgb(255,0,0) }
h1 { color: #ff0000 }
Otro ejemplo…
• 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; }
Tip Master:Siempre coloca un punto y coma después de cada declaración en tu lista, INCLUSO EN LA ÚLTIMA.
Recomendación…Siempre coloca un punto y coma después de cada declaración en tu lista, INCLUSO EN LA ÚLTIMA.
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; }
También puedes combinar reglas…
• 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; }
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>
Clases:
.marcador { background-color: yellow;}
<h2 class=“marcador">Capítulo 1…</h2>
Punto
Sin punto
Selector de Clase
<p class=“marcador">Hola soy un párrafo…</h2>
Glosario de propiedades tipografías
• 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