xhtml+inicio en css

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?