Upload
pandresnet
View
1.231
Download
1
Embed Size (px)
DESCRIPTION
Documento introductorio para entender la relación entre el modelo de escritura hipertextual XHTML y hojas de estilo.
Citation preview
Computación Multimedia 1XHTML+CSS…
computación multimedia 1Diseño Gráfico
Básico para recordarlas 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 >
computación multimedia 1Diseño Gráfico
Así, la estructura típica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta>
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 1Diseño Gráfico
computación multimedia 1Diseñ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>un enlace</a></p>
computación multimedia 1Diseño Gráfico
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="http://www.google.com">un enlace</a></p>
computación multimedia 1Diseño Gráfico
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
computación multimedia 1Diseño Gráfico
computación multimedia 1Diseño Gráfico
textoLa 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.
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 1Diseño Gráfico
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 1Diseño Gráfico
computación multimedia 1Diseño Gráfico
dejemos un comentarioLos 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 -->
estructurarPárrafos <p>
Secciones h1, h2, h3, h4, h5, h6
Marcado básico de texto <em>, <strong>, <blockquote>
computación multimedia 1Diseño Gráfico
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 1Diseño Gráfico
computación multimedia 1Diseñ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 Xhtml.
computación multimedia 1Diseño Gráfico
computación multimedia 1Diseñ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="nuestra_hoja.css" rel="stylesheet" type="text/css" />
computación multimedia 1Diseñ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.
computación multimedia 1Diseño Gráfico
glosario básicoCSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.
▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, un símbolo de "llave de cierre" (}).
▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
computación multimedia 1Diseño Gráfico
▪ 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 1Diseño Gráfico
computación multimedia 1Diseñ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.
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 1Diseño Gráfico
computación multimedia 1Diseño Gráfico
selectores
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 1Diseño Gráfico
También podemos elegir un elemento único utilizando su
atributo id. Para ello, empleamos la almohadilla:
#menu {
...
}
computación multimedia 1Diseño Gráfico
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="importante">Bla bla bla</p>
computación multimedia 1Diseño Gráfico
computación multimedia 1Diseño Gráfico
ahora si…¿preguntas?