Computación Multimedia 1 XHTML+CSS…
computación multimedia 1 Diseño Gráfico Básico para recordar las etiquetas se indican por pares y se forman de la siguient...
computación multimedia 1 Diseño Gráfico Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta>  ...  </nomb...
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big,  blockquote, body , br, button, caption, center, cit...
computación multimedia 1 Diseño Gráfico tres restricciones básicas que introduce XHTML
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>...
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas: Ejemplo correcto en XHTML: <p>Este es un pá...
3) El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a hre...
computación multimedia 1 Diseño Gráfico texto La mayor parte del contenido de las páginas HTML habituales está formado por...
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus párrafos, titulare...
Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes ...
computación multimedia 1 Diseño Gráfico dejemos un comentario Los comentarios son notas que ponemos en el código fuente de...
estructurar Párrafos  <p> Secciones  h1, h2, h3, h4, h5, h6   Marcado básico de texto  <em>, <strong>, < blockquote>   com...
Según las últimas Estadísticas de servidores Web elaborada por NetCraft, existen más de 100 millones de sitios web en todo...
computación multimedia 1 Diseño Gráfico hojas de estilo en cascada CSS
CSS es un lenguaje formal (que se escribe en un archivo de texto), que define la presentación de un documento Html, Xml o ...
computación multimedia 1 Diseño Gráfico Dónde escribo la parte de CSS? Hay dos opciones para insertar estilos en un docume...
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...
computación multimedia 1 Diseño Gráfico glosario básico CSS define una serie de términos que permiten describir cada una d...
▪  Regla:  cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de &quot;s...
▪  Declaración:  la declaración especifica los estilos que se aplicarán a los elementos. Está compuesta por una o más prop...
computación multimedia 1 Diseño Gráfico ¿cómo funciona?
En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. ...
computación multimedia 1 Diseño Gráfico selectores
Los selectores los utilizamos para elegir a que elementos se aplican las propiedades que escribimos. Hay diferentes tipos ...
También podemos elegir un elemento único utilizando su atributo  id . Para ello, empleamos la almohadilla: #menu { ... } c...
Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del ...
computación multimedia 1 Diseño Gráfico ahora si…¿preguntas?
Upcoming SlideShare
Loading in …5
×

XHTML+Inicio en CSS

1,467 views

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,467
On SlideShare
0
From Embeds
0
Number of Embeds
155
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XHTML+Inicio en CSS

  1. 1. Computación Multimedia 1 XHTML+CSS…
  2. 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. 3. computación multimedia 1 Diseño Gráfico Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta>
  4. 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. 5. computación multimedia 1 Diseño Gráfico tres restricciones básicas que introduce XHTML
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. computación multimedia 1 Diseño Gráfico hojas de estilo en cascada CSS
  16. 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. 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. 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. 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. 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. 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. 22. computación multimedia 1 Diseño Gráfico ¿cómo funciona?
  23. 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. 24. computación multimedia 1 Diseño Gráfico selectores
  25. 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. 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. 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. 28. computación multimedia 1 Diseño Gráfico ahora si…¿preguntas?

×