Documento introductorio para entender la relación entre el modelo de escritura hipertextual XHTML y hojas de estilo.

1. Computación Multimedia 1 XHTML+CSS…

2. computación multimedia 1 Diseño Gráfico Básico para recordar las etiquetas se indican por pares y se forman de la siguiente manera: ▪ Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter > ▪ Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >

3. computación multimedia 1 Diseño Gráfico Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta>

4. a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body , br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em , fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6 , head , hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li , link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p , param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title , tr, tt, u, ul , var. computación multimedia 1 Diseño Gráfico

5. computación multimedia 1 Diseño Gráfico tres restricciones básicas que introduce XHTML

6. 1) Las etiquetas se tienen que cerrar de acuerdo a como se abren: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a>un enlace</a></p> computación multimedia 1 Diseño Gráfico

7. 2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href=&quot;http://www.google.com&quot;>un enlace</a></p> computación multimedia 1 Diseño Gráfico

8. 3) El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href=&quot;http://www.google.com&quot;>un enlace</a></p> computación multimedia 1 Diseño Gráfico

9. computación multimedia 1 Diseño Gráfico texto La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página . Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.

10. La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus párrafos, titulares y títulos de sección, como se muestra en la siguiente imagen: computación multimedia 1 Diseño Gráfico

11. Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc. computación multimedia 1 Diseño Gráfico

12. computación multimedia 1 Diseño Gráfico dejemos un comentario Los comentarios son notas que ponemos en el código fuente de una página, pero que no se muestran. Para el navegador, son invisibles. Son útiles para indicar que hacen ciertas partes del código. <!--esto es un comentario -->

13. estructurar Párrafos <p> Secciones h1, h2, h3, h4, h5, h6 Marcado básico de texto <em>, <strong>, < blockquote> computación multimedia 1 Diseño Gráfico

14. Según las últimas Estadísticas de servidores Web elaborada por NetCraft, existen más de 100 millones de sitios web en todo el mundo. computación multimedia 1 Diseño Gráfico

15. computación multimedia 1 Diseño Gráfico hojas de estilo en cascada CSS

16. CSS es un lenguaje formal (que se escribe en un archivo de texto), que define la presentación de un documento Html, Xml o Xhtml. computación multimedia 1 Diseño Gráfico

17. computación multimedia 1 Diseño Gráfico Dónde escribo la parte de CSS? Hay dos opciones para insertar estilos en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama hoja de estilos) y enlazarlo desde nuestro documento XHTML. <link href=&quot;nuestra_hoja.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />

18. computación multimedia 1 Diseño Gráfico Dónde escribo la parte de CSS? La otra opción es escribir la información referente a los estilos en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style> , que también deben ir en la cabecera.

19. computación multimedia 1 Diseño Gráfico glosario básico CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.

20. ▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de &quot;selectores&quot;, un símbolo de &quot;llave de apertura&quot; ({), otra parte denominada &quot;declaraciones&quot; y por último, un símbolo de &quot;llave de cierre&quot; (}). ▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. computación multimedia 1 Diseño Gráfico

21. ▪ Declaración: la declaración especifica los estilos que se aplicarán 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. computación multimedia 1 Diseño Gráfico

22. computación multimedia 1 Diseño Gráfico ¿cómo funciona?

23. En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises y use una fuente Arial de 11 píxeles de tamaño, escribimos: body { background-color:#fff; color: #666; font-family: Arial, sans-serif; font-size: 11px; } computación multimedia 1 Diseño Gráfico

24. computación multimedia 1 Diseño Gráfico selectores

25. Los selectores los utilizamos para elegir a que elementos se aplican las propiedades que escribimos. Hay diferentes tipos de selectores, los mas importantes son los que veremos ahora. Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer propiedades para los enlaces: a { ... } computación multimedia 1 Diseño Gráfico

26. También podemos elegir un elemento único utilizando su atributo id . Para ello, empleamos la almohadilla: #menu { ... } computación multimedia 1 Diseño Gráfico

27. Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo: .importante { ... } Luego podríamos usar esa clase en los párrafos que queramos (o cualquier otro elemento), usando el atributo class. De este modo: <p class=&quot;importante&quot;>Bla bla bla</p> computación multimedia 1 Diseño Gráfico

28. computación multimedia 1 Diseño Gráfico ahora si…¿preguntas?