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 >

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.



tres restricciones básicas que introduce XHTML

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:

Este es un párrafo con <a>un enlace</a>

2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:


Este es un párrafo con <a href="http://www.google.com">un enlace</a>

3) El valor de los atributos siempre se encierra con comillas:


Este es un párrafo con <a href="http://www.google.com">un enlace</a>


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:


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.


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.

estructurarPárrafos 

Secciones h1, h2, h3, h4, h5, h6

Marcado básico de texto , , <blockquote>

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.



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.


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" />

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.


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.


▪ 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.



¿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;

}



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 {

...

}


También podemos elegir un elemento único utilizando su

atributo id. Para ello, empleamos la almohadilla:

#menu {

...

}


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:

Bla bla bla


ahora si…¿preguntas?

xhtml+inicio en css

Design